/* ══════════════════════════════════════════
   Deck "Yahweh: El Nombre Revelado" — 20 slides
   Paleta heredada de la portada del libro
   ══════════════════════════════════════════ */

:root {
  --navy-900:#050b14;
  --navy-800:#0a1626;
  --gold-300:#f2e2b4;
  --gold-400:#e3c274;
  --gold-500:#c9962e;
  --gold-600:#a3761d;
  --cream:#f7f2e7;
  --cream-dim:#ded5c2;

  --serif:"Cinzel","Trajan Pro",Georgia,serif;
  --serif-text:"Cormorant Garamond",Georgia,serif;
  --sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }

html,body {
  margin:0; padding:0; height:100%;
  background:var(--navy-900);
  color:var(--cream);
  font-family:var(--sans); font-weight:300;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ═══ contenedor: scroll horizontal con snap ═══ */
.deck {
  display:flex;
  height:100%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.deck::-webkit-scrollbar { display:none; }

.slide {
  position:relative;
  flex:0 0 100%;
  width:100%; height:100%;
  scroll-snap-align:center;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(2rem,5vh,4rem) clamp(1.5rem,6vw,6rem);
  overflow:hidden;
}

/* fondo de imagen + velo navy para que el texto siempre lea */
.slide::before {
  content:""; position:absolute; inset:0;
  background-image:var(--bg);
  background-size:cover; background-position:center;
  transform:scale(1.04);
}
.slide::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(5,11,20,.94) 0%, rgba(5,11,20,.86) 42%, rgba(5,11,20,.55) 72%, rgba(5,11,20,.42) 100%),
    radial-gradient(120% 100% at 0% 50%, rgba(5,11,20,.55), transparent 70%);
}
.slide--title::after, .slide--cta::after,
.slide .center ~ *, .slide__in.center { }
.slide--title::after {
  background:radial-gradient(90% 90% at 50% 50%, rgba(5,11,20,.72) 0%, rgba(5,11,20,.93) 70%);
}
.slide--cta::after {
  background:linear-gradient(180deg, rgba(5,11,20,.90), rgba(5,11,20,.96));
}

/* slide final: portada del libro junto al botón de descarga.
   Doble clase a propósito: .slide__in se declara más abajo con la misma
   especificidad y su max-width de 64ch estrangularía esta columna. */
.slide__in.slide__in--book {
  display:flex; align-items:center; gap:clamp(1.5rem,4vw,4rem);
  max-width:min(62rem,100%); margin:0 auto;
}
.slide__in--book h2 { font-size:clamp(1.6rem,3.6vw,2.9rem); }
.book {
  flex:0 0 clamp(150px,17vw,260px);
  width:clamp(150px,17vw,260px); height:auto;
  border-radius:3px;
  border:1px solid rgba(201,150,46,.45);
  box-shadow:0 2px 4px rgba(0,0,0,.5), 0 20px 55px rgba(0,0,0,.7), 0 0 70px rgba(201,150,46,.16);
}
.book__copy { flex:1; min-width:0; }
.book__copy .lead { max-width:42ch; }

@media (max-width:760px) {
  .slide__in--book { flex-direction:column; gap:1.2rem; text-align:center; }
  .book { flex:0 0 auto; width:min(140px,32vw); }
  .book__copy .lead { margin-inline:auto; }
}
@media (max-height:560px) {
  .book { display:none; }
}

.slide__in {
  position:relative; z-index:2;
  width:100%; max-width:min(64ch, 100%);
  margin-right:auto;
}
.slide__in.center { margin:0 auto; text-align:center; max-width:min(58ch,100%); }
.center-x { margin-left:auto; margin-right:auto; }

/* ═══ tipografía ═══ */

.eyebrow {
  font-size:clamp(.62rem,1.1vw,.75rem); font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-400); margin:0 0 clamp(.8rem,2vh,1.4rem);
}
.eyebrow i { font-style:normal; color:var(--gold-600); margin:0 .2em; }

