/* Hero v7 — "Instrumento de precisión" sobre MINERAL (2026-07-31, dirección de Jorge,
   referencia qoves ~90%). Estructura v6 intacta: columna de copy a la izquierda con
   jerarquía por contraste, sujeto RECORTADO (matting BiRefNet) sangrado en la mitad
   derecha, franja de tres pilares. La capa de instrumento (goniómetro, cota, líderes,
   malla de 478 puntos) sigue la cara del vídeo frame a frame.
   Color: degradado mineral #52646A→#8299A5 con HALO CLÍNICO #B6CEDB localizado tras
   la cabeza (separa al sujeto y dirige la mirada); texto en hueso #F3EFE7 sobre la
   zona oscura; rótulos de medición en tinta con resplandor de halo (legibles tanto
   sobre mineral como sobre la luz); retícula en latón #CDB06A, subordinada a la cara. */

#hero-v5{position:relative;min-height:100svh;display:flex;flex-direction:column;
  overflow:hidden;padding-top:calc(var(--nav-h) + 24px);color:var(--bone);
  /* fondo PLANO estilo qoves (Jorge 31-jul it.4): sin radial — un campo mineral suave
     que aclara hacia la zona del retrato, con velo de tinta arriba.
     Desde 2026-08-05 el valor vive en `--campo-v`/`--campo` (styles.css) porque la pantalla
     de entrada del flujo usa el MISMO material. Los degradados no han cambiado. */
  background:var(--campo-v)}

/* Grano de dithering sobre el degradado. No es estética: el campo de desktop recorre
   ~6 niveles en 720px (un escalón cada ~120px), que es el perfil exacto que banda en
   pantallas de 8 bits. Chrome ya lo difumina solo —medido: cero mesetas— pero eso es
   política del motor, no del diseño, y no responde por Safari ni Firefox: el grano lo
   deja resuelto en cualquiera.
   `overlay` y no opacidad normal: el ruido está centrado en gris medio, y overlay deja
   el gris medio INTACTO, así que dispersa ±2 niveles arriba y abajo sin desplazar la
   luminancia del fondo (con mezcla normal, un gris al 8% tiraba la zona oscura +5
   niveles hacia el centro y se comía margen de contraste del copy).
   `feFuncA` aplana el alfa del turbulence a 1: sin eso el ruido llegaba a σ≈0,4, por
   debajo del escalón que debía romper. Va en ::before (z-index 0, primero en orden de
   árbol) para caer sobre el fondo y DEBAJO del sujeto, rótulos (z-4) y copy (z-5): la
   cara no se granula. Tesela de 170px con stitchTiles: se rasteriza una vez. */
#hero-v5{isolation:isolate} /* confina el overlay al hero: mezcla determinista */
#hero-v5::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.1;mix-blend-mode:overlay;background-size:170px 170px;
  background-image:var(--campo-grano)}

#hero-v5 .hv5-copy{position:relative;z-index:5;text-align:center;max-width:640px;
  margin:0 auto;padding:0 var(--pad)}
#hero-v5 .eyebrow{margin-bottom:14px;color:var(--bone);opacity:.92}
#hero-v5 h1{font-size:clamp(2.7rem,9.5vw,3.7rem);margin:.1em 0 .22em;
  color:var(--bone);font-weight:500;line-height:.9;letter-spacing:-.025em}
#hero-v5 h1 .h1b{display:block;color:var(--halo)} /* jerarquía por contraste, no por tamaño */
#hero-v5 .sub{color:var(--bone);max-width:44ch;margin:0 auto;font-size:clamp(.95rem,3.7vw,1.05rem);
  text-shadow:0 1px 3px rgba(23,32,36,.5),0 0 12px rgba(23,32,36,.35)} /* hueso pleno: 4,5:1 MEDIDO sobre el mineral medio */
#hero-v5 .cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:18px}

/* pills del hero: primario hueso/tinta, secundario translúcido con borde sutil.
   Sin sombras, sin degradados, sin efectos metálicos. */
#hero-v5 .btn-hlight{background:var(--bone);color:var(--ink);border-color:var(--bone)}
#hero-v5 .btn-hlight:hover{background:#fff;border-color:#fff}
#hero-v5 .btn-hglass{background:rgba(23,32,36,.28);color:var(--bone);
  border:1px solid rgba(243,239,231,.4)}
#hero-v5 .btn-hglass:hover{background:rgba(23,32,36,.42);border-color:rgba(243,239,231,.7)}

/* ---- franja de pilares (copy corto de Jorge, una línea + una línea) ----
   Base = móvil/apilado, donde la franja cae sobre el pie CLARO del degradado: tinta.
   En ≥1240 (sobre la zona sombreada del hero) pasa a hueso, desnuda — sin recuadros. */
.hv5-pillars{position:relative;z-index:4;padding:18px var(--pad) 22px;
  border-top:1px solid rgba(23,32,36,.2)}
