/* ==========================================================================
   INTERNEXT · Design System
   Internet Corporativo Gestionado · Cusco, Peru
   Sin dependencias externas. Cero requests a terceros.
   ========================================================================== */

:root {
  /* Marca */
  --navy-950: #04091c;
  --navy-900: #070f2a;
  --navy-850: #0a1638;
  --navy-800: #0e1e4a;
  --navy-700: #14295e;
  --brand-blue: #17307e;       /* azul del logo */
  --blue-600: #1b3fa8;
  --cyan-500: #29abe2;
  --cyan-400: #38c6f4;
  --cyan-300: #7ee0ff;
  --lime-400: #4ade80;
  --amber-400: #fbbf24;
  --rose-400: #fb7185;

  /* Neutros */
  --ink-900: #0b1220;
  --ink-700: #33415c;
  --ink-500: #5b6b8c;
  --paper: #f4f7fc;
  --paper-2: #e7edf7;

  /* Semanticos: tema claro, 9 de noviembre de 2026.

     El sitio nacio en navy sobre navy. Los tokens de marca no se tocaron;
     lo que cambio es esta capa, que es la que decide fondo, texto y bordes.
     Volver al tema oscuro es cambiar este bloque y nada mas.

     Dos decisiones que sostienen el resto:
     - El cyan (#29abe2 y mas claros) queda solo para superficies oscuras.
       Sobre blanco no llega al contraste minimo ni de lejos, asi que los
       acentos de texto van en --accent (#1b3fa8, contraste 8.6:1).
     - Las tarjetas no se separan con borde marcado sino con una sombra
       muy suave sobre blanco puro. Es lo que distingue una interfaz cara
       de una con cajas delineadas. */
  --bg: #ffffff;
  --bg-alt: var(--paper);          /* bandas alternas, para dar ritmo */
  --fg: var(--ink-900);
  --fg-muted: var(--ink-500);
  --accent: var(--blue-600);       /* azul de acento sobre claro */
  /* Color de los detalles de acento (kickers, iconos, flechas, enlaces).
     Sobre blanco va el azul; dentro de una superficie oscura se redefine a
     cyan mas abajo, asi que cada contexto hereda el que si se lee. */
  --accent-text: var(--blue-600);
  /* El gradiente del texto destacado va aparte del de los botones: un
     boton tiene fondo propio y el texto no, asi que sobre el video oscuro
     del hero el azul del boton desaparece. Sobre claro, azul; sobre
     oscuro, cyan, que es lo que se redefine mas abajo. */
  --grad-text: linear-gradient(120deg, #1b3fa8 0%, #2a5fd0 55%, #3f86e0 100%);
  /* Como se despega una tarjeta del fondo. Sobre blanco, con sombra; sobre
     navy la sombra no existe, asi que ahi vuelve a ser un borde de un pixel.
     Se redefine en el bloque de superficies oscuras. */
  --elev: var(--shadow-card);
  --elev-hover: var(--shadow-card-hover);
  --accent-deep: var(--brand-blue);
  --line: rgba(11, 18, 32, 0.09);
  --line-strong: rgba(11, 18, 32, 0.16);
  --card: #ffffff;
  --card-hover: var(--paper);
  /* No llega al cyan: con el texto en blanco, ese extremo bajaba de 3:1.
     Cierra en un azul medio que mantiene el contraste de punta a punta. */
  --accent-grad: linear-gradient(135deg, #17307e 0%, #1b3fa8 52%, #2a5fd0 100%);

  /* Superficies oscuras que sobreviven al cambio: el hero, el pie y las
     bandas de cierre. Un sitio claro de gama alta no es blanco de arriba
     abajo, alterna. */
  --dark-bg: var(--navy-950);
  --dark-fg: #e8eefb;
  --dark-fg-muted: #97a6c4;
  --dark-line: rgba(255, 255, 255, 0.1);
  --dark-card: rgba(255, 255, 255, 0.04);

  /* Tipografia */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Ritmo */
  --wrap: 1200px;
  --wrap-narrow: 800px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --pad-section: clamp(60px, 8vw, 116px);
  --shadow-lg: 0 24px 70px -28px rgba(11, 18, 32, 0.28);
  --shadow-glow: 0 0 0 1px rgba(27, 63, 168, 0.18),
    0 18px 44px -20px rgba(27, 63, 168, 0.4);
  /* La elevacion de las tarjetas: dos capas, uno de contacto y una difusa.
     Sin borde, que es lo que abarata una tarjeta sobre blanco. */
  --shadow-card: 0 1px 2px rgba(11, 18, 32, 0.05),
    0 12px 32px -16px rgba(11, 18, 32, 0.16);
  --shadow-card-hover: 0 2px 6px rgba(11, 18, 32, 0.07),
    0 26px 60px -22px rgba(11, 18, 32, 0.24);
  --shadow-soft: 0 1px 3px rgba(11, 18, 32, 0.06), 0 16px 40px -26px rgba(11, 18, 32, 0.4);
}

/* --------------------------------------------------------------- Reset --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

/* El display de los componentes gana al [hidden] del navegador. Lo forzamos
   o botones como "Atras" y "Enviar" aparecerian en pasos donde no toca. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.028em;
  font-weight: 700;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(56, 198, 244, 0.32); color: #fff; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--cyan-400); color: var(--navy-950);
  padding: 10px 18px; border-radius: var(--r-sm); font-weight: 700;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- Layout --- */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

section { position: relative; }
.section { padding-block: var(--pad-section); }
.section--tight { padding-block: clamp(44px, 6vw, 76px); }
.section--light { background: var(--paper); color: var(--ink-900); }
.section--light h2, .section--light h3 { color: var(--ink-900); }

/* Cabecera de seccion compacta */
.head { max-width: 62ch; }
.head--center { margin-inline: auto; text-align: center; }

/* ----------------------------------------------------------- Tipografia -- */
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 16px;
}
.kicker::before { content: ""; width: 24px; height: 1px; background: var(--cyan-400); }
.head--center .kicker::before { display: none; }
.section--light .kicker { color: var(--blue-600); }
.section--light .kicker::before { background: var(--blue-600); }

.h-1 { font-size: clamp(1.95rem, 4.2vw, 3rem); }
.h-2 { font-size: clamp(1.45rem, 2.5vw, 1.95rem); }
.h-3 { font-size: clamp(1.1rem, 1.6vw, 1.25rem); }

.lead {
  font-size: clamp(1.02rem, 1.4vw, 1.17rem);
  color: var(--fg-muted); max-width: 56ch;
}
.section--light .lead { color: var(--ink-700); }

/* Usa --grad-text y no --accent-grad: el de los botones arranca en azul
   oscuro, que sobre el video del hero se perdia. */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Respuesta directa: una frase, pensada para que la citen los motores */
.answer {
  border-left: 3px solid var(--cyan-400);
  padding: 12px 0 12px 20px; margin: 22px 0 0;
  font-size: 1.02rem; color: var(--fg); max-width: 64ch;
  background: linear-gradient(90deg, rgba(41, 171, 226, 0.07), transparent 72%);
}
.section--light .answer {
  border-left-color: var(--blue-600); color: var(--ink-900);
  background: linear-gradient(90deg, rgba(27, 63, 168, 0.06), transparent 72%);
}
.answer strong { color: var(--accent-text); font-weight: 600; }
.section--light .answer strong { color: var(--blue-600); }

/* -------------------------------------------------------------- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 25px; border: 0; border-radius: 999px;
  font-size: 15px; font-weight: 650; letter-spacing: -0.01em;
  cursor: pointer; white-space: nowrap; text-align: center;
  /* Texto blanco. El navy venia del tema oscuro, donde el gradiente era
     cyan brillante y la tinta oscura encima se leia perfecto. Al pasar el
     gradiente a azul, ese mismo navy quedo casi invisible. */
  background: var(--accent-grad); color: #fff;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: var(--card-hover); color: var(--fg);
  box-shadow: var(--elev-hover);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: var(--card-hover); box-shadow: inset 0 0 0 1px var(--accent); }
