.polizas {
  position: relative;
  overflow: hidden;
  background: #06142f;
}


.apertura-continuidad {
  /* El velo de ::after solo baja el nivel general del fondo; lo que rescata al
     rojo del titular sobre las farolas y los trazos rojos del video es esta
     sombra, que viaja pegada a las letras. Va en variables porque las tres
     piezas de texto del bloque la comparten y el <span> del titular tiene que
     repetirla junto a su relieve azul. */
  --sombra-texto: 0 1px 3px rgb(2 8 20 / 92%), 0 2px 18px rgb(2 8 20 / 78%);
  --sombra-titular: 0 2px 6px rgb(2 8 20 / 92%), 0 4px 40px rgb(2 8 20 / 82%);
  position: relative;
  display: flex;
  min-height: 620px;
  align-items: center;
  background: #06142f url("../recursos/fondos-secciones/fondo-modulo-2-poster.webp") 62% center / cover no-repeat;
}

.apertura-continuidad video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}


/* El clip anterior era una toma nocturna muy estable: medido con el fotograma
   difuminado, la zona del texto no pasaba de 92 de luma y bastaba un velo del
   30%. El clip actual arranca oscuro pero a mitad del bucle se enciende toda la
   ciudad y llega a 146, así que con aquel 30% el titular se perdía. Estos
   porcentajes son los que devuelven el mismo contraste que tenía el módulo
   antes (blanco ~9.7:1 sobre el peor fotograma); el lado derecho se deja claro
   para no apagar al sujeto. */
.apertura-continuidad::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:

    linear-gradient(
      90deg,
      rgb(3 12 31 / 72%) 0%,
      rgb(3 12 31 / 58%) 46%,
      rgb(3 12 31 / 22%) 74%,
      rgb(3 12 31 / 6%) 100%
    ),
    linear-gradient(180deg, transparent 60%, #06142f 100%);
  content: "";
  pointer-events: none;
}

.contenido-polizas {
  position: relative;

  z-index: 2;
  padding-block: 84px 152px;
}

.contenido-polizas .etiqueta {
  text-shadow: var(--sombra-texto);
}

.polizas h2 {
  max-width: 650px;
  margin: 30px 0 30px;
  color: var(--rojo);
  font-size: clamp(4rem, 8vw, 7.2rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-shadow: var(--sombra-titular);
}

/* El relieve azul va primero: las sombras se pintan de atrás hacia delante, así
   que la primera de la lista queda encima y "Continuity" conserva su desplazado
   de siempre con la sombra oscura detrás. */
.polizas h2 span {
  color: #fff;
  text-shadow: 3px 3px 0 rgb(59 130 246 / 35%), var(--sombra-titular);
}

.relato-continuidad {
  max-width: 600px;
}

.relato-continuidad p {
  margin: 0;
  color: #b8c6dd;
  font-size: 1rem;
  line-height: 1.72;
  text-shadow: var(--sombra-texto);
}


.relato-continuidad .afirmacion-continuidad {
  margin-top: 22px;
  color: #fff;
  font-size: 1.16rem;
  line-height: 1.55;
}


.relato-continuidad .giro-continuidad {
  margin-top: 24px;
  padding-left: 18px;
  border-left: 2px solid var(--rojo);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 500;
}


.cuerpo-continuidad {
  position: relative;
  z-index: 1;
  padding-block: 0 96px;
}


.lema-continuidad {
  max-width: 620px;
  margin: 26px 0 0;
  color: #8fa0bb;
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  line-height: 1.85;
}


.lema-continuidad span {
  color: #e8eefa;
}


.rejilla-pilares {
  position: relative;
  z-index: 2;
  display: grid;
  margin: -96px 0 0;
  padding: 0;
  gap: 22px;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}


.pilar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 42px 26px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 8px;
  background: linear-gradient(160deg, #13264d 0%, #0a1a38 100%);
  box-shadow: 0 24px 55px rgb(0 0 0 / 45%);
  text-align: center;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), border-color 400ms ease, box-shadow 400ms ease;
}

.pilar:hover {
  transform: translateY(-8px);
  border-color: rgb(225 29 42 / 55%);
  box-shadow: 0 34px 72px rgb(0 0 0 / 55%);
}

.icono-pilar {
  display: grid;
  width: 66px;
  height: 66px;
  margin-bottom: 24px;
  border: 1px solid rgb(225 29 42 / 42%);
  border-radius: 50%;
  background: rgb(225 29 42 / 12%);
  color: #ff4d5a;
  place-items: center;
  transition: border-color 400ms ease, background 400ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.icono-pilar svg {
  width: 28px;
  height: 28px;
}

.pilar:hover .icono-pilar {
  border-color: var(--rojo);
  background: rgb(225 29 42 / 13%);
  transform: translateY(-4px);
}

.pilar h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-transform: uppercase;
}


.momento-pilar {
  margin: 0 0 14px;
  color: #ff6d76;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
}

