/*
 * ═══════════════════════════════════════════════════════════════════════════
 *  LA ÚLTIMA PISTA — lup-index.css
 *  Componentes exclusivos de la página de inicio.
 *  Requiere: lup.css
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.hero{
  background:var(--d-bg);
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:7rem 0 6rem;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;top:-10%;right:5%;
  width:55vw;height:75vh;max-width:750px;
  background:radial-gradient(ellipse,rgba(200,168,72,.07) 0%,transparent 65%);
  border-radius:50%;pointer-events:none;
}
.hero .wrap{z-index:3}
.hero__inner{
  display:grid;
  grid-template-columns:1fr minmax(0,480px);
  gap:4rem;align-items:center;
}
.hero__left{max-width:720px}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.85rem;
  font-size:.63rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:2rem;
}
.hero__eyebrow::after{content:'';height:1px;width:36px;background:var(--gold);opacity:.4}

.hero__title{
  font-family:var(--serif);
  font-size:clamp(3.5rem,9vw,10rem);
  color:var(--d-paper);line-height:1.02;
  letter-spacing:-.02em;font-weight:300;margin-bottom:2rem;
}
.hero__title em{color:var(--gold);font-style:italic;font-weight:300}
.hero__lead{
  font-size:1.1rem;line-height:2;color:var(--d-cream);
  max-width:540px;margin-bottom:2.5rem;font-weight:300;
}
.hero__ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3.5rem}
.hero__stats{
  display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
  padding-top:2rem;border-top:1px solid var(--d-brd2);
}
.hero__stat{display:flex;flex-direction:column;gap:.2rem}
.hero__stat-num{font-family:var(--serif);font-size:2.2rem;color:var(--gold);line-height:1;font-weight:300}
.hero__stat-lbl{font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--d-muted)}
.hero__stat-sep{width:1px;height:32px;background:var(--d-brd2)}

/* Scroll cue */
.hero__scroll{position:absolute;bottom:2.5rem;left:clamp(1.5rem,5vw,4rem);z-index:3}
.hero__scroll-line{
  width:1px;height:44px;
  background:linear-gradient(180deg,var(--gold),transparent);
  animation:lup-scroll 2.2s ease-in-out infinite;
}
@keyframes lup-scroll{
  0%,100%{opacity:0;transform:scaleY(0);transform-origin:top}
  50%{opacity:1;transform:scaleY(1)}
}

/* Preview cards (desktop side column) */
.preview{display:flex;flex-direction:column;gap:1rem}
.pcard{background:var(--d-lift);border:1px solid var(--d-brd2);border-radius:var(--r3);padding:1.5rem;position:relative}
.pcard--org{border-color:rgba(200,168,72,.2);border-left:2px solid var(--gold)}
.pcard--player{margin-left:1.75rem}
.pcard-role{display:flex;align-items:center;gap:.55rem;font-size:.6rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1rem}
.pcard-role--org{color:var(--gold)}
.pcard-role--player{color:var(--d-muted)}
.pcard-role--org::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 7px var(--gold);flex-shrink:0;animation:lup-blink 2s ease-in-out infinite}
.pcard-role--player::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--d-muted);flex-shrink:0}
@keyframes lup-blink{0%,100%{opacity:1}50%{opacity:.2}}
.pcard-rows{display:flex;flex-direction:column;gap:.35rem}
.pcard-row{display:flex;justify-content:space-between;font-size:.7rem;color:var(--d-muted);line-height:1.6}
.pcard-row span:last-child{color:var(--d-cream)}
.pcard-row .bad{color:#b07070}.pcard-row .ok{color:#7db898}
.pcard-q{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--d-paper);line-height:1.55;margin-bottom:1rem;font-weight:300}
.pcard-input{display:flex;gap:.5rem}
.pcard-field{flex:1;height:40px;background:rgba(255,255,255,.04);border:1px solid var(--d-brd2);border-bottom:2px solid rgba(200,168,72,.28);border-radius:var(--r2)}
.pcard-send{width:40px;height:40px;background:var(--gold);border-radius:var(--r2);display:flex;align-items:center;justify-content:center;color:var(--d-bg);font-size:.9rem;flex-shrink:0}
.pcard-whisper{font-size:.6rem;color:var(--d-faint);margin-top:.6rem;font-style:italic;letter-spacing:.04em}

/* ══════════════════════════════════════════════════════
   CALLOUT — "Cuanto más nos cuentes"
══════════════════════════════════════════════════════ */
.prep-callout{
  margin-top:clamp(3.5rem,7vw,6rem);
  padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,4vw,4rem);
  border-left:2px solid var(--gold);
  background:linear-gradient(90deg,rgba(200,168,72,.05),transparent 80%);
  border-radius:0 var(--r3) var(--r3) 0;
  position:relative;
}
.prep-callout__q{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.5rem,3vw,2.4rem);font-weight:300;
  color:var(--l-ink);line-height:1.35;margin-bottom:1.25rem;
  letter-spacing:-.01em;
}
.prep-callout__q em{color:var(--gold);font-style:italic}
.prep-callout__body{font-size:.88rem;color:var(--l-muted);line-height:1.9;max-width:620px}
.prep-callout__body strong{color:var(--l-ink)}

