/* Antorcha Publicitaria — hoja de estilo única
   Familia visual de Antorcha Marketing: Poppins + Open Sans, mismos neutrales.
   Acento propio: lila como color primario, naranja como secundario. */

:root{
  /* Lila (primario propio de Publicitaria) */
  --lila-50:#F5F0FD; --lila-100:#E8DDFA; --lila-200:#D2BCF3; --lila-300:#B795E8;
  --lila-400:#A171DC; --lila-500:#8B4FCF; --lila-600:#7639B4; --lila-700:#5D2C8E;
  --lila-800:#451F69; --lila-900:#2C1344;

  /* Naranja (heredado de Antorcha Marketing, aquí como acento) */
  --orange-50:#FFF3EA; --orange-100:#FFE2CC; --orange-300:#FFA05E;
  --orange-500:#FF6A00; --orange-600:#E85800; --orange-700:#BF4700;

  /* Neutrales (idénticos al sitio hermano) */
  --n-0:#FFFFFF; --n-25:#FAFAFB; --n-50:#F5F5F7; --n-100:#ECECEF; --n-200:#DCDCE2;
  --n-300:#C2C2CC; --n-400:#9A9AA8; --n-500:#6E6E80; --n-600:#55556A; --n-700:#3F3F52;
  --n-800:#2A2A38; --n-900:#1A1A24; --n-950:#101017;

  --ok-500:#17A34A;

  --text:var(--n-900); --text-2:var(--n-600); --text-3:var(--n-500);
  --surface:var(--n-0); --sunken:var(--n-50);
  --border:var(--n-200); --border-soft:var(--n-100);

  --radius:14px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(16,16,23,.06), 0 1px 3px rgba(16,16,23,.05);
  --shadow-md:0 8px 24px rgba(16,16,23,.08);
  --shadow-lg:0 24px 60px rgba(44,19,68,.18);

  --wrap:1120px;
  --ff-head:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-body:'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--text);
  font-family:var(--ff-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--lila-700); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--ff-head); letter-spacing:-.02em; line-height:1.14; margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--lila-400); outline-offset:3px; border-radius:6px}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.section{padding:88px 0}
