/* ============================================================
   MolGon Systems — Landing page
   Construida sobre molgon-tokens.css (manual de marca, sección 09).
   Este archivo NO redefine tokens: solo los usa.

   Proporción de color vigilada (sección 3.5):
   60 % neutros oscuros · 25 % texto · 10 % marca · 5 % neón.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* Foco visible obligatorio en toda la página (sección 9.2) */
:focus-visible {
  outline: 2px solid var(--mg-cian-neon);
  outline-offset: 2px;
  border-radius: 4px;
}

.saltar {
  position: absolute; left: -9999px; top: var(--mg-4); z-index: 200;
  background: var(--mg-superficie); color: var(--mg-niebla);
  padding: var(--mg-3) var(--mg-6); border-radius: var(--mg-r-sm);
  border: 1px solid var(--mg-borde-fuerte);
}
.saltar:focus { left: var(--mg-4); }

.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }


/* ============================================================
   MOVIMIENTO · entrada de sección al hacer scroll
   Aparecer + subir 16 px · 600 ms (sección 9.3)
   ============================================================ */
/* REGLA DE ORO DE ESTE ARCHIVO
   El CSS define siempre el estado FINAL. El estado inicial de cada animación
   lo pone GSAP en animaciones.js con gsap.set().

   Consecuencia: si GSAP no carga, si el JS falla o si el navegador es viejo,
   la página se ve completa y correcta — nunca en blanco. Es lo contrario de
   lo que hace la mayoría, y es lo que evita que un fallo de red se lleve por
   delante toda la landing.

   Por eso aquí NO hay ninguna regla que ponga opacity: 0. */


/* ============================================================
   01 · BARRA SUPERIOR
   ============================================================ */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: var(--mg-4);
  transition: background var(--mg-base), backdrop-filter var(--mg-base),
              border-color var(--mg-base), padding var(--mg-base);
  border-bottom: 1px solid transparent;
}
.barra.pegada {
  padding-block: var(--mg-3);
  background: rgba(11, 8, 18, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--mg-borde);
}

.barra__caja { display: flex; align-items: center; gap: var(--mg-8); }
.barra__logo img { width: 168px; height: auto; }

.barra__nav { display: flex; gap: var(--mg-8); margin-left: auto; }
.barra__nav a {
  position: relative; font-size: var(--mg-t-small); color: var(--mg-niebla);
  padding-block: var(--mg-2); transition: color var(--mg-rapido);
}
.barra__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--mg-gradiente); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--mg-base);
}
.barra__nav a:hover { color: var(--mg-blanco); }
.barra__nav a:hover::after,
.barra__nav a.activo::after { transform: scaleX(1); }
.barra__nav a.activo { color: var(--mg-blanco); }

/* Barra de progreso de lectura · el gradiente Sinapsis en 2 px */
.barra__progreso {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--mg-gradiente);
  transform: scaleX(0); transform-origin: left;
  opacity: 0;                       /* solo aparece cuando la barra se pega */
  transition: opacity var(--mg-base);
}
.barra.pegada .barra__progreso { opacity: 1; }

/* Las palabras del titular parten desde abajo: hay que recortarlas por línea */
.linea-mascara { overflow: hidden; padding-bottom: .08em; }

/* El relevo entre secundario y primario no debe dar un salto brusco */
.barra__cta { transition: background var(--mg-base), border-color var(--mg-base),
              color var(--mg-base), box-shadow var(--mg-rapido), transform var(--mg-rapido); }

.barra__menu { display: none; }



/* ============================================================
   ESPINA DE CIRCUITO
   Trazo fijo en el margen izquierdo que se dibuja con el scroll.

   Va POR ENCIMA de los fondos de sección (z-index 5) porque si no,
   las secciones en Carbón lo taparían. Por debajo de la barra (100).

   Solo aparece cuando cabe en el margen sin tocar el texto. Ojo con la
   cuenta: la barra de desplazamiento se come ~15 px, así que a 1280 px de
   ventana el ancho útil es ~1265 y el texto arranca sobre los 57 px, no en
   los 64 que salen de la cuenta ingenua. La espina ocupa de 8 a 36 px, con
   lo que quedan unos 20 px de aire.

   Por debajo de 1280 se oculta: el manual prohíbe que el trazo pase por
   detrás del texto (sección 6.1). El umbral no sube más a propósito, porque
   1280 y 1366 son resoluciones de portátil muy comunes.
   ============================================================ */
