/*
 * hero-marco.css — La disposición «marco» del hero.
 *
 * PROBLEMA QUE RESUELVE
 * Apilando el texto en una columna a la izquierda —como hacía la v0-1, retirada
 * el 2026-09-01— la campana le pasa por detrás. Medido a 1668×927, con la figura
 * de frente —que es su posición más ancha, porque gira— la curva ocupa el
 * 29-71 % del ancho y el 22-65 % del alto: la entradilla cae justo encima de la
 * falda izquierda y el titular invade el flanco. Se lee mal el texto y se lee
 * peor la figura.
 *
 * QUÉ HACE
 * Reparte los cuatro bloques por los bordes y deja el centro entero para la
 * curva. La página se lee entonces como una lámina anotada: la figura en medio y
 * el texto alrededor, cada pieza en el hueco que la silueta deja libre.
 *
 *   ┌─ nav ────────────────────────────────────────────┐
 *   │            ── rótulo, centrado ──                │  franja 0-18 %: libre
 *   │  MÁS                  ╱╲          │ apunte 1     │  la curva no pasa del
 *   │  PACIENTES           ╱  ╲                        │  63 % hasta el 45 %
 *   │  DE LOS QUE         ╱    ╲        ┃ apunte 2     │
 *   │  TIENES           ╱        ╲                     │
 *   │  ────────────────────────────────────            │  base de la curva, 65 %
 *   │              [ CTA ]  [ CTA ]                    │  franja 68-100 %: libre
 *   │                 desliza                          │
 *   └──────────────────────────────────────────────────┘
 *
 * ⚠️ EL FICHERO VA DE MENOR A MAYOR, Y NO AL REVÉS. El marco entero vive dentro
 * de `@media (min-width: 1081px)`. Se intentó al revés —marco por defecto y un
 * `max-width` que lo deshiciera— y no funciona: con `display: block` en el
 * contenedor, Chromium seguía colocando a los hijos por su `grid-area` y su
 * `place-self` (el rótulo obedecía la anulación, la nota no) aunque `display`
 * computase a `block`. Declarando el apilado como estado base no hay nada de
 * grid que anular, y el problema desaparece por construcción.
 */

/* ── Los apuntes ───────────────────────────────────────────────────────────
 *
 * El bloque de texto de la derecha son dos apuntes con la misma forma: una
 * barra a la izquierda y la frase en dos tonos, el primer tramo tenue y el
 * segundo en el color del texto. Se leen como dos afirmaciones paralelas —qué
 * hacemos, en qué nos diferenciamos— y lo único que los distingue es el color
 * de la barra: la del segundo va en el acento, porque ese es el mensaje que hay
 * que recordar.
 *
 * Esto sí es común a las dos anchuras: es formato, no disposición.
 */

.hero-nota {
  max-width: 46ch;
  padding-top: 24px;
}

.hero-apunte {
  position: relative;
  margin: 0;
  padding-left: clamp(16px, 1.3vw, 22px);
  font-size: clamp(16px, 1.14vw, 20px);
  line-height: 1.45;
}
.hero-apunte + .hero-apunte { margin-top: clamp(20px, 3vh, 34px); }

/* La barra. `scaleY` desde arriba es lo que la deja crecer con el texto durante
   la entrada; en reposo está a escala 1 y no se nota. */
.hero-apunte::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.22em;
  width: 2px;
  transform-origin: top;
  background: linear-gradient(
    color-mix(in srgb, var(--texto-tenue) 95%, transparent),
    color-mix(in srgb, var(--texto-tenue) 8%, transparent)
  );
}
/* Solo la clave lleva el acento. */
.hero-apunte-clave::before {
  background: linear-gradient(
    var(--acento),
    color-mix(in srgb, var(--acento) 10%, transparent)
  );
}

.hero-apunte .apunte-suave  { color: var(--texto-tenue); font-weight: 300; }
.hero-apunte .apunte-fuerte { color: var(--texto);       font-weight: 400; }

