/* ═══════════════════════════════════════════════════════════
   EL ARCHIVO VIVO — sistema visual
   Tokens de Rollo 01 (identidad) + Rollo 02 (dirección cinematográfica)
   aplicados sobre el contenido real de la landing institucional INDOC.
═══════════════════════════════════════════════════════════ */

:root{
  /* — paleta de marca INDOC (idéntica a index.html, no se reinventa) — */
  --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-200:#99f6e4; --teal-300:#5eead4;
  --teal-400:#2dd4bf; --teal-500:#14b8a6; --teal-600:#0d9488; --teal-700:#0f766e;
  --teal-800:#115e56; --teal-900:#0a4940; --teal-950:#042f2e;

  /* — papel / tinta (Rollo 01: "El Archivo Vivo") — */
  --paper:#f3f2ea;
  --paper-card:#f8f7f1;
  --ink:#161f1b;
  --muted:#6a6a5c;
  --line:#dcdaca;

  /* — luz de escena (Rollo 02: arco de intensidad, siempre dentro del teal de marca) — */
  --teal-dim:rgba(45,212,191,.35);   /* Acto I: teal apagado, no un color distinto */
  --rust:#a8402c;   /* tinta de sello — único acento no-teal, mínimo y puntual */
  --scene-light:#0a4940; /* interpolada por GSAP entre actos, siempre en familia teal */

  --radius:14px;
  --max:1180px;

  --font-display:'Fraunces', serif;   /* titulares cinéticos, Acto I/II */
  --font-system:'Sora', sans-serif;    /* estructura, nav, botones */
  --font-body:'DM Sans', sans-serif;   /* cuerpo de texto */
  --font-mono:'JetBrains Mono', ui-monospace, monospace; /* folios, datos, timecode */
}