.espina {
  position: fixed;
  left: 8px;
  top: 0;
  height: 100vh;
  width: 28px;
  z-index: 5;
  pointer-events: none;
  display: none;                    /* lo enciende la media query de abajo */
}

@media (min-width: 1280px) {
  .espina { display: block; }
}

/* La pista es el recorrido completo, muy tenue: enseña a dónde va el trazo.
   Opacidad dentro del 20–60 % que fija el manual para el trazo de fondo. */
.espina__pista { opacity: .10; }
.espina__trazo { opacity: .55; }

/* Nodos · radio 3–5 px y Cian Neón, según la sección 6.1.
   El último es Magenta Neón: es el destino de la sinapsis. */
.espina__nodos circle {
  fill: var(--mg-cian-neon);
  opacity: .28;
  transition: opacity var(--mg-base), filter var(--mg-base);
}
.espina__nodos circle.encendido {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(34, 228, 245, .9));
}
.espina__nodos circle.destino { fill: var(--mg-magenta-neon); }
.espina__nodos circle.destino.encendido {
  filter: drop-shadow(0 0 6px rgba(226, 47, 216, .9));
}

/* ============================================================
   02 · HÉROE
   ============================================================ */
.heroe {
  position: relative;
  padding-block: clamp(140px, 16vw, 200px) var(--mg-seccion);
  overflow: hidden;
}
.heroe::after {
  /* Velo para que el circuito nunca compita con el texto */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 20% 40%, transparent 0%, var(--mg-nocturno) 78%);
}

.circuito {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .25;                     /* opacidad 25 % exigida en el bloque 02 */
  pointer-events: none;
}
/* Los trazos quedan dibujados por defecto; DrawSVGPlugin los borra y los
   vuelve a dibujar al cargar. Sin JS se ven completos, no vacíos. */

/* Nodos · pulso de opacidad en bucle lento, 3 s (sección 9.3) */
.circuito__nodos circle {
  fill: var(--mg-cian-neon);
  animation: pulso 3s ease-in-out infinite;
}
.circuito__nodos circle:nth-child(even) { fill: var(--mg-magenta-neon); animation-delay: 1.5s; }
.circuito__nodos circle:nth-child(3n)   { animation-delay: .9s; }

@keyframes pulso {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

.heroe__caja {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  align-items: center; gap: var(--mg-8);
}

.heroe__titular { margin: var(--mg-6) 0 0; max-width: 22ch; text-wrap: balance; }
.heroe__lead {
  margin-top: var(--mg-6);
  font-size: var(--mg-t-lead); line-height: var(--mg-lh-lead);
  color: var(--mg-gris);
  max-width: 52ch;                  /* por debajo del máximo de 75 caracteres */
}
.heroe__acciones {
  margin-top: var(--mg-8);
  display: flex; flex-wrap: wrap; gap: var(--mg-4);
}
.heroe__nota {
  margin-top: var(--mg-6);
  font-family: var(--mg-mono); font-size: var(--mg-t-small); color: var(--mg-gris);
}

/* Synap · aparece con leve escala desde 0.96 · 600 ms (sección 9.3) */
.heroe__synap { justify-self: center; }
.heroe__synap img {
  width: clamp(200px, 22vw, 330px);
  filter: drop-shadow(0 0 60px rgba(162, 51, 180, .35));
  /* La flotación va en CSS porque es un bucle infinito y no depende del scroll.
     La entrada (escala desde 0.96) la hace GSAP. */
  animation: flotar 6s ease-in-out 1.2s infinite;
}
@keyframes flotar {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}


/* ============================================================
   03 · PRUEBA INMEDIATA · franja en Carbón
   ============================================================ */
.prueba { background: var(--mg-carbon); border-block: 1px solid var(--mg-borde); }
.prueba__caja {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--mg-6) var(--mg-12); padding-block: var(--mg-12);
}
/* El antetítulo ocupa su propia fila: los logos necesitan aire para leerse */
.prueba__titulo { flex: 1 0 100%; }

