* { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:#ffffff; color:#0b1830; overflow-x:hidden;
    }
    a { color:inherit; text-decoration:none; }
    img, svg { max-width:100%; }
    .container { width:90%; max-width:1200px; margin:auto; }
    .display { font-family:"Space Grotesk", "IBM Plex Sans", sans-serif; }
    .mono { font-family:"IBM Plex Mono", ui-monospace, monospace; }

    :root {
      --navy-950:#050c18;
      --navy-900:#0a1830;
      --navy-800:#122544;
      --blue-600:#0468e0;
      --blue-500:#2f8bf0;
      --blue-400:#63a8f5;
      --ink:#0b1830;
      --muted:#5b6373;
      --muted-onDark:#a9b7cc;
      --line:rgba(11,24,48,.10);
      --line-onDark:rgba(255,255,255,.12);
      --bg-tint:#f5f8fc;
    }

    /* ---- Header ---- */
    header {
      position:fixed; inset:0 0 auto; z-index:1000;
      backdrop-filter:blur(14px);
      background:rgba(255,255,255,.86);
      border-bottom:1px solid var(--line);
    }
    nav { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px; }

    .brand { display:flex; align-items:center; gap:11px; }
    .brand-logo { width:29px; height:auto; display:block; flex-shrink:0; }
    .brand-wordmark-img { height:19px; width:auto; display:block; }
    .brand-sub { display:block; color:#8290a3; font-size:.56rem; font-weight:700; letter-spacing:1.6px; margin-top:3px; }

    .nav-links { display:flex; align-items:center; gap:26px; }
    .nav-links a:not(.btn-primary) { color:#3c4658; font-size:.9rem; font-weight:600; transition:.2s; }
    .nav-links a:not(.btn-primary):hover { color:var(--blue-600); }

    .btn-primary {
      display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
      background:var(--blue-600); color:#fff;
      padding:.8rem 1.3rem; border-radius:10px; font-weight:700; font-size:.92rem;
      box-shadow:0 10px 24px rgba(4,104,224,.22); transition:.2s; border:1px solid var(--blue-600);
    }
    .btn-primary:hover { background:#0356bd; transform:translateY(-2px); }
    .btn-primary .arrow { transition:.2s; }
    .btn-primary:hover .arrow { transform:translateX(3px); }

    .btn-secondary {
      display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
      border:1.5px solid var(--line); padding:.8rem 1.3rem;
      border-radius:10px; color:var(--ink); font-weight:700; font-size:.92rem; transition:.2s;
    }
    .btn-secondary:hover { background:rgba(11,24,48,.04); }
    .on-dark.btn-secondary { border-color:rgba(255,255,255,.28); color:#fff; }
    .on-dark.btn-secondary:hover { background:rgba(255,255,255,.08); }
    .btn-white {
      display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
      background:#fff; color:var(--blue-600);
      padding:.8rem 1.3rem; border-radius:10px; font-weight:700; font-size:.92rem; transition:.2s;
    }
    .btn-white:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.15); }

    .nav-toggle {
      display:none; position:relative; width:40px; height:40px; border-radius:10px;
      border:1px solid var(--line); background:transparent; cursor:pointer;
      -webkit-appearance:none; appearance:none; padding:0;
    }
    .nav-toggle span {
      position:absolute; left:50%; width:18px; height:2px; background:var(--ink);
      border-radius:2px; transform:translateX(-50%); transition:.25s;
    }
    .nav-toggle span:nth-child(1) { top:14px; }
    .nav-toggle span:nth-child(2) { top:19px; }
    .nav-toggle span:nth-child(3) { top:24px; }
    .nav-toggle.open span:nth-child(1) { top:19px; transform:translateX(-50%) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity:0; }
    .nav-toggle.open span:nth-child(3) { top:19px; transform:translateX(-50%) rotate(-45deg); }

    .mobile-panel {
      display:none; flex-direction:column; gap:2px; padding:.5rem 0 1.2rem;
      border-top:1px solid var(--line);
    }
    .mobile-panel a:not(.btn-primary) {
      padding:.9rem 4px; color:var(--ink); font-size:1rem; font-weight:600;
      border-bottom:1px solid var(--line);
    }
    .mobile-panel a.btn-primary { text-align:center; margin-top:.8rem; border-bottom:none; }
    .mobile-panel.open { display:flex; }

    /* ---- Sections / type ---- */
    section { padding:5rem 0; }
    .eyebrow {
      display:inline-flex; align-items:center; gap:.5rem; color:var(--blue-600);
      font-family:"IBM Plex Mono",monospace; font-size:.76rem; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; margin-bottom:.9rem;
    }
    .eyebrow:before { content:""; width:22px; height:2px; background:var(--blue-600); border-radius:2px; }
    .eyebrow.on-dark { color:var(--blue-400); }
    .eyebrow.on-dark:before { background:var(--blue-400); }
    .eyebrow.on-blue { color:#eaf3ff; }
    .eyebrow.on-blue:before { background:#eaf3ff; }
    .eyebrow .no-caps { text-transform:none; }

    .section-title { max-width:640px; margin-bottom:3.2rem; }
    .section-title h2 { font-family:"Space Grotesk",sans-serif; font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:800; margin-bottom:.9rem; letter-spacing:-.6px; color:var(--ink); line-height:1.18; }
    .section-title p { color:var(--muted); line-height:1.75; font-size:1.02rem; }
    .section-title.center { margin-left:auto; margin-right:auto; text-align:center; }
    .bg-tint { background:var(--bg-tint); }

    /* ---- Hero ---- */
    .hero {
      min-height:100vh; display:flex; align-items:center; position:relative; color:#fff;
      background:
        radial-gradient(circle at 82% 15%,rgba(47,139,240,.22),transparent 32%),
        radial-gradient(circle at 10% 85%,rgba(4,104,224,.16),transparent 30%),
        linear-gradient(160deg,var(--navy-900),var(--navy-950));
    }
    .hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center; padding-top:110px; }
    .hero h1 { font-family:"Space Grotesk",sans-serif; font-size:clamp(2.3rem,4.6vw,3.7rem); font-weight:800; line-height:1.1; letter-spacing:-1.4px; margin-bottom:1.4rem; color:#f5f7fa; }
    .hero p { color:#b9c6d8; font-size:1.06rem; line-height:1.8; max-width:600px; margin-bottom:2.1rem; }
    .hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

    .hero-panel {
      padding:18px; border-radius:28px; background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10); box-shadow:0 30px 70px rgba(0,0,0,.35);
    }
    .infra-visual {
      height:440px; border-radius:20px; position:relative; overflow:hidden;
      background:
        radial-gradient(circle at 50% 50%,rgba(47,139,240,.16),transparent 28%),
        linear-gradient(145deg,#0f2748,#081733);
      display:flex; align-items:center; justify-content:center;
    }
    .infra-visual:before {
      content:""; position:absolute; width:330px; height:330px; border-radius:50%;
      border:1px solid rgba(99,168,245,.22); box-shadow:0 0 80px rgba(47,139,240,.12);
    }
    .infra-core {
      width:150px; height:150px; border-radius:50%;
      border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center;
      position:relative; box-shadow:0 0 60px rgba(47,139,240,.18); background:rgba(255,255,255,.86);
    }
    .infra-core img { width:46px; height:auto; display:block; }
    .orbit { position:absolute; inset:-60px; border-radius:50%; border:1px dashed rgba(255,255,255,.14); }
    .orbit-track { position:absolute; inset:-60px; animation:orbit-spin 26s linear infinite; }
    .node-tag { position:absolute; white-space:nowrap; }
    .tag-pill {
      display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.92rem; font-weight:500; color:#eaf3ff;
      background:rgba(47,139,240,.16); border:1px solid rgba(99,168,245,.4);
      padding:.55rem 1rem; border-radius:999px;
      animation:orbit-spin-reverse 26s linear infinite;
    }
    @keyframes orbit-spin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
    @keyframes orbit-spin-reverse { from{transform:rotate(0deg);} to{transform:rotate(-360deg);} }
    @media (prefers-reduced-motion:reduce) {
      .orbit-track, .tag-pill { animation:none; }
    }
    .nt1{top:0%;left:50%;transform:translate(-50%,-50%)}
    .nt2{top:25%;left:93.3%;transform:translate(-50%,-50%)}
    .nt3{top:75%;left:93.3%;transform:translate(-50%,-50%)}
    .nt4{top:100%;left:50%;transform:translate(-50%,-50%)}
    .nt5{top:75%;left:6.7%;transform:translate(-50%,-50%)}
    .nt6{top:25%;left:6.7%;transform:translate(-50%,-50%)}

    /* ---- Servicios (4 tarjetas problema/solución) ---- */
    .solutions-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
    .solution-card {
      padding:2rem; border-radius:20px; display:flex; flex-direction:column; min-height:300px;
      background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(11,24,48,.03);
    }
    .service-icon {
      width:52px; height:52px; display:grid; place-items:center; border-radius:14px;
      background:rgba(4,104,224,.08); border:1px solid rgba(4,104,224,.16);
      margin-bottom:1.2rem; color:var(--blue-600); flex-shrink:0;
    }
    .service-icon svg { width:26px; height:26px; }
    .solution-question {
      font-size:1.1rem; font-weight:700; color:var(--ink); line-height:1.4; margin-bottom:1.4rem;
    }
    .solution-answer {
      flex:1; display:flex; flex-direction:column; justify-content:center;
      padding:1.4rem 1.5rem; border-radius:14px;
      background:var(--bg-tint); border:1px solid var(--line);
    }
    .solution-answer h3 { font-size:1.02rem; margin-bottom:.5rem; color:var(--ink); }
    .solution-answer p { color:var(--muted); font-size:.9rem; line-height:1.6; }
    .solution-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
    .solution-tag {
      display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.74rem; font-weight:500; color:var(--blue-600);
      background:rgba(4,104,224,.08); border:1px solid rgba(4,104,224,.2);
      padding:.32rem .7rem; border-radius:999px; white-space:nowrap;
    }

    /* ---- Equipo / Por qué elegirnos (franja navy) ---- */
    .why-band {
      background:linear-gradient(165deg,var(--navy-900),var(--navy-950)); color:#fff;
      position:relative; overflow:hidden;
    }
    .why-band:before {
      content:""; position:absolute; inset:0;
      background:radial-gradient(circle at 90% 10%,rgba(47,139,240,.16),transparent 35%);
      pointer-events:none;
    }
    .why-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; position:relative; }
    .why-grid h2 { font-family:"Space Grotesk",sans-serif; font-size:clamp(1.8rem,3.2vw,2.4rem); font-weight:800; line-height:1.22; margin-bottom:1.2rem; color:#fff; }
    .why-grid p { color:var(--muted-onDark); line-height:1.8; font-size:1.02rem; max-width:520px; margin-bottom:1rem; }
    .why-grid p + p { margin-bottom:1.8rem; }

    .stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
    .stat-card {
      padding:1.6rem; border-radius:16px; background:rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.12);
    }
    .stat-icon { width:38px; height:38px; color:var(--blue-400); margin-bottom:.9rem; }
    .stat-icon svg { width:100%; height:100%; }
    .stat-card strong { display:block; font-family:"Space Grotesk",sans-serif; font-size:1.5rem; font-weight:800; color:#fff; margin-bottom:.35rem; }
    .stat-card span { display:block; color:var(--muted-onDark); font-size:.84rem; line-height:1.5; }

    /* ---- Cómo trabajamos ---- */
    .process-grid { display:flex; gap:2.5rem; }
    .process-step { flex:1; }
    .process-number {
      width:46px; height:46px; border-radius:50%; background:#fff;
      border:1.5px solid var(--blue-600); display:flex; align-items:center; justify-content:center;
      font-weight:800; color:var(--blue-600); font-size:1.05rem; margin-bottom:1.2rem;
    }
    .process-step h3 { font-size:1.08rem; margin-bottom:.6rem; color:var(--ink); }
    .process-step p { color:var(--muted); font-size:.92rem; line-height:1.65; }

    /* ---- FAQ ---- */
    .faq-list { max-width:820px; }
    .faq-item { border-bottom:1px solid var(--line); padding:1.6rem 0; }
    .faq-item:first-child { padding-top:0; }
    .faq-item h3 { font-size:1.03rem; margin-bottom:.6rem; color:var(--ink); }
    .faq-item p { color:var(--muted); font-size:.95rem; line-height:1.7; }

    /* ---- CTA / Contacto ---- */
    .cta { background:linear-gradient(120deg,var(--blue-600),#0353b8); }
    .contact-content { max-width:760px; }
    .contact-content h2 { font-family:"Space Grotesk",sans-serif; font-size:clamp(1.7rem,3.2vw,2.3rem); font-weight:800; margin-bottom:1rem; color:#fff; line-height:1.2; }
    .contact-content p { color:var(--muted-onDark); max-width:620px; line-height:1.8; margin-bottom:1.8rem; }

    footer { padding:3.5rem 0 1.5rem; background:var(--navy-950); color:#fff; }
    .footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; align-items:start; padding-bottom:2.5rem; }
    .footer-brand p { color:var(--muted-onDark); line-height:1.7; max-width:400px; margin-top:1rem; font-size:.88rem; }
    .footer-col h4 { margin-bottom:1rem; font-size:.92rem; color:#fff; }
    .footer-col a { display:block; color:var(--muted-onDark); margin:.65rem 0; font-size:.9rem; transition:.2s; }
    .footer-col a:hover { color:var(--blue-400); }
    .socials { display:flex; flex-wrap:wrap; gap:.65rem; }
    .social {
      display:inline-flex !important; align-items:center; gap:.45rem; border:1px solid var(--line-onDark);
      border-radius:10px; padding:.6rem .7rem; margin:0 !important; color:var(--muted-onDark) !important;
    }
    .social:hover { color:#fff !important; border-color:rgba(255,255,255,.3); }
    .copyright {
      padding-top:1.5rem; border-top:1px solid var(--line-onDark);
      display:flex; justify-content:space-between; gap:1rem; color:#6c7996; font-size:.8rem;
    }

    @media (max-width:960px) {
      .nav-links { display:none; }
      .nav-toggle { display:block; }
      .hero-grid { grid-template-columns:1fr; }
      .hero-panel { max-width:640px; width:100%; margin:auto; }
      .solutions-grid { grid-template-columns:1fr; }
      .why-grid { grid-template-columns:1fr; }
      .why-grid p { max-width:100%; }
      .footer-grid { grid-template-columns:1fr 1fr; }
      .process-grid { flex-direction:column; gap:1.8rem; }
    }
    @media (max-width:640px) {
      .brand-sub { display:none; }
      .brand-logo { width:26px; }
      .brand-wordmark-img { height:17px; }
      .hero-grid { padding-top:96px; }
      .hero-actions { flex-direction:column; }
      .btn-primary,.btn-secondary,.btn-white { width:100%; }
      .infra-visual { height:320px; }
      .tag-pill { font-size:.72rem; padding:.4rem .7rem; }
      .stats-grid { grid-template-columns:1fr; }
      .footer-grid { grid-template-columns:1fr; }
      .cta-box .hero-actions { justify-content:stretch; }
      .copyright { flex-direction:column; }
    }

