/* ==========================================================
   XIOS · Singularity — sistema de diseño
   Acto I (01–10): mármol, vidrio, azul.  Acto II (11–15): oro.
   ========================================================== */

@property --accent   { syntax: '<color>'; inherits: true; initial-value: #1F6BFF; }
@property --accent-2 { syntax: '<color>'; inherits: true; initial-value: #8FD3FF; }

:root{
  --ink:#071233;
  --navy:#0B1E5B;
  --navy-2:#132B7A;
  --blue:#1F6BFF;
  --cyan:#8FD3FF;
  --marble:#F2F4F8;
  --gold:#D9A441;
  --gold-hi:#F6D58A;
  --gold-deep:#A8741A;
  --text:#18224A;
  --muted:#3E4A72;

  --accent:var(--blue);
  --accent-2:var(--cyan);

  --display:'Archivo', 'Arial Black', system-ui, sans-serif;
  --body:'Archivo', 'Segoe UI', system-ui, sans-serif;
  --serif:'Cinzel', 'Trajan Pro', Georgia, serif;

  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --shadow:0 34px 60px -24px rgba(7,18,51,.42), 0 10px 22px -10px rgba(7,18,51,.28);
  --glow-blue:0 0 0 1px rgba(31,107,255,.25), 0 0 34px -6px rgba(31,107,255,.65);
  --glow-gold:0 0 0 1px rgba(217,164,65,.45), 0 0 40px -8px rgba(217,164,65,.8);

  --pad-x:clamp(14px, 2.6vw, 48px);
  --top:clamp(64px, 9vh, 92px);

  color-scheme:light;
  transition:--accent 1.2s ease, --accent-2 1.2s ease;
}
body[data-act="2"]{ --accent:var(--gold); --accent-2:var(--gold-hi); }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
:root{ padding-top:0; }
body{
  overflow:hidden; background:var(--marble); color:var(--text);
  font-family:var(--body); font-stretch:100%;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- chrome fijo ---------- */
.chrome{
  position:fixed; z-index:50; left:0; right:0; top:0;
  padding:calc(env(safe-area-inset-top,0px) + clamp(14px,2.6vh,28px)) var(--pad-x) 0;
  display:flex; justify-content:space-between; align-items:center;
  pointer-events:none; color:var(--ink);
  font-size:clamp(.62rem,.8vw,.8rem); letter-spacing:.24em; text-transform:uppercase; font-weight:600;
}
.chrome .l, .chrome .r{ display:flex; align-items:center; gap:14px; }
.chrome .num{ font-size:clamp(1.2rem,2vw,1.9rem); letter-spacing:0; font-weight:800; font-variant-numeric:tabular-nums; }
.chrome .rule{ width:clamp(28px,4vw,64px); height:1.5px; background:var(--accent); }
body.on-dark .chrome{ color:#fff; }

.dots{
  position:fixed; z-index:50; right:clamp(8px,1.2vw,22px); top:50%; translate:0 -50%;
  display:flex; flex-direction:column; gap:9px;
}
.dots button{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1.5px solid rgba(11,30,91,.45); background:transparent; transition:all .4s ease;
}
.dots button[aria-current="true"]{ background:var(--accent); border-color:var(--accent); height:22px; border-radius:6px; box-shadow:0 0 12px var(--accent); }
.progress{ position:fixed; z-index:50; left:0; bottom:0; height:2px; width:100%; background:rgba(11,30,91,.08); }
/* botón de narración: un clic y se escucha toda la presentación */
/* arriba al centro, entre los dos textos del encabezado: es la única franja libre en todas las láminas */
.voz{ position:fixed; z-index:55; left:50%; translate:-50% 0; top:calc(env(safe-area-inset-top,0px) + clamp(10px,1.6vh,18px));
  display:flex; align-items:center; gap:9px; padding:5px 16px 5px 5px; border:1px solid rgba(255,255,255,.7); border-radius:999px;
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 30px -10px rgba(7,18,51,.45); color:var(--navy); font:600 .82rem/1 var(--body); letter-spacing:.04em; cursor:pointer; }
.voz:hover{ background:rgba(255,255,255,.88); }
.voz:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.voz-i{ position:relative; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; box-shadow:0 0 0 0 var(--accent); }
.voz-i svg{ width:16px; height:16px; fill:currentColor; }
.voz .pause, .voz .eq{ display:none; }
.voz[data-state="sonando"] .play{ display:none; }
.voz[data-state="sonando"] .pause{ display:block; }
.voz[data-state="listo"] .voz-i{ animation:vozPulso 2.2s ease-out infinite; }
@keyframes vozPulso{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100%{ box-shadow:0 0 0 16px transparent; } }
body[data-act="2"] .voz-i{ background:linear-gradient(135deg,#a8741a,#d9a441 55%,#f6d58a); color:#2a1a02; }
@media (max-width: 820px), (max-aspect-ratio: 4/5){
  .voz{ padding:4px; gap:0; top:calc(env(safe-area-inset-top,0px) + 10px); }
  .voz-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (prefers-reduced-motion: reduce){ .voz[data-state="listo"] .voz-i{ animation:none; } }
.progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 12px var(--accent); transition:width .9s cubic-bezier(.7,0,.2,1); }

.sweep{ position:fixed; inset:0; z-index:40; pointer-events:none; visibility:hidden;
  background:linear-gradient(100deg, transparent 20%, rgba(246,213,138,.0) 30%, rgba(255,231,170,.85) 50%, rgba(246,213,138,0) 70%, transparent 80%);
  mix-blend-mode:screen; }

/* ---------- lámina ---------- */
.deck{ position:fixed; inset:0; }
.slide{ position:absolute; inset:0; overflow:hidden; visibility:hidden; perspective:1400px; }
.slide.is-active{ visibility:visible; }
.layer{ position:absolute; inset:-3%; will-change:transform; }
.bg-i{ position:absolute; inset:0; }
.bg-i picture, .bg-i img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bg-i img{ opacity:0; transition:opacity 1.2s ease; animation:kb 38s ease-in-out infinite alternate; transform-origin:60% 45%; }
.bg-i img.ok{ opacity:1; }
@keyframes kb{ from{ transform:scale(1); } to{ transform:scale(1.07) translate(-1%, -.6%); } }

/* fondos de respaldo mientras llegan los assets de Astra */
.bg-i{ background:
  radial-gradient(60% 50% at 78% 18%, rgba(255,255,255,.95), transparent 70%),
  linear-gradient(180deg,#cfe1ff 0%,#eaf2ff 42%,#f6f8fc 62%,#dfe6f1 100%); }
[data-tone="dusk"] .bg-i{ background:
  radial-gradient(40% 30% at 50% 58%, rgba(255,196,120,.9), transparent 70%),
  linear-gradient(180deg,#1f2c63 0%,#59528f 30%,#e39b67 56%,#f6dcc0 66%,#e8edf6 100%); }
[data-tone="gold"] .bg-i{ background:
  radial-gradient(50% 45% at 50% 40%, rgba(255,230,170,.95), transparent 70%),
  linear-gradient(180deg,#fff9ec 0%,#f7ecd2 45%,#eef1f7 100%); }
[data-tone="white"] .bg-i{ background:
  radial-gradient(55% 45% at 50% 35%, rgba(255,240,205,.8), transparent 70%),
  linear-gradient(180deg,#ffffff 0%,#f3f5fa 55%,#e6ebf3 100%); }
.bg-i::after{ /* horizonte de respaldo: silueta de skyline en SVG */
  content:""; position:absolute; left:0; right:0; bottom:22%; height:34%; opacity:.14;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300' preserveAspectRatio='none'><path fill='%230B1E5B' d='M0 300V210h40v-40h30v60h25V120h35v110h20V160h45v70h30V60h22l10-30 10 30h20v170h28V140h40v90h25V90h45v140h20V170h36v60h30V20h18l8-20 8 20h18v210h26V130h50v100h22V180h40v50h28V70h44v160h24V150h30v80h36V110h40v120h22V40h20l6-18 6 18h20v190h30V160h44v70h26V120h40v110h30V190h40v40h28V80h36v150h24V170h40v60h30V130h44v100h50v70z'/></svg>") bottom/100% 100% no-repeat;
}
.bg-i:has(img.ok)::after{ display:none; }
.veil{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.35) 22%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 78%, rgba(240,244,250,.55) 100%); }
[data-tone="dusk"] .veil{ background:linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.18) 24%, transparent 44%, rgba(8,18,52,.18) 100%); }
/* velos por lámina, ajustados sobre las placas reales de Astra: más blanco detrás
   del título y del texto donde la placa trae skyline, sol o vegetación */
#s02 .veil{ background:
  linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 62%),
  linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.62) 30%, rgba(255,255,255,.1) 46%, rgba(255,255,255,0) 60%, rgba(240,244,250,.55) 100%); }
#s07 .veil, #s08 .veil, #s09 .veil{ background:linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.62) 22%, rgba(255,255,255,.18) 36%, transparent 48%, rgba(8,18,52,.18) 100%); }
#s11 .veil{ background:
  linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.5) 24%, rgba(255,250,240,0) 40%),
  linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.55) 20%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 80%, rgba(240,244,250,.5) 100%); }

.fx canvas{ position:absolute; inset:3%; width:94%; height:94%; }
/* 06: la esfera (canvas) se apoya SOBRE la plataforma (imagen), así que aquí la capa de
   efectos va por encima de la de objetos; la etiqueta "Liquidez" vive en esa capa para
   quedar encima de la esfera. */
#s06 .layer.fx{ z-index:1; }
#s06 .ui{ z-index:2; }
.fx .core{ z-index:1; }
.objs{ pointer-events:none; }
/* Centrado con márgenes (no con translate): GSAP convierte translate en transform
   al animar, y si la imagen aún no cargó calcula -50% de una altura 0 y el objeto
   queda media altura más abajo. Los objetos de Astra son cuadrados. */
.obj-i{ position:absolute; left:var(--x,50%); top:var(--y,50%); width:var(--w,30vw); aspect-ratio:1;
  margin:calc(var(--w,30vw) / -2) 0 0 calc(var(--w,30vw) / -2); }
.obj-i img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 40px 50px rgba(7,18,51,.35)); }
.obj-i .floor{ position:absolute; left:10%; right:10%; bottom:-4%; height:12%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(7,18,51,.35), transparent); filter:blur(6px); z-index:-1; }

