*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:   #0D0D0F;
      --bg2:  #141416;
      --bg3:  #1C1C1F;
      --bg4:  #252528;
      --neon: #00B4FF;
      --neon2:#0055FF;
      --ng:   rgba(0,180,255,.22);
      --white:#FFFFFF;
      --gray: #9CA3AF;
      --gray2:#6B7280;
      --bdr:  rgba(255,255,255,.08);
      --bdrN: rgba(0,180,255,.28);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
      background: var(--bg);
      color: var(--white);
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* ── Background glow + dot grid ── */
    body::before {
      content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
      background:
        radial-gradient(ellipse 80% 55% at 50% -15%, rgba(0,100,255,.13) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 90% 85%,  rgba(0,180,255,.07) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 5%  60%,  rgba(0,60,200,.05)  0%, transparent 60%);
    }
    body::after {
      content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
      background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 30px 30px;
    }

    /* ── NAVBAR ── */
    .nav {
      position:fixed; top:0; left:0; right:0; z-index:200;
      height:64px; display:flex; align-items:center; padding:0 28px;
      background:rgba(13,13,15,.92);
      border-bottom:1px solid var(--bdr);
    }
    @supports (backdrop-filter: blur(14px)) {
      .nav { backdrop-filter:blur(14px); }
    }
    .nav-inner {
      max-width:1180px; width:100%; margin:0 auto;
      display:flex; align-items:center; justify-content:space-between; gap:20px;
    }
    .nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
    .nav-logo-txt { display:flex; flex-direction:column; line-height:1; }
    .nav-logo-txt .brand { font-size:17px; font-weight:900; color:var(--white); letter-spacing:1.5px; }
    .nav-logo-txt .sub   { font-size:7.5px; color:var(--neon); letter-spacing:3px; text-transform:uppercase; font-weight:700; margin-top:1px; }
    .nav-links { display:flex; align-items:center; gap:26px; }
    .nav-links a { color:var(--gray); text-decoration:none; font-size:14px; font-weight:500; transition:color .2s; }
    .nav-links a:hover { color:var(--white); }
    .btn-nav {
      display:flex; align-items:center; gap:7px; padding:8px 18px;
      background:rgba(0,180,255,.08); border:1px solid var(--bdrN); border-radius:8px;
      color:var(--neon); font-size:13px; font-weight:600; cursor:pointer; text-decoration:none;
      transition:all .2s;
    }
    .btn-nav:hover { background:rgba(0,180,255,.16); box-shadow:0 0 18px rgba(0,180,255,.22); }
    @media(max-width:700px){ .nav-links{display:none;} }

    /* ── SECTIONS ── */
    section { position:relative; z-index:1; }
    .container { max-width:1180px; margin:0 auto; padding:0 24px; }

    /* ── HERO ── */
    .hero {
      min-height:100vh; display:flex; align-items:center; justify-content:center;
      padding:100px 24px 70px; text-align:center;
    }
    .hero-inner { max-width:820px; }

    .hero-badge {
      display:inline-flex; align-items:center; gap:8px; margin-bottom:32px;
      padding:5px 16px; border-radius:20px;
      background:rgba(0,180,255,.08); border:1px solid var(--bdrN);
      font-size:11.5px; font-weight:700; color:var(--neon); letter-spacing:1.2px; text-transform:uppercase;
    }
    .badge-dot {
      width:6px; height:6px; border-radius:50%;
      background:var(--neon); box-shadow:0 0 8px var(--neon);
      animation:pulse 2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }

    /* Logo SVG area */
    .hero-logo-wrap { margin-bottom:38px; }
    .hero-logo-svg  { width:min(300px,80vw); height:auto; margin:0 auto 18px; display:block; }

    .neon-swoosh {
      width:min(380px,70vw); height:3px; margin:0 auto;
      background:linear-gradient(90deg, transparent, var(--neon), var(--neon2), transparent);
      border-radius:3px;
      box-shadow:0 0 14px var(--neon), 0 0 28px rgba(0,180,255,.35);
      animation:swoosh 3.5s ease-in-out infinite;
    }
    @keyframes swoosh { 0%,100%{opacity:.6;width:30%} 50%{opacity:1;width:70%} }

    .hero h1 {
      font-size:clamp(38px,6.5vw,74px); font-weight:900;
      line-height:1.04; letter-spacing:-2px; margin-bottom:22px;
    }
    .hero h1 .l1 { display:block; color:var(--white); }
    .hero h1 .l2 {
      display:block;
      background:linear-gradient(135deg, var(--neon) 0%, var(--neon2) 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text;
      filter:drop-shadow(0 0 28px rgba(0,180,255,.45));
    }

    .hero-sub { font-size:17px; color:var(--gray); max-width:540px; margin:0 auto 38px; line-height:1.7; }

    .hero-ctas { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }

    .btn-google {
      display:inline-flex; align-items:center; gap:10px; padding:14px 30px;
      background:var(--neon); color:#000; border:none; border-radius:10px;
      font-size:15px; font-weight:800; cursor:pointer; text-decoration:none;
      box-shadow:0 0 30px rgba(0,180,255,.38), 0 4px 20px rgba(0,0,0,.28);
      transition:all .22s;
    }
    .btn-google:hover { background:#22CCFF; transform:translateY(-2px); box-shadow:0 0 44px rgba(0,180,255,.6), 0 8px 30px rgba(0,0,0,.3); }

    .hero-tags { margin-top:42px; display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap; }
    .mat-tag {
      padding:4px 11px; border-radius:20px;
      background:var(--bg3); border:1px solid var(--bdr);
      font-size:11px; color:var(--gray); font-weight:500;
    }

    /* ── STATS ── */
    .stats-bar { background:var(--bg2); border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr); padding:32px 24px; }
    .stats-bar, .section-feat, .section-how, .section-plans, .footer {
      content-visibility:auto; contain-intrinsic-size:1px 760px;
    }
    .stats-grid { max-width:900px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
    .stat-val { font-size:38px; font-weight:900; color:var(--neon); text-shadow:0 0 22px rgba(0,180,255,.5); line-height:1; margin-bottom:5px; }
    .stat-lbl { font-size:11px; color:var(--gray2); text-transform:uppercase; letter-spacing:.9px; font-weight:600; }
    @media(max-width:600px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }

    /* ── FEATURES ── */
    .section-feat { padding:100px 24px; }
    .sec-hd { text-align:center; margin-bottom:60px; }
    .sec-tag {
      display:inline-block; padding:4px 13px; margin-bottom:14px;
      font-size:11px; font-weight:700; color:var(--neon); text-transform:uppercase; letter-spacing:1.5px;
      border:1px solid var(--bdrN); border-radius:20px; background:rgba(0,180,255,.06);
    }
    .sec-hd h2 { font-size:clamp(26px,4vw,42px); font-weight:800; letter-spacing:-1px; margin-bottom:12px; }
    .sec-hd p  { font-size:16px; color:var(--gray); max-width:520px; margin:0 auto; }

    .feat-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    @media(max-width:768px){ .feat-grid{ grid-template-columns:1fr; } }

    .feat-card {
      background:var(--bg2); border:1px solid var(--bdr); border-radius:16px; padding:28px;
      position:relative; overflow:hidden; transition:all .3s;
    }
    .feat-card::after {
      content:''; position:absolute; top:0; left:0; right:0; height:2px;
      background:linear-gradient(90deg,transparent,var(--neon),transparent);
      opacity:0; transition:opacity .3s;
    }
    .feat-card:hover { border-color:var(--bdrN); background:var(--bg3); transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,.3),0 0 22px rgba(0,180,255,.07); }
    .feat-card:hover::after { opacity:1; }
    .feat-ic {
      width:48px; height:48px; border-radius:12px; margin-bottom:16px;
      background:rgba(0,180,255,.1); border:1px solid var(--bdrN);
      display:flex; align-items:center; justify-content:center; font-size:22px;
    }
    .feat-card h3 { font-size:15.5px; font-weight:700; margin-bottom:8px; }
    .feat-card p  { font-size:13px; color:var(--gray); line-height:1.65; }

    /* ── HOW ── */
    .section-how { padding:100px 24px; }
    .steps-grid {
      max-width:960px; margin:0 auto;
      display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center;
      position:relative;
    }
    .steps-grid::before {
      content:''; position:absolute; top:35px; left:8%; right:8%; height:1px;
      background:linear-gradient(90deg,transparent,var(--neon),var(--neon2),transparent); opacity:.3;
    }
    .step-n {
      width:70px; height:70px; border-radius:50%; margin:0 auto 18px;
      background:rgba(0,180,255,.08); border:2px solid var(--neon);
      display:flex; align-items:center; justify-content:center;
      font-size:26px; font-weight:900; color:var(--neon);
      box-shadow:0 0 20px rgba(0,180,255,.22); position:relative; z-index:1;
      flex-shrink:0;
    }
    .step-t { font-size:15px; font-weight:700; margin-bottom:8px; }
    .step-d { font-size:13px; color:var(--gray); line-height:1.65; }
    /* Tablet: 2x2 */
    @media(max-width:760px){
      .steps-grid { grid-template-columns:1fr 1fr; gap:28px; }
      .steps-grid::before { display:none; }
    }
    /* Móvil: timeline vertical */
    @media(max-width:480px){
      .steps-grid { grid-template-columns:1fr; gap:0; text-align:left; position:relative; padding-left:20px; }
      .steps-grid::before { display:none; }
      .steps-grid::after {
        content:''; position:absolute; left:24px; top:35px; bottom:35px; width:1px;
        background:linear-gradient(180deg,transparent,var(--neon) 20%,var(--neon) 80%,transparent); opacity:.3;
      }
      .steps-grid > div { display:flex; align-items:flex-start; gap:16px; padding:14px 0; }
      .step-n { width:48px; height:48px; font-size:18px; margin:0; flex-shrink:0; }
      .step-t { font-size:14px; margin-bottom:5px; }
      .step-d { font-size:12px; }
    }

    /* ── PLANS ── */
    .section-plans { padding:100px 24px; background:var(--bg2); border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr); }
    .plans-grid { max-width:980px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
    @media(max-width:760px){ .plans-grid{grid-template-columns:1fr;} .plan-card.feat{transform:none;} }

    .plan-card { background:var(--bg3); border:1px solid var(--bdr); border-radius:20px; padding:32px; position:relative; transition:all .3s; }
    .plan-card.feat {
      background:linear-gradient(140deg,rgba(0,80,200,.2),rgba(0,180,255,.08));
      border-color:var(--neon);
      box-shadow:0 0 44px rgba(0,180,255,.14),0 20px 60px rgba(0,0,0,.3);
      transform:scale(1.03);
    }
    .plan-badge {
      position:absolute; top:-13px; left:50%; transform:translateX(-50%);
      background:var(--neon); color:#000;
      padding:3px 15px; border-radius:20px;
      font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:1px;
    }
    .plan-name { font-size:12px; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:12px; }
    .plan-price { display:flex; align-items:flex-start; gap:4px; margin-bottom:6px; }
    .plan-price .cur { font-size:20px; font-weight:700; color:var(--white); margin-top:10px; }
    .plan-price .amt { font-size:54px; font-weight:900; color:var(--white); line-height:1; }
    .plan-price .per { font-size:12px; color:var(--gray2); align-self:flex-end; margin-bottom:7px; }
    .plan-desc { font-size:13px; color:var(--gray); margin-bottom:24px; line-height:1.5; }
    .plan-feats { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
    .plan-feats li { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--gray); }
    .plan-feats li .ck { color:var(--neon); flex-shrink:0; margin-top:1px; }
    .plan-feats li.off { opacity:.35; }
    .plan-feats li.off .ck { color:var(--gray2); }

    /* ── Precio tachado + oferta ── */
    .plan-old-price { font-size:13px; color:var(--gray2); text-decoration:line-through; margin-bottom:2px; }
    .plan-offer-tag { display:inline-block; font-size:10px; font-weight:800; background:rgba(255,140,0,.18); color:#FFB347; border:1px solid rgba(255,140,0,.35); border-radius:20px; padding:2px 9px; letter-spacing:.8px; text-transform:uppercase; margin-bottom:8px; }
    .plan-card.annual { background:linear-gradient(140deg,rgba(255,90,0,.12),rgba(255,180,0,.06)); border-color:rgba(255,140,0,.4); }
    .plan-card.annual .plan-badge { background:#FF8C00; color:#fff; }
    /* ── Trial steps ── */
    .trial-steps { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:18px; }
    .trial-steps li { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--gray); }
    .trial-step-n { width:22px; height:22px; border-radius:50%; background:rgba(0,180,255,.15); border:1px solid rgba(0,180,255,.35); color:var(--neon); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
    .trial-steps li a { color:var(--neon); text-decoration:none; font-weight:600; }
    .trial-steps li a:hover { text-decoration:underline; }
    .trial-divider { text-align:center; font-size:11px; color:var(--gray2); margin:14px 0 10px; }
    /* ── Buttons ── */
    .btn-plan { width:100%; padding:12px; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; transition:all .2s; display:block; text-align:center; text-decoration:none; }
    .bp-free { background:transparent; border:1px solid var(--bdr); color:var(--gray); }
    .bp-free:hover { border-color:rgba(255,255,255,.28); color:var(--white); }
    .bp-wa   { background:#25D366; color:#fff; border:none; box-shadow:0 0 18px rgba(37,211,102,.28); }
    .bp-wa:hover { background:#1da851; box-shadow:0 0 28px rgba(37,211,102,.45); transform:translateY(-1px); }
    .bp-pro  { background:var(--neon); color:#000; border:none; box-shadow:0 0 22px rgba(0,180,255,.32); }
    .bp-pro:hover { background:#22CCFF; box-shadow:0 0 34px rgba(0,180,255,.5); transform:translateY(-1px); }
    .bp-annual { background:linear-gradient(135deg,#FF8C00,#FFB347); color:#fff; border:none; box-shadow:0 0 22px rgba(255,140,0,.32); }
    .bp-annual:hover { filter:brightness(1.08); box-shadow:0 0 34px rgba(255,140,0,.5); transform:translateY(-1px); }
    /* ── Trial code modal ── */
    .trial-modal-ov { position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:1100; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s; }
    .trial-modal-ov.open { opacity:1; pointer-events:all; }
    .trial-modal-box { background:#1C1C1F; border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:36px 32px; max-width:420px; width:90%; text-align:center; }
    .trial-modal-box h3 { font-size:20px; font-weight:800; margin-bottom:8px; }
    .trial-modal-box p { font-size:13px; color:var(--gray); margin-bottom:20px; line-height:1.5; }
    .trial-code-input { width:100%; padding:13px 16px; border-radius:10px; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.15); color:#fff; font-size:16px; font-weight:700; letter-spacing:2px; text-align:center; text-transform:uppercase; outline:none; font-family:inherit; transition:.2s; margin-bottom:14px; }
    .trial-code-input:focus { border-color:var(--neon); background:rgba(0,180,255,.06); }
    .trial-code-input::placeholder { font-weight:400; letter-spacing:0; font-size:13px; }
    .trial-err { font-size:12px; color:#FF6B6B; margin-bottom:10px; display:none; }
    .trial-ok  { font-size:13px; color:#6EE7B7; margin-bottom:10px; display:none; }

    /* ── FOOTER ── */
    .footer { background:var(--bg); border-top:1px solid var(--bdr); padding:52px 24px 28px; }
    .footer-inner { max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:36px; }
    .footer-brand .fb-logo { font-size:20px; font-weight:900; letter-spacing:1.5px; margin-bottom:7px; }
    .footer-brand p { font-size:13px; color:var(--gray2); max-width:240px; line-height:1.55; }
    .footer-col h4 { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--white); margin-bottom:14px; }
    .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
    .footer-col ul li a { font-size:13px; color:var(--gray2); text-decoration:none; transition:color .2s; }
    .footer-col ul li a:hover { color:var(--white); }
    .footer-btm {
      max-width:1100px; margin:0 auto; border-top:1px solid var(--bdr); padding-top:20px;
      display:flex; justify-content:space-between; align-items:center;
      font-size:12px; color:var(--gray2); flex-wrap:wrap; gap:10px;
    }
    .vdot { width:6px; height:6px; border-radius:50%; background:var(--neon); box-shadow:0 0 8px var(--neon); display:inline-block; margin-right:6px; }

    /* ── LOGIN MODAL ── */
    .modal-ov {
      position:fixed; inset:0; background:rgba(0,0,0,.9);
      z-index:500; display:none; align-items:center; justify-content:center;
      transition:opacity .3s;
    }
    .modal-ov.open { display:flex; }
    .modal-box {
      background:var(--bg2); border:1px solid var(--bdrN); border-radius:24px;
      padding:48px 40px; width:100%; max-width:400px; text-align:center;
      position:relative; will-change:transform,opacity;
      box-shadow:0 0 60px rgba(0,180,255,.12),0 30px 80px rgba(0,0,0,.55);
      animation:mboxIn .3s ease;
    }
    @keyframes mboxIn { from{transform:scale(.93) translateY(12px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
    .modal-close { position:absolute; top:14px; right:14px; background:none; border:none; color:var(--gray2); font-size:21px; cursor:pointer; padding:4px 8px; border-radius:6px; line-height:1; transition:all .2s; }
    .modal-close:hover { color:var(--white); background:var(--bg3); }
    .modal-box h2 { font-size:24px; font-weight:800; margin-bottom:8px; }
    .modal-box .modal-sub { font-size:14px; color:var(--gray); margin-bottom:30px; line-height:1.5; }

    .btn-google-modal {
      display:flex; align-items:center; justify-content:center; gap:12px; width:100%;
      padding:14px; background:var(--white); color:#1a1a1a;
      border:none; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer;
      box-shadow:0 4px 22px rgba(0,0,0,.32); transition:all .2s; margin-bottom:14px;
    }
    .btn-google-modal:hover { background:#F0F0F0; transform:translateY(-1px); box-shadow:0 8px 32px rgba(0,0,0,.42); }
    .btn-google-modal:disabled { opacity:.5; cursor:not-allowed; transform:none; }

    .auth-err {
      background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3);
      border-radius:8px; padding:10px 14px; color:#FCA5A5; font-size:13px;
      margin-bottom:14px; display:none; text-align:left;
    }
    .auth-spin { display:none; align-items:center; justify-content:center; gap:10px; color:var(--gray); font-size:14px; margin-bottom:14px; }
    .spinner-sm { width:20px; height:20px; border:2px solid rgba(0,180,255,.2); border-top-color:var(--neon); border-radius:50%; animation:sp .7s linear infinite; }
    @keyframes sp { to{transform:rotate(360deg)} }
    .modal-note { font-size:11px; color:var(--gray2); line-height:1.6; }

    /* ── CONFIG BANNER ── */
    .cfg-banner {
      position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
      background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.4);
      border-radius:12px; padding:12px 22px; color:#FCD34D; font-size:13px;
      z-index:600; text-align:center; max-width:92%; display:none; line-height:1.5;
    }
    .cfg-banner a { color:#FCD34D; font-weight:700; text-decoration:underline; cursor:pointer; }

    /* ── USER MENU (logged in) ── */
    .user-menu { display:flex; align-items:center; gap:9px; }
    .user-avatar { width:30px; height:30px; border-radius:50%; border:2px solid var(--neon); box-shadow:0 0 10px rgba(0,180,255,.4); }
    .user-name-nav { font-size:13px; font-weight:600; }
    .btn-app { padding:8px 16px; background:var(--neon); color:#000; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
    .badge-admin { font-size:9px; color:var(--neon); font-weight:700; padding:2px 7px; border:1px solid rgba(0,180,255,.3); border-radius:8px; }
    .btn-signout { background:none; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.55); border-radius:7px; padding:5px 10px; font-size:12px; cursor:pointer; white-space:nowrap; }
    .btn-signout:hover { border-color:rgba(255,255,255,.4); color:#fff; }

    body.modal-open { overflow:hidden; }
    body.modal-open .badge-dot,
    body.modal-open .neon-swoosh { animation-play-state:paused; }
    body.modal-open .hero h1 .l2 { filter:none; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior:auto; }
      .badge-dot, .neon-swoosh, .spinner-sm, .modal-box { animation:none !important; }
      .btn-nav, .btn-google, .feat-card, .plan-card, .btn-google-modal { transition:none !important; }
      .hero h1 .l2 { filter:none; }
    }