/* ============================================================
   Portada TINORA — CSS transplantado del prototipo ratificado
   (artefacto d5e74f75). Colores = tokens congelados (tokens.css);
   aquí solo primitivos de composición + componentes del prototipo.
   ============================================================ */
/* BRAND-SYSTEM §6.4 — "el storefront y El Tino se parecen por SUERTE, no por
   contrato". Este bloque era la suerte: una escala tipográfica, una de espacio,
   una de radios y dos colores redeclarados aquí con los MISMOS números que el
   congelado. Idénticos hoy; a la primera enmienda de tokens.css, la portada se
   quedaba atrás en silencio. Ahora son alias: un solo origen, cero cambio visual.
   DEPENDENCIA: portada.css sólo carga después de tokens.css (las cuatro páginas
   que lo usan lo enlazan en ese orden). Sin él, estos alias quedan vacíos. */
:root{
  --font-p-caps:var(--font-caps);
  --font-p-tab:var(--font-tab);
  --pfs-100:var(--fs-100);--pfs-200:var(--fs-200);--pfs-300:var(--fs-300);
  --pfs-400:var(--fs-400);--pfs-500:var(--fs-500);--pfs-600:var(--fs-600);
  --pfs-700:var(--fs-700);--pfs-800:var(--fs-800);--pfs-900:var(--fs-900);
  --ps1:var(--space-1);--ps2:var(--space-2);--ps3:var(--space-3);--ps4:var(--space-4);
  --ps5:var(--space-5);--ps6:var(--space-6);--ps7:var(--space-7);--ps8:var(--space-8);
  --pr-chip:var(--r-chip);--pr-field:var(--r-field);--pr-card:var(--r-card);
  --p-elev:var(--elev-card);
}
.p-page{width:min(1160px,100%);margin:0 auto;padding:0 clamp(16px,3vw,40px) var(--ps8)}
/* La portada declaraba su propio margen entre secciones SOBRE el padding que
   site.css ya le da a todo <section>: 64 abajo + 64 de margen + 64 arriba = 192px
   de blanco entre bloque y bloque, medido. Cinco veces por página, en la única
   página que todo el tráfico ve primero, eso no se lee como aire: se lee como
   inacabado. Se retira el margen duplicado y la portada respira igual que el
   resto del sitio (128px), con una sola regla gobernando el ritmo. */
.p-page section{scroll-margin-top:var(--anchor-offset)}
.p-eyebrow{color:var(--caribe);font-weight:700;font-size:var(--pfs-200);margin-bottom:var(--ps1);
  font-family:var(--font-p-caps);letter-spacing:.02em;text-transform:uppercase}