.btn--wa { background: #1faa54; color: #fff; }
.btn--wa:hover { box-shadow: 0 18px 40px -16px rgba(31, 170, 84, 0.7); }
.btn--dark { background: var(--brand-blue); color: #fff; }
.btn--lg { padding: 17px 32px; font-size: 16px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 14.5px; color: var(--accent-text);
}
.link-arrow svg { transition: transform 0.2s; }
.link-arrow:hover svg { transform: translateX(4px); }
.section--light .link-arrow { color: var(--blue-600); }

/* --------------------------------------------------------------- Header --- */
.topbar {
  background: var(--navy-900); border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--fg-muted);
}
.topbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 38px; flex-wrap: wrap;
}
.topbar a:hover { color: var(--accent-text); }
.topbar__list { display: flex; gap: 20px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.header {
  position: sticky; top: 0; z-index: 100;
  /* Azul tinta profundo y solido.
     Tres versiones hicieron falta: primero era navy al 60% de opacidad y
     sobre el fondo blanco se mezclaba con lo de abajo, dando gris lavado;
     despues paso al azul del logo (#17307e a #1b3fa8) y quedaba vivo, mas
     cerca de una landing de consumo que de un proveedor de infraestructura.
     Mirando como lo resuelven en ese mercado: Equinix usa barra blanca con
     tinta casi negra, y Mercury azules oscuros muy desaturados
     (rgb(23,23,33), rgb(30,30,42)). Lo que da el aire caro no es el tono
     sino la SATURACION: cuanto mas apagado, mas serio.
     De ahi este azul, profundo y sin estridencia, con el acento brillante
     reservado al boton, que es lo unico que debe pedir atencion. */
  background: linear-gradient(180deg, #0b1733 0%, #0d1d40 100%);
  /* Hairline de luz en el canto superior: el detalle que separa una barra
     plana de una con cuerpo. Un pixel, apenas visible, nunca un borde. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: box-shadow 0.25s;
}
/* Al despegarse del tope solo gana sombra: el color ya no cambia, porque
   cambiarlo era lo que producia el salto de gris a oscuro al hacer scroll. */
.header.is-stuck {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 14px 34px -20px rgba(11, 23, 51, 0.6);
}
.header__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 72px;
}

/* Logo oficial de la marca, sobre placa azul redondeada */
.logo { display: flex; align-items: center; gap: 13px; }
.logo__img {
  height: 34px; width: auto; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 24px -12px rgba(23, 48, 126, 0.9);
}
.logo__tag {
  display: block;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--fg-muted);
  padding-left: 13px; border-left: 1px solid var(--line-strong);
  width: 11ch; flex: 0 0 auto; line-height: 1.4;
}

.nav { display: flex; align-items: center; gap: 28px; }
.nav__link {
  font-size: 14.5px; font-weight: 500; white-space: nowrap;
  /* Blanco al 78% y un poco de prosa entre letras. Sobre el azul tinta
     da 9.4:1, de sobra, y el espaciado es lo que hace que una barra de
     navegacion se lea cuidada en vez de apretada. */
  color: rgba(255, 255, 255, 0.78); letter-spacing: 0.012em;
  position: relative; padding-block: 6px;
  transition: color 0.18s;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: #fff; }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: #fff;
  transition: width 0.22s ease;
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }

.header__cta { display: flex; align-items: center; gap: 10px; }

.burger {
  display: none; width: 44px; height: 44px; position: relative;
  background: none; border: 1px solid var(--line-strong);
  border-radius: 10px; cursor: pointer;
}
.burger span {
  position: absolute; left: 12px; width: 20px; height: 2px;
  background: var(--fg); transition: transform 0.22s, opacity 0.22s;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none; border-top: 1px solid var(--line);
  background: rgba(4, 9, 28, 0.98);
  padding: 14px clamp(20px, 5vw, 40px) 26px;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: block; padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 17px; font-weight: 500;
}
.mobile-nav .btn { margin-top: 18px; }

/* ============================================================== HERO ===== */
.hero {
  background: var(--navy-950);   /* respaldo: antes lo ponia el body */
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(88vh, 780px);
  display: flex; align-items: flex-end;
  padding-block: clamp(90px, 16vw, 150px) clamp(40px, 6vw, 64px);
}
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
}
/* El video de marca trae una marca de agua del generador en la esquina
   inferior derecha. Ampliamos un 12 % para recortarla. Lo ideal es
   reexportar el video sin marca y quitar este transform. */
.hero__media video { transform: scale(1.12); transform-origin: 50% 42%; }
/* Velo de marca: unifica cualquier imagen o frame del video */
.hero__veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(4, 9, 28, 0.86) 0%, rgba(4, 9, 28, 0.38) 38%, rgba(4, 9, 28, 0.92) 100%),
    linear-gradient(100deg, rgba(4, 9, 28, 0.92) 0%, rgba(4, 9, 28, 0.35) 62%, transparent 100%),
    radial-gradient(70% 60% at 88% 18%, rgba(41, 171, 226, 0.22), transparent 65%);
}
.hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(56, 198, 244, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 198, 244, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(100% 70% at 70% 25%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(100% 70% at 70% 25%, #000 20%, transparent 75%);
}
.hero__in { position: relative; width: 100%; }
.hero h1 { font-size: clamp(2.4rem, 6.6vw, 4.4rem); letter-spacing: -0.04em; }
.hero h1 small {
  display: block; margin-top: 10px;
  font-size: clamp(0.95rem, 1.9vw, 1.3rem);
  font-weight: 500; letter-spacing: -0.01em; color: var(--accent-text);
}
.hero .lead { margin-top: 22px; max-width: 46ch; color: var(--dark-fg-muted); }

.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 11px; border-radius: 999px;
  background: rgba(4, 9, 28, 0.55);
  box-shadow: inset 0 0 0 1px rgba(56, 198, 244, 0.34);
  backdrop-filter: blur(10px);
  font-size: 12.5px; font-weight: 550; color: var(--accent-text);
  margin-bottom: 22px;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime-400);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.24); }
  50% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
}

/* Pastillas de valor: sustituyen parrafos por datos de un golpe de vista */
.pills {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 34px 0 0; padding: 0; list-style: none;
}
.pills li {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 17px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: var(--elev-hover);
  backdrop-filter: blur(10px);
  font-size: 14px; font-weight: 550;
}
.pills svg { flex: 0 0 16px; color: var(--accent-text); }