.hv5-pillars .pi{padding:10px 0;border-top:1px solid rgba(23,32,36,.2)}
.hv5-pillars .pi:first-child{border-top:0;padding-top:0}
.hv5-pillars b{display:block;font-weight:600;font-size:.9rem;color:var(--ink)}
/* tinta, no #22333B: el pie del campo mide rgb(120,143,156) y ahi el gris azulado se queda
   en 3,9:1 — por debajo de AA. Nunca habia salido porque los pilares caian FUERA de la
   captura de _qa_contrast.py (el hero de 760-1239 no es de 100svh) y la sonda lo daba por
   "no presente". Con tinta son 4,8:1, igual que el titulo; la jerarquia la llevan el cuerpo
   y el peso, que es como ya funciona en >=1240. */
.hv5-pillars .pi span{display:block;margin-top:3px;font-size:.8rem;color:var(--ink);line-height:1.5}
@media (min-width:600px){
  .hv5-pillars{display:grid;grid-template-columns:repeat(3,1fr)}
  .hv5-pillars .pi{border-top:0;padding:0 18px;border-left:1px solid rgba(23,32,36,.25)}
  .hv5-pillars .pi:first-child{padding-left:0;border-left:0}
}

/* ---- plancha ---- */
.hv5-plate{position:relative;flex:1;min-height:330px;margin-top:8px}
/* Sujeto RECORTADO (sin fondo) flotando sobre el degradado del hero (F1.3b).
   .hv5-face define la caja de encaje (contain, anclado abajo): top desplaza la coronilla
   bajo el copy y el alto >100% sangra el pecho por el borde inferior — la camiseta apenas
   asoma. La <img> es el póster recortado (pinta al instante, fallback); el <video>
   empaquetado color+alfa jamás se muestra (fuente de decode del canvas .hv5-subject). */
.hv5-face{position:absolute;left:0;top:2%;width:100%;height:118%;object-fit:contain;
  object-position:center bottom;-webkit-user-select:none;user-select:none;pointer-events:none}
video.hv5-src{opacity:0} /* decode-only: oculto sin display:none para no frenar la reproducción */
/* saturate(.92): el término dominante del etalonaje que el shader aplica al vídeo
   (hero-v5.js, makeCompositor). Sin esto el fundido póster→vídeo cambiaría de tono y el
   camino de fallback se vería más cálido que el real. La compresión de altas luces no
   tiene equivalente en `filter`: queda una diferencia de ~6% en los píxeles más claros,
   solo durante el medio segundo del fundido. */
.hv5-poster{transition:opacity .5s ease;filter:saturate(.92)}
.hv5-poster.off{opacity:0} /* el compositor WebGL ya pinta frames en vivo */
/* Los dos canvas nacen INVISIBLES y layout() los revela al colocarlos (clase .placed).
   Sin esto un <canvas> sin atributos width/height mide 300x150 y se pinta en la esquina
   de la plancha hasta que llegan los datos por fetch; cuando layout() le da su rect real,
   ese salto es un layout shift medido: CLS 0,187 en escritorio y 0,115 en movil, con la
   malla como unico culpable (Lighthouse 12.8.2, 2026-08-06). No se usa opacity porque la
   regla de mas abajo le pone transicion y el relevo de sujeto la usa para otra cosa;
   visibility no transiciona, asi que el estado final es identico byte a byte. */
.hv5-subject,.hv5-mesh{visibility:hidden}
.hv5-subject.placed,.hv5-mesh.placed{visibility:visible}
.hv5-subject{position:absolute;left:0;top:0;pointer-events:none} /* JS lo ajusta al rect real */
.hv5-mesh{position:absolute;left:0;top:0;pointer-events:none} /* JS la ajusta al rect real de la cara */
.hv5-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}

/* Cambio de sujeto (2026-08-01): el hero alterna chico↔chica. Se atenúa 250 ms el sujeto y
   se retiran los trazos que lo miden —porque pertenecen a ESA cara— y al volver la malla se
   re-engancha sobre la nueva. Los chips NO se funden a propósito: se quedan en pantalla y
   solo cambian sus cifras, que es lo que vende la idea de un instrumento que no para.
   El SUJETO nunca baja de .38 (Jorge, 2026-08-01: "que no se quede sin nada en ningún
   momento"): antes caía a 0 justo en el instante del relevo y el hero se vaciaba. Sale la
   capa de medición, el retrato solo se atenúa, y hero-v5.js no retira esta clase hasta que
   el compositor ha pintado de verdad un frame del sujeto nuevo. */
.hv5-subject,.hv5-mesh,.hv5-svg{transition:opacity .25s ease}
.hv5-swapping .hv5-subject{opacity:.38}
.hv5-swapping .hv5-mesh,.hv5-swapping .hv5-svg{opacity:0}

