/* Comprobador de subvenciones — "expediente en papel".
   Papel cálido, tinta, sello bermellón. Literata para títulos y lectura; Public Sans para la interfaz. */

@font-face { font-family: "Literata"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/literata-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/literata-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/publicsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/publicsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #f3efe6;        /* fondo: papel de expediente */
  --sheet: #fbf9f4;        /* hoja: formularios y resultados */
  --sheet-2: #efe9dc;
  --ink: #1d1b17;
  --ink-2: #4a463e;        /* texto secundario: tinta diluida, no gris */
  --rule: #ddd5c5;
  --rule-strong: #b9b0a0;
  --seal: #c2410c;         /* bermellón de sello */
  --seal-ink: #9a3412;
  --seal-soft: #f8e3d6;
  --warn: #8a5a00;  --warn-soft: #f6ebcd;
  --ok: #2f6b3a;    --ok-soft: #e2eedf;
  --info: #3b5568;  --info-soft: #e3e9ec;
  --on-ink: #fbf9f4;
  --focus: 0 0 0 3px color-mix(in srgb, var(--seal) 28%, transparent);
  --shadow-sheet: 0 1px 1px rgb(60 45 20 / .05), 0 10px 28px -12px rgb(60 45 20 / .22);
  --serif: "Literata", "Iowan Old Style", Georgia, serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --radius: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161412; --sheet: #1e1b18; --sheet-2: #27231f;
    --ink: #ece6da; --ink-2: #b8af9f; --rule: #332e28; --rule-strong: #4d463d;
    --seal: #ff7a45; --seal-ink: #ff9b6e; --seal-soft: #3a2117;
    --warn: #e9be62; --warn-soft: #33281a; --ok: #8fcf98; --ok-soft: #1c2b1e; --info: #a9c1d1; --info-soft: #1f272c;
    --on-ink: #161412;
    --shadow-sheet: 0 1px 1px rgb(0 0 0 / .3), 0 12px 30px -12px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--rule-strong) var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.55 var(--sans);
  font-feature-settings: "ss01"; caret-color: var(--seal); -webkit-font-smoothing: antialiased; }
::selection { background: var(--seal-soft); color: var(--ink); }
a { color: inherit; text-decoration-color: color-mix(in srgb, var(--seal) 70%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--seal-ink); } }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; border-radius: 3px; }
button, .button, summary, label, input[type=checkbox] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
code { font: .85em/1 var(--mono); background: var(--sheet-2); padding: .15em .4em; border-radius: 4px; }
.icon { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 1040px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }

/* Cabecera */
.site-header { border-bottom: 1px solid var(--rule); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: .95rem; letter-spacing: -.005em; }
.brand strong { font-weight: 700; }
.brand-mark { width: 28px; height: 28px; color: var(--seal); transform: rotate(-12deg); }
.lang { font-size: .875rem; font-weight: 600; text-decoration: none; padding: 6px 2px; border-bottom: 1.5px solid var(--rule-strong); }
@media (hover: hover) and (pointer: fine) { .lang:hover { border-color: var(--seal); } }

/* Portada */
.intro { display: grid; gap: 40px; align-items: center; padding: 56px 0 44px; }
@media (min-width: 880px) { .intro { grid-template-columns: 1.15fr 1fr; gap: 56px; padding: 72px 0 60px; } }
h1, h2, h3 { text-wrap: balance; }
h1 { font: 600 clamp(2rem, 1.35rem + 2.6vw, 3.1rem)/1.08 var(--serif); letter-spacing: -.022em; margin: 0 0 20px;
  font-variation-settings: "opsz" 72; }
.lead { font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); max-width: 56ch; margin: 0 0 22px; }
.lead strong { color: var(--ink); font-weight: 600; }
.privacy { display: inline-flex; gap: 8px; align-items: center; margin: 0; font-size: .9rem; font-weight: 600; color: var(--ok); }

.specimen { margin: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; padding: 18px 18px 14px;
  box-shadow: var(--shadow-sheet); transform: rotate(1.2deg); font-size: .82rem; }
