/* ════════════════════════════════════════════════════════════
   TAKI YUYAY · FUSIÓN PERUANA — hoja de estilo
   Tema dual (☀️ claro = montaña Vinicunca · 🌙 oscuro = aurora)
   ════════════════════════════════════════════════════════════ */

:root{
  /* Paleta Vinicunca (los 7 colores de la Montaña) */
  --v1:#2F9E8F; --v2:#9A86B8; --v3:#E0A52E; --v4:#C2562F;
  --v5:#8A3B36; --v6:#6E8C3A; --v7:#EAD9B0;
  --accent:var(--v3); --accent-2:var(--v4);

  --ff-display:'Cinzel', Georgia, serif;
  --ff-body:'Inter', system-ui, sans-serif;
  --maxw:1200px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* Tema oscuro (default) */
body.dark{
  --bg:#0a0b12; --bg-2:#11121b; --surface:#141522; --fg:#ece9f2;
  --muted:#a7a3b6; --line:rgba(255,255,255,.10); --card-shadow:0 18px 50px rgba(0,0,0,.45);
}
/* Tema claro */
body.light{
  --bg:#f6f1e6; --bg-2:#efe7d6; --surface:#fffdf8; --fg:#1f1c17;
  --muted:#6b6450; --line:rgba(0,0,0,.10); --card-shadow:0 18px 44px rgba(60,40,10,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-body); color:var(--fg); background:var(--bg);
  line-height:1.6; overflow-x:hidden; transition:background .6s var(--ease), color .6s var(--ease);
}
a{color:inherit;text-decoration:none}
img,svg{display:block}
em{font-style:italic;color:var(--accent)}
strong{font-weight:600;color:var(--fg)}

/* Bilingüe */
.en{display:none}
body.lang-en .es{display:none}
body.lang-en .en{display:inline}

/* ─────────── Fondos de tema (cross-fade) ─────────── */
.bg{position:fixed; inset:0; z-index:0; transition:opacity .6s var(--ease); pointer-events:none}
body.light .bg-light{opacity:1} body.light .bg-dark{opacity:0}
body.dark  .bg-light{opacity:0} body.dark  .bg-dark{opacity:1}

/* Claro = montaña de estratos */
.bg-light{overflow:hidden;background:#f6f1e6}
.bg-light .mtn{position:absolute; inset:-28% -18%; transform:skewY(-7deg) scale(1.28);
  background:linear-gradient(180deg,
    var(--v1) 0 14.28%, var(--v2) 14.28% 28.56%, var(--v3) 28.56% 42.84%,
    var(--v4) 42.84% 57.12%, var(--v5) 57.12% 71.4%, var(--v6) 71.4% 85.68%, var(--v7) 85.68% 100%);}
.bg-light .mtn-veil{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.08) 38%, rgba(10,8,5,.55));}

/* Oscuro = estratos cósmicos (aurora) */
.bg-dark{background:#0a0b12;overflow:hidden}
.bg-dark .aurora{position:absolute; inset:-28% -18%; filter:blur(40px); opacity:.55;
  background:linear-gradient(165deg,
    var(--v1) 0 12%, transparent 12% 22%, var(--v2) 22% 34%, transparent 34% 44%,
    var(--v3) 44% 56%, transparent 56% 64%, var(--v4) 64% 76%, transparent 76% 84%, var(--v6) 84% 100%);}
.bg-dark #stars-canvas{position:absolute; inset:0; width:100%; height:100%}

/* ─────────── Navegación ─────────── */
#main-nav{position:fixed; top:0; left:0; right:0; z-index:100; transition:background .4s, backdrop-filter .4s, border-color .4s; border-bottom:1px solid transparent}
#main-nav.scrolled{background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:18px}
.nav-logo{display:flex; align-items:center; gap:11px; color:#fff}
#main-nav.scrolled .nav-logo{color:var(--fg)}
.nav-chakana{color:inherit; flex:0 0 auto}
.nav-brand{font-family:var(--ff-display); font-weight:700; letter-spacing:.2em; font-size:15px; text-shadow:0 2px 10px rgba(0,0,0,.35)}
#main-nav.scrolled .nav-brand{text-shadow:none}
.nav-links{display:flex; gap:30px}
.nav-link{position:relative; font-size:13.5px; letter-spacing:.04em; color:#fff; opacity:.92; padding:4px 0; text-shadow:0 2px 8px rgba(0,0,0,.4)}
#main-nav.scrolled .nav-link{color:var(--fg); text-shadow:none}
.nav-link::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--accent); transition:width .3s var(--ease)}
.nav-link:hover::after{width:100%}
.nav-right{display:flex; align-items:center; gap:12px}

/* Toggle sol/luna */
.theme-toggle{width:58px; height:30px; border-radius:30px; border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.16); position:relative; cursor:pointer; backdrop-filter:blur(4px); transition:background .4s, border-color .4s}
#main-nav.scrolled .theme-toggle{border-color:var(--line); background:color-mix(in srgb,var(--fg) 10%, transparent)}
.theme-knob{position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; transition:left .38s cubic-bezier(.4,1.4,.5,1); box-shadow:0 2px 6px rgba(0,0,0,.3)}
body.dark .theme-knob{left:30px}
.theme-ic{line-height:1}

