/* ---------------------------------------------------------------------------
   home-v2.css — homepage alternativa (mockup del brief, secciones 7.2-7.6),
   vista previa en /inicio-v2/ (noindex, solo AR). La arma build_home_v2.py
   a partir de la home ya construida: la calculadora (markup + script) es la
   misma, aca se reacomoda dentro de la tarjeta del hero.

   Depende de tokens.css, shell.css y components.css. Se enlaza DESPUES del
   <style> propio de la home, asi que estas reglas pisan las de la columna
   de 520px. Todo el arte (nebulosa, montañas, siluetas, anillo) es CSS/SVG.
--------------------------------------------------------------------------- */

.v2{display:block;overflow-x:clip}
.v2-inner{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:var(--section-y) var(--gutter)}
.v2-sec{border-top:1px solid var(--line)}

/* cabecera de seccion a la izquierda, contenido a la derecha */
.v2-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);align-items:center}
@media (min-width:1100px){
  .v2-split{grid-template-columns:minmax(0,4.2fr) minmax(0,8.8fr);gap:var(--s-7)}
}

/* ===== Cabecera de la pagina (solo en esta vista previa) ================= */
/* solo desde 541px: en telefonos manda el tamaño chico de shell.css (con
   este logo mas grande la barra de la home desbordaba 63px a 320px) */
@media (min-width:541px){
  .v2-page .logo{font-size:19px;letter-spacing:.01em}
  .v2-page .logo::before{width:1.35em;height:1.35em;margin-right:.4em}
  .v2-page .logo span{
    font-family:var(--font-marker);font-weight:400;font-size:1.22em;letter-spacing:0;
    margin-left:.15em;display:inline-block;transform:rotate(-3deg) translateY(-1px);
    background:linear-gradient(100deg,var(--aura-400),var(--flare-400));
    -webkit-background-clip:text;background-clip:text;
  }
}

/* ===== Piezas compartidas ================================================ */
/* botones "pill" con borde en gradiente y glow, como los del mockup */
.v2-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:12px 26px;border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-hi);
  border:1.5px solid transparent;
  background:linear-gradient(var(--void),var(--void)) padding-box,
             linear-gradient(100deg,var(--aura-500),var(--flare-500)) border-box;
  box-shadow:0 0 18px -4px rgba(217,70,239,.55),inset 0 0 12px -6px rgba(217,70,239,.6);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out);
}
.v2-pill:hover{transform:translateY(-2px);box-shadow:0 0 26px -2px rgba(217,70,239,.75),inset 0 0 14px -6px rgba(217,70,239,.7)}
.v2-pill--ion{
  background:linear-gradient(var(--abyss),var(--abyss)) padding-box,
             linear-gradient(100deg,var(--ion-400),var(--aura-500)) border-box;
  box-shadow:0 0 16px -4px rgba(34,211,238,.45),inset 0 0 12px -6px rgba(34,211,238,.5);
}
.v2-pill--ion:hover{box-shadow:0 0 24px -2px rgba(34,211,238,.6),inset 0 0 14px -6px rgba(34,211,238,.6)}
.v2-pill--sm{min-height:44px;padding:10px 22px;font-size:12px}
.v2-pill__ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.v2-arrow{display:inline-block;transition:transform var(--t-base) var(--ease-out)}
.v2-pill:hover .v2-arrow,.btn:hover .v2-arrow{transform:translateX(3px)}

.v2-kicker{
  display:flex;align-items:center;gap:12px;margin:0 0 var(--s-3);
  font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-hi);
}
.v2-kicker__ic{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:rgba(139,92,246,.16);box-shadow:0 0 18px -4px rgba(217,70,239,.6);
}
.v2-kicker__svg{width:22px;height:22px}
svg.v2-kicker__svg:not([fill]){fill:none;stroke:var(--flare-400);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.v2-head h2{
  margin:0 0 var(--s-4);font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,3.1vw,44px);line-height:1.02;letter-spacing:-.03em;color:var(--ink-hi);
  text-shadow:0 2px 24px rgba(139,92,246,.35);
}
.v2-head p{margin:0 0 var(--s-6);max-width:40ch;font-size:var(--t-lead);line-height:1.6;color:var(--ink-body)}