/* capa de instrumento (SVG): latón, líneas finas, subordinada a la cara */
.hv5-svg line,.hv5-svg path{stroke:#CDB06A;fill:none;vector-effect:non-scaling-stroke}
/* eje medio: el trazo lo da un degradado vertical cuyas paradas coloca hero-v5.js sobre
   los landmarks vivos (fuerte fuera de la cara, tenue al entrar, cortado en los labios).
   opacity:1 a propósito — la modulación entera vive en el stop-opacity, en valores
   absolutos, para no tener que multiplicar dos números mentalmente. */
.hv5-svg .axis{opacity:1;stroke:url(#hv5-axisfade)}
.hv5-svg .third{opacity:.45;stroke-dasharray:3 4}
.hv5-svg .dim{opacity:.65}
.hv5-svg .bracket{opacity:.55;stroke-width:1.2}
.hv5-svg .cross{opacity:.75}
.hv5-svg .gonio{opacity:.8;stroke-width:1.2}
.hv5-svg .lead{opacity:.5}
.hv5-svg circle.anchor{fill:#CDB06A;stroke:none;opacity:.9}
@media (prefers-reduced-motion: no-preference){
  .hv5-svg circle.anchor{animation:hv5pulse 3.2s ease-in-out infinite}
  @keyframes hv5pulse{0%,100%{opacity:.9}50%{opacity:.45}}
}

/* choreografía de ensamblado: cada grupo entra con .on
   (gframe = esquinas de encuadre, lo primero que "adquiere" al sujeto) */
.hv5-svg g{opacity:0;transition:opacity .55s ease}
.hv5-svg g.on{opacity:1}
.hv5-svg g.gaxis{transition-duration:.7s}
.hv5-svg g.gframe{transition-duration:.6s}

/* métricas: texto mono DESNUDO (Jorge 31-jul it.4: sin recuadros — minimalista).
   La legibilidad la sostiene el FONDO, como en qoves: campo plano con la zona
   izquierda más oscura (sombra diagonal de la plancha en ≥1240) y el flanco derecho
   atenuado; el hueso lee sobre mineral oscuro y sobre el pelo. Sombra de tinta suave
   solo para asentar el trazo. Contraste MEDIDO en vivo por el QA. */
/* .66rem = 10,6px. Venían a .58rem (9,3px): mono, en mayúsculas y con tracking ancho,
   eso queda por debajo de lo cómodo, y es justo el texto que sostiene el claim de que
   aquí se MIDE. El tracking baja de .13 a .115em para que el rótulo no crezca de ancho
   más de lo que los gutters laterales admiten. */
.hv5-m{position:absolute;z-index:4;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.115em;text-transform:uppercase;color:var(--bone);line-height:1.5;
  white-space:nowrap;opacity:0;transition:opacity .6s ease;
  text-shadow:0 1px 2px rgba(23,32,36,.88),0 0 16px rgba(23,32,36,.72)}
.hv5-m.on{opacity:1}
/* VELO LOCAL BAJO CADA RÓTULO (2026-08-20). El hero se mide EN VIVO y el fotograma cambia: con
   solo la sombra, los rótulos y las cifras pasaban a 4,3-4,4:1 en un fotograma y caían a 3,6:1
   en el siguiente (medido, dos corridas seguidas de `_qa_contrast.py`). Es el mismo diagnóstico
   que ya está escrito aquí abajo para el latón: **el problema es el fondo, no la sombra** — una
   sombra sigue al glifo y deja limpio el resto de la caja de tinta, que es justo por donde entra
   la piel iluminada.
   Se pone una elipse de tinta MUY suave detrás de cada rótulo: cubre la caja entera, se funde a
   cero antes del borde (no dibuja pastilla ni recuadro) y baja el peor píxel sin tapar la foto.
   Solo ≥760: en móvil los rótulos ya van sobre la banda de tinta y pasan con holgura. */
@media (min-width:760px){
  .hv5-m::before{content:"";position:absolute;inset:-11px -22px;z-index:-1;pointer-events:none;
    border-radius:12px;
    background:radial-gradient(115% 135% at 50% 50%,rgba(23,32,36,.58) 0%,
      rgba(23,32,36,.34) 52%,rgba(23,32,36,0) 100%)}
}
/* Los valores van en HUESO SIEMPRE — mientras cuentan, ya clavados y al refrescarse
   (decisión de Jorge, 2026-08-08; móvil ya lo hacía desde el 08-08 por la mañana).
   Hasta hoy contaban en latón #CDB06A, "señal instrumental" de que se está midiendo, y
   volvían a hueso al clavarse. **Ese estado fallaba AA**: sobre el campo mineral el latón
   mide 2,7-3,2:1 (mínimo 4,5) y no es un parpadeo — es el primer segundo por métrica que ve
   todo el que abre la página, y llevaba así desde el 01-08. Comprobado que no lo salva el
   halo (reforzado hasta casi un plato de tinta se queda en 3,5:1) ni otro tono de oro: sobre
   ese fondo ni el hueso llega a 5:1, así que el problema es el fondo, no la sombra.
   Se renuncia al destello dorado a cambio de una cifra legible. El latón sigue vivo en el
   hero donde SÍ cumple: la retícula, los anclajes y el filete (7,9:1 sobre tinta).
   Las clases `.vset`/`.vlive`/`.hv5-counted` siguen puestas por hero-v5.js y las sigue
   forzando `_qa_contrast.py` para medir el peor estado; simplemente ya no cambian el color. */
.hv5-m b{display:block;font-size:1.08rem;font-weight:500;letter-spacing:.04em;
  color:var(--bone);
  text-shadow:0 1px 2px rgba(23,32,36,.88),0 0 16px rgba(23,32,36,.72)}
.hv5-m.l{text-align:right}
.hv5-m.r{text-align:left}
.hv5-m.corner b{display:inline;font-size:.78rem}
/* lectura de forma: esquina superior derecha de la plancha */
.hv5-plate .hv5-m.corner{top:14px;right:var(--pad);left:auto;bottom:auto}

/* ---- móvil <760: el texto va ENCIMA de la foto (revisión 2 de Jorge, 08-08) ----
   Historia corta, porque explica cada número de aquí abajo:
     · plan 007 — el hero pasó de dos viewports a uno.
     · revisión 1 (07-08) — se quitó la banda reservada de la nav y el corte duro de 40 px.
     · revisión 2 (08-08) — Jorge, comparando su iPhone con qoves.com otra vez:
         (a) «las medidas de tercios y las demás sobran, como mucho poner únicamente los
             NÚMEROS alrededor de la cara» → desaparecen los rótulos y la fila al pie; quedan
             las tres cifras vivas flanqueando el rostro, sin una sola palabra.
         (b) «has recortado y dejado el espacio debajo con las cosas; qoves lo hace ENCIMA,
             pone un ligero degradado negro por donde el texto» → se acaba la partición
             plancha-arriba / banda-abajo: la foto ocupa el pliegue ENTERO y el copy flota
             sobre ella con un velo. Copy y plancha pasan a absolutos: ya no hay flex que
             reparta altura, hay una imagen y un texto encima.
         (c) «la cabeza no se sale por arriba» → el pelo arranca en `--hv5-top` y el retrato
             se dimensiona para caber, no al revés. La coronilla ya no se recorta nunca.
   Diferencia material con qoves que condiciona el velo: su modelo lleva camiseta NEGRA, así
   que su degradado puede ser levísimo y el texto se sigue leyendo. El nuestro va sin camiseta
   y bajo el texto hay piel iluminada: a 0,60 de tinta el hueso cae a 4,2:1 sobre píxel real.
   Por eso el velo llega a ~0,78 donde empieza el texto — deja ver el cuerpo, pero no es tan
   sutil como el suyo. No es una elección estética: es el mínimo que pasa AA. */

.hv5-fold{display:contents} /* ≥760: el envoltorio no existe para el layout */

@media (max-width:759px){
  /* --hv5-top   dónde arranca el PELO (bajo la nav, que acaba en 72; a 24 el pelo asoma
                 entre el logotipo y el botón, que era la pega 1 de la revisión anterior)
     --hv5-ramp  longitud del velo ANTES del texto; arranca justo en la barbilla
     --hv5-copyh alto del bloque de texto, medido en este build. Solo entra en el tope de
                 tamaño del retrato: si se queda corto, el retrato sale algo más pequeño de
                 lo que cabría — nunca roto. */
  #hero-v5{--hv5-peek:72px;--hv5-top:24px;--hv5-ramp:118px;--hv5-copyh:224px;
    min-height:0;padding-top:0}

  .hv5-fold{display:block;position:relative;height:calc(100svh - var(--hv5-peek))}

  /* La plancha ES el pliegue entero. El degradado va en su FONDO, o sea DETRÁS del sujeto:
     el campo mineral aclara hacia abajo y dejaba una repisa clara a los lados del cuello.
     Oscurecerlo por detrás la resuelve sin tocar un píxel de piel; encima habría apagado
     también al sujeto. */
  .hv5-plate{position:absolute;inset:0;margin:0;padding:0;min-height:0;overflow:hidden;
    background:linear-gradient(180deg,rgba(23,32,36,0) 26%,rgba(23,32,36,.55) 62%,
      rgba(23,32,36,.88) 100%)}

  /* Viñetas laterales, el mismo recurso que qoves usa en su flanco oscurecido y que este
     hero ya aplica entre 760 y 1239. No es decoración: las dos cifras viven en los bordes,
     que es donde el campo mineral está MÁS CLARO, y ahí `interocular` medía 4,5:1 clavado.
     Y no es solo el estado quieto: mientras la cifra CUENTA va en latón, que sobre el
     campo se queda en 4,0:1 — la viñeta es lo único que puede bajar ese fondo. z-2: por encima del
     retrato, por debajo de las cifras (z-4). La máscara evita el escalón donde arranca. */
  .hv5-plate::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,rgba(23,32,36,.46) 0,rgba(23,32,36,0) 28%,
      rgba(23,32,36,0) 72%,rgba(23,32,36,.46) 100%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px);
    mask-image:linear-gradient(180deg,transparent 0,#000 90px)}

  /* Velo superior: la nav no se apoya en ningún fondo conocido, cae sobre pelo o campo.
     Este degradado es lo que sostiene el contraste del logotipo — se mide, no se supone. */
  .hv5-plate::before{content:"";position:absolute;left:0;right:0;top:0;height:112px;z-index:3;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(23,32,36,.52) 0,rgba(23,32,36,.26) 48%,rgba(23,32,36,0) 100%)}

  /* GEOMETRÍA DEL RETRATO — una fórmula, no constantes por breakpoint. Del fotograma
     (1248×1656, proporción .753623) se miden tres filas, en fracción de su alto:
       pelo     y=117    → .070652
       frente   y=457,5  → .276268
       barbilla y=1117,5 → .674819
     La distancia pelo→barbilla, que es lo que hay que hacer caber, son .604167 del fotograma
     (1/.604167 = 1,655172).
     · `top` clava el PELO en `--hv5-top`: la coronilla no se sale nunca por arriba.
     · `--hv5-F` (alto del fotograma en pantalla) sale de un `clamp` de tres términos:
         SUELO 132,7vw + 16px — el fotograma tiene que ser MÁS ANCHO que la pantalla. Desde
           la fila 1407/1656 el sujeto toca los bordes del fotograma, así que ahí su silueta
           es una línea RECTA vertical; si el fotograma cabe dentro de la pantalla, esa recta
           se ve — medido: 13/255 de salto a los lados del cuerpo, un canto que no es
           anatómico. Con el fotograma desbordando, el corte cae fuera y el hombro se
           disuelve solo. (132,7 = 100/,753623.)
         TALLA lo que quepa dejando la barbilla justo donde arranca el velo.
         TECHO 180vw — tope de nitidez: por encima se interpola un original de 1248 px.
       Si el teléfono es tan bajo que el suelo gana, la barbilla entra unos píxeles en el
       arranque del velo (donde la tinta va al 8 %: imperceptible). Ese es el modo de fallo
       elegido; la cabeza no se recorta nunca.
     `max-width:none` NO es opcional: `img,svg{max-width:100%}` (styles.css) recortaba el
     desbordamiento en silencio y la cara se quedaba en el 44% del ancho en vez del 56%. */
  #hero-v5{--hv5-F:clamp(calc(132.7vw + 16px),
    calc((100svh - var(--hv5-peek) - var(--hv5-copyh) - var(--hv5-ramp) - var(--hv5-top))
      * 1.655172),
    180vw)}
  .hv5-face{max-width:none;bottom:auto;height:var(--hv5-F);
    width:calc(var(--hv5-F) * .753623);
    left:calc((100% - var(--hv5-F) * .753623) / 2);
    top:calc(var(--hv5-top) - var(--hv5-F) * .070652);
    object-position:center top}

  /* LOS NÚMEROS, SIN UNA PALABRA (decisión de Jorge). El rótulo no se borra del DOM: se
     esconde a la vista y sigue estando para un lector de pantalla — «0,86» a secas no
     significa nada dicho en voz alta. Al ser absoluto tampoco cuenta para el ancho del
     rótulo, que es lo que hero-v5.js mide para decidir los gutters: con solo la cifra, los
     tres números se pegan a los bordes y dejan el rostro entero libre.
     La forma («OVALADA») se retira en móvil: es una palabra, no un número. */
  .hv5-m span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  /* Solo DOS cifras, una a cada lado, y no es por espacio: `largo/ancho` (1,21-1,24) e
     `interocular` (1,18-1,28) se solapan de rango, así que a menudo mostraban el MISMO
     número a la vez — con rótulo se entendía, sin rótulo parece un fallo. `tercios`
     (0,82-0,87) e `interocular` no pueden coincidir jamás. */
  .hv5-m[data-m=sym],
  .hv5-m[data-m=canthal],
  .hv5-m[data-m=gonial],
  .hv5-m[data-m=prop],
  .hv5-m.corner{display:none}
  .hv5-m.l{text-align:left}   /* las columnas se anclan al MARGEN (hero-v5.js, rama narrow):
     la izquierda alinea a la izquierda y la derecha a la derecha, para que los números
     caigan a plomo con el copy de abajo en vez de flotar hacia el centro. */
  .hv5-m.r{text-align:right}
  /* El hueso de la cifra ya no se declara aquí: desde el 08-08 es el color base en todas las
     anchuras (ver la nota de `.hv5-m b` arriba). Lo que sí es propio del móvil es el cuerpo
     algo menor y el halo más profundo — la cifra cae desnuda sobre el campo mineral del
     flanco, el fondo más claro del hero, y con el halo de escritorio `interocular` medía
     4,5:1 clavado, el mínimo de AA sin un punto de margen. El halo ES el fondo que se mide
     (la sonda mide el peor píxel con el texto en transparente y el text-shadow se sigue
     pintando), así que profundizarlo sube el ratio de verdad: 5,7-6,7:1. */
  .hv5-m b{font-size:1.02rem;letter-spacing:.04em;
    text-shadow:0 1px 2px rgba(23,32,36,.8),0 0 10px rgba(23,32,36,.9),0 0 20px rgba(23,32,36,.6)}

  /* EL COPY, ENCIMA DE LA FOTO. Absoluto y pegado abajo: la foto ocupa el pliegue entero y
     esto flota sobre ella. El velo arranca transparente en la barbilla y llega a .78 donde
     empieza el texto — ver la nota de la cabecera sobre por qué no puede ser más suave. */
  #hero-v5 .hv5-copy{position:absolute;left:0;right:0;bottom:0;z-index:5;
    max-width:none;margin:0;text-align:left;
    padding:var(--hv5-ramp) var(--pad) calc(18px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,rgba(23,32,36,0) 0,
      rgba(23,32,36,.10) calc(var(--hv5-ramp) * .30),
      rgba(23,32,36,.36) calc(var(--hv5-ramp) * .60),
      rgba(23,32,36,.62) calc(var(--hv5-ramp) * .84),
      rgba(23,32,36,.78) var(--hv5-ramp),
      rgba(23,32,36,.93) 100%)}
  #hero-v5 .eyebrow{margin-bottom:6px}
  #hero-v5 h1{font-size:clamp(1.95rem,8.4vw,2.5rem);margin:.06em 0 .16em}
  #hero-v5 .sub{font-size:.9rem;max-width:34ch;margin:0}
  #hero-v5 .cta{justify-content:flex-start;margin-top:13px;gap:9px}
  #hero-v5 .cta .btn{font-size:.88rem;padding-left:16px;padding-right:16px}

  /* Los pilares pasan a HUESO. Al acortarse el hero, la franja quedó sobre el pie claro del
     campo (rgb 109,129,140) y la tinta ahí mide 4,1:1 — por debajo de AA, y con tinta no hay
     margen: es el token más oscuro que existe, así que el que tiene que cambiar es el fondo.
     Hueso lo deja en 14,4:1 y además hace de señal: es la superficie del `body`, así que lo
     que asoma bajo el pliegue se lee como «aquí sigue la página». */
  .hv5-pillars{background:var(--bone)}
}

