/* Reset básico y variables */
:root{
    --bg:#0b1220;
    --card:#0f172a;
    --muted:#94a3b8;
    --text:#e2e8f0;
    --primary:#0ea5e9;
    --primary-700:#0369a1;
    --accent:#22c55e;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    color:var(--text);
    background: radial-gradient(1200px 800px at 10% -10%, #0b3b5c22, transparent 60%),
                radial-gradient(800px 600px at 110% -10%, #14532d22, transparent 60%),
                var(--bg);
  }
  .container{width:min(1100px, 92vw); margin:0 auto}
  
  /* Topbar */
  .topbar{position:sticky; top:0; backdrop-filter:saturate(160%) blur(10px); background:#0b1220cc; border-bottom:1px solid #223; z-index:20}
  .topbar__inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
  .brand{display:flex; align-items:center; gap:10px}
  .brand__name{font-weight:700; letter-spacing:.2px}
  .brand__logo{filter: drop-shadow(0 2px 4px #0002)}
  .menu{list-style:none; display:flex; gap:18px; margin:0; padding:0}
  .menu a{color:var(--text); text-decoration:none; padding:8px 10px; border-radius:8px}
  .menu a:hover{background:#1e293b}
  
  /* Secciones */
  .section{background:var(--card); border:1px solid #1f2937; border-radius:16px; padding:28px; margin:22px 0; box-shadow:0 10px 30px #0004}
  .section h2{margin:0 0 10px; font-size:1.6rem}
  .section p{color:var(--muted); line-height:1.6}
  
  /* Hero */
  .hero{display:grid; grid-template-columns: 1.2fr 1fr; gap:28px; align-items:center}
  .hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
  .btn{appearance:none; border:none; cursor:pointer; font-weight:600; padding:12px 16px; border-radius:12px; display:inline-flex; align-items:center; gap:10px}
  .btn--primary{background:var(--primary); color:#00223a}
  .btn--primary:hover{background:var(--primary-700); color:white}
  .btn--ghost{background:transparent; color:var(--text); border:1px solid #334155}
  .btn--ghost:hover{background:#0b2442}
  .badge{display:inline-flex; align-items:center; gap:6px; background:#052e40; color:#7dd3fc; border:1px solid #0b567c; padding:6px 10px; border-radius:999px; font-size:.9rem}
  
  /* Tarjeta WhatsApp */
  .whatsapp-card{display:grid; grid-template-columns: 1fr auto; gap:20px; align-items:center; border:1px dashed #1f7a4d; background:linear-gradient(180deg, #052e2b, #071a17);}
  .whatsapp-card .qr{width:140px; height:140px; background:#00000022; border-radius:12px; display:grid; place-items:center; padding:10px}
  .whatsapp-card .qr canvas, .whatsapp-card .qr img{max-width:100%; height:auto}
  .whatsapp-number{font-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color:#a7f3d0}
  
  /* Grid de beneficios */
  .benefits{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
  .benefit{background:#0b1220; border:1px solid #1e293b; border-radius:12px; padding:16px}
  .benefit h3{margin:0 0 6px}
  .benefit p{margin:0; color:var(--muted)}
  
  /* Footer */
  .footer{padding:30px 0; color:#7a8aa0}
  .footer__inner{display:flex; justify-content:center}
  
  /* Responsivo */
  @media (max-width: 900px){
    .hero{grid-template-columns: 1fr}
  }
  @media (max-width: 700px){
    .benefits{grid-template-columns: 1fr 1fr}
  }
  @media (max-width: 480px){
    .benefits{grid-template-columns: 1fr}
  }