/* =============================================================
   CHIQUI TAROT — hoja de estilo única
   Paleta y tipografía derivadas del logo (oro #D8A25B)
   1 Tokens · 2 Reset · 3 Utilidades · 4 Tipografía · 5 Componentes
   6 Secciones · 7 Efectos · 8 Responsive · 9 Reduced-motion
   ============================================================= */

/* ============ 1. TOKENS ============ */
:root{
  /* Fondos: aubergine profundo, nunca negro puro */
  --bg:        #130C17;
  --bg-2:      #1A1021;
  --bg-3:      #22162C;   /* tarjetas */
  --bg-4:      #2B1C37;   /* tarjetas elevadas */

  /* Oro del logo */
  --gold:      #D8A25B;
  --gold-lt:   #EBC596;
  --gold-dp:   #B17253;
  --gold-metal: linear-gradient(170deg,#F2D6AC 0%,#EBC596 18%,#D8A25B 52%,#B17253 86%,#D8A25B 100%);

  /* Tintas */
  --cream:     #F5ECDE;
  --cream-2:   #DCCFBD;
  --cream-3:   #9C8C7E;

  --plum:      #5B2C70;
  --plum-lt:   #7E42A0;

  --line:      rgba(216,162,91,.20);
  --line-soft: rgba(245,236,222,.09);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --caps: "Cinzel", Georgia, serif;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);

  --gutter: clamp(1.15rem, 4vw, 3rem);
  --maxw: 1180px;
  --nav-h: 76px;
}