/* Pantallas de alto MEDIO. Importa más de lo que parece: en iOS Safari `100svh` es el
   viewport CON la barra de direcciones, y la captura de Jorge da ~654 px útiles en un iPhone
   cuya pantalla mide 844. O sea que lo que ve un móvil de verdad es este tramo y el de abajo,
   no el alto. Se acorta el velo para que el retrato no tenga que encoger tanto. */
@media (max-width:759px) and (max-height:820px){
  #hero-v5{--hv5-ramp:98px}
}

/* Pantallas BAJAS (iPhone SE/8, y cualquier iPhone con la barra de direcciones puesta).
   El copy mide menos —los cuerpos bajan— y ajustar `--hv5-copyh` es lo que devuelve tamaño
   de cara: sin él la fórmula creería que sobran 28 px de texto y encogería el retrato. */
@media (max-width:759px) and (max-height:720px){
  #hero-v5{--hv5-peek:56px;--hv5-ramp:76px;--hv5-copyh:196px}
  #hero-v5 .eyebrow{margin-bottom:3px}
  #hero-v5 h1{font-size:1.72rem;margin:.04em 0 .12em}
  #hero-v5 .sub{font-size:.86rem}
  #hero-v5 .cta{margin-top:10px}
  #hero-v5 .hv5-copy{padding-bottom:12px}
  .hv5-plate::before{height:96px}
}
/* Pantallas ESTRECHAS (360 px y por debajo: Android de gama media, iPhone SE/mini a 375).
   Aquí el copy envuelve más líneas —medido: 259 px de texto contra 216 en 390— y eso empuja
   la barbilla hacia el velo, porque `--hv5-copyh` es lo que la fórmula descuenta antes de
   dimensionar el retrato. Se corrige por los dos lados: se declara el alto real del copy y se
   aprieta un punto el cuerpo, que es de donde salen esas líneas de más. Va DESPUÉS de los
   tramos de altura a propósito: misma especificidad, gana el orden. */
