/* Boreas: home. Blanco cálido, vidrio discreto, final negro continuo.
   Mobile-first (390px). Las otras páginas siguen usando styles.css. */
/* Respaldo de Inter con sus métricas (Arial ajustada): mientras llega la
   fuente web el texto ya ocupa lo mismo, así el cambio no mueve nada
   (medido: el hero de /servicios y del inicio saltaban al cargar Inter). */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.06%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}

:root {
  --navy: #1B2E44;
  --cian: #4AB3E8;
  --violeta: #7B4FBF;
  /* Violeta para texto pequeño sobre claro: el de marca queda justo en el
     límite de 4.5:1 sobre la malla de fondo. */
  --violeta-texto: #5A3796;
  --gris: #566579;
  --fondo: #F9F6EF;
  --superficie: #F3F0EA;
  --noche: #010A12;
  --linea: rgba(27, 46, 68, 0.12);
  /* Paleta de las propuestas PDF (Prompt 2B): papel, filetes, noche
     profunda, tarjetas oscuras y acentos por fondo. El degradado de marca
     solo como línea fina (1-2px), nunca en bloques grandes. */
  --papel: #F9F6EF;
  --filete: #E8E0D0;
  --filete-fuerte: #C4B79E;
  --noche-1: #060F1C;
  --noche-2: #0C1E34;
  --tarjeta-noche: #10243B;
  --cian-noche: #6CC4F2;
  --violeta-claro: #5A3796;
  --gris-noche: #A6B7C9;

  /* Colores que cambian con el scroll (home.js): oscuro en el hero, claro
     en el medio, oscuro otra vez al final. Por defecto = oscuro, que es
     como empieza la página (y como quedan nav y hero sin JS). Solo los usan
     la nav, el hero, la banda de casos, el cierre y el botón flotante. */
  --c-fondo: #010A12;
  --c-texto: #F5F3EE;
  --c-texto2: rgba(255, 255, 255, 0.62);
  --c-linea: rgba(255, 255, 255, 0.14);
  --c-nav: rgba(1, 10, 18, 0.55);
  --c-nav-solido: rgba(1, 10, 18, 0.96);
  --c-panel: rgba(255, 255, 255, 0.06);
  --c-panel-solido: #101920;
  --c-panel-borde: rgba(255, 255, 255, 0.12);
  --c-superficie: rgba(243, 240, 234, 0);
  /* Números (no colores): opacidad de las estrellas y del logo claro. */
  --c-estrellas: 1;
  --c-logo-claro: 1;
  --c-boton: #FFFFFF;
  --c-boton-texto: #1B2E44;
  --c-acento: #B49CE6;
  --c-campo-borde: rgba(255, 255, 255, 0.36);
  /* Único degradado de identidad: solo en detalles (borde del botón
     principal, halo del hero, línea de progreso). Nunca en texto. */
  --degradado: linear-gradient(90deg, #4AB3E8 0%, #7B4FBF 100%);
  --nav-alto: 48px;

  /* ---------- Tokens (2026-10-26) ----------
     Una sola fuente para radios, sombras, espacio y movimiento. */

  /* Radios: escala de 7 pasos. En elementos anidados, el radio interior
     es el exterior menos el relleno que los separa (esquinas concéntricas),
     con un mínimo de --radio-2 para que nunca quede en punta. */
  --radio-1: 2px;
  --radio-2: 6px;
  --radio-3: 12px;
  --radio-4: 16px;
  --radio-5: 20px;
  --radio-6: 24px;
  --radio-7: 28px;
  --radio-pill: 999px;

  /* Espacio: base de 4px. Los valores fuera de la escala (6, 10, 14, 18,
     22, 26, 36px) son ajustes ópticos y se dejan explícitos. */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-7: 28px;
  --esp-8: 32px;
  --esp-10: 40px;
  --esp-12: 48px;
  --esp-14: 56px;
  --esp-16: 64px;
  --esp-18: 72px;
  --esp-24: 96px;

  /* Sombras en capas con tinte de marca: contacto + caída + ambiente. */
  --sombra-1: 0 1px 2px rgba(27, 46, 68, 0.04), 0 8px 24px -6px rgba(27, 46, 68, 0.07);
  --sombra-2: 0 1px 2px rgba(27, 46, 68, 0.05), 0 6px 16px -4px rgba(27, 46, 68, 0.06), 0 16px 40px -12px rgba(27, 46, 68, 0.1);
  --sombra-3: 0 2px 4px rgba(27, 46, 68, 0.05), 0 12px 28px -10px rgba(27, 46, 68, 0.14), 0 32px 64px -28px rgba(27, 46, 68, 0.3);
  --sombra-flotante: 0 2px 6px rgba(27, 46, 68, 0.14), 0 10px 24px -6px rgba(27, 46, 68, 0.22);
  --sombra-noche-2: 0 1px 2px rgba(1, 10, 18, 0.2), 0 6px 14px -6px rgba(1, 10, 18, 0.3), 0 18px 40px -26px rgba(1, 10, 18, 0.5);
  --sombra-noche-3: 0 2px 6px rgba(1, 10, 18, 0.25), 0 12px 32px -10px rgba(1, 10, 18, 0.35), 0 30px 80px -20px rgba(1, 10, 18, 0.6);
  --anillo-foco: 0 0 0 3px rgba(123, 79, 191, 0.45);

  /* Movimiento: UNA curva y una duración base con sus derivadas. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 300ms;
  --dur-corta: 200ms;
  --dur-media: 450ms;
  --dur-larga: 600ms;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* El lienzo (lo que se ve al estirar la página en iPhone) es #010A12:
   la página empieza y termina en negro. */
html {
  /* Barra de scroll fina y discreta, legible sobre negro y sobre claro. */
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 132, 145, 0.55) transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-alto) + 24px);
  background: var(--noche);
}

/* body es su propio stacking context para que la malla (z-index:-1)
   quede encima del fondo del body y debajo del contenido. */
body {
  position: relative;
  z-index: 0;
  font-family: -apple-system, BlinkMacSystemFont, Inter, "Inter Fallback", system-ui, sans-serif;
  background: var(--fondo);
  color: var(--navy);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--violeta);
  outline-offset: 3px;
  border-radius: var(--radio-2);
}

/* Selección con colores de marca: cian sobre claro, violeta sobre oscuro. */
::selection {
  background: var(--seleccion, rgba(74, 179, 232, 0.28));
  color: var(--seleccion-texto, inherit);
}

/* Sobre oscuro, violeta. Variable heredada (no un selector descendiente
   con ::selection, que obligaba a calcular el pseudo de cada elemento). */
:is(.hero, .cierre, .pie, .puente-cierre) {
  --seleccion: rgba(123, 79, 191, 0.55);
  --seleccion-texto: #FFFFFF;
}

/* Saltar al contenido: píldora con el borde de marca que baja desde
   arriba al recibir foco (transform, sin mover el layout). */
.skip-link {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 44px;
  padding: 0 var(--esp-5);
  border-radius: var(--radio-pill);
  border: 1.5px solid transparent;
  background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--degradado) border-box;
  box-shadow: var(--sombra-2);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--dur) var(--ease);
}

.skip-link::after {
  content: '↓';
  font-size: 13px;
  opacity: 0.7;
}

.skip-link:focus {
  transform: translateY(0);
}

.skip-link:focus-visible {
  outline: 2px solid #B49CE6;
  outline-offset: 3px;
}

.contenedor {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
}

/* ---------- Fondo: malla cian/violeta (único elemento animado de fondo) ---------- */
/* El contenedor recorta (inset 0) y solo la capa interior, más grande,
   se desplaza: así la deriva no genera scroll horizontal. */
.malla {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.malla::before {
  content: '';
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(40% 32% at 18% 14%, rgba(74, 179, 232, 0.1), transparent 70%),
    radial-gradient(34% 30% at 86% 26%, rgba(123, 79, 191, 0.08), transparent 70%),
    radial-gradient(30% 28% at 50% 86%, rgba(74, 179, 232, 0.08), transparent 70%);
  animation: deriva 60s ease-in-out infinite alternate;
}

@keyframes deriva {
  to {
    transform: translate3d(3%, 2%, 0);
  }
}

/* ---------- Vidrio: solo nav, tarjetas principales y panel del hero ---------- */
.vidrio {
  background: #FFFFFF;
  border: 1px solid #E7E2D9;
  border-radius: var(--radio-6);
  box-shadow: var(--sombra-2);
}

/* En pantallas chicas va sólido (blur es caro en gama media y apenas se
   nota en 390px); desde 768px, vidrio real. */
@media (min-width: 768px) {
  .vidrio {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    border-color: rgba(255, 255, 255, 0.7);
    border-radius: var(--radio-6);
  }
}

/* ---------- Tipografía ---------- */
.titular {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.titular-hero {
  font-size: clamp(44px, 8vw, 96px);
}

/* Titular del inicio (más largo): 4 líneas que caben en la columna. */
.hero:not(.hero-compacto) .titular-hero {
  font-size: clamp(36px, 9.4vw, 64px);
}

/* Mínimo de 36px y no 44: "Automatizaciones" a 44px mide ~385px y se
   salía del contenedor de 350px en un celular de 390px. */
.titular-seccion {
  font-size: clamp(36px, 8vw, 96px);
}

/* Cada línea sube y aparece (opacidad + desplazamiento), SIN máscara:
   con overflow:hidden la caja cortaba descendentes (p, g, y, j) y tildes. */
.linea {
  display: block;
}

.linea > span {
  display: inline-block;
}

.tenue {
  color: var(--gris);
}

.etiqueta {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gris);
}

.etiqueta-seccion {
  padding-top: var(--esp-4);
  border-top: 1px solid var(--linea);
  margin-bottom: var(--esp-7);
}

.etiqueta-seccion span {
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--radio-pill);
  font-size: 15px;
  font-weight: 500;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.boton:active {
  transform: scale(0.98);
}

/* Relleno navy + borde de 1.5px con el degradado de identidad. */
.boton-principal {
  color: #FFFFFF;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--navy), var(--navy)) padding-box,
    var(--degradado) border-box;
}

.boton-principal:hover {
  background:
    linear-gradient(#24405D, #24405D) padding-box,
    var(--degradado) border-box;
}

.boton-texto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-underline-offset: 6px;
  transition: text-decoration-color var(--dur) var(--ease);
}

/* Las flechas de los enlaces avanzan 3px al pasar el mouse o enfocar. */
.boton-texto span[aria-hidden='true'],
.caso-enlace span[aria-hidden='true'] {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}

.boton-texto:hover span[aria-hidden='true'],
.boton-texto:focus-visible span[aria-hidden='true'],
.caso:hover .caso-enlace span[aria-hidden='true'],
.caso-enlace:focus-visible span[aria-hidden='true'] {
  transform: translateX(3px);
}

.boton-texto:hover {
  text-decoration-color: var(--navy);
}

/* Con el scroll de colores (JS), el documento usa scroll instantáneo: el
   suave animaba los recálculos de ScrollTrigger y corría las posiciones.
   Los enlaces internos se desplazan suave desde home.js. */
html.con-scrub {
  scroll-behavior: auto;
}

/* Capa de noche: un elemento real (no ::before) para que los auditores de
   contraste vean el fondo oscuro que de verdad hay detrás del texto. */
.noche-fondo {
  display: none;
}

.con-scrub .noche-fondo {
  display: block;
}

/* Cada bloque resuelve su color de texto con SUS variables de tinta (las
   que le escribe home.js), en vez de heredar el color ya calculado del
   body. */
.con-scrub main > *,
.con-scrub body > .pie {
  color: var(--c-texto);
}

/* ---------- Fondo del scroll ----------
   Con JS el fondo sigue el scroll (oscuro → claro → oscuro) SIN trabajo
   en JS por cuadro: base clara y una capa #010A12 fija encima del fondo y
   debajo de todo lo demás, cuya opacidad anima el compositor con la misma
   curva de antes (tramo A: el hero; tramo B: de casos al cierre; home.js
   mide los tramos una vez y los publica en --a-ini/--a-fin/--b-ini/--b-fin).
   Sin animaciones ligadas al scroll (Firefox): la capa sigue al estado de
   tinta (claro/gris/oscuro) con un fundido. */
.con-scrub body {
  background: #F9F6EF;
}

/* En modo oscuro la capa queda opaca todo el recorrido: el body también
   es noche (lo que ven los auditores fuera de pantalla). */
[data-tema='oscuro'].con-scrub body {
  background: #010A12;
}

.con-scrub .noche-fondo {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #010A12;
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--dur-larga) var(--ease);
}

.con-scrub[data-color-scroll='gris'] .noche-fondo {
  opacity: 0.35;
}

.con-scrub[data-color-scroll='claro'] .noche-fondo {
  opacity: 0;
}

@supports (animation-timeline: scroll()) {
  .con-scrub .noche-fondo {
    transition: none;
    animation: noche-tramo-a linear both, noche-tramo-b linear forwards;
    animation-timeline: scroll(root), scroll(root);
    animation-range: var(--a-ini, 0px) var(--a-fin, 100vh), var(--b-ini, 100000px) var(--b-fin, 100001px);
  }
}

[data-tema='oscuro'].con-scrub .noche-fondo {
  animation: none;
  opacity: 1;
}

/* p = 1 - avance (tramo A) o = avance (tramo B); opacidad = mezcla de
   #010A12 sobre #F9F6EF que da cada color de la curva original:
   p 0,5 → #E9E6DF (0,068) · 0,69-0,7 → #9A9C9A (0,386) · 0,73 → #696C6E (0,582). */
@keyframes noche-tramo-a {
  0% { opacity: 1; }
  27% { opacity: 0.582; }
  30% { opacity: 0.386; }
  31% { opacity: 0.386; }
  50% { opacity: 0.068; }
  100% { opacity: 0; }
}

@keyframes noche-tramo-b {
  0% { opacity: 0; }
  50% { opacity: 0.068; }
  69% { opacity: 0.386; }
  70% { opacity: 0.386; }
  73% { opacity: 0.582; }
  100% { opacity: 1; }
}

/* ---------- Nav fija de 48px ----------
   Sin JS queda oscura y sólida (legible sobre el hero oscuro y sobre el
   contenido claro). Con JS sigue el color de lo que tiene debajo. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-alto);
  background: var(--c-nav-solido);
  border-bottom: 1px solid var(--c-linea);
  color: var(--c-texto);
}

@media (min-width: 768px) {
  .con-scrub .nav {
    background: var(--c-nav);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
  }
}

.nav-inner {
  width: min(1080px, calc(100% - 32px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-right: auto;
}

/* Dos búhos superpuestos: trazos claros sobre fondo oscuro, trazos navy
   sobre fondo claro. Cambian en la misma ventana que el texto. */
.brand-logo {
  display: grid;
  width: 24px;
  height: 23px;
}

.brand-logo img {
  grid-area: 1 / 1;
  width: 24px;
  height: 23px;
}

.logo-claro {
  opacity: var(--c-logo-claro);
}

.logo-oscuro {
  opacity: calc(1 - var(--c-logo-claro));
}

.nav-links {
  display: none;
}

.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: var(--radio-pill);
  /* Mismo reborde cian→violeta que el botón principal. */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--c-boton), var(--c-boton)) padding-box,
    var(--degradado) border-box;
  color: var(--c-boton-texto);
  font-size: 12px;
  font-weight: 500;
  transition: opacity var(--dur) var(--ease);
}

.nav-cta:hover {
  opacity: 0.88;
}

/* Área táctil de 44px sin cambiar el tamaño visible del botón. */
.nav-cta::before {
  content: '';
  position: absolute;
  inset: -8px -4px;
}

.nav-cta-largo {
  display: none;
}

/* Barra superior: los 4 destinos desde 768px (debajo de eso, el dock). */
@media (min-width: 768px) {
  .nav-links {
    display: flex;
    gap: 22px;
    margin-right: var(--esp-4);
  }

  .nav-links a {
    font-size: 13px;
    color: var(--c-texto2);
    transition: opacity var(--dur) var(--ease);
  }

  .nav-links a:hover,
  .nav-links a[aria-current="page"] {
    color: var(--c-texto);
  }

  /* Página actual: además del color, un punto con el degradado debajo. */
  .nav-links a {
    position: relative;
  }

  .nav-links a[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--degradado);
  }

}

@media (min-width: 900px) {
  .nav-links {
    gap: var(--esp-7);
    margin-right: var(--esp-5);
  }

  .nav-cta-largo {
    display: inline;
  }

  .nav-cta-corto {
    display: none;
  }
}

/* ---------- Hero ----------
   Empieza en #010A12 y pasa a claro con el scroll (home.js). Sin JS o con
   movimiento reducido: bloque oscuro estático. Colores desde --c-*. */
/* Pista mínima para que el fondo pase la franja gris antes de que asome
   Servicios: su etiqueta empieza en ≥135svh (min-height + 96px de padding
   de #servicios), en cualquier proporción de pantalla. */
.hero {
  position: relative;
  min-height: calc(135svh - 96px);
  padding: calc(var(--nav-alto) + 72px) 0 64px;
  text-align: center;
  background: var(--noche);
  color: var(--c-texto);
  overflow-x: clip; /* el halo del panel sobresale a los lados */
}

.con-scrub .hero {
  background: transparent;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--esp-18);
}

/* ---------- Estrellas de los tramos oscuros (hero y cierre) ----------
   Mismo estilo que las del pie. Detrás del contenido; home.js las ubica
   lejos del texto y de los paneles, y baja su opacidad (--c-estrellas)
   con el fondo: visibles en negro, 0 al llegar a la banda gris. */
.cielo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--c-estrellas);
}

/* Calidad baja: la mitad de las estrellas (nunca cero). */
[data-calidad='bajo'] .cielo .estrella:nth-child(2n) {
  display: none;
}

.hero-texto .etiqueta,
.hero .tenue,
.hero-linea {
  color: var(--c-texto2);
}

.hero-texto .etiqueta {
  margin-bottom: var(--esp-5);
}

.hero-linea {
  /* En em y no en ch (el ch depende del "0" de cada fuente y cambiaba el
     corte de línea al llegar Inter: salto de diseño). 20,25em = 34ch de
     Inter. */
  max-width: 20.25em;
  margin: var(--esp-6) auto 0;
  font-size: clamp(17px, 2vw, 21px);
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3) var(--esp-7);
  margin-top: 36px;
}

/* Botones del hero: se invierten con el fondo (claro sobre oscuro). */
.hero .boton-principal {
  color: var(--c-boton-texto);
  background:
    linear-gradient(var(--c-boton), var(--c-boton)) padding-box,
    var(--degradado) border-box;
}

.hero .boton-texto {
  color: var(--c-texto);
  text-decoration-color: var(--c-linea);
}

.hero-demo {
  position: relative;
  width: min(400px, 100%);
  margin: 0 auto;
}

/* Dos columnas: texto a la izquierda, demo a la derecha centrada en
   vertical. El titular baja a máx. 76px para caber en su columna. */
@media (min-width: 1024px) {
  /* Primera pantalla completa (texto y demo centrados en ella) + la pista
     justa para que la etiqueta de Servicios empiece en 135svh. */
  .hero {
    text-align: left;
    min-height: 0;
    /* Sin hueco oscuro al final: el hilo conecta con la siguiente sección. */
    padding: 0 0 72px;
  }

  .hero-grid {
    min-height: 100svh;
    padding: calc(var(--nav-alto) + 48px) 0 48px;
    align-content: center;
  }

  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: var(--esp-16);
  }

  .titular-hero {
    font-size: clamp(44px, 5.4vw, 76px);
  }

  .hero:not(.hero-compacto) .titular-hero {
    font-size: clamp(40px, 4.1vw, 60px);
  }

  .hero-linea {
    margin-left: 0;
  }

  .hero-acciones {
    justify-content: flex-start;
  }

  .hero-demo {
    justify-self: end;
    width: 100%;
    max-width: 420px;
  }

  /* La leyenda sale del flujo: así la grilla centra el panel (no panel +
     leyenda) contra el bloque de texto. */
  .hero-demo figcaption {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
}

.hero-halo {
  position: absolute;
  inset: 14% -6% 4%;
  z-index: -1;
  background: var(--degradado);
  border-radius: 50%;
  filter: blur(56px);
  opacity: 0.16;
}

/* Panel de la demo: vidrio oscuro sobre el hero negro, vidrio claro
   cuando la página ya es clara (mismas variables que el resto). */
.hero .chat {
  position: relative;
  padding: 18px;
  text-align: left;
  background: var(--c-panel-solido);
  border-color: var(--c-panel-borde);
}

@media (min-width: 768px) {
  .hero .chat {
    background: var(--c-panel);
  }
}

.chat-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--c-linea);
}

.chat-cabecera strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.chat-cabecera small {
  display: block;
  font-size: 12px;
  color: var(--c-texto2);
}

.chat-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-boton);
  color: var(--c-boton-texto);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.chat-estado {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-texto2);
}

.chat-estado::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2E9E6A;
}

.chat-mensajes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

/* Burbujas sólidas con texto navy fijo: se leen igual sobre el panel
   oscuro y sobre el claro. */
.msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: var(--radio-4);
  font-size: 14px;
  line-height: 1.4;
  color: var(--navy);
}

.msg-cliente {
  align-self: flex-end;
  background: #DDEFFA;
  border-bottom-right-radius: 6px;
}

.msg-agente {
  align-self: flex-start;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-bottom-left-radius: 6px;
}

/* Indicador "escribiendo": solo aparece con JS, entre mensaje y mensaje. */
.chat-escribiendo {
  display: none;
  position: absolute;
  left: 18px;
  gap: var(--esp-1);
  padding: 10px var(--esp-3);
  border-radius: var(--radio-3);
  background: var(--superficie);
  border: 1px solid var(--linea);
}

.chat-escribiendo span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gris);
  animation: punto 1.2s ease-in-out infinite;
}

.chat-escribiendo span:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-escribiendo span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes punto {
  50% {
    opacity: 0.3;
  }
}

.hero-demo figcaption {
  margin-top: var(--esp-4);
  font-size: 12px;
  color: var(--c-texto2);
}

/* Entrada al cargar en CSS (no GSAP): el titular es lo primero que se
   pinta y no debe esperar a que cargue el CDN. Línea por línea, 70ms. */
@keyframes subir-linea {
  from {
    opacity: 0;
    transform: translateY(0.3em);
  }
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.titular-hero .linea > span {
  animation: subir-linea 0.9s var(--ease) both;
}

.titular-hero .linea:nth-child(2) > span {
  animation-delay: 0.07s;
}

.titular-hero .linea:nth-child(3) > span {
  animation-delay: 0.14s;
}

.hero-texto .etiqueta,
.hero-linea,
.hero-acciones {
  animation: aparecer 0.8s var(--ease) both;
}

/* El subtítulo es el elemento más grande del primer pantallazo (LCP): se
   pinta desde el primer cuadro y solo sube 16px, sin fundido. */
.hero-linea {
  animation: subir-sin-fundido 0.8s 0.1s var(--ease) both;
}

@keyframes subir-sin-fundido {
  from {
    transform: translateY(16px);
  }
}

.hero-acciones {
  animation-delay: 0.32s;
}

.hero-demo {
  animation: aparecer 0.9s 0.45s var(--ease) both;
}

/* ---------- Secciones ---------- */
.seccion {
  /* Prompt 2B: más aire entre secciones (160-192px en escritorio,
     proporcional hasta 112px en celular). */
  padding: clamp(112px, 13.4vw, 192px) 0;
}

/* Superficie alterna con bordes difuminados: entra y sale del fondo sin
   cortes rectos (como el resto de la página). */
.seccion-alterna {
  background: linear-gradient(
    to bottom,
    rgba(243, 240, 234, 0) 0,
    var(--superficie) 140px,
    var(--superficie) calc(100% - 140px),
    rgba(243, 240, 234, 0) 100%
  );
}

/* Con el scroll: la superficie es transparente mientras la página está
   oscura (si no, aparecía una franja clara bajo el hero negro) y llega a
   #F3F0EA junto con el fondo claro. */
.con-scrub .seccion-alterna {
  background: linear-gradient(
    to bottom,
    rgba(243, 240, 234, 0) 0,
    var(--c-superficie) 140px,
    var(--c-superficie) calc(100% - 140px),
    rgba(243, 240, 234, 0) 100%
  );
}

.seccion-cabecera {
  margin-bottom: var(--esp-14);
}

.seccion-pie {
  margin-top: var(--esp-10);
}

/* ---------- 01 · Servicios: carrusel ----------
   Sin JS (o sin GSAP): lista vertical de las 8 tarjetas. home.js agrega
   .listo y lo convierte en una pista horizontal con snap nativo: tarjeta
   activa al centro, vecinas más chicas y atenuadas, forma de color detrás. */
.carrusel-pista {
  display: grid;
  gap: var(--esp-3);
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
}

.servicio {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--esp-7) 26px;
}

.servicio-num {
  position: absolute;
  top: 30px;
  right: 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: #4A5563;
}

.servicio h3 {
  margin-top: 22px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.servicio p {
  margin-top: var(--esp-2);
  padding-right: var(--esp-7);
  font-size: 15px;
  color: #4A5563;
  max-width: 44ch;
}

.tarjeta-flecha {
  position: absolute;
  right: 28px;
  bottom: 26px;
  font-size: 18px;
  color: var(--navy);
  opacity: 0.45;
  transition: opacity var(--dur-media) var(--ease), transform var(--dur-media) var(--ease);
}

/* Reborde cian→violeta: una capa con el degradado enmascarada a 1px, solo
   opacidad. Recurso de identidad en tarjetas, paneles y demos. */
.servicio::after,
.carrusel-tarjeta::after,
.agente::after,
.hero .chat::after,
.cierre-panel::after,
.recomendacion::after,
.caso::after,
.trabajo-principal::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--degradado);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity var(--dur-larga) var(--ease);
  pointer-events: none;
}

.servicio:focus-visible::after {
  opacity: 1;
}

/* Cierre: un reflejo de luz recorre su reborde, muy lento (12s), como la
   aurora del pie. Solo con el scroll animado; si el navegador no anima
   ángulos (@property), queda el reborde fijo. */
@property --giro {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.con-scrub .cierre-panel::after {
  background: conic-gradient(from var(--giro), var(--cian), var(--violeta) 22%, rgba(123, 79, 191, 0.35) 40%, rgba(74, 179, 232, 0.35) 70%, var(--cian));
  animation: giro-reborde 12s linear infinite;
}

@keyframes giro-reborde {
  to {
    --giro: 360deg;
  }
}

/* Paneles focales: el reborde queda siempre encendido. */
.hero .chat::after,
.cierre-panel::after,
.recomendacion::after,
.trabajo-principal::after {
  opacity: 0.85;
}

.icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radio-3);
  background: rgba(74, 179, 232, 0.12);
  color: var(--navy);
}

.icono svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}

/* Partes del ícono en cian: home.js las hace aparecer en orden cuando la
   tarjeta pasa al centro (los puntos del chat, las ondas del NFC...). */
.icono .anim {
  stroke: var(--cian);
}

.icono circle.anim {
  fill: var(--cian);
}

@media (hover: hover) {
  .servicio:hover::after,
  .agente:hover::after {
    opacity: 1;
  }

  .servicio:hover .tarjeta-flecha {
    opacity: 1;
    transform: translateX(3px);
  }
}

/* --- Con JS: carrusel --- */
.carrusel-forma {
  display: none;
}

:is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .carrusel-escena {
  position: relative;
  overflow-x: clip;
}

/* Forma de color detrás de la pista: tres manchas radiales de la paleta
   (sin filtro blur: los degradados ya terminan en transparente). home.js
   la desplaza, la gira y le cambia el matiz con cada servicio, así el
   vidrio tiene algo que refractar. */
.carrusel.listo .carrusel-forma {
  --fa: rgba(74, 179, 232, 0.6);
  --fb: rgba(123, 79, 191, 0.5);
  --fc: rgba(27, 46, 68, 0.16);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1180px, 150vw);
  aspect-ratio: 2.1;
  background:
    radial-gradient(36% 50% at 30% 50%, var(--fa), transparent 70%),
    radial-gradient(36% 50% at 70% 52%, var(--fb), transparent 70%),
    radial-gradient(24% 38% at 50% 50%, var(--fc), transparent 72%);
  pointer-events: none;
}

:is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .carrusel-pista {
  --ancho: min(600px, 56vw);
  --hueco: 24px;
  position: relative;
  display: flex;
  gap: var(--hueco);
  width: 100%;
  margin: 0;
  padding: 56px calc(50% - var(--ancho) / 2);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

:is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .carrusel-pista::-webkit-scrollbar {
  display: none;
}

:is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .carrusel-item {
  flex: 0 0 var(--ancho);
  scroll-snap-align: center;
}

/* Vidrio del carrusel (todas las tarjetas del componente): translúcido en
   todas; el blur solo en la activa y sus dos vecinas (las demás están
   fuera de foco). Más blanco que el vidrio general para que el texto pase
   4.5:1 sobre cualquier matiz de la forma de fondo. */
:is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .carrusel-tarjeta {
  position: relative;
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: var(--sombra-3);
  transform-origin: 50% 60%;
  will-change: transform, opacity;
  -webkit-user-drag: none;
}

:is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .servicio {
  min-height: 300px;
  padding: 30px var(--esp-7);
}

:is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .servicio h3 {
  margin-top: auto;
  padding-top: var(--esp-10);
  font-size: clamp(22px, 2.2vw, 28px);
}

/* Reborde degradado solo en la tarjeta activa (ni hover ni demo en las demás). */
.carrusel.listo .es-activa .carrusel-tarjeta::after {
  opacity: 1;
}

.carrusel.listo .carrusel-item:not(.es-activa) .carrusel-tarjeta::after {
  opacity: 0;
}

.carrusel.listo .carrusel-item:not(.es-activa) .tarjeta-flecha {
  opacity: 0;
}

.carrusel.arrastrando .carrusel-pista {
  cursor: grabbing;
  user-select: none;
}

.carrusel.arrastrando .carrusel-tarjeta {
  cursor: grabbing;
}

@media (min-width: 768px) {
  :is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .carrusel-tarjeta {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .servicio {
    min-height: 340px;
    padding: 36px 34px;
  }

  .carrusel.listo .es-activa .carrusel-tarjeta,
  .carrusel.listo .es-vecina .carrusel-tarjeta {
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }

  :is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .servicio-num {
    top: 38px;
    right: 34px;
  }
}

/* Celular: tarjeta de ~80vw con las vecinas asomando a los lados. */
@media (max-width: 767px) {
  :is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .carrusel-pista {
    --ancho: 80vw;
    --hueco: 3vw;
    padding-block: var(--esp-10);
  }
}

/* "El problema" arranca más cerca del hero; sus textos siguen el fondo
   (sigue-fondo): navy mientras aún es gris, gris cuando ya es claro. */
#problema {
  padding-top: clamp(112px, 12vw, 176px);
}

/* Agentes y Cómo trabajamos ya no van pegadas (cada una es su banda de
   noche): llevan el aire completo de .seccion. */

/* Menos aire entre el titular y la pista: la pista ya trae su margen. */
#servicios:has(:is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil])) .seccion-cabecera {
  margin-bottom: var(--esp-2);
}