.prueba__clientes {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--mg-6) var(--mg-12); flex: 1 1 auto;
}
/* Logos de cliente monocromos; a color solo en hover (misma regla que el stack) */
.cliente { position: relative; display: block; line-height: 0; }
.cliente img {
  width: auto; height: 58px;
  transition: opacity var(--mg-base);
}
.cliente__mono { opacity: .78; }                    /* atenuado = monocromo en reposo */
.cliente__color { position: absolute; inset: 0; opacity: 0; }
.cliente:hover .cliente__mono  { opacity: 0; }
.cliente:hover .cliente__color { opacity: 1; }

/* Huecos a la espera del cliente 2 y 3 · discretos, no piden atención */
.prueba__hueco {
  font-family: var(--mg-mono) !important;
  font-size: var(--mg-t-small) !important;
  font-weight: 400 !important;
  color: var(--mg-gris) !important;
  border: 1px dashed var(--mg-borde-fuerte);
  border-radius: var(--mg-r-sm);
  padding: var(--mg-2) var(--mg-4);
}


/* ============================================================
   CABECERAS DE SECCIÓN
   ============================================================ */
.seccion__cabeza { margin-bottom: var(--mg-16); }
.seccion__cabeza h2 { margin: var(--mg-4) 0 0; max-width: 20ch; }
.seccion__cabeza--centro { text-align: center; }
.seccion__cabeza--centro h2 { margin-inline: auto; }
.seccion__lead {
  margin-top: var(--mg-4);
  font-size: var(--mg-t-lead); line-height: var(--mg-lh-lead); color: var(--mg-gris);
}


/* ============================================================
   REJILLAS Y TARJETAS
   ============================================================ */
.rejilla { display: grid; gap: var(--mg-6); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }

.tarjeta { padding: var(--mg-8); }
.tarjeta h3 { margin: var(--mg-6) 0 var(--mg-3); }
.tarjeta p { color: var(--mg-gris); font-size: var(--mg-t-small); line-height: 1.7; }

/* Iconos · lineales, 1.5 px, un solo color. Niebla en reposo, Cian en activo. */
.icono {
  width: 28px; height: 28px; color: var(--mg-niebla);
  transition: color var(--mg-base), transform var(--mg-base);
}
.mg-card:hover .icono { color: var(--mg-cian); transform: translateY(-2px); }



/* ============================================================
   VIDEO · loops silenciosos del sistema de INDUMA
   Decorativos: sin controles, sin sonido, en bucle.

   POR QUÉ EL PÓSTER VA DE FONDO Y NO SOLO EN EL <video>
   El atributo poster lo pinta el propio <video>. Si con
   prefers-reduced-motion le ponemos display:none, desaparece el video
   Y el póster con él, y queda un hueco vacío. Poniendo la misma imagen
   como background del marco, al ocultar el <video> lo que queda debajo
   es exactamente el fotograma de portada. Ese era el requisito.
   ============================================================ */
.video-marco {
  position: relative;
  overflow: hidden;
  background-color: var(--mg-superficie);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.video-loop {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Cada marco carga su propio fotograma de portada */
.video-marco--induma-loop     { background-image: url("assets/videos/induma-loop-poster.jpg"); }
.video-marco--micro-medida    { background-image: url("assets/videos/micro-medida-poster.jpg"); }
.video-marco--micro-ecosistema{ background-image: url("assets/videos/micro-ecosistema-poster.jpg"); }
.video-marco--micro-medicion  { background-image: url("assets/videos/micro-medicion-poster.jpg"); }

/* --- Ficha del caso · marco de producto de la sección 6.4 del manual --- */
.caso__ficha-video {
  aspect-ratio: 1114 / 696;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  margin-bottom: var(--mg-6);
}

/* --- Tarjetas de servicio · franja a sangre en el borde superior --- */
.tarjeta__video {
  aspect-ratio: 16 / 9;
  /* Sale del padding de la tarjeta para pegarse a los bordes */
  margin: calc(var(--mg-8) * -1) calc(var(--mg-8) * -1) var(--mg-8);
  /* Esquinas redondeadas solo arriba, para encajar con el radio de la tarjeta */
  border-radius: var(--mg-r-md) var(--mg-r-md) 0 0;
  border-bottom: 1px solid var(--mg-borde);
}

/* La tarjeta ya no necesita separar el icono: la franja de video hace de tope */
.tarjeta__video + .icono { margin-top: 0; }

/* ============================================================
   05 · CASO INDUMA
   ============================================================ */
.caso { background: var(--mg-carbon); }

/* Caso destacado · barra de gradiente arriba, como la tarjeta destacada (sección 9.2) */
.caso__destacado {
  padding-top: var(--mg-12);
  border-top: 3px solid transparent;
  border-image: var(--mg-gradiente) 1;
}
.caso__encabezado { margin-bottom: var(--mg-12); }
.caso__cliente { margin: var(--mg-4) 0 var(--mg-2); font-size: var(--mg-t-h2); }
.caso__sector {
  font-family: var(--mg-mono); font-size: var(--mg-t-small); color: var(--mg-gris);
}

.caso__cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--mg-16); align-items: start;
}
.caso__paso { margin-bottom: var(--mg-8); }
.caso__paso-label { margin-bottom: var(--mg-2); }
.caso__paso p { color: var(--mg-gris); max-width: 60ch; }

