/* =====================================================================
   NSA.html — Overrides y adiciones exclusivas de esta versión
   Se carga DESPUÉS de styles.css, así que las reglas con igual
   especificidad prevalecen por orden de cascada.
===================================================================== */

/* ---------------------------------------------------------
   NAVBAR: logo a la izquierda, enlaces centrados con la página
   (de "Servicios" a "Contacto") y CTA a la derecha — 3 columnas
   simétricas para un centrado real, independiente del ancho del
   logo o de los botones.
--------------------------------------------------------- */
/* La cabecera lleva backdrop-filter: la escalera 3D se difumina al pasar
   por detrás, lo cual queda bien, pero con el velo original la cima
   desaparecía justo donde está el botón — que es donde queríamos el
   remate. Se aligera sólo mientras no hay scroll; al bajar recupera
   opacidad y la legibilidad del menú. */
.navbar { padding: 14px 0; background: rgba(8, 11, 18, 0.42); }
.navbar.scrolled { background: rgba(8, 11, 18, 0.85); }
.nav-inner {
  display: grid;
  /* UNA sola fila, siempre. `grid-template-rows: auto` + colocación
     explícita de las tres piezas en la fila 1 impide que el navegador
     invente una segunda fila si aparece un cuarto hijo (el menú móvil,
     que además va en posición absoluta). Antes el botón de hamburguesa
     caía a una fila propia entre 541 y 900 px, y la cabecera se volvía
     un bloque de dos alturas donde nada cuadraba con nada. */
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto;
  align-items: center;
  column-gap: 24px;
}
.nav-inner > .brand { grid-column: 1; grid-row: 1; justify-self: start; }
.nav-inner > .nav-links { grid-column: 2; grid-row: 1; justify-self: center; }
.nav-inner > .nav-cta { grid-column: 3; grid-row: 1; justify-self: end; }

/* Los dos raíles de la cabecera son EXACTAMENTE los del cuerpo de la
   página: `.nav-inner` vive dentro del mismo `.container` (max 1280 px +
   24 px de acolchado) que usan el héroe y todas las secciones. Así el
   logo arranca en la misma vertical que el titular «Convertimos tus
   datos…» y el botón «Solicitar consultoría» muere en la misma vertical
   que el canto derecho de las tarjetas — en cualquier ancho de ventana,
   incluidas las grandes, donde el contenedor deja aire a los lados.
   Si algún día se cambia `--max` o el acolchado del contenedor, la
   cabecera sigue el cambio sola: no hay ningún número repetido aquí. */

/* ---------------------------------------------------------
   LOGO: icono + texto exactos a la identidad de marca,
   separados por una fina barra vertical divisoria.
--------------------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(139, 92, 246, 0.35));
}
.brand-divider {
  display: block;
  width: 2px;
  height: 36px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(139, 92, 246, 0.9) 14%,
    rgba(167, 139, 250, 0.95) 50%,
    rgba(139, 92, 246, 0.9) 86%,
    transparent
  );
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.45);
}

/* ---------------------------------------------------------
   PALABRA DE MARCA: NORUS / ANALYTICS como imagen vectorial
   (assets/img/logo-palabra.svg). Desde el 2026-09-30 la palabra
   no es texto CSS: la O de NORUS lleva el segmento del logo
   definitivo, que el texto no puede reproducir. El SVG lleva las
   letras convertidas en trazados, así que no depende de ninguna
   fuente. Se genera con
   05-Utilidades/Generador de Logos/Recursos Web/recursos_web.py.
   (No usar `.brand-word`: es una clase antigua de styles.css.)
--------------------------------------------------------- */
.brand-palabra {
  display: block;
  height: 30px;
  width: auto;
}


@media (max-width: 480px) {
  .brand { gap: 8px; }
  .brand-mark { height: 36px; }
  .brand-divider { height: 28px; }
  .brand-palabra { height: 24px; }
}

/* Footer: logo consistente con la cabecera, en tamaño reducido */
.footer-brand .brand-mark { height: 38px; }
.footer-brand .brand-divider { height: 30px; }
.footer-brand .brand-palabra { height: 26px; }