/* trazo de "pincel" para la palabra AURA (fuente Marker, en gradiente) */
.v2-brush{
  display:inline-block;font-family:var(--font-marker);font-weight:400;text-transform:uppercase;
  color:var(--flare-400);
  background:linear-gradient(95deg,var(--aura-500) 0%,var(--flare-500) 35%,var(--flare-400) 75%,var(--flare-300) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transform:rotate(-4deg);filter:drop-shadow(0 0 18px rgba(217,70,239,.55));
  padding:0 .06em;
}

/* montañas: dos capas oscuras que se funden con el fondo */
.v2-mtn{position:absolute;left:0;right:0;bottom:0;width:100%;pointer-events:none}
.v2-mtn__back{fill:#140A28}
.v2-mtn__front{fill:url(#v2-mtn)}

/* ===== 7.2 Hero =========================================================== */
.v2-hero{position:relative;overflow:hidden;background:var(--void)}
.v2-hero__sky{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(22% 38% at 42% 6%,rgba(217,70,239,.34),transparent 72%),
    radial-gradient(18% 50% at 50% 30%,rgba(139,92,246,.30),transparent 75%),
    radial-gradient(34% 46% at 12% 72%,rgba(139,92,246,.40),transparent 72%),
    radial-gradient(26% 36% at 30% 92%,rgba(217,70,239,.28),transparent 72%),
    radial-gradient(30% 40% at 92% 18%,rgba(109,40,217,.26),transparent 72%),
    linear-gradient(115deg,transparent 30%,rgba(192,38,211,.10) 44%,transparent 58%);
}
.v2-mtn--hero{height:clamp(120px,18vw,230px);opacity:.95}
.v2-hero .v2-inner{padding-top:var(--s-7);padding-bottom:var(--s-9)}
/* minmax(0,1fr): sin esto la fila de avatares (flex sin wrap) estira la
   columna automatica al ancho de sus 12 botones en mobile */
.v2-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);align-items:start}
@media (min-width:720px){
  .v2-hero__grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  .v2-hero__copy{grid-column:1 / -1}
}
@media (min-width:1100px){
  .v2-hero__grid{grid-template-columns:minmax(0,5.6fr) minmax(0,5fr) minmax(0,2.6fr);gap:var(--s-6);align-items:center}
  .v2-hero__copy{grid-column:auto}
}

.v2-hot{
  display:inline-flex;align-items:center;gap:10px;padding:10px 20px;margin-bottom:var(--s-5);
  border-radius:var(--r-pill);background:rgba(139,92,246,.16);
  box-shadow:inset 0 0 0 1px rgba(168,130,255,.25),0 0 24px -6px rgba(217,70,239,.5);
  font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--aura-300);
}
/* el titular visual del mockup. El h1 (keyword) es el titulo de la tarjeta. */
.v2-display{
  margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  /* --fit: ancho en em de la linea mas ancha en cada idioma (build_home_v2 FIT) */
  font-size:min(88px,calc((100vw - 2 * var(--gutter)) / var(--fit,7.9)));
  line-height:.98;letter-spacing:-.035em;color:var(--ink-hi);
  text-shadow:0 4px 30px rgba(0,0,0,.5);
}
@media (min-width:1100px){
  .v2-display{font-size:min(84px,calc((min(100vw,var(--container)) - 2 * var(--gutter) - 2 * var(--s-6)) * 5.6 / 13.2 / var(--fit,7.9)))}
}
.v2-display__l2{white-space:nowrap}
.v2-display .v2-brush{font-size:1.22em;line-height:.85;margin-right:.08em;vertical-align:-.04em}
.v2-hero__lead{margin:var(--s-5) 0 0;max-width:44ch;font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:var(--ink-body)}

.v2-chips{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.v2-chips li{padding:0 var(--s-3)}
.v2-chips li:first-child{padding-left:0}
.v2-chips li+li{border-left:1px solid var(--line)}
.v2-chip{display:flex;flex-direction:column;gap:10px;text-decoration:none;font-size:14px;line-height:1.3;color:var(--ink-body)}
.v2-chip:hover{color:var(--ink-hi)}
.v2-chip__ic{
  width:34px;height:34px;fill:none;stroke:var(--flare-400);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(217,70,239,.75));
}
@media (max-width:480px){
  .v2-chips{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-5)}
  .v2-chips li:nth-child(3){border-left:0;padding-left:0}
}