@media (max-width:379px){
  #hero-v5{--hv5-copyh:260px}
  #hero-v5 h1{font-size:1.62rem}
  #hero-v5 .sub{font-size:.83rem;max-width:31ch}
}
@media (max-width:379px) and (max-height:720px){
  /* El caso más apretado que existe. Aquí `--hv5-F` ya lo fija el SUELO (el fotograma tiene
     que desbordar la pantalla), así que subir `--hv5-copyh` no sube la barbilla: lo único que
     queda es acortar el velo, porque su arranque baja con él y la barbilla deja de quedar
     dentro. Con 46 px la tinta sobre el mentón se queda en 0,06 (se mide en _qa_hero_movil). */
  #hero-v5{--hv5-copyh:244px;--hv5-peek:48px;--hv5-ramp:46px}
  #hero-v5 h1{font-size:1.54rem}
}

@media (min-width:760px){
  #hero-v5{padding-top:calc(var(--nav-h) + 40px)}
}
/* tramo apilado 760-1239 (tablet horizontal / portátil estrecho): copy compacto y
   plancha con presencia; el pecho se recorta en el borde de la plancha para no
   invadir la franja de pilares. El hero crece con su contenido (sin 100svh forzado). */
@media (min-width:760px) and (max-width:1239px){
  #hero-v5{min-height:0}
  /* viñetas laterales suaves sobre la plancha: los rótulos flanquean la cara en los
     bordes, donde el campo plano quedaba claro (2,8:1 medido) — como el lateral
     oscurecido de qoves, en simétrico */
  /* rampa desde el 58% y .58 en el borde (antes 66% / .5): al subir los rótulos a
     10,6px los glifos alcanzan píxeles más claros del flanco y el valor derecho caía a
     4,4:1. Medido, no estimado (_qa_contrast.py, vista "medio"). */
  /* la máscara vertical evita el escalón donde arranca la plancha: la viñeta entra
     en 56px en vez de aparecer de golpe (el corte ya se notaba antes de profundizarla) */
  .hv5-plate::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    background:linear-gradient(90deg,rgba(23,32,36,.58) 0%,rgba(23,32,36,0) 42%,rgba(23,32,36,0) 58%,rgba(23,32,36,.58) 100%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 56px);
    mask-image:linear-gradient(180deg,transparent 0,#000 56px)}
  #hero-v5 h1{font-size:clamp(2.4rem,3.9vw,3rem)}
  #hero-v5 .sub{max-width:56ch}
  #hero-v5 .cta{margin-top:14px}
  .hv5-plate{min-height:min(58svh,620px);overflow:hidden}
  /* 126%: el recorte inferior se queda ANTES de la fila ~1323 del fotograma, donde los
     hombros tocan los bordes — así el corte del matte nunca flota sobre el fondo */
  .hv5-face{top:1%;height:126%}
}

/* ---- desktop ancho: composición qoves ----
   Columna de copy a la izquierda sobre la zona oscura del degradado (ahí es donde
   el hueso lee mejor), sujeto en la mitad derecha con el halo clínico justo detrás
   de la cabeza, pilares abajo a la izquierda. Los rótulos de métricas flanquean la
   CABEZA (gutters por bbox de landmarks, hero-v5.js layout()). Degradado del brief
   2026-07-31: se conserva prácticamente igual. */
@media (min-width:1240px){
  /* fondo PLANO estilo qoves (it.4): sin radial — campo mineral que aclara hacia el
     retrato (~62%) y se atenúa en el flanco derecho (donde viven los rótulos); la
     oscuridad de la izquierda la pone la sombra diagonal de la plancha (::after) */
  #hero-v5{padding-top:0;background:var(--campo)}
  /* zona izquierda más oscura, como qoves: sombra diagonal SOBRE la plancha (cubre
     también al sujeto cuando entra en ella — el hombro queda en penumbra, natural).
     Es la capa que sostiene el contraste de copy, rótulos izquierdos y pilares. */
  .hv5-plate::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    background:linear-gradient(80deg,rgba(23,32,36,.6) 0%,rgba(23,32,36,.42) 42%,rgba(23,32,36,0) 68%)}
  /* posición y tamaños calibrados contra qoves a 1999px: su bloque arranca al ~10,3%
     del ancho (nosotros íbamos al 5,5% — "muy a la izquierda") y su H1 mide ~72px */
  #hero-v5 .hv5-copy{position:absolute;left:max(calc(var(--pad) + 18px),10vw);top:50%;
    transform:translateY(-54%);margin:0;padding:0;text-align:left;width:min(560px,34vw)}
  #hero-v5 h1{font-size:clamp(2.8rem,3.85vw,4.5rem)}
  #hero-v5 .sub{margin:0;max-width:34ch;font-size:1.05rem}
  #hero-v5 .cta{justify-content:flex-start;margin-top:32px}
  .hv5-plate{position:absolute;inset:0;margin:0;min-height:0}
  /* Escala qoves + expansión SOLO hacia la esquina superior derecha (it.4): cabeza
     ≈59% del alto (coronilla sube a ~26%, centro pasa a ~64%); el corte inferior no
     cambia — sigue cayendo ANTES de la fila ~1323 del fotograma donde los hombros
     tocan los bordes, así los laterales ni salen. Corte inferior DURO, sin fundido. */
  .hv5-face{left:auto;right:0;width:72%;top:14%;height:109%;object-position:center top}
  /* lectura de forma bajo la barra, en la esquina derecha */
  .hv5-plate .hv5-m.corner{top:96px;right:var(--pad)}
  /* pilares: columnas de ancho AUTO (flex) — cada título y cada descripción en UNA
     línea (copy corto de Jorge); el grid de 3×1fr partía "Pasos adaptados a tus
     objetivos" en dos */
  /* pilares desnudos, como qoves: los sostiene la sombra diagonal de la izquierda
     (el 3er pilar entra en el hombro del sujeto — que ahí queda en penumbra) */
  .hv5-pillars{position:absolute;left:max(calc(var(--pad) + 18px),10vw);bottom:26px;
    display:flex;width:auto;max-width:70%;border-top:0;padding:0;z-index:5}
  .hv5-pillars .pi{flex:0 0 auto;white-space:nowrap;padding:0 20px;border-left:1px solid rgba(243,239,231,.22)}
  .hv5-pillars .pi:first-child{padding-left:0;border-left:0}
  .hv5-pillars b{color:var(--bone);text-shadow:0 1px 2px rgba(23,32,36,.5)}
  .hv5-pillars .pi span{font-size:.78rem;color:var(--bone);text-shadow:0 1px 2px rgba(23,32,36,.5)}
}