/* Controles: contador, barra de progreso (el autoavance), pausa y flechas. */
.carrusel-controles {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.carrusel-controles[hidden] {
  display: none;
}

/* Con JS, el carrusel tiene desde la primera pintura el alto que tendrá
   montado (pista horizontal y controles reservados): montarlo después
   (al acercarse a la pantalla) no mueve la página. */
.js .carrusel:not([data-solo-movil]) .carrusel-controles[hidden],
.js-movil .carrusel[data-solo-movil] .carrusel-controles[hidden] {
  display: flex;
  visibility: hidden;
}

.carrusel-contador {
  min-width: 4.6em;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.carrusel-progreso {
  flex: 1;
  height: 2px;
  margin-right: var(--esp-2);
  border-radius: var(--radio-1);
  background: var(--linea);
  overflow: hidden;
}

.carrusel-progreso span {
  display: block;
  height: 100%;
  background: var(--degradado);
  transform: scaleX(0);
  transform-origin: left center;
}

.carrusel-boton {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    var(--degradado) border-box;
  color: var(--navy);
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}

.carrusel-boton[hidden] {
  display: none;
}

.carrusel-boton svg {
  width: 20px;
  height: 20px;
}

.carrusel-pausa .icono-play,
.carrusel-pausa.pausado .icono-pausa {
  display: none;
}

.carrusel-pausa.pausado .icono-play {
  display: block;
}

@media (hover: hover) {
  .carrusel-boton:hover {
    transform: translateY(-2px);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 02 · Agentes ----------
   Fondo propio claro: no depende del color que el scroll le da al body
   (arriba es negro), así su texto navy nunca queda sobre oscuro. */
/* Solo el del inicio: en /servicios la sección asoma bajo el hero oscuro
   y sigue las variables del fondo. */
:is(#agentes:not(.servicios-agentes), #casos):not(.tono-papel, .tono-noche) {
  background: var(--fondo);
}

.agentes {
  display: grid;
  gap: var(--esp-4);
}

/* .activa: mientras corre su micro-demo, la tarjeta enciende el reborde
   (se ve qué agente está trabajando). */
.agente {
  position: relative;
  padding: 26px;
  display: flex;
  flex-direction: column;
}

.agente-cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
}

.agente-cabecera img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.agente.activa::after {
  opacity: 1;
}

.agente h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.agente-rol {
  font-size: 13px;
  color: var(--gris);
}

.agente-desc {
  margin: var(--esp-4) 0 var(--esp-6);
  font-size: 15px;
  color: var(--gris);
}

/* Micro-demo: cada agente muestra su trabajo con su propio formato
   (chat, llamada, documento), no tres tarjetas iguales. margin-top:auto
   alinea los tres demos abajo aunque las descripciones midan distinto. */
.demo > * {
  display: block;
}

.demo-aurora,
.demo-vega,
.demo-halley {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-height: 148px;
  padding: var(--esp-4);
  margin-top: auto;
  border-radius: var(--radio-4);
  background: var(--superficie);
  border: 1px solid var(--linea);
}

.d-msg {
  max-width: 88%;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-3);
  font-size: 13px;
  line-height: 1.4;
}

.d-cliente {
  align-self: flex-end;
  background: rgba(74, 179, 232, 0.16);
  border-bottom-right-radius: 5px;
}

.d-agente {
  align-self: flex-start;
  background: #FFFFFF;
  border: 1px solid var(--linea);
  border-bottom-left-radius: 5px;
}

.d-llamada {
  display: inline-flex !important;
  align-items: center;
  gap: var(--esp-2);
  font-size: 13px;
  font-weight: 500;
}

.d-llamada svg {
  width: 16px;
  height: 16px;
}

.d-onda {
  display: flex !important;
  align-items: center;
  gap: var(--esp-1);
  height: 32px;
}

.d-onda i {
  display: block;
  width: 4px;
  height: 28px;
  border-radius: var(--radio-1);
  background: var(--cian);
  transform-origin: 50% 50%;
  transform: scaleY(0.35);
}

.d-onda i:nth-child(2n) {
  transform: scaleY(0.7);
}

.d-onda i:nth-child(3n) {
  transform: scaleY(0.5);
}

.d-fila {
  font-size: 13px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linea);
}

.d-titulo {
  font-weight: 600;
}

.d-chip {
  color: var(--navy);
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 10px;
  border-radius: var(--radio-pill);
  background: #FFFFFF;
  border: 1px solid var(--linea);
  font-size: 12px;
  font-weight: 500;
}

.d-chip::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #2E9E6A;
  vertical-align: 1px;
}

@media (min-width: 900px) {
  .agentes {
    grid-template-columns: repeat(3, 1fr);
  }

  .agente {
    padding: 30px;
  }
}

/* ---------- 03 · Cómo trabajamos ---------- */
.pasos {
  position: relative;
}

.pasos ol {
  display: grid;
  gap: 44px;
  padding-left: var(--esp-10);
}

.pasos-linea {
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--linea);
  border-radius: var(--radio-1);
}

.pasos-linea span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--cian), var(--violeta));
  transform-origin: 50% 0;
}

.paso {
  position: relative;
  transition: opacity var(--dur-larga) var(--ease);
}

/* Punto sobre la línea: se rellena cuando la línea llega al paso. */
.paso::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--navy);
  transition: background-color var(--dur-larga) var(--ease), border-color var(--dur-larga) var(--ease);
}

/* Paso encendido: el punto se rellena con el degradado de identidad. */
.paso.activo::before {
  background: var(--degradado);
  border-color: transparent;
}

/* Inactivo = punto vacío y título en gris (5.5:1); nunca texto
   transparente: con opacidad el contraste caía bajo 4.5:1. */
.paso h3 {
  transition: color var(--dur-larga) var(--ease);
}

.pasos.con-js .paso:not(.activo) h3 {
  color: var(--gris);
}

.pasos.con-js .paso::before {
  border-color: #B9C3CF;
}

.pasos.con-js .paso.activo::before {
  border-color: transparent;
}

.paso-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

.paso h3 {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.paso p {
  margin-top: 10px;
  font-size: 16px;
  color: var(--gris);
  max-width: 36ch;
}

@media (min-width: 900px) {
  .pasos ol {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--esp-10);
    padding-left: 0;
    padding-top: var(--esp-12);
  }

  .pasos-linea {
    left: 8px;
    right: 8px;
    top: 7px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .pasos-linea span {
    background: var(--degradado);
    transform-origin: 0 50%;
  }

  .paso::before {
    left: 0;
    top: -48px;
  }
}

/* ---------- 04 · Casos (banda compacta) ----------
   Desde aquí empieza la transición al negro: estos colores salen de las
   variables --c-* que home.js anima con el scroll. */
.casos-banda {
  padding: var(--esp-14) 0;
  color: var(--navy);
}

.con-scrub .casos-banda {
  color: var(--c-texto);
}

.casos-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-3) var(--esp-8);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--linea);
}

.casos-inner .etiqueta span {
  color: var(--navy);
}

.con-scrub .casos-inner {
  border-top-color: var(--c-linea);
}

.con-scrub .casos-inner .etiqueta {
  color: var(--c-texto2);
}

.con-scrub .casos-inner .etiqueta span {
  color: var(--c-texto);
}

.casos-texto {
  flex: 1 1 320px;
  font-size: clamp(19px, 2.2vw, 24px);
  letter-spacing: -0.01em;
}

.casos-texto strong {
  font-weight: 600;
}

.con-scrub .casos-banda .boton-texto {
  color: var(--c-texto);
  text-decoration-color: var(--c-linea);
}

/* ---------- Cierre ----------
   Sin JS (o con movimiento reducido): bloque #010A12 fijo, salto simple.
   Con JS (.con-scrub): fondo transparente y colores desde las variables,
   así el negro llega de forma continua con el scroll. */
.cierre {
  position: relative;
  background: var(--noche);
  color: #F5F3EE;
}

.cierre .contenedor {
  position: relative;
  z-index: 1;
}

.cierre-panel {
  position: relative;
  text-align: center;
  padding: var(--esp-16) var(--esp-6);
  border-radius: var(--radio-6);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 768px) {
  .cierre-panel {
    padding: var(--esp-24) var(--esp-16);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
}

.titular-cierre {
  font-size: clamp(36px, 6vw, 72px);
}

/* Solo el texto del panel (no el del formulario ni la etiqueta). */
.cierre-panel > p:not(.etiqueta, .contacto-alterno) {
  max-width: 40ch;
  margin: var(--esp-5) auto var(--esp-8);
  font-size: clamp(17px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.62);
}

/* En oscuro el botón principal se invierte: relleno claro, texto navy,
   mismo borde con el degradado. */
.cierre .boton-principal {
  color: var(--navy);
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    var(--degradado) border-box;
}

.con-scrub .cierre {
  background: transparent;
  color: var(--c-texto);
}

.con-scrub .cierre-panel {
  background: var(--c-panel-solido);
  border-color: var(--c-panel-borde);
}

@media (min-width: 768px) {
  .con-scrub .cierre-panel {
    background: var(--c-panel);
  }
}

.con-scrub .cierre-panel > p:not(.etiqueta, .contacto-alterno) {
  color: var(--c-texto2);
}

.con-scrub .cierre .boton-principal {
  color: var(--c-boton-texto);
  background:
    linear-gradient(var(--c-boton), var(--c-boton)) padding-box,
    var(--degradado) border-box;
}

/* ---------- WhatsApp flotante ---------- */
.flotante-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #FFFFFF;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--navy), var(--navy)) padding-box,
    var(--degradado) border-box;
  box-shadow: var(--sombra-flotante);
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease),
    visibility 0s linear 0s;
}

/* Con el scrub se invierte junto con el resto: claro sobre el negro. */
.con-scrub .flotante-wa {
  color: var(--c-boton-texto);
  background:
    linear-gradient(var(--c-boton), var(--c-boton)) padding-box,
    var(--degradado) border-box;
}

.flotante-wa:hover {
  transform: translateY(-2px);
}

/* Oculto mientras otro botón de WhatsApp está a la vista (hero, cierre,
   pie): sin duplicar el llamado ni tapar contenido en el celular. */
.flotante-wa.oculto {
  opacity: 0;
  transform: scale(0.85);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}

/* ---------- Pie: siempre #010A12, mismo color exacto del cielo de
   footer-mountains (sin costura) ---------- */
.pie {
  position: relative;
  overflow: hidden;
  background: var(--noche);
  color: #F5F3EE;
  padding: var(--esp-18) 0 var(--esp-10);
}

/* Estrellas: titilan lento, cada una con su propio ritmo (nunca todas a
   la vez). Se detienen con prefers-reduced-motion. */
.pie-cielo {
  position: absolute;
  inset: 0 0 auto;
  height: 320px;
  pointer-events: none;
}

/* Titilan solo con JS y sin movimiento reducido (.con-scrub); si no,
   quedan estáticas. */
.estrella {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #FFFFFF;
  opacity: 0.55;
}

.con-scrub .estrella {
  animation: titilar var(--d, 5s) ease-in-out var(--r, 0s) infinite;
}

.estrella.grande {
  width: 3px;
  height: 3px;
}

@keyframes titilar {
  50% {
    opacity: 0.18;
  }
}

.pie-paisaje {
  position: relative;
}

/* El cielo de la imagen tiene ruido de compresión (±1 en cada canal):
   este degradado parte de #010A12 exacto y lo funde, así no hay costura. */
.pie-paisaje::before {
  content: '';
  position: absolute;
  inset: 0 0 50%;
  z-index: 1;
  background: linear-gradient(to bottom, var(--noche), rgba(1, 10, 18, 0));
}

.pie-montanas {
  display: block;
  width: 100%;
  height: max(120px, 18.4vw);
  object-fit: cover;
  object-position: 50% 100%;
}

.pie-inner {
  display: grid;
  gap: 36px;
  margin-top: var(--esp-10);
}

.pie-marca {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

.pie-marca img {
  width: 56px;
  height: auto;
}

.pie-marca strong {
  display: block;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.32em;
}

.pie-marca small {
  display: block;
  margin-top: var(--esp-1);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.pie-contacto,
.pie-links {
  display: grid;
  gap: 2px;
}

.pie-contacto a,
.pie-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  transition: color var(--dur) var(--ease);
}

.pie-contacto svg {
  width: 18px;
  height: 18px;
  color: var(--cian);
  flex-shrink: 0;
}

.pie-contacto a:hover,
.pie-links a:hover {
  color: #FFFFFF;
}

/* Redes: decorativas como en el sitio anterior (sin usuario real todavía). */
.pie-redes {
  display: flex;
  gap: 18px;
  color: rgba(255, 255, 255, 0.62);
}

.pie-redes svg {
  width: 20px;
  height: 20px;
}

.pie-lema {
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.pie-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-6);
  margin-top: var(--esp-12);
  padding-top: var(--esp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

@media (min-width: 900px) {
  .pie-inner {
    grid-template-columns: 1.6fr 1.2fr auto auto 0.8fr;
    align-items: center;
    gap: var(--esp-10);
  }
}

/* ---------- Páginas interiores ----------
   Misma hoja y mismo JS que el home. .inicio-claro (en <html>) es para una
   página sin hero oscuro: pone las variables --c-* en su valor claro y
   home.js solo hace el tramo final al negro. /servicios no lo usa: empieza
   con el hero compacto oscuro. */
.inicio-claro {
  --c-fondo: #F9F6EF;
  --c-texto: #1B2E44;
  --c-texto2: #566579;
  --c-linea: rgba(27, 46, 68, 0.12);
  --c-nav: rgba(255, 255, 255, 0.55);
  --c-nav-solido: rgba(249, 246, 239, 0.96);
  --c-panel: rgba(255, 255, 255, 0.55);
  --c-panel-solido: #FFFFFF;
  --c-panel-borde: rgba(255, 255, 255, 0.7);
  --c-superficie: rgba(243, 240, 234, 1);
  --c-estrellas: 0;
  --c-logo-claro: 0;
  --c-boton: #1B2E44;
  --c-boton-texto: #FFFFFF;
  --c-acento: #5A3796;
  --c-campo-borde: rgba(27, 46, 68, 0.4);
}

/* Con pestañas pegadas bajo la nav, los saltos a cada área las descuentan. */
html:has(.pestanas) {
  scroll-padding-top: calc(var(--nav-alto) + 80px);
}

/* Sin scroll (sin JS o movimiento reducido) el cierre es negro fijo: sus
   estrellas se ven, quietas. */
.inicio-claro:not(.con-scrub) .cierre .cielo {
  opacity: 1;
}

/* ---------- Hero compacto (componente compartido) ----------
   Para páginas interiores (/servicios; luego /casos, /agentes, /faq): el
   mismo .hero del home (estrellas, nav invertida, paso continuo a claro
   en ~1 pantalla de scroll) sin demo y a ~58svh. Sin JS o con movimiento
   reducido: bloque #010A12 fijo. */
.hero.hero-compacto {
  display: grid;
  align-content: end;
  min-height: 58svh;
  padding: calc(var(--nav-alto) + 64px) 0 clamp(56px, 8vw, 96px);
  text-align: left;
}

.hero-compacto .hero-grid {
  display: block;
  min-height: 0;
  padding: 0;
}

.hero-compacto .titular-hero {
  max-width: 20ch;
  font-size: clamp(36px, 4.8vw, 66px);
}

/* La sección que sigue al hero compacto arranca más cerca: el hero ya
   deja su propio aire abajo. */
.hero-compacto + .seccion {
  padding-top: clamp(48px, 6vw, 80px);
}

.hero-compacto .hero-linea {
  max-width: 27.4em;
  margin-left: 0;
}

/* Pestañas: barra de vidrio pegada bajo la nav mientras duran las áreas.
   El indicador (degradado de identidad) lo desliza home.js. Con el scroll
   solo se muestra con la página ya clara (.pagina-clara, tras el paso del
   hero): nunca sobre fondo oscuro. */
.pestanas {
  position: sticky;
  top: var(--nav-alto);
  z-index: 50;
  background: rgba(249, 246, 239, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.pestanas-pista {
  position: relative;
  width: min(1080px, 100%);
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.pestanas-pista::-webkit-scrollbar {
  display: none;
}

.pestanas ul {
  display: flex;
  gap: var(--esp-1);
  width: max-content;
  padding: 0 var(--esp-5);
}

.pestanas a {
  display: block;
  padding: var(--esp-4) var(--esp-3);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--gris);
  scroll-snap-align: center;
  transition: color var(--dur) var(--ease);
}

.pestanas a:hover,
.pestanas a[aria-current] {
  color: var(--navy);
}

.pestanas-indicador {
  display: none;
}

.pestanas.con-js .pestanas-indicador {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 2px;
  border-radius: var(--radio-1);
  background: var(--degradado);
  opacity: 0;
  transform-origin: left center;
}

@media (min-width: 1120px) {
  .pestanas ul {
    padding: 0;
    margin-left: -12px;
  }
}

/* Áreas: número y nombre a la izquierda, lista con hairlines a la derecha. */
.area {
  padding: clamp(72px, 9vw, 128px) 0 0;
}

/* La primera área ya tiene encima el alto de la barra de pestañas. */
.pestanas + .area,
.pestanas + .seccion {
  padding-top: clamp(48px, 6vw, 80px);
}

.area:last-child {
  padding-bottom: clamp(72px, 9vw, 128px);
}

.area-grid {
  display: grid;
  gap: var(--esp-7);
}

.area-num {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--violeta-texto);
}

.area-titulo {
  margin-top: 10px;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 11ch;
}

.area-lista {
  border-top: 1px solid var(--linea);
}

.area-lista li {
  border-bottom: 1px solid var(--linea);
}

.fila {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px var(--esp-4);
  padding: 22px var(--esp-1);
  border-radius: var(--radio-4);
}

.fila strong {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.fila-texto {
  grid-column: 1;
  font-size: 15px;
  color: var(--gris);
}

.fila-flecha {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  color: var(--gris);
  transition: color var(--dur-media) var(--ease), border-color var(--dur-media) var(--ease), background var(--dur-media) var(--ease), transform var(--dur-media) var(--ease);
}

.fila-flecha svg {
  width: 16px;
  height: 16px;
}

/* Hover/foco (desktop): la fila se corre, aparece un vidrio suave y la
   flecha toma el reborde cian→violeta. En táctil, filas quietas. */
.fila::before {
  content: '';
  position: absolute;
  inset: 4px -12px;
  border-radius: var(--radio-4);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--sombra-1);
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease);
  z-index: -1;
}

.fila {
  z-index: 0;
  transition: transform var(--dur-media) var(--ease);
}

.fila:focus-visible::before {
  opacity: 1;
}

.fila:focus-visible .fila-flecha {
  color: var(--navy);
  border-color: transparent;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    var(--degradado) border-box;
}

@media (hover: hover) {
  .fila:hover {
    transform: translateX(6px);
  }

  .fila:hover::before {
    opacity: 1;
  }

  .fila:hover .fila-flecha {
    color: var(--navy);
    border-color: transparent;
    background:
      linear-gradient(#FFFFFF, #FFFFFF) padding-box,
      var(--degradado) border-box;
    transform: translateX(2px);
  }
}

@media (min-width: 900px) {
  .area-grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--esp-12);
    align-items: start;
  }

  /* El nombre del área acompaña su lista mientras se recorre. */
  .area-cabecera {
    position: sticky;
    top: calc(var(--nav-alto) + 96px);
  }

  .fila {
    grid-template-columns: 1fr 1.15fr auto;
    align-items: center;
    padding: 26px var(--esp-1);
  }

  .fila-texto {
    grid-column: 2;
  }

  .fila-flecha {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Con el scroll, las áreas y sus filas siguen las variables --c-*: la
   primera asoma bajo el hero compacto mientras aún es oscuro y la última
   sigue en pantalla cuando empieza el paso al negro; se invierten junto con
   el fondo (como la nav). */
.con-scrub .pestanas {
  background: var(--c-nav);
  border-color: var(--c-linea);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-media) var(--ease), visibility 0s linear var(--dur-media);
}

.con-scrub.pagina-clara .pestanas {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-media) var(--ease);
}

.con-scrub .pestanas a {
  color: var(--c-texto2);
}

.con-scrub .pestanas a:hover,
.con-scrub .pestanas a[aria-current] {
  color: var(--c-texto);
}

.con-scrub .area {
  color: var(--c-texto);
}

.con-scrub .area-num {
  color: var(--c-acento);
}

.con-scrub .area-lista,
.con-scrub .area-lista li {
  border-color: var(--c-linea);
}

.con-scrub .fila-texto {
  color: var(--c-texto2);
}

.con-scrub .fila-flecha {
  border-color: var(--c-linea);
  color: var(--c-texto2);
}

/* ---------- Puente al cierre (componente compartido) ----------
   Desde aquí los colores siguen el scroll hacia el negro del cierre. */
.puente-cierre {
  padding: var(--esp-8) 0 var(--esp-18);
  color: var(--navy);
}

.con-scrub .puente-cierre {
  color: var(--c-texto);
}

.puente-cierre-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-3) var(--esp-8);
  padding-top: var(--esp-7);
  border-top: 1px solid var(--linea);
}

.con-scrub .puente-cierre-inner {
  border-top-color: var(--c-linea);
}

.puente-cierre-texto {
  flex: 1 1 320px;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.puente-cierre .boton-texto {
  font-size: 17px;
}

.con-scrub .puente-cierre .boton-texto {
  color: var(--c-texto);
  text-decoration-color: var(--c-linea);
}

/* ---------- Página: Casos ----------
   Mismo sándwich que /servicios: hero compacto oscuro → claro → cierre
   negro. El selector asoma bajo el hero mientras aún es oscuro, así que sus
   textos siguen las variables --c-* (como la nav); el paso al negro empieza
   en la sección de clientes (data-hacia-noche). */
.selector-sector .titular-seccion,
.casos-uso .titular-seccion,
.clientes .titular-seccion {
  font-size: clamp(32px, 5.2vw, 64px);
  max-width: 18ch;
}

.seccion-texto {
  max-width: 52ch;
  margin-top: var(--esp-5);
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--gris);
}

.con-scrub .selector-sector,
.con-scrub .clientes {
  color: var(--c-texto);
}

.con-scrub .selector-sector .etiqueta-seccion,
.con-scrub .clientes .etiqueta-seccion {
  color: var(--c-texto2);
  border-top-color: var(--c-linea);
}

.con-scrub .selector-sector .seccion-texto,
.con-scrub .clientes .seccion-texto {
  color: var(--c-texto2);
}

.selector-sector .seccion-cabecera {
  margin-bottom: 36px;
}

/* Chips de sector: píldoras de vidrio. En celular, scroll horizontal con
   snap y el elegido centrado (home.js). */
.chips-pista {
  position: relative;
  display: flex;
  gap: var(--esp-2);
  padding: 4px max(20px, calc((100% - 1080px) / 2));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.chips-pista::-webkit-scrollbar {
  display: none;
}

.chip {
  display: block;
  padding: 10px 18px;
  border-radius: var(--radio-pill);
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--navy);
  scroll-snap-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.con-scrub .chip {
  border-color: var(--c-linea);
  background-color: var(--c-panel);
  color: var(--c-texto);
}

@media (hover: hover) {
  .chip:hover {
    border-color: rgba(27, 46, 68, 0.32);
  }
}

/* Con JS, el estado activo es una píldora que se desliza de un chip al
   otro (home.js); el chip activo deja ver la píldora debajo. */
.chips-pista > li {
  position: relative;
  z-index: 1;
}

.chips-pista > .chips-indicador {
  position: absolute;
  top: 4px;
  left: 0;
  z-index: 0;
  border-radius: var(--radio-pill);
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(27, 46, 68, 0.08), rgba(27, 46, 68, 0.08)) padding-box,
    linear-gradient(var(--fondo), var(--fondo)) padding-box,
    var(--degradado) border-box;
  opacity: 0;
  pointer-events: none;
}

.con-indicador .chip[aria-pressed='true'] {
  border-color: transparent;
  background: transparent;
  color: var(--navy);
}

/* Activo: borde cian→violeta y relleno navy suave. */
.chip[aria-pressed='true'] {
  border-color: transparent;
  background:
    linear-gradient(rgba(27, 46, 68, 0.08), rgba(27, 46, 68, 0.08)) padding-box,
    linear-gradient(var(--fondo), var(--fondo)) padding-box,
    var(--degradado) border-box;
  color: var(--navy);
}

/* Recomendación por sector. Sin JS: las 8 en lista. Con JS: solo la
   elegida; el marco anima su alto para que nada salte. */
.recomendaciones {
  display: grid;
  gap: var(--esp-4);
  margin-top: var(--esp-8);
}

.js .recomendaciones,
.recomendaciones.con-js {
  display: block;
  padding: 2px;
  margin-left: -2px;
  margin-right: -2px;
  overflow: hidden;
}

/* Antes de que corra el JS ya se ve la primera (la que abre elegida):
   la sección no cambia de alto al cargar. */
.js .recomendaciones:not(.con-js) .recomendacion:not(:first-child),
.recomendaciones.con-js .recomendacion:not(.activa) {
  display: none;
}

.recomendacion {
  position: relative;
  /* Al abrir casos.html#rec-… quedan a la vista los chips de arriba. */
  scroll-margin-top: calc(var(--nav-alto) + 110px);
  display: grid;
  gap: var(--esp-7);
  padding: var(--esp-7) var(--esp-6);
  border-radius: var(--radio-6);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #E7E2D9;
  color: var(--navy);
}

.recomendacion h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.rec-problema {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 500;
}

.rec-lista {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  font-size: 15px;
}

.rec-lista li {
  position: relative;
  padding-left: var(--esp-5);
}

.rec-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--degradado);
}

.rec-agente {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--linea);
}

.rec-agente img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.rec-agente strong {
  display: block;
  font-size: 16px;
}

.rec-agente span {
  font-size: 14px;
  color: var(--gris);
}

.rec-copia {
  display: grid;
  gap: 14px;
  /* 15px en 375 a 16px en 900 (antes saltaba en el breakpoint). */
  font-size: clamp(15px, 14.29px + 0.19vw, 16px);
  color: var(--gris);
}

.rec-detalle .boton {
  margin-top: var(--esp-6);
}

/* Con el scroll sigue las variables, como el panel del cierre: abre con un
   sector elegido y puede asomar mientras el hero aún es oscuro. */
.con-scrub .recomendacion {
  background: var(--c-panel-solido);
  border-color: var(--c-linea);
  color: var(--c-texto);
}

.con-scrub .rec-agente {
  border-top-color: var(--c-linea);
}

.con-scrub .rec-agente span,
.con-scrub .rec-copia {
  color: var(--c-texto2);
}

.con-scrub .recomendacion .boton-principal {
  color: var(--c-boton-texto);
  background:
    linear-gradient(var(--c-boton), var(--c-boton)) padding-box,
    var(--degradado) border-box;
}

@media (min-width: 900px) {
  .recomendacion {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-14);
    padding: 44px var(--esp-12);
  }

}

/* Grilla de casos: sector como etiqueta, descripción gris, línea fina y
   enlace. Toda la tarjeta es clicable (el enlace la cubre). */
.casos-grilla {
  display: grid;
  gap: var(--esp-4);
}

.caso {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--esp-7) 26px var(--esp-6);
  border-radius: var(--radio-6);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #E7E2D9;
  transition: transform var(--dur-media) var(--ease);
}

.caso-sector {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
}

.caso p {
  margin: 14px 0 var(--esp-7);
  font-size: 17px;
  color: var(--gris);
}

.caso-enlace {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
}

.caso-enlace::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.caso:focus-within::after {
  opacity: 1;
}

@media (hover: hover) {
  .caso:hover {
    transform: translateY(-4px);
  }

  .caso:hover::after {
    opacity: 1;
  }
}

@media (min-width: 640px) {
  .casos-grilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .casos-grilla {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Clientes reales: capturas de trabajo entregado (WebP), sin recortar. */
.clientes-grilla {
  display: grid;
  gap: var(--esp-4);
}

.cliente {
  overflow: hidden;
  border-radius: var(--radio-6);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #E7E2D9;
  color: var(--navy);
}

.cliente-media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--superficie);
}

.cliente-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cliente h3 {
  padding: var(--esp-6) 26px 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.cliente p {
  padding: var(--esp-2) 26px var(--esp-7);
  font-size: 15px;
  color: var(--gris);
}

/* Con el scroll siguen las variables, como el panel del cierre: la grilla
   sigue en pantalla mientras la página pasa a negro. */
.con-scrub .cliente {
  background: var(--c-panel-solido);
  border-color: var(--c-linea);
  color: var(--c-texto);
}

.con-scrub .cliente p {
  color: var(--c-texto2);
}

@media (min-width: 900px) {
  .clientes-grilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Decoración de los fondos claros (componentes compartidos) ----------
   Continuación de las estrellas de las zonas oscuras. Todo es aria-hidden,
   sin eventos de puntero y en márgenes (nunca detrás de texto ni demos).
   Sin JS o con movimiento reducido: estática y visible. */

/* Constelaciones: puntos navy de 2-3px unidos por líneas finas, 10-16%. */
.constelacion {
  position: absolute;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.c-linea {
  fill: none;
  stroke: var(--navy);
  stroke-opacity: 0.12;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.c-puntos circle {
  fill: var(--navy);
  fill-opacity: 0.16;
}

/* Con el scroll: entran mientras las estrellas se van (misma variable de
   progreso del fondo), como si fueran la misma decoración cambiando de
   color. Los puntos parpadean muy lento y desfasados (solo opacity). */
.con-scrub .constelacion {
  opacity: calc(1 - var(--c-estrellas));
}

.con-scrub .c-puntos circle {
  animation: parpadeo 9s ease-in-out infinite;
  animation-delay: var(--r, 0s);
}

@keyframes parpadeo {
  50% {
    opacity: 0.35;
  }
}

/* En el hero solo existen con el scroll (sin JS el hero es negro fijo). */
.hero .constelacion {
  display: none;
}

.con-scrub .hero .constelacion {
  display: block;
}

.en-hero {
  right: max(20px, calc(50% - 540px));
  bottom: 10px;
}

/* En el home va a la izquierda: a la derecha ya está la de Servicios. */
.hero:not(.hero-compacto) .en-hero {
  right: auto;
  left: max(20px, calc(50% - 540px));
}

.seccion-cabecera {
  position: relative;
}

.en-cabecera {
  top: 10px;
  right: 0;
}

/* En la columna del nombre del área (servicios), solo en desktop. */
.constelacion.en-area {
  position: relative;
  display: none;
  margin-top: var(--esp-10);
}

@media (min-width: 900px) {
  .constelacion.en-area {
    display: block;
  }

  .en-hero {
    bottom: clamp(16px, 3svh, 32px);
  }
}

/* Aurora suave: 3 manchas radiales cian/violeta al 8-10% detrás de las
   secciones con vidrio. Deriva muy lenta (>25s), solo transform. En
   celular: dos manchas quietas. */
.con-aurora {
  /* Las manchas de la aurora derivan y a 320px asomaban 3px por la derecha
     (scroll horizontal): recorte solo en x, en el borde de la pantalla. */
  overflow-x: clip;
  position: relative;
  isolation: isolate;
}

.aurora-suave {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.aurora-suave span {
  position: absolute;
  width: min(640px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(74, 179, 232, 0.1), rgba(74, 179, 232, 0));
}

.aurora-suave span:nth-child(1) {
  top: 6%;
  left: -14%;
}

.aurora-suave span:nth-child(2) {
  top: 34%;
  right: -16%;
  background: radial-gradient(closest-side, rgba(123, 79, 191, 0.08), rgba(123, 79, 191, 0));
}

.aurora-suave span:nth-child(3) {
  bottom: -10%;
  left: 32%;
  width: min(520px, 64vw);
  background: radial-gradient(closest-side, rgba(74, 179, 232, 0.08), rgba(74, 179, 232, 0));
}

/* En las áreas de servicios las manchas van detrás de la lista (filas con
   vidrio al pasar el mouse), lejos del número violeta. */
.area .aurora-suave span:nth-child(1) {
  top: 18%;
  left: 38%;
}

.area .aurora-suave span:nth-child(2) {
  top: 46%;
  right: -22%;
}

.con-scrub .aurora-suave span {
  animation: deriva-aurora 28s ease-in-out infinite alternate;
}

.con-scrub .aurora-suave span:nth-child(2) {
  animation-duration: 34s;
  animation-direction: alternate-reverse;
}

.con-scrub .aurora-suave span:nth-child(3) {
  animation-duration: 40s;
}

@keyframes deriva-aurora {
  from {
    transform: translate3d(-4%, 3%, 0);
  }

  to {
    transform: translate3d(6%, -5%, 0);
  }
}

/* Calidad baja: la aurora suave deriva más lento (sigue moviéndose). */
[data-calidad='bajo'] .con-scrub .aurora-suave span {
  animation-duration: 60s;
}

/* La última palabra y su destello no se separan (en celular el destello
   caía solo en una línea nueva). */
.sin-corte {
  white-space: nowrap;
}

/* Destello de 4 puntas junto al titular (uno por sección). Aparece una
   vez al entrar (home.js); sin JS ya está. */
.destello {
  display: inline-block;
  position: relative;
  top: -0.62em;
  width: clamp(12px, 0.28em, 22px);
  height: clamp(12px, 0.28em, 22px);
  margin-left: 0.12em;
  color: var(--cian);
  pointer-events: none;
}

.destello-violeta {
  color: var(--violeta);
}

/* ---------- Secciones que se ven durante el cambio de fondo ----------
   Componente compartido: con el scroll de colores, su texto sigue las
   variables --c-* (como la nav) y se invierte junto con el fondo. */
.con-scrub .sigue-fondo {
  color: var(--c-texto);
}

.con-scrub .sigue-fondo :is(.etiqueta-seccion, .seccion-texto, .tenue, .problema-puntos p, .cob-dia, .cob-escala, .cobertura figcaption > span, .metrica > span, .faq-respuesta p) {
  color: var(--c-texto2);
}

.con-scrub .sigue-fondo .etiqueta-seccion span,
.con-scrub .sigue-fondo .carrusel-contador {
  color: var(--c-texto);
}

.con-scrub .sigue-fondo :is(.etiqueta-seccion, .problema-puntos li, .faq-lista, .faq) {
  border-color: var(--c-linea);
}

/* ---------- Hero: dato bajo los botones ---------- */
.hero-dato {
  margin-top: var(--esp-7);
  font-size: 13px;
  color: var(--c-texto2);
  animation: aparecer 0.8s 0.4s var(--ease) both;
}

.hero-dato::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--esp-2);
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--degradado);
}

/* ---------- 01 · El problema ---------- */
.problema {
  display: grid;
  gap: var(--esp-12);
}

.problema-puntos li {
  padding: 22px 0;
  border-top: 1px solid var(--linea);
}

.problema-puntos li:last-child {
  border-bottom: 1px solid var(--linea);
}

.problema-puntos h3 {
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.problema-puntos p {
  margin-top: 6px;
  font-size: 16px;
  color: var(--gris);
}

/* Cuadrícula 7×24: horas con alguien que responde (llenas) y sin nadie. */
.cobertura {
  margin: 0;
  padding: var(--esp-6) var(--esp-5) 22px;
  border-radius: var(--radio-6);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #E7E2D9;
}

.con-scrub .cobertura {
  background: var(--c-panel-solido);
  border-color: var(--c-linea);
}

.cob-grilla {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 5px var(--esp-2);
}

.cob-escala {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--gris);
}

.cob-escala b {
  font-weight: 500;
}

.cob-dia {
  font-size: 12px;
  color: var(--gris);
}

.cob-horas {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
}

.cob-horas i {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radio-1);
  background: rgba(27, 46, 68, 0.08);
}

.cob-horas i.on {
  background: var(--navy);
}

.con-scrub .cob-horas i {
  background: var(--c-linea);
}

.con-scrub .cob-horas i.on {
  background: var(--c-texto);
}

.cobertura figcaption {
  margin-top: 18px;
  font-size: 15px;
}

.cobertura figcaption strong {
  font-weight: 600;
}

.cobertura figcaption > span {
  display: block;
  margin-top: var(--esp-1);
  font-size: 13px;
  color: var(--gris);
}

@media (min-width: 1024px) {
  .problema {
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
    gap: var(--esp-16);
  }

  .cobertura {
    padding: var(--esp-7) var(--esp-7) var(--esp-6);
  }
}

/* ---------- Agentes: lista de capacidades y botón ---------- */
.agente-lista {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--gris);
}

