/* ============================================================
   DEL ADN AL PÍXEL — sistema visual (paleta y tipografía del cartel)
   ============================================================ */
:root{
  --paper:#ece2d1;
  --paper-soft:#e4d9c5;
  --ink:#15120f;
  --ink-soft:#3b352d;
  --red:#cf1c16;
  --blue:#1f43be;
  --line:rgba(21,18,15,.22);

  --font-display:"Anton", Impact, sans-serif;
  --font-body:"Archivo Narrow", "Archivo", Arial, sans-serif;

  --measure:1080px;      /* ancho de la columna central de contenido */
  --gutter:clamp(20px,5vw,64px);

  --track-wide:.16em;
  --ease-out:cubic-bezier(.19,1,.22,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}       /* Lenis toma el control del scroll */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Motor visual: canvas de fondo ---------- */
.stage{position:fixed;inset:0;z-index:-3;background:var(--paper);overflow:hidden}
#stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Espina roja vertical central (acento del cartel) — screen para que brille sobre lo oscuro */
.stage-spine{
  position:absolute;top:-5%;bottom:-5%;left:50%;width:min(40vw,560px);
  transform:translateX(-50%);
  background:
    radial-gradient(46% 60% at 50% 50%, rgba(207,28,22,.55), rgba(207,28,22,0) 72%);
  mix-blend-mode:screen;pointer-events:none;opacity:.85;
}
/* Velo de papel: lo suficiente para que el texto respire sin apagar la animación */
.stage-veil{position:absolute;inset:0;pointer-events:none;background:rgba(236,226,209,.30)}
/* Grano de papel */
.stage-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:multiply;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 5px);
}
/* Viñeta / integración con el papel */
.stage-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,var(--paper) 0%,rgba(236,226,209,0) 16%,rgba(236,226,209,0) 82%,var(--paper) 100%),
    radial-gradient(120% 80% at 50% 45%, rgba(236,226,209,0) 55%, rgba(236,226,209,.55) 100%);
}

/* ---------- Loader ---------- */
.loader{
  position:fixed;inset:0;z-index:100;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transition:opacity .6s ease, visibility .6s ease;
}
.loader.is-hidden{opacity:0;visibility:hidden}
.loader-squares{display:flex;gap:14px;align-items:center;height:26px}
.loader-squares .sq{
  width:14px;height:14px;display:block;
  transform:scale(var(--load-scale,.35));
  transition:transform .3s var(--ease-out);
  animation:sq-pulse 1.1s ease-in-out infinite;
}
.loader-squares .sq.red{background:var(--red)}
.loader-squares .sq.blue{background:var(--blue);animation-delay:.18s}
.loader-squares .sq.ink{background:var(--ink);animation-delay:.36s}
@keyframes sq-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.loader-label{font-family:var(--font-display);font-size:1.4rem;letter-spacing:.06em;margin:0}
.loader-bar{width:min(280px,60vw);height:3px;background:var(--line)}
.loader-bar span{display:block;height:100%;width:0;background:var(--red);transition:width .25s ease}
.loader-pct{margin:0;font-size:.8rem;letter-spacing:var(--track-wide);text-transform:uppercase}

/* ---------- Cabecera ---------- */
.site-header{
  position:fixed;left:0;right:0;top:0;z-index:40;
  padding:18px var(--gutter);
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(180deg,rgba(236,226,209,.92),rgba(236,226,209,0));
}
.brand{display:flex;align-items:center;gap:0;color:inherit;text-decoration:none}
.reg-mark{width:11px;height:11px;background:var(--red);box-shadow:17px 0 var(--blue),34px 0 var(--ink);margin-right:48px}
.brand-name{font-weight:700;letter-spacing:.06em;font-size:1rem;text-transform:uppercase}
/* Nav centrado en la página y más grande */
.site-nav{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:34px;
}
.site-nav a{color:inherit;text-decoration:none;text-transform:uppercase;font-weight:700;font-size:.95rem;letter-spacing:.09em;opacity:.85;transition:opacity .2s;padding-bottom:2px;border-bottom:2px solid transparent}
.site-nav a:hover{opacity:1;border-bottom-color:var(--red)}