/* ---- tarjeta de la calculadora ---- */
.v2-calc{
  position:relative;scroll-margin-top:96px;border-radius:var(--r-lg);
  border:1.5px solid transparent;
  background:linear-gradient(170deg,rgba(27,16,51,.96),rgba(12,6,24,.96)) padding-box,
             linear-gradient(140deg,var(--ion-400),var(--aura-500) 45%,var(--flare-500)) border-box;
  box-shadow:0 0 50px -10px rgba(99,102,241,.65),0 0 0 1px rgba(34,211,238,.08);
}
.v2-calc__head{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);
}
.v2-calc__title{
  margin:0;padding-right:var(--s-4);border-right:1px solid var(--line);white-space:nowrap;
  font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-hi);
}
.v2-calc__title .grad-word{display:inline;-webkit-text-fill-color:currentColor;background:none;color:var(--ink-hi)}
.v2-calc__progress{display:flex;flex-direction:column;gap:8px;min-width:0}
.v2 .v2-calc__progress .hudtop{display:flex;justify-content:space-between;margin:0;font-size:12px}
.v2 .v2-calc__progress #modeName{color:var(--aura-300);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.v2-calc:has(#s-intro.on) #modeName{visibility:hidden}
.v2 .v2-calc__progress .bars{margin:0}
.v2 #bars:empty{height:4px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--ion-300) 0 14%,rgba(255,255,255,.08) 14%);box-shadow:0 0 8px rgba(34,211,238,.35)}
.v2-calc__body{padding:var(--s-5)}

/* la app de 520px pasa a vivir dentro de la tarjeta */
.v2 #app{min-height:0;max-width:none;margin:0;padding:0;display:block;overscroll-behavior:auto}
.v2 .screen{animation:none}
.v2 #s-intro.on,.v2 #s-quiz.on{padding-bottom:0}
.v2 #s-intro.on{display:flex;flex-direction:column}

.v2-calc__label{display:block;margin:0 0 10px;font-size:15px;font-weight:600;color:var(--ink-hi)}
.v2-calc__field{
  display:flex;align-items:center;gap:8px;padding:0 16px;border-radius:var(--r-md);
  background:rgba(7,3,16,.6);border:1px solid rgba(34,211,238,.35);
  box-shadow:inset 0 0 14px -8px rgba(34,211,238,.6);
}
.v2-calc__field:focus-within{border-color:var(--ion-300);box-shadow:0 0 0 3px rgba(34,211,238,.18)}
.v2-calc__field > span{color:var(--ink-lo);font-size:16px}
.v2 .v2-calc__field .field{
  flex:1;min-width:0;padding:14px 0;border:0;background:none;box-shadow:none;
  text-transform:none;letter-spacing:0;font-size:16px;color:var(--ink-hi);
}
.v2 .v2-calc__field .field:focus{outline:none;box-shadow:none}
.v2 .v2-calc__field .field::placeholder{color:var(--ink-lo);text-transform:none}
/* avatares: una sola fila deslizable */
.v2 #emojis{
  display:flex;gap:8px;margin:var(--s-3) 0 0;overflow-x:auto;padding:2px 2px 6px;
  scrollbar-width:none;scroll-snap-type:x proximity;
}
.v2 #emojis::-webkit-scrollbar{display:none}
.v2 #emojis .emo{flex:none;width:44px;height:44px;padding:0;font-size:20px;scroll-snap-align:start}