.section--sunken{background:var(--sunken)}
.eyebrow{
  font-family:var(--ff-head); font-weight:600; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lila-600); margin:0 0 12px
}
.section--dark .eyebrow{color:var(--lila-200)}
.h2{font-size:clamp(28px,4vw,40px); font-weight:700; text-wrap:balance}
.lead{font-size:19px; color:var(--text-2); max-width:62ch; margin-top:16px}
.section--dark .lead{color:#CFC6E4}
.center{text-align:center}
.center .lead{margin-left:auto; margin-right:auto}

/* ---------- Aviso de proforma ---------- */
.proforma{
  background:#2C1344; color:#E8DDFA; font-size:13.5px; text-align:center;
  padding:9px 22px; font-family:var(--ff-head); font-weight:500; letter-spacing:.01em
}
.proforma b{color:#FFC49A}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-family:var(--ff-head); font-weight:600; font-size:16px; line-height:1;
  padding:15px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease; text-decoration:none
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn--primary{background:var(--lila-600); color:#fff; box-shadow:0 8px 22px rgba(93,44,142,.32)}
.btn--primary:hover{background:var(--lila-700)}
.btn--wa{background:#25D366; color:#0A2A16; box-shadow:0 8px 22px rgba(37,211,102,.30)}
.btn--wa:hover{background:#1FBB5A}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.42)}
.btn--ghost:hover{background:rgba(255,255,255,.10)}
.btn--outline{background:#fff; color:var(--lila-700); border-color:var(--n-200); box-shadow:var(--shadow-sm)}
.btn--outline:hover{border-color:var(--lila-300)}
.btn--block{width:100%}
.btn--lg{padding:17px 30px; font-size:17px}

/* ---------- Header ---------- */
.hdr{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--border-soft)
}
.hdr__in{display:flex; align-items:center; gap:20px; height:70px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--ff-head); font-weight:700; color:var(--n-900); font-size:18px}
.brand:hover{text-decoration:none}
.brand small{display:block; font-weight:500; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--lila-600); line-height:1.2}
.brand span{line-height:1.1}
.nav{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav a{font-family:var(--ff-head); font-weight:500; font-size:15px; color:var(--n-700)}
.nav a:hover{color:var(--lila-700); text-decoration:none}
.nav a.btn--primary{color:#fff}
.nav a.btn--primary:hover{color:#fff}
.hdr .btn{padding:12px 20px; font-size:15px}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--border); border-radius:10px; padding:9px 11px; cursor:pointer}
.burger span{display:block; width:20px; height:2px; background:var(--n-800); margin:4px 0; border-radius:2px}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(255,106,0,.30), transparent 62%),
    radial-gradient(760px 520px at 12% 92%, rgba(139,79,207,.55), transparent 60%),
    linear-gradient(158deg, #2C1344 0%, #1A1A24 58%, #101017 100%);
}
.hero__in{padding-top:96px; padding-bottom:92px; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(36px,5.2vw,58px); font-weight:800; text-wrap:balance}
.hero h1 em{font-style:normal; color:var(--orange-300)}
.hero p.lead{color:#D8D0E8; font-size:20px}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.hero__note{margin-top:20px; font-size:14.5px; color:#A79BC4}
.pill{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  font-family:var(--ff-head); font-weight:500; font-size:13.5px; color:#E8DDFA; margin-bottom:22px
}
.pill i{width:7px; height:7px; border-radius:50%; background:var(--ok-500); box-shadow:0 0 0 4px rgba(23,163,74,.22)}

.hero__card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg); padding:28px; backdrop-filter:blur(8px); box-shadow:var(--shadow-lg)
}
.hero__card h3{font-size:18px; font-weight:600; color:#fff; margin-bottom:6px}
.hero__card p{font-size:14.5px; color:#BFB3D8}
.kpis{display:grid; gap:12px; margin-top:20px}
.kpi{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10)}
.kpi b{font-family:var(--ff-head); font-weight:600; font-size:14.5px; color:#fff}
.kpi span{font-size:13px; color:#A79BC4}
.kpi .tag{font-family:var(--ff-head); font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:rgba(255,106,0,.18); color:var(--orange-300); border:1px solid rgba(255,160,94,.35)}

/* ---------- Franja de confianza ---------- */
.strip{background:var(--n-950); color:#B9B2CC; padding:22px 0; font-size:15px}
.strip__in{display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; justify-content:center; text-align:center}
.strip b{color:#fff; font-family:var(--ff-head); font-weight:600}

/* ---------- Grillas y tarjetas ---------- */
.grid{display:grid; gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.mt40{margin-top:40px}
.mt28{margin-top:28px}

.card{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow-sm); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease
}
.card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--lila-200)}
.card h3{font-size:19px; font-weight:600; margin-bottom:10px}
.card p{color:var(--text-2); font-size:15.5px}
.card ul{margin:14px 0 0; padding-left:0; list-style:none}
.card li{position:relative; padding-left:26px; font-size:15px; color:var(--text-2); margin-top:9px}
.card li::before{
  content:""; position:absolute; left:0; top:8px; width:15px; height:9px;
  border-left:2.5px solid var(--lila-500); border-bottom:2.5px solid var(--lila-500);
  transform:rotate(-45deg); border-radius:1px
}
.ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(140deg, var(--lila-100), var(--lila-50)); color:var(--lila-700)
}
.ico--orange{background:linear-gradient(140deg, var(--orange-100), var(--orange-50)); color:var(--orange-700)}
.ico svg{width:24px; height:24px}

/* Problema */
.pain{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px}
.pain div{
  background:#fff; border-radius:var(--radius); padding:22px 24px; border:1px solid var(--border-soft);
  border-left:4px solid var(--orange-500)
}
.pain b{display:block; font-family:var(--ff-head); font-weight:600; font-size:16.5px; margin-bottom:6px}
.pain p{color:var(--text-2); font-size:15px}

/* Pasos */
.steps{counter-reset:s; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:42px}
.step{position:relative; padding-top:16px}
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  font-family:var(--ff-head); font-weight:700; font-size:34px; color:var(--lila-200); display:block; line-height:1
}
.step h3{font-size:18px; font-weight:600; margin:12px 0 8px}
.step p{color:var(--text-2); font-size:15px}
.step small{display:inline-block; margin-top:12px; font-family:var(--ff-head); font-size:12.5px; font-weight:600; color:var(--lila-700); background:var(--lila-50); padding:5px 11px; border-radius:999px}

/* Sección oscura */
.section--dark{background:linear-gradient(160deg,#1A1A24,#2C1344); color:#fff}
.section--dark .h2{color:#fff}
.reasons{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:42px}
.reason{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11); border-radius:var(--radius-lg); padding:26px}
.reason h3{font-size:18px; font-weight:600; color:#fff; margin-bottom:9px}
.reason p{color:#C5BBDA; font-size:15.5px}
.reason .ico{background:rgba(255,255,255,.10); color:var(--orange-300)}

/* Planes */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; align-items:start}
.plan{background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px; position:relative}
.plan--best{border:2px solid var(--lila-500); box-shadow:var(--shadow-md)}
.plan__tag{
  position:absolute; top:-13px; left:30px; background:var(--lila-600); color:#fff;
  font-family:var(--ff-head); font-weight:600; font-size:12.5px; padding:6px 14px; border-radius:999px
}
.plan h3{font-size:21px; font-weight:700}
.plan__who{color:var(--text-3); font-size:14.5px; margin-top:4px}
.plan__price{font-family:var(--ff-head); font-weight:700; font-size:32px; margin:20px 0 2px; color:var(--n-900)}
.plan__price small{font-size:14px; font-weight:500; color:var(--text-3)}
.plan ul{list-style:none; padding:0; margin:20px 0 26px}
.plan li{position:relative; padding-left:26px; font-size:15px; color:var(--text-2); margin-top:10px}
.plan li::before{
  content:""; position:absolute; left:0; top:8px; width:15px; height:9px;
  border-left:2.5px solid var(--lila-500); border-bottom:2.5px solid var(--lila-500); transform:rotate(-45deg)
}
.tbd{background:var(--orange-50); color:var(--orange-700); border:1px dashed var(--orange-300); border-radius:6px; padding:0 7px; font-size:.62em; font-family:var(--ff-head); font-weight:600; vertical-align:middle; letter-spacing:.04em}
.plans__note{margin-top:26px; font-size:14.5px; color:var(--text-3); text-align:center}

/* FAQ */
.faq{max-width:820px; margin:40px auto 0}
.faq details{background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius); margin-bottom:12px; box-shadow:var(--shadow-sm)}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 54px 20px 24px; position:relative;
  font-family:var(--ff-head); font-weight:600; font-size:17px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:24px; top:26px; width:10px; height:10px;
  border-right:2.5px solid var(--lila-500); border-bottom:2.5px solid var(--lila-500);
  transform:rotate(45deg); transition:transform .2s ease
}
.faq details[open] summary::after{transform:rotate(-135deg); top:30px}
.faq p{padding:0 24px 22px; color:var(--text-2); font-size:15.5px}

/* Contacto */
.contact{display:grid; grid-template-columns:1fr 1.05fr; gap:52px; align-items:start}
.form{background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-md)}
.field{margin-bottom:16px}
.field label{display:block; font-family:var(--ff-head); font-weight:600; font-size:14px; margin-bottom:7px; color:var(--n-800)}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--ff-body); font-size:16px; color:var(--text);
  padding:13px 15px; border:1px solid var(--border); border-radius:11px; background:#fff; transition:border-color .15s ease, box-shadow .15s ease
}
.field textarea{min-height:104px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--lila-400); box-shadow:0 0 0 4px var(--lila-50)}
.form__legal{font-size:13px; color:var(--text-3); margin-top:14px; text-align:center}
.form__ok{display:none; background:#E8F7EE; border:1px solid #B7E5C8; color:#116634; border-radius:12px; padding:14px 16px; font-size:15px; margin-bottom:16px}
.contact__side ul{list-style:none; padding:0; margin:26px 0 0}
.contact__side li{position:relative; padding-left:30px; margin-top:16px; color:var(--text-2); font-size:16px}
.contact__side li b{display:block; font-family:var(--ff-head); color:var(--n-900); font-weight:600; font-size:15px}
.contact__side li::before{content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:5px; background:var(--lila-100)}
.wa-box{margin-top:30px; padding:22px; border-radius:var(--radius-lg); background:var(--lila-50); border:1px solid var(--lila-100)}
.wa-box p{font-size:15px; color:var(--n-700); margin-bottom:16px}

/* Footer */
.ftr{background:var(--n-950); color:#9A93AC; padding:56px 0 30px; font-size:15px}
.ftr__in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px}
.ftr h4{font-family:var(--ff-head); color:#fff; font-size:15px; font-weight:600; margin-bottom:14px; letter-spacing:.02em}
.ftr a{color:#9A93AC; display:block; margin-bottom:9px}
.ftr a:hover{color:#fff}
.ftr__brand{color:#fff; font-family:var(--ff-head); font-weight:700; font-size:20px; margin-bottom:10px}
.ftr__bottom{border-top:1px solid rgba(255,255,255,.10); margin-top:38px; padding-top:22px; font-size:13.5px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* Botón flotante de WhatsApp */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:70; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:grid; place-items:center; box-shadow:0 10px 28px rgba(37,211,102,.45)
}
.wa-float:hover{transform:scale(1.05)}
.wa-float svg{width:31px; height:31px; fill:#fff}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero__in{grid-template-columns:1fr; gap:40px; padding-top:70px; padding-bottom:74px}
  .grid--3,.grid--4,.pain,.steps,.reasons,.plans{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr; gap:36px}
  .ftr__in{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .section{padding:64px 0}
  .nav{display:none}
  .nav.open{
    display:flex; flex-direction:column; align-items:flex-start; gap:2px; position:absolute;
    top:70px; left:0; right:0; background:#fff; border-bottom:1px solid var(--border);
    padding:14px 22px 20px; box-shadow:var(--shadow-md)
  }
  .nav.open a{padding:11px 0; width:100%; border-bottom:1px solid var(--border-soft)}
  .nav.open .btn{margin-top:12px; width:100%}
  .burger{display:block}
  .hdr__in .btn--primary{display:none}
  .grid--3,.grid--4,.grid--2,.pain,.steps,.reasons,.plans,.ftr__in{grid-template-columns:1fr}
  .hero__cta .btn{width:100%}
  .strip__in{flex-direction:column; gap:10px}
}