/* ==========================================================================
   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; } }

.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; } }

/* ---------- HERO EN MOBILE ----------
   En vertical el retrato manda: la banda tiene el alto exacto de la foto entera
   (140vw = su proporcion), asi que ahi esta el cuerpo completo, de la cara a los
   brazos cruzados. Una niebla del color del fondo tapa la mitad de abajo y el
   titular cae sobre ese borde difuso.
   Al scrollear, esa niebla baja (--rev, la mueve js/inicio.js) y revela la foto
   entera mientras el texto y la brujula acompanan el mismo desplazamiento: el
   texto queda quieto en pantalla y despues sigue de largo con la pagina. */
@media (max-width:760px){
  .hero{
    display:block;                      /* de bloque centrado a columna: foto arriba, texto abajo */
    align-items:stretch;
    --band:clamp(420px,140vw,600px);    /* alto de la foto = su proporcion real */
    --revmax:calc(var(--band) * .44);   /* cuanto tiene que bajar la niebla para descubrirla */
    --rev:0px;                          /* posicion actual del revelado */
    padding:0 0 calc(100px + var(--revmax));
  }
  .hero-portrait{
    position:relative; inset:auto; z-index:1; overflow:hidden;
    width:100%; height:var(--band);
    margin-top:var(--nav-h); opacity:1;
  }
  /* luz calida detras del cuerpo: lo despega del negro de la foto */
  .hero-portrait::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background:radial-gradient(76% 46% at 50% 24%, rgba(232,200,124,.17), transparent 72%);
  }
  .hero-portrait img{
    width:108%; max-width:none; margin-left:6%; height:100%;
    object-fit:cover; object-position:50% 0%; opacity:1;
    /* solo se suavizan los bordes: de tapar el cuerpo se encarga la niebla */
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 7%, #000 90%, transparent 100%),
                       linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 7%, #000 90%, transparent 100%),
               linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  /* la niebla: arranca tapando de la mitad para abajo y baja con el scroll */
  .hero-portrait::after{
    content:''; position:absolute; left:0; right:0; top:56%; height:100%; z-index:2;
    background:linear-gradient(to bottom, rgba(20,16,14,0) 0%, rgba(20,16,14,.6) 15%, var(--ink-deep) 32%, var(--ink-deep) 100%);
    transform:translate3d(0,var(--rev),0);
  }
  #hero-fondo{ transform:translate3d(0,var(--rev),0); }   /* la brujula acompana al texto */
  .hero .wrap{
    margin-top:calc(var(--band) * -.39);
    transform:translate3d(0,var(--rev),0);
  }
  /* el titular y el subtitulo caen sobre la foto: sombra suave para que siempre se lean */
  .hero h1{ font-size:clamp(32px,8.6vw,40px); max-width:none; text-shadow:0 2px 22px rgba(10,8,7,.55); }
  .hero-sub, .hero .lede{ text-shadow:0 2px 18px rgba(10,8,7,.5); }
  .hero-sub{ margin-top:22px; font-size:19px; }
  .hero .lede{ margin-top:16px; font-size:16px; }
  .hero-cta{ margin-top:30px; gap:10px; }
  .hero-cta .btn{ flex:1 1 100%; justify-content:center; }
  .hero-firma{ margin-top:30px; }
  .hero .hero-meta{ bottom:24px; }
}
/* sin animacion por preferencia del sistema: queda la foto ya revelada */
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .hero{ --rev:var(--revmax); }
}
/* telefono acostado: no hay alto para la banda, el retrato vuelve al costado */
@media (max-width:760px) and (orientation:landscape){
  .hero{ display:flex; align-items:center; padding:calc(var(--nav-h) + 26px) 0 76px; --rev:0px; }
  .hero-portrait{ position:absolute; inset:0 0 0 auto; width:50vw; height:auto; margin-top:0; opacity:.5; overflow:hidden; }
  .hero-portrait::before, .hero-portrait::after{ display:none; }
  .hero .wrap, #hero-fondo{ transform:none; }
  .hero-portrait img{
    width:100%; margin-left:0; object-fit:contain; object-position:right bottom;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 52%), linear-gradient(to bottom, #000 74%, transparent 99%);
    mask-image:linear-gradient(to right, transparent 0%, #000 52%), linear-gradient(to bottom, #000 74%, transparent 99%);
  }
  .hero .wrap{ margin-top:0; }
  .hero h1{ max-width:15ch; }
  .hero-cta .btn{ flex:0 1 auto; }
}

/* ---------- 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; } }