/* ============================================================
   mepasaslacarta? — Design System · base.css (v2 — estilo Agero)
   ------------------------------------------------------------
   Fuente de verdad visual del producto (landing + muro + supuestos).
   v2: adapta el lenguaje visual del template Agero de Framer
   (fondo gris neutro, titulares Cal Sans gigantes, mega-tarjetas
   oscuras, marquees, motion) manteniendo la identidad de marca
   propia (negro tinta + rojo solo en el "?" y estados — nunca
   como color de botón/interfaz). Ver spec:
   docs/superpowers/specs/2026-07-14-rediseno-estilo-agero-design.md

   Cómo leerlo:
   · :root   → los "tokens" (las variables de diseño: colores,
               tipografías, tamaños). Se cambian acá UNA vez y
               se actualizan en todo el sitio.
   · Luego   → los componentes (botones, títulos, hero, tarjetas
               oscuras, marquees, footer...).
   ============================================================ */

/* ---------- Tipografías ----------
   Cal Sans   = la grotesca gigante de titulares (la misma del template
                Agero). Viene en un solo peso (400) vía Fontsource/CDN,
                por eso los títulos van siempre en peso normal.
   DM Sans    = texto e interfaz, limpia y legible.
   Unbounded  = SOLO el wordmark "mepasaslacarta?" — no se toca. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Unbounded:wght@700;800;900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/cal-sans/index.css');

/* ============================================================
   1) TOKENS — las variables de diseño
   ============================================================ */
:root {
  /* --- Color de MARCA (identidad, botones principales, acentos) ---
     Negro neutro (no cálido): matchea el gris frío del fondo estilo
     Agero. El rojo de marca es el mismo --rojo del semáforo A
     PROPÓSITO (es parte del wordmark "mepasaslacarta?"), pero se usa
     solo puntual (el "?", algún resalte), nunca como color de
     botón/interfaz — así no se confunde con las alertas de "perdés
     plata". Regla dura del proyecto: marca ≠ estado, siempre. */
  --marca:         #131313;   /* negro neutro: serio, directo, "estudio" */
  --marca-oscura:  #000000;   /* para hover / apretado */
  --marca-clara:   #EDEDED;   /* superficie clara suave (sobre --papel) */
  --carbon:        #111111;   /* mega-tarjetas y bandas oscuras */
  --carbon-borde:  #2A2A2A;   /* bordes/divisores sobre --carbon */
  --carbon-texto:  #C9C9C9;   /* texto secundario sobre --carbon */

  /* --- Neutros (fondos y texto) --- */
  --fondo:       #DCDCDC;   /* gris claro neutro: base de las páginas (estilo Agero) */
  --papel:       #FFFFFF;   /* tarjetas y superficies elevadas */
  --tinta:       #131313;   /* negro neutro: texto principal */
  --tinta-suave: #55524F;   /* texto secundario, ayudas (AA sobre --fondo y --papel) */
  --borde:       #C7C5C2;   /* líneas y bordes sutiles */

  /* --- Colores de ESTADO / semáforo (SOLO para estados, nunca como marca) --- */
  --verde:       #1E7D4F;   --verde-fondo:  #E6F4EC;   /* bien / te deja plata */
  --ambar:       #B7791F;   --ambar-fondo:  #FBF1DD;   /* ojo / atención */
  --rojo:        #C0392B;   --rojo-fondo:   #FDECEA;   /* mal / te come la plata */
  /* Variantes translúcidas para usar sobre fondo oscuro (--carbon) */
  --verde-sobre-oscuro: rgba(76, 201, 148, 0.16);
  --rojo-sobre-oscuro:  rgba(224, 100, 84, 0.16);
  --verde-texto-oscuro: #6FDBAA;
  --rojo-texto-oscuro:  #F09A8C;

  /* --- Tipografías --- */
  --fuente-titulo: "Cal Sans", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-texto:  "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-marca:  "Unbounded", "DM Sans", sans-serif;   /* wordmark de la marca: intocable */

  /* --- Escala de tamaños (clamp = se adapta de celu a desktop) --- */
  --txt-xs:  0.78rem;
  --txt-sm:  0.9rem;
  --txt-base: 1rem;
  --txt-lg:  1.15rem;
  --txt-xl:  clamp(1.6rem, 3.4vw, 2.5rem);         /* títulos de sección */
  --txt-2xl: clamp(2.6rem, 7.5vw, 5.2rem);         /* título del hero — gigante, estilo Agero */
  --txt-3xl: clamp(2.2rem, 6.5vw, 4.4rem);         /* frase-statement / cifras gigantes */

  /* --- Formas y profundidad --- */
  --radio:         28px;    /* mega-tarjetas (más redondeado que v1) */
  --radio-chico:   12px;
  --radio-pastilla: 999px;
  --sombra:        0 2px 14px rgba(19, 19, 19, 0.08);
  --sombra-fuerte: 0 16px 40px rgba(19, 19, 19, 0.16);

  /* --- Espaciado base --- */
  --ancho-max:      1080px;
  --ancho-max-ancho: 1220px;  /* para bandas full-bleed (banda oscura, footer) */
}

