/* ============================================================
   RAFA SOCARRÁS — Landing pages de conversión (curso / libro)
   Reutiliza tokens de styles.css. Componentes de conversión.
   ============================================================ */

/* ---- Minimal landing header ---- */
.lp-header { position:sticky; top:0; z-index:100; height:66px; display:flex; align-items:center;
  background:rgba(247,244,239,.86); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); }
.lp-header.dark { background:rgba(11,31,58,.82); border-bottom-color:rgba(255,255,255,.1); }
.lp-nav { width:100%; max-width:1160px; margin:0 auto; padding:0 var(--gut); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lp-brand { display:flex; align-items:center; gap:10px; }
.lp-brand img { height:28px; }
.lp-fulllogo { height:38px !important; width:auto; }
.lp-brand .w { font-size:1.05rem; font-weight:400; letter-spacing:-.02em; }
.lp-brand .w strong { font-weight:700; }
.lp-header.dark .lp-brand .w { color:#fff; }
.lp-nav .btn { padding:11px 22px; font-size:.88rem; }

.lp-wrap { max-width:1160px; margin:0 auto; padding:0 var(--gut); }
.lp-narrow { max-width:780px; margin:0 auto; padding:0 var(--gut); }

/* ---- Badges / pills ---- */
.lp-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:100px;
  font-size:.78rem; font-weight:600; letter-spacing:.04em; background:rgba(106,32,166,.09); color:var(--purple); }
.lp-badge.mag { background:rgba(255,0,126,.1); color:var(--magenta); }
.lp-badge.on-dark { background:rgba(0,255,255,.12); color:var(--cyan); }
.lp-badge .dotpulse { width:8px; height:8px; border-radius:50%; background:currentColor; animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.7);} }

/* ---- Stars ---- */
.stars { color:var(--yellow); letter-spacing:2px; font-size:1rem; }

/* ---- Book mockup (CSS) ---- */
.book { position:relative; width:300px; aspect-ratio:3/4.2; transform:rotateY(-14deg) rotateX(3deg); transform-style:preserve-3d;
  border-radius:4px 10px 10px 4px; box-shadow: 18px 30px 60px -20px rgba(11,31,58,.5); }