/* En el primer apunte los dos tramos son una sola frase: el tono cambia a mitad
   de línea y la frase se lee de corrido. En la clave son dos frases, y cada una
   pide su línea. */
.hero-apunte-clave .apunte-suave,
.hero-apunte-clave .apunte-fuerte {
  display: block;
  /* Sin esto la afirmada dejaba "creciera." sola en la tercera línea. */
  text-wrap: balance;
}
.hero-apunte-clave .apunte-fuerte { margin-top: 0.28em; }

/* El titular, en todas las anchuras: la frase de Nacho no lleva saltos, y sin
   equilibrar dejaba «POBLACIÓN» sola en la última línea a 390 px y a 1080×700,
   y en el marco una «A» colgando al final de la cuarta. No cambia cuántas
   líneas ocupa. Donde da seis (de 1081 a 1085 px, y a 320 o menos), la «a» la
   sujeta el espacio duro de `tituloAmplio` (contenido.js). */
.hero-titular { text-wrap: balance; }

/* La pregunta que el titular contesta (Julio, 2026-09-27): en voz baja, como el
   tramo tenue de los apuntes, y el titular responde en claro. */
.hero-pregunta {
  margin: 0 0 12px;
  font-family: var(--tipo-cuerpo);
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.3;
  color: var(--texto-tenue);
}

/* ── El marco ──────────────────────────────────────────────────────────────
 *
 * LAS MEDIDAS NO SON DECORATIVAS. Las columnas laterales miden 32 % cada una
 * porque la silueta, franja a franja, deja esto libre:
 *
 *     altura    la curva ocupa      libre a cada lado
 *     18-32 %   42-58 %             32 % holgado
 *     32-45 %   38-63 %             32 % con ~80 px de aire
 *     45-55 %   35-65 %             32 % justo
 *     55-65 %   27-73 %             ← aquí NO cabe texto: es la falda
 *
 * Por eso el titular va centrado en vertical con `padding-bottom` (se queda por
 * encima del 55 %) y la nota va anclada arriba: las dos viven en las franjas
 * donde la campana todavía es estrecha. Si se cambia la escala de la figura hay
 * que volver a medir — `?debug=1` deja la escena en `window.__hero`.
 *
 * Por debajo de 1081 px las columnas laterales darían menos de 350 px: el
 * titular se descuelga y la nota se parte. Ahí no entra nada de esto y el hero
 * se queda con el apilado de la v0-1, que además es lo correcto en pantallas
 * estrechas —la campana ocupa entonces casi todo el ancho y no hay bordes que
 * aprovechar.
 */