/* UI */
.ui{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  padding:var(--top) calc(var(--pad-x) + 22px) calc(env(safe-area-inset-bottom,0px) + clamp(18px,3vh,34px)) var(--pad-x);
  display:flex; flex-direction:column; gap:clamp(10px,1.9vh,22px);
  scrollbar-width:none;
}
.ui::-webkit-scrollbar{ display:none; }
.ui > .fill{ flex:1 1 auto; min-height:0; }

/* ---------- tipografía ---------- */
.title{
  font-family:var(--display); font-stretch:125%; font-weight:900; text-transform:uppercase;
  font-size:clamp(1.7rem, min(4.5vw, 7.6vh), 5.2rem); line-height:.96; letter-spacing:-.012em;
  color:var(--ink); text-align:center; text-wrap:balance;
  text-shadow:0 2px 30px rgba(255,255,255,.75);
}
.title .hl{ background:linear-gradient(100deg,#0b35c9 0%,#1F6BFF 45%,#5aa8ff 75%,#1F6BFF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 2px 14px rgba(255,255,255,.6)); }
.title .hl.gold, body[data-act="2"] .title .hl{ background:linear-gradient(100deg,#7c4f0e 0%,#c48a2a 30%,#f2cf7f 52%,#c08528 72%,#8f5f15 100%); -webkit-background-clip:text; background-clip:text; }
.lead{ text-align:center; max-width:68ch; margin-inline:auto; font-size:clamp(.9rem, min(1.3vw, 2.3vh), 1.32rem); line-height:1.38; color:var(--text); text-shadow:0 1px 18px rgba(255,255,255,.9); }
.spaced{ text-align:center; font-weight:700; letter-spacing:.42em; text-transform:uppercase; color:var(--navy); font-size:clamp(.66rem, min(1vw,1.8vh), 1.05rem); }
.k{ font-family:var(--display); font-stretch:112%; font-weight:800; text-transform:uppercase; letter-spacing:.01em; font-size:clamp(.72rem, min(.95vw,1.7vh), 1rem); line-height:1.12; color:var(--ink); }
.k.lg{ font-size:clamp(.9rem, min(1.35vw,2.3vh), 1.5rem); }
.s{ font-size:clamp(.68rem, min(.82vw,1.55vh), .9rem); line-height:1.32; color:var(--muted); }
.head{ display:flex; flex-direction:column; gap:clamp(4px,1vh,12px); }

/* ---------- iconos ---------- */
.ic{ width:1.6em; height:1.6em; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ic-badge{ display:grid; place-items:center; width:clamp(34px,3.2vw,52px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #2a4cb8, var(--navy) 60%, #050d2c); color:#fff; box-shadow:var(--glow-blue); font-size:clamp(.8rem,1vw,1.05rem); flex:none; }
body[data-act="2"] .ic-badge{ background:radial-gradient(circle at 35% 30%, #2a3a74, #0d1a4a 60%, #050d2c); box-shadow:var(--glow-gold); color:var(--gold-hi); }
.ic-line{ color:var(--navy); font-size:clamp(.9rem,1.25vw,1.35rem); }
.gold-ic{ color:var(--gold-deep); }

/* ---------- superficies ---------- */
.glass{
  position:relative; border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow), inset 0 1px 0 #fff;
  padding:clamp(10px,1.3vw,22px);
  transform-style:preserve-3d;
}
.glass.dark{ background:linear-gradient(165deg, rgba(18,40,110,.9), rgba(5,14,46,.88)); border-color:rgba(143,211,255,.35); color:#fff; box-shadow:var(--shadow), var(--glow-blue); }
.glass.dark .k, .glass.dark .s{ color:#fff; }
.glass.dark .s{ opacity:.82; }
.glass.goldline{ border:1.5px solid rgba(217,164,65,.85); box-shadow:var(--shadow), var(--glow-gold); }
.glass.blueline{ border:1.5px solid rgba(31,107,255,.6); box-shadow:var(--shadow), var(--glow-blue); }
.glass.noir{ background:linear-gradient(165deg, rgba(22,18,10,.92), rgba(8,8,12,.9)); color:#fff; border:1.5px solid rgba(217,164,65,.7); box-shadow:var(--shadow), var(--glow-gold); }
.glass.noir .k, .glass.noir .s{ color:#fff; }
.glass.navy{ background:linear-gradient(165deg, rgba(14,34,96,.94), rgba(4,12,40,.92)); color:#fff; border:1.5px solid rgba(90,150,255,.6); box-shadow:var(--shadow), var(--glow-blue); }
.glass.navy .k, .glass.navy .s{ color:#fff; }
.tilt{ transition:box-shadow .4s ease; will-change:transform; }

.bar{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); border-radius:var(--r-lg); padding:clamp(10px,1.4vw,20px) clamp(14px,2vw,30px); }
.bar .sep{ width:1.5px; align-self:stretch; background:currentColor; opacity:.25; }
.bar.dark{ background:linear-gradient(90deg, rgba(8,22,70,.95), rgba(14,34,96,.92)); color:#fff; border:1px solid rgba(143,211,255,.35); box-shadow:var(--shadow), var(--glow-blue); }
body[data-act="2"] .bar.dark{ border-color:rgba(217,164,65,.6); box-shadow:var(--shadow), var(--glow-gold); }
.bar.dark .k{ color:#fff; }
.bar .k.lg .goldtxt, .goldtxt{ color:var(--gold-hi); }
.items{ display:flex; flex-wrap:wrap; gap:clamp(8px,1.4vw,22px) clamp(14px,2.4vw,36px); align-items:center; justify-content:space-around; }
.item{ display:flex; align-items:center; gap:10px; }

/* numerales de etapa */
.n{ font-family:var(--display); font-stretch:115%; font-weight:800; font-size:clamp(1.1rem,1.9vw,2rem); line-height:1;
  display:grid; place-items:center; min-width:clamp(42px,4vw,66px); aspect-ratio:1; border-radius:12px;
  color:#fff; background:linear-gradient(160deg, var(--navy-2), #050f38); box-shadow:var(--glow-blue); flex:none; }
body[data-act="2"] .n{ box-shadow:var(--glow-gold); }

/* ---------- secuencias ---------- */
.steps{ display:grid; grid-template-columns:repeat(var(--cols,5), minmax(0,1fr)); gap:clamp(14px,1.8vw,30px); }
.steps > *{ position:relative; }
.steps > * + *::before{
  content:""; position:absolute; left:calc(-1 * clamp(14px,1.8vw,30px) / 2); top:46%; translate:-50% -50%; z-index:3;
  width:clamp(14px,1.4vw,22px); height:clamp(22px,2.4vw,36px);
  background:var(--accent); filter:drop-shadow(0 0 8px var(--accent));
  clip-path:polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.step{ display:flex; flex-direction:column; overflow:hidden; padding:0; }
.step-head{ display:flex; gap:12px; align-items:center; padding:clamp(8px,.9vw,14px); }
.thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(160deg,#2a4cb8,#0a1a4f); }
.thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(5,14,46,.75)); }
.thumb img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease; }
.thumb img.ok{ opacity:1; }
.thumb .ph{ position:absolute; inset:0; display:grid; place-items:center; color:rgba(143,211,255,.55); font-size:clamp(1.6rem,3vw,3.2rem); }
.thumb:has(img.ok) .ph{ display:none; }
.thumb .cap{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:8px 12px; color:#fff; text-align:center; font-weight:700; font-size:clamp(.72rem,.95vw,1rem); line-height:1.2; }
.step-body{ padding:clamp(10px,1vw,16px); display:flex; flex-direction:column; gap:clamp(6px,1vh,12px); flex:1; }
.feat{ display:flex; flex-direction:column; gap:clamp(6px,1.1vh,12px); }
.feat li{ display:flex; gap:12px; align-items:center; }
.feat .ic{ font-size:clamp(.85rem,1.15vw,1.25rem); color:var(--navy); }
.glass.dark .feat .ic, .glass.navy .feat .ic{ color:var(--accent-2); }
.feat b{ color:var(--ink); }
.glass.dark .feat b{ color:#fff; }

/* tarjetas de categorías (lámina 03, 04) */
.cat .row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:10px; }
.cat .row > div{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:4px 6px; }
.cat .row > div + div{ border-left:1px solid rgba(11,30,91,.15); }
.cat .row .ic{ font-size:clamp(1rem,1.6vw,1.7rem); color:var(--navy); }

.list-card .li{ display:flex; gap:12px; align-items:center; padding:clamp(6px,.8vw,10px); border-radius:var(--r-md); background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9); }
.list-card .li + .li{ margin-top:clamp(5px,.7vh,9px); }

/* lámina 01 */
#s01 .ui{ justify-content:flex-start; padding-top:calc(var(--top) + 2vh); }
.hero{ max-width:min(64vw, 1100px); display:flex; flex-direction:column; gap:clamp(10px,2vh,22px); }
.hero h1{ font-family:var(--display); font-stretch:125%; font-weight:900; text-transform:uppercase; line-height:.86;
  /* "SINGULARITY" mide ~9 veces el tamaño de letra: con 9.6vw no cabía en .hero (64vw)
     y, como el degradado se recorta al texto, la última letra desaparecía */
  font-size:clamp(2rem, min(6.9vw, 15vh, 7.4rem), 10.5rem); letter-spacing:-.02em;
  background:linear-gradient(90deg,#060c26 0%,#0b1a4f 42%,#1F6BFF 66%,#6fb6ff 82%,#1F6BFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero h2{ font-family:var(--display); font-stretch:115%; font-weight:600; text-transform:uppercase; font-size:clamp(1.15rem, min(2.5vw,4.2vh), 2.6rem); line-height:1.05; color:var(--ink); }
.hero p{ max-width:44ch; font-size:clamp(.92rem, min(1.35vw,2.4vh), 1.35rem); line-height:1.4; }
.hero .accent-rule{ width:56px; height:2px; background:var(--accent); }
.pillars{ display:flex; gap:clamp(10px,2vw,36px); flex-wrap:wrap; }
.pillar{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; min-width:96px; }
.pillar .ring{ display:grid; place-items:center; width:clamp(48px,4.6vw,76px); aspect-ratio:1; border-radius:50%; border:1.5px solid rgba(31,107,255,.6); background:rgba(255,255,255,.75); color:var(--blue); box-shadow:0 0 24px -6px rgba(31,107,255,.6); font-size:clamp(1rem,1.5vw,1.6rem); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* lámina 02 */
.stages{ --cols:5; flex:1; min-height:0; }
.stage{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(6px,1vh,12px); padding:clamp(8px,1vw,16px) 6px; border-radius:var(--r-lg); background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,.82) 100%); }
.stage .rule{ width:42px; height:2px; background:var(--accent); }
.stage .pic{ position:relative; width:100%; flex:1; min-height:clamp(80px,18vh,240px); display:grid; place-items:end center; }
.stage .pic img{ max-height:100%; width:auto; max-width:100%; object-fit:contain; filter:drop-shadow(0 26px 30px rgba(7,18,51,.35)); opacity:0; transition:opacity .8s; }
.stage .pic img.ok{ opacity:1; }

/* lámina 03 */
.g03{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,26vw) minmax(0,1fr); grid-template-rows:auto auto auto; gap:clamp(10px,1.6vw,26px); align-content:center; }
.g03 .a{ grid-column:1; grid-row:1; } .g03 .b{ grid-column:3; grid-row:1; }
.g03 .c{ grid-column:1; grid-row:2; } .g03 .d{ grid-column:3; grid-row:2; }
.g03 .e{ grid-column:1 / 4; grid-row:3; justify-self:center; width:min(640px,100%); }
.core{ position:absolute; left:var(--x,50%); top:var(--y,50%); translate:-50% -50%; text-align:center; color:#fff; font-family:var(--display); font-stretch:115%; font-weight:800; text-transform:uppercase; font-size:clamp(.8rem, min(1.45vw,2.4vh), 1.5rem); line-height:1.15; text-shadow:0 2px 18px rgba(0,20,80,.9); }
.core b{ color:var(--gold-hi); }

/* lámina 04 */
.g04{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr); gap:clamp(10px,1.4vw,22px); min-height:0; }
.col{ display:flex; flex-direction:column; gap:clamp(8px,1.4vh,16px); min-height:0; }
.stack{ margin-top:auto; display:flex; flex-direction:column; gap:clamp(6px,1vh,12px); }
.stack .li{ display:grid; grid-template-columns:auto auto 1fr; gap:12px; align-items:center; padding:clamp(6px,.8vw,12px) clamp(10px,1vw,16px); border-radius:var(--r-md); }
.liq{ display:flex; align-items:center; justify-content:center; gap:16px; padding:clamp(10px,1.4vw,18px); border-radius:var(--r-lg);
  background:linear-gradient(180deg,#1F6BFF,#0b2aa8); color:#fff; box-shadow:var(--shadow), 0 0 40px -6px rgba(31,107,255,.9); }
.liq .big{ font-family:var(--display); font-stretch:125%; font-weight:900; font-size:clamp(1.3rem,2.6vw,2.8rem); letter-spacing:.02em; }
.mini3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px; }
.mini3 > div{ display:flex; flex-direction:column; gap:6px; }
.mini3 .thumb{ aspect-ratio:16/9; border-radius:var(--r-sm); }
.mini3 .thumb::after{ display:none; }
.mini3 .k{ font-size:clamp(.62rem,.78vw,.85rem); font-stretch:100%; hyphens:auto; overflow-wrap:anywhere; }
.mini3 .k .ic{ display:none; }

/* lámina 05 */
#s05 .ui{ justify-content:space-between; }
.xios{ width:min(46vw, 56vh*1.6, 680px); margin:0 auto; }
.xios text{ font-family:var(--display); font-stretch:125%; font-weight:900; font-size:150px; letter-spacing:-4px; }
.trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,3vw,60px); width:min(1100px,100%); margin:0 auto; }
.pod{ text-align:center; padding:clamp(10px,1.2vw,18px); color:#fff; border-radius:999px/40%;
  background:radial-gradient(120% 140% at 50% 0%, rgba(40,40,52,.92), rgba(6,6,12,.94));
  border:1px solid rgba(246,213,138,.55); box-shadow:var(--shadow), 0 0 30px -8px rgba(246,213,138,.8); }
.pod .k{ color:#fff; } .pod .s{ color:rgba(255,255,255,.8); }
.locked{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.locked .tag{ display:flex; gap:8px; align-items:center; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--navy); }
.locked .tag .ic{ color:var(--gold-deep); font-size:1rem; }

/* lámina 06 */
.g06{ flex:1; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) minmax(0,.9fr); gap:clamp(10px,1.6vw,26px); min-height:0; align-items:center; }
.pods4{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(70px,22vh,230px) clamp(70px,16vw,260px); }
.pods4 .glass{ padding:clamp(8px,.9vw,14px); }
.badge-solid{ display:inline-block; margin-top:12px; padding:10px 16px; border-radius:10px; background:var(--navy); color:#fff; font-weight:800; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; }

/* lámina 08 */
.insights{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.insights > div{ display:flex; gap:14px; padding:4px clamp(10px,1.4vw,24px); }
.insights > div + div{ border-left:1.5px solid rgba(11,30,91,.2); }

/* lámina 07/09 columna de adopción */
.adopt{ display:flex; flex-direction:column; gap:6px; padding:clamp(8px,.8vw,12px); }
.adopt .tile{ position:relative; flex:1; min-height:52px; border-radius:var(--r-sm); overflow:hidden; display:flex; align-items:center; gap:10px; padding:0 12px; color:#fff; font-weight:700;
  background:linear-gradient(160deg,#2c4fb4,#0a1a4f); }
.adopt .tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0; transition:opacity .8s; }
.adopt .tile img.ok{ opacity:1; }
.adopt .tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,14,46,.85), rgba(5,14,46,.25)); z-index:1; }
.adopt .tile > span, .adopt .tile > svg{ position:relative; z-index:2; }

/* lámina 10 */
.g10{ flex:1; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr) minmax(0,.9fr); gap:clamp(10px,1.6vw,26px); min-height:0; align-items:center; }
.vsteps{ display:flex; flex-direction:column; gap:clamp(18px,3vh,34px); }
.vsteps > .glass{ display:flex; gap:14px; align-items:center; }
.vsteps > .glass + .glass::before{ content:""; position:absolute; left:clamp(30px,2.6vw,42px); top:calc(-1 * clamp(18px,3vh,34px)); width:18px; height:clamp(18px,3vh,34px);
  background:var(--accent); clip-path:polygon(0 0,50% 55%,100% 0,100% 35%,50% 100%,0 35%); }
.tiers{ display:flex; flex-direction:column; gap:clamp(10px,2.6vh,30px); }
.tier{ display:flex; justify-content:center; gap:clamp(6px,.9vw,16px); }
.tier .tag3d{ flex:1 1 0; min-width:0; max-width:140px; }
.tag3d{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:clamp(8px,.9vw,14px) clamp(8px,1vw,16px); text-align:center; }
.tag3d .ic{ font-size:clamp(1.1rem,1.8vw,2rem); color:var(--navy); }
.tag3d.socio{ background:linear-gradient(165deg,#1b1a1f,#050508); color:var(--gold-hi); border:1.5px solid var(--gold); box-shadow:var(--shadow), var(--glow-gold); }
.tag3d.socio .ic{ color:var(--gold); }
.tag3d.socio .k{ color:var(--gold-hi); font-size:clamp(.9rem,1.4vw,1.4rem); }
.qa .li{ display:flex; gap:14px; align-items:center; padding:clamp(8px,1.2vh,14px) 0; }
.qa .li + .li{ border-top:1px solid rgba(11,30,91,.15); }

/* lámina 11 */
.g11{ flex:1; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1.35fr); gap:clamp(10px,1.6vw,26px); min-height:0; align-items:center; }
.manifesto{ font-size:clamp(1rem, min(1.5vw,2.7vh), 1.6rem); line-height:1.35; color:var(--text); text-shadow:0 1px 20px rgba(255,255,255,.9); }
.manifesto b{ color:var(--navy); }
.manifesto::before{ content:""; display:block; width:52px; height:3px; background:var(--gold); margin-bottom:14px; }
.ladder{ display:flex; flex-direction:column; gap:clamp(10px,1.8vh,20px); }
.rung{ display:grid; grid-template-columns:auto minmax(0,.9fr) minmax(0,1.2fr); align-items:center; gap:clamp(10px,1.2vw,20px); padding:0; overflow:hidden; }
.rung .ib{ display:grid; place-items:center; align-self:stretch; padding:0 clamp(12px,1.4vw,22px); background:linear-gradient(160deg,#16307f,#050f38); color:#fff; font-size:clamp(1rem,1.6vw,1.7rem); }
.rung .s{ padding-right:14px; border-left:1.5px solid rgba(11,30,91,.25); padding-left:14px; }
.rung + .rung::before{ content:""; position:absolute; left:50%; top:calc(-1 * clamp(10px,1.8vh,20px)); translate:-50% -10%; width:20px; height:12px; background:var(--blue); clip-path:polygon(0 0,50% 70%,100% 0,100% 35%,50% 100%,0 35%); z-index:3; }
.rung.final{ background:linear-gradient(90deg,#1a1408,#3a2a0e); border:1.5px solid var(--gold); box-shadow:var(--shadow), var(--glow-gold); }
.rung.final .k{ color:var(--gold-hi); font-size:clamp(1rem,1.8vw,1.9rem); } .rung.final .s{ color:#fff; border-color:rgba(246,213,138,.4); }
.rung.final .ib{ background:transparent; color:var(--gold); }

/* actos II: paneles de participación */
.duo{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.7fr) minmax(0,1fr); gap:clamp(10px,1.6vw,26px); align-items:center; min-height:0; }
.panel{ display:flex; flex-direction:column; gap:clamp(6px,1.1vh,12px); }
.ribbon{ align-self:flex-start; padding:clamp(6px,.8vw,10px) clamp(14px,1.6vw,24px); color:#fff; font-family:var(--display); font-stretch:112%; font-weight:800; text-transform:uppercase; font-size:clamp(.9rem,1.7vw,1.8rem);
  clip-path:polygon(0 0,100% 0,94% 100%,0 100%); }
.ribbon.gold{ background:linear-gradient(90deg,#9a6516,#d9a441 55%,#f2cf7f); color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.ribbon.blue{ background:linear-gradient(90deg,#0b2aa8,#1F6BFF 60%,#5aa8ff); }
.ribbon.sm{ font-size:clamp(.7rem,1vw,1rem); align-self:center; clip-path:polygon(4% 0,100% 0,96% 100%,0 100%); }
.pr{ display:flex; gap:14px; align-items:center; padding:clamp(6px,.8vw,10px) clamp(8px,1vw,14px); border-radius:var(--r-md); background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.95); }
.glass.noir .pr, .glass.navy .pr{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.pr .ic{ font-size:clamp(1rem,1.5vw,1.6rem); }
.pr.note{ background:linear-gradient(90deg, rgba(246,213,138,.55), rgba(255,255,255,.6)); border-color:rgba(217,164,65,.6); font-weight:700; }
.glass.noir .pr.note{ background:rgba(217,164,65,.12); color:var(--gold-hi); }
.figure{ font-family:var(--display); font-stretch:120%; font-weight:900; line-height:1; color:var(--ink); font-size:clamp(1.8rem, min(4.4vw,7.5vh), 5rem); text-align:center; }
.glass.navy .figure{ color:#fff; }
.figure small{ font-size:.62em; }
.cum{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cum > div{ text-align:center; padding:clamp(6px,1vw,12px); border-radius:var(--r-md); border:1px solid rgba(31,107,255,.35); background:rgba(255,255,255,.55); }
.glass.navy .cum > div{ background:rgba(255,255,255,.04); border-color:rgba(143,211,255,.35); }
.cum .f{ font-family:var(--display); font-stretch:120%; font-weight:900; font-size:clamp(1.3rem,2.6vw,2.8rem); color:var(--navy); line-height:1; }
.glass.navy .cum .f{ color:var(--gold-hi); }
.legal-flag{ outline:1.5px dashed rgba(200,40,40,.0); }
.center-mark{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; align-self:stretch; padding-bottom:4vh; gap:10px; }
.center-mark svg{ width:clamp(46px,5vw,86px); }
.center-mark .wm{ font-weight:700; letter-spacing:.4em; color:#fff; font-size:clamp(.7rem,1vw,1rem); text-shadow:0 2px 12px rgba(0,0,0,.6); }

/* lámina 13 */
.g13{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr) minmax(0,1fr); gap:clamp(10px,1.6vw,26px); min-height:0; align-items:stretch; }
.eq{ display:flex; flex-direction:column; align-items:stretch; gap:clamp(4px,.7vh,8px); }
.eq .op{ text-align:center; font-weight:900; font-size:clamp(1rem,1.6vw,1.7rem); color:var(--navy); line-height:1; }
.eq .gold-pill{ display:flex; align-items:center; justify-content:center; gap:12px; padding:clamp(8px,1vw,14px); border-radius:999px; background:linear-gradient(90deg,#f4d58c,#fff3cf 50%,#e9bd63); border:1.5px solid var(--gold); box-shadow:var(--glow-gold); text-align:center; }

/* lámina 14 */
.g14{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,.7fr) minmax(0,1fr); grid-template-rows:1fr 1fr; gap:clamp(10px,1.4vw,22px); min-height:0; }
.g14 .c1{ grid-column:1; grid-row:1; } .g14 .c2{ grid-column:3; grid-row:1; } .g14 .c3{ grid-column:1; grid-row:2; } .g14 .c4{ grid-column:3; grid-row:2; }
.clause{ display:grid; grid-template-columns:auto 1fr; gap:clamp(10px,1.4vw,22px); align-items:center; }
.clause .big-ic{ font-size:clamp(2rem,4vw,4.4rem); color:var(--gold); filter:drop-shadow(0 6px 14px rgba(168,116,26,.45)); }
.clause ul li{ position:relative; padding-left:16px; }
.clause ul li::before{ content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.clause .num{ color:var(--gold-deep); }
.nda{ position:absolute; left:var(--x,50%); top:var(--y,46%); translate:-50% -50%; width:clamp(120px,13vw,220px); aspect-ratio:3/4; border-radius:14px; rotate:-6deg;
  background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(225,235,250,.75)); border:1.5px solid rgba(255,255,255,.95); box-shadow:var(--shadow), 0 0 50px -10px rgba(246,213,138,.9);
  padding:14% 12%; display:flex; flex-direction:column; gap:9%; }
.nda b{ font-family:var(--display); font-stretch:120%; font-weight:900; font-size:clamp(1.4rem,2.6vw,2.8rem); color:var(--navy); font-style:italic; }
.nda i{ display:block; height:5px; border-radius:3px; background:rgba(11,30,91,.3); }
.nda .lockb{ position:absolute; right:-18%; bottom:-10%; width:46%; color:var(--gold); filter:drop-shadow(0 10px 18px rgba(168,116,26,.6)); }

/* lámina 15 */
#s15 .brand15{ font-family:var(--serif); font-weight:700; text-align:center; letter-spacing:.14em; color:var(--ink); line-height:1; font-size:clamp(2rem, min(6vw,10vh), 6.4rem); text-shadow:0 2px 24px rgba(255,255,255,.9); }
#s15 .brand15 .a{ background:linear-gradient(180deg,#f6d58a,#b07a20); -webkit-background-clip:text; background-clip:text; color:transparent; }
.era{ font-family:var(--serif); text-align:center; letter-spacing:.5em; color:var(--gold-deep); font-size:clamp(.85rem, min(1.6vw,2.8vh), 1.6rem); font-weight:700; }
.howto{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,30px); }
.howto .glass{ display:grid; grid-template-columns:auto auto 1fr; gap:10px; align-items:start; }
.howto .dot{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:linear-gradient(160deg,#e9bd63,#a8741a); color:#fff; font-weight:800; font-size:.8rem; }
.howto .ic{ font-size:clamp(1.2rem,1.9vw,2rem); color:var(--gold-deep); }
.cta-bar{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(12px,2vw,30px); align-items:center; padding:clamp(10px,1.2vw,18px) clamp(16px,2.4vw,36px); border-radius:18px;
  background:linear-gradient(90deg,#060606,#141414 50%,#0a0a0a); border:1.5px solid var(--gold); box-shadow:var(--shadow), var(--glow-gold); color:#fff; }
.cta-bar .wm{ font-family:var(--display); font-stretch:125%; font-weight:900; font-size:clamp(1.4rem,2.6vw,2.8rem); background:linear-gradient(180deg,#f6d58a,#b07a20); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cta{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; padding:clamp(10px,1vw,14px) clamp(18px,2vw,30px); border-radius:999px;
  background:linear-gradient(180deg,#f6d58a,#d9a441 55%,#b07a20); color:#1a1205; font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(.78rem,1vw,1rem);
  box-shadow:0 10px 30px -8px rgba(217,164,65,.9), inset 0 1px 0 rgba(255,255,255,.7); transition:transform .3s ease, box-shadow .3s ease; }
.cta:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -8px rgba(217,164,65,1), inset 0 1px 0 rgba(255,255,255,.7); }
.fine{ text-align:center; font-size:clamp(.6rem,.75vw,.75rem); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

/* las rejillas crecen a su alto natural: si no caben, la lámina se recorre por dentro en vez de encimarse */
.g03, .g04, .g06, .g10, .g11, .g13, .g14, .duo, .stages, .steps.fill{ flex:1 0 auto; min-height:auto; }

@media (min-width:1101px){ .bar.items{ flex-wrap:nowrap; } .bar.items .item{ flex:1 1 auto; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .g04, .g06, .g10, .g11, .g13{ grid-template-columns:1fr 1fr; }
  .g04 .col.mid, .g06 .mid, .g10 .mid, .g11 .mid, .g13 .mid{ grid-column:1 / -1; order:-1; }
}
@media (max-width: 820px), (max-aspect-ratio: 4/5){
  :root{ --top:clamp(58px,8vh,76px); }
  .ui{ padding-right:calc(var(--pad-x) + 16px); }
  .hero{ max-width:100%; }
  .hero h1{ font-size:min(calc((100vw - 48px) / 9.3), 15vh); }
  #s01 .ui{ padding-top:calc(var(--top) + 1vh); }
  .steps{ --cols:1 !important; grid-template-columns:1fr !important; } /* la 09 fija sus columnas en línea */
  .steps > * + *::before{ left:50%; top:calc(-1 * clamp(14px,1.8vw,30px) / 2); rotate:90deg; }
  .stages{ --cols:1; }
  .stage{ flex-direction:row; text-align:left; align-items:center; }
  .stage{ flex-wrap:wrap; padding:12px 14px; }
  .stage > h3{ flex:1 1 45%; }
  .stage .pic{ flex:0 0 38%; min-height:90px; }
  .stage .pic img{ max-height:110px; scale:1.45; transform-origin:50% 80%; } /* los objetos traen ~30 % de margen transparente */
  .stage > div:last-child{ flex:1 1 0; min-width:0; }
  /* objetos héroe: en móvil cada lámina puede fijar su propio sitio con --xm/--ym/--wm */
  .core{ top:var(--slot-y,var(--y,50%)); }
  .obj-i{ left:var(--xm,var(--x,50%)); top:var(--slot-y,var(--ym,var(--y,50%))); width:var(--wm,var(--w,30vw));
    margin:calc(var(--wm,var(--w,30vw)) / -2) 0 0 calc(var(--wm,var(--w,30vw)) / -2); }
  .stage .rule{ display:none; }
  .g03, .g04, .g06, .g10, .g11, .g13, .duo, .g14{ grid-template-columns:1fr; grid-template-rows:none; }
  .g03 > *, .g14 > *{ grid-column:auto !important; grid-row:auto !important; }
  .g03 .spacer{ height:34vh; }
  .g04 .col.mid .spacer{ height:26vh; }
  .g11 .mid, .duo .mid, .g14 .mid{ height:30vh; }
  .pods4{ gap:clamp(110px,30vh,220px) 18px; }
  .insights, .trio, .howto{ grid-template-columns:1fr; }
  .insights > div + div{ border-left:0; border-top:1.5px solid rgba(11,30,91,.2); padding-top:12px; }
  .bar{ flex-wrap:wrap; } .bar .sep{ display:none; }
  .cta-bar{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .dots{ display:none; }
  .chrome .l span:last-child{ display:none; }
  .g04 .col.mid, .g06 .mid, .g10 .mid, .g11 .mid, .g13 .mid{ order:0; }
  .tier{ flex-wrap:wrap; } .tier .tag3d{ flex:0 0 calc(33% - 8px); }
  .rung{ grid-template-columns:auto 1fr; } .rung .s{ grid-column:1 / -1; border:0; padding:0 14px 12px; }
  .rung + .rung::before{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .bg-i img{ animation:none; }
  *{ transition-duration:.01ms !important; }
}