.agente-lista li {
  position: relative;
  padding-left: var(--esp-4);
}

.agente-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--degradado);
}

.boton-contorno {
  align-self: flex-start;
  min-height: 44px;
  margin-top: 22px;
  padding: 0 var(--esp-5);
  font-size: 14px;
  color: var(--navy);
  border: 1px solid transparent;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    var(--degradado) border-box;
}

/* En /servicios los agentes asoman bajo el hero mientras aún es oscuro. */
.con-scrub .agentes-ficha .agente {
  background: var(--c-panel-solido);
  border-color: var(--c-linea);
  color: var(--c-texto);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.con-scrub .agentes-ficha :is(.agente-rol, .agente-desc, .agente-lista) {
  color: var(--c-texto2);
}

.con-scrub .agentes-ficha .boton-contorno {
  color: var(--c-texto);
  background:
    linear-gradient(var(--c-panel-solido), var(--c-panel-solido)) padding-box,
    var(--degradado) border-box;
}

/* ---------- Selector breve (inicio) ---------- */
.recomendacion.recomendacion-breve {
  display: block;
  padding: var(--esp-7) var(--esp-6);
}

.recomendacion-breve .rec-lista {
  margin-top: 18px;
}

.recomendacion-breve .boton-texto {
  margin-top: var(--esp-6);
}

.con-scrub .recomendacion .boton-texto {
  color: var(--c-texto);
}

@media (min-width: 900px) {
  .recomendacion.recomendacion-breve {
    padding: 36px 44px;
  }

  .recomendacion-breve .rec-lista {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--esp-5);
  }
}

/* ---------- /servicios: catálogo y sectores ---------- */
.catalogo-cabecera {
  padding-top: clamp(72px, 9vw, 128px);
}

.catalogo-cabecera .etiqueta-seccion {
  margin-bottom: 0;
}

.catalogo-cabecera + .area {
  padding-top: var(--esp-10);
}

.casos-uso {
  padding-top: clamp(56px, 7vw, 96px);
}

.casos-uso-titulo {
  max-width: 24ch;
  margin-bottom: var(--esp-7);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Las tarjetas de sector siguen en pantalla cuando empieza el paso al negro. */
.con-scrub .caso {
  background: var(--c-panel-solido);
  border-color: var(--c-linea);
}

.con-scrub :is(.caso-sector, .caso-enlace) {
  color: var(--c-texto);
}

.con-scrub .caso p {
  color: var(--c-texto2);
}

.con-scrub .caso-enlace {
  border-top-color: var(--c-linea);
}

/* ---------- Trabajos: captura en marco de dispositivo (CSS) ---------- */
.trabajos {
  display: grid;
  gap: var(--esp-5);
}

.trabajo {
  position: relative;
  padding: 14px 14px 22px;
  border-radius: var(--radio-6);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #E7E2D9;
  color: var(--navy);
}

.con-scrub .trabajo {
  background: var(--c-panel-solido);
  border-color: var(--c-linea);
  color: var(--c-texto);
}

.trabajo-tipo {
  margin-top: 18px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gris);
}

.con-scrub .trabajo-tipo {
  color: var(--c-texto2);
}

.trabajo h3 {
  margin-top: 6px;
  padding: 0 6px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.trabajo-principal h3 {
  font-size: clamp(20px, 2vw, 24px);
}

.marco {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-3);
  background: #E9E6DF;
  box-shadow: var(--sombra-noche-2);
}

.marco img {
  display: block;
  width: 100%;
  height: auto;
}

.marco-navegador {
  padding-top: 26px;
}

.marco-barra {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding-left: var(--esp-3);
  border-bottom: 1px solid rgba(27, 46, 68, 0.08);
}

.marco-barra i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(27, 46, 68, 0.22);
}

.marco-tableta {
  padding: 10px;
  border-radius: var(--radio-6);
  background: #0F1820;
}

.marco-tableta img {
  max-height: 460px;
  border-radius: var(--radio-3);
  object-fit: cover;
  object-position: center 70%;
}

/* Piezas cuyo contenido importante está arriba (ej. la tarjeta de sellos
   de Justo Burger: logo y "Sellos 2 de 5"). */
.marco-arriba img {
  object-position: center top;
}

@media (min-width: 768px) {
  .trabajos {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }

  .trabajo-principal {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .trabajos-resumen {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Métrica destacada de /casos */
.metrica {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-1) 14px;
  margin: -16px 0 var(--esp-10);
}

.metrica strong {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.metrica > span {
  font-size: 17px;
  color: var(--gris);
}

/* ---------- Preguntas frecuentes (<details>) ---------- */
.faq-lista {
  border-top: 1px solid var(--linea);
}

.faq {
  border-bottom: 1px solid var(--linea);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
  min-height: 44px;
  padding: 22px var(--esp-1);
  font-size: 18px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Más → menos al abrir. */
.faq-icono {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.faq-icono::before,
.faq-icono::after {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  border-radius: var(--radio-1);
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}

.faq-icono::after {
  transform: rotate(90deg);
}

.faq[open] .faq-icono::after {
  transform: rotate(0deg);
}

.faq.cerrando .faq-icono::after {
  transform: rotate(90deg);
}

.faq-respuesta {
  overflow: hidden;
}

.faq-respuesta p {
  max-width: 60ch;
  padding: 0 var(--esp-1) var(--esp-6);
  font-size: 16px;
  color: var(--gris);
}

@media (min-width: 900px) {
  .faq-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--esp-12);
    align-items: start;
  }
}

/* ---------- 08 · Contacto: formulario sobre el cierre negro ---------- */
.contacto {
  color-scheme: dark;
}

.cierre .etiqueta {
  color: rgba(255, 255, 255, 0.62);
}

.con-scrub .cierre .etiqueta {
  color: var(--c-texto2);
}

.contacto-etiqueta {
  margin-bottom: var(--esp-5);
}

.cierre .boton-texto {
  color: #F5F3EE;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}

.con-scrub .cierre .boton-texto {
  color: var(--c-texto);
  text-decoration-color: var(--c-linea);
}

.formulario {
  display: grid;
  gap: var(--esp-5);
  max-width: 760px;
  margin: var(--esp-10) auto 0;
  text-align: left;
}

/* hidden debe ganarle al display del componente (éxito, errores, aviso). */
.formulario[hidden],
.contacto-exito[hidden],
.campo-error[hidden],
.formulario-estado[hidden] {
  display: none;
}

.campo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo label,
.campo legend {
  display: block;
  margin-bottom: var(--esp-2);
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: #F5F3EE;
}

.campo :is(input, select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: var(--esp-3) 14px;
  border-radius: var(--radio-3);
  border: 1px solid var(--c-campo-borde);
  background: var(--c-panel);
  color: #F5F3EE;
  font: inherit;
  font-size: 16px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.con-scrub .campo label,
.con-scrub .campo legend,
.con-scrub .campo :is(input, select, textarea) {
  color: var(--c-texto);
}

.campo textarea {
  resize: vertical;
}

/* Foco: reborde cian→violeta y halo suave. */
.campo :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: transparent;
  background:
    linear-gradient(var(--c-panel-solido), var(--c-panel-solido)) padding-box,
    var(--degradado) border-box;
  box-shadow: var(--anillo-foco);
}

.campo [aria-invalid='true'] {
  border-color: #FF9B9B;
}

.campo-error,
.formulario-estado {
  margin-top: var(--esp-2);
  font-size: 14px;
  color: #FFB4B4;
}

/* "¿Qué quieres automatizar?": casillas con forma de chip. */
.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.opcion {
  position: relative;
  margin: 0;
}

.opcion input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.opcion span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--esp-4);
  border-radius: var(--radio-pill);
  border: 1px solid var(--c-campo-borde);
  font-size: 15px;
  font-weight: 400;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.opcion input:checked + span {
  border-color: transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) padding-box,
    linear-gradient(var(--c-panel-solido), var(--c-panel-solido)) padding-box,
    var(--degradado) border-box;
}

.opcion input:focus-visible + span {
  box-shadow: var(--anillo-foco);
}

.campo-ancho,
.formulario-acciones {
  grid-column: 1 / -1;
}

.formulario-acciones .boton {
  width: 100%;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
}

.formulario-nota {
  margin-top: var(--esp-3);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

.con-scrub .formulario-nota {
  color: var(--c-texto2);
}

.contacto-exito {
  max-width: 560px;
  margin: var(--esp-10) auto 0;
  padding: var(--esp-8) var(--esp-6);
  border-radius: var(--radio-5);
  border: 1px solid var(--c-campo-borde);
}

.contacto-exito:focus {
  outline: none;
}

.contacto-exito h3 {
  font-size: 22px;
  font-weight: 600;
}

.contacto-exito p {
  margin: var(--esp-2) auto 0;
}

.contacto-alterno {
  margin-top: var(--esp-7);
}

@media (min-width: 640px) {
  .formulario {
    grid-template-columns: 1fr 1fr;
  }

  .formulario-acciones .boton {
    width: auto;
    padding: 0 var(--esp-8);
  }
}

/* ---------- Barra de progreso de lectura (bajo la nav) ----------
   Animación ligada al scroll en CSS (sin JS, en el compositor). Donde el
   navegador no la soporta, no aparece. Movimiento reducido: no aparece. */
.progreso-lectura {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--degradado);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .progreso-lectura {
    display: block;
    animation: leer linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes leer {
  to {
    transform: scaleX(1);
  }
}

/* ---------- Leyenda de la cuadrícula 7×24 ---------- */
.cob-leyenda {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px !important;
}

.cob-leyenda i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: var(--esp-2);
  border-radius: var(--radio-1);
  background: rgba(27, 46, 68, 0.08);
}

.cob-leyenda i:first-child {
  margin-left: 0;
}

.cob-leyenda i.on {
  background: var(--navy);
}

.con-scrub .cob-leyenda i {
  background: var(--c-linea);
}

.con-scrub .cob-leyenda i.on {
  background: var(--c-texto);
}

/* Contadores: cifras de ancho fijo para que el texto no salte al contar. */
.contador {
  font-variant-numeric: tabular-nums;
}

/* ---------- Bordes que se desvanecen en barras con scroll horizontal ----------
   Indican que hay más chips o pestañas a un lado (home.js pone las clases). */
.hay-der {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.hay-izq {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
}

.hay-izq.hay-der {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

/* ---------- Capturas ampliables ---------- */
a.marco {
  display: block;
  cursor: zoom-in;
}

.marco-lupa {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--navy);
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)) padding-box,
    var(--degradado) border-box;
  border: 1px solid transparent;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.marco-lupa svg {
  width: 18px;
  height: 18px;
}

a.marco:focus-visible .marco-lupa {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  a.marco:hover .marco-lupa {
    opacity: 1;
    transform: none;
  }
}

/* En táctil la lupa queda visible: se entiende que se puede tocar. */
@media (hover: none) {
  .marco-lupa {
    opacity: 1;
    transform: none;
  }
}

.visor {
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.visor::backdrop {
  background: rgba(1, 10, 18, 0.84);
}

.visor[open]::backdrop {
  animation: velo 0.3s var(--ease) both;
}

@keyframes velo {
  from {
    opacity: 0;
  }
}

.visor-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 1400px);
  max-height: 84vh;
  border-radius: var(--radio-3);
  box-shadow: var(--sombra-noche-3);
}

.visor-cerrar {
  position: fixed;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    var(--degradado) border-box;
  color: var(--navy);
  cursor: pointer;
}

.visor-cerrar svg {
  width: 18px;
  height: 18px;
}

/* ---------- Botón de envío: "Enviando…" con indicador ---------- */
.boton[aria-busy='true']::after {
  content: '';
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

.boton[disabled] {
  cursor: progress;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Carruseles de agentes y áreas (mismo componente) ---------- */
@media (min-width: 768px) {
  :is(.carrusel-agentes.listo, .js .carrusel-agentes:not([data-solo-movil]), .js-movil .carrusel-agentes[data-solo-movil]) .carrusel-pista {
    --ancho: min(500px, 52vw);
  }

  :is(.carrusel-areas.listo, .js .carrusel-areas:not([data-solo-movil])) .carrusel-pista {
    --ancho: min(620px, 58vw);
  }
}

:is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .agente {
  padding: var(--esp-7) 26px;
}

/* Inicio en desktop: la grilla de siempre (el carrusel solo en celular). */
.agentes > .carrusel-item {
  display: flex;
}

.agentes > .carrusel-item > .agente {
  flex: 1;
}

.carrusel-agentes:not(.listo) .carrusel-pista.agentes {
  gap: var(--esp-4);
}

@media (min-width: 900px) {
  .carrusel-agentes:not(.listo) .carrusel-pista.agentes {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tarjeta de área: número, nombre y sus servicios (nombre + descripción
   en una línea; en celular, hasta 2 líneas, sin scroll interno). */
.area-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--esp-7) var(--esp-6) var(--esp-5);
}

.area-tarjeta .area-titulo {
  margin: var(--esp-2) 0 14px;
  font-size: clamp(24px, 2.6vw, 34px);
  max-width: none;
}

.area-tarjeta .fila {
  grid-template-columns: 1fr auto;
  gap: 2px var(--esp-3);
  padding: var(--esp-3) 2px;
}

.area-tarjeta .fila strong {
  font-size: 15px;
}

.area-tarjeta .fila-texto {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
}

.area-tarjeta .fila-flecha {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
}

.area-tarjeta .fila::before {
  inset: 2px -8px;
}

@media (hover: hover) {
  .area-tarjeta .fila:hover {
    transform: translateX(3px);
  }
}

@media (min-width: 768px) {
  .area-tarjeta {
    padding: 34px var(--esp-8) var(--esp-6);
  }

  .area-tarjeta .fila {
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  .area-tarjeta .fila-texto {
    grid-column: 2;
    -webkit-line-clamp: 1;
  }

  .area-tarjeta .fila-flecha {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Puntos de navegación */
.carrusel-puntos {
  display: flex;
  gap: 2px;
}

.carrusel-punto {
  display: grid;
  place-items: center;
  width: 24px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.carrusel-punto::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(27, 46, 68, 0.25);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.carrusel-punto[aria-current]::before {
  background: var(--degradado);
  transform: scale(1.35);
}

@media (max-width: 767px) {
  .carrusel-puntos + .carrusel-boton {
    margin-left: auto;
  }

  /* En pantallas angostas los puntos pasan a su propia fila. */
  .carrusel-controles:has(.carrusel-puntos) {
    flex-wrap: wrap;
    row-gap: var(--esp-1);
  }

  .carrusel-controles:has(.carrusel-puntos) .carrusel-contador {
    min-width: 0;
    margin-right: auto;
  }

  .carrusel-controles .carrusel-puntos {
    order: 5;
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .carrusel-controles:has(.carrusel-puntos) .carrusel-progreso {
    display: none;
  }
}

/* "Ver detalle": los párrafos largos de cada sector, plegados. */
.plegable {
  margin-top: 18px;
  border-top: 1px solid var(--linea);
}

.con-scrub .plegable {
  border-top-color: var(--c-linea);
}

.plegable summary {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 44px;
  padding-top: var(--esp-3);
  font-size: 15px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.plegable summary::-webkit-details-marker {
  display: none;
}

.plegable[open] .faq-icono::after {
  transform: rotate(0deg);
}

.plegable.cerrando .faq-icono::after {
  transform: rotate(90deg);
}

.plegable-cuerpo {
  overflow: hidden;
}

.plegable-cuerpo .rec-problema {
  margin-top: 10px;
}

.plegable-cuerpo .rec-copia {
  margin-top: 14px;
}

.plegable-cuerpo .boton {
  margin: var(--esp-5) 0 6px;
}

/* ---------- Estrellas "brilli brilli" (componente data-sparkle) ----------
   Capa fija sobre el elemento, creada al dispararse y eliminada al
   terminar: no toca el layout ni el tamaño de los botones. */
.chispas {
  position: fixed;
  z-index: 140;
  pointer-events: none;
}

.chispa {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
}

.chispa svg {
  display: block;
  width: 100%;
  height: 100%;
}

.chispa-punto {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: currentColor;
}

/* Movimiento reducido: un destello pequeño y quieto en el botón. */
.chispa-fija {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 12px;
  height: 12px;
  color: var(--cian);
  pointer-events: none;
}

.boton,
.nav-cta {
  position: relative;
}

/* ---------- Lenis (hoja oficial 1.3.4) ---------- */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ---------- Alto contraste (Windows) ----------
   Los bordes con degradado son fondos y desaparecen: se reemplazan por
   bordes del sistema, y la decoración se oculta. */
@media (forced-colors: active) {
  .boton-principal,
  .nav-cta,
  .carrusel-boton,
  .chip,
  .flotante-wa,
  .dock {
    border: 1px solid ButtonText;
  }

  .chip[aria-pressed='true'] {
    border: 2px solid Highlight;
  }

  .servicio::after,
  .agente::after,
  .chat::after,
  .cierre-panel::after,
  .recomendacion::after,
  .caso::after,
  .chips-indicador,
  .constelacion,
  .aurora-suave,
  .malla,
  .destello,
  .cielo,
  .pie-cielo {
    display: none !important;
  }

  .carrusel-progreso span,
  .pestanas-indicador {
    background: Highlight;
  }
}

/* ---------- Accesibilidad: transparencia y movimiento ---------- */
@media (prefers-reduced-transparency: reduce) {
  .vidrio,
  :is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .carrusel-item .carrusel-tarjeta,
  .con-scrub .nav,
  .cierre-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .vidrio,
  :is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .carrusel-tarjeta {
    background: #FFFFFF;
    border-color: #E7E2D9;
  }

  .con-scrub .nav,
  .hero .chat {
    background: var(--c-panel-solido);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Anillo de identidad reutilizable (.edge-gradient) ----------
   Borde de 1px con el degradado cian→violeta, sutil. Mismo truco de
   máscara que las tarjetas; para cualquier bloque con position. */
.edge-gradient {
  position: relative;
}

.edge-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--degradado);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- Dock inferior (celular) ----------
   Reemplaza el menú hamburguesa: 4 destinos con icono y etiqueta, vidrio
   con el anillo de identidad. Toma los colores del fondo (--c-*), así se
   invierte junto con el resto de la página en el paso negro → claro.
   Se esconde al bajar y vuelve al subir (home.js); el indicador se desliza
   hasta la opción activa. */
.dock {
  display: none;
}

@media (max-width: 767px) {
  :root {
    --dock-alto: 64px;
    --dock-espacio: calc(var(--dock-alto) + 24px + env(safe-area-inset-bottom));
  }

  /* El dock nunca tapa contenido: el final de la página queda por encima. */
  body {
    padding-bottom: var(--dock-espacio);
  }

  /* La barra de arriba queda solo con la marca: el "Contacto" del dock es
     la acción principal (sin dos botones compitiendo). */
  .nav-cta {
    display: none;
  }

  .dock {
    position: fixed;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 110;
    display: grid;
    /* 5 destinos (Prompt 3B: + Nosotros). */
    grid-template-columns: repeat(5, 1fr);
    width: min(420px, calc(100% - 24px));
    height: var(--dock-alto);
    padding: 6px;
    border-radius: var(--radio-6);
    color: var(--c-texto);
    /* Vidrio más transparente (pedido de Daniel): poco relleno y el desenfoque
       hace el trabajo; el texto sigue legible por el blur + saturación. */
    background: color-mix(in srgb, var(--c-nav-solido) 42%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    box-shadow: var(--sombra-noche-2);
    transform: translateX(-50%);
    transition: transform var(--dur) var(--ease);
  }

  .dock.escondido {
    transform: translate(-50%, calc(100% + 24px + env(safe-area-inset-bottom)));
  }

  .dock-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radio-5);
    font-size: 11px;
    font-weight: 500;
    color: var(--c-texto2);
    transition: color var(--dur) var(--ease);
    -webkit-tap-highlight-color: transparent;
  }

  .dock-item[aria-current] {
    color: var(--c-texto);
  }

  .dock-item:focus-visible {
    outline: 2px solid var(--violeta);
    outline-offset: -2px;
  }

  /* Contacto = acción principal: el icono va en una pastilla con el
     degradado (texto blanco sobre cian/violeta, no cian sobre claro). */
  .dock-principal > svg {
    box-sizing: content-box;
    margin: -2px 0;
    padding: 2px 10px;
    border-radius: var(--radio-pill);
    color: #FFFFFF;
    background: var(--degradado);
  }

  .dock-principal {
    color: var(--c-texto);
  }

  /* Estrellitas de Contacto: dos estrellas finas de 4 puntas que aparecen, se
     apagan y vuelven en otro lugar alrededor del icono (home.js). Muy
     pequeñas y suaves; con el scroll titilan un poco más rápido. */
  .dock-estrella {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    color: #FFFFFF;
    opacity: 0;
    pointer-events: none;
  }

  /* Halo suave detrás de la estrella (sin filtros: un degradado radial). */
  .dock-estrella::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor 0%, transparent 65%);
    opacity: 0.35;
  }

  .dock-estrella svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dock-indicador {
    position: absolute;
    top: 6px;
    left: 0;
    height: calc(100% - 12px);
    width: var(--dock-w, 0);
    border-radius: var(--radio-5);
    background: var(--c-linea);
    opacity: 0;
    transform: translateX(var(--dock-x, 0));
    transition:
      transform var(--dur-media) var(--ease),
      width var(--dur-media) var(--ease),
      opacity var(--dur) var(--ease);
  }

  .dock-indicador.listo {
    opacity: 1;
  }

  /* El botón de WhatsApp sube por encima del dock (y baja cuando el dock
     se esconde). */
  .flotante-wa {
    bottom: calc(var(--dock-alto) + 24px + env(safe-area-inset-bottom));
  }

  .dock-oculto .flotante-wa {
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .dock,
  .dock-indicador,
  .dock-item {
    transition: none;
  }
}



.opcional {
  font-weight: 400;
  color: var(--c-texto2);
}

/* Confirmación: estrella con el degradado y un siguiente paso. */
.exito-estrella {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto var(--esp-3);
  color: var(--violeta);
}

.contacto-exito .seccion-pie {
  margin-top: var(--esp-5);
}


/* ---------- Desarrollo web destacado (Etapa 3, /servicios) ----------
   Tarjeta de vidrio con el anillo de identidad: precio de entrada, nota y
   un solo botón; a la derecha (debajo en celular) un caso real. */
.web-destacado {
  display: grid;
  gap: var(--esp-8);
  align-items: center;
  margin-top: var(--esp-18);
  padding: var(--esp-7) 22px;
  border-radius: var(--radio-7);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--sombra-3);
}

@media (min-width: 900px) {
  .web-destacado {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--esp-12);
    padding: var(--esp-12);
  }
}

.web-titulo {
  margin: 10px 0 0;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--c-texto);
}

/* Precio en negrilla con un "arcoíris" de la paleta que recorre el texto
   en bucle. Tonos con contraste ≥3:1 sobre el claro (texto grande en
   negrilla): violeta #7B4FBF 5.3, azul #3A6FD8 4.5, cian profundo #2384BC
   3.9 — el cian de marca (#4AB3E8, 2.2) no se usa como texto. Color sólido
   de respaldo si el navegador no recorta el fondo al texto. Movimiento
   reducido: degradado quieto. */
.web-precio {
  white-space: nowrap;
  font-weight: 800;
  color: var(--violeta-texto);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .web-precio {
    color: transparent;
    background-image: linear-gradient(90deg, var(--violeta), #3A6FD8, #2384BC, #3A6FD8, var(--violeta), #3A6FD8, #2384BC);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: arcoiris-precio 6s linear infinite;
  }
}

@keyframes arcoiris-precio {
  to {
    background-position: 100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-precio {
    animation: none;
  }
}

.web-nota {
  margin: 14px 0 var(--esp-6);
  max-width: 34ch;
  color: var(--c-texto2);
}

.web-destacado-caso {
  margin: 0;
}

.web-destacado-caso figcaption {
  margin-top: var(--esp-3);
  font-size: 13px;
  color: var(--c-texto2);
}

/* ---------- Retratos de los agentes (Etapa 4) ----------
   Las ilustraciones oficiales de Aurora, Vega y Halley (Recursos
   Graficos/AURORA|VEGA|HALLEY.png, recortadas a 16:9 en WebP de 480/900px)
   encabezan cada tarjeta, como la foto de producto. Reemplazan al avatar
   de 48px que repetía la misma cara. */
.agente-retrato {
  margin: -8px -8px 18px;
  overflow: hidden;
  border-radius: var(--radio-5);
  aspect-ratio: 16 / 9;
  background: #020B16;
}

.agente-retrato img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Vida en el fondo claro (Etapa 4) ----------
   Aura cian→violeta muy tenue y quieta detrás de los bloques importantes
   (casos, proceso, desarrollo web) — da profundidad sin patrón repetido y
   sin animar. Y un destello grande (Recursos Graficos/star-sparkle-big)
   que titila lento en dos lugares puntuales. Solo opacity/transform. */
.aura-tenue {
  position: relative;
  isolation: isolate;
}

.aura-tenue::before {
  content: '';
  position: absolute;
  /* Solo se extiende arriba y abajo: hacia los lados generaba scroll
     horizontal (el bloque ya ocupa el ancho del contenedor). */
  inset: -12% 0;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 28% 40%, rgba(74, 179, 232, 0.10), transparent 70%),
    radial-gradient(42% 55% at 74% 62%, rgba(123, 79, 191, 0.09), transparent 70%);
  pointer-events: none;
}

/* Sobre el tramo oscuro (cierre) el aura no se usa: solo fondos claros. */
.contenedor:has(> .destello-casos) {
  position: relative;
}

.destello-grande {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: auto;
  pointer-events: none;
  opacity: 0.55;
  animation: titilar-destello 5.5s ease-in-out infinite;
}

.destello-casos {
  top: -18px;
  right: 6%;
}

.destello-web {
  top: -22px;
  right: 28px;
  width: 52px;
  animation-delay: -2s;
}

@keyframes titilar-destello {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.2;
    transform: scale(0.82) rotate(12deg);
  }
}

@media (max-width: 767px) {
  .destello-casos {
    display: none; /* celular: máximo 4 elementos animados por pantalla */
  }
}

@media (prefers-reduced-motion: reduce) {
  .destello-grande {
    animation: none;
  }
}

/* ---------- Páginas legales (privacidad, términos) y 404 ---------- */
.legal-texto {
  max-width: 46rem;
}

.legal-texto .titular-seccion {
  margin-bottom: var(--esp-3);
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  line-height: 1.1;
}

.legal-texto h3 {
  margin: var(--esp-10) 0 10px;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-texto);
}

.legal-texto p,
.legal-texto li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-texto2);
}

.legal-texto p + p {
  margin-top: var(--esp-3);
}

.legal-texto ul {
  display: grid;
  gap: var(--esp-2);
  margin: var(--esp-3) 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.legal-texto li::marker {
  color: var(--c-acento);
}

.legal-texto a,
.formulario-nota a,
.cierre-legal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal-texto a {
  color: var(--c-texto);
}

.legal-fecha {
  margin-top: var(--esp-1);
  font-size: 0.875rem !important;
}

.error-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4) var(--esp-7);
  margin-top: var(--esp-8);
}

/* Enlaces legales del pie: mismo tono que el resto de la línea. */
.pie-legal {
  display: flex;
  gap: var(--esp-5);
}

.pie-legal a {
  color: inherit;
  text-decoration: none;
}

.pie-legal a:hover {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Transición entre páginas ----------
   View Transitions entre documentos (Chrome, Edge y Safari recientes; el
   resto navega normal). La barra superior queda fija y el contenido hace
   un fundido corto. Con movimiento reducido no hay transición. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .nav {
    view-transition-name: barra;
  }

  .dock {
    view-transition-name: dock;
  }

  ::view-transition-old(root) {
    animation: var(--dur-corta) var(--ease) both vt-salida;
  }

  ::view-transition-new(root) {
    animation: var(--dur-media) var(--ease) both vt-entrada;
  }
}

@keyframes vt-salida {
  to {
    opacity: 0;
  }
}

@keyframes vt-entrada {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---------- Radios anidados (esquinas concéntricas) ----------
   radio interior = radio exterior - relleno entre ambos, con mínimo
   --radio-2. Va al final para ganar a las reglas de cada componente. */
.trabajo .marco {
  border-radius: max(var(--radio-2), calc(var(--radio-6) - 14px));
}

.marco-tableta img {
  border-radius: max(var(--radio-2), calc(var(--radio-6) - 10px));
}

.dock-item,
.dock-indicador {
  border-radius: max(var(--radio-2), calc(var(--radio-6) - 6px));
}

/* Retrato del agente: tarjeta de radio 24px con relleno 26px (30px en
   escritorio) y margen -8px del retrato = 18-22px de separación. */
.agente-retrato {
  border-radius: max(var(--radio-2), calc(var(--radio-6) - 18px));
}

@media (min-width: 768px) {
  .agente-retrato {
    border-radius: max(var(--radio-2), calc(var(--radio-6) - 22px));
  }
}

/* ---------- Tipografía fina ----------
   Títulos con líneas parejas; párrafos sin viudas; cifras de ancho fijo
   (no bailan al contar ni al alinearse en columnas). */
h1,
h2,
h3,
.titular,
summary span {
  text-wrap: balance;
}

p,
li,
.hero-linea,
.faq-respuesta {
  text-wrap: pretty;
}

.area-num,
.servicio-num,
.paso-num,
.carrusel-contador,
.contador,
.metrica,
.hero-dato,
.web-precio,
.cob-escala,
.cob-esquina,
.cob-leyenda,
.etiqueta-seccion span,
.opcion span,
.pie-contacto,
.legal-fecha {
  font-variant-numeric: tabular-nums;
}

/* ---------- Superficies ----------
   1) Borde de 1px con degradado (más claro arriba) sobre el borde de cada
      tarjeta: ::before enmascarado a 1px, solo CSS. El ::after sigue siendo
      el reborde cian→violeta de las tarjetas activas. */
.vidrio,
.trabajo,
.recomendacion,
.cierre-panel,
.cobertura {
  position: relative;
}

.vidrio::before,
.trabajo::before,
.recomendacion::before,
.cierre-panel::before,
.cobertura::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(27, 46, 68, 0.06) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* 2) Luz que sigue al cursor dentro de la tarjeta. La capa (.luz) la crea
      home.js solo con mouse o trackpad; --mx/--my llegan en pointermove.
      Tinte de marca muy bajo: se nota sobre claro y sobre oscuro. */
.luz {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .luz {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(74, 179, 232, 0.1), rgba(123, 79, 191, 0.05) 45%, transparent 70%);
    opacity: 0;
    transition: opacity var(--dur-media) var(--ease);
    pointer-events: none;
  }

  :is(.vidrio, .trabajo, .recomendacion, .cierre-panel, .cobertura):hover > .luz {
    opacity: 1;
  }
}

/* 3) Grano casi imperceptible sobre fondos oscuros (evita el banding de
      los degradados). Ruido estático detrás del contenido, en la malla de
      fondo; su opacidad sigue a --c-estrellas (1 sobre oscuro, 0 sobre
      claro), que home.js escribe en la malla y no en :root. */
.malla::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: calc(0.025 * var(--c-estrellas));
  pointer-events: none;
}