.specimen table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.specimen th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  padding: 0 6px 8px; border-bottom: 1.5px solid var(--ink); }
.specimen td { padding: 9px 6px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.specimen td:nth-child(2) { white-space: normal; }
.specimen .num { text-align: right; }
.specimen tr.flag td { background: color-mix(in srgb, var(--seal-soft) 70%, transparent); }
.specimen tr.flag td.num { text-decoration: underline wavy var(--seal); text-decoration-thickness: 1.5px; text-underline-offset: 4px; font-weight: 700; }
.specimen figcaption { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; color: var(--seal-ink);
  font: italic 500 .9rem/1.4 var(--serif); }
.specimen .mark { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid currentColor; font: 700 .75rem/1 var(--sans); font-style: normal; margin-top: 1px; }

/* Formulario: tres pasos sobre una sola hoja */
.steps { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-sheet); }
.step { margin: 0; border: 0; padding: 28px 28px 30px; min-width: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.step + .step { border-top: 1px dashed var(--rule-strong); }
@media (min-width: 880px) {
  .step { grid-template-columns: 220px 1fr; column-gap: 36px; padding: 32px 36px 34px; }
  .step > :not(legend) { grid-column: 2; }
  .step > legend { grid-row: 1 / span 9; }
}
legend { float: left; width: 100%; padding: 0; margin: 0 0 16px; font: 600 1.3rem/1.2 var(--serif); letter-spacing: -.01em; }
.step-n { display: block; font: 600 .78rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--seal); margin-bottom: 8px; }
.step-n::before { content: "Paso "; }
:lang(ca) .step-n::before { content: "Pas "; }

label { display: block; font-size: .875rem; font-weight: 600; color: var(--ink); }
select, input:not([type=checkbox]):not([type=file]), textarea {
  display: block; width: 100%; margin-top: 6px; min-height: 44px; padding: 10px 12px; font: 400 16px/1.3 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 4px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
select:focus-visible, input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--ink); background: var(--sheet); box-shadow: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: .6; }
input[type=date], input[inputmode=decimal] { font-variant-numeric: tabular-nums; }
textarea { font: 14px/1.5 var(--mono); margin: 14px 0 12px; resize: vertical; tab-size: 12; }
input[type=checkbox] { accent-color: var(--seal); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 20px; margin-bottom: 18px; align-items: end; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .925rem; color: var(--ink-2); }
.check strong { color: var(--ink); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.note { margin: 12px 0 0; font-size: .875rem; color: var(--ink-2); max-width: 70ch; overflow-wrap: anywhere; }
.note strong { color: var(--ink); }
.note .icon { width: .9em; height: .9em; margin-left: 2px; }
.hint { font-size: .875rem; color: var(--ink-2); max-width: 72ch; margin: 0 0 14px; }
details.hint { margin: 0 0 20px; }
summary { cursor: pointer; width: fit-content; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .25em; }

button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  font: 600 .925rem/1 var(--sans); text-decoration: none; cursor: pointer; border-radius: var(--radius);
  border: 1px solid var(--ink); background: transparent; color: var(--ink); user-select: none;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) { button:hover, .button:hover { background: var(--sheet-2); color: var(--ink); } }
button:active, .button:active { transform: scale(0.97); }
.primary { background: var(--ink); color: var(--on-ink); padding: 12px 22px; font-size: 1rem; }
@media (hover: hover) and (pointer: fine) { .primary:hover { background: var(--seal-ink); border-color: var(--seal-ink); color: var(--on-ink); } }
.file-button { position: relative; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-button:focus-within { outline: 2px solid var(--seal); outline-offset: 2px; }
#file-name { margin: 0; }

/* Resultado: hoja de revisión con sello */
.results { margin-top: 28px; padding: 30px 28px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-sheet); scroll-margin-top: 16px; }
@media (min-width: 880px) { .results { padding: 36px 40px; } }
.results:focus { outline: none; }
.results h2 { font: 600 1.6rem/1.2 var(--serif); margin: 0 0 12px; }
.results h3 { font: 600 1.15rem/1.3 var(--serif); margin: 32px 0 12px; }
.results-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.summary { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-weight: 600; font-size: .85rem; font-variant-numeric: tabular-nums; }
.chip.error { background: var(--seal-soft); color: var(--seal-ink); }
.chip.aviso { background: var(--warn-soft); color: var(--warn); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }

.stamp { flex: none; width: 112px; height: 112px; margin: -8px -4px 0 0; color: var(--seal); }
.stamp.aviso { color: var(--warn); }
.stamp.ok { color: var(--ok); }
.stamp svg { display: block; width: 100%; height: 100%; font-family: var(--sans); opacity: .88; transform: rotate(-14deg);
  transition: transform 280ms var(--ease-out), opacity 200ms ease; }