*{ box-sizing:border-box; }
html{ background:var(--paper); }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--font-system); }
::selection{ background:var(--teal-400); color:#04211d; }

img{ max-width:100%; }

/* ── accesibilidad: foco visible siempre ── */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible,
[role="button"]:focus-visible{
  outline:2px solid var(--teal-400); outline-offset:3px;
}
[role="button"]{ cursor:pointer; }

/* ═══ FOLIO NAV — wayfinding persistente (evoluciona el nav original) ═══ */
#folioNav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; transition:background .3s ease, box-shadow .3s ease;
}
#folioNav.nav-scrolled{ background:rgba(10,73,64,.94); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(255,255,255,.08); }
#folioNav .brand{ display:flex; align-items:center; gap:11px; }
#folioNav .brand .mark{ height:34px; width:auto; flex-shrink:0; }
#folioNav .brand .word{ height:24px; width:auto; }
#folioNav .links{ display:none; align-items:center; gap:26px; }
@media(min-width:900px){ #folioNav .links{ display:flex; } }
#folioNav .links a{ color:rgba(255,255,255,.72); font-size:.85rem; font-weight:500; font-family:var(--font-system); transition:color .2s; }
#folioNav .links a:hover{ color:#fff; }
#folioNav .cta{
  display:none; align-items:center; gap:8px; padding:10px 20px;
  background:var(--teal-400); color:var(--teal-950); font-weight:700; font-size:.85rem;
  border-radius:999px; font-family:var(--font-system); transition:transform .15s cubic-bezier(.34,1.56,.64,1), background .2s;
}
@media(min-width:900px){ #folioNav .cta{ display:inline-flex; } }
#folioNav .cta:hover{ background:var(--teal-300); transform:translateY(-1px); }

#mobileBtn{ color:#fff; font-size:1.3rem; background:none; border:none; cursor:pointer; }
@media(min-width:900px){ #mobileBtn{ display:none; } }
#mobileMenu{
  position:fixed; top:66px; left:12px; right:12px; z-index:59;
  background:rgba(10,73,64,.97); border:1px solid rgba(255,255,255,.1); border-radius:16px;
  padding:14px; backdrop-filter:blur(10px);
}
#mobileMenu a{ display:block; padding:10px 12px; border-radius:10px; color:rgba(255,255,255,.85); font-size:.9rem; font-family:var(--font-system); font-weight:500; }
#mobileMenu a:hover{ background:rgba(255,255,255,.08); }
#mobileMenu .cta{ margin-top:6px; text-align:center; background:var(--teal-400); color:var(--teal-950); font-weight:700; }

/* ═══ SISTEMA DE ESCENA: 3 capas de profundidad, en todas las escenas ═══ */
.scene{ position:relative; }
.layer-bg, .layer-content, .layer-fg{ position:relative; }
.layer-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.layer-fg{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.layer-content{ position:relative; z-index:1; }

/* grano de papel (Acto I) */
.grain::before{
  content:''; position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* grilla digital (Acto II en adelante) */
.gridtex::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity 1s ease; pointer-events:none; z-index:1;
  background-image:linear-gradient(rgba(45,212,191,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(45,212,191,.12) 1px, transparent 1px);
  background-size:34px 34px;
}
.gridtex.on::before{ opacity:1; }

/* ═══ SCENE 01 — HERO (archivo en penumbra, dentro del teal de marca) ═══ */
#hero{
  min-height:100vh; position:relative; overflow:hidden; background:var(--teal-900);
  display:flex; flex-direction:column; justify-content:center; padding:130px 24px 90px;
}
#hero .layer-bg{
  background-image:
    radial-gradient(ellipse 80% 60% at 18% 35%, rgba(45,212,191,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 82% 70%, rgba(13,148,136,.2) 0%, transparent 55%);
}

.hero-inner{ max-width:var(--max); margin:0 auto; width:100%; position:relative; z-index:1; }
.kicker-mono{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-300); display:flex; align-items:center; gap:10px; margin-bottom:26px;
}
.kicker-mono::before{ content:''; width:22px; height:1px; background:var(--teal-300); }

.kinetic-line{ overflow:hidden; }
.kinetic-line span{ display:block; transform:translateY(112%); opacity:0; transition:transform .85s cubic-bezier(.16,1,.3,1), opacity .7s ease; }
.kinetic-line.in span{ transform:translateY(0); opacity:1; }

h1.hero-title{
  font-family:var(--font-display); font-weight:400; color:#f4f3ec;
  font-size:clamp(2.1rem,5.6vw,3.9rem); line-height:1.08; letter-spacing:-.005em; margin:0 0 26px;
}
h1.hero-title em{ font-style:italic; color:var(--teal-300); font-weight:500; }
.hero-sub{ color:rgba(244,243,236,.62); font-size:1.05rem; max-width:52ch; margin-bottom:36px; }
.hero-sub strong{ color:rgba(244,243,236,.88); font-weight:600; }

.cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-bottom:34px; }
.stamp-cta{
  position:relative; font-family:var(--font-system); font-weight:700; font-size:.94rem;
  background:var(--teal-400); color:var(--teal-950); padding:14px 28px; border-radius:999px;
  border:none; cursor:pointer; transition:transform .15s cubic-bezier(.34,1.56,.64,1);
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
}
.stamp-cta:hover{ transform:translateY(-2px); }
.stamp-cta:active{ transform:scale(.95); }
.ghost-cta{
  font-family:var(--font-system); font-weight:600; font-size:.9rem; color:rgba(244,243,236,.82);
  border:1px solid rgba(244,243,236,.22); padding:13px 24px; border-radius:999px; text-decoration:none;
  transition:border-color .2s, background .2s;
}
.ghost-cta:hover{ border-color:rgba(244,243,236,.5); background:rgba(255,255,255,.05); }
.stamp-ring{
  position:absolute; border:1.5px solid var(--rust); border-radius:50%; pointer-events:none;
  width:90px; height:90px; left:50%; top:50%; margin:-45px 0 0 -45px; opacity:0;
}
.stamp-ring.go{ animation:ringpop .6s ease-out forwards; }
@keyframes ringpop{ 0%{ opacity:.85; transform:scale(.35) rotate(-6deg); } 100%{ opacity:0; transform:scale(1.7) rotate(-6deg); } }