/* ---------- Estados: hover, focus-visible y active por separado ----------
   hover   = invitación (solo con mouse): eleva, aclara o subraya.
   focus   = ubicación (teclado): anillo con aire, nunca solo color. Lila
             sobre fondos oscuros, violeta sobre claros (≥ 3:1 en ambos).
   active  = respuesta física al presionar: baja 1px o se comprime. */

/* Anillo de foco en zonas que siempre son oscuras. */
:is(.hero, .cierre, .pie, .puente-cierre, .nav, .dock) :focus-visible {
  outline-color: #B49CE6;
}

/* Botones */
@media (hover: hover) {
  .boton:hover,
  .carrusel-boton:hover {
    transform: translateY(-1px);
  }

  .boton-principal:hover,
  .flotante-wa:hover {
    box-shadow: var(--sombra-1);
  }

  .nav-cta:hover {
    opacity: 1;
    filter: brightness(1.06);
  }

  .chip:hover {
    transform: translateY(-1px);
  }
}

.boton:focus-visible,
.nav-cta:focus-visible,
.chip:focus-visible,
.carrusel-boton:focus-visible,
.flotante-wa:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-offset: 4px;
  border-radius: var(--radio-pill);
}

.flotante-wa:focus-visible,
.carrusel-boton:focus-visible {
  border-radius: 50%;
}

.boton:active,
.nav-cta:active,
.chip:active,
.carrusel-boton:active {
  transform: translateY(1px) scale(0.98);
  transition-duration: 80ms;
}

.flotante-wa:active {
  transform: scale(0.94);
  transition-duration: 80ms;
}

.dock-item:active {
  transform: scale(0.94);
}

/* Enlaces de texto */
.boton-texto:focus-visible,
.nav-links a:focus-visible,
.pestanas a:focus-visible,
.pie a:focus-visible,
.legal-texto a:focus-visible,
.formulario-nota a:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-offset: 4px;
  border-radius: var(--radio-2);
  text-decoration-thickness: 2px;
}

@media (hover: hover) {
  .legal-texto a:hover,
  .formulario-nota a:hover {
    text-decoration-thickness: 2px;
  }
}

.boton-texto:active,
.nav-links a:active,
.pestanas a:active,
.pie a:active,
.legal-texto a:active,
.formulario-nota a:active {
  opacity: 0.7;
}

/* Tarjetas y filas que son enlace */
.fila:focus-visible,
.servicio:focus-visible,
.marco:focus-visible,
.caso-enlace:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-offset: 3px;
}

.fila:active,
.servicio:active,
.marco:active {
  transform: scale(0.99);
  transition-duration: 80ms;
}

/* Preguntas frecuentes */
.faq-icono {
  transition: transform var(--dur) var(--ease);
}

@media (hover: hover) {
  .faq summary:hover .faq-icono {
    transform: scale(1.2);
  }
}

.faq summary:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-offset: 2px;
  border-radius: var(--radio-2);
}

.faq summary:active > span {
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .boton:hover,
  .chip:hover,
  .carrusel-boton:hover,
  .boton:active,
  .nav-cta:active,
  .chip:active,
  .carrusel-boton:active,
  .flotante-wa:active,
  .dock-item:active,
  .fila:active,
  .servicio:active,
  .marco:active {
    transform: none;
  }
}

/* ---------- Oficio ---------- */
/* Esquema de color: controles nativos, autocompletado y barras internas
   en oscuro donde el fondo siempre es oscuro. */
:root {
  color-scheme: light;
}

:is(.hero, .cierre, .pie) {
  color-scheme: dark;
}

/* Barra de scroll discreta en Chrome, Edge y Safari (Firefox usa
   scrollbar-width/scrollbar-color de html). */
/* Solo la barra del documento: una regla universal (::-webkit-scrollbar)
   obliga a calcular ese pseudo en cada elemento en cada recálculo. */
html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--radio-pill);
  background: rgba(122, 132, 145, 0.5) padding-box;
}

html::-webkit-scrollbar-thumb:hover {
  background: rgba(122, 132, 145, 0.75) padding-box;
}

/* Impresión: solo el contenido, en negro sobre blanco, sin fondos ni
   adornos; los enlaces externos muestran su dirección. */
@media print {
  @page {
    margin: 18mm 16mm;
  }

  html,
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  .malla,
  .cielo,
  .pie-cielo,
  .pie-paisaje,
  .nav,
  .dock,
  .flotante-wa,
  .skip-link,
  .luz,
  .pestanas,
  .carrusel-controles,
  .carrusel-boton,
  .carrusel-puntos,
  .constelacion,
  .destello,
  .destello-grande,
  .aurora-suave,
  .progreso-lectura,
  form,
  .formulario-nota {
    display: none !important;
  }

  *,
  *::before,
  *::after {
    color: #000000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  [style*='opacity'],
  .linea > span {
    opacity: 1 !important;
    transform: none !important;
  }

  .seccion,
  .hero {
    min-height: 0 !important;
    padding: 12mm 0 !important;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  .vidrio,
  .trabajo,
  .recomendacion,
  .faq,
  .cierre-panel {
    break-inside: avoid;
    border: 1px solid #BBBBBB !important;
  }

  a[href^='http']:not([href*='wa.me'])::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    word-break: break-all;
  }

  /* Carruseles: en papel no hay scroll lateral; las tarjetas van en
     grilla y sin las copias del bucle. */
  .carrusel-item.clon {
    display: none !important;
  }

  .carrusel-pista {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6mm;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .carrusel-item {
    width: auto !important;
    min-width: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .carrusel-escena,
  .carrusel {
    overflow: visible !important;
    transform: none !important;
  }

  .carrusel-tarjeta {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
  }

  img {
    max-width: 100% !important;
    filter: none !important;
  }
}

/* ---------- Modo claro / oscuro ---------- */
.tema-boton {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-linea);
  border-radius: 50%;
  background: transparent;
  color: var(--c-texto2);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* 44px de área táctil sin agrandar el círculo. */
.tema-boton {
  position: relative;
}

.tema-boton::before {
  content: '';
  position: absolute;
  inset: -6px;
}

.tema-boton svg {
  grid-area: 1 / 1;
  transition: opacity var(--dur) var(--ease), transform var(--dur-media) var(--ease);
}

.tema-sol,
[data-tema='oscuro'] .tema-luna {
  opacity: 0;
  transform: rotate(-60deg) scale(0.6);
}

[data-tema='oscuro'] .tema-sol {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .tema-boton:hover {
    color: var(--c-texto);
    border-color: var(--c-texto2);
  }
}

.tema-boton:focus-visible {
  outline: 2px solid #B49CE6;
  outline-offset: 3px;
}

.tema-boton:active {
  transform: scale(0.92);
}

/* Cambio de tema: el tema nuevo se revela en círculo desde el botón
   (home.js anima el clip-path). La barra y el dock entran en el círculo. */
html.cambiando-tema::view-transition-old(root),
html.cambiando-tema::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html.cambiando-tema .nav,
html.cambiando-tema .dock {
  view-transition-name: none;
}

[data-tema='oscuro'] {
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  .tema-boton,
  .tema-boton svg {
    transition: none;
  }

  .cierre-panel::after {
    animation: none !important;
  }
}


/* Modo oscuro: lo que en el diseño claro es una isla clara (secciones de
   agentes y casos del inicio, tarjetas de vidrio y sus demos) pasa a
   vidrio oscuro. Las burbujas de chat y los marcos de navegador quedan
   claros, como ya ocurre sobre el hero y en /casos. */
[data-tema='oscuro'] main .seccion {
  background-color: transparent;
}

[data-tema='oscuro'] :is(.agente, .servicio, .area-tarjeta).vidrio,
[data-tema='oscuro'] .web-destacado {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--sombra-noche-2);
}

[data-tema='oscuro'] .demo {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-tema='oscuro'] :is(.agente-rol, .agente-desc, .agente-lista li, .servicio p, .servicio-num, .titular .tenue, .web-destacado .etiqueta) {
  color: rgba(255, 255, 255, 0.62);
}

[data-tema='oscuro'] :is(.servicio h3, .tarjeta-flecha, .boton-texto) {
  color: #F5F3EE;
}

[data-tema='oscuro'] .titular .sin-corte {
  color: inherit;
}

[data-tema='oscuro'] .boton-texto {
  text-decoration-color: rgba(255, 255, 255, 0.3);
}

[data-tema='oscuro'] .boton-contorno {
  color: #F5F3EE;
  background: linear-gradient(#101920, #101920) padding-box, var(--degradado) border-box;
}

/* Igualan la especificidad de las reglas claras originales. */
[data-tema='oscuro'] :is(#agentes, #casos) {
  background-color: transparent;
}

[data-tema='oscuro'] :is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .carrusel-tarjeta {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Modo oscuro, colores de texto: los tokens de tinta (navy, gris, línea,
   violeta de texto) se aclaran en toda la página... */
[data-tema='oscuro'] {
  --navy: #F5F3EE;
  --gris: rgba(255, 255, 255, 0.62);
  --linea: rgba(255, 255, 255, 0.14);
  --violeta-texto: #B49CE6;
  --fondo: #010A12;
}

/* ...salvo dentro de lo que sigue claro (burbujas de chat, demos y marcos
   de navegador), donde vuelven a su valor original. */
[data-tema='oscuro'] :is(.msg, .d-msg, .d-chip, .marco, .chat-escribiendo) {
  --navy: #1B2E44;
  --gris: #566579;
  --linea: rgba(27, 46, 68, 0.12);
  --violeta-texto: #5A3796;
}

/* Botón principal: en oscuro, blanco con texto navy (como en el hero). */
[data-tema='oscuro'] .boton-principal {
  color: #1B2E44;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--degradado) border-box;
}

@media (hover: hover) {
  [data-tema='oscuro'] .boton-principal:hover {
    background: linear-gradient(#E9EEF4, #E9EEF4) padding-box, var(--degradado) border-box;
  }
}

[data-tema='oscuro'] .skip-link {
  background: linear-gradient(#1B2E44, #1B2E44) padding-box, var(--degradado) border-box;
}

/* Pestañas de /servicios: en el diseño claro solo aparecen con la página
   ya clara; en oscuro el fondo es uniforme y se muestran siempre. */
[data-tema='oscuro'].con-scrub .pestanas {
  opacity: 1;
  visibility: visible;
}

/* ---------- Firma del pie ----------
   "Hecho a mano en Medellín" con el destello de la marca, que titila
   despacio (un destello cada 6s). Quieto con movimiento reducido. */
.pie-firma {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.78);
}

.firma-destello {
  width: 11px;
  height: 11px;
  color: var(--cian);
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .firma-destello {
    animation: firma-titila 6s var(--ease) infinite;
  }
}

@keyframes firma-titila {
  0%,
  78%,
  100% {
    opacity: 0.55;
    transform: scale(0.8) rotate(0deg);
  }

  86% {
    opacity: 1;
    transform: scale(1.25) rotate(45deg);
  }
}

/* El chat del hero ya lleva siempre su reborde cian→violeta (::after):
   sin el borde claro adicional, que además sumaba una máscara sobre
   vidrio con backdrop-filter en la primera pantalla (LCP en móvil). */
.hero .chat::before {
  content: none;
}

/* Rendimiento: las animaciones decorativas en bucle (estrellas, auroras,
   reflejos) se pausan mientras su contenedor está fuera de pantalla
   (home.js). Corriendo fuera de vista, Chrome igual las recalcula en
   cada recálculo de estilo del scroll. */
.en-pausa,
.en-pausa :is(.estrella, .aurora-suave span, .destello-grande, .chat-escribiendo span, .web-precio, .firma-destello),
.en-pausa::after {
  animation-play-state: paused !important;
}

/* ---------- Scroll: efectos ligados al scroll en el compositor ----------
   Los 5 scrubs de transformación (salida del hero, capturas que se
   asientan, retratos, panel de cierre y montañas) corren como animaciones
   CSS ligadas al scroll: el navegador las calcula fuera del hilo principal.
   Con GSAP costaban un recálculo por cuadro y bajaban de 60 fps con CPU 4x.
   Sin soporte (Firefox) home.js usa los mismos efectos con GSAP. Mismos
   puntos de inicio y fin que antes ("cover 100vh" = scroll 0 del hero). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .hero {
      view-timeline-name: --hero;
    }

    .js .hero-texto {
      animation: hero-salida-texto linear both;
      animation-timeline: --hero;
      animation-range: cover 100vh cover 100%;
    }

    .js .hero-demo .chat {
      animation: hero-salida-chat linear both;
      animation-timeline: --hero;
      animation-range: cover 100vh cover 100%;
    }

    .js .marco img {
      animation: captura-asienta linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 55%;
    }

    .js .agente-retrato img {
      animation: retrato-acerca linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 50%;
    }

    .js .cierre-panel {
      animation: cierre-llega linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 65vh;
    }

    .js .pie-montanas {
      animation: montanas-suben linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}

@keyframes hero-salida-texto {
  to {
    translate: 0 -70px;
    opacity: 0.35;
  }
}

@keyframes hero-salida-chat {
  to {
    translate: 0 -30px;
  }
}

@keyframes captura-asienta {
  from {
    scale: 1.1;
  }

  to {
    scale: 1;
  }
}

@keyframes retrato-acerca {
  from {
    scale: 1.18;
    translate: 0 6%;
  }

  to {
    scale: 1;
    translate: 0 0;
  }
}

@keyframes cierre-llega {
  from {
    scale: 0.94;
    translate: 0 40px;
  }

  to {
    scale: 1;
    translate: 0 0;
  }
}

@keyframes montanas-suben {
  from {
    translate: 0 18%;
  }

  to {
    translate: 0 0;
  }
}

/* ---------- Revelado al entrar (home.js marca .visto) ----------
   Solo transform/opacity (compositor). translate/scale son propiedades
   propias: no pisan los transform de hover ni de los scrubs. */
@media (prefers-reduced-motion: no-preference) {
  /* Títulos: cada palabra sube detrás de su máscara; misma línea, mismo
     momento; 70ms entre líneas. El relleno inferior evita cortar
     descendentes (g, j, p, q, y). */
  .revela-titulo .r-palabra {
    display: inline-block;
    overflow: clip;
    padding-bottom: 0.24em;
    margin-bottom: -0.24em;
  }

  /* opacity 0 además de la máscara: así los auditores de contraste no
     miden la palabra escondida contra un fondo que no es el suyo. */
  .revela-titulo .r-palabra > span {
    display: inline-block;
    translate: 0 108%;
    opacity: 0;
  }

  .revela-titulo.visto .r-palabra > span {
    translate: 0 0;
    opacity: 1;
    transition: translate var(--dur-larga) var(--ease), opacity 200ms var(--ease);
    transition-delay: calc(var(--l, 0) * 70ms);
  }

  .revela-fundido {
    opacity: 0;
  }

  .revela-fundido.visto {
    opacity: 1;
    transition: opacity var(--dur-larga) var(--ease);
  }

  .revela-sube {
    opacity: 0;
    translate: 0 16px;
  }

  .revela-sube.visto {
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur-larga) var(--ease), translate var(--dur-larga) var(--ease);
    transition-delay: calc(var(--i, 0) * 60ms);
  }

  .revela-cobertura .cob-horas i.on {
    opacity: 0;
    scale: 0.4;
  }

  .revela-cobertura.visto .cob-horas i.on {
    opacity: 1;
    scale: 1;
    transition: opacity var(--dur-media) var(--ease), scale var(--dur-media) var(--ease);
    transition-delay: calc(var(--i, 0) * 8ms);
  }

  /* Imágenes: la máscara se abre desde un 6 % hacia los bordes y la
     imagen se asienta de 1,05 a 1 (transform; el scrub usa scale). */
  .revela-img {
    clip-path: inset(6% round var(--radio-3));
  }

  .revela-img img {
    transform: scale(1.05);
  }

  .revela-img.visto {
    clip-path: inset(0 round 0);
    transition: clip-path var(--dur-larga) var(--ease);
  }

  .revela-img.visto img {
    transform: none;
    transition: transform 900ms var(--ease);
  }
}

/* Cómo trabajamos: la línea se llena con el scroll en el compositor
   (antes: scrub de GSAP). Mismo tramo: de "top 75%" a "bottom 60%". */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .pasos {
      view-timeline-name: --pasos;
    }

    .js .pasos-linea span {
      animation: pasos-vertical linear both;
      animation-timeline: --pasos;
      animation-range: cover 25vh cover calc(100% - 60vh);
    }
  }

  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .js .pasos-linea span {
      animation-name: pasos-horizontal;
    }
  }
}

@keyframes pasos-vertical {
  from {
    scale: 1 0;
  }

  to {
    scale: 1 1;
  }
}

@keyframes pasos-horizontal {
  from {
    scale: 0 1;
  }

  to {
    scale: 1 1;
  }
}

/* ---------- Aurora del hero ----------
   WebGL ligero (home.js): solo un canvas y un fragment shader, cian y
   violeta sobre la noche, que sigue suave al cursor. Debajo de las
   estrellas y del contenido. Respaldo (sin WebGL, con movimiento reducido
   o mientras compila): este degradado CSS estático. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 45% at 78% 22%, rgba(74, 179, 232, 0.16), transparent 70%),
    radial-gradient(45% 40% at 92% 48%, rgba(123, 79, 191, 0.14), transparent 70%);
  pointer-events: none;
  transition: opacity var(--dur-larga) var(--ease);
}

.hero.con-aurora-gl::before {
  opacity: 0;
}

.hero-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms var(--ease);
}

.hero.con-aurora-gl .hero-aurora {
  opacity: 1;
}

@media print {
  .hero-aurora,
  .hero::before {
    display: none !important;
  }
}

/* ---------- Flujo: capta, atiende, retiene ----------
   Base (celular, sin JS, movimiento reducido): pasos y escena apilados,
   todo visible. Desde 900px con JS (.fijada) la escena queda fija mientras
   se recorren ~2 pantallas de scroll; home.js pone data-paso (1-3) solo al
   cambiar de paso y el CSS hace el resto. */
.flujo-grilla {
  display: grid;
  gap: var(--esp-10);
}

.flujo-titular {
  margin-bottom: var(--esp-10);
}

/* Más chico que el titular de sección: comparte la pantalla fija con los
   pasos y la escena. */
@media (min-width: 900px) {
  .flujo-titular {
    font-size: clamp(44px, 5.2vw, 76px);
  }
}

.flujo-pasos {
  display: grid;
  gap: var(--esp-6);
}

.flujo-paso {
  position: relative;
  padding-left: var(--esp-6);
  border-left: 1px solid var(--c-linea);
}

.flujo-paso h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.flujo-paso p {
  max-width: 40ch;
  color: var(--c-texto2);
  line-height: 1.55;
}

.flujo-escena {
  position: relative;
  max-width: 440px;
  width: 100%;
  justify-self: center;
}

.flujo-chat {
  padding: 18px 18px 46px;
  background: var(--c-panel-solido);
  border-color: var(--c-panel-borde);
}

.flujo-mensajes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-height: 180px;
}

.flujo-aviso {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--esp-3);
  padding: 4px 10px;
  border-radius: var(--radio-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-texto2);
  border: 1px solid var(--c-linea);
}

.flujo-aviso::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--degradado);
}

/* Pase de Wallet: tarjeta navy fija (se lee igual en claro y en oscuro). */
.flujo-pase {
  position: relative;
  width: min(300px, 86%);
  margin: -28px 0 0 auto;
  padding: 18px 20px;
  border-radius: var(--radio-5);
  color: #FFFFFF;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(123, 79, 191, 0.45), transparent 60%),
    linear-gradient(160deg, #1B2E44, #0B1A2A);
  box-shadow: 0 18px 40px -16px rgba(1, 10, 18, 0.55);
  rotate: -2deg;
}

.flujo-pase-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-3);
  margin-bottom: 14px;
}

.flujo-pase-marca {
  font-size: 15px;
  font-weight: 600;
}

.flujo-pase-tipo {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}

.flujo-sellos {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.flujo-sellos i {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.flujo-sellos .lleno,
.flujo-sellos .nuevo {
  border: 0;
  background: var(--degradado);
}

.flujo-pase-pie {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

.flujo-pase-pie strong {
  color: #FFFFFF;
  font-weight: 600;
}

.flujo-escena figcaption {
  margin-top: var(--esp-6);
  font-size: 12px;
  color: var(--c-texto2);
  text-align: center;
}

@media (min-width: 900px) {
  .flujo-grilla {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--esp-14);
  }

  .flujo-escena {
    justify-self: end;
  }

  /* Escena fijada: la sección mide ~3 pantallas y el bloque interno queda
     pegado arriba mientras pasan los tres pasos. */
  .flujo.fijada {
    height: 300vh;
    padding: 0;
  }

  .flujo.fijada .flujo-fijo {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    align-items: center;
  }

  /* Pasos inactivos: atenuados con color (no con opacidad) para que el
     texto siga legible; el activo pasa a tinta plena con su barra. */
  .flujo.fijada .flujo-paso h3,
  .flujo.fijada .flujo-paso p {
    color: var(--c-texto2);
    transition: color var(--dur-larga) var(--ease);
  }

  .flujo.fijada .flujo-paso::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(#4AB3E8, #7B4FBF);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--dur-larga) var(--ease);
  }

  /* Los pasos aparecen con el scroll: el que viene espera abajo, oculto
     (opacity 0, fuera del árbol de accesibilidad visual pero en el HTML),
     y entra al llegar su paso; los ya vistos quedan atenuados. */
  .flujo.fijada .flujo-paso {
    transition: opacity var(--dur-larga) var(--ease), translate var(--dur-larga) var(--ease);
  }

  .flujo[data-paso='1'] .flujo-paso:is([data-paso='2'], [data-paso='3']),
  .flujo[data-paso='2'] .flujo-paso[data-paso='3'] {
    opacity: 0;
    translate: 0 16px;
  }

  .flujo[data-paso='1'] .flujo-paso[data-paso='1'] :is(h3, p),
  .flujo[data-paso='2'] .flujo-paso[data-paso='2'] :is(h3, p),
  .flujo[data-paso='3'] .flujo-paso[data-paso='3'] :is(h3, p) {
    color: var(--c-texto);
  }

  .flujo[data-paso='1'] .flujo-paso[data-paso='1']::before,
  .flujo[data-paso='2'] .flujo-paso[data-paso='2']::before,
  .flujo[data-paso='3'] .flujo-paso[data-paso='3']::before {
    transform: none;
  }

  /* Piezas de la escena: las de pasos futuros esperan abajo, sin ocupar
     otro espacio (no hay saltos de diseño). */
  .flujo.fijada .flujo-escena [data-paso] {
    transition: opacity var(--dur-larga) var(--ease), translate var(--dur-larga) var(--ease), scale var(--dur-larga) var(--ease);
  }

  .flujo[data-paso='1'] .flujo-escena [data-paso='2'],
  .flujo[data-paso='1'] .flujo-escena [data-paso='3'],
  .flujo[data-paso='2'] .flujo-escena [data-paso='3'] {
    opacity: 0;
    translate: 0 14px;
    scale: 0.97;
  }

  .flujo.fijada .flujo-sellos .nuevo {
    transition: scale 500ms cubic-bezier(0.22, 1, 0.36, 1) 250ms, opacity 300ms var(--ease) 250ms;
  }

  .flujo.fijada:not([data-paso='3']) .flujo-sellos .nuevo {
    scale: 0.2;
    opacity: 0;
  }
}

/* Flujo fijado en el celular (Prompt 3E): misma escena, en vertical
   (pasos arriba, chat y pase abajo) y en svh. */
@media (max-width: 899px) {
  /* Escena fijada: la sección mide ~3 pantallas y el bloque interno queda
     pegado arriba mientras pasan los tres pasos. */
  .flujo.fijada {
    height: 300vh;
    padding: 0;
  }

  .flujo.fijada .flujo-fijo {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    align-items: center;
  }

  /* Pasos inactivos: atenuados con color (no con opacidad) para que el
     texto siga legible; el activo pasa a tinta plena con su barra. */
  .flujo.fijada .flujo-paso h3,
  .flujo.fijada .flujo-paso p {
    color: var(--c-texto2);
    transition: color var(--dur-larga) var(--ease);
  }

  .flujo.fijada .flujo-paso::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(#4AB3E8, #7B4FBF);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--dur-larga) var(--ease);
  }

  /* Los pasos aparecen con el scroll: el que viene espera abajo, oculto
     (opacity 0, fuera del árbol de accesibilidad visual pero en el HTML),
     y entra al llegar su paso; los ya vistos quedan atenuados. */
  .flujo.fijada .flujo-paso {
    transition: opacity var(--dur-larga) var(--ease), translate var(--dur-larga) var(--ease);
  }

  .flujo[data-paso='1'] .flujo-paso:is([data-paso='2'], [data-paso='3']),
  .flujo[data-paso='2'] .flujo-paso[data-paso='3'] {
    opacity: 0;
    translate: 0 16px;
  }

  .flujo[data-paso='1'] .flujo-paso[data-paso='1'] :is(h3, p),
  .flujo[data-paso='2'] .flujo-paso[data-paso='2'] :is(h3, p),
  .flujo[data-paso='3'] .flujo-paso[data-paso='3'] :is(h3, p) {
    color: var(--c-texto);
  }

  .flujo[data-paso='1'] .flujo-paso[data-paso='1']::before,
  .flujo[data-paso='2'] .flujo-paso[data-paso='2']::before,
  .flujo[data-paso='3'] .flujo-paso[data-paso='3']::before {
    transform: none;
  }

  /* Piezas de la escena: las de pasos futuros esperan abajo, sin ocupar
     otro espacio (no hay saltos de diseño). */
  .flujo.fijada .flujo-escena [data-paso] {
    transition: opacity var(--dur-larga) var(--ease), translate var(--dur-larga) var(--ease), scale var(--dur-larga) var(--ease);
  }

  .flujo[data-paso='1'] .flujo-escena [data-paso='2'],
  .flujo[data-paso='1'] .flujo-escena [data-paso='3'],
  .flujo[data-paso='2'] .flujo-escena [data-paso='3'] {
    opacity: 0;
    translate: 0 14px;
    scale: 0.97;
  }

  .flujo.fijada .flujo-sellos .nuevo {
    transition: scale 500ms cubic-bezier(0.22, 1, 0.36, 1) 250ms, opacity 300ms var(--ease) 250ms;
  }

  .flujo.fijada:not([data-paso='3']) .flujo-sellos .nuevo {
    scale: 0.2;
    opacity: 0;
  }

  .flujo.fijada .flujo-fijo {
    align-items: start;
    padding-top: calc(var(--nav-alto) + 16px);
  }

  .flujo.fijada .flujo-grilla {
    gap: var(--esp-5);
  }

  .flujo.fijada .flujo-titular {
    font-size: 30px;
    margin-bottom: var(--esp-3);
  }

  .flujo.fijada .flujo-pasos {
    gap: var(--esp-2);
  }

  .flujo.fijada .flujo-paso p {
    display: none;
  }

  .flujo.fijada .flujo-escena {
    max-width: 340px;
  }

  .flujo.fijada .flujo-escena figcaption {
    display: none;
  }

  .flujo.fijada .flujo-mensajes {
    min-height: 0;
  }

  .flujo.fijada .flujo-chat .msg {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flujo .flujo-paso,
  .flujo .flujo-paso::before,
  .flujo .flujo-escena [data-paso],
  .flujo .flujo-sellos .nuevo {
    transition: none !important;
  }
}

/* ---------- Pantalla de carga (primera visita de la sesión) ----------
   Solo existe con html.cargando (script en el <head> del inicio). Noche
   #010A12, logo y una línea cian → violeta que avanza con la carga real.
   Al salir, la capa se abre desde la línea hacia arriba y abajo y deja ver
   el hero. Si home.js no llega a correr, se retira sola a los 4,5 s. */
.cargador {
  display: none;
}

html.cargando .cargador {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: #010A12;
  color: #F5F3EE;
  clip-path: inset(0);
  animation: cargador-tope 0s 4.5s forwards;
}

@keyframes cargador-tope {
  to {
    visibility: hidden;
  }
}

.cargador-centro {
  display: grid;
  justify-items: center;
  gap: 22px;
  transition: opacity 300ms var(--ease), translate 600ms var(--ease);
}

.cargador-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.cargador-linea {
  position: relative;
  width: 148px;
  height: 1.5px;
  border-radius: 1px;
  background: rgba(245, 243, 238, 0.1);
  overflow: hidden;
}

.cargador-linea span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #4AB3E8, #7B4FBF);
  transform: scaleX(var(--p, 0.06));
  transform-origin: left;
  transition: transform 500ms var(--ease);
}

.cargador-saltar {
  position: absolute;
  right: 24px;
  bottom: 24px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(245, 243, 238, 0.22);
  border-radius: var(--radio-pill);
  background: transparent;
  color: rgba(245, 243, 238, 0.82);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity 250ms var(--ease);
}

.cargador-saltar:hover {
  color: #F5F3EE;
  border-color: rgba(245, 243, 238, 0.5);
}

.cargador-saltar:focus-visible {
  outline: 2px solid #B49CE6;
  outline-offset: 3px;
}

/* Salida: el centro se apaga y la capa se abre desde la línea. */
html.cargando .cargador.abriendo {
  pointer-events: none;
  animation: cargador-abrir 900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms forwards;
}

.cargador.abriendo .cargador-centro {
  opacity: 0;
  translate: 0 -6px;
}

.cargador.abriendo .cargador-saltar {
  opacity: 0;
}

@keyframes cargador-abrir {
  to {
    clip-path: inset(50% 0 50% 0);
  }
}

@media print {
  .cargador {
    display: none !important;
  }
}

/* ---------- Ritmo tonal (Prompt 2B) ----------
   Las secciones del contenido alternan papel y noche profunda. Cada una
   pinta su propio fondo (opaco, con bordes limpios y filetes de 1px con el
   degradado de marca donde cambia el tono) y fija
   su tinta en CSS: no dependen del color que el scroll le da a la página
   (ese queda para el hero, el cierre y la barra). Así el contraste es el
   mismo para quien la mira y para un auditor que no hace scroll.
   En oscuro el ritmo sigue: papel = la noche de la página, noche = un navy
   un punto más claro. */
.tono-papel {
  --c-fondo: #F9F6EF;
  --c-texto: #1B2E44;
  --c-texto2: #566579;
  --c-linea: rgba(27, 46, 68, 0.12);
  --c-panel: rgba(255, 255, 255, 0.55);
  --c-panel-solido: #FFFFFF;
  --c-panel-borde: rgba(255, 255, 255, 0.7);
  --c-superficie: rgba(243, 240, 234, 1);
  --c-estrellas: 0;
  --c-boton: #1B2E44;
  --c-boton-texto: #FFFFFF;
  --c-acento: #5A3796;
  --c-campo-borde: rgba(27, 46, 68, 0.4);
  color: var(--c-texto);
}

.tono-noche,
[data-tema='oscuro'] .tono-papel {
  --c-fondo: #060F1C;
  --c-texto: #F5F3EE;
  --c-texto2: #A6B7C9;
  --c-linea: rgba(255, 255, 255, 0.14);
  --c-panel: rgba(255, 255, 255, 0.06);
  --c-panel-solido: #10243B;
  --c-panel-borde: rgba(255, 255, 255, 0.12);
  --c-superficie: rgba(243, 240, 234, 0);
  --c-estrellas: 1;
  --c-boton: #FFFFFF;
  --c-boton-texto: #1B2E44;
  --c-acento: #B49CE6;
  --c-campo-borde: rgba(255, 255, 255, 0.36);
}

/* Tokens de tinta de la noche (como en el modo oscuro, con el gris de las
   propuestas), salvo en lo que sigue claro: burbujas, demos y marcos. */
.tono-noche {
  --navy: #F5F3EE;
  --gris: #A6B7C9;
  --linea: rgba(255, 255, 255, 0.14);
  --violeta-texto: #B49CE6;
  color: #F5F3EE;
}

.tono-noche :is(.msg, .d-msg, .d-chip, .marco, .chat-escribiendo) {
  --navy: #1B2E44;
  --gris: #566579;
  --linea: rgba(27, 46, 68, 0.12);
  --violeta-texto: #5A3796;
}

main :is(.seccion, .puente-cierre).tono-papel {
  position: relative;
  background: #F9F6EF;
}

/* La primera sección tras el hero: borde limpio con el filete de marca
   arriba, como la portada de las propuestas (noche → línea → papel). */
main .seccion.tono-papel.tono-entrada {
  background: var(--degradado) top / 100% 1px no-repeat, #F9F6EF;
}

[data-tema='oscuro'] main .seccion.tono-papel.tono-entrada {
  background: var(--degradado) top / 100% 1px no-repeat;
}

/* La noche entra con borde limpio (como la portada de las propuestas):
   un degradado vertical #060F1C → #0C1E34 y filetes de 1px con el
   degradado de marca arriba (se dibuja con el scroll) y abajo. */
main .seccion.tono-noche {
  position: relative;
  background: linear-gradient(to bottom, #060F1C, #0C1E34);
}

main .seccion.tono-noche::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--degradado);
  opacity: 0.7;
  pointer-events: none;
}

/* El puente al cierre: papel sin fundido y el filete de marca abajo, donde
   empieza la noche del cierre. */
main .puente-cierre.tono-papel {
  background: #F9F6EF;
}

main .puente-cierre.tono-papel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--degradado);
  opacity: 0.7;
}