@media (prefers-reduced-motion: reduce){
  .hv5-svg g,.hv5-m,.hv5-m b{transition:none}
}

/* La sección "El recorrido" (#evolucion) vive desde la landing v2 en landing.css:
   este archivo queda solo-hero. El JS del scan-wipe sigue en hero-v5.js. */

/* ============ TRANSPARENCIA REDUCIDA ============
   Lo único translúcido del hero sobre contenido real es la pastilla secundaria, que flota
   sobre el clip. Pasa al color OPACO que ya aparenta hoy sobre el medio del degradado
   (tinta .28 sobre #556770 = #44535B), así que a ojo no cambia: lo que cambia es que deja
   de depender de lo que haya detrás. Hueso encima: 6,95:1 medido. El grano del campo
   (::before con mix-blend-mode) no entra: no hay contenido debajo, es el propio fondo. */
@media (prefers-reduced-transparency: reduce){
  #hero-v5 .btn-hglass{background:#44535B;border-color:rgba(243,239,231,.7)}
  #hero-v5 .btn-hglass:hover{background:#3A484F;border-color:#F3EFE7}
}
/* En móvil quedan DOS superficies translúcidas sobre contenido real (el rostro): el velo
   que sostiene la nav y la entrada en degradado de la banda. Las dos pasan a tinta plena —
   el material que ya aparentan, sin depender de lo que haya detrás. El velo además se
   recorta al alto de la nav: a 118 px de tinta opaca se tragaría media cabeza.
   (Los rótulos ya no llevan chip: viven sobre el zócalo, que es tinta sólida de serie.) */
