/* Página de venta de Método Recomp: la misma identidad que la app. */
:root{
  --bg:#0F1115; --surface:#181B21; --surface-2:#1F232B; --border:#272C35;
  --text:#F2F4F7; --muted:#A3AAB8; --faint:#7C8494;
  --lima:#C6F432; --on-lima:#0F1115; --lavanda:#7C8CFF;
  --display:'Space Grotesk','Inter',sans-serif; --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--lima);}
mark{background:none; color:var(--lima);}
h1,h2{font-family:var(--display); font-weight:700; letter-spacing:-.03em; line-height:1.08; margin:0;}
h1{font-size:clamp(38px, 7vw, 64px);}
h2{font-size:clamp(30px, 5vw, 46px); margin-bottom:28px;}
.eyebrow{font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--lima); margin:0 0 14px;}
section{max-width:1080px; margin:0 auto; padding:72px 20px;}

/* ---- Barra superior ---- */
.barra{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; max-width:1080px; margin:0 auto;
  background:rgba(15,17,21,.85); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.logo{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-family:var(--display); font-weight:700; font-size:18px;}
.logo .ico{width:34px; height:34px; border-radius:10px; background:var(--lima); color:var(--on-lima); display:flex; align-items:center; justify-content:center;}
.logo svg{width:20px; height:20px;}

/* ---- Botones ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 26px; border-radius:14px; background:var(--lima); color:var(--on-lima);
  font-weight:800; font-size:16px; text-decoration:none; border:2px solid var(--lima);
  transition:transform .1s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.05);}
.btn:active{transform:scale(.98);}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--border);}
.btn.chico{padding:9px 16px; font-size:14px; border-radius:11px;}
.btn.grande{padding:18px 36px; font-size:18px;}
.acciones{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.acciones.centro{justify-content:center;}
.mini{font-size:13.5px; color:var(--faint); margin-top:16px;}

/* ---- Teléfono ---- */
.tel{
  width:100%; max-width:300px; border-radius:40px; padding:9px;
  background:linear-gradient(145deg,#2A2F38,#121418);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px #3A404B inset, 0 0 70px rgba(198,244,50,.08);
}
.tel img{display:block; width:100%; height:auto; border-radius:32px;}
.ejemplo{display:block; font-size:12px; color:var(--faint); margin-top:10px; text-align:center;}

/* ---- Héroe ---- */
.heroe{
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
  padding-top:48px;
  background:radial-gradient(600px 400px at 90% 20%, rgba(198,244,50,.12), transparent 70%);
}
.lead{font-size:clamp(18px, 2.4vw, 21px); color:var(--muted); margin:22px 0 0;}
.lead strong{color:var(--text);}
.heroe-tel{display:flex; flex-direction:column; align-items:center;}

/* ---- Problema ---- */
.tres{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.tarjeta{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:24px;}
.tarjeta b{display:block; font-family:var(--display); font-size:20px; margin-bottom:6px;}
.tarjeta p{margin:0; color:var(--muted);}

/* ---- Pasos ---- */
.pasos{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.pasos li{display:flex; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:24px;}
.pasos span{
  flex-shrink:0; width:40px; height:40px; border-radius:50%; background:rgba(198,244,50,.14); color:var(--lima);
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700;
}
.pasos b{font-family:var(--display); font-size:19px;}
.pasos p{margin:4px 0 0; color:var(--muted); font-size:15.5px;}

/* ---- Funciones ---- */
.funcion{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
.funcion.invertida .funcion-txt{order:2;}
.funcion-tel{display:flex; flex-direction:column; align-items:center;}
.parrafo{color:var(--muted); font-size:18px; margin:0 0 14px;}
.parrafo em{color:var(--text); font-style:normal; font-weight:600;}
.tildes{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px;}
.tildes li{position:relative; padding-left:34px; color:var(--muted); font-size:17.5px;}
.tildes li b{color:var(--text);}
.tildes li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--lima); font-weight:800;}
.aviso{
  margin-top:24px; padding:14px 16px; border-radius:14px; font-size:14px; color:var(--muted);
  background:rgba(124,140,255,.08); border:1px solid rgba(124,140,255,.35);
}

/* ---- Incluye ---- */
.grilla{display:grid; grid-template-columns:repeat(5,1fr); gap:12px;}
.item{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:18px;}
.item b{display:block; font-size:15.5px; margin-bottom:4px;}
.item p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.4;}

/* ---- Precio ---- */
.caja-precio{
  text-align:center; max-width:720px; margin:0 auto; padding:48px 28px; border-radius:32px;
  background:radial-gradient(500px 300px at 50% 0%, rgba(198,244,50,.14), transparent 70%), var(--surface);
  border:1px solid var(--border);
}
.precio{display:flex; justify-content:center; align-items:baseline; gap:16px; margin:8px 0 4px;}
.precio-num{font-family:var(--display); font-weight:700; font-size:clamp(52px, 10vw, 76px); letter-spacing:-.04em; color:var(--lima);}
.precio-usd{font-size:22px; color:var(--muted); font-weight:600;}
.precio-despues{display:inline-block; margin:0 0 20px; padding:8px 16px; border-radius:999px; background:rgba(198,244,50,.12); color:var(--lima); font-weight:700; font-size:14.5px;}
.precio-nota{color:var(--text); font-weight:600; margin:0 0 16px;}
.comparacion{color:var(--muted); max-width:520px; margin:0 auto;}
.comparacion b{color:var(--text);}

/* ---- Preguntas ---- */
#preguntas{max-width:760px;}
details{border-bottom:1px solid var(--border); padding:18px 0;}
summary{cursor:pointer; font-weight:700; font-size:18px; list-style:none; display:flex; justify-content:space-between; gap:12px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; color:var(--lima); font-size:24px; line-height:1;}
details[open] summary::after{content:"–";}
details p{color:var(--muted); margin:12px 0 0;}

/* ---- Cierre y pie ---- */
.cierre{text-align:center; padding-bottom:96px;}
footer{border-top:1px solid var(--border); padding:32px 20px 48px; text-align:center; color:var(--faint); font-size:14px;}
footer .legal{max-width:640px; margin:12px auto; font-size:12.5px; line-height:1.5;}

/* ---- Teléfono (la mayoría de las visitas vienen de Instagram) ---- */
@media (max-width: 820px){
  section{padding:56px 18px;}
  .heroe, .funcion{grid-template-columns:1fr; gap:36px;}
  .funcion.invertida .funcion-txt{order:0;}
  .heroe-tel .tel, .funcion-tel .tel{max-width:250px;}
  .tres, .pasos{grid-template-columns:1fr;}
  .grilla{grid-template-columns:1fr 1fr;}
  .acciones .btn{flex:1;}
}