[data-tema='oscuro'] main :is(.seccion, .puente-cierre).tono-papel {
  background: transparent;
}

[data-tema='oscuro'] main .seccion.tono-noche {
  background: linear-gradient(to bottom, #0A1A2D, #0C1E34);
}

/* Barrido: al entrar una sección de noche, una línea de 1px con el
   degradado de marca la recorre de lado a lado, ligada al scroll (en el
   compositor). Sin soporte, la línea queda dibujada. */
main .seccion.tono-noche::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--degradado);
  opacity: 0.7;
  transform-origin: left;
  pointer-events: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main .seccion.tono-noche::after {
      animation: barrido-noche linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 90%;
    }
  }
}

@keyframes barrido-noche {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Componentes dentro de la noche (modo claro): tarjetas oscuras #10243B,
   demos y textos secundarios como en el modo oscuro. */
.tono-noche :is(.agente, .servicio, .area-tarjeta).vidrio,
.tono-noche .web-destacado {
  background: #10243B;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--sombra-noche-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.tono-noche .demo {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.tono-noche :is(.agente-rol, .agente-desc, .agente-lista li, .servicio p, .servicio-num, .titular .tenue, .web-destacado .etiqueta, .paso p) {
  color: #A6B7C9;
}

.tono-noche :is(.servicio h3, .tarjeta-flecha, .boton-texto) {
  color: #F5F3EE;
}

.tono-noche .titular .sin-corte {
  color: inherit;
}

.tono-noche .boton-texto {
  text-decoration-color: rgba(255, 255, 255, 0.3);
}

.tono-noche :is(.carrusel.listo, .js .carrusel:not([data-solo-movil]), .js-movil .carrusel[data-solo-movil]) .carrusel-tarjeta {
  background-color: #10243B;
}

/* La barra superior se oscurece mientras pasa sobre una sección de noche
   (home.js marca html[data-nav-noche]); en modo claro solamente. */
html[data-nav-noche]:not([data-tema='oscuro']) :is(.nav, .pestanas) {
  --c-texto: #F5F3EE !important;
  --c-texto2: rgba(255, 255, 255, 0.62) !important;
  --c-linea: rgba(255, 255, 255, 0.14) !important;
  --c-nav: rgba(6, 15, 28, 0.62) !important;
  --c-nav-solido: rgba(6, 15, 28, 0.96) !important;
  --c-logo-claro: 1 !important;
  --c-boton: #FFFFFF !important;
  --c-boton-texto: #1B2E44 !important;
}


/* ---------- Sistema editorial (Prompt 2B) ----------
   Como las propuestas PDF: etiqueta numerada en mayúsculas espaciadas
   (violeta sobre papel, cian sobre noche) bajo un filete de 1px; rejilla
   de 12 columnas en las cabeceras (titular en 8, texto de apoyo en las 4
   últimas, alineado abajo) y una escala con UN titular dramático por
   página (.titular-dramatico); los demás titulares, contenidos. */
:root {
  --ceja: #5A3796;
}

[data-tema='oscuro'],
.tono-noche,
.cierre {
  --ceja: #6CC4F2;
}

html .etiqueta.etiqueta-seccion,
html .etiqueta.etiqueta-seccion span,
:root body .seccion .etiqueta.etiqueta-seccion,
:root body .seccion .etiqueta.etiqueta-seccion span {
  color: var(--ceja);
}

.etiqueta-seccion {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.etiqueta-seccion span {
  font-weight: 700;
}

html .tono-papel .etiqueta-seccion {
  border-top-color: #C4B79E;
}

[data-tema='oscuro'] .tono-papel .etiqueta-seccion,
html .tono-noche .etiqueta-seccion {
  border-top-color: rgba(255, 255, 255, 0.16);
}

/* Escala: titulares de sección contenidos (máx. 60px); el hero del inicio
   queda un punto por encima; el dramático, muy por encima. */
.titular-seccion {
  font-size: clamp(34px, 4.6vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.titular.titular-dramatico {
  font-size: clamp(46px, 8.6vw, 124px);
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.hero-compacto .titular.titular-dramatico {
  max-width: none;
  font-size: clamp(44px, 7.2vw, 104px);
}

@media (min-width: 900px) {
  .seccion-cabecera {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--esp-6);
    align-items: end;
  }

  .seccion-cabecera > * {
    grid-column: 1 / -1;
  }

  .seccion-cabecera > .titular-seccion {
    grid-column: 1 / span 8;
    grid-row: 2;
  }

  .seccion-cabecera > .titular-dramatico {
    grid-column: 1 / -1;
  }

  .seccion-cabecera > .seccion-texto {
    grid-column: 9 / span 4;
    grid-row: 2;
    margin-top: 0;
    padding-bottom: 0.4em;
  }
}

/* ---------- En cifras (Prompt 2B) ----------
   Cifras protagonistas como en las propuestas: grandes, tabulares, con la
   unidad en color y columnas separadas por filetes de 1px. Arriba, un
   filete fino con el degradado de marca. Banda de noche. */
.cifras.seccion {
  padding: clamp(96px, 11vw, 160px) 0;
}

.cifras .seccion-cabecera {
  margin-bottom: var(--esp-2);
}

.cifras-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.cifra {
  padding: var(--esp-8) var(--esp-5) var(--esp-6) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.cifra:nth-child(odd) {
  padding-right: var(--esp-5);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.cifra:nth-child(even) {
  padding-left: var(--esp-5);
}

.cifra-valor {
  display: flex;
  align-items: baseline;
  gap: 0.06em;
  /* El más ancho (168 h) cabe en su columna en todos los anchos. */
  font-size: clamp(56px, 7vw, 104px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: #F5F3EE;
  font-variant-numeric: tabular-nums;
}

.cifra-unidad {
  margin-left: 0.12em;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--cian-noche);
}

.cifra-texto {
  max-width: 30ch;
  margin-top: var(--esp-4);
  font-size: 15px;
  line-height: 1.5;
  color: #A6B7C9;
}

.cifra-texto strong {
  font-weight: 600;
  color: #F5F3EE;
}

@media (min-width: 900px) {
  .cifras-lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .cifra,
  .cifra:nth-child(odd),
  .cifra:nth-child(even) {
    padding: var(--esp-10) var(--esp-6) var(--esp-4);
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
  }

  .cifra:first-child {
    padding-left: 0;
  }

  .cifra:last-child {
    border-right: 0;
  }
}

/* ---------- Iconos (Prompt 2B) ----------
   Un solo set de línea (Tabler, outline): trazo de 1,5px, puntas y
   uniones redondas; el tamaño lo da cada contexto. */
.ico {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Los que traían tamaño propio en el HTML lo conservan. */
svg.ico[width='16'] { width: 16px; height: 16px; }
svg.ico[width='22'] { width: 22px; height: 22px; }

/* ---------- 03 · El sistema (Prompt 2B) ----------
   Diagrama NFC Hub → Aurora → Wallet Pass: una línea de 1px se dibuja con
   el scroll (stroke-dashoffset ligado a la vista del diagrama) y enciende
   cada nodo al llegar. Sin animaciones ligadas al scroll o con movimiento
   reducido: todo dibujado y encendido. */
.sis-diagrama {
  position: relative;
  view-timeline: --sis block;
}

.sis-linea {
  display: none;
}

.sis-piezas {
  display: grid;
  gap: var(--esp-12);
}

.sis-pieza {
  position: relative;
  padding-left: var(--esp-8);
}

/* Celular: tramo vertical a la izquierda de cada pieza. */
.sis-pieza::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: calc(-1 * var(--esp-12));
  left: 5px;
  width: 1px;
  background: linear-gradient(#4AB3E8, #7B4FBF);
  opacity: 0.6;
  transform-origin: top;
}

.sis-pieza:last-child::before {
  bottom: 0;
}

.sis-nodo {
  position: absolute;
  top: 4px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #6CC4F2;
  box-shadow: 0 0 0 4px rgba(108, 196, 242, 0.14), 0 0 18px rgba(108, 196, 242, 0.45);
}

.sis-paso {
  margin-bottom: var(--esp-4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cian-noche);
}

.sis-paso span {
  font-variant-numeric: tabular-nums;
  margin-right: 0.3em;
}

.sis-pieza h3 {
  margin-top: var(--esp-6);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #F5F3EE;
}

.sis-pieza > p:last-child {
  max-width: 34ch;
  margin-top: var(--esp-2);
  font-size: 15px;
  line-height: 1.55;
  color: #A6B7C9;
}

.sis-nota {
  margin-top: var(--esp-10);
  font-size: 12px;
  color: #A6B7C9;
}

/* Escenario de cada pieza: tarjeta oscura #10243B, alto fijo (sin saltos
   de diseño), contenido recortado. */
.sis-media {
  position: relative;
  height: 280px;
  border-radius: var(--radio-5);
  background: radial-gradient(120% 90% at 50% 0%, rgba(74, 179, 232, 0.12), transparent 60%), #10243B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 900px) {
  .sis-piezas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--esp-6);
  }

  .sis-pieza {
    padding-left: 0;
    padding-top: var(--esp-8);
  }

  .sis-pieza::before {
    display: none;
  }

  .sis-linea {
    display: block;
    position: absolute;
    top: 9px;
    left: 0;
    width: 100%;
    height: 2px;
    overflow: visible;
  }

  .sis-linea path {
    fill: none;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .sis-linea-base {
    stroke: rgba(255, 255, 255, 0.14);
  }

  .sis-linea-traza {
    stroke: #6CC4F2;
  }

  .sis-media {
    height: 300px;
  }
}

/* Dibujo ligado al scroll (donde existe) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .sis-linea-traza {
      stroke-dasharray: 1;
      animation: sis-trazo linear both;
      animation-timeline: --sis;
      animation-range: entry 40% cover 55%;
    }

    .sis-nodo {
      animation: sis-encender linear both;
      animation-timeline: --sis;
    }

    .sis-pieza:nth-child(1) .sis-nodo { animation-range: entry 40% entry 46%; }
    .sis-pieza:nth-child(2) .sis-nodo { animation-range: cover 24% cover 28%; }
    .sis-pieza:nth-child(3) .sis-nodo { animation-range: cover 40% cover 44%; }
  }

  @media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
    .sis-pieza::before {
      animation: sis-tramo linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 50%;
    }

    .sis-nodo {
      animation: sis-encender linear both;
      animation-timeline: view();
      animation-range: entry 70% entry 90%;
    }
  }
}

@keyframes sis-trazo {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes sis-tramo {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes sis-encender {
  from {
    background: #1B3048;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
    scale: 0.8;
  }
  to {
    background: #6CC4F2;
    box-shadow: 0 0 0 4px rgba(108, 196, 242, 0.14), 0 0 18px rgba(108, 196, 242, 0.45);
    scale: 1;
  }
}

/* Momento NFC: la tarjeta se acerca al teléfono, al tocarlo salen ondas
   concéntricas finas y la pantalla muestra la reseña. Ciclo de 4,8s, solo
   en pantalla (.corriendo, home.js). */
.nfc-telefono {
  position: absolute;
  right: 16%;
  top: 34px;
  width: 112px;
  height: 230px;
  border-radius: 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(#0C1E34, #081627);
  box-shadow: inset 0 0 0 4px #060F1C;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
}

.nfc-isla {
  position: absolute;
  top: 10px;
  width: 34px;
  height: 9px;
  border-radius: 9px;
  background: #060F1C;
}

.nfc-estrellas {
  display: flex;
  gap: 2px;
  color: #F5C451;
}

.nfc-estrellas .ico {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke-width: 1;
}

.nfc-resena {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #F5F3EE;
}

.nfc-tarjeta {
  position: absolute;
  left: 12%;
  top: 104px;
  width: 128px;
  height: 80px;
  border-radius: 12px;
  background: linear-gradient(150deg, #FFFFFF, #E9EEF4);
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.6);
  color: #1B2E44;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  rotate: -8deg;
  z-index: 2;
}

.nfc-tarjeta .ico {
  width: 30px;
  height: 30px;
}

.sis-destello {
  width: 16px;
  height: 16px;
  color: #F5A623;
}

/* Las ondas nacen en el borde izquierdo del teléfono, donde toca la
   tarjeta. */
.nfc-onda {
  position: absolute;
  right: calc(16% + 112px - 32px);
  top: 112px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(108, 196, 242, 0.7);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.corriendo .nfc-tarjeta {
  animation: nfc-acercar 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.corriendo .nfc-onda {
  animation: nfc-onda 4.8s linear infinite;
}

.corriendo .nfc-onda:nth-of-type(2) { animation-delay: 0.25s; }
.corriendo .nfc-onda:nth-of-type(3) { animation-delay: 0.5s; }

.corriendo :is(.nfc-estrellas, .nfc-resena) {
  animation: nfc-pantalla 4.8s linear infinite;
}

@keyframes nfc-acercar {
  0%, 8% { translate: -26px 10px; rotate: -12deg; }
  32%, 62% { translate: 28px 0; rotate: -4deg; }
  92%, 100% { translate: -26px 10px; rotate: -12deg; }
}

@keyframes nfc-onda {
  0%, 32% { opacity: 0; scale: 0.4; }
  36% { opacity: 0.9; }
  60%, 100% { opacity: 0; scale: 2.2; }
}

@keyframes nfc-pantalla {
  0%, 34% { opacity: 0; translate: 0 6px; }
  44%, 86% { opacity: 1; translate: 0 0; }
  96%, 100% { opacity: 0; translate: 0 6px; }
}

/* Sin animación (movimiento reducido o fuera de pantalla): la escena NFC
   queda en su momento de contacto, con la reseña a la vista. */
.sis-nfc:not(.corriendo) .nfc-tarjeta {
  translate: 28px 0;
  rotate: -4deg;
}

.sis-nfc:not(.corriendo) .nfc-onda:nth-of-type(1) {
  opacity: 0.5;
  scale: 1.4;
}

/* Aurora en el chat: burbujas existentes (.msg), un punto más chicas. */
.sis-chat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--esp-2);
  padding: var(--esp-6);
}

.sis-chat .msg {
  max-width: 86%;
  font-size: 13px;
}

/* Wallet: iPhone recortado abajo, avisos apilados que entran con desfase,
   el pase inclinado en 3D suave por delante y una sombra de contacto. */
.wl-telefono {
  position: absolute;
  left: 50%;
  top: 26px;
  width: 168px;
  height: 330px;
  margin-left: -84px;
  border-radius: 34px;
  border: 5px solid #1E3047;
  background: radial-gradient(140% 70% at 50% 0%, #2A3F7A, #0C1E34 70%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  text-align: center;
  color: #F5F3EE;
  z-index: 1;
}

.wl-isla {
  display: block;
  width: 52px;
  height: 14px;
  margin: 9px auto 0;
  border-radius: 14px;
  background: #060F1C;
}

.wl-dia {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  color: rgba(245, 243, 238, 0.75);
}

.wl-hora {
  display: block;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.wl-avisos {
  display: grid;
  gap: 6px;
  margin: 12px 8px 0;
  text-align: left;
}

.wl-aviso {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 8.5px;
  line-height: 1.3;
}

.wl-aviso strong {
  font-weight: 600;
}

.wl-aviso small {
  font-size: 7.5px;
  color: rgba(245, 243, 238, 0.7);
}

.wl-aviso span {
  grid-column: 1 / -1;
  color: rgba(245, 243, 238, 0.85);
}

.wl-pase {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 190px;
  margin-left: -78px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(150deg, #FFFFFF, #EEF2F7);
  color: #1B2E44;
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: perspective(700px) rotateX(16deg) rotateY(-14deg) rotateZ(-5deg);
  box-shadow: 0 2px 4px rgba(6, 15, 28, 0.2), 0 22px 40px -16px rgba(6, 15, 28, 0.75);
  z-index: 2;
}

.wl-pase-cuenta {
  color: #5A3796;
  font-variant-numeric: tabular-nums;
}

.wl-sellos {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}

.wl-sellos :is(i, b) {
  aspect-ratio: 1;
  border-radius: 50%;
}

.wl-sellos i {
  background: #1B2E44;
}

.wl-sellos b {
  border: 1px solid rgba(27, 46, 68, 0.3);
}

/* Sombra de contacto bajo el pase. */
.wl-sombra {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 200px;
  height: 18px;
  margin-left: -86px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  filter: blur(2px);
  z-index: 1;
}

/* Los avisos entran con desfase al llegar la escena (home.js: .visto). */
.sis-wallet .wl-aviso {
  transition: opacity var(--dur-larga) var(--ease), translate var(--dur-larga) var(--ease);
}

.sis-wallet .wl-aviso:nth-child(2) {
  transition-delay: 0.35s;
}

@media (prefers-reduced-motion: no-preference) {
  .sis-wallet.espera:not(.visto) .wl-aviso {
    opacity: 0;
    translate: 0 -10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .corriendo :is(.nfc-tarjeta, .nfc-onda, .nfc-estrellas, .nfc-resena) {
    animation: none;
  }
}

/* ---------- Constelación como firma (Prompt 2B) ----------
   Separador: estrellas unidas por una línea de 1px que se dibuja con el
   scroll (stroke-dashoffset ligado a la vista); va entre dos secciones de
   papel. Fondo: una constelación tenue detrás de las cifras. */
.separador-constelacion {
  display: block;
  margin-top: calc(-1 * clamp(40px, 6vw, 88px));
  margin-bottom: clamp(48px, 7vw, 96px);
}

.separador-constelacion svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sc-linea {
  fill: none;
  stroke: rgba(90, 55, 150, 0.45);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.sc-estrellas circle {
  fill: #5A3796;
}

.sc-estrellas circle:nth-child(odd) {
  fill: #4AB3E8;
}

[data-tema='oscuro'] .sc-linea {
  stroke: rgba(108, 196, 242, 0.4);
}

[data-tema='oscuro'] .sc-estrellas circle {
  fill: #B49CE6;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sc-linea {
      stroke-dasharray: 1;
      animation: sis-trazo linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }

    .sc-estrellas circle {
      animation: sc-estrella linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }
  }
}

@keyframes sc-estrella {
  from { opacity: 0.25; }
  to { opacity: 1; }
}

.cifras .contenedor {
  position: relative;
}

/* En el margen superior de la banda: nunca cruza las cifras. */
.constelacion-fondo {
  position: absolute;
  top: calc(-1 * clamp(80px, 9vw, 140px));
  right: 0;
  width: min(400px, 46%);
  height: auto;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.constelacion-fondo path {
  fill: none;
  stroke: rgba(108, 196, 242, 0.35);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.constelacion-fondo circle {
  fill: #6CC4F2;
}

.cifras-lista,
.cifras .seccion-cabecera {
  position: relative;
  z-index: 1;
}

/* ---------- Servicios en bento (Prompt 2B, /servicios) ----------
   Las 6 áreas en una rejilla de 12 columnas con celdas de distinto tamaño
   (según cuántos servicios tiene cada familia). Cada área: cabecera con
   su ícono, un microvisual propio (CSS) y sus servicios como enlaces. El
   detalle de cada servicio se revela al pasar el mouse o con el foco; su
   espacio está reservado (sin saltos) y en táctil se ve siempre. */
.bento {
  display: grid;
  gap: var(--esp-4);
}

.bento-area {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  padding: var(--esp-6);
  border-radius: var(--radio-6);
  background: #FFFFFF;
  border: 1px solid var(--filete);
  box-shadow: var(--sombra-1);
  scroll-margin-top: calc(var(--nav-alto) + 72px);
}

.bento-cabeza {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--esp-3);
}

.bento-icono {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radio-3);
  color: #5A3796;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--degradado) border-box;
  border: 1px solid transparent;
}

.bento-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #5A3796;
  font-variant-numeric: tabular-nums;
}

.bento-titulo {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #1B2E44;
}

/* Microvisual de cada familia: dibujos mínimos con los colores de marca. */
.bento-micro {
  position: relative;
  height: 72px;
  border-radius: var(--radio-4);
  background: #F4F0E6;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--esp-5);
}

.mv-atencion {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 5px;
}

.mv-burbuja {
  height: 12px;
  border-radius: 8px;
  background: #DDEFFA;
  width: 46%;
  align-self: flex-end;
}

.mv-burbuja:nth-child(2) {
  align-self: flex-start;
  width: 60%;
  background: #FFFFFF;
  border: 1px solid var(--filete);
}

.mv-burbuja:nth-child(3) {
  width: 30%;
}

.mv-voz i {
  width: 4px;
  border-radius: 2px;
  background: var(--degradado);
  height: 20%;
}

.mv-voz i:nth-child(3n) { height: 62%; }
.mv-voz i:nth-child(3n+1) { height: 36%; }
.mv-voz i:nth-child(4n) { height: 78%; }
.mv-voz i:nth-child(5n) { height: 48%; }

.mv-doc {
  display: grid;
  gap: 5px;
  width: 58%;
  padding: 10px 12px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid var(--filete);
}

.mv-doc i {
  height: 4px;
  border-radius: 2px;
  background: #E4DCCB;
}

.mv-doc i:nth-child(2) { width: 70%; }
.mv-doc i:nth-child(3) { width: 84%; }

.mv-doc b {
  height: 5px;
  width: 40%;
  justify-self: end;
  border-radius: 2px;
  background: #5A3796;
}

.mv-analisis {
  align-items: flex-end;
  padding-bottom: 12px;
}

.mv-analisis i {
  width: 14px;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(#4AB3E8, #7B4FBF);
  opacity: 0.85;
}

.mv-web {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 5px;
  padding: 10px 22%;
}

.mv-nav,
.mv-fila {
  display: flex;
  gap: 4px;
}

.mv-nav i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C4B79E;
}

.mv-hero {
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, #1B2E44, #2A3F7A);
}

.mv-fila i {
  flex: 1;
  height: 12px;
  border-radius: 3px;
  background: #FFFFFF;
  border: 1px solid var(--filete);
}

.mv-fidelizacion i,
.mv-fidelizacion b {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.mv-fidelizacion i {
  background: #1B2E44;
}

.mv-fidelizacion i:nth-child(5) {
  background: var(--degradado);
}

.mv-fidelizacion b {
  border: 1px solid #C4B79E;
}

/* Servicios: enlaces en celdas; el ícono es del set de línea. */
.bento-lista {
  display: grid;
  gap: var(--esp-2);
}

.bento-lista li {
  display: flex;
}

.bento-celda {
  flex: 1;
}

.bento-celda {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: var(--esp-3);
  row-gap: 2px;
  align-items: start;
  padding: 12px 14px;
  border-radius: var(--radio-3);
  border: 1px solid var(--filete);
  background: #FDFBF7;
  color: #1B2E44;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), translate var(--dur) var(--ease);
}

.bento-celda .ico {
  grid-row: span 2;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: #5A3796;
}

.bento-celda strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.bento-detalle {
  grid-column: 2;
  font-size: 13.5px;
  line-height: 1.45;
  color: #566579;
}

.bento-flecha {
  grid-column: 3;
  grid-row: 1;
  color: #5A3796;
  transition: translate var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.bento-celda:focus-visible {
  outline: 2px solid #5A3796;
  outline-offset: 2px;
}

/* Con mouse (y JS): las celdas quedan compactas; el detalle de cada
   servicio sigue en el HTML (lo lee el lector de pantalla) y se muestra en
   el panel del microvisual del área al pasar el mouse o con el foco. */
.bento-vista {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--esp-5);
  font-size: 14px;
  line-height: 1.45;
  color: #1B2E44;
  background: #F4F0E6;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.bento-area.mostrando .bento-vista {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .bento-js .bento-detalle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .bento-js .bento-celda {
    align-items: center;
  }

  .bento-js .bento-celda .ico {
    grid-row: auto;
    margin-top: 0;
  }

  .bento-flecha {
    opacity: 0;
    translate: -4px 0;
  }

  .bento-celda:is(:hover, :focus-visible) {
    border-color: #C4B79E;
    background: #FFFFFF;
    translate: 0 -1px;
  }

  .bento-celda:is(:hover, :focus-visible) .bento-flecha {
    opacity: 1;
    translate: 0 0;
  }
}

@media (min-width: 700px) {
  .bento-lista {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (min-width: 1000px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .bento-atencion { grid-column: span 7; }
  .bento-voz { grid-column: span 5; }
  .bento-administracion { grid-column: span 5; }
  .bento-analisis { grid-column: span 7; }
  .bento-web { grid-column: span 6; }
  .bento-fidelizacion { grid-column: span 6; }

  .bento-voz .bento-lista,
  .bento-administracion .bento-lista {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bento-celda,
  .bento-detalle,
  .bento-flecha {
    transition: none;
  }
}

/* Modo oscuro y dentro de la noche: tarjetas #10243B. */
:is([data-tema='oscuro'], .tono-noche) .bento-area {
  background: #10243B;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--sombra-noche-2);
}

:is([data-tema='oscuro'], .tono-noche) .bento-titulo,
:is([data-tema='oscuro'], .tono-noche) .bento-celda {
  color: #F5F3EE;
}

:is([data-tema='oscuro'], .tono-noche) :is(.bento-num, .bento-celda .ico, .bento-flecha) {
  color: #6CC4F2;
}

:is([data-tema='oscuro'], .tono-noche) .bento-icono {
  color: #6CC4F2;
  background: linear-gradient(#10243B, #10243B) padding-box, var(--degradado) border-box;
}

:is([data-tema='oscuro'], .tono-noche) .bento-celda {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

:is([data-tema='oscuro'], .tono-noche) .bento-detalle {
  color: #A6B7C9;
}

:is([data-tema='oscuro'], .tono-noche) .bento-micro {
  background: rgba(255, 255, 255, 0.05);
}

@media (hover: hover) and (pointer: fine) {
  :is([data-tema='oscuro'], .tono-noche) .bento-celda:is(:hover, :focus-visible) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.24);
  }
}

:is([data-tema='oscuro'], .tono-noche) .bento-vista {
  color: #F5F3EE;
  background: #1A3150;
}

:is([data-tema='oscuro'], .tono-noche) .mv-fidelizacion i {
  background: #A6B7C9;
}

:is([data-tema='oscuro'], .tono-noche) .mv-hero {
  background: linear-gradient(90deg, #4AB3E8, #7B4FBF);
  opacity: 0.8;
}

:is([data-tema='oscuro'], .tono-noche) :is(.mv-fila i, .mv-doc) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
}

:is([data-tema='oscuro'], .tono-noche) .mv-doc i {
  background: rgba(255, 255, 255, 0.28);
}

:is([data-tema='oscuro'], .tono-noche) .mv-burbuja:nth-child(2) {
  background: rgba(255, 255, 255, 0.14);
  border-color: transparent;
}

/* ---------- Pie: la palabra de la marca (Prompt 2B) ----------
   BOREAS a todo el ancho del contenido (unidades de contenedor), con un
   relleno sutil: blanco que se apaga hacia abajo y un velo cian → violeta.
   Queda justo encima de la firma "Hecho a mano en Medellín". */
.pie-palabra-caja {
  container-type: inline-size;
  margin-top: clamp(40px, 6vw, 88px);
  position: relative;
  z-index: 1;
}

.pie-palabra {
  font-size: 25vw;
  font-size: 26.4cqi;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.8;
  text-align: center;
  margin-left: -0.03em;
  background:
    linear-gradient(90deg, rgba(74, 179, 232, 0.24), rgba(123, 79, 191, 0.24)),
    linear-gradient(180deg, rgba(245, 243, 238, 0.22), rgba(245, 243, 238, 0.02) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
  user-select: none;
  pointer-events: none;
}

@media print {
  .pie-palabra-caja {
    display: none;
  }
}

/* ---------- Casos: la página se recorre dentro del marco (Prompt 2B) ----------
   El marco de navegador muestra la página real completa (captura larga de
   Abeto) y la recorre de arriba abajo mientras el marco cruza la pantalla
   (transform ligado a la vista, en el compositor). La ventana conserva la
   proporción de antes (1400×756): sin saltos de diseño. Sin soporte o con
   movimiento reducido, queda arriba, como antes. */
.marco-pantalla {
  display: block;
  aspect-ratio: 1400 / 756;
  overflow: hidden;
}

.marco-desplazable {
  view-timeline: --marco block;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Convive con el asentado de las capturas (captura-asienta, que usa
       transform): el recorrido va en la propiedad translate. */
    .js .marco-desplazable img.marco-desplaza {
      animation: captura-asienta linear both, marco-recorre linear both;
      animation-timeline: view(), --marco;
      animation-range: cover 0% cover 55%, cover 12% cover 88%;
    }
  }
}

/* 3780px de alto en una ventana de 756: recorre el 80 % de la imagen. */
@keyframes marco-recorre {
  from { translate: 0 0; }
  to { translate: 0 -80%; }
}

/* Enlace al sitio en vivo de cada caso (Prompt 2B): pequeño, con el
   subrayado fino de la marca; abre en pestaña nueva. */
.trabajo-enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: var(--esp-1) 0 0 6px;
  font-size: 15px;
  font-weight: 500;
  color: #5A3796;
  text-decoration: underline;
  text-decoration-color: rgba(90, 55, 150, 0.35);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur) var(--ease);
}

.trabajo-enlace:hover {
  text-decoration-color: currentColor;
}

.trabajo-enlace:focus-visible {
  outline: 2px solid #5A3796;
  outline-offset: 2px;
  border-radius: 4px;
}

:is([data-tema='oscuro'], .tono-noche) .trabajo-enlace {
  color: #6CC4F2;
  text-decoration-color: rgba(108, 196, 242, 0.4);
}

:is([data-tema='oscuro'], .tono-noche) .trabajo-enlace:focus-visible {
  outline-color: #6CC4F2;
}

/* ---------- Fichas de caso (/casos) ----------
   Un <dialog> por caso: a la izquierda la página real del cliente dentro
   de un marco de navegador (se desplaza por dentro y, al abrir, se recorre
   sola despacio hasta que la persona la toca); a la derecha lo que
   construimos, lo que gana el negocio y el enlace al sitio. En celular,
   pantalla completa y una sola columna. */
.ficha-caso {
  width: min(1200px, calc(100vw - 32px));
  height: min(860px, calc(100dvh - 48px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radio-7);
  background: #F9F6EF;
  color: #1B2E44;
  box-shadow: var(--sombra-noche-3);
  overflow: hidden;
}

.ficha-caso::backdrop {
  background: rgba(1, 10, 18, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ficha-caso[open] {
  animation: caso-entra 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ficha-caso[open]::backdrop {
  animation: velo 0.3s var(--ease) both;
}

@keyframes caso-entra {
  from {
    opacity: 0;
    translate: 0 24px;
    scale: 0.98;
  }
}

.caso-cuerpo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  height: 100%;
}

.caso-cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--filete);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #1B2E44;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.caso-cerrar:hover {
  border-color: #C4B79E;
}

.caso-cerrar:focus-visible {
  outline: 2px solid #5A3796;
  outline-offset: 2px;
}

.caso-cerrar .ico {
  width: 20px;
  height: 20px;
}

/* Vista: el marco ocupa la columna; la pantalla se desplaza por dentro. */
.caso-vista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--esp-6);
  background: linear-gradient(160deg, #060F1C, #0C1E34);
}

.caso-marco {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radio-4);
}

.caso-dominio {
  margin-left: var(--esp-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #566579;
}

.caso-pantalla {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: #E9E6DF;
}

.caso-pantalla:focus-visible {
  outline: 2px solid #6CC4F2;
  outline-offset: -2px;
}

.caso-pantalla img {
  display: block;
  width: 100%;
  height: auto;
}

.caso-pista {
  margin-top: var(--esp-3);
  font-size: 12px;
  color: #A6B7C9;
  text-align: center;
}

/* Texto */
.caso-texto {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--esp-14) var(--esp-10) var(--esp-10);
}

.caso-texto .etiqueta-seccion {
  margin-bottom: var(--esp-4);
}

.caso-titulo {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.caso-resumen {
  margin-top: var(--esp-4);
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.55;
  color: #566579;
}

.caso-subtitulo {
  margin-top: var(--esp-8);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--filete);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5A3796;
}

.caso-entregas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

.caso-entregas li {
  padding: 6px 12px;
  border-radius: var(--radio-pill);
  border: 1px solid var(--filete);
  background: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
}

.caso-beneficios {
  display: grid;
  gap: var(--esp-5);
  margin-top: var(--esp-5);
}

.caso-beneficios li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-4);
  align-items: start;
}

.caso-beneficio-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radio-3);
  color: #5A3796;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--degradado) border-box;
  border: 1px solid transparent;
}

.caso-beneficio-icono .ico {
  width: 20px;
  height: 20px;
}

.caso-beneficios strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.caso-beneficios p {
  margin-top: 2px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #566579;
}

.caso-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4) var(--esp-6);
  margin-top: var(--esp-10);
}

/* Celular: pantalla completa, una columna, todo se desplaza junto. */
@media (max-width: 899px) {
  .ficha-caso {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .caso-cuerpo {
    display: block;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .caso-vista {
    height: 62dvh;
    padding: var(--esp-14) var(--esp-4) var(--esp-4);
  }

  .caso-texto {
    overflow: visible;
    padding: var(--esp-8) var(--esp-5) var(--esp-12);
  }

}

/* Modo oscuro */
[data-tema='oscuro'] .ficha-caso {
  background: #0C1E34;
  color: #F5F3EE;
}

[data-tema='oscuro'] :is(.caso-resumen, .caso-beneficios p) {
  color: #A6B7C9;
}

[data-tema='oscuro'] .caso-subtitulo {
  color: #6CC4F2;
  border-top-color: rgba(255, 255, 255, 0.14);
}

[data-tema='oscuro'] .caso-entregas li {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-tema='oscuro'] .caso-beneficio-icono {
  color: #6CC4F2;
  background: linear-gradient(#10243B, #10243B) padding-box, var(--degradado) border-box;
}

[data-tema='oscuro'] .caso-cerrar {
  background: rgba(12, 30, 52, 0.9);
  border-color: rgba(255, 255, 255, 0.16);
  color: #F5F3EE;
}

@media (prefers-reduced-motion: reduce) {
  .ficha-caso[open],
  .ficha-caso[open]::backdrop {
    animation: none;
  }
}

@media print {
  .ficha-caso {
    display: none !important;
  }
}

/* ---------- Ficha de caso: un solo scroll (Prompt 2B) ----------
   El cuerpo de la ficha es el único que se desplaza. En escritorio, la
   vista y el texto quedan fijos (sticky) en una pista alta y ambos
   avanzan con el mismo scroll (home.js mueve la página dentro del marco y
   el texto según el avance). En celular, el marco queda fijo arriba y su
   página avanza al ritmo del texto que pasa debajo. */
.ficha-caso .caso-cuerpo {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.ficha-caso .caso-cuerpo:focus-visible {
  outline: 2px solid #6CC4F2;
  outline-offset: -3px;
}

/* Ni el marco ni el texto se desplazan por su cuenta (ni retienen la
   rueda): todo va al cuerpo. */
.ficha-caso :is(.caso-pantalla, .caso-texto) {
  overflow: hidden;
  overscroll-behavior: auto;
}

.ficha-caso .caso-pantalla img,
.ficha-caso .caso-texto-mov {
  will-change: transform;
}

@media (min-width: 900px) {
  .ficha-caso .caso-cuerpo {
    grid-template-rows: var(--pista, 100%);
    align-items: start;
  }

  .ficha-caso :is(.caso-vista, .caso-texto) {
    position: sticky;
    top: 0;
    height: var(--alto, 100%);
  }

  .ficha-caso .caso-texto {
    overflow: hidden;
  }

}

@media (max-width: 899px) {
  .ficha-caso .caso-vista {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 48dvh;
  }
}

/* Con una ficha abierta, la página de fondo no se desplaza. */
html.ficha-abierta {
  overflow: hidden;
}

/* ==================== /nosotros (Prompt 3B) ====================
   La página más cálida: hero crema con más aire, línea del tiempo como
   constelación, la foto de la infancia como impresión antigua, cifras en
   noche, perfiles con su formación y una cita editorial antes del cierre. */

/* Única letra manuscrita del sitio: solo para la nota del margen. */
@font-face {
  font-family: 'Caveat Nota';
  src: url('assets/fuentes/caveat-nota.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* ---------- Impresión antigua (foto de la infancia) ---------- */
.impresion {
  margin-top: var(--esp-8);
  max-width: 460px;
}

.impresion-papel {
  position: relative;
  padding: 14px 14px 64px;
  background: #FFFDF8;
  border: 1px solid #E8E0D0;
  border-radius: 3px;
  rotate: -2.5deg;
  box-shadow:
    0 1px 1px rgba(27, 46, 68, 0.06),
    0 10px 24px -10px rgba(27, 46, 68, 0.28),
    0 28px 50px -30px rgba(27, 46, 68, 0.35);
}

/* Grano del papel (SVG de ruido, sin archivos). */
.impresion-papel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.impresion-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #EDE6D8;
}

.impresion-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.18) contrast(0.96) saturate(0.92);
}

.impresion-vacia {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #C4B79E;
  background: radial-gradient(circle at 50% 40%, #F4EEE2, #E8E0D0);
}

.impresion-vacia .ico {
  width: 44px;
  height: 44px;
  stroke-width: 1.2;
}

.impresion-nota {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  font-family: 'Caveat Nota', 'Segoe Print', 'Bradley Hand', cursive;
  font-weight: 500;
  font-size: clamp(17px, 5vw, 25px);
  line-height: 1.1;
  text-wrap: balance;
  color: #3A3F8F;
  rotate: -1.5deg;
}

/* Sombra de contacto bajo la impresión. */
.impresion::after {
  content: '';
  display: block;
  height: 14px;
  margin: 6px 12% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(27, 46, 68, 0.22), transparent);
}

/* Antes y después (solo con las dos fotos: home.js pone .ad-activo). */
.ad-hoy {
  clip-path: inset(0 0 0 var(--ad, 50%));
}

.ad-control {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.ad-linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ad, 50%);
  width: 2px;
  margin-left: -1px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(27, 46, 68, 0.25);
  pointer-events: none;
}

.ad-linea::after {
  content: '‹ ›';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #1B2E44;
  font-size: 16px;
  font-weight: 600;
  box-shadow: var(--sombra-1);
}

.ad-control:focus-visible + .ad-linea::after {
  outline: 2px solid #5A3796;
  outline-offset: 2px;
}

/* ---------- Sellos de formación (Prompt 3B) ----------
   Nombres de las academias como marca tipográfica, en una fila con
   separadores finos (hasta tener los logos oficiales en monocromo). */
.sellos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-5);
  margin-top: var(--esp-4);
}

.sellos li {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1B2E44;
}

.sellos li + li::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--esp-5) / 2);
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: #C4B79E;
}