.v2-calc__panel{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:center;
  margin-top:var(--s-4);padding:var(--s-4);border-radius:var(--r-md);
  background:rgba(7,3,16,.45);border:1px solid var(--line);
}
@media (max-width:420px){.v2-calc__panel{grid-template-columns:1fr;justify-items:center;text-align:center}}
.v2-calc__now{display:flex;flex-direction:column;gap:10px;min-width:0;align-self:stretch}
.v2-calc__now-h{margin:0;font-size:13px;color:var(--ink-lo)}
.v2-calc__now-q{display:flex;gap:10px;align-items:center;margin:0;font-size:13px;line-height:1.45;color:var(--ink-hi)}
.v2-calc__bubble{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:rgba(139,92,246,.18);
}
.v2-calc__bubble .v2-ic{width:20px;height:20px;fill:none;stroke:var(--flare-300);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* los tres modos, compactos, como el boton "SIGUIENTE" del mockup */
.v2 #modes{display:flex;flex-direction:column;gap:8px;margin:auto 0 0}
.v2 #modes .mode{
  min-height:44px;padding:8px 12px;gap:8px;border-radius:var(--r-pill);border:0;
  background:var(--grad-cta);box-shadow:var(--glow-cta);
}
.v2 #modes .mode:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px rgba(168,85,247,.85),0 0 0 1px rgba(232,121,249,.5) inset}
.v2 #modes .mode .ic{width:auto;height:auto;background:none;font-size:16px}
.v2 #modes .mode .t{font-family:var(--font-body);font-weight:700;font-size:11px;line-height:1.2;letter-spacing:.03em;color:var(--ink-hi)}
.v2 #modes .mode .d{display:none}
.v2 #modes .mode .go{display:none}
.v2 #s-intro .fineprint{margin:var(--s-4) 0 0;padding:0;font-size:12px}

/* anillo "tu aura actual" con halo de fuego */
.v2-ring{position:relative;display:grid;place-items:center;width:132px;height:132px}
.v2-ring::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  background:conic-gradient(from 200deg,var(--ion-400),var(--aura-500),var(--flare-500),var(--aura-600),var(--ion-400));
  filter:blur(14px);opacity:.55;
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 60%);mask:radial-gradient(circle,transparent 56%,#000 60%);
}
.v2-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.v2-ring__track{fill:rgba(7,3,16,.8);stroke:rgba(255,255,255,.08);stroke-width:6}
.v2-ring__arc{fill:none;stroke:url(#v2-grad-ring);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:314;stroke-dashoffset:100;filter:drop-shadow(0 0 6px rgba(139,92,246,.9))}
.v2-ring__center{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.v2-ring__label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-body)}
.v2-ring__num{font-family:var(--font-display);font-weight:700;font-size:38px;line-height:1;color:var(--ink-hi);text-shadow:0 0 20px rgba(139,92,246,.8)}
.v2-ring__max{font-size:11px;color:var(--ink-lo)}

/* quiz y resultado dentro de la tarjeta */
.v2 .hud{padding-top:0}
.v2 .hud-ring{--ring-size:150px;margin-top:0}
.v2 .hud-ring::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  background:conic-gradient(from 200deg,var(--ion-400),var(--aura-500),var(--flare-500),var(--aura-600),var(--ion-400));
  filter:blur(14px);opacity:.45;
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 60%);mask:radial-gradient(circle,transparent 56%,#000 60%);
}
.v2 .cardbox{max-height:520px}
.v2 #cardImg{max-height:460px;width:auto}