.p-sechead{font-weight:900;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;text-wrap:balance;margin-bottom:var(--ps3)}
.p-lede{font-size:var(--pfs-400);color:var(--tinta-media);max-width:60ch}
.p-src{margin-top:var(--ps3);font-family:var(--font-p-tab);font-size:var(--pfs-100);color:var(--tinta-media);font-variant-numeric:tabular-nums}
.p-hero{padding-top:var(--ps7);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--ps6);align-items:start}
.p-hero h1{font-weight:900;font-size:clamp(32px,4.2vw,52px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance;max-width:20ch;margin-bottom:var(--ps3)}
.p-hero .p-lede{font-size:var(--pfs-500);max-width:52ch;margin-bottom:var(--ps5)}
.p-cta{display:flex;gap:var(--ps3);flex-wrap:wrap;align-items:center}
.p-cta--top{margin-top:var(--ps4)}
.p-note{font-size:var(--pfs-200);color:var(--tinta-media);margin-top:var(--ps2)}
/* El 88 estaba escrito a mano contra una cabecera que medía 61px: el aparte flotaba 27px
   por debajo de ella. Ahora se deriva del mismo token que la cabecera (--anchor-offset =
   --header-h + --space-3), así que los dos se mueven juntos por construcción. */
.p-aside{background:var(--sombra-metodo);border-radius:var(--pr-card);padding:var(--ps5);position:sticky;top:var(--anchor-offset);min-width:0}
.p-aside h2{font-family:var(--font-p-caps);font-size:var(--pfs-100);letter-spacing:.02em;text-transform:uppercase;color:var(--tinta-media);margin-bottom:var(--ps3)}
.p-aside__lead{font-size:var(--pfs-500);font-weight:700;line-height:var(--lh-snug);max-width:28ch}
.p-aside__number{margin:0;font-family:var(--font-display);font-size:clamp(48px,7vw,72px);
  font-weight:900;line-height:1;letter-spacing:-.035em;color:var(--tinta);
  font-variant-numeric:tabular-nums}
.p-aside__caption{margin:var(--ps2) 0 0;color:var(--tinta-media);font-size:var(--pfs-200);
  line-height:var(--lh-body)}
.p-aside__metrics{margin:var(--ps5) 0 0;border-top:1px solid var(--trazo)}
.p-aside__metrics>div{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--ps4);padding:var(--ps3) 0;border-bottom:1px solid var(--trazo)}
.p-aside__metrics dt{font-size:var(--pfs-200);color:var(--tinta-media)}
.p-aside__metrics dd{margin:0;font-family:var(--font-p-tab);font-size:var(--pfs-500);
  font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
.p-aside__list{list-style:none;margin:var(--ps5) 0 0;padding:0;border-top:1px solid var(--trazo)}
.p-aside__list li{display:grid;gap:var(--ps1);padding:var(--ps3) 0;border-bottom:1px solid var(--trazo)}
.p-aside__list strong{font-size:var(--pfs-300);color:var(--tinta)}
.p-aside__list span{font-size:var(--pfs-200);color:var(--tinta-media);line-height:var(--lh-body)}
.p-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--caribe);color:var(--ficha);
  font-weight:700;font-size:var(--pfs-400);border-radius:var(--pr-field);padding:12px 22px;text-decoration:none;
  transition:background-color var(--motion-living-fast) var(--ease-living),
             box-shadow var(--motion-living-fast) var(--ease-living),
             transform var(--motion-living-fast) var(--ease-living)}
/* §4h.2 — el hover vive dentro de @media (hover: hover) (R13): en táctil el toque deja
   el :hover pegado hasta el siguiente toque. Hover y active se separan por ELEVACIÓN,
   no por color; el press BAJA (--elev-0, sin desplazamiento) y no lleva transición,
   porque el contacto es instantáneo o no es contacto. El 0.2s escrito a mano pasa a los
   tokens de movimiento congelados. */
@media (hover: hover){
  .p-btn:hover{background:var(--caribe-prof);box-shadow:var(--elev-card);transform:translateY(-1px)}
}
.p-btn:active{background:var(--caribe-prof);box-shadow:var(--elev-0);transform:none;transition:none}
/* D-19 · UNA sola forma de fantasma en todo el sistema, unificada con .btn--ghost.
   La que despachaba aquí tenía dos defectos MEDIDOS (interaccion-precheck.py):
     · su filete --trazo mide 1.25:1 contra ficha, o sea no es frontera y el botón no se
       identifica como control (WCAG 2.2 SC 1.4.11);
     · no declaraba :hover, así que heredaba el del primario y su etiqueta tinta caía
       sobre caribe-prof a 1.76:1.
   La forma canónica: etiqueta y filete en caribe (6.22:1 sobre ficha en las dos), campo
   --surface-accent-soft en hover (caribe sobre caribe-tinte = 5.37:1).
   Sus :hover y :active se declaran DESPUÉS de .p-btn:hover: empatan en especificidad
   (0,2,0) y el desempate lo gana el orden. */