/* ============================================================
   2) BASE — reset suave y estilos globales
   ============================================================ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--txt-base);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* los marquees full-bleed no deben generar scroll horizontal */
}

.oculto { display: none !important; }

/* Contenedor centrado con ancho máximo cómodo de leer */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 20px;
}
/* Variante ancha, para bandas full-bleed con contenido interno centrado */
.contenedor-ancho {
  width: 100%;
  max-width: var(--ancho-max-ancho);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   3) TIPOGRAFÍA — títulos y textos
   ============================================================ */
.titulo-hero {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-2xl);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  color: var(--tinta);
}
.titulo-hero .linea { display: block; }
/* Resalte dentro de un título: pinta una palabra con el color de estado */
.titulo-hero .resalte.bien { color: var(--verde); }
.titulo-hero .resalte.mal { color: var(--rojo); }

.slogan {
  font-family: var(--fuente-marca);
  font-weight: 700;
  text-transform: lowercase;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  color: var(--tinta);
  margin: 0 0 16px;
}

.titulo-seccion {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-xl);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--tinta);
}
/* Modificador: statement / frase gigante centrada (estilo Agero) */
.titulo-gigante {
  font-size: var(--txt-3xl);
  line-height: 1.05;
  max-width: 15ch;
  margin-left: auto;
  margin-right: auto;
}

/* Etiqueta de sección: texto entre paréntesis, sin chip ni emoji (estilo Agero) */
.antetitulo {
  display: block;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--tinta-suave);
  margin-bottom: 16px;
}
.antetitulo::before { content: '('; }
.antetitulo::after { content: ')'; }

/* Bajada / lead: el párrafo que acompaña al título */
.lead {
  font-size: var(--txt-lg);
  color: var(--tinta-suave);
  max-width: 34em;
  margin: 0 auto 30px;
}

/* ============================================================
   4) BOTONES
   ============================================================ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fuente-texto);
  font-size: var(--txt-lg);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radio-pastilla);   /* pastilla, estilo Agero */
  padding: 15px 30px;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
}
.boton:active { transform: translateY(1px) scale(.99); }

/* Flecha animada: solo en los botones marcados .boton-flecha (evita duplicar
   flechas ya escritas a mano en el texto — ver acceso.js) */
.boton-flecha::after {
  content: '→';
  display: inline-block;
  transition: transform .25s ease;
}
.boton-flecha:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .boton-flecha:hover::after { transform: none; }
}

/* Primario: la acción principal. Lleno de color de marca. */
.boton-primario {
  background: var(--marca);
  color: #fff;
  box-shadow: var(--sombra);
}
.boton-primario:hover {
  background: var(--marca-oscura);
  box-shadow: 0 10px 26px rgba(19, 19, 19, .28);
}

/* Secundario: acción alternativa. Contorno, sin relleno. */
.boton-secundario {
  background: transparent;
  color: var(--marca);
  border-color: var(--marca);
}
.boton-secundario:hover {
  background: var(--marca-clara);
}