.sellos-contacto {
  justify-content: center;
  margin-top: var(--esp-6);
}

:is([data-tema='oscuro'], .cierre, .tono-noche) .sellos li {
  color: rgba(245, 243, 238, 0.78);
}

/* Casos: tarjeta pequeña "Quién lo construye". */
.quien-construye {
  margin-top: clamp(64px, 8vw, 112px);
  padding: var(--esp-8);
  border-radius: var(--radio-6);
  background: var(--degradado) top / 100% 1px no-repeat, #FFFFFF;
  border: 1px solid var(--filete);
  box-shadow: var(--sombra-1);
}

.quien-construye .etiqueta-seccion {
  padding-top: 0;
  border-top: 0;
  margin-bottom: var(--esp-3);
}

.quien-linea {
  max-width: 44ch;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #1B2E44;
}

.quien-construye .sellos {
  margin: var(--esp-5) 0 var(--esp-4);
}

[data-tema='oscuro'] .quien-construye {
  background: var(--degradado) top / 100% 1px no-repeat, #10243B;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--sombra-noche-2);
}

[data-tema='oscuro'] .quien-linea {
  color: #F5F3EE;
}

/* Inicio: adelanto de Nosotros (impresión chica + frase + enlace). */
.nos-adelanto-grilla {
  display: grid;
  gap: var(--esp-12);
  align-items: center;
}

.impresion-chica {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .nos-adelanto-grilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--esp-16);
  }

  .nos-adelanto-texto .titular-seccion {
    max-width: 18ch;
  }
}

/* Con foto (o con [hidden]), el marcador de posición desaparece. */
.impresion-foto:has(img) .impresion-vacia,
.impresion-vacia[hidden],
.perfil-retrato:has(img) span {
  display: none;
}

/* En pantallas muy angostas la nota puede ir en dos líneas: más margen. */
@media (max-width: 359px) {
  .impresion-papel {
    padding-bottom: 76px;
  }
}

/* Cierre de /nosotros: el botón respira bajo el titular y no se parte en
   dos líneas en el celular ("con nosotros" desde 480px). */
.cierre-panel .titular-cierre + .boton {
  margin-top: var(--esp-8);
}

@media (max-width: 479px) {
  .solo-ancho {
    display: none;
  }
}


/* ==================== Más vida en el celular ====================
   Antes, en el celular casi todo lo visible estaba apagado (aurora WebGL,
   escena fijada, manchas y destellos). Aquí vuelve el movimiento con
   piezas baratas: solo transform y opacity (en el compositor), en bucle
   solo mientras se ven (.en-pausa) y nada con movimiento reducido. */

/* 1. Entrada del hero (todas las páginas y tamaños). El párrafo que mide
   el LCP solo se desplaza (sin opacidad 0), para no retrasarlo. */
@media (prefers-reduced-motion: no-preference) {
  .js :is(.hero, .nos-hero) :is(.etiqueta, .titular .linea > span, .nos-titular, .hero-acciones, .hero-constelacion, .hero-dato, .nos-hero-pie) {
    animation: hero-entra 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .js :is(.hero, .nos-hero) .titular .linea:nth-child(2) > span { animation-delay: 0.08s; }
  .js :is(.hero, .nos-hero) .titular .linea:nth-child(3) > span { animation-delay: 0.16s; }
  .js :is(.hero, .nos-hero) .titular .linea:nth-child(4) > span { animation-delay: 0.24s; }
  .js .hero .hero-acciones { animation-delay: 0.4s; }
  .js .hero .hero-constelacion { animation-delay: 0.5s; }
  .js .hero .hero-dato { animation-delay: 0.6s; }
  .js .nos-hero .nos-titular { animation-delay: 0.08s; }
  .js .nos-hero .nos-hero-pie { animation-delay: 0.3s; }

  .js .hero .hero-linea {
    animation: hero-sube 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
  }
}

@keyframes hero-entra {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

@keyframes hero-sube {
  from {
    transform: translateY(22px);
  }
}

/* 2. Aurora del hero en el celular (sin WebGL): el degradado respira y se
   desplaza despacio. Se pausa fuera de pantalla. */
@media (prefers-reduced-motion: no-preference) {
  .hero:not(.con-aurora-gl)::before {
    inset: -20%;
    background:
      radial-gradient(40% 32% at 70% 30%, rgba(74, 179, 232, 0.22), transparent 70%),
      radial-gradient(34% 28% at 88% 52%, rgba(123, 79, 191, 0.2), transparent 70%),
      radial-gradient(30% 26% at 20% 70%, rgba(74, 179, 232, 0.08), transparent 70%);
    animation: aurora-respira 16s ease-in-out infinite alternate;
    will-change: transform;
  }

  .hero.en-pausa::before {
    animation-play-state: paused;
  }
}

@keyframes aurora-respira {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translate3d(-6%, 4%, 0) scale(1.08);
    opacity: 1;
  }
  100% {
    transform: translate3d(5%, -3%, 0) scale(1.02);
    opacity: 0.9;
  }
}

/* 3. Manchas de aurora y destellos grandes también en el celular. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .con-scrub .aurora-suave span {
    animation: deriva-aurora 24s ease-in-out infinite alternate;
  }

  .destello-casos {
    display: block;
  }
}

/* 5. Toque: las tarjetas y celdas responden al dedo (en táctil). */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  :is(.trabajo, .bento-celda, .agente, .servicio, .faq summary, .cifra):active {
    transform: scale(0.985);
    transition: transform 0.12s ease;
  }
}

/* Contador de las cifras de /nosotros (va fuera de @supports/@media:
   @property solo vale en el nivel superior; hereda para que ::after lo lea). */
@property --cuenta {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

/* ==================== /nosotros como escenas (Prompt 3C) ====================
   Cada sección es una escena: ocupa la pantalla, tiene una idea y cambia
   con el scroll. Todo el movimiento es CSS ligado al scroll (en el
   compositor; Lenis ya lo suaviza) con UNA curva de marca, dentro de
   @supports (animation-timeline) + sin movimiento reducido. Los pines
   (sticky) solo desde 768px. La base (celular, Firefox, movimiento
   reducido) es la página completa, estática y legible.
   Ritmo: hero crema · historia crema · cifras noche · quiénes crema ·
   por qué noche · cierre noche. */
.pagina-nosotros {
  --n3-tenue: #848D99;          /* palabra por llenar sobre crema (3,1:1) */
  --n3-tenue-noche: #5F6E83;    /* sobre noche (3,4:1) */
  --n3-curva: cubic-bezier(0.22, 1, 0.36, 1);
}

.n3-hero,
.n3-historia,
.n3-quienes {
  position: relative;
  background: #F9F6EF;
  color: #1B2E44;
}

[data-tema='oscuro'] :is(.n3-hero, .n3-historia, .n3-quienes) {
  background: transparent;
  color: #F5F3EE;
}

/* ---------- 1 · Hero ---------- */
.n3-hero .n3-escenario {
  position: relative;
  overflow: clip;
  padding: calc(var(--nav-alto) + clamp(72px, 10vw, 140px)) 0 clamp(80px, 9vw, 128px);
}

.n3-topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.11;
  pointer-events: none;
}

.n3-topo path {
  fill: none;
  stroke: #5A3796;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.n3-topo path:nth-child(3n) {
  stroke: #4AB3E8;
}

[data-tema='oscuro'] .n3-topo path {
  stroke: #6CC4F2;
}

.n3-estrella {
  position: absolute;
  top: 22%;
  right: 12%;
  width: clamp(28px, 3vw, 44px);
  color: #4AB3E8;
  opacity: 0.8;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) rotate(calc(var(--mx, 0px) * 0.6deg));
  transition: transform 0.9s var(--n3-curva);
  pointer-events: none;
}

.n3-estrella .destello {
  position: static;
  width: 100%;
  height: auto;
  margin: 0;
}

.n3-hero .contenedor {
  position: relative;
}

.n3-titular {
  /* En em (no ch): el ch cambia al llegar Inter y movía todo el hero.
     9,9em = 15ch de Inter. */
  max-width: 9.9em;
}

.n3-titular .destello {
  color: #4AB3E8;
}

.n3-hero-pie {
  display: grid;
  gap: var(--esp-5);
  margin-top: clamp(32px, 4vw, 56px);
}

.n3-subtitulo {
  max-width: 44ch;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: #566579;
}

.n3-sedes {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: 14px;
  font-weight: 500;
  color: #5A3796;
}

.n3-sedes .ico {
  width: 18px;
  height: 18px;
}

