:root{
      --bg:#07111c;
      --bg-soft:#0b1624;
      --panel:#101f2f;
      --panel-2:#142638;
      --text:#f5f8ff;
      --muted:#a8b6c8;
      --line:rgba(255,255,255,.12);
      --brand:#149bdd;
      --brand-2:#44b2f0;
      --brand-3:#00d1ff;
      --success:#24d18b;
      --warning:#ffd166;
      --danger:#ff6b6b;
      --white:#ffffff;
      --shadow:0 24px 80px rgba(0,0,0,.35);
      --radius:24px;
      --radius-md:18px;
      --radius-sm:12px;
      --max:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(20,155,221,.25), transparent 32%),
        radial-gradient(circle at 80% 15%, rgba(0,209,255,.13), transparent 28%),
        linear-gradient(180deg,#07111c 0%,#091421 42%,#07111c 100%);
      line-height:1.55;
      overflow-x:hidden;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .container{width:min(var(--max),calc(100% - 36px));margin-inline:auto}

    .topbar{
      position:sticky;
      top:0;
      z-index:100;
      backdrop-filter:blur(18px);
      background:rgba(7,17,28,.78);
      border-bottom:1px solid var(--line);
    }
    .nav{
      min-height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:220px;
    }
    .brand-logo{
      width:172px;
      height:48px;
      object-fit:cover;
      object-position:center;
      border-radius:12px;
      background:#101923;
      box-shadow:0 10px 30px rgba(0,0,0,.22);
    }
    .nav-links{
      display:flex;
      gap:22px;
      align-items:center;
      color:#dce8f7;
      font-size:14px;
      font-weight:650;
    }
    .nav-links a{opacity:.88}
    .nav-links a:hover{opacity:1;color:var(--brand-2)}
    .btn{
      border:0;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:46px;
      padding:13px 20px;
      border-radius:999px;
      font-weight:800;
      letter-spacing:.2px;
      transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
      font-family:inherit;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{
      background:linear-gradient(135deg,var(--brand),var(--brand-3));
      color:#00192a;
      box-shadow:0 16px 36px rgba(20,155,221,.28);
    }
    .btn-ghost{
      background:rgba(255,255,255,.07);
      color:#fff;
      border:1px solid var(--line);
    }
    .btn-dark{
      background:#07111c;
      color:#fff;
      border:1px solid rgba(255,255,255,.14);
    }

    .hero{
      position:relative;
      padding:86px 0 58px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      align-items:center;
      gap:46px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 13px;
      border-radius:999px;
      background:rgba(20,155,221,.12);
      border:1px solid rgba(68,178,240,.28);
      color:#bfeeff;
      font-weight:800;
      font-size:13px;
      margin-bottom:18px;
    }
    h1{
      font-size:clamp(42px,6vw,74px);
      line-height:.98;
      margin:0 0 20px;
      letter-spacing:-2.4px;
    }
    .gradient-text{
      background:linear-gradient(135deg,#fff 0%,#8bdcff 45%,#2eb7ff 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero p{
      color:var(--muted);
      font-size:19px;
      max-width:660px;
      margin:0 0 28px;
    }
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
    .hero-points{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      max-width:720px;
    }
    .hero-point{
      padding:14px;
      border-radius:16px;
      background:rgba(255,255,255,.055);
      border:1px solid var(--line);
      color:#dce8f7;
      font-weight:750;
      font-size:14px;
    }
    .hero-point span{color:var(--success);margin-right:6px}

    .dashboard-card{
      border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(16,31,47,.92),rgba(9,20,33,.94));
      border-radius:32px;
      box-shadow:var(--shadow);
      padding:22px;
      position:relative;
      overflow:hidden;
    }
    .dashboard-card::before{
      content:"";
      position:absolute;
      inset:-80px -80px auto auto;
      width:220px;
      height:220px;
      border-radius:50%;
      background:rgba(0,209,255,.18);
      filter:blur(4px);
    }
    .screen-top{
      position:relative;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:12px 12px 18px;
      border-bottom:1px solid var(--line);
    }
    .dots{display:flex;gap:7px}
    .dot{width:11px;height:11px;border-radius:50%;background:#2b4a66}
    .dot:nth-child(2){background:#167bb4}.dot:nth-child(3){background:#21d4ff}
    .status-pill{
      padding:7px 11px;
      border-radius:999px;
      background:rgba(36,209,139,.13);
      color:#93ffd1;
      font-size:12px;
      font-weight:850;
    }
    .metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0}
    .metric{
      padding:18px;
      border-radius:20px;
      background:rgba(255,255,255,.055);
      border:1px solid var(--line);
    }
    .metric small{display:block;color:var(--muted);font-weight:700;margin-bottom:5px}
    .metric strong{display:block;font-size:26px;letter-spacing:-.5px}
    .chart{
      padding:18px;
      border-radius:20px;
      background:#0a1521;
      border:1px solid var(--line);
    }
    .bar{height:13px;border-radius:999px;background:#17283b;margin:13px 0;overflow:hidden}
    .bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-3))}
    .mini-table{margin-top:18px;display:grid;gap:10px}
    .mini-row{
      display:grid;
      grid-template-columns:1fr auto;
      gap:12px;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.055);
      color:#dce8f7;
      font-size:13px;
      border:1px solid rgba(255,255,255,.08);
    }
    .mini-row b{color:#fff}

    section{padding:72px 0}
    .section-title{text-align:center;margin-bottom:34px}
    .section-title .eyebrow{margin-bottom:12px}
    h2{
      font-size:clamp(30px,4vw,48px);
      line-height:1.05;
      margin:0 0 14px;
      letter-spacing:-1.4px;
    }
    .section-title p{margin:0 auto;max-width:760px;color:var(--muted);font-size:17px}

    .features{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }
    .feature-card{
      padding:22px;
      border-radius:var(--radius-md);
      background:rgba(255,255,255,.055);
      border:1px solid var(--line);
      min-height:210px;
    }
    .icon{
      width:46px;
      height:46px;
      border-radius:15px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,rgba(20,155,221,.24),rgba(0,209,255,.14));
      border:1px solid rgba(68,178,240,.28);
      color:#a9ebff;
      font-size:22px;
      margin-bottom:16px;
    }
    .feature-card h3{margin:0 0 9px;font-size:18px}
    .feature-card p{margin:0;color:var(--muted);font-size:15px}

    .process-wrap{
      border:1px solid var(--line);
      border-radius:30px;
      background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.035));
      padding:28px;
    }
    .steps{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }
    .step{
      padding:22px;
      border-radius:22px;
      background:#0c1826;
      border:1px solid rgba(255,255,255,.1);
      position:relative;
      overflow:hidden;
    }
    .step-number{
      width:38px;height:38px;border-radius:50%;
      display:grid;place-items:center;
      background:linear-gradient(135deg,var(--brand),var(--brand-3));
      color:#00192a;
      font-weight:950;
      margin-bottom:18px;
    }
    .step h3{margin:0 0 8px;font-size:17px}
    .step p{margin:0;color:var(--muted);font-size:14.5px}

    .plans{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
      align-items:stretch;
    }
    .plan{
      position:relative;
      display:flex;
      flex-direction:column;
      min-height:100%;
      border-radius:26px;
      background:#111f2f;
      border:1px solid var(--line);
      padding:24px;
      box-shadow:0 18px 50px rgba(0,0,0,.20);
      overflow:hidden;
    }
    .plan.featured{
      border-color:rgba(0,209,255,.55);
      box-shadow:0 24px 70px rgba(20,155,221,.22);
      transform:translateY(-8px);
    }
    .tag{
      width:max-content;
      padding:7px 11px;
      border-radius:999px;
      color:#dff8ff;
      font-size:12px;
      font-weight:850;
      background:rgba(20,155,221,.14);
      border:1px solid rgba(68,178,240,.28);
      margin-bottom:14px;
    }
    .plan h3{font-size:24px;margin:0 0 8px;color:#55bdfa}
    .plan .for{color:var(--muted);font-size:14.5px;margin:0 0 20px;min-height:66px}
    .price{font-size:34px;font-weight:950;letter-spacing:-1px;margin:0 0 16px}
    .price small{font-size:14px;color:var(--muted);font-weight:800}
    .plan ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:12px}
    .plan li{display:flex;gap:10px;color:#eaf4ff;font-size:14.5px}
    .check{color:var(--success);font-weight:950;flex:0 0 auto}
    .plan .best{
      position:absolute;
      top:17px;
      right:-42px;
      transform:rotate(35deg);
      background:linear-gradient(135deg,var(--brand),var(--brand-3));
      color:#00192a;
      font-weight:950;
      font-size:11px;
      padding:8px 52px;
    }
    .plan .btn{margin-top:auto;width:100%}
    .plan-note{
      margin-top:20px;
      color:var(--muted);
      text-align:center;
      font-size:14px;
    }

    .advantages{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }
    .adv-card{
      border-radius:24px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.055);
      padding:24px;
    }
    .adv-card h3{margin:0 0 12px;font-size:21px;color:#7ed8ff}
    .adv-card p{margin:0;color:var(--muted)}



    .transmission-card{
      border:1px solid var(--line);
      border-radius:32px;
      background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
      padding:28px;
      box-shadow:0 18px 50px rgba(0,0,0,.16);
      overflow:hidden;
    }
    .flow-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:24px;
      align-items:center;
    }
    .flow-image-wrap{
      border-radius:24px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.13);
      background:#fff;
      padding:14px;
      box-shadow:0 20px 60px rgba(0,0,0,.22);
    }
    .flow-image-wrap img{
      width:100%;
      border-radius:16px;
      background:#fff;
    }
    .flow-copy h3{margin:0 0 12px;font-size:28px;color:#7ed8ff;letter-spacing:-.6px}
    .flow-copy p{margin:0 0 16px;color:var(--muted)}
    .flow-points{display:grid;gap:12px;margin-top:18px}
    .flow-point{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px;
      border-radius:18px;
      background:rgba(7,17,28,.48);
      border:1px solid rgba(255,255,255,.08);
    }
    .flow-point strong{display:block;color:#fff;margin-bottom:2px}
    .flow-point span:last-child{color:var(--muted);font-size:14px}
    .quick360-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      margin-top:20px;
    }
    .quick360-card{
      padding:20px;
      border-radius:22px;
      background:rgba(255,255,255,.055);
      border:1px solid var(--line);
    }
    .quick360-card h3{margin:0 0 8px;font-size:18px;color:#9ee6ff}
    .quick360-card p{margin:0;color:var(--muted);font-size:14.5px}
    .contact-actions{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
      margin-top:18px;
    }
    .contact-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:14px 16px;
      border-radius:18px;
      background:rgba(7,17,28,.55);
      border:1px solid rgba(255,255,255,.1);
      color:#dce8f7;
      transition:transform .18s ease,border-color .18s ease,background .18s ease;
    }
    .contact-link:hover{
      transform:translateY(-2px);
      border-color:rgba(0,209,255,.45);
      background:rgba(20,155,221,.12);
    }
    .contact-link b{display:block;color:#fff}
    .contact-link small{color:var(--muted);font-weight:650}
    .contact-link .go{color:#9ee6ff;font-weight:950}

    .contact-grid{
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      gap:24px;
      align-items:start;
    }
    .contact-panel,
    .form-panel{
      border-radius:30px;
      border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.04));
      padding:28px;
      box-shadow:0 18px 50px rgba(0,0,0,.16);
    }
    .contact-list{display:grid;gap:13px;margin-top:22px}
    .contact-item{
      display:flex;gap:12px;align-items:flex-start;
      padding:15px;
      border-radius:18px;
      background:rgba(7,17,28,.45);
      border:1px solid rgba(255,255,255,.08);
      color:#dce8f7;
    }
    .contact-item b{display:block;color:#fff;margin-bottom:2px}
    form{display:grid;gap:16px}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    label{display:block;font-size:13px;color:#dce8f7;font-weight:800;margin-bottom:7px}
    input,select,textarea{
      width:100%;
      min-height:48px;
      border:1px solid rgba(255,255,255,.14);
      background:#0b1624;
      color:#fff;
      border-radius:14px;
      padding:12px 14px;
      font-family:inherit;
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    textarea{min-height:118px;resize:vertical}
    input:focus,select:focus,textarea:focus{
      border-color:rgba(0,209,255,.74);
      box-shadow:0 0 0 4px rgba(0,209,255,.10);
    }
    .form-message{
      display:none;
      padding:13px 15px;
      border-radius:16px;
      background:rgba(36,209,139,.12);
      border:1px solid rgba(36,209,139,.28);
      color:#baffdf;
      font-weight:750;
    }

    .footer{
      padding:36px 0;
      border-top:1px solid var(--line);
      color:var(--muted);
      background:rgba(0,0,0,.14);
    }
    .footer-grid{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
      flex-wrap:wrap;
    }
    .footer b{color:#fff}
    .floating-whatsapp{
      position:fixed;
      right:20px;
      bottom:20px;
      z-index:120;
      width:58px;height:58px;border-radius:50%;
      display:grid;place-items:center;
      background:linear-gradient(135deg,#24d18b,#0bd66b);
      color:#001a0c;
      font-size:25px;
      box-shadow:0 18px 38px rgba(36,209,139,.28);
      border:0;
      cursor:pointer;
      font-weight:950;
    }

    @media (max-width:1080px){
      .plans{grid-template-columns:repeat(2,1fr)}
      .features{grid-template-columns:repeat(2,1fr)}
      .steps{grid-template-columns:repeat(2,1fr)}
      .hero-grid,.contact-grid,.flow-grid{grid-template-columns:1fr}
      .dashboard-card{max-width:660px;margin:auto}
    }
    @media (max-width:760px){
      .nav{min-height:68px}
      .brand-logo{width:150px;height:44px}
      .nav-links{display:none}
      .hero{padding:48px 0 38px}
      h1{letter-spacing:-1.5px}
      .hero p{font-size:16.5px}
      .hero-points{grid-template-columns:1fr}
      section{padding:54px 0}
      .plans,.features,.steps,.advantages,.metric-grid,.form-row,.quick360-grid{grid-template-columns:1fr}
      .plan.featured{transform:none}
      .contact-panel,.form-panel,.process-wrap,.transmission-card{padding:20px;border-radius:24px}
      .floating-whatsapp{width:54px;height:54px;right:14px;bottom:14px}
    }

    /* ===========================
       MODO CLARO / OSCURO
       =========================== */
    body.light-mode{
      --bg:#f4f8fc;
      --bg-soft:#eef6ff;
      --panel:#ffffff;
      --panel-2:#f8fbff;
      --text:#0f172a;
      --muted:#64748b;
      --line:rgba(15,23,42,.12);
      --white:#ffffff;
      --shadow:0 24px 80px rgba(8,35,68,.14);
      background:
        radial-gradient(circle at top left, rgba(20,155,221,.16), transparent 32%),
        radial-gradient(circle at 80% 15%, rgba(0,209,255,.10), transparent 28%),
        linear-gradient(180deg,#f4f8fc 0%,#ffffff 42%,#eef6ff 100%);
    }
    body.light-mode .topbar{
      background:rgba(255,255,255,.86);
      border-bottom:1px solid rgba(15,23,42,.10);
    }
    body.light-mode .nav-links{color:#23364d}
    body.light-mode .nav-links a:hover{color:#0d6efd}
    body.light-mode .hero p,
    body.light-mode .section-title p,
    body.light-mode .feature-card p,
    body.light-mode .step p,
    body.light-mode .adv-card p,
    body.light-mode .flow-copy p,
    body.light-mode .flow-point span:last-child,
    body.light-mode .quick360-card p,
    body.light-mode .contact-panel p,
    body.light-mode .plan-note,
    body.light-mode .footer,
    body.light-mode .contact-link small,
    body.light-mode .contact-item,
    body.light-mode .plan .for{
      color:#64748b !important;
    }
    body.light-mode .dashboard-card,
    body.light-mode .process-wrap,
    body.light-mode .transmission-card,
    body.light-mode .contact-panel,
    body.light-mode .form-panel,
    body.light-mode .feature-card,
    body.light-mode .adv-card,
    body.light-mode .quick360-card{
      background:rgba(255,255,255,.88);
      border-color:rgba(15,23,42,.12);
      box-shadow:0 18px 45px rgba(8,35,68,.10);
    }
    body.light-mode .metric,
    body.light-mode .hero-point,
    body.light-mode .contact-link,
    body.light-mode .contact-item,
    body.light-mode .flow-point{
      background:#f8fbff;
      border-color:rgba(15,23,42,.10);
      color:#23364d;
    }
    body.light-mode .step,
    body.light-mode .plan{
      background:#ffffff;
      border-color:rgba(15,23,42,.12);
      box-shadow:0 18px 45px rgba(8,35,68,.10);
    }
    body.light-mode h1,
    body.light-mode h2,
    body.light-mode h3,
    body.light-mode .metric strong,
    body.light-mode .mini-row b,
    body.light-mode .contact-link b,
    body.light-mode .contact-item b,
    body.light-mode .footer b{
      color:#061b33;
    }
    body.light-mode .gradient-text{
      background:linear-gradient(135deg,#061b33 0%,#0d6efd 50%,#00a9dd 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    body.light-mode .chart,
    body.light-mode .mini-row{
      background:#f1f7ff;
      border-color:rgba(15,23,42,.10);
      color:#23364d;
    }
    body.light-mode input,
    body.light-mode select,
    body.light-mode textarea{
      background:#ffffff;
      color:#0f172a;
      border-color:rgba(15,23,42,.18);
    }
    body.light-mode label{color:#23364d}
    body.light-mode .btn-ghost,
    body.light-mode .btn-dark{
      background:#ffffff;
      color:#061b33;
      border-color:rgba(15,23,42,.14);
    }
    body.light-mode .footer{
      background:#ffffff;
      border-top-color:rgba(15,23,42,.10);
    }
    .theme-toggle{
      min-height:42px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.07);
      color:var(--text);
      font-weight:850;
      font-family:inherit;
      cursor:pointer;
    }
    body.light-mode .theme-toggle{
      background:#ffffff;
      color:#061b33;
      border-color:rgba(15,23,42,.14);
    }


    .footer-brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:260px;
    }
    .footer-logo{
      width:150px;
      height:44px;
      object-fit:cover;
      object-position:center;
      border-radius:12px;
      background:#101923;
      box-shadow:0 10px 30px rgba(0,0,0,.20);
      border:1px solid var(--line);
    }
    .footer-brand-text{
      display:grid;
      gap:2px;
    }
    @media (max-width:760px){
      .footer-brand{
        width:100%;
        justify-content:center;
        text-align:center;
        flex-direction:column;
      }
      .footer-grid{
        justify-content:center;
        text-align:center;
      }
    }


    /* ===========================
       AJUSTE FINAL: MODO CLARO / OSCURO VISIBLE
       =========================== */
    .theme-toggle{
      min-height:44px;
      padding:11px 16px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);
      color:#ffffff;
      font-weight:900;
      font-family:inherit;
      cursor:pointer;
      white-space:nowrap;
      transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    }
    .theme-toggle:hover{
      transform:translateY(-2px);
      background:rgba(255,255,255,.14);
    }

    body.light-mode{
      --bg:#f4f8fc;
      --bg-soft:#eef6ff;
      --panel:#ffffff;
      --panel-2:#f8fbff;
      --text:#102033;
      --muted:#5e7189;
      --line:rgba(15,23,42,.14);
      --shadow:0 24px 70px rgba(8,35,68,.13);
      color:#102033;
      background:
        radial-gradient(circle at top left, rgba(20,155,221,.16), transparent 30%),
        radial-gradient(circle at 80% 15%, rgba(0,209,255,.12), transparent 28%),
        linear-gradient(180deg,#f4f8fc 0%,#ffffff 46%,#edf6ff 100%) !important;
    }

    body.light-mode .topbar{
      background:rgba(255,255,255,.92) !important;
      border-bottom:1px solid rgba(15,23,42,.12) !important;
      box-shadow:0 12px 34px rgba(8,35,68,.08);
    }

    body.light-mode .nav-links,
    body.light-mode .nav-links a{
      color:#102033 !important;
    }

    body.light-mode .theme-toggle{
      background:#061b33 !important;
      color:#ffffff !important;
      border-color:#061b33 !important;
      box-shadow:0 12px 28px rgba(6,27,51,.18);
    }

    body.light-mode .hero{
      background:
        radial-gradient(circle at top left, rgba(20,155,221,.18), transparent 30%),
        radial-gradient(circle at 80% 15%, rgba(0,209,255,.12), transparent 28%),
        linear-gradient(180deg,#ffffff 0%,#f4f8fc 100%) !important;
    }

    body.light-mode h1,
    body.light-mode h2,
    body.light-mode h3,
    body.light-mode .contact-link b,
    body.light-mode .contact-item b,
    body.light-mode .metric strong,
    body.light-mode .footer b,
    body.light-mode label{
      color:#061b33 !important;
    }

    body.light-mode .gradient-text{
      background:linear-gradient(135deg,#061b33 0%,#0d6efd 50%,#00a9dd 100%) !important;
      -webkit-background-clip:text !important;
      background-clip:text !important;
      color:transparent !important;
    }

    body.light-mode p,
    body.light-mode .hero p,
    body.light-mode .section-title p,
    body.light-mode .feature-card p,
    body.light-mode .step p,
    body.light-mode .adv-card p,
    body.light-mode .flow-copy p,
    body.light-mode .quick360-card p,
    body.light-mode .plan .for,
    body.light-mode .plan-note,
    body.light-mode .contact-link small,
    body.light-mode .contact-item,
    body.light-mode .footer,
    body.light-mode .flow-point span:last-child{
      color:#5e7189 !important;
    }

    body.light-mode .dashboard-card,
    body.light-mode .process-wrap,
    body.light-mode .transmission-card,
    body.light-mode .contact-panel,
    body.light-mode .form-panel,
    body.light-mode .feature-card,
    body.light-mode .adv-card,
    body.light-mode .quick360-card,
    body.light-mode .plan,
    body.light-mode .step{
      background:#ffffff !important;
      border-color:rgba(15,23,42,.12) !important;
      box-shadow:0 18px 48px rgba(8,35,68,.10) !important;
    }

    body.light-mode .metric,
    body.light-mode .hero-point,
    body.light-mode .contact-link,
    body.light-mode .contact-item,
    body.light-mode .flow-point,
    body.light-mode .chart,
    body.light-mode .mini-row{
      background:#f8fbff !important;
      border-color:rgba(15,23,42,.12) !important;
      color:#102033 !important;
    }

    body.light-mode .screen-top{
      border-bottom-color:rgba(15,23,42,.12) !important;
    }

    body.light-mode input,
    body.light-mode select,
    body.light-mode textarea{
      background:#ffffff !important;
      color:#102033 !important;
      border-color:rgba(15,23,42,.20) !important;
    }

    body.light-mode input::placeholder,
    body.light-mode textarea::placeholder{
      color:#8a9ab0 !important;
    }

    body.light-mode .btn-ghost,
    body.light-mode .btn-dark{
      background:#ffffff !important;
      color:#061b33 !important;
      border-color:rgba(15,23,42,.18) !important;
      box-shadow:0 12px 28px rgba(8,35,68,.08);
    }

    body.light-mode .btn-primary{
      color:#ffffff !important;
      background:linear-gradient(135deg,#0d6efd,#00a9dd) !important;
      box-shadow:0 16px 36px rgba(13,110,253,.22);
    }

    body.light-mode .footer{
      background:#ffffff !important;
      border-top-color:rgba(15,23,42,.12) !important;
      color:#5e7189 !important;
    }

    body.light-mode .brand-logo,
    body.light-mode .footer-logo{
      background:#ffffff !important;
      border:1px solid rgba(15,23,42,.12);
    }

    body.light-mode .floating-whatsapp{
      box-shadow:0 18px 38px rgba(34,197,94,.32);
    }

    @media (max-width:760px){
      .theme-toggle{
        min-height:40px;
        padding:10px 13px;
        font-size:13px;
      }
    }


/* =========================================================
   QUICK SYSTEM 360 - CORRECCIÓN FINAL MODO CLARO / OSCURO
   Este bloque tiene prioridad sobre reglas anteriores.
   ========================================================= */

:root{
  color-scheme: dark;
}

body{
  transition: background .25s ease, color .25s ease;
}

.theme-toggle{
  min-height:44px;
  padding:11px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#ffffff;
  font-weight:900;
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.theme-toggle:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.14);
}

/* Tema claro */
body.light-mode{
  color-scheme: light;
  --bg:#f4f8fc;
  --bg-soft:#eef6ff;
  --panel:#ffffff;
  --panel-2:#f8fbff;
  --text:#102033;
  --muted:#5e7189;
  --line:rgba(15,23,42,.14);
  --white:#ffffff;
  --shadow:0 24px 70px rgba(8,35,68,.13);
  color:#102033 !important;
  background:
    radial-gradient(circle at top left, rgba(20,155,221,.16), transparent 30%),
    radial-gradient(circle at 80% 15%, rgba(0,209,255,.12), transparent 28%),
    linear-gradient(180deg,#f4f8fc 0%,#ffffff 46%,#edf6ff 100%) !important;
}

body.light-mode .topbar{
  background:rgba(255,255,255,.94) !important;
  border-bottom:1px solid rgba(15,23,42,.12) !important;
  box-shadow:0 12px 34px rgba(8,35,68,.08);
}

body.light-mode .nav-links,
body.light-mode .nav-links a{
  color:#102033 !important;
}

body.light-mode .theme-toggle{
  background:#061b33 !important;
  color:#ffffff !important;
  border-color:#061b33 !important;
  box-shadow:0 12px 28px rgba(6,27,51,.18);
}

body.light-mode .hero{
  background:
    radial-gradient(circle at top left, rgba(20,155,221,.18), transparent 30%),
    radial-gradient(circle at 80% 15%, rgba(0,209,255,.12), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f4f8fc 100%) !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode .metric strong,
body.light-mode .mini-row b,
body.light-mode .contact-link b,
body.light-mode .contact-item b,
body.light-mode .footer b,
body.light-mode label{
  color:#061b33 !important;
}

body.light-mode .gradient-text{
  background:linear-gradient(135deg,#061b33 0%,#0d6efd 50%,#00a9dd 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

body.light-mode p,
body.light-mode .hero p,
body.light-mode .section-title p,
body.light-mode .feature-card p,
body.light-mode .step p,
body.light-mode .adv-card p,
body.light-mode .flow-copy p,
body.light-mode .flow-point span:last-child,
body.light-mode .quick360-card p,
body.light-mode .contact-panel p,
body.light-mode .plan-note,
body.light-mode .footer,
body.light-mode .contact-link small,
body.light-mode .contact-item,
body.light-mode .plan .for{
  color:#5e7189 !important;
}

body.light-mode .dashboard-card,
body.light-mode .process-wrap,
body.light-mode .transmission-card,
body.light-mode .contact-panel,
body.light-mode .form-panel,
body.light-mode .feature-card,
body.light-mode .adv-card,
body.light-mode .quick360-card,
body.light-mode .plan,
body.light-mode .step{
  background:#ffffff !important;
  border-color:rgba(15,23,42,.12) !important;
  box-shadow:0 18px 48px rgba(8,35,68,.10) !important;
}

body.light-mode .metric,
body.light-mode .hero-point,
body.light-mode .contact-link,
body.light-mode .contact-item,
body.light-mode .flow-point,
body.light-mode .chart,
body.light-mode .mini-row{
  background:#f8fbff !important;
  border-color:rgba(15,23,42,.12) !important;
  color:#102033 !important;
}

body.light-mode .screen-top{
  border-bottom-color:rgba(15,23,42,.12) !important;
}

body.light-mode input,
body.light-mode select,
body.light-mode textarea{
  background:#ffffff !important;
  color:#102033 !important;
  border-color:rgba(15,23,42,.20) !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder{
  color:#8a9ab0 !important;
}

body.light-mode .btn-ghost,
body.light-mode .btn-dark{
  background:#ffffff !important;
  color:#061b33 !important;
  border-color:rgba(15,23,42,.18) !important;
  box-shadow:0 12px 28px rgba(8,35,68,.08);
}

body.light-mode .btn-primary{
  color:#ffffff !important;
  background:linear-gradient(135deg,#0d6efd,#00a9dd) !important;
  box-shadow:0 16px 36px rgba(13,110,253,.22);
}

body.light-mode .footer{
  background:#ffffff !important;
  border-top-color:rgba(15,23,42,.12) !important;
  color:#5e7189 !important;
}

body.light-mode .brand-logo,
body.light-mode .footer-logo{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.12);
}

body.light-mode .form-message{
  background:#dcfce7 !important;
  color:#047857 !important;
  border-color:rgba(4,120,87,.25) !important;
}

/* Footer con logo */
.footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:260px;
}
.footer-logo{
  width:150px;
  height:44px;
  object-fit:cover;
  object-position:center;
  border-radius:12px;
  background:#101923;
  box-shadow:0 10px 30px rgba(0,0,0,.20);
  border:1px solid var(--line);
}
.footer-brand-text{
  display:grid;
  gap:2px;
}

@media (max-width:760px){
  .theme-toggle{
    min-height:40px;
    padding:10px 13px;
    font-size:13px;
  }
  .footer-brand{
    width:100%;
    justify-content:center;
    text-align:center;
    flex-direction:column;
  }
  .footer-grid{
    justify-content:center;
    text-align:center;
  }
}


/* =========================================================
   CORRECCIÓN: TEXTO LEGIBLE EN MODO CLARO - PLANES
   ========================================================= */
body.light-mode .plan{
  background:#ffffff !important;
  color:#061b33 !important;
  border-color:rgba(15,23,42,.14) !important;
}

body.light-mode .plan h3,
body.light-mode .plan .price,
body.light-mode .plan .price small{
  color:#061b33 !important;
}

body.light-mode .plan .for,
body.light-mode .plan p{
  color:#334155 !important;
}

body.light-mode .plan ul,
body.light-mode .plan li{
  color:#1e293b !important;
}

body.light-mode .plan li span:not(.check){
  color:#1e293b !important;
}

body.light-mode .check{
  color:#16a34a !important;
}

body.light-mode .tag{
  color:#075985 !important;
  background:#e0f2fe !important;
  border-color:#bae6fd !important;
}

body.light-mode .plan .best{
  color:#ffffff !important;
  background:linear-gradient(135deg,#0d6efd,#00a9dd) !important;
}

body.light-mode .plan .btn{
  color:#ffffff !important;
}

body.light-mode .plan .btn.btn-ghost,
body.light-mode .plan .btn.btn-dark{
  color:#061b33 !important;
  background:#ffffff !important;
  border-color:rgba(15,23,42,.18) !important;
}

/* También mejora contraste de tarjetas generales en modo claro */
body.light-mode .feature-card,
body.light-mode .adv-card,
body.light-mode .quick360-card,
body.light-mode .contact-panel,
body.light-mode .form-panel,
body.light-mode .process-wrap,
body.light-mode .transmission-card{
  color:#061b33 !important;
}

body.light-mode .feature-card p,
body.light-mode .adv-card p,
body.light-mode .quick360-card p,
body.light-mode .contact-panel p,
body.light-mode .form-panel p,
body.light-mode .step p{
  color:#334155 !important;
}

body.light-mode .hero-point{
  color:#1e293b !important;
}

body.light-mode .mini-row,
body.light-mode .mini-row b{
  color:#1e293b !important;
}



/* =========================================================
   CORRECCIÓN V2: CONTRASTE FUERTE EN MODO CLARO
   Etiquetas superiores, badges, estado DTE y textos pequeños
   ========================================================= */

body.light-mode .eyebrow{
  color:#075985 !important;
  background:#e0f2fe !important;
  border:1px solid #38bdf8 !important;
  box-shadow:0 8px 22px rgba(14,165,233,.14) !important;
  font-weight:900 !important;
}

body.light-mode .eyebrow,
body.light-mode .eyebrow span,
body.light-mode .eyebrow b,
body.light-mode .eyebrow strong{
  color:#075985 !important;
}

body.light-mode .status-pill{
  color:#047857 !important;
  background:#dcfce7 !important;
  border:1px solid #22c55e !important;
  font-weight:950 !important;
  box-shadow:0 8px 22px rgba(34,197,94,.16) !important;
}

body.light-mode .tag{
  color:#075985 !important;
  background:#e0f2fe !important;
  border:1px solid #38bdf8 !important;
  font-weight:950 !important;
}

body.light-mode .plan .best{
  color:#ffffff !important;
  background:linear-gradient(135deg,#0d6efd,#00a9dd) !important;
  font-weight:950 !important;
}

body.light-mode .hero-point,
body.light-mode .metric,
body.light-mode .mini-row,
body.light-mode .contact-link,
body.light-mode .contact-item,
body.light-mode .flow-point{
  color:#102033 !important;
}

body.light-mode .hero-point span,
body.light-mode .check{
  color:#16a34a !important;
  font-weight:950 !important;
}

body.light-mode .metric small,
body.light-mode .chart small,
body.light-mode .mini-row span,
body.light-mode .contact-link small{
  color:#475569 !important;
}

body.light-mode .chart{
  background:#f8fbff !important;
}

body.light-mode .bar{
  background:#17283b !important;
}

body.light-mode .btn-ghost{
  color:#061b33 !important;
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.18) !important;
  font-weight:900 !important;
}

body.light-mode .btn-dark{
  color:#061b33 !important;
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.18) !important;
  font-weight:900 !important;
}

body.light-mode .hero .btn-primary{
  color:#ffffff !important;
  font-weight:950 !important;
}

body.light-mode .dashboard-card{
  background:#ffffff !important;
}

body.light-mode .screen-top .dot{
  background:#1e3a5f !important;
}

body.light-mode .screen-top .dot:nth-child(2){
  background:#0d6efd !important;
}

body.light-mode .screen-top .dot:nth-child(3){
  background:#0dcaf0 !important;
}

/* Mejora general de lectura en modo claro */
body.light-mode{
  text-rendering:optimizeLegibility;
}



/* =========================================================
   CORRECCIÓN V3: TEXTO LEGIBLE EN FLUJO DE TRANSMISIÓN
   Modo claro: títulos de pasos, checks y descripciones.
   ========================================================= */

body.light-mode .transmission-card,
body.light-mode .flow-grid,
body.light-mode .flow-copy{
  color:#061b33 !important;
}

body.light-mode .flow-copy h3,
body.light-mode .flow-copy h2,
body.light-mode .flow-copy strong,
body.light-mode .flow-copy b{
  color:#061b33 !important;
}

body.light-mode .flow-copy p{
  color:#334155 !important;
}

body.light-mode .flow-points{
  color:#061b33 !important;
}

body.light-mode .flow-point{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.14) !important;
  color:#061b33 !important;
  box-shadow:0 14px 32px rgba(8,35,68,.08) !important;
}

body.light-mode .flow-point strong{
  color:#061b33 !important;
  font-weight:950 !important;
}

body.light-mode .flow-point b{
  color:#061b33 !important;
  font-weight:950 !important;
}

body.light-mode .flow-point span{
  color:#061b33 !important;
}

body.light-mode .flow-point span:first-child{
  color:#16a34a !important;
  font-weight:950 !important;
}

body.light-mode .flow-point span:last-child{
  color:#334155 !important;
}

body.light-mode .flow-point p,
body.light-mode .flow-point small{
  color:#334155 !important;
}

/* Por si el título del paso está dentro de cualquier etiqueta */
body.light-mode .flow-point *{
  text-shadow:none !important;
}

body.light-mode .flow-point .check,
body.light-mode .flow-point .icon,
body.light-mode .flow-point .go{
  color:#16a34a !important;
}

/* Mejora de contraste en cajas similares del proceso */
body.light-mode .step h3,
body.light-mode .step strong,
body.light-mode .step b{
  color:#061b33 !important;
}

body.light-mode .step p,
body.light-mode .step span{
  color:#334155 !important;
}

body.light-mode .step-number{
  color:#ffffff !important;
  background:linear-gradient(135deg,#0d6efd,#00a9dd) !important;
}



/* =========================================================
   SECCIÓN DASHBOARD FACTURACIÓN ELECTRÓNICA
   ========================================================= */
.dashboard-showcase-section{
  padding-top:72px;
}

.dashboard-showcase-card{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:26px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:32px;
  padding:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  overflow:hidden;
}

.dashboard-showcase-copy h3{
  margin:0 0 12px;
  font-size:28px;
  color:#7ed8ff;
  letter-spacing:-.6px;
}

.dashboard-showcase-copy p{
  margin:0 0 18px;
  color:var(--muted);
}

.dashboard-benefits{
  display:grid;
  gap:12px;
}

.dashboard-benefits div{
  display:flex;
  gap:10px;
  align-items:center;
  padding:13px 14px;
  border-radius:16px;
  background:rgba(7,17,28,.48);
  border:1px solid rgba(255,255,255,.09);
  color:#dce8f7;
  font-weight:800;
}

.dashboard-benefits span{
  color:var(--success);
  font-weight:950;
}

.dashboard-showcase-image{
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  background:#07111c;
  padding:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
}

.dashboard-showcase-image img{
  width:100%;
  border-radius:18px;
}

/* Modo claro para dashboard */
body.light-mode .dashboard-showcase-card{
  background:#ffffff !important;
  border-color:rgba(15,23,42,.12) !important;
  box-shadow:0 18px 48px rgba(8,35,68,.10) !important;
}

body.light-mode .dashboard-showcase-copy h3{
  color:#061b33 !important;
}

body.light-mode .dashboard-showcase-copy p{
  color:#334155 !important;
}

body.light-mode .dashboard-benefits div{
  background:#f8fbff !important;
  border-color:rgba(15,23,42,.12) !important;
  color:#102033 !important;
}

body.light-mode .dashboard-benefits span{
  color:#16a34a !important;
}

body.light-mode .dashboard-showcase-image{
  background:#f8fbff !important;
  border-color:rgba(15,23,42,.12) !important;
}

@media (max-width:1080px){
  .dashboard-showcase-card{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .dashboard-showcase-card{
    padding:18px;
    border-radius:24px;
  }

  .dashboard-showcase-copy h3{
    font-size:23px;
  }
}


/* =========================================================
   RESPONSIVE FINAL - QUICKSYSTEM360
   Ajuste para celular, tablet y escritorio
   ========================================================= */
html, body{max-width:100%;overflow-x:hidden;}
img, video, iframe{max-width:100%;height:auto;}
.container{width:min(var(--max), calc(100% - 32px));}

.menu-toggle{
  display:none;min-height:42px;width:46px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.08);
  color:var(--text);font-size:22px;font-weight:900;cursor:pointer;
}
body.light-mode .menu-toggle{background:#fff!important;color:#061b33!important;border-color:rgba(15,23,42,.16)!important;}

.dashboard-card,.transmission-card,.process-wrap,.contact-panel,.form-panel,.dashboard-showcase-card,.plan,.feature-card,.adv-card,.quick360-card{max-width:100%;}
input,select,textarea,button{max-width:100%;}
textarea{min-width:0;}

@media (max-width:1100px){
  .hero-grid,.contact-grid,.flow-grid,.quick-grid,.screen-grid,.dashboard-showcase-card{grid-template-columns:1fr!important;}
  .plans,.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .features,.cards,.options-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .hero{padding-top:60px!important;}
  .dashboard-card,.preview-card{margin-top:18px;}
  .flow-image,.dashboard-showcase-image{order:2;}
  .flow-copy,.dashboard-showcase-copy{order:1;}
}

@media (max-width:860px){
  .topbar{position:sticky;}
  .nav{min-height:auto!important;padding:12px 0;display:grid!important;grid-template-columns:1fr auto auto;align-items:center;gap:10px;}
  .brand{min-width:0!important;}
  .brand-logo{width:150px!important;height:44px!important;object-fit:cover;}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .nav-links{display:none!important;grid-column:1/-1;width:100%;padding:12px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid var(--line);flex-direction:column;align-items:stretch;gap:6px;}
  .nav-links.is-open{display:flex!important;}
  .nav-links a{display:block;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);}
  body.light-mode .nav-links{background:#fff!important;border-color:rgba(15,23,42,.12)!important;box-shadow:0 16px 40px rgba(8,35,68,.10);}
  body.light-mode .nav-links a{background:#f8fbff!important;color:#061b33!important;}
  .theme-toggle{min-height:42px!important;padding:10px 12px!important;font-size:13px!important;}
  .nav>.btn,.nav .btn-primary{display:none!important;}
  h1{font-size:clamp(38px,11vw,58px)!important;line-height:1.03!important;letter-spacing:-1.5px!important;}
  h2{font-size:clamp(28px,8vw,42px)!important;}
  .hero p{font-size:17px!important;}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;}
  .hero-actions .btn{width:100%;}
  .hero-points{grid-template-columns:1fr!important;}
  section{padding:54px 0!important;}
  .section-title{text-align:left!important;margin-bottom:24px!important;}
  .section-title .eyebrow{margin-left:0;}
}

@media (max-width:640px){
  .container{width:calc(100% - 24px)!important;}
  .brand-logo{width:138px!important;height:42px!important;}
  .theme-toggle{width:auto!important;white-space:nowrap;}
  .hero{padding:42px 0 32px!important;}
  h1{font-size:40px!important;}
  .hero p,p{font-size:16px!important;}
  .plans,.plan-grid,.features,.cards,.options-grid,.form-row,.mini-stats,.hero-points,.dashboard-benefits{grid-template-columns:1fr!important;}
  .plan,.feature-card,.adv-card,.contact-panel,.form-panel,.transmission-card,.process-wrap,.dashboard-showcase-card,.quick360-card,.dashboard-card,.preview-card{border-radius:22px!important;padding:18px!important;}
  .dashboard-showcase-image,.flow-image,.screen-card,.plans-image{border-radius:20px!important;padding:10px!important;}
  .metric,.mini-row,.contact-link,.flow-point,.step{border-radius:16px!important;}
  .price{font-size:32px!important;}
  label{font-size:14px!important;}
  input,select,textarea{min-height:52px!important;font-size:16px!important;border-radius:15px!important;}
  textarea{min-height:130px!important;}
  .form-row .btn,form .btn,.btn{width:100%;}
  .contact-actions{gap:10px!important;}
  .contact-link{align-items:flex-start!important;}
  .contact-link .go{margin-top:2px;}
  .footer-grid{display:grid!important;grid-template-columns:1fr!important;text-align:center!important;gap:18px!important;}
  .footer-brand{justify-content:center!important;flex-direction:column!important;text-align:center!important;}
  .floating-whatsapp{width:54px!important;height:54px!important;right:14px!important;bottom:14px!important;}
}

@media (max-width:420px){
  .container{width:calc(100% - 18px)!important;}
  .nav{gap:8px!important;}
  .brand-logo{width:124px!important;height:38px!important;}
  .menu-toggle{width:42px!important;min-height:40px!important;}
  .theme-toggle{padding:9px 10px!important;font-size:12px!important;}
  h1{font-size:34px!important;}
  h2{font-size:27px!important;}
  .eyebrow{font-size:12px!important;padding:8px 11px!important;}
  .dashboard-showcase-copy h3,.quick360-card h3,.flow-copy h3{font-size:22px!important;}
}


/* =========================================================
   RESPONSIVE MOBILE FIX - QUICK SYSTEM 360
   Corrige header, hero y desbordes en celular.
   ========================================================= */
html,
body{
  max-width:100%;
  overflow-x:hidden !important;
}

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

img, video, iframe{
  max-width:100%;
  height:auto;
}

.menu-toggle{
  display:none;
  width:42px;
  min-width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.10);
  color:var(--text);
  font-size:20px;
  font-weight:900;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}

body.light-mode .menu-toggle{
  background:#ffffff !important;
  color:#061b33 !important;
  border-color:rgba(15,23,42,.16) !important;
}

@media (max-width:1024px){
  .hero-grid,
  .contact-grid,
  .flow-grid,
  .quick-grid,
  .dashboard-showcase-card,
  .screen-grid{
    grid-template-columns:1fr !important;
  }

  .plans,
  .plan-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .features,
  .cards,
  .options-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:768px){
  .container{
    width:calc(100% - 32px) !important;
    max-width:100% !important;
  }

  .topbar{
    width:100%;
    overflow:visible !important;
  }

  .nav{
    display:grid !important;
    grid-template-columns:1fr 42px auto !important;
    align-items:center !important;
    justify-content:initial !important;
    gap:9px !important;
    min-height:64px !important;
    padding:10px 0 !important;
    width:100% !important;
  }

  .brand{
    min-width:0 !important;
    width:auto !important;
  }

  .brand-logo{
    width:138px !important;
    max-width:138px !important;
    height:40px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  .menu-toggle{
    display:inline-flex !important;
  }

  .theme-toggle{
    min-height:40px !important;
    height:40px !important;
    padding:8px 11px !important;
    font-size:12.5px !important;
    white-space:nowrap !important;
    width:auto !important;
    justify-self:end !important;
  }

  /* En móvil se oculta Solicitar demo del header para evitar corte lateral */
  .nav > .btn,
  .nav > .btn-primary,
  .nav a.btn{
    display:none !important;
  }

  .nav-links{
    grid-column:1 / -1 !important;
    display:none !important;
    width:100% !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    padding:12px !important;
    margin-top:4px !important;
    border-radius:18px !important;
    background:rgba(7,17,28,.96) !important;
    border:1px solid var(--line) !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
  }

  .nav-links.is-open{
    display:flex !important;
  }

  .nav-links a{
    display:block !important;
    padding:12px 14px !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.06) !important;
  }

  body.light-mode .nav-links{
    background:#ffffff !important;
    border-color:rgba(15,23,42,.12) !important;
    box-shadow:0 18px 45px rgba(8,35,68,.13) !important;
  }

  body.light-mode .nav-links a{
    background:#f8fbff !important;
    color:#061b33 !important;
  }

  .hero{
    padding:42px 0 34px !important;
  }

  .hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:26px !important;
  }

  h1{
    font-size:clamp(34px,10vw,48px) !important;
    line-height:1.05 !important;
    letter-spacing:-1.2px !important;
    margin-bottom:18px !important;
  }

  h2{
    font-size:clamp(27px,8vw,38px) !important;
    line-height:1.08 !important;
  }

  .hero p,
  p{
    font-size:16px !important;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    width:100% !important;
  }

  .hero-actions .btn,
  .btn{
    width:100%;
    max-width:100%;
  }

  .hero-points,
  .plans,
  .plan-grid,
  .features,
  .cards,
  .options-grid,
  .form-row,
  .mini-stats,
  .dashboard-benefits{
    grid-template-columns:1fr !important;
  }

  .dashboard-card,
  .preview-card,
  .plan,
  .feature-card,
  .adv-card,
  .contact-panel,
  .form-panel,
  .transmission-card,
  .process-wrap,
  .dashboard-showcase-card,
  .quick360-card{
    width:100% !important;
    max-width:100% !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  input,
  select,
  textarea{
    width:100% !important;
    min-width:0 !important;
    font-size:16px !important;
  }

  .footer-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    text-align:center !important;
    gap:18px !important;
  }

  .footer-brand{
    justify-content:center !important;
    flex-direction:column !important;
    text-align:center !important;
  }
}

@media (max-width:430px){
  .container{
    width:calc(100% - 24px) !important;
  }

  .nav{
    grid-template-columns:1fr 40px auto !important;
    gap:7px !important;
  }

  .brand-logo{
    width:124px !important;
    max-width:124px !important;
    height:38px !important;
  }

  .menu-toggle{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
  }

  .theme-toggle{
    height:40px !important;
    min-height:40px !important;
    padding:7px 9px !important;
    font-size:12px !important;
  }

  h1{
    font-size:33px !important;
  }

  .eyebrow{
    max-width:100% !important;
    font-size:12px !important;
    padding:8px 11px !important;
  }
}


/* =========================================================
   FIX DEFINITIVO RESPONSIVE CELULAR
   Header: logo + menú + modo claro.
   Solicitar demo se mueve dentro del menú hamburguesa.
   ========================================================= */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

*{
  box-sizing:border-box;
}

.mobile-demo-link{
  display:none;
}

.menu-toggle{
  display:none;
  width:42px;
  min-width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  color:var(--text);
  font-size:21px;
  font-weight:950;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}

body.light-mode .menu-toggle{
  background:#ffffff !important;
  color:#061b33 !important;
  border-color:rgba(15,23,42,.16) !important;
}

/* TABLET */
@media (max-width: 1024px){
  .hero-grid,
  .contact-grid,
  .flow-grid,
  .quick-grid,
  .screen-grid,
  .dashboard-showcase-card{
    grid-template-columns:1fr !important;
  }

  .plans,
  .plan-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* CELULAR */
@media (max-width: 768px){

  .container{
    width:calc(100% - 28px) !important;
    max-width:100% !important;
  }

  .topbar{
    width:100% !important;
    overflow:visible !important;
  }

  .nav{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 44px auto !important;
    align-items:center !important;
    justify-content:normal !important;
    gap:8px !important;
    min-height:64px !important;
    padding:10px 0 !important;
    width:100% !important;
  }

  .brand{
    min-width:0 !important;
    width:auto !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .brand-logo{
    width:142px !important;
    max-width:142px !important;
    height:42px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  .menu-toggle{
    display:inline-flex !important;
    grid-column:auto !important;
    justify-self:center !important;
  }

  .theme-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:118px !important;
    min-width:0 !important;
    height:42px !important;
    min-height:42px !important;
    padding:8px 10px !important;
    font-size:12px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    justify-self:end !important;
  }

  /* El botón demo de escritorio NO se muestra en el header móvil */
  .desktop-demo-btn,
  .nav > a.btn,
  .nav > .btn-primary:not(.mobile-demo-link){
    display:none !important;
  }

  .nav-links{
    display:none !important;
    grid-column:1 / -1 !important;
    width:100% !important;
    margin-top:8px !important;
    padding:12px !important;
    border-radius:18px !important;
    background:rgba(7,17,28,.98) !important;
    border:1px solid var(--line) !important;
    box-shadow:0 18px 45px rgba(0,0,0,.26) !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
  }

  .nav-links.is-open{
    display:flex !important;
  }

  .nav-links a,
  .mobile-demo-link{
    display:block !important;
    width:100% !important;
    padding:13px 15px !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.06) !important;
    color:var(--text) !important;
    font-weight:900 !important;
    text-align:left !important;
  }

  .mobile-demo-link{
    margin-top:4px !important;
    text-align:center !important;
    background:linear-gradient(135deg,var(--brand),var(--brand3)) !important;
    color:#00192a !important;
  }

  body.light-mode .nav-links{
    background:#ffffff !important;
    border-color:rgba(15,23,42,.12) !important;
    box-shadow:0 18px 45px rgba(8,35,68,.12) !important;
  }

  body.light-mode .nav-links a{
    background:#f8fbff !important;
    color:#061b33 !important;
  }

  body.light-mode .mobile-demo-link{
    background:linear-gradient(135deg,#0d6efd,#00a9dd) !important;
    color:#ffffff !important;
  }

  .hero{
    padding:42px 0 34px !important;
  }

  .hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  h1{
    font-size:clamp(33px,10vw,46px) !important;
    line-height:1.05 !important;
    letter-spacing:-1.2px !important;
  }

  h2{
    font-size:clamp(27px,8vw,38px) !important;
    line-height:1.08 !important;
  }

  .hero p,
  p{
    font-size:16px !important;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    width:100% !important;
  }

  .hero-actions .btn,
  .btn{
    width:100% !important;
    max-width:100% !important;
  }

  .hero-points,
  .plans,
  .plan-grid,
  .features,
  .cards,
  .options-grid,
  .form-row,
  .mini-stats,
  .dashboard-benefits{
    grid-template-columns:1fr !important;
  }

  .dashboard-card,
  .preview-card,
  .plan,
  .feature-card,
  .adv-card,
  .contact-panel,
  .form-panel,
  .transmission-card,
  .process-wrap,
  .dashboard-showcase-card,
  .quick360-card{
    width:100% !important;
    max-width:100% !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  input,
  select,
  textarea{
    width:100% !important;
    min-width:0 !important;
    font-size:16px !important;
  }

  .footer-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    text-align:center !important;
    gap:18px !important;
  }

  .footer-brand{
    justify-content:center !important;
    flex-direction:column !important;
    text-align:center !important;
  }
}

/* CELULAR PEQUEÑO */
@media (max-width: 430px){
  .container{
    width:calc(100% - 22px) !important;
  }

  .nav{
    grid-template-columns:minmax(0,1fr) 40px auto !important;
    gap:7px !important;
  }

  .brand-logo{
    width:126px !important;
    max-width:126px !important;
    height:38px !important;
  }

  .menu-toggle{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
  }

  .theme-toggle{
    height:40px !important;
    min-height:40px !important;
    max-width:104px !important;
    padding:7px 8px !important;
    font-size:11px !important;
  }

  h1{
    font-size:32px !important;
  }

  .eyebrow{
    font-size:12px !important;
    padding:8px 11px !important;
    max-width:100% !important;
  }
}


/* =========================================================
   AJUSTE PUNTUAL: REUBICAR SOLICITAR DEMO EN RESPONSIVE
   ========================================================= */

/* En escritorio grande, se mantiene el botón grande */
.responsive-demo-link{
  display:none !important;
}

/* Cuando el header empieza a quedarse sin espacio, ocultamos el botón grande */
@media (max-width: 1280px){
  .desktop-demo-btn{
    display:none !important;
  }

  .responsive-demo-link{
    display:inline-flex !important;
  }
}

/* En modo móvil/hamburguesa, el demo queda dentro del menú */
@media (max-width: 768px){
  .desktop-demo-btn{
    display:none !important;
  }

  .responsive-demo-link{
    display:block !important;
    width:100% !important;
    margin-top:4px !important;
    padding:13px 15px !important;
    border-radius:14px !important;
    text-align:center !important;
    font-weight:950 !important;
    background:linear-gradient(135deg,var(--brand),var(--brand3)) !important;
    color:#00192a !important;
  }

  body.light-mode .responsive-demo-link{
    color:#ffffff !important;
    background:linear-gradient(135deg,#0d6efd,#00a9dd) !important;
  }
}

/* En pantallas muy estrechas, aseguramos que no aparezca cortado */
@media (max-width: 480px){
  .desktop-demo-btn{
    display:none !important;
  }
}

/* =========================================================
   BOTONES DE PAGO WOMPI POR PLAN
   ========================================================= */
.wompi-plan-actions{
  display:grid;
  gap:8px;
  margin-top:14px;
}
.wompi_button_widget{
  width:100%;
}
.wompi_button_widget a,
.btn-wompi-pay{
  width:100%;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:13px 18px;
  font-weight:950;
  letter-spacing:.2px;
  color:#061b33 !important;
  background:linear-gradient(135deg,#20e3b2,#0dcaf0) !important;
  box-shadow:0 16px 34px rgba(13,202,240,.24);
  border:1px solid rgba(255,255,255,.18);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.wompi_button_widget a:hover,
.btn-wompi-pay:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 42px rgba(13,202,240,.32);
  filter:saturate(1.08);
}
.wompi-plan-actions small{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  text-align:center;
}
.wompi-general-note{
  margin:24px auto 8px;
  max-width:850px;
  text-align:center;
  color:#cdeaff;
  background:rgba(13,202,240,.08);
  border:1px solid rgba(13,202,240,.20);
  padding:13px 16px;
  border-radius:18px;
  font-weight:800;
}
body.light-mode .wompi-general-note{
  color:#075985 !important;
  background:#e0f2fe !important;
  border-color:#38bdf8 !important;
}
body.light-mode .wompi_button_widget a,
body.light-mode .btn-wompi-pay{
  color:#ffffff !important;
  background:linear-gradient(135deg,#0d6efd,#00a9dd) !important;
}
body.light-mode .wompi-plan-actions small{
  color:#475569 !important;
}
@media (max-width:768px){
  .wompi-plan-actions{margin-top:12px;}
  .wompi_button_widget a,
  .btn-wompi-pay{
    min-height:52px;
    font-size:16px;
  }
}


/* =========================================================
   BOTÓN WOMPI VISIBLE - NO DEPENDE DE JS
   ========================================================= */
.wompi-plan-actions{
  display:grid !important;
  gap:9px !important;
  margin-top:14px !important;
  width:100% !important;
}

.btn-wompi-pay{
  width:100% !important;
  min-height:50px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  border-radius:999px !important;
  padding:14px 18px !important;
  font-weight:950 !important;
  letter-spacing:.2px !important;
  color:#061b33 !important;
  background:linear-gradient(135deg,#20e3b2,#0dcaf0) !important;
  box-shadow:0 16px 34px rgba(13,202,240,.26) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  text-decoration:none !important;
  text-align:center !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.btn-wompi-pay:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 20px 42px rgba(13,202,240,.35) !important;
  filter:saturate(1.08) !important;
}

.wompi-plan-actions small{
  display:block !important;
  color:var(--muted) !important;
  font-size:12px !important;
  line-height:1.35 !important;
  text-align:center !important;
}

.wompi-general-note{
  margin:24px auto 8px !important;
  max-width:850px !important;
  text-align:center !important;
  color:#cdeaff !important;
  background:rgba(13,202,240,.08) !important;
  border:1px solid rgba(13,202,240,.20) !important;
  padding:13px 16px !important;
  border-radius:18px !important;
  font-weight:800 !important;
}

body.light-mode .btn-wompi-pay{
  color:#ffffff !important;
  background:linear-gradient(135deg,#0d6efd,#00a9dd) !important;
}

body.light-mode .wompi-plan-actions small{
  color:#475569 !important;
}

body.light-mode .wompi-general-note{
  color:#075985 !important;
  background:#e0f2fe !important;
  border-color:#38bdf8 !important;
}

@media (max-width:768px){
  .btn-wompi-pay{
    min-height:52px !important;
    font-size:16px !important;
  }
}