@import url("fuentes.css?v=20261020a");
/* ============================================================
   cPanelHost.cl — Réplica del sitio en producción (www4)
   con mejoras: menú superior fijo, pie de página moderno,
   diseño adaptable a móviles y logo nuevo.
   ============================================================ */

:root {
  --gris-texto: #696969;      /* texto general del sitio original */
  --gris-titulo: #4d4d4f;     /* títulos */
  --gris-tabla: #807f7f;      /* texto tablas comparativas */
  --verde: #2eb82c;           /* verde caja lateral y checks */
  --verde-oscuro: #24961f;
  --rojo: #d9232a;            /* botones Activar Plan / Siguiente */
  --rojo-texto: #e00b1c;      /* advertencias en rojo */
  --azul: #3498db;            /* títulos 5GB/10GB/20GB */
  --carbon: #323234;          /* nav y footer */
  --carbon-2: #3a3a3c;
  --borde: #d6d6d6;
  --input-bg: #ececec;
  --ancho: 970px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* `clip` (y no `hidden`) evita la barra horizontal mientras el submenú entra
   deslizándose desde fuera de la pantalla, sin crear un contenedor de scroll
   que rompería el `position:sticky` del menú. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  color: var(--gris-texto);
  line-height: 1.7;
  background-color: #ffffff;
}

#fondo { min-height: 100vh; }

img, svg { max-width: 100%; }

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

#global { width: 100%; }

/* ============ CABECERA (réplica del header.jpg, 140px) ============ */
/* Barra superior de información (estilo wirenet) */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 4vw;
  /* Variante I (2026-10-02): gris plano con filete azul arriba. Anteriores:
     C = #141416; original = rayas diagonales + brillo sobre #4b4b4d -> #2d2d2f */
  background: #2a2a2c;
  border-top: 3px solid #2380c4;
}
/* Vineta J (2026-10-02): etiqueta INFO fija antes de los mensajes rotativos */
#header::before {
  content: "INFO";
  flex: none;
  margin-right: -10px;            /* gap del header es 20px: quedan 10px al texto */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 1;
  color: #ffffff;
  background: #2380c4;
  border-radius: 4px;
  padding: 4px 6px;
}
@media (max-width: 860px) { #header::before { display: none; } }

.logo { display: inline-block; }
.logo:hover { text-decoration: none; }

/* Logo oficial: 4 puntos crecientes centrados sobre cPanelHost */
.logo-stack { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.logo-dots { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 6px; }
.logo-dots i { display: block; border-radius: 50%; background: #ffffff; }
.logo-dots i:nth-child(1) { width: 5px;  height: 5px;  }
.logo-dots i:nth-child(2) { width: 7px;  height: 7px;  }
.logo-dots i:nth-child(3) { width: 10px; height: 10px; }
.logo-dots i:nth-child(4) { width: 13px; height: 13px; }
.logo-word {
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 30px;
  color: #ffffff;
  letter-spacing: -0.5px;
}

/* ---- Mensajes rotativos de la barra superior ----
   Tres frases que se turnan cada 5 s (ciclo de 15 s): la que sale se va hacia
   la izquierda desvaneciéndose y la siguiente entra desde la izquierda. */
.header-tagline {
  color: #e8e8e8;
  font-weight: 400;
  font-size: 14px;
  position: relative;
  height: 1.6em;
  line-height: 1.6em;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.header-tagline span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-40px);
  animation: rotar-tagline 20s ease-in-out infinite;
}
.header-tagline span:nth-child(2) { animation-delay: 5s; }
.header-tagline span:nth-child(3) { animation-delay: 10s; }
.header-tagline span:nth-child(4) { animation-delay: 15s; }
/* Ciclo de 20 s = 4 mensajes x 5 s (0,6 s de entrada, 4,4 s visible, 0,6 s de salida) */
@keyframes rotar-tagline {
  0%   { opacity: 0; transform: translateX(-40px); }
  3%   { opacity: 1; transform: translateX(0); }
  22%  { opacity: 1; transform: translateX(0); }
  25%  { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 0; transform: translateX(-40px); }
}
/* Sin animación: se muestra solo el primer mensaje */
/* NOTA (v3.43): por decisión de Ricardo las animaciones se muestran SIEMPRE,
   también en equipos con «reducir movimiento» activado en el sistema operativo.
   Se eliminaron los bloques @media (prefers-reduced-motion: reduce). */

.header-info { text-align: right; color: #f0f0f0; font-weight: 400; font-size: 14px; line-height: 1.6; }

/* Enlaces de servicio a la derecha de la barra superior (estilo wirenet) */
.header-links { display: flex; align-items: center; gap: 28px; }
.header-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e8e8e8;
  font-size: 14px;
  white-space: nowrap;
}
.header-links a svg { width: 18px; height: 18px; flex: none; }
.header-links a:hover { color: #ffffff; text-decoration: none; }
.header-links a:hover span { text-decoration: none; }
/* Iconos en cuadrado redondeado azul con el dibujo en blanco (variante G, 2026-10-02) */
.header-links a .hl-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 7px;
  background: #2380c4; color: #ffffff; font-style: normal;
  transition: background .25s ease, color .25s ease;
}
.header-links a .hl-ico svg { display: block; width: 16px; height: 16px; }
/* (2026-10-03) los iconos no cambian de color al pasar el mouse */

/* ============ MENÚ SUPERIOR (fijo al hacer scroll) ============ */
#nav {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #454547, #333335);
  border-bottom: 1px solid #232325;
}

/* Logo dentro de la barra de menú, a la izquierda (estilo wirenet).
   Selector con #nav para ganar a la regla general "#nav a" y así
   alinear el logo con el texto de la barra superior (padding 4vw). */
#nav a.nav-logo { flex: none; display: block; padding: 0 0 0 4vw; margin-right: 84px; cursor: pointer; line-height: 1; }
.nav-logo .logo-stack { padding: 2px 0; }
.nav-logo .logo-word { font-size: 38px; }
.nav-logo .logo-dots { gap: 7px; margin-bottom: 5px; }
.nav-logo .logo-dots i:nth-child(1) { width: 7px;  height: 7px;  }
.nav-logo .logo-dots i:nth-child(2) { width: 8px;  height: 8px;  }
.nav-logo .logo-dots i:nth-child(3) { width: 11px; height: 11px; }
.nav-logo .logo-dots i:nth-child(4) { width: 14px; height: 14px; }

/* El logo no cambia de aspecto al pasar el mouse: solo cursor de mano */
#nav a.nav-logo:hover { background: transparent; color: inherit; text-decoration: none; }

.nav-toggle-input { display: none; }
.nav-toggle {
  display: none;
  cursor: pointer;
  padding: 10px 14px;
  color: #fff;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; }

#nav ul { list-style: none; display: flex; align-items: stretch; }
#nav > div > ul > li { position: relative; }

.nav-links { flex: 1; min-width: 0; }
#nav a, #nav .nav-drop-label {
  display: block;
  padding: 0 26px;
  line-height: 74px;
  color: #eeeeee;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
}
/* El resaltado gris es SOLO para el hover: la página actual (.active) no debe
   quedar permanentemente "encendida". */
#nav a:hover, #nav .nav-drop-label:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  text-decoration: none;
}
/* La página actual no se resalta... salvo cuando el cursor está encima
   (`:not(:hover)` evita anular el hover). */
#nav a.active:not(:hover) { background: transparent; }
.nav-drop-label::after { content: " ▾"; font-size: 10px; color: #bbbbbb; }

/* «Soy Cliente»: empujado a la derecha y alineado con la barra superior */
.nav-cliente { margin-left: auto; }
#nav .nav-cliente .nav-drop-label {
  display: flex;
  align-items: center;
  gap: 8px;
  /* El recuadro del hover queda simétrico (26px a cada lado) y la separación
     con el borde se hace con margen, para que el resaltado no llegue al filo.
     El texto sigue terminando a 4vw = alineado con «Ubicación y Contacto». */
  padding-right: 26px;
  margin-right: calc(4vw - 26px);
}
/* Iconos de las opciones del menú (mismo tamaño en las tres) */
#nav .nav-links > ul > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  /* alto explícito: el `line-height:74px` ya no centra porque el texto va en un
     <span> con su propia caja (ver el subrayado animado más abajo) */
  height: 74px;
}
#nav .nav-links > ul > li > a svg,
#nav .nav-cliente .nav-drop-label svg { width: 38px; height: 38px; flex: none; }

/* ---- Subrayado que se dibuja de izquierda a derecha ----
   Se dibuja sobre el <span> del texto (no sobre el enlace completo) para que
   no abarque el icono, y se anima con scaleX desde el borde izquierdo. */
#nav .nav-links > ul > li > a > span,
#nav .nav-cliente .nav-drop-label > span {
  position: relative;
  display: inline-block;
  /* el enlace usa line-height:74px para centrar; el span necesita una caja
     ajustada al texto para que el subrayado quede pegado a él */
  line-height: 1.25;
}
#nav .nav-links > ul > li > a > span::after,
#nav .nav-cliente .nav-drop-label > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
#nav .nav-links > ul > li > a:hover > span::after,
#nav .nav-cliente .nav-drop-label:hover > span::after,
#nav .nav-cliente:hover .nav-drop-label > span::after { transform: scaleX(1); }

/* ---- Variante G (2026-10-02): barra azul en el borde inferior del menu ----
   Reemplaza al subrayado del texto y al fondo gris del hover (solo escritorio;
   en movil sigue el estilo de lista). Crece de izquierda a derecha en 1,3 s; el icono se eleva 3px. */
@media (min-width: 861px) {
  #nav .nav-links > ul > li > a > span::after,
  #nav .nav-cliente .nav-drop-label > span::after { display: none; }
  #nav .nav-links > ul > li > a,
  #nav .nav-cliente .nav-drop-label { position: relative; }
  #nav .nav-links > ul > li > a:hover,
  #nav .nav-cliente .nav-drop-label:hover,
  #nav .nav-cliente:hover .nav-drop-label { background: transparent; }
  #nav .nav-links > ul > li > a::after,
  #nav .nav-cliente .nav-drop-label::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #5b8def;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.3s ease;
    pointer-events: none;
  }
  #nav .nav-links > ul > li > a:hover::after,
  #nav .nav-cliente .nav-drop-label:hover::before,
  #nav .nav-cliente:hover .nav-drop-label::before { transform: scaleX(1); }
  /* el icono se eleva levemente */
  #nav .nav-links > ul > li > a svg,
  #nav .nav-cliente .nav-drop-label svg { transition: transform .4s ease; }
  #nav .nav-links > ul > li > a:hover svg,
  #nav .nav-cliente .nav-drop-label:hover svg,
  #nav .nav-cliente:hover .nav-drop-label svg { transform: translateY(-3px); }
}
/* El submenú se pega al borde derecho de la pantalla (se desplaza, no se estira)
   y lleva las esquinas del lado izquierdo redondeadas. */
.nav-cliente .dropdown {
  left: auto;
  right: 0;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  overflow: hidden;            /* recorta el fondo del hover en las esquinas */
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 300px;
  background: #111113;                       /* fondo negro */
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  z-index: 300;
  /* Oculto pero animable: entra deslizándose desde la derecha y apareciendo
     desde totalmente transparente hasta sólido. `visibility` se retrasa hasta
     el final de la salida para que la animación inversa también se vea. */
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
#nav li:hover > .dropdown, #nav li:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity .3s ease, transform .3s ease, visibility 0s;
}
/* Accesibilidad: sin desplazamiento si el usuario pidió menos animación */
/* El ul del desplegable debe ser vertical: se especifica con #nav para
   ganarle a la regla "#nav ul { display:flex }" */
#nav .dropdown ul { display: block; }
.dropdown a {
  color: #ffffff !important;   /* fuente blanca sobre el fondo negro */
  padding: 11px 18px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 15px;
  font-weight: 400;
}
/* Iconos del submenú: heredan el color del texto (currentColor) */
#nav .dropdown a { display: flex; align-items: center; gap: 11px; }
#nav .dropdown a svg { width: 20px; height: 20px; flex: none; opacity: .8; }
#nav .dropdown a:hover svg { opacity: 1; }
/* Hover sobre fondo negro: fila apenas iluminada y texto (con su icono, por
   currentColor) en una versión clara del azul del sitio, legible sobre negro. */
.dropdown a:hover { background: rgba(255, 255, 255, 0.09) !important; color: #58a9e8 !important; }

/* ============ CONTENIDO ============ */
#contenido {
  display: flex;
  gap: 0;
  background: #ffffff;
  padding: 0;
  align-items: flex-start;
}

.izq { display: none; }
.der { flex: 1; min-width: 0; padding: 0 3vw 14px; }
.der > h1.titulo, .der > h2.titulo { margin-top: 22px; }

/* Caja lateral verde */
.box-incluye {
  border: 1px solid var(--borde);
  background: #ececec;
  padding-bottom: 6px;
  margin-bottom: 26px;
}
.box-incluye .box-titulo {
  background: var(--verde);
  color: #ffffff;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  padding: 9px 12px;
  line-height: 1.35;
}
.box-incluye ul { list-style: none; padding: 14px 12px 8px; }
.box-incluye li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.45;
}
.box-incluye li svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }

/* Banner Servipag / bancos */
.box-servipag { border: 1px solid var(--borde); display: block; }
.box-servipag img { display: block; width: 100%; }

/* Títulos de página y de sección */
h1.titulo, h2.titulo {
  font-size: 24px;
  font-weight: normal;
  color: var(--gris-titulo);
  padding-bottom: 12px;
  border-bottom: 1px solid #e3e3e3;
  margin-bottom: 16px;
  line-height: 1.3;
}
h2.titulo { font-size: 22px; margin-top: 34px; }

h3.subtitulo {
  font-size: 18px;
  font-weight: normal;
  color: #2380c4;   /* = azul del titulo de activacion y del 5GB de la parrilla */
  border-bottom: 1px solid #e9e9e9;
  padding-bottom: 8px;
  margin: 26px 0 14px;
}

.der p { margin-bottom: 10px; }

.rojo { color: var(--rojo-texto); font-weight: bold; }

/* ============ FRANJA DE PLANES (carrusel → desplazamiento CSS) ============ */
/* ============ BANNER HERO (estilo wirenet) ============ */
.hero-banner {
  margin: 0 -3vw;
  padding: 84px 5vw 92px;
  background: url("../img/hero-servidores.jpg") center / cover no-repeat #0e1013;
  text-align: center;
  color: #ffffff;
}
/* Prueba 2026-10-04: foto alternativa del hero del home (consola en rack).
   Revertir = quitar la clase hero-home-consola en index.html. */