@property --halo-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* ============ 2. RESET ============ */
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  color:var(--cream-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  overscroll-behavior-y:none;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap:pretty; }
h1,h2,h3,h4{ text-wrap:balance; line-height:1.06; letter-spacing:-.015em; color:var(--cream); font-weight:400; }
::selection{ background:var(--gold); color:var(--bg); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ============ 3. UTILIDADES ============ */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.container-narrow{ max-width:860px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:fixed; top:-120px; left:1rem; z-index:9999; padding:.7rem 1.1rem; background:var(--gold); color:var(--bg); border-radius:8px; font-weight:600; transition:top .2s; }
.skip-link:focus{ top:1rem; }

.section{ position:relative; padding-block:clamp(4.5rem,10vw,8.5rem); }
.section-alt{ background:var(--bg-2); }

.eyebrow{
  font-family:var(--caps);
  font-size:.74rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.15rem; display:flex; align-items:center; gap:.7rem; justify-content:center;
}
.eyebrow::before,.eyebrow::after{ content:""; width:clamp(18px,5vw,40px); height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.eyebrow::after{ background:linear-gradient(90deg,var(--gold),transparent); }
.eyebrow-left{ justify-content:flex-start; }
.eyebrow-left::before{ display:none; }

.section-head{ text-align:center; max-width:46ch; margin-inline:auto; margin-bottom:clamp(2.6rem,6vw,4.2rem); }
.section-title{ font-family:var(--serif); font-size:clamp(2.05rem,5.2vw,3.5rem); line-height:1.08; }
.section-title em{ font-style:italic; color:var(--gold); }
.section-sub{ margin-top:1.1rem; color:var(--cream-3); font-size:1.03rem; }

/* Filigrana ornamental */
.ornament{ display:flex; align-items:center; justify-content:center; gap:.85rem; color:var(--gold); opacity:.65; margin-inline:auto; }
.ornament span{ display:block; width:clamp(40px,12vw,110px); height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.ornament span:last-child{ background:linear-gradient(90deg,var(--gold),transparent); }
.ornament svg{ width:16px; height:16px; }

/* ============ 4. TIPOGRAFÍA ============ */
.serif{ font-family:var(--serif); }

/* ============ 5. COMPONENTES ============ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.02rem 1.9rem; border-radius:999px;
  font-size:.96rem; font-weight:600; letter-spacing:.015em;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out);
  will-change:transform;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{
  background:var(--gold-metal); color:#2A1508;
  box-shadow:0 10px 30px -12px rgba(216,162,91,.65), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 44px -14px rgba(216,162,91,.8), inset 0 1px 0 rgba(255,255,255,.55); }
.btn-ghost{ border:1px solid var(--line); color:var(--cream); background:rgba(245,236,222,.03); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); background:rgba(216,162,91,.07); }
.btn-wide{ width:100%; }
.btn-lg{ padding:1.15rem 2.3rem; font-size:1.02rem; }

.btn-actions{ display:flex; flex-wrap:wrap; gap:.9rem; }
.btn-actions-center{ justify-content:center; }

.card{
  position:relative; background:var(--bg-3); border:1px solid var(--line-soft); border-radius:18px;
  padding:clamp(1.6rem,3.4vw,2.3rem);
  transition:transform .55s var(--ease-out), border-color .55s var(--ease-out), background .55s var(--ease-out);
}
.card:hover{ transform:translateY(-6px); border-color:var(--line); background:var(--bg-4); }

.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem 1.05rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(216,162,91,.07);
  font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); font-family:var(--sans);
}

.num{
  font-family:var(--caps); font-size:.82rem; letter-spacing:.2em; color:var(--gold);
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:rgba(216,162,91,.06); flex:none;
}

/* ============ 6. SECCIONES ============ */

/* --- Splash --- */
.splash{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--bg); transition:opacity .8s var(--ease-out), visibility .8s;
  animation:splashSafety .01s 4.2s forwards;
}
.splash img{ width:min(260px,52vw); opacity:0; animation:splashIn 1.5s .15s var(--ease-out) forwards; }
.splash.is-out{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes splashIn{ from{ opacity:0; transform:translateY(14px) scale(.96);} to{ opacity:1; transform:none; } }
@keyframes splashSafety{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* --- Nav --- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease-out), border-color .5s var(--ease-out), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{ background:rgba(19,12,23,.92); border-bottom-color:var(--line-soft); backdrop-filter:blur(14px) saturate(140%); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:100%; }
.nav-logo img{ height:34px; width:auto; }
.nav-links{ display:none; gap:2rem; font-size:.92rem; color:var(--cream-2); }
.nav-links a{ position:relative; padding-block:.35rem; transition:color .35s var(--ease-out); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .45s var(--ease-out); }
.nav-links a:hover{ color:var(--gold); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:none; }
.nav-burger{ display:grid; gap:5px; padding:.6rem; }
.nav-burger span{ display:block; width:24px; height:1.5px; background:var(--cream); transition:transform .4s var(--ease-out), opacity .3s; }
.nav.is-open .nav-burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav.is-open .nav-burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav-burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.nav-mobile{
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:99;
  background:rgba(19,12,23,.98); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
  display:grid; gap:.2rem; padding:1.4rem var(--gutter) 2rem;
  transform:translateY(-14px); opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility .4s;
}
.nav-mobile.is-open{ opacity:1; transform:none; visibility:visible; }
.nav-mobile a{ padding:.85rem 0; font-family:var(--serif); font-size:1.45rem; color:var(--cream); border-bottom:1px solid var(--line-soft); }
.nav-mobile .btn{ margin-top:1.2rem; }

/* --- Hero --- */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:grid; align-items:center;
  padding-block:calc(var(--nav-h) + 3.5rem) 4rem;
  overflow:hidden;
}
.hero-sky{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-glow{
  position:absolute; left:50%; top:38%; translate:-50% -50%;
  width:min(1200px,135vw); aspect-ratio:1.5/1; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 42% at 50% 50%, rgba(216,162,91,.20), transparent 70%),
    radial-gradient(60% 55% at 32% 62%, rgba(91,44,112,.42), transparent 72%),
    radial-gradient(50% 50% at 72% 34%, rgba(126,66,160,.28), transparent 70%);
  filter:blur(58px);
  animation:glowDrift 22s ease-in-out infinite;
}
@keyframes glowDrift{
  0%,100%{ transform:scale(1) rotate(0deg); opacity:.9; }
  50%{ transform:scale(1.14) rotate(8deg); opacity:1; }
}
.hero-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner{ position:relative; z-index:2; display:grid; gap:clamp(2.8rem,6vw,4.5rem); align-items:center; text-align:center; }

.hero-logo{ width:min(520px,82vw); margin-inline:auto; }
.hero-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.35rem,6.4vw,4.55rem); line-height:1.04;
  max-width:19ch; margin-inline:auto; margin-top:1.6rem;
}
.hero-title em{ font-style:italic; color:var(--gold); }
.hero-sub{
  margin-top:1.5rem; max-width:52ch; margin-inline:auto;
  font-size:clamp(1.02rem,2.2vw,1.17rem); color:var(--cream-2);
}
.hero-price{
  margin-top:2rem; display:inline-flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center;
  padding:.85rem 1.5rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(216,162,91,.08);
  backdrop-filter:blur(6px);
}
.hero-price strong{ font-family:var(--caps); font-size:1.32rem; color:var(--gold); letter-spacing:.02em; }
.hero-price span{ font-size:.92rem; color:var(--cream-2); }
.hero-price i{ display:block; width:1px; height:20px; background:var(--line); }
.hero-actions{ margin-top:2.1rem; }
.hero-note{ margin-top:1.5rem; font-size:.86rem; color:var(--cream-3); letter-spacing:.04em; }