/* ══════════════════════════════════════════════════════
   ROLES
══════════════════════════════════════════════════════ */
.roles-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;align-items:start}
.role-card{background:var(--l-card);border:1px solid var(--l-brd);border-radius:var(--r4);overflow:hidden}
.role-card__img{width:100%;aspect-ratio:4/3}
.role-card__body{padding:2rem 2.25rem 2.5rem}
.role-card__icon{
  width:44px;height:44px;background:var(--gold-bg);
  border:1px solid rgba(200,168,72,.18);border-radius:var(--r2);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;margin-bottom:1.25rem;
}
.role-card h3{color:var(--l-ink);margin-bottom:.75rem}
.role-card p{font-size:.9rem;color:var(--l-muted);margin-bottom:1.5rem}
.role-feats{display:flex;flex-direction:column;gap:.6rem}
.role-feat{display:flex;align-items:flex-start;gap:.7rem;font-size:.82rem;color:var(--l-mid);line-height:1.55}
.role-feat::before{content:'→';color:var(--gold);flex-shrink:0;margin-top:.05rem}
.role-note{
  margin-top:1.5rem;padding:1rem 1.25rem;
  background:var(--gold-bg);border:1px solid rgba(200,168,72,.15);
  border-radius:var(--r2);font-family:var(--serif);font-style:italic;
  font-size:.95rem;color:var(--l-mid);line-height:1.65;
}
.role-note--dim{background:rgba(180,150,100,.04);border-color:var(--l-brd2);color:var(--l-muted)}

/* ══════════════════════════════════════════════════════
   PARA QUIÉN — eventos
══════════════════════════════════════════════════════ */
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.event-card{
  display:flex;flex-direction:column;gap:.6rem;
  padding:2rem 1.75rem;
  background:rgba(255,255,255,.03);border:1px solid var(--d-brd2);
  border-radius:var(--r3);
  transition:border-color .25s,background .25s,transform .2s;color:inherit;
}
.event-card:hover{border-color:var(--d-brd);background:rgba(255,255,255,.05);transform:translateY(-3px)}
.event-card__icon{display:block;width:28px;height:28px;margin-bottom:.5rem;flex-shrink:0}
.event-card__icon svg{width:28px;height:28px}
.event-card__name{font-family:var(--serif);font-size:1.3rem;color:var(--d-paper);font-weight:300}
.event-card__desc{font-size:.8rem;color:var(--d-muted);line-height:1.7}

/* ══════════════════════════════════════════════════════
   CÓMO FUNCIONA — steps
══════════════════════════════════════════════════════ */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5rem;position:relative}

.step__num{font-family:var(--serif);font-size:5rem;font-weight:300;color:var(--gold);opacity:.45;line-height:1;margin-bottom:1.5rem}
.step h3{color:var(--l-ink);margin-bottom:.75rem}
.step p{font-size:.88rem;color:var(--l-muted)}
.step__tag{display:inline-block;margin-top:1rem;font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dk)}

/* ══════════════════════════════════════════════════════
   TIPOS DE PRUEBA
══════════════════════════════════════════════════════ */
.pruebas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.prueba{
  padding:1.75rem 1.5rem;background:var(--l-card);
  border:1px solid var(--l-brd2);border-radius:var(--r2);
  transition:border-color .2s,transform .2s;
}
.prueba:hover{border-color:var(--l-brd);transform:translateY(-2px)}
.prueba__glyph{font-family:var(--serif);font-size:3.5rem;color:var(--gold);opacity:.3;line-height:1;margin-bottom:.85rem;font-weight:300}
.prueba__name{font-size:.85rem;font-weight:500;color:var(--l-ink);margin-bottom:.4rem}
.prueba__desc{font-size:.78rem;color:var(--l-muted);line-height:1.8}

