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

/* ══════════════════════════════════════════════════════
   PAGE HEADER (compartido con legal — extractable a lup.css si escala)
══════════════════════════════════════════════════════ */
.page-header{
  background:var(--d-bg);
  padding:clamp(8rem,14vw,13rem) 0 clamp(5rem,9vw,8rem);
  position:relative;overflow:hidden;
}
.page-header::before{
  content:'';position:absolute;top:-20%;right:0;
  width:60vw;height:80vh;max-width:800px;
  background:radial-gradient(ellipse,rgba(200,168,72,.07) 0%,transparent 65%);
  border-radius:50%;pointer-events:none;
}
.page-header__breadcrumb{
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--d-muted);margin-bottom:2rem;
  display:flex;align-items:center;gap:.5rem;
}
.page-header__breadcrumb a{color:var(--d-muted);transition:color .2s}
.page-header__breadcrumb a:hover{color:var(--d-cream)}
.page-header__breadcrumb span{color:var(--gold)}
.page-header__breadcrumb::before{content:'›';color:var(--d-faint)}
.page-header h1{font-size:clamp(3rem,7vw,7.5rem);color:var(--d-paper);margin-bottom:1.5rem}
.page-header h1 em{color:var(--gold);font-style:italic}
.page-header__lead{font-size:1rem;line-height:1.9;color:var(--d-cream);max-width:540px;margin-bottom:2.5rem;font-weight:300}
.page-header__tags{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding-top:2rem;border-top:1px solid var(--d-brd2);
}
.page-header__tag{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--d-muted);display:flex;align-items:center;gap:.5rem}
.page-header__tag::before{content:'→';color:var(--gold)}

/* Sección con fondo oscuro (mid) */
.section--dk{background:var(--d-mid)}
.section--warm{background:var(--l-warm)}
.section--dk+.section::before,
.section+.section--dk::before{display:none}

/* ══════════════════════════════════════════════════════
   PACK CARDS (versión detallada de precios.html)
══════════════════════════════════════════════════════ */
.packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
.pack-card{
  padding:2.5rem 2rem;
  background:var(--l-card);
  border:1px solid var(--l-brd);
  border-radius:var(--r4);
  display:grid;
  grid-template-rows:auto auto auto 1fr auto auto;
  gap:1rem;
  position:relative;
  transition:box-shadow .25s;
}
.pack-card:hover{box-shadow:0 12px 40px rgba(180,150,100,.1)}
.pack-card--sig{background:var(--d-mid);border-color:rgba(200,168,72,.25);border-top:2px solid var(--gold)}

.pack-card__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:#0a0806;padding:.3rem 1rem;
  border-radius:0 0 var(--r2) var(--r2);
}
.pack-card__tier{font-size:.65rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--l-muted)}
.pack-card--sig .pack-card__tier{color:var(--gold)}

.pack-card__price{font-family:var(--serif);font-size:5rem;color:var(--l-ink);line-height:1;font-weight:300}
.pack-card--sig .pack-card__price{color:var(--d-paper)}
.pack-card__price sup{font-size:1.4rem;vertical-align:top;margin-top:.9rem;font-family:var(--mono);color:var(--l-muted)}
.pack-card--sig .pack-card__price sup{color:var(--d-muted)}

.pack-card__note{font-size:.72rem;color:var(--l-muted);line-height:1.75}
.pack-card--sig .pack-card__note{color:var(--d-muted)}