.book .face { position:absolute; inset:0; border-radius:4px 10px 10px 4px; overflow:hidden;
  background:linear-gradient(150deg,#6A20A6,#3a1166 60%,#FF007E); display:flex; flex-direction:column; justify-content:space-between; padding:30px 26px; color:#fff; }
.book .spine { position:absolute; left:0; top:0; bottom:0; width:16px; background:rgba(0,0,0,.28); border-radius:4px 0 0 4px; transform:translateX(-15px) rotateY(90deg); transform-origin:right; }
.book .face .iso { position:absolute; right:-12%; bottom:-6%; width:62%; opacity:.16; }
.book .face .klabel { font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; opacity:.8; }
.book .face .title { font-size:2.1rem; font-weight:800; letter-spacing:-.03em; line-height:.96; position:relative; z-index:1; }
.book .face .author { font-size:.84rem; font-weight:500; opacity:.92; position:relative; z-index:1; }
.book .glint { position:absolute; inset:0; border-radius:4px 10px 10px 4px; background:linear-gradient(105deg,rgba(255,255,255,.22),transparent 38%); pointer-events:none; }

/* ---- Pricing card ---- */
.price-card { background:var(--white); border:1px solid var(--line); border-radius:22px; padding:34px; position:relative; }
.price-card.featured { border-color:var(--magenta); box-shadow:0 30px 70px -34px rgba(255,0,126,.35); }
.price-card .ribbon { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--magenta); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.06em; padding:6px 16px; border-radius:100px; }
.price-card .ptitle { font-weight:600; font-size:1.1rem; }
.price-card .amount { font-size:3rem; font-weight:800; letter-spacing:-.03em; line-height:1; margin:14px 0 4px; }
.price-card .amount small { font-size:1.1rem; font-weight:600; color:var(--gray); }
.price-card .was { color:var(--gray-soft); text-decoration:line-through; font-size:1rem; }
.price-list { list-style:none; padding:0; margin:22px 0 26px; display:flex; flex-direction:column; gap:12px; }
.price-list li { display:flex; gap:11px; align-items:flex-start; font-size:.96rem; color:var(--gray); }
.price-list li svg { flex-shrink:0; margin-top:3px; color:var(--purple); }

/* ---- Check list generic ---- */
.checks { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.checks li { display:flex; gap:13px; align-items:flex-start; }
.checks li .ck { width:24px; height:24px; border-radius:50%; background:rgba(106,32,166,.1); color:var(--purple); display:grid; place-items:center; flex-shrink:0; margin-top:1px; }
.checks.on-dark li .ck { background:rgba(0,255,255,.14); color:var(--cyan); }
.checks.on-dark li { color:rgba(255,255,255,.82); }

/* ---- Module / curriculum ---- */
.module { border:1px solid var(--line); border-radius:14px; padding:24px 26px; background:var(--white); transition:border-color .25s; }
.module:hover { border-color:var(--purple); }
.module .mhead { display:flex; align-items:baseline; gap:14px; }
.module .mn { font-size:.8rem; font-weight:700; color:var(--magenta); letter-spacing:.1em; }
.module h4 { margin:0; }
.module p { margin:8px 0 0; color:var(--gray); font-size:.95rem; }

/* ---- Testimonial ---- */
.tst { background:var(--white); border:1px solid var(--line); border-radius:18px; padding:30px; }
.tst p { font-size:1.05rem; line-height:1.5; margin:0 0 20px; }
.tst .who { display:flex; align-items:center; gap:13px; }
.tst .av { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#6A20A6,#FF007E); color:#fff; display:grid; place-items:center; font-weight:700; flex-shrink:0; }
.tst .who b { display:block; font-size:.95rem; }
.tst .who small { color:var(--gray-soft); font-size:.82rem; }

/* ---- FAQ ---- */
.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; padding:22px 0; font-weight:600; font-size:1.08rem; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .pm { width:24px; height:24px; flex-shrink:0; position:relative; transition:transform .25s; }
.faq summary .pm::before, .faq summary .pm::after { content:""; position:absolute; background:var(--purple); border-radius:2px; }
.faq summary .pm::before { top:11px; left:3px; right:3px; height:2px; }
.faq summary .pm::after { left:11px; top:3px; bottom:3px; width:2px; transition:opacity .25s; }
.faq details[open] summary .pm::after { opacity:0; }
.faq details p { margin:0 0 22px; color:var(--gray); max-width:62ch; }

/* ---- Guarantee ---- */
.guarantee { display:flex; gap:22px; align-items:center; background:var(--white); border:1.5px dashed var(--purple); border-radius:20px; padding:28px 32px; }
.guarantee .seal { width:64px; height:64px; border-radius:50%; background:rgba(106,32,166,.1); color:var(--purple); display:grid; place-items:center; flex-shrink:0; }
.guarantee h4 { margin:0 0 6px; }
.guarantee p { margin:0; color:var(--gray); font-size:.95rem; }

/* ---- Sticky CTA bar ---- */
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--ink); color:#fff;
  transform:translateY(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); }
.sticky-cta.show { transform:translateY(0); }
.sticky-cta .inner { max-width:1160px; margin:0 auto; padding:14px var(--gut); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.sticky-cta .lbl { font-weight:600; }
.sticky-cta .lbl small { display:block; color:rgba(255,255,255,.6); font-weight:400; font-size:.8rem; }
@media (max-width:620px){ .sticky-cta .lbl small { display:none; } .sticky-cta .inner{ padding:11px var(--gut); } }

/* ---- Footer mini ---- */
.lp-foot { background:var(--navy); color:rgba(255,255,255,.6); padding:40px 0; text-align:center; font-size:.85rem; }
.lp-foot a { color:rgba(255,255,255,.8); }
.lp-foot .brandline { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; }
.lp-foot .brandline img { height:26px; }
.lp-foot .brandline span { color:#fff; font-weight:600; }

/* ---- Stat row ---- */
.lp-stats { display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,56px); }
.lp-stats .num { font-size:clamp(1.8rem,3vw,2.4rem); font-weight:800; letter-spacing:-.03em; line-height:1; }
.lp-stats .num .p { color:var(--magenta); }
.lp-stats .lbl { font-size:.82rem; color:var(--gray); margin-top:6px; max-width:18ch; }

/* ---- Countdown ---- */
.countdown { display:flex; gap:12px; }
.countdown .unit { background:var(--white); border:1px solid var(--line); border-radius:12px; padding:12px 0; width:72px; text-align:center; }
.countdown .unit .v { font-size:1.8rem; font-weight:800; letter-spacing:-.02em; line-height:1; }
.countdown .unit .u { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-soft); margin-top:5px; }
.countdown.on-dark .unit { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#fff; }
.countdown.on-dark .unit .u { color:rgba(255,255,255,.5); }

/* ---- Section spacing for landings ---- */
.lp-sec { padding: clamp(56px,8vw,110px) 0; }
.lp-sec.tight { padding: clamp(40px,5vw,72px) 0; }

/* ---- CTA final (navy) ---- */
.final-cta { background: var(--navy); color:#fff; position:relative; overflow:hidden; }
.final-cta h2 { color:#fff; }
.final-cta .lead { color:rgba(255,255,255,.74); }
.final-cta .iso-watermark { right:-6%; bottom:-20%; width:42%; opacity:.07; }