/* ============================================================
   Embudo Programa de Reducción de Deudas
   Dirección: banca clásica + calidez latina
   Display: Fraunces (serif editorial) · Cuerpo: Atkinson Hyperlegible
   Marfil cálido · tinta navy · oro viejo · esmeralda (solo CTA)
   ============================================================ */
:root{
  --paper:#faf6ee;          /* marfil cálido */
  --paper-2:#f3ecdf;        /* marfil sombreado */
  --ink:#16263b;            /* tinta navy */
  --ink-soft:#3c4f66;
  --muted:#6b7787;
  --gold:#c19a3f;           /* oro viejo */
  --gold-soft:#e6d3a3;
  --green:#157f3d;          /* esmeralda CTA */
  --green-deep:#0e6630;
  --cream-card:#fffdf8;
  --line:#e6dcc8;
  --max:780px;
  --shadow-warm:0 18px 50px -18px rgba(22,38,59,.22), 0 4px 14px -6px rgba(193,154,63,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:"Atkinson Hyperlegible",Georgia,serif;
  background:
    radial-gradient(1200px 500px at 85% -100px, rgba(193,154,63,.10), transparent 60%),
    radial-gradient(900px 420px at -10% 30%, rgba(21,127,61,.05), transparent 55%),
    var(--paper);
  color:var(--ink);
  font-size:20px;line-height:1.65;
  position:relative;
}
/* grain sutil para quitar lo "plano digital" */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px;position:relative;z-index:2}

/* ---------- cabecera ---------- */
header.top{
  background:var(--ink);color:#f4ead2;text-align:center;
  padding:15px 0 13px;font-size:16px;letter-spacing:.18em;text-transform:uppercase;
  font-family:"Fraunces",Georgia,serif;font-weight:600;
  border-bottom:3px solid var(--gold);
}
header.top span{color:var(--gold-soft)}

/* ---------- hero ---------- */
.hero{padding:56px 0 30px;text-align:center}
.hero h1{
  font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:clamp(32px,6.6vw,49px);line-height:1.14;color:var(--ink);
  letter-spacing:-.01em;
  animation:rise .7s cubic-bezier(.2,.7,.3,1) both;
}
.hero h1 em{
  font-style:italic;color:var(--green);
  background:linear-gradient(transparent 68%, rgba(193,154,63,.32) 68%);
  padding:0 .08em;
}
.hero p.sub{
  margin:18px auto 0;max-width:620px;
  font-size:clamp(19px,4vw,23px);color:var(--ink-soft);
  animation:rise .7s .12s cubic-bezier(.2,.7,.3,1) both;
}
.badge{
  display:inline-block;margin-bottom:20px;
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;
  color:#7c6420;background:linear-gradient(180deg,#fbf3dd,#f4e7c3);
  border:1px solid var(--gold-soft);border-radius:999px;
  padding:8px 22px;font-size:16.5px;letter-spacing:.02em;
  box-shadow:0 2px 10px -4px rgba(193,154,63,.5);
  animation:rise .7s .05s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* línea ornamental ✦ */
.orna{display:flex;align-items:center;gap:14px;margin:34px auto;max-width:340px;color:var(--gold)}
.orna::before,.orna::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft))}
.orna::after{background:linear-gradient(90deg,var(--gold-soft),transparent)}

/* ---------- tarjetas ---------- */
.card{
  background:var(--cream-card);
  border:1px solid var(--line);border-top:4px solid var(--gold);
  border-radius:18px;padding:32px 28px;
  box-shadow:var(--shadow-warm);
  animation:rise .8s .18s cubic-bezier(.2,.7,.3,1) both;
}
.card h2{margin-top:0}

