/* ═══════════════════════════════════════════════════════════════════════════
   AudASIN — Escenas econométricas
   Portadas del scroll-film (demo.audasin.com): "la decisión" y "la estimación".

   Todo va prefijado .ec- y las variables --ec-*: este archivo no puede pisar
   nada de styles.css ni de servicios.css. Si algo falla, se quita la etiqueta
   <link> y el sitio queda exactamente como estaba.

   Fondo oscuro a propósito: el --gold de la marca da 1.3:1 sobre --ice, así
   que sólo es legible sobre navy. Lo dice la propia guía de color del sitio.
   ═══════════════════════════════════════════════════════════════════════════ */

.ec {
  --ec-void:    #000a14;   /* más profundo que --navy: es el negro del laboratorio */
  --ec-gold:    #ffd700;
  --ec-ice:     #f7f8fa;
  --ec-slate-l: #8899aa;
  /* La nav del sitio es fixed (67px, z-index 1000): sin este colchón el
     eyebrow de la escena queda debajo de la barra. */
  --ec-nav:     72px;

  position: relative;
  background: var(--ec-void);
  color: var(--ec-ice);
  /* Exactamente una pantalla. La animación ya no se come el scroll: se
     reproduce sola por reloj, así que reservar 210svh de recorrido sería
     retener al visitante dos pantallas para que llegue más tarde a servicios
     y a precios. */
  min-height: 100svh;
}

.ec__stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
  display: flex;
}

.ec__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Velo de contraste ────────────────────────────────────────────────────────
   Denso en el flanco izquierdo, donde vive la columna de texto, y disuelto
   antes de la mitad para no apagar la recta ni la banda. Se lleva además el
   pie del encuadre, que es por donde cruzan la traza y los botones. */
.ec__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      var(--ec-void) 0%,
      rgba(0, 10, 20, 0.94) 18%,
      rgba(0, 10, 20, 0.62) 34%,
      rgba(0, 10, 20, 0) 52%),
    linear-gradient(to top,
      rgba(0, 10, 20, 0.85) 0%,
      rgba(0, 10, 20, 0.35) 12%,
      rgba(0, 10, 20, 0) 26%);
}

/* En vertical la columna de texto no está a la izquierda: está ARRIBA, y ocupa
   casi la mitad del encuadre. Un velo diagonal deja el titular sobre la pared
   de fichas y oscurece un flanco del gráfico que no molestaba a nadie. */
@media (max-width: 899px) {
  .ec__scrim {
    background:
      linear-gradient(to bottom,
        var(--ec-void) 0%,
        rgba(0, 10, 20, 0.93) 30%,
        rgba(0, 10, 20, 0.55) 42%,
        rgba(0, 10, 20, 0) 56%),
      linear-gradient(to top,
        rgba(0, 10, 20, 0.9) 0%,
        rgba(0, 10, 20, 0.45) 16%,
        rgba(0, 10, 20, 0) 32%);
  }
}

/* Grano: rompe el banding de los degradados y da textura de película */
.ec__grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ec__content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--ec-nav) + clamp(1.5rem, 5vw, 3rem))
           clamp(1.5rem, 5.4vw, 4rem)
           clamp(2.5rem, 7vw, 5rem);
}

/* ── tipografía de escena ─────────────────────────────────────────────── */
.ec__eyebrow {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ec-gold);
  margin: 0 0 1.15rem;
}

/* El <h1> de la página. Vino del hero, así que conserva su texto, pero no su
   clase: hero__headline está coloreado para fondo claro y lo anima el
   split-text de main.js — un tercer efecto sobre esta pantalla, que ya tiene
   el texto escribiéndose y las partículas, la ensuciaría. */
/* El titular respira, pero DENTRO del sistema ───────────────────────────────
   El apelmazamiento venía de la interlínea a 1.06 y de la caja de 15ch, no del
   peso: eso es lo que se corrige aquí (1.16 y 19ch, cuerpo mucho mayor y el
   remate aislado en su línea).

   Peso 700 y tracking −0.02em NO son decorativos: son exactamente los de los
   h2 del sitio (servicios, proceso, resultados, FAQ). Una versión intermedia
   en regular se veía más elegante en aislamiento, pero dejaba al hero como el
   único titular de toda la web con otra voz tipográfica — y se notaba. */
.ec__h1 {
  margin: 0 0 1.6rem;
  font-size: clamp(1.7rem, 4.6vw, 4.2rem);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  /* En ch, no en px: el titular se reparte en líneas parejas a cualquier
     tamaño de letra sin necesidad de saltos forzados. */
  max-width: 21ch;
  text-wrap: balance;
}
/* En bloque: el remate cae SIEMPRE solo en su línea, sin depender de dónde
   quiera partir el navegador. Con todo el bloque ya en negrita, el acento lo
   marca el color — que es como funciona el resto del sitio. */