/* ============================================================
   COMPOSICIÓN: columna central, contenido centrado
   ============================================================ */
main{position:relative;z-index:1}

.chapter{
  position:relative;
  min-height:72vh;
  width:100%;
  max-width:var(--measure);
  margin-inline:auto;
  padding:60px var(--gutter) 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Tarjeta + media grande, centradas como pareja */
.text-chapter{align-items:center}
.duo{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(28px,4vw,56px);width:100%;
}
/* Alternancia: en align-end la media pasa a la izquierda */
.text-chapter.align-end .chapter-media{order:-1}

/* Zonas de transformación entre bloques (solo scroll, sin texto)
   y separadores entre tarjetas del mismo bloque: MISMA altura → ritmo uniforme */
.morph{height:75vh;pointer-events:none}
.spacer{height:75vh;pointer-events:none}

/* ---------- Panel de texto ---------- */
.panel{
  position:relative;
  flex:0 1 590px;
  max-width:590px;
  padding:clamp(24px,3vw,38px);
  background:rgba(236,226,209,.86);
  border:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.panel::before{
  content:"";position:absolute;left:-1px;top:-1px;width:22px;height:22px;
  border-top:2px solid var(--red);border-left:2px solid var(--red);
}

/* Cuadradito-icono estilo cartel dentro del panel */
.panel-thumb{
  position:relative;margin:0 0 22px;width:72px;height:72px;
  border:1px solid var(--ink);padding:4px;background:var(--paper);
}
.panel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.panel-thumb::after{
  content:"";position:absolute;right:-5px;bottom:-5px;width:10px;height:10px;background:var(--red);
}

/* Media grande junto a la tarjeta */
.chapter-media{
  position:relative;margin:0;flex:0 1 520px;max-width:46%;
  border:1px solid var(--ink);padding:8px;background:var(--paper);
  box-shadow:0 18px 44px rgba(21,18,15,.16);
}
.chapter-media :is(img,video){width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.chapter-media::before{
  content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;background:var(--red);
}
.chapter-media::after{
  content:"";position:absolute;right:14px;bottom:14px;width:22px;height:22px;
  border-right:2px solid var(--paper);border-bottom:2px solid var(--paper);
  mix-blend-mode:difference;
}

/* ---------- Tipografía ---------- */
.eyebrow{
  margin:0 0 20px;font-weight:700;font-size:.85rem;
  letter-spacing:var(--track-wide);text-transform:uppercase;
  display:flex;align-items:center;gap:12px;color:var(--ink);
}
.eyebrow.center{justify-content:center}
.tick{display:inline-block;width:10px;height:10px;background:var(--red);flex:0 0 auto}
.tick.blue{background:var(--blue)}

.display-title,.section-title{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight:400;
  letter-spacing:.015em;
  word-spacing:.12em;
  line-height:1;
  margin:0;
}
.display-title{
  display:grid;
  font-size:clamp(3.8rem,8.8vw,8.6rem);
  line-height:.9;
  margin:0 0 20px;
}
.display-title em{font-style:normal;font-size:.36em;vertical-align:baseline;letter-spacing:.02em}
.red{color:var(--red)}

.section-title{
  font-size:clamp(2.35rem,5vw,4.25rem);
  margin:0 0 20px;
}
.section-title em{font-style:normal;color:var(--red)}
.section-title.center{text-align:center}

/* Reveal por líneas (estilo unseen): máscara + subida */
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line-in{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease-out)}
.is-revealed .line-in{transform:translateY(0)}
.is-revealed .line:nth-child(2) .line-in{transition-delay:.09s}
.is-revealed .line:nth-child(3) .line-in{transition-delay:.18s}

/* Reveal genérico (fade + up) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.is-revealed .reveal{opacity:1;transform:translateY(0)}
.is-revealed .reveal:nth-of-type(2){transition-delay:.08s}
.is-revealed .reveal:nth-of-type(3){transition-delay:.16s}
.is-revealed .reveal:nth-of-type(4){transition-delay:.24s}

/* ---------- Entrada de las tarjetas (contenedor) ---------- */
/* La tarjeta entra deslizando desde su lado + leve subida y escala */
.text-chapter .panel{
  opacity:0;
  transform:translate(0,42px) scale(.985);
  transition:opacity 1s var(--ease-out), transform 1.05s var(--ease-out);
  transition-delay:.12s;
  will-change:opacity, transform;
}
.text-chapter.align-start .panel{transform:translate(-46px,34px) scale(.985)}
.text-chapter.align-end   .panel{transform:translate(46px,34px) scale(.985)}
.text-chapter.is-revealed .panel{opacity:1;transform:translate(0,0) scale(1)}

/* El marco (con su sombra y esquina roja) entra con fade + leve escala... */
.chapter-media{
  opacity:0;
  transform:translateY(30px) scale(1.02);
  transition:opacity .9s ease, transform 1.1s var(--ease-out);
  will-change:opacity, transform;
}
.is-revealed .chapter-media{opacity:1;transform:translateY(0) scale(1)}
/* ...y la imagen se revela con un barrido (clip) dentro del marco */
.chapter-media :is(img,video){
  clip-path:inset(0 0 0 100%);
  transform:scale(1.08);
  transition:clip-path 1.2s var(--ease-out), transform 1.4s var(--ease-out);
  transition-delay:.1s;
  will-change:clip-path, transform;
}
.text-chapter.align-end .chapter-media :is(img,video){clip-path:inset(0 100% 0 0)} /* barre desde el otro lado */
.is-revealed .chapter-media :is(img,video){clip-path:inset(0 0 0 0);transform:scale(1)}
.text-chapter.align-end.is-revealed .chapter-media :is(img,video){clip-path:inset(0 0 0 0)}

.lead{
  max-width:660px;margin:0 0 20px;
  font-size:clamp(1.08rem,1.7vw,1.38rem);line-height:1.42;
}
.hero-note{
  max-width:600px;margin:-6px 0 22px;
  font-size:clamp(1rem,1.45vw,1.16rem);line-height:1.45;font-weight:700;color:var(--ink-soft);
}
.hero-inner p:not(.eyebrow) b,.lead b{color:var(--red);font-weight:700}

.panel p:not(.eyebrow){font-size:clamp(.98rem,1.25vw,1.14rem);line-height:1.48;margin:0 0 14px;color:var(--ink-soft)}
.panel p:not(.eyebrow):last-child{margin-bottom:0}
.panel .panel-note{
  margin-top:18px;padding-left:14px;border-left:3px solid var(--red);
  color:var(--ink);font-weight:700;font-size:clamp(.88rem,1vw,.98rem);
}

/* ---------- Hero ---------- */
.hero{align-items:center;text-align:left;min-height:100vh}
.hero-inner{position:relative;max-width:820px;margin-inline:auto}
.hero-inner::before{
  content:"";position:absolute;z-index:-1;inset:-8% -12%;
  background:radial-gradient(75% 62% at 42% 50%, rgba(236,226,209,.82), rgba(236,226,209,.5) 45%, rgba(236,226,209,0) 78%);
  filter:blur(6px);
}
@media(min-width:900px){.hero{padding-top:130px}}

.cta{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 26px;margin-top:6px;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.92rem;
  transition:transform .2s ease, background .2s ease;
}
.cta:hover{transform:translateY(-2px);background:var(--red)}
.cta-arrow{display:inline-block;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- Marcas de registro (esquinas), como el cartel ---------- */
.corner{position:absolute;width:26px;height:26px;opacity:.7}
.corner::before,.corner::after{content:"";position:absolute;background:var(--ink)}
.corner::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.corner::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%)}
.corner.tl{top:100px;left:var(--gutter)}
.corner.tr{top:100px;right:var(--gutter)}
.corner.tr::before{background:var(--red)}
.corner.bl{bottom:60px;left:var(--gutter)}
.corner.br{bottom:60px;right:var(--gutter)}
.corner.br::after{background:var(--red)}

/* ---------- Cierre / info ---------- */
.closing{align-items:center;text-align:center;min-height:100vh}
.closing-inner{
  position:relative;width:100%;max-width:840px;
  display:flex;flex-direction:column;align-items:center;
}
/* Halo de legibilidad detrás del cierre */
.closing-inner::before{
  content:"";position:absolute;z-index:-1;inset:-10% -14%;
  background:radial-gradient(70% 60% at 50% 46%, rgba(236,226,209,.85), rgba(236,226,209,.55) 48%, rgba(236,226,209,0) 80%);
  filter:blur(8px);
}
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin:34px 0 40px;width:100%;
}
.steps span{padding:22px 14px;background:rgba(236,226,209,.92);font-weight:700;font-size:.98rem}
.closing-lead{
  max-width:720px;margin:20px auto 0;
  font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.5;color:var(--ink-soft);font-weight:700;
}