/* Claro: para CTAs sobre fondo oscuro (--carbon) — blanco con texto negro */
.boton-claro {
  background: #fff;
  color: var(--marca);
  box-shadow: var(--sombra);
}
.boton-claro:hover { background: var(--marca-clara); }

/* Chico: misma paleta que el resto, para lugares ajustados (ej: menú superior) */
.boton-chico { padding: 10px 18px; font-size: var(--txt-sm); }

/* ============================================================
   5) HERO — la primera sección de la landing
   ============================================================ */
.hero {
  text-align: center;
  padding: clamp(48px, 9vh, 110px) 0 clamp(24px, 5vh, 56px);
  position: relative;
}

/* Badge superior estilo Agero: "● Beta abierta · gratis" con punto pulsante */
.badge-beta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  padding: 8px 16px 8px 12px;
  font-size: var(--txt-xs);
  font-weight: 700;
  color: var(--tinta);
  box-shadow: var(--sombra);
  margin: 0 0 26px;
  opacity: 0;
  transform: translateY(-14px);
  animation: badgeBaja .6s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: .05s;
}
.badge-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
  flex-shrink: 0;
  animation: pulsoPunto 2.2s ease-in-out infinite;
}
@keyframes badgeBaja { to { opacity: 1; transform: none; } }
@keyframes pulsoPunto {
  0%   { box-shadow: 0 0 0 0 rgba(30, 125, 79, .45); }
  70%  { box-shadow: 0 0 0 9px rgba(30, 125, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 125, 79, 0); }
}

/* Reveal del titular: cada línea sube con stagger al cargar la página */
.titulo-hero .linea {
  opacity: 0;
  transform: translateY(26px);
  animation: subirLinea .75s cubic-bezier(.22,1,.36,1) forwards;
}
.titulo-hero .linea:nth-child(1) { animation-delay: .12s; }
.titulo-hero .linea:nth-child(2) { animation-delay: .26s; }
@keyframes subirLinea { to { opacity: 1; transform: none; } }

.hero .lead { opacity: 0; animation: entraSuave .6s ease forwards; animation-delay: .55s; }
.hero .lead:last-of-type { margin-bottom: 18px; animation-delay: .65s; }
.hero-acciones {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: entraSuave .6s ease forwards;
  animation-delay: .78s;
}
@keyframes entraSuave { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Micro-copy debajo de los botones (tranquiliza: "es gratis") */
.hero-nota {
  margin-top: 18px;
  font-size: var(--txt-sm);
  color: var(--tinta-suave);
  opacity: 0;
  animation: entraSuave .6s ease forwards;
  animation-delay: .88s;
}

@media (max-width: 560px) {
  .hero-acciones { flex-direction: column; align-items: stretch; }
  .boton { width: 100%; }
}

/* ============================================================
   5a) MARCA — wordmark "mepasaslacarta?" (intocable)
   ============================================================ */
.marca {
  font-family: var(--fuente-marca);
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-decoration: none;
  line-height: 1;
}
.marca .marca-signo { color: var(--rojo); }
.marca-acceso { font-size: clamp(0.95rem, 6.2vw, 1.8rem); white-space: nowrap; }

/* Wordmark gigante del footer — el "?" en rojo brilla sobre negro */
.marca-gigante {
  font-family: var(--fuente-marca);
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  line-height: 0.85;
  font-size: clamp(1.5rem, 8vw, 6.4rem);
  color: #fff;
  margin: 0;
  text-align: center;
  user-select: none;
  overflow-wrap: anywhere;
}
.marca-gigante .marca-signo {
  color: var(--rojo);
  text-shadow: 0 0 44px rgba(192, 57, 43, .55);
}

/* ============================================================
   5b) MENÚ SUPERIOR — barra fija de navegación de la landing
   ============================================================ */
body.con-nav { padding-top: 68px; }
body.con-nav section[id] { scroll-margin-top: 84px; }

.nav-superior {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  background: rgba(220, 220, 220, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.nav-contenido {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-marca {
  font-size: 1.15rem;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  gap: 22px;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  position: relative;
  white-space: nowrap;
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: var(--txt-sm);
  font-weight: 600;
  padding-bottom: 2px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--marca);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-links a:hover { color: var(--marca); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-contenido { justify-content: space-between; }
}
@media (max-width: 420px) {
  .nav-marca { font-size: 0.95rem; }
  .nav-contenido .boton-chico { padding: 8px 12px; font-size: 0.78rem; white-space: nowrap; }
}

/* ============================================================
   5d) CONTEXTO — el problema del sector, con datos duros
   ============================================================ */
.contexto {
  padding: clamp(48px, 7vh, 90px) 0;
}
.contexto .encabezado { text-align: center; margin-bottom: 36px; }

.contexto-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}
.stat {
  background: var(--carbon);
  border: 1px solid var(--carbon-borde);
  border-radius: var(--radio);
  padding: 26px 20px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stat:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0,0,0,.35); }
.stat-icono { font-size: 1.7rem; line-height: 1; margin-bottom: 10px; }
.stat-numero {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 2.7rem);
  color: #fff;
  line-height: 1;
  margin-bottom: 10px;
  white-space: nowrap;
}
.stat-numero sup {
  font-family: var(--fuente-texto);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--carbon-texto);
  margin-left: 2px;
}
.stat-label {
  font-size: var(--txt-sm);
  color: var(--carbon-texto);
  line-height: 1.4;
}