/* Abanico de cartas */
.hero-fan{ position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:clamp(230px,38vw,380px); perspective:1400px; }
.fan-card{
  position:absolute; bottom:0;
  width:clamp(118px,19vw,196px); border-radius:10px; overflow:hidden;
  border:1px solid rgba(216,162,91,.45);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.4);
  transition:transform .75s var(--ease-out), box-shadow .75s var(--ease-out), filter .75s var(--ease-out);
  filter:saturate(.92) brightness(.96);
  transform-origin:50% 115%;
}
.fan-card img{ width:100%; }
.fan-card:nth-child(1){ transform:rotate(-17deg) translateX(-56%) translateY(16px); z-index:1; }
.fan-card:nth-child(2){ transform:rotate(-6deg) translateX(-20%) translateY(2px); z-index:2; }
.fan-card:nth-child(3){ transform:rotate(4deg) translateX(18%) translateY(0); z-index:3; }
.fan-card:nth-child(4){ transform:rotate(15deg) translateX(54%) translateY(16px); z-index:2; }
.hero-fan:hover .fan-card:nth-child(1){ transform:rotate(-24deg) translateX(-74%) translateY(2px); }
.hero-fan:hover .fan-card:nth-child(2){ transform:rotate(-9deg) translateX(-27%) translateY(-14px); }
.hero-fan:hover .fan-card:nth-child(3){ transform:rotate(6deg) translateX(25%) translateY(-16px); }
.hero-fan:hover .fan-card:nth-child(4){ transform:rotate(21deg) translateX(72%) translateY(2px); }
.fan-card:hover{ filter:saturate(1.1) brightness(1.08); box-shadow:0 34px 70px -20px rgba(216,162,91,.4); z-index:9!important; }

.hero-scroll{ position:absolute; left:50%; bottom:1.6rem; translate:-50% 0; z-index:3; display:grid; gap:.6rem; justify-items:center; color:var(--cream-3); font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; font-family:var(--caps); }
.hero-scroll i{ display:block; width:1px; height:42px; background:linear-gradient(180deg,var(--gold),transparent); animation:scrollPulse 2.4s var(--ease-soft) infinite; }
@keyframes scrollPulse{ 0%,100%{ transform:scaleY(.5); transform-origin:top; opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

/* --- Franja de garantías --- */
.trust{ border-block:1px solid var(--line-soft); background:var(--bg-2); padding-block:1.35rem; overflow:hidden; }
.trust-track{ display:flex; gap:3.5rem; width:max-content; animation:marquee 38s linear infinite; }
.trust-track span{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--caps); font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cream-3); white-space:nowrap; }
.trust-track span svg{ width:13px; height:13px; color:var(--gold); flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.trust:hover .trust-track{ animation-play-state:paused; }

/* --- Banda CTA --- */
.cta-band{ position:relative; overflow:hidden; background:var(--bg-2); }
.cta-band::before{
  content:""; position:absolute; inset:-60% -10%;
  background:radial-gradient(42% 46% at 50% 50%, rgba(216,162,91,.16), transparent 72%);
  filter:blur(80px); pointer-events:none;
}
.cta-band .container{ position:relative; text-align:center; }
.cta-quote{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.55rem,4.3vw,2.85rem); line-height:1.3; color:var(--cream);
  max-width:24ch; margin-inline:auto;
}
.cta-quote strong{ font-style:normal; font-weight:400; color:var(--gold); display:block; margin-top:.5rem; }
.cta-lines{ margin-top:1.6rem; display:grid; gap:.45rem; color:var(--cream-2); font-size:clamp(1rem,2.4vw,1.15rem); }
.cta-lines b{ color:var(--gold); font-weight:600; }

/* --- Pasos / proceso --- */
.steps{ display:grid; gap:1.15rem; counter-reset:step; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:start; }
.step-body h3{ font-family:var(--serif); font-size:clamp(1.4rem,3vw,1.85rem); margin-bottom:.5rem; }
.step-body p{ color:var(--cream-3); }
.step-line{ position:relative; }
.step:not(:last-child) .step-line::after{
  content:""; position:absolute; left:50%; top:52px; bottom:-1.15rem; width:1px;
  background:linear-gradient(180deg,var(--line),transparent); translate:-50% 0;
}

