/* Fuentes auto-alojadas (variables, subconjunto latin) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/inter-var-latin.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 600;font-display:swap;src:url('/fonts/fraunces-var-latin.woff2') format('woff2')}
/* ===========================================================
   Showcase — Sistema de automatización legal con IA
   Tema "Liquid Glass" · dark premium + acento dorado
   Público: dueños de asesorías (Madrid). HTML/CSS/JS vanilla.
   Base compartida con ClearCheck (spec Liquid Glass exacta).
   =========================================================== */

:root {
  --negro: #050506;
  --negro-2: #0a0b0d;
  --blanco: #ffffff;
  --gris-300: #d1d5db;
  --gris-400: #9ca3af;
  --gris-500: #6b7280;
  --linea: rgba(255, 255, 255, 0.12);
  --linea-fuerte: rgba(255, 255, 255, 0.2);

  --oro: #34d399;
  --oro-claro: #6ee7b7;
  --oro-oscuro: #059669;
  --verde-wa: #25D366;
  --verde-wa-osc: #128C4B;

  --grad-oro: linear-gradient(180deg, #6ee7b7 0%, #34d399 50%, #059669 100%);

  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;

  --radio: 16px;
  --radio-sm: 10px;
  --radio-lg: 24px;
  --ancho: 1240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  background: var(--negro);
  color: var(--blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 { font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: #fff; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
ul { list-style: none; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

.texto-grad {
  background: var(--grad-oro);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ===== Liquid Glass (spec exacta) ===== */
.liquid-glass {
  background: rgba(0, 0, 0, 0.4);
  background-blend-mode: luminosity;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ===== Botones ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: var(--radio-sm); font-weight: 500; font-size: 15px;
  cursor: pointer; border: none; transition: all .25s ease; white-space: nowrap;
}
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; }
.btn-blanco { background: #fff; color: #000; }
.btn-blanco:hover { background: #e5e7eb; transform: translateY(-1px); }
.btn-glass { color: #fff; border: 1px solid var(--linea-fuerte); }
.btn-glass:hover { background: #fff; color: #000; }
.btn-wa { background: var(--verde-wa); color: #fff; box-shadow: 0 6px 22px rgba(37,211,102,.3); }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,.45); }

/* ===== Navbar glass flotante ===== */
.cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 22px 24px 0; }
.barra {
  max-width: var(--ancho); margin: 0 auto; height: 62px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 8px 18px; border-radius: 14px;
}
.logo { display: flex; align-items: baseline; gap: 10px; font-weight: 600; letter-spacing: -0.02em; }
.logo .marca { font-size: 1.05rem; }
.logo .sufijo { font-family: var(--mono); font-size: .68rem; letter-spacing: 1.6px; color: var(--oro); text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 34px; }
.nav > a { font-size: 14px; color: var(--gris-300); transition: color .2s; }
.nav > a:hover { color: #fff; }
.nav-acciones { display: flex; align-items: center; gap: 12px; }
.menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-btn span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: .3s; }

/* ===== Hero con video ===== */
.hero-video { position: relative; height: 100vh; min-height: 640px; width: 100%; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; background: #000;
}
/* Fallback mientras no exista el video: aurora sutil animada */
.hero-fallback {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; background:
    radial-gradient(56% 44% at 78% 18%, rgba(227,178,60,.14), transparent 62%),
    radial-gradient(50% 42% at 14% 82%, rgba(37,211,102,.08), transparent 60%),
    radial-gradient(70% 60% at 50% 50%, rgba(255,255,255,.03), transparent 70%),
    var(--negro);
}
.hero-fallback::after {
  content: ''; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(246,226,122,.05) 78%, transparent 86%);
  animation: girar 26s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.hero-video.con-video .hero-fallback { display: none; }

.hero-contenido {
  position: relative; z-index: 2; height: 100%;
  max-width: var(--ancho); margin: 0 auto; padding: 0 24px 52px;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none; /* deja pasar el arrastre al grafo del fondo */
}
.hero-contenido a, .hero-contenido button, .hero-botones { pointer-events: auto; }
.hero-fila { display: grid; gap: 30px; align-items: end; }
@media (min-width: 1024px) { .hero-fila { grid-template-columns: 1fr auto; } }

.hero-h1 {
  font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 400; letter-spacing: -0.04em;
  margin-bottom: 18px; line-height: 1.04;
}
.hero-sub { font-size: clamp(1rem, 2vw, 1.18rem); color: var(--gris-300); margin-bottom: 26px; max-width: 560px; }
.hero-botones { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-tag {
  padding: 14px 24px; border-radius: var(--radio); font-size: .95rem;
  font-weight: 300; color: #fff;
}
.hero-tag .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-wa); margin-right: 9px; animation: latido 2.2s infinite; }
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Animación carácter por carácter */
.linea { display: block; }
.char {
  display: inline-block; opacity: 0; transform: translateX(-18px);
  transition: opacity .5s ease, transform .5s ease;
}
.char.entrar { opacity: 1; transform: translateX(0); }

/* Fade-in (data-delay) */
.fade-in { opacity: 0; transition: opacity 1s ease; }
.fade-in.visible { opacity: 1; }

/* Reveal por scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ===== Secciones ===== */
.seccion { padding: 110px 0; position: relative; }
.seccion.alt { background: var(--negro-2); }
.encabezado { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.kicker {
  display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--oro); margin-bottom: 16px;
}
.encabezado h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 16px; font-weight: 500; }
.encabezado p { color: var(--gris-400); font-size: 1.06rem; }

/* ===== Franja de cifras (prueba social) ===== */
.cifras { padding: 52px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--negro-2); }
.cifras .contenedor { display: flex; justify-content: center; gap: clamp(28px, 6vw, 80px); flex-wrap: wrap; }
.contenedor-leyenda { max-width: 760px; margin: 0 auto; padding: 0 24px; text-align: center; }
.cifras-leyenda { font-size: 1.02rem; color: var(--gris-400); margin-bottom: 34px; }
.cifras-leyenda strong { color: #fff; font-weight: 500; }
.cifras-stack { margin-top: 34px; font-family: var(--mono); font-size: .74rem; letter-spacing: 1.2px; color: var(--gris-500); }
.cifra { text-align: center; max-width: 170px; }
.cifra .n { font-size: 2rem; font-weight: 700; color: var(--oro-claro); letter-spacing: -0.02em; }
.cifra .l { font-size: .82rem; color: var(--gris-500); line-height: 1.4; }

/* Destacados de texto (escaneabilidad) */
.hero-eyebrow {
  font-family: var(--mono); font-size: .74rem; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--oro); margin-bottom: 16px;
}
.hero-sub strong, .hito-txt p strong, .encabezado p strong, .cerebro-txt p strong, .franja-cta p strong { color: #fff; font-weight: 500; }
.cerebro-txt .destacado { color: var(--oro-claro); font-size: 1.02rem; margin-bottom: 18px; }

/* ===========================================================
   FIRMA — El recorrido del expediente (timeline con videos)
   =========================================================== */
.timeline { position: relative; max-width: 980px; margin: 0 auto; padding-left: 0; }
.timeline .riel {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: rgba(255,255,255,.08);
}
.timeline .riel .progreso {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro-oscuro));
  box-shadow: 0 0 14px rgba(227,178,60,.5);
}
.hito { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 46px 0; align-items: center; }
.hito .punto {
  position: absolute; left: 50%; top: 58px; transform: translate(-50%, 0);
  width: 14px; height: 14px; border-radius: 50%; background: var(--negro);
  border: 2px solid var(--gris-500); z-index: 2; transition: border-color .4s, box-shadow .4s;
}
.hito.visible .punto { border-color: var(--oro); box-shadow: 0 0 0 5px rgba(227,178,60,.14); }
.hito:nth-child(even) .hito-txt { order: 2; }
.hito:nth-child(even) .hito-media { order: 1; }
.sello {
  display: inline-block; font-family: var(--mono); font-size: .74rem; letter-spacing: 1.8px;
  color: var(--oro); border: 1px solid rgba(227,178,60,.35); border-radius: 999px;
  padding: 5px 14px; margin-bottom: 14px; text-transform: uppercase;
}
.hito-txt h3 { font-size: 1.45rem; margin-bottom: 10px; font-weight: 600; }
.hito-txt p { color: var(--gris-400); font-size: .98rem; }
.hito-txt .detalle { margin-top: 12px; font-size: .88rem; color: var(--gris-500); }
.hito-txt .detalle strong { color: var(--gris-300); font-weight: 500; }

/* Slot de video (placeholder elegante hasta grabar) */
.video-slot { border-radius: var(--radio); aspect-ratio: 16 / 10; display: block; }
.video-slot video { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: none; }
.video-slot.cargado video { display: block; }
.video-slot .vacio {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; text-align: center; padding: 24px; z-index: 1;
}
.video-slot.cargado .vacio { display: none; }
.video-slot .play {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--linea-fuerte); color: var(--oro-claro); font-size: 1.05rem; margin-bottom: 6px;
}
.video-slot .vacio strong { font-weight: 500; font-size: .95rem; }
.video-slot .vacio span { font-size: .8rem; color: var(--gris-500); font-family: var(--mono); max-width: 300px; }

/* ===== Chat WhatsApp animado (paso 1) ===== */
.telefono { border-radius: var(--radio-lg); padding: 18px; max-width: 420px; margin: 0 auto; width: 100%; }
.chat-cab { display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px; border-bottom: 1px solid var(--linea); margin-bottom: 14px; }
.chat-cab .avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--grad-oro); color: #1a1206;
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
}
.chat-cab .nom { font-size: .92rem; font-weight: 600; line-height: 1.2; }
.chat-cab .est { font-size: .74rem; color: var(--verde-wa); }
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 320px; max-height: 340px; overflow-y: auto; scrollbar-width: none; }
.chat::-webkit-scrollbar { display: none; }
.msg .ticks { font-style: normal; letter-spacing: -3px; margin-left: 3px; color: rgba(255,255,255,.5); transition: color .4s ease; }
.msg.leido .ticks { color: #53bdeb; }
.msg {
  max-width: 84%; padding: 10px 14px; border-radius: 14px; font-size: .88rem; line-height: 1.45;
  opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease;
}
.msg.visible { opacity: 1; transform: none; }
.msg.cliente { align-self: flex-start; background: rgba(255,255,255,.07); border-bottom-left-radius: 4px; }
.msg.bot { align-self: flex-end; background: rgba(18,140,75,.34); border-bottom-right-radius: 4px; }
.msg.adjunto { display: flex; align-items: center; gap: 10px; color: var(--gris-300); }
.msg.adjunto .clip { width: 34px; height: 34px; flex: none; border-radius: 9px; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.msg .hora { display: block; text-align: right; font-size: .66rem; color: rgba(255,255,255,.45); margin-top: 4px; font-family: var(--mono); }
.msg.sistema {
  align-self: center; font-family: var(--mono); font-size: .7rem; letter-spacing: .8px;
  color: var(--oro-claro); background: rgba(227,178,60,.08); border: 1px solid rgba(227,178,60,.25);
  border-radius: 999px; padding: 6px 14px; max-width: 100%;
}
.escribiendo { align-self: flex-end; display: none; gap: 4px; padding: 12px 16px; background: rgba(18,140,75,.34); border-radius: 14px; border-bottom-right-radius: 4px; }
.escribiendo.activo { display: inline-flex; }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.75); animation: puntitos 1.1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .18s; }
.escribiendo i:nth-child(3) { animation-delay: .36s; }
@keyframes puntitos { 0%,100% { opacity: .25; transform: translateY(0); } 45% { opacity: 1; transform: translateY(-3px); } }

/* ===== El cerebro documental ===== */
.cerebro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.flujo-conocimiento { display: flex; flex-direction: column; gap: 0; }
.nodo-c { border-radius: var(--radio); padding: 26px 28px; }
.nodo-c .etq { font-family: var(--mono); font-size: .7rem; letter-spacing: 1.8px; text-transform: uppercase; color: var(--oro); margin-bottom: 8px; }
.nodo-c h4,.nodo-c h3 { font-size: 1.08rem; margin-bottom: 6px; }
.nodo-c p { color: var(--gris-400); font-size: .92rem; }
.flecha-c { text-align: center; color: var(--oro); font-size: 1.2rem; padding: 8px 0; opacity: .8; }
.cerebro-txt h3 { font-size: 1.6rem; margin-bottom: 16px; font-weight: 500; }
.cerebro-txt > p { color: var(--gris-400); margin-bottom: 18px; }
.cerebro-txt .video-slot { margin-top: 26px; }

/* ===== Garantías / principios ===== */
.grid-garantias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.garantia { border-radius: var(--radio); padding: 30px 26px; transition: transform .3s ease; }
.garantia:hover { transform: translateY(-6px); }
.garantia .icono {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(227,178,60,.12); color: var(--oro); margin-bottom: 18px; font-size: 1.3rem;
}
.garantia h3 { font-size: 1.05rem; margin-bottom: 8px; font-weight: 600; }
.garantia p { color: var(--gris-400); font-size: .9rem; }

/* ===== Para tu asesoría (casos de uso) ===== */
.grid-casos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.caso { border-radius: var(--radio); padding: 32px; transition: transform .3s ease; }
.caso:hover { transform: translateY(-5px); }
.caso .ambito { font-family: var(--mono); font-size: .72rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--oro); margin-bottom: 10px; }
.caso h3 { font-size: 1.2rem; margin-bottom: 10px; }
.caso p { color: var(--gris-400); font-size: .94rem; }
.caso .mapeo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: .84rem; color: var(--gris-500); }
.caso .mapeo strong { color: var(--gris-300); font-weight: 500; }