.t-hero {
  font-family:var(--serif); font-weight:700;
  font-size:clamp(3.2rem,11vw,8rem); line-height:.9;
  letter-spacing:.03em; margin:0;
  background:linear-gradient(176deg,#fbf3d8 0%,#e9cd8a 34%,#c9962e 70%,#9a6d18 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.t-sub {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1rem,3vw,2rem); letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream);
  margin:clamp(.6rem,1.6vh,1.1rem) 0 0;
}
.t-lede {
  font-family:var(--serif-text); font-style:italic;
  font-size:clamp(1rem,2.1vw,1.4rem); color:var(--cream-dim);
  margin:0 auto; max-width:34ch;
}
.t-author {
  font-family:var(--serif); font-size:clamp(.72rem,1.5vw,.95rem);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-300); margin:clamp(1.4rem,4vh,2.6rem) 0 0;
}

h2 {
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.7rem,4.6vw,3.4rem); line-height:1.08;
  letter-spacing:.02em; margin:0 0 clamp(1rem,2.5vh,1.8rem);
  color:var(--gold-300);
}
h2 i { font-style:italic; font-family:var(--serif-text); }
.h2--tight { margin-bottom:clamp(.8rem,2vh,1.3rem); }

.lead {
  font-family:var(--serif-text);
  font-size:clamp(1.02rem,2.05vw,1.42rem); line-height:1.55;
  color:var(--cream-dim);
  margin:0 0 clamp(.8rem,2vh,1.3rem); max-width:56ch;
}
.lead i { color:var(--gold-300); }

.pull {
  font-family:var(--serif-text); font-style:italic; font-weight:600;
  font-size:clamp(1.15rem,2.6vw,1.85rem); line-height:1.4;
  color:var(--gold-300);
  border-left:2px solid var(--gold-500);
  padding-left:clamp(1rem,2vw,1.6rem);
  margin:0 0 clamp(1rem,2.5vh,1.6rem); max-width:48ch;
}
.slide__in.center .pull { border-left:none; padding-left:0; }

.note {
  font-size:clamp(.8rem,1.5vw,.95rem); color:var(--cream-dim);
  opacity:.72; margin:clamp(.6rem,1.5vh,1rem) 0 0; max-width:52ch;
}
.note--dim { opacity:.45; }

.verse {
  font-family:var(--serif-text); font-style:italic;
  font-size:clamp(1.05rem,2.3vw,1.6rem); line-height:1.5;
  color:var(--cream); margin:0 0 clamp(.9rem,2vh,1.4rem);
  padding:clamp(.9rem,2vh,1.4rem) clamp(1rem,2.5vw,1.8rem);
  border-left:3px solid var(--gold-500);
  background:rgba(201,150,46,.07);
  max-width:52ch;
}
.verse--center { border-left:none; border-top:1px solid rgba(201,150,46,.4); border-bottom:1px solid rgba(201,150,46,.4); margin-inline:auto; }
.verse cite {
  display:block; margin-top:.7rem;
  font-family:var(--serif); font-style:normal;
  font-size:clamp(.65rem,1.2vw,.78rem); letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-400);
}