/* Portada limpia y centrada */
.hero--center { align-items: center; text-align: center; }
.hero--center .hero__in { display: flex; flex-direction: column; align-items: center; }
.hero--center .kicker { justify-content: center; }
.hero--center .kicker::before { display: none; }
.hero--center .lead { margin-inline: auto; max-width: 52ch; }
.hero--center .btn-row { justify-content: center; }

/* Cifras sin caja: presentacion limpia con separadores */
.stats--bare { gap: 0; margin-top: 34px; }
.stats--bare .stat { background: none; box-shadow: none; padding: 14px 22px; }
.stats--bare .stat + .stat { border-left: 1px solid var(--line); }
@media (max-width: 900px) {
  .stats--bare .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
}

/* --------------------------------------------------------- Franja strip -- */
.strip {
  border-block: 1px solid var(--line);
  background: var(--card);
  padding-block: 18px;
}
.strip__in {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 3.4vw, 46px); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--fg-muted); text-align: center;
}
.strip__in span { display: inline-flex; align-items: center; gap: 8px; }
.strip__in svg { color: var(--accent-text); }

/* ======================================================= Imagen tratada = */
/* Todas las fotos pasan por el mismo tratamiento para que el set se sienta
   como un solo sistema visual, aunque venga de fuentes distintas. */
.shot {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--elev);
  background: var(--navy-900);
}
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.06) contrast(1.05);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 9, 28, 0.12) 0%, rgba(4, 9, 28, 0.05) 45%, rgba(4, 9, 28, 0.88) 100%),
    radial-gradient(90% 70% at 82% 12%, rgba(41, 171, 226, 0.14), transparent 60%);
}
/* Las cabeceras del blog se dibujan en clave clara, asi que el velo de
   arriba no les sirve: fue pensado para fundir fotos con el fondo navy y
   sobre un dibujo claro solo ensucia el tercio inferior. Aca basta un
   contorno de un pixel, que es lo que separa la imagen de la tarjeta
   blanca sin taparla. */
.post .shot::after,
.wrap--narrow .shot::after {
  background: none;
  box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.07);
  border-radius: inherit;
}
.shot--16x9 { aspect-ratio: 16 / 9; }
.shot--4x3 { aspect-ratio: 4 / 3; }
.shot--1x1 { aspect-ratio: 1 / 1; }
.shot--glow { box-shadow: inset 0 0 0 1px var(--line), 0 32px 70px -36px rgba(27, 63, 168, 0.35); }

/* ================================================= Tarjetas de servicio = */
.scards {
  display: grid; gap: 18px; margin-top: 44px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.scard {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--card);
  box-shadow: var(--elev);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s, background 0.28s;
}
.scard:hover {
  transform: translateY(-5px);
  background: var(--card-hover);
  box-shadow: inset 0 0 0 1px rgba(56, 198, 244, 0.4), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.scard:hover .shot img { transform: scale(1.06); }
.scard .shot { border-radius: 0; box-shadow: none; }
.scard__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(4, 9, 28, 0.66);
  box-shadow: inset 0 0 0 1px rgba(56, 198, 244, 0.35);
  backdrop-filter: blur(8px);
  color: var(--accent-text);
}
.scard__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.scard h3 { font-size: 1.13rem; }
.scard p { font-size: 14.5px; color: var(--fg-muted); }
.scard__foot { margin-top: auto; padding-top: 14px; }
.scard--tall .shot { aspect-ratio: 4 / 3; }

/* ============================================================ Split ===== */
.split {
  display: grid; gap: clamp(30px, 4.5vw, 60px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center; margin-top: 40px;
}
.split--wide-left { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
.split--wide-right { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
.split__media { position: relative; }

/* Dato flotante sobre la imagen: gana peso grafico sin sumar parrafos */
.float-stat {
  position: absolute; bottom: -18px; left: -18px;
  padding: 16px 20px; border-radius: var(--r-md);
  background: rgba(7, 15, 42, 0.9);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(56, 198, 244, 0.28);
  backdrop-filter: blur(12px);
  max-width: 74%;
}
.float-stat b {
  display: block; font-size: 1.35rem; letter-spacing: -0.03em;
  color: var(--accent-text); line-height: 1.15;
}
.float-stat span {
  display: block; margin-top: 4px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted);
}
.section--light .float-stat { background: rgba(7, 15, 42, 0.94); }

/* ====================================================== Comparativa VS = */
.vs { margin-top: 26px; border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); }
.vs__head, .vs__row {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr;
  gap: 10px; align-items: center;
  padding: 13px 0 13px 18px;
}
.vs__head {
  background: var(--paper); border-bottom: 1px solid var(--paper-2);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-500);
}
.vs__head b { color: var(--brand-blue); font-weight: 700; }
.vs__row { border-bottom: 1px solid var(--paper-2); font-size: 14.5px; }
.vs__row:last-child { border-bottom: 0; }
.vs__label { font-weight: 600; color: var(--ink-900); }
.vs__no, .vs__yes { display: flex; align-items: center; gap: 8px; }
.vs__no { color: var(--ink-500); }
.vs__no svg { flex: 0 0 15px; color: #cbd5e6; }
.vs__yes { color: var(--ink-900); font-weight: 600; }
.vs__yes svg { flex: 0 0 15px; color: #16a34a; }
/* La columna destacada se estira para leerse como una sola banda continua */
.vs__col-us {
  align-self: stretch; display: flex; align-items: center;
  padding: 13px 18px 13px 12px; margin-block: -13px;
  background: rgba(23, 48, 126, 0.05);
}

/* En oscuro */
.vs--dark { background: var(--card); box-shadow: var(--elev); }
.vs--dark .vs__head { background: var(--card); border-bottom-color: var(--line); color: var(--fg-muted); }
.vs--dark .vs__head b { color: var(--accent-text); }
.vs--dark .vs__row { border-bottom-color: var(--line); }
.vs--dark .vs__label { color: var(--fg); }
.vs--dark .vs__no { color: var(--fg-muted); }
.vs--dark .vs__no svg { color: rgba(255, 255, 255, 0.28); }
.vs--dark .vs__yes { color: var(--fg); }
.vs--dark .vs__yes svg { color: var(--lime-400); }
.vs--dark .vs__col-us { background: rgba(56, 198, 244, 0.07); }

/* ============================================================ Cards ===== */
.grid { display: grid; gap: 18px; margin-top: 40px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative; overflow: hidden;
  padding: 26px 24px; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--elev);
  transition: background 0.22s, transform 0.22s;
}
.card:hover { background: var(--card-hover); transform: translateY(-3px); }
.card__icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: rgba(56, 198, 244, 0.11);
  box-shadow: inset 0 0 0 1px rgba(56, 198, 244, 0.26);
  color: var(--accent-text);
}
.card h3 { font-size: 1.08rem; margin-bottom: 7px; }
.card p { font-size: 14.5px; color: var(--fg-muted); }
.card--light { background: #fff; box-shadow: var(--shadow-soft); }
.card--light p { color: var(--ink-700); }
.card--light:hover { background: #fff; }
.card--light .card__icon { background: rgba(23, 48, 126, 0.07); box-shadow: inset 0 0 0 1px rgba(23, 48, 126, 0.14); color: var(--brand-blue); }

/* Lista corta con vinetas cian */
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; font-size: 15px; color: var(--fg-muted); }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks svg { flex: 0 0 17px; margin-top: 3px; color: var(--accent-text); }

/* ==================================================== Proceso / pasos === */
.steps {
  position: relative; counter-reset: step;
  display: grid; gap: 16px; margin-top: 44px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.steps::before {
  content: ""; position: absolute; top: 46px; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 198, 244, 0.45) 12%, rgba(56, 198, 244, 0.45) 88%, transparent);
}
.step {
  position: relative; padding: 26px 22px; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--elev);
}
.step::before {
  counter-increment: step; content: "0" counter(step);
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 16px;
  border-radius: 50%;
  background: var(--navy-950);
  box-shadow: inset 0 0 0 1px rgba(56, 198, 244, 0.5);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--accent-text);
}
.step h3 { font-size: 1.02rem; margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--fg-muted); }