@media (prefers-reduced-transparency: reduce) and (max-width:759px){
  .hv5-plate::before{height:var(--nav-h);background:var(--ink)}
  #hero-v5 .hv5-copy{background:var(--ink)}
}

/* ============ CONTRASTE ALTO ============
   Aquí no hay vidrio: hay texto hueso sostenido por `text-shadow` sobre un clip que se
   mueve. §14 pide fondo casi sólido con borde definido, así que:
   · los rótulos de métrica recuperan el chip de tinta (el patrón que el propio proyecto
     midió en ≈11:1 antes de desnudarlos por diseño el 31-jul) — 14,44:1 sobre tinta;
   · los pilares del modo ancho pasan a placa de tinta;
   · las viñetas y la sombra diagonal, que son las capas que de verdad sostienen el
     contraste del copy, se profundizan en vez de meter una caja detrás del H1.
   OJO: el chip de los rótulos cambia su ANCHO, y hero-v5.js mide ese ancho en cada
   layout() para decidir los gutters y el plegado de columna. El JS se adapta solo, pero
   hay que verificarlo a 1240/1280/1456/1999 px. Consultas PLANAS, no anidadas: es el
   patrón del resto del archivo. */
@media (prefers-contrast: more){
  .hv5-m{text-shadow:none}
  .hv5-m b{text-shadow:none}
}
@media (prefers-contrast: more) and (min-width:760px){
  .hv5-m{background:var(--ink);padding:.4em .6em;border-radius:7px}
}
/* En móvil los rótulos ya están sobre tinta sólida (el zócalo) y miden 14,4:1, así que no
   hace falta chip: lo único que se puede subir es el rótulo, que va a hueso al 74% para
   dejar mandar al valor. Con contraste alto esa jerarquía se sacrifica y pasa a hueso pleno.
   La banda del copy pierde su entrada en degradado y el velo de la nav se vuelve sólido. */