/* ---------------------------------------------------------
   PANTALLA DE CARGA
   ---------------------------------------------------------
   Antes el logotipo se componía a mano (icono PNG + dos líneas de texto
   en CSS). Desde el 2026-09-21 se usa el logotipo entregado por el
   usuario como una sola pieza: `assets/img/logo-preloader.png`.

   Ese PNG se generó a partir del original —que venía compuesto sobre un
   fondo casi negro— deshaciendo esa composición para recuperar la
   TRANSPARENCIA real, en vez de recortarlo por umbral. Así los bordes
   conservan su suavizado y el logotipo se apoya sobre el fondo de la
   página sin el recuadro oscuro de la imagen de origen, que es lo que
   delata estas sustituciones. (Script: scratchpad/logo_alpha.py, método
   anotado en el propio archivo.)

   Todo lo demás de la pantalla de carga se mantiene igual: aparece
   grande y se va reduciendo a la vez que avanza la barra de progreso
   (assets/js/nsa-preloader-fx.js, que sigue buscando `.preloader-mark`),
   y se cierra con el mismo fundido de siempre.
--------------------------------------------------------- */
.preloader-mark {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: none; /* anula el drop-shadow de styles.css: el glow va en el logo */
  transform-origin: 50% 50%;
  animation: none; /* el tamaño lo controla la carga, no un pulso automático */
  transition: transform 0.2s ease-out;
  transform: scale(1.45);
}
.preloader-logo {
  /* El logotipo escala con la ventana igual que el resto de la página:
     en un monitor grande, un ancho fijo se queda diminuto en medio de la
     pantalla.
     OJO con el mínimo: `nsa-preloader-fx.js` arranca el conjunto a
     escala 1,45, así que el ancho real de partida es este valor × 1,45.
     Con 280 px en un teléfono de 375 el logotipo salía de la pantalla
     por los dos lados durante el primer segundo. 200 × 1,45 = 290, que
     entra con aire. */
  width: clamp(200px, 26vw, 380px);
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 34px rgba(139, 92, 246, 0.42));
}

/* ---------------------------------------------------------
   BOTONES DE CABECERA: más compactos, mismo impacto visual
--------------------------------------------------------- */
/* El botón de hamburguesa es ahora un hijo de `.nav-cta` (ver NSA.html),
   no un hermano suelto: así CTA y menú comparten celda de rejilla, van
   en la misma línea y el canto derecho del conjunto cae siempre sobre el
   raíl del contenedor. */
.nav-cta { gap: 10px; }
.nav-cta .btn.btn-sm {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.nav-cta .btn-primary.btn-sm {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
}
.nav-cta .btn-primary.btn-sm:hover {
  box-shadow: 0 12px 32px rgba(139, 92, 246, 0.55);
}
.nav-cta .btn-ghost.btn-sm:hover {
  background: rgba(248, 250, 252, 0.07);
}

/* En móviles pequeños se oculta el CTA de la cabecera (no hay ancho para
   logo + botón + hamburguesa sin que se toquen): el menú móvil ya ofrece
   los mismos botones a tamaño completo. Se oculta el BOTÓN, no `.nav-cta`
   entera, porque ahora la hamburguesa vive dentro y desaparecería con
   ella — dejando la página sin ninguna forma de abrir el menú. */
@media (max-width: 540px) {
  .nav-cta .btn { display: none; }
}

/* ---------------------------------------------------------
   FONDO 3D — Red neuronal elegante, visible tras el preloader
--------------------------------------------------------- */
/* Los blobs difuminados y la rejilla estática quedan sustituidos
   por la red neuronal 3D animada */
.float-blob { display: none; }

.vanta-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.vanta-bg.ready { opacity: 1; }
/* El tamaño en pantalla lo fija el CSS, no los atributos del lienzo.
   nsa-ambient.js llama a setSize(w, h, false): el lienzo tiene w×h píxeles
   multiplicados por la densidad de la pantalla, pero sin estas dos líneas
   el navegador lo pinta a ese tamaño en píxeles CSS. Con el escalado de
   Windows al 125 % o 150 % (lo normal en un portátil) el fondo salía más
   grande que la ventana: sólo se veía la esquina superior izquierda,
   ampliada y borrosa. (2026-09-23) */
.vanta-bg canvas { display: block; width: 100%; height: 100%; }

/* Capa de legibilidad: atenúa el fondo 3D justo en la columna central,
   que es donde vive el texto, y se vuelve transparente hacia los
   bordes — así la escalera neuronal sigue brillando por los laterales,
   pero ningún literal ni tarjeta compite nunca con ella. Va entre el
   canvas (z-index -2) y el contenido.
   La elipse está desplazada a la izquierda y hacia arriba a propósito:
   la escalera asciende hacia la derecha, y ese cuadrante es justo el
   que debe quedar despejado. */
.bg-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 54% at 46% 50%,
    rgba(8, 11, 18, 0.70) 0%,
    rgba(8, 11, 18, 0.54) 44%,
    rgba(8, 11, 18, 0.18) 72%,
    rgba(8, 11, 18, 0) 92%
  );
}

