/* ============================================================================
   NGN Costa Rica — sistema de diseño
   ----------------------------------------------------------------------------
   Hoja escrita a mano, sin build. El CSS de Tailwind del sitio está compilado y
   congelado: solo trae las clases que ya se usaban, así que las clases nuevas de
   Tailwind no harían nada. Todo lo nuevo vive acá.

   Criterios (skill de diseño de Apple):
   · La respuesta al toque ocurre en el pointerdown, no al soltar.
   · El movimiento usa curvas tipo resorte, no duraciones planas.
   · Los materiales translúcidos dan jerarquía; el contenido pasa por debajo.
   · El tracking depende del tamaño: negativo en títulos, neutro en el cuerpo.
   · Se respetan de verdad reduced-motion, reduced-transparency y contrast.
   ========================================================================== */

@layer tokens, base, layout, components, utilities;

/* ── Tokens ───────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* Marca. El azul sale del sitio actual, no se inventó. */
    --ngn-blue-50: #eff6ff;
    --ngn-blue-100: #dbeafe;
    --ngn-blue-200: #bfdbfe;
    --ngn-blue-400: #60a5fa;
    --ngn-blue-500: #3b82f6;
    --ngn-blue: #2563eb;
    --ngn-blue-700: #1d4ed8;
    --ngn-blue-800: #1e40af;

    /* Navy y turquesa: muestreados del logo real (#00305e y #58b0bc), no
       inventados. La web venía usando solo el azul de Tailwind, que no es el
       color de la marca; el navy y el turquesa son los que la identifican. */
    --ngn-navy-950: #001c3a;
    --ngn-navy-900: #00305e;
    --ngn-navy-800: #06457f;
    --ngn-navy-700: #0d5b9f;

    --ngn-teal-50: #eefafb;
    --ngn-teal-100: #d3f0f3;
    --ngn-teal-200: #a8e0e6;
    --ngn-teal: #58b0bc;
    --ngn-teal-600: #3d919d;
    --ngn-teal-700: #2c717c;

    /* Neutros cálidos: menos clínicos que el gris puro. */
    --ngn-ink: #0d1117;
    --ngn-ink-2: #2c333d;
    --ngn-ink-3: #5a6472;
    --ngn-ink-4: #8b95a3;
    --ngn-line: #e3e7ed;
    --ngn-line-soft: #eef1f5;
    --ngn-surface: #ffffff;
    --ngn-surface-2: #f7f9fc;
    --ngn-surface-3: #eff3f8;

    --ngn-success: #0f9d58;
    --ngn-warning: #b45309;
    --ngn-danger: #d92d20;

    /* Tipografía: la del sistema primero — ya trae tracking y legibilidad
       afinados por el fabricante. Se sobreescribe solo con un motivo. */
    --ngn-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
      system-ui, 'Helvetica Neue', Arial, sans-serif;
    --ngn-font-num: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

    /* Espacio en rem: si el usuario agranda la letra, el layout acompaña. */
    --ngn-1: 0.25rem;
    --ngn-2: 0.5rem;
    --ngn-3: 0.75rem;
    --ngn-4: 1rem;
    --ngn-5: 1.5rem;
    --ngn-6: 2rem;
    --ngn-7: 3rem;
    --ngn-8: 4rem;
    --ngn-9: 6rem;

    --ngn-radius-sm: 0.5rem;
    --ngn-radius: 0.875rem;
    --ngn-radius-lg: 1.25rem;
    --ngn-radius-xl: 1.75rem;

    /* Sombras de dos capas: un contacto cerrado y una difusión amplia.
       Una sola sombra siempre se ve pegada o flotando de más. */
    --ngn-shadow-sm: 0 1px 2px rgb(13 17 23 / 0.05), 0 1px 3px rgb(13 17 23 / 0.04);
    --ngn-shadow: 0 1px 2px rgb(13 17 23 / 0.05), 0 8px 24px -8px rgb(13 17 23 / 0.1);
    --ngn-shadow-lg: 0 2px 4px rgb(13 17 23 / 0.04), 0 20px 48px -16px rgb(13 17 23 / 0.16);
    --ngn-shadow-blue: 0 1px 2px rgb(37 99 235 / 0.2), 0 12px 28px -10px rgb(37 99 235 / 0.45);

    /* Curvas tipo resorte. La "spring" sobrepasa apenas: se reserva para lo que
       el usuario empujó. La "out" es crítica (no rebota) y es la de por defecto. */
    --ngn-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
    --ngn-ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1);
    --ngn-fast: 140ms;
    --ngn-base: 260ms;
    --ngn-slow: 420ms;

    --ngn-container: 76rem;
    --ngn-measure: 40rem; /* ancho de lectura cómodo */
  }
}

/* ── Base ─────────────────────────────────────────────────────────────── */
@layer base {
  .ngn {
    font-family: var(--ngn-font);
    color: var(--ngn-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .ngn :where(h1, h2, h3, h4) {
    font-weight: 700;
    color: var(--ngn-ink);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  /* El tracking cambia con el tamaño: las letras de un título grande se leen
     demasiado separadas, y las de un texto chico demasiado juntas. */
  .ngn-display {
    font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 700;
  }
  .ngn-h1 {
    font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  .ngn-h2 {
    font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.5rem);
    line-height: 1.14;
    letter-spacing: -0.025em;
  }
  .ngn-h3 {
    font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.5rem);
    line-height: 1.26;
    letter-spacing: -0.015em;
  }
  .ngn-h4 {
    font-size: 1.0625rem;
    line-height: 1.35;
    letter-spacing: -0.008em;
    font-weight: 650;
  }

  .ngn-lead {
    font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
    line-height: 1.55;
    letter-spacing: -0.011em;
    color: var(--ngn-ink-2);
    max-width: var(--ngn-measure);
  }
  .ngn-body {
    font-size: 1.0625rem;
    line-height: 1.65;
    letter-spacing: -0.006em;
    color: var(--ngn-ink-2);
    max-width: var(--ngn-measure);
  }
  .ngn-small {
    font-size: 0.9375rem;
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--ngn-ink-3);
  }
  /* Texto chico: tracking levemente positivo, que es lo que pide la legibilidad. */
  .ngn-eyebrow {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    color: var(--ngn-blue);
    display: flex;
    align-items: center;
    gap: var(--ngn-2);
  }
  .ngn-eyebrow--teal { color: var(--ngn-teal-700); }

  .ngn-eyebrow::before {
    content: '';
    width: 1.5rem;
    height: 1.5px;
    background: currentColor;
    opacity: 0.5;
    flex: none;
  }

  .ngn-center { text-align: center; }
  .ngn-center :where(.ngn-lead, .ngn-body) { margin-inline: auto; }
  .ngn-center .ngn-eyebrow { justify-content: center; }

  /* El foco se ve siempre, y no lo pisa ningún componente. */
  .ngn :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--ngn-blue);
    outline-offset: 3px;
    border-radius: var(--ngn-radius-sm);
  }
}