.contexto-texto {
  max-width: 760px;
  margin: 0 auto;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: clamp(24px, 5vw, 40px);
}
.contexto-texto p {
  font-size: var(--txt-lg);
  line-height: 1.65;
  color: var(--tinta);
  text-align: left;
  margin: 0 0 18px;
}
.contexto-texto p:last-child { margin-bottom: 0; }

.contexto-solucion {
  max-width: 760px;
  margin: 28px auto 0;
  background: var(--papel);
  border-left: 4px solid var(--rojo);
  border-radius: var(--radio-chico);
  padding: 24px 28px;
  box-shadow: var(--sombra);
}
.contexto-solucion p {
  font-size: var(--txt-lg);
  line-height: 1.65;
  color: var(--tinta);
  margin: 0;
}

.contexto-referencias {
  max-width: 760px;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}
.contexto-referencias-titulo {
  font-size: var(--txt-xs);
  color: var(--tinta-suave);
  margin: 0 0 6px;
}
.contexto-referencias-lista {
  margin: 0;
  padding-left: 18px;
  font-size: var(--txt-xs);
  color: var(--tinta-suave);
  line-height: 1.6;
}

/* ============================================================
   5e) CASO DE USO — historia de ejemplo (Gonzalo), mega-tarjeta oscura
   ============================================================ */
.caso {
  padding: clamp(56px, 8vh, 110px) 0 clamp(48px, 7vh, 90px);
  position: relative;
}
.caso .encabezado { text-align: center; margin-bottom: 8px; position: relative; z-index: 1; }

/* Título fantasma gigante detrás de la mega-tarjeta */
.caso-fantasma-wrap {
  position: relative;
  height: clamp(50px, 11vw, 110px);
  overflow: hidden;
  margin-bottom: clamp(-30px, -3.4vw, -44px);
}
.fantasma {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: clamp(3.4rem, 13vw, 8.5rem);
  line-height: 1;
  color: rgba(19, 19, 19, 0.06);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  will-change: transform;
}