.detalle-pilar {
  margin: 0;
  color: #9dabc4;
  font-size: 0.9rem;
  line-height: 1.65;
}

.cierre-continuidad {
  margin-top: 84px;
  padding-top: 52px;
  border-top: 1px solid rgb(255 255 255 / 10%);
  text-align: center;
}

.falla-continuidad {
  margin: 0;
  color: #7d8ba5;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.respuesta-continuidad {
  max-width: 900px;
  margin: 18px auto 36px;
  color: #fff;
  font-family: var(--titulos);
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.16;
  text-wrap: balance;
}

.respuesta-continuidad span {
  background: linear-gradient(135deg, #e11d2a, #ff4d5a);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--rojo);
  -webkit-text-fill-color: transparent;
}

.cierre-continuidad .boton span {
  display: inline-block;
  margin-left: 8px;
  transition: transform 180ms ease;
}

.cierre-continuidad .boton:hover span {
  transform: translateX(6px);
}


/* El encabezado arranca más arriba que en el resto de secciones: el fondo con
   imagen ya crea aire visual y los 110px de .seccion dejaban un hueco vacío. */
.servicios {
  position: relative;
  overflow: hidden;
  padding-top: 60px;
  /* El fondo trae ya su propia composición (ciudad azul a la izquierda, torre
     roja a la derecha) y es oscuro de origen: basta un velo suave para que el
     texto tenga contraste sin apagar la imagen. */
  background:
    linear-gradient(180deg, rgb(0 2 8 / 46%), rgb(0 2 8 / 62%)),
    url("../recursos/fondos-secciones/fondo-modulo-3.webp") center / cover no-repeat;
}

/* El sprite solo guarda las definiciones de los iconos; no debe ocupar sitio ni
   dejar un hueco en el flujo. */
.sprite-iconos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* El carrusel y el bloque de compromiso van uno al lado del otro. Se hace desde
   el contenedor, que solo tiene esos tres hijos, para no envolverlos en un div
   más: el encabezado cruza las dos columnas y cada bloque se queda en la suya. */
/* El reparto sale medido de la maqueta: el carrusel (índice + tarjeta) se lleva
   dos tercios largos y el compromiso un tercio. Con las columnas casi iguales
   que había antes, la tarjeta quedaba estrecha y el módulo crecía a lo alto. */
.servicios .contenedor {
  position: relative;
  display: grid;
  align-items: stretch;
  column-gap: 22px;
  grid-template-columns: 1.95fr 1fr;
}

.encabezado-servicios {
  grid-column: 1 / -1;
}

/* Sin esto la columna del carrusel se ensancha hasta caber las seis tarjetas
   seguidas: la pista mide seis anchos y una columna de rejilla se estira hasta
   el contenido mínimo de su hijo salvo que se le diga que no. */
.ecosistema,
.cierre-ecosistema {
  min-width: 0;
}

.encabezado-servicios {
  display: grid;
  align-items: start;
  margin-bottom: 46px;
  padding-bottom: 34px;
  gap: 70px;
  grid-template-columns: 1.15fr 0.85fr;
}

/* Columna izquierda: el índice vertical y el visor, uno al lado del otro. El
   rail vive dentro de .ecosistema porque ecosistema.js busca los [data-indice]
   ahí dentro y ata a ese bloque las pausas del avance automático. */
.ecosistema {
  display: grid;
  /* El visor se estira hasta el alto del bloque de compromiso: las dos piezas
     del módulo terminan a la misma altura en vez de dejar un escalón. */
  align-items: stretch;
  column-gap: 18px;
  grid-template-columns: 200px minmax(0, 1fr);
}

/* El tamaño está calculado para que "protege y conecta" quepa en un solo
   renglón dentro de su columna: con la escala anterior partía en tres líneas y
   el titular perdía el remate de dos líneas que pide el diseño. */
.servicios h2 {
  max-width: 720px;
  margin-bottom: 0;
  font-size: clamp(2.4rem, 4vw, 3.15rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Los dos verbos del titular llevan los colores del sistema: proteger es la
   parte roja del negocio y conectar la azul, igual que en el fondo. El azul de
   aquí es el celeste del módulo (el de las tarjetas de conectividad), no el
   índigo de marca: al tamaño del titular el índigo se va a violeta. */
.palabra-protege {
  color: var(--rojo);
}

.palabra-conecta,
.encabezado-servicios .etiqueta {
  color: #2199dd;
}

/* La entradilla se apoya en un filete vertical: separa las dos columnas del
   encabezado sin meter una línea divisoria de arriba abajo. */
.introduccion {
  max-width: 420px;
  margin: 0;
  padding: 2px 0 2px 24px;
  border-left: 2px solid rgb(225 29 42 / 55%);
  color: #d0d5df;
  font-size: 1.1rem;
  line-height: 1.65;
}

.ecosistema {

  --tiempo-ecosistema: 5s;
  margin-top: 0;
}

/* ===== Índice vertical del carrusel ===== */
/* Las seis fichas se apilan arriba con su alto natural. Si se dejaran estirar
   hasta el alto de la tarjeta (que lo marca el bloque de compromiso, más largo)
   quedarían separadas por huecos enormes y dejarían de leerse como un menú. */
.rail-ecosistema {
  display: grid;
  align-content: start;
  gap: 10px;
}

.rail-ecosistema button {
  --acento-rail: #3b82f6;
  position: relative;
  display: flex;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 6px;
  gap: 13px;
  background: rgb(9 15 27 / 55%);
  color: var(--texto-suave);
  cursor: pointer;
  text-align: left;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

/* Los mismos tres acentos que rotan en las tarjetas, en el mismo orden. */
.rail-ecosistema button:nth-child(3n + 2) {
  --acento-rail: #19b6d2;
}

.rail-ecosistema button:nth-child(3n) {
  --acento-rail: #e11d2a;
}

/* El icono va suelto en las fichas en reposo y solo la activa le pone marco:
   así el recuadro azul del activo no compite con seis circulitos iguales. */
.icono-rail {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color 200ms ease, color 200ms ease;
}

.icono-rail svg {
  width: 19px;
  height: 19px;
}

.texto-rail {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.numero-rail {
  color: rgb(255 255 255 / 45%);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

.verbo-rail {
  color: #fff;
  font-family: var(--titulos);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rail-ecosistema button:hover {
  border-color: rgb(255 255 255 / 26%);
  background: rgb(255 255 255 / 6%);
  color: #fff;
}

.rail-ecosistema button.activo {
  border-color: color-mix(in srgb, var(--acento-rail) 62%, transparent);
  background: color-mix(in srgb, var(--acento-rail) 14%, transparent);
  color: var(--acento-rail);
}

.rail-ecosistema button.activo .icono-rail {
  border-color: color-mix(in srgb, var(--acento-rail) 60%, transparent);
  color: var(--acento-rail);
}

.rail-ecosistema button.activo .verbo-rail,
.rail-ecosistema button.activo .numero-rail {
  color: var(--acento-rail);
}

/* El activo apunta a la tarjeta con un triángulo pegado a su borde derecho:
   ata visualmente el índice con lo que se está viendo al lado. */
.rail-ecosistema button.activo::after {
  position: absolute;
  top: 50%;
  right: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid var(--acento-rail);
  content: "";
  transform: translateY(-50%);
}

/* Barra de avance: es el reloj del carrusel (ver animaciones.css). Va abajo del
   botón activo y al terminar su animación se pasa a la siguiente tarjeta. Se
   mete 10px por lado para no asomar por las esquinas redondeadas. */
.rail-ecosistema button::before {
  position: absolute;
  bottom: 0;
  left: 10px;
  width: calc(100% - 20px);
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--acento-rail);
  content: "";
}

.rail-ecosistema button:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

.visor-ecosistema {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

/* ===== Puntos de posición, dentro de la tarjeta ===== */
.puntos-ecosistema {
  position: absolute;
  right: 34px;
  bottom: 32px;
  display: flex;
  gap: 8px;
}

.puntos-ecosistema button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 26%);
  cursor: pointer;
  transition: width 220ms ease, background 220ms ease, border-radius 220ms ease;
}

.puntos-ecosistema button.activo {
  width: 22px;
  border-radius: 999px;
  background: #fff;
}

.pista-ecosistema {
  display: flex;
  height: 100%;

  touch-action: pan-y;

  transition: transform 360ms cubic-bezier(0.22, 1, 0.28, 1);
}


.pista-ecosistema.arrastrando {
  user-select: none;
  transition: none;
}

.nodo {
  --acento-nodo: #3b82f6;
  /* Cada tarjeta pone su propia foto en --fondo-nodo (más abajo). El velo
     oscuro va delante y se aclara hacia la derecha: el texto se apoya en la
     mitad izquierda y las fotos dejan libre justamente esa zona. */
  --fondo-nodo: none;
  position: relative;
  display: flex;
  min-width: 0;
  flex: 0 0 100%;
  flex-direction: column;
  padding: 26px 34px 28px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 6px;
  background:
    linear-gradient(96deg, rgb(4 9 18 / 94%) 0%, rgb(4 9 18 / 86%) 32%, rgb(4 9 18 / 42%) 68%, rgb(4 9 18 / 24%) 100%),
    var(--fondo-nodo) center / cover no-repeat,
    linear-gradient(145deg, rgb(19 28 44 / 96%), rgb(7 12 23 / 98%));
  color: #fff;
}

.nodo::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 6px 6px 0 0;
  background: var(--acento-nodo);
  content: "";
}


.nodo:nth-child(3n + 2) {
  --acento-nodo: #19b6d2;
}

.nodo:nth-child(3n) {
  --acento-nodo: #e11d2a;
}

/* El orden es el mismo del carrusel: ver, conectar, pensar, responder, mover
   y continuar. Va por posición, como los acentos de arriba. */
.nodo:nth-child(1) {
  --fondo-nodo: url("../recursos/fondos-nodos/seguridad-inteligente.webp");
}

.nodo:nth-child(2) {
  --fondo-nodo: url("../recursos/fondos-nodos/infraestructura-digital.webp");
}

.nodo:nth-child(3) {
  --fondo-nodo: url("../recursos/fondos-nodos/inteligencia-plataformas-gestion.webp");
}

.nodo:nth-child(4) {
  --fondo-nodo: url("../recursos/fondos-nodos/infraestructura-respuesta.webp");
}

.nodo:nth-child(5) {
  --fondo-nodo: url("../recursos/fondos-nodos/movilidad-inteligente.webp");
}

.nodo:nth-child(6) {
  --fondo-nodo: url("../recursos/fondos-nodos/infraestructura-critica.webp");
}

/* El icono redondo que iba aquí arriba se mudó al rail: dentro de la tarjeta
   competía con el titular y repetía lo que el índice ya dice. */
.tipo-nodo {
  display: flex;
  align-items: center;
  margin: 0;
  gap: 8px;
  color: var(--acento-nodo);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.numero-nodo::after {
  margin-left: 8px;
  opacity: 0.55;
  content: "/";
}

/* El texto se queda en la mitad izquierda para no pisar la foto de la tarjeta. */
.cuerpo-nodo {
  max-width: 60%;
  margin-top: 16px;
  margin-bottom: 20px;
}

.cuerpo-nodo h3 {
  margin: 0;
  font-size: clamp(1.3rem, 1.95vw, 1.65rem);
  line-height: 1.12;
  text-transform: uppercase;
}

/* Filete corto entre el titular y la promesa: separa el nombre de la solución
   de la frase que la resume sin meter una línea de más. */
.cuerpo-nodo h3::after {
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 14px;
  background: var(--rojo);
  content: "";
}

.promesa-nodo {
  margin: 13px 0 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.detalle-nodo {
  margin: 12px 0 0;
  color: #aeb9ca;
  font-size: 0.9rem;
  line-height: 1.6;
}


/* El sobrante de alto de la tarjeta (el visor se estira hasta igualar al bloque
   de compromiso) se acumula aquí, encima del enlace: el texto y las fichas se
   leen seguidos y el hueco cae sobre la foto, que es donde no molesta. */
.enlace-nodo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 20px;
  gap: 12px;
  color: var(--acento-nodo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* La flecha va dentro de un botón redondo: el enlace de la tarjeta pesa lo
   mismo que el botón del bloque de compromiso que tiene al lado. */
.enlace-nodo span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--acento-nodo) 55%, transparent);
  border-radius: 50%;
  font-size: 0.95rem;
  transition: background 180ms ease, transform 180ms ease;
}

.enlace-nodo:hover span {
  background: color-mix(in srgb, var(--acento-nodo) 18%, transparent);
  transform: translateX(4px);
}


/* El rótulo pasa de columna lateral a línea encima de la rejilla: así las
   fichas ganan las dos columnas completas y quedan alineadas entre sí. */
.capacidades-nodo {
  max-width: 78%;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.titulo-capacidades {
  margin: 0 0 11px;
  color: var(--acento-nodo);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}


.capacidades-nodo ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}

.capacidades-nodo li {
  display: flex;
  align-items: center;
  padding: 9px 14px 9px 11px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 4px;
  gap: 10px;
  background: rgb(9 15 27 / 62%);
  color: #e3e8f0;
  font-size: 0.83rem;
  line-height: 1.3;
}

/* Si la última ficha se queda sola en su fila, ocupa el ancho entero en vez de
   dejar medio renglón vacío. */
.capacidades-nodo li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.capacidades-nodo li svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--acento-nodo);
}

/* Al lado del carrusel el ancho ya no da para dos columnas de texto: la promesa
   y el detalle se apilan, y la línea que los separaba pasa de vertical a
   horizontal. */
/* Este bloque no va en tarjeta: el contenido se apoya directamente sobre el
   fondo de la sección, alineado con los bordes de su columna. Lo único que lo
   delimita es la cinta roja de arriba, hermana de la del carrusel. */
.cierre-ecosistema {
  position: relative;
  display: grid;
  margin-top: 0;
  padding: 20px 0 0;
  gap: 14px;
  grid-template-columns: 1fr;
  /* La segunda fila absorbe el alto sobrante cuando el bloque se estira hasta
     igualar al carrusel: así el botón puede quedarse pegado abajo. */
  grid-template-rows: auto 1fr;
  background: radial-gradient(circle at 100% 0%, rgb(225 29 42 / 12%), transparent 52%);
}

.cierre-ecosistema::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--rojo);
  content: "";
}

