/* ============================================================
   Wurzel · Embudo Oportunidad — Design System
   Tema oscuro cósmico (base wurzelconsultoria.com) + zona segura clara
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600&display=swap');

:root{
  /* superficies oscuras */
  --ink:#000000; --ink-2:#0a0a0c; --surface:#141418; --surface-2:#1c1c22;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --text:#F5F4F2; --muted:#A6A4A1; --muted-2:#78767a;
  /* acento cobre/ámbar Wurzel */
  --amber:#F08A24; --amber-2:#ff9b3d; --ember:#FF5A1F;
  --grad:linear-gradient(135deg,#6E63E6 0%,#C0497B 48%,#FF6A1F 100%);
  --glow:radial-gradient(closest-side, rgba(224,120,40,.55), rgba(224,120,40,.12) 55%, transparent 75%);
  /* zona segura (checkout) */
  --paper:#F6F5F1; --paper-2:#ffffff; --paper-text:#15140f; --paper-muted:#5a5852; --paper-line:#e4e1d8;
  --green:#1E9E5A;
  --r:16px; --r-lg:24px; --r-pill:999px;
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --wrap:1140px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:'Figtree',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
section{position:relative; padding:88px 0}
h1,h2,h3{line-height:1.05; margin:0; letter-spacing:-.02em; font-weight:700}
h1{font-size:clamp(2.4rem,1.4rem+4.4vw,4.6rem)}
h2{font-size:clamp(1.9rem,1.2rem+2.6vw,3.1rem)}
h3{font-size:1.3rem; letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:inherit; text-decoration:none}
em{font-style:italic}
.accent{color:var(--amber)}
.hl{background:var(--amber); color:#1a0f03; padding:.02em .32em; border-radius:6px; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.eyebrow{font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--amber)}
.muted{color:var(--muted)}
.center{text-align:center}

/* estrellas + glow de fondo */
.stars{position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(1.4px 1.4px at 20% 30%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.2px 1.2px at 70% 20%,rgba(255,255,255,.45),transparent),
    radial-gradient(1.1px 1.1px at 40% 70%,rgba(255,255,255,.35),transparent),
    radial-gradient(1.3px 1.3px at 85% 65%,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 55% 45%,rgba(255,255,255,.3),transparent);
  background-repeat:repeat; background-size:520px 520px; opacity:.6;
  animation:starDrift 140s linear infinite, starTwinkle 7s ease-in-out infinite}
@keyframes starDrift{from{background-position:0 0} to{background-position:520px 520px}}
@keyframes starTwinkle{0%,100%{opacity:.42} 50%{opacity:.68}}
@media(prefers-reduced-motion:reduce){ .stars,.hero::before{animation:none} }
.page{position:relative; z-index:1}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:1rem;
  padding:.9rem 1.6rem; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; white-space:nowrap}
.btn-primary{background:var(--amber); color:#1a0f03; box-shadow:0 10px 30px rgba(240,138,36,.35)}
.btn-primary:hover{transform:translateY(-2px); background:var(--amber-2); box-shadow:0 16px 40px rgba(240,138,36,.5)}
.btn-ghost{background:rgba(255,255,255,.04); color:var(--text); border-color:var(--line-2)}
.btn-ghost:hover{transform:translateY(-2px); background:rgba(255,255,255,.09)}
.btn-lg{padding:1.15rem 2.2rem; font-size:1.12rem}
.btn-block{width:100%; justify-content:center}
.btn-dark{background:#15140f; color:#fff}
.btn-dark:hover{transform:translateY(-2px); background:#000}

/* ---------- Nav ---------- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(0,0,0,.55); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:20px; height:70px}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:.02em}
.brand img{width:42px; height:42px}
.brand span{font-size:.92rem; position:relative; top:2px}
.nav-spacer{flex:1}
/* --- Liquid glass: switches (idioma/divisa) + CTA de la barra --- */
.switch{position:relative; overflow:hidden; display:inline-flex; padding:3px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4)}
.switch::before,.nav .btn-primary::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(115deg,transparent 33%,rgba(255,255,255,.22) 50%,transparent 67%);
  transform:translateX(-130%); animation:liquid 5.5s ease-in-out infinite}
@keyframes liquid{0%,55%{transform:translateX(-130%)} 100%{transform:translateX(130%)}}
.switch button{position:relative; z-index:1; background:none; border:0; color:rgba(255,255,255,.62); font:inherit; font-size:.82rem; font-weight:700;
  padding:.35rem .7rem; border-radius:var(--r-pill); cursor:pointer; transition:.25s var(--ease)}
.switch button:hover{color:#fff}
.switch button.on{background:rgba(255,255,255,.85); color:#15140f; box-shadow:0 2px 12px rgba(255,255,255,.16); backdrop-filter:blur(4px)}
/* CTA de la barra como vidrio (seleccionado = blanco translúcido) */
.nav .btn-primary{position:relative; overflow:hidden; color:#fff; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.14); box-shadow:0 6px 22px rgba(0,0,0,.28);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4)}
.nav .btn-primary:hover{background:rgba(255,255,255,.24); transform:translateY(-2px)}
.nav .btn{padding:.65rem 1.2rem; font-size:.92rem; position:relative}
.nav-toggles{display:flex; gap:10px; align-items:center}

/* ---------- Hero ---------- */
.hero{padding:72px 0 24px; text-align:center; overflow:hidden}
.hero::before{content:""; position:absolute; top:-140px; left:50%; transform:translateX(-50%);
  width:900px; height:900px; background:var(--glow); z-index:-1; filter:blur(6px);
  animation:aurora 8s ease-in-out infinite}
@keyframes aurora{0%,100%{transform:translateX(-50%) scale(1); opacity:.8} 50%{transform:translateX(-50%) scale(1.09); opacity:1}}
.hero .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:.4rem .9rem;
  border:1px solid var(--line-2); border-radius:var(--r-pill); background:rgba(255,255,255,.03)}
.hero h1{margin:22px auto 0; max-width:16ch}
.hero .lead{font-size:clamp(1.05rem,.9rem+.7vw,1.35rem); color:var(--muted); max-width:56ch; margin:20px auto 0}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px}
.hero-trust{margin-top:26px; font-size:.92rem; color:var(--muted); display:flex; gap:22px; justify-content:center; flex-wrap:wrap}
.hero-trust b{color:var(--text)}

/* ---------- VSL player ---------- */
.player{margin:46px auto 0; max-width:860px; aspect-ratio:16/9; border-radius:var(--r-lg);
  position:relative; overflow:hidden; border:1px solid var(--line-2);
  background:linear-gradient(160deg,#1a1420,#0c0c10); box-shadow:var(--shadow); cursor:pointer}
.player::after{content:""; position:absolute; inset:0; background:var(--glow); opacity:.25}
.player .play{position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%;
  background:var(--amber); display:grid; place-items:center; box-shadow:0 12px 40px rgba(240,138,36,.5); transition:.3s var(--ease)}
.player:hover .play{transform:scale(1.08)}
.player .play svg{margin-left:5px}
.player .plabel{position:absolute; left:0; right:0; bottom:22px; text-align:center; color:var(--muted); font-size:.9rem; font-weight:600}
.player .badge{position:absolute; top:16px; left:16px; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; background:rgba(0,0,0,.5); border:1px solid var(--line-2); padding:.3rem .7rem; border-radius:var(--r-pill)}
/* VSL · estado "estreno próximo" (se ve directo) */
.player--soon{cursor:default}
.vsl-soon{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px}
.vsl-soon .em{font-size:2.4rem; margin-bottom:12px}
.vsl-soon .sub{color:var(--muted); font-size:clamp(1rem,.9rem+.5vw,1.25rem); margin-bottom:18px}
.vsl-soon .date{display:inline-block; background:var(--amber); color:#1a0f03; font-weight:800;
  font-size:clamp(1.2rem,1rem+1.1vw,1.75rem); padding:.6rem 1.4rem; border-radius:14px; box-shadow:0 10px 34px rgba(240,138,36,.42)}

/* ---------- Trust bar (logos terceros) ---------- */
.trustbar{padding:38px 0; border-block:1px solid var(--line)}
.trustbar .lbl{text-align:center; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:20px}
.logos{display:flex; gap:44px; justify-content:center; align-items:center; flex-wrap:wrap; opacity:.85}
.logos img{height:34px; width:auto; opacity:.95; object-fit:contain}
.logos .logo-slot{height:34px; min-width:120px; display:grid; place-items:center; border:1px dashed var(--line-2);
  border-radius:8px; padding:0 16px; color:var(--muted-2); font-weight:700; font-size:.85rem}

/* ---------- bloques genéricos ---------- */
.sec-head{max-width:40ch; margin:0 auto 48px; text-align:center}
.sec-head h2{text-wrap:balance}
.sec-head p{color:var(--muted); margin-top:14px}
.grid{display:grid; gap:20px}
.g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px}
.card h3{margin-bottom:8px}
.card .num{font-family:'Figtree'; font-weight:800; color:var(--amber); font-size:1.1rem}

/* problema */
.pain li{list-style:none; padding:14px 0 14px 34px; position:relative; border-bottom:1px solid var(--line); color:var(--muted);
  opacity:0; transform:translateY(20px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.pain li.show{opacity:1; transform:none}
.pain li::before{content:"✕"; position:absolute; left:0; top:13px; color:var(--ember); font-weight:800}
.pain{margin:0; padding:0}

/* incluye */
.includes{margin:0; padding:0}
.includes li{list-style:none; padding:12px 0 12px 34px; position:relative}
.includes li::before{content:"✓"; position:absolute; left:0; top:11px; color:var(--green); font-weight:800}
.gift{position:relative; overflow:hidden; margin-top:22px; border:1px solid rgba(240,138,36,.55); border-radius:var(--r); padding:18px 20px; background:transparent}
/* luz premium que gira por el borde: capa cónica que rota + tapa interior deja sólo el anillo */
.gift::before{content:""; position:absolute; z-index:0; left:50%; top:50%; width:180%; aspect-ratio:1; pointer-events:none;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg, transparent 0 70%, rgba(255,210,140,.35) 83%, #ffffff 90%, rgba(255,210,140,.35) 97%, transparent 100%);
  animation:giftSpin 3.6s linear infinite}
.gift::after{content:""; position:absolute; z-index:0; inset:1.5px; border-radius:calc(var(--r) - 1px); background:#17120e; pointer-events:none}
.gift>*{position:relative; z-index:1}
.gift .tag{display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:var(--amber); color:#1a0f03; padding:.2rem .6rem; border-radius:var(--r-pill); margin-bottom:8px;
  transform-origin:center; animation:giftWiggle 4.2s ease-in-out infinite; will-change:transform}
@keyframes giftSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* "mirame": sube izquierda, baja, sube derecha, baja, y pausa ~3s */
@keyframes giftWiggle{0%{transform:rotate(0)} 8%{transform:rotate(-5deg)} 16%{transform:rotate(0)} 24%{transform:rotate(5deg)} 32%{transform:rotate(0)} 100%{transform:rotate(0)}}

/* solución: swap de paneles en el mismo lugar */
.rf-controls{margin-top:16px}
.rf-hint{margin-top:10px; font-size:.8rem; color:var(--muted); letter-spacing:.04em; display:inline-flex; align-items:center; gap:5px}
.rf-hint svg{width:13px; height:13px; animation:hintBob 1.4s ease-in-out infinite}
@keyframes hintBob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
.rf-step{margin-top:12px; font-size:.78rem; letter-spacing:.16em; color:var(--muted-2); font-weight:700}
#solStage{position:relative; display:grid; align-content:center}
.sol-panel[hidden]{display:none}
.sol-panel.rf-in{animation:solIn .42s var(--ease) both}
.sol-panel.rf-out{animation:solOut .3s var(--ease) both}
@keyframes solIn{from{opacity:0; transform:translateX(52px)} to{opacity:1; transform:none}}
@keyframes solOut{from{opacity:1; transform:none} to{opacity:0; transform:translateX(-52px)}}
/* items que cargan en orden (reutilizable: listas o grillas) */
.stagger > *{opacity:0; transform:translateY(20px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.stagger > *.show{opacity:1; transform:none}
/* pulso "tocame" del botón (se apaga en hover y en el estado "Volver") */
.cta-pulse{animation:ctaPulse 3.6s ease-in-out infinite}
.cta-pulse:hover{animation:none}
@keyframes ctaPulse{
  0%{transform:scale(1); box-shadow:0 10px 30px rgba(240,138,36,.35)}
  8%{transform:scale(1.06); box-shadow:0 14px 40px rgba(240,138,36,.55)}
  16%{transform:scale(1); box-shadow:0 10px 30px rgba(240,138,36,.35)}
  24%{transform:scale(1.05); box-shadow:0 13px 36px rgba(240,138,36,.5)}
  32%{transform:scale(1); box-shadow:0 10px 30px rgba(240,138,36,.35)}
  100%{transform:scale(1); box-shadow:0 10px 30px rgba(240,138,36,.35)}
}

/* pasos */
.steps{counter-reset:s}
.step{position:relative; padding-left:70px}
.step::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:-6px; width:50px; height:50px;
  border-radius:50%; background:var(--grad); display:grid; place-items:center; font-weight:800; font-size:1.3rem; color:#fff}
.note-24{margin-top:30px; text-align:center; color:var(--muted); font-size:.95rem}
.note-24 b{color:var(--amber)}

/* Fede */
.fede{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  background:linear-gradient(150deg,#1a1420,#0c0c10); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:40px}
.fede .quote{font-size:1.35rem; line-height:1.4; font-weight:500}
.fede .who{margin-top:20px; display:flex; align-items:center; gap:12px}
.fede .who .av{width:52px; height:52px; border-radius:50%; background:var(--grad); object-fit:cover}
.fede .who b{display:block} .fede .who span{color:var(--muted); font-size:.9rem}
.fede .player{margin:0; max-width:none}
/* embed de Instagram (reel vertical) */
.ig-embed{display:flex; justify-content:center; align-items:center; min-height:360px}
.ig-embed .instagram-media{border-radius:14px !important; box-shadow:0 16px 44px rgba(0,0,0,.5) !important}
.ig-embed blockquote:not([data-instgrm-payload-id]) a{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; width:100%; max-width:360px; min-height:520px; padding:24px; text-align:center;
  color:var(--text); font-weight:700; text-decoration:none; border:1px solid var(--line-2); border-radius:14px;
  background:radial-gradient(120% 80% at 50% 0%, rgba(255,69,0,.10), transparent 60%), var(--ink-2)}
.ig-embed blockquote:not([data-instgrm-payload-id]) a::before{content:"▶"; display:grid; place-items:center;
  width:56px; height:56px; border-radius:50%; background:var(--grad); color:#1a0f03; font-size:1.2rem}

/* testimonios */
.tcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.tcard .stars-row{color:var(--amber); letter-spacing:2px; font-size:.9rem}
.tcard p{margin:12px 0 16px; color:#E8E7E4}
.tcard .who{display:flex; align-items:center; gap:10px}
.tcard .who .av{width:40px; height:40px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line-2); display:grid; place-items:center; font-weight:800; color:var(--amber)}
.tcard .who b{display:block; font-size:.92rem} .tcard .who span{display:block; font-size:.8rem; color:var(--muted)}
a.tcard{display:block; text-decoration:none; color:inherit}
.tcard-link{position:relative; cursor:pointer; transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease)}
.tcard-link:hover{transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 16px 36px rgba(0,0,0,.45)}
.tcard-link:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
.tcard-go{position:absolute; top:16px; right:18px; color:var(--muted-2); font-size:1.05rem; font-weight:700;
  opacity:0; transform:translateY(3px); transition:opacity .2s var(--ease), transform .2s var(--ease), color .2s var(--ease)}
.tcard-link:hover .tcard-go{opacity:1; transform:none; color:var(--amber)}

/* ---------- Precio / oferta ---------- */
.pricing{background:radial-gradient(closest-side at 50% 0,rgba(240,138,36,.10),transparent)}
.price-card{position:relative; max-width:560px; margin:0 auto; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:34px; box-shadow:var(--shadow)}
.confetti-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:6; border-radius:var(--r-lg)}
.price-card .plan-name{font-weight:800; font-size:1.15rem}
.price-row{display:flex; align-items:baseline; gap:14px; margin:14px 0}
.price-now{font-size:3.2rem; font-weight:800; letter-spacing:-.03em}
.price-old{color:var(--muted-2); text-decoration:line-through; font-size:1.4rem; font-weight:600}
.price-off{background:#E11414; color:#fff; font-weight:800; font-size:.8rem; padding:.25rem .6rem; border-radius:var(--r-pill); position:relative; overflow:hidden}
/* barrido de luz de lado a lado (como el CTA del nav) */
.price-off::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-130%); animation:liquid 3s ease-in-out infinite}
/* revelado "sorpresa" del descuento */
.price-now.pop{animation:pricePop .55s var(--ease)}
@keyframes pricePop{0%{transform:scale(.72); opacity:.2}60%{transform:scale(1.12)}100%{transform:scale(1); opacity:1}}
.price-old.slidein{animation:oldIn .55s var(--ease)}
@keyframes oldIn{0%{opacity:0; transform:translateX(-16px) scale(.9)}100%{opacity:1; transform:none}}
.price-off.pop{animation:offPop .5s var(--ease) .12s both}
@keyframes offPop{0%{transform:scale(0) rotate(-14deg); opacity:0}70%{transform:scale(1.25) rotate(4deg)}100%{transform:scale(1); opacity:1}}
.code-box{display:flex; gap:10px; margin:18px 0}
.code-box[hidden]{display:none}
.code-box.shake{animation:shakeX .5s var(--ease)}
.code-box.shake input{border-color:var(--amber); box-shadow:0 0 0 3px rgba(240,138,36,.18)}
@keyframes shakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
/* cartel de advertencia (reservar sin código) */
.warn-pop{position:fixed; left:50%; top:22px; transform:translate(-50%,-16px); z-index:60;
  display:flex; align-items:flex-start; gap:12px; max-width:min(440px,calc(100vw - 32px));
  background:linear-gradient(180deg,#2a2010,#1b1408); border:1px solid var(--amber);
  box-shadow:0 14px 44px rgba(0,0,0,.5); border-radius:14px; padding:14px 16px;
  opacity:0; transition:opacity .28s var(--ease), transform .28s var(--ease)}
.warn-pop.show{opacity:1; transform:translate(-50%,0)}
.warn-ico{flex:none; width:28px; height:28px; border-radius:50%; background:var(--amber); color:#1a1206;
  display:grid; place-items:center; font-weight:900; font-size:1.05rem; margin-top:1px}
.warn-txt{display:flex; flex-direction:column; gap:3px; line-height:1.32}
.warn-txt b{color:var(--amber); font-size:.95rem}
.warn-txt span{color:var(--text); font-size:.85rem}
.warn-x{flex:none; background:none; border:0; color:var(--muted-2); font-size:.85rem; cursor:pointer; padding:2px 4px; line-height:1}
.warn-x:hover{color:var(--text)}
.code-box input{flex:1; background:var(--ink-2); border:1px solid var(--line-2); color:var(--text);
  border-radius:var(--r); padding:.85rem 1rem; font:inherit; text-transform:uppercase; letter-spacing:.05em}
.code-box input::placeholder{text-transform:none; letter-spacing:0; color:var(--muted-2)}
.code-applied{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0;
  background:rgba(30,158,90,.10); border:1px solid rgba(30,158,90,.45); border-radius:var(--r); padding:.7rem 1rem;
  animation:caIn .35s var(--ease) both}
.code-applied[hidden]{display:none}
.ca-chip{display:inline-flex; align-items:center; gap:9px; color:var(--green); font-weight:700; letter-spacing:.02em}
.ca-chip b{color:var(--text); text-transform:uppercase; letter-spacing:.05em}
.ca-check{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--green); color:#06210f; font-size:.75rem; font-weight:900}
.ca-change{background:none; border:0; color:var(--muted); font:inherit; font-weight:600; font-size:.85rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:4px}
.ca-change:hover{color:var(--text)}
@keyframes caIn{0%{opacity:0; transform:translateY(-4px)}100%{opacity:1; transform:none}}
.code-msg{font-size:.85rem; margin:-6px 0 12px; min-height:1.2em}
.code-msg.ok{color:var(--green)} .code-msg.warn{color:var(--amber)}
.code-msg .code-hl{color:var(--green); font-weight:700}
.plan-steps{border-top:1px solid var(--line); margin-top:18px; padding-top:18px; font-size:.95rem}
.plan-steps .r{display:flex; justify-content:space-between; padding:6px 0; color:var(--muted)}
.plan-steps .r b{color:var(--text)}
.guarantees{margin:20px 0; display:flex; flex-direction:column; gap:8px; font-size:.92rem}
.guarantees .g{display:flex; gap:8px; align-items:flex-start} .guarantees .g::before{content:"✓"; color:var(--green); font-weight:800}
.disc{font-size:.82rem; color:var(--muted-2); margin-top:14px}
/* toggle producto */
.prod-tabs{display:flex; gap:8px; justify-content:center; margin-bottom:28px}
.prod-tabs button{background:var(--surface); border:1px solid var(--line-2); color:var(--muted); font:inherit; font-weight:700;
  padding:.7rem 1.4rem; border-radius:var(--r-pill); cursor:pointer; transition:.2s;
  display:inline-flex; align-items:center; gap:.5rem}
.prod-tabs button svg{width:18px; height:18px; flex-shrink:0}
.prod-tabs button.on{background:var(--text); color:var(--ink)}

/* ---------- Escasez ---------- */
.scarcity{text-align:center}
.scarcity .pill{display:inline-flex; gap:8px; align-items:center; border:1px solid var(--amber);
  color:var(--amber); border-radius:var(--r-pill); padding:.5rem 1.1rem; font-weight:700; font-size:.9rem}
.dot{width:8px; height:8px; border-radius:50%; background:var(--amber); animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer; padding:20px 0; font-weight:700; font-size:1.08rem; list-style:none; display:flex; justify-content:space-between; gap:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; color:var(--amber); font-weight:800; transition:.2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{color:var(--muted); padding-bottom:20px; margin:0}

/* ---------- CTA final ---------- */
.final{text-align:center; padding-top:24px; background:linear-gradient(180deg,transparent,rgba(240,138,36,.06))}
.final .btn{margin-top:10px}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding:48px 0 40px; color:var(--muted); font-size:.9rem}
.foot-grid{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap}
footer a:hover{color:var(--text)}
.foot-legal{margin-top:28px; padding-top:20px; border-top:1px solid var(--line); font-size:.8rem; color:var(--muted-2)}

/* ---------- WhatsApp flotante ---------- */
.wa{position:fixed; right:24px; bottom:24px; z-index:60; width:60px; height:60px;
  border-radius:50%; background:#25d366; display:grid; place-items:center; color:#fff;
  box-shadow:0 8px 24px rgba(37,211,102,.45); transition:transform .2s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:32px; height:32px; fill:#fff}

/* ---------- Checkout modal (ZONA SEGURA clara) ---------- */
.modal{position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.72); display:none; padding:24px; overflow:auto}
.modal.open{display:grid; place-items:start center}
.checkout{background:var(--paper); color:var(--paper-text); border-radius:var(--r-lg); max-width:560px; width:100%;
  margin-top:40px; padding:30px; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.checkout h3{color:var(--paper-text)}
.secure-row{display:flex; align-items:center; gap:8px; color:var(--green); font-weight:700; font-size:.85rem; margin-bottom:6px}
.checkout .close{float:right; background:none; border:0; font-size:1.5rem; cursor:pointer; color:var(--paper-muted)}
.process{background:#fff; border:1px solid var(--paper-line); border-radius:var(--r); padding:16px; margin:16px 0; font-size:.9rem; color:var(--paper-muted)}
.process b{color:var(--paper-text)}
.field{margin-bottom:14px}
.field label{display:block; font-size:.85rem; font-weight:700; margin-bottom:6px}
.field input,.field select{width:100%; padding:.8rem .9rem; border:1px solid var(--paper-line); border-radius:12px; font:inherit; background:#fff; color:var(--paper-text)}
.field.row{display:flex; gap:12px} .field.row>div{flex:1}
.wa-field{display:flex; gap:8px}
.field select.wa-code{flex:0 0 auto; width:112px; font-weight:600;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding:.8rem 2rem .8rem .9rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5852' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:11px}
.wa-field input{flex:1; min-width:0; width:auto}
.pay-head{font-weight:800; margin:18px 0 10px}
.pay-btns{display:grid; gap:10px}
.pay{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:.9rem 1.1rem; border-radius:12px;
  border:1px solid var(--paper-line); background:#fff; font-weight:700; cursor:pointer; transition:.2s; color:var(--paper-text)}
.pay:hover{border-color:var(--amber); background:#fffdf9}
.pay .tag{font-size:.72rem; color:var(--paper-muted); font-weight:600}
.pay-left{flex:1; display:flex; align-items:center; gap:10px; min-width:0}
.pay-logo{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.78rem; flex-shrink:0}
.pay-logo-img{height:22px; width:auto; max-width:160px; object-fit:contain; display:block}
.pay-name{text-align:left}
.checkout .total{display:flex; justify-content:space-between; font-weight:800; font-size:1.2rem; margin:16px 0}
.trust-badges{display:flex; gap:14px; justify-content:center; margin-top:16px; font-size:.75rem; color:var(--paper-muted); flex-wrap:wrap}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .fede{grid-template-columns:1fr; padding:26px}
  .foot-grid{gap:20px}
}
@media(max-width:620px){
  section{padding:64px 0}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .nav .brand span{display:none}
  .hero-trust{gap:8px; flex-direction:column}
  .nav-toggles .switch:first-child{display:none} /* idioma pasa a menú en mobile */
  .price-now{font-size:2.6rem}
}

/* ---------- Conocenos un poco más (esferas) ---------- */
.know{text-align:center}
.know .sec-head{margin-bottom:8px}
.orb-row{display:flex; justify-content:center; flex-wrap:wrap; gap:34px; margin-top:40px}
.orb{display:flex; flex-direction:column; align-items:center; gap:12px; width:132px; text-decoration:none; color:var(--text)}
.orb-img,.orb-icon,.orb-avatar{width:112px; height:112px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--line-2); background:var(--surface);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease)}
.orb-img{background-size:cover; background-position:center}
.orb-photo{position:relative}
.orb-badge{position:absolute; right:1px; bottom:1px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; border:3px solid var(--ink)}
.orb-badge.ig{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.orb-badge svg{width:16px; height:16px; fill:#fff}
a.orb:hover .orb-img, a.orb:hover .orb-icon, a.orb:hover .orb-avatar{transform:translateY(-6px); border-color:var(--amber); box-shadow:0 16px 40px rgba(240,138,36,.28)}
.orb-icon svg{width:50px; height:50px}
.orb-icon.li{background:#0A66C2; border-color:#0A66C2} .orb-icon.li svg{fill:#fff}
.orb-icon.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color:transparent} .orb-icon.ig svg{fill:#fff}
.orb-avatar.grad{background:var(--grad); color:#fff; font-weight:800; font-size:2.6rem; letter-spacing:0}
.orb-label{font-weight:700; font-size:.95rem}
.orb-sub{font-size:.8rem; color:var(--muted); margin-top:-7px}
.founders-head{margin-top:60px; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--amber)}
.orb-row.founders{margin-top:26px; gap:48px}
.orb-sm{width:auto; margin:52px auto 0; gap:10px}
.orb-sm .orb-icon{width:86px; height:86px} .orb-sm .orb-icon svg{width:38px; height:38px}
.orb-sm .orb-label{font-size:.88rem} .orb-sm .orb-sub{font-size:.76rem}

/* ---------- Página de gracias · tarjeta del Calendly ---------- */
.cal-card{position:relative; max-width:480px; margin:0 auto; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); min-height:600px}
.cal-card .calendly-inline-widget{display:block}
.cal-loading{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; background:var(--paper); color:var(--paper-muted); font-size:.95rem; font-weight:600}
.cal-spinner{width:34px; height:34px; border:3px solid rgba(21,20,15,.14); border-top-color:var(--amber);
  border-radius:50%; animation:calspin .8s linear infinite}
@keyframes calspin{to{transform:rotate(360deg)}}

/* badge "Reserva recibida" con vida */
.eyebrow-success{animation:successIn .6s var(--ease) both, successGlow 2.8s ease-in-out .7s infinite}
.eyebrow-success .ok-check{display:inline-block; animation:okPop .5s var(--ease) .35s both}
@keyframes successIn{0%{opacity:0; transform:scale(.82) translateY(6px)} 100%{opacity:1; transform:none}}
@keyframes successGlow{0%,100%{box-shadow:0 0 0 0 rgba(240,138,36,0)} 50%{box-shadow:0 0 18px 2px rgba(240,138,36,.32)}}
@keyframes okPop{0%{transform:scale(0) rotate(-20deg); opacity:0} 60%{transform:scale(1.4) rotate(6deg)} 100%{transform:scale(1); opacity:1}}

/* gracias: sin glow detrás del texto; el glow va detrás del Calendly */
.hero--flat::before{display:none}
.cal-section{position:relative}
.cal-section::before{content:""; position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:760px; height:760px; max-width:100%; background:var(--glow); z-index:0; filter:blur(6px);
  pointer-events:none; animation:aurora 8s ease-in-out infinite}
.cal-section .wrap{position:relative; z-index:1}