/* Ficha del proyecto · se queda pegada mientras se lee el relato */
.caso__ficha {
  position: sticky; top: 118px;
  background: rgba(255, 255, 255, .032);
  border: 1px solid var(--mg-borde);
  border-radius: var(--mg-r-md);
  padding: var(--mg-8);
  border-top: 3px solid transparent;
  border-image: var(--mg-gradiente) 1;
}
.caso__ficha-logo {
  width: auto; height: 46px; opacity: .85; margin-bottom: var(--mg-6);
}
.caso__ficha .mg-pill { margin-bottom: var(--mg-8); }

.caso__cifras { display: grid; gap: var(--mg-8); }
.caso__cifras li + li {
  padding-top: var(--mg-8); border-top: 1px solid var(--mg-borde);
}
.caso__cifra {
  display: block; font-family: var(--mg-display); font-weight: 700;
  font-size: clamp(30px, 4vw, 42px); line-height: 1.05; letter-spacing: -.03em;
}
.caso__cifra-pie {
  display: block; margin-top: var(--mg-2);
  font-size: var(--mg-t-small); color: var(--mg-gris);
}

/* Capturas de producto · marco de navegador, borde 1 px al 12 %, radio 12 px (sección 6.4) */
.navegador {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; overflow: hidden;
  background: var(--mg-superficie);
  position: sticky; top: 120px;
}
.navegador__barra {
  display: flex; align-items: center; gap: 6px;
  padding: 10px var(--mg-3);
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid var(--mg-borde);
}
.navegador__barra > span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}
.navegador__url {
  margin-left: var(--mg-3); flex: 1;
  font-family: var(--mg-mono); font-size: 11px; color: var(--mg-gris);
  background: rgba(0, 0, 0, .3); border-radius: 6px; padding: 4px var(--mg-3);
}
.navegador__lienzo {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  padding: var(--mg-8); text-align: center;
  color: var(--mg-gris); font-size: var(--mg-t-small); line-height: 1.7;
}

.navegador__video { display: block; width: 100%; height: auto; background: #000; }

/* La línea que remata el resultado, cuando llegue la cifra de impacto */
.caso__mejora { margin-top: var(--mg-4); }

/* Casos resumidos */
.casos-breves { margin-top: var(--mg-20); }
.caso-breve { padding: var(--mg-8); }
.caso-breve h3 { margin: var(--mg-4) 0 var(--mg-1); font-size: 20px; }
.caso-breve__sector {
  font-family: var(--mg-mono); font-size: var(--mg-t-label);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mg-gris); margin-bottom: var(--mg-4);
}
.caso-breve p { color: var(--mg-gris); font-size: var(--mg-t-small); line-height: 1.7; }


/* ============================================================
   06 · PROCESO · unido por un trazo de circuito con nodo por paso
   ============================================================ */
.proceso {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mg-8);
  position: relative; padding-top: var(--mg-12);
}
.proceso::before {
  /* El trazo horizontal · 1 px, fino: es un circuito, no una tubería.
     Por defecto dibujado; GSAP lo pone a scaleX(0) y lo dibuja con el scroll. */
  content: ""; position: absolute; top: 6px; left: 6%; right: 6%; height: 1px;
  background: var(--mg-gradiente); opacity: .45;
  transform: scaleX(var(--avance, 1)); transform-origin: left;
}

