/* ════════════════════════════════════
       RESET + TOKENS
    ════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --cl-bg-main:        #05070D;
      --cl-bg-deep:        #03050A;
      --cl-bg-surface:     #0A1020;
      --cl-bg-card:        #0B1224;
      --cl-text-primary:   #F5F8FF;
      --cl-text-secondary: #B8C4D9;
      --cl-text-muted:     #6F7D96;
      --cl-cyan-main:      #00E5F0;
      --cl-cyan-soft:      #38F3FF;
      --cl-blue-main:      #2575FF;
      --cl-indigo-main:    #4B5DFF;
      --cl-border-soft:    rgba(0, 229, 240, 0.18);
      --cl-glow-cyan:      rgba(0, 229, 240, 0.35);
      --cl-gradient-text:  linear-gradient(90deg, #38F3FF 0%, #00E5F0 45%, #2575FF 100%);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      background:
        radial-gradient(circle at 8%  15%, rgba(0,229,240,0.11), transparent 30%),
        radial-gradient(circle at 88% 78%, rgba(37,117,255,0.13), transparent 32%),
        var(--cl-bg-main);
      color: var(--cl-text-primary);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }

    /* ════════════════════════════════════
       FUENTE MARCA
       Activa/desactiva cambiando font-family:
       'Space Grotesk' ← actual
       'Syne'          ← alternativa
       'Inter'         ← neutro
    ════════════════════════════════════ */
    .fuente-marca {
      font-family: 'Space Grotesk', sans-serif;
    }

    /* ════════════════════════════════════
       SHARED LAYOUT
    ════════════════════════════════════ */
    .section {
      padding: 120px 56px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-label {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--cl-cyan-main);
      margin-bottom: 48px;
    }
    .section-label::before {
      content: ''; display: block; width: 24px; height: 1px;
      background: var(--cl-cyan-main); opacity: 0.7;
    }

    /* Header asimétrico compartido */
    .section-header {
      display: grid; grid-template-columns: 1.4fr 1fr;
      gap: 64px; align-items: end; margin-bottom: 56px;
    }
    .section-header-title {
      font-size: clamp(26px, 2.6vw, 36px);
      font-weight: 700; line-height: 1.12;
      letter-spacing: -0.01em; color: var(--cl-text-primary);
    }
    .section-header-sub {
      font-size: 14.5px; font-weight: 300; line-height: 1.75;
      color: var(--cl-text-muted);
      border-left: 1px solid rgba(0,229,240,0.2);
      padding-left: 20px;
    }

    /* ════════════════════════════════════
       ANIMACIONES LOGO BREATHE
    ════════════════════════════════════ */
    @keyframes breathe-scale {
      0%, 100% { transform: scale(1); }
      50%       { transform: scale(0.96); }
    }
    @keyframes breathe-core {
      0%, 100% { opacity:1; filter: drop-shadow(0 0 10px #38F3FF) drop-shadow(0 0 28px #00E5F0); }
      50%       { opacity:0.72; filter: drop-shadow(0 0 4px #38F3FF) drop-shadow(0 0 10px #00E5F0); }
    }
    @keyframes breathe-ring {
      0%, 100% { stroke-opacity: 0.72; stroke: #00E5F0; }
      50%       { stroke-opacity: 0.20; stroke: #2575FF; }
    }

    /* Clases reutilizables del logo breathe */
    .logo-breathe {
      transform-box: fill-box; transform-origin: center;
      animation: breathe-scale 4s ease-in-out infinite;
      overflow: visible;
    }
    .logo-breathe .b-core { animation: breathe-core 4s ease-in-out infinite; }
    .logo-breathe .b-r5 { animation: breathe-ring 4s ease-in-out infinite 0.00s; }
    .logo-breathe .b-r4 { animation: breathe-ring 4s ease-in-out infinite 0.08s; }
    .logo-breathe .b-r3 { animation: breathe-ring 4s ease-in-out infinite 0.16s; }
    .logo-breathe .b-r2 { animation: breathe-ring 4s ease-in-out infinite 0.24s; }
    .logo-breathe .b-r1 { animation: breathe-ring 4s ease-in-out infinite 0.32s; }

    /* ════════════════════════════════════
       NAV
    ════════════════════════════════════ */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      height: 68px; padding: 0 56px;
      display: flex; align-items: center;
      background: rgba(5,7,13,0.72);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--cl-border-soft);
    }

    /* Logo — anclado a la izquierda */
    .nav-logo {
      display: flex; align-items: center; gap: 12px;
      text-decoration: none; flex-shrink: 0;
    }
    .nav-logo-icon {
      width: 32px; height: 32px; flex-shrink: 0;
    }
    .nav-logo-name {
      font-size: 14px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--cl-text-primary);
    }

    /* Links — centrados con position absolute */
    .nav-links {
      position: absolute; left: 50%; transform: translateX(-50%);
      display: flex; align-items: center; gap: 28px; list-style: none;
    }
    .nav-links a {
      font-size: 13px; color: var(--cl-text-secondary);
      text-decoration: none; letter-spacing: 0.03em; transition: color 0.2s;
      position: relative; padding-bottom: 3px;
    }
    .nav-links a:hover { color: var(--cl-text-primary); }

    /* Indicador activo */
    .nav-links a.nav-active { color: var(--cl-text-primary); }
    .nav-links a.nav-active::after {
      content: '';
      position: absolute; bottom: -4px; left: 0; right: 0;
      height: 1px;
      background: var(--cl-cyan-main);
      box-shadow: 0 0 6px var(--cl-cyan-main);
    }

    /* CTA — anclado a la derecha */
    .nav-cta-wrap { margin-left: auto; }
    .nav-cta {
      display: inline-flex; align-items: center;
      font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
      color: var(--cl-cyan-main);
      border: 1px solid var(--cl-border-soft);
      padding: 7px 18px; border-radius: 6px;
      text-decoration: none;
      transition: background 0.2s, border-color 0.2s;
    }
    .nav-cta:hover {
      background: rgba(0,229,240,0.08);
      border-color: rgba(0,229,240,0.38);
    }

    /* ════════════════════════════════════
       HERO SPLIT
    ════════════════════════════════════ */
    .hero {
      min-height: 100vh;
      display: grid; grid-template-columns: 1fr 1fr;
      align-items: center;
      padding: 0 56px; gap: 0;
      position: relative; overflow: hidden;
    }

    .hero::before {
      content: ''; position: absolute;
      top: 50%; left: 18%; transform: translate(-50%, -50%);
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(0,229,240,0.07) 0%, transparent 60%);
      pointer-events: none;
    }
    /* hero::after eliminado — el body ya provee el focus point derecho */

    .hero-left {
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 1;
    }
    .hero-logo-wrap { width: 400px; height: 400px; }
    .hero-logo-svg { width: 100%; height: 100%; }

    .hero-right {
      display: flex; flex-direction: column;
      align-items: flex-start; justify-content: center;
      padding-left: 48px; position: relative; z-index: 1;
    }
    .hero-right::before {
      content: ''; position: absolute;
      left: 0; top: 15%; bottom: 15%; width: 1px;
      background: linear-gradient(to bottom,
        transparent,
        rgba(0,229,240,0.18) 30%,
        rgba(0,229,240,0.18) 70%,
        transparent);
    }

    .hero-pill {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--cl-cyan-main);
      background: rgba(0,229,240,0.07);
      border: 1px solid rgba(0,229,240,0.2);
      border-radius: 100px; padding: 6px 16px;
      margin-bottom: 28px;
    }
    .pill-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--cl-cyan-main);
      box-shadow: 0 0 6px var(--cl-cyan-main);
      animation: breathe-core 4s ease-in-out infinite;
    }

    .hero-title {
      font-size: clamp(32px, 3.2vw, 52px);
      font-weight: 800; line-height: 1.08;
      letter-spacing: -0.02em; color: var(--cl-text-primary);
      margin-bottom: 20px;
    }
    .hero-title .highlight {
      background: var(--cl-gradient-text);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }

    .hero-sub {
      font-size: clamp(14px, 1.3vw, 16.5px); font-weight: 300; line-height: 1.75;
      color: var(--cl-text-secondary); max-width: 480px; margin-bottom: 40px;
    }

    .hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }

    .btn-primary {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 14px; font-weight: 500; color: #03050A;
      background: linear-gradient(135deg, #00E5F0, #2575FF);
      border: none; border-radius: 8px; padding: 13px 26px;
      cursor: pointer; text-decoration: none; letter-spacing: 0.02em;
      box-shadow: 0 0 32px rgba(0,229,240,0.28), 0 4px 16px rgba(0,0,0,0.3);
      transition: box-shadow 0.25s, transform 0.2s;
    }
    .btn-primary:hover { box-shadow: 0 0 48px rgba(0,229,240,0.42), 0 6px 24px rgba(0,0,0,0.4); transform: translateY(-1px); }

    .btn-secondary {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 14px; font-weight: 400; color: var(--cl-text-secondary);
      background: transparent; border: 1px solid var(--cl-border-soft);
      border-radius: 8px; padding: 13px 22px;
      cursor: pointer; text-decoration: none; letter-spacing: 0.02em;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .btn-secondary:hover { color: var(--cl-text-primary); border-color: rgba(0,229,240,0.32); background: rgba(0,229,240,0.04); }

    .hero-stats {
      display: flex; align-items: center;
      border: 1px solid var(--cl-border-soft); border-radius: 10px;
      background: rgba(11,18,36,0.6); backdrop-filter: blur(16px); overflow: hidden;
    }
    .stat-item { padding: 16px 28px; text-align: center; position: relative; }
    .stat-item + .stat-item::before {
      content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
      width: 1px; background: var(--cl-border-soft);
    }
    .stat-value {
      font-size: 22px; font-weight: 700;
      background: var(--cl-gradient-text);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      line-height: 1; margin-bottom: 4px;
    }
    .stat-label { font-size: 10.5px; font-weight: 400; color: var(--cl-text-muted); letter-spacing: 0.06em; text-transform: uppercase; }

    @keyframes scroll-bounce {
      0%, 100% { transform: translateY(0); opacity: 0.5; }
      50%       { transform: translateY(5px); opacity: 1; }
    }
    .scroll-hint {
      position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      color: var(--cl-text-muted); font-size: 11px;
      letter-spacing: 0.1em; text-transform: uppercase; z-index: 1;
    }
    .scroll-hint svg { animation: scroll-bounce 2s ease-in-out infinite; }

    /* ════════════════════════════════════
       SERVICIOS
    ════════════════════════════════════ */
    .servicios-wrapper { position: relative; overflow: hidden; }
    .servicios-wrapper::before {
      content: ''; position: absolute; top: 10%; left: -100px;
      width: 420px; height: 420px;
      background: radial-gradient(circle, rgba(0,229,240,0.07) 0%, transparent 65%);
      pointer-events: none;
    }

    .servicios-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: stretch; }

    .service-card {
      background: rgba(11,18,36,0.78); border: 1px solid var(--cl-border-soft);
      border-radius: 16px; padding: 36px 32px;
      display: flex; flex-direction: column;
      position: relative; overflow: hidden; backdrop-filter: blur(16px);
      box-shadow: 0 0 40px rgba(0,229,240,0.04);
      transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    }
    .service-card::before {
      content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,229,240,0.55), transparent);
      opacity: 0; transition: opacity 0.3s;
    }
    .service-card:hover { border-color: rgba(0,229,240,0.30); box-shadow: 0 0 60px rgba(0,229,240,0.09), 0 8px 32px rgba(0,0,0,0.3); transform: translateY(-3px); }
    .service-card:hover::before { opacity: 1; }

    .card-icon-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
    .card-icon {
      width: 46px; height: 46px; border-radius: 11px;
      background: rgba(0,229,240,0.07); border: 1px solid rgba(0,229,240,0.16);
      display: flex; align-items: center; justify-content: center;
      color: var(--cl-cyan-main); transition: background 0.3s, border-color 0.3s;
    }
    .service-card:hover .card-icon { background: rgba(0,229,240,0.11); border-color: rgba(0,229,240,0.28); }
    .card-tag {
      font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--cl-blue-main); background: rgba(37,117,255,0.09);
      border: 1px solid rgba(37,117,255,0.2); border-radius: 100px; padding: 4px 12px;
    }
    .service-card h3 { font-size: 18px; font-weight: 700; color: var(--cl-text-primary); margin-bottom: 12px; letter-spacing: -0.01em; line-height: 1.2; }
    .service-card p  { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--cl-text-secondary); flex: 1; }
    .card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; margin-top: 24px; border-top: 1px solid rgba(0,229,240,0.08); }
    .card-tagline { font-size: 12.5px; font-weight: 500; color: var(--cl-cyan-main); opacity: 0.82; font-style: italic; }
    .card-arrow {
      flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
      border: 1px solid var(--cl-border-soft);
      display: flex; align-items: center; justify-content: center;
      color: var(--cl-text-muted); transition: border-color 0.2s, color 0.2s, background 0.2s;
    }
    .service-card:hover .card-arrow { border-color: var(--cl-cyan-main); color: var(--cl-cyan-main); background: rgba(0,229,240,0.06); }

    /* ════════════════════════════════════
       ENFOQUE
    ════════════════════════════════════ */
    .enfoque-wrapper { position: relative; overflow: hidden; }
    .enfoque-wrapper::before {
      content: ''; position: absolute;
      top: 0; left: 50%; transform: translateX(-50%);
      width: 1px; height: 80px;
      background: linear-gradient(to bottom, transparent, rgba(0,229,240,0.25), transparent);
    }

    .enfoque-layout {
      display: grid; grid-template-columns: 1.1fr 1fr;
      gap: 80px; align-items: center;
    }

    .enfoque-title {
      font-size: clamp(28px, 2.8vw, 40px); font-weight: 700;
      line-height: 1.12; letter-spacing: -0.01em;
      color: var(--cl-text-primary); margin-bottom: 24px;
    }
    .enfoque-body {
      font-size: 15px; font-weight: 300; line-height: 1.8;
      color: var(--cl-text-secondary); margin-bottom: 48px; max-width: 480px;
    }

    .enfoque-bullets { display: flex; flex-direction: column; gap: 20px; }
    .bullet-item { display: flex; align-items: flex-start; gap: 16px; }
    .bullet-icon {
      flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
      background: rgba(0,229,240,0.07); border: 1px solid rgba(0,229,240,0.16);
      display: flex; align-items: center; justify-content: center;
      color: var(--cl-cyan-main); margin-top: 2px;
    }
    .bullet-title { font-size: 14px; font-weight: 600; color: var(--cl-text-primary); margin-bottom: 4px; }
    .bullet-desc { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--cl-text-muted); }

    /* Card visual derecha */
    .enfoque-visual { position: relative; display: flex; align-items: center; justify-content: center; }

    .enfoque-card {
      background: rgba(11,18,36,0.82); border: 1px solid var(--cl-border-soft);
      border-radius: 20px; padding: 40px 36px;
      box-shadow: 0 0 60px rgba(0,229,240,0.07), 0 16px 48px rgba(0,0,0,0.4);
      backdrop-filter: blur(16px); width: 100%; max-width: 380px;
      position: relative; z-index: 1;
    }
    .enfoque-card::before {
      content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,229,240,0.5), transparent);
    }

    .enfoque-card-logo {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 28px; padding-bottom: 24px;
      border-bottom: 1px solid rgba(0,229,240,0.1);
    }
    .enfoque-card-logo svg { width: 44px; height: 44px; flex-shrink: 0; }
    .enfoque-card-logo-text { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cl-text-primary); }

    .enfoque-card-quote {
      font-size: 15px; font-weight: 300; line-height: 1.75;
      color: var(--cl-text-secondary); margin-bottom: 28px; font-style: italic;
    }
    .enfoque-card-quote span { color: var(--cl-cyan-main); font-style: normal; font-weight: 500; }

    .enfoque-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .metric-box {
      background: rgba(0,229,240,0.04); border: 1px solid rgba(0,229,240,0.1);
      border-radius: 10px; padding: 14px 16px;
    }
    .metric-value {
      font-size: 20px; font-weight: 700;
      background: var(--cl-gradient-text);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      line-height: 1; margin-bottom: 4px;
    }
    .metric-label { font-size: 11px; color: var(--cl-text-muted); letter-spacing: 0.05em; }

    /* .enfoque-focus eliminado — la card tiene suficiente profundidad con su box-shadow */

    /* ════════════════════════════════════
       GRAFO / FLUJO
    ════════════════════════════════════ */
    .grafo-wrapper { position: relative; overflow: hidden; }

    /* Focus point central más intenso — irradia desde el logo */
    .grafo-wrapper::before {
      content: ''; position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 700px; height: 700px;
      background: radial-gradient(circle,
        rgba(0,229,240,0.07) 0%,
        rgba(37,117,255,0.04) 35%,
        transparent 65%
      );
      pointer-events: none;
    }

    /* Contenedor principal */
    .grafo-flow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
    }

    /* ── Boxes ── */
    .grafo-box {
      background: rgba(11,18,36,0.78);
      border: 1px solid var(--cl-border-soft);
      border-radius: 16px;
      padding: 36px 40px;
      backdrop-filter: blur(16px);
      min-width: 260px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 40px rgba(0,229,240,0.05), 0 8px 32px rgba(0,0,0,0.3);
      position: relative;
      overflow: hidden;
    }

    /* Acento vertical izquierdo — Entrada */
    .grafo-box-entrada {
      border-left: 2px solid rgba(0,229,240,0.45);
    }
    .grafo-box-entrada::before {
      content: '';
      position: absolute;
      top: 0; left: -1px; bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom,
        transparent,
        rgba(0,229,240,0.8) 40%,
        rgba(0,229,240,0.8) 60%,
        transparent
      );
    }

    /* Acento vertical derecho — Salida */
    .grafo-box-salida {
      border-right: 2px solid rgba(0,229,240,0.45);
    }
    .grafo-box-salida::after {
      content: '';
      position: absolute;
      top: 0; right: -1px; bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom,
        transparent,
        rgba(0,229,240,0.8) 40%,
        rgba(0,229,240,0.8) 60%,
        transparent
      );
    }

    .grafo-box-title {
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--cl-text-muted);
      margin-bottom: 20px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(0,229,240,0.1);
    }

    .grafo-item {
      display: flex; align-items: center; gap: 12px;
      padding: 13px 0;
      color: var(--cl-text-secondary);
      font-size: 14px; font-weight: 300;
      border-bottom: 1px solid rgba(0,229,240,0.06);
      transition: color 0.2s;
    }
    .grafo-item:last-child { border-bottom: none; padding-bottom: 0; }
    .grafo-item:hover { color: var(--cl-text-primary); }

    .grafo-dot {
      flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%;
      background: var(--cl-cyan-main);
      box-shadow: 0 0 8px rgba(0,229,240,0.6);
      position: relative;
    }
    .grafo-dot::after {
      content: '';
      position: absolute; inset: -4px;
      border-radius: 50%;
      border: 1px solid rgba(0,229,240,0.2);
    }

    /* Entrada: dot + texto invertidos */
    .grafo-box-entrada .grafo-item { flex-direction: row-reverse; text-align: right; }

    /* ── Línea con destello ── */
    .grafo-line-wrap {
      flex-shrink: 0;
      width: 90px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Línea base */
    .grafo-line {
      width: 100%; height: 2px;
      background: linear-gradient(90deg,
        rgba(0,229,240,0.15),
        rgba(0,229,240,0.55),
        rgba(0,229,240,0.15)
      );
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(0,229,240,0.25);
      position: relative;
      overflow: hidden;
    }

    /* Destello que recorre la línea */
    .grafo-line::after {
      content: '';
      position: absolute;
      top: 0; left: -40%;
      width: 40%; height: 100%;
      background: linear-gradient(90deg,
        transparent,
        rgba(56,243,255,0.9),
        rgba(255,255,255,0.95),
        rgba(56,243,255,0.9),
        transparent
      );
      border-radius: 2px;
      animation: line-flash 3.5s ease-in-out infinite;
    }

    /* Línea de salida: destello con delay */
    .grafo-line-out .grafo-line::after {
      animation-delay: 0.3s;
    }

    @keyframes line-flash {
      0%        { left: -40%; opacity: 0; }
      8%        { opacity: 1; }
      55%       { left: 110%; opacity: 1; }
      60%, 100% { left: 110%; opacity: 0; }
    }

    /* Flecha al final */
    .grafo-arrow {
      flex-shrink: 0;
      width: 0; height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 7px solid rgba(0,229,240,0.65);
      margin-left: -1px;
      filter: drop-shadow(0 0 4px rgba(0,229,240,0.5));
    }

    /* ── Box central: contenedor transparente del logo ── */
    .grafo-logo-box {
      flex-shrink: 0;
      width: 280px; height: 280px;
      display: flex; align-items: center; justify-content: center;
    }

    .grafo-logo-svg { width: 260px; height: 260px; }

    /* ── RESPONSIVE ── */
    @media (max-width: 860px) {
      .grafo-flow { flex-direction: column; gap: 0; }

      .grafo-box {
        min-width: 0; width: 100%; max-width: 380px;
        padding: 28px 32px;
      }

      /* Entrada: items de vuelta a izquierda */
      .grafo-box-entrada .grafo-item { flex-direction: row; text-align: left; }

      /* Acento horizontal en lugar de vertical */
      .grafo-box-entrada {
        border-left: 1px solid var(--cl-border-soft);
        border-bottom: 2px solid rgba(0,229,240,0.45);
      }
      .grafo-box-entrada::before { display: none; }

      .grafo-box-salida {
        border-right: 1px solid var(--cl-border-soft);
        border-top: 2px solid rgba(0,229,240,0.45);
      }
      .grafo-box-salida::after { display: none; }

      /* Línea vertical */
      .grafo-line-wrap {
        width: 2px; height: 64px;
        flex-direction: column;
        align-self: center;
      }

      .grafo-line {
        width: 2px; height: 100%;
        background: linear-gradient(to bottom,
          rgba(0,229,240,0.15),
          rgba(0,229,240,0.55),
          rgba(0,229,240,0.15)
        );
      }

      /* Destello vertical */
      .grafo-line::after {
        top: -40%; left: 0;
        width: 100%; height: 40%;
        background: linear-gradient(to bottom,
          transparent,
          rgba(56,243,255,0.9),
          rgba(255,255,255,0.95),
          rgba(56,243,255,0.9),
          transparent
        );
        animation: line-flash-v 3.5s ease-in-out infinite;
      }
      .grafo-line-out .grafo-line::after { animation-delay: 0.3s; }

      @keyframes line-flash-v {
        0%        { top: -40%; opacity: 0; }
        8%        { opacity: 1; }
        55%       { top: 110%; opacity: 1; }
        60%, 100% { top: 110%; opacity: 0; }
      }

      /* Flecha hacia abajo */
      .grafo-arrow {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 7px solid rgba(0,229,240,0.65);
        border-bottom: none;
        margin-left: 0; margin-top: -1px;
        width: 0;
      }

      .grafo-logo-box { width: 160px; height: 160px; }
      .grafo-logo-svg { width: 140px; height: 140px; }
    }


    @media (max-width: 1024px) {
      nav { padding: 0 32px; }
      .hero { padding: 0 32px; }
      .hero-logo-wrap { width: 240px; height: 240px; }
      .hero-right { padding-left: 36px; }
    }

    @media (max-width: 900px) {
      .section { padding: 80px 24px; }
      .section-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
      .section-header-sub { border-left: none; padding-left: 0; border-top: 1px solid rgba(0,229,240,0.2); padding-top: 20px; }
      .servicios-grid { grid-template-columns: 1fr; }
      .enfoque-layout { grid-template-columns: 1fr; gap: 48px; }
      .enfoque-visual { order: -1; }
    }

    @media (max-width: 700px) {
      nav { padding: 0 20px; }
      .nav-links { display: none; }

      .hero {
        grid-template-columns: 1fr; grid-template-rows: auto auto;
        padding: 100px 24px 80px; text-align: center; gap: 36px;
      }
      .hero-left { order: 1; }
      .hero-logo-wrap { width: 160px; height: 160px; }
      .hero-right { order: 2; align-items: center; padding-left: 0; }
      .hero-right::before { display: none; }
      .hero-title { font-size: clamp(28px,7vw,36px); }
      .hero-actions { justify-content: center; }
      .hero-stats { flex-direction: column; width: 100%; max-width: 260px; }
      .stat-item + .stat-item::before { top: 0; bottom: auto; left: 20%; right: 20%; width: auto; height: 1px; }
      .stat-item { padding: 14px 20px; }

      .service-card { padding: 28px 22px; }
      .enfoque-metrics { grid-template-columns: 1fr 1fr; }
      .tec-grid { grid-template-columns: 1fr; }
      .cta-card { padding: 40px 24px; border-radius: 16px; }
      .cta-divider { justify-content: center; }
      .cta-tagline-final { display: none; }
    }

    @media (max-width: 1100px) {
      .tec-grid { grid-template-columns: repeat(2,1fr); }
    }

    @media (max-width: 900px) {
      .tec-grid { grid-template-columns: repeat(2,1fr); }
      .cta-card { padding: 56px 48px; }
    }

    /* ════════════════════════════════════
       TECNOLOGÍAS
    ════════════════════════════════════ */
    .tec-wrapper { position: relative; overflow: hidden; }
    .tec-wrapper::before {
      /* content: ''; */
      position: absolute;
      top: 0; right: 0;
      width: 500px; height: 500px;
      background: radial-gradient(circle at 100% 0%, rgba(37,117,255,0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .tec-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

    .tec-card {
      background: rgba(11,18,36,0.72); border: 1px solid var(--cl-border-soft);
      border-radius: 16px; padding: 32px 28px;
      display: flex; flex-direction: column; gap: 20px;
      position: relative; overflow: hidden; backdrop-filter: blur(14px);
      transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    }
    .tec-card::before {
      content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,229,240,0.55), transparent);
      opacity: 0; transition: opacity 0.3s;
    }
    .tec-card:hover { border-color: rgba(0,229,240,0.28); box-shadow: 0 0 48px rgba(0,229,240,0.08), 0 8px 32px rgba(0,0,0,0.28); transform: translateY(-3px); }
    .tec-card:hover::before { opacity: 1; }

    .tec-card-num { font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; color: var(--cl-text-muted); text-transform: uppercase; }

    .tec-icon {
      width: 48px; height: 48px; border-radius: 12px;
      background: rgba(0,229,240,0.06); border: 1px solid rgba(0,229,240,0.14);
      display: flex; align-items: center; justify-content: center;
      color: var(--cl-cyan-main); transition: background 0.3s, border-color 0.3s;
    }
    .tec-card:hover .tec-icon { background: rgba(0,229,240,0.1); border-color: rgba(0,229,240,0.28); }

    .tec-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .tec-card h3 { font-size: 16px; font-weight: 700; color: var(--cl-text-primary); line-height: 1.2; letter-spacing: -0.01em; }
    .tec-card p  { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--cl-text-secondary); }

    .tec-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(0,229,240,0.07); }
    .tec-pill {
      font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em;
      color: var(--cl-text-muted); background: rgba(37,117,255,0.07);
      border: 1px solid rgba(37,117,255,0.15); border-radius: 100px; padding: 3px 10px;
      transition: color 0.2s, border-color 0.2s;
    }
    .tec-card:hover .tec-pill { color: var(--cl-text-secondary); border-color: rgba(37,117,255,0.28); }

    /* ════════════════════════════════════
       CTA FINAL
    ════════════════════════════════════ */
    .cta-wrapper { position: relative; overflow: hidden; }
    .cta-wrapper::before {
      content: ''; position: absolute;
      top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(0,229,240,0.09) 0%, rgba(37,117,255,0.07) 35%, transparent 65%);
      pointer-events: none;
    }
    .cta-wrapper::after {
      content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 1px; height: 80px;
      background: linear-gradient(to bottom, transparent, rgba(0,229,240,0.3), transparent);
    }
    .cta-card {
      position: relative; z-index: 1;
      background: rgba(11,18,36,0.75); border: 1px solid var(--cl-border-soft);
      border-radius: 24px; padding: 72px 80px; text-align: center;
      backdrop-filter: blur(20px); overflow: hidden;
      box-shadow: 0 0 80px rgba(0,229,240,0.06), 0 24px 64px rgba(0,0,0,0.4);
    }
    .cta-card::before {
      content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,229,240,0.7) 40%, rgba(37,117,255,0.5) 60%, transparent);
    }
    /* cta-card::after eliminado — el focus central del wrapper es suficiente */
    .cta-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 36px; }
    .cta-title {
      font-size: clamp(30px,3.5vw,48px); font-weight: 800; line-height: 1.08;
      letter-spacing: -0.02em; color: var(--cl-text-primary); max-width: 680px; margin: 0 auto 20px;
    }
    .cta-title .highlight {
      background: var(--cl-gradient-text);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .cta-sub {
      font-size: clamp(14px,1.4vw,16px); font-weight: 300; line-height: 1.75;
      color: var(--cl-text-secondary); max-width: 520px; margin: 0 auto 48px;
    }
    .cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
    .btn-whatsapp {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 15px; font-weight: 600; color: #03050A;
      background: linear-gradient(135deg, #00E5F0, #2575FF);
      border: none; border-radius: 10px; padding: 16px 32px;
      cursor: pointer; text-decoration: none; letter-spacing: 0.02em;
      box-shadow: 0 0 40px rgba(0,229,240,0.32), 0 6px 20px rgba(0,0,0,0.3);
      transition: box-shadow 0.25s, transform 0.2s;
    }
    .btn-whatsapp:hover { box-shadow: 0 0 60px rgba(0,229,240,0.48), 0 8px 28px rgba(0,0,0,0.4); transform: translateY(-2px); }
    .cta-microcopy { font-size: 12px; color: var(--cl-text-muted); letter-spacing: 0.04em; }
    .cta-microcopy span { display: inline-flex; align-items: center; gap: 6px; }
    .cta-microcopy span + span::before { content: '·'; margin: 0 6px; }
    .cta-divider {
      margin-top: 64px; padding-top: 32px;
      border-top: 1px solid rgba(0,229,240,0.08);
      display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    }
    .cta-brand { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cl-text-muted); }
    .cta-tagline-final { font-size: 12px; font-weight: 300; color: var(--cl-text-muted); font-style: italic; letter-spacing: 0.03em; }

    /* ════════════════════════════════════
       FOOTER
    ════════════════════════════════════ */
    .site-footer {
      border-top: 1px solid rgba(0,229,240,0.08);
      background: rgba(3,5,10,0.6);
      backdrop-filter: blur(12px);
    }
    .footer-inner {
      max-width: 1200px; margin: 0 auto;
      padding: 24px 56px;
      display: flex; align-items: center;
      justify-content: space-between; gap: 16px; flex-wrap: wrap;
    }
    .footer-copy { font-size: 12px; font-weight: 300; color: var(--cl-text-muted); letter-spacing: 0.02em; }
    .footer-links { display: flex; align-items: center; gap: 10px; }
    .footer-links a { font-size: 12px; font-weight: 400; color: var(--cl-text-muted); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s; }
    .footer-links a:hover { color: var(--cl-cyan-main); }
    .footer-sep { color: var(--cl-text-muted); opacity: 0.4; font-size: 12px; }

    /* ════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════ */
    @media (max-width: 1024px) {
      nav { padding: 0 32px; }
      .hero { padding: 0 32px; }
      .hero-logo-wrap { width: 240px; height: 240px; }
      .hero-right { padding-left: 36px; }
    }

    @media (max-width: 900px) {
      .section { padding: 80px 24px; }
      .section-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
      .section-header-sub { border-left: none; padding-left: 0; border-top: 1px solid rgba(0,229,240,0.2); padding-top: 20px; }
      .servicios-grid { grid-template-columns: 1fr; }
      .enfoque-layout { grid-template-columns: 1fr; gap: 48px; }
      .enfoque-visual { order: -1; }
      .tec-grid { grid-template-columns: repeat(2,1fr); }
      .cta-card { padding: 56px 48px; }
      .footer-inner { padding: 20px 24px; }
    }

    @media (max-width: 700px) {
      nav { padding: 0 20px; }
      .nav-links { display: none; }
      .hero { grid-template-columns: 1fr; grid-template-rows: auto auto; padding: 100px 24px 80px; text-align: center; gap: 36px; }
      .hero-left { order: 1; }
      .hero-logo-wrap { width: 160px; height: 160px; }
      .hero-right { order: 2; align-items: center; padding-left: 0; }
      .hero-right::before { display: none; }
      .hero-title { font-size: clamp(28px,7vw,36px); }
      .hero-actions { justify-content: center; }
      .hero-stats { flex-direction: column; width: 100%; max-width: 260px; }
      .stat-item + .stat-item::before { top: 0; bottom: auto; left: 20%; right: 20%; width: auto; height: 1px; }
      .stat-item { padding: 14px 20px; }
      .service-card { padding: 28px 22px; }
      .enfoque-metrics { grid-template-columns: 1fr 1fr; }
      .tec-grid { grid-template-columns: 1fr; }
      .cta-card { padding: 40px 24px; border-radius: 16px; }
      .cta-divider { justify-content: center; }
      .cta-tagline-final { display: none; }
      .footer-inner { flex-direction: column; text-align: center; gap: 10px; }
    }