/* ══════════════════════════════════════════════════════
   PACKS (resumen en index)
══════════════════════════════════════════════════════ */
.packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start}
.pack{
  padding:2.5rem 2rem;background:var(--l-card);border:1px solid var(--l-brd);
  border-radius:var(--r4);display:flex;flex-direction:column;gap:1.1rem;
  position:relative;transition:box-shadow .25s;
}
.pack:hover{box-shadow:0 12px 40px rgba(180,150,100,.1)}
.pack--sig{background:var(--d-mid);border-color:rgba(200,168,72,.25);border-top:2px solid var(--gold)}
.pack--sig .pack__tier{color:var(--gold)}
.pack--sig .pack__price{color:var(--d-paper)}
.pack--sig .pack__desc{color:var(--d-muted)}
.pack--sig .pack__feat{color:var(--d-cream)}
.pack--sig .btn--ghost-lt{border-color:rgba(200,168,72,.3);color:var(--d-cream)}
.pack--sig .btn--ghost-lt:hover{border-color:var(--gold);color:var(--gold)}
.pack--sig .btn--primary{background:var(--gold);color:#0a0806!important;border-color:var(--gold)}


/* pack--ess summary (index) */
.pack--ess{border-top:2px solid var(--gold-dk)}
.pack--ess .pack__tier{color:var(--gold-dk)}
.pack__badge{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--gold);color:var(--d-bg);
  padding:.3rem 1rem;border-radius:0 0 var(--r2) var(--r2);
}
.pack__tier{font-size:.65rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--l-muted)}
.pack__price{font-family:var(--serif);font-size:4.5rem;color:var(--l-ink);line-height:1;font-weight:300}
.pack__price sup{font-size:1.3rem;vertical-align:top;margin-top:.8rem;font-family:var(--mono);color:var(--l-muted)}
.pack__desc{font-size:.8rem;color:var(--l-muted);line-height:1.75}
.pack__feats{display:flex;flex-direction:column;gap:.55rem;flex:1}
.pack__feat{font-size:.8rem;color:var(--l-mid);display:flex;align-items:flex-start;gap:.6rem;line-height:1.55}
.pack__feat::before{content:'✓';color:var(--ok);flex-shrink:0;font-size:.76rem;margin-top:.12rem}

/* ══════════════════════════════════════════════════════
   TESTIMONIOS
══════════════════════════════════════════════════════ */
.testis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.testi{
  background:rgba(255,255,255,.03);border:1px solid var(--d-brd2);
  border-radius:var(--r3);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .25s;
}
.testi:hover{border-color:var(--d-brd)}
.testi__body{padding:2rem 1.75rem;flex:1;display:flex;flex-direction:column;gap:1.1rem}
.testi__stars{color:var(--gold);font-size:.75rem;letter-spacing:.08em}
.testi__q{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--d-cream);line-height:1.8;flex:1;font-weight:300}
.testi__foot{display:flex;align-items:center;gap:.85rem;padding-top:1rem;border-top:1px solid var(--d-brd2)}
.testi__av{
  width:38px;height:38px;border-radius:50%;
  background:var(--d-lift);border:1px solid var(--d-brd);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1rem;color:var(--gold);flex-shrink:0;
}
.testi__name{font-size:.82rem;font-weight:500;color:var(--d-paper);margin-bottom:.12rem}
.testi__evt{font-size:.7rem;color:var(--d-muted)}

/* ══════════════════════════════════════════════════════
   FAQ (layout de index — dos columnas)
══════════════════════════════════════════════════════ */
.faq-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:6rem;align-items:start}
.faq-anchor h2{color:var(--l-ink);margin-top:.6rem;margin-bottom:1rem}

/* ══════════════════════════════════════════════════════
   CONTACTO
══════════════════════════════════════════════════════ */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.contacto-l h2{color:var(--l-ink);margin-top:.6rem;margin-bottom:1.25rem}
.contacto-l .lead{color:var(--l-mid)}
.c-details{margin-top:2rem;display:flex;flex-direction:column;gap:.7rem}
.c-detail{font-size:.82rem;display:flex;align-items:center;gap:.6rem;color:var(--l-muted)}
.c-detail::before{content:'→';color:var(--gold);flex-shrink:0}
.c-detail a{color:var(--l-muted)}
.c-detail a:hover{color:var(--gold-dk)}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — INDEX
══════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .hero__inner{grid-template-columns:1fr}
  .preview{display:none}
  .roles-grid{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:860px){
  .roles-grid{grid-template-columns:1fr 1fr}
  .steps-grid{grid-template-columns:1fr}
  .steps-grid::before{display:none}
  .events-grid{grid-template-columns:1fr 1fr}
  .pruebas-grid{grid-template-columns:1fr 1fr}
  .packs-grid{grid-template-columns:1fr}
  .testis-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  /* Hero */
  h1{font-size:clamp(2.8rem,10vw,5rem)}
  .hero{padding:5rem 0 3rem}
  .hero__eyebrow{font-size:.65rem}
  .hero__stats{gap:1rem}
  .hero__stat-lbl{font-size:.65rem}

  /* Grids */
  .roles-grid{grid-template-columns:1fr}
  .events-grid,.pruebas-grid{grid-template-columns:1fr}
  .contacto-grid{grid-template-columns:1fr;gap:2.5rem}
  .faq-layout{grid-template-columns:1fr;gap:2rem}

  /* FAQ touch targets */
  .faq-anchor p a{display:inline-block;padding:.4rem 0}

  /* Packs */
  .pack{padding:2rem 1.5rem}
  .pack__price{font-size:3.5rem}

  /* Testimonios */
  .testi__q{font-size:.95rem}

  /* Contact */
  .c-detail{padding:.3rem 0}

  /* Prep callout */
  .prep-callout{padding:2rem 1.5rem}
}