.encabezado-cierre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* La etiqueta del módulo es azul en todo el sitio; aquí va en rojo porque el
   bloque entero es la pieza roja del ecosistema. */
.encabezado-cierre .etiqueta {
  color: var(--rojo);
}

.icono-cierre {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--rojo) 42%, transparent);
  border-radius: 10px;
  background: rgb(225 29 42 / 12%);
  color: var(--rojo);
}

.icono-cierre svg {
  width: 20px;
  height: 20px;
}

.cierre-ecosistema h3 {
  margin: 12px 0 0;
  font-size: clamp(1.15rem, 1.55vw, 1.32rem);
  line-height: 1.22;
}

.cierre-ecosistema h3 span {
  color: var(--texto-suave);
}

/* La cifra va dentro de un aro rojo y se desborda por su derecha: el dato duro
   de la promesa se lee como un sello, no como otra caja más de las que ya hay
   en el módulo. */
.sello-cierre {
  display: flex;
  align-items: center;
  margin: 18px 0 0;
  padding: 0;
  gap: 18px;
}

.cifra-cierre {
  position: relative;
  z-index: 0;
  flex: none;
  padding: 18px 0 18px 24px;
  color: var(--rojo);
  font-family: var(--titulos);
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

/* El aro está abierto por la derecha: es justo por donde la cifra se sale, así
   que el trazo no la cruza. Va detrás de los dígitos (de ahí el contexto de
   apilado de arriba). */
.cifra-cierre::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: 88px;
  height: 88px;
  border: 3px solid var(--rojo);
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.unidad-cierre {
  display: grid;
  gap: 4px;
}

.unidad-fuerte {
  color: var(--rojo);
  font-family: var(--titulos);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-transform: uppercase;
}

.unidad-media {
  color: #fff;
  font-family: var(--titulos);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Ajustada para que "posterior a la implementación" quepa en un renglón dentro
   de la columna del compromiso, que es la estrecha del módulo. */
.unidad-suave {
  color: var(--texto-suave);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.detalle-cierre {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.detalle-cierre p {
  margin: 0 0 13px;
  color: #aeb9ca;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* El segundo párrafo era un muro gris que enumeraba tres cosas en prosa. Como
   lista se recorre de un vistazo; el "180 días" ya lo dice el sello de arriba. */
.incluye-cierre {
  display: grid;
  margin: 0 0 16px;
  padding: 0;
  gap: 7px;
  list-style: none;
}

.incluye-cierre li {
  display: flex;
  align-items: center;
  padding: 10px 13px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 5px;
  gap: 11px;
  background: rgb(9 15 27 / 55%);
  color: #e3e8f0;
  font-size: 0.86rem;
  line-height: 1.35;
}

.ico-incluye {
  display: grid;
  width: 29px;
  height: 29px;
  flex: none;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--rojo) 45%, transparent);
  border-radius: 6px;
  background: rgb(225 29 42 / 12%);
  color: var(--rojo);
}

.ico-incluye svg {
  width: 17px;
  height: 17px;
}

.detalle-cierre .boton {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 12px;
  /* Ancla el botón al fondo de la tarjeta cuando sobra alto. El aire mínimo
     con la lista lo pone el margen inferior de .incluye-cierre. */
  margin-top: auto;
  gap: 10px;
}

.detalle-cierre .boton span {
  font-size: 1.1rem;
  transition: transform 180ms ease;
}

.detalle-cierre .boton:hover span {
  transform: translateX(6px);
}

/* ===== Asesoría / agenda una visita ===== */
.asesoria {
  position: relative;
  z-index: 5;
  overflow: visible;
  padding: 55px 0 0;
  background:
    linear-gradient(90deg, rgb(1 4 10 / 96%) 0%, rgb(2 6 14 / 90%) 38%, rgb(2 6 14 / 35%) 64%, transparent 100%),
    linear-gradient(180deg, rgb(1 4 10 / 60%) 0%, transparent 22%, transparent 75%, rgb(1 4 10 / 95%) 100%),
    url("../recursos/fondos-secciones/fondo-modulo-4.webp") right center / cover no-repeat;
}

.asesoria .contenido-asesoria {
  max-width: 660px;
}

.asesoria-etiqueta-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.etiqueta-roja {
  margin: 0;
  color: var(--rojo);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.etiqueta-linea-roja {
  display: inline-block;
  width: 45px;
  height: 1.5px;
  background: rgb(225 29 42 / 65%);
}

.asesoria h2 {
  max-width: 660px;
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(1.85rem, 2.85vw, 2.65rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.punto-rojo {
  color: var(--rojo);
}

.introduccion-asesoria {
  max-width: 530px;
  margin: 0;
  color: #9aa8be;
  font-size: 0.86rem;
  line-height: 1.55;
}

.introduccion-asesoria + .introduccion-asesoria {
  margin-top: 10px;
}

.lema-visita {
  max-width: 540px;
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--rojo);
  color: #fff;
  font-family: var(--titulos);
  font-size: clamp(1.05rem, 1.55vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* Botones de acción superiores */
.asesoria-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  margin-bottom: 36px;
}

.icono-btn {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.icono-persona {
  color: var(--rojo);
  stroke: var(--rojo);
}

.asesoria-acciones .boton-agenda {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid var(--rojo);
  border-radius: 4px;
  background: var(--rojo);
  box-shadow: 0 4px 22px rgb(225 29 42 / 40%);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background 260ms ease, transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.asesoria-acciones .boton-agenda:hover {
  transform: translateY(-2px);
  border-color: var(--rojo-oscuro);
  background: var(--rojo-oscuro);
  box-shadow: 0 8px 26px rgb(225 29 42 / 60%);
}

.asesoria-acciones .boton-contorno {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 4px;
  background: rgb(4 8 16 / 60%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: border-color 260ms ease, background 260ms ease, transform 260ms ease;
}

.asesoria-acciones .boton-contorno:hover {
  transform: translateY(-2px);
  border-color: #fff;
  background: rgb(255 255 255 / 12%);
}

/* Panel inferior flotante que se superpone hacia Casos de Éxito */
.asesoria-panel-fases {
  position: relative;
  z-index: 10;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 30px 38px;
  margin-bottom: -68px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 16px;
  background: linear-gradient(180deg, rgb(8 13 22 / 94%) 0%, rgb(3 6 12 / 98%) 100%);
  box-shadow: 0 20px 50px rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 255 255 / 4%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.constelacion-roja {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 320px;
  height: 160px;
  background-image:
    radial-gradient(circle at 12% 82%, rgb(225 29 42 / 14%) 0%, transparent 60%),
    radial-gradient(2px 2px at 40px 110px, var(--rojo), transparent),
    radial-gradient(2px 2px at 90px 135px, var(--rojo), transparent),
    radial-gradient(1.5px 1.5px at 140px 100px, var(--rojo), transparent),
    radial-gradient(2px 2px at 180px 145px, var(--rojo), transparent),
    radial-gradient(1.5px 1.5px at 230px 115px, var(--rojo), transparent);
  pointer-events: none;
  opacity: 0.85;
}

.asesoria-panel-fases .fase-columna {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.asesoria-panel-fases .fase-num {
  color: var(--rojo);
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.asesoria-panel-fases .fase-fila {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.asesoria-panel-fases .fase-circulo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(225 29 42 / 30%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(32 8 12 / 60%) 0%, rgb(10 4 8 / 85%) 100%);
  color: var(--rojo);
  transition: border-color 260ms ease, color 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}

.asesoria-panel-fases .fase-columna:hover .fase-circulo {
  transform: scale(1.05);
  border-color: var(--rojo);
  box-shadow: 0 0 20px rgb(225 29 42 / 40%);
  color: #fff;
}

.asesoria-panel-fases .icono-fase {
  width: 20px;
  height: 20px;
}

.asesoria-panel-fases .fase-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.asesoria-panel-fases .fase-info h3 {
  margin: 0;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.asesoria-panel-fases .fase-info p {
  margin: 0;
  color: #94a1b5;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* ===== Casos de éxito ===== */
.casos-exito {
  position: relative;
  overflow: hidden;
  padding-top: 155px;
  background:
    radial-gradient(circle at 50% 45%, rgb(32 74 150 / 16%), transparent 36%),
    linear-gradient(rgb(2 3 7 / 88%), rgb(2 3 7 / 94%)),
    url("../recursos/fondos-secciones/casos-centro-monitoreo.webp") center top / cover no-repeat;
}

.casos-exito::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 48%, rgb(255 255 255 / 2%) 48%, rgb(255 255 255 / 2%) 52%, transparent 52%);
  background-size: 70px 70px;
  content: "";
  pointer-events: none;
}

.casos-exito .contenedor {
  position: relative;
}

.casos-encabezado {
  max-width: 760px;
  margin: 0 auto 72px;
  text-align: center;
}

.casos-encabezado h2 {
  max-width: none;
  margin: 14px 0 20px;
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: 1.02;
}

.casos-encabezado > p:last-child {
  margin: 0;
  color: #aeb8c8;
  line-height: 1.7;
}

.linea-casos {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 58px;
}

.linea-casos::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, var(--azul) 10%, var(--azul) 90%, transparent);
  content: "";
}

.caso-exito {
  --entrada-caso: -55px;
  position: relative;
  width: calc(50% - 52px);
  padding: 38px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 7px;
  background: linear-gradient(145deg, rgb(24 27 34 / 98%), rgb(10 13 20 / 98%));
  box-shadow: 0 24px 60px rgb(0 0 0 / 35%);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.caso-exito:nth-child(even) {
  --entrada-caso: 55px;
  align-self: flex-end;
}

.caso-exito::before {
  position: absolute;
  top: 50%;
  right: -53px;
  width: 53px;
  height: 1px;
  background: rgb(255 255 255 / 45%);
  content: "";
}

.caso-exito::after {
  position: absolute;
  top: calc(50% - 6px);
  right: -59px;
  width: 12px;
  height: 12px;
  border: 3px solid #020307;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 0 0 1px var(--azul), 0 0 18px rgb(59 130 246 / 80%);
  content: "";
}

.caso-exito:nth-child(even)::before {
  right: auto;
  left: -53px;
}

.caso-exito:nth-child(even)::after {
  right: auto;
  left: -59px;
}

.numero-caso {
  position: absolute;
  top: 24px;
  right: 28px;
  color: rgb(255 255 255 / 8%);
  font-family: var(--titulos);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}

.ubicacion-caso {
  margin: 0 0 12px;
  color: var(--azul);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.caso-exito h3 {
  max-width: 430px;
  margin: 0 0 20px;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.15;
}

.caso-exito > p:not(.ubicacion-caso) {
  max-width: 520px;
  margin: 0;
  color: #b3bdcb;
  font-size: 0.9rem;
  line-height: 1.7;
}

.caso-exito ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.caso-exito li {
  padding: 8px 12px;
  border: 1px solid rgb(59 130 246 / 25%);
  border-radius: 999px;
  color: #d7e5fa;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.caso-exito:hover {
  border-color: rgb(59 130 246 / 60%);
  box-shadow: 0 28px 70px rgb(0 0 0 / 50%), 0 0 35px rgb(59 130 246 / 10%);
}

.casos-exito.preparado .caso-exito {
  opacity: 0;
  transform: translateX(var(--entrada-caso));
}

.casos-exito.preparado .caso-exito.visible {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 1200ms ease,
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.dos-columnas {
  display: grid;
  align-items: center;
  gap: 70px;
  grid-template-columns: 1fr 1fr;
}

/* Con el módulo en dos columnas y el rail comiéndose 172px, la tarjeta se queda
   en unos 500px: las fichas se aprietan un punto para que las dos columnas
   sigan cabiendo sin partir los nombres largos. */
@media (min-width: 1181px) {
  /* El texto se queda en dos tercios para que la foto de la tarjeta respire por
     la derecha, que es donde el velo la deja verse. */
  .cuerpo-nodo {
    max-width: 60%;
  }

  .capacidades-nodo {
    max-width: 100%;
  }

  .capacidades-nodo li {
    padding: 7px 11px 7px 9px;
    gap: 8px;
    font-size: 0.76rem;
  }

  .capacidades-nodo li svg {
    width: 15px;
    height: 15px;
  }
}

/* Por debajo de este ancho las dos columnas del módulo dejarían el carrusel tan
   estrecho que las fichas de capacidades se apilarían de una en una: vuelven a
   ir una encima de otra, y el bloque de compromiso recupera su reparto ancho. */
@media (max-width: 1180px) {
  .servicios .contenedor {
    grid-template-columns: 1fr;
  }

  .cierre-ecosistema {
    margin-top: 24px;
    padding: 34px 0 0;
    gap: 60px;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: auto;
  }

  .detalle-cierre {
    padding-top: 0;
    padding-left: 34px;
    border-top: 0;
    border-left: 1px solid rgb(255 255 255 / 12%);
  }
}

@media (max-width: 1000px) {

  .rejilla-pilares {
    margin-top: -70px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  /* Sin solape ya no hay hueco que reservar abajo. */
  .contenido-polizas {
    padding-block: 68px 20px;
  }


  .rejilla-pilares {
    margin-top: 44px;
    grid-template-columns: 1fr;
  }

  .pilar {
    padding: 34px 24px;
  }
}

@media (max-width: 900px) {
  .apertura-continuidad {
    min-height: 590px;
    background-position: 58% center;
  }


  /* Apilado, el texto ya no se queda en el tercio izquierdo: cruza toda la
     imagen, así que el velo no puede aclararse tanto hacia la derecha. */
  .apertura-continuidad::after {
    background:
      linear-gradient(90deg, rgb(3 12 31 / 70%) 0%, rgb(3 12 31 / 62%) 58%, rgb(3 12 31 / 52%) 100%),
      linear-gradient(180deg, transparent 60%, #06142f 100%);
  }

  /* Aquí el solape del panel baja a 70px, así que el hueco reservado también. */
  .contenido-polizas {
    padding-block: 68px 124px;
  }

  .cuerpo-continuidad {
    padding-block: 8px 76px;
  }

  .cierre-continuidad {
    margin-top: 64px;
    padding-top: 44px;
  }

  .encabezado-servicios,
  .cuadricula-asesoria,
  .dos-columnas {
    grid-template-columns: 1fr;
  }

  .encabezado-servicios {
    gap: 30px;
  }

  /* Apilada bajo el titular, el filete ya no separa dos columnas: sobra. */
  .introduccion {
    max-width: 650px;
    padding-left: 0;
    border-left: 0;
  }

  .nodo {
    padding: 28px 26px 30px;
  }

  /* Sin foto lateral visible no hay razón para reservarle la mitad derecha de
     la tarjeta: el texto y las fichas toman el ancho entero. */
  .cuerpo-nodo,
  .capacidades-nodo {
    max-width: 100%;
  }

  /* El índice deja de ser columna y se convierte en una tira que se arrastra
     de lado por encima de la tarjeta. */
  .ecosistema {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  /* Las fichas se miden por su contenido, no por un ancho fijo: con 138px
     "Responder" o "Continuar" se salían del recuadro y pisaban a la ficha de al
     lado. Como la tira ya se arrastra de lado, que cada una mida lo que necesita
     no cuesta nada. */
  .rail-ecosistema {
    overflow-x: auto;
    padding-bottom: 4px;
    gap: 8px;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  /* La barra de desplazamiento de la tira sobra: el arrastre ya se entiende por
     las fichas cortadas en el borde. */
  .rail-ecosistema::-webkit-scrollbar {
    display: none;
  }

  .rail-ecosistema button {
    padding: 11px 14px;
    gap: 11px;
    scroll-snap-align: start;
  }

  /* Sin ancho sobrante que repartir, el texto no necesita partirse: cada verbo
     se lee de una sola pieza. */
  .rail-ecosistema .verbo-rail {
    white-space: nowrap;
  }

  /* En tira horizontal el triángulo apuntaría al vecino de al lado, no a la
     tarjeta: la ficha activa se distingue por el color y el recuadro. */
  .rail-ecosistema button.activo::after {
    display: none;
  }

  .cierre-ecosistema {
    padding: 30px 0 0;
    gap: 36px;
    grid-template-columns: 1fr;
  }

  .detalle-cierre {
    padding-top: 34px;
    padding-left: 0;
    border-top: 1px solid rgb(255 255 255 / 12%);
    border-left: 0;
  }

  .asesoria-panel-fases {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 38px 28px;
  }

  .asesoria-panel-fases .fase-columna + .fase-columna {
    padding-top: 26px;
    border-top: 1px solid rgb(255 255 255 / 8%);
  }



  .linea-casos::before {
    left: 18px;
  }

  .caso-exito,
  .caso-exito:nth-child(even) {
    --entrada-caso: 35px;
    width: calc(100% - 54px);
    align-self: flex-end;
  }

  .caso-exito::before,
  .caso-exito:nth-child(even)::before {
    right: auto;
    left: -35px;
    width: 35px;
  }

  .caso-exito::after,
  .caso-exito:nth-child(even)::after {
    right: auto;
    left: -41px;
  }
}

@media (max-width: 600px) {
  .apertura-continuidad {
    min-height: 620px;
    background-position: 67% center;
  }


  .apertura-continuidad::after {
    background:
      linear-gradient(rgb(3 12 31 / 58%), rgb(3 12 31 / 58%)),
      linear-gradient(180deg, transparent 60%, #06142f 100%);
  }

  .polizas h2 {
    font-size: clamp(3.2rem, 17vw, 4.5rem);
  }

  .cierre-continuidad .boton {
    display: block;
  }

  .servicios h2 {
    font-size: clamp(2.5rem, 13vw, 3.5rem);
  }

  .nodo {
    padding: 26px 20px 28px;
  }


  .capacidades-nodo li {
    padding: 8px 13px 8px 11px;
    font-size: 0.82rem;
  }

  .capacidades-nodo ul {
    grid-template-columns: 1fr;
  }

  .puntos-ecosistema {
    right: 22px;
    bottom: 22px;
  }

  .cierre-ecosistema {
    padding: 26px 0 0;
  }

  .sello-cierre {
    gap: 16px;
  }

  .cifra-cierre {
    padding: 20px 0 20px 22px;
  }

  .cifra-cierre::before {
    width: 86px;
    height: 86px;
  }

  .unidad-fuerte {
    font-size: 1.2rem;
  }

  .detalle-cierre .boton {
    display: flex;
    justify-content: center;
  }

  .asesoria {
    padding-top: 80px;
  }

  .asesoria h2 {
    font-size: clamp(2rem, 9vw, 2.7rem);
  }

  .asesoria-acciones {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 50px;
  }

  .asesoria-acciones .boton-agenda,
  .asesoria-acciones .boton-contorno {
    width: 100%;
    justify-content: center;
  }

  .asesoria-panel-fases {
    padding: 32px 20px;
    border-radius: 16px 16px 0 0;
  }

  .fase-fila {
    gap: 15px;
  }

  .fase-circulo {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .fase-circulo .icono-fase {
    width: 20px;
    height: 20px;
  }



  .casos-encabezado {
    margin-bottom: 50px;
  }

  .caso-exito {
    padding: 30px 24px;
  }

  .numero-caso {
    top: 20px;
    right: 18px;
    font-size: 3.2rem;
  }
}