@media (prefers-contrast: more) and (max-width:759px){
  .hv5-m{color:var(--bone)}
  /* las viñetas laterales son lo que sostiene las dos cifras (viven en los bordes, donde el
     campo está más claro): de .40 a .62, igual que hace el tramo de 760-1239 */
  .hv5-plate::after{background:linear-gradient(90deg,rgba(23,32,36,.62) 0,rgba(23,32,36,0) 27%,
    rgba(23,32,36,0) 73%,rgba(23,32,36,.62) 100%)}
  .hv5-plate::before{height:var(--nav-h);background:var(--ink)}
  #hero-v5 .hv5-copy{background:var(--ink)}
}
@media (prefers-contrast: more) and (min-width:760px) and (max-width:1239px){
  /* viñetas laterales del modo apilado: de .58 a .78 en los bordes */
  .hv5-plate::after{background:linear-gradient(90deg,rgba(23,32,36,.78) 0%,rgba(23,32,36,0) 42%,
    rgba(23,32,36,0) 58%,rgba(23,32,36,.78) 100%)}
}
@media (prefers-contrast: more) and (min-width:1240px){
  /* sombra diagonal: de .6/.42 a .82/.62 — la capa que sostiene copy y rótulos izq. */
  .hv5-plate::after{background:linear-gradient(80deg,rgba(23,32,36,.82) 0%,
    rgba(23,32,36,.62) 42%,rgba(23,32,36,0) 68%)}
  .hv5-pillars{background:var(--ink);border-radius:12px;padding:14px 20px}
  .hv5-pillars b,.hv5-pillars .pi span{text-shadow:none}
}