.ec__h1 em {
  display: block;
  margin-top: 0.1em;
  font-style: normal;
  color: var(--ec-gold);
}

.ec__title {
  margin: 0;
  font-size: clamp(2.3rem, 9.5vw, 4.6rem);
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.ec__title em { font-style: normal; color: var(--ec-gold); }

.ec__sub {
  margin: 1.35rem 0 0;
  font-size: clamp(0.95rem, 3.8vw, 1.15rem);
  line-height: 1.5;
  color: rgba(247, 248, 250, 0.72);
  max-width: 34ch;
}
.ec__sub b { color: var(--ec-ice); font-weight: 500; }

/* ── escena 1 · el terminal de la decisión ────────────────────────────── */
.ec__term {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: clamp(0.95rem, 4.2vw, 1.3rem);
  line-height: 1.9;
  border-left: 2px solid var(--ec-gold);
  padding-left: 16px;
  max-width: 30ch;
}
.ec__q {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ec-slate-l);
  margin-top: 14px;
}
.ec__q:first-child { margin-top: 0; }

.ec__typed { color: var(--ec-ice); min-height: 1.9em; }
.ec__typed--alt { color: var(--ec-gold); }
/* El cursor sólo existe mientras se escribe: si no, parpadea texto ya escrito */
.ec__typed.is-typing::after {
  content: '_';
  color: var(--ec-gold);
  animation: ec-blink 1s steps(2) infinite;
}
@keyframes ec-blink { 50% { opacity: 0; } }

.ec__clarity {
  margin: auto 0 0;
  padding-top: 2.1rem;
  font-size: clamp(0.9rem, 3.6vw, 1.05rem);
  line-height: 1.55;
  color: rgba(247, 248, 250, 0.66);
  max-width: 32ch;
}
.ec__clarity b { color: var(--ec-ice); font-weight: 500; }

/* ── lectura del modelo ───────────────────────────────────────────────── */
.ec__readout {
  margin-top: 1.6rem;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  opacity: 0;
  transition: opacity 0.45s ease;
  /* A la derecha: con pendiente negativa la nube ocupa la diagonal
     superior-izquierda → inferior-derecha, y deja libre este flanco.
     A la izquierda la recta cruzaba las cifras por detrás. */
  text-align: right;
}
.ec--in .ec__readout { opacity: 1; }

.ec__ro {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  line-height: 1.75;
}
.ec__ro span {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ec-slate-l);
}
/* La lectura cae en el flanco derecho, fuera del alcance del velo: durante el
   acto 1 tiene la pared de fichas justo detrás. */
.ec__ro span,
.ec__ro b,
.ec__ro-note { text-shadow: 0 0 7px var(--ec-void), 0 0 14px var(--ec-void); }
.ec__ro b {
  /* 19px, no 15: estas tres cifras SON la prueba del método. A tamaño de nota
     al pie el visitante no las lee y la escena se queda en decoración. */
  font-size: clamp(15px, 1.35vw, 19px);
  color: var(--ec-gold);
  font-weight: 700;
  /* tabular-nums: sin esto los dígitos bailan mientras el modelo converge */
  font-variant-numeric: tabular-nums;
}
.ec__ro-note {
  margin: 0.7rem 0 0;
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(136, 153, 170, 0.55);
}

/* ── manda el gráfico ────────────────────────────────────────────────────
   El texto se queda en una banda compacta arriba para que el scatter se lleve
   ~3/4 de la pantalla. Es lo que demuestra el método: un titular lo escribe
   cualquiera, una banda de confianza estrechándose no. */
/* Los tres bloques de texto se separan de verdad. Antes iban a 0,7 / 0,9 rem:
   eyebrow, titular y subtítulo se leían como un solo párrafo pegado. */
.ec__sub {
  margin-top: 0;
  font-size: clamp(0.88rem, 1.05vw, 1.06rem);
  line-height: 1.65;
  max-width: 46ch;
}
.ec__eyebrow { margin-bottom: clamp(1.1rem, 2.2vw, 1.9rem); }
.ec__h1      { margin-bottom: clamp(1.5rem, 2.8vw, 2.4rem); }

@media (min-width: 900px) {
  .ec__content { max-width: 1400px; margin: 0 auto; }
  /* En escritorio la lectura del modelo va al lado del gráfico, no debajo.
     Al 42%, no al 30%: con el titular ya crecido, a 30% las cifras quedaban
     hombro con hombro con "ECONOMÉTRICO." y las dos cosas se estorbaban.
     Aquí cae en el hueco de arriba a la derecha, que con pendiente negativa
     es donde la nube no tiene puntos. */
  .ec__readout {
    position: absolute;
    right: clamp(2rem, 6vw, 5rem);
    top: 42%;
    margin-top: 0;
  }
}