/* ---- tarjeta de ejemplo para compartir ---- */
.v2-share{display:none}
@media (min-width:720px){.v2-share{display:block}}
.v2-share__label{margin:0 0 var(--s-3);font-size:15px;font-weight:600;color:var(--ink-hi)}
.v2-sharecard{
  position:relative;overflow:hidden;text-align:center;border-radius:var(--r-lg);
  border:1.5px solid transparent;
  background:linear-gradient(180deg,#120826,#0A0518) padding-box,
             linear-gradient(160deg,var(--aura-400),var(--flare-500) 50%,var(--ion-400)) border-box;
  box-shadow:0 0 0 1px rgba(232,121,249,.2),0 0 60px -4px rgba(217,70,239,.55),0 0 90px -20px rgba(34,211,238,.5);
}
.v2-sharecard__art{position:relative;height:230px;overflow:hidden}
.v2-sharecard__fire{
  position:absolute;inset:0;
  background:
    radial-gradient(38% 30% at 50% 36%,rgba(232,121,249,.55),transparent 70%),
    radial-gradient(50% 45% at 28% 55%,rgba(139,92,246,.6),transparent 72%),
    radial-gradient(50% 45% at 74% 50%,rgba(99,102,241,.55),transparent 72%),
    radial-gradient(70% 40% at 50% 100%,rgba(217,70,239,.45),transparent 75%);
  filter:blur(6px);
}
.v2-sharecard__crown{position:absolute;left:50%;top:14px;width:46px;height:46px;transform:translateX(-50%);
  filter:drop-shadow(0 0 10px rgba(232,121,249,.9))}
.v2-sharecard__sil{position:absolute;left:50%;bottom:-4px;width:92%;height:80%;transform:translateX(-50%);
  fill:#0A0518;filter:drop-shadow(0 0 3px rgba(196,181,253,.95)) drop-shadow(0 0 16px rgba(139,92,246,.8))}
.v2-sharecard__sil .v2-sil__detail{fill:#241546}
.v2-sharecard__info{position:relative;margin-top:-34px;padding:0 var(--s-4) var(--s-5)}
.v2-sharecard__mini{width:24px;height:24px;margin:0 auto 2px;display:block;filter:drop-shadow(0 0 6px rgba(232,121,249,.8))}
.v2-sharecard__brand{margin:0;font-family:var(--font-marker);font-size:15px;color:var(--ink-hi);letter-spacing:.02em}
.v2-sharecard__score{
  display:block;margin:6px 0 8px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,2.6vw,38px);line-height:1;color:var(--ion-300);text-shadow:var(--glow-ion);
  font-variant-numeric:tabular-nums;
}
.v2-sharecard__tier{
  display:inline-block;padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid rgba(34,211,238,.6);background:rgba(34,211,238,.10);
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ion-200);
}
.v2-sharecard__ask{margin:var(--s-3) 0 var(--s-4);font-size:12px;color:var(--ink-body)}

/* ===== 7.3 Duelos ========================================================= */
.v2-duels__rail{display:grid;gap:var(--s-4)}
@media (min-width:720px){.v2-duels__rail{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* mobile: carril horizontal con snap */
@media (max-width:719px){
  .v2-duels__rail{
    grid-auto-flow:column;grid-auto-columns:minmax(250px,80%);
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) var(--s-3);scrollbar-width:none;
  }
  .v2-duels__rail::-webkit-scrollbar{display:none}
  .v2-duel{scroll-snap-align:start}
}
.v2-duel{
  position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#140A2A,#0B0617);
  border:1px solid rgba(139,92,246,.35);box-shadow:0 0 30px -12px rgba(139,92,246,.7);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
}
.v2-duel:hover{transform:translateY(-4px);box-shadow:0 0 40px -8px rgba(217,70,239,.7)}
.v2-duel .badge{position:absolute;top:12px;left:12px;z-index:3}
.v2-duel__media{position:relative;aspect-ratio:1/1;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.v2-duel__half{position:relative;overflow:hidden}
.v2-duel__half--a{background:radial-gradient(80% 60% at 55% 40%,rgba(168,85,247,.75),rgba(76,29,149,.35) 45%,transparent 75%)}
.v2-duel__half--b{background:radial-gradient(80% 60% at 45% 40%,rgba(59,130,246,.7),rgba(79,70,229,.35) 45%,transparent 75%)}
.v2-sil{position:absolute;bottom:0;left:50%;width:108%;height:80%;transform:translateX(-50%);fill:#07030F}
.v2-duel__half--a .v2-sil{filter:drop-shadow(0 0 2px rgba(216,180,254,.95)) drop-shadow(0 0 12px rgba(168,85,247,.8))}
.v2-duel__half--b .v2-sil{filter:drop-shadow(0 0 2px rgba(147,197,253,.95)) drop-shadow(0 0 12px rgba(59,130,246,.8))}
.v2-sil .v2-sil__detail{fill:#1B1033}
/* costura diagonal con luz */
.v2-duel__media::before{
  content:"";position:absolute;top:-10%;bottom:-10%;left:50%;width:2px;z-index:1;
  background:linear-gradient(180deg,transparent,var(--flare-400),var(--ion-400),transparent);
  transform:skewX(-10deg);box-shadow:0 0 14px rgba(232,121,249,.9);
}
.v2-duel__vs{
  position:absolute;left:50%;top:44%;z-index:2;transform:translate(-50%,-50%) skewX(-10deg);
  font-family:var(--font-display);font-weight:700;font-size:clamp(34px,3.2vw,44px);letter-spacing:-.04em;
  background:linear-gradient(100deg,var(--ion-300),var(--aura-400) 50%,var(--flare-400));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(139,92,246,.95));
}
.v2-duel__names{
  position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);padding:var(--s-6) var(--s-3) var(--s-3);
  background:linear-gradient(180deg,transparent,rgba(7,3,16,.92) 55%);
}
.v2-duel__names span{
  font-family:var(--font-body);font-weight:700;font-size:12px;line-height:1.25;
  text-transform:uppercase;letter-spacing:.03em;color:var(--ink-hi);text-align:center;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.v2-duel__cta{padding:var(--s-3) var(--s-4) var(--s-4);display:flex;justify-content:center}

/* ===== 7.4 Rankings ======================================================= */
.v2-rank__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);align-items:stretch}
@media (min-width:1100px){.v2-rank__grid{grid-template-columns:minmax(0,4.2fr) minmax(0,5.6fr) minmax(0,3.2fr);gap:var(--s-5);align-items:center}}
@media (min-width:720px) and (max-width:1099px){
  .v2-rank__grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .v2-rank__grid .v2-head{grid-column:1 / -1}
}
.v2-rank__table,.v2-rank__cta{
  border-radius:var(--r-lg);background:linear-gradient(180deg,#110824,#0A0518);
  border:1px solid rgba(99,102,241,.35);box-shadow:0 0 36px -14px rgba(99,102,241,.7);
}
.v2-tabs{display:flex;gap:6px;padding:var(--s-4) var(--s-4) var(--s-2)}
.v2-tab{
  flex:1;min-height:44px;border:0;border-radius:10px;cursor:pointer;background:none;
  font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-lo);
  transition:color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out);
}
.v2-tab:hover{color:var(--ink-hi)}
.v2-tab[aria-selected="true"]{background:var(--aura-500);color:var(--ink-hi);box-shadow:0 0 22px -4px rgba(139,92,246,.9)}
.v2-rank__cols,.v2-rank__row{display:grid;grid-template-columns:44px 48px 1fr auto;align-items:center;gap:var(--s-3)}
.v2-rank__cols{
  margin:var(--s-2) var(--s-4) 4px;padding:10px var(--s-3);border-radius:10px;background:rgba(255,255,255,.03);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-lo);
}
.v2-rank__cols span:last-child{text-align:right}
.v2-rank__list{list-style:none;margin:0;padding:0 var(--s-4) var(--s-4)}
.v2-rank__row{min-height:64px;margin-top:6px;padding:0 var(--s-3);border-radius:10px;background:rgba(255,255,255,.025);
  transition:background var(--t-fast) var(--ease-out)}