/* ======================================================= Chips estaticos = */
.tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.tags li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 550; color: var(--fg);
  background: var(--card);
  box-shadow: var(--elev-hover);
}
.tags svg { flex: 0 0 15px; color: var(--accent-text); }
.section--light .tags li { background: #fff; color: var(--ink-900); box-shadow: var(--shadow-soft); }
.section--light .tags svg { color: var(--brand-blue); }

/* ------------------------------------------------------------- Reseñas --- */
.rating-hero {
  display: flex; align-items: center; gap: clamp(18px, 3.5vw, 44px);
  flex-wrap: wrap; padding: 22px 26px;
  border-radius: var(--r-lg); background: #fff;
  box-shadow: var(--shadow-soft); margin-top: 36px;
}
.rating-hero__score {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 2.7rem; font-weight: 800; letter-spacing: -0.04em; color: var(--ink-900);
}
.rating-hero__score span { font-size: 1rem; color: var(--ink-500); font-weight: 600; }
.stars { display: flex; gap: 3px; color: #f5a623; }
.rating-hero__meta { font-size: 13.5px; color: var(--ink-500); }
.rating-hero__meta b { color: var(--ink-900); }

.reviews { display: grid; gap: 18px; margin-top: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px; border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--shadow-soft);
}
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review__text { font-size: 15px; color: var(--ink-700); flex: 1; }
.review__who { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--navy-800), var(--brand-blue));
  color: #fff; font-weight: 700; font-size: 14px;
}
.review__name { font-weight: 650; font-size: 14.5px; color: var(--ink-900); line-height: 1.3; }
.review__role { font-size: 12.5px; color: var(--ink-500); }
.chip-demo {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 5px; white-space: nowrap;
  background: #fff5d6; color: #8a6100; border: 1px solid #f2dda0;
}

/* ----------------------------------------------------------------- FAQ --- */
.faq { margin-top: 36px; display: grid; gap: 10px; }
.faq details {
  border-radius: var(--r-md); overflow: hidden;
  background: var(--card); box-shadow: var(--elev);
  transition: box-shadow 0.2s;
}
.faq details[open] { box-shadow: inset 0 0 0 1px rgba(56, 198, 244, 0.36); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 18px 54px 18px 22px; font-weight: 600; font-size: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--cyan-400);
  border-bottom: 2px solid var(--cyan-400);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq__body { padding: 0 22px 20px; color: var(--fg-muted); font-size: 15px; }

/* ---------------------------------------------------------- Formulario --- */
.form-band {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(90% 70% at 88% 0%, rgba(41, 171, 226, 0.16), transparent 62%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
}
.form-layout {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 4.5vw, 60px); align-items: start;
}
.form-side .ticks { margin-top: 24px; }

.contact-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 16px; }
.contact-row { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; }
.contact-row svg { flex: 0 0 19px; color: var(--accent-text); margin-top: 3px; }
.contact-row span {
  display: block; font-size: 11.5px; color: var(--fg-muted);
  font-family: var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase;
}
.contact-row a:hover { color: var(--accent-text); }

.form-shell {
  padding: clamp(24px, 3.2vw, 38px); border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line-strong);
  backdrop-filter: blur(12px);
}

.progress { margin-bottom: 26px; }
.progress__track { height: 4px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.progress__fill {
  height: 100%; width: 33.33%; border-radius: 999px;
  background: var(--accent-grad);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress__labels {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 11px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted);
}
.progress__labels b { color: var(--accent-text); font-weight: 600; }

.fstep { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.fstep.is-active { display: block; animation: fadeUp 0.32s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.fstep__title { font-size: 1.28rem; margin-bottom: 5px; }
.fstep__hint { font-size: 14px; color: var(--fg-muted); margin-bottom: 24px; }

.field { margin-bottom: 18px; }
.field > label, .field__legend {
  display: block; font-size: 13.5px; font-weight: 600;
  margin-bottom: 9px; color: var(--fg); padding: 0;
}
.req { color: var(--accent-text); }
.opt { color: var(--fg-muted); font-weight: 400; }

.input, .select, .textarea {
  width: 100%; padding: 13px 15px; font-size: 15.5px;
  font-family: inherit; color: var(--fg);
  background: rgba(4, 9, 28, 0.5);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: rgba(151, 166, 196, 0.62); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent-text);
  background: rgba(4, 9, 28, 0.8);
  box-shadow: 0 0 0 4px rgba(56, 198, 244, 0.14);
}
.textarea { min-height: 88px; resize: vertical; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397a6c4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  background-size: 18px; padding-right: 44px; cursor: pointer;
}
.select option { background: var(--navy-900); color: var(--fg); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; font-size: 14.5px;
  cursor: pointer; user-select: none; color: var(--fg-muted);
  background: var(--card);
  box-shadow: var(--elev-hover);
  transition: all 0.16s;
}
.chip:hover { color: var(--fg); background: var(--card-hover); }
.chip:has(input:checked) {
  color: var(--navy-950); background: var(--accent-grad); font-weight: 600;
  box-shadow: 0 6px 18px -8px rgba(56, 198, 244, 0.7);
}
.chip:has(input:focus-visible) { outline: 2px solid var(--cyan-300); outline-offset: 3px; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--fg-muted); cursor: pointer; }
.check input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent-text); cursor: pointer; }
.check a { color: var(--accent-text); text-decoration: underline; }

