/* ============================================================================
   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. */
  .ngn-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    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.86);
  }
  .ngn-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--ngn-4);
    min-height: 3.75rem;
  }
  .ngn-nav__brand {
    display: flex;
    align-items: center;
    gap: var(--ngn-3);
    text-decoration: none;
    color: var(--ngn-ink);
    font-weight: 660;
    letter-spacing: -0.02em;
    font-size: 1.0625rem;
    margin-right: auto;
    min-width: 0;
  }
  .ngn-nav__brand img { height: 1.75rem; width: auto; }
  .ngn-nav__links {
    display: flex;
    align-items: center;
    gap: var(--ngn-1);
  }
  .ngn-nav__link {
    padding: 0.5rem 0.75rem;
    border-radius: var(--ngn-radius-sm);
    color: var(--ngn-ink-2);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 550;
    letter-spacing: -0.005em;
    transition: color var(--ngn-fast) linear, background-color var(--ngn-fast) linear;
  }
  .ngn-nav__link:hover { color: var(--ngn-ink); background: var(--ngn-surface-3); }
  .ngn-nav__link[aria-current='page'] { color: var(--ngn-blue); }
  .ngn-nav__cta { margin-left: var(--ngn-2); }

  .ngn-nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--ngn-line);
    border-radius: var(--ngn-radius-sm);
    background: var(--ngn-surface);
    color: var(--ngn-ink);
    cursor: pointer;
    transition: transform var(--ngn-fast) var(--ngn-ease-out);
  }
  .ngn-nav__toggle:active { transform: scale(0.94); }

  @media (max-width: 60rem) {
    .ngn-nav__links {
      position: fixed;
      inset: 3.75rem 0 auto;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: var(--ngn-3) var(--ngn-4) var(--ngn-5);
      background: rgb(255 255 255 / 0.94);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border-bottom: 1px solid var(--ngn-line);
      box-shadow: var(--ngn-shadow-lg);
      /* Entra y sale por el mismo camino: baja desde la barra que la abrió. */
      transform-origin: top center;
      transform: translateY(-8px) 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 { padding: 0.875rem 0.75rem; font-size: 1.0625rem; border-radius: var(--ngn-radius-sm); }
    .ngn-nav__link + .ngn-nav__link { border-top: 1px solid var(--ngn-line-soft); }
    .ngn-nav__cta { margin: var(--ngn-3) 0 0; }
    .ngn-nav__toggle { display: inline-flex; }
  }

  /* 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; }
  .ngn-nav__links { transition: opacity 120ms linear, visibility 0s !important; transform: none !important; }
}

/* 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 {
    background: var(--ngn-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .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; }
}

/* ============================================================================
   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;
  }
}