@media (min-width: 1081px) {
  .hero-marco {
    /* Sale del centrado de `.hero-fijo` y ocupa la pantalla entera: los bordes
       son ahora la retícula. El contenedor de posicionamiento es `.hero-fijo`,
       que es sticky. */
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    /* Arriba, la barra (89 px medidos) más aire. Abajo, sitio para el indicador
       de scroll, que vive en los últimos 76 px. Lateral: el mismo que `.nav` y
       `.env`, para que el titular caiga sobre la vertical del wordmark y la
       nota sobre la del CTA de la barra. */
    padding:
      calc(89px + clamp(12px, 2.4vh, 30px))
      clamp(20px, 5vw, 64px)
      clamp(118px, 14vh, 156px);

    display: grid;
    /* La columna de la nota no baja de 320 px (revisión de Nacho, 2026-09-24).
       Por debajo de ~1094 px de ancho el 32 % da menos de 315 px, los dos
       apuntes ganan una línea cada uno y el segundo baja hasta la falda
       derecha: −19 px a 1081×650. Con el suelo recuperan el corte de 1100 px y
       el hueco sale de la columna central, que está vacía. Los 5 px de más
       sobre ese corte son margen para el redondeo de otros navegadores. Por
       encima de ~1111 px el 32 % ya da más y la regla no cambia nada. */
    grid-template-columns: minmax(0, 32%) minmax(0, 1fr) minmax(0, max(32%, 320px));
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: clamp(16px, 2vw, 34px);
  }

  /* 1 · El rótulo, arriba y centrado. Sube de 10 a 14 px y gana tracking: pasa
     de pie de foto a título de la lámina. Las dos hairlines lo enmarcan sin
     necesidad de una caja. */
  .hero-marco .hero-rotulo {
    grid-area: 1 / 1 / 2 / -1;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 30px);
    margin: 0;
    font-size: clamp(11px, 0.86vw, 14px);
    letter-spacing: 0.3em;
    color: color-mix(in srgb, var(--texto) 74%, transparent);
  }
  .hero-marco .hero-rotulo::before,
  .hero-marco .hero-rotulo::after {
    content: "";
    height: 1px;
    width: clamp(24px, 5vw, 92px);
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--texto-tenue) 78%, transparent)
    );
  }
  .hero-marco .hero-rotulo::after { transform: scaleX(-1); }

  /* 2 · El titular, flanco izquierdo. */
  /* La colocación era del titular; desde que lleva la pregunta encima
     (2026-09-27) es del bloque `.hero-cabeza`, con las mismas medidas. */
  .hero-marco .hero-cabeza {
    position: relative;
    grid-area: 2 / 1 / 3 / 2;
    justify-self: start;
    align-self: center;
    /* Centrado en la banda, pero levantado: a la altura exacta del pico el
       titular compite con él, y más abajo se le viene encima la falda.
       Revisión de Nacho (2026-09-24): el titular pasa a cinco líneas y con 9vh
       «ANALIZABLE.» bajaba hasta la falda izquierda (−15 px a 1100×800, −13 a
       1280×1024). Con 16vh el bloque sube la mitad de lo que crece el relleno.
       El tope crece en la misma proporción, 96 → 171 px, para que siga actuando
       desde la misma altura de pantalla (1067 px).
       Y dos correcciones, las dos medidas con ventanas reales, que son 110-140
       px más bajas que la pantalla:
       · Ventana baja (menos de 800 px de alto): el relieve cae el doble de
         rápido, `32vh − 128px`, que empalma con 16vh justo en 800. Ahí manda
         el rótulo, no la falda: subido, el bloque se le montaba encima.
       · Ventana alta y estrecha (más estrecha que 1,3:1): se suma
         `0,42 · (130vh − 100vw)`. La cámara tiene el campo vertical fijo, así
         que la curva escala con el alto y el titular con el ancho: cuanto más
         alta la ventana, más ancha la campana a la altura de «ANALIZABLE.», y
         el bloque tiene que subir hasta donde se estrecha. Sin esto la última
         línea pisaba la falda: −53 px a 1081×1200, −28 a 1100×1100, −16 a
         1081×1000, −7 a 1150×1000. Los dos coeficientes salen de medir el
         relieve que necesita cada una de esas ventanas. En vertical (1200×1800)
         no hay relieve que valga: la campana ocupa todo el ancho. */
    padding-bottom: calc(
      clamp(24px, min(16vh, 32vh - 128px), 171px) +
      max(0px, (130vh - 100vw) * 0.42)
    );
  }
  .hero-marco .hero-titular {
    /* Cierre de la v5.0 (Julio, 2026-09-25): la frase de Nacho, más larga, con
       letra más pequeña para que quepa en unas cinco líneas. Antes,
       `clamp(30px, min(3.8vw, 6.8vh), 60px)`: con él la frase daba siete líneas
       a 1440 px, seis a 1280 y ocho a 1100.
       La línea más ancha de las cinco es «SINTÉTICOS DE UNA», 10,24 em medidos
       en Averox con su tracking, y la columna es el 32 % del contenido: 0,288
       del ancho hasta 1280 px, un poco más por encima. Cinco líneas piden un
       cuerpo de columna / 10,24, que a 1280 px son 2,81vw. Con 2,75vw sobran
       8 px en ese corte, margen para el redondeo de otros navegadores, y el
       titular mide 35 px a 1280, 40 a 1440 y 53 a 1920. Por debajo de ~1090 px
       el cuerpo se queda en el suelo de 30 px y la frase da seis líneas.
       El suelo de 30 px es el que ya tenía el `clamp`, no un límite medido. Lo
       medido, en la versión de 60 px, es que a 52 el titular perdía masa de
       tinta contra la esquina, que es la zona más oscura de la viñeta: Averox es
       monolineal y ultrafina. Con cinco líneas no hay forma de volver ahí, y es
       la decisión de Julio.
       El `6.8vh` se queda para las ventanas muy apaisadas y bajas: solo manda
       por encima de 2,47:1 (6,8 / 2,75), y ahí sin él el bloque se le montaba
       al rótulo: −12 px a 1920×650 y −17 a 1920×600, y de 6 a 9 px de aire a
       1800×640, 2048×700, 1680×620 y 1600×600. Con él, +48, +38, +46, +59, +19
       y +16. A 1366×657 (+44), 1280×600, 1440×900 y 1920×1080 no cambia nada:
       son más estrechas que 2,47:1. */
    font-size: clamp(30px, min(2.75vw, 6.8vh), 60px);
  }
  /* La pregunta, justo encima del titular y fuera del flujo: el titular se
     queda donde estaba, con sus medidas contra la campana y el rótulo. */
  .hero-marco .hero-pregunta {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin: 0 0 14px;
    white-space: nowrap;
  }
  /* En ventanas bajas no cabe fuera: entre el rótulo y el titular quedan de 24
     a 35 px (1280×600, 1366×657) y se montaba al rótulo hasta 15 px. Ahí va en
     el flujo del bloque, que está centrado: el titular baja la mitad de lo que
     mide la pregunta, y ahí tiene 87 px o más de aire con la curva
     (verificar-hero). 800 px es el corte del relieve del titular. */
  @media (max-height: 799px) {
    .hero-marco .hero-pregunta {
      position: static;
      margin-bottom: 8px;
    }
  }

  /* 3 · La nota, flanco derecho. */
  .hero-marco .hero-nota {
    grid-area: 2 / 3 / 3 / 4;
    justify-self: end;
    align-self: start;
    /* Revisión de Nacho (2026-09-24): de 4,4vh a 2,5vh. Justo encima del umbral
       del marco la columna estrecha parte más los apuntes (una línea más el
       primero por debajo de 1094 px, y el segundo por debajo de 1088), y con
       4,4vh la barra del segundo tocaba la falda derecha (−7 px a 1081×800).
       El tope baja en la misma proporción, 46 → 26 px, igual que el relleno
       del titular. */
    padding-top: clamp(8px, 2.5vh, 26px);
    max-width: 42ch;
  }

  /* 4 · Los botones, bajo la base de la curva. */
  .hero-marco .acciones {
    grid-area: 3 / 1 / 4 / -1;
    position: relative;
    justify-self: center;
    justify-content: center;
    margin-top: 0;
  }
  /* Un hilo baja desde la base de la curva hasta los botones. Sin él, el par de
     botones se lee como una isla en el pie; con él, la figura los sostiene. */
  .hero-marco .acciones::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -13vh;
    width: 1px;
    height: 11vh;
    background: linear-gradient(
      transparent,
      color-mix(in srgb, var(--texto-tenue) 48%, transparent)
    );
  }
}