.error { display: none; margin-top: 7px; font-size: 13px; color: #ff9d9d; }
.field.has-error .error { display: block; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: #ff7b7b; }
.field.has-error .chips { outline: 1px solid #ff7b7b; outline-offset: 6px; border-radius: 12px; }

.form-nav {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
}
.form-nav .spacer { flex: 1; }
.form-note { margin-top: 16px; font-size: 12.5px; color: var(--fg-muted); display: flex; gap: 8px; align-items: flex-start; }
.form-note svg { flex: 0 0 15px; margin-top: 3px; color: var(--lime-400); }

.form-done { display: none; text-align: center; padding: 16px 0; }
.form-done.is-active { display: block; animation: fadeUp 0.35s ease both; }
.form-done__icon {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(74, 222, 128, 0.14);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.35);
  color: var(--lime-400);
}
.form-done p { color: var(--fg-muted); margin-top: 10px; }
.form-done .btn-row { justify-content: center; }

.summary {
  margin-bottom: 22px; padding: 15px 17px; border-radius: var(--r-md);
  background: rgba(56, 198, 244, 0.06);
  box-shadow: inset 0 0 0 1px rgba(56, 198, 244, 0.22);
  font-size: 13.5px; color: var(--fg-muted);
}
.summary b { color: var(--accent-text); }
.summary dl { margin: 0; display: grid; gap: 5px; }
.summary div { display: flex; gap: 8px; }
.summary dt { color: var(--fg-muted); min-width: 88px; }
.summary dd { margin: 0; color: var(--fg); font-weight: 550; }

/* Tarjeta del asesor: pone cara humana al formulario sin sumar parrafos */
.advisor-card {
  display: flex; align-items: flex-end; gap: 14px;
  margin-top: 28px; padding: 0 20px 0 4px;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(23, 48, 126, 0.55), rgba(41, 171, 226, 0.12));
  box-shadow: var(--elev-hover);
  overflow: hidden;
}
.advisor-card img { width: 118px; flex: 0 0 118px; margin-bottom: -6px; }
.advisor-card p { padding-block: 20px; font-size: 15px; font-weight: 600; color: var(--fg); }
.advisor-card span {
  display: block; margin-top: 5px; font-weight: 400;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-text);
}

/* --------------------------------------------------------- Ficha / NAP --- */
.facts { margin-top: 36px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--elev); }
.facts dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts .row { padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--card); }
.facts .row:nth-child(odd) { border-right: 1px solid var(--line); }
.facts dt {
  color: var(--fg-muted); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 5px;
}
.facts dd { margin: 0; color: var(--fg); font-size: 15px; }

/* ------------------------------------------------------------- CTA band -- */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--r-xl); padding: clamp(32px, 4.5vw, 56px);
  background: linear-gradient(120deg, var(--navy-800), var(--brand-blue) 118%);
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 70% at 50% 0%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 0%, #000, transparent);
}
.cta-band > * { position: relative; }
.cta-band .lead { color: rgba(255, 255, 255, 0.84); margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* -------------------------------------------------------------- Footer --- */
.footer {
  background: var(--navy-950); border-top: 1px solid var(--line);
  padding-block: 56px 26px; font-size: 14.5px; color: var(--fg-muted);
}
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px 30px; }
.footer h4 {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--fg); margin-bottom: 16px; font-weight: 600;
}
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.footer a:hover { color: var(--accent-text); }
.footer__bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px;
}

/* --------------------------------------------------------- Sticky móvil - */
.mobile-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px;
  background: rgba(4, 9, 28, 0.95);
  backdrop-filter: blur(14px); border-top: 1px solid var(--line);
}
.mobile-cta .btn { flex: 1; padding: 14px 12px; font-size: 14.5px; }

.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  width: 54px; height: 54px; border-radius: 50%;
  background: #1faa54; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 14px 34px -10px rgba(31, 170, 84, 0.65);
  transition: transform 0.2s;
}
.wa-float:hover { transform: scale(1.07); }

/* ------------------------------------------------------------- Reveal --- */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal:nth-child(2) { transition-delay: 0.06s; }
.reveal:nth-child(3) { transition-delay: 0.12s; }
.reveal:nth-child(4) { transition-delay: 0.18s; }
.reveal:nth-child(5) { transition-delay: 0.24s; }
.reveal:nth-child(6) { transition-delay: 0.3s; }

/* -------------------------------------------------------------- Prose --- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 44px; font-size: clamp(1.35rem, 2.3vw, 1.8rem); }
.prose p, .prose ul { margin-top: 16px; color: var(--fg-muted); }
.prose ul { padding-left: 20px; display: grid; gap: 9px; }
.prose strong { color: var(--fg); }

.breadcrumb {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px;
  font-size: 12.5px; color: var(--fg-muted);
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
.breadcrumb a:hover { color: var(--accent-text); }

/* ================================================== SIMULADOR INTERACTIVO =
   Compara internet tipico contra gestionado con un modelo deterministico.
   La logica vive en app.js; aqui solo la piel de "consola de control". */
.sim-band {
  border-block: 1px solid var(--line);
  background:
    radial-gradient(80% 60% at 12% 0%, rgba(27, 63, 168, 0.25), transparent 60%),
    radial-gradient(70% 55% at 92% 100%, rgba(41, 171, 226, 0.12), transparent 60%),
    var(--navy-900);
}

.sim {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0; margin-top: 44px;
  border-radius: var(--r-xl); overflow: hidden;
  background: rgba(4, 9, 28, 0.75);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}
/* Borde luminoso animado alrededor de la consola */
.sim::before, .st::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--sim-angle, 0deg),
    rgba(56, 198, 244, 0.55), rgba(23, 48, 126, 0.25) 25%,
    rgba(56, 198, 244, 0.1) 50%, rgba(126, 224, 255, 0.5) 75%,
    rgba(56, 198, 244, 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sim-spin 9s linear infinite;
}
@property --sim-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes sim-spin { to { --sim-angle: 360deg; } }

.sim__controls {
  padding: clamp(24px, 3vw, 36px);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 22px;
}

.sim__toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: var(--card);
  box-shadow: var(--elev-hover);
}
.sim__tab {
  padding: 12px 10px; border: 0; border-radius: 999px;
  background: none; cursor: pointer;
  font-size: 14px; font-weight: 650; color: var(--fg-muted);
  transition: all 0.22s;
  white-space: nowrap;
}
.sim__tab.is-active { background: var(--accent-grad); color: var(--navy-950); box-shadow: 0 8px 22px -10px rgba(56, 198, 244, 0.8); }
.sim__tab--ok.is-active { background: linear-gradient(135deg, #22c55e, #4ade80); color: #03150a; box-shadow: 0 8px 22px -10px rgba(74, 222, 128, 0.8); }

.sim__field label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; font-weight: 600; margin-bottom: 12px;
}
.sim__field output {
  font-family: var(--font-mono); font-size: 13px; color: var(--accent-text);
}
.sim input[type="range"] {
  width: 100%; height: 26px; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; cursor: pointer;
}
.sim input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-text) var(--fill, 30%), var(--line-strong) var(--fill, 30%));
}
.sim input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(56, 198, 244, 0.25), 0 4px 12px rgba(0, 0, 0, 0.5);
}
.sim input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--line-strong);
}
.sim input[type="range"]::-moz-range-progress {
  height: 6px; border-radius: 999px; background: var(--cyan-400);
}
.sim input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 5px rgba(56, 198, 244, 0.25);
}

.sim__note {
  margin-top: auto; font-size: 12.5px; color: var(--fg-muted);
  padding-top: 18px; border-top: 1px solid var(--line);
}