.lang-toggle{background:transparent; border:1px solid rgba(255,255,255,.45); color:#fff; border-radius:20px; padding:5px 11px; font-size:12px; font-weight:600; letter-spacing:.05em; cursor:pointer; transition:border-color .4s, color .4s, background .2s}
#main-nav.scrolled .lang-toggle{border-color:var(--line); color:var(--fg)}
.lang-toggle:hover{background:color-mix(in srgb, var(--accent) 22%, transparent); border-color:var(--accent)}
.lang-label{display:none}
body.lang-es .lang-label.es{display:inline}
body.lang-en .lang-label.en{display:inline}

.mobile-menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px}
.mobile-menu-toggle span{width:24px; height:2px; background:#fff; transition:.3s}
#main-nav.scrolled .mobile-menu-toggle span{background:var(--fg)}

.mobile-menu{position:fixed; inset:0; z-index:99; background:color-mix(in srgb,var(--bg) 96%, transparent); backdrop-filter:blur(20px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; opacity:0; visibility:hidden; transition:.4s}
.mobile-menu.open{opacity:1; visibility:visible}
.mobile-link{font-family:var(--ff-display); font-size:26px; color:var(--fg)}

/* ─────────── Hero ─────────── */
.hero{position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:90px 24px 60px}
.hero-content{position:relative; z-index:2; max-width:760px}
.hero-chakana{display:flex; justify-content:center; margin-bottom:22px; animation:floaty 6s ease-in-out infinite}
.hero-chakana svg{filter:drop-shadow(0 6px 26px rgba(0,0,0,.4))}
.chakana-outer{animation:spin 70s linear infinite; transform-origin:400px 400px}
.chakana-ring{animation:spin 50s linear infinite reverse; transform-origin:400px 400px}
.chakana-core{animation:pulse 3.2s ease-in-out infinite}
.hero-title{font-family:var(--ff-display); font-weight:900; color:#fff; font-size:clamp(42px,8.5vw,92px); letter-spacing:.05em; line-height:1; text-shadow:0 4px 30px rgba(0,0,0,.5)}
.hero-genre{font-family:var(--ff-display); font-weight:600; letter-spacing:.55em; font-size:clamp(14px,2.5vw,22px); color:#fff; margin:16px 0 10px; padding-left:.55em; text-shadow:0 2px 16px rgba(0,0,0,.5)}
.hero-genre::before,.hero-genre::after{content:"·"; color:var(--v3); margin:0 .6em; opacity:.9}
.hero-tagline{color:#fff; opacity:.94; font-weight:300; font-size:clamp(14px,2vw,17.5px); letter-spacing:.02em; text-shadow:0 2px 12px rgba(0,0,0,.55)}
.hero-cta{display:inline-flex; align-items:center; gap:10px; margin-top:36px; padding:14px 30px; border-radius:40px; font-size:14px; font-weight:500; letter-spacing:.03em; color:#1a1612; background:#fff; box-shadow:0 10px 34px rgba(0,0,0,.32); transition:transform .25s var(--ease), box-shadow .25s}
.hero-cta:hover{transform:translateY(-3px); box-shadow:0 16px 44px rgba(0,0,0,.4)}
.hero-cta.solid{background:var(--accent); color:#1a1207}
.cta-arrow{transition:transform .25s var(--ease)}
.hero-cta:hover .cta-arrow{transform:translate(3px,-3px)}
.hero-scroll-indicator{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px}
.scroll-line{width:1px; height:42px; background:linear-gradient(#fff,transparent); animation:scrollLine 2.2s ease-in-out infinite}
.scroll-text{color:#fff; opacity:.7; font-size:11px; letter-spacing:.25em; text-transform:uppercase}

/* ─────────── Secciones base ─────────── */
.section{position:relative; z-index:1; background:var(--bg); padding:clamp(70px,11vw,130px) 28px; transition:background .6s var(--ease)}
.section-inner{max-width:var(--maxw); margin:0 auto}
.section-label{display:inline-block; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:14px}
.section-label.center,.section-title.center,.section-subtitle.center{text-align:center; display:block}
.section-title{font-family:var(--ff-display); font-weight:700; font-size:clamp(28px,4.6vw,48px); line-height:1.12; letter-spacing:.01em}
.section-subtitle{color:var(--muted); font-size:clamp(15px,1.7vw,18px); max-width:680px; margin:18px auto 0}

/* Visión */
.vision-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(34px,5vw,72px); align-items:center}
.vision-description{color:var(--muted); font-size:clamp(15px,1.65vw,17.5px); margin-top:18px}
.vision-stats{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px 20px; box-shadow:var(--card-shadow)}
.stat-number{display:block; font-family:var(--ff-display); font-weight:700; font-size:clamp(30px,4.2vw,44px); color:var(--accent); line-height:1}
.stat-number.stat-word{font-size:clamp(22px,3vw,30px); letter-spacing:.04em}
.stat-label{display:block; margin-top:10px; font-size:12.5px; color:var(--muted); line-height:1.4}

/* Tres Mundos */
.worlds-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:54px}
.world-card{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:var(--surface); box-shadow:var(--card-shadow); transition:transform .4s var(--ease), box-shadow .4s}
.world-card:hover{transform:translateY(-8px)}
.world-card-image{height:190px; background-size:cover; background-position:center; position:relative}
.world-card-image .world-card-overlay{position:absolute; inset:0; background:linear-gradient(to top, var(--surface), transparent 70%)}
.world-card[data-world="hanan"] .world-icon{color:var(--v3)}
.world-card[data-world="kay"] .world-icon{color:var(--v1)}
.world-card[data-world="uku"] .world-icon{color:var(--v4)}
.world-card-content{padding:6px 24px 26px; margin-top:-34px; position:relative}
.world-icon{margin-bottom:10px}
.world-name{font-family:var(--ff-display); font-weight:700; font-size:23px}
.world-meaning{color:var(--muted); font-size:13.5px; margin:8px 0 16px; min-height:38px}
.world-pieces{display:flex; flex-direction:column; gap:10px}
.world-piece{display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; padding-top:12px; border-top:1px solid var(--line)}
.piece-letter{grid-row:span 2; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:var(--accent); border:1px solid var(--accent)}
.piece-name{font-weight:600; font-size:14.5px}
.piece-detail{font-size:12px; color:var(--muted)}
a.world-piece.is-link{position:relative; cursor:pointer; transition:transform .2s var(--ease)}
a.world-piece.is-link:hover{transform:translateX(3px)}
.piece-play{position:absolute; top:13px; right:0; display:flex; color:var(--muted); opacity:.5; transition:.2s}
a.world-piece.is-link:hover .piece-name{color:var(--accent)}
a.world-piece.is-link:hover .piece-play{color:var(--accent); opacity:1}
.worlds-cta{text-align:center; margin-top:50px}

/* Manifiesto */
.manifesto{text-align:center}
.manifesto-quote{font-family:var(--ff-display); font-weight:600; font-size:clamp(22px,3.4vw,38px); line-height:1.4; max-width:820px; margin:0 auto}
.manifesto-divider{display:flex; justify-content:center; margin:34px 0}
.manifesto-disclosure{color:var(--muted); font-size:14px; max-width:640px; margin:0 auto; line-height:1.7}

/* Footer */
.footer{position:relative; z-index:1; background:var(--bg-2); border-top:1px solid var(--line); padding:54px 28px 40px}
.footer-inner{max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center}
.footer-brand{display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--fg)}
.footer-name{font-family:var(--ff-display); font-weight:700; font-size:20px; letter-spacing:.06em}
.footer-tagline{color:var(--muted); font-size:13px; letter-spacing:.04em}
.footer-social{display:flex; gap:14px}
.social-link{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--muted); border:1px solid var(--line); transition:.3s}
.social-link:hover{color:#fff; background:var(--accent); border-color:var(--accent); transform:translateY(-3px)}
.footer-bottom{display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:12.5px}
.footer-email{color:var(--accent)}

/* ─────────── Animaciones ─────────── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes scrollLine{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

.reveal-up,.reveal-left,.reveal-right{opacity:0; transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--delay,0s)}
.reveal-up{transform:translateY(40px)}
.reveal-left{transform:translateX(-40px)}
.reveal-right{transform:translateX(40px)}
.reveal-up.in,.reveal-left.in,.reveal-right.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ─────────── Responsive ─────────── */
@media(max-width:860px){
  .vision-grid{grid-template-columns:1fr}
  .worlds-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto}
}
@media(max-width:680px){
  .nav-links{display:none}
  .mobile-menu-toggle{display:flex}
  .vision-stats{grid-template-columns:1fr 1fr}
}