:root {
  --bg: #0b1220;           /* fondo hero oscuro */
  --card: #0f172a;         /* tarjetas oscuras */
  --ink: #0f172a;          /* texto principal en secciones claras */
  --muted: #64748b;        /* texto secundario */
  --brand: #eb018a;        /* magenta principal */
  --brand-2: #ff4fb5;      /* magenta claro */
  --surface: #ffffff;      /* fondo secciones claras */
  --ring: rgba(235,1,138,0.35);
}

/* Reset + anti overflow */
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; width:100%; max-width:100%; overflow-x:hidden }
img,svg,video,canvas,iframe{ max-width:100%; height:auto; display:block }

body{ font-family:'Poppins',sans-serif; font-weight:400; color:var(--surface); background:var(--bg) }
h1,h2{ font-family:'Quicksand',sans-serif; font-weight:700 }
h3,h4,h5,h6{ font-family:'Poppins',sans-serif; font-weight:700 }
p,li,a,span,label,input,select,textarea{ font-family:'Poppins',sans-serif; font-weight:400 }
a{ color:inherit; text-decoration:none }

/* Container */
.wrap{ width:min(1120px,92vw); margin:0 auto }

/* Header */
header{ position:sticky; top:0; z-index:40; backdrop-filter:saturate(180%) blur(8px); background:linear-gradient(180deg,rgba(11,18,32,0.9),rgba(11,18,32,0.6)); border-bottom:1px solid rgba(255,255,255,0.06) }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px }
.brand-badge{ font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(235,1,138,0.15); color:#ffd2ea; border:1px solid rgba(235,1,138,0.35) }
.menu{ display:flex; gap:20px; align-items:center }
.menu a{ color:#cbd5e1; font-weight:700; font-size:14px; opacity:.9 }
.menu a:hover{ color:#e2e8f0 }
.cta{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; padding:10px 14px; border-radius:12px; font-weight:700; border:none; box-shadow:0 10px 24px rgba(235,1,138,.25) }
.cta:hover{ filter:brightness(1.08) }
.hamb{ display:none }

/* Hero */
.hero{ position:relative; overflow:hidden }
.hero .wrap{ padding:64px 0 40px }
.spark{ position:absolute; inset:-30vh 0 auto auto; right:0; width:60vw; height:60vw; background:radial-gradient(closest-side, rgba(235,1,138,.18), transparent 68%); filter:blur(40px); pointer-events:none }
.h-eyebrow{ display:inline-flex; align-items:center; gap:8px; color:#ffe4f1; background:rgba(235,1,138,0.12); border:1px solid rgba(235,1,138,0.35); padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; letter-spacing:.2px }
h1{ font-size:clamp(32px,4.8vw,56px); line-height:1.07; margin:16px 0 12px }
.h-sub{ font-size:clamp(16px,2.1vw,20px); color:#cbd5e1; line-height:1.5; max-width:840px }
.h-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px }
.ghost{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid rgba(235,1,138,.35); color:#ffd2ea; font-weight:700; background:transparent }
.ghost:hover{ border-color:#ffd2ea; background:rgba(235,1,138,.08) }

/* Pillars */
.pillars{ margin:40px 0 24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.card{ background:var(--card); border:1px solid rgba(226,232,240,.06); border-radius:16px; padding:18px }
.card h3{ margin:8px 0 6px; font-size:18px }
.card p{ margin:0; color:#cbd5e1; font-size:14.5px; line-height:1.5 }
.badge{ display:inline-block; font-size:12px; border:1px solid rgba(235,1,138,0.3); color:#ffd2ea; padding:4px 8px; border-radius:999px; background:rgba(235,1,138,.12) }

/* Light section */
.section{ background:var(--surface); color:var(--ink); padding:70px 0 }
.section h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 8px }
.section p.lead{ color:var(--muted); font-size:18px; max-width:900px }
.grid{ margin-top:24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
.tile{ background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:18px; box-shadow:0 8px 24px rgba(2,6,23,.06) }
.tile h3{ margin:0 0 8px; font-size:18px }
.tile ul{ margin:10px 0 0 18px; color:#334155; line-height:1.55; font-size:14.5px }
.tile .eyebrow{ display:inline-block; font-size:12px; border:1px dashed #f8c0e4; color:#b1006b; padding:4px 8px; border-radius:999px; background:#fff0fa }

/* Plans */
.plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:18px }
.plan{ background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; padding:22px; box-shadow:0 10px 24px rgba(2,6,23,.07); display:flex; flex-direction:column }
.plan h3{ margin:0 0 8px; font-size:20px }
.price{ font-weight:900; font-size:24px; color:var(--brand); margin:4px 0 8px }
.pl-line{ color:#334155; margin:0 0 8px; font-size:14.5px }
.plan .cta{ margin-top:auto; align-self:flex-start }
.note{ font-size:12px; color:#64748b; margin-top:10px }

/* Steps */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:22px }
.step{ background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px; box-shadow:0 6px 18px rgba(2,6,23,.06) }
.step strong{ color:var(--brand) }

/* CTA band */
.band{ background:linear-gradient(90deg,rgba(235,1,138,.12),rgba(255,79,181,.12)); border-top:1px solid rgba(235,1,138,.25); border-bottom:1px solid rgba(255,79,181,.25); padding:28px 0 }
.band-inner{ display:flex; align-items:center; gap:16px; justify-content:space-between; flex-wrap:wrap; color:#e2e8f0 }
.band h3{ margin:0; font-size:clamp(18px,2.2vw,28px) }

/* Contact */
.contact{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin-top:24px }
form{ background:#ffffff; color:var(--ink); border:1px solid #e2e8f0; border-radius:18px; padding:18px; display:grid; gap:12px }
label{ font-weight:700; font-size:13px; color:#0f172a }
input,select,textarea{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #cbd5e1; background:#fff; font-size:14px }
input:focus,select:focus,textarea:focus{ outline:3px solid var(--ring); border-color:var(--brand-2) }
textarea{ min-height:120px; resize:vertical }
.muted{ color:#64748b; font-size:13px }

/* Footer */
footer{ background:#0b1220; color:#cbd5e1; padding:40px 0; border-top:1px solid rgba(255,255,255,.06) }
.fgrid{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:18px }
.social{ display:flex; gap:10px }
.social a{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:10px; border:1px solid rgba(235,1,138,.35) }
.legal{ font-size:12px; color:#94a3b8; margin-top:10px }
.copyright{ text-align:center; color:#8aa4b8; font-size:13px; opacity:.8; margin-top:26px }

/* Responsive */
@media (max-width:980px){ .pillars,.grid,.plans{ grid-template-columns:1fr 1fr } .steps{ grid-template-columns:1fr 1fr } .contact{ grid-template-columns:1fr } .fgrid{ grid-template-columns:1fr 1fr } }
@media (max-width:720px){ .menu{ display:none } .hamb{ display:inline-flex; border:1px solid rgba(235,1,138,.35); border-radius:10px; padding:8px; color:#e2e8f0; background:transparent } .pillars,.grid,.plans{ grid-template-columns:1fr } .fgrid{ grid-template-columns:1fr } .hero .wrap{ padding:42px 0 24px } #mbl{ width:100vw; max-width:100vw } #mbl .wrap{ width:100% } }