.sim__screen {
  padding: clamp(24px, 3vw, 36px);
  background:
    linear-gradient(rgba(56, 198, 244, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 198, 244, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  display: flex; flex-direction: column; gap: 20px;
}

.sim__gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gauge {
  padding: 18px; border-radius: var(--r-md);
  background: rgba(4, 9, 28, 0.65);
  box-shadow: var(--elev);
}
.gauge__label {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--fg-muted);
}
.gauge__value {
  margin-top: 8px; font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.gauge__value small { font-size: 0.45em; font-weight: 600; color: var(--fg-muted); letter-spacing: 0; }
.gauge__bar {
  margin-top: 14px; height: 7px; border-radius: 999px;
  background: var(--card-hover); overflow: hidden;
}
.gauge__fill {
  height: 100%; width: 40%; border-radius: 999px;
  background: var(--accent-grad);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
}
.gauge.is-bad .gauge__value { color: var(--rose-400); }
.gauge.is-bad .gauge__fill { background: linear-gradient(90deg, #f43f5e, #fb7185); }
.gauge.is-warn .gauge__value { color: var(--amber-400); }
.gauge.is-warn .gauge__fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.gauge.is-ok .gauge__value { color: var(--lime-400); }
.gauge.is-ok .gauge__fill { background: linear-gradient(90deg, #22c55e, #4ade80); }

.sim__apps { display: grid; gap: 8px; }
.sim-app {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--r-md);
  background: rgba(4, 9, 28, 0.65);
  box-shadow: var(--elev);
  font-size: 14.5px; font-weight: 550;
  transition: box-shadow 0.3s;
}
.sim-app svg { flex: 0 0 18px; color: var(--fg-muted); }
.sim-app__name { flex: 1; }
.sim-app__state {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  transition: all 0.3s;
}
.sim-app[data-state="ok"] .sim-app__state { background: rgba(74, 222, 128, 0.14); color: var(--lime-400); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.35); }
.sim-app[data-state="warn"] .sim-app__state { background: rgba(251, 191, 36, 0.13); color: var(--amber-400); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35); }
.sim-app[data-state="bad"] .sim-app__state { background: rgba(251, 113, 133, 0.13); color: var(--rose-400); box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.4); }
.sim-app[data-state="bad"] { animation: sim-shake 0.35s ease; }
@keyframes sim-shake {
  25% { transform: translateX(-3px); } 50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

.sim__verdict {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 18px; border-radius: var(--r-md);
  font-size: 14px; line-height: 1.5;
  transition: all 0.3s;
}
.sim__verdict svg { flex: 0 0 18px; margin-top: 2px; }
.sim__verdict[data-tone="bad"] { background: rgba(251, 113, 133, 0.08); box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.3); color: #ffc9d2; }
.sim__verdict[data-tone="ok"] { background: rgba(74, 222, 128, 0.08); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.3); color: #c9f7d8; }
.sim__verdict b { color: #fff; }

.sim__cta { text-align: center; margin-top: 28px; }

/* ======================================================== SPEEDTEST =====
   Medidor real de la conexion del visitante. Misma piel de consola que el
   simulador; la logica vive en app.js y los endpoints en functions/api/speed. */
.st {
  position: relative; margin-top: 44px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-xl); overflow: hidden;
  background: rgba(4, 9, 28, 0.75);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}
.st__top {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.st__status {
  flex: 1; min-width: 220px;
  font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: 0.04em; color: var(--fg-muted);
}
.st__status b { color: var(--accent-text); font-weight: 600; }
.st__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.st .gauge__value { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.st .sim__note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 900px) { .st__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .st__grid { grid-template-columns: 1fr; } }

/* ==================================================== TICKER PROMO ======
   Franja de campaña sobre el header.

   Era roja saturada (#d91023) con el texto en mayusculas y peso 750: el
   lenguaje del descuento de retail, que es justo lo contrario de lo que
   busca un proveedor que vende a hoteles y restaurantes de tarifa alta.
   Con el header en azul tinta, esa franja se volvio lo mas estridente de
   la pagina.

   Pasa a azul mas profundo que el header, con el texto en blanco tenue y
   el acento solo en el separador. Dice lo mismo sin gritarlo. El rojo
   queda para el aviso del pop-up, que es donde si corresponde avisar. */
.ticker {
  display: block; overflow: hidden;
  background: #081228;
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ticker__track {
  display: flex; gap: 0; width: max-content;
  animation: ticker-run 26s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 26px;
  padding: 9px 13px 9px 26px;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
}
.ticker__item::after { content: "•"; color: var(--cyan-400); opacity: 0.8; }
@keyframes ticker-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; width: auto; flex-wrap: wrap; }
}

/* ======================================================= CONFIANZA ======
   Cifras + marquee de marcas. */
.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-top: 40px;
}
.stat {
  text-align: center; padding: 28px 18px;
  border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--elev);
}
.stat b {
  display: block;
  font-size: clamp(2.8rem, 6.5vw, 4.6rem);
  font-weight: 800; letter-spacing: -0.045em; line-height: 1;
  background: linear-gradient(100deg, #29abe2 15%, #a5ecff 40%, #4fd8ff 60%, #29abe2 85%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
  animation: stat-sheen 3.2s linear infinite;
  filter: drop-shadow(0 6px 26px rgba(56, 198, 244, 0.35));
}
@keyframes stat-sheen { to { background-position: -220% center; } }
.stat > span {
  display: block; margin-top: 12px;
  font-size: 14.5px; color: var(--fg-muted);
}
.stat b span { display: inline; font: inherit; color: inherit; margin: 0; }
@media (prefers-reduced-motion: reduce) { .stat b { animation: none; } }

.marquee {
  margin-top: 28px; overflow: hidden; position: relative;
  padding-block: 10px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; gap: 18px; width: max-content;
  animation: ticker-run 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
/* Muro de marcas: wordmarks en blanco, cada una con su propia "tipografia"
   para que se lea como un logo distinto, al estilo de un logo wall real. */
.marquee__track { align-items: center; gap: clamp(36px, 5vw, 72px); padding-inline: 24px; }
.brand-mark {
  display: inline-flex; align-items: center; gap: 11px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
  font-size: 21px; font-weight: 700; letter-spacing: 0.01em;
  opacity: 0.92;
  transition: opacity 0.2s, transform 0.2s;
}
.brand-mark:hover { opacity: 1; transform: translateY(-1px); }
.brand-mark i {
  font-style: normal; font-size: 15px; line-height: 1;
  color: rgba(126, 224, 255, 0.9);
}
.brand-mark--serif { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.brand-mark--caps { text-transform: uppercase; letter-spacing: 0.26em; font-size: 16.5px; font-weight: 800; }
.brand-mark--thin { font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; font-size: 18px; }
.brand-mark--mono { font-family: var(--font-mono); font-weight: 700; font-size: 17px; letter-spacing: 0.02em; }
.brand-mark--italic { font-family: Georgia, serif; font-style: italic; font-weight: 700; }
.brand-mark--black { font-weight: 900; letter-spacing: -0.03em; font-size: 22px; }

/* ================================================= SLIDER DE PROYECTOS === */
.slider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.slider-nav { display: flex; gap: 10px; flex: 0 0 auto; padding-bottom: 6px; }
.slider-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: #fff; color: var(--ink-900);
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
}
.slider-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(11, 18, 32, 0.5); }
.slider-btn:disabled { opacity: 0.35; cursor: default; transform: none; }

.cases {
  display: flex; gap: 18px; margin-top: 44px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; /* mandatory rebota cuando el snap queda fuera de rango */
  padding: 4px 4px 18px;
  scrollbar-width: none;
}
.cases::-webkit-scrollbar { display: none; }
.case {
  flex: 0 0 auto;
  width: min(400px, 86vw);
  scroll-snap-align: start;
}

/* ================================================== POPUP DE CAMPANA ===== */
.promo { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.promo[hidden] { display: none; }
.promo__backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 5, 16, 0.72);
  backdrop-filter: blur(6px);
  animation: promo-fade 0.3s ease both;
}
@keyframes promo-fade { from { opacity: 0; } }
.promo__card {
  position: relative; overflow: hidden;
  width: min(440px, 94vw);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(41, 171, 226, 0.25), transparent 60%),
    linear-gradient(165deg, var(--navy-800), var(--navy-950) 70%);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(56, 198, 244, 0.3);
  padding: 0 0 26px;
  animation: promo-pop 0.42s cubic-bezier(0.2, 1.2, 0.3, 1) both;
  text-align: center;
}
@keyframes promo-pop { from { opacity: 0; transform: translateY(26px) scale(0.94); } }
/* El rojo salia de ningun lado: no esta en la paleta de la marca y, con el
   resto del sitio en azul tinta, era lo unico que desentonaba. El sitio ya
   tiene un acento definido, el cyan, asi que el pop-up lo usa en vez de
   meter un color nuevo. La cinta baja de peso 800 a 600: el dato es que la
   visita no cuesta, no hace falta gritarlo. */