/* ── Layout ───────────────────────────────────────────────────────────── */
@layer layout {
  .ngn-wrap {
    width: 100%;
    max-width: var(--ngn-container);
    margin-inline: auto;
    padding-inline: max(var(--ngn-5), env(safe-area-inset-left));
  }
  @media (max-width: 40rem) {
    .ngn-wrap { padding-inline: var(--ngn-4); }
  }

  .ngn-section {
    padding-block: clamp(var(--ngn-7), 6vw, var(--ngn-9));
  }
  .ngn-section--tight { padding-block: clamp(var(--ngn-6), 4vw, var(--ngn-7)); }
  .ngn-section--alt { background: var(--ngn-surface-2); }
  .ngn-section--dark {
    background: var(--ngn-navy-900);
    color: #fff;
  }
  .ngn-section--dark :where(h1, h2, h3, h4) { color: #fff; }
  .ngn-section--dark :where(.ngn-lead, .ngn-body) { color: #c3cedd; }
  .ngn-section--dark .ngn-small { color: #94a3b8; }
  .ngn-section--dark .ngn-eyebrow { color: var(--ngn-blue-400); }

  .ngn-head { margin-bottom: clamp(var(--ngn-6), 4vw, var(--ngn-7)); }
  .ngn-head > * + * { margin-top: var(--ngn-3); }

  .ngn-grid {
    display: grid;
    gap: clamp(var(--ngn-4), 2vw, var(--ngn-5));
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  }
  .ngn-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
  .ngn-stack > * + * { margin-top: var(--ngn-4); }
}

/* ── Componentes ──────────────────────────────────────────────────────── */
@layer components {
  /* Botones ------------------------------------------------------------- */
  .ngn-btn {
    --_bg: var(--ngn-blue);
    --_fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ngn-2);
    padding: 0.8125rem 1.375rem;
    min-height: 2.875rem;
    border: 1px solid transparent;
    border-radius: var(--ngn-radius);
    background: var(--_bg);
    color: var(--_fg);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--ngn-shadow-blue);
    /* Solo transform y opacity: son las que el compositor mueve sin repintar. */
    transition:
      transform var(--ngn-fast) var(--ngn-ease-out),
      box-shadow var(--ngn-base) var(--ngn-ease-out),
      background-color var(--ngn-fast) linear;
  }
  .ngn-btn:hover { background: var(--ngn-blue-700); box-shadow: var(--ngn-shadow-lg); }
  /* La respuesta ocurre al presionar, no al soltar. */
  .ngn-btn:active { transform: scale(0.972); transition-duration: 60ms; }

  .ngn-btn--ghost {
    --_bg: transparent;
    --_fg: var(--ngn-ink);
    border-color: var(--ngn-line);
    box-shadow: var(--ngn-shadow-sm);
  }
  .ngn-btn--ghost:hover { background: var(--ngn-surface-2); border-color: var(--ngn-ink-4); box-shadow: var(--ngn-shadow); }

  .ngn-btn--onDark {
    --_bg: rgb(255 255 255 / 0.1);
    --_fg: #fff;
    border-color: rgb(255 255 255 / 0.22);
    backdrop-filter: blur(12px) saturate(150%);
    box-shadow: none;
  }
  .ngn-btn--onDark:hover { background: rgb(255 255 255 / 0.18); box-shadow: none; }

  .ngn-btn--lg { padding: 1rem 1.75rem; min-height: 3.25rem; font-size: 1.0625rem; }
  .ngn-btn--full { width: 100%; }
  .ngn-btn .ngn-i { width: 1.125em; height: 1.125em; }

  /* La flecha se adelanta al hover: insinúa hacia dónde va. */
  .ngn-btn--arrow .ngn-i:last-child {
    transition: transform var(--ngn-base) var(--ngn-ease-spring);
  }
  .ngn-btn--arrow:hover .ngn-i:last-child { transform: translateX(3px); }

  /* Tarjetas ------------------------------------------------------------ */
  .ngn-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ngn-3);
    padding: clamp(var(--ngn-5), 2.4vw, var(--ngn-6));
    background: var(--ngn-surface);
    border: 1px solid var(--ngn-line);
    border-radius: var(--ngn-radius-lg);
    box-shadow: var(--ngn-shadow-sm);
    transition:
      transform var(--ngn-base) var(--ngn-ease-out),
      box-shadow var(--ngn-base) var(--ngn-ease-out),
      border-color var(--ngn-base) var(--ngn-ease-out);
  }
  .ngn-card > * { margin: 0; }
  .ngn-card .ngn-body { max-width: none; }

  a.ngn-card,
  .ngn-card--link { text-decoration: none; color: inherit; }
  a.ngn-card:hover,
  .ngn-card--hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--ngn-shadow-lg);
    border-color: var(--ngn-blue-200);
  }
  a.ngn-card:active { transform: translateY(-1px) scale(0.995); transition-duration: 70ms; }

  .ngn-card--dark {
    background: var(--ngn-navy-800);
    border-color: rgb(255 255 255 / 0.1);
    color: #fff;
  }
  .ngn-card--dark :where(h2, h3, h4) { color: #fff; }
  .ngn-card--dark .ngn-body { color: #b8c5d6; }

  /* El acento azul aparece al pasar: presencia sin ruido permanente. */
  .ngn-card--accent::before {
    content: '';
    position: absolute;
    inset: -1px -1px auto;
    height: 3px;
    border-radius: var(--ngn-radius-lg) var(--ngn-radius-lg) 0 0;
    background: linear-gradient(90deg, var(--ngn-blue), var(--ngn-blue-400));
    opacity: 0;
    transition: opacity var(--ngn-base) var(--ngn-ease-out);
  }
  .ngn-card--accent:hover::before { opacity: 1; }

  /* Iconos -------------------------------------------------------------- */
  .ngn-i {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.16em;
  }
  .ngn-i--lg { width: 1.75rem; height: 1.75rem; }

  /* Marco del icono de una tarjeta: cuadrado suave, no un emoji suelto. */
  .ngn-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--ngn-radius);
    background: linear-gradient(145deg, var(--ngn-blue-50), var(--ngn-blue-100));
    color: var(--ngn-blue-700);
    border: 1px solid var(--ngn-blue-200);
    flex: none;
  }
  .ngn-icon-box .ngn-i { width: 1.5rem; height: 1.5rem; }
  .ngn-card--dark .ngn-icon-box {
    background: rgb(37 99 235 / 0.18);
    border-color: rgb(96 165 250 / 0.3);
    color: var(--ngn-blue-400);
  }

  /* Listas de características ------------------------------------------ */
  .ngn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ngn-3); }
  .ngn-list li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: var(--ngn-3);
    align-items: start;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ngn-ink-2);
  }
  .ngn-list .ngn-i { margin-top: 0.22em; color: var(--ngn-blue); }
  .ngn-list--check .ngn-i { color: var(--ngn-success); }
  .ngn-list--cross .ngn-i { color: var(--ngn-danger); }
  .ngn-section--dark .ngn-list li { color: #c3cedd; }

  /* Acento turquesa: el color con el que el logo representa la señal. Se
     reserva para lo que habla de cobertura y conectividad. */
  .ngn-icon-box--teal {
    background: linear-gradient(145deg, var(--ngn-teal-50), var(--ngn-teal-100));
    border-color: var(--ngn-teal-200);
    color: var(--ngn-teal-700);
  }
  .ngn-btn--teal {
    --_bg: var(--ngn-teal);
    --_fg: #06262b;
    font-weight: 650;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 12px 28px -12px rgb(88 176 188 / 0.65);
  }
  .ngn-btn--teal:hover { background: #6ec3ce; }

  /* Etiquetas ----------------------------------------------------------- */
  .ngn-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ngn-2);
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    background: var(--ngn-blue-50);
    color: var(--ngn-blue-700);
    border: 1px solid var(--ngn-blue-200);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.005em;
  }
  .ngn-badge--onDark {
    background: rgb(255 255 255 / 0.1);
    border-color: rgb(255 255 255 / 0.2);
    color: #dbeafe;
    backdrop-filter: blur(10px);
  }
  .ngn-badge .ngn-i { width: 0.9375rem; height: 0.9375rem; }

  /* Navegación ---------------------------------------------------------- */
  /* Material translúcido: el contenido pasa por debajo, no queda una franja
     opaca comiéndose la pantalla. El borde aparece solo cuando hay algo
     debajo que separar; mientras la página está arriba, la barra flota. */
  .ngn-nav {
    --_h: 3.5rem;
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgb(255 255 255 / 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid transparent;
    transition:
      border-color var(--ngn-base) var(--ngn-ease-out),
      background-color var(--ngn-base) var(--ngn-ease-out);
  }
  .ngn-nav[data-scrolled='true'] {
    border-bottom-color: var(--ngn-line);
    background: rgb(255 255 255 / 0.88);
  }
  .ngn-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--ngn-2);
    min-height: var(--_h);
  }

  /* Marca: el símbolo y el nombre corto. El nombre largo vive en el aria-label
     y en el pie; en 3.5rem de alto solo cabe lo que de verdad identifica. */
  .ngn-nav__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--ngn-ink);
    margin-right: auto;
    padding: 0.25rem 0.375rem 0.25rem 0;
    border-radius: var(--ngn-radius-sm);
    min-width: 0;
    transition: opacity var(--ngn-fast) linear;
  }
  .ngn-nav__brand:active { opacity: 0.6; }
  .ngn-nav__mark { height: 1.5rem; width: auto; flex: none; display: block; }
  .ngn-nav__word {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.021em;
    color: var(--ngn-ink-2);
    white-space: nowrap;
  }
  .ngn-nav__word b { font-weight: 700; color: var(--ngn-ink); letter-spacing: -0.01em; }
  @media (max-width: 22.5rem) {
    .ngn-nav__word { display: none; }
  }

  .ngn-nav__links {
    display: flex;
    align-items: center;
    gap: 0.125rem;
  }
  .ngn-nav__item { position: relative; }

  /* Enlaces y disparadores comparten forma: si se ven igual, se comportan
     igual. La única diferencia visible es el chevron. */
  .ngn-nav__link,
  .ngn-nav__trigger {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4375rem 0.6875rem;
    border: 0;
    border-radius: 0.625rem;
    background: transparent;
    color: var(--ngn-ink-2);
    text-decoration: none;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 550;
    letter-spacing: -0.005em;
    white-space: nowrap;
    cursor: pointer;
    transition:
      color var(--ngn-fast) linear,
      background-color var(--ngn-fast) linear;
  }
  .ngn-nav__link:hover,
  .ngn-nav__trigger:hover {
    color: var(--ngn-ink);
    background: rgb(13 17 23 / 0.05);
  }
  /* La respuesta ocurre al presionar, no al soltar. */
  .ngn-nav__link:active,
  .ngn-nav__trigger:active { background: rgb(13 17 23 / 0.09); }
  .ngn-nav__link[aria-current='page'] { color: var(--ngn-blue); }
  /* El grupo también se marca cuando la página abierta vive adentro: dónde
     estoy es la primera pregunta de cualquiera que llega a una pantalla. */
  .ngn-nav__trigger[data-current='true'] { color: var(--ngn-blue); }
  .ngn-nav__trigger[aria-expanded='true'] {
    color: var(--ngn-ink);
    background: rgb(13 17 23 / 0.06);
  }
  .ngn-nav__chev {
    width: 0.75rem;
    height: 0.75rem;
    flex: none;
    opacity: 0.55;
    transition: transform var(--ngn-base) var(--ngn-ease-out);
  }
  .ngn-nav__trigger[aria-expanded='true'] .ngn-nav__chev { transform: rotate(180deg); }

  /* Menú desplegable ----------------------------------------------------
     Nace del botón que lo abrió: el transform-origin está en esa esquina, así
     la relación entre disparador y contenido queda explícita. Se materializa
     (desenfoque + escala + opacidad a la vez), no es un simple fundido. */
  .ngn-nav__pop {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    z-index: 10;
    width: max-content;
    max-width: min(30rem, calc(100vw - 2rem));
    padding: var(--ngn-2);
    /* Casi sólido, a propósito. La barra ya es un material translúcido y
       apilarle otro encima hunde la legibilidad del texto chico. La jerarquía
       la da la sombra —superficie grande, sombra profunda—, no más vidrio. */
    background: rgb(255 255 255 / 0.985);
    border: 1px solid rgb(13 17 23 / 0.08);
    border-radius: var(--ngn-radius-lg);
    box-shadow: var(--ngn-shadow-lg);
    transform-origin: top center;
    transform: translateX(-50%) translateY(-0.5rem) scale(0.96);
    opacity: 0;
    visibility: hidden;
    transition:
      transform var(--ngn-base) var(--ngn-ease-out),
      opacity var(--ngn-fast) linear,
      visibility 0s linear var(--ngn-base);
  }
  .ngn-nav__item[data-open='true'] > .ngn-nav__pop {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .ngn-nav__pop--2 { max-width: min(40rem, calc(100vw - 2rem)); }
  .ngn-nav__pop-grid { display: grid; gap: 0.125rem; }
  .ngn-nav__pop--2 .ngn-nav__pop-grid { grid-template-columns: 1fr 1fr; }

  /* Cada fila es icono + nombre + para qué sirve. Un nombre solo obliga a
     adivinar; la línea de abajo es la que evita el clic de prueba. */
  .ngn-nav__tool {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    align-items: start;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: background-color var(--ngn-fast) linear;
  }
  .ngn-nav__tool:hover { background: rgb(37 99 235 / 0.07); }
  .ngn-nav__tool:active { background: rgb(37 99 235 / 0.12); }
  .ngn-nav__tool[aria-current='page'] { background: rgb(37 99 235 / 0.09); }
  .ngn-nav__tool-ico {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--ngn-blue-50);
    color: var(--ngn-blue);
    flex: none;
  }
  .ngn-nav__tool-ico .ngn-i { width: 1.125rem; height: 1.125rem; }
  .ngn-nav__tool-ico--teal { background: var(--ngn-teal-50); color: var(--ngn-teal-700); }
  .ngn-nav__tool-t {
    display: block;
    font-size: 0.9375rem;
    font-weight: 620;
    letter-spacing: -0.01em;
    color: var(--ngn-ink);
    line-height: 1.3;
  }
  .ngn-nav__tool-d {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--ngn-ink-3);
    max-width: 17rem;
  }
  .ngn-nav__tool-n {
    display: inline-block;
    margin-left: 0.4375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    background: var(--ngn-teal-100);
    color: var(--ngn-teal-700);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 0.1em;
  }
  .ngn-nav__pop-foot {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: var(--ngn-2);
    padding: 0.625rem 0.75rem;
    border-top: 1px solid var(--ngn-line-soft);
    color: var(--ngn-blue);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 0.75rem 0.75rem;
    transition: background-color var(--ngn-fast) linear;
  }
  .ngn-nav__pop-foot:hover { background: rgb(37 99 235 / 0.07); }
  .ngn-nav__pop-foot .ngn-i {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform var(--ngn-base) var(--ngn-ease-out);
  }
  .ngn-nav__pop-foot:hover .ngn-i { transform: translateX(3px); }

  .ngn-nav__cta { margin-left: 0.5rem; padding: 0.5rem 1rem; min-height: 2.375rem; font-size: 0.9375rem; }
  .ngn-nav__cta .ngn-i { width: 1rem; height: 1rem; }

  /* Botón del menú: dos trazos que se cruzan. El mismo camino de ida y de
     vuelta, para que abrir y cerrar se lean como una sola cosa. */
  .ngn-nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 0.25rem;
    border: 1px solid var(--ngn-line);
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 0.6);
    color: var(--ngn-ink);
    cursor: pointer;
    transition:
      transform var(--ngn-fast) var(--ngn-ease-out),
      background-color var(--ngn-fast) linear;
  }
  .ngn-nav__toggle:active { transform: scale(0.94); background: var(--ngn-surface-3); }
  .ngn-nav__burger { display: block; width: 1.125rem; height: 0.75rem; position: relative; }
  .ngn-nav__burger i {
    position: absolute;
    left: 0;
    height: 1.5px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--ngn-base) var(--ngn-ease-spring);
  }
  .ngn-nav__burger i:first-child { top: 0.0625rem; }
  .ngn-nav__burger i:last-child { bottom: 0.0625rem; }
  .ngn-nav[data-open='true'] .ngn-nav__burger i:first-child { transform: translateY(0.3125rem) rotate(45deg); }
  .ngn-nav[data-open='true'] .ngn-nav__burger i:last-child { transform: translateY(-0.3125rem) rotate(-45deg); }

  /* Hasta 60rem el menú es una hoja que baja desde la barra ---------------
     Entra y sale por el mismo camino. Los grupos se abren en el sitio, sin
     mandar a nadie a una segunda pantalla de la que después hay que volver. */
  @media (max-width: 60rem) {
    .ngn-nav__links {
      position: fixed;
      inset: var(--_h) 0 auto;
      display: block;
      max-height: calc(100dvh - var(--_h));
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--ngn-3) var(--ngn-4) calc(var(--ngn-5) + env(safe-area-inset-bottom));
      /* Misma razón que el panel de escritorio: la hoja cae sobre la barra
         translúcida, así que ella es la superficie sólida de las dos. */
      background: rgb(255 255 255 / 0.985);
      border-bottom: 1px solid var(--ngn-line);
      box-shadow: var(--ngn-shadow-lg);
      transform-origin: top center;
      transform: translateY(-0.5rem) scaleY(0.98);
      opacity: 0;
      visibility: hidden;
      transition:
        transform var(--ngn-base) var(--ngn-ease-out),
        opacity var(--ngn-fast) linear,
        visibility 0s linear var(--ngn-base);
    }
    .ngn-nav[data-open='true'] .ngn-nav__links {
      transform: none;
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }
    .ngn-nav__link,
    .ngn-nav__trigger {
      width: 100%;
      justify-content: space-between;
      padding: 0.8125rem 0.75rem;
      font-size: 1.0625rem;
      border-radius: 0.75rem;
    }
    .ngn-nav__item + .ngn-nav__item,
    .ngn-nav__links > .ngn-nav__link + .ngn-nav__link { border-top: 1px solid var(--ngn-line-soft); }

    /* En la hoja el grupo no flota: se despliega en su lugar, con una altura
       animada, para no perder de vista de dónde salió. */
    .ngn-nav__pop {
      position: static;
      width: auto;
      max-width: none;
      padding: 0 0 0 0.5rem;
      margin: 0;
      background: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      transform: none;
      opacity: 1;
      visibility: visible;
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows var(--ngn-base) var(--ngn-ease-out);
    }
    .ngn-nav__item[data-open='true'] > .ngn-nav__pop {
      grid-template-rows: 1fr;
      transform: none;
    }
    .ngn-nav__pop > * { overflow: hidden; min-height: 0; }
    .ngn-nav__pop--2 .ngn-nav__pop-grid { grid-template-columns: 1fr; }
    .ngn-nav__pop-grid { padding-bottom: 0.5rem; }
    .ngn-nav__tool-d { max-width: none; }
    .ngn-nav__pop-foot { margin: 0 0 0.5rem; }
    .ngn-nav__cta { margin: var(--ngn-4) 0 0; width: 100%; min-height: 2.875rem; }
    .ngn-nav__toggle { display: inline-flex; }
  }

  /* Botón flotante de WhatsApp -------------------------------------------
     Vive en la esquina inferior derecha de todas las páginas. En escritorio
     muestra la etiqueta al acercarse; en móvil es solo el círculo, que es lo
     que cabe sin taparle nada a nadie. */
  .ngn-wa {
    position: fixed;
    z-index: 70;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 3.5rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    font-weight: 620;
    font-size: 0.9375rem;
    letter-spacing: -0.005em;
    box-shadow:
      0 1px 2px rgb(13 17 23 / 0.12),
      0 12px 28px -8px rgb(18 140 70 / 0.5);
    transition:
      transform var(--ngn-base) var(--ngn-ease-spring),
      box-shadow var(--ngn-base) var(--ngn-ease-out);
  }
  .ngn-wa__ico { width: 1.75rem; height: 1.75rem; flex: none; display: block; }
  .ngn-wa__txt {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition:
      max-width var(--ngn-base) var(--ngn-ease-out),
      opacity var(--ngn-fast) linear,
      margin-left var(--ngn-base) var(--ngn-ease-out);
  }
  @media (hover: hover) and (min-width: 48rem) {
    .ngn-wa:hover {
      transform: translateY(-2px);
      box-shadow:
        0 2px 4px rgb(13 17 23 / 0.12),
        0 18px 36px -10px rgb(18 140 70 / 0.55);
    }
    .ngn-wa:hover .ngn-wa__txt,
    .ngn-wa:focus-visible .ngn-wa__txt {
      max-width: 9rem;
      opacity: 1;
      margin-left: 0.625rem;
    }
  }
  .ngn-wa:active { transform: scale(0.94); }
  /* Aparece una vez, desde su propia esquina. No parpadea ni late: un botón
     que se mueve solo para siempre termina siendo ruido que se ignora. */
  .ngn-wa {
    animation: ngn-wa-in var(--ngn-slow) var(--ngn-ease-spring) 600ms backwards;
    transform-origin: bottom right;
  }
  @keyframes ngn-wa-in {
    from { opacity: 0; transform: scale(0.6) translateY(0.5rem); }
    to { opacity: 1; transform: none; }
  }

  /* Hero ---------------------------------------------------------------- */
  .ngn-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: min(44rem, 88svh);
    padding-block: clamp(var(--ngn-8), 10vw, var(--ngn-9));
    background: var(--ngn-navy-950);
    color: #fff;
    overflow: hidden;
  }
  .ngn-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Dos capas: un velo que baja el brillo y un degradado que arma el piso
     donde apoya el texto. Con una sola, o se lava la foto o no se lee. */
  .ngn-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(120% 80% at 50% 0%, rgb(0 28 58 / 0.32), rgb(0 28 58 / 0.86) 70%),
      linear-gradient(180deg, rgb(0 28 58 / 0.5), rgb(0 28 58 / 0.93));
  }
  .ngn-hero :where(h1, h2) { color: #fff; }
  .ngn-hero .ngn-lead { color: #c9d6e6; }
  .ngn-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ngn-3);
    margin-top: var(--ngn-6);
  }
  .ngn-hero__logo { height: clamp(3.5rem, 8vw, 5rem); width: auto; margin-bottom: var(--ngn-5); }

  /* Formularios --------------------------------------------------------- */
  .ngn-field { display: grid; gap: var(--ngn-2); }
  .ngn-field > span { font-size: 0.9375rem; font-weight: 600; color: var(--ngn-ink-2); }
  .ngn-field :where(input, textarea, select) {
    width: 100%;
    padding: 0.8125rem 1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--ngn-ink);
    background: var(--ngn-surface);
    border: 1px solid var(--ngn-line);
    border-radius: var(--ngn-radius);
    box-shadow: var(--ngn-shadow-sm);
    transition: border-color var(--ngn-fast) linear, box-shadow var(--ngn-fast) linear;
  }
  .ngn-field :where(input, textarea):focus {
    border-color: var(--ngn-blue);
    box-shadow: 0 0 0 4px rgb(37 99 235 / 0.12);
    outline: none;
  }
  .ngn-field textarea { min-height: 8rem; resize: vertical; }
  .ngn-req { color: var(--ngn-danger); }

  /* Pie ----------------------------------------------------------------- */
  .ngn-footer {
    background: var(--ngn-navy-950);
    color: #a8b6c8;
    padding-block: var(--ngn-7) var(--ngn-6);
  }
  .ngn-footer a { color: #d6e0ec; text-decoration: none; }
  .ngn-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .ngn-footer__grid {
    display: grid;
    gap: var(--ngn-6);
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    padding-bottom: var(--ngn-6);
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
  }
  .ngn-footer__title {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    color: #7c8ba0;
    margin: 0 0 var(--ngn-3);
  }
  .ngn-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ngn-2); font-size: 0.9375rem; }
  .ngn-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ngn-3) var(--ngn-5);
    align-items: center;
    justify-content: space-between;
    padding-top: var(--ngn-5);
    font-size: 0.875rem;
  }
}