.p-btn--ghost{background:transparent;color:var(--action);box-shadow:inset 0 0 0 1.5px var(--action);border:0}
@media (hover: hover){
  .p-btn--ghost:hover{background:var(--surface-accent-soft)}
}
.p-btn--ghost:active{background:var(--surface-accent-soft);box-shadow:inset 0 0 0 1.5px var(--action-pressed);transition:none}
.p-calcgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--ps5);align-items:start;margin-top:var(--ps5)}
.p-calcgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-card{background:var(--ficha);border-radius:var(--pr-card);box-shadow:var(--p-elev);padding:var(--ps5)}
.p-card h3,.p-card h4{font-family:var(--font-p-caps);font-size:var(--pfs-100);letter-spacing:.02em;text-transform:uppercase;color:var(--tinta-media);margin:0 0 var(--ps3)}
.p-cfield{margin-bottom:var(--ps4)}
.p-cfield label{display:flex;justify-content:space-between;gap:var(--ps3);font-size:var(--pfs-300);font-weight:700;margin-bottom:var(--ps2)}
.p-cfield output{font-family:var(--font-p-tab);font-weight:600;font-variant-numeric:tabular-nums;color:var(--caribe-prof)}
.p-cfield input[type=range]{width:100%;accent-color:var(--caribe);height:28px}
.p-cnote{font-size:var(--pfs-100);color:var(--tinta-media);font-family:var(--font-p-tab);line-height:1.6;border-top:1px solid var(--trazo);padding-top:var(--ps3)}
.p-corow{display:flex;justify-content:space-between;gap:var(--ps3);padding:var(--ps2) 0;border-bottom:1px solid var(--trazo);font-size:var(--pfs-300)}
.p-corow b{font-family:var(--font-p-tab);font-weight:600;font-variant-numeric:tabular-nums}
.p-corow--total{border-top:2px solid var(--tinta);border-bottom:0;font-weight:700;margin-top:var(--ps2)}
.p-corow--total b{font-size:var(--pfs-500)}
.p-verdict{margin-top:var(--ps3);font-size:var(--pfs-300);font-weight:700}
/* §4c reglas 1 y 2 (ratificada 2026-08-19): el color habla del ESTADO y va en el filete
   y el campo, jamás en la letra de prosa corrida. Esto era tres líneas de párrafo teñidas
   de miel — la tríada de veredicto usada como color de texto, que es justo lo que la
   enmienda prohíbe para que el chip no deje de significar. */
.p-verdict{border-left:3px solid var(--trazo);padding:var(--space-3) var(--space-4);border-radius:var(--radius-1,6px);color:var(--tinta)}
.p-verdict[data-v="pos"]{border-left-color:var(--verde);background:var(--verde-tinte)}
.p-verdict[data-v="cond"]{border-left-color:var(--miel);background:var(--miel-tinte)}
.p-verdict[data-v="neg"]{border-left-color:var(--grafito);background:var(--sombra-metodo,#F4F6F8)}
.p-bridge{margin-top:var(--ps3);font-size:var(--pfs-200);color:var(--tinta-media);background:var(--caribe-tinte);border-radius:var(--pr-field);padding:var(--ps3) var(--ps4)}
.p-bridge a{font-weight:700}
.p-mipyme{display:flex;gap:10px;align-items:flex-start;font-size:var(--pfs-300);margin-bottom:var(--ps4);cursor:pointer}
.p-mipyme input{margin-top:3px;accent-color:var(--caribe)}
.esc2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ps4);margin-top:var(--ps6);align-items:start}
.esc2 .pelda{background:var(--ficha);border-radius:var(--pr-card);box-shadow:var(--p-elev);padding:var(--ps5);display:flex;flex-direction:column;gap:var(--ps2)}
.esc2 .pelda:nth-child(1){margin-top:var(--ps7)}
.esc2 .pelda:nth-child(2){margin-top:var(--ps5)}
.esc2 .pelda:nth-child(3){margin-top:var(--ps3)}
.esc2 .pelda:nth-child(4){margin-top:0}
/* El peldaño activo es un <a> en la portada, o sea una parada de tabulador. Su énfasis
   de reposo iba por `outline`, que con (0,2,0) vencía a la regla de foco :where() y
   dejaba esa parada SIN anillo distinguible: el mismo defecto D-14 por otra puerta.
   El énfasis de reposo pasa a filete INTERIOR y `outline` queda para el foco, que es el
   invariante declarado en site.css. Mismo grosor, mismo token, cero cambio de paleta. */
.esc2 .pelda--activa{box-shadow:inset 0 0 0 2px var(--caribe);background:var(--caribe-tinte)}
/* Peldaños 01 y 02 tienen destino; 03 y 04 todavía no. La tarjeta entera es el
   objetivo (Fitts: el precio y el nombre ya están ahí, el clic no debe buscar un
   enlace de texto). El subrayado se retira porque la tarjeta ES la superficie. */