/* Legibilidad quirúrgica.
   Un velo capaz de tapar por sí solo la escalera neuronal tapaba también
   la animación entera: la mitad del héroe se volvía una mancha oscura.
   La solución es al revés — velo suave (arriba) y sombra sobre el propio
   texto, que sólo oscurece los píxeles que hay justo detrás de cada
   letra. El fondo 3D se ve, y el texto no pierde ni un punto de contraste. */
.hero h1 {
  text-shadow: 0 2px 28px rgba(8, 11, 18, 0.95), 0 1px 4px rgba(8, 11, 18, 0.9);
}
/* El degradado de "próximo paso" se pinta con background-clip:text sobre
   una letra transparente: un text-shadow se vería A TRAVÉS del glifo como
   una silueta gris. Sobre texto recortado hay que usar drop-shadow, que
   actúa sobre el píxel ya compuesto. */
.hero h1 .accent {
  text-shadow: none;
  filter: drop-shadow(0 2px 16px rgba(8, 11, 18, 0.92)) drop-shadow(0 1px 3px rgba(8, 11, 18, 0.85));
}
.hero p.lead {
  text-shadow: 0 1px 18px rgba(8, 11, 18, 0.98), 0 1px 3px rgba(8, 11, 18, 0.95);
}
.hero .badge { backdrop-filter: blur(6px); }
.hero-stats .num,
.hero-stats .label {
  text-shadow: 0 1px 14px rgba(8, 11, 18, 0.95);
}

/* (El destello del botón de cabecera, `.nsa-arrive`, lo disparaba la oleada
   al coronar la escalera. Sin escalera no hay quien lo dispare, así que la
   regla se retira en vez de quedarse como código muerto.) */