/* ── Utilidades y movimiento ──────────────────────────────────────────── */
@layer utilities {
  .ngn-flow > * + * { margin-top: var(--ngn-4); }
  .ngn-mt-5 { margin-top: var(--ngn-5); }
  .ngn-mt-6 { margin-top: var(--ngn-6); }
  .ngn-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Aparición al entrar en pantalla. Corta (no es un espectáculo) y con un
     desplazamiento chico: lo suficiente para dar orden de lectura. */
  .ngn-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity var(--ngn-slow) var(--ngn-ease-out),
      transform var(--ngn-slow) var(--ngn-ease-out);
  }
  .ngn-reveal[data-shown='true'] { opacity: 1; transform: none; }
  /* Sin JS, el contenido se ve igual: nunca se esconde nada de forma permanente. */
  .no-js .ngn-reveal { opacity: 1; transform: none; }
}

/* ── Preferencias del usuario ─────────────────────────────────────────── */

/* Movimiento reducido no es "sin respuesta": es una respuesta más suave.
   Se quedan los cambios de opacidad y color, se va todo lo que desplaza. */
@media (prefers-reduced-motion: reduce) {
  .ngn *,
  .ngn *::before,
  .ngn *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
  .ngn-reveal { opacity: 1; transform: none; transition: none; }
  .ngn-btn:active { transform: none; }
  a.ngn-card:hover, .ngn-card--hover:hover { transform: none; }
  /* Sin desplazamientos: los menús aparecen y desaparecen con un fundido
     corto, que sigue diciendo lo mismo sin mover la pantalla. */
  .ngn-nav__links,
  .ngn-nav__pop {
    transition: opacity 120ms linear, visibility 0s !important;
    transform: none !important;
  }
  .ngn-nav__burger i { transition: none; }
  .ngn-nav__chev { transition: none; }
  .ngn-wa { animation: none; }
  .ngn-wa:hover { transform: none; }
}