.rad-live{ font-family:var(--font-mono); font-size:.74rem; color:rgba(244,243,236,.4); margin-bottom:44px; }
.rad-live b{ color:var(--teal-300); font-weight:500; }

.hero-stats{ display:flex; flex-wrap:wrap; gap:14px; }
.stat-chip{ padding:14px 22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:14px; backdrop-filter:blur(6px); }
.stat-chip .v{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:#f4f3ec; }
.stat-chip .l{ font-family:var(--font-mono); font-size:.68rem; color:rgba(244,243,236,.5); margin-top:2px; }

/* mockup del expediente (visual derecho del hero, penumbra) */
.penumbra-panel{
  position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:22px; padding:22px; backdrop-filter:blur(6px);
}
.penumbra-panel .chrome{ display:flex; gap:7px; margin-bottom:16px; }
.penumbra-panel .chrome i{ width:10px; height:10px; border-radius:50%; }
.penumbra-panel .fold{ background:rgba(10,73,64,.55); border:1px solid rgba(45,212,191,.25); border-radius:14px; padding:16px; margin-bottom:12px; }
.penumbra-panel .fold .lbl{ font-family:var(--font-mono); font-size:.68rem; color:var(--teal-300); margin-bottom:10px; }
.penumbra-panel .stagebox{ background:rgba(45,212,191,.14); border:1px solid rgba(45,212,191,.3); border-radius:10px; padding:9px; text-align:center; flex:1; }
.penumbra-panel .stagebox.dim{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.penumbra-panel .stagebox b{ font-family:var(--font-display); font-weight:600; color:var(--teal-300); font-size:.85rem; display:block; }
.penumbra-panel .stagebox.dim b{ color:rgba(255,255,255,.65); }
.penumbra-panel .stagebox small{ color:rgba(255,255,255,.35); font-size:.65rem; }
.mini-stat{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px; text-align:center; }
.mini-stat b{ font-family:var(--font-display); font-weight:600; color:var(--teal-400); font-size:1.15rem; display:block; }
.mini-stat span{ color:rgba(255,255,255,.4); font-size:.68rem; }

.floating-badge{
  position:absolute; bottom:-18px; left:-20px; background:#fff; border-radius:18px; box-shadow:0 20px 50px -12px rgba(0,0,0,.4);
  padding:14px 18px; display:flex; align-items:center; gap:12px;
}
.floating-badge .ic{ width:38px; height:38px; border-radius:50%; background:var(--teal-100); display:flex; align-items:center; justify-content:center; position:relative; }
.floating-badge b{ display:block; font-family:var(--font-system); font-weight:700; color:var(--ink); font-size:.85rem; }
.floating-badge span{ color:var(--muted); font-size:.72rem; }
.pulse-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--teal-400); animation:pulsering 2s ease-out infinite; }
@keyframes pulsering{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.8); opacity:0; } }

/* ═══ SCENE 02 — EL PROBLEMA (montaje) ═══ */
#problema{ position:relative; padding:120px 24px; background:var(--paper); overflow:hidden; }
.scene-head{ max-width:640px; margin:0 auto 60px; text-align:center; position:relative; z-index:2; }
.scene-eyebrow{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-700); margin-bottom:16px; }
.scene-head h2{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.16; color:var(--ink); }
.scene-head p{ color:var(--muted); margin-top:14px; }

