/*
 * 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 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;
    grid-template-columns: minmax(0, 32%) minmax(0, 1fr) minmax(0, 32%);
    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. */
  .hero-marco .hero-titular {
    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. */
    padding-bottom: clamp(24px, 9vh, 96px);
    /* Cabe en la columna: 13 caracteres de Averox en caja alta miden 7,04 px por
       carácter y cuerpo, así que a 60 px son 422 px y la columna da 461 px a
       1668 px de ancho. No baja de ahí: Averox es monolineal y ultrafina, y a
       52 px —medido en pantalla— el titular pierde masa de tinta y se apaga
       contra la esquina, que es la zona más oscura de la viñeta. */
    font-size: clamp(30px, 3.8vw, 60px);
  }

  /* 3 · La nota, flanco derecho. */
  .hero-marco .hero-nota {
    grid-area: 2 / 3 / 3 / 4;
    justify-self: end;
    align-self: start;
    padding-top: clamp(8px, 4.4vh, 46px);
    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; }
}