@starting-style { .stamp svg { opacity: 0; transform: rotate(-14deg) scale(1.25); } }
@media (max-width: 520px) { .stamp { width: 84px; height: 84px; } }

.totals { margin: 0 0 26px; columns: 2 260px; column-gap: 40px; }
.totals div { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; break-inside: avoid; }
.totals div::after { content: ""; order: 2; flex: 1; border-bottom: 1.5px dotted var(--rule-strong); transform: translateY(-.3em); }
.totals dt { order: 1; font-size: .9rem; color: var(--ink-2); }
.totals dd { order: 3; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.findings { list-style: none; padding: 0; margin: 0; border-top: 1.5px solid var(--ink); }
.finding { display: grid; grid-template-columns: 5.5rem 1fr; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--rule);
  transition: opacity 240ms ease, transform 240ms var(--ease-out); transition-delay: calc(var(--i, 0) * 35ms); }
@starting-style { .finding { opacity: 0; transform: translateY(6px); } }
.finding.error { background: linear-gradient(to right, color-mix(in srgb, var(--seal-soft) 55%, transparent), transparent 70%); }
.finding .ref { font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; line-height: 1.35; }
.finding .ref small { display: block; font-weight: 400; color: var(--ink-2); font-size: .8rem; }
.finding .lvl { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.finding.error .lvl { color: var(--seal-ink); }
.finding.aviso .lvl { color: var(--warn); }
.finding.info .lvl { color: var(--info); }
.finding p { margin: 3px 0 0; font-size: .95rem; }
.finding .cite { font: italic .85rem/1.45 var(--serif); color: var(--ink-2); margin-top: 6px; }
@media (max-width: 520px) { .finding { grid-template-columns: 1fr; gap: 4px; } .finding .ref small { display: inline; margin-left: 6px; } }

.checklist { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 8px; }
.checklist label { display: flex; gap: 10px; font-weight: 400; font-size: .95rem; cursor: pointer; }
.checklist input:checked + span { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--seal); }
.waitlist { margin: 26px 0 0; padding: 16px 18px; background: var(--paper); border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  font: italic 400 1rem/1.5 var(--serif); }
.waitlist a { font-style: normal; font-family: var(--sans); font-weight: 600; }

/* Índice de guías */
.guides { margin: 64px 0 0; }
.guides h2 { font: 600 1.5rem/1.2 var(--serif); margin: 0 0 14px; }
.guides ul { list-style: none; padding: 0; margin: 0; border-top: 1.5px solid var(--ink); }
.guides a { display: flex; align-items: baseline; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--rule); text-decoration: none;
  font: 500 1.05rem/1.35 var(--serif); }
.guides a::after { content: "→"; margin-left: auto; color: var(--seal); font-family: var(--sans); transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .guides a:hover::after { transform: translateX(3px); } }

/* Guías: lectura */
.guide article { max-width: 66ch; padding: 56px 0 8px; font: 400 1.125rem/1.7 var(--serif); }
.guide h1 { margin-bottom: 26px; }
.guide h2 { font: 600 1.4rem/1.25 var(--serif); margin: 44px 0 12px; padding-top: 18px; border-top: 1px solid var(--rule); }
.guide p { margin: 0 0 16px; overflow-wrap: anywhere; }
.guide ul { padding-left: 1.1em; margin: 0 0 16px; }
.guide li { margin: 8px 0; padding-left: .2em; overflow-wrap: anywhere; }
.guide li::marker { color: var(--seal); }
.guide .icon { width: .9em; height: .9em; margin-left: 2px; }
.guide .cta { margin: 28px 0; }
.guide .button { font-family: var(--sans); }
.guide .waitlist { font-size: 1rem; }

/* Pie */
.site-footer { margin-top: 72px; padding: 28px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); color: var(--ink-2); font-size: .875rem; }
.site-footer p { max-width: 74ch; margin: 0 0 8px; }
.site-footer strong { color: var(--ink); }
.site-footer .meta { font-size: .8rem; }

@media (max-width: 560px) {
  .step, .results { padding: 22px 18px 24px; }
  .brand span { font-size: .9rem; }
  .row > * { flex: 1 1 auto; }
  .specimen { transform: none; font-size: .78rem; }
  .specimen td:nth-child(3), .specimen th:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .finding, .stamp svg, button, .button, .guides a::after { transition-property: opacity; transition-delay: 0s; }
  @starting-style { .stamp svg { transform: rotate(-14deg); } .finding { transform: none; } }
  button:active, .button:active { transform: none; }
}