.papers{ position:relative; max-width:var(--max); margin:0 auto; z-index:2; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.paper-card{
  background:var(--paper-card); border:1px solid var(--line); border-radius:4px; padding:22px;
  box-shadow:0 10px 24px -14px rgba(20,20,10,.25);
  transition:transform .8s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-radius .5s ease;
}
.paper-card .pn{ font-family:var(--font-mono); font-size:.66rem; color:var(--muted); display:block; margin-bottom:10px; }
.paper-card h4{ font-weight:700; font-size:.98rem; color:var(--ink); margin:0 0 8px; }
.paper-card p{ font-size:.86rem; color:var(--muted); margin:0; line-height:1.55; }
#problema.settled .paper-card{ transform:none !important; box-shadow:0 2px 10px -4px rgba(20,20,10,.12); border-radius:10px; }

/* ═══ SCENE 03 — EL CORTE (match-cut) ═══ */
#corte{
  position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--teal-950); overflow:hidden; padding:80px 24px; gap:36px;
}
#corte .corte-head{ text-align:center; }
#corte .stage{ position:relative; width:min(560px,86vw); aspect-ratio:4/3; }
#corte .face{ position:absolute; inset:0; border-radius:18px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; backface-visibility:hidden; transition:opacity .1s linear; }
#corte .face-paper{ background:linear-gradient(160deg,#0d1a17,#070f0d); border:1px solid rgba(45,212,191,.18); color:rgba(45,212,191,.4); }
#corte .face-digital{ background:linear-gradient(160deg,#0a201b,#04110d); border:1px solid rgba(45,212,191,.35); color:var(--teal-300); opacity:0; }
#corte .stamp-icon{ font-size:3rem; }
#corte .face-lbl{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
#corte .cut-caption{
  max-width:520px; text-align:center; font-family:var(--font-body); font-size:.98rem; line-height:1.6;
  color:rgba(244,243,236,.82); margin:0;
}

/* ═══ SCENE 04 — EL SISTEMA RESPIRA (módulos + diferenciales) ═══ */
#modulos{ padding:120px 24px; background:var(--teal-950); position:relative; }
#modulos .scene-eyebrow, #diferenciales .scene-eyebrow{ color:var(--teal-300); }
#modulos .scene-head h2, #diferenciales .scene-head h2{ color:#f4f3ec; }
#modulos .scene-head p, #diferenciales .scene-head p{ color:rgba(244,243,236,.6); }