a.pelda{text-decoration:none;color:inherit;transition:transform var(--motion-living-fast) var(--ease-living),box-shadow var(--motion-living-fast) var(--ease-living)}
/* §4h.3 — tarjeta-ENLACE: reposo --elev-card, hover --elev-sheet más 2px de subida,
   active de vuelta a --elev-card sin desplazamiento. D-20: la sombra escrita a mano era
   `.22` contra el `.20` del token --elev-sheet, o sea una sombra inventada casi idéntica.
   El titular va en --action DESDE EL REPOSO: eso, y no el hover, es lo que dice que la
   tarjeta lleva a algún sitio. Ningún color cambia al pasar por encima.
   Las tarjetas ESTÁTICAS (.p-card, .step, .stat, .trust, .contact-card, .competitive-lane)
   no llevan hover ni cursor ni elevación variable, y así se quedan: una superficie que se
   mueve y no lleva a ningún lado es una promesa incumplida. */
@media (hover: hover){
  a.pelda:hover{transform:translateY(-2px);box-shadow:var(--elev-sheet)}
}
a.pelda:active{transform:none;box-shadow:var(--elev-card);transition:none}
/* El anillo sigue el radio de la TARJETA, no el de un chip: 3px de separación para que
   caiga limpio fuera del --pr-card. */
a.pelda:focus-visible{outline-offset:3px}
a.pelda h3{color:var(--caribe)}
.esc2 .pn{font-family:var(--font-p-tab);font-size:var(--pfs-100);color:var(--tinta-media)}
.esc2 h3{margin:0;font-size:var(--pfs-500)}
.esc2 p{font-size:var(--pfs-300);color:var(--tinta-media);margin:0}
.esc2 .precio{font-family:var(--font-p-tab);font-variant-numeric:tabular-nums;font-weight:700;margin-top:auto}
.esc2 .precio s{opacity:.55;font-weight:400;margin-right:.3em}
.esc2 .prox{color:var(--tinta-media);font-weight:400}
/* ── «Método y límites» · Jade Palmer 2026-08-19 ──────────────────────────
   Dejó de ser lista: es una declaración con dos unidades y una firma. Cero
   ficha blanca, cero filete caribe, cero regla de --trazo. La ÚNICA línea de
   toda la sección es el filete de 2px del hueco, y significa algo.
   Dentro del campo, seis elementos comparten un borde izquierdo y ninguno
   lleva marcador. Repetir un marcador idéntico es lo que convierte texto en
   lista; retirarlo es lo que lo convierte en declaración. */
.p-metodo{background:var(--sombra-metodo);border-radius:var(--pr-field);
  padding:clamp(24px,5vw,64px);margin:var(--ps5) 0 0}
.p-metodo__u + .p-metodo__u{margin-top:var(--ps7)}
.p-metodo__guia{margin:0;max-width:34ch;font-size:var(--pfs-500);font-weight:700;
  line-height:var(--lh-snug);color:var(--tinta);text-wrap:pretty}
/* font-variant-numeric explícito: «6 de cada 19» es un ejemplo gramatical y
   jamás puede vestirse de cifra tabular. Ver §6. */
.p-metodo__cuerpo{margin:var(--ps3) 0 0;max-width:58ch;font-size:var(--pfs-400);
  line-height:var(--lh-body);color:var(--tinta-media);text-wrap:pretty;
  font-variant-numeric:normal}

/* LA RETENCIÓN · forma de DEMOSTRACIÓN: enseña una cifra que no se imprime.
   No es chip de veredicto (el chip cierra caja y lleva etiqueta ES).
   No es filete de estado (3px A LA IZQUIERDA sobre campo tintado).
   No es control deshabilitado, §4h.6 (caja completa de 1px --trazo).
   No es glifo de señal, §4e (retícula 24, trazo 2, silueta).
   No entra al registro de señales. No lleva verde, miel ni grafito jamás. */
.retencion{margin:var(--ps6) 0 0;padding:0;display:flex;flex-direction:column;
  align-items:flex-start}
.retencion__rotulo{margin:0 0 var(--ps1);font-family:var(--font-p-caps);font-weight:700;
  font-size:var(--pfs-100);letter-spacing:.02em;text-transform:uppercase;line-height:1;
  color:var(--tinta-media)}