.proceso__paso { position: relative; padding-right: var(--mg-4); }
.proceso__paso::before {
  /* Un nodo por paso · encendido por defecto, GSAP lo apaga y lo va prendiendo
     a medida que el trazo llega a cada uno */
  content: ""; position: absolute; top: -46px; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--mg-cian-neon);
  border: 2px solid var(--mg-cian);
  box-shadow: var(--mg-glow-cian);
  transition: box-shadow var(--mg-base), background var(--mg-base);
}
.proceso__paso.apagado::before {
  background: var(--mg-nocturno);
  box-shadow: none;
}

.proceso__num {
  font-family: var(--mg-mono); font-weight: 700; font-size: var(--mg-t-h3);
  color: var(--mg-cian);
}
.proceso__paso h3 { margin: var(--mg-3) 0 var(--mg-3); font-size: 20px; }
.proceso__paso p { color: var(--mg-gris); font-size: var(--mg-t-small); line-height: 1.7; }


/* ============================================================
   07 · STACK · monocromo en Gris Circuito, a color en hover
   ============================================================ */
.stack__lista {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--mg-6) var(--mg-12);
}
.stack__lista li {
  font-family: var(--mg-display); font-weight: 600; font-size: 22px;
  color: var(--mg-gris);
  transition: color var(--mg-base), transform var(--mg-base);
  cursor: default;
}
.stack__lista li:hover { color: var(--mg-cian); transform: translateY(-2px); }

.stack__nota {
  margin: var(--mg-12) auto 0; max-width: 56ch; text-align: center;
  color: var(--mg-gris); font-size: var(--mg-t-small);
}


/* ============================================================
   08 · EQUIPO
   ============================================================ */
/* El equipo se arma con .mg-card + .tarjeta: no hay retratos que estilar. */


/* ============================================================
   09 · CIERRE · gradiente Sinapsis al 15 %
   ============================================================ */
.cierre { position: relative; overflow: hidden; }
.cierre::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--mg-gradiente); opacity: .15;
  mask-image: radial-gradient(70% 100% at 50% 100%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(70% 100% at 50% 100%, #000 0%, transparent 72%);
}
.cierre__caja { position: relative; z-index: 2; max-width: 760px; }
.cierre .seccion__cabeza { margin-bottom: var(--mg-12); }

.formulario {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mg-6);
}
.campo--ancho { grid-column: 1 / -1; }
.mg-input:invalid:not(:placeholder-shown):not(:focus) { border-color: var(--mg-error); }
textarea.mg-input { resize: vertical; min-height: 120px; line-height: 1.6; }

.formulario__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-6);
}
.formulario__legal {
  flex: 1 1 280px; font-size: 13px; line-height: 1.6; color: var(--mg-gris);
}
.formulario__legal a { color: var(--mg-cian); text-decoration: underline; }
.formulario__estado {
  grid-column: 1 / -1; font-size: var(--mg-t-small); color: var(--mg-error);
}
#enviar[aria-busy="true"] { opacity: .6; pointer-events: none; }

.exito { text-align: center; padding-block: var(--mg-12); }
.exito img {
  width: 180px; margin: 0 auto var(--mg-6);
  animation: entraSynap var(--mg-lento) both;
}
.exito h3 { margin-bottom: var(--mg-3); }
.exito p { color: var(--mg-gris); }
.exito strong { color: var(--mg-niebla); font-weight: 500; }


/* ============================================================
   10 · PIE · Nocturno pleno, texto en Gris Circuito
   ============================================================ */
.pie { background: var(--mg-nocturno); border-top: 1px solid var(--mg-borde); }
.pie__caja {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--mg-8); padding-block: var(--mg-20) var(--mg-12);
}
.pie__marca img { width: 168px; margin-bottom: var(--mg-4); }
.pie__marca p { color: var(--mg-gris); font-size: var(--mg-t-small); max-width: 30ch; }
.pie__bloque .mg-label { margin-bottom: var(--mg-4); }
.pie__bloque li { margin-bottom: var(--mg-3); color: var(--mg-gris); font-size: var(--mg-t-small); }
.pie__bloque a { transition: color var(--mg-rapido); }
.pie__bloque a:hover { color: var(--mg-cian); }