.caso-tarjeta {
  max-width: 800px;
  margin: 0 auto;
  background: var(--carbon);
  border-radius: var(--radio);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  padding: clamp(28px, 5.5vw, 48px);
  position: relative;
  z-index: 1;
}
.caso-parrafo {
  font-size: var(--txt-lg);
  line-height: 1.65;
  color: var(--carbon-texto);
  margin: 0 0 20px;
}
.caso-parrafo strong { color: #fff; }

.caso-hallazgos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.caso-hallazgo {
  border-radius: var(--radio-chico);
  padding: 20px 22px;
  border: 1px solid var(--carbon-borde);
  transition: transform 0.2s ease;
}
.caso-hallazgo:hover { transform: translateY(-3px); }
.caso-hallazgo.mal { background: var(--rojo-sobre-oscuro); }
.caso-hallazgo.bien { background: var(--verde-sobre-oscuro); }
.caso-hallazgo-titulo { font-weight: 700; margin-bottom: 8px; color: #fff; }
.caso-hallazgo.mal .caso-hallazgo-titulo { color: var(--rojo-texto-oscuro); }
.caso-hallazgo.bien .caso-hallazgo-titulo { color: var(--verde-texto-oscuro); }
.caso-hallazgo p { margin: 0; font-size: var(--txt-base); line-height: 1.55; color: var(--carbon-texto); }
.caso-hallazgo p strong { color: #fff; }

/* ============================================================
   6) TESTIMONIOS / RESEÑAS (sin uso actual — se conserva restyled)
   ============================================================ */
.testimonios {
  padding: clamp(44px, 7vh, 84px) 0;
  text-align: center;
}
.testimonios-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  margin-top: 32px;
  text-align: left;
}
.resena {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.resena-estrellas { color: var(--marca); font-size: 0.95rem; letter-spacing: 3px; }
.resena-texto { margin: 0; font-size: var(--txt-base); line-height: 1.55; color: var(--tinta); }
.resena-autor { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.resena-avatar {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  background: var(--marca-clara); color: var(--marca);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fuente-texto); font-weight: 700;
}
.resena-nombre { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
.resena-rol { font-size: 0.8rem; color: var(--tinta-suave); }

/* ============================================================
   7) CÓMO FUNCIONA — pasos apilados con scroll pegajoso
   ============================================================ */
.como-funciona {
  padding: clamp(48px, 7vh, 90px) 0;
}
.como-funciona .encabezado {
  text-align: center;
  margin-bottom: clamp(40px, 6vh, 64px);
  position: relative;
}

.pasos {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Cada paso queda "pegado" mientras el siguiente lo tapa al scrollear */
.paso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 60px);
  align-items: center;
  position: sticky;
  top: 92px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-fuerte);
  padding: clamp(24px, 4vw, 44px);
  transition: transform .4s ease, filter .4s ease;
}
.paso:nth-child(1) { z-index: 1; }
.paso:nth-child(2) { z-index: 2; }
.paso:nth-child(3) { z-index: 3; }
.paso.atras { transform: scale(.96) translateY(-14px); filter: brightness(.88); }
/* En los pasos "invertidos", la imagen se va a la derecha (zig-zag) */
.paso.invertido .paso-imagen { order: 2; }

.paso-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--radio-pastilla);
  background: var(--marca);
  color: #fff;
  font-family: var(--fuente-texto);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.paso h3 {
  font-family: var(--fuente-titulo);
  font-size: 1.7rem;
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--tinta);
}
.paso p {
  margin: 0;
  color: var(--tinta-suave);
  font-size: var(--txt-lg);
}

