/* ===========================================================
   Janay Pacha: El Reino de la Bruma — hoja de estilos LIMPIA (app.css)
   =========================================================== */
:root {
  --cream:#f6eedb; --cream-deep:#ece0c4; --ink:#2b2217; --ink-soft:#5f5340;
  --gold:#c89234; --gold-soft:#f2d795; --gold-deep:#946317; --ember:#bf5630;
  --line:rgba(149,102,26,.30); --card:rgba(255,252,244,.78);
  --shadow:0 30px 70px rgba(70,48,12,.22);
  --font-deco:"Cinzel Decorative","Cinzel",Georgia,serif;
  --font-display:"Cinzel","Trajan Pro",Georgia,serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --maxw:1180px;
}
* { box-sizing:border-box; min-width:0; }
html { scroll-behavior:smooth; }
html, body { width:100%; max-width:100%; overflow-x:hidden; }
body {
  margin:0; font-family:var(--font-body); color:var(--ink); line-height:1.7;
  background-color:var(--cream-deep);
  background:
    radial-gradient(120% 70% at 18% 0%, rgba(246,213,140,.55) 0%, rgba(246,213,140,0) 45%),
    radial-gradient(130% 80% at 88% 6%, rgba(232,196,130,.40) 0%, rgba(232,196,130,0) 50%),
    radial-gradient(150% 95% at 50% -8%, #fbf4e1 0%, #f1e6cc 32%, #e3e4d4 64%, #d9dbcb 100%);
  background-attachment:fixed;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:var(--font-display); font-weight:700; line-height:1.12; }
.eyebrow { text-transform:uppercase; letter-spacing:.32em; font-size:.74rem; color:var(--gold-deep); font-weight:700; margin:0 0 .8rem; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.4rem); }