/* ── Entrada ───────────────────────────────────────────────────────────────
 *
 * landing.css ya escalona rótulo (0 s), titular (0,10 s) y botones (0,38 s). Los
 * dos apuntes llegan DESPUÉS de todo eso y uno detrás de otro, no a la vez: la
 * idea es que el visitante lea primero qué hacemos y solo entonces en qué nos
 * diferenciamos.
 *
 *     0,60 s  ▸ apunte 1     ┐ 0,85 s cada uno, encadenados sin solaparse
 *     1,50 s  ▸ apunte 2     ┘ el segundo arranca justo cuando el primero cierra
 *
 * Cada apunte no aparece de golpe: se revela de arriba abajo. El texto lleva una
 * máscara de degradado que barre hacia abajo —así las líneas van saliendo por
 * orden, sin el corte duro que dejaría un `clip-path`— y la barra de la
 * izquierda crece a la vez, con una cabeza de luz que va justo en el frente. Es
 * el mismo gesto que el barrido de la propia campana.
 *
 * Cómo se sostiene la máscara: mide DOS veces el alto del bloque (H) y es opaca
 * en su mitad superior. El desplazamiento que produce un porcentaje es
 * (alto_caja − alto_máscara) · pct = −H · pct, así que:
 *
 *     pct = 100 %  la zona opaca va de −H a 0  → el bloque entero, oculto
 *     pct =  50 %  la zona opaca va de −H/2 a H/2 → revelada la mitad de arriba
 *     pct =   0 %  la zona opaca va de 0 a H  → el bloque entero, visible
 *
 * El barrido ocupa así el recorrido completo. Con 300 % —que fue el primer
 * intento— la zona opaca ya cubría el bloque a pct ≈ 25 %, el frente terminaba
 * en el primer tercio de la animación y el resto del tiempo no pasaba nada.
 *
 * La opacidad sube aparte y muy rápido (al 15 %): si acompañara al barrido, el
 * bloque se vería aparecer entero a la vez y el frente dejaría de leerse.
 */

