/* ==========================================================================
   INICIO — estilos propios del Home (index.html)
   ========================================================================== */

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:var(--ink-deep); color:var(--cream); overflow:hidden;
  padding:calc(var(--nav-h) + 40px) 0 110px;
}
#hero-fondo{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; }
.hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 8%, rgba(12,10,9,.55) 62%, rgba(12,10,9,.94) 100%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero h1{
  font-family:'Inter',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:-.035em;
  font-size:clamp(34px,5vw,72px); line-height:.97; max-width:15ch;
}
.hero h1 em{
  display:block; font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:-.03em; margin-top:.12em;
  background:linear-gradient(96deg,#2FD9AC,#E8535C 34%,#4C9BEF 64%,#E8C87C);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ margin-top:28px; font-size:clamp(19px,2vw,26px); font-weight:500; color:var(--cream); max-width:36ch; line-height:1.35; }
.hero .lede{ margin-top:16px; color:rgba(243,237,227,.64); max-width:54ch; }
.hero-cta{ display:flex; gap:13px; margin-top:38px; flex-wrap:wrap; }
.hero .btn-line{ border-color:rgba(243,237,227,.24); color:var(--cream); }
.hero .btn-solid{ background:var(--cream); color:#14100E; }
.hero-firma{
  margin-top:34px; font-family:'Fraunces',serif; font-style:italic; font-size:clamp(17px,1.6vw,20px);
  color:var(--gold-glow); display:flex; align-items:center; gap:14px;
}
.hero-firma::before{ content:''; width:34px; height:1px; background:currentColor; opacity:.6; }

.hero-portrait{ position:absolute; right:0; bottom:0; top:0; width:clamp(320px,38vw,560px); z-index:1; pointer-events:none; overflow:hidden; }
.hero-portrait img{
  width:100%; height:100%; object-fit:contain; object-position:right bottom;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 48%), linear-gradient(to bottom, #000 72%, transparent 99%);
  mask-image:linear-gradient(to right, transparent 0%, #000 48%), linear-gradient(to bottom, #000 72%, transparent 99%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  opacity:.92;
}
@media (max-width:1100px){ .hero-portrait{ opacity:.3; width:60vw; } }
@media (max-width:760px){ .hero-portrait{ display:none; } }

.hero .hero-meta{
  position:absolute; left:0; right:0; bottom:28px; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(243,237,227,.42);
}
.hero-dots{ display:flex; gap:7px; align-items:center; }
.hero-dots i{ width:26px; height:3px; border-radius:2px; background:var(--c); opacity:.85; display:block; }
.scroll-bar{ width:1px; height:36px; background:linear-gradient(to bottom,transparent,rgba(243,237,227,.55)); animation:drop 2s var(--ease) infinite; }
@keyframes drop{ 0%{ transform:scaleY(.2); transform-origin:top; } 55%{ transform:scaleY(1); transform-origin:top; } 56%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---------- RECORRIDO (slide horizontal) ---------- */
.recorrido{ padding:0; background:var(--ink-deep); color:var(--cream); }
.rec-pin{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center; }
.rec-bg{ position:absolute; inset:0; transition:background 1.1s var(--ease); }
.rec-label{ position:absolute; top:calc(var(--nav-h) + 24px); left:clamp(20px,6vw,90px); z-index:3; color:var(--c,var(--gold-glow)); transition:color .8s var(--ease); }
/* los paneles se deslizan dentro de una ventana a la izquierda: la brújula nunca queda tapada */
.rec-window{
  --win:60vw; position:relative; z-index:2; width:var(--win); overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,#000 82%,transparent); mask-image:linear-gradient(to right,#000 82%,transparent);
}
.rec-track{ display:flex; will-change:transform; }
.rec-panel{ width:var(--win); flex:none; padding:0 clamp(20px,4vw,60px) 0 clamp(20px,6vw,90px); }
.rec-panel > div{ max-width:620px; }
.rec-num{
  font-family:'Fraunces',serif; font-size:clamp(90px,15vw,210px); line-height:.8; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb,var(--c) 60%,transparent); margin-bottom:18px;
}
.rec-panel h2{ font-size:clamp(34px,5vw,68px); letter-spacing:-.035em; }
.rec-panel h2 b{ font-weight:500; color:var(--c); }
.rec-text{ margin-top:24px; display:grid; gap:10px; }
.rec-text p{ font-size:clamp(17px,1.6vw,21px); color:rgba(243,237,227,.72); line-height:1.5; max-width:44ch; }
.rec-panel .btn{ margin-top:30px; border-color:color-mix(in srgb,var(--c) 50%,transparent); color:var(--cream); }
.rec-panel .btn::before{ background:var(--c); }
.rec-panel .btn i{ color:var(--c); transition:color .3s; }
.rec-panel .btn:hover i{ color:inherit; }

/* brújula del recorrido: una sola, fija a la derecha; la aguja apunta al pilar activo */
.rec-compass{
  position:absolute; right:clamp(20px,6vw,90px); top:50%; translate:0 -50%; z-index:2;
  width:min(40vw,500px); aspect-ratio:1; pointer-events:none;
}
.rec-compass svg{ width:100%; height:100%; overflow:visible; }
.rec-compass .ring{ fill:none; stroke:rgba(243,237,227,.16); stroke-width:1; }
.rec-compass .tick{ stroke:rgba(243,237,227,.22); stroke-width:1; }
.rec-compass .tick.big{ stroke:rgba(243,237,227,.5); stroke-width:1.5; }
.rec-compass .card-pt{ font-family:'IBM Plex Mono',monospace; font-size:13px; fill:rgba(243,237,227,.5); text-anchor:middle; dominant-baseline:middle; }
.rec-compass .pil{ font-family:'Fraunces',serif; font-size:19px; text-anchor:middle; dominant-baseline:middle; opacity:.35; transition:opacity .8s var(--ease); }
.rec-compass .pil.on{ opacity:1; }
.rec-compass .needle{ transition:transform .45s var(--ease); transform-origin:240px 240px; }
.rec-compass .needle .n-main{ fill:var(--c,#E8C87C); transition:fill .8s var(--ease); }
.rec-compass .needle .n-back{ fill:rgba(243,237,227,.18); }
.rec-compass .sector{ fill:var(--c,#E8C87C); opacity:.13; transition:fill .8s var(--ease); }
.rec-compass .hub{ fill:var(--ink-deep); stroke:var(--c,#E8C87C); stroke-width:2; transition:stroke .8s var(--ease); }

.rec-rail{
  position:absolute; left:clamp(20px,6vw,90px); right:clamp(20px,6vw,90px); bottom:44px; z-index:3;
  display:flex; align-items:center; gap:14px;
}
.rec-rail .line{ flex:1; height:1px; background:rgba(243,237,227,.16); position:relative; }
.rec-rail .line i{ position:absolute; left:0; top:0; height:100%; background:var(--c,#C8B272); transition:width .25s linear, background .8s var(--ease); }
.rec-rail .lbl{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,237,227,.5); white-space:nowrap; }

@media (max-width:900px){
  .recorrido{ height:auto !important; padding:80px 0 20px; }
  .rec-pin{ height:auto; position:static; display:block; }
  .rec-label{ position:static; margin:0 clamp(20px,5vw,40px) 40px; }
  .rec-window{ --win:100%; width:100%; -webkit-mask-image:none; mask-image:none; }
  .rec-track{ flex-direction:column; transform:none !important; }
  /* apilado: cada panel conserva su color (brillo de fondo + línea lateral) */
  .rec-panel{ width:100%; position:relative; padding:40px clamp(20px,5vw,40px) 50px; }
  .rec-panel::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(520px 360px at 0% 40%, color-mix(in srgb,var(--c) 18%,transparent), transparent 72%);
  }
  .rec-panel > div{ max-width:none; position:relative; border-left:2px solid var(--c); padding-left:clamp(18px,4vw,28px); }
  .rec-label{ color:var(--gold-glow); }
  .rec-compass, .rec-rail{ display:none; }
}

/* ---------- LA BRÚJULA (preguntas) ---------- */
.bruj{ background:var(--bg-2); }
.bruj-box{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(28px,4.5vw,60px); box-shadow:var(--shadow-2); position:relative; overflow:hidden;
  min-height:430px; display:flex; flex-direction:column; justify-content:center; max-width:980px; margin:0 auto;
}
.bruj-step{ display:none; animation:stepIn .5s var(--ease); }
.bruj-step.on{ display:block; }
@keyframes stepIn{ from{ opacity:0; transform:translateY(14px); } }
.bruj-q{ font-size:clamp(24px,3.2vw,40px); line-height:1.12; margin:14px 0 32px; letter-spacing:-.02em; }
.bruj-opts{ display:grid; gap:11px; }
.bruj-opt{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  padding:19px 22px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg);
  font-size:16px; font-weight:500; transition:all .35s var(--ease);
}
.bruj-opt:hover{ border-color:var(--ink); transform:translateX(6px); background:var(--card); }
.bruj-opt .k{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none;
  border:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); transition:all .35s var(--ease);
}
.bruj-opt:hover .k{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.bruj-dots{ display:flex; gap:6px; margin-bottom:6px; }
.bruj-dots i{ width:26px; height:3px; border-radius:2px; background:var(--line); }
.bruj-dots i.on{ background:var(--ink); }
.bruj-res{ display:none; }
.bruj-res.on{ display:block; animation:stepIn .6s var(--ease); }
.bruj-res .tag{
  display:inline-flex; padding:7px 15px; border-radius:100px; background:var(--c); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
}
html[data-theme="dark"] .bruj-res .tag{ color:#14100E; }
.bruj-res h3{ font-size:clamp(32px,5vw,58px); margin:22px 0 16px; letter-spacing:-.03em; }
.bruj-res h3 span{ color:var(--c); }
.bruj-res p{ color:var(--muted); font-size:18px; line-height:1.6; max-width:56ch; }
.bruj-res .acts{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.bruj-res .btn-accent{ background:var(--c); }
.bruj-bars{ display:grid; gap:9px; margin-top:30px; max-width:420px; }
.bruj-bar{ display:grid; grid-template-columns:82px 1fr 40px; align-items:center; gap:12px; font-size:12.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }
.bruj-bar .t{ height:5px; border-radius:3px; background:var(--line); overflow:hidden; }
.bruj-bar .t i{ display:block; height:100%; width:0; background:var(--c); border-radius:3px; transition:width 1.1s var(--ease); }
.bruj-last{ position:absolute; top:18px; right:18px; }

/* ---------- BIO ---------- */
.bio h2{ margin:18px 0 26px; }
.bio .answer{ font-size:17px; }
.bio-photo{ position:relative; aspect-ratio:4/5; border-radius:var(--r-xl); overflow:hidden; background:#0C0A09; border:1px solid var(--line); margin:0; }
.bio-photo img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.bio-photo:hover img{ transform:scale(1.035); }
.bio-photo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(78% 58% at 50% 6%, color-mix(in srgb,var(--gold) 24%,transparent), transparent 62%);
  mix-blend-mode:screen;
}
.bio .split{ align-items:start; }
.bio .bio-side{ position:sticky; top:100px; }
@media (max-width:1000px){ .bio .bio-side{ position:static; max-width:520px; } }

/* ---------- NÚMEROS ---------- */
.nums .big-line{ font-family:'Fraunces',serif; font-size:clamp(26px,3.4vw,44px); line-height:1.15; letter-spacing:-.02em; color:var(--gold-glow); margin-top:6px; }
.nums-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(18px,2.4vw,36px); }
.stat{ padding-top:22px; border-top:1px solid rgba(243,237,227,.14); }
.stat b{
  display:block; font-family:'Fraunces',serif; font-weight:500; font-size:clamp(40px,4.6vw,62px); line-height:1; letter-spacing:-.03em;
  background:linear-gradient(180deg,var(--cream),rgba(243,237,227,.5)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{ display:block; margin-top:12px; font-size:13.5px; color:rgba(243,237,227,.55); line-height:1.45; }
@media (max-width:1000px){ .nums-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- CIERRE + PILARES ---------- */
.cierre{ text-align:center; overflow:hidden; padding-bottom:clamp(40px,6vw,80px); }
.cierre .halo{
  position:absolute; left:50%; top:30%; translate:-50% -50%; width:min(1000px,120vw); aspect-ratio:1;
  background:radial-gradient(circle, color-mix(in srgb,var(--gold) 20%,transparent), transparent 62%); pointer-events:none;
}
.cierre .wrap{ position:relative; z-index:2; }
.cierre h2{ font-size:clamp(32px,5.4vw,72px); letter-spacing:-.035em; max-width:18ch; margin:22px auto 34px; }
.cierre .acts{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

.ayuda{ padding-top:clamp(40px,6vw,80px); }
.ayuda .head h2{ font-size:clamp(26px,3.4vw,42px); }
.pil-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pil-card{
  display:flex; flex-direction:column; gap:14px; min-height:270px; padding:30px 26px;
  border:1px solid rgba(243,237,227,.12); border-radius:var(--r-lg); background:rgba(243,237,227,.03);
  transition:transform .5s var(--ease), border-color .4s, background .4s;
}
.pil-card:hover{ transform:translateY(-6px); border-color:var(--c); background:color-mix(in srgb,var(--c) 8%,transparent); }
.pil-card .dot{ width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 18px var(--c); }
.pil-card h3{ font-size:34px; letter-spacing:-.025em; color:var(--c); margin-top:6px; }
.pil-card p{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; line-height:1.7; color:rgba(243,237,227,.66); }
.pil-card .go{ margin-top:auto; font-size:14px; font-weight:600; color:var(--c); transition:transform .35s var(--ease); }
.pil-card:hover .go{ transform:translateX(6px); }
.frase-final{
  margin:clamp(60px,8vw,110px) auto 0; max-width:32ch; text-align:center;
  font-family:'Fraunces',serif; font-size:clamp(28px,4vw,52px); line-height:1.15; letter-spacing:-.025em;
}
.frase-final span{ display:block; }
.frase-final span:nth-child(1){ color:#2FD9AC; }
.frase-final span:nth-child(2){ color:#4C9BEF; }
.frase-final span:nth-child(3){ color:#E8535C; font-style:italic; }
@media (max-width:1000px){ .pil-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .pil-grid, .nums-grid{ grid-template-columns:1fr; } .pil-card{ min-height:0; } }