/* ============ BIENVENIDA (veil) ============ */
.veil {
  position:fixed; inset:0; z-index:9000; background:#140d05;
  display:block; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  transition:opacity 1s ease, visibility 1s ease;
}
.veil.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.veil-bg { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.veil-scrim { position:fixed; inset:0; z-index:1;
  background:
    radial-gradient(96% 72% at 50% 44%, rgba(22,14,4,.22) 0%, rgba(20,13,4,.55) 52%, rgba(10,7,2,.85) 100%),
    linear-gradient(180deg, rgba(16,11,3,.6) 0%, rgba(16,11,3,.2) 32%, rgba(10,7,2,.8) 100%);
}
.veil-inner {
  position:relative; z-index:2; min-height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0 auto; max-width:540px; padding:5vh 1.3rem; text-align:center;
  animation:floatUp 1.2s ease both;
}
.veil-sun { width:clamp(56px,11vw,84px); margin:0 auto .7rem; filter:drop-shadow(0 0 30px rgba(232,176,75,.55)); animation:spinSlow 90s linear infinite; }
.veil .eyebrow { color:var(--gold-soft); font-size:.62rem; letter-spacing:.26em; margin:0 0 .5rem; }
.veil .title-img { width:clamp(150px,46vw,200px); margin:0 auto; line-height:0; }
.veil .title-img img { width:100%; filter:drop-shadow(0 3px 18px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(232,176,75,.3)); }
.veil-subtitle {
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; font-size:clamp(.72rem,3.4vw,.92rem); color:var(--gold-soft);
  margin:.5rem 0 0; display:flex; align-items:center; justify-content:center; gap:.7rem;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.veil-subtitle::before, .veil-subtitle::after { content:""; height:1px; width:clamp(20px,7vw,52px); background:linear-gradient(90deg,transparent,var(--gold-soft)); }
.veil-subtitle::after { background:linear-gradient(90deg,var(--gold-soft),transparent); }
.veil-inner > p:not(.veil-subtitle) { color:#ecdfc7; font-size:.88rem; line-height:1.55; margin:.8rem auto 1.1rem; max-width:38ch; text-shadow:0 2px 10px rgba(0,0,0,.55); }
.veil-langs { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.enter-btn {
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display);
  font-size:.84rem; letter-spacing:.1em; text-transform:uppercase; padding:.74rem 1.5rem;
  border-radius:999px; border:none; cursor:pointer; color:#2a1d07;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold) 55%,var(--gold-deep));
  box-shadow:0 14px 36px rgba(200,146,52,.42), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .3s ease, box-shadow .3s ease;
}
.enter-btn:hover { transform:translateY(-3px) scale(1.03); }
.enter-btn.ghost { color:var(--gold-soft); background:rgba(255,255,255,.12); border:1.5px solid rgba(244,215,140,.5); box-shadow:0 10px 24px rgba(0,0,0,.3); backdrop-filter:blur(4px); }
.enter-btn.ghost:hover { background:rgba(255,255,255,.22); border-color:var(--gold-soft); }

/* ============ HEADER ============ */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem clamp(1rem,4vw,2.4rem);
  background:linear-gradient(180deg, rgba(246,238,219,.94), rgba(246,238,219,0));
  backdrop-filter:blur(10px); transition:background .4s ease, box-shadow .4s ease;
}
.site-header.solid { background:rgba(248,241,224,.96); box-shadow:0 10px 34px rgba(90,64,18,.16); }
.brand { display:flex; align-items:center; gap:.6rem; font-family:var(--font-deco); font-size:1.2rem; letter-spacing:.04em; color:var(--gold-deep); }
.brand-sun { position:relative; display:grid; place-items:center; width:46px; height:46px; flex:none; }
.brand-sun::before { content:""; position:absolute; inset:-5px; border-radius:50%; background:radial-gradient(circle, rgba(246,213,140,.8) 0%, rgba(232,176,75,.32) 45%, transparent 72%); animation:pulseGlow 4.5s ease-in-out infinite; }
.brand-sun img { position:relative; z-index:1; width:46px; height:46px; filter:drop-shadow(0 0 12px rgba(232,176,75,.8)); animation:spinSlow 60s linear infinite; }
.nav { display:flex; gap:.3rem; background:rgba(255,252,244,.72); border:1px solid var(--line); border-radius:999px; padding:.4rem .6rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
.nav a { font-family:var(--font-display); text-transform:uppercase; font-size:.8rem; font-weight:700; letter-spacing:.1em; color:var(--ink); padding:.5rem 1rem; border-radius:999px; transition:.25s; }
.nav a:hover { color:var(--gold-deep); background:rgba(200,146,52,.16); }
.header-right { display:flex; align-items:center; gap:.8rem; }
.cta { display:inline-flex; align-items:center; justify-content:center; line-height:1; white-space:nowrap; font-family:var(--font-display); letter-spacing:.06em; padding:.62rem 1.4rem; border-radius:999px; border:none; cursor:pointer; font-size:.95rem; background:linear-gradient(135deg,var(--gold-soft),var(--gold) 60%,var(--gold-deep)); color:#2a1d07; font-weight:700; box-shadow:0 10px 26px rgba(200,146,52,.34); transition:transform .25s ease; }
.cta:hover { transform:translateY(-2px); }
.menu-toggle { display:none; background:rgba(255,252,244,.7); border:1px solid var(--line); color:var(--gold-deep); font-size:1.4rem; cursor:pointer; width:46px; height:46px; border-radius:12px; align-items:center; justify-content:center; }
.mobile-nav { position:fixed; inset:0; z-index:9700; background:rgba(248,241,224,.98); display:grid; place-content:center; gap:1.2rem; text-align:center; opacity:0; visibility:hidden; transition:.4s; }
.mobile-nav.open { opacity:1; visibility:visible; }
.mobile-nav a { font-family:var(--font-deco); font-size:1.4rem; color:var(--ink-soft); }
.mobile-nav a:hover { color:var(--gold-deep); }

/* ============ HERO ============ */
.hero { position:relative; min-height:100svh; display:grid; align-items:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.05); }
.hero-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(43,30,10,.74) 0%, rgba(48,34,12,.4) 46%, rgba(60,46,18,.1) 100%), linear-gradient(180deg, rgba(40,30,12,.1), rgba(36,26,10,.5)); }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:24%; z-index:3; background:linear-gradient(180deg, rgba(227,228,212,0) 0%, var(--cream-deep) 100%); pointer-events:none; }
.hero-content { position:relative; z-index:5; width:100%; }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.hero-copy { animation:floatUp 1s ease both; }
.hero .hero-title-img { width:clamp(190px,34vw,320px); margin:0 0 .5rem; line-height:0; }
.hero .hero-title-img img { width:100%; filter:drop-shadow(0 8px 28px rgba(0,0,0,.5)); }
.hero-title-sub { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.2em; font-size:clamp(1rem,2.4vw,1.5rem); color:var(--gold-soft); margin:0 0 1.3rem; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.hero-lead { font-size:clamp(1rem,2vw,1.2rem); color:#f4ead4; max-width:38ch; margin:0 0 1.7rem; text-shadow:0 2px 14px rgba(0,0,0,.45); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.7rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-display); letter-spacing:.07em; font-size:.96rem; padding:.92rem 1.8rem; border-radius:999px; cursor:pointer; border:none; transition:transform .25s ease, box-shadow .25s ease; }
.button.primary { background:linear-gradient(135deg,var(--gold-soft),var(--gold) 55%,var(--gold-deep)); color:#2a1d07; font-weight:700; box-shadow:0 16px 40px rgba(200,146,52,.42); }
.button.primary:hover { transform:translateY(-3px); }
.button.secondary { background:rgba(255,255,255,.16); color:#fff; border:1.5px solid rgba(255,255,255,.5); backdrop-filter:blur(4px); }
.button.secondary:hover { transform:translateY(-3px); background:rgba(255,255,255,.28); }
.button.wide { width:100%; }
.trust { display:flex; flex-wrap:wrap; gap:1rem 1.6rem; padding-top:.4rem; }
.trust div { border-left:2px solid rgba(255,255,255,.45); padding-left:.9rem; }
.trust dt { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin:0; }
.trust dd { margin:.15rem 0 0; font-family:var(--font-display); font-size:1.02rem; color:#fff; }
.hero-cover { position:relative; margin:0; justify-self:center; }
.hero-cover img { width:clamp(220px,28vw,330px); }
.portal-ring { position:absolute; inset:-24px; border-radius:50%; border:1px solid rgba(232,176,75,.4); box-shadow:0 0 60px rgba(232,176,75,.3), inset 0 0 50px rgba(232,176,75,.18); animation:pulseGlow 5s ease-in-out infinite; z-index:-1; }
.scroll-hint { position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:6; color:rgba(255,250,238,.85); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.scroll-hint span { width:1px; height:34px; background:linear-gradient(var(--gold-soft),transparent); animation:scrollPulse 2s ease-in-out infinite; }

/* ============ SECCIONES ============ */
section { position:relative; }
.band { padding:clamp(4rem,9vw,7rem) 0; }
.section-heading { max-width:780px; margin:0 auto clamp(2rem,5vw,3rem); text-align:center; }
.section-heading h2 { font-size:clamp(1.7rem,4vw,2.8rem); margin:0; color:var(--ink); }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.story-copy p { color:var(--ink-soft); margin:0 0 1.1rem; font-size:1.06rem; line-height:1.7; }
.story-art img { border-radius:16px; box-shadow:var(--shadow); border:1px solid var(--line); }

/* ============ MAPA ============ */
.map-section { padding:clamp(4rem,9vw,7rem) 0; background:radial-gradient(80% 60% at 50% 0%, rgba(232,196,130,.3), transparent 70%); }
.map-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:200px; gap:1rem; }
.portal { position:relative; border-radius:16px; overflow:hidden; cursor:pointer; border:1px solid var(--line); box-shadow:0 18px 44px rgba(80,56,16,.22); isolation:isolate; }
.portal img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.portal::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,20,6,0) 38%, rgba(30,20,6,.82) 100%); z-index:1; }
.portal-label { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.1rem 1.2rem; transform:translateY(6px); transition:transform .4s ease; }
.portal-label h3 { margin:0; font-family:var(--font-deco); font-size:clamp(1.1rem,1.8vw,1.45rem); color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.85); }
.portal-open { position:absolute; top:.9rem; right:.9rem; z-index:3; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:rgba(232,176,75,.32); border:1px solid rgba(255,255,255,.4); color:#fff; opacity:0; transform:scale(.8); transition:.4s; }
.portal:hover img { transform:scale(1.08); }
.portal:hover .portal-label { transform:translateY(0); }
.portal:hover .portal-open { opacity:1; transform:scale(1); }
.portal:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.portal.size-xl { grid-column:span 6; grid-row:span 2; }
.portal.size-lg { grid-column:span 6; }
.portal.size-md { grid-column:span 4; }
.portal.size-tall { grid-column:span 3; grid-row:span 2; }

/* ============ MODAL IMAGEN ============ */
.modal { position:fixed; inset:0; z-index:9500; display:grid; place-items:center; padding:clamp(1rem,4vw,2.5rem); background:rgba(30,21,6,.55); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:.4s; }
.modal.open { opacity:1; visibility:visible; }
.modal-card { display:grid; grid-template-columns:1.15fr .85fr; max-width:980px; width:100%; max-height:88vh; background:linear-gradient(160deg,#fbf4e2,#efe3c8); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); transform:scale(.94); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.modal.open .modal-card { transform:scale(1); }
.modal-media { position:relative; min-height:300px; }
.modal-media img { width:100%; height:100%; object-fit:cover; }
.modal-body { padding:clamp(1.6rem,3vw,2.4rem); overflow-y:auto; }
.modal-body .k { color:var(--gold-deep); letter-spacing:.18em; text-transform:uppercase; font-size:.74rem; font-weight:700; }
.modal-body h3 { font-family:var(--font-deco); font-size:clamp(1.5rem,3vw,2.1rem); margin:.5rem 0 1rem; color:var(--ink); }
.modal-body p { color:var(--ink-soft); margin:0; }
.modal-close { position:absolute; top:1rem; right:1rem; z-index:10; width:44px; height:44px; border-radius:50%; background:rgba(43,34,16,.65); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:1.3rem; cursor:pointer; }
.modal-close:hover { background:var(--ember); }
.modal-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:46px; height:46px; border-radius:50%; background:rgba(43,34,16,.55); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:1.4rem; cursor:pointer; }
.modal-nav:hover { background:var(--gold); color:#2a1d07; }
.modal-prev { left:1rem; } .modal-next { right:1rem; }

/* ============ MODAL DE COMPRA ============ */
.buy-modal { position:fixed; inset:0; z-index:9600; display:grid; place-items:center; padding:1.2rem; background:rgba(20,13,4,.66); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:.35s; }
.buy-modal.open { opacity:1; visibility:visible; }
.buy-card { position:relative; width:100%; max-width:460px; text-align:center; background:linear-gradient(160deg,#fbf4e2,#efe1c2); border:1px solid var(--line); border-radius:20px; padding:2.1rem 1.6rem 1.8rem; box-shadow:var(--shadow); transform:scale(.94); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.buy-modal.open .buy-card { transform:scale(1); }
.buy-kicker { color:var(--gold-deep); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; font-weight:700; margin:0 0 .35rem; }
.buy-card h3 { font-family:var(--font-deco); color:var(--ink); font-size:clamp(1.2rem,3.4vw,1.6rem); margin:0 0 1.3rem; }
.buy-close { position:absolute; top:.8rem; right:.8rem; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:rgba(43,34,16,.08); color:var(--ink); font-size:1.1rem; cursor:pointer; transition:.25s; }
.buy-close:hover { background:var(--ember); color:#fff; transform:rotate(90deg); }
.buy-options { display:grid; gap:.9rem; }
.buy-opt { display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:1rem 1.2rem; border-radius:14px; transition:transform .2s ease; }
.buy-opt:hover { transform:translateY(-3px); }
.buy-opt-name { font-family:var(--font-display); font-weight:700; font-size:1.3rem; letter-spacing:.04em; }
.buy-opt-sub { font-size:.82rem; opacity:.92; }
.buy-opt.hotmart { background:linear-gradient(135deg,var(--gold-soft),var(--gold) 55%,var(--gold-deep)); color:#2a1d07; box-shadow:0 12px 30px rgba(200,146,52,.34); }
.buy-opt.amazon { background:linear-gradient(135deg,#ffb454,#f0851c); color:#241405; box-shadow:0 12px 30px rgba(240,133,28,.32); }

/* ============ PERSONAJES ============ */
.chars-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.char-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.8rem 1.4rem; text-align:center; box-shadow:0 14px 34px rgba(110,80,26,.12); transition:.35s; }
.char-card:hover { transform:translateY(-6px); border-color:var(--gold); }
.char-num { font-family:var(--font-deco); font-size:2.4rem; color:var(--gold); opacity:.75; }
.char-card h3 { font-family:var(--font-deco); margin:.2rem 0 .6rem; color:var(--gold-deep); }
.char-card p { color:var(--ink-soft); font-size:.96rem; margin:0; }

/* ============ CITA ============ */
.quote { position:relative; min-height:60vh; display:grid; place-items:center; text-align:center; overflow:hidden; }
.quote img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.quote::after { content:""; position:absolute; inset:0; background:rgba(36,26,10,.58); z-index:1; }
.quote blockquote { position:relative; z-index:2; max-width:800px; padding:0 1.5rem; font-family:var(--font-deco); font-size:clamp(1.4rem,3.4vw,2.3rem); line-height:1.4; color:#fff8ea; text-shadow:0 4px 26px rgba(0,0,0,.7); margin:0; }

/* ============ OFERTA ============ */
.offer { display:grid; grid-template-columns:1fr .8fr; gap:clamp(1.5rem,5vw,4rem); align-items:center; }
.offer-copy p { color:var(--ink-soft); font-size:1.06rem; line-height:1.7; }
.price-panel { background:linear-gradient(160deg,#fbf4e2,#efe1c2); border:1px solid var(--line); border-radius:20px; padding:2rem; text-align:center; box-shadow:var(--shadow); }
.price-panel img { width:clamp(200px,60%,260px); margin:0 auto 1.2rem; }
.price-label { color:var(--ink-soft); margin:0; letter-spacing:.1em; text-transform:uppercase; font-size:.8rem; }
.price { font-family:var(--font-deco); font-size:3rem; color:var(--gold-deep); margin:.1rem 0 1rem; }

/* ============ FAQ ============ */
.faq-list { max-width:780px; margin:0 auto; }
.faq-item { border:1px solid var(--line); border-radius:14px; margin-bottom:.9rem; overflow:hidden; background:var(--card); }
.faq-item summary { cursor:pointer; padding:1.1rem 1.4rem; font-family:var(--font-display); font-size:1.05rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; color:var(--gold-deep); font-size:1.5rem; transition:transform .3s ease; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { padding:0 1.4rem 1.2rem; margin:0; color:var(--ink-soft); line-height:1.6; }

/* ============ CTA FINAL + FOOTER ============ */
.final-cta { text-align:center; padding:clamp(4rem,9vw,7rem) 0; background:radial-gradient(80% 70% at 50% 50%, rgba(232,196,130,.42), transparent 70%); }
.final-cta h2 { font-family:var(--font-deco); font-size:clamp(1.9rem,4.4vw,3rem); margin:0 0 1.6rem; color:var(--ink); }
.footer { text-align:center; padding:2.4rem 1rem; color:var(--ink-soft); font-size:.86rem; border-top:1px solid var(--line); background:rgba(236,224,196,.6); }
.footer a { color:var(--gold-deep); font-weight:600; }

/* ============ REPRODUCTOR ============ */
.player { position:fixed; z-index:850; right:clamp(.7rem,3vw,1.6rem); bottom:clamp(.7rem,3vw,1.6rem); display:flex; align-items:center; gap:.7rem; padding:.5rem .85rem .5rem .55rem; background:rgba(252,246,232,.94); border:1px solid var(--line); border-radius:999px; box-shadow:0 14px 36px rgba(90,64,18,.22); backdrop-filter:blur(10px); }
.player-btn { width:46px; height:46px; flex:none; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center; background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep)); color:#2a1d07; box-shadow:0 6px 16px rgba(200,146,52,.45); }
.player-btn svg { width:20px; height:20px; }
.player-info { display:flex; flex-direction:column; line-height:1.1; padding-right:.4rem; max-width:0; overflow:hidden; opacity:0; transition:max-width .5s ease, opacity .4s ease; }
.player:hover .player-info, .player.playing .player-info { max-width:190px; opacity:1; }
.player-info .t { font-family:var(--font-display); font-size:.82rem; color:var(--gold-deep); white-space:nowrap; }
.player-info .s { font-size:.7rem; color:var(--ink-soft); white-space:nowrap; }
.eq { display:flex; align-items:flex-end; gap:2px; height:18px; padding-right:.3rem; }
.eq span { width:3px; height:4px; background:var(--gold); border-radius:2px; }
.player.playing .eq span { animation:eq .9s ease-in-out infinite; }
.player.playing .eq span:nth-child(2){animation-delay:.15s;} .player.playing .eq span:nth-child(3){animation-delay:.3s;} .player.playing .eq span:nth-child(4){animation-delay:.45s;}

/* ============ REVEAL + ANIM ============ */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .9s ease, transform .9s ease; }
.reveal.show { opacity:1; transform:none; }
@keyframes floatUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:none;} }
@keyframes spinSlow { to{transform:rotate(360deg);} }
@keyframes pulseGlow { 0%,100%{filter:drop-shadow(0 0 28px rgba(232,176,75,.45));} 50%{filter:drop-shadow(0 0 52px rgba(232,176,75,.7));} }
@keyframes scrollPulse { 0%,100%{opacity:.3;} 50%{opacity:1;} }
@keyframes eq { 0%,100%{height:4px;} 50%{height:18px;} }

/* ============ RESPONSIVE ============ */
@media (max-width:920px) {
  .nav { display:none; }
  .menu-toggle { display:inline-flex; }
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .hero-copy { order:2; }
  .hero-cover { order:1; margin-bottom:1rem; }
  .hero .hero-title-img { margin-left:auto; margin-right:auto; }
  .hero-lead { margin-left:auto; margin-right:auto; }
  .hero-actions, .trust { justify-content:center; }
  .story-grid, .offer { grid-template-columns:1fr; }
  .chars-grid { grid-template-columns:1fr 1fr; }
  .modal-card { grid-template-columns:1fr; }
  .modal-media { min-height:220px; max-height:36vh; }
  .map-grid { grid-auto-rows:170px; }
  .portal.size-xl { grid-column:span 12; grid-row:span 2; }
  .portal.size-lg { grid-column:span 12; }
  .portal.size-md { grid-column:span 6; }
  .portal.size-tall { grid-column:span 6; grid-row:span 2; }
}
@media (max-width:600px) {
  .hero { min-height:auto; padding-top:88px; padding-bottom:2.4rem; }
  .hero .hero-title-img { width:min(74%,250px); }
  .hero-title-sub { font-size:clamp(.9rem,4.4vw,1.15rem); }
  .hero-lead { font-size:1rem; max-width:36ch; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .button { width:100%; }
  .trust { gap:.6rem 1rem; }
  .trust div { border-left:none; padding-left:0; }
  .story-copy p, .offer-copy p, .faq-item p { font-size:1rem; }
  .chars-grid { grid-template-columns:1fr; }
  .map-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .portal.size-xl, .portal.size-lg, .portal.size-md, .portal.size-tall { grid-column:span 2; grid-row:span 1; }
  .section-heading h2 { font-size:clamp(1.45rem,6vw,2rem); }
  .header-right .cta { padding:.5rem 1rem; font-size:.85rem; }
}
@media (max-height:640px) {
  .veil-sun { width:clamp(44px,7vh,64px); margin-bottom:.4rem; }
  .veil .title-img { width:min(46%,168px); }
  .veil-inner > p:not(.veil-subtitle) { margin:.5rem auto .8rem; font-size:.82rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001s !important; animation-iteration-count:1 !important; }
  .reveal { opacity:1; transform:none; }
  body { background-attachment:scroll; }
}