[data-tema='oscuro'] .n3-subtitulo { color: #A6B7C9; }
[data-tema='oscuro'] .n3-sedes { color: #6CC4F2; }

@media (min-width: 900px) {
  .n3-hero-pie {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    column-gap: var(--esp-6);
  }

  .n3-subtitulo { grid-column: 1 / span 7; }
  .n3-sedes { grid-column: 9 / span 4; justify-self: start; }
}

/* ---------- 2 · Historia (base: lista) ---------- */
.n3-historia {
  padding: clamp(96px, 10vw, 144px) 0;
}

.n3-historia-cabecera {
  margin-bottom: clamp(48px, 6vw, 80px);
}

.n3-hitos {
  position: relative;
  display: grid;
  gap: clamp(64px, 9vw, 112px);
}

/* Celular: línea vertical fina con el degradado de marca. */
.n3-hitos::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(var(--esp-4) + 6px);
  width: 1px;
  background: linear-gradient(#4AB3E8, #7B4FBF);
  opacity: 0.6;
}

.n3-hito {
  position: relative;
  padding-left: var(--esp-12);
}

.n3-hito::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #5A3796;
  box-shadow: 0 0 0 5px rgba(90, 55, 150, 0.12), 0 0 16px rgba(74, 179, 232, 0.5);
}

.n3-anio {
  position: absolute;
  top: -0.32em;
  right: 0;
  z-index: 0;
  font-size: clamp(88px, 22vw, 140px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(90, 55, 150, 0.14);
  pointer-events: none;
  user-select: none;
}

[data-tema='oscuro'] .n3-anio {
  -webkit-text-stroke-color: rgba(108, 196, 242, 0.16);
}

.n3-hito-texto {
  position: relative;
  z-index: 1;
}

.n3-hito .hito-cuando {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5A3796;
}

.n3-hito h3 {
  margin-top: var(--esp-2);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.n3-hito-texto > p:last-child {
  max-width: 46ch;
  margin-top: var(--esp-4);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: #566579;
}

[data-tema='oscuro'] .n3-hito .hito-cuando { color: #6CC4F2; }
[data-tema='oscuro'] .n3-hito-texto > p:last-child { color: #A6B7C9; }

.n3-hito .impresion {
  position: relative;
  z-index: 2;
  margin-top: var(--esp-10);
}

.n3-constelacion {
  display: none;
}

/* ---------- 3 · Cifras (base) ---------- */
.n3-cifras {
  position: relative;
  padding: clamp(96px, 10vw, 140px) 0;
  background: linear-gradient(to bottom, #060F1C, #0C1E34);
  color: #F5F3EE;
}

.n3-cifras-cabecera .etiqueta-seccion {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.n3-cifras-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--esp-8);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.n3-cifra {
  position: relative;
  padding: var(--esp-8) var(--esp-4) var(--esp-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.n3-cifra:nth-child(odd) {
  padding-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

/* Filete fino con el degradado bajo cada cifra. */
.n3-cifra::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  margin-top: var(--esp-4);
  background: var(--degradado);
}

.n3-valor {
  display: flex;
  align-items: baseline;
  font-size: clamp(72px, 20vw, 220px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
}

.n3-unidad {
  margin-left: 0.06em;
  font-size: 0.4em;
  letter-spacing: 0;
  color: #6CC4F2;
}

.n3-cifra-texto {
  max-width: 28ch;
  margin-top: var(--esp-3);
  font-size: 15px;
  line-height: 1.5;
  color: #A6B7C9;
}

.n3-cifra-texto strong {
  color: #F5F3EE;
  font-weight: 600;
}

@media (min-width: 900px) {
  .n3-cifra {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    column-gap: var(--esp-8);
    padding: var(--esp-10) var(--esp-8) var(--esp-10) 0;
  }

  .n3-cifra:nth-child(even) {
    padding-left: var(--esp-10);
  }

  .n3-valor {
    font-size: clamp(140px, 12.5vw, 220px);
  }

  .n3-cifra::after {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
}

/* ---------- 4 · Quiénes somos (base) ---------- */
.n3-quienes {
  padding: clamp(72px, 8vw, 112px) 0;
}

.n3-quienes-cabecera {
  margin-bottom: clamp(40px, 5vw, 64px);
}

.n3-visor {
  display: none;
}

.n3-perfiles {
  display: grid;
  gap: clamp(64px, 8vw, 96px);
}

.n3-perfil-foto {
  max-width: 280px;
  margin-bottom: var(--esp-6);
  overflow: clip;
  border-radius: var(--radio-6);
  border: 1px solid #E8E0D0;
  aspect-ratio: 4 / 5;
}

.n3-perfil-foto img,
.n3-visor-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.n3-perfil .perfil-rol {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5A3796;
}

.n3-perfil .perfil-nombre {
  margin-top: var(--esp-2);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.n3-bio {
  max-width: 50ch;
  margin-top: var(--esp-4);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
  color: #566579;
}

.n3-perfil .formacion-titulo {
  margin-top: var(--esp-8);
  padding-top: var(--esp-4);
  border-top: 1px solid #C4B79E;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.n3-fichas {
  display: grid;
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}

.n3-ficha {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--esp-4);
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radio-4);
  background: #FFFFFF;
  border: 1px solid #E8E0D0;
  font-size: 14px;
  line-height: 1.45;
  color: #566579;
}

.n3-ficha strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #1B2E44;
}

/* Monograma (hasta tener el logo oficial): navy sobre crema. */
.n3-logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radio-3);
  background: #F4F0E6;
  border: 1px solid #E8E0D0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1B2E44;
}

[data-tema='oscuro'] .n3-perfil .perfil-rol { color: #6CC4F2; }
[data-tema='oscuro'] .n3-bio { color: #A6B7C9; }
[data-tema='oscuro'] .n3-ficha { background: #10243B; border-color: rgba(255, 255, 255, 0.08); color: #A6B7C9; }
[data-tema='oscuro'] .n3-ficha strong { color: #F5F3EE; }
[data-tema='oscuro'] .n3-logo { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #F5F3EE; }
[data-tema='oscuro'] .n3-perfil .formacion-titulo { border-top-color: rgba(255, 255, 255, 0.2); }

@media (min-width: 640px) {
  .n3-fichas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 5 · Por qué lo hacemos (base) ---------- */
.n3-porque {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: clamp(96px, 10vw, 140px) 0 clamp(64px, 8vw, 96px);
  background: linear-gradient(to bottom, #060F1C, #0C1E34);
  color: #F5F3EE;
}

.n3-porque .etiqueta-seccion {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.n3-frase {
  display: grid;
  align-items: center;
  min-height: 70svh;
  padding: var(--esp-10) 0;
}

.n3-frase-texto {
  max-width: 22ch;
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}

.n3-frase:nth-of-type(even) .n3-frase-texto {
  margin-left: auto;
  text-align: right;
}

/* ---------- Escenas animadas (scroll) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Palabras que se llenan con el scroll (hero y por qué): del gris
       legible (3:1) a la tinta plena. */
    .n3-frase-texto .p {
      color: var(--n3-tenue-noche);
      animation: n3-llenar linear both;
    }

    .n3-frase-texto { --lleno: #F5F3EE; }
    .n3-titular { --lleno: #1B2E44; }
    [data-tema='oscuro'] .n3-titular { --lleno: #F5F3EE; }

    @keyframes n3-llenar {
      to { color: var(--lleno); }
    }

    /* Por qué: cada frase se llena mientras cruza el centro. */
    /* Cada frase con su propia línea de tiempo (--frase0..3, en el HTML):
       con un nombre compartido, las palabras tomaban la de otra frase. */
    .n3-frase {
      view-timeline-axis: block;
    }

    .n3-frase-texto .p {
      animation-timeline: var(--tl);
      animation-range: cover calc(22% + var(--i) / var(--n) * 34%) cover calc(22% + (var(--i) + 1) / var(--n) * 34%);
    }

    .n3-frase-texto { color: #F5F3EE; }

    /* Historia en celular / base: cada hito sube al entrar. */
    .n3-hito-texto,
    .n3-ficha {
      animation: n3-sube linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }

    @keyframes n3-sube {
      from { opacity: 0; translate: 0 28px; }
    }

    /* La foto de la infancia se revela (gris y borrosa → nítida). */
    .n3-hito .impresion-foto img {
      animation: n3-revela linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }

    @keyframes n3-revela {
      from { filter: grayscale(1) blur(6px); scale: 1.08; }
      to { filter: grayscale(0) blur(0); scale: 1; }
    }

    /* Cifras: conteo atado al scroll (contador CSS), valor final al
       terminar. El número real sigue en el HTML para el lector. */
    .n3-cuenta {
      font-size: 0;
      animation: n3-contar linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 50%;
    }

    .n3-cuenta::after {
      content: counter(n3) / '';
      counter-reset: n3 var(--cuenta);
      font-size: clamp(72px, 20vw, 220px);
    }

    @keyframes n3-contar {
      from { --cuenta: 0; }
      to { --cuenta: var(--fin); }
    }

    /* Cierre: el titular sube al llegar. */
    .pagina-nosotros .titular-cierre .linea > span {
      animation: n3-sube linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 90%;
    }

    /* Barrido circular de entrada en las escenas de noche. */
    .n3-cifras,
    .n3-porque {
      animation: n3-barrido linear both;
      animation-timeline: view();
      animation-range: entry-crossing 0% entry-crossing 35%;
    }

    /* Barrido corto: empieza ya abierto y termina pronto, para no dejar
       una pantalla vacía mientras la escena entra. */
    @keyframes n3-barrido {
      from { clip-path: circle(40vmax at 50% 0%); }
      to { clip-path: circle(400vmax at 50% 0%); }
    }

    /* ===== Pines y escenas grandes: en todos los anchos (Prompt 3E) =====
       En el celular se usan svh (la barra del navegador no las mueve) y
       las escenas de dos columnas pasan a vertical (ver "Paridad móvil"). */
    @media (min-width: 0) {

      /* 1 · Hero: pin corto; el titular se llena y después entra el pie. */
      .n3-hero {
        height: 180vh;
        view-timeline: --hero block;
      }

      [data-tema='oscuro'] .n3-titular .p {
        color: var(--n3-tenue-noche);
      }

      .n3-hero .n3-escenario {
        position: sticky;
        top: 0;
        height: 100svh;
        display: grid;
        align-items: center;
        padding: var(--nav-alto) 0 0;
      }

      .n3-titular .p {
        color: var(--n3-tenue);
        animation: n3-llenar linear both;
        animation-timeline: --hero;
        animation-range: contain calc(var(--i) / var(--n) * 55%) contain calc((var(--i) + 1) / var(--n) * 55%);
      }

      .n3-subtitulo,
      .n3-sedes {
        animation: n3-sube linear both;
        animation-timeline: --hero;
      }

      .n3-subtitulo { animation-range: contain 58% contain 72%; }
      .n3-sedes { animation-range: contain 66% contain 80%; }

      /* 2 · Historia: un pin, un hito por pantalla. */
      .n3-historia {
        height: 560vh;
        padding: 0;
        view-timeline: --historia block;
      }

      .n3-historia .n3-escenario {
        position: sticky;
        top: 0;
        height: 100svh;
        overflow: clip;
        display: grid;
        grid-template-rows: auto 1fr auto;
        padding: calc(var(--nav-alto) + 40px) 0 32px;
      }

      .n3-historia-cabecera {
        margin-bottom: 0;
      }

      .n3-historia-cabecera .titular-seccion {
        font-size: clamp(28px, 2.6vw, 40px);
      }

      .n3-hitos {
        display: block;
        position: relative;
      }

      .n3-hitos::before {
        display: none;
      }

      .n3-hito {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
        align-items: center;
        gap: var(--esp-12);
        padding: 0;
        animation: n3-hito linear both;
        animation-timeline: --historia;
        animation-range: contain calc(var(--k) * 19%) contain calc((var(--k) + 1) * 19%);
      }

      .n3-hito:first-child { animation-name: n3-hito-primero; }
      .n3-hito:last-child { animation-name: n3-hito-ultimo; }

      /* Sin solaparse: el hito sale del todo antes de que entre el siguiente. */
      @keyframes n3-hito {
        0% { opacity: 0; translate: 0 48px; visibility: visible; }
        18%, 80% { opacity: 1; translate: 0 0; }
        98%, 100% { opacity: 0; translate: 0 -48px; visibility: hidden; }
      }

      @keyframes n3-hito-primero {
        0%, 80% { opacity: 1; translate: 0 0; visibility: visible; }
        98%, 100% { opacity: 0; translate: 0 -48px; visibility: hidden; }
      }

      @keyframes n3-hito-ultimo {
        0% { opacity: 0; translate: 0 48px; }
        18%, 100% { opacity: 1; translate: 0 0; }
      }

      .n3-hito::before {
        display: none;
      }

      .n3-hito-texto {
        grid-column: 1;
        animation: none;
      }

      .n3-hito h3 {
        font-size: clamp(40px, 4.4vw, 68px);
      }

      /* El año gigante en contorno, al lado opuesto del texto. */
      .n3-anio {
        position: static;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        font-size: clamp(160px, 19vw, 280px);
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: rgba(90, 55, 150, 0.12);
      }

      /* La foto: entra pequeña e inclinada, crece y se revela. */
      .n3-hito .impresion {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        width: min(420px, 100%);
        margin: 0;
        animation: n3-polaroid linear both;
        animation-timeline: --historia;
        animation-range: contain 0% contain 12%;
      }

      .n3-hito .impresion-foto img {
        animation-timeline: --historia;
        animation-range: contain 1% contain 14%;
      }

      @keyframes n3-polaroid {
        from { scale: 0.55; rotate: -12deg; translate: 18% 18%; }
        to { scale: 1; rotate: 0deg; translate: 0 0; }
      }

      /* La constelación une los hitos y se dibuja con el scroll. */
      .n3-constelacion {
        display: block;
        width: min(1280px, calc(100% - 48px));
        height: auto;
        margin: 0 auto;
        overflow: visible;
      }

      .n3-c-base,
      .n3-c-trazo {
        fill: none;
        stroke-width: 1.5;
        vector-effect: non-scaling-stroke;
      }

      .n3-c-base { stroke: rgba(90, 55, 150, 0.16); }

      .n3-c-trazo {
        stroke: #7B4FBF;
        stroke-dasharray: 1;
        animation: sis-trazo linear both;
        animation-timeline: --historia;
        animation-range: contain 0% contain 80%;
      }

      .n3-c-estrella circle {
        fill: #C4B79E;
        animation: n3-enciende linear both;
        animation-timeline: --historia;
        animation-range: contain calc(var(--k) * 20%) contain calc(var(--k) * 20% + 3%);
      }

      .n3-c-estrella text {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-anchor: middle;
        fill: #566579;
      }

      @keyframes n3-enciende {
        to { fill: #4AB3E8; r: 7px; }
      }

      /* 3 · Cifras: pin; el conteo va con el scroll del pin. */
      .n3-cifras {
        height: 230vh;
        padding: 0;
        background: none;
        view-timeline: --cifras block;
        animation-range: entry-crossing 0% entry-crossing 35%;
      }

      .n3-cifras .n3-escenario {
        position: sticky;
        top: 0;
        height: 100svh;
        display: grid;
        align-items: center;
        padding-top: var(--nav-alto);
        background: linear-gradient(to bottom, #060F1C, #0C1E34);
        animation: n3-cierra linear both;
        animation-timeline: --cifras;
        animation-range: exit-crossing 70% exit-crossing 100%;
      }

      @keyframes n3-cierra {
        from { clip-path: circle(160vmax at 50% 0%); }
        to { clip-path: circle(70vmax at 50% 0%); }
      }

      .n3-cuenta {
        animation-timeline: --cifras;
        animation-range: contain calc(var(--k-cifra, 0) * 6%) contain calc(48% + var(--k-cifra, 0) * 6%);
      }

      .n3-cifra:nth-child(2) .n3-cuenta { --k-cifra: 1; }
      .n3-cifra:nth-child(3) .n3-cuenta { --k-cifra: 2; }
      .n3-cifra:nth-child(4) .n3-cuenta { --k-cifra: 3; }

      .n3-cuenta::after {
        font-size: clamp(140px, 12.5vw, 220px);
      }

      .n3-cifra {
        animation: n3-sube linear both;
        animation-timeline: --cifras;
        /* Aparecen mientras la escena entra (no queda una pantalla vacía). */
        animation-range: entry calc(55% + var(--k) * 8%) entry calc(85% + var(--k) * 8%);
      }

      /* 4 · Quiénes somos: pantalla dividida con la foto fija. */
      .n3-quienes {
        timeline-scope: --daniel;
      }

      .n3-dividida {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--esp-14);
        align-items: start;
      }

      .n3-visor {
        display: block;
        position: sticky;
        top: calc(var(--nav-alto) + 32px);
        aspect-ratio: 4 / 5;
        max-height: calc(100svh - var(--nav-alto) - 64px);
        border-radius: var(--radio-7);
        overflow: clip;
        box-shadow: var(--sombra-2);
      }

      .n3-visor-foto {
        position: absolute;
        inset: 0;
        margin: 0;
      }

      .n3-visor-foto figcaption {
        position: absolute;
        left: 16px;
        bottom: 16px;
        padding: 8px 14px;
        border-radius: var(--radio-pill);
        background: rgba(6, 15, 28, 0.72);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        font-size: 13px;
        font-weight: 600;
        color: #F5F3EE;
      }

      .n3-visor-daniel {
        animation: n3-funde linear both;
        animation-timeline: --daniel;
        animation-range: entry 40% entry 100%;
      }

      /* Los nombres no se cruzan: uno sale antes de que entre el otro. */
      .n3-visor-camilo figcaption {
        animation: n3-sale linear both;
        animation-timeline: --daniel;
        animation-range: entry 35% entry 60%;
      }

      .n3-visor-daniel figcaption {
        animation: n3-entra linear both;
        animation-timeline: --daniel;
        animation-range: entry 70% entry 100%;
      }

      @keyframes n3-sale { to { opacity: 0; translate: 0 8px; } }
      @keyframes n3-entra { from { opacity: 0; translate: 0 8px; } }

      @keyframes n3-funde {
        from { opacity: 0; scale: 1.04; }
        to { opacity: 1; scale: 1; }
      }

      #daniel {
        view-timeline: --daniel block;
      }

      .n3-perfil-foto {
        display: none;
      }

      .n3-perfiles {
        gap: clamp(72px, 9vw, 120px);
        padding-bottom: 0;
      }

      .n3-perfil {
        min-height: calc(100svh - var(--nav-alto) - 64px);
      }

      .n3-perfil:last-child {
        min-height: 0;
      }

      /* 5 · Por qué: cada frase ocupa la pantalla. */
      .n3-frase {
        min-height: 100svh;
      }
    }
  }
}

/* Sin animaciones ligadas al scroll o con movimiento reducido: todo
   visible y en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .n3-estrella {
    transition: none;
  }
}

@media print {
  .n3-topo,
  .n3-estrella,
  .n3-constelacion {
    display: none;
  }
}

/* /nosotros: el cierre llega después de una escena de noche; fondo noche
   propio para no pasar por el gris de la transición de la página. */
.pagina-nosotros .seccion.cierre {
  background: linear-gradient(to bottom, #0C1E34, #010A12 60%);
}

/* La última frase no necesita la pantalla entera: el cierre llega antes. */
.n3-porque {
  padding-bottom: 0;
}

.n3-frase:last-of-type {
  min-height: 72vh;
}

.pagina-nosotros .seccion.cierre {
  padding-top: clamp(48px, 6vw, 88px);
}

/* Celular: el titular de /nosotros ocupa 5 líneas con Inter y 4 con la de
   respaldo; se reserva el alto final para que el pie no salte (CLS). */
@media (max-width: 767px) {
  .n3-titular {
    min-height: calc(5 * 0.95em);
  }
}

/* Cielo estrellado en las escenas de noche (mismo componente que el hero
   y el cierre), detrás del contenido. */
/* (Sin tocar "position": el escenario de cifras es sticky; con relative
   dejaba de quedarse fijo y abría un hueco de 130vh.) */
.n3-cifras .n3-escenario,
.n3-porque {
  isolation: isolate;
}

.n3-cifras .n3-escenario {
  overflow: clip;
}

:is(.n3-cifras, .n3-porque, .cs-banda) .cielo {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
}

/* Sin hueco entre los fundadores y "Por qué": menos aire abajo de
   Quiénes somos y la primera frase arriba, no centrada en una pantalla
   vacía. */
.n3-quienes {
  padding-bottom: clamp(40px, 5vw, 64px);
}

.n3-porque {
  padding-top: clamp(64px, 7vw, 96px);
}

.n3-frase:first-of-type {
  min-height: 0;
  padding-top: clamp(40px, 6vw, 96px);
  padding-bottom: clamp(120px, 18vw, 240px);
}

/* Estrellas de las escenas de noche: un punto más visibles. */
:is(.n3-cifras, .n3-porque) .estrella {
  width: 2.5px;
  height: 2.5px;
  background: #CFE6F7;
}

:is(.n3-cifras, .n3-porque) .estrella.grande {
  width: 3.5px;
  height: 3.5px;
  box-shadow: 0 0 8px rgba(108, 196, 242, 0.7);
}


/* ==================== Fondos con profundidad (Prompt 3D) ====================
   Biblioteca de decoración ampliada: solo SVG y CSS, aria-hidden y sin
   eventos. Vive en márgenes, esquinas y huecos entre bloques; cada pieza
   se desvanece en sus bordes (mask-image) antes de llegar al texto.
   Tres capas con parallax ligado al scroll (lejana lenta, media, cercana
   más rápida), en el compositor; con movimiento reducido o sin soporte,
   quietas. En celular, solo las piezas marcadas como esenciales y sin
   parallax. Opacidad: líneas 10-18 % y manchas 6-12 % en crema; un poco
   más en oscuro. */
.deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
  color: #5A3796;
}

/* La decoración va detrás de todo el contenido sin tocarlo: z-index -1
   dentro de la sección aislada (queda sobre su fondo y bajo el resto; no
   cambia la posición de nadie, así los sticky siguen fijos). */
:is(.seccion, .puente-cierre, .n3-hero, .n3-historia, .n3-quienes):has(.deco) {
  isolation: isolate;
}

/* Textura base sobre la crema: grano de papel (~2 %) y un degradado
   radial muy suave que rompe la planicidad. */
.deco::before,
.deco::after {
  content: '';
  position: absolute;
  inset: 0;
}

.deco::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .14 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.025;
  mix-blend-mode: multiply;
}

.deco::after {
  background: radial-gradient(70% 55% at var(--rx, 80%) var(--ry, 0%), rgba(123, 79, 191, 0.05), transparent 70%),
    radial-gradient(60% 50% at var(--rx2, 10%) var(--ry2, 100%), rgba(74, 179, 232, 0.05), transparent 70%);
}

.deco-el {
  position: absolute;
  left: var(--x, auto);
  right: var(--xr, auto);
  top: var(--y, auto);
  bottom: var(--yb, auto);
  width: var(--w, 240px);
  height: var(--h, auto);
  opacity: var(--o, 0.14);
  -webkit-mask-image: var(--mascara, radial-gradient(closest-side, #000 62%, transparent));
  mask-image: var(--mascara, radial-gradient(closest-side, #000 62%, transparent));
}

.deco-el svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.deco-el :is(path, circle, line, polyline, rect, ellipse) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.deco-el .relleno {
  fill: currentColor;
  stroke: none;
}

.deco-cian { color: #4AB3E8; }
.deco-navy { color: #1B2E44; }

/* Mancha difusa (6-12 %) que deriva lento. */
.deco-mancha {
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--mc, rgba(123, 79, 191, 1)), transparent);
  opacity: var(--o, 0.09);
  -webkit-mask-image: none;
  mask-image: none;
  filter: blur(8px);
}

.deco-mancha.deco-cian { --mc: rgba(74, 179, 232, 1); }

/* Palabra o año gigante en contorno. */
.deco-palabra {
  width: auto;
  font-size: var(--fs, 220px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--trazo, rgba(90, 55, 150, 1));
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent);
  mask-image: linear-gradient(90deg, #000 55%, transparent);
}

/* Marginalia técnica: etiqueta, marcas + y medidas en tipografía chica. */
.deco-nota {
  width: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1B2E44;
  opacity: var(--o, 0.4);
  -webkit-mask-image: none;
  mask-image: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.deco-nota svg {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  vertical-align: -1px;
}

/* Estrellas sueltas con titileo desfasado. */
.deco-estrella {
  width: var(--w, 14px);
  color: #4AB3E8;
  opacity: var(--o, 0.5);
  -webkit-mask-image: none;
  mask-image: none;
}

.deco-estrella path {
  fill: currentColor;
  stroke: none;
}

/* Nodos que se encienden y se unen (rejilla de puntos de Quiénes somos). */
.deco-nodos .nodo {
  fill: currentColor;
  stroke: none;
}

/* ---------- Modo oscuro y escenas de noche ---------- */
:is([data-tema='oscuro'], .tono-noche) .deco {
  color: #6CC4F2;
}

:is([data-tema='oscuro'], .tono-noche) .deco-navy,
:is([data-tema='oscuro'], .tono-noche) .deco-nota {
  color: #F5F3EE;
}

:is([data-tema='oscuro'], .tono-noche) .deco-palabra {
  --trazo: rgba(108, 196, 242, 1);
}

:is([data-tema='oscuro'], .tono-noche) .deco::before {
  mix-blend-mode: screen;
  opacity: 0.03;
}

:is([data-tema='oscuro'], .tono-noche) .deco-el {
  opacity: calc(var(--o, 0.14) * 1.3);
}

/* ---------- Movimiento (solo con soporte y sin movimiento reducido) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .deco-mancha {
    animation: deco-deriva 26s ease-in-out infinite alternate;
  }

  .deco-estrella {
    animation: deco-titila var(--d, 5s) ease-in-out var(--r, 0s) infinite;
  }

  .deco-nodos .nodo {
    animation: deco-nodo 4.8s ease-in-out infinite;
  }

  .deco-nodos .nodo:nth-of-type(2) { animation-delay: -1.2s; }
  .deco-nodos .nodo:nth-of-type(3) { animation-delay: -2.4s; }
  .deco-nodos .nodo:nth-of-type(4) { animation-delay: -3.6s; }

  /* Pausa lo que no está en pantalla (home.js marca .en-pausa). */
  .en-pausa :is(.deco-mancha, .deco-estrella, .deco-nodos .nodo) {
    animation-play-state: paused;
  }
}

@keyframes deco-deriva {
  from { translate: -3% 2%; scale: 1; }
  to { translate: 4% -3%; scale: 1.08; }
}

@keyframes deco-titila {
  0%, 100% { opacity: var(--o, 0.5); scale: 1; }
  50% { opacity: calc(var(--o, 0.5) * 0.35); scale: 0.7; }
}

@keyframes deco-nodo {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    /* Parallax en tres capas: la lejana casi no se mueve, la cercana más.
       (La mancha usa "translate" para derivar; la capa va en "transform".) */
    .capa-lejana,
    .capa-media,
    .capa-cercana {
      animation-name: deco-capa;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .deco-mancha:is(.capa-lejana, .capa-media, .capa-cercana) {
      animation: deco-deriva 26s ease-in-out infinite alternate, deco-capa linear both;
      animation-timeline: auto, view();
      animation-range: normal, cover 0% cover 100%;
    }

    .capa-lejana { --amp: 24px; }
    .capa-media { --amp: 64px; }
    .capa-cercana { --amp: 120px; }

    /* Trazos que se dibujan con el scroll. */
    .deco-dibuja path {
      stroke-dasharray: 1;
      animation: sis-trazo linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 55%;
    }
  }
}

@keyframes deco-capa {
  from { transform: translate3d(0, var(--amp, 40px), 0); }
  to { transform: translate3d(0, calc(-1 * var(--amp, 40px)), 0); }
}


@media print {
  .deco {
    display: none;
  }
}

/* Hero de /nosotros: las líneas topográficas se desvanecen antes de tocar
   el titular (máscara elíptica sobre la columna del texto). */
.n3-topo {
  -webkit-mask-image: radial-gradient(ellipse 48% 46% at 32% 52%, transparent 55%, #000 95%);
  mask-image: radial-gradient(ellipse 48% 46% at 32% 52%, transparent 55%, #000 95%);
  opacity: 0.16;
}

/* LCP: el titular del hero es el elemento más grande; entra solo con
   desplazamiento (sin pasar por opacidad 0, que retrasaba el LCP ~1 s). */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .titular .linea > span {
    animation-name: hero-sube;
  }
}


/* ---------- Hero: constelación de tres pasos (Prompt 3E) ----------
   Reemplaza los círculos numerados: tres estrellas unidas por un filete de
   1px cian → violeta que se dibuja con el scroll; cada estrella se enciende
   (con un destello breve) cuando la línea la alcanza. Debajo, su etiqueta
   en versalitas. El hilo vertical continúa hasta "01 · El problema". */
.hero-constelacion {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(440px, 100%);
  margin: var(--esp-8) auto 0;
  padding: 0;
  list-style: none;
}

/* El filete va de la primera a la última estrella. */
.hero-constelacion::before,
.hero-constelacion::after {
  content: '';
  position: absolute;
  top: 7px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 1px;
}

.hero-constelacion::before {
  background: var(--c-linea);
}

.hero-constelacion::after {
  background: var(--degradado);
  transform-origin: left;
}

.hero-constelacion li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.hc-estrella {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: #6CC4F2;
  filter: drop-shadow(0 0 6px rgba(108, 196, 242, 0.7));
}

.hc-estrella svg {
  width: 100%;
  height: 100%;
}

.hc-etiqueta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-texto2);
}

@media (min-width: 900px) {
  .hero-constelacion {
    margin-left: -18px;
  }
}

/* Hilo hacia la siguiente sección: baja desde el final del hero hasta el
   filete superior de "01 · El problema". */
.hero-hilo {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: 1px;
  height: 96px;
  background: linear-gradient(transparent, #6CC4F2 40%, #7B4FBF);
  transform-origin: top;
}

@media (min-width: 900px) {
  .hero-hilo {
    left: calc(50% - 540px + 55px);
    height: 140px;
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-constelacion::after {
      animation: hc-linea linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 280px;
    }

    .hc-estrella {
      animation: hc-enciende linear both;
      animation-timeline: scroll(root);
    }

    li:nth-child(1) > .hc-estrella { animation-range: 0px 30px; }
    li:nth-child(2) > .hc-estrella { animation-range: 120px 170px; }
    li:nth-child(3) > .hc-estrella { animation-range: 250px 300px; }

    .hero-hilo {
      animation: hc-hilo linear both;
      animation-timeline: scroll(root);
      animation-range: 220px 620px;
    }
  }
}

@keyframes hc-linea {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Apagada → destello breve → encendida. */
@keyframes hc-enciende {
  0% { color: #5F6E83; filter: none; scale: 0.8; }
  60% { color: #F5F3EE; filter: drop-shadow(0 0 10px rgba(108, 196, 242, 1)); scale: 1.5; }
  100% { color: #6CC4F2; filter: drop-shadow(0 0 6px rgba(108, 196, 242, 0.7)); scale: 1; }
}

@keyframes hc-hilo {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* ==================== Paridad móvil (Prompt 3E) ====================
   En el celular nada se quita: se adapta. Las decoraciones de margen se
   reacomodan dentro del ancho (los márgenes de escritorio no existen) como
   piezas de esquina más chicas y más tenues, y la intensidad la fija el
   nivel de calidad (html[data-calidad]). */
@media (max-width: 767px) {
  .deco-el {
    --w-movil: min(var(--w, 240px), 62vw);
    width: var(--w-movil);
    opacity: calc(var(--o, 0.14) * 0.85);
  }

  /* Piezas pensadas para el margen izquierdo / derecho: a la esquina de su
     lado, medio fuera de la pantalla. */
  .deco-el[style*="--x:calc(50% - 540px"] {
    left: calc(var(--w-movil) * -0.55);
  }

  .deco-el[style*="--xr:calc(50% - 540px"] {
    right: calc(var(--w-movil) * -0.55);
  }

  /* Marginalia y reglas: dentro del borde, en el respiro lateral. */
  .deco-nota[style*="50% - 540px"] {
    left: 6px;
    right: auto;
    font-size: 9px;
    writing-mode: vertical-rl;
    rotate: 180deg;
  }

  .deco-regla {
    left: 4px !important;
    width: 18px;
  }

  .deco-palabra {
    font-size: calc(var(--fs-movil, 0.55) * var(--fs, 200px));
  }
}

/* Niveles de calidad: intensidad, no presencia. */
[data-calidad='medio'] .deco-mancha { filter: blur(4px); }
[data-calidad='bajo'] .deco-mancha { filter: none; }
[data-calidad='bajo'] .deco::before { opacity: 0.015; }
[data-calidad='bajo'] :is(.deco-estrella, .deco-nodos .nodo, .deco-mancha) { animation-duration: 12s; }
[data-calidad='bajo'] :is(.vidrio, .n3-visor-foto figcaption) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 767px) {
  .destello-casos {
    display: block;
  }
}

/* ---------- Equivalentes táctiles (Prompt 3E) ----------
   Spotlight de tarjetas: en táctil, halo bajo el dedo mientras toca; sin
   tocar, un brillo recorre la tarjeta al pasar por la pantalla (scroll).
   Botones magnéticos y cursor: en táctil, presión con escala y brillo. */
@media (hover: none), (pointer: coarse) {
  .luz {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(74, 179, 232, 0.16), rgba(123, 79, 191, 0.07) 45%, transparent 70%);
    opacity: 0;
    transition: opacity 0.25s var(--ease);
  }

  .tocada > .luz {
    opacity: 1;
  }

  :is(.boton, .nav-cta, .dock-item, .flotante-wa, .trabajo-enlace, .bento-celda, .n3-ficha):active {
    scale: 0.97;
    filter: brightness(1.08);
    transition: scale 0.12s var(--ease), filter 0.12s var(--ease);
  }
}

@supports (animation-timeline: view()) {
  @media ((hover: none) or (pointer: coarse)) and (prefers-reduced-motion: no-preference) {
    :is(.vidrio, .trabajo, .cobertura, .n3-ficha, .bento-area) {
      background-image: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
      background-size: 250% 100%;
      background-repeat: no-repeat;
      animation: brillo-scroll linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 60%;
    }

    [data-tema='oscuro'] :is(.vidrio, .trabajo, .cobertura, .n3-ficha, .bento-area),
    .tono-noche :is(.vidrio, .trabajo, .cobertura, .n3-ficha, .bento-area) {
      background-image: linear-gradient(105deg, transparent 35%, rgba(108, 196, 242, 0.12) 50%, transparent 65%);
    }
  }
}

@keyframes brillo-scroll {
  from { background-position: 130% 0; }
  to { background-position: -30% 0; }
}

/* ---------- /nosotros en el celular, con sus escenas (Prompt 3E) ----------
   Mismos pines y scrubs que en escritorio, en vertical: el año gigante va
   detrás del hito; la foto, debajo del texto; las cifras en 2×2; en Quiénes
   somos, una sola foto fija arriba que pasa de Camilo a Daniel. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
    .n3-hero .n3-escenario {
      padding-top: calc(var(--nav-alto) + 24px);
    }

    .n3-historia {
      height: 620svh;
    }

    .n3-historia .n3-escenario {
      padding: calc(var(--nav-alto) + 20px) 0 18px;
    }

    .n3-historia-cabecera .titular-seccion {
      font-size: 26px;
    }

    .n3-historia-cabecera .etiqueta-seccion {
      margin-bottom: 8px;
    }

    .n3-hito {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      align-content: center;
      gap: var(--esp-6);
    }

    .n3-anio {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: start;
      justify-self: end;
      font-size: clamp(110px, 34vw, 160px);
      margin-top: -0.2em;
    }

    .n3-hito h3 {
      font-size: clamp(30px, 8.4vw, 40px);
    }

    .n3-hito-texto > p:last-child {
      font-size: 16px;
    }

    .n3-hito .impresion {
      grid-column: 1;
      grid-row: 2;
      width: min(280px, 78vw);
    }

    .n3-hito-foto .n3-hito-texto > p:last-child,
    .n3-hito:first-child .n3-hito-texto > p:last-child {
      display: none;
    }

    .n3-constelacion text {
      font-size: 22px;
    }

    .n3-cifras {
      height: 200svh;
    }

    .n3-cifras-lista {
      margin-top: var(--esp-4);
    }

    .n3-cifra,
    .n3-cifra:nth-child(even) {
      display: block;
      padding: var(--esp-6) var(--esp-3) var(--esp-4);
    }

    .n3-cifra:nth-child(odd) {
      padding-left: 0;
    }

    .n3-cuenta::after {
      font-size: clamp(72px, 22vw, 110px);
    }

    /* Quiénes somos: cada perfil con su foto, que se revela con una
       máscara al entrar (la foto fija tapaba el texto en pantalla chica). */
    .n3-dividida {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .n3-visor {
      display: none;
    }

    .n3-perfil-foto {
      display: block;
      width: min(300px, 78vw);
      animation: n3-mascara linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    .n3-perfil-foto img {
      animation: n3-acerca linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }

    .n3-perfil {
      min-height: 0;
    }

    .n3-frase {
      min-height: 80svh;
    }
  }
}

@keyframes n3-mascara {
  from { clip-path: inset(30% 12% 30% 12% round 24px); }
  to { clip-path: inset(0 0 0 0 round 24px); }
}

@keyframes n3-acerca {
  from { scale: 1.15; }
  to { scale: 1; }
}

/* Hero: etiquetas de la constelación en una sola línea en el celular. */
@media (max-width: 479px) {
  .hc-etiqueta {
    font-size: 10px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}


/* Listas editoriales (Prompt 3E): sin viñetas de punto con degradado;
   filas separadas por un filete de 1px, como en las propuestas. */
:is(.agente-lista, .rec-lista) li {
  padding: 9px 0 9px 0;
  border-top: 1px solid var(--linea);
}

:is(.agente-lista, .rec-lista) li:last-child {
  border-bottom: 1px solid var(--linea);
}

:is(.agente-lista, .rec-lista) li::before {
  content: none;
}

.tono-noche :is(.agente-lista, .rec-lista) li {
  border-color: rgba(255, 255, 255, 0.12);
}

/* Controles del carrusel sobre la noche: vidrio oscuro con la flecha clara
   (antes, círculo blanco con flecha blanca: invisible). */
.tono-noche .carrusel-boton {
  color: #F5F3EE;
  background:
    linear-gradient(#10243B, #10243B) padding-box,
    var(--degradado) border-box;
}

/* Demo de los agentes sobre la noche: la burbuja del agente es clara, su
   texto va en navy (heredaba el claro de la sección: ilegible). */
.tono-noche .d-agente {
  color: #1B2E44;
}

/* ==================== /casos (Prompt 3G) ====================
   Generado desde data/casos.json (tools/casos.py). Cifras del hero con
   conteo atado al scroll, caso estrella en escena fijada, galería en bento
   por tipo de trabajo con videos cortos en marcos y
   páginas de caso. Ritmo: hero noche · estrella papel · webs noche ·
   NFC papel · quién papel · cierre noche. */

@keyframes n3-contar {
      from { --cuenta: 0; }
      to { --cuenta: var(--fin); }
    }

    /* Cierre: el titular sube al llegar. */
    .pagina-nosotros .titular-cierre .linea > span {
      animation: n3-sube linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 90%;
    }

    /* Barrido circular de entrada en las escenas de noche. */
    .n3-cifras,
    .n3-porque {
      animation: n3-barrido linear both;
      animation-timeline: view();
      animation-range: entry-crossing 0% entry-crossing 35%;
    }

    /* Barrido corto: empieza ya abierto y termina pronto, para no dejar
       una pantalla vacía mientras la escena entra. */
    @keyframes n3-barrido {
      from { clip-path: circle(40vmax at 50% 0%); }
      to { clip-path: circle(400vmax at 50% 0%); }
    }

    /* ===== Pines y escenas grandes: en todos los anchos (Prompt 3E) =====
       En el celular se usan svh (la barra del navegador no las mueve) y
       las escenas de dos columnas pasan a vertical (ver "Paridad móvil"). */
    @media (min-width: 0) {

      /* 1 · Hero: pin corto; el titular se llena y después entra el pie. */
      .n3-hero {
        height: 180vh;
        view-timeline: --hero block;
      }

      [data-tema='oscuro'] .n3-titular .p {
        color: var(--n3-tenue-noche);
      }

      .n3-hero .n3-escenario {
        position: sticky;
        top: 0;
        height: 100svh;
        display: grid;
        align-items: center;
        padding: var(--nav-alto) 0 0;
      }

      .n3-titular .p {
        color: var(--n3-tenue);
        animation: n3-llenar linear both;
        animation-timeline: --hero;
        animation-range: contain calc(var(--i) / var(--n) * 55%) contain calc((var(--i) + 1) / var(--n) * 55%);
      }

      .n3-subtitulo,
      .n3-sedes {
        animation: n3-sube linear both;
        animation-timeline: --hero;
      }

      .n3-subtitulo { animation-range: contain 58% contain 72%; }
      .n3-sedes { animation-range: contain 66% contain 80%; }

      /* 2 · Historia: un pin, un hito por pantalla. */
      .n3-historia {
        height: 560vh;
        padding: 0;
        view-timeline: --historia block;
      }

      .n3-historia .n3-escenario {
        position: sticky;
        top: 0;
        height: 100svh;
        overflow: clip;
        display: grid;
        grid-template-rows: auto 1fr auto;
        padding: calc(var(--nav-alto) + 40px) 0 32px;
      }

      .n3-historia-cabecera {
        margin-bottom: 0;
      }

      .n3-historia-cabecera .titular-seccion {
        font-size: clamp(28px, 2.6vw, 40px);
      }

      .n3-hitos {
        display: block;
        position: relative;
      }

      .n3-hitos::before {
        display: none;
      }

      .n3-hito {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
        align-items: center;
        gap: var(--esp-12);
        padding: 0;
        animation: n3-hito linear both;
        animation-timeline: --historia;
        animation-range: contain calc(var(--k) * 19%) contain calc((var(--k) + 1) * 19%);
      }

      .n3-hito:first-child { animation-name: n3-hito-primero; }
      .n3-hito:last-child { animation-name: n3-hito-ultimo; }

      /* Sin solaparse: el hito sale del todo antes de que entre el siguiente. */
      @keyframes n3-hito {
        0% { opacity: 0; translate: 0 48px; visibility: visible; }
        18%, 80% { opacity: 1; translate: 0 0; }
        98%, 100% { opacity: 0; translate: 0 -48px; visibility: hidden; }
      }

      @keyframes n3-hito-primero {
        0%, 80% { opacity: 1; translate: 0 0; visibility: visible; }
        98%, 100% { opacity: 0; translate: 0 -48px; visibility: hidden; }
      }

      @keyframes n3-hito-ultimo {
        0% { opacity: 0; translate: 0 48px; }
        18%, 100% { opacity: 1; translate: 0 0; }
      }

      .n3-hito::before {
        display: none;
      }

      .n3-hito-texto {
        grid-column: 1;
        animation: none;
      }

      .n3-hito h3 {
        font-size: clamp(40px, 4.4vw, 68px);
      }

      /* El año gigante en contorno, al lado opuesto del texto. */
      .n3-anio {
        position: static;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        font-size: clamp(160px, 19vw, 280px);
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: rgba(90, 55, 150, 0.12);
      }

      /* La foto: entra pequeña e inclinada, crece y se revela. */
      .n3-hito .impresion {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        width: min(420px, 100%);
        margin: 0;
        animation: n3-polaroid linear both;
        animation-timeline: --historia;
        animation-range: contain 0% contain 12%;
      }

      .n3-hito .impresion-foto img {
        animation-timeline: --historia;
        animation-range: contain 1% contain 14%;
      }

      @keyframes n3-polaroid {
        from { scale: 0.55; rotate: -12deg; translate: 18% 18%; }
        to { scale: 1; rotate: 0deg; translate: 0 0; }
      }

      /* La constelación une los hitos y se dibuja con el scroll. */
      .n3-constelacion {
        display: block;
        width: min(1280px, calc(100% - 48px));
        height: auto;
        margin: 0 auto;
        overflow: visible;
      }

      .n3-c-base,
      .n3-c-trazo {
        fill: none;
        stroke-width: 1.5;
        vector-effect: non-scaling-stroke;
      }

      .n3-c-base { stroke: rgba(90, 55, 150, 0.16); }

      .n3-c-trazo {
        stroke: #7B4FBF;
        stroke-dasharray: 1;
        animation: sis-trazo linear both;
        animation-timeline: --historia;
        animation-range: contain 0% contain 80%;
      }

      .n3-c-estrella circle {
        fill: #C4B79E;
        animation: n3-enciende linear both;
        animation-timeline: --historia;
        animation-range: contain calc(var(--k) * 20%) contain calc(var(--k) * 20% + 3%);
      }

      .n3-c-estrella text {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-anchor: middle;
        fill: #566579;
      }

      @keyframes n3-enciende {
        to { fill: #4AB3E8; r: 7px; }
      }

      /* 3 · Cifras: pin; el conteo va con el scroll del pin. */
      .n3-cifras {
        height: 230vh;
        padding: 0;
        background: none;
        view-timeline: --cifras block;
        animation-range: entry-crossing 0% entry-crossing 35%;
      }

      .n3-cifras .n3-escenario {
        position: sticky;
        top: 0;
        height: 100svh;
        display: grid;
        align-items: center;
        padding-top: var(--nav-alto);
        background: linear-gradient(to bottom, #060F1C, #0C1E34);
        animation: n3-cierra linear both;
        animation-timeline: --cifras;
        animation-range: exit-crossing 70% exit-crossing 100%;
      }

      @keyframes n3-cierra {
        from { clip-path: circle(160vmax at 50% 0%); }
        to { clip-path: circle(70vmax at 50% 0%); }
      }

      .n3-cuenta {
        animation-timeline: --cifras;
        animation-range: contain calc(var(--k-cifra, 0) * 6%) contain calc(48% + var(--k-cifra, 0) * 6%);
      }

      .n3-cifra:nth-child(2) .n3-cuenta { --k-cifra: 1; }
      .n3-cifra:nth-child(3) .n3-cuenta { --k-cifra: 2; }
      .n3-cifra:nth-child(4) .n3-cuenta { --k-cifra: 3; }

      .n3-cuenta::after {
        font-size: clamp(140px, 12.5vw, 220px);
      }

      .n3-cifra {
        animation: n3-sube linear both;
        animation-timeline: --cifras;
        /* Aparecen mientras la escena entra (no queda una pantalla vacía). */
        animation-range: entry calc(55% + var(--k) * 8%) entry calc(85% + var(--k) * 8%);
      }

      /* 4 · Quiénes somos: pantalla dividida con la foto fija. */
      .n3-quienes {
        timeline-scope: --daniel;
      }

      .n3-dividida {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--esp-14);
        align-items: start;
      }

      .n3-visor {
        display: block;
        position: sticky;
        top: calc(var(--nav-alto) + 32px);
        aspect-ratio: 4 / 5;
        max-height: calc(100svh - var(--nav-alto) - 64px);
        border-radius: var(--radio-7);
        overflow: clip;
        box-shadow: var(--sombra-2);
      }

      .n3-visor-foto {
        position: absolute;
        inset: 0;
        margin: 0;
      }

      .n3-visor-foto figcaption {
        position: absolute;
        left: 16px;
        bottom: 16px;
        padding: 8px 14px;
        border-radius: var(--radio-pill);
        background: rgba(6, 15, 28, 0.72);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        font-size: 13px;
        font-weight: 600;
        color: #F5F3EE;
      }

      .n3-visor-daniel {
        animation: n3-funde linear both;
        animation-timeline: --daniel;
        animation-range: entry 40% entry 100%;
      }

      /* Los nombres no se cruzan: uno sale antes de que entre el otro. */
      .n3-visor-camilo figcaption {
        animation: n3-sale linear both;
        animation-timeline: --daniel;
        animation-range: entry 35% entry 60%;
      }

      .n3-visor-daniel figcaption {
        animation: n3-entra linear both;
        animation-timeline: --daniel;
        animation-range: entry 70% entry 100%;
      }

      @keyframes n3-sale { to { opacity: 0; translate: 0 8px; } }
      @keyframes n3-entra { from { opacity: 0; translate: 0 8px; } }

      @keyframes n3-funde {
        from { opacity: 0; scale: 1.04; }
        to { opacity: 1; scale: 1; }
      }

      #daniel {
        view-timeline: --daniel block;
      }

      .n3-perfil-foto {
        display: none;
      }

      .n3-perfiles {
        gap: clamp(72px, 9vw, 120px);
        padding-bottom: 0;
      }

      .n3-perfil {
        min-height: calc(100svh - var(--nav-alto) - 64px);
      }

      .n3-perfil:last-child {
        min-height: 0;
      }

      /* 5 · Por qué: cada frase ocupa la pantalla. */
      .n3-frase {
        min-height: 100svh;
      }
    }
  }
}

/* Sin animaciones ligadas al scroll o con movimiento reducido: todo
   visible y en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .n3-estrella {
    transition: none;
  }
}

@media print {
  .n3-topo,
  .n3-estrella,
  .n3-constelacion {
    display: none;
  }
}

/* /nosotros: el cierre llega después de una escena de noche; fondo noche
   propio para no pasar por el gris de la transición de la página. */
.pagina-nosotros .seccion.cierre {
  background: linear-gradient(to bottom, #0C1E34, #010A12 60%);
}

/* La última frase no necesita la pantalla entera: el cierre llega antes. */
.n3-porque {
  padding-bottom: 0;
}

.n3-frase:last-of-type {
  min-height: 72vh;
}

.pagina-nosotros .seccion.cierre {
  padding-top: clamp(48px, 6vw, 88px);
}

/* Celular: el titular de /nosotros ocupa 5 líneas con Inter y 4 con la de
   respaldo; se reserva el alto final para que el pie no salte (CLS). */
@media (max-width: 767px) {
  .n3-titular {
    min-height: calc(5 * 0.95em);
  }
}

/* Cielo estrellado en las escenas de noche (mismo componente que el hero
   y el cierre), detrás del contenido. */
/* (Sin tocar "position": el escenario de cifras es sticky; con relative
   dejaba de quedarse fijo y abría un hueco de 130vh.) */
.n3-cifras .n3-escenario,
.n3-porque {
  isolation: isolate;
}

.n3-cifras .n3-escenario {
  overflow: clip;
}

:is(.n3-cifras, .n3-porque, .cs-banda) .cielo {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
}

/* Sin hueco entre los fundadores y "Por qué": menos aire abajo de
   Quiénes somos y la primera frase arriba, no centrada en una pantalla
   vacía. */
.n3-quienes {
  padding-bottom: clamp(40px, 5vw, 64px);
}

.n3-porque {
  padding-top: clamp(64px, 7vw, 96px);
}

.n3-frase:first-of-type {
  min-height: 0;
  padding-top: clamp(40px, 6vw, 96px);
  padding-bottom: clamp(120px, 18vw, 240px);
}

/* Estrellas de las escenas de noche: un punto más visibles. */
:is(.n3-cifras, .n3-porque) .estrella {
  width: 2.5px;
  height: 2.5px;
  background: #CFE6F7;
}

:is(.n3-cifras, .n3-porque) .estrella.grande {
  width: 3.5px;
  height: 3.5px;
  box-shadow: 0 0 8px rgba(108, 196, 242, 0.7);
}


/* ==================== Fondos con profundidad (Prompt 3D) ====================
   Biblioteca de decoración ampliada: solo SVG y CSS, aria-hidden y sin
   eventos. Vive en márgenes, esquinas y huecos entre bloques; cada pieza
   se desvanece en sus bordes (mask-image) antes de llegar al texto.
   Tres capas con parallax ligado al scroll (lejana lenta, media, cercana
   más rápida), en el compositor; con movimiento reducido o sin soporte,
   quietas. En celular, solo las piezas marcadas como esenciales y sin
   parallax. Opacidad: líneas 10-18 % y manchas 6-12 % en crema; un poco
   más en oscuro. */
.deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
  color: #5A3796;
}

/* La decoración va detrás de todo el contenido sin tocarlo: z-index -1
   dentro de la sección aislada (queda sobre su fondo y bajo el resto; no
   cambia la posición de nadie, así los sticky siguen fijos). */
:is(.seccion, .puente-cierre, .n3-hero, .n3-historia, .n3-quienes):has(.deco) {
  isolation: isolate;
}

/* Textura base sobre la crema: grano de papel (~2 %) y un degradado
   radial muy suave que rompe la planicidad. */
.deco::before,
.deco::after {
  content: '';
  position: absolute;
  inset: 0;
}

.deco::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .14 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.025;
  mix-blend-mode: multiply;
}

.deco::after {
  background: radial-gradient(70% 55% at var(--rx, 80%) var(--ry, 0%), rgba(123, 79, 191, 0.05), transparent 70%),
    radial-gradient(60% 50% at var(--rx2, 10%) var(--ry2, 100%), rgba(74, 179, 232, 0.05), transparent 70%);
}

.deco-el {
  position: absolute;
  left: var(--x, auto);
  right: var(--xr, auto);
  top: var(--y, auto);
  bottom: var(--yb, auto);
  width: var(--w, 240px);
  height: var(--h, auto);
  opacity: var(--o, 0.14);
  -webkit-mask-image: var(--mascara, radial-gradient(closest-side, #000 62%, transparent));
  mask-image: var(--mascara, radial-gradient(closest-side, #000 62%, transparent));
}

.deco-el svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.deco-el :is(path, circle, line, polyline, rect, ellipse) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.deco-el .relleno {
  fill: currentColor;
  stroke: none;
}

.deco-cian { color: #4AB3E8; }
.deco-navy { color: #1B2E44; }

/* Mancha difusa (6-12 %) que deriva lento. */
.deco-mancha {
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--mc, rgba(123, 79, 191, 1)), transparent);
  opacity: var(--o, 0.09);
  -webkit-mask-image: none;
  mask-image: none;
  filter: blur(8px);
}

.deco-mancha.deco-cian { --mc: rgba(74, 179, 232, 1); }

/* Palabra o año gigante en contorno. */
.deco-palabra {
  width: auto;
  font-size: var(--fs, 220px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--trazo, rgba(90, 55, 150, 1));
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent);
  mask-image: linear-gradient(90deg, #000 55%, transparent);
}

/* Marginalia técnica: etiqueta, marcas + y medidas en tipografía chica. */
.deco-nota {
  width: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1B2E44;
  opacity: var(--o, 0.4);
  -webkit-mask-image: none;
  mask-image: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.deco-nota svg {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  vertical-align: -1px;
}

/* Estrellas sueltas con titileo desfasado. */
.deco-estrella {
  width: var(--w, 14px);
  color: #4AB3E8;
  opacity: var(--o, 0.5);
  -webkit-mask-image: none;
  mask-image: none;
}

.deco-estrella path {
  fill: currentColor;
  stroke: none;
}

/* Nodos que se encienden y se unen (rejilla de puntos de Quiénes somos). */
.deco-nodos .nodo {
  fill: currentColor;
  stroke: none;
}

/* ---------- Modo oscuro y escenas de noche ---------- */
:is([data-tema='oscuro'], .tono-noche) .deco {
  color: #6CC4F2;
}

:is([data-tema='oscuro'], .tono-noche) .deco-navy,
:is([data-tema='oscuro'], .tono-noche) .deco-nota {
  color: #F5F3EE;
}

:is([data-tema='oscuro'], .tono-noche) .deco-palabra {
  --trazo: rgba(108, 196, 242, 1);
}

:is([data-tema='oscuro'], .tono-noche) .deco::before {
  mix-blend-mode: screen;
  opacity: 0.03;
}

:is([data-tema='oscuro'], .tono-noche) .deco-el {
  opacity: calc(var(--o, 0.14) * 1.3);
}

/* ---------- Movimiento (solo con soporte y sin movimiento reducido) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .deco-mancha {
    animation: deco-deriva 26s ease-in-out infinite alternate;
  }

  .deco-estrella {
    animation: deco-titila var(--d, 5s) ease-in-out var(--r, 0s) infinite;
  }

  .deco-nodos .nodo {
    animation: deco-nodo 4.8s ease-in-out infinite;
  }

  .deco-nodos .nodo:nth-of-type(2) { animation-delay: -1.2s; }
  .deco-nodos .nodo:nth-of-type(3) { animation-delay: -2.4s; }
  .deco-nodos .nodo:nth-of-type(4) { animation-delay: -3.6s; }

  /* Pausa lo que no está en pantalla (home.js marca .en-pausa). */
  .en-pausa :is(.deco-mancha, .deco-estrella, .deco-nodos .nodo) {
    animation-play-state: paused;
  }
}

@keyframes deco-deriva {
  from { translate: -3% 2%; scale: 1; }
  to { translate: 4% -3%; scale: 1.08; }
}

@keyframes deco-titila {
  0%, 100% { opacity: var(--o, 0.5); scale: 1; }
  50% { opacity: calc(var(--o, 0.5) * 0.35); scale: 0.7; }
}

@keyframes deco-nodo {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    /* Parallax en tres capas: la lejana casi no se mueve, la cercana más.
       (La mancha usa "translate" para derivar; la capa va en "transform".) */
    .capa-lejana,
    .capa-media,
    .capa-cercana {
      animation-name: deco-capa;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .deco-mancha:is(.capa-lejana, .capa-media, .capa-cercana) {
      animation: deco-deriva 26s ease-in-out infinite alternate, deco-capa linear both;
      animation-timeline: auto, view();
      animation-range: normal, cover 0% cover 100%;
    }

    .capa-lejana { --amp: 24px; }
    .capa-media { --amp: 64px; }
    .capa-cercana { --amp: 120px; }

    /* Trazos que se dibujan con el scroll. */
    .deco-dibuja path {
      stroke-dasharray: 1;
      animation: sis-trazo linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 55%;
    }
  }
}

@keyframes deco-capa {
  from { transform: translate3d(0, var(--amp, 40px), 0); }
  to { transform: translate3d(0, calc(-1 * var(--amp, 40px)), 0); }
}


@media print {
  .deco {
    display: none;
  }
}

/* Hero de /nosotros: las líneas topográficas se desvanecen antes de tocar
   el titular (máscara elíptica sobre la columna del texto). */
.n3-topo {
  -webkit-mask-image: radial-gradient(ellipse 48% 46% at 32% 52%, transparent 55%, #000 95%);
  mask-image: radial-gradient(ellipse 48% 46% at 32% 52%, transparent 55%, #000 95%);
  opacity: 0.16;
}

/* LCP: el titular del hero es el elemento más grande; entra solo con
   desplazamiento (sin pasar por opacidad 0, que retrasaba el LCP ~1 s). */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .titular .linea > span {
    animation-name: hero-sube;
  }
}


/* ---------- Hero: constelación de tres pasos (Prompt 3E) ----------
   Reemplaza los círculos numerados: tres estrellas unidas por un filete de
   1px cian → violeta que se dibuja con el scroll; cada estrella se enciende
   (con un destello breve) cuando la línea la alcanza. Debajo, su etiqueta
   en versalitas. El hilo vertical continúa hasta "01 · El problema". */
.hero-constelacion {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(440px, 100%);
  margin: var(--esp-8) auto 0;
  padding: 0;
  list-style: none;
}

/* El filete va de la primera a la última estrella. */
.hero-constelacion::before,
.hero-constelacion::after {
  content: '';
  position: absolute;
  top: 7px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 1px;
}

.hero-constelacion::before {
  background: var(--c-linea);
}

.hero-constelacion::after {
  background: var(--degradado);
  transform-origin: left;
}

.hero-constelacion li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.hc-estrella {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: #6CC4F2;
  filter: drop-shadow(0 0 6px rgba(108, 196, 242, 0.7));
}

.hc-estrella svg {
  width: 100%;
  height: 100%;
}

.hc-etiqueta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-texto2);
}

@media (min-width: 900px) {
  .hero-constelacion {
    margin-left: -18px;
  }
}

/* Hilo hacia la siguiente sección: baja desde el final del hero hasta el
   filete superior de "01 · El problema". */
.hero-hilo {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: 1px;
  height: 96px;
  background: linear-gradient(transparent, #6CC4F2 40%, #7B4FBF);
  transform-origin: top;
}

@media (min-width: 900px) {
  .hero-hilo {
    left: calc(50% - 540px + 55px);
    height: 140px;
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-constelacion::after {
      animation: hc-linea linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 280px;
    }

    .hc-estrella {
      animation: hc-enciende linear both;
      animation-timeline: scroll(root);
    }

    li:nth-child(1) > .hc-estrella { animation-range: 0px 30px; }
    li:nth-child(2) > .hc-estrella { animation-range: 120px 170px; }
    li:nth-child(3) > .hc-estrella { animation-range: 250px 300px; }

    .hero-hilo {
      animation: hc-hilo linear both;
      animation-timeline: scroll(root);
      animation-range: 220px 620px;
    }
  }
}

@keyframes hc-linea {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Apagada → destello breve → encendida. */
@keyframes hc-enciende {
  0% { color: #5F6E83; filter: none; scale: 0.8; }
  60% { color: #F5F3EE; filter: drop-shadow(0 0 10px rgba(108, 196, 242, 1)); scale: 1.5; }
  100% { color: #6CC4F2; filter: drop-shadow(0 0 6px rgba(108, 196, 242, 0.7)); scale: 1; }
}

@keyframes hc-hilo {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* ==================== Paridad móvil (Prompt 3E) ====================
   En el celular nada se quita: se adapta. Las decoraciones de margen se
   reacomodan dentro del ancho (los márgenes de escritorio no existen) como
   piezas de esquina más chicas y más tenues, y la intensidad la fija el
   nivel de calidad (html[data-calidad]). */
@media (max-width: 767px) {
  .deco-el {
    --w-movil: min(var(--w, 240px), 62vw);
    width: var(--w-movil);
    opacity: calc(var(--o, 0.14) * 0.85);
  }

  /* Piezas pensadas para el margen izquierdo / derecho: a la esquina de su
     lado, medio fuera de la pantalla. */
  .deco-el[style*="--x:calc(50% - 540px"] {
    left: calc(var(--w-movil) * -0.55);
  }

  .deco-el[style*="--xr:calc(50% - 540px"] {
    right: calc(var(--w-movil) * -0.55);
  }

  /* Marginalia y reglas: dentro del borde, en el respiro lateral. */
  .deco-nota[style*="50% - 540px"] {
    left: 6px;
    right: auto;
    font-size: 9px;
    writing-mode: vertical-rl;
    rotate: 180deg;
  }

  .deco-regla {
    left: 4px !important;
    width: 18px;
  }

  .deco-palabra {
    font-size: calc(var(--fs-movil, 0.55) * var(--fs, 200px));
  }
}

/* Niveles de calidad: intensidad, no presencia. */
[data-calidad='medio'] .deco-mancha { filter: blur(4px); }
[data-calidad='bajo'] .deco-mancha { filter: none; }
[data-calidad='bajo'] .deco::before { opacity: 0.015; }
[data-calidad='bajo'] :is(.deco-estrella, .deco-nodos .nodo, .deco-mancha) { animation-duration: 12s; }
[data-calidad='bajo'] :is(.vidrio, .n3-visor-foto figcaption) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 767px) {
  .destello-casos {
    display: block;
  }
}

/* ---------- Equivalentes táctiles (Prompt 3E) ----------
   Spotlight de tarjetas: en táctil, halo bajo el dedo mientras toca; sin
   tocar, un brillo recorre la tarjeta al pasar por la pantalla (scroll).
   Botones magnéticos y cursor: en táctil, presión con escala y brillo. */
@media (hover: none), (pointer: coarse) {
  .luz {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(74, 179, 232, 0.16), rgba(123, 79, 191, 0.07) 45%, transparent 70%);
    opacity: 0;
    transition: opacity 0.25s var(--ease);
  }

  .tocada > .luz {
    opacity: 1;
  }

  :is(.boton, .nav-cta, .dock-item, .flotante-wa, .trabajo-enlace, .bento-celda, .n3-ficha):active {
    scale: 0.97;
    filter: brightness(1.08);
    transition: scale 0.12s var(--ease), filter 0.12s var(--ease);
  }
}

@supports (animation-timeline: view()) {
  @media ((hover: none) or (pointer: coarse)) and (prefers-reduced-motion: no-preference) {
    :is(.vidrio, .trabajo, .cobertura, .n3-ficha, .bento-area) {
      background-image: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
      background-size: 250% 100%;
      background-repeat: no-repeat;
      animation: brillo-scroll linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 60%;
    }

    [data-tema='oscuro'] :is(.vidrio, .trabajo, .cobertura, .n3-ficha, .bento-area),
    .tono-noche :is(.vidrio, .trabajo, .cobertura, .n3-ficha, .bento-area) {
      background-image: linear-gradient(105deg, transparent 35%, rgba(108, 196, 242, 0.12) 50%, transparent 65%);
    }
  }
}

@keyframes brillo-scroll {
  from { background-position: 130% 0; }
  to { background-position: -30% 0; }
}

/* ---------- /nosotros en el celular, con sus escenas (Prompt 3E) ----------
   Mismos pines y scrubs que en escritorio, en vertical: el año gigante va
   detrás del hito; la foto, debajo del texto; las cifras en 2×2; en Quiénes
   somos, una sola foto fija arriba que pasa de Camilo a Daniel. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
    .n3-hero .n3-escenario {
      padding-top: calc(var(--nav-alto) + 24px);
    }

    .n3-historia {
      height: 620svh;
    }

    .n3-historia .n3-escenario {
      padding: calc(var(--nav-alto) + 20px) 0 18px;
    }

    .n3-historia-cabecera .titular-seccion {
      font-size: 26px;
    }

    .n3-historia-cabecera .etiqueta-seccion {
      margin-bottom: 8px;
    }

    .n3-hito {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      align-content: center;
      gap: var(--esp-6);
    }

    .n3-anio {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: start;
      justify-self: end;
      font-size: clamp(110px, 34vw, 160px);
      margin-top: -0.2em;
    }

    .n3-hito h3 {
      font-size: clamp(30px, 8.4vw, 40px);
    }

    .n3-hito-texto > p:last-child {
      font-size: 16px;
    }

    .n3-hito .impresion {
      grid-column: 1;
      grid-row: 2;
      width: min(280px, 78vw);
    }

    .n3-hito-foto .n3-hito-texto > p:last-child,
    .n3-hito:first-child .n3-hito-texto > p:last-child {
      display: none;
    }

    .n3-constelacion text {
      font-size: 22px;
    }

    .n3-cifras {
      height: 200svh;
    }

    .n3-cifras-lista {
      margin-top: var(--esp-4);
    }

    .n3-cifra,
    .n3-cifra:nth-child(even) {
      display: block;
      padding: var(--esp-6) var(--esp-3) var(--esp-4);
    }

    .n3-cifra:nth-child(odd) {
      padding-left: 0;
    }

    .n3-cuenta::after {
      font-size: clamp(72px, 22vw, 110px);
    }

    /* Quiénes somos: cada perfil con su foto, que se revela con una
       máscara al entrar (la foto fija tapaba el texto en pantalla chica). */
    .n3-dividida {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .n3-visor {
      display: none;
    }

    .n3-perfil-foto {
      display: block;
      width: min(300px, 78vw);
      animation: n3-mascara linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    .n3-perfil-foto img {
      animation: n3-acerca linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }

    .n3-perfil {
      min-height: 0;
    }

    .n3-frase {
      min-height: 80svh;
    }
  }
}

@keyframes n3-mascara {
  from { clip-path: inset(30% 12% 30% 12% round 24px); }
  to { clip-path: inset(0 0 0 0 round 24px); }
}

@keyframes n3-acerca {
  from { scale: 1.15; }
  to { scale: 1; }
}

/* Hero: etiquetas de la constelación en una sola línea en el celular. */
@media (max-width: 479px) {
  .hc-etiqueta {
    font-size: 10px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}


/* Listas editoriales (Prompt 3E): sin viñetas de punto con degradado;
   filas separadas por un filete de 1px, como en las propuestas. */
:is(.agente-lista, .rec-lista) li {
  padding: 9px 0 9px 0;
  border-top: 1px solid var(--linea);
}

:is(.agente-lista, .rec-lista) li:last-child {
  border-bottom: 1px solid var(--linea);
}

:is(.agente-lista, .rec-lista) li::before {
  content: none;
}

.tono-noche :is(.agente-lista, .rec-lista) li {
  border-color: rgba(255, 255, 255, 0.12);
}

/* Controles del carrusel sobre la noche: vidrio oscuro con la flecha clara
   (antes, círculo blanco con flecha blanca: invisible). */
.tono-noche .carrusel-boton {
  color: #F5F3EE;
  background:
    linear-gradient(#10243B, #10243B) padding-box,
    var(--degradado) border-box;
}

/* Demo de los agentes sobre la noche: la burbuja del agente es clara, su
   texto va en navy (heredaba el claro de la sección: ilegible). */
.tono-noche .d-agente {
  color: #1B2E44;
}

/* ==================== /casos (Prompt 3G) ====================
   Generado desde data/casos.json (tools/casos.py). Cifras del hero con
   conteo atado al scroll, caso estrella en escena fijada, galería en bento
   por tipo de trabajo con videos cortos en marcos y
   páginas de caso. Ritmo: hero noche · estrella papel · webs noche ·
   NFC papel · quién papel · cierre noche. */

/* ---------- Cifras del hero ---------- */
.cs-cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-4);
  max-width: 640px;
  margin-top: var(--esp-10);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--c-linea);
}

.cs-cifras dt {
  font-size: clamp(44px, 7vw, 72px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-texto);
  font-variant-numeric: tabular-nums;
}

.cs-cifras dd {
  margin-top: var(--esp-2);
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-texto2);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* La línea de tiempo es la de la lista (bloque con alto real), no la
       del número (inline de tamaño 0). */
    .cs-cifras {
      view-timeline: --cs-cifras block;
    }

    .cs-cuenta {
      font-size: 0;
      animation: n3-contar linear both;
      animation-timeline: --cs-cifras;
      animation-range: entry 0% entry 100%;
    }

    .cs-cuenta::after {
      content: counter(cs) / '';
      counter-reset: cs var(--cuenta);
      font-size: clamp(44px, 7vw, 72px);
    }
  }
}

@keyframes n3-contar {
  from { --cuenta: 0; }
  to { --cuenta: var(--fin); }
}

/* ---------- Marcos ---------- */
.cs-marco {
  position: relative;
  overflow: hidden;
  background: #E9E6DF;
  box-shadow: var(--sombra-2);
}

.cs-navegador {
  border-radius: var(--radio-4);
  border: 1px solid rgba(27, 46, 68, 0.1);
}

.cs-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: #F4F1EA;
  border-bottom: 1px solid rgba(27, 46, 68, 0.08);
}

.cs-barra i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D9D3C6;
}

.cs-dominio {
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #566579;
}

.cs-pantalla {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #F4F1EA;
}

.cs-pantalla :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.cs-telefono {
  width: min(240px, 100%);
  aspect-ratio: 9 / 19;
  margin: 0 auto;
  border-radius: 36px;
  border: 6px solid #1B2E44;
  background: #0C1E34;
  box-shadow: 0 2px 4px rgba(6, 15, 28, 0.2), 0 30px 60px -28px rgba(6, 15, 28, 0.55);
}

.cs-telefono img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-isla {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 1;
  width: 64px;
  height: 18px;
  margin-left: -32px;
  border-radius: 12px;
  background: #060F1C;
}

.cs-tableta {
  border-radius: var(--radio-5);
  border: 8px solid #1B2E44;
}

.cs-tableta img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Caso estrella (escena fijada) ---------- */
.cs-estrella {
  position: relative;
  background: #F9F6EF;
  color: #1B2E44;
  padding: clamp(96px, 10vw, 140px) 0;
}

.cs-estrella-grilla {
  display: grid;
  gap: var(--esp-10);
  align-items: center;
}

.cs-estrella .titular-seccion {
  font-size: clamp(40px, 6vw, 84px);
}

.cs-lugar {
  margin-top: var(--esp-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5A3796;
}

.cs-paso {
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px solid #C4B79E;
}

.cs-paso-nombre {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5A3796;
}

.cs-paso > p:not(.cs-paso-nombre),
.cs-paso li {
  max-width: 48ch;
  margin-top: var(--esp-2);
  font-size: 16px;
  line-height: 1.6;
  color: #566579;
}

.cs-paso ul {
  display: grid;
  gap: 2px;
}

.cs-ver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: var(--esp-6);
  font-size: 15px;
  font-weight: 600;
  color: #5A3796;
  text-decoration: underline;
  text-decoration-color: rgba(90, 55, 150, 0.35);
  text-underline-offset: 4px;
}

.cs-estrella-equipos {
  position: relative;
  padding-bottom: var(--esp-10);
}

.cs-recorre .cs-pantalla {
  aspect-ratio: 16 / 10;
}

.cs-recorre img {
  height: auto;
  object-fit: initial;
}

.cs-estrella-equipos .cs-telefono {
  position: absolute;
  right: -2%;
  bottom: -6%;
  width: min(180px, 34%);
  z-index: 2;
}

@media (min-width: 900px) {
  .cs-estrella-grilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--esp-14);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cs-estrella {
      height: 300svh;
      padding: 0;
      view-timeline: --estrella block;
    }

    .cs-estrella .cs-escenario {
      position: sticky;
      top: 0;
      height: 100svh;
      display: grid;
      align-items: center;
      padding-top: var(--nav-alto);
      overflow: clip;
    }

    /* El sitio se recorre dentro del marco con el scroll. */
    .cs-recorre img {
      animation: cs-recorre linear both;
      animation-timeline: --estrella;
      animation-range: contain 0% contain 60%;
    }

    /* Después entra el teléfono con las tarjetas NFC. */
    .cs-estrella-equipos .cs-telefono {
      animation: cs-telefono linear both;
      animation-timeline: --estrella;
      animation-range: contain 52% contain 78%;
    }

    .cs-paso {
      animation: n3-sube linear both;
      animation-timeline: --estrella;
      animation-range: contain calc(var(--k) * 18%) contain calc(var(--k) * 18% + 14%);
    }
  }
}

@keyframes cs-recorre {
  from { translate: 0 0; }
  to { translate: 0 -82%; }
}

@keyframes cs-telefono {
  from { opacity: 0; translate: 30% 30%; rotate: 10deg; }
  to { opacity: 1; translate: 0 0; rotate: -4deg; }
}

@keyframes n3-sube {
  from { opacity: 0; translate: 0 28px; }
}

/* Celular: misma escena en vertical (equipos arriba, texto abajo). */
@media (max-width: 899px) {
  .cs-estrella-equipos {
    order: -1;
    width: min(420px, 100%);
    margin: 0 auto;
  }

  .cs-estrella .titular-seccion {
    font-size: 36px;
  }

  .cs-paso > p:not(.cs-paso-nombre),
  .cs-paso li {
    font-size: 14.5px;
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .cs-estrella {
        height: 340svh;
      }

      .cs-estrella .cs-escenario {
        align-items: start;
        padding-top: calc(var(--nav-alto) + 20px);
      }

      .cs-estrella-grilla {
        gap: var(--esp-6);
      }

      .cs-estrella .etiqueta-seccion,
      .cs-estrella .cs-ver {
        display: none;
      }

      .cs-paso {
        margin-top: var(--esp-3);
        padding-top: var(--esp-2);
      }
    }
  }
}

/* ---------- Bandas de la galería (bento) ---------- */
.cs-banda .cs-cabecera .titular-seccion {
  max-width: 22ch;
}

.cs-bento {
  display: grid;
  gap: var(--esp-6);
  margin-top: var(--esp-8);
}

.cs-pieza {
  display: grid;
  align-content: start;
  gap: var(--esp-4);
}

.cs-abrir {
  display: block;
  border-radius: var(--radio-5);
  transition: translate var(--dur) var(--ease);
}

.cs-abrir:focus-visible {
  outline: 2px solid #6CC4F2;
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .cs-abrir:hover {
    translate: 0 -4px;
  }
}

.cs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cs-chips li {
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.cs-meta .cs-lugar {
  margin-top: var(--esp-2);
  font-size: 12px;
}

.cs-titulo {
  margin-top: var(--esp-1);
  max-width: 40ch;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}

.cs-cliente {
  font-weight: 700;
}

.cs-meta .cs-ver,
.cs-meta .trabajo-enlace {
  margin: var(--esp-1) 0 0;
}

.tono-noche .cs-chips li { color: #6CC4F2; }
.tono-noche .cs-lugar { color: #A6B7C9; }
.tono-noche .cs-titulo { color: #F5F3EE; }
.tono-noche .cs-ver { color: #6CC4F2; text-decoration-color: rgba(108, 196, 242, 0.4); }
.tono-papel .cs-chips li { color: #5A3796; }
.tono-papel .cs-titulo { color: #1B2E44; }
.tono-noche .cs-navegador { border-color: rgba(255, 255, 255, 0.1); }

.cs-banda .metrica {
  margin-bottom: var(--esp-4);
}

@media (min-width: 900px) {
  .cs-bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--esp-10) var(--esp-6);
  }

  .cs-xl { grid-column: span 4; }
  .cs-l { grid-column: span 3; }
  .cs-m { grid-column: span 4; }
  .cs-s { grid-column: span 2; }
  .cs-telefono-pieza.cs-s { grid-column: span 2; }
  .cs-ancho-pieza { align-self: center; }
}

@media (min-width: 600px) and (max-width: 899px) {
  .cs-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cs-xl,
  .cs-ancho-pieza {
    grid-column: 1 / -1;
  }
}

/* Revelado de cada pieza al entrar. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cs-pieza {
      animation: n3-sube linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 60%;
    }

    /* El barrido termina mientras la sección entra: nunca recorta
       contenido ya en pantalla (ni sus clics). */
    .cs-banda.tono-noche {
      animation: cs-barrido linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}

@keyframes cs-barrido {
  from { clip-path: circle(40vmax at 50% 0%); }
  to { clip-path: circle(400vmax at 50% 0%); }
}

/* ---------- Testimonios (solo con citas reales) ---------- */
.cs-citas {
  display: grid;
  gap: var(--esp-10);
  margin-top: var(--esp-8);
}

.cs-cita blockquote p {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.cs-cita figcaption {
  margin-top: var(--esp-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cs-entregados {
  font-weight: 600;
  color: #6CC4F2 !important;
}

/* ---------- Página de caso ---------- */
.cp-hero {
  padding-bottom: var(--esp-14);
}

.cp-migas {
  display: flex;
  gap: var(--esp-2);
  margin-bottom: var(--esp-6);
  font-size: 13px;
  color: var(--c-texto2);
}

.cp-migas a {
  color: var(--c-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cp-chips {
  margin-top: var(--esp-5);
  color: #6CC4F2;
}

.cp-media {
  max-width: 900px;
  margin-top: var(--esp-10);
}

.cp-media .cs-telefono {
  margin: 0;
}

.cp-grilla {
  display: grid;
  gap: var(--esp-12);
}

.cp-bloque + .cp-bloque,
.cp-texto > .cs-cita {
  margin-top: var(--esp-8);
}

.cp-sub {
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
  padding-top: var(--esp-4);
  border-top: 1px solid #C4B79E;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #1B2E44;
}

.cp-sub span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #5A3796;
  font-variant-numeric: tabular-nums;
}

.cp-bloque > p,
.cp-lista li {
  max-width: 56ch;
  margin-top: var(--esp-3);
  font-size: 17px;
  line-height: 1.65;
  color: #566579;
}

.cp-lista li {
  padding: 8px 0;
  border-bottom: 1px solid #E8E0D0;
  margin-top: 0;
}

.cp-bloque .caso-entregas {
  margin-top: var(--esp-4);
}

.cp-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4) var(--esp-6);
  margin-top: var(--esp-10);
}

.cp-galeria {
  display: grid;
  gap: var(--esp-6);
  align-content: start;
}

.cp-larga .cs-pantalla {
  aspect-ratio: 16 / 11;
}

.cp-larga img {
  height: auto;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cp-larga img {
      animation: cs-recorre linear both;
      animation-timeline: view();
      animation-range: cover 10% cover 90%;
    }
  }
}

@media (min-width: 900px) {
  .cp-grilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--esp-14);
  }

  .cp-galeria {
    position: sticky;
    top: calc(var(--nav-alto) + 32px);
  }
}

.cp-siguiente .cp-sig {
  display: grid;
  gap: var(--esp-2);
  margin: var(--esp-6) 0 var(--esp-8);
  color: #F5F3EE;
}

.cp-sig-nombre {
  font-size: clamp(44px, 8vw, 104px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.cp-sig-titulo {
  max-width: 44ch;
  font-size: 17px;
  color: #A6B7C9;
}

.cp-sig-flecha {
  font-size: 32px;
  color: #6CC4F2;
  transition: translate var(--dur) var(--ease);
}

.cp-sig:hover .cp-sig-flecha {
  translate: 8px 0;
}

[data-tema='oscuro'] :is(.cs-estrella) { background: transparent; color: #F5F3EE; }
[data-tema='oscuro'] :is(.cp-sub, .cs-estrella .titular-seccion) { color: #F5F3EE; }
[data-tema='oscuro'] :is(.cp-bloque > p, .cp-lista li, .cs-paso > p:not(.cs-paso-nombre), .cs-paso li) { color: #A6B7C9; }
[data-tema='oscuro'] :is(.cs-lugar, .cs-paso-nombre, .cp-sub span, .cs-ver) { color: #6CC4F2; }
[data-tema='oscuro'] :is(.cs-paso, .cp-sub) { border-top-color: rgba(255, 255, 255, 0.16); }
[data-tema='oscuro'] .cp-lista li { border-bottom-color: rgba(255, 255, 255, 0.1); }
[data-tema='oscuro'] .tono-papel :is(.cs-chips li) { color: #6CC4F2; }
[data-tema='oscuro'] .tono-papel .cs-titulo { color: #F5F3EE; }

.cs-cliente {
  display: block;
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Páginas de caso: el cierre llega después de una sección de noche. */
.pagina-caso .seccion.cierre {
  background: linear-gradient(to bottom, #0C1E34, #010A12 60%);
}

.pagina-caso .cp-siguiente {
  padding-bottom: clamp(48px, 6vw, 88px);
}

/* Las animaciones ligadas al scroll no se pausan (no gastan nada fuera de
   pantalla): pausar el barrido lo dejaba congelado a medio abrir y, como
   el recorte ocultaba la sección, nunca volvía a "verse" (bloqueo). */
:is(.cs-banda, .n3-cifras, .n3-porque).en-pausa {
  animation-play-state: running !important;
}

/* Banda de noche de /casos: estrellas detrás del contenido. */
.cs-banda.tono-noche {
  position: relative;
  isolation: isolate;
}

/* Sección 03: teléfonos + tarjeta Wallet en una fila a todo el ancho. */
@media (min-width: 900px) {
  #galeria-nfc .cs-bento {
    grid-template-columns: 240px 240px minmax(0, 1fr);
    gap: var(--esp-10) clamp(32px, 4vw, 64px);
    align-items: start;
  }

  #galeria-nfc .cs-pieza {
    grid-column: auto;
  }

  #galeria-nfc .cs-ancho-pieza {
    align-self: center;
  }
}