/* ── llamadas a la acción ─────────────────────────────────────────────────
   Heredan .btn-primary / .btn-ghost del sitio: mismo boton de siempre, solo
   cambia donde vive. `margin-top: auto` los empuja al pie del escenario, y
   quedan sobre el flanco inferior izquierdo — que con pendiente negativa es
   justamente la zona donde la nube no tiene puntos. */
/* ── acto 1 · el rótulo del catálogo ───────────────────────────────────────
   El visual da el ritmo (600 casillas ordenándose), el texto dice de qué es
   ese inventario. La opacidad la maneja el JS: entra con la retícula y se va
   cuando la retícula se derrama en el scatter. */
.ec__phase {
  margin: 0.85rem 0 0;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Es lo único que dice de qué es ese inventario durante el acto 1: en slate
     a 10px no llegaba a registrarse antes de que la retícula se derramase. */
  color: rgba(255, 215, 0, 0.82);
  opacity: 0;
  text-shadow: 0 0 7px var(--ec-void), 0 0 14px var(--ec-void);
}

/* ── acto 3 · la traza de razonamiento ─────────────────────────────────────
   `margin-top:auto` la empuja al pie del escenario, justo encima de los CTAs:
   con pendiente negativa el flanco inferior izquierdo es la zona donde la nube
   no tiene puntos, así que no tapa datos. */
.ec__log {
  margin-top: auto;
  padding-top: 1.4rem;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  /* Reserva el alto de las tres líneas más el sello: sin esto, según se
     escriben, el bloque crece y empuja los botones hacia abajo. */
  min-height: 6.2em;
}

.ec__log-line {
  margin: 0;
  font-size: clamp(9.5px, 2.7vw, 11.5px);
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: rgba(247, 248, 250, 0.7);
  white-space: nowrap;
  /* No se recorta el texto: se deja desbordar sin barra en pantallas estrechas */
  overflow: hidden;
  text-overflow: clip;
  /* La traza cae sobre el flanco inferior izquierdo del gráfico. Con pendiente
     negativa ahí casi no hay puntos, pero sí pasa la banda: una sombra del
     color del fondo la despega sin necesidad de meter una caja opaca. */
  text-shadow: 0 0 6px var(--ec-void), 0 0 12px var(--ec-void);
}
.ec__log-line.is-typing::after {
  content: '_';
  color: var(--ec-gold);
  animation: ec-blink 1s steps(2) infinite;
}

.ec__stamp {
  margin: 0.8rem 0 0;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.72);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.ec__actions {
  margin-top: 1.5rem;
  padding-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Hueco para el banner de cookies ──────────────────────────────────────────
   El banner va `position: fixed` en el pie. El resto de secciones se limitan a
   pasar por debajo mientras se hace scroll, pero el hero no puede: su contenido
   está anclado al pie de una caja de 100svh, así que los dos CTAs quedaban
   tapados hasta que el visitante aceptaba o rechazaba — justo los botones por
   los que ha entrado.

   `consent.js` marca el <html> y publica el alto MEDIDO del banner en --cb-h
   (el texto envuelve distinto según el ancho, así que estimarlo no vale). Al
   elegir, la clase se quita y el hueco desaparece solo.

   Va sin media query a propósito: en escritorio el banner está centrado y
   también pisaba el segundo CTA. */
:root.has-cookie-banner .ec__content {
  padding-bottom: calc(clamp(2.5rem, 7vw, 5rem) + var(--cb-h, 0px));
}

/* Mientras el banner ocupa el pie, el alto útil se reduce y la traza acababa
   cayendo sobre la nube de puntos. Se retira, junto con el alto que reservaba.
   El sello del método SÍ se queda: es una sola línea, no ensucia, y es lo que
   atribuye Stata y los modelos de Anthropic — perderlo durante los segundos
   que el visitante tarda en decidir sería tirar precisamente el dato que la
   escena existe para contar.
   Vuelve sola al aceptar o rechazar, porque `consent.js` quita la clase. */
:root.has-cookie-banner .ec__log-line { display: none; }
:root.has-cookie-banner .ec__log { min-height: 0; }
.ec__actions .btn-primary,
.ec__actions .btn-ghost { position: relative; z-index: 2; }

/* ── sin movimiento ───────────────────────────────────────────────────────
   No es un apaño: el JS pinta el estado FINAL (nube ajustada, recta, banda,
   cifras definitivas) y no anima nada. Se ve el resultado, no el proceso. */
@media (prefers-reduced-motion: reduce) {
  /* El JS pinta directamente el fotograma final (p = 1): nube ajustada, recta,
     banda estrecha, cifras definitivas y traza completa. Aquí sólo hay que
     desactivar las transiciones para que nada se deslice al aparecer. */
  .ec__readout,
  .ec__stamp { transition: none; opacity: 1; }
  .ec__log-line.is-typing::after { animation: none; }
}