/* --- Beneficios --- */
.benefits{ display:grid; gap:1.3rem; }
.benefit{ text-align:left; }
.benefit-icon{ width:52px; height:52px; display:grid; place-items:center; border-radius:14px; border:1px solid var(--line); background:rgba(216,162,91,.07); color:var(--gold); margin-bottom:1.3rem; }
.benefit-icon svg{ width:24px; height:24px; }
.benefit h3{ font-family:var(--serif); font-size:clamp(1.38rem,3vw,1.72rem); margin-bottom:.65rem; }
.benefit p{ color:var(--cream-3); font-size:.99rem; }

/* --- Revelación de la tirada (animación) --- */
.reveal-deck{ display:grid; gap:1.3rem; margin-bottom:2.6rem; }
.reveal-slot{ perspective:1600px; }
.reveal-card{
  position:relative; width:100%; aspect-ratio:300/527; border-radius:14px;
  transform-style:preserve-3d; transition:transform 1s var(--ease-out);
  cursor:pointer;
}
.reveal-slot.is-flipped .reveal-card{ transform:rotateY(180deg); }
.reveal-face{
  position:absolute; inset:0; border-radius:14px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid rgba(216,162,91,.4);
  box-shadow:0 24px 54px -24px rgba(0,0,0,.9);
}
.reveal-back{
  display:grid; place-items:center; padding:1.2rem;
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(216,162,91,.22), transparent 70%),
    repeating-linear-gradient(45deg, rgba(216,162,91,.10) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(-45deg, rgba(216,162,91,.10) 0 2px, transparent 2px 11px),
    var(--bg-3);
}
.reveal-back img{ width:72%; opacity:.9; }
.reveal-front{ transform:rotateY(180deg); background:var(--bg-3); }
.reveal-front img{ width:100%; height:100%; object-fit:cover; }
.reveal-label{ margin-top:1rem; text-align:center; }
.reveal-label b{ display:block; font-family:var(--caps); font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; }
.reveal-label span{ font-size:.93rem; color:var(--cream-3); }
.reveal-hint{ text-align:center; font-size:.86rem; color:var(--cream-3); letter-spacing:.04em; }
.reveal-hint b{ color:var(--gold); font-weight:600; }

/* --- Alejandra --- */
.ale{ display:grid; gap:clamp(2.4rem,6vw,4rem); align-items:center; }
.ale-visual{ position:relative; display:grid; place-items:center; padding:clamp(2rem,6vw,3.4rem); }
.ale-visual::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(216,162,91,.18), transparent 70%);
  filter:blur(44px);
}
.ale-ring{
  position:relative; width:min(360px,76vw); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; padding:2.6rem;
  border:1px solid var(--line);
  background:
    radial-gradient(48% 48% at 50% 50%, rgba(91,44,112,.35), transparent 72%),
    var(--bg-3);
}
.ale-ring::after{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:1px solid rgba(216,162,91,.14);
  animation:ringSpin 48s linear infinite;
  background:conic-gradient(from var(--halo-angle), transparent 0 72%, rgba(216,162,91,.28) 86%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
}
@keyframes ringSpin{ to{ --halo-angle:360deg; } }
.ale-ring img{ width:86%; }
.ale-body h2{ font-family:var(--serif); font-size:clamp(2rem,5vw,3.1rem); margin-bottom:1.3rem; }
.ale-body h2 em{ font-style:italic; color:var(--gold); }
.ale-body p{ margin-bottom:1.1rem; color:var(--cream-2); }
.ale-creds{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1.8rem 0 2rem; }

/* --- Casos --- */
.cases{ display:grid; gap:1.3rem; }
.case-tag{ font-family:var(--caps); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; display:block; }
.case h3{ font-family:var(--serif); font-size:clamp(1.3rem,2.8vw,1.6rem); margin-bottom:.9rem; line-height:1.25; }
.case dl{ display:grid; gap:.9rem; margin-top:1.3rem; }
.case dt{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-3); margin-bottom:.25rem; }
.case dd{ color:var(--cream-2); font-size:.97rem; }
.case-note{ margin-top:2.2rem; text-align:center; font-size:.83rem; color:var(--cream-3); font-style:italic; }