/* Transparencia reducida: los materiales se vuelven sólidos, no borrosos. */
@media (prefers-reduced-transparency: reduce) {
  .ngn-nav,
  .ngn-nav[data-scrolled='true'],
  .ngn-nav__links,
  .ngn-nav__pop {
    background: var(--ngn-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .ngn-nav__toggle { background: var(--ngn-surface); }
  .ngn-btn--onDark, .ngn-badge--onDark { backdrop-filter: none; background: rgb(255 255 255 / 0.16); }
}

/* Más contraste: fondos casi sólidos y bordes definidos. */
@media (prefers-contrast: more) {
  :root {
    --ngn-ink-2: #1c222b;
    --ngn-ink-3: #3d4652;
    --ngn-line: #b9c1cc;
  }
  .ngn-card { border-width: 1.5px; }
  .ngn-nav { background: var(--ngn-surface); backdrop-filter: none; }
  .ngn-nav__pop { background: var(--ngn-surface); backdrop-filter: none; border-color: var(--ngn-ink-4); }
}

/* ============================================================================
   Cabecera de las páginas de servicio
   ----------------------------------------------------------------------------
   Reemplaza el degradado azul genérico que traían. Tres decisiones:
   · El color es el navy de la marca, no un azul de plantilla.
   · El símbolo del logo aparece como motivo grande y tenue: liga cada página
     con la identidad sin gritar.
   · El texto va a la izquierda, con la foto al lado. Todo centrado es la
     disposición por defecto de cualquier plantilla; esto se lee como página
     hecha a propósito.
   ========================================================================== */
@layer components {
  .ngn-cab {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ngn-navy-950);
    color: #fff;
    padding-block: clamp(var(--ngn-7), 7vw, var(--ngn-9));
  }

  /* Fondo: la foto del servicio, hundida hasta ser textura. */
  .ngn-cab__foto {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    /* Baja y desaturada: es textura, no protagonista. Si se ve la foto, compite
       con el texto y el resultado es el típico banner con imagen de archivo. */
    opacity: 0.16;
    filter: grayscale(0.55) contrast(1.1);
  }

  /* Velo: da el piso de contraste para el texto y tiñe la foto de navy.
     Dos capas, porque una sola o lava la foto o no deja leer. */
  .ngn-cab::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
      linear-gradient(100deg, var(--ngn-navy-950) 26%, rgb(0 28 58 / 0.86) 62%, rgb(0 48 94 / 0.7)),
      radial-gradient(85% 110% at 92% 8%, rgb(88 176 188 / 0.2), transparent 58%);
  }

  /* Motivo del logo: las barras que convergen, enormes y casi invisibles.
     Es lo que hace que la página se sienta de NGN y no de una plantilla. */
  .ngn-cab__motivo {
    position: absolute;
    top: 50%;
    right: -6%;
    z-index: -1;
    width: min(34rem, 46%);
    transform: translateY(-50%);
    opacity: 0.1;
    pointer-events: none;
    /* Se desvanece hacia la izquierda para no competir con el contenido:
       queda como una marca de agua anclada al borde, no como un dibujo suelto. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
    mask-image: linear-gradient(90deg, transparent, #000 45%);
  }
  @media (max-width: 64rem) {
    .ngn-cab__motivo { right: -20%; width: 70%; opacity: 0.07; }
  }

  .ngn-cab__grid {
    display: grid;
    gap: clamp(var(--ngn-5), 4vw, var(--ngn-7));
    align-items: center;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  @media (max-width: 64rem) {
    .ngn-cab__grid { grid-template-columns: 1fr; }
    .ngn-cab__lado { display: none; }
  }

  .ngn-cab h1 {
    font-size: clamp(2.125rem, 1.2rem + 3.2vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -0.033em;
    color: #fff;
    margin: 0;
  }
  /* El segundo renglón del título, en turquesa: el color con el que el logo
     marca la señal. Sirve de firma en todas las páginas. */
  .ngn-cab h1 .ngn-cab__linea2 {
    display: block;
    margin-top: 0.25em;
    color: var(--ngn-teal);
    font-weight: 650;
  }
  .ngn-cab__entrada {
    font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
    line-height: 1.55;
    letter-spacing: -0.011em;
    color: #c5d4e4;
    max-width: 38rem;
    margin: var(--ngn-5) 0 0;
  }
  .ngn-cab__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ngn-3);
    margin-top: var(--ngn-6);
  }

  /* Datos de respaldo: dan peso sin ocupar un bloque entero. */
  .ngn-cab__datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ngn-5) var(--ngn-7);
    margin-top: var(--ngn-6);
    padding-top: var(--ngn-5);
    border-top: 1px solid rgb(255 255 255 / 0.14);
    list-style: none;
  }
  .ngn-cab__datos li { margin: 0; }
  .ngn-cab__dato-n {
    display: block;
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1.1;
  }
  .ngn-cab__dato-t {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    color: #90a4bb;
  }

  /* Tarjeta lateral: el resumen de lo que incluye el servicio. */
  .ngn-cab__lado {
    padding: var(--ngn-5);
    border-radius: var(--ngn-radius-lg);
    background: rgb(255 255 255 / 0.07);
    border: 1px solid rgb(255 255 255 / 0.14);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.7);
  }
  .ngn-cab__lado h2 {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    color: var(--ngn-teal);
    margin: 0 0 var(--ngn-4);
  }
  .ngn-cab__lado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ngn-3); }
  .ngn-cab__lado li {
    display: grid;
    grid-template-columns: 1.125rem 1fr;
    gap: var(--ngn-3);
    align-items: start;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #dbe5f0;
  }
  .ngn-cab__lado .ngn-i { width: 1.125rem; height: 1.125rem; margin-top: 0.15em; color: var(--ngn-teal); }

  /* Migas: dentro de la cabecera, no en una franja gris aparte. */
  .ngn-migas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 var(--ngn-5);
    padding: 0;
    font-size: 0.875rem;
    color: #8fa3ba;
  }
  .ngn-migas a { color: #b9c9db; text-decoration: none; }
  .ngn-migas a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .ngn-migas li[aria-current='page'] { color: #fff; }
  .ngn-migas .ngn-i { width: 1rem; height: 1rem; opacity: 0.5; }
}

@media (prefers-reduced-transparency: reduce) {
  .ngn-cab__lado { background: rgb(0 48 94 / 0.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Icono dentro de un texto corrido: se dimensiona con la letra que lo rodea,
   hereda su color y se apoya en la línea base. Es lo que reemplaza a los
   emojis, que cambiaban de forma en cada sistema y no tomaban el color. */
.ngn-ico {
  display: inline-block;
  width: 1.08em;
  height: 1.08em;
  vertical-align: -0.17em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Las viñetas de sí/no se leen mejor con color propio. */
.ngn-ico--si { color: var(--ngn-success); }
.ngn-ico--no { color: var(--ngn-danger); }
/* Cuando el icono abre una tarjeta, va más grande y en el azul de la marca. */
.ngn-ico--titulo { width: 1.5em; height: 1.5em; vertical-align: -0.3em; color: var(--ngn-blue); }

/* ----------------------------------------------------------------------------
   Icono que encabeza una tarjeta.

   En las páginas generadas el emoji vivía solo dentro de un <div class="text-4xl">.
   Al reemplazarlo por un icono quedaba un dibujo negro suelto, casi tan pobre
   como el emoji; acá se convierte en una pieza con el color y el marco de la marca.

   OJO: qué icono es "de bloque" lo decide el script al transformar la página,
   no este CSS. Se intentó con `:has(> .ngn-ico:only-child)` y estaba MAL:
   `:only-child` solo mira elementos hermanos e ignora el texto, así que un
   título como `<h3><svg/> Comercio y retail</h3>` también cumplía la regla y el
   título entero se convertía en una cajita de 52 px con letra de 16. Por eso el
   script marca con `.ngn-ico--bloque` únicamente los iconos que son todo el
   contenido de su elemento padre.
   -------------------------------------------------------------------------- */
:where(div, span, p):has(> .ngn-ico--bloque:only-child) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1rem; /* anula el text-4xl heredado: si no, el icono sale enorme */
  line-height: 1;
  border-radius: var(--ngn-radius, 0.875rem);
  background: linear-gradient(145deg, #eff6ff, #dbeafe);
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}
.ngn-ico--bloque {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: 0;
  stroke-width: 1.6;
}

/* Sobre fondo oscuro el marco se invierte, para no abrir un agujero claro. */
.ngn-banda :where(div, span, p):has(> .ngn-ico--bloque:only-child),
[class*='bg-gray-900'] :where(div, span, p):has(> .ngn-ico--bloque:only-child),
[class*='bg-slate-900'] :where(div, span, p):has(> .ngn-ico--bloque:only-child) {
  background: rgb(37 99 235 / 0.18);
  border-color: rgb(96 165 250 / 0.3);
  color: #93c5fd;
}

/* Icono que abre un título: se separa un poco del texto y toma el color del
   título, que suele ser el azul de la marca. */
:where(h1, h2, h3, h4, h5, strong) > .ngn-ico:first-child {
  margin-right: 0.3em;
  vertical-align: -0.14em;
}

/* ----------------------------------------------------------------------------
   Banda oscura de sección (casos de éxito, cierre de página).

   Reemplaza los degradados azules en línea que traían las páginas. Usa el navy
   de la marca y el mismo motivo del logo que la cabecera, para que la página
   se lea como una sola pieza y no como bloques pegados de plantillas distintas.
   -------------------------------------------------------------------------- */
.ngn-banda {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ngn-navy-900);
  color: #fff;
}
.ngn-banda::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(105deg, var(--ngn-navy-950) 20%, rgb(0 48 94 / 0.85) 70%),
    radial-gradient(70% 100% at 88% 0%, rgb(88 176 188 / 0.14), transparent 60%);
}
.ngn-banda::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -8%;
  z-index: -1;
  width: min(26rem, 40%);
  aspect-ratio: 253 / 188;
  transform: translateY(-50%);
  opacity: 0.08;
  background: url('/img/marca-ngn-claro.svg') center / contain no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%);
  mask-image: linear-gradient(90deg, transparent, #000 50%);
  pointer-events: none;
}
@media (max-width: 64rem) {
  .ngn-banda::after { opacity: 0.05; right: -22%; width: 64%; }
}
/* El texto heredado de estas secciones venía en tonos de gris claro. */
.ngn-banda :where(h2, h3, h4, strong) { color: #fff; }

/* ============================================================================
   Herramienta: la calculadora de subredes
   ----------------------------------------------------------------------------
   Los resultados son números que se leen de a uno y se copian a mano, así que
   van en cifras tabulares y con espacio para respirar. Cada dato lleva su
   explicación en una línea: la mitad de la gente que entra no sabe qué es un
   wildcard, y decirlo cuesta una línea.
   ========================================================================== */
@layer components {
  .ngn-calc {
    display: grid;
    gap: clamp(var(--ngn-5), 3vw, var(--ngn-6));
    align-items: start;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
  @media (max-width: 58rem) {
    .ngn-calc { grid-template-columns: 1fr; }
  }

  .ngn-calc__panel {
    padding: clamp(var(--ngn-5), 2.5vw, var(--ngn-6));
    background: var(--ngn-surface);
    border: 1px solid var(--ngn-line);
    border-radius: var(--ngn-radius-lg);
    box-shadow: var(--ngn-shadow);
    position: sticky;
    top: 5rem;
  }
  @media (max-width: 58rem) {
    .ngn-calc__panel { position: static; }
  }

  /* Las direcciones IP se escriben y se comparan dígito a dígito: monoespaciada. */
  .ngn-calc__panel input {
    font-family: var(--ngn-font-num);
    font-size: 1.0625rem;
    letter-spacing: 0.01em;
  }

  .ngn-calc__resultados {
    display: grid;
    gap: var(--ngn-3);
  }
  .ngn-dato {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--ngn-3) var(--ngn-5);
    padding: var(--ngn-4) var(--ngn-5);
    background: var(--ngn-surface);
    border: 1px solid var(--ngn-line);
    border-radius: var(--ngn-radius);
  }
  .ngn-dato--destacado {
    background: linear-gradient(145deg, var(--ngn-blue-50), #fff);
    border-color: var(--ngn-blue-200);
  }
  .ngn-dato__k {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ngn-ink);
  }
  .ngn-dato__ayuda {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ngn-ink-3);
  }
  .ngn-dato__v {
    font-family: var(--ngn-font-num);
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    color: var(--ngn-blue-700);
    text-align: right;
    word-break: break-all;
  }
  .ngn-dato--destacado .ngn-dato__v { font-size: 1.1875rem; font-weight: 600; }

  .ngn-calc__vacio {
    padding: var(--ngn-7) var(--ngn-5);
    text-align: center;
    color: var(--ngn-ink-3);
    border: 1px dashed var(--ngn-line);
    border-radius: var(--ngn-radius-lg);
    background: var(--ngn-surface-2);
  }
  .ngn-calc__error {
    padding: var(--ngn-4) var(--ngn-5);
    border-radius: var(--ngn-radius);
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 0.9375rem;
  }
}

/* ============================================================================
   Calculadora de cámaras y almacenamiento
   ----------------------------------------------------------------------------
   Controles con los que se puede jugar: cada cambio recalcula al instante, sin
   botón de "calcular". La respuesta continua es lo que convierte una planilla
   en una herramienta —se ve subir y bajar el disco mientras se mueve el dial.
   ========================================================================== */
@layer components {
  /* Selects con la misma piel que los inputs del sistema. La flecha va como
     fondo para no depender del dibujo de cada navegador. */
  .ngn-field select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0.75rem 2.25rem 0.75rem 0.875rem;
    border: 1px solid var(--ngn-line);
    border-radius: var(--ngn-radius-sm);
    background-color: var(--ngn-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--ngn-ink);
    cursor: pointer;
    transition: border-color var(--ngn-fast) linear, box-shadow var(--ngn-fast) linear;
  }
  .ngn-field select:focus {
    border-color: var(--ngn-blue);
    box-shadow: 0 0 0 4px rgb(37 99 235 / 0.12);
    outline: none;
  }

  /* Grupos de cámaras --------------------------------------------------- */
  .ngn-grupos { display: grid; gap: var(--ngn-3); }
  .ngn-grupo {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--ngn-2);
    padding: var(--ngn-3);
    border: 1px solid var(--ngn-line);
    border-radius: var(--ngn-radius);
    background: var(--ngn-surface);
  }
  .ngn-grupo select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    padding: 0.5rem 1.875rem 0.5rem 0.625rem;
    border: 1px solid var(--ngn-line);
    border-radius: 0.5rem;
    background-color: var(--ngn-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.875rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--ngn-ink);
    cursor: pointer;
  }
  .ngn-grupo select:focus { border-color: var(--ngn-blue); outline: none; box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12); }

  /* Un paso a la vez, con el número editable en medio: el pulgar en el móvil
     y el teclado en el escritorio, sin obligar a nadie a cambiar de modo. */
  .ngn-step {
    display: inline-grid;
    grid-template-columns: 2rem 2.75rem 2rem;
    align-items: center;
    border: 1px solid var(--ngn-line);
    border-radius: 0.5rem;
    background: var(--ngn-surface);
    overflow: hidden;
  }
  .ngn-step button {
    display: grid;
    place-items: center;
    height: 2.25rem;
    border: 0;
    background: transparent;
    color: var(--ngn-ink-2);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--ngn-fast) linear;
  }
  .ngn-step button:hover { background: var(--ngn-surface-3); }
  .ngn-step button:active { background: var(--ngn-surface-3); transform: scale(0.9); }
  .ngn-step button:disabled { opacity: 0.3; cursor: default; }
  .ngn-step input {
    width: 100%;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-inline: 1px solid var(--ngn-line);
    text-align: center;
    font: inherit;
    font-family: var(--ngn-font-num);
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ngn-ink);
    background: transparent;
    -moz-appearance: textfield;
  }
  .ngn-step input::-webkit-outer-spin-button,
  .ngn-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .ngn-step input:focus { outline: none; background: var(--ngn-blue-50); }

  .ngn-quitar {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--ngn-ink-4);
    cursor: pointer;
    transition: color var(--ngn-fast) linear, background-color var(--ngn-fast) linear;
  }
  .ngn-quitar:hover { color: var(--ngn-danger); background: rgb(217 45 32 / 0.08); }
  .ngn-quitar:active { transform: scale(0.9); }
  .ngn-quitar .ngn-i { width: 1.125rem; height: 1.125rem; }

  .ngn-mas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ngn-2);
    width: 100%;
    padding: 0.75rem;
    border: 1.5px dashed var(--ngn-line);
    border-radius: var(--ngn-radius);
    background: transparent;
    color: var(--ngn-blue);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--ngn-fast) linear, background-color var(--ngn-fast) linear;
  }
  .ngn-mas:hover { border-color: var(--ngn-blue-200); background: var(--ngn-blue-50); }
  .ngn-mas:active { transform: scale(0.99); background: var(--ngn-blue-100); }
  .ngn-mas .ngn-i { width: 1rem; height: 1rem; }

  /* Fichas de opción: todas las alternativas a la vista, sin desplegar nada.
     Cuando son pocas y cortas, esconderlas en un menú cuesta más que mostrarlas. */
  .ngn-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
  .ngn-chips input { position: absolute; opacity: 0; pointer-events: none; }
  .ngn-chips label {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.8125rem;
    border: 1px solid var(--ngn-line);
    border-radius: 999px;
    background: var(--ngn-surface);
    color: var(--ngn-ink-2);
    font-size: 0.875rem;
    font-weight: 570;
    cursor: pointer;
    transition:
      background-color var(--ngn-fast) linear,
      border-color var(--ngn-fast) linear,
      color var(--ngn-fast) linear,
      transform var(--ngn-fast) var(--ngn-ease-out);
  }
  .ngn-chips label:hover { border-color: var(--ngn-blue-200); background: var(--ngn-blue-50); }
  .ngn-chips label:active { transform: scale(0.96); }
  .ngn-chips input:checked + label {
    background: var(--ngn-blue);
    border-color: var(--ngn-blue);
    color: #fff;
  }
  .ngn-chips input:focus-visible + label { outline: 2px solid var(--ngn-blue); outline-offset: 2px; }

  /* El resultado grande: una sola cifra manda, el resto la acompaña. */
  .ngn-kpi {
    display: grid;
    gap: 0.375rem;
    padding: var(--ngn-5);
    border-radius: var(--ngn-radius-lg);
    background: linear-gradient(160deg, var(--ngn-navy-900), var(--ngn-navy-950));
    color: #fff;
  }
  .ngn-kpi__k {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    color: var(--ngn-blue-200);
  }
  .ngn-kpi__v {
    /* La cifra grande va en la tipografía del sitio, no en monoespaciada: a
       este tamaño el monoespaciado abre demasiado las comas y se lee a
       máquina. Las cifras tabulares bastan para que no baile al cambiar. */
    font-family: var(--ngn-font);
    font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
  }
  .ngn-kpi__v small { font-size: 0.4em; font-weight: 600; letter-spacing: -0.01em; margin-left: 0.25rem; }
  .ngn-kpi__d { font-size: 0.9375rem; line-height: 1.5; color: #b9c9dd; margin: 0.25rem 0 0; }
  .ngn-kpi__sug {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--ngn-3);
    padding-top: var(--ngn-3);
    border-top: 1px solid rgb(255 255 255 / 0.14);
    font-size: 0.9375rem;
    color: #dbe6f3;
  }
  .ngn-kpi__sug b { color: #fff; font-weight: 650; }
  .ngn-kpi__sug .ngn-i { color: var(--ngn-teal); flex: none; }

  /* Tabla de discos ----------------------------------------------------- */
  .ngn-tabla-wrap {
    border: 1px solid var(--ngn-line);
    border-radius: var(--ngn-radius);
    overflow: hidden;
    background: var(--ngn-surface);
  }
  .ngn-tabla { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
  .ngn-tabla th,
  .ngn-tabla td { padding: 0.75rem 1rem; text-align: left; }
  .ngn-tabla thead th {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ngn-ink-3);
    background: var(--ngn-surface-2);
    border-bottom: 1px solid var(--ngn-line);
  }
  .ngn-tabla tbody tr + tr { border-top: 1px solid var(--ngn-line-soft); }
  .ngn-tabla td:first-child { font-weight: 620; color: var(--ngn-ink); }
  .ngn-tabla td:last-child,
  .ngn-tabla th:last-child { text-align: right; }
  .ngn-tabla .ngn-num {
    font-family: var(--ngn-font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  /* La fila que alcanza lo pedido se marca sola: es la respuesta a la pregunta. */
  .ngn-tabla tr[data-ok='true'] { background: rgb(15 157 88 / 0.07); }
  .ngn-tabla tr[data-ok='true'] td:first-child { color: var(--ngn-success); }
  .ngn-tabla tr[data-corto='true'] td { color: var(--ngn-ink-4); }

  /* Avisos -------------------------------------------------------------- */
  .ngn-aviso {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-radius: var(--ngn-radius-sm);
    background: rgb(180 83 9 / 0.08);
    border: 1px solid rgb(180 83 9 / 0.2);
    color: #7c3d06;
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .ngn-aviso .ngn-i { color: var(--ngn-warning); margin-top: 0.125rem; }
  .ngn-aviso--ok {
    background: rgb(15 157 88 / 0.08);
    border-color: rgb(15 157 88 / 0.22);
    color: #0a5c35;
  }
  .ngn-aviso--ok .ngn-i { color: var(--ngn-success); }

  .ngn-resumen {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: var(--ngn-4);
    border-radius: var(--ngn-radius);
    background: var(--ngn-surface-2);
    border: 1px solid var(--ngn-line-soft);
    font-size: 0.9375rem;
  }
  .ngn-resumen div { display: flex; justify-content: space-between; gap: var(--ngn-4); }
  .ngn-resumen dt { color: var(--ngn-ink-3); }
  .ngn-resumen dd {
    margin: 0;
    font-family: var(--ngn-font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 620;
    color: var(--ngn-ink);
    text-align: right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ngn-step button:active,
  .ngn-quitar:active,
  .ngn-chips label:active,
  .ngn-mas:active { transform: none; }
}

/* Un panel más alto que la pantalla no se puede pegar: la parte de abajo
   quedaría fuera de alcance para siempre. Cuando hay muchos controles, se
   desplaza con la página como cualquier otro contenido. */
@layer components {
  .ngn-calc__panel--alto { position: static; }
}

/* ── Firma del estudio en el pie ─────────────────────────────────────────
   Una línea aparte debajo del pie de NGN, separada por un filete: el pie es
   de NGN, la firma es una nota al margen. Apagada al 70 % para no competir
   con la marca del cliente, entera al pasar el mouse. Con `wrap`: firma y
   teléfono no entran juntos en un teléfono chico, y el número baja de línea
   en vez de abrir scroll horizontal. La mete tools_navbar.py. */
@layer components {
  .ngn-firma {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 0.75rem 1.75rem;
    margin-top: 1.5rem; padding-top: 1.25rem;
    border-top: 1px solid rgb(13 17 23 / 0.08);
  }
  .ngn-firma a { color: var(--ngn-ink-3); text-decoration: none; transition: color 180ms var(--ngn-ease-out); }
  .ngn-firma a:hover { color: var(--ngn-ink); }
  .ngn-firma__marca { display: inline-flex; align-items: center; gap: 0.75rem; }
  .ngn-firma__marca img { width: 2.25rem; height: auto; opacity: 0.7; transition: opacity 180ms var(--ngn-ease-out); }
  .ngn-firma__marca:hover img { opacity: 1; }
  .ngn-firma__eti { display: block; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
  .ngn-firma__nombre { display: block; font-size: 0.9375rem; font-weight: 650; letter-spacing: 0.06em; line-height: 1.3; }
  .ngn-firma__num { display: block; font-size: 0.9375rem; font-weight: 650; letter-spacing: 0.02em; line-height: 1.3; font-variant-numeric: tabular-nums; }
  @media (min-width: 768px) { .ngn-firma { justify-content: flex-start; } }
  @media (prefers-reduced-motion: reduce) {
    .ngn-firma a, .ngn-firma__marca img { transition: none; }
  }
}

/* ============================================================================
   Portada: hero, tarjetas de servicio y formulario (auditoría Clarity, sep 2026)
   ----------------------------------------------------------------------------
   Fuera de @layer a propósito: el Tailwind compilado del sitio no tiene capas,
   y una regla sin capa siempre le gana a una con capa. Estas reglas tienen que
   poder corregir clases de Tailwind que ya están en el HTML (max-w-80, etc.).
   ========================================================================== */

/* Hero: una pantalla en móvil. Antes medía 100vh como MÍNIMO y el contenido lo
   estiraba a más de dos; ahora el contenido cabe y el alto acompaña. */
.ngn-hero-home { min-height: calc(100vh - 4rem); min-height: calc(100svh - 4rem); }
@media (min-width: 768px) {
  .ngn-hero-home { min-height: min(100vh, 52rem); }
}
@media (max-width: 639px) {
  .ngn-hero-home__logo { max-width: 11.5rem; }
}
@media (min-width: 640px) {
  .ngn-hero-home__logo { max-width: 15rem; }
}

/* Las palabras azules del H1 ahora son enlaces reales. Mismo aspecto que
   antes; el subrayado aparece al pasar el mouse o al enfocarlas. */
.ngn-h1-link { text-decoration: none; border-radius: 0.25rem; }
.ngn-h1-link:hover { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; }
.ngn-h1-link:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }

.ngn-hero-home__lead {
  max-width: 36rem;
  margin: 0.875rem auto 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgb(255 255 255 / 0.88);
}
@media (min-width: 640px) { .ngn-hero-home__lead { font-size: 1.125rem; } }
@media (min-width: 768px) { .ngn-hero-home__lead { font-size: 1.25rem; } }

/* CTAs del hero: WhatsApp es el primario (es lo que más convierte) y usa el
   mismo verde que el botón flotante. Texto oscuro sobre el verde: el blanco
   sobre #25d366 no llega a 2:1 de contraste; el verde muy oscuro pasa de 7:1. */
.ngn-hero-cta {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; margin-top: 1.5rem;
}
.ngn-hero-cta__wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  width: 100%; max-width: 22rem; min-height: 3.5rem; padding: 0 1.75rem;
  border-radius: 999px;
  background: #25d366; color: #052e16;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 12px 32px -10px rgb(37 211 102 / 0.65);
  transition: transform 140ms var(--ngn-ease-out), background-color 140ms linear;
}
.ngn-hero-cta__wa:hover { background: #3ee07f; }
.ngn-hero-cta__wa:active { transform: scale(0.972); transition-duration: 60ms; }
.ngn-hero-cta__wa:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ngn-hero-cta__ico { width: 1.5rem; height: 1.5rem; flex: none; }
@media (min-width: 640px) { .ngn-hero-cta__wa { width: auto; font-size: 1.125rem; min-height: 3.75rem; padding: 0 2.25rem; } }

.ngn-hero-cta__sec { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.ngn-hero-cta__sec a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.5rem; padding: 0 1rem;
  border: 1px solid rgb(255 255 255 / 0.28); border-radius: 999px;
  background: rgb(255 255 255 / 0.06); color: #fff;
  font-size: 0.9375rem; font-weight: 560; text-decoration: none;
  transition: background-color 140ms linear, border-color 140ms linear;
}
.ngn-hero-cta__sec a:hover { background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.45); }
.ngn-hero-cta__sec a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ngn-hero-cta__sec .ngn-i { width: 1.1rem; height: 1.1rem; }

/* Tarjetas de servicio: un solo comportamiento (navegar). La foto lleva al
   mismo destino que el botón; es un atajo para el mouse y el dedo, así que
   queda fuera del orden de tabulación y del lector de pantalla. */
.ngn-card-cta { display: inline-flex; text-decoration: none; }
.ngn-card-img { display: block; border-radius: 0.5rem; overflow: hidden; }
.ngn-card-img img { display: block; transition: transform 400ms var(--ngn-ease-out), filter 200ms linear; }
.ngn-card-img:hover img { transform: scale(1.02); filter: brightness(1.04); }

/* Formulario corto */
.ngn-select {
  appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.125rem;
  padding-right: 2.75rem;
}
.ngn-select:invalid { color: #9ca3af; }
.ngn-select option { color: #111827; }
.ngn-form-msg { margin: 0; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.9375rem; line-height: 1.45; }
.ngn-form-msg[data-tipo="error"] { background: #fef2f2; color: #991b1b; }
.ngn-form-msg[data-tipo="ok"] { background: #f0fdf4; color: #166534; }
.ngn-form-nota { margin: 0.625rem 0 0; font-size: 0.8125rem; color: var(--ngn-ink-3); }
#leadForm button[type="submit"]:disabled { opacity: 0.6; cursor: progress; }
#loadingSpinner:not(.hidden) { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .ngn-hero-cta__wa, .ngn-card-img img { transition: none; }
  .ngn-card-img:hover img { transform: none; }
}

/* ── Servicios relacionados ──────────────────────────────────────────────
   Al final de redes, videovigilancia y las calculadoras. Tarjetas enteras
   clicables: el que llega hasta acá busca a dónde seguir, no leer más. La
   genera tools/tools_relacionados.py. */
@layer components {
  .ngn-rel { background: var(--ngn-surface-2); padding: 3rem 1.5rem; }
  .ngn-rel__in { max-width: 72rem; margin: 0 auto; }
  .ngn-rel__h {
    margin: 0 0 1.25rem; text-align: center;
    font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ngn-ink);
  }
  .ngn-rel__grid { display: grid; gap: 0.75rem; }
  @media (min-width: 768px) { .ngn-rel__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
  .ngn-rel__card {
    display: flex; align-items: center; gap: 0.875rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--ngn-line); border-radius: var(--ngn-radius);
    background: #fff; color: var(--ngn-ink); text-decoration: none;
    box-shadow: var(--ngn-shadow-sm);
    transition: border-color 160ms linear, box-shadow 200ms var(--ngn-ease-out), transform 200ms var(--ngn-ease-out);
  }
  .ngn-rel__card:hover { border-color: var(--ngn-teal-300, #8fd0d8); box-shadow: var(--ngn-shadow); transform: translateY(-2px); }
  .ngn-rel__card:active { transform: scale(0.985); transition-duration: 60ms; }
  .ngn-rel__card:focus-visible { outline: 2px solid var(--ngn-blue); outline-offset: 2px; }
  .ngn-rel__ico {
    width: 2.5rem; height: 2.5rem; padding: 0.5rem; flex: none;
    border-radius: 0.75rem; background: var(--ngn-teal-50); color: var(--ngn-navy-900);
  }
  .ngn-rel__txt { flex: 1; min-width: 0; }
  .ngn-rel__tit { display: block; font-weight: 650; font-size: 1rem; line-height: 1.3; }
  .ngn-rel__desc { display: block; margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.4; color: var(--ngn-ink-3); }
  .ngn-rel__flecha { width: 1.125rem; height: 1.125rem; flex: none; color: var(--ngn-ink-4); transition: transform 200ms var(--ngn-ease-spring), color 160ms linear; }
  .ngn-rel__card:hover .ngn-rel__flecha { transform: translateX(3px); color: var(--ngn-blue); }
  @media (prefers-reduced-motion: reduce) {
    .ngn-rel__card, .ngn-rel__flecha { transition: none; }
    .ngn-rel__card:hover, .ngn-rel__card:hover .ngn-rel__flecha { transform: none; }
  }
}