.pack-card__feats{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--l-brd2)}
.pack-card--sig .pack-card__feats{border-color:var(--d-brd2)}
.pack-card__feat{font-size:.82rem;color:var(--l-mid);display:flex;align-items:flex-start;gap:.6rem;line-height:1.55}
.pack-card--sig .pack-card__feat{color:var(--d-cream)}
.pack-card__feat::before{content:'✓';color:var(--ok);flex-shrink:0;font-size:.76rem;margin-top:.12rem}
.pack-card__feat--no{color:var(--l-faint)}
.pack-card--sig .pack-card__feat--no{color:var(--d-faint)}
.pack-card__feat--no::before{content:'—';color:var(--l-faint)}
.pack-card--sig .pack-card__feat--no::before{color:var(--d-faint)}
.pack-card--sig .btn--primary{background:var(--gold);color:#0a0806!important}
.pack-card--sig .btn--ghost-dk{border-color:rgba(200,168,72,.3);color:var(--d-cream)}
.pack-card--sig .btn--ghost-dk:hover{border-color:var(--gold);color:var(--gold)}
.pack-card__ivnote{font-size:.7rem;color:var(--l-faint);text-align:center;margin-top:.25rem}
.pack-card--sig .pack-card__ivnote{color:var(--d-faint)}


/* ── Pack Esencial ── */
/* ── Pack summary (index) ── */
/* ══════════════════════════════════════════════════════
   TABLA COMPARATIVA
══════════════════════════════════════════════════════ */
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;border-collapse:collapse;font-size:.82rem}
.compare-table th{
  font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--d-muted);
  padding:1rem 1.25rem;text-align:center;border-bottom:1px solid var(--d-brd);
}
.compare-table th:first-child{text-align:left;color:var(--d-cream)}
.compare-table th .price{
  display:block;font-family:var(--serif);font-size:1.4rem;
  color:var(--gold);font-weight:300;letter-spacing:0;
  text-transform:none;margin-top:.2rem;
}
.compare-table th.col-sig{color:var(--gold);border-bottom-color:var(--gold)}
.compare-table td{
  padding:.85rem 1.25rem;border-bottom:1px solid var(--d-brd2);
  color:var(--d-cream);text-align:center;
}
.compare-table td:first-child{text-align:left;color:var(--d-muted);font-size:.8rem}
.compare-table tr:last-child td{border-bottom:none}
.compare-table .ok{color:var(--ok);font-size:.9rem}
.compare-table .no{color:var(--d-faint)}
.compare-table tbody tr:hover td{background:rgba(255,255,255,.025)}

/* ══════════════════════════════════════════════════════
   EXTRAS
══════════════════════════════════════════════════════ */
.extras-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.extra-card{
  padding:1.75rem;background:var(--l-card);
  border:1px solid var(--l-brd2);border-radius:var(--r3);
  display:flex;flex-direction:column;gap:1rem;
  transition:border-color .2s,transform .2s;
}
.extra-card:hover{border-color:var(--l-brd);transform:translateY(-2px)}
.extra-card__num{font-size:.6rem;letter-spacing:.2em;color:var(--l-faint)}
.extra-card h3{font-size:1.1rem;color:var(--l-ink);margin:0}
.extra-card p{font-size:.8rem;color:var(--l-muted);line-height:1.8;flex:1}
.extra-card__price{font-family:var(--serif);font-size:2rem;color:var(--gold);font-weight:300;line-height:1}

/* ══════════════════════════════════════════════════════
   CALCULADORA DE PRECIO
══════════════════════════════════════════════════════ */
.calc-layout{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start}
.calc-section-lbl{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:block}