.hebrew {
  font-family:var(--serif-text);
  font-size:clamp(3.4rem,11vw,7.5rem); line-height:1;
  direction:rtl; margin:0 0 clamp(.6rem,2vh,1.2rem);
  background:linear-gradient(176deg,#fbf3d8,#c9962e 60%,#8f6516);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hebrew--sm { font-size:clamp(1.8rem,5.5vw,3.4rem); }

.refs { list-style:none; padding:0; margin:0 0 clamp(.9rem,2vh,1.4rem); }
.refs li {
  font-family:var(--serif-text);
  font-size:clamp(.98rem,1.95vw,1.3rem); line-height:1.45;
  color:var(--cream-dim);
  padding:.5rem 0 .5rem 1.4rem; position:relative;
  border-bottom:1px solid rgba(203,184,148,.14);
}
.refs li::before { content:"❖"; position:absolute; left:0; color:var(--gold-500); font-size:.7em; top:.85em; }
.refs b { color:var(--gold-300); font-weight:400; }

/* comparación nombre/título */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:clamp(.8rem,2vw,1.6rem); margin-top:clamp(.5rem,1.5vh,1rem); }
.compare__col {
  border-top:2px solid rgba(203,184,148,.3);
  padding-top:clamp(.7rem,1.6vh,1.1rem);
  display:flex; flex-direction:column; gap:.4rem;
}
.compare__col--gold { border-top-color:var(--gold-500); }
.compare__lbl { font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-600); }
.compare__col--gold .compare__lbl { color:var(--gold-400); }
.compare__val { font-family:var(--serif-text); font-size:clamp(1.05rem,2.2vw,1.5rem); color:var(--cream); }
.compare__col--gold .compare__val { color:var(--gold-300); }
.compare__note { font-size:.82rem; color:var(--cream-dim); opacity:.7; }

/* desglose Ehyeh Asher Ehyeh */
.tri { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.7rem,2vw,1.6rem); margin-top:clamp(.8rem,2vh,1.4rem); }
.tri__it { display:flex; flex-direction:column; gap:.35rem; padding-top:.9rem; border-top:1px solid rgba(201,150,46,.35); }
.tri__he { font-family:var(--serif-text); font-size:clamp(1.2rem,3vw,2rem); color:var(--gold-400); direction:rtl; }
.tri__tr { font-family:var(--serif); font-size:clamp(.8rem,1.5vw,1rem); letter-spacing:.1em; color:var(--cream); }
.tri__gl { font-size:clamp(.72rem,1.3vw,.85rem); color:var(--cream-dim); opacity:.75; }

.orn { display:flex; align-items:center; justify-content:center; gap:1rem; color:var(--gold-500); font-size:.85rem; margin:clamp(1rem,2.5vh,1.8rem) auto; max-width:22rem; }
.orn span { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(201,150,46,.6),transparent); }