.folder{ max-width:var(--max); margin:0 auto 90px; position:relative; }
.tabs{ display:flex; gap:6px; padding-left:18px; }
.tab{
  font-family:var(--font-system); font-weight:700; font-size:.86rem; cursor:pointer;
  padding:13px 26px 15px; border-radius:10px 10px 0 0; color:rgba(244,243,236,.45);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-bottom:none;
  position:relative; top:1px; transition:background .2s, color .2s;
}
.tab.active{ background:#0f1e1a; color:#f4f3ec; }
.tab .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px; background:rgba(244,243,236,.3); }
.tab.active .dot{ background:var(--rust); }
.folder-body{ background:#0f1e1a; border:1px solid rgba(255,255,255,.08); border-radius:0 16px 16px 16px; padding:44px; }
.folder-panel{ display:none; grid-template-columns:1.15fr 1fr; gap:48px; }
.folder-panel.active{ display:grid; }
.folder-panel h3{ font-family:var(--font-system); font-weight:800; font-size:1.5rem; color:#f4f3ec; margin:0 0 14px; }
.folder-panel p.desc{ color:rgba(244,243,236,.55); line-height:1.65; margin-bottom:22px; }
.folder-panel ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
/* posicionamiento del marcador con position:relative, NO flex — un li flex con texto
   mixto (negrita + texto corrido) se parte en cajas anónimas separadas por spec y
   arma columnas rotas en vez de un párrafo continuo. */
.folder-panel ul li{ position:relative; padding-left:20px; font-size:.88rem; color:rgba(244,243,236,.82); line-height:1.55; }
.folder-panel ul li::before{ content:'—'; position:absolute; left:0; top:0; color:var(--teal-400); font-weight:700; }
.folder-panel ul li b{ font-weight:700; color:#fff; }
.folder-panel a.more{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; color:var(--teal-300); font-size:.85rem; font-weight:600; text-decoration:none; }
.folder-visual{ background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px; align-self:start; }
.folder-visual .row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.07); font-family:var(--font-mono); font-size:.72rem; color:rgba(244,243,236,.55); }
.folder-visual .row:last-child{ border-bottom:none; }
.folder-visual .row b{ color:var(--teal-300); font-weight:600; }
@media(max-width:760px){ .folder-panel{ grid-template-columns:1fr; } }

/* diferenciales: 3 paneles instrumento */
.instrument-tabs{ display:flex; gap:10px; flex-wrap:wrap; max-width:var(--max); margin:0 auto 8px; }
.itab{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  padding:9px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.12); color:rgba(244,243,236,.5);
  cursor:pointer; transition:all .2s;
}
.itab.active{ background:var(--teal-400); color:var(--teal-950); border-color:var(--teal-400); font-weight:700; }
.instrument-panel{ display:none; max-width:var(--max); margin:26px auto 0; grid-template-columns:1.1fr 1fr; gap:44px; align-items:center; }
.instrument-panel.active{ display:grid; }
.instrument-panel h3{ font-family:var(--font-system); font-weight:800; color:#fff; font-size:1.4rem; margin:0 0 14px; }
.instrument-panel p.desc{ color:rgba(244,243,236,.55); margin-bottom:20px; line-height:1.65; }
.instrument-panel ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.instrument-panel ul li{ position:relative; padding-left:20px; font-size:.87rem; color:rgba(244,243,236,.8); line-height:1.55; }
.instrument-panel ul li::before{ content:'—'; position:absolute; left:0; top:0; color:var(--teal-400); font-weight:700; }
.flow-visual{ background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:22px; }
.flow-step{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.flow-step:last-child{ margin-bottom:0; }
.flow-step .fi{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.8rem; }
.flow-step .ft{ flex:1; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:9px 12px; }
.flow-step .ft b{ display:block; color:#fff; font-size:.82rem; }
.flow-step .ft span{ color:rgba(244,243,236,.4); font-size:.7rem; }
@media(max-width:760px){ .instrument-panel{ grid-template-columns:1fr; } }

/* ═══ SCENE 05 — LA BÓVEDA (ciclo vital, travelling horizontal) ═══ */
#boveda{ padding:120px 0 130px; background:var(--paper); overflow:hidden; }
#boveda .scene-head{ padding:0 24px; }
.vault-track{ display:flex; gap:0; }
.vault-chamber{ flex:0 0 100vw; padding:0 24px; display:flex; align-items:center; justify-content:center; min-height:60vh; }
.vault-card{ max-width:880px; width:100%; display:grid; lg-grid-template-columns:1fr 1fr; grid-template-columns:1fr; gap:36px; }
@media(min-width:900px){ .vault-card{ grid-template-columns:1fr 1fr; } }
.vault-visual{ border-radius:20px; padding:8px; }
.vault-visual .dot{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:1.1rem; margin-bottom:20px; }
.vault-visual h3{ font-family:var(--font-system); font-weight:800; font-size:1.5rem; margin:0 0 10px; }
.vault-visual p{ color:var(--muted); line-height:1.6; }
.vault-ops{ display:grid; gap:12px; align-content:center; }
.vault-op{ display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:12px; background:var(--paper-card); border:1px solid var(--line); }
.vault-op .vi{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:linear-gradient(135deg,var(--teal-600),var(--teal-900)); color:#fff; }
.vault-op h4{ font-weight:700; font-size:.92rem; margin:0 0 4px; }
.vault-op p{ font-size:.83rem; color:var(--muted); margin:0; }
.vault-nav{ display:flex; justify-content:center; gap:10px; margin-top:34px; }
.vault-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; transition:background .2s, transform .2s; }
.vault-dot.active{ background:var(--teal-600); transform:scale(1.3); }

/* ═══ SCENE 06 — LA PRUEBA (calmo, deliberadamente sin coreografía) ═══ */
.prueba-section{ padding:96px 24px; }
.prueba-section.alt{ background:#fafaf6; }
.prueba-section .scene-head{ margin-bottom:48px; }

.metric-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:var(--max); margin:0 auto 56px; }
@media(min-width:800px){ .metric-grid{ grid-template-columns:repeat(4,1fr); } }
.metric-card{ background:var(--teal-50); border:1px solid var(--teal-100); border-radius:16px; padding:24px; text-align:center; }
.metric-card .v{ font-family:var(--font-display); font-weight:600; font-size:2.1rem; color:var(--teal-700); }
.metric-card .l{ font-size:.85rem; color:var(--ink); margin-top:6px; }

.cmp-table{ max-width:var(--max); margin:0 auto; overflow:hidden; border-radius:18px; border:1px solid var(--line); box-shadow:0 20px 40px -20px rgba(20,20,10,.15); }
.cmp-head{ display:grid; grid-template-columns:1.2fr 1fr 1fr; background:var(--ink); color:#fff; }
.cmp-head > div{ padding:16px 18px; font-size:.85rem; font-weight:700; text-align:center; }
.cmp-head > div:first-child{ text-align:left; }
.cmp-head > div.hl{ background:var(--teal-700); }
.cmp-row{ display:grid; grid-template-columns:1.2fr 1fr 1fr; border-top:1px solid var(--line); background:#fff; }
.cmp-row > div{ padding:16px 18px; font-size:.86rem; text-align:center; }
.cmp-row > div:first-child{ text-align:left; font-weight:600; color:var(--ink); }
.cmp-row .no{ color:var(--muted); }
.cmp-row .yes{ background:rgba(45,212,191,.06); color:var(--ink); }

.steps-grid{ display:grid; gap:26px; max-width:var(--max); margin:0 auto; grid-template-columns:1fr; }
@media(min-width:800px){ .steps-grid{ grid-template-columns:repeat(4,1fr); } }
.step-card{ text-align:center; }
.step-num{ width:52px; height:52px; border-radius:16px; background:var(--teal-600); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:1.15rem; margin:0 auto 18px; }
.step-card h4{ font-weight:700; margin:0 0 8px; font-size:.98rem; }
.step-card p{ font-size:.85rem; color:var(--muted); margin:0; }

.feat-grid{ display:grid; gap:16px; max-width:var(--max); margin:0 auto; grid-template-columns:1fr; }
@media(min-width:700px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .feat-grid{ grid-template-columns:repeat(3,1fr); } }
.feat-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; transition:border-color .2s, transform .2s; }
.feat-card:hover{ border-color:var(--teal-300); transform:translateY(-2px); }
.feat-ic{ width:40px; height:40px; border-radius:12px; background:var(--teal-50); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--teal-700); }
.feat-card h4{ font-weight:700; font-size:.92rem; margin:0 0 6px; }
.feat-card p{ font-size:.83rem; color:var(--muted); margin:0; }

.sector-grid{ display:grid; gap:18px; max-width:var(--max); margin:0 auto; grid-template-columns:1fr; }
@media(min-width:700px){ .sector-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .sector-grid{ grid-template-columns:repeat(3,1fr); } }
.sector-card{ background:var(--paper-card); border:1px solid var(--line); border-radius:16px; padding:22px; }
.sector-card .fi{ width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--teal-600),var(--teal-900)); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.sector-card h3{ font-weight:700; font-size:1rem; margin:0 0 8px; }
.sector-card p{ font-size:.84rem; color:var(--muted); margin:0 0 10px; }
.sector-card .hl{ font-size:.83rem; color:var(--teal-700); font-weight:600; }
.sector-card.cta-card{ background:linear-gradient(135deg,var(--teal-700),var(--teal-900)); color:#fff; display:flex; flex-direction:column; justify-content:space-between; }
.sector-card.cta-card h3{ color:#fff; }
.sector-card.cta-card p{ color:rgba(255,255,255,.7); }
.sector-card.cta-card a{ color:var(--teal-300); font-weight:600; font-size:.85rem; text-decoration:none; margin-top:14px; display:inline-flex; align-items:center; gap:8px; }

.norm-badge{
  display:inline-flex; align-items:center; gap:6px; padding:5px 13px; background:rgba(15,118,110,.08);
  border:1px solid rgba(15,118,110,.25); border-radius:999px; font-size:.72rem; font-weight:700;
  color:var(--teal-700); letter-spacing:.02em; margin-bottom:14px; font-family:var(--font-mono);
}

.trust-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:32px; margin-bottom:44px; }
.trust-item{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.88rem; font-weight:600; }
.trust-item i{ color:var(--teal-600); }
.testimonial{ max-width:680px; margin:0 auto; background:var(--paper-card); border:1px solid var(--line); border-radius:20px; padding:36px; text-align:center; }
.testimonial .stars{ color:#f5b73f; margin-bottom:14px; }
.testimonial blockquote{ font-family:var(--font-display); font-style:italic; font-weight:400; color:var(--ink); font-size:1.1rem; line-height:1.55; margin:0 0 16px; }
.testimonial .who{ font-weight:700; font-size:.85rem; }
.testimonial .where{ color:var(--muted); font-size:.75rem; }

.faq-list{ max-width:760px; margin:0 auto; display:grid; gap:12px; }
.faq-item{ border:1px solid var(--line); border-radius:16px; padding:22px; background:#fff; }
.faq-item summary{ font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary i{ color:var(--teal-600); flex-shrink:0; transition:transform .2s; }
.faq-item[open] summary i{ transform:rotate(180deg); }
.faq-item p{ margin:14px 0 0; color:var(--muted); font-size:.9rem; line-height:1.65; }

/* ═══ SCENE 07 — CIERRE (contacto + footer) ═══ */
#cierre{ background:var(--teal-950); padding:120px 24px 0; position:relative; overflow:hidden; }
#cierre .scene-head h2{ color:#f4f3ec; }
#cierre .scene-head p{ color:rgba(244,243,236,.5); }
#cierre .constellation{ position:absolute; inset:0; pointer-events:none; opacity:.5; }

.contact-grid{ max-width:var(--max); margin:0 auto 100px; display:grid; grid-template-columns:1fr; gap:56px; position:relative; z-index:2; }
@media(min-width:960px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.contact-info h4{ color:#fff; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.contact-channel{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.contact-channel .ci{ width:46px; height:46px; border-radius:12px; background:rgba(45,212,191,.14); display:flex; align-items:center; justify-content:center; color:var(--teal-300); flex-shrink:0; }
.contact-channel .lbl{ font-size:.7rem; color:rgba(244,243,236,.4); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.contact-channel a, .contact-channel span{ color:#fff; font-weight:600; text-decoration:none; }
.demo-includes{ margin-top:32px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:22px; }
.demo-includes ul{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px; }
.demo-includes li{ font-size:.86rem; color:rgba(244,243,236,.75); display:flex; gap:10px; align-items:center; }
.demo-includes li i{ color:var(--teal-400); font-size:.75rem; }

.contact-form-card{ background:#fff; border-radius:24px; padding:34px; box-shadow:0 40px 80px -30px rgba(0,0,0,.5); }
.contact-form-card h3{ font-weight:800; font-size:1.2rem; margin:0 0 6px; color:var(--ink); }
.contact-form-card > p{ color:var(--muted); font-size:.88rem; margin-bottom:26px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field{ margin-bottom:16px; }
.form-field.full{ grid-column:1/-1; }
.form-label{ display:block; font-size:.8rem; font-weight:700; color:#374151; margin-bottom:6px; }
.form-input{
  width:100%; padding:12px 16px; border:1.5px solid var(--line); border-radius:10px; font-size:.9rem;
  font-family:var(--font-body); transition:border-color .2s, box-shadow .2s; outline:none; background:#fff;
}
.form-input:focus{ border-color:var(--teal-600); box-shadow:0 0 0 3px rgba(13,148,136,.12); }
.submit-btn{
  width:100%; padding:14px; background:linear-gradient(90deg,var(--teal-700),var(--teal-600)); color:#fff;
  font-weight:700; border:none; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  gap:10px; transition:box-shadow .2s;
}
.submit-btn:hover{ box-shadow:0 10px 24px -8px rgba(13,148,136,.4); }
.submit-btn:disabled{ opacity:.7; cursor:not-allowed; }
.form-note{ font-size:.72rem; color:var(--muted); text-align:center; margin-top:14px; }
.form-note a{ color:var(--teal-700); }

footer.site-footer{ background:#02201b; padding:44px 24px; position:relative; z-index:2; }
.footer-inner{ max-width:var(--max); margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-system); font-weight:800; color:#fff; font-size:1.1rem; }
.footer-brand .mark{ height:26px; width:auto; }
.footer-brand .word{ height:17px; width:auto; }
.footer-brand span{ color:var(--teal-400); font-weight:500; font-size:.85rem; border-left:1px solid var(--teal-700); padding-left:8px; margin-left:2px; }
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; }
.footer-links a{ color:var(--teal-400); font-size:.85rem; font-weight:500; text-decoration:none; }
.footer-links a:hover{ color:var(--teal-200); }
.footer-nav a{ color:var(--teal-700); font-size:.72rem; text-decoration:none; }
.footer-nav a:hover{ color:var(--teal-400); }
.footer-copy{ color:var(--teal-800); font-size:.72rem; }

/* WhatsApp float + toast (idénticos en función al original) */
#waFloat{ position:fixed; bottom:24px; right:24px; z-index:9998; display:flex; align-items:center; gap:12px; text-decoration:none; }
#waFloat .tip{ background:#fff; color:var(--ink); font-size:.85rem; font-weight:700; padding:9px 16px; border-radius:999px; box-shadow:0 8px 20px rgba(0,0,0,.15); opacity:0; transform:translateX(8px); transition:all .2s; white-space:nowrap; display:none; }
@media(min-width:640px){ #waFloat .tip{ display:block; } }
#waFloat:hover .tip{ opacity:1; transform:none; }
#waFloat .btn{ position:relative; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -6px rgba(37,211,102,.5); }
#waFloat .btn:hover{ background:#1ebe5b; }
#waFloat .ping{ position:absolute; inset:0; border-radius:50%; background:rgba(37,211,102,.4); animation:wa-ping 2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes wa-ping{ 75%,100%{ transform:scale(2); opacity:0; } }

#toast{
  position:fixed; bottom:24px; right:24px; background:var(--teal-900); color:#fff; padding:14px 20px; border-radius:12px;
  font-size:.875rem; font-weight:500; display:flex; align-items:center; gap:10px; box-shadow:0 8px 32px rgba(10,73,64,.4);
  transform:translateY(80px); opacity:0; transition:all .4s cubic-bezier(.34,1.56,.64,1); z-index:9999;
}
#toast.show{ transform:none; opacity:1; }

/* ── utilidades de reveal (escenas 06/07, sin coreografía pesada) ── */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .kinetic-line span{ transition:none !important; transform:none !important; opacity:1 !important; }
  .stamp-cta, .stamp-ring, .paper-card, .reveal{ transition:none !important; animation:none !important; opacity:1 !important; transform:none !important; }
}