.promo__ribbon {
  background: linear-gradient(100deg, var(--brand-blue), var(--blue-600));
  color: rgba(255, 255, 255, 0.95);
  padding: 11px 44px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}
.promo__close {
  position: absolute; top: 7px; right: 10px;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  font-size: 19px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.18s;
}
.promo__close:hover { background: rgba(255, 255, 255, 0.28); }
.promo__body { padding: 26px 30px 0; }
.promo__body h3 { font-size: clamp(1.4rem, 4vw, 1.7rem); }
.promo__body h3 em { font-style: normal; color: var(--accent-text); }
.promo__offer { margin-top: 12px; color: var(--fg-muted); font-size: 15px; }
.promo__offer b { color: #fff; }
.promo__chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.promo__chips span {
  font-size: 12.5px; font-weight: 650; color: var(--accent-text);
  padding: 6px 13px; border-radius: 999px;
  background: rgba(56, 198, 244, 0.1);
  box-shadow: inset 0 0 0 1px rgba(56, 198, 244, 0.3);
}
/* El boton es lo unico que debe pedir atencion en el pop-up, asi que se
   lleva el cyan pleno con la tinta oscura encima: sobre el navy del cuadro
   destaca mas que el rojo y no se pelea con la marca. */
.promo__cta {
  display: inline-flex; margin-top: 22px;
  background: linear-gradient(135deg, var(--cyan-500), var(--cyan-400) 55%, var(--cyan-300));
  color: var(--navy-950);
}
.promo__cta:hover { box-shadow: 0 18px 44px -16px rgba(41, 171, 226, 0.7); }
.promo__valid {
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted);
}

/* ======================================================== PROYECTOS ===== */
/* .cases es un carrusel: reglas en la seccion SLIDER DE PROYECTOS */
.case {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-soft);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s;
}
.case:hover { transform: translateY(-5px); box-shadow: 0 24px 60px -28px rgba(11, 18, 32, 0.5); }
.case .shot { border-radius: 0; box-shadow: none; }
.case:hover .shot img { transform: scale(1.05); }
.case__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.case__sector {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-600);
}
.case h3 { font-size: 1.12rem; color: var(--ink-900); }
.case p { font-size: 14.5px; color: var(--ink-700); }
.case__metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.case__metrics span {
  font-size: 12.5px; font-weight: 650; color: var(--brand-blue);
  padding: 6px 12px; border-radius: 999px;
  background: rgba(23, 48, 126, 0.07);
  box-shadow: inset 0 0 0 1px rgba(23, 48, 126, 0.14);
}

/* ============================================================= BLOG ===== */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.post {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); background: var(--card);
  box-shadow: var(--elev);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s, background 0.28s;
}
.post:hover {
  transform: translateY(-5px); background: var(--card-hover);
  box-shadow: inset 0 0 0 1px rgba(56, 198, 244, 0.4);
}
.post .shot { border-radius: 0; box-shadow: none; }
.post:hover .shot img { transform: scale(1.05); }
.post__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post h3 { font-size: 1.05rem; line-height: 1.3; }
.post__foot { margin-top: auto; padding-top: 12px; }

@media (max-width: 900px) {
  .posts { grid-template-columns: 1fr; }
  .slider-head { flex-direction: column; align-items: flex-start; }
  .stats { grid-template-columns: 1fr; gap: 12px; }
}

/* ==================================== LANDING DE SERVICIO (2 columnas) ===
   Contenido didactico a la izquierda; formulario SIEMPRE visible a la
   derecha (sticky). En movil el formulario pasa al final y queda el CTA
   fijo inferior. */
.svc {
  padding-block: clamp(36px, 5vw, 64px) var(--pad-section);
  background:
    radial-gradient(90% 40% at 15% 0%, rgba(27, 63, 168, 0.22), transparent 60%),
    var(--bg);
}
.svc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.svc__main > * + * { margin-top: clamp(30px, 4vw, 46px); }
.svc__aside { position: sticky; top: 88px; }
.svc__aside .form-shell { padding: clamp(20px, 2vw, 28px); }
.svc__aside .fstep__title { font-size: 1.15rem; }
.svc__aside .field { margin-bottom: 14px; }
.svc__aside .grid-2 { grid-template-columns: 1fr; gap: 0; }
.svc__aside-note {
  margin-top: 14px; text-align: center;
  font-size: 13px; color: var(--fg-muted);
}
.svc__aside-note a { color: var(--accent-text); font-weight: 600; }

.svc__intro h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -0.035em; }
.svc__intro .lead { margin-top: 14px; }
.svc__intro .shot { margin-top: 26px; }

/* Beneficios: mini tarjetas con icono */
.bene { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bene__item {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 17px; border-radius: var(--r-md);
  background: var(--card); box-shadow: var(--elev);
  font-size: 14.5px; font-weight: 550; line-height: 1.4;
  transition: background 0.2s, transform 0.2s;
}
.bene__item:hover { background: var(--card-hover); transform: translateY(-2px); }
.bene__item svg { flex: 0 0 20px; margin-top: 1px; color: var(--accent-text); }

/* Flujo vertical con linea conectora */
.flow { position: relative; display: grid; gap: 12px; }
.flow::before {
  content: ""; position: absolute; left: 21px; top: 26px; bottom: 26px;
  width: 2px;
  background: linear-gradient(180deg, rgba(56, 198, 244, 0.5), rgba(56, 198, 244, 0.08));
}
.flow__step {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  padding: 15px 17px 15px 0;
}
.flow__num {
  position: relative; z-index: 1;
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-900);
  box-shadow: inset 0 0 0 1.5px rgba(56, 198, 244, 0.55), 0 0 22px rgba(56, 198, 244, 0.18);
  color: var(--accent-text);
}
.flow__step h3 { font-size: 1.02rem; margin-bottom: 4px; }
.flow__step p { font-size: 14px; color: var(--fg-muted); }