/* --- Lado imagen: marco tipo "ventana de app" --- */
.mockup {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.mockup-barra {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}
.mockup-barra span { width: 11px; height: 11px; border-radius: 50%; background: var(--borde); }
.mockup-cuerpo {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: var(--tinta-suave);
}
.mockup-cuerpo .icono { font-size: 3rem; line-height: 1; }
.mockup-cuerpo .rotulo { font-size: 0.85rem; }
.mockup-img { display: block; width: 100%; height: auto; }

@media (max-width: 720px) {
  .paso { grid-template-columns: 1fr; gap: 20px; position: static; }
  .paso.invertido .paso-imagen { order: 0; }
  .paso.atras { transform: none; filter: none; }
}

/* Aclaración corta (ej: semáforo vs. matriz) dentro de una sección */
.aclaracion {
  max-width: 640px;
  margin: clamp(32px, 5vh, 48px) auto 0;
  padding: 16px 22px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  color: var(--tinta);
  font-size: 0.95rem;
  text-align: center;
  box-shadow: var(--sombra);
}

/* ============================================================
   7b) MARQUEE — cinta corrida infinita (estilo Agero)
   ============================================================ */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: marqueeMover 26s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marqueeMover {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-banda {
  background: var(--fondo);
  padding: clamp(28px, 5vh, 48px) 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.marquee-banda .marquee-item {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  color: var(--tinta);
  padding: 0 28px;
}
.marquee-banda .marquee-item .cruz { color: var(--rojo); padding: 0 22px; }

.marquee-footer {
  background: var(--carbon);
  padding: 18px 0;
  border-top: 1px solid var(--carbon-borde);
}
.marquee-footer .marquee-link {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  color: #fff;
  text-decoration: none;
  padding: 0 26px;
  transition: color .2s ease;
}
.marquee-footer .marquee-link:hover { color: var(--rojo-texto-oscuro); }

/* ============================================================
   8) CAPTURA — la sección del formulario (momento de conversión)
   ============================================================ */
.captura {
  background: var(--carbon);
  color: #fff;
  text-align: center;
  padding: clamp(56px, 9vh, 104px) 0;
}
.captura .titulo-seccion { color: #fff; }
.captura .lead { color: var(--carbon-texto); }
.captura .antetitulo { color: var(--carbon-texto); }

/* Tarjeta blanca que sostiene el formulario */
.form-card {
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra-fuerte);
  padding: clamp(24px, 4vw, 36px);
  max-width: 440px;
  margin: 28px auto 0;
}
.form-card .boton { width: 100%; margin-top: 6px; }
.form-nota { margin: 14px 0 0; font-size: 0.8rem; color: var(--tinta-suave); }

/* --- Campos de formulario (reutilizables en toda la app) --- */
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  margin-bottom: 16px;
}
.campo label { font-size: 0.85rem; font-weight: 600; color: var(--tinta); }
.campo label .opcional { font-weight: 400; font-size: 0.8rem; color: var(--tinta-suave); }
.input {
  width: 100%;
  font-family: var(--fuente-texto);
  font-size: var(--txt-base);
  color: var(--tinta);
  background: var(--papel);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: #a8a5a1; }
.input:focus { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-clara); }

/* --- Mensajes del formulario (éxito / error / info) --- */
.mensaje {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  border-radius: var(--radio-chico);
  padding: 12px 16px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.mensaje.exito { background: var(--verde-fondo); color: var(--verde); border: 1px solid #bfe3cd; }
.mensaje.error { background: var(--rojo-fondo);  color: var(--rojo);  border: 1px solid #f2c4be; }
.mensaje.info  { background: var(--ambar-fondo); color: #7c5a12;      border: 1px solid #f0e0bb; }

/* ============================================================
   9) PANTALLA DE ACCESO (muro) — registro obligatorio de entrada
   ============================================================ */
.acceso {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--fondo);
}
.acceso-card {
  width: 100%;
  max-width: 460px;
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra-fuerte);
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
}
.acceso-card .logo { margin-bottom: 8px; max-width: 100%; }
.acceso-card h1 {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 2rem;
  margin: 0 0 8px;
  color: var(--tinta);
}
.acceso-card .lead { font-size: var(--txt-base); margin-bottom: 24px; }
.acceso-card form { text-align: left; }
.acceso-card .boton { width: 100%; margin-top: 6px; }

/* ============================================================
   10) PIE DE PÁGINA — footer negro con wordmark gigante
   ============================================================ */
.pie-sitio {
  background: var(--carbon);
  color: var(--carbon-texto);
  text-align: center;
  padding: clamp(40px, 6vh, 64px) 16px clamp(28px, 4vh, 40px);
}
.pie-sitio-info {
  font-size: 0.85rem;
  line-height: 1.7;
}
.pie-sitio strong { color: #fff; font-weight: 600; }
.pie-sitio a { color: var(--carbon-texto); text-decoration: none; }
.pie-sitio a:hover { color: #fff; text-decoration: underline; }
.pie-sitio .pie-enlaces { margin-top: 4px; }
.pie-sitio .pie-enlaces span { color: var(--carbon-borde); margin: 0 6px; }
.pie-sitio .pie-version { margin-top: 14px; font-size: 0.75rem; color: #6E6E6E; }
.pie-sitio .pie-autor { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pie-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--rojo);
  vertical-align: middle;
}

/* Reloj vivo + hora local, estilo Agero */
.pie-reloj {
  margin-top: 20px;
  font-size: 0.8rem;
  color: #6E6E6E;
  letter-spacing: 0.02em;
}
.pie-reloj strong { color: var(--carbon-texto); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Wordmark gigante: entra ANTES del bloque de info, al pie visual */
.pie-marca-gigante { margin: 0 0 28px; }

/* ============================================================
   11) SUGERENCIAS — caja de feedback al final de la landing
   ============================================================ */
.sugerencias {
  padding: clamp(48px, 7vh, 90px) 0;
  text-align: center;
}
.sugerencias .form-card { margin: 24px auto 0; text-align: left; }
textarea.input { resize: vertical; font-family: var(--fuente-texto); }
.acceso-nota { margin-top: 16px; font-size: 0.78rem; color: var(--tinta-suave); }

/* ============================================================
   12) REVELAR — aparición suave al hacer scroll (interactivo.js)
   ============================================================ */
.revelar { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.revelar.visible { opacity: 1; transform: none; }
/* Stagger dentro de grillas (stats, hallazgos) */
.revelar-grupo .revelar:nth-child(1) { transition-delay: 0s; }
.revelar-grupo .revelar:nth-child(2) { transition-delay: .08s; }
.revelar-grupo .revelar:nth-child(3) { transition-delay: .16s; }
.revelar-grupo .revelar:nth-child(4) { transition-delay: .24s; }

/* Cuenta ascendente de los stats (count-up) */
.cuenta { font-variant-numeric: tabular-nums; }

/* Back to top */
.btn-arriba {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sombra-fuerte);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.btn-arriba.visible { opacity: 1; transform: none; pointer-events: auto; }
.btn-arriba:hover { background: var(--marca-oscura); }

@media (prefers-reduced-motion: reduce) {
  .revelar,
  .titulo-hero .linea,
  .hero .lead,
  .hero-acciones,
  .hero-nota,
  .badge-beta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .badge-punto { animation: none !important; box-shadow: none !important; }
  .marquee-track { animation: none !important; }
  .paso { transition: none !important; }
  .paso.atras { transform: none !important; filter: none !important; }
  .btn-arriba { transition: opacity .01s linear !important; }
}

/* ============================================================
   13) SUPUESTOS Y LIMITACIONES — página aparte
   ============================================================ */
.supuestos { padding: clamp(32px, 6vh, 64px) 0; }
.supuestos-contenido { max-width: 760px; }
.supuestos-volver {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--tinta-suave);
  font-size: 0.9rem;
  text-decoration: none;
}
.supuestos-volver:hover { color: var(--tinta); }

.aviso-beta {
  background: var(--ambar-fondo);
  border: 1px solid var(--ambar);
  border-radius: var(--radio-chico);
  padding: 16px 20px;
  margin: 24px 0 36px;
  color: var(--tinta);
  font-size: 0.95rem;
  line-height: 1.5;
}

.supuestos-lista { list-style: none; margin: 0; padding: 0; counter-reset: supuesto; }
.supuestos-lista > li {
  counter-increment: supuesto;
  position: relative;
  padding: 20px 0 20px 44px;
  border-top: 1px solid var(--borde);
}
.supuestos-lista > li:first-child { border-top: none; }
.supuestos-lista > li::before {
  content: counter(supuesto);
  position: absolute;
  left: 0; top: 20px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fuente-titulo);
  font-size: 0.95rem;
}
.supuestos-lista h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--tinta); }
.supuestos-lista p { margin: 0; color: var(--tinta-suave); font-size: 0.95rem; line-height: 1.55; }