.v2-rank__row:hover{background:rgba(139,92,246,.09)}
.v2-rank__pos{font-family:var(--font-display);font-weight:700;font-size:20px;text-align:center;color:var(--ink-body)}
.v2-rank__row:nth-child(1) .v2-rank__pos{color:var(--gold);text-shadow:0 0 12px rgba(251,191,36,.6)}
.v2-rank__row:nth-child(2) .v2-rank__pos{color:var(--silver)}
.v2-rank__row:nth-child(3) .v2-rank__pos{color:var(--bronze);text-shadow:0 0 12px rgba(251,122,60,.5)}
.v2-rank__avatar{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:21px;
  background:radial-gradient(circle at 50% 35%,#2A1A55,#120826);
  border:2px solid rgba(168,130,255,.35);
}
.v2-rank__row:first-child .v2-rank__avatar{
  border-color:transparent;
  background:radial-gradient(circle at 50% 35%,#2A1A55,#120826) padding-box,var(--grad-ring) border-box;
  box-shadow:0 0 14px rgba(34,211,238,.45);
}
.v2-rank__name{min-width:0;font-weight:600;font-size:14px;color:var(--ink-hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-rank__row:first-child .v2-rank__name{color:var(--ion-300)}
.v2-rank__pts{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink-hi);font-variant-numeric:tabular-nums;text-align:right}
.v2-rank__pts.neg{color:var(--danger)}
@media (max-width:719px){
  .v2-rank__cols,.v2-rank__row{grid-template-columns:34px 44px 1fr auto;gap:var(--s-2)}
  .v2-tabs,.v2-rank__list{padding-left:var(--s-3);padding-right:var(--s-3)}
  .v2-rank__cols{margin-left:var(--s-3);margin-right:var(--s-3)}
}
@media (max-width:419px){
  .v2-rank__cols,.v2-rank__row{grid-template-columns:30px 1fr auto}
  .v2-rank__avatar,.v2-rank__cols span:nth-child(2){display:none}
}
.v2-rank__cta{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--s-4);padding:0 var(--s-5) var(--s-6);min-height:100%;
}
.v2-rank__art{
  position:relative;width:calc(100% + 2 * var(--s-5));height:200px;margin:0 calc(var(--s-5) * -1);
  background:
    radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 30% 8%,#fffa,transparent),
    radial-gradient(1px 1px at 68% 14%,#fff,transparent),radial-gradient(1.5px 1.5px at 84% 26%,#fffc,transparent),
    radial-gradient(1px 1px at 52% 30%,#fff9,transparent),radial-gradient(1px 1px at 22% 40%,#fff8,transparent),
    radial-gradient(45% 55% at 50% 62%,rgba(217,70,239,.55),transparent 72%),
    radial-gradient(70% 60% at 50% 30%,rgba(109,40,217,.45),transparent 75%);
}
.v2-peak{position:absolute;left:0;right:0;bottom:0;width:100%;height:76%}
.v2-peak__main{fill:#0C0618;filter:drop-shadow(0 -2px 6px rgba(217,70,239,.6))}
.v2-rank__crown{position:absolute;left:50%;top:18px;width:58px;height:58px;transform:translateX(-50%);
  filter:drop-shadow(0 0 12px rgba(232,121,249,.95))}
.v2-rank__cta .v2-pill{white-space:nowrap;padding-left:20px;padding-right:20px}
.v2-rank__cta h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(20px,1.7vw,24px);
  line-height:1.15;letter-spacing:-.01em;color:var(--ink-hi);text-wrap:balance}

/* ===== 7.5 Guias ========================================================== */
.v2-guides__grid{display:grid;gap:var(--s-4)}
@media (min-width:720px){.v2-guides__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.v2-guide{
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#120826,#0A0518);border:1px solid rgba(139,92,246,.3);
  box-shadow:0 0 30px -14px rgba(139,92,246,.7);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out);
}
.v2-guide:hover{transform:translateY(-4px);border-color:rgba(217,70,239,.5);box-shadow:0 0 40px -10px rgba(217,70,239,.7)}
.v2-guide__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.v2-guide__media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.8) contrast(1.08)}
/* tinte violeta para que las fotos entren en la paleta del sitio */
.v2-guide__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(124,58,237,.28),rgba(192,38,211,.22) 60%,rgba(10,5,24,.55));
  mix-blend-mode:hard-light;
}
.v2-guide .badge{position:absolute;top:12px;left:12px;z-index:1}
.v2-guide__body{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4) var(--s-4) var(--s-3);flex:1}
.v2-guide h3{
  margin:0;font-family:var(--font-body);font-weight:700;font-size:16px;line-height:1.3;color:var(--ink-hi);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.v2-guide__excerpt{
  margin:0;font-size:13px;line-height:1.5;color:var(--ink-lo);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.v2-guide__meta{
  display:flex;align-items:center;gap:var(--s-2);margin-top:auto;padding-top:var(--s-3);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-lo);
}
.v2-guide__arrow{margin-left:auto;color:var(--ink-hi);transition:transform var(--t-base) var(--ease-out)}
.v2-guide:hover .v2-guide__arrow{transform:translateX(4px)}

/* ===== 7.6 Banda final ==================================================== */
.v2-final{position:relative;overflow:hidden;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);background:#0A0418}
.v2-final__sky{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1px 1px at 8% 20%,#fff9,transparent),radial-gradient(1px 1px at 18% 70%,#fff7,transparent),
    radial-gradient(1px 1px at 62% 12%,#fff9,transparent),radial-gradient(1.5px 1.5px at 76% 30%,#fffb,transparent),
    radial-gradient(1px 1px at 90% 12%,#fff8,transparent),radial-gradient(1px 1px at 44% 22%,#fff6,transparent),
    linear-gradient(160deg,transparent 30%,rgba(139,92,246,.35) 45%,rgba(217,70,239,.45) 55%,rgba(59,130,246,.3) 65%,transparent 78%),
    radial-gradient(35% 60% at 20% 45%,rgba(109,40,217,.45),transparent 75%),
    radial-gradient(30% 60% at 82% 55%,rgba(59,130,246,.3),transparent 75%);
}
.v2-mtn--final{height:clamp(90px,12vw,160px)}
.v2-final .v2-inner{display:grid;gap:var(--s-6);align-items:center;text-align:center;justify-items:center;
  padding-top:var(--s-8);padding-bottom:var(--s-9)}
@media (min-width:900px){
  .v2-final .v2-inner{grid-template-columns:minmax(0,5.6fr) minmax(0,4.4fr) minmax(0,2.5fr)}
  .v2-final .v2-final__poster{font-size:min(76px,calc((min(100vw,var(--container)) - 2 * var(--gutter) - 2 * var(--s-6)) * 5.6 / 12.5 / var(--fit,6.4)))}
  .v2-final__poster{justify-self:start;text-align:left}
}
.v2-final__poster{
  margin:0;font-family:var(--font-marker);font-weight:400;text-transform:uppercase;
  /* dos lineas fijas ("TU AURA" / "TE ESPERA", ~5.6em la mas ancha) */
  font-size:min(76px,calc((100vw - 2 * var(--gutter)) / var(--fit,6.3)));white-space:nowrap;
  line-height:.95;letter-spacing:.01em;color:var(--ink-hi);
  transform:rotate(-6deg);text-shadow:0 6px 30px rgba(0,0,0,.6);
}
.v2-final__poster .v2-brush{transform:none;font-size:1em}
.v2-final__mid p{margin:0 auto var(--s-5);max-width:34ch;font-size:clamp(16px,1.4vw,19px);font-weight:600;line-height:1.55;color:var(--ink-hi)}
.v2-final__mid .btn{min-height:54px;padding:15px 36px;font-size:14px}
.v2-final__marker{
  display:none;margin:0;font-family:var(--font-marker);font-size:28px;line-height:1.25;
  color:var(--flare-400);transform:rotate(-8deg);text-shadow:0 0 16px rgba(217,70,239,.6);
}
.v2-final__crown{display:block;width:40px;height:40px;margin:8px 0 0 70px}
@media (min-width:900px){.v2-final__marker{display:block}}

/* ===== Sobre / preguntas frecuentes (texto de la home actual) ============= */
.v2-faq{background:var(--abyss)}
.v2-faq .v2-inner{padding-top:var(--s-8);padding-bottom:var(--s-8)}
.v2-faq__grid{display:grid;gap:var(--s-6)}
@media (min-width:960px){.v2-faq__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-7)}}
.v2-faq h2{margin:0 0 var(--s-3);font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.1;letter-spacing:-.02em;color:var(--ink-hi)}
.v2-faq .about p{margin:0 0 var(--s-3);font-size:var(--t-sm);line-height:1.7;color:var(--ink-body)}

/* el pie de la home viene con la columna de 520px (.app-foot); aca usa el contenedor */
main.v2 ~ .site-footer{margin-top:0}
main.v2 ~ .site-footer .app-foot{max-width:var(--container);padding:0 var(--gutter)}