.btn-gold {
  display:inline-block; margin:clamp(1.2rem,3vh,2rem) 0 clamp(.8rem,2vh,1.2rem);
  font-family:var(--serif); font-weight:600;
  font-size:clamp(.82rem,1.6vw,1rem); letter-spacing:.14em; text-transform:uppercase;
  color:#2a1e05; text-decoration:none;
  background:linear-gradient(178deg,#f0d795,#d9a93f 45%,#b8871f);
  border-radius:3px; padding:clamp(.9rem,2vh,1.2rem) clamp(1.8rem,4vw,3rem);
  box-shadow:0 6px 26px rgba(201,150,46,.32);
  transition:transform .15s, box-shadow .2s, filter .2s;
}
.btn-gold:hover { filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 10px 34px rgba(201,150,46,.45); }

/* ═══ controles ═══ */

.progress { position:fixed; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,.08); z-index:40; }
.progress i { display:block; height:100%; width:5%; background:linear-gradient(90deg,#a3761d,#f2e2b4); transition:width .3s; }

.nav {
  position:fixed; top:50%; transform:translateY(-50%);
  width:clamp(38px,5vw,54px); height:clamp(38px,5vw,54px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.2rem); line-height:1;
  color:var(--gold-300);
  background:rgba(5,11,20,.55); border:1px solid rgba(201,150,46,.35);
  border-radius:50%; cursor:pointer; z-index:40;
  transition:background .2s, opacity .2s;
}
.nav:hover { background:rgba(201,150,46,.28); }
.nav[disabled] { opacity:.22; cursor:default; }
.nav--prev { left:clamp(.5rem,1.5vw,1.4rem); padding-right:3px; }
.nav--next { right:clamp(.5rem,1.5vw,1.4rem); padding-left:3px; }

.hud {
  position:fixed; top:clamp(.7rem,2vh,1.3rem); right:clamp(.7rem,2vw,1.4rem);
  display:flex; align-items:center; gap:.5rem; z-index:40;
}
.hud__btn {
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--gold-300); text-decoration:none;
  background:rgba(5,11,20,.55); border:1px solid rgba(201,150,46,.3);
  border-radius:3px; cursor:pointer; transition:background .2s;
}
.hud__btn:hover { background:rgba(201,150,46,.25); }
.hud__count {
  font-family:var(--serif); font-size:.8rem; letter-spacing:.1em;
  color:var(--cream-dim); padding:0 .5rem;
}
.hud__count b { color:var(--gold-300); font-weight:600; }

.dots {
  position:fixed; bottom:clamp(.7rem,2vh,1.2rem); left:50%; transform:translateX(-50%);
  display:flex; gap:.42rem; z-index:40; max-width:90vw; flex-wrap:wrap; justify-content:center;
}
.dots button {
  width:7px; height:7px; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(222,213,194,.28); border:none; transition:background .2s, transform .2s;
}
.dots button:hover { background:var(--gold-400); }
.dots button[aria-selected="true"] { background:var(--gold-400); transform:scale(1.5); }

.hint {
  position:fixed; bottom:clamp(.6rem,1.8vh,1.1rem); left:clamp(.8rem,2vw,1.5rem);
  font-size:.72rem; color:var(--cream-dim); opacity:.4; margin:0; z-index:40;
  transition:opacity .5s;
}
.hint b { color:var(--gold-400); font-weight:400; }
.hint.gone { opacity:0; pointer-events:none; }

/* índice */
.index {
  position:fixed; inset:0; z-index:60;
  background:rgba(5,11,20,.93); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:2rem 1.5rem;
  overflow-y:auto;
}
/* imprescindible: display:flex anula el atributo hidden y el overlay
   se queda invisible pero tapando la pantalla entera */
.index[hidden] { display:none; }
.index__box { width:100%; max-width:720px; }
.index__title {
  font-family:var(--serif); font-size:1.4rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-300); text-align:center; margin:0 0 1.5rem;
}
.index__list { list-style:none; counter-reset:i; padding:0; margin:0 0 1.8rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:.15rem 1.5rem; }
.index__list li { counter-increment:i; }
.index__list button {
  width:100%; text-align:left; cursor:pointer;
  background:none; border:none; border-bottom:1px solid rgba(203,184,148,.12);
  color:var(--cream-dim); font-family:var(--serif-text); font-size:1.02rem;
  padding:.6rem 0 .6rem 2.4rem; position:relative;
  transition:color .2s, background .2s;
}
.index__list button::before {
  content:counter(i); position:absolute; left:0; top:.66rem;
  font-family:var(--serif); font-size:.72rem; color:var(--gold-600); letter-spacing:.08em;
}
.index__list button:hover { color:var(--gold-300); }
.index__close {
  display:block; margin:0 auto; cursor:pointer;
  font-family:var(--serif); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-300); background:none; border:1px solid var(--gold-500);
  border-radius:3px; padding:.7rem 2rem;
}
.index__close:hover { background:var(--gold-500); color:var(--navy-900); }

/* ═══ responsive ═══ */

@media (max-width:760px) {
  .slide::after {
    background:linear-gradient(180deg, rgba(5,11,20,.88) 0%, rgba(5,11,20,.93) 60%, rgba(5,11,20,.96) 100%);
  }
  .compare, .tri { grid-template-columns:1fr; gap:.7rem; }
  .hint { display:none; }
  .nav { width:34px; height:34px; font-size:1.3rem; }
  .slide__in { max-width:100%; }
}

@media (max-height:520px) {
  .slide { padding:1.2rem 3.5rem; }
  .hint, .dots { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .deck { scroll-behavior:auto; }
  * { transition:none !important; }
}