@keyframes apunte-revelar {
  from {
    opacity: 0;
    -webkit-mask-position: 0 100%;
            mask-position: 0 100%;
  }
  15% { opacity: 1; }
  to {
    opacity: 1;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
}

@keyframes apunte-barra {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* La cabeza de luz baja pegada al frente y se apaga al llegar al final. */
@keyframes apunte-cabeza {
  from   { top: 0.3em; opacity: 0; }
  12%    { opacity: 1; }
  78%    { opacity: 1; }
  to     { top: calc(100% - 0.22em); opacity: 0; }
}

.hero-marco.entrada-hecha .hero-apunte {
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 72%);
          mask-image: linear-gradient(to bottom, #000 50%, transparent 72%);
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: apunte-revelar 0.85s cubic-bezier(0.4, 0.05, 0.32, 1) backwards;
}
.hero-marco.entrada-hecha .hero-apunte::before {
  animation: apunte-barra 0.85s cubic-bezier(0.4, 0.05, 0.32, 1) backwards;
}
.hero-marco.entrada-hecha .hero-apunte::after {
  content: "";
  position: absolute;
  left: -1px;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(transparent, var(--acento));
  box-shadow: 0 0 10px color-mix(in srgb, var(--acento) 70%, transparent);
  animation: apunte-cabeza 0.85s cubic-bezier(0.4, 0.05, 0.32, 1) both;
  pointer-events: none;
}

/* Los dos retardos, aplicados a la vez al texto, a la barra y a la cabeza para
   que las tres cosas vayan sincronizadas. */
.hero-marco.entrada-hecha .hero-apunte,
.hero-marco.entrada-hecha .hero-apunte::before,
.hero-marco.entrada-hecha .hero-apunte::after {
  animation-delay: 0.6s;
}
.hero-marco.entrada-hecha .hero-apunte-clave,
.hero-marco.entrada-hecha .hero-apunte-clave::before,
.hero-marco.entrada-hecha .hero-apunte-clave::after {
  animation-delay: 1.5s;
}

/* La nota ya no entra como bloque: entra apunte a apunte. */
.hero-marco.entrada-hecha .hero-nota { animation: none; }

/* ── Accesibilidad ─────────────────────────────────────────────────────── */

/* Sin movimiento no hay coreografía que valga: el texto está, y ya está. La
   máscara se retira entera, porque a medias dejaría el bloque recortado. */
@media (prefers-reduced-motion: reduce) {
  .hero-marco.entrada-hecha .hero-apunte {
    -webkit-mask-image: none;
            mask-image: none;
    animation: none;
  }
  .hero-marco.entrada-hecha .hero-apunte::before { animation: none; }
  .hero-marco.entrada-hecha .hero-apunte::after { display: none; }
}