.hero-banner.hero-home-consola {
  background-image: linear-gradient(rgba(6, 10, 16, .76), rgba(6, 10, 16, .76)),
                    url("../img/hero-home-consola.jpg");
}
/* .hero-top eliminado en v3.42 (su contenido quedaba repetido en el subtítulo) */
.hero-banner h1 {
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin: 0 auto 18px;
  max-width: 1100px;
}
.hero-banner h1 .azul { color: #5b8def; }
.hero-banner h1 .h1-sub {
  display: block;
  font-size: 0.5em;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 16px;
  color: #ffffff;
}
.hero-banner .hero-sub {
  font-size: 19px;
  color: #d6d6d6;
  margin-bottom: 46px;
}
/* Hero corto de planes-hosting.html: solo título y bajada, sin botón.
   Reutiliza el fondo y la tipografía del hero grande a menor escala. */
.hero-banner.hero-corto {
  padding: 52px 3vw 56px;
  /* Foto propia de esta página (racks de red), distinta a la de la portada */
  background-image: url("../img/hero-planes.jpg");
}
/* Foto propia de servidores-dedicados.html. Lleva su propia capa oscura
   porque la foto es más clara que la de planes y el título necesita
   contraste. Va después de .hero-corto para ganarle el background-image. */
/* 2026-10-04: foto nueva del hero de planes-hosting.html (pasillo de racks),
   oscura como el home. Revertir = quitar la clase hero-planes-2 en planes-hosting.html. */
.hero-banner.hero-corto.hero-planes-2 {
  background-image: linear-gradient(rgba(6, 10, 16, .70), rgba(6, 10, 16, .70)),
                    url("../img/hero-planes-6.jpg");
}
.hero-banner.hero-corto.hero-dedicados {
  background-image: linear-gradient(rgba(6, 10, 16, .70), rgba(6, 10, 16, .70)),
                    url("../img/hero-planes-5.jpg");
}
.hero-banner.hero-corto.hero-dedicados.hero-pagar {
  background-image: linear-gradient(rgba(6, 10, 16, .50), rgba(6, 10, 16, .50)),
                    url("../img/hero-pagar-servicio.jpg");
}
.hero-corto h1 {
  font-size: clamp(30px, 3.2vw, 44px);
  margin-bottom: 14px;
}
/* La bajada va en una sola línea: se reduce el cuerpo con el ancho disponible
   (clamp) y se prohíbe el salto. Bajo 1150px vuelve a poder partirse. */
.hero-corto .hero-sub {
  font-size: clamp(13px, 1.18vw, 18px);
  margin-bottom: 0;
  max-width: none;
  white-space: nowrap;
}
.hero-corto .hero-sub strong { color: #ffffff; font-weight: 700; }

/* ---- Revelado de los servicios del hero (solo CSS, sin JavaScript) ----
   La casilla oculta guarda el estado: al pulsar «Comienza Ahora» (que es su
   <label>) el botón se desvanece y los servicios aparecen en su lugar.
   Ambos conservan su espacio (visibility, no display) para que nada salte. */
.hero-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
/* El botón y los servicios ocupan la MISMA celda: uno reemplaza al otro
   exactamente en el mismo lugar, sin desplazar nada. */
.hero-switch {
  display: grid;
  place-items: center;
}
.hero-switch > * { grid-area: 1 / 1; }
.hero-switch { overflow-x: clip; }   /* 2026-10-20: lo que se anima nunca ensancha la pagina */
.hero-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility 0s linear .55s;
}
.hero-toggle:checked ~ .hero-switch .hero-items {
  opacity: 1;
  visibility: visible;
  transition: opacity .55s ease, visibility 0s;
}
/* Cada servicio entra desde su lado: «Web Hosting» desde la izquierda y
   «Servidores Dedicados» desde la derecha, hasta su posición final. */
.hero-items > a:first-of-type { transform: translateX(-70px); }
.hero-items > a:last-of-type  { transform: translateX(70px); }
.hero-items > a { transition: transform .55s ease; }
.hero-toggle:checked ~ .hero-switch .hero-items > a { transform: translateX(0); }
.hero-items a {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #ffffff;
  font-size: 19px;
}
.hero-items a:hover { text-decoration: none; color: #5b8def; }
.hero-items a svg { width: 46px; height: 46px; flex: none; }
.hero-sep { width: 1px; height: 44px; background: rgba(255, 255, 255, 0.35); }
.btn-hero {
  display: inline-block;
  background: #2380c4;
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 600;
  padding: 14px 38px;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .55s ease, background .2s ease, visibility 0s;
}
.btn-hero:hover { background: #1d6ba5; text-decoration: none; }
/* Brillo suave que recorre el boton cada 4,5 s (variante 9, 2026-10-03) */
.btn-hero { position: relative; overflow: hidden; }
.btn-hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
  animation: btn-hero-brillo 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btn-hero-brillo { 0% { left: -60%; } 65% { left: 120%; } 100% { left: 120%; } }   /* ~2 s de barrido + ~1 s de pausa */
/* Una vez pulsado, el botón se desvanece y deja de recibir clics */
.hero-toggle:checked ~ .hero-switch .btn-hero {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .55s ease, visibility 0s linear .55s;
}

/* ============ INFRAESTRUCTURA TÉCNICA DEL DATACENTER ============ */
.infra {
  padding: 56px 0 46px;
  text-align: center;
}
.infra h2 {
  font-size: 33px;
  font-weight: 400;
  color: #2f2f31;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
}
.infra h2 strong { font-weight: 700; }
.infra .infra-sub {
  font-size: 19px;          /* mismo tamaño que el subtítulo del hero */
  color: var(--gris-texto);
  margin-bottom: 52px;
}
.infra-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  text-align: left;
}
.infra-card {
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  padding: 28px 22px 26px;
}
/* (2026-10-03) sin efecto de levante ni sombra al pasar el mouse */
/* Icono superior centrado, en círculo celeste claro (estilo de las cápsulas
   de wirenet). El SVG usa currentColor, así que basta con fijar `color`. */
.infra-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #0e5ba8;       /* círculo azul sólido, como la cápsula de referencia */
  color: #ffffff;            /* el SVG usa currentColor */
  margin: 2px auto 20px;
}
.infra-ico svg { width: 46px; height: 46px; }
.infra-card h3 {
  font-size: 22px;           /* mismo peso y tamaño que los títulos de referencia */
  font-weight: 400;
  color: #2f2f31;
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin-bottom: 11px;
}
.infra-card p {
  font-size: 15.5px;
  color: var(--gris-texto);
  line-height: 1.7;
}

/* Botón gris bajo la sección de infraestructura: mismo comportamiento que el
   del hero (se desvanece y deja en su lugar los dos servicios), pero sobre
   fondo claro, así que el texto y los iconos van oscuros. */
.infra-cta {
  text-align: center;
  padding-bottom: 46px;
}
.btn-hero.btn-hero-gris { background: linear-gradient(180deg, #454547, #333335); }
.btn-hero.btn-hero-gris:hover { background: linear-gradient(180deg, #515153, #3d3d3f); }
.hero-items-claro a { color: #3c3c3c; }
.hero-items-claro a:hover { color: #2380c4; }
.hero-items-claro .hero-sep { background: rgba(0, 0, 0, 0.18); }

/* ============ «cPanelHost, un proveedor confiable desde 2012» ============
   Va entre las cápsulas de infraestructura y el botón gris. Tipografía
   heredada de .infra para que ambas secciones se lean como una sola pieza. */
.confia-seccion {
  padding: 6px 0 30px;
  text-align: center;
}
.confia-seccion h2 {
  font-size: 33px;
  font-weight: 400;
  color: #2f2f31;
  letter-spacing: -0.3px;
  margin-bottom: 22px;
}
.confia-seccion h2 strong { font-weight: 700; }
/* Dos bloques de texto con ilustración al costado: la primera a la izquierda,
   la segunda a la derecha (se invierte con .confia-inv). Para cambiar una
   ilustración por una fotografía basta con reemplazar el contenido del
   <figure class="confia-fig">: el CSS ya sirve para <svg> y para <img>. */
.confia-bloque {
  display: grid;
  grid-template-columns: 36% 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 34px;
}
.confia-bloque.confia-inv { grid-template-columns: 1fr 36%; }
.confia-fig { margin: 0; }
.confia-fig svg, .confia-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.confia-texto {
  margin: 0;
  text-align: left;
}
.confia-texto p {
  font-size: 16.5px;
  color: var(--gris-texto);
  line-height: 1.8;
  margin-bottom: 14px;
}
.confia-texto p:last-child { margin-bottom: 0; }
.confia-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.confia-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  padding: 26px 18px;
}
.confia-cifra {
  font-size: 36px;
  font-weight: 800;
  color: #2380c4;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.confia-rotulo {
  font-size: 15px;
  color: var(--gris-texto);
  line-height: 1.45;
}

/* ============ MALLA DE PLANES (cápsulas + carrusel de 2 páginas) ============
   Misma estética que las cápsulas de «Infraestructura de nuestro datacenter»:
   tarjeta blanca, borde gris claro, radio 10px y elevación al pasar el cursor.
   Se ven 3 planes por fila; las flechas laterales muestran los 3 restantes.
   Sin JavaScript: dos radios ocultos + `transform` sobre la pista.

   Geometría del carrusel (no tocar sin rehacer el cálculo):
   ancho visible W, separación g=22px y un asomo p=190px de la 4.ª cápsula
   para que se vea que hay más planes. Caben 3 tarjetas completas + el asomo:
       3c + 3g + p = W        →  c = (W - 3g - p)/3
   La pista lleva las 6 en columnas iguales, así que su ancho total es
       T = 6c + 5g = 2W - g - 2p   →  width: calc(200% - g - 2p)
   y para la segunda página hay que correrla T - W, que expresado sobre el
   propio ancho de la pista es
       d = T/2 - g/2 - p      →  transform: translateX(calc(-50% + g/2 + p))
   Con g=22 y p=190: width calc(200% - 402px) y translateX(calc(-50% + 201px)).
   En la página 2 la 3.ª cápsula queda asomando por la izquierda. */
.planes-strip {
  position: relative;
  margin: 0 0 10px;
  padding: 72px 0 14px;   /* aire entre el hero y «Estándar» */
}
/* Las casillas van `fixed` a propósito: al pulsar una flecha el navegador
   enfoca el radio y, si estuviera arriba de la malla, arrastraría el scroll
   hasta él (saltaba a los planes Estándar). Estando siempre dentro de la
   ventana no hay nada que desplazar, así que la altura vertical se mantiene.
   El selector `~` funciona igual porque depende del orden en el HTML, no de
   la posición en pantalla. */
.planes-radio {
  position: fixed;
  top: 50%;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Título y subtítulo de la malla: misma tipografía que «Infraestructura de
   nuestro datacenter» y su bajada, para que las tres secciones de la portada
   se lean con la misma jerarquía. */
.planes-titulo {
  font-size: 33px;
  font-weight: 400;
  color: #2f2f31;
  letter-spacing: -0.3px;
  text-align: center;
  margin-bottom: 10px;
}
.planes-titulo strong { font-weight: 700; }
.planes-sub {
  font-size: 19px;
  color: var(--gris-texto);
  text-align: center;
  margin-bottom: 40px;
}
.planes-sub strong { font-weight: 700; color: #4d4d4f; }

.planes-fila { margin-bottom: 26px; }
/* Mismo cuerpo que «Infraestructura de nuestro datacenter» (33px, peso 400) */
.planes-cat {
  font-size: 33px;
  font-weight: 400;
  color: #2f2f31;
  letter-spacing: -0.3px;
  margin-bottom: 16px;
}
.planes-cat small {
  font-size: 17px;
  color: var(--gris-texto);
  margin-left: 12px;
  letter-spacing: 0;
}

.planes-vista { overflow: hidden; }
.planes-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  width: calc(200% - 402px);
  transition: transform .45s ease;
}
#planes-p2:checked ~ .planes-fila .planes-track { transform: translateX(calc(-50% + 201px)); }

.plan-card {
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  padding: 22px 20px 24px;
  text-align: center;
  transition: box-shadow .25s ease, transform .25s ease;
}
.plan-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.09); transform: translateY(-3px); }
.plan-gb {
  font-size: 36px;
  font-weight: 800;
  color: #2380c4;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}
.plan-card .spec { font-size: 15.5px; color: var(--gris-texto); line-height: 1.7;
                   display: flex; align-items: center; justify-content: center; gap: 8px; }
/* Iconito gris a la izquierda de cada especificación del plan */
.plan-card .spec .ico-spec { flex: none; width: 16px; height: 16px; color: #a2a2a6; }
.plan-card .precio {
  font-size: 22px;
  color: #2f2f31;
  margin-top: 12px;
  line-height: 1.2;
}
/* «+ IVA» en línea, a la derecha del monto */
.plan-card .precio small { font-size: 14px; color: var(--gris-texto); white-space: nowrap; }

/* Botón de la cápsula: mismo azul de acción que «Comienza Ahora» del hero */
.btn-plan {
  display: inline-block;
  margin-top: 16px;
  background: #2380c4;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14.5px;
  border-radius: 8px;
  padding: 11px 30px;
  transition: background .2s ease;
}
.btn-plan:hover { background: #1b6ba5; text-decoration: none; }

/* ---- PRUEBA v3.82: barra «precio ...... [Activar]» de la franja ----
   La cápsula mantiene su diseño normal. Esta barra vive aparte y está
   oculta; js/franja.js le pone `.compacta` a la cápsula justo cuando
   empieza a salir por arriba, y entonces la barra aparece pegada bajo la
   línea de títulos, ocupando la franja que queda visible.

   El ancla mide su alto pero lo devuelve con un margen negativo: así la
   barra NO ocupa espacio en la cápsula (no hay salto al aparecer) pero
   conserva una caja real, que es la que hace que el sticky se suelte al
   llegar al borde inferior de la cápsula. */
.cta-ancla {
  position: sticky;
  /* js/franja.js mide dónde termina la cabecera y lo deja en la variable;
     el 172px es solo el valor de partida antes del primer cálculo. */
  top: var(--linea-franja, 172px);
  height: 58px;
  margin-bottom: -58px;
  z-index: 3;
  pointer-events: none;
}
.plan-cta {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 58px;
  padding: 0 2px;
  background: #ffffff;
}
.plan-card.compacta .plan-cta { display: flex; pointer-events: auto; }
.plan-cta .precio { margin: 0; text-align: left; }
.btn-activar {
  flex: none;
  background: #2380c4;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  padding: 9px 20px;
  transition: background .2s ease;
}
.btn-activar:hover { background: #1b6ba5; text-decoration: none; }
/* En móvil la malla es de una columna y no hay cabecera fija que crear
   franjas: la barra no aporta. */
@media (max-width: 860px) {
  .cta-ancla { display: none; }
}

/* Flechas: acompañan el scroll y se quedan en el centro vertical de la
   ventana mientras la malla está a la vista. Cada una vive en un contenedor
   absoluto que cubre todo el alto de la malla; dentro, la flecha es `sticky`
   con `top: calc(50vh - 36px)` (36px = medio botón). Así queda pegada al
   centro de la pantalla entre el inicio y el final de la malla, y se detiene
   sola en los extremos. Requiere que ningún ancestro tenga `overflow:hidden`
   (por eso `html` usa `overflow-x: clip`, que no crea contenedor de scroll). */
.planes-flecha-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 92px;
  z-index: 6;
  pointer-events: none;   /* solo el botón recibe clics */
}
.wrap-izq { left: -38px; }
.wrap-der { right: -38px; }
.planes-flecha {
  position: sticky;
  top: calc(50vh - 46px);   /* 46px = medio botón */
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #111113;      /* negro, el mismo del submenú «Soy Cliente» */
  border: 0;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.planes-flecha svg { width: 42px; height: 42px; }
/* El hover conserva el azul de acción con la flecha en blanco */
.planes-flecha:hover { background: #2380c4; color: #ffffff; }
/* La flecha de la página en la que ya estamos se apaga y deja de responder */
#planes-p1:checked ~ .wrap-izq .planes-flecha,
#planes-p2:checked ~ .wrap-der .planes-flecha { opacity: 0; pointer-events: none; }

/* Texto solo para lectores de pantalla */
.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;
}

/* Botón rojo (Activar Plan / Siguiente / Solicitar) */
.btn-rojo {
  display: inline-block;
  background: linear-gradient(180deg, #ee4245, #c6181f);
  color: #ffffff !important;
  font-weight: bold;
  font-size: 13.5px;
  border: 0;
  border-radius: 8px;
  padding: 10px 26px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  font-family: inherit;
}
.btn-rojo:hover { filter: brightness(1.1); text-decoration: none; }

/* ============ BLOQUES «INCLUYEN / LIMITACIONES» ============
   Mismas cápsulas que la malla de planes y la sección de infraestructura:
   tarjeta blanca, borde #e3e3e3, radio 10px. La cabecera lleva un círculo
   de color (azul para lo incluido, ámbar para las limitaciones) del mismo
   tipo que los iconos de infraestructura, pero a 48px. */
.bloques-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 40px 0 26px;
}
.bloque-info {
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  padding: 28px 28px 26px;
}
.bloque-info-head {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid #ededed;
}
.bloque-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1f8c1d;
  color: #ffffff;
}
.bloque-ico svg { width: 25px; height: 25px; }
.bloque-ico-lim { background: #e8a33d; }
.bloque-info h2 {
  font-size: 22px;
  font-weight: 400;
  color: #2f2f31;
  letter-spacing: -0.2px;
  line-height: 1.3;
}
.lista-info { list-style: none; }
.lista-info li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  font-size: 15.5px;
  color: var(--gris-texto);
  line-height: 1.7;
}
.lista-info li:last-child { margin-bottom: 0; }
.lista-info li svg { flex: none; width: 20px; height: 20px; margin-top: 4px; }
/* Iconos temáticos de la columna «incluyen»: trazo azul de la marca */
.lista-info li svg.ico-item { width: 21px; height: 21px; color: #1f8c1d; margin-top: 3px; }
/* Iconos temáticos de la columna «Limitaciones»: trazo ámbar */
.lista-info li svg.ico-lim { color: #e8a33d; }
/* Enlaces dentro de las listas de la sección de planes */
.lista-info a { color: #2380c4; text-decoration: underline; text-underline-offset: 2px; }
.lista-info a:hover { color: #0e5ba8; }

/* Dos columnas lado a lado (solo escritorio) */
.dos-cols { display: flex; gap: 46px; align-items: flex-start; margin-top: 22px; }
.dos-cols > div { flex: 1; min-width: 0; }

/* Listas con iconos */
.lista-ok, .lista-warn { list-style: none; margin: 6px 0 14px; }
.lista-ok li, .lista-warn li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.lista-ok li svg, .lista-warn li svg { flex: none; width: 21px; height: 21px; margin-top: 1px; }

/* ============ TABLA «DIFERENCIAS» ============
   Misma familia visual que las cápsulas: caja blanca con borde #e3e3e3 y
   radio 10px, cabecera en el azul claro de las ilustraciones y filas
   alternadas muy suaves. Los «Si» / «No» van en píldoras de color. */
.tabla-titulo {
  font-size: 33px;
  font-weight: 400;
  color: #2f2f31;
  letter-spacing: -0.3px;
  text-align: center;
  margin: 46px 0 26px;
  line-height: 1.3;
}
.tabla-caja {
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  overflow: hidden;      /* recorta las esquinas de la primera y última fila */
  margin-bottom: 26px;
}
/* En pantallas angostas la tabla se desplaza en horizontal dentro de la caja */
.tabla-caja { overflow-x: auto; }
.tabla-dif {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  color: var(--gris-texto);
  min-width: 760px;
}
.tabla-dif thead th {
  background: #eef5fb;
  color: #2f2f31;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  padding: 16px 18px;
  border-bottom: 1px solid #dbe7f2;
  white-space: nowrap;
}
.tabla-dif thead th:first-child { width: 40%; }
.tabla-dif tbody th {
  font-weight: 400;
  text-align: left;
  color: #2f2f31;
  padding: 15px 18px;
  line-height: 1.55;
}
.tabla-dif tbody td {
  text-align: center;
  padding: 15px 18px;
  line-height: 1.55;
}
.tabla-dif tbody tr { border-top: 1px solid #efefef; }
.tabla-dif tbody tr:nth-child(even) { background: #fafbfc; }
.tabla-dif tbody tr:hover { background: #f3f8fc; }

/* Píldoras de Si / No */
.pill {
  display: inline-block;
  min-width: 44px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.pill-si { background: #e6f6e5; color: #1f8c1d; }
.pill-no { background: #f0f0f0; color: #8a8a8a; }

/* Tabla comparativa antigua (otras páginas) */
.tabla-comp { width: 100%; border-collapse: collapse; color: var(--gris-tabla); margin: 8px 0 20px; }
.tabla-comp th {
  background: #dcdcdc;
  color: var(--gris-tabla);
  font-weight: normal;
  padding: 12px 14px;
  text-align: center;
  border-bottom: 4px solid #c9c9c9;
}
.tabla-comp th:first-child { text-align: left; }
.tabla-comp td { padding: 11px 14px; }
.tabla-comp tbody tr:nth-child(odd) { background: #f4f4f4; }
.tabla-comp tbody tr:nth-child(even) { background: #eaeaea; }
.tabla-comp td:nth-child(2), .tabla-comp td:nth-child(3), .tabla-comp td:nth-child(4) { text-align: center; }
.tabla-comp tbody tr { border-bottom: 2px solid #ffffff; }

/* Tabla specs (servidores dedicados) */
.tabla-specs { width: 100%; border-collapse: collapse; border-left: 5px solid var(--verde); margin: 12px 0 18px; }
.tabla-specs td { padding: 15px 16px; }
.tabla-specs tr:nth-child(odd)  { background: #f4f4f4; }
.tabla-specs tr:nth-child(even) { background: #eaeaea; }
.tabla-specs td:first-child { width: 190px; color: var(--gris-titulo); }

.precio-grande { display: flex; align-items: center; gap: 40px; margin: 16px 0 8px; flex-wrap: wrap; }
.precio-grande .monto { font-size: 24px; color: #555; line-height: 1.2; }
.precio-grande .monto small { display: block; font-size: 13px; color: var(--gris-texto); }

/* Caja amarilla IMPORTANTE */
.box-amarillo {
  background: #fdfbd4;
  border: 1px dashed #d9d093;
  padding: 16px 20px;
  margin: 22px 0;
}
.box-amarillo .rojo { display: block; margin-bottom: 8px; }

/* ============ FORMULARIOS (estilo original) ============ */
form .frow {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 8px 16px;
  align-items: center;
  margin-bottom: 13px;
}
form .frow label { color: var(--gris-texto); }
form .frow .fnote { grid-column: 2; font-size: 13.5px; color: #9a9a9a; margin-top: -6px; }
form .frow label small { font-size: 13.5px; }   /* texto de ayuda bajo la etiqueta, ej. (.cl,.com,.net,etc.) */

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  background: var(--input-bg);
  border: 1px solid #cfcfcf;
  padding: 8px 10px;
  font-size: 15px;
  font-family: inherit;
  color: #444;
  width: 100%;
  max-width: 420px;
  border-radius: 8px;   /* esquinas curvas en todos los campos */
}
textarea { max-width: 100%; min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }

.box-punteado {
  background: #ffffff;
  border: 1px solid #e3e3e3;   /* = marco de .plan-card (parrilla de planes) */
  border-radius: 10px;
  padding: 18px 20px;
  margin: 18px 0;
}

.prefijo-www { display: flex; align-items: center; gap: 8px; }
.prefijo-www span { color: var(--gris-texto); }
.prefijo-www input { max-width: 260px; }

.captcha-ph { display: flex; align-items: center; gap: 14px; margin: 8px 0; flex-wrap: wrap; }
.captcha-ph .captcha-img {
  width: 110px; height: 44px;
  background: repeating-linear-gradient(45deg, #dddddd, #dddddd 8px, #d0d0d0 8px, #d0d0d0 16px);
  display: grid; place-items: center;
  color: #555; font-weight: bold; letter-spacing: 4px;
  border: 1px solid #c5c5c5;
}
.captcha-ph small { color: #9a9a9a; }
.captcha-ph input { max-width: 120px; }

/* Casillas de consentimiento (Ley 21.719) */
.consent-box { border: 1px dashed #bbbbbb; padding: 16px 20px; margin: 20px 0; }
.consent-box .consent-title {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px;
  color: #8a8a8a; margin-bottom: 10px; font-weight: bold;
}
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; cursor: pointer; }
.check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 18px; height: 18px; margin-top: 2px;
  border: 1px solid #b5b5b5; background: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.check input[type="checkbox"]:checked { background: #2380c4; border-color: #2380c4; }   /* azul del sitio */
.check input[type="checkbox"]:checked::after {
  content: ""; width: 11px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Mapa de contacto */
.contacto-cols { display: flex; gap: 26px; align-items: flex-start; }
.contacto-cols .form-col { flex: 1; }
.map-box {
  flex: none; width: 285px; height: 300px;
  border: 1px solid var(--borde);
  background:
    linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)),
    repeating-linear-gradient(0deg, #f3f1ec 0 34px, #e5e2da 34px 36px),
    repeating-linear-gradient(90deg, #f3f1ec 0 44px, #e5e2da 44px 46px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--gris-titulo); text-align: center; padding: 16px;
}
.map-box .pin { font-size: 34px; }
.map-box:hover { text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.15); }

/* ============ PIE DE PÁGINA (mejora: multicolumna oscuro) ============ */
#footer {
  background: var(--carbon);
  color: #cccccc;
  padding: 36px 4vw 20px;
}
/* 2026-10-20: columnas al ancho de su contenido y el espacio sobrante repartido en partes iguales
   entre ellas (Operaciones tiene textos largos y quedaba pegada a Pago y Contacto) */
.footer-grid { display: grid; grid-template-columns: minmax(240px, 480px) auto auto auto; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.footer-grid ul + h4 { margin-top: 22px; }
.footer-grid h4 {
  color: #ffffff; font-size: 12px; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 12px; font-weight: bold;
}
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 7px; }
.footer-grid a { color: #bbbbbb; font-size: 12.5px; }
.footer-grid a:hover { color: #5dade2; }
.footer-about p { color: #aaaaaa; font-size: 12.5px; margin-top: 10px; }
.footer-about .logo-word { font-size: 22px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 16px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: #aaaaaa;
}
.footer-bottom a { color: #bbbbbb; }
.cookie-reopen {
  background: none; border: none; color: #bbbbbb; font-size: 12.5px;
  cursor: pointer; padding: 0; font-family: inherit;
}
.cookie-reopen:hover { color: #5dade2; text-decoration: underline; }

/* ============ BANNER DE COOKIES ============ */
.cookie-banner {
  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 500;
  max-width: 480px;
  margin-left: auto;
  background: #ffffff;
  border: 1px solid #c9c9c9;
  border-top: 4px solid #2380c4;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3);
  padding: 20px;
  display: none;
}
.cookie-banner.visible { display: block; }
.cookie-banner h3 { color: var(--gris-titulo); font-size: 15px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
/* Pulgar arriba en circulo con borde azul (mismo icono del mensaje de exito) */
.cookie-banner .cookie-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: #2380c4; }   /* solo la mano, sin circulo */
.cookie-banner .cookie-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cookie-banner p { font-size: 12.5px; margin-bottom: 12px; }
.cookie-banner .cookie-cats { display: grid; gap: 8px; margin-bottom: 14px; }
.cookie-banner .check { font-size: 12.5px; margin-bottom: 0; }
.cookie-banner .check .cat-desc { display: block; color: #9a9a9a; font-size: 11.5px; }
.cookie-banner .check input:disabled { opacity: 0.55; cursor: not-allowed; }
.cookie-banner .cookie-actions { display: flex; gap: 10px; }
.cookie-banner .cookie-actions button { flex: 1; padding: 11px 16px; font-size: 13.5px; }
.btn-verde {
  background: #2380c4;
  color: #fff; border: 0; border-radius: 8px;
  font-weight: bold; font-size: 12.5px; padding: 9px 18px; cursor: pointer;
  font-family: inherit;
}
.btn-verde:hover { background: #1d6ba5; }
.btn-gris {
  background: #ffffff; color: #555; border: 1px solid #bbbbbb; border-radius: 8px;
  font-size: 12.5px; padding: 9px 16px; cursor: pointer; font-family: inherit;
}
.btn-gris:hover { background: #f0f0f0; }

/* ============ CONTENIDO LEGAL ============ */
.legal h2 { font-size: 17px; color: var(--gris-titulo); font-weight: normal; margin: 26px 0 8px; border-bottom: 1px solid #e9e9e9; padding-bottom: 6px; }
.legal ul, .legal ol { padding-left: 22px; margin-bottom: 12px; }
.legal li { margin-bottom: 6px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 12px 0; }
.legal table th, .legal table td { border: 1px solid #d9d9d9; padding: 9px 11px; text-align: left; vertical-align: top; }
.legal table th { background: #ececec; color: var(--gris-titulo); font-weight: bold; }
.legal .meta { color: #9a9a9a; font-size: 12px; }

/* La grilla de infraestructura baja a 2 columnas en pantallas medianas */
@media (max-width: 1150px) {
  .infra-grid { grid-template-columns: repeat(2, 1fr); }
  .confia-grid { grid-template-columns: repeat(3, 1fr); }
  /* Sin espacio para 3 cápsulas: se abandona el carrusel y se muestran las 6
     en dos columnas, conservando el orden. Las flechas dejan de tener sentido. */
  .planes-track {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    transform: none !important;
  }
  .planes-flecha-wrap { display: none; }
}

/* ============ UTILIDADES ============ */
.mt { margin-top: 18px; } .mb { margin-bottom: 18px; }
.centrado { text-align: center; }

/* ============ MÓVILES (mejora) ============ */
@media (max-width: 860px) {

  .infra { padding: 38px 0 30px; }
  .infra h2 { font-size: 23px; }
  .infra-grid { grid-template-columns: 1fr; gap: 16px; }
  .confia-seccion { padding: 4px 0 24px; }
  .confia-seccion h2 { font-size: 23px; }
  .confia-bloque, .confia-bloque.confia-inv {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 26px;
  }
  /* En una sola columna la ilustración va siempre arriba del texto */
  .confia-bloque.confia-inv .confia-fig { order: -1; }
  .confia-texto p { font-size: 15.5px; }
  .confia-grid { grid-template-columns: 1fr; gap: 14px; }
  .confia-cifra { font-size: 30px; }

  #header {
    height: auto;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    text-align: center;
  }
  .header-left { align-items: center; }
  .header-info { text-align: center; font-size: 12px; line-height: 1.5; }
  /* En móvil los mensajes rotativos van centrados y pueden ocupar dos líneas */
  /* `flex:1` en la cabecera vertical daría altura 0: hay que anularlo */
  .header-tagline { font-size: 13px; width: 100%; height: 3.2em; flex: none; }
  .header-tagline span { left: 0; right: 0; white-space: normal; text-align: center; }
  .header-links { justify-content: center; gap: 22px; flex-wrap: wrap; }
  .header-links a { font-size: 13px; }

  /* menú móvil con hamburguesa, barra fija arriba */
  #nav { display: flex; align-items: center; justify-content: space-between; }
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #333335;
    display: none;
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    box-shadow: 0 12px 24px rgba(0,0,0,.35);
  }
  .nav-toggle-input:checked ~ .nav-links { display: block; }
  #nav ul { flex-direction: column; align-items: stretch; }
  #nav a, #nav .nav-drop-label { padding: 13px 20px; line-height: 1.5; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .nav-cliente { margin-left: 0; }
  #nav .nav-cliente .nav-drop-label { padding-right: 20px; margin-right: 0; }
  /* Sin subrayado animado en el menú móvil, y sin el alto fijo de 74px */
  #nav .nav-links > ul > li > a { height: auto; }
  #nav .nav-links > ul > li > a > span::after,
  #nav .nav-cliente .nav-drop-label > span::after { display: none; }
  .dropdown { position: static; display: block; border: 0; box-shadow: none; background: #2b2b2d;
              opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav-cliente .dropdown { border-radius: 0; overflow: visible; }
  .dropdown a { color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,.06); padding-left: 34px; }
  .dropdown a:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
  .nav-drop-label::after { content: ""; }
  .nav-brand-mini { display: flex; align-items: center; padding: 6px 14px; }

  #contenido { flex-direction: column; padding: 0; }
  .der { padding: 0 14px 14px; width: 100%; }
  .dos-cols { flex-direction: column; gap: 0; }
  .bloques-info { grid-template-columns: 1fr; gap: 16px; margin: 26px 0 20px; }
  .bloque-info { padding: 22px 20px; }
  .bloque-info h2 { font-size: 19px; }
  .bloque-ico { width: 42px; height: 42px; }
  .hero-banner { margin: 0 -14px; padding: 54px 20px 60px; }
  .hero-banner .hero-sub { margin-bottom: 30px; }
  .hero-items { flex-direction: column; gap: 20px; }
  /* 2026-10-20: en columna, los servicios entran desde arriba y desde abajo (desde los lados
     se salian de la pantalla y permitian scroll horizontal en el celular) */
  .hero-items > a:first-of-type { transform: translateY(-24px); }
  .hero-items > a:last-of-type  { transform: translateY(24px); }
  .hero-sep { display: none; }
  .izq { width: 100%; padding: 0; margin-top: 26px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
  .izq > * { width: min(320px, 100%); }
  .box-incluye { margin-bottom: 0; }
  .box-servipag { width: 210px; }

  .tabla-titulo { font-size: 23px; margin: 30px 0 18px; }
  .tabla-dif { font-size: 14.5px; min-width: 640px; }
  .tabla-dif thead th, .tabla-dif tbody th, .tabla-dif tbody td { padding: 12px 12px; }
  .hero-banner.hero-corto { padding: 34px 20px 36px; }
  .hero-corto .hero-sub { font-size: 15.5px; white-space: normal; }
  .planes-strip { padding-top: 34px; }
  .planes-titulo { font-size: 23px; }
  .planes-sub { font-size: 16px; margin-bottom: 26px; }
  .planes-track { grid-template-columns: 1fr; gap: 16px; }
  .planes-cat { font-size: 23px; }
  .planes-cat small { font-size: 15px; }
  .plan-gb { font-size: 30px; }
  .plan-card .precio { font-size: 19px; }
  .btn-rojo { padding: 9px 18px; }

  form .frow { grid-template-columns: 1fr; gap: 4px; }
  form .frow .fnote { grid-column: 1; }
  input[type="text"], input[type="email"], input[type="tel"], select { max-width: 100%; }

  .contacto-cols { flex-direction: column; }
  .map-box { width: 100%; height: 200px; }

  .tabla-comp { font-size: 12px; }
  .tabla-comp th, .tabla-comp td { padding: 9px 8px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .cookie-banner { inset: auto 8px 8px 8px; padding: 16px; }
  .precio-grande { gap: 18px; }
}

/* En escritorio el menú se muestra siempre extendido */
@media (min-width: 861px) {
  .nav-links { display: block !important; }
  .nav-brand-mini { display: none; }
}


/* ------------------------------------------------------------------
   MALLA INVERTIDA (v3.73): matriz de 3 columnas (Estándar / Alta
   Performance / VPS) por 6 filas de capacidad. No toca ninguna regla de
   la malla horizontal con carrusel (.planes-strip / .planes-track /
   .planes-flecha), que sigue viva por si hay que revertir.
   ------------------------------------------------------------------ */
.planes-matriz { margin: 0 0 10px; padding: 40px 0 14px; }
.matriz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.matriz-cab {
  font-size: 33px;
  font-weight: 400;
  color: #2f2f31;
  letter-spacing: -0.3px;
  line-height: 1.15;
  align-self: end;
  text-align: center;
  /* La línea de cabeceras acompaña el scroll de la malla: se fija bajo la
     barra de navegación (75px) y se suelta al terminar .matriz-grid. */
  position: sticky;
  top: 75px;
  z-index: 5;
  background: #ffffff;
  padding: 10px 0 12px;
  box-shadow: 0 10px 12px -10px rgba(0, 0, 0, .10);
}
.matriz-cab small {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  font-size: 17px;
  color: var(--gris-texto);
  letter-spacing: 0;
  margin-top: 6px;
}
/* Barritas ascendentes de potencia: azul de marca, alineadas a la base
   de la línea «Potencia xN». */
.barras-pot { flex: none; color: #2380c4; margin-bottom: 1px; }
/* ---- PRUEBA v3.80: capacidad en una columna a la izquierda ----
   Se activa con GB_LATERAL en build.py, que añade la clase
   .con-gb-lateral. Todo lo de este bloque está acotado a esa clase, así
   que apagando el interruptor la malla vuelve sola al diseño anterior. */
.con-gb-lateral .matriz-grid { grid-template-columns: 84px repeat(3, 1fr); }
/* Celda vacía sobre la columna de capacidades. Debe ocupar TODO el alto
   de la fila de títulos (por eso `stretch`: vacía y con `align-self:end`
   medía solo su padding) para que su fondo blanco tape al rótulo cuando
   éste llega a la banda de títulos. Así el rótulo nunca se ve encima de
   «Planes Estándar / Alta Performance / VPS», sea cual sea el alto real
   de la barra de navegación o de los títulos. */
.con-gb-lateral .matriz-esquina {
  box-shadow: none;
  align-self: stretch;
  z-index: 6;   /* por encima del rótulo (4) */
}
/* La celda envolvente se estira a todo el alto de la fila y, al ser
   `position: relative`, es el bloque contenedor que ACOTA el sticky del
   rótulo. Sin ella el rótulo se escapaba hacia las filas siguientes. */
.matriz-gb-celda { position: relative; }
.matriz-gb {
  text-align: right;
  padding-top: 26px;
  font-size: 34px;
  font-weight: 800;
  color: #2380c4;
  line-height: 1;
  letter-spacing: -0.5px;
  /* Acompaña el scroll dentro de su fila y se esconde al llegar al borde
     inferior de su propia cápsula. `top` lo deja justo bajo la cabecera
     fija (75 de la barra + 89 de los títulos). */
  position: sticky;
  top: 172px;
  z-index: 4;
  /* Fondo opaco: en el relevo entre una fila y la siguiente los dos
     rótulos coinciden un instante en la línea de anclaje; con fondo el
     entrante (posterior en el DOM) tapa al saliente. */
  background: #ffffff;
  padding-bottom: 12px;
}
.matriz-gb small { font-size: 17px; font-weight: 700; margin-left: 2px; }

@media (max-width: 1150px) {
  .matriz-cab { font-size: 26px; }
  .matriz-cab small { font-size: 15px; }
  .con-gb-lateral .matriz-grid { grid-template-columns: 68px repeat(3, 1fr); }
  /* Cabecera más baja en este tramo: el rótulo sube en consecuencia. */
  .matriz-gb { font-size: 28px; padding-top: 24px; top: 152px; }
  .matriz-gb small { font-size: 15px; }
}
@media (max-width: 860px) {
  .matriz-grid { grid-template-columns: 1fr; gap: 16px; }
  .matriz-cab { margin-top: 26px; top: 44px; }
  .matriz-cab:first-child { margin-top: 0; }
  /* En una sola columna la capacidad vuelve a ser un rótulo de ancho
     completo sobre sus tres cápsulas, y la celda esquina sobra. */
  .con-gb-lateral .matriz-grid { grid-template-columns: 1fr; }
  .con-gb-lateral .matriz-esquina { display: none; }
  /* En una columna el rótulo ya encabeza sus cápsulas: no necesita sticky. */
  .matriz-gb { text-align: center; padding-top: 18px; font-size: 30px; position: static; }
}


/* ------------------------------------------------------------------
   «Ver más características»: panel desplegable por cápsula, sin JS.
   El checkbox va position:fixed para que enfocarlo no dispare el scroll
   automático del navegador (mismo truco que .planes-radio).
   ------------------------------------------------------------------ */
.mas-check { position: fixed; top: 50%; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mas-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 14px auto 0;
  font-size: 14px;
  color: #2380c4;
  cursor: pointer;
  user-select: none;
}
.mas-toggle:hover { color: #0e5ba8; }
.mas-flecha { width: 16px; height: 16px; flex: none; transition: transform .3s ease; }
/* El envoltorio de fila solo agrupa el checkbox y sus tres cápsulas: con
   `display: contents` las cápsulas siguen siendo celdas de .matriz-grid. */
.matriz-fila { display: contents; }
.mas-check:checked ~ .plan-card .mas-toggle .mas-flecha { transform: rotate(180deg); }
/* max-height en vez de grid-template-rows 0fr/1fr: la animación con `fr`
   solo funciona en navegadores recientes y dejaba el panel recortado. */
.mas-detalle {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
/* El tope contempla la tabla (~620px) más el botón repetido del final. */
.mas-check:checked ~ .plan-card .mas-detalle { max-height: 1000px; }
/* «Activar Plan» repetido al pie del detalle, para no obligar a volver
   arriba después de leer toda la tabla. */
.btn-plan-mas { margin-top: 16px; }

/* Tabla de características de la cápsula: misma estética que .tabla-dif
   (caja redondeada, filas alternadas, hover), pero compacta y sin
   min-width, porque vive dentro de una tarjeta angosta. */
/* Sin marco exterior: la tabla se apoya directamente sobre la tarjeta. */
.tabla-plan-caja { margin: 14px 0 2px; }
.tabla-plan {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--gris-texto);
}
.tabla-plan tbody th {
  font-weight: 400;
  text-align: left;
  color: #2f2f31;
  padding: 10px 12px;
  line-height: 1.5;
}
/* Las características sin valor (las que ocupan las dos columnas) van
   centradas, con su icono temático a la izquierda del texto; las que sí
   tienen valor quedan rótulo a la izquierda. */
/* OJO: nada de `display:flex` en el <th> — sacaría la celda del layout de
   tabla y anularía el colspan (la fila dejaría de ocupar las 2 columnas).
   El icono va inline, alineado a la altura del texto. */
.tabla-plan tbody th[colspan] {
  text-align: center;
  color: var(--gris-texto);   /* mismo gris que «5GB Disco duro» */
}
.tabla-plan .ico-car {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 7px;
  width: 16px;
  height: 16px;
  color: #a2a2a6;
}
/* Los valores (lo que iba a la derecha de «:») van alineados a la derecha */
.tabla-plan tbody td {
  text-align: right;
  padding: 10px 12px;
  line-height: 1.5;
  white-space: nowrap;
}
/* «Disponible» reutiliza la píldora .pill-si de la tabla comparativa, en
   tamaño algo menor para no desentonar dentro de la cápsula.
   «No disponible»: el ámbar de la lista de limitaciones. */
.tabla-plan tbody td .pill { min-width: 0; font-size: 13px; padding: 2px 11px; }
.tabla-plan tbody td.val-no { color: #e8a33d; }
.tabla-plan tbody tr { border-top: 1px solid #efefef; }
.tabla-plan tbody tr:first-child { border-top: 0; }
.tabla-plan tbody tr:nth-child(even) { background: #fafbfc; }
.tabla-plan tbody tr:hover { background: #f3f8fc; }

/* ============================================================
   Cápsulas de características — servidores-dedicados.html
   Reutilizan la sección de infraestructura del home tal cual
   (.infra / .infra-grid / .infra-card / .infra-ico), incluidos
   título, bajada y el paso a 2 y 1 columna. Aquí sólo se ajusta
   el aire respecto del hero, que ya es un bloque fuerte.
   ============================================================ */
.caps-ded { padding-top: 42px; }

/* Línea de 6 sellos (icono en círculo celeste + título + bajada) entre la
   bajada de la sección y las cápsulas de servidores dedicados.
   MEDIDAS TOMADAS DEL ORIGINAL (wirenetchile, medidas con getComputedStyle,
   no a ojo desde una captura ampliada): círculo 85px, icono 45px,
   título 18px/26px y bajada 13px/24px. No agrandar «porque se ve chico»
   en una captura con zoom del navegador. */
.sellos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin: -6px 0 56px;   /* .infra-sub ya deja 52px abajo */
  text-align: center;
}
.sello-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 85px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #eff6ff;   /* mismo celeste del original */
  color: #2c4a7a;
}
.sello-ico svg { width: 45px; height: 45px; }
.sello h3 {
  font-size: 18px;
  font-weight: 400;
  color: #2f2f31;
  letter-spacing: -0.2px;
  line-height: 26px;
  margin-bottom: 2px;
}
.sello p { font-size: 13px; color: var(--gris-texto); line-height: 24px; }
@media (max-width: 1000px) { .sellos { grid-template-columns: repeat(3, 1fr); row-gap: 28px; } }
@media (max-width: 560px)  { .sellos { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Ficha del servidor dedicado (servidores-dedicados.html)
   Dos tarjetas bajo la fila de sellos: precio + períodos a la
   izquierda, pestañas de detalle a la derecha. Las pestañas son
   CSS puro (radios ocultos + ~), sin JavaScript, como todo el sitio.
   Los radios van position:fixed para que el foco no haga saltar
   el scroll al pinchar una pestaña.
   ============================================================ */
.ficha-ded {
  display: grid;
  grid-template-columns: minmax(300px, 34%) 1fr;
  gap: 22px;
  margin: 0 0 40px;
  text-align: left;       /* .infra centra todo; la ficha va alineada */
}
.ficha-precio, .ficha-tabs {
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
}
.ficha-precio { padding: 24px 22px 22px; }
.ficha-titulo {
  display: flex; align-items: center; gap: 12px;
  font-size: 22px; font-weight: 700; color: #2f2f31;
  letter-spacing: -0.3px; line-height: 1.25; margin: 0 0 18px;
}
.ficha-ico {
  flex: none; width: 40px; height: 40px; border-radius: 9px;
  background: #0e5ba8; color: #ffffff;
  display: flex; align-items: center; justify-content: center;
}
.ficha-ico svg { width: 22px; height: 22px; }
.ficha-monto {
  background: #eef2f8; border-radius: 10px;
  padding: 22px 16px 18px; text-align: center; margin-bottom: 16px;
}
.ficha-cifra { font-size: 46px; font-weight: 700; color: #2f2f31; line-height: 1; letter-spacing: -1px; }
.ficha-periodo { font-size: 16px; color: var(--gris-texto); margin-top: 9px; }
.ficha-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px 16px; border-radius: 8px;
  background: #2380c4; color: #ffffff !important;
  font-size: 16px; font-weight: 700; text-decoration: none;
  transition: background .2s ease;
}
.ficha-btn:hover { background: #1b6ca8; text-decoration: none; }
.ficha-btn svg { width: 20px; height: 20px; }
/* «+ IVA» junto a cada cifra: más chico y gris para no competir con el
   número. Reemplaza a la nota al pie «valores netos». */
.ficha-iva { font-size: .42em; font-weight: 400; color: var(--gris-texto); margin-left: .35em; }
.ficha-plan-precio .ficha-iva { font-size: 12px; }
.ficha-planes { list-style: none; margin: 16px 0 0; padding: 0; }
.ficha-planes li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 14px; border-radius: 8px; font-size: 15px;
}
.ficha-planes li:nth-child(even) { background: #f5f7fa; }
.ficha-plan-nombre { color: var(--gris-texto); display: flex; align-items: center; gap: 10px; }
.ficha-plan-precio { font-weight: 700; color: #2f2f31; text-align: right; }
.ficha-plan-precio s { display: block; font-weight: 400; font-size: 13px; color: #a5a8ae; }
.ficha-desc {
  font-style: normal; font-size: 12px; font-weight: 600;
  background: #e6f6e5; color: #1f8c1d; border-radius: 4px; padding: 2px 8px;
}
.ficha-desc-top { background: #2380c4; color: #ffffff; }
.ficha-mejor { background: #ffffff !important; }   /* sin marco azul (2026-10-02) */
.ficha-mejor .ficha-plan-nombre { color: #2f2f31; font-weight: 700; }
/* Plazo de entrega: concepto aparte bajo la lista de períodos, no es un
   precio, así que va con icono y fondo propio para que no se lea como uno. */
.ficha-entrega {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 0 0; padding: 13px 14px; border-radius: 8px;
  background: #eef6ff; border: 1px solid #d7e7f7;
  font-size: 13.5px; line-height: 1.5; color: #2f2f31;
}
.ficha-entrega svg { flex: none; width: 19px; height: 19px; color: #2380c4; margin-top: 1px; }

/* --- pestañas (CSS puro) --- */
.ficha-tabs { overflow: hidden; align-self: start; }
/* top/left explícitos: sin ellos el radio fijo queda en su posición estática,
   fuera del viewport, y al enfocarlo el navegador desplaza la página. */
.ficha-radio { position: fixed; top: 0; left: 0; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ficha-barra { display: flex; background: #f3f5f8; border-bottom: 1px solid #e3e3e3; }
.ficha-barra label {
  flex: 1; text-align: center; padding: 15px 10px;
  font-size: 18px; color: #2f2f31; cursor: pointer;
  border-right: 1px solid #e3e3e3; transition: background .15s ease;
}
.ficha-barra label:last-child { border-right: 0; }
.ficha-barra label:hover { background: #eaeef4; }
#ficha-t1:checked ~ .ficha-barra label[for="ficha-t1"],
#ficha-t2:checked ~ .ficha-barra label[for="ficha-t2"],
#ficha-t3:checked ~ .ficha-barra label[for="ficha-t3"] {
  background: #ffffff; color: #2380c4; font-weight: 600;
  margin-bottom: -1px; border-bottom: 1px solid #ffffff;
}
.ficha-panel { display: none; padding: 28px 30px 26px; }
#ficha-t1:checked ~ .ficha-p1,
#ficha-t2:checked ~ .ficha-p2,
#ficha-t3:checked ~ .ficha-p3 { display: block; }
.ficha-panel h4 { font-size: 16.5px; font-weight: 700; color: #2f2f31; margin: 0 0 16px; }
.ficha-panel ul { margin: 0 0 16px 20px; padding: 0; }
.ficha-panel ul:last-child { margin-bottom: 0; }
.ficha-panel li { font-size: 15.5px; line-height: 1.55; color: var(--gris-texto); margin: 0 0 9px; }
.ficha-panel li b { color: #2f2f31; }
.ficha-aviso {
  margin: 18px 0 0; padding: 14px 16px; border-radius: 8px;
  background: #fff8e1; border: 1px solid #f3e2a3;
  font-size: 14px; line-height: 1.6; color: #5c4d1f;
}
.ficha-aviso b { color: var(--rojo-texto); }

@media (max-width: 900px) {
  .ficha-ded { grid-template-columns: 1fr; }
  .ficha-barra label { font-size: 15px; padding: 13px 6px; }
  .ficha-panel { padding: 22px 18px; }
}

/* ============================================================
   Fila de especificaciones (servidores-dedicados.html)
   Reemplaza a las 4 cápsulas descriptivas. Mantiene el diseño,
   tamaños y colores de .infra-card (tarjeta blanca, círculo azul
   96px, título 22px, bajada 15.5px); solo cambia a 5 columnas y
   centra el texto, porque ahora son rótulos de dos palabras y no
   párrafos. Todo va bajo .caps-ded para no tocar la sección de
   infraestructura de la portada, que comparte .infra-grid.
   ============================================================ */
.caps-ded .caps-specs { grid-template-columns: repeat(5, 1fr); }
.caps-ded .caps-specs .infra-card { text-align: center; padding: 26px 14px 24px; }
.caps-ded .caps-specs .infra-card h3 { margin-bottom: 4px; }
.caps-ded .caps-specs .infra-card p { line-height: 1.5; }
@media (max-width: 1150px) { .caps-ded .caps-specs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .caps-ded .caps-specs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .caps-ded .caps-specs { grid-template-columns: 1fr; } }

/* Paginas de activacion de plan: titulo y bajada con la misma tipografia
   que "Infraestructura de nuestro datacenter" y su subtitulo en el home.
   Se conserva la linea inferior de h1.titulo. */
/* Mismo espacio superior que el titulo del home (56px sobre la caja, con el
   mismo interlineado 1.7) y sin la linea inferior de h1.titulo. */
/* Hero bajo de la pagina de activacion: solo el titulo sobre fondo oscuro */
.hero-banner.hero-corto.hero-activar {
  position: relative;
  padding: 56px 3vw 56px;
  text-align: left;
  /* Foto de Ricardo (servidores con luces), recorte central 4:1 */
  background-image: linear-gradient(rgba(8, 10, 14, .45), rgba(8, 10, 14, .45)), url("../img/hero-activar.jpg");
}
.der .hero-activar h1.titulo.act-titulo { margin: 0; line-height: 1.25; color: #ffffff; font-weight: 700; font-size: 42px; }
.hero-activar h1.titulo.act-titulo strong { color: #5b8def; }
.der .hero-activar h1.titulo.act-titulo .act-potencia { color: #ffffff; border-color: #ffffff; }
.der .hero-activar h1.titulo.act-titulo .act-potencia .barras-pot { color: #ffffff; }
.hero-banner.hero-corto.hero-activar { margin-bottom: 30px; }
@media (max-width: 560px) { .hero-banner.hero-corto.hero-activar { padding: 28px 20px 30px; } .der .hero-activar h1.titulo.act-titulo { margin-top: 0; font-size: 26px; } }
/* Azul = .matriz-gb ("5GB" de la parrilla de planes-hosting); fuente/tamano = .matriz-cab Planes Estandar (33px/400) */
.der h1.titulo.act-titulo { font-size: 33px; font-weight: 400; color: #2380c4; letter-spacing: -0.3px; line-height: 1.7;
  margin-top: 24px; margin-bottom: 10px; padding-bottom: 0; border-bottom: 0; }
.der h1.titulo.act-titulo strong { font-weight: 700; }
/* Bajada del plan con el diseno de la capsula .ficha-entrega de servidores-dedicados */
.der p.act-sub { font-size: 15px; margin: 0 0 14px; display: inline-flex; flex-wrap: wrap; gap: 8px 22px; }
/* Dentro del hero: texto e iconos en blanco, sin la caja celeste */
.der .hero-activar p.act-sub { margin: 18px 0 0; max-width: calc(100% - 340px); padding: 0; background: none; border: 0; color: #ffffff; font-size: 16px; }
.der .hero-activar p.act-sub svg { color: #ffffff; }
/* Linea discreta bajo la capsula: texto gris con un check azul */
.der p.act-prueba { margin: 0 0 52px; font-size: 14.5px; color: var(--gris-texto); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.der p.act-prueba .act-car { display: inline-flex; align-items: center; gap: 6px; }
.der p.act-prueba svg { flex: none; width: 18px; height: 18px; color: #2380c4; }
/* Dentro del hero: a la derecha, uno sobre otro, en blanco */
.der .hero-activar p.act-prueba { position: absolute; right: 3vw; top: 50%; transform: translateY(-50%); margin: 0; flex-direction: column; align-items: flex-start; gap: 10px; color: #ffffff; font-size: 16px; }
.der .hero-activar p.act-prueba svg { color: #ffffff; }
@media (max-width: 1100px) { .der .hero-activar p.act-prueba { position: static; transform: none; flex-direction: row; margin-top: 14px; } }
.der p.act-sub .act-car { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
@media (max-width: 560px) { .der h1.titulo.act-titulo { font-size: 23px; margin-top: 38px; } .der p.act-sub { font-size: 14px; display: flex; gap: 8px 16px; } }
/* "(Potencia xN)" junto al titulo, con el mismo estilo que la bajada .act-sub */
/* Pildora con borde azul; las barras de potencia apoyan en la linea base del texto */
.der h1.titulo.act-titulo .act-potencia { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #2380c4; border: 1.5px solid #2380c4; border-radius: 999px; padding: 3px 12px; margin-left: 4px; vertical-align: middle; letter-spacing: normal; white-space: nowrap; }
.der h1.titulo.act-titulo .act-potencia .barras-pot { margin: 0; align-self: flex-end; position: relative; top: -3px; }

/* Titulo de seccion sin linea inferior, cuando el bloque que sigue va encapsulado en .box-punteado */
h3.subtitulo.sin-linea { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; }

/* Captcha despues del consentimiento (paginas de activacion): aire antes del boton Siguiente */
.consent-box + .captcha-ph { margin-bottom: 22px; }

/* Consentimiento sin marco ni titulo (paginas de activacion) */
.consent-box.sin-marco { border: 0; padding: 0; margin: 34px 0 44px; }

/* Boton Siguiente de activacion = boton Activar Plan de la parrilla (.btn-plan) */
button.btn-plan { border: 0; font-family: inherit; line-height: 1.5; cursor: pointer; margin-top: 0; }
/* Boton de activacion: mas grande que el btn-plan de las capsulas */
.der p.act-enviar button.btn-plan { font-size: 18px; padding: 14px 34px; }
.der p.act-enviar { margin: 60px 0 48px; }
/* Segunda linea del boton de activacion: "(30 dias de uso gratuito)" */
button.btn-plan .btn-sub { display: block; font-size: 15px; font-weight: 400; line-height: 1.4; margin-top: 3px; opacity: .9; }

/* Error de validacion escrito bajo el campo (js/activar.js) */
.campo-error { color: #e00b1c; font-size: 13.5px; margin-top: 6px; }
.campo-error[hidden] { display: none; }
input.campo-invalido { border-color: #e00b1c; }
input.campo-invalido:focus { box-shadow: 0 0 0 1px #e00b1c; }

/* Aviso informativo bajo el campo (dominio convertido a punycode) */
.campo-aviso { color: #2380c4; font-size: 13.5px; margin-top: 6px; }
.campo-aviso[hidden] { display: none; }

/* Confirmacion de campo valido (ej. RUT) y mensajes bajo campos de .frow */
.campo-ok { color: #1e8e3e; font-size: 13.5px; margin-top: 6px; }
.campo-ok[hidden] { display: none; }
form .frow > .campo-error, form .frow > .campo-ok, form .frow > .campo-aviso { grid-column: 2; margin-top: -4px; }
@media (max-width: 860px) { form .frow > .campo-error, form .frow > .campo-ok, form .frow > .campo-aviso { grid-column: 1; } }

/* Captcha propio (php/captcha.php + js/activar.js) */
.captcha-box { display: flex; align-items: flex-end; gap: 12px 14px; flex-wrap: wrap; margin: 8px 0 22px; }
.captcha-img { display: block; width: 170px; height: 56px; border: 1px solid #e3e3e3; border-radius: 8px; background: #f3f7fb; }
.captcha-otro { width: 42px; height: 42px; margin-bottom: 7px; border: 1px solid #e3e3e3; border-radius: 8px; background: #fff; color: #2380c4; cursor: pointer; display: grid; place-items: center; padding: 0; }
.captcha-otro:hover { background: #f3f7fb; }
.captcha-otro svg { width: 20px; height: 20px; }
.captcha-campo label { display: block; color: var(--gris-texto); margin-bottom: 6px; }
.captcha-campo input { max-width: 170px; text-transform: uppercase; letter-spacing: 3px; }
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Resultado del envio del formulario de activacion (php/activar.php) */
.act-resultado { border-radius: 10px; padding: 14px 18px; margin: 4px 0 18px; font-size: 15px; line-height: 1.6; }
.act-resultado[hidden] { display: none; }
.act-resultado.act-ok { background: #eef6fc; border: 1px solid #bcd9ef; color: #1b5f92; }
.act-resultado.act-error { background: #fdeeee; border: 1px solid #f3c2c2; color: #b0141f; }
.act-resultado pre { margin: 10px 0 0; font-size: 13px; white-space: pre-wrap; color: #333; }
.btn-plan:disabled { opacity: .7; cursor: wait; }
/* Boton de activacion en espera: "Activando el servicio - Espere" + puntos del logo */
.btn-plan.esperando, .btn-plan.esperando:disabled, .btn-plan.esperando:hover { opacity: 1; transition: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; background: #ffffff; color: #2380c4 !important; border: 2px solid #2380c4; }
.btn-plan .btn-espera { display: inline-flex; flex-direction: column-reverse; align-items: center; gap: 6px; }   /* puntos arriba del texto, centrados */
.btn-plan .btn-puntos { height: 15px; }
.btn-plan .btn-puntos { display: inline-flex; align-items: center; gap: 6px; }
.btn-plan .btn-puntos i { display: block; border-radius: 50%; background: #2380c4; opacity: .2; animation: btn-pulso 1.4s ease-in-out infinite; }
.btn-plan .btn-puntos i:nth-child(1) { width: 5px;  height: 5px; }
.btn-plan .btn-puntos i:nth-child(2) { width: 7px;  height: 7px;  animation-delay: .2s; }
.btn-plan .btn-puntos i:nth-child(3) { width: 10px; height: 10px; animation-delay: .4s; }
.btn-plan .btn-puntos i:nth-child(4) { width: 13px; height: 13px; animation-delay: .6s; }
@keyframes btn-pulso { 0%, 100% { opacity: .2; transform: scale(.8); } 35% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .btn-plan .btn-puntos i { animation: none; opacity: 1; } }
.act-resultado .act-resultado-extra { margin-top: 6px; }
.act-resultado .act-resultado-extra a { font-weight: 600; text-decoration: underline; }
/* Casilla de aceptacion sin marcar al enviar */
.check.check-invalido span { color: #e00b1c; }
.check.check-invalido input[type="checkbox"] { border-color: #e00b1c; outline: 2px solid #e00b1c; outline-offset: 1px; }

/* Cuenta activada (respuesta 4): formulario bloqueado y mensaje en el lugar del boton.
   El texto va en #results_4 > div > strong: lo lee Google Tag Manager (conversion Ads). */
.act-resultado.act-exito { display: flex; align-items: center; gap: 14px; max-width: 640px; margin: 36px 0 48px; }
.act-exito .act-icono { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #ffffff; border: 2px solid #2380c4; box-sizing: border-box; display: grid; place-items: center; color: #2380c4; }
.act-exito .act-icono svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form-activado .box-punteado { opacity: .6; }
.form-activado input[readonly] { background: #f4f4f4; color: #777777; cursor: default; }
.form-activado input[readonly]:focus { border-color: #cfcfcf; box-shadow: none; }
.form-activado .check, .form-activado .check input[type="checkbox"] { cursor: default; }

/* Foto propia del hero de contratar-dedicado.html (mas clara: capa algo mas oscura) */
.hero-banner.hero-corto.hero-activar.hero-contratar-dedicado {
  background-image: linear-gradient(rgba(8, 10, 14, .70), rgba(8, 10, 14, .70)), url("../img/hero-contratar-dedicado.jpg");
}

/* Boton con iconos (pagar-servicio: tarjeta a la izquierda y chevron a la derecha) */
button.btn-plan.btn-ico { display: inline-flex; align-items: center; gap: 10px; }
.btn-plan.btn-ico svg { flex: none; }
.btn-plan.btn-ico .btn-ico-izq { width: 22px; height: 22px; }
.btn-plan.btn-ico .btn-ico-der { width: 20px; height: 20px; margin-left: 4px; }

/* Boton "Aceptar todas" de cookies: mismo brillo que "Comienza ahora" (2026-10-03) */
#cookie-accept-all { position: relative; overflow: hidden; }
#cookie-accept-all::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
  animation: btn-hero-brillo 3s ease-in-out infinite;
  pointer-events: none;
}

/* Prueba 2026-10-04: cápsulas de planes en oscuro (#2a2a2c, como la barra
   superior). Revertir = quitar la clase parrilla-oscura de .matriz-grid
   en planes-hosting.html. */
.parrilla-oscura .plan-card { background: #2a2a2c; border-color: #3a3a3d; }
/* Hover G (zoom leve) en vez de subir. Revertir = volver a la linea anterior:
   .parrilla-oscura .plan-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .28); } */
/* Hover H en el botón: al pasar por la cápsula, un destello cruza solo
   «Activar Plan». Anterior: K (botón iluminado), respaldo estilos.css-20261004u. */
.parrilla-oscura .plan-card:hover { transform: none; box-shadow: none; }
.parrilla-oscura .plan-card .btn-plan { position: relative; overflow: hidden; vertical-align: top; }
.parrilla-oscura .plan-card .btn-plan::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  pointer-events: none;
}
.parrilla-oscura .plan-card:hover .btn-plan::after { left: 130%; transition: left .8s ease; }
.parrilla-oscura .plan-card .spec { color: #c9c9cc; }
.parrilla-oscura .plan-card .spec .ico-spec,
.parrilla-oscura .tabla-plan .ico-car { color: #6fa8e8; }
.parrilla-oscura .plan-card .precio { color: #ffffff; }
.parrilla-oscura .plan-card .precio small { color: #a8a8ad; }
.parrilla-oscura .mas-toggle { color: #5b8def; font-weight: 700; }
.parrilla-oscura .mas-toggle:hover { color: #8fb1f5; }
.parrilla-oscura .tabla-plan { color: #c9c9cc; }
.parrilla-oscura .tabla-plan tbody th { color: #e6e6e8; }
.parrilla-oscura .tabla-plan tbody th[colspan] { color: #c9c9cc; }
.parrilla-oscura .tabla-plan tbody tr { border-top-color: #3a3a3d; }
.parrilla-oscura .tabla-plan tbody tr:nth-child(even) { background: #313134; }
.parrilla-oscura .tabla-plan tbody tr:hover { background: #36383d; }

/* 2026-10-04: rótulos de capacidad (matriz-gb grande) más grandes.
   Revertir = borrar este bloque. Base: 34px/17px, columna 84px. */
.con-gb-lateral .matriz-grid { grid-template-columns: 100px repeat(3, 1fr); }
.matriz-gb { font-size: 40px; padding-top: 24px; }
.matriz-gb small { font-size: 19px; }
@media (max-width: 1150px) {
  .con-gb-lateral .matriz-grid { grid-template-columns: 86px repeat(3, 1fr); }
  .matriz-gb { font-size: 33px; }
  .matriz-gb small { font-size: 17px; }
}
@media (max-width: 860px) {
  .con-gb-lateral .matriz-grid { grid-template-columns: 1fr; }
  .matriz-gb { font-size: 34px; padding-top: 18px; }
}

/* 2026-10-04: barras-pot al piso del texto. En flex con align-items:flex-end
   la barra bajaba hasta el fondo de la línea (bajo la línea base). Con
   baseline, el borde inferior del SVG queda sobre la línea base del texto.
   Revertir = borrar este bloque. */
.matriz-cab small { align-items: baseline; }
.matriz-cab small .barras-pot { margin-bottom: 0; }

/* 2026-10-04: diseño F de «Incluyen / Limitaciones» (planes-hosting).
   Bloques a todo el ancho con listas en 2 columnas y aviso de misión crítica
   como barra oscura con botón. Revertir = quitar la clase info-f de
   .bloques-info en planes-hosting.html (el aviso vuelve a la lista). */
.info-banner { display: none; }
.bloques-info.info-f { grid-template-columns: 1fr; gap: 16px; }
.info-f .bloque-info { border: 0; padding: 24px 28px 14px; }
.info-f .bloque-info:nth-of-type(1) { background: #f1f9f3; }
.info-f .bloque-info:nth-of-type(2) { background: #fff7ea; }
.info-f .bloque-info-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 16px; }
.info-f .bloque-ico { width: 40px; height: 40px; }
.info-f .bloque-ico svg { width: 22px; height: 22px; }
.info-f .lista-info { columns: 2; column-gap: 44px; }
.info-f .lista-info li { break-inside: avoid; }
.info-f .lista-info li:last-child { margin-bottom: 14px; }
.info-f .li-critico { display: none !important; }
.info-f .info-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  background: #2a2a2c; color: #d6d6d9; border-radius: 10px; padding: 20px 28px;
  font-size: 15.5px; line-height: 1.6;
}
.info-f .info-banner-txt { display: flex; gap: 14px; align-items: flex-start; }
.info-f .info-banner-txt svg { flex: none; width: 36px; height: 36px; color: #ff6b6b; margin-top: 2px; }
.info-f .info-banner-txt b { color: #ffffff; }
.info-f .info-banner .btn-plan { flex: none; white-space: nowrap; }
@media (max-width: 860px) {
  .info-f .lista-info { columns: 1; }
  .info-f .bloque-info { padding: 20px 20px 10px; }
  .info-f .info-banner { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
}

/* 2026-10-04: variante F4 sobre info-f. «Incluyen» en 3 columnas y los íconos
   de ambas listas dentro de un círculo de color. Revertir = borrar este bloque
   (queda F). */
.info-f .bloque-info:nth-of-type(1) .lista-info { columns: 3; column-gap: 34px; }
.info-f .lista-info li { align-items: center; }
.info-f .lista-info li svg.ico-item {
  width: 48px; height: 48px; padding: 7px; margin-top: 0; border-radius: 50%;
  box-sizing: border-box; background: #dcefe0;
}
.info-f .lista-info li svg.ico-lim { background: #fbe8c8; }
@media (max-width: 1150px) {
  .info-f .bloque-info:nth-of-type(1) .lista-info { columns: 2; }
}
@media (max-width: 860px) {
  .info-f .bloque-info:nth-of-type(1) .lista-info { columns: 1; }
}

/* 2026-10-04: «Incluyen» en azul (antes verde). Revertir = borrar este bloque. */
.info-f .bloque-info:nth-of-type(1) { background: #eef5fc; }
.info-f .bloque-info:nth-of-type(1) .bloque-ico { background: #2380c4; }
.info-f .bloque-info:nth-of-type(1) .lista-info li svg.ico-item { color: #2380c4; background: #d8e9f7; }

/* 2026-10-04: iconos de capsula B (20px, antes 16px). Revertir = borrar este bloque. */
.parrilla-oscura .plan-card .spec { gap: 10px; margin: 2px 0; }
.parrilla-oscura .plan-card .spec .ico-spec { width: 20px; height: 20px; }

/* 2026-10-04: capsula B9 (iconos 20px celestes + lineas separadoras entre
   los datos). Revertir = borrar este bloque (queda B). */
.parrilla-oscura .plan-card .spec { max-width: 270px; margin: 0 auto; padding: 7px 0; }
.parrilla-oscura .plan-card .spec + .spec { border-top: 1px solid #3a3a3d; }
.parrilla-oscura .plan-card .spec .ico-spec { color: #6fa8e8; }

/* 2026-10-04: Ver mas caracteristicas mas grande (14px -> 16px). Revertir = borrar este bloque. */
.parrilla-oscura .mas-toggle { font-size: 16px; gap: 7px; }
.parrilla-oscura .mas-toggle .mas-flecha { width: 18px; height: 18px; }

/* 2026-10-04: tabla de caracteristicas mas grande (texto 13.5 -> 15px,
   iconos 16 -> 20px). Revertir = borrar este bloque. */
.parrilla-oscura .tabla-plan { font-size: 15px; }
.parrilla-oscura .tabla-plan tbody td { width: 1%; }
.parrilla-oscura .tabla-plan .ico-car { width: 20px; height: 20px; vertical-align: -5px; margin-right: 9px; }
.parrilla-oscura .tabla-plan tbody td .pill { font-size: 14px; }
.parrilla-oscura .tabla-plan tbody th, .parrilla-oscura .tabla-plan tbody td { padding-left: 8px; padding-right: 8px; }

/* 2026-10-04: pulgar sin circulo y mas grande en «Incluido en todos nuestros planes».
   Revertir = borrar este bloque. */
.info-f .bloque-info:nth-of-type(1) .bloque-ico { background: none; color: #2380c4; width: 44px; height: 44px; }
.info-f .bloque-info:nth-of-type(1) .bloque-ico svg { width: 40px; height: 40px; }

/* 2026-10-04: advertencia sin circulo y mas grande en «Limitaciones».
   Revertir = borrar este bloque. */
.info-f .bloque-info:nth-of-type(2) .bloque-ico { background: none; color: #e8a33d; width: 44px; height: 44px; }
.info-f .bloque-info:nth-of-type(2) .bloque-ico svg { width: 40px; height: 40px; }

/* 2026-10-05: hero de ubicacion-y-contacto.html. Revertir = restaurar
   ubicacion-y-contacto.html-20261005a y borrar este bloque. */
.hero-banner.hero-corto.hero-contacto {
  background-image: linear-gradient(rgba(6, 10, 16, .72), rgba(6, 10, 16, .72)),
                    url("../img/hero-contacto-tablet.jpg");
  text-align: left;
  margin-bottom: 36px;
}
.hero-contacto .hc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 28px; flex-wrap: wrap; }
.hero-contacto .hc-top h1 { margin: 0 0 14px; }
.hero-contacto .hc-empresa { color: #b9bcc2; font-size: 14.5px; }
.hero-contacto .hc-datos { list-style: none; margin: 4px 0 0; padding: 0; }
.hero-contacto .hc-datos li { display: flex; align-items: center; gap: 10px; color: #e8eaed; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.5; margin: 6px 0; }
.hero-contacto .hc-datos svg { flex: none; width: 20px; height: 20px; color: #7cc4ff; }
.hero-contacto .hc-datos a { color: #7cc4ff; text-decoration: none; }
.hero-contacto .hc-datos a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .hero-contacto .hc-top { flex-direction: column; align-items: flex-start; }
  .hero-contacto .hc-top h1 { margin-bottom: 4px; }
  .hero-contacto .hc-empresa { margin-bottom: 10px; }
}

/* 2026-10-05: contacto - menos espacio entre hero y cápsula del form */
.hero-banner.hero-corto.hero-contacto { margin-bottom: 5px; }
.contacto-cols .form-contacto, .contacto-cols .form-contacto > .box-punteado:first-child { margin-top: 0; }

/* 2026-10-05: botón con icono a la izquierda (contacto: avión de papel) */
button.btn-plan.btn-ico { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
button.btn-plan.btn-ico svg { width: 22px; height: 22px; flex: none; }

/* 2026-10-05: contacto sin botón intermedio: el botón deshabilitado se ve igual */
form[data-sin-espera] .btn-plan:disabled { opacity: 1; cursor: default; }

/* 2026-10-05: «Soy Cliente» con 3 barras (variante I) en vez de la flecha ▾ */
@media (min-width: 861px) { #nav .nav-cliente .nav-drop-label::after { content: none; } }
/* el alto de 74px lo daba la flecha (line-height 74px); sin ella se fija aca */
@media (min-width: 861px) { #nav .nav-cliente .nav-drop-label { min-height: 74px; } }
#nav .nav-cliente .nc-menu { display: none; }
@media (min-width: 861px) {
  #nav .nav-cliente .nc-menu {
    display: inline-flex; align-items: center; color: #ffffff;
    margin-left: 6px; padding-left: 13px; border-left: 1px solid #6a6a6e;
    height: 22px; line-height: 1;
  }
  #nav .nav-cliente .nc-menu svg { width: 18px; height: 14px; display: block; transform: none !important; }
}

/* 2026-10-05: «Ver menos» al pie del detalle desplegado */
.mas-toggle.mas-menos { margin-top: 14px; }
.mas-check:checked ~ .plan-card .mas-menos .mas-flecha { transform: none; }

/* ==================================================================
   2026-10-05: PARRILLA GIRABLE (planes-hosting). Botón que alterna entre
   la parrilla normal (capacidades en filas) y la girada (niveles a la
   izquierda, capacidades arriba con flechas). JS: js/parrilla-girar.js.
   Solo escritorio (>860px); en móvil la parrilla queda como siempre.
   ------------------------------------------------------------------ */
.planes-matriz { position: relative; }
/* Botón: top y ancho los fija el JS (borde superior = tope de la «P» de
   «Planes Estándar»; borde derecho = lado derecho de la «B» de «5GB»). */
.planes-matriz > .btn-rotar {
  position: absolute; left: 0; top: 46px; z-index: 9;
  width: 78px; height: 54px; border-radius: 12px; border: 2px solid #c9c9cc;
  background: #ffffff; color: #6b6b70; padding: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .1s;
}
.planes-matriz > .btn-rotar svg { width: 32px; height: 32px; transition: transform .45s ease; }
.planes-matriz > .btn-rotar:hover { background: #f1f2f4; color: #2a2a2c; border-color: #a9a9ad; }
.planes-matriz > .btn-rotar[aria-pressed="true"],
.planes-matriz > .btn-rotar[aria-pressed="true"]:hover {
  background: #2a2a2c; color: #ffffff; border-color: #2a2a2c;
  box-shadow: inset 0 3px 6px rgba(0,0,0,.35); transform: translateY(1px);
}
.planes-matriz > .btn-rotar[aria-pressed="true"] svg { transform: rotate(180deg); }

/* Alternancia de vistas */
.planes-matriz.rotada .matriz-grid { display: none; }
.rot-wrap { display: none; position: relative; }
.planes-matriz.rotada .rot-wrap { display: block; }

/* Rejilla girada: columna de niveles + 6 capacidades, se ven 3 a la vez */
.rot-grid { --tit: 230px; --gap: 22px; display: grid; gap: var(--gap);
  grid-template-columns: var(--tit) repeat(6, calc((100% - var(--tit) - 3 * var(--gap)) / 3)); }
.rot-grid .plan-card { margin: 0; }
.rot-scroll { overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.rot-scroll::-webkit-scrollbar { display: none; }

/* Cabecera de rótulos: fija bajo el menú al bajar (sticky), separada del
   cuerpo porque el scroll horizontal anula el sticky vertical. */
.rot-head { position: sticky; top: 75px; z-index: 8; background: #ffffff; padding-top: 14px; margin-bottom: 10px; }
.rot-head-scroll { overflow: hidden; padding-bottom: 16px; }
.rot-grid-head { row-gap: 0; }
.rot-esq { position: sticky; left: 0; z-index: 7; background: #ffffff; min-height: 1px; box-shadow: 0 16px 0 #ffffff; }
.rot-gb { text-align: center; padding: 6px 0 14px; background: #ffffff; box-shadow: 0 10px 12px -10px rgba(0,0,0,.12); }
.rot-gb .matriz-gb { position: static; text-align: center; padding: 0; background: none; }

/* Títulos de niveles a la izquierda (fijos al desplazar en horizontal) */
.rot-tit { position: sticky; left: 0; z-index: 6; background: #ffffff; display: flex; flex-direction: column; justify-content: center;
  font-size: 26px; font-weight: 400; color: #2f2f31; white-space: nowrap; letter-spacing: -.3px; line-height: 1.15; padding-right: 14px; }
.rot-tit small { display: flex; align-items: flex-end; gap: 10px; font-size: 16px; color: #8a8a8e; margin-top: 8px; letter-spacing: 0; }

/* Flechas: solo flecha grande, sin fondo */
.rot-flecha { position: absolute; top: calc(50% - 1px); transform: translateY(-50%); z-index: 8;
  width: 40px; height: 56px; padding: 0; border: 0; border-radius: 8px; background: none; color: #2380c4;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .2s, color .2s; }
.rot-flecha:hover { color: #0e5ba8; }
.rot-flecha[disabled] { opacity: .25; cursor: default; }
.rot-flecha svg { width: 38px; height: 38px; }
.rot-izq { left: calc(230px + 8px); }
.rot-der { right: 0; }

/* Móvil: sin botón ni vista girada */
@media (max-width: 860px) {
  .planes-matriz > .btn-rotar, .planes-matriz .rot-wrap { display: none !important; }
  .planes-matriz.rotada .matriz-grid { display: grid; }
}
/* 2026-10-05: la columna de títulos de la parrilla girada tapa por completo las cápsulas
   que pasan por debajo al desplazar (asomaba 1px de su borde por redondeo de subpíxeles) */
.rot-tit { box-shadow: 0 4px 0 #ffffff, 0 -4px 0 #ffffff, 21px 0 0 #ffffff, 21px 4px 0 #ffffff, 21px -4px 0 #ffffff; }

/* ==================================================================
   2026-10-05: MODO SÓLO PRECIOS (planes-hosting) + etiquetas de los botones
   «Rotar vista» / «Modo sólo precios». JS: js/parrilla-girar.js
   ------------------------------------------------------------------ */
/* Botón «solo precios» */
.planes-matriz > .btn-rotar svg { width: 28px; height: 28px; }
.planes-matriz > .btn-precio .pz-signo { stroke: #ffffff; }
.planes-matriz > .btn-precio:hover .pz-signo { stroke: #f1f2f4; }
.planes-matriz > .btn-precio[aria-pressed="true"] .pz-disco { fill: #ffffff; }
.planes-matriz > .btn-precio[aria-pressed="true"] .pz-signo { stroke: #2a2a2c; }
.planes-matriz > .btn-precio[aria-pressed="true"] svg { transform: none; }
/* Modo solo precios: cápsulas con únicamente el precio */
.planes-matriz.solo-precio .plan-card .spec,
.planes-matriz.solo-precio .plan-card .mas-toggle,
.planes-matriz.solo-precio .plan-card .mas-detalle { display: none; }
/* precio (con «+ IVA anual» debajo) a la izquierda y «Activar Plan» a la derecha */
.planes-matriz.solo-precio .plan-card { padding: 18px 18px; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.planes-matriz.solo-precio .plan-card .precio { margin: 0; font-size: 21px; line-height: 1.15; text-align: left; }
.planes-matriz.solo-precio .plan-card .precio small { display: block; font-size: 13px; margin-top: 3px; }
.planes-matriz.solo-precio .plan-card > .btn-plan { margin-top: 0; padding: 10px 22px; white-space: nowrap; }
.planes-matriz.solo-precio .matriz-gb { padding-top: 18px; }

/* Etiqueta al pasar el mouse sobre los botones (Rotar vista / Modo sólo precios) */
.planes-matriz > .btn-rotar[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%) translateY(-3px);
  background: #2a2a2c; color: #ffffff; font-size: 13px; font-weight: 600; white-space: nowrap; letter-spacing: 0;
  padding: 6px 10px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 20;
}
.planes-matriz > .btn-rotar[data-tip]::before {
  content: ""; position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%) translateY(-3px);
  border: 5px solid transparent; border-top: 0; border-bottom-color: #2a2a2c;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 20;
}
.planes-matriz > .btn-rotar[data-tip]:hover::after, .planes-matriz > .btn-rotar[data-tip]:hover::before,
.planes-matriz > .btn-rotar[data-tip]:focus-visible::after, .planes-matriz > .btn-rotar[data-tip]:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }
/* La columna de títulos tapa por completo las cápsulas que pasan por debajo al
   desplazar en horizontal (por redondeo de subpíxeles asomaba 1px de su borde inferior) */
.rot-tit { box-shadow: 0 4px 0 #ffffff, 0 -4px 0 #ffffff, 21px 0 0 #ffffff, 21px 4px 0 #ffffff, 21px -4px 0 #ffffff; }

/* 2026-10-06: hero de cambiar-plan.html (foto de fibra/switches, capa oscura como contacto) */
.hero-banner.hero-corto.hero-cambiar-plan {
  background-image: linear-gradient(rgba(6, 10, 16, .70), rgba(6, 10, 16, .70)),
                    url("../img/hero-cambiar-plan.jpg");
  background-position: center;
  margin-bottom: 36px;
  text-align: left;
}
.hero-banner.hero-corto.hero-cambiar-plan h1 { margin-left: 0; margin-right: 0; }

/* 2026-10-06: subtítulo con icono (gráfico en alza, blanco) en el hero de cambiar-plan */
.hero-cambiar-plan .hc-sub-ico { display: flex; align-items: center; gap: 12px; margin-left: 0; margin-right: 0; }
.hero-cambiar-plan .hc-sub-ico svg { flex: none; width: 26px; height: 26px; color: #ffffff; }

/* 2026-10-06: hero de restaurar-credenciales-cpanel.html (mismo formato que cambiar-plan) */
.hero-banner.hero-corto.hero-credenciales {
  background-image: linear-gradient(rgba(6, 10, 16, .70), rgba(6, 10, 16, .70)),
                    url("../img/hero-contacto.jpg");
  background-position: center;
  margin-bottom: 36px;
  text-align: left;
}
.hero-banner.hero-corto.hero-credenciales h1 { margin-left: 0; margin-right: 0; }
.hero-credenciales .hc-sub-ico { display: flex; align-items: center; gap: 12px; margin-left: 0; margin-right: 0; }
.hero-credenciales .hc-sub-ico svg { flex: none; width: 26px; height: 26px; color: #ffffff; }
.form-credenciales .captcha-box { margin-top: 30px; }

/* 2026-10-06: hero de editar-registro-hosting.html (mismo formato que credenciales) */
.hero-banner.hero-corto.hero-credenciales.hero-editar-registro {
  background-image: linear-gradient(rgba(6, 10, 16, .70), rgba(6, 10, 16, .70)),
                    url("../img/hero-editar-registro.jpg");
}

/* 2026-10-06: hero de cambiar-dominio-hosting.html (mismo formato que credenciales) */
.hero-banner.hero-corto.hero-credenciales.hero-cambiar-dominio {
  background-image: linear-gradient(rgba(6, 10, 16, .70), rgba(6, 10, 16, .70)),
                    url("../img/hero-cambiar-dominio.jpg");
}

/* 2026-10-06: hero de recuperar-info-hosting.html (mismo formato que credenciales) */
.hero-banner.hero-corto.hero-credenciales.hero-recuperar-info {
  background-image: linear-gradient(rgba(6, 10, 16, .70), rgba(6, 10, 16, .70)),
                    url("../img/hero-recuperar-info.jpg");
}

/* 2026-10-07: hero de reiniciar-vps.html (mismo formato que credenciales) */
.hero-banner.hero-corto.hero-credenciales.hero-reiniciar-vps {
  background-image: linear-gradient(rgba(6, 10, 16, .70), rgba(6, 10, 16, .70)),
                    url("../img/hero-reiniciar-vps.jpg");
}

/* 2026-10-07: /soporte-webhosting/ (resultados de acciones de soporte con el diseño www5) */
.sw-contenido { margin: 0 0 20px; }
.act-resultado.sw-resultado { display: flex; align-items: flex-start; gap: 14px; max-width: 780px; padding: 18px 22px; margin: 0 0 22px; }
.sw-resultado > svg { flex: none; width: 30px; height: 30px; margin-top: 1px; }
.sw-resultado p { margin: 0 0 8px; }
.sw-resultado p:last-child { margin-bottom: 0; }
.sw-resultado .sw-num { color: #2f2f31; }
.sw-aviso { max-width: 780px; border: 1px solid #f0d58a; background: #fff8e1; color: #5f4b00; border-radius: 10px;
  padding: 16px 22px; margin: 0 0 28px; font-size: 14.5px; line-height: 1.6; }
.sw-aviso p { margin: 0 0 8px; }
.sw-aviso p:last-child { margin-bottom: 0; }
.sw-aviso a { color: #b0141f; font-weight: 700; text-decoration: underline; }
.sw-acciones { margin: 8px 0 80px; }
a.btn-plan.sw-volver { display: inline-flex; text-decoration: none; }

/* 2026-10-08: pulgar arriba en el mensaje de éxito de /soporte-webhosting/ */
.sw-resultado .act-icono { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #ffffff; border: 2px solid #2380c4;
  box-sizing: border-box; display: grid; place-items: center; color: #2380c4; margin-top: -2px; }
.sw-resultado .act-icono svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 2026-10-08: aviso «¿No tiene acceso a los emails de contacto?» con el estilo de la barra
   «¿Sitio de misión crítica?» (planes-hosting). Botón azul como enlace con icono. */
.sw-banner { margin: 0 0 60px; }
.sw-banner a.btn-plan.btn-ico { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.sw-banner a.btn-plan.btn-ico svg { width: 22px; height: 22px; flex: none; }

/* 2026-10-08: la barra «¿No tiene acceso a los emails de contacto?» con el mismo ancho que
   el cuadro azul de éxito (780px); el botón queda bajo el texto. */
.sw-banner { max-width: 780px; }
.sw-banner .info-banner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 24px; }
.sw-banner .info-banner .btn-plan { margin-left: 50px; }
@media (max-width: 860px) { .sw-banner .info-banner .btn-plan { margin-left: 0; } }

/* 2026-10-08: /soporte-webhosting/ · asignar nuevo email de contacto */
.form-email-contacto .sw-subtitulo-2 { margin-top: 34px; }
.sw-campo-fijo, .sw-campo-fijo:focus { background: #f4f4f4 !important; color: #555555; cursor: default; box-shadow: none !important; }
.sw-titular { margin: 9px 0 0; color: #2f2f31; font-size: 15px; }
.form-email-contacto input[type="file"] { display: block; width: 100%; max-width: 520px; box-sizing: border-box; padding: 8px 10px;
  border: 1px dashed #b9c6d3; border-radius: 8px; background: #f7fafd; font: inherit; font-size: 14px; color: #444444; cursor: pointer; }
.form-email-contacto input[type="file"].campo-invalido { border-color: #d9232a; background: #fdf3f3; }
.form-email-contacto input[type="file"]::file-selector-button { margin-right: 12px; border: 0; border-radius: 6px; background: #2380c4;
  color: #ffffff; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.sw-nota { max-width: 780px; color: #b0141f; font-weight: 600; font-size: 14.5px; margin: 18px 0 0; }

/* 2026-10-08: aviso informativo (sin botón) con el estilo de la barra oscura, en formularios de /soporte-webhosting/ */
.sw-banner.sw-banner-nota { margin: 26px 0 0; }
.sw-banner-nota .info-banner-txt { align-items: center; }
.form-email-contacto .captcha-box { margin-top: 30px; }

/* soporte-webhosting: bloques deshabilitados tras finalizar (2026-10-08) */
.sw-deshabilitado { opacity: .45; pointer-events: none; user-select: none; filter: grayscale(.6); transition: opacity .25s; }
.form-email-contacto .consent-box.sin-marco { margin: 30px 0 0; max-width: 780px; }
.form-email-contacto .consent-box .check { margin-bottom: 0; line-height: 1.5; }

/* soporte-webhosting: cambiar plan (2026-10-09) */
.hero-banner.hero-corto.hero-credenciales.hero-cambiar-plan {
  background-image: linear-gradient(rgba(6, 10, 16, .70), rgba(6, 10, 16, .70)),
                    url("../img/hero-cambiar-plan.jpg");
}
.sw-dato { margin: 9px 0 0; color: #2f2f31; font-size: 15px; }
.form-plan-sw select, .form-plan-sw select:focus { width: 100%; max-width: 620px; }
.form-plan-sw .sw-subtitulo-2 { margin-top: 34px; }
.form-plan-sw .captcha-box { margin-top: 30px; }
.sw-plan-aviso[hidden] { display: none !important; }
.sw-plan-aviso .info-banner-txt span { line-height: 1.7; }
.sw-detalle { margin: 6px 0 0; padding-left: 20px; }
.sw-detalle li { margin: 0 0 4px; }
/* Cápsula de espera de soporte-webhosting: espacio para puntos + texto en 2 líneas */
form[data-ajax-sw] .btn-plan.esperando { padding-top: 14px; padding-bottom: 14px; line-height: 1.35; }
/* Cambiar plan: el plan actual (deshabilitado) en azul en la lista */
.form-plan-sw select option:disabled { color: #2380c4; font-weight: 600; }

/* 2026-10-09: credenciales cPanel, colores invertidos: éxito en oscuro (avión en círculo azul)
   y aviso «¿No tiene acceso a los emails...?» en celeste (exclamación roja, botón azul) */
.act-resultado.act-ok.sw-oscuro { background: #2a2a2c; border-color: #2a2a2c; color: #d6d6d9; }
.act-resultado.act-ok.sw-oscuro strong { color: #ffffff; }
.sw-resultado.sw-oscuro .act-icono { background: #2380c4; border-color: #2380c4; color: #ffffff; }
/* prueba ámbar (colores del bloque «Limitaciones» de planes-hosting); celeste anterior:
   background #eef6fc; border #bcd9ef; color/b #1b5f92 */
.info-f.sw-banner-claro .info-banner { background: #fff7ea; border: 1px solid #f3d9a8; color: #5c4a2a; }
.info-f.sw-banner-claro .info-banner-txt b { color: #a35f00; }
.info-f.sw-banner-claro .info-banner-txt svg { color: #e5484d; }

/* 2026-10-09: captcha correcto = visto azul a la derecha del campo */
.captcha-linea { display: flex; align-items: center; gap: 10px; }
.captcha-visto { flex: none; width: 28px; height: 28px; color: #2380c4; display: grid; place-items: center; }
.captcha-visto[hidden] { display: none; }
.captcha-visto svg { width: 26px; height: 26px; }

/* 2026-10-09: dominio verificado: visto azul (servicio vigente) o cruz roja (no existe) a la derecha */
.campo-linea { display: flex; align-items: center; gap: 10px; }
.campo-linea > input { flex: 1 1 auto; min-width: 0; }
.campo-estado { flex: none; width: 28px; height: 28px; display: grid; place-items: center; }
.campo-estado[hidden] { display: none; }
.campo-estado svg { width: 26px; height: 26px; }
.campo-estado-ok { color: #2380c4; }
.campo-estado-no { color: #e00b1c; }
.captcha-visto.captcha-visto-error { color: #e00b1c; }

/* 2026-10-09: fin de flujo (enlace del email): pulgar grande sin círculo, como «Incluido en todos nuestros planes» */
.sw-resultado .act-icono.act-icono-libre { width: 46px; height: 46px; border: 0; border-radius: 0; background: none; color: #2380c4; margin-top: -6px; }
.sw-resultado .act-icono.act-icono-libre svg { width: 42px; height: 42px; stroke-width: 1.9; }
.sw-resultado.sw-oscuro .act-icono.act-icono-libre { color: #ffffff; }

/* 2026-10-09: botón deshabilitado hasta verificar el dominio/IP (pagar-servicio) */
.btn-plan.btn-bloqueado:disabled { opacity: .45; cursor: not-allowed; }

/* 2026-10-11: cambiar plan, datos actuales del servicio en cápsula celeste con íconos (opción B) */
.box-punteado.sw-datos-celeste { background: #eef6fc; border: 1px solid #bcd9ef; }
.sw-datos-celeste .frow > label { display: flex; align-items: center; gap: 10px; color: #1b5f92; }
.sw-datos-celeste .frow > label svg { flex: none; width: 20px; height: 20px; color: #2380c4; }
.sw-datos-celeste .sw-dato { color: #1b5f92; }

/* 2026-10-11: cambiar plan, datos actuales en tres tarjetas oscuras con íconos azules (opción E) */
.sw-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 8px; }
.sw-tarjeta { background: #2a2a2c; color: #d6d6d9; border-radius: 10px; padding: 20px 22px; font-size: 15px; line-height: 1.55; }
.sw-tarjeta-ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(35, 128, 196, .28); color: #4aa8ee;
  display: grid; place-items: center; margin-bottom: 12px; }
.sw-tarjeta-ico svg { width: 23px; height: 23px; stroke-width: 2; }
.sw-tarjeta-tit { font-size: 12.5px; text-transform: uppercase; letter-spacing: .7px; font-weight: 600; color: #9d9da3; margin-bottom: 4px; }
.sw-tarjeta-val { color: #ffffff; }
.sw-tarjeta-val strong { color: #ffffff; }
.sw-tarjeta-det { font-size: 13.5px; color: #a9a9ae; }
@media (max-width: 860px) { .sw-tarjetas { grid-template-columns: 1fr; } }

/* 2026-10-11: cambiar plan, datos actuales sin cápsula: lista con íconos azules (opción G) */
.sw-lista-datos { margin: 4px 0 10px; }
.sw-lista-fila { display: grid; grid-template-columns: 24px 190px 1fr; gap: 12px; align-items: center; padding: 9px 0; font-size: 15px; color: #2f2f31; }
.sw-lista-fila > svg { width: 21px; height: 21px; color: #2380c4; }
.sw-lista-tit { color: var(--gris-texto); }
@media (max-width: 700px) { .sw-lista-fila { grid-template-columns: 24px 1fr; } .sw-lista-val { grid-column: 2; } }

/* 2026-10-19: icono del subtitulo del hero en cualquier pagina (ip.html y siguientes) */
.hero-banner .hc-sub-ico { display: flex; align-items: center; gap: 12px; }
.hero-banner .hc-sub-ico svg { flex: none; width: 26px; height: 26px; color: #ffffff; }

/* 2026-10-19: precios-planes-antiguos.html */
.pa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 10px 0 18px; }
.pa-caja { background: #ffffff; border: 1px solid #e3e3e3; border-radius: 10px; padding: 16px 18px 10px; }
.pa-caja h4 { color: #2380c4; font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.pa-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.pa-tabla th, .pa-tabla td { padding: 8px 10px; border-top: 1px solid #efefef; }
.pa-tabla tr:first-child th, .pa-tabla tr:first-child td { border-top: 0; }
.pa-tabla tr:nth-child(odd) { background: #f7f7f7; }
.pa-tabla th { text-align: left; font-weight: normal; color: var(--gris-texto); }
.pa-tabla td { text-align: right; white-space: nowrap; font-weight: 700; color: var(--gris-titulo); }
.pa-tabla td small { font-weight: normal; color: #9a9a9a; font-size: 12px; }
.pa-nota { margin: 8px 0 80px; font-size: 13.5px; color: #9a9a9a; }
@media (max-width: 760px) {
  .pa-grid { grid-template-columns: 1fr; }
  .pa-tabla td { white-space: normal; }
}

/* 2026-10-19: vps.html (Servidores VPS, acceso root) */
.vps-intro { font-size: 15.5px; color: var(--gris-texto); margin: 0 0 26px; }
.vps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.vps-card { background: #ffffff; border: 1px solid #e3e3e3; border-radius: 10px; padding: 22px 20px; display: flex; flex-direction: column; text-align: center; }
.vps-card h3 { color: #2380c4; font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.vps-precio { font-size: 26px; font-weight: 800; color: var(--gris-titulo); margin-bottom: 16px; }
.vps-precio small { display: block; font-size: 13px; font-weight: normal; color: #9a9a9a; }
.vps-specs { list-style: none; text-align: left; margin: 0 0 20px; padding: 0; flex: 1; }
.vps-specs li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #efefef; font-size: 14.5px; color: var(--gris-texto); }
.vps-specs svg { flex: none; width: 22px; height: 22px; color: #2380c4; }
.vps-card .btn-plan { align-self: center; }
.vps-info { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.vps-caja { background: #ffffff; border: 1px solid #e3e3e3; border-radius: 10px; padding: 18px 20px; }
.vps-caja h4, .vps-aviso h4 { color: #2380c4; font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.vps-check { list-style: none; margin: 0; padding: 0; }
.vps-check li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 14.5px; color: var(--gris-texto); }
.vps-check svg { flex: none; width: 20px; height: 20px; color: var(--verde); margin-top: 1px; }
.vps-aviso { background: #fff8f0; border: 1px solid #f3dcc0; border-radius: 10px; padding: 18px 20px; margin-bottom: 80px; font-size: 14px; color: var(--gris-texto); }
.vps-aviso h4 { display: flex; align-items: center; gap: 8px; color: #c26a00; }
.vps-aviso h4 svg { width: 20px; height: 20px; }
.vps-aviso p { margin-bottom: 8px; }
@media (max-width: 900px) { .vps-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .vps-info { grid-template-columns: 1fr; } }

/* 2026-10-20: la página nunca se desplaza en horizontal.
   - El submenú «Soy Cliente» oculto (desplazado 30px a la derecha para su animación de entrada)
     ensanchaba la página en escritorio: se recorta en horizontal dentro de la barra.
   - En celulares de 320px el logo (con su margen de escritorio) y el aviso de cookies no cabían.
   - body recorta en horizontal como red de seguridad (html ya lo hace, pero Chrome en el
     celular igual permitía arrastrar la página hacia el lado). `clip` no rompe position: sticky. */
body { overflow-x: clip; }
#nav { overflow-x: clip; }
@media (max-width: 860px) { #nav a.nav-logo { margin-right: 0; } }
.cookie-banner .cookie-actions button { min-width: 0; }
@media (max-width: 360px) {
  .nav-logo .logo-word { font-size: 32px; }
  .cookie-banner .cookie-actions button { padding: 11px 8px; }
}

/* 2026-10-20: cabecera móvil con espacios parejos. Los mensajes rotativos reservaban dos líneas
   aunque desde 360px todos caben en una: quedaba un hueco grande bajo el texto y poco aire
   entre «Pagar Servicio / Contacto» y la barra de menú. Ahora se reserva una línea, y solo
   en pantallas menores a 360px se reservan dos, con el texto centrado en vertical. */
@media (max-width: 860px) {
  #header { gap: 10px; padding: 12px 16px 16px; }
  .header-tagline { height: 1.6em; }
}
@media (max-width: 359px) {
  .header-tagline { height: 3.2em; }
  .header-tagline span { top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; }
}

/* 2026-10-20: barra de menú móvil un poco más alta (63px -> 78px) */
@media (max-width: 860px) {
  #nav { padding: 8px 0; }
  #nav a.nav-logo { border-bottom: 0; }   /* la línea de los ítems del menú no va bajo el logo */
}

/* 2026-10-20: «Pagar Servicio» y «Contacto» con texto más grande (móvil 13px -> 17px, escritorio 14px -> 17px) */
.header-links a { font-size: 17px; }
@media (max-width: 860px) { .header-links a { font-size: 17px; } }

/* 2026-10-20: portada en móvil, menos espacio entre la barra de menú y el título (54px -> 34px, igual que las demás páginas) */
@media (max-width: 860px) { .hero-banner.hero-home-consola { padding-top: 34px; } }

/* 2026-10-20: planes-hosting en móvil, menos espacio entre el texto del hero y «Planes Estándar» (132px -> 76px) */
@media (max-width: 860px) {
  .hero-planes-2 .hero-sub { margin-bottom: 0; }
  .planes-matriz { padding-top: 14px; }
}

/* ==================================================================
   2026-10-20: PARRILLA EN MÓVIL CON PESTAÑAS POR CATEGORÍA (alternativa A)
   Arriba se elige Estándar / Alta Performance / WebHosting VPS; se ven solo
   los 6 tamaños de esa categoría, cada uno en una fila con el GB a la izquierda.
   Sin JS: radios + :checked. En escritorio todo queda como antes.
   ------------------------------------------------------------------ */
.pm-radio, .pm-tabs, .pm-resumen { display: none; }
@media (max-width: 860px) {
  .pm-tabs {
    display: flex; gap: 6px; padding: 10px 0; margin: 0 0 4px;
    position: sticky; top: 78px; z-index: 20; background: #ffffff;
  }
  .pm-tabs label {
    flex: 1; text-align: center; cursor: pointer; user-select: none;
    border: 1px solid #cfd3d8; border-radius: 20px; padding: 8px 4px;
    font-size: 13.5px; line-height: 1.25; color: #444; background: #ffffff;
  }
  #pm-cat-1:checked ~ .pm-tabs label[for="pm-cat-1"],
  #pm-cat-2:checked ~ .pm-tabs label[for="pm-cat-2"],
  #pm-cat-3:checked ~ .pm-tabs label[for="pm-cat-3"] { background: #2380c4; border-color: #2380c4; color: #ffffff; font-weight: 700; }
  #pm-cat-1:checked ~ .pm-resumen-1,
  #pm-cat-2:checked ~ .pm-resumen-2,
  #pm-cat-3:checked ~ .pm-resumen-3 {
    display: block; background: #f5f8fc; border-radius: 8px; padding: 10px 12px;
    font-size: 13px; line-height: 1.55; color: var(--gris-texto); margin-bottom: 12px;
  }
  .pm-resumen b { color: var(--gris-titulo); }

  /* Los títulos de columna sobran: la categoría la dicen las pestañas */
  .planes-matriz .matriz-cab { display: none; }
  .planes-matriz .matriz-grid { gap: 10px; }

  /* Solo las cápsulas de la categoría elegida */
  #pm-cat-1:checked ~ .matriz-grid .matriz-fila > .plan-card:not(:nth-of-type(1)),
  #pm-cat-2:checked ~ .matriz-grid .matriz-fila > .plan-card:not(:nth-of-type(2)),
  #pm-cat-3:checked ~ .matriz-grid .matriz-fila > .plan-card:not(:nth-of-type(3)) { display: none; }

  /* Cada tamaño es una fila: GB a la izquierda, datos y botón a la derecha */
  .planes-matriz .matriz-fila {
    display: grid; grid-template-columns: 72px 1fr; align-items: center;
    background: #2a2a2c; border: 1px solid #3a3a3d; border-radius: 12px; overflow: hidden;
  }
  .planes-matriz .matriz-gb-celda { align-self: stretch; display: flex; align-items: center; justify-content: center; border-right: 1px solid #3a3a3d; }
  .planes-matriz .matriz-gb { padding: 0; font-size: 28px; line-height: 1; text-align: center; position: static; background: none; color: #5b8def; }
  .planes-matriz .matriz-gb small { display: block; font-size: 14px; margin: 2px 0 0; }
  .planes-matriz .plan-card { border: 0; border-radius: 0; background: transparent; padding: 12px 14px 10px; box-shadow: none; transform: none; }
  .planes-matriz .plan-card .spec:first-of-type { display: none; }   /* «5GB Disco duro»: ya lo dice la columna izquierda */
  .parrilla-oscura .plan-card .spec { max-width: none; margin: 0; padding: 3px 0; font-size: 14px; justify-content: flex-start; }
  .parrilla-oscura .plan-card .spec + .spec { border-top: 0; }
  .planes-matriz .plan-card .precio { font-size: 19px; margin: 6px 0 8px; text-align: left; }
  .planes-matriz .plan-card .btn-plan { display: block; width: 100%; text-align: center; }
  .planes-matriz .plan-card .mas-toggle { justify-content: flex-start; font-size: 14px; margin-top: 8px; }
  /* Al abrir «Ver más características» la fila crece: el GB se queda arriba, a la altura que tenía cerrado */
  .planes-matriz .mas-check:checked ~ .matriz-gb-celda { align-items: flex-start; padding-top: 82px; }
}

/* 2026-10-20: pestañas de la parrilla móvil con el texto centrado en vertical (las de una línea quedaban arriba) */
@media (max-width: 860px) {
  .pm-tabs label { display: flex; align-items: center; justify-content: center; }
}

/* 2026-10-22: en móvil la tabla de «Ver más características» mide hasta ~1.150px (más angosta, más alta)
   y el tope de 1.000px cortaba el final: «Ver menos» casi no se veía */
@media (max-width: 860px) {
  .planes-matriz .mas-check:checked ~ .plan-card .mas-detalle { max-height: 1800px; }
}

/* ==================================================================
   2026-10-22: BARRA DE ALERTA DEL SITIO (alertas temporales importantes)
   El contenido vive en alerta/alerta.html (www5) y se incluye arriba de todas las
   páginas; si ese archivo no trae el bloque .alerta-sitio, no se muestra nada.
   ------------------------------------------------------------------ */
.alerta-sitio { background: linear-gradient(180deg, #454547, #333335); color: #ffffff; border-bottom: 1px solid #232325; }   /* gris de la barra del logo */
.alerta-sitio-cont { display: flex; align-items: center; gap: 12px; padding: 10px 4vw; max-width: 1400px; margin: 0 auto; }
.alerta-sitio-ico { flex: none; display: flex; width: 26px; height: 26px; color: #ffd166; }
.alerta-sitio-ico svg { width: 26px; height: 26px; }
.alerta-sitio p { flex: 1; margin: 0; font-size: 14.5px; line-height: 1.45; color: #ffffff; }
.alerta-sitio b { color: #ffffff; }
.alerta-sitio-cerrar {
  flex: none; background: transparent; border: 0; color: #ffffff; opacity: .8; cursor: pointer;
  font-size: 26px; line-height: 1; width: 34px; height: 34px; border-radius: 6px; padding: 0; font-family: inherit;
}
.alerta-sitio-cerrar:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
@media (max-width: 860px) {
  .alerta-sitio-cont { padding: 10px 12px 10px 16px; gap: 10px; align-items: flex-start; }
  .alerta-sitio p { font-size: 13.5px; }
  .alerta-sitio-ico { margin-top: 1px; }
}

/* 2026-10-22: barra de alerta a todo el ancho, en una sola línea en escritorio (desde 1280px); exclamación en rojo */
.alerta-sitio-cont { max-width: none; padding: 8px 18px; justify-content: center; }
.alerta-sitio-ico { color: #ff4d4f; }
@media (min-width: 861px) { .alerta-sitio p { flex: 0 1 auto; font-size: 13px; } }
@media (min-width: 1366px) { .alerta-sitio p { font-size: 14px; } }

/* 2026-10-22: la × de la barra de alerta es un ícono (la letra «×» de la fuente quedaba baja respecto del texto) */
.alerta-sitio-cerrar { display: flex; align-items: center; justify-content: center; }
.alerta-sitio-cerrar svg { width: 16px; height: 16px; display: block; }
/* en móvil (texto en varias líneas) la × y el ícono se alinean con la primera línea */
@media (max-width: 860px) { .alerta-sitio-cerrar { margin-top: -7px; } .alerta-sitio-ico { margin-top: -3px; } }

/* 2026-10-22: en escritorio el texto de la alerta se atenúa y vuelve a aparecer, lento, para llamar la atención
   (no desaparece: baja hasta 65% de opacidad; antes 45%). Ciclo completo de 1,6 segundos (antes 6 y 3). */
@keyframes alerta-pulso { from { opacity: 1; } to { opacity: .65; } }
@media (min-width: 861px) {
  .alerta-sitio p { animation: alerta-pulso .8s ease-in-out infinite alternate; }
}

/* 2026-10-22: planes-hosting en móvil, «Ver Servidores Dedicados» alineado con el texto del aviso
   «¿Sitio de misión crítica?» (no con el ícono): ícono 36px + separación 14px */
@media (max-width: 860px) { .bloques-info.info-f .info-banner .btn-plan { margin-left: 50px; } }
/* en pantallas muy angostas (320px) el botón no cabía junto al margen: se ajusta al ancho disponible */
@media (max-width: 860px) { .bloques-info.info-f .info-banner .btn-plan { max-width: calc(100% - 50px); white-space: normal; text-align: center; } }

/* 2026-10-22: barras de potencia sobre cada pestaña de la parrilla móvil (1 / 3 / 12) */
@media (max-width: 860px) {
  .pm-tabs label { display: grid; grid-template-rows: 16px 1fr; justify-items: center; align-items: center; row-gap: 5px; padding: 8px 4px 9px; }
  .pm-tabs .pm-barras { align-self: end; }   /* todas las barras en la misma línea, el texto centrado debajo */
  .pm-tabs .pm-barras { display: block; height: 16px; width: auto; color: #2380c4; margin: 0; }
  #pm-cat-1:checked ~ .pm-tabs label[for="pm-cat-1"] .pm-barras,
  #pm-cat-2:checked ~ .pm-tabs label[for="pm-cat-2"] .pm-barras,
  #pm-cat-3:checked ~ .pm-tabs label[for="pm-cat-3"] .pm-barras { color: #ffffff; }
}

/* 2026-10-22: barras de potencia también junto a «Potencia x1 / x3 / x12» en el resumen de la categoría (móvil) */
.pm-resumen .pm-barras-res { display: inline-block; height: 13px; width: auto; color: #2380c4; vertical-align: -1px; margin: 0 0 0 4px; }

/* 2026-10-22: contacto, el captcha más cerca de la casilla de privacidad (44px -> 22px) */
.form-contacto .consent-box.sin-marco { margin-bottom: 22px; }

/* 2026-10-22: pulgar de confirmación con colores invertidos en todos los formularios
   (contacto, activación de planes, dedicados y VPS): círculo azul relleno y mano blanca */
.act-exito .act-icono { background: #2380c4; border-color: #2380c4; color: #ffffff; }

/* 2026-10-22: error del campo en cápsula oscura (ej.: zona DNS del dominio en nuestros nameservers) */
.campo-capsula { display: flex; align-items: flex-start; gap: 10px; background: #2a2a2c; color: #e8e8e8; border-radius: 10px; padding: 12px 16px; margin-top: 10px; font-size: 14px; line-height: 1.5; max-width: 560px; }
.campo-capsula[hidden] { display: none; }
.campo-capsula svg { flex: none; width: 22px; height: 22px; color: #ff6b6b; margin-top: 1px; }
.campo-capsula a { color: #6fb3f2; text-decoration: underline; }

/* 2026-10-22: «verificando» a la derecha del campo: los 4 puntos del logo con el mismo pulso de los botones */
.campo-estado.campo-estado-cargando { width: auto; min-width: 28px; }
.campo-puntos { display: inline-flex; align-items: center; gap: 4px; height: 28px; }
.campo-puntos i { display: block; border-radius: 50%; background: #2380c4; opacity: .2; animation: btn-pulso 1.4s ease-in-out infinite; }
.campo-puntos i:nth-child(1) { width: 4px;  height: 4px; }
.campo-puntos i:nth-child(2) { width: 6px;  height: 6px;  animation-delay: .2s; }
.campo-puntos i:nth-child(3) { width: 8px;  height: 8px;  animation-delay: .4s; }
.campo-puntos i:nth-child(4) { width: 10px; height: 10px; animation-delay: .6s; }
.campo-capsula-tit { display: block; color: #fff; font-weight: 700; margin-bottom: 2px; }

/* ==================================================================
   2026-10-22: ACTIVACIÓN EN PASOS (hosting-*.html con <form data-pasos>). JS: activar.js
   Línea de pasos con los círculos azules y, a la derecha, el botón «Modo formulario completo»
   (mismo estilo que «Rotar vista» de la parrilla de planes).
   ------------------------------------------------------------------ */
.pasos-barra { display: flex; align-items: center; gap: 24px; margin: 38px 0 26px; }   /* 2026-10-23: más abajo */
.pasos-linea { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; min-width: 0; }
.pasos-linea li { flex: 1; position: relative; display: flex; justify-content: center; }
.pasos-linea li + li::before {   /* tramo que une con el paso anterior */
  content: ""; position: absolute; top: 19px; left: calc(-50% + 30px); right: calc(50% + 30px); height: 3px;
  background: #dcdde0; border-radius: 2px; z-index: 0;
}
.pasos-linea li.hecho + li::before, .pasos-linea li.hecho + li.activo::before, .pasos-linea li.hecho + li.disponible::before { background: #2380c4; }
.paso-item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: #8a8a8f; cursor: pointer; text-align: center; }
.paso-item:disabled { cursor: default; }
.paso-circ { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #c9c9cc; background: #ffffff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #8a8a8f;
  transition: background .25s, border-color .25s, color .25s, box-shadow .25s; }
.paso-ok { display: none; width: 20px; height: 20px; }
.paso-txt { font-size: 14px; line-height: 1.3; max-width: 160px; }
.paso-corto { display: none; }
.pasos-linea li.activo .paso-circ { border-color: #2380c4; color: #2380c4; box-shadow: 0 0 0 5px rgba(35,128,196,.14); }
.pasos-linea li.activo .paso-item { color: #2a2a2c; font-weight: 600; }
.pasos-linea li.disponible .paso-circ { border-color: #2380c4; color: #2380c4; }
.pasos-linea li.disponible .paso-item { color: #4a4a4f; }
.pasos-linea li.hecho .paso-circ { background: #2380c4; border-color: #2380c4; color: #ffffff; }
.pasos-linea li.hecho .paso-n { display: none; }
.pasos-linea li.hecho .paso-ok { display: block; }
.pasos-linea li.hecho .paso-item { color: #4a4a4f; }
.pasos-linea li.hecho .paso-item:hover .paso-circ, .pasos-linea li.disponible .paso-item:hover .paso-circ { box-shadow: 0 0 0 5px rgba(35,128,196,.14); }

/* Botón «Modo formulario completo» (como .btn-rotar de la parrilla) */
.btn-modo { position: relative; flex: none; width: 64px; height: 50px; border-radius: 12px; border: 2px solid #c9c9cc;
  background: #ffffff; color: #6b6b70; padding: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .1s; }
.btn-modo svg { width: 28px; height: 28px; }
.btn-modo:hover { background: #f1f2f4; color: #2a2a2c; border-color: #a9a9ad; }
.btn-modo[aria-pressed="true"], .btn-modo[aria-pressed="true"]:hover {
  background: #2a2a2c; color: #ffffff; border-color: #2a2a2c; box-shadow: inset 0 3px 6px rgba(0,0,0,.35); transform: translateY(1px); }
.btn-modo[data-tip]::after {
  content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 8px); transform: translateY(-3px);
  background: #2a2a2c; color: #ffffff; font-size: 13px; font-weight: 600; white-space: nowrap;
  padding: 6px 10px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 20; }
.btn-modo[data-tip]::before {
  content: ""; position: absolute; right: 25px; top: calc(100% + 3px); transform: translateY(-3px);
  border: 5px solid transparent; border-top: 0; border-bottom-color: #2a2a2c;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 20; }
.btn-modo[data-tip]:hover::after, .btn-modo[data-tip]:hover::before,
.btn-modo[data-tip]:focus-visible::after, .btn-modo[data-tip]:focus-visible::before { opacity: 1; transform: translateY(0); }

/* Modo pasos: un panel a la vez; títulos propios de cada paso */
.form-activar .paso-tit, .form-activar .paso-nav { display: none; }
/* Modo formulario completo: sin línea de pasos; el botón queda a la derecha, a la altura del primer título */
.form-activar:not(.en-pasos) .pasos-linea { display: none; }
.form-activar:not(.en-pasos) .pasos-barra { justify-content: flex-end; margin-top: 6px; margin-bottom: -52px; }
.form-activar.en-pasos .paso-panel { display: none; }
.form-activar.en-pasos .paso-panel.paso-activo { display: block; animation: paso-entra .3s ease; }
.form-activar.en-pasos .paso-panel > h3.subtitulo:not(.paso-tit) { display: none; }
.form-activar.en-pasos .paso-tit { display: block; }
.form-activar.en-pasos .paso-nav { display: flex; }
.paso-num { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8f; margin-bottom: 2px; }
.paso-nav { align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 60px; }
.paso-panel:last-child .paso-nav { margin: 6px 0 0; }
.paso-seguir { margin-left: auto; }
.paso-volver { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 8px 4px; margin: 0;
  font: inherit; font-size: 16px; color: #2380c4; cursor: pointer; }
.paso-volver svg { width: 18px; height: 18px; }
.paso-volver:hover { color: #1a5f93; text-decoration: underline; }
@keyframes paso-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .pasos-barra { gap: 12px; margin-top: 28px; margin-bottom: 18px; }
  .paso-circ { width: 34px; height: 34px; font-size: 15px; }
  .pasos-linea li + li::before { top: 16px; left: calc(-50% + 24px); right: calc(50% + 24px); }
  .paso-largo { display: none; }
  .paso-corto { display: inline; }
  .paso-txt { font-size: 12px; }
  .btn-modo { width: 50px; height: 44px; border-radius: 10px; }
  .btn-modo svg { width: 24px; height: 24px; }
  .btn-modo[data-tip]::after { font-size: 12px; }
  .btn-modo[data-tip]::before { right: 19px; }
  .paso-nav { margin-bottom: 40px; }
}

/* 2026-10-23: paso actual con colores invertidos (círculo azul, número blanco) y aureola más grande que destella */
.pasos-linea li.activo .paso-circ { background: #2380c4; border-color: #2380c4; color: #ffffff;
  box-shadow: 0 0 0 7px rgba(35,128,196,.16); animation: paso-aureola 1.8s ease-out infinite; }
@keyframes paso-aureola {
  0%   { box-shadow: 0 0 0 7px rgba(35,128,196,.16), 0 0 0 0 rgba(35,128,196,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(35,128,196,.16), 0 0 0 16px rgba(35,128,196,0); }
  100% { box-shadow: 0 0 0 7px rgba(35,128,196,.16), 0 0 0 16px rgba(35,128,196,0); }
}
@media (prefers-reduced-motion: reduce) { .pasos-linea li.activo .paso-circ { animation: none; } }

/* 2026-10-23: en modo pasos (escritorio) el contenido bajo la línea va del borde izquierdo de «Dominio»
   (paso 1) al borde derecho del círculo 4; las medidas las pone activar.js */
@media (min-width: 861px) {
  .form-activar.en-pasos .paso-panel { margin-left: var(--pasos-izq, 0px); margin-right: var(--pasos-der, 0px); }
}

/* 2026-10-23: paso-nav dentro de la cápsula del paso (Volver a la izquierda, «Siguiente paso» abajo a la derecha) */
.form-activar.en-pasos .box-punteado > .paso-nav { margin: 24px 0 0; }
.form-activar.en-pasos .paso-panel:not(:last-child) { margin-bottom: 60px; }
@media (max-width: 860px) { .form-activar.en-pasos .paso-panel:not(:last-child) { margin-bottom: 40px; } }

/* 2026-10-23: más aire sobre «Paso N de 4»; «Paso anterior» como botón azul (igual que «Siguiente paso») */
.form-activar.en-pasos .paso-tit { padding-top: 30px; }
.paso-volver.paso-anterior { background: #2380c4; color: #ffffff; padding: 11px 30px; border-radius: 8px;
  font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.paso-volver.paso-anterior:hover { background: #1b6ba5; color: #ffffff; text-decoration: none; }
.paso-nav .btn-plan { margin: 0; }
.btn-plan.btn-ico.paso-anterior .btn-ico-izq { width: 20px; height: 20px; margin-right: 4px; }

/* 2026-10-23: «Siguiente paso» justo a la derecha de «Paso anterior» (pasos 2 y 3); en el paso 1 sigue a la derecha */
.form-activar.en-pasos .box-punteado > .paso-nav { justify-content: flex-start; }
.paso-nav .paso-anterior + .paso-seguir { margin-left: 0; }
.paso-nav .btn-plan.paso-seguir { margin-left: auto; }                 /* paso 1: solo «Siguiente paso», a la derecha */
.paso-nav .paso-anterior + .btn-plan.paso-seguir { margin-left: 0; }   /* pasos 2 y 3: junto a «Paso anterior» */

/* 2026-10-23: paso 4 en una cápsula (como .box-punteado); «Paso anterior» bajo «Activar plan» */
.form-activar.en-pasos .paso-caja { background: #ffffff; border: 1px solid #e3e3e3; border-radius: 10px; padding: 18px 20px; margin: 18px 0; }
.form-activar.en-pasos .paso-caja .consent-box.sin-marco { margin: 6px 0 30px; }
.der .form-activar.en-pasos .paso-caja p.act-enviar { margin: 30px 0 0; }
.form-activar.en-pasos .paso-caja > .paso-nav { justify-content: flex-start; margin: 16px 0 0; }

/* 2026-10-23: párrafos de la cápsula con una línea en blanco entre ellos; aviso que no bloquea con ícono azul */
.campo-capsula-par { display: block; margin-top: 10px; }
.campo-capsula.campo-capsula-info svg { color: #6fb3f2; }

/* 2026-10-23: paso 1, «Siguiente paso» a la izquierda de la cápsula (como en los demás pasos) */
.paso-nav .btn-plan.paso-seguir { margin-left: 0; }

/* 2026-10-23: el botón «Modo formulario completo» alineado con el borde superior de los círculos (escritorio y móvil) */
.pasos-barra { align-items: flex-start; }

/* 2026-10-23: botón «Modo formulario completo» con la altura de los círculos; en celular, menos espacio
   entre la línea de pasos y «Paso N de 4» */
.btn-modo { height: 40px; width: 58px; border-radius: 10px; }
.btn-modo svg { width: 24px; height: 24px; }
.btn-modo[data-tip]::before { right: 22px; }
@media (max-width: 860px) {
  .btn-modo { height: 34px; width: 46px; border-radius: 8px; }
  .btn-modo svg { width: 20px; height: 20px; }
  .btn-modo[data-tip]::before { right: 17px; }
  .pasos-barra { margin-bottom: 8px; }
  .form-activar.en-pasos .paso-tit { padding-top: 0; margin-top: 0; }
}

/* 2026-10-23: el botón «Modo formulario completo» queda en la misma posición en ambos modos: en el formulario
   completo la línea de pasos sigue ocupando su lugar (invisible y con la altura de los círculos) */
.form-activar:not(.en-pasos) .pasos-barra { justify-content: flex-start; margin: 38px 0 26px; }
.form-activar:not(.en-pasos) .pasos-linea { display: flex; visibility: hidden; height: 40px; overflow: hidden; }
@media (max-width: 860px) {
  .form-activar:not(.en-pasos) .pasos-barra { margin: 28px 0 18px; }
  .form-activar:not(.en-pasos) .pasos-linea { height: 34px; }
}

/* 2026-10-23: formulario completo: el título queda a la altura del botón (sin espacio extra sobre el formulario) */
.form-activar:not(.en-pasos) .pasos-barra { margin-bottom: -60px; }
@media (max-width: 860px) { .form-activar:not(.en-pasos) .pasos-barra { margin-bottom: -60px; } }

/* Botón azul dentro de la cápsula oscura (2026-10-26, pagar-servicio: dominio alias o adicional) */
.campo-capsula a.btn-plan.campo-capsula-btn { color: #fff !important; text-decoration: none; text-align: center; margin-top: 4px; padding: 9px 22px; font-size: 14px; }
.campo-capsula-par:has(> .campo-capsula-btn) { margin-top: 12px; }