.event-data{
  display:grid;grid-template-columns:repeat(3,auto);gap:clamp(24px,5vw,64px);
  justify-content:center;text-align:left;margin-bottom:38px;
  padding:clamp(20px,3vw,30px) clamp(24px,4vw,46px);
  background:rgba(236,226,209,.9);border:1px solid var(--line);
}
.event-key{display:flex;align-items:center;gap:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;margin-bottom:8px}
.event-val{display:block;font-weight:600;font-size:1.08rem;line-height:1.35;color:var(--ink)}

.welcome{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;word-spacing:.1em;font-size:clamp(1.3rem,3vw,2rem);line-height:1.1;margin:0 0 42px;max-width:680px}

/* Créditos con logos */
.credits{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3.5vw,42px);flex-wrap:wrap}
.credits .logo{display:block;height:40px;width:auto}
.credits .logo-artlab{height:30px}
.credits .logo-ubicuo{height:52px;filter:invert(1)}  /* el original es blanco */
.sep{width:1px;height:26px;background:var(--line)}

/* ---------- Índice lateral (números del recorrido, como el cartel) ---------- */
.side-index{
  position:fixed;right:clamp(14px,2.4vw,34px);top:50%;transform:translateY(-50%);
  z-index:42;display:flex;flex-direction:column;gap:16px;align-items:stretch;
  width:170px;padding:22px 32px 22px 18px;
  background:rgba(236,226,209,.58);border:1px solid rgba(21,18,15,.12);
  backdrop-filter:blur(8px);
  box-shadow:0 14px 34px rgba(21,18,15,.08);
  overflow:hidden;
  transition:width .28s var(--ease-out), background .28s ease, box-shadow .28s ease;
}
.side-index:hover,
.side-index:focus-within{
  width:min(470px,calc(100vw - 32px));
  background:rgba(236,226,209,.94);
  box-shadow:0 20px 46px rgba(21,18,15,.18);
}
.idx-rail{
  position:absolute;right:15px;top:26px;bottom:26px;width:2px;
  background:rgba(21,18,15,.18);
}
.idx-rail span{display:block;width:100%;height:0;background:var(--red)}
.idx-item{
  display:grid;grid-template-columns:72px minmax(0,1fr) 14px;align-items:center;gap:16px;
  min-height:82px;text-decoration:none;color:var(--ink);opacity:.58;
  transition:opacity .25s ease, transform .25s ease;
}
.idx-item:hover{opacity:1}
.idx-icon{
  width:72px;height:72px;border:1px solid rgba(21,18,15,.8);background:var(--ink);
  display:block;overflow:hidden;transform:translateX(3px);
  opacity:.18;transition:opacity .25s ease, transform .25s ease;
}
.idx-icon img{width:100%;height:100%;object-fit:cover;display:block}
.side-index:hover .idx-icon,
.side-index:focus-within .idx-icon{opacity:1;transform:translateX(0)}
.idx-card{display:flex;align-items:center;gap:13px;min-width:0}
.idx-num{
  flex:0 0 62px;font-family:var(--font-display);font-size:2.2rem;
  letter-spacing:.04em;line-height:1;color:var(--ink);
  transition:color .25s ease, font-size .25s ease;
}
.idx-copy{
  display:grid;gap:4px;min-width:0;opacity:0;transform:translateX(10px);
  transition:opacity .24s ease, transform .24s var(--ease-out);
}
.side-index:hover .idx-copy,
.side-index:focus-within .idx-copy{opacity:1;transform:translateX(0)}
.idx-copy strong{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:1.4rem;line-height:1;letter-spacing:.015em;white-space:nowrap;
}
.idx-copy small{
  font-size:.98rem;line-height:1.26;color:var(--ink-soft);font-weight:700;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.idx-dot{
  width:12px;height:12px;border:1.5px solid var(--ink);border-radius:50%;
  background:transparent;transition:background .25s ease, border-color .25s ease;
  transform:translateX(8px); /* centrado sobre el raíl */
}
.idx-item.is-active{opacity:1;transform:translateX(-4px)}
.idx-item.is-active .idx-num{color:var(--red);font-size:2.7rem}
.idx-item.is-active .idx-icon{opacity:1}
.idx-item.is-active .idx-dot{background:var(--red);border-color:var(--red)}

/* ---------- HUD ---------- */
.progress{position:fixed;left:0;right:0;bottom:0;height:4px;z-index:50;background:rgba(21,18,15,.1)}
.progress span{display:block;width:0;height:100%;background:var(--red)}

/* Botón de sonido */
.sound-toggle{
  position:fixed;right:16px;bottom:18px;z-index:46;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:rgba(236,226,209,.9);border:1px solid var(--ink);color:var(--ink);
  cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease;
}
.sound-toggle:hover{transform:translateY(-2px)}
.sound-toggle .icon-on{display:none}
.sound-toggle .icon-off{display:block}
.sound-toggle.is-on{background:var(--ink);color:var(--paper)}
.sound-toggle.is-on .icon-on{display:block}
.sound-toggle.is-on .icon-off{display:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(min-width:901px){
  .text-chapter{
    min-height:100vh;
    max-width:min(1900px,100vw);
    /* el padding derecho deja libre el índice lateral (colapsado ~215px) */
    padding:clamp(60px,6vh,90px) clamp(232px,15.5vw,270px) clamp(60px,6vh,90px) clamp(38px,4vw,84px);
  }
  .text-chapter .duo{
    gap:clamp(30px,3.4vw,64px);
    justify-content:center;
    align-items:stretch;
  }
  .text-chapter .panel{
    flex:1 1 720px;
    max-width:clamp(640px,44vw,900px);
    padding:clamp(38px,3.4vw,60px);
    display:flex;flex-direction:column;justify-content:center;
  }
  .text-chapter .chapter-media{
    flex:1 1 900px;
    max-width:clamp(640px,54vw,1040px);
    padding:12px;
    align-self:stretch;display:flex;
  }
  .text-chapter .chapter-media :is(img,video){
    width:100%;height:100%;
    max-height:clamp(460px,72vh,860px);
  }
  /* Tipografía un punto mayor para acompañar tarjetas más grandes */
  .text-chapter .section-title{font-size:clamp(2.8rem,4.4vw,4.9rem)}
  .text-chapter .panel p:not(.eyebrow){font-size:clamp(1.08rem,1.15vw,1.28rem);line-height:1.5}
  .text-chapter .panel-thumb{width:84px;height:84px}
  .text-chapter .eyebrow{font-size:.92rem}
}
@media(max-width:900px){
  .site-nav{display:none}
  .side-index{display:none}
  .reg-mark{margin-right:34px;box-shadow:13px 0 var(--blue),26px 0 var(--ink)}
  .brand-name{font-size:.85rem}
  .chapter{padding:80px 22px 60px;min-height:70vh}
  .panel{max-width:100%}
  .duo{flex-direction:column;gap:26px}
  .text-chapter.align-end .chapter-media{order:0}
  .chapter-media{max-width:78%;flex-basis:auto}
  .morph{height:70vh}
  .spacer{height:55vh}
  .event-data{grid-template-columns:1fr;gap:22px;text-align:center;justify-items:center}
  .event-key{justify-content:center}
  .steps{grid-template-columns:1fr 1fr}
  .corner{display:none}
  .credits .logo{height:32px}
  .credits .logo-artlab{height:24px}
  .credits .logo-ubicuo{height:42px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cta-arrow{animation:none}
  .line-in,.reveal,.text-chapter .panel,.chapter-media,.chapter-media :is(img,video){
    transform:none !important;opacity:1 !important;clip-path:none !important;transition:none !important;
  }
  .loader-squares .sq{animation:none}
}