/* ---------- botones ---------- */
.btn{
  display:block;width:100%;text-align:center;cursor:pointer;text-decoration:none;
  font-family:"Atkinson Hyperlegible",Georgia,serif;font-weight:700;
  font-size:21.5px;letter-spacing:.01em;
  color:#fff;background:linear-gradient(180deg,#1a934a,var(--green) 55%,var(--green-deep));
  border:none;border-radius:14px;padding:19px 24px;
  box-shadow:0 14px 30px -12px rgba(14,102,48,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 20px 38px -12px rgba(14,102,48,.6), inset 0 1px 0 rgba(255,255,255,.25)}
.btn:active{transform:translateY(0)}
.btn.secondary{
  background:transparent;color:var(--ink);
  border:2px solid var(--ink);box-shadow:none;font-weight:700;
}
.btn.secondary:hover{background:rgba(22,38,59,.05);transform:translateY(-2px)}

/* ---------- formularios ---------- */
label{
  display:block;font-weight:700;margin:22px 0 8px;color:var(--ink);
  font-size:17.5px;letter-spacing:.01em;
}
input[type=text],input[type=tel],input[type=email],select{
  width:100%;font-size:20px;padding:15px 16px;
  font-family:inherit;color:var(--ink);
  background:#fff;border:2px solid var(--line);border-radius:12px;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(193,154,63,.18)}
input::placeholder{color:#a8b0ba}

.checks{display:grid;gap:11px;margin-top:8px}
.checks label{
  display:flex;align-items:flex-start;gap:12px;margin:0;cursor:pointer;
  font-weight:400;font-size:17.5px;color:var(--ink-soft);
  background:#fff;border:2px solid var(--line);border-radius:12px;padding:13px 14px;
  transition:border-color .15s, background .15s;
}
.checks label:hover{border-color:var(--gold-soft)}
.checks label:has(input:checked){border-color:var(--green);background:#f2f9f1;color:var(--ink)}
.checks input{width:23px;height:23px;margin-top:2px;flex:none;accent-color:var(--green)}

.radios{display:flex;gap:12px;margin-top:8px}
.radios label{
  flex:1;display:flex;align-items:center;justify-content:center;gap:10px;margin:0;cursor:pointer;
  font-size:19px;font-weight:700;color:var(--ink-soft);
  background:#fff;border:2px solid var(--line);border-radius:12px;padding:15px;
  transition:border-color .15s, background .15s;
}
.radios label:hover{border-color:var(--gold-soft)}
.radios label:has(input:checked){border-color:var(--green);background:#f2f9f1;color:var(--ink)}
.radios input{width:23px;height:23px;accent-color:var(--green)}

/* ---------- listas de beneficios ---------- */
ul.bullets{list-style:none;margin:24px 0;display:grid;gap:13px;text-align:left}
ul.bullets li{
  position:relative;padding:14px 16px 14px 50px;font-size:18.5px;color:var(--ink-soft);
  background:var(--cream-card);border:1px solid var(--line);border-radius:12px;
}
ul.bullets li strong{color:var(--ink)}
ul.bullets li::before{
  content:"✓";position:absolute;left:16px;top:12px;
  width:24px;height:24px;border-radius:50%;
  background:var(--green);color:#fff;font-weight:700;font-size:15px;
  display:grid;place-items:center;
}

/* ---------- pasos editoriales ---------- */
section{padding:34px 0}
h2{
  font-family:"Fraunces",Georgia,serif;font-weight:600;
  color:var(--ink);font-size:clamp(25px,5vw,32px);line-height:1.2;
  margin-bottom:16px;text-align:center;letter-spacing:-.01em;
}
.steps{display:grid;gap:16px;margin-top:14px;counter-reset:paso}
.step{
  display:flex;gap:20px;align-items:flex-start;
  background:var(--cream-card);border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 22px 18px;font-size:18.5px;color:var(--ink-soft);
  box-shadow:0 8px 24px -16px rgba(22,38,59,.25);
}
.step strong{color:var(--ink)}
.step .n{
  flex:none;font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;
  font-size:46px;line-height:1;color:var(--gold);
  width:52px;text-align:center;
  text-shadow:0 1px 0 #fff;
}

/* ---------- franja de confianza ---------- */
.trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  margin:26px auto 0;padding:16px 10px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:15.5px;color:var(--muted);letter-spacing:.04em;
}
.trust b{color:var(--ink-soft);font-weight:700}

/* ---------- video ---------- */
.videobox{
  position:relative;border-radius:18px;overflow:hidden;background:#0d1827;
  aspect-ratio:16/9;display:grid;place-items:center;
  border:1px solid var(--ink);box-shadow:var(--shadow-warm);
  outline:4px solid rgba(193,154,63,.35);outline-offset:4px;
}
.videobox video{width:100%;height:100%}

/* ---------- mensajes ---------- */
.note{font-size:15.5px;color:var(--muted);margin-top:16px;text-align:center}
.err{
  display:none;background:#fdf0ee;color:#9c3325;border:1px solid #ecc8c1;
  border-radius:12px;padding:13px 15px;margin-top:16px;font-size:16.5px;
}

/* ---------- footer ---------- */
footer{
  margin-top:54px;background:var(--ink);color:#9fb0c3;
  font-size:13.5px;line-height:1.75;padding:34px 0 48px;
  border-top:3px solid var(--gold);
}
footer .wrap{max-width:840px}
footer p{margin-bottom:11px}
footer strong{color:#cfdae6}

.hidden{display:none}
@media(max-width:520px){
  .radios{flex-direction:column}
  .hero{padding-top:42px}
  .step{gap:14px;padding:18px 16px}
  .step .n{font-size:38px;width:40px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}