.calc-options{display:flex;flex-direction:column;gap:1px;background:var(--d-brd2);border-radius:var(--r2);overflow:hidden;margin-bottom:2rem}
.calc-opt{display:flex;align-items:center;gap:1rem;background:var(--d-lift);padding:1.1rem 1.25rem;cursor:pointer;transition:background .15s;border:none}
.calc-opt:hover{background:rgba(255,255,255,.04)}
.calc-opt input[type="radio"],
.calc-opt input[type="checkbox"]{accent-color:var(--gold);width:15px;height:15px;flex-shrink:0;cursor:pointer}
.calc-opt__inner{flex:1;min-width:0}
.calc-opt__name{font-family:var(--serif);font-size:1.3rem;color:var(--d-paper);line-height:1;display:block;font-weight:300}
.calc-opt__desc{font-size:.68rem;color:var(--d-muted);display:block;margin-top:.2rem;letter-spacing:.04em}
.calc-opt__price{font-size:.72rem;letter-spacing:.1em;color:var(--gold);flex-shrink:0;font-weight:500}
.calc-qty{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.calc-qty-label{font-size:.62rem;color:var(--d-muted)}
.calc-qty-input{
  width:52px;padding:.4rem .5rem;
  background:rgba(255,255,255,.06);border:1px solid var(--d-brd2);
  border-radius:var(--r);color:var(--d-paper);
  font-size:.8rem;text-align:center;font-family:var(--mono);
}

.calc-total{
  background:var(--d-lift);border:1px solid var(--d-brd);
  padding:2rem;border-radius:var(--r3);
  position:sticky;top:6.5rem;
}
.calc-total::before{
  content:'';display:block;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  margin-bottom:1.75rem;opacity:.5;
}
.calc-total__lbl{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--d-muted);margin-bottom:.6rem}
.calc-total__val{font-family:var(--serif);font-size:5rem;color:var(--gold);line-height:1;font-weight:300;margin-bottom:.5rem}
.calc-total__summary{font-size:.7rem;color:var(--d-muted);margin-bottom:1.5rem;min-height:3rem;line-height:1.7;white-space:pre-line}
.calc-total__div{height:1px;background:var(--d-brd2);margin-bottom:1.5rem}
.calc-total__note{font-size:.65rem;color:var(--d-faint);line-height:1.65;margin-top:1rem}