/* =====================================================================
   PÁGINAS LEGALES (aviso-legal / privacidad / cookies / terminos)
   Páginas de texto, sin el fondo 3D ni el monitor del héroe: cargan solo
   esta hoja y styles.css, nada de Three/GSAP/Lenis. Ver cada .html.
===================================================================== */
.legal-header {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.legal-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.legal-back {
  font-size: 13.5px; font-weight: 600; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.legal-back:hover { color: var(--lavender); }
.legal-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 100px;
}
.legal-shell h1 { margin-bottom: 8px; }
.legal-shell .legal-updated { color: var(--text-dimmer); font-size: 13px; margin-bottom: 32px; }
.legal-shell h2 { font-size: 20px; margin: 40px 0 12px; }
.legal-shell h3 { font-size: 15px; margin: 24px 0 8px; color: var(--text); }
.legal-shell p, .legal-shell li { color: var(--text-dim); line-height: 1.7; font-size: 15px; }
.legal-shell ul, .legal-shell ol { padding-left: 22px; margin: 8px 0; }
.legal-shell li + li { margin-top: 6px; }
.legal-shell a { color: var(--lavender); }
.legal-notice {
  display: flex; gap: 12px;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 36px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}
.legal-notice svg { flex: none; width: 20px; height: 20px; color: var(--lavender); margin-top: 1px; }
.legal-pending {
  color: var(--lavender);
  background: rgba(167, 139, 250, 0.12);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.9em;
  font-weight: 700;
  font-style: normal;
}

/* =====================================================================
   SUPERFICIES DE LA PÁGINA — el mismo cristal en todas las secciones
   ---------------------------------------------------------------------
   Las tarjetas eran rectángulos opacos planos (#0D111C) con un borde gris.
   Legibles, sí, pero sin material: es lo que hacía que la página se
   percibiera "poco sofisticada". Pasan al mismo cristal que las pantallas
   del héroe — degradado, canto luminoso y sombra de contacto — para que
   toda la web se lea como un único sistema.
===================================================================== */
/* SIN `backdrop-filter` en las tarjetas de página. Había 37 elementos con
   desenfoque de fondo, y cada uno obliga al navegador a volver a muestrear
   y desenfocar lo que tiene detrás en CADA fotograma de scroll — y lo que
   tienen detrás es un canvas WebGL vivo. De ahí la sensación entrecortada
   al pasar de una sección a otra. El desenfoque se reserva para donde es
   un efecto concreto y no decoración: la cabecera y las seis pantallas del
   héroe (7 elementos, y en un solo golpe de vista).
   El aspecto no cambia: detrás de estas tarjetas no hay detalle que
   desenfocar, sólo un campo de estrellas, así que un degradado algo más
   opaco da exactamente la misma superficie de cristal. */
.card,
.bento-card,
.price-card,
.faq-item,
.step-card,
.contact-form,
.cta-banner {
  background:
    linear-gradient(158deg, rgba(30, 37, 57, 0.86) 0%, rgba(14, 18, 30, 0.94) 58%, rgba(11, 14, 23, 0.97) 100%);
  border-color: rgba(167, 139, 250, 0.16);
  box-shadow:
    0 30px 70px -30px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.price-card.featured {
  background:
    linear-gradient(180deg, rgba(139, 92, 246, 0.20) 0%, rgba(21, 27, 44, 0.92) 42%, rgba(13, 17, 28, 0.96) 100%);
  border-color: rgba(167, 139, 250, 0.48);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.85),
    0 18px 50px -24px rgba(109, 40, 217, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.cta-banner {
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.24), transparent 62%),
    linear-gradient(158deg, rgba(30, 37, 57, 0.90) 0%, rgba(13, 17, 28, 0.97) 100%);
}
.step-visual { background: rgba(8, 11, 18, 0.55); }

/* Los halos de sección eran círculos con `filter: blur(120px)`: dos por
   sección, doce en toda la página, cada uno un pase de desenfoque a
   pantalla casi completa mientras se hace scroll. Un degradado radial
   pinta exactamente lo mismo sin ningún pase de filtro. */
.section-glow span {
  filter: none;
  width: 76%;
  height: 76%;
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.13) 0%,
    rgba(139, 92, 246, 0.06) 38%,
    rgba(139, 92, 246, 0) 68%
  );
}
.section-glow .g2 {
  background: radial-gradient(
    circle,
    rgba(124, 58, 237, 0.13) 0%,
    rgba(124, 58, 237, 0.06) 38%,
    rgba(124, 58, 237, 0) 68%
  );
}

/* =====================================================================
   SUPERFICIES DEL NAVEGADOR
   Selección, barra de desplazamiento y anclas llegan con los colores por
   defecto del navegador, que no pertenecen a ninguna identidad. Vestirlas
   es barato y es de lo que más distingue una página construida de una
   montada con piezas.
===================================================================== */
::selection { background: rgba(139, 92, 246, 0.42); color: #fff; }
::-moz-selection { background: rgba(139, 92, 246, 0.42); color: #fff; }

html { scrollbar-color: rgba(139, 92, 246, 0.45) var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.42);
  border: 3px solid var(--bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(167, 139, 250, 0.62); }

/* El salto a una sección desde el mazo aterriza pegado a la cabecera fija
   si no se reserva su alto. */
:target { scroll-margin-top: 96px; }

/* --- Lenis (assets/js/nsa-scroll.js) ---
   `scroll-behavior: smooth` de styles.css y la interpolación de Lenis se
   pelean por la misma posición de scroll y el resultado es un temblor. Con
   Lenis activo manda Lenis; sin él, sigue mandando el navegador. */
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* Contraste del cuerpo de texto. #9AA3B5 sobre el fondo oscuro pasa el
   AA justo; sobre el fondo 3D animado, no siempre. Un punto más claro
   resuelve la queja de "no se aprecian bien los literales" sin tocar la
   paleta de marca.
   `--text-dimmer` era #6B7386: sobre el cristal de las pantallas se queda
   en torno a 3,4:1, por debajo del mínimo de 4,5:1 que pide la WCAG para
   texto normal. Lo llevaban la línea de detalle de los planes y la barra
   de direcciones de cada pantalla, que son justo los literales que no se
   leían bien en monitores grandes. */
:root {
  --text-dim: #AEB6C6;
  --text-dimmer: #8C95A8;
}

/* =====================================================================
   VELO DEL FONDO
   La escalera era una geometría brillante y con bordes duros: para que el
   texto se leyera encima hacía falta un velo central muy opaco. "Deriva"
   es un campo difuso de puntos pequeños sobre negro, y además todo el
   contenido vive ya sobre cristal — así que el velo puede aligerarse
   mucho. Queda sólo como un ligero asentamiento hacia el centro y una
   sombra bajo la cabecera, que es donde el texto va suelto.
===================================================================== */
.bg-scrim {
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 46%,
      rgba(8, 11, 18, 0.42) 0%,
      rgba(8, 11, 18, 0.28) 46%,
      rgba(8, 11, 18, 0.10) 74%,
      rgba(8, 11, 18, 0) 95%
    ),
    linear-gradient(180deg, rgba(8, 11, 18, 0.62) 0%, rgba(8, 11, 18, 0) 22%);
}

/* Sin movimiento: el fondo 3D se sigue viendo, pero congelado en un
   único fotograma (lo resuelve nsa-ambient.js). Se conserva la
   identidad visual sin animación — WCAG 2.2, 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  /* El canvas aparece de golpe: el fundido de 1,8 s también es movimiento. */
  .vanta-bg { transition: none; }
  /* Los gráficos salen dibujados, sin el trazado de entrada. */
  .nsa-chart .ch-grow { animation: none !important; transform: none !important; }
}