.pie__linea {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mg-4);
  padding-block: var(--mg-6) var(--mg-12);
  border-top: 1px solid var(--mg-borde);
  font-size: 13px; color: var(--mg-gris);
}


/* ============================================================
   MARCADORES DE CONTENIDO PENDIENTE
   Visibles a propósito. Al reemplazar el contenido, borra el
   atributo data-pendiente y el marcador desaparece solo.
   ============================================================ */
[data-pendiente] {
  outline: 1px dashed var(--mg-alerta);
  outline-offset: 4px;
  border-radius: 4px;
}
[data-pendiente]::after {
  content: "PENDIENTE";
  display: inline-block; margin-left: var(--mg-2); vertical-align: middle;
  font-family: var(--mg-mono); font-size: 9px; letter-spacing: .12em;
  color: var(--mg-nocturno); background: var(--mg-alerta);
  padding: 2px 6px; border-radius: var(--mg-r-full);
}


/* ============================================================
   RESPONSIVE · probado hasta 360 px (checklist 10.2)
   ============================================================ */
@media (max-width: 1024px) {
  .heroe__caja { grid-template-columns: 1fr; gap: var(--mg-8); }
  .heroe__synap { order: -1; justify-self: start; }
  .heroe__synap img { width: 190px; }
  .heroe__titular { max-width: 100%; }
  .caso__cuerpo { grid-template-columns: 1fr; gap: var(--mg-12); }
  .caso__ficha { position: static; }
  .caso__cifras { grid-template-columns: repeat(3, 1fr); }
  .caso__cifras li + li { padding-top: 0; border-top: 0; }
  .rejilla--3 { grid-template-columns: 1fr; }
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .casos-breves { margin-top: var(--mg-16); }
  .proceso { grid-template-columns: repeat(2, 1fr); row-gap: var(--mg-16); }
  .proceso::before { display: none; }
  .proceso__paso::before { top: -30px; }
  .pie__caja { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --mg-t-h1: 34px; --mg-t-h2: 26px; --mg-t-h3: 21px; }

  .barra__nav {
    position: fixed; inset: 0 0 auto 0; z-index: -1;
    flex-direction: column; gap: 0;
    padding: 88px var(--mg-6) var(--mg-8);
    background: rgba(11, 8, 18, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--mg-borde);
    transform: translateY(-100%);
    transition: transform var(--mg-base);
  }
  .barra__nav.abierto { transform: none; }
  .barra__nav a { padding-block: var(--mg-4); font-size: var(--mg-t-lead); }
  .barra__nav a::after { display: none; }

  .barra__caja { gap: var(--mg-4); }
  .barra__cta { display: none; }

  .barra__menu {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer; padding: 0;
  }
  .barra__menu span {
    display: block; width: 22px; height: 2px; border-radius: 2px;
    background: var(--mg-niebla); margin-inline: auto;
    transition: transform var(--mg-rapido), opacity var(--mg-rapido);
  }
  .barra__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .barra__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .barra__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .heroe__acciones .mg-btn { width: 100%; justify-content: center; }
  .caso__cifras { grid-template-columns: 1fr; gap: var(--mg-8); }
  .rejilla--2 { grid-template-columns: 1fr; }
  .proceso { grid-template-columns: 1fr; }
  .rejilla--4 { grid-template-columns: 1fr; }
  .formulario { grid-template-columns: 1fr; }
  .pie__caja { grid-template-columns: 1fr; gap: var(--mg-8); }
  .stack__lista { gap: var(--mg-6) var(--mg-8); }
  .stack__lista li { font-size: 18px; }
}


/* ============================================================
   ACCESIBILIDAD · obligatorio, no opcional (sección 9.3)
   molgon-tokens.css ya neutraliza transiciones y animaciones;
   aquí se anulan además los estados que dependen de transform.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Se oculta el <video> y queda a la vista el póster, que está pintado como
     background del marco. Sin ese fondo, display:none dejaría un hueco vacío:
     el atributo poster desaparece junto con el elemento que lo dibuja. */
  .video-loop { display: none; }
  .espina__nodos circle { opacity: .5; filter: none !important; }
  .proceso::before { transform: scaleX(1) !important; }
  .circuito__lineas polyline { stroke-dashoffset: 0 !important; }
  .heroe__synap img,
  .exito img { animation: none !important; }
}