/* ══════════════════════════════════════════════════════
   TEMAS VISUALES
══════════════════════════════════════════════════════ */
.themes-row{
  display:flex;gap:1px;background:var(--l-brd2);
  border-radius:var(--r3);overflow:hidden;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.themes-row::-webkit-scrollbar{display:none}
.theme-card{flex:1;min-width:180px;scroll-snap-align:start;display:flex;flex-direction:column;cursor:default;transition:transform .2s}
.theme-card:hover{transform:translateY(-3px)}
.theme-card__preview{height:130px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.05rem;font-style:italic;font-weight:300}
.theme-card__info{padding:1.25rem;background:var(--l-warm)}
.theme-card__name{font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--l-ink);display:block;margin-bottom:.35rem}
.theme-card__desc{font-size:.72rem;color:var(--l-muted);line-height:1.65}
/* Previews por tema */
.theme--elegant   .theme-card__preview{background:#0d0d12;color:#c8a848}
.theme--mystery   .theme-card__preview{background:#1a1e28;color:#7ba3cc}
.theme--romantic  .theme-card__preview{background:#2a1a1a;color:#e8a0a0}
.theme--birthday  .theme-card__preview{background:#1a2030;color:#f0c060}
.theme--adventure .theme-card__preview{background:#1a2215;color:#80c060}

/* ══════════════════════════════════════════════════════
   CTA FINAL
══════════════════════════════════════════════════════ */
.cta-final{text-align:center;max-width:600px;margin:0 auto}
.cta-final h2{margin-bottom:1.25rem}
.cta-final p{margin-bottom:2.5rem;font-size:.95rem}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — PRECIOS
══════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .packs-grid{grid-template-columns:1fr 1fr}
  .calc-layout{grid-template-columns:1fr}
  .calc-total{position:static}
}
@media(max-width:860px){
  .extras-grid{grid-template-columns:1fr 1fr}
  }
@media(max-width:640px){
  .packs-grid{grid-template-columns:1fr}
  .extras-grid{grid-template-columns:1fr}
  .cta-actions{flex-direction:column;align-items:center}
}

/* ═══ ESS-BANNER + FLIP CARDS ═══ */
.ess-banner{
  display:flex;align-items:center;gap:2rem;
  background:var(--l-card);border:1px solid var(--l-brd);
  border-left:3px solid var(--gold-dk);
  border-radius:0 var(--r4) var(--r4) 0;
  padding:1.75rem 2rem 1.75rem 1.75rem;
  margin-bottom:2rem;position:relative;
}
.ess-banner::before{
  content:'Precio de entrada';
  position:absolute;top:-1px;left:1.75rem;
  background:var(--gold-dk);color:#fff;
  font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.28rem 1rem;border-radius:0 0 var(--r2) var(--r2);
}
.ess-banner__left{flex-shrink:0;min-width:80px}
.ess-banner__tier{font-size:.6rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:.2rem}
.ess-banner__price{font-family:var(--serif);font-size:4rem;color:var(--l-ink);line-height:1;font-weight:300}
.ess-banner__price sup{font-size:1rem;vertical-align:top;margin-top:.7rem;font-family:var(--mono);color:var(--l-muted)}
.ess-banner__sep{width:1px;height:64px;background:var(--l-brd);flex-shrink:0}
.ess-banner__body{flex:1;min-width:0}
.ess-banner__note{font-size:.82rem;color:var(--l-mid);line-height:1.6;margin:0 0 .6rem}
.ess-banner__feats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .85rem}
.ess-banner__feat{font-size:.75rem;color:var(--l-muted);display:flex;align-items:center;gap:.3rem}
.ess-banner__feat::before{content:'✓';color:var(--ok);font-size:.68rem}
.ess-banner__feat--no{color:var(--l-faint)}
.ess-banner__feat--no::before{content:'—';color:var(--l-faint)}
.ess-banner__cta{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;flex-shrink:0}
.ess-banner__ivnote{font-size:.62rem;color:var(--l-faint);white-space:nowrap}

.flip-wrap{perspective:1000px;height:400px;cursor:pointer}
.flip-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
@media(hover:hover){.flip-wrap:hover .flip-inner{transform:rotateY(180deg)}}
.flip-wrap.flipped .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--r4);padding:2rem 1.75rem;
  display:flex;flex-direction:column;
  background:var(--l-card);border:1px solid var(--l-brd);
}
.flip-back{transform:rotateY(180deg);justify-content:space-between}
.flip-hint{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--l-faint);text-align:center;margin-top:auto;padding-top:.75rem}
.flip-feats{flex:1;margin:0}
.flip-wrap--sig .flip-front,.flip-wrap--sig .flip-back{background:var(--d-mid);border-color:rgba(200,168,72,.25);border-top:2px solid var(--gold)}
.flip-wrap--sig .pack-card__tier{color:var(--gold)}
.flip-wrap--sig .pack-card__price{color:var(--d-paper)}
.flip-wrap--sig .pack-card__note{color:var(--d-muted)}
.flip-wrap--sig .pack-card__feat{color:var(--d-cream)}
.flip-wrap--sig .pack-card__feat::before{color:var(--ok)}
.flip-wrap--sig .pack-card__ivnote{color:var(--d-faint)}
.flip-wrap--sig .flip-hint{color:var(--d-faint)}
.flip-wrap--sig .btn--primary{background:var(--gold);color:#0a0806!important}

@media(max-width:1024px){
  .packs-flip-grid{grid-template-columns:1fr 1fr}
  .flip-wrap{height:380px}
}
@media(max-width:860px){
  .ess-banner{flex-direction:column;align-items:flex-start;gap:1.25rem;border-radius:var(--r4);border-left:none;border-top:2px solid var(--gold-dk)}
  .ess-banner__sep{display:none}
  .ess-banner__cta{align-items:flex-start;width:100%}
  .ess-banner__cta .btn{width:100%;justify-content:center}
  .packs-flip-grid{grid-template-columns:1fr}
  .flip-wrap{height:auto;cursor:default}
  .flip-inner{transform-style:flat;transform:none!important;transition:none}
  .flip-front{display:none}
  .flip-back{
    position:relative;transform:none!important;
    backface-visibility:visible;-webkit-backface-visibility:visible;
    border-radius:var(--r4);
    border:1px solid var(--l-brd);
    background:var(--l-card);
  }
  .flip-wrap--base .flip-back{
    background:var(--d-mid);
    border-color:rgba(200,168,72,.25);
    border-top:2px solid var(--gold);
  }
}