/* --- Tipos de tirada (interactivo) --- */
.types{ display:grid; gap:.8rem; margin-bottom:2.2rem; }
.type{
  display:flex; align-items:center; gap:1rem; text-align:left; width:100%;
  padding:1.1rem 1.35rem; border-radius:14px;
  border:1px solid var(--line-soft); background:var(--bg-3);
  transition:border-color .4s var(--ease-out), background .4s var(--ease-out), transform .4s var(--ease-out);
}
.type:hover{ border-color:var(--line); transform:translateY(-3px); }
.type[aria-pressed="true"]{ border-color:var(--gold); background:rgba(216,162,91,.1); }
.type-ico{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line); color:var(--gold); }
.type-ico svg{ width:19px; height:19px; }
.type-txt b{ display:block; color:var(--cream); font-weight:600; font-size:1.02rem; }
.type-txt span{ font-size:.87rem; color:var(--cream-3); }
.type-check{ margin-left:auto; width:20px; height:20px; border-radius:50%; border:1px solid var(--line); flex:none; display:grid; place-items:center; color:var(--bg); transition:background .35s var(--ease-out), border-color .35s; }
.type[aria-pressed="true"] .type-check{ background:var(--gold); border-color:var(--gold); }
.type-check svg{ width:11px; height:11px; opacity:0; transition:opacity .3s; }
.type[aria-pressed="true"] .type-check svg{ opacity:1; }

/* --- Precio --- */
.price-card{
  max-width:620px; margin-inline:auto; text-align:center;
  border:1px solid var(--line); border-radius:24px; padding:clamp(2.2rem,6vw,3.4rem);
  background:linear-gradient(170deg, var(--bg-4), var(--bg-3));
  position:relative; overflow:hidden;
}
.price-card::before{
  content:""; position:absolute; inset:-50% -20% auto -20%; height:150%;
  background:radial-gradient(42% 46% at 50% 24%, rgba(216,162,91,.2), transparent 70%);
  filter:blur(60px); pointer-events:none;
}
.price-card > *{ position:relative; }
.price-amount{ font-family:var(--serif); font-size:clamp(3.6rem,13vw,5.6rem); line-height:1; color:var(--gold); margin:.8rem 0 .3rem; }
.price-amount sup{ font-size:.4em; vertical-align:super; margin-left:.1em; }
.price-dur{ font-family:var(--caps); font-size:.86rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-2); }
.price-list{ display:grid; gap:.85rem; margin:2.1rem 0; text-align:left; }
.price-list li{ display:flex; gap:.8rem; align-items:flex-start; color:var(--cream-2); font-size:.98rem; }
.price-list svg{ width:17px; height:17px; color:var(--gold); flex:none; margin-top:.3rem; }
.price-pay{ margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid var(--line-soft); font-size:.9rem; color:var(--cream-3); }
.price-pay b{ color:var(--gold); font-weight:600; }

/* --- FAQ --- */
.faq{ max-width:820px; margin-inline:auto; display:grid; }
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; text-align:left;
  padding:1.5rem 0; font-family:var(--serif); font-size:clamp(1.14rem,2.6vw,1.42rem); color:var(--cream);
  transition:color .35s var(--ease-out);
}
.faq-q:hover{ color:var(--gold); }
.faq-icon{ position:relative; width:22px; height:22px; flex:none; }
.faq-icon::before,.faq-icon::after{ content:""; position:absolute; left:50%; top:50%; background:var(--gold); translate:-50% -50%; transition:transform .45s var(--ease-out), opacity .35s; }
.faq-icon::before{ width:16px; height:1.5px; }
.faq-icon::after{ width:1.5px; height:16px; }
.faq-item.is-open .faq-icon::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ overflow:hidden; height:0; transition:height .5s var(--ease-out); }
.faq-a p{ padding-bottom:1.6rem; color:var(--cream-3); max-width:66ch; }

/* --- Contacto --- */
.contact{ display:grid; gap:clamp(2.2rem,5vw,3.4rem); }
.contact-direct{ display:grid; gap:1rem; }
.contact-link{
  display:flex; align-items:center; gap:1.1rem; padding:1.3rem 1.5rem;
  border:1px solid var(--line-soft); border-radius:16px; background:var(--bg-3);
  transition:border-color .45s var(--ease-out), transform .45s var(--ease-out), background .45s var(--ease-out);
}
.contact-link:hover{ border-color:var(--gold); transform:translateY(-3px); background:var(--bg-4); }
.contact-link .ico{ width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); color:var(--gold); }
.contact-link .ico svg{ width:21px; height:21px; }
.contact-link b{ display:block; color:var(--cream); font-weight:600; }
.contact-link span{ font-size:.9rem; color:var(--cream-3); word-break:break-word; }