/* Titulo de bloque dentro de la landing */
.svc__h {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem); letter-spacing: -0.025em;
  margin-bottom: 18px;
}
.svc__h svg { flex: 0 0 22px; color: var(--accent-text); }

/* Guardia compacta dentro de la columna */
.svc__guardia {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 22px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(23, 48, 126, 0.5), rgba(41, 171, 226, 0.1));
  box-shadow: inset 0 0 0 1px rgba(56, 198, 244, 0.28);
}
.svc__guardia .dot { margin-top: 7px; flex: 0 0 7px; }
.svc__guardia b { color: #fff; }
.svc__guardia p { font-size: 14.5px; color: var(--fg-muted); margin-top: 3px; }

@media (max-width: 1024px) {
  .svc__grid { grid-template-columns: 1fr; }
  .svc__aside { position: static; }
  .bene { grid-template-columns: 1fr; }
}

/* ============================================= PROCESO CON IMAGEN ======= */
.step__img {
  margin: -26px -22px 18px; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  position: relative;
}
.step__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}
.step__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 9, 28, 0.1), rgba(4, 9, 28, 0.72) 92%);
}
.steps--media { margin-top: 44px; }
.steps--media::before { display: none; }
.steps--media .step { overflow: hidden; }
.steps--media .step::before {
  position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0;
  background: rgba(4, 9, 28, 0.8); backdrop-filter: blur(6px);
}

/* ==================================================== Lienzo de red ===== */
.hero__net { position: absolute; inset: 0; z-index: -1; opacity: 0.55; }

/* Titulares con acento luminoso al hacer scroll */
.head .h-1, .head .h-2 { position: relative; }

/* ---------------------------------------------------------- Responsive -- */
@media (max-width: 1240px) {
  .logo__tag { display: none; }
  .nav { gap: 22px; }
}

@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps::before { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .scards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .hero { min-height: 0; align-items: center; }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .form-layout { grid-template-columns: 1fr; }
  .grid--3, .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav, .header__cta .btn--ghost { display: none; }
  .burger { display: block; }
  .logo__tag { display: none; }
  .float-stat { left: 12px; bottom: 12px; max-width: 68%; }
}

@media (max-width: 700px) {
  body { font-size: 16.5px; padding-bottom: 74px; }
  .grid--2, .grid--3, .grid--4, .reviews, .steps, .grid-2, .scards { grid-template-columns: 1fr; }
  .header__cta .btn { display: none; }
  .mobile-cta { display: flex; }
  .wa-float { display: none; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .facts dl { grid-template-columns: 1fr; }
  .facts .row:nth-child(odd) { border-right: 0; }
  .topbar__list { display: none; }
  .rating-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .vs__head, .vs__row { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; }
  .vs__col-us { padding: 0; }
  .vs__head { display: none; }
  .vs__no::before { content: "Otros: "; color: var(--ink-500); }
  .vs--dark .vs__no::before { color: var(--fg-muted); }
  .vs__yes::before { content: "INTERNEXT: "; font-weight: 700; }
  .vs__col-us { background: none; margin-block: 0; padding-inline: 0; }
  .pills li { font-size: 13px; padding: 9px 14px; }
  /* En movil los CTA del hero ocupan el ancho completo: mas facil de acertar */
  .hero .btn-row { gap: 10px; }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .hero h1 small { margin-top: 6px; }
  .sim__gauges { grid-template-columns: 1fr; }
  .sim__tab { font-size: 13px; padding: 11px 6px; }
}

@media (max-width: 960px) {
  .sim { grid-template-columns: 1fr; }
  .sim__controls { border-right: 0; border-bottom: 1px solid var(--line); }
  .sim__note { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .header, .mobile-cta, .wa-float, .topbar, .form-band { display: none; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------- superficies oscuras --
   El sitio es claro, pero el hero, el pie y las bandas de cierre siguen en
   navy: un sitio de gama alta alterna, no es blanco de arriba abajo.
   Dentro de estas zonas el texto, los bordes y el acento vuelven a los
   valores del tema oscuro, y todo lo que hay dentro los hereda. */
.hero,
.header,
.topbar,
.footer,
.cta-band,
.form-band,
.section--dark,
.vs--dark,
.guardia,
.sim-band,
.sim,
.sim-app,
.gauge,
.promo__card,
.mobile-nav,
.step::before,
.steps--media .step::before {
  --fg: var(--dark-fg);
  --fg-muted: var(--dark-fg-muted);
  --line: var(--dark-line);
  --line-strong: rgba(255, 255, 255, 0.18);
  --card: var(--dark-card);
  --card-hover: rgba(255, 255, 255, 0.07);
  --accent-text: var(--cyan-300);
  --grad-text: linear-gradient(120deg, var(--cyan-500) 0%, var(--cyan-400) 50%, var(--cyan-300) 100%);
  --elev: inset 0 0 0 1px var(--dark-line);
  --elev-hover: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: var(--dark-fg);
}

/* ------------------------------------------------------------------ blog --
   La seccion crecio de 3 a 8 articulos el 7 de noviembre de 2026, y una
   rejilla plana de tarjetas iguales dejo de servir para orientarse. */

.post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.04em; color: var(--fg-muted); margin: 0;
}
.post__meta time::before,
.post__min::before { content: "·"; margin-right: 8px; opacity: 0.5; }
.post__meta--articulo { margin: 14px 0 0; }
.post__meta--articulo time::before { content: none; margin: 0; }

.post__cat {
  color: var(--accent-text); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 10.5px;
}

/* Destacado: una sola tarjeta a lo ancho, con la imagen al lado en escritorio */
.posts--destacado { grid-template-columns: 1fr; margin-top: 26px; }
.post--destacada { flex-direction: row; align-items: stretch; }
.post--destacada .shot { flex: 0 0 46%; border-radius: 0; }
.post--destacada .shot img { height: 100%; object-fit: cover; }
.post--destacada .post__body { padding: 30px 34px; justify-content: center; gap: 13px; }
.post__titulo { font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.22; }
.post__resumen { color: var(--fg-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }

.posts--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Pastillas de filtro */
.blog-filtros { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--fg-muted); background: var(--card); border: 0;
  box-shadow: var(--elev);
  transition: color 0.22s, background 0.22s, box-shadow 0.22s;
}
.chip:hover { color: var(--fg); background: var(--card-hover); }
.chip.is-activa {
  color: var(--navy-950); background: var(--cyan-300);
  box-shadow: inset 0 0 0 1px var(--cyan-300);
}
.chip__n { opacity: 0.6; font-size: 11px; }
.chip.is-activa .chip__n { opacity: 0.7; }

.blog-vacio { color: var(--fg-muted); margin-top: 26px; }
.post[hidden] { display: none; }

@media (max-width: 900px) {
  .post--destacada { flex-direction: column; }
  .post--destacada .shot { flex: none; }
  .post--destacada .post__body { padding: 22px 24px 26px; }
  .posts--dos { grid-template-columns: 1fr; }
}