/* ===== Franja CTA ===== */
.franja-cta { border-radius: var(--radio-lg); padding: 64px 60px; text-align: center; }
.franja-cta h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 14px; font-weight: 500; }
.franja-cta p { color: var(--gris-300); max-width: 600px; margin: 0 auto 30px; }
.franja-cta .botones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.franja-cta .nota { margin-top: 22px; font-size: .82rem; color: var(--gris-500); font-family: var(--mono); }

/* ===== Footer ===== */
.pie { padding: 46px 0 30px; border-top: 1px solid var(--linea); background: var(--negro-2); }
.pie .contenedor { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pie p { font-size: .86rem; color: var(--gris-500); }
.pie .stack { font-family: var(--mono); font-size: .74rem; letter-spacing: .6px; }

/* ===========================================================
   SIMULACIONES EN VIVO (loops CSS/JS, sin videos)
   Mecánica: los elementos [data-paso] se encienden en orden
   (clase .on), pausa al final y reinicio. js/sims.js
   =========================================================== */
:root { --rojo: #E0564A; }

.sim {
  border-radius: var(--radio); aspect-ratio: 16 / 10; padding: 22px;
  display: flex; gap: 18px; font-family: var(--mono); overflow: hidden;
}
.sim [data-paso] { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.sim [data-paso].on { opacity: 1; transform: none; }
.sim.estatico [data-paso] { opacity: 1; transform: none; transition: none; }

/* Etiqueta de honestidad bajo cada simulación */
.sim-pie { margin-top: 10px; font-family: var(--mono); font-size: .68rem; letter-spacing: 1.2px; color: var(--gris-500); text-transform: uppercase; text-align: right; }

/* Piezas comunes */
.campo-ex {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: rgba(255,255,255,.05); border: 1px solid var(--linea); border-radius: 8px;
  padding: 9px 12px; font-size: .72rem;
}
.campo-ex .k { color: var(--gris-500); letter-spacing: 1.2px; }
.campo-ex .v { color: #fff; text-align: right; }
.chip-ok {
  align-self: flex-start; font-size: .68rem; color: var(--oro-claro);
  border: 1px solid rgba(227,178,60,.35); border-radius: 999px; padding: 6px 12px; letter-spacing: .8px;
}

/* --- Sim 2: escáner de documentos --- */
.sim-escaner .doc {
  flex: 1; background: rgba(255,255,255,.05); border: 1px solid var(--linea); border-radius: 10px;
  padding: 14px; position: relative; overflow: hidden; min-width: 0;
}
.sim-escaner .doc-cab { font-size: .62rem; letter-spacing: 1.4px; color: var(--gris-500); margin-bottom: 12px; }
.sim-escaner .doc-lineas i { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.13); margin: 10px 0; }
.sim-escaner .doc-lineas i:nth-child(1) { width: 62%; }
.sim-escaner .doc-lineas i:nth-child(2) { width: 88%; }
.sim-escaner .doc-lineas i:nth-child(3) { width: 74%; }
.sim-escaner .doc-lineas i:nth-child(4) { width: 91%; background: rgba(227,178,60,.28); }
.sim-escaner .doc-lineas i:nth-child(5) { width: 55%; }
.sim-escaner .doc-lineas i:nth-child(6) { width: 82%; }
.sim-escaner .doc-lineas i:nth-child(7) { width: 68%; }
.sim-escaner .haz {
  position: absolute; left: 0; right: 0; top: -25%; height: 46px;
  background: linear-gradient(180deg, transparent, rgba(246,226,122,.20), transparent);
  animation: escanear 2.8s linear infinite;
}
@keyframes escanear { from { top: -25%; } to { top: 115%; } }
.sim-escaner .extraccion { flex: 1.1; display: flex; flex-direction: column; gap: 9px; justify-content: center; min-width: 0; }

/* --- Sim 3: CRM --- */
.sim-crm { flex-direction: column; justify-content: center; gap: 12px; }
.sim-titulo { font-size: .66rem; letter-spacing: 1.8px; color: var(--gris-500); text-transform: uppercase; }
.crm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.crm-flujo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.chip-est { font-size: .68rem; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--linea-fuerte); color: var(--gris-300); white-space: nowrap; }
.chip-est.oro { color: var(--oro-claro); border-color: rgba(227,178,60,.45); }
.chip-est.verde { color: #7CE3AC; border-color: rgba(37,211,102,.45); }
.crm-flujo .sep { color: var(--gris-500); font-size: .8rem; }

/* --- Sim 4: escrito legal --- */
.sim-doc { align-items: stretch; }
.sim-doc .papel {
  flex: 1.2; background: #f2eee4; border-radius: 10px; padding: 16px 18px; min-width: 0;
  color: #1c1a15; font-family: Georgia, 'Times New Roman', serif;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.sim-doc .papel h5,.papel .papel-tit { color: #1c1a15; font-size: .68rem; letter-spacing: .6px; line-height: 1.4; margin-bottom: 12px; font-family: inherit; }
.sim-doc .papel .p-linea { height: 6px; border-radius: 3px; background: #d9d2bf; margin: 9px 0; }
.sim-doc .papel .p-linea.corta { width: 58%; }
.sim-doc .papel .p-linea.media { width: 82%; }
.sim-doc .papel .firma { margin-top: 14px; font-size: .6rem; letter-spacing: 1px; color: #857f6b; }
.sim-doc .estados { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; min-width: 0; }
.sello-doc {
  display: flex; align-items: center; gap: 10px; font-size: .7rem; padding: 10px 12px;
  border: 1px solid var(--linea); border-radius: 8px; background: rgba(255,255,255,.04); color: var(--gris-300);
}
.sello-doc .ic { flex: none; }
.sello-doc.oro { border-color: rgba(227,178,60,.4); color: var(--oro-claro); }
.sello-doc.verde { border-color: rgba(37,211,102,.4); color: #7CE3AC; }

/* --- Sim 5: motor legal --- */
.sim-motor { flex-direction: column; justify-content: center; gap: 8px; }
.correo-in {
  display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.05);
  border: 1px solid var(--linea); border-radius: 8px; padding: 9px 12px; font-size: .7rem; color: var(--gris-300);
}
.correo-in .de { color: var(--gris-500); }
.check-legal { display: flex; justify-content: space-between; gap: 10px; font-size: .7rem; padding: 5px 4px; border-bottom: 1px dashed rgba(255,255,255,.08); color: var(--gris-300); }
.check-legal .res.si { color: #7CE3AC; }
.check-legal .res.no { color: var(--rojo); }
.veredicto {
  margin-top: 8px; align-self: flex-start; font-size: .74rem; letter-spacing: 1px;
  border: 1px solid rgba(227,178,60,.55); color: var(--oro-claro); border-radius: 8px; padding: 9px 14px;
  background: rgba(227,178,60,.07);
}

/* --- Sim 6: plazos --- */
.sim-plazos { flex-direction: column; justify-content: center; gap: 10px; }
.barra-plazo { display: flex; gap: 4px; height: 12px; }
.barra-plazo .tramo { flex: 1; border-radius: 4px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; opacity: 1; transform: none; }
.barra-plazo .tramo::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--oro-oscuro), var(--oro-claro));
  transform: scaleX(0); transform-origin: left; transition: transform .8s ease;
}
.barra-plazo .tramo.on::after { transform: scaleX(1); }
.dias-eje { display: flex; justify-content: space-between; font-size: .62rem; color: var(--gris-500); letter-spacing: 1px; }
.evento-plazo { display: flex; gap: 10px; font-size: .7rem; color: var(--gris-300); padding: 4px 2px; }
.evento-plazo .dia { color: var(--oro); flex: none; width: 52px; }
.evento-plazo.alerta { color: var(--oro-claro); }
.evento-plazo.rojo { color: var(--rojo); }

/* --- Sim 7: grafo del wiki (se dibuja arista a arista) --- */
.sim-grafo { padding: 10px; }
.sim-grafo svg { width: 100%; height: 100%; }
.sim-grafo .arista {
  stroke: rgba(227,178,60,.42); stroke-width: 1; opacity: 1; transform: none;
  stroke-dasharray: 340; stroke-dashoffset: 340;
  transition: stroke-dashoffset .9s ease;
}
.sim-grafo .arista.on { stroke-dashoffset: 0; }
.sim-grafo .nodo circle { fill: #0e1012; stroke: rgba(255,255,255,.28); stroke-width: 1.2; transition: stroke .5s ease, filter .5s ease; }
.sim-grafo .nodo text { fill: var(--gris-400); font-size: 9.5px; font-family: var(--mono); text-anchor: middle; }
.sim-grafo .nodo {
  opacity: 0; transform: scale(.35); transform-box: fill-box; transform-origin: center;
  transition: opacity .45s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.sim-grafo .nodo.on { opacity: 1; transform: scale(1); }
.sim-grafo .nodo.on circle { stroke: var(--oro); filter: drop-shadow(0 0 7px rgba(227,178,60,.6)); }
.sim-grafo .nodo.on text { fill: #fff; }
.sim-grafo .nodo.centro circle { stroke-width: 1.6; }
.sim.estatico .arista { stroke-dashoffset: 0; }
.sim.estatico .nodo { opacity: 1; transform: none; }
@keyframes flotar { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
.sim-grafo svg g.flotante { animation: flotar 7s ease-in-out infinite alternate; }

/* --- Efectos de realismo --- */

/* Texto tecleado con cursor */
.tipeando::after {
  content: ''; display: inline-block; width: 1.5px; height: .95em; background: currentColor;
  margin-left: 2px; vertical-align: -0.1em; animation: parpadeo .75s steps(1) infinite;
}
@keyframes parpadeo { 50% { opacity: 0; } }

/* Sello que "estampa" */
@keyframes thump {
  0% { transform: scale(1.7) rotate(-4deg); opacity: 0; }
  55% { transform: scale(.96) rotate(0deg); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.sello-doc.on, .veredicto.on, .chip-ok.on, .chip-est.on { animation: thump .5s cubic-bezier(.22,1,.36,1) both; }

/* Documento con texto real + firma manuscrita */
.sim-doc .papel .p-texto { font-size: .6rem; line-height: 1.55; color: #2c2820; margin: 8px 0; min-height: 1.1em; }
.sim-doc .papel .p-texto.solicito { font-weight: 700; letter-spacing: .3px; }
.firma-svg { width: 112px; height: 30px; margin-top: 10px; }
.firma-svg path { fill: none; stroke: #1c355e; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 230; stroke-dashoffset: 230; }
.firma-svg.on path { animation: firmar 1.1s ease .1s forwards; }
@keyframes firmar { to { stroke-dashoffset: 0; } }
.sim.estatico .firma-svg path { stroke-dashoffset: 0; }

/* Fila "analizando..." del motor legal */
.analizando { display: flex; gap: 10px; align-items: center; font-size: .7rem; color: var(--oro-claro); padding: 6px 2px; transition: opacity .4s ease; }
.sim .analizando.off, .sim [data-paso].on.off { opacity: .28; }
.spinner { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid rgba(227,178,60,.25); border-top-color: var(--oro); animation: girar-sp .8s linear infinite; }
@keyframes girar-sp { to { transform: rotate(360deg); } }
.analizando.off .spinner { animation: none; border-top-color: rgba(227,178,60,.25); }

/* Contador de días del reloj de plazos */
.dia-contador { position: absolute; top: 16px; right: 22px; color: var(--oro-claro); font-size: .72rem; letter-spacing: 1.4px; text-align: right; }
.dia-contador .num { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; }

/* Tilt 3D sutil de las tarjetas de simulación */
.sim, .telefono { transition: transform .25s ease; will-change: transform; }

/* --- Cerebro neuronal 3D del hero (girar + zoom) --- */
#hero-red {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; touch-action: pan-y; cursor: grab;
}
#hero-red.arrastrando { cursor: grabbing; }
.hero-video.con-video #hero-red { display: none; }
.hero-hint {
  position: absolute; top: 108px; right: 26px; z-index: 2;
  font-family: var(--mono); font-size: .68rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gris-500); pointer-events: none;
}
@media (hover: none) { .hero-hint { display: none; } }

@media (max-width: 640px) {
  .sim { aspect-ratio: auto; min-height: 300px; flex-wrap: wrap; }
  .crm-grid { grid-template-columns: 1fr; }
}

/* En escritorio el nav vive dentro de la barra glass: sin doble vidrio */
@media (min-width: 721px) {
  .nav.liquid-glass {
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none; overflow: visible;
  }
  .nav.liquid-glass::before { display: none; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .char, .fade-in, .reveal, .msg, .sim [data-paso], .barra-plazo .tramo::after { transition: none; opacity: 1; transform: none; }
  .sim [data-paso] { opacity: 1; }
  .barra-plazo .tramo::after { transform: scaleX(1); }
  .hero-fallback::after, .hero-tag .dot, .escribiendo i, .sim-escaner .haz, .sim-grafo svg g.flotante { animation: none; }
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .cerebro-grid { grid-template-columns: 1fr; }
  .grid-garantias { grid-template-columns: repeat(2, 1fr); }
  .timeline .riel { left: 10px; }
  .hito { grid-template-columns: 1fr; gap: 22px; padding: 36px 0 36px 40px; }
  .hito .punto { left: 10px; top: 46px; }
  .hito:nth-child(even) .hito-txt { order: 1; }
  .hito:nth-child(even) .hito-media { order: 2; }
}
@media (max-width: 720px) {
  .nav {
    position: fixed; top: 96px; left: 24px; right: 24px; flex-direction: column; gap: 0;
    padding: 10px; border-radius: 14px; transform: translateY(-130%); opacity: 0; pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
  }
  .nav.abierto { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav > a { padding: 13px 14px; width: 100%; }
  .menu-btn { display: block; }
  .nav-acciones .btn:not(.menu-btn) { display: none; }
  .grid-garantias, .grid-casos { grid-template-columns: 1fr; }
  .seccion { padding: 70px 0; }
  .franja-cta { padding: 40px 24px; }
  .cifras .contenedor { gap: 26px; }
}

/* v2: titulares serif de marca */
h1,h2,.marca{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.01em}

/* v3: H1 por líneas */
[data-animar] .linea{display:block;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-animar].entra .linea{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-animar] .linea{opacity:1;transform:none;transition:none}}
/* v3: etiquetas de estado */
.sim-pie{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;align-items:center}
.tag-estado{font-size:.64rem;letter-spacing:.08em;font-weight:700;padding:.28rem .6rem;border-radius:999px;border:1px solid;line-height:1.2}
.tag-estado.est-beta{color:#6ee7b7;border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.08)}
.tag-estado.est-simu{color:#93c5fd;border-color:rgba(147,197,253,.4);background:rgba(147,197,253,.07)}
.tag-estado.est-dev{color:#fbbf24;border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.07)}
.tag-estado.est-hum{color:#f9a8d4;border-color:rgba(249,168,212,.4);background:rgba(249,168,212,.07)}
/* v3: contraste del footer */
.pie p{color:#b6c4bf}
.pie a{color:#cfe0da}
.pie .stack{color:#93a59f}

/* v9: enlaces del footer distinguibles sin color */
.pie a{text-decoration:underline;text-underline-offset:2px}