.form{ display:grid; gap:1.05rem; }
.field{ display:grid; gap:.5rem; }
.field label{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-3); }
.field input,.field select,.field textarea{
  width:100%; padding:.95rem 1.1rem; font:inherit; font-size:1rem; color:var(--cream);
  background:var(--bg-3); border:1px solid var(--line-soft); border-radius:12px;
  transition:border-color .35s var(--ease-out), background .35s var(--ease-out);
}
.field textarea{ min-height:132px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); background:var(--bg-4); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A25B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:18px; padding-right:2.8rem; }
.form-consent{ display:flex; gap:.75rem; align-items:flex-start; font-size:.85rem; color:var(--cream-3); }
.form-consent input{ width:18px; height:18px; margin-top:.2rem; accent-color:var(--gold); flex:none; }
.form-consent a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.form-status{ font-size:.9rem; min-height:1.3em; }
.form-status.ok{ color:var(--gold); }
.form-status.err{ color:#E58A7B; }

/* --- Footer --- */
.footer{ border-top:1px solid var(--line-soft); background:var(--bg-2); padding-block:clamp(3rem,7vw,4.5rem) 2rem; }
.footer-top{ display:grid; gap:2.4rem; margin-bottom:2.8rem; }
.footer-logo img{ width:220px; margin-bottom:1.3rem; }
.footer-logo p{ color:var(--cream-3); font-size:.93rem; max-width:34ch; }
.footer-col h4{ font-family:var(--caps); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem; }
.footer-col ul{ list-style:none; display:grid; gap:.6rem; padding:0; }
.footer-col a{ color:var(--cream-3); font-size:.93rem; transition:color .35s var(--ease-out); }
.footer-col a:hover{ color:var(--gold); }
.footer-bottom{ padding-top:2rem; border-top:1px solid var(--line-soft); display:grid; gap:1rem; font-size:.82rem; color:var(--cream-3); }
.footer-bottom a{ color:var(--cream-3); text-decoration:underline; text-underline-offset:3px; }
.footer-bottom a:hover{ color:var(--gold); }
.footer-legal{ font-size:.78rem; line-height:1.6; opacity:.8; }

/* --- WhatsApp flotante --- */
.wa-float{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:90;
  display:flex; align-items:center; gap:.65rem;
  padding:.85rem 1.25rem; border-radius:999px;
  background:var(--gold-metal); color:#2A1508; font-weight:600; font-size:.92rem;
  box-shadow:0 14px 36px -12px rgba(216,162,91,.7);
  opacity:0; transform:translateY(20px); pointer-events:none;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), box-shadow .4s;
}
.wa-float.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.wa-float:hover{ box-shadow:0 20px 46px -12px rgba(216,162,91,.85); transform:translateY(-3px); }
.wa-float svg{ width:20px; height:20px; flex:none; }

/* ============ 7. EFECTOS ============ */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-revealed{ opacity:1; transform:none; }
.reveal[data-split]{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.09s; } .reveal-d2{ transition-delay:.18s; } .reveal-d3{ transition-delay:.27s; }

.star{ position:absolute; border-radius:50%; background:var(--cream); }

/* ============ 8. RESPONSIVE ============ */
@media (min-width:540px){
  .footer-bottom{ grid-template-columns:1fr auto; align-items:center; }
  .reveal-deck{ grid-template-columns:repeat(3,1fr); gap:1rem; }
}
@media (min-width:720px){
  body{ font-size:17.5px; }
  .benefits{ grid-template-columns:repeat(3,1fr); }
  .cases{ grid-template-columns:repeat(3,1fr); }
  .types{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1.4fr 1fr 1fr; gap:3rem; }
  .steps{ gap:1.6rem; }
}
@media (min-width:960px){
  :root{ --nav-h:88px; }
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .nav-burger{ display:none; }
  .nav-mobile{ display:none; }
  .ale{ grid-template-columns:.85fr 1fr; }
  .contact{ grid-template-columns:.85fr 1fr; align-items:start; }
  .types{ grid-template-columns:repeat(3,1fr); }
  .hero-inner{ gap:3rem; }
}
@media (min-width:1280px){
  .hero-fan{ min-height:400px; }
}

/* ============ 9. REDUCED MOTION (solo lo intrusivo) ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero-glow{ animation:none; }
  .trust-track{ animation:none; }
  .hero-scroll i{ animation:none; }
  .ale-ring::after{ animation:none; }
  .star{ animation:none!important; }
}