/* =====================================================================
   PLANES: los tres botones, en la misma línea
   ---------------------------------------------------------------------
   Las tarjetas ya medían lo mismo (`align-items: stretch` en la rejilla),
   pero cada lista de ventajas tiene un número distinto de líneas, así que
   el botón caía donde terminaba el texto y los tres quedaban a tres
   alturas. Un margen superior automático se come todo el hueco sobrante
   de la tarjeta y los deja anclados al mismo canto inferior — sin tocar
   el número de ventajas de ningún plan ni inventar alturas fijas.
===================================================================== */
.price-card > .btn {
  margin-top: auto;
}
/* Y la lista deja de empujar: el hueco lo reparte ahora el margen
   automático de arriba, no un margen fijo abajo. */
.price-card .price-features { margin-bottom: 26px; }

/* =====================================================================
   GRÁFICOS DE LAS TARJETAS (sección Soluciones)
   ---------------------------------------------------------------------
   Sustituyen a las ocho barras planas y a las dos cifras sueltas. Forma
   elegida según el trabajo que hace cada dato, no por decoración:
     · Evolución vs objetivo  → columnas + línea de referencia
     · Facturación/beneficio  → barra de parte-sobre-el-todo
     · % aprobados            → medidor (nunca un donut de dos porciones)
   Todas las cifras son ILUSTRATIVAS: Norus está en formación y no publica
   datos de cliente. El texto de cada tarjeta lo dice con sus etiquetas.
===================================================================== */
.nsa-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* Rejilla y ejes: un paso por encima de la superficie, línea de un píxel
   y continua. Tienen que estar, pero por detrás del dato. */
.nsa-chart .ch-grid { stroke: rgba(148, 163, 184, 0.16); stroke-width: 1; }
.nsa-chart .ch-axis { stroke: rgba(148, 163, 184, 0.3); stroke-width: 1; }
/* Referencia (el objetivo): discontinua a propósito — es lo que la
   distingue de un dato a primera vista. */
.nsa-chart .ch-ref { stroke: rgba(167, 139, 250, 0.65); stroke-width: 1.5; stroke-dasharray: 5 4; }
/* El texto NUNCA lleva el color del dato: va en los tonos de tinta de la
   página, y la identidad la da la marca de color que tiene al lado. */
.nsa-chart .ch-tick { fill: var(--text-dimmer); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.nsa-chart .ch-label { fill: var(--text-dim); font-size: 10px; font-weight: 600; }
.nsa-chart .ch-value { fill: var(--text); font-size: 11.5px; font-weight: 800; }

/* Un paso apagado de la MISMA rampa que el acento, no un gris: sigue
   siendo la misma serie. El 0,58 de opacidad no es estético — es el
   mínimo que deja la columna por encima de 3:1 contra la superficie de
   la tarjeta (medido, no estimado). Por debajo, las semanas flojas se
   confundían con el fondo. */
.nsa-chart .ch-bar { fill: rgba(167, 139, 250, 0.58); transition: fill 0.2s ease; }
.nsa-chart .ch-bar.is-now { fill: var(--lavender); }
.nsa-chart g:hover .ch-bar { fill: rgba(196, 181, 253, 0.85); }
.nsa-chart g:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }

/* Entrada: las columnas crecen desde la línea de base cuando la tarjeta
   entra en pantalla. `transform-box: fill-box` hace que el origen sea la
   caja de la propia figura y no el lienzo entero, que es el motivo
   habitual de que una animación así salga disparada hacia una esquina. */
.ch-fig.is-rendered .ch-grow {
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
}
.ch-fig.is-in .ch-grow {
  animation: nsaChartGrow 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes nsaChartGrow { to { transform: scaleY(1); } }

/* --- Figura, leyenda y tabla --- */
.ch-fig { margin: 0; }
.ch-cap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.ch-key { display: inline-flex; align-items: center; gap: 7px; }
/* Llave de la línea de objetivo: el mismo trazo discontinuo que hay en
   el gráfico, para que se reconozca sin tener que leer la etiqueta. */
.ch-key-ref::before {
  content: "";
  width: 16px;
  height: 0;
  border-top: 1.5px dashed rgba(167, 139, 250, 0.75);
  flex: none;
}
.ch-key-now s { width: 8px; height: 8px; border-radius: 2px; background: var(--lavender); text-decoration: none; flex: none; }

/* La tabla ES el contenido: se queda visible mientras el gráfico no se
   haya pintado, y solo entonces pasa a ser la versión accesible. */
.ch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  color: var(--text-dim);
}
.ch-table caption { text-align: left; padding-bottom: 8px; color: var(--text-dimmer); font-size: 11.5px; }
.ch-table th, .ch-table td { padding: 5px 0; text-align: left; font-weight: 500; }
.ch-table td { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.ch-table thead th { color: var(--text-dimmer); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.ch-fig.is-rendered .ch-table {
  /* Fuera de la vista, dentro del árbol de accesibilidad. `display:none`
     la sacaría también de ahí y se perdería la vista de tabla. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Bloque del objetivo trimestral --- */
.ch-goal { margin-top: 22px; }
.ch-goal-head,
.ch-goal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ch-goal-head { font-size: 13px; color: var(--text-dim); margin-bottom: 9px; }
.ch-goal-head strong { color: var(--text); font-weight: 700; }
.ch-goal-foot { font-size: 12px; color: var(--text-dim); margin-top: 11px; }

/* Nota al pie de la sección: las cifras son de ejemplo y se dice. */
.bento-note {
  margin: 26px 0 0;
  font-size: 12.5px;
  color: var(--text-dimmer);
  text-align: center;
}

/* --- Barra de parte sobre el todo + medidor --- */
.nsa-meter {
  position: relative;
  height: 10px;
  border-radius: 999px;
  /* La pista es un paso más claro de la MISMA rampa que el relleno, no un
     gris neutro: así el estado se lee a lo largo de toda la barra. */
  background: rgba(139, 92, 246, 0.17);
  overflow: hidden;
}
.nsa-meter span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--lavender));
}
/* La marca del mes anterior: sin ella, el "+6 pts" es una afirmación; con
   ella, el lector la comprueba. */
.nsa-meter i {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 2px;
  background: rgba(248, 250, 252, 0.55);
}

.nsa-split {
  display: flex;
  height: 12px;
  border-radius: 4px;
  overflow: hidden;
  /* El hueco que separa los dos tramos lo pone el propio fondo de la
     tarjeta, no un borde: 2 px, constantes. Un filete alrededor de cada
     tramo añadiría tinta que no es dato. */
  gap: 2px;
}
.nsa-split b {
  display: block;
  border-radius: 3px;
}
.nsa-split .seg-main { background: var(--lavender); }
/* El resto es contexto, no una segunda serie que compita: gris de la
   rampa neutra, con contraste suficiente para distinguirse del fondo. */
.nsa-split .seg-rest { background: #64748B; }

.nsa-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.nsa-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nsa-legend em { font-style: normal; color: var(--text); font-weight: 700; }
.nsa-legend s { width: 8px; height: 8px; border-radius: 2px; flex: none; text-decoration: none; }

/* Las dos tarjetas pequeñas de la columna derecha del bento. */
.bento-mini {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 168px;
}
.bento-mini .bm-label { font-size: 12px; color: var(--text-dim); margin: 0; }
.bento-mini .bm-value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 2px 0 14px;
  /* Cifra grande = figuras proporcionales. `tabular-nums` se reserva para
     columnas que tienen que cuadrar verticalmente (los ejes). */
  font-variant-numeric: proportional-nums;
}
.bento-mini .bm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-dim);
}