/* 5ch = las cinco casillas de «31.6 %». Medido en Concourse 7 Tab a 34px:
   5ch = 100.3px y «31.6%» = 93.2px, así que el filete sobrepasa 3.6px por lado.
   Eso es corrección óptica, no holgura: un filete exactamente del ancho de sus
   glifos se lee corto. Sobre la pila de respaldo (mono) 5ch = «31.6%» exacto.
   Ambas medidas se toman contra la fuente DEL PROPIO elemento, así que la caja
   se automide. Longhands a propósito: con el atajo `font:` un fallo de parseo
   se lleva el ch consigo y el hueco encoge en silencio.
   ALTO = .7em, NO 1.12em. La tinta de «31.6%» a 34px mide 23.63px de ascendente
   (medido); 1.12em son 38.08 y los 14 de diferencia son interlínea, no cifra.
   Con 1.12em el filete quedaba 14px por DEBAJO de la línea base de la cifra y
   el rótulo flotaba a 42px percibidos del filete, más que los 24 que separaban
   el dispositivo de la prosa: por proximidad el rótulo se agrupaba con el
   párrafo. Con .7em el filete ES la línea base sobre la que la cifra se habría
   parado. No lo subas a 1.12em «para que respire»: rompe la agrupación. */
.retencion__hueco{width:5ch;height:.7em;
  font-family:var(--font-p-tab);font-weight:700;font-size:var(--pfs-800);
  line-height:1;font-variant-numeric:tabular-nums;
  border-bottom:2px solid var(--tinta-media)}
/* El pie es Concourse 3, NO Tab. Ver §5: Tab sólo se sirve en peso 7. */
.retencion__pie{margin:var(--ps2) 0 0;max-width:26ch;font-size:var(--pfs-100);
  line-height:var(--lh-snug);color:var(--tinta-media);text-wrap:balance}

/* Eslogan = corte 7, nunca 8 (TYPE-RULING §4.2). */
.p-firma{margin:var(--ps8) 0 0;font-size:clamp(var(--pfs-600),2vw,var(--pfs-700));
  font-weight:700;line-height:var(--lh-snug);letter-spacing:-.02em;color:var(--tinta)}
.p-cierre{background:var(--tinta);color:var(--ficha);border-radius:var(--pr-card);padding:var(--ps7) var(--ps6);text-align:center}
.p-cierre h2{font-weight:900;font-size:clamp(24px,3vw,36px);letter-spacing:-.02em;text-wrap:balance;margin-bottom:var(--ps3)}
.p-cierre p{color:var(--reversa-sec);max-width:52ch;margin:0 auto var(--ps5)}
.p-cierre__actions{display:flex;justify-content:center;gap:var(--ps3);flex-wrap:wrap}
.p-cierre .p-btn{background:var(--ficha);color:var(--tinta)}
.p-cierre .p-btn--ghost{background:transparent;color:var(--ficha);box-shadow:inset 0 0 0 1.5px var(--ficha)}
/* D-23 — este selector empata en especificidad con .p-btn:hover y gana por orden, así
   que el CTA de la banda oscura NO tenía ninguna respuesta al puntero. Su hover se
   declara aquí, con (0,3,0), dentro de la familia neutra: ficha oscurece a reversa-sec,
   que es su propio par congelado. Etiqueta tinta sobre reversa-sec = 8.61:1 (medido).
   El anillo de foco de esta banda ya cambia de token por R15 (.p-cierre en site.css). */
@media (hover: hover){
  .p-cierre .p-btn:hover{background:var(--reversa-sec)}
}
.p-cierre .p-btn:active{background:var(--reversa-sec);box-shadow:var(--elev-0);transform:none;transition:none}
@media (max-width:980px){
  .p-hero,.p-calcgrid,.p-calcgrid--3{grid-template-columns:1fr}
  .p-aside{position:static}
  .esc2{grid-template-columns:1fr}
  .esc2 .pelda{margin-top:0 !important}
}
@media (max-width:640px){
  .p-hero{padding-top:var(--ps5)}
  .p-cta{flex-direction:column;align-items:stretch}
  .p-cta .p-btn{width:100%}
  .p-cierre__actions{align-items:stretch;flex-direction:column}
  .p-cierre__actions .p-btn{width:100%}
  .p-cfield label{flex-direction:column;align-items:flex-start;gap:2px}
  .p-cfield input[type=range]{height:36px}
  .p-aside__metrics>div{align-items:flex-start}
}