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

    :root {
      --azul:        #0a0a0a;
      --azul-mid:    #1f1f1f;
      --azul-claro:  #f0a500;
      --naranja:     #f0a500;
      --naranja-dark:#c8880a;
      --verde:       #25D366;
      --blanco:      #ffffff;
      --gris-bg:     #111111;
      --gris-texto:  #9a9a9a;
      --texto:       #e6e6e6;
      --borde:       #262626;
      --tarjeta:     #141414;
      --radio:       10px;
    }

    html { scroll-behavior: smooth; }
    body { font-family: 'Inter', sans-serif; color: var(--texto); background: var(--azul); line-height: 1.6; }

    /* ── NAV ── */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: var(--azul);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 5vw; height: 64px;
      box-shadow: 0 2px 16px rgba(0,0,0,.25);
    }
    .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .nav-logo-badge {
      background: #141414; border-radius: 8px; padding: 4px 10px;
      border: 1.5px solid var(--naranja);
      font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; line-height: 1;
    }
    .nav-logo-badge .e { color: #ffffff; }
    .nav-logo-badge .seven { color: var(--naranja); }
    .nav-tagline { font-size: 13px; color: #9a9a9a; display: none; }
    @media(min-width:600px){ .nav-tagline { display: block; } }
    .nav-ctas { display: flex; gap: 10px; }
    .btn-call {
      display: flex; align-items: center; gap: 6px;
      background: transparent; border: 1.5px solid var(--azul-claro);
      color: var(--azul-claro); border-radius: 6px;
      padding: 7px 14px; font-size: 13px; font-weight: 600;
      text-decoration: none; white-space: nowrap;
      transition: background .2s, color .2s;
    }
    .btn-call:hover { background: var(--azul-claro); color: var(--azul); }
    .btn-wa {
      display: flex; align-items: center; gap: 6px;
      background: var(--verde); border: none;
      color: var(--blanco); border-radius: 6px;
      padding: 7px 14px; font-size: 13px; font-weight: 600;
      text-decoration: none; white-space: nowrap;
      transition: opacity .2s;
    }
    .btn-wa:hover { opacity: .88; }

    /* ── HERO ── */
    .hero {
      background: var(--azul);
      padding: 72px 5vw 80px;
      text-align: center;
      position: relative; overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute; top:0; left:0; right:0; bottom:0;
      background: radial-gradient(ellipse 70% 60% at 50% 0%, #241a0899, transparent);
      pointer-events: none;
    }
    .hero-diag {
      position: absolute; width: 240px; height: 240px; opacity: .5; pointer-events: none;
      background-image: repeating-linear-gradient(-45deg, #241a08 0px, #241a08 2px, transparent 2px, transparent 14px);
    }
    .hero-diag.hl { top: 0; left: 0; }
    .hero-diag.hr { top: 0; right: 0; }
    .hero-glow {
      position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
    }
    .hero-glow.g1 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(255,106,0,0.35), transparent 70%); top: -80px; right: 8%; }
    .hero-glow.g2 { width: 260px; height: 260px; background: radial-gradient(circle, rgba(51,153,204,0.30), transparent 70%); bottom: -60px; left: 6%; }
    .hero-network {
      position: absolute; inset: 0; pointer-events: none; opacity: .18;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23f0a500' stroke-width='1'%3E%3Cline x1='20' y1='40' x2='120' y2='90'/%3E%3Cline x1='120' y1='90' x2='210' y2='40'/%3E%3Cline x1='120' y1='90' x2='140' y2='190'/%3E%3Cline x1='140' y1='190' x2='230' y2='230'/%3E%3Cline x1='140' y1='190' x2='60' y2='240'/%3E%3Cline x1='210' y1='40' x2='270' y2='120'/%3E%3C/g%3E%3Cg fill='%23f0a500'%3E%3Ccircle cx='20' cy='40' r='4'/%3E%3Ccircle cx='120' cy='90' r='5'/%3E%3Ccircle cx='210' cy='40' r='4'/%3E%3Ccircle cx='140' cy='190' r='5'/%3E%3Ccircle cx='230' cy='230' r='4'/%3E%3Ccircle cx='60' cy='240' r='4'/%3E%3Ccircle cx='270' cy='120' r='4'/%3E%3C/g%3E%3C/svg%3E");
      background-repeat: repeat;
    }
    .hero-badge {
      display: inline-block;
      background: rgba(240,165,0,.15); border: 1px solid var(--naranja);
      color: var(--naranja); border-radius: 100px;
      padding: 6px 18px; font-size: 13px; font-weight: 600; letter-spacing: .5px;
      margin-bottom: 28px;
    }
    .hero h1 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(28px, 5vw, 52px); font-weight: 700; line-height: 1.15;
      color: var(--blanco); max-width: 800px; margin: 0 auto 20px;
    }
    .hero h1 em { font-style: normal; color: var(--naranja); }
    .hero-sub {
      font-size: clamp(15px, 2vw, 18px); color: #9a9a9a;
      max-width: 580px; margin: 0 auto 36px;
    }
    .hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .btn-primary {
      background: var(--naranja); color: var(--azul);
      border: none; border-radius: var(--radio);
      padding: 14px 28px; font-size: 16px; font-weight: 700;
      text-decoration: none; transition: background .2s, transform .15s;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-primary:hover { background: var(--naranja-dark); transform: translateY(-1px); }
    .btn-secondary {
      background: transparent; color: var(--blanco);
      border: 1.5px solid rgba(255,255,255,.3); border-radius: var(--radio);
      padding: 14px 28px; font-size: 16px; font-weight: 600;
      text-decoration: none; transition: border-color .2s, background .2s;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-secondary:hover { border-color: var(--blanco); background: rgba(255,255,255,.05); }
    .hero-checks {
      display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
      margin-top: 40px;
    }
    .hero-check { display: flex; align-items: center; gap: 7px; color: #9a9a9a; font-size: 14px; }
    .hero-check span { color: var(--verde); font-size: 16px; }

    /* ── STATS ── */
    .stats {
      background: var(--naranja);
      padding: 28px 5vw;
      display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
    }
    .stat { text-align: center; }
    .stat-num { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; color: var(--azul); }
    .stat-label { font-size: 13px; color: var(--azul); opacity: .75; font-weight: 500; }

    /* ── SECTIONS ── */
    section { padding: 72px 5vw; }
    .section-inner { max-width: 1100px; margin: 0 auto; }
    .eyebrow {
      font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--naranja); margin-bottom: 10px;
    }
    h2 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(22px, 3.5vw, 36px); font-weight: 700; line-height: 1.2;
      margin-bottom: 16px; color: var(--blanco);
    }
    h2 em { font-style: normal; color: var(--azul-claro); }
    .section-desc { font-size: 17px; color: var(--gris-texto); max-width: 600px; margin-bottom: 48px; }

    /* ── SERVICIOS ── */
    .servicios-bg { background: var(--gris-bg); }
    .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
    .card {
      background: var(--tarjeta); border: 1px solid var(--borde);
      border-radius: 14px; padding: 32px 28px;
      transition: box-shadow .2s, transform .2s;
    }
    .card:hover { box-shadow: 0 8px 32px rgba(240,165,0,.12); transform: translateY(-2px); }
    .card-icon { font-size: 32px; margin-bottom: 16px; }
    .card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--blanco); }
    .card p { font-size: 15px; color: var(--gris-texto); line-height: 1.6; margin-bottom: 16px; }
    .card-checks { list-style: none; }
    .card-checks li {
      font-size: 14px; color: var(--gris-texto); padding: 4px 0;
      display: flex; align-items: flex-start; gap: 8px;
    }
    .card-checks li::before { content: '✔'; color: var(--verde); font-size: 13px; margin-top: 2px; flex-shrink: 0; }
    .card-price {
      margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borde);
      font-size: 13px; color: var(--gris-texto);
    }
    .card-price strong { font-size: 22px; color: var(--naranja); font-weight: 700; }
    .card.featured {
      border-color: var(--naranja); background: linear-gradient(135deg, #1c1608, #141414);
      position: relative;
    }
    .card.featured::before {
      content: 'MÁS POPULAR';
      position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
      background: var(--naranja); color: var(--azul);
      font-size: 10px; font-weight: 700; letter-spacing: 1px;
      padding: 4px 14px; border-radius: 100px;
    }

    /* ── PRECIO GANCHO ── */
    .precio-gancho {
      background: var(--tarjeta);
      border: 2px solid var(--naranja);
      border-radius: 16px; padding: 48px 40px;
      display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
      margin-top: 40px;
    }
    .precio-gancho-txt { flex: 1; min-width: 240px; }
    .precio-gancho-txt h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 26px; font-weight: 700; color: var(--blanco); margin-bottom: 10px;
    }
    .precio-gancho-txt p { color: #9a9a9a; font-size: 15px; }
    .precio-gancho-num { text-align: center; flex-shrink: 0; }
    .precio-gancho-num .desde { font-size: 14px; color: #9a9a9a; display: block; }
    .desde-mini { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: var(--gris-texto); margin-right: 6px; }
    .precio-gancho-num .monto {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 56px; font-weight: 700; color: var(--naranja); line-height: 1;
    }
    .precio-gancho-num .moneda { font-size: 18px; color: #9a9a9a; }
    .precio-gancho-cta {
      background: var(--naranja); color: var(--azul);
      border: none; border-radius: var(--radio);
      padding: 14px 28px; font-size: 16px; font-weight: 700;
      text-decoration: none; white-space: nowrap;
      transition: background .2s;
      display: inline-block;
    }
    .precio-gancho-cta:hover { background: var(--naranja-dark); }

    /* ── PROCESO ── */
    .proceso-steps { display: flex; flex-direction: column; gap: 0; }
    .paso {
      display: flex; gap: 28px; align-items: flex-start;
      padding: 28px 0; border-bottom: 1px solid var(--borde);
    }
    .paso:last-child { border-bottom: none; }
    .paso-num {
      width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
      background: var(--tarjeta); color: var(--naranja); border: 2px solid var(--naranja);
      font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .paso-txt h4 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
    .paso-txt p { font-size: 15px; color: var(--gris-texto); }

    /* ── POR QUE ── */
    .porq-bg { background: var(--gris-bg); }
    .porq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
    .porq-item {
      background: var(--tarjeta); border: 1px solid var(--borde);
      border-radius: 12px; padding: 24px 20px;
    }
    .porq-item .icon { font-size: 28px; margin-bottom: 12px; }
    .porq-item h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
    .porq-item p { font-size: 14px; color: var(--gris-texto); line-height: 1.6; }

    /* ── PRECIOS ── */
    .precios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
    .precio-card {
      background: var(--tarjeta);
      border: 1px solid var(--borde); border-radius: 14px; padding: 28px 24px;
      display: flex; flex-direction: column;
    }
    .precio-card-name { font-size: 13px; font-weight: 700; color: var(--gris-texto); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 12px; }
    .precio-card-monto { font-family: 'Space Grotesk', sans-serif; font-size: 36px; font-weight: 700; color: var(--naranja); line-height: 1; margin-bottom: 4px; }
    .precio-card.destacado {
      border-color: var(--naranja); background: linear-gradient(135deg, #1c1608, #141414);
      position: relative;
    }
    .precio-card.destacado::before {
      content: 'RECOMENDADO';
      position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
      background: var(--naranja); color: var(--azul);
      font-size: 10px; font-weight: 700; letter-spacing: 1px;
      padding: 4px 14px; border-radius: 100px;
    }
    .precio-card-periodo { font-size: 13px; color: var(--gris-texto); margin-bottom: 20px; }
    .precio-card-items { list-style: none; flex: 1; margin-bottom: 24px; }
    .precio-card-items li {
      font-size: 14px; color: var(--gris-texto); padding: 5px 0;
      display: flex; gap: 8px; align-items: flex-start;
    }
    .precio-card-items li::before { content: '✔'; color: var(--verde); flex-shrink: 0; margin-top: 1px; }
    .precio-card-cta {
      display: block; text-align: center;
      background: var(--naranja); color: var(--azul);
      border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 700;
      text-decoration: none; transition: background .2s;
    }
    .precio-card-cta:hover { background: var(--naranja-dark); }

    /* ── FAQ ── */
    .faq-list { max-width: 720px; }
    details {
      border-bottom: 1px solid var(--borde); padding: 18px 0;
    }
    details summary {
      font-size: 16px; font-weight: 600; cursor: pointer;
      list-style: none; display: flex; justify-content: space-between; align-items: center;
      gap: 12px;
    }
    details summary::-webkit-details-marker { display: none; }
    details summary::after { content: '+'; font-size: 22px; color: var(--naranja); flex-shrink: 0; }
    details[open] summary::after { content: '−'; }
    details p { font-size: 15px; color: var(--gris-texto); margin-top: 12px; line-height: 1.7; }

    /* ── CTA FINAL ── */
    .cta-final {
      background: var(--azul); text-align: center; padding: 80px 5vw;
    }
    .cta-final h2 { color: var(--blanco); margin-bottom: 14px; }
    .cta-final p { color: #9a9a9a; font-size: 17px; max-width: 520px; margin: 0 auto 36px; }
    .cta-final-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .btn-call-lg {
      display: inline-flex; align-items: center; gap: 8px;
      background: transparent; border: 1.5px solid var(--azul-claro);
      color: var(--azul-claro); border-radius: var(--radio);
      padding: 14px 28px; font-size: 16px; font-weight: 600;
      text-decoration: none; transition: background .2s, color .2s;
    }
    .btn-call-lg:hover { background: var(--azul-claro); color: var(--azul); }
    .btn-wa-lg {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--verde); border: none;
      color: var(--blanco); border-radius: var(--radio);
      padding: 14px 28px; font-size: 16px; font-weight: 600;
      text-decoration: none; transition: opacity .2s;
    }
    .btn-wa-lg:hover { opacity: .88; }

    /* ── FOOTER ── */
    footer {
      background: #050505; padding: 32px 5vw;
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
      border-top: 1px solid var(--borde);
    }
    footer .logo-txt { font-size: 14px; color: #6a6a6a; }
    footer .logo-txt strong { color: var(--azul-claro); }
    footer .footer-links { display: flex; gap: 20px; }
    footer .footer-links a { font-size: 13px; color: #6a6a6a; text-decoration: none; }
    footer .footer-links a:hover { color: var(--azul-claro); }

    /* ── WA FLOTANTE ── */
    .wa-float {
      position: fixed; bottom: 24px; right: 24px; z-index: 99;
      background: var(--verde); color: var(--blanco);
      width: 56px; height: 56px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 26px; text-decoration: none;
      box-shadow: 0 4px 20px rgba(37,211,102,.5);
      transition: transform .2s;
    }
    .wa-float:hover { transform: scale(1.08); }

    /* ── RESPONSIVE ── */
    @media(max-width:600px){
      .stats { gap: 28px; }
      .precio-gancho { padding: 32px 24px; flex-direction: column; text-align: center; }
      .precio-gancho-num .monto { font-size: 44px; }
    }

    /* ── CLIENTES ── */
    .cliente-card {
      background: var(--blanco); border: 1px solid var(--borde);
      border-radius: 12px; padding: 20px 16px;
      text-decoration: none; display: flex; flex-direction: column;
      align-items: center; gap: 10px; text-align: center;
      transition: box-shadow .2s, transform .2s;
    }
    .cliente-card:hover { box-shadow: 0 6px 24px rgba(240,165,0,.12); transform: translateY(-2px); }
    .cliente-card img {
      width: 64px; height: 64px; object-fit: contain; border-radius: 8px;
    }
    .cliente-icon-fallback {
      width: 64px; height: 64px; font-size: 32px;
      align-items: center; justify-content: center; border-radius: 8px;
      background: #f4f6fa;
    }
    .cliente-nombre { font-size: 14px; font-weight: 700; color: var(--azul); line-height: 1.3; }
    .cliente-giro { font-size: 12px; color: var(--gris-texto); }
    .cliente-logo-wrap {
      width: 100%; height: 80px;
      display: flex; align-items: center; justify-content: center;
      padding: 8px;
    }
    .cliente-logo-wrap img {
      max-width: 100%; max-height: 72px;
      object-fit: contain; border-radius: 4px;
    }
    .cliente-emoji { font-size: 36px; }



    /* ── NAV: enlaces a páginas internas ── */
    .nav-links { display: none; gap: 22px; align-items: center; }
    .nav-links a { color: #c7c7c7; text-decoration: none; font-size: 14px; font-weight: 500; }
    .nav-links a:hover { color: var(--naranja); }
    @media(min-width:900px){ .nav-links { display: flex; } }
    footer .footer-links { flex-wrap: wrap; }

    /* ── Páginas internas ── */
    .pag-hero { background: var(--azul); padding: 48px 5vw 56px; border-bottom: 1px solid var(--borde); }
    .pag-hero h1 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(28px, 4.5vw, 44px); font-weight: 700; line-height: 1.15;
      color: var(--blanco); max-width: 820px; margin-bottom: 18px;
    }
    .pag-hero h1 em { font-style: normal; color: var(--naranja); }
    .pag-hero .lead { font-size: clamp(16px, 2vw, 19px); color: #b5b5b5; max-width: 720px; margin-bottom: 28px; }
    .pag-hero .hero-ctas { justify-content: flex-start; }
    .migas { font-size: 13px; color: var(--gris-texto); margin-bottom: 22px; }
    .migas a { color: var(--gris-texto); }
    .migas a:hover { color: var(--naranja); }
    .migas .sep { margin: 0 8px; }
    .pag-sec { background: var(--gris-bg); }
    .pag-sec.oscuro { background: var(--azul); }
    .prosa { max-width: 760px; }
    .prosa p { color: #c9c9c9; font-size: 16.5px; margin-bottom: 16px; line-height: 1.75; }
    .prosa a, .enlace-int { color: var(--naranja); }
    .prosa .card-checks { margin: 8px 0 20px; }
    .card-link { display: inline-block; margin-top: 14px; color: var(--naranja); font-weight: 600; text-decoration: none; }
    .card-link:hover { text-decoration: underline; }
    .pasos { list-style: none; counter-reset: paso; max-width: 760px; }
    .pasos li { counter-increment: paso; position: relative; padding: 0 0 22px 52px; color: #c9c9c9; font-size: 16px; line-height: 1.65; }
    .pasos li::before {
      content: counter(paso); position: absolute; left: 0; top: 0;
      width: 36px; height: 36px; border-radius: 50%; background: var(--naranja); color: var(--azul);
      font-weight: 700; display: flex; align-items: center; justify-content: center;
    }
    .pasos li strong { color: var(--blanco); display: block; }
    .tabla-wrap { overflow-x: auto; border: 1px solid var(--borde); border-radius: 12px; }
    .tabla-precios { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 15px; }
    .tabla-precios th, .tabla-precios td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; color: #c9c9c9; }
    .tabla-precios tr:last-child td { border-bottom: 0; }
    .tabla-precios th { background: #1a1a1a; color: var(--blanco); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
    .tabla-precios td:first-child { color: var(--blanco); font-weight: 600; }
    .tabla-precios td strong { color: var(--naranja); }
    .rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
    .rel-card { display: block; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 20px; text-decoration: none; color: var(--texto); transition: border-color .2s; }
    .rel-card strong { display: block; color: var(--blanco); margin-bottom: 6px; }
    .rel-card span { color: var(--gris-texto); font-size: 14px; }
    .rel-card:hover { border-color: var(--naranja); }
    .dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
    .ver-todos { margin-top: 28px; text-align: center; }
    .ver-todos a { color: var(--naranja); font-weight: 600; text-decoration: none; }
    .ver-todos a:hover { text-decoration: underline; }