.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;
}

/* La ciudad de noche al pie del módulo, detrás del cierre. Va a todo el ancho
   y crece con él (proporción de la foto, 1672×941); arriba se funde con el
   azul de la sección para que el cielo no marque un corte detrás de las
   fichas, y un velo leve la baja para que el titular se lea sobre las luces. */
.cuerpo-continuidad::before {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: max(56.3vw, 460px);
  background:
    radial-gradient(ellipse 58% 40% at 50% 62%, rgb(3 8 22 / 85%) 0%, rgb(3 8 22 / 60%) 50%, transparent 100%),
    linear-gradient(180deg, rgb(6 20 47 / 35%), rgb(6 20 47 / 10%) 60%, rgb(2 6 16 / 35%)),
    url("../recursos/fondos-secciones/ciudad-continuity.webp") center bottom / cover no-repeat;
  content: "";
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
  pointer-events: none;
}


.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;
  counter-reset: pilar;
}


/* La ficha no anima transform ni borde por sí misma: todo el hover vive en
   los pseudo-elementos y en los hijos. isolation deja las capas con z-index
   negativo encima del fondo. */
.pilar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 58px 26px 40px;
  border: 1px solid rgb(148 175 230 / 16%);
  border-radius: 12px;
  background:
    radial-gradient(120% 62% at 50% 0%, rgb(225 29 42 / 15%) 0%, transparent 62%),
    linear-gradient(180deg, rgb(255 255 255 / 6%) 0%, transparent 26%),
    linear-gradient(165deg, #13264d 0%, #0a1834 56%, #071226 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 9%),
    0 26px 58px rgb(2 8 22 / 62%);
  text-align: center;
  counter-increment: pilar;
  isolation: isolate;
}

.pilar::after {
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(110% 70% at 50% 0%, rgb(225 29 42 / 22%) 0%, transparent 66%);
  box-shadow:
    inset 0 0 0 1px rgb(255 77 90 / 55%),
    0 0 44px rgb(225 29 42 / 16%);
  content: "";
  inset: -1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}

/* Luz que deriva despacio al fondo de la ficha, como un shader: una mancha
   roja y otra azul que se mueven a destiempo. Son degradados radiales sin
   filtro de desenfoque y sólo se anima transform, así que la mueve la GPU sin
   repintar. Cada ficha arranca en otro punto del ciclo (--desfase-luz) y
   pausa-fuera-de-vista.js las detiene cuando la rejilla sale de pantalla. */
.luz-pilar {
  position: absolute;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  inset: 0;
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.luz-pilar::before,
.luz-pilar::after {
  position: absolute;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  animation: luz-pilar-roja 14s ease-in-out var(--desfase-luz, 0s) infinite alternate;
  will-change: transform;
}

.luz-pilar::before {
  bottom: -62%;
  left: -48%;
  background: radial-gradient(closest-side, rgb(255 110 120 / 95%), rgb(225 29 42 / 60%) 35%, rgb(225 29 42 / 18%) 62%, transparent);
}

.luz-pilar::after {
  right: -55%;
  bottom: -58%;
  background: radial-gradient(closest-side, rgb(110 165 255 / 95%), rgb(59 130 246 / 58%) 35%, rgb(25 182 210 / 16%) 62%, transparent);
  animation-name: luz-pilar-azul;
  animation-duration: 18s;
}

/* Con WebGL la luz es el humo de js/shader-pilares.js, en un lienzo que
   ocupa la ficha; las manchas de arriba quedan sólo como respaldo. */
.luz-pilar canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

.luz-pilar.con-shader::before,
.luz-pilar.con-shader::after {
  display: none;
}

/* Encima del humo, la red de nodos de js/red-nodos.js. Reacciona al puntero
   en toda la ficha (data-zona-puntero en .pilar). */
.nodos-pilar {
  position: absolute;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  inset: 0;
  pointer-events: none;
}

.nodos-pilar canvas {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
}

.pilar:nth-child(2) { --desfase-luz: -5s; }
.pilar:nth-child(3) { --desfase-luz: -9s; }
.pilar:nth-child(4) { --desfase-luz: -13s; }

.rejilla-pilares.detenida .luz-pilar::before,
.rejilla-pilares.detenida .luz-pilar::after {
  animation-play-state: paused;
}

@keyframes luz-pilar-roja {
  50% {
    transform: translate(18%, -14%) scale(1.15);
  }

  100% {
    transform: translate(34%, -4%) scale(0.95);
  }
}

@keyframes luz-pilar-azul {
  0% {
    transform: scale(1.05);
  }

  50% {
    transform: translate(-22%, -18%) scale(0.9);
  }

  100% {
    transform: translate(-10%, -30%) scale(1.2);
  }
}

/* Dial de instrumento: disco oscuro con un arco rojo sobre el borde, que da
   la vuelta al pasar el cursor. El arco se recorta con una máscara radial. */
.icono-pilar {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  margin-bottom: 30px;
  border: 1px solid rgb(160 190 255 / 22%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, rgb(225 29 42 / 30%) 0%, rgb(7 18 38 / 78%) 72%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 14%),
    0 14px 32px rgb(2 8 22 / 55%);
  color: #fff;
  place-items: center;
  transition: box-shadow 400ms ease;
}

.icono-pilar::after {
  position: absolute;
  border-radius: 50%;
  background: conic-gradient(from -45deg, #ff4d5a 0deg 90deg, transparent 90deg);
  content: "";
  inset: -2px;
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

/* El número de orden cuelga del título pero se ancla a la esquina de la ficha:
   el h3 no está posicionado, así que el absoluto sube hasta .pilar. */
.pilar h3::before {
  position: absolute;
  top: 20px;
  left: 22px;
  color: #7f93b8;
  content: counter(pilar, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  transition: color 400ms ease;
}

.pilar h3::after {
  display: block;
  width: 56px;
  height: 2px;
  margin: 16px auto;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rojo), #ff4d5a);
  content: "";
  transform: scaleX(0.5);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dos renglones reservados: así la descripción arranca a la misma altura en
   las cuatro fichas aunque un momento ocupe una línea y otro dos. */
.momento-pilar {
  display: grid;
  min-height: 2.8em;
  margin: 0 0 14px;
  color: #fff;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
  place-items: center;
  text-wrap: balance;
}

.detalle-pilar {
  margin: 0;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.65;
  text-wrap: pretty;
}

/* La luz del fondo (.luz-pilar) pasa por detrás del texto: una sombra oscura
   y difusa lo despega sin que se note como contorno. */
.momento-pilar,
.detalle-pilar {
  text-shadow: 0 1px 3px rgb(3 8 22 / 90%), 0 1px 12px rgb(3 8 22 / 85%);
}

/* El texto aparece despacio, en 4 s, cuando entra su ficha. Hereda el
   retraso del escalonado que revelar.js pone en la ficha. */
.pilar.revelar:not(.visible) .momento-pilar,
.pilar.revelar:not(.visible) .detalle-pilar {
  opacity: 0;
}

.pilar.visible .momento-pilar,
.pilar.visible .detalle-pilar {
  animation: texto-pilar 4s ease backwards;
  animation-delay: inherit;
}

@keyframes texto-pilar {
  from {
    opacity: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .pilar:hover::after,
  .pilar:hover .luz-pilar {
    opacity: 1;
  }

  .pilar:hover .icono-pilar {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 20%),
      0 0 34px rgb(225 29 42 / 38%);
  }

  .pilar:hover .icono-pilar::after {
    transform: rotate(360deg);
  }

  .pilar:hover h3::before {
    color: #ff4d5a;
  }

  .pilar:hover h3::after {
    transform: scaleX(1);
  }
}

.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;
}

/* Sombra pegada a las letras: el velo de .cuerpo-continuidad::before no
   basta donde las luces de la ciudad caen justo detrás del titular. */
.falla-continuidad,
.respuesta-continuidad {
  text-shadow: 0 2px 6px rgb(2 6 16 / 90%), 0 4px 24px rgb(2 6 16 / 85%);
}

/* El rojo es un degradado recortado al texto (background-clip: text) y un
   text-shadow se pintaría encima de las letras, ensuciándolas: la sombra va
   con drop-shadow, que se aplica al resultado ya pintado. */
.respuesta-continuidad span {
  filter: drop-shadow(0 2px 4px rgb(2 6 16 / 90%)) drop-shadow(0 0 14px rgb(225 29 42 / 40%));
  text-shadow: none;
}

.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;
}

.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: 24px;
  /* 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;
}

/* Todo el módulo va en una columna: titular, pestañas, el panel de la
   solución y debajo la franja del compromiso, cada pieza a todo el ancho. */
.servicios .contenedor {
  position: relative;
  display: grid;
  row-gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

/* Sin esto la columna 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;
  margin-bottom: 4px;
  gap: 12px;
}

/* Las pestañas encima y el panel de la solución debajo. Las pestañas viven
   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;
  row-gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

/* Va en un renglón en pantallas de portátil: con dos el panel de la solución
   quedaba fuera de la pantalla a 1366 x 768. */
.servicios h2 {
  max-width: none;
  margin: 4px 0 0;
  font-size: clamp(2.4rem, 3.9vw, 3.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Conectar va en el celeste del módulo (el de las tarjetas de conectividad),
   no en el índigo de marca: al tamaño del titular el índigo se va a violeta.
   Proteger lleva debajo un filete rojo, la otra mitad del negocio. */
.palabra-protege {
  position: relative;
  display: inline-block;
}

.palabra-protege::after {
  position: absolute;
  bottom: -0.08em;
  left: 0.04em;
  width: 1.15em;
  height: 4px;
  border-radius: 2px;
  background: var(--rojo);
  content: "";
}

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

.introduccion {
  max-width: 900px;
  margin: 0;
  color: #c9d1dd;
  font-size: 1.02rem;
  line-height: 1.6;
}

.ecosistema {

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

/* ===== Pestañas del carrusel ===== */
/* Seis pestañas iguales en fila, sólo con el verbo. Son el mismo botón de
   cristal oscuro que "Explorar solución" (.enlace-nodo), con la luz de
   js/boton-especular.js en el borde; la activa se tiñe del acento de su
   solución. */
.rail-ecosistema {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.rail-ecosistema button {
  --acento-rail: var(--azul);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border: 0;
  border-radius: 999px;
  background: rgb(4 8 16 / 82%);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 70%);
  color: #f5f5f5;
  cursor: pointer;
  isolation: isolate;
  transition: background 200ms ease, box-shadow 200ms ease, transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rail-ecosistema button:not(.con-especular) {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 22%),
    0 10px 24px -14px rgb(0 0 0 / 70%);
}

.rail-ecosistema button:active {
  transform: scale(0.97);
}

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

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

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

/* El número sobra en la pestaña: el orden ya se lee de izquierda a derecha. */
.numero-rail {
  display: none;
}

.verbo-rail {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rail-ecosistema button:hover {
  background: rgb(10 18 32 / 88%);
}

.rail-ecosistema button.activo {
  background: color-mix(in srgb, var(--acento-rail) 22%, rgb(4 8 16 / 88%));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--acento-rail) 70%, transparent),
    0 0 24px -6px color-mix(in srgb, var(--acento-rail) 60%, transparent);
}

/* Barra de avance: es el reloj del carrusel (ver animaciones.css). Va abajo de
   la pestaña activa y al terminar su animación se pasa a la siguiente
   tarjeta. Se mete 22px por lado para no asomar por las puntas redondas. */
.rail-ecosistema button::before {
  position: absolute;
  bottom: 4px;
  left: 22px;
  width: calc(100% - 44px);
  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: 12px;
}

.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: var(--azul);
  /* Cada tarjeta pone su propia foto en --fondo-nodo (más abajo). Va en la
     mitad derecha y se funde hacia la izquierda, donde se apoya el texto. */
  --fondo-nodo: none;
  position: relative;
  display: flex;
  min-width: 0;
  flex: 0 0 100%;
  flex-direction: column;
  padding: 20px 34px 22px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 12px;
  background: linear-gradient(145deg, rgb(12 19 33 / 96%), rgb(6 10 20 / 98%));
  color: #fff;
  isolation: isolate;
}

.nodo::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  background: var(--fondo-nodo) center / cover no-repeat;
  content: "";
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
  mask-image: linear-gradient(90deg, transparent, #000 38%);
}


.nodo:nth-child(3n + 2) {
  --acento-nodo: var(--cian);
}

.nodo:nth-child(3n) {
  --acento-nodo: var(--rojo);
}

/* 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-panel.webp");
}

/* Estas fotos ya traen su propio fundido a oscuro por la izquierda: cubren
   el panel entero, ancladas a la derecha, sin la máscara de las demás. */
.nodo:nth-child(1)::before,
.nodo:nth-child(2)::before,
.nodo:nth-child(3)::before,
.nodo:nth-child(4)::before,
.nodo:nth-child(5)::before,
.nodo:nth-child(6)::before {
  width: 100%;
  background-position: right center;
  -webkit-mask-image: none;
  mask-image: none;
}

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

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

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

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

.nodo:nth-child(6) {
  --fondo-nodo: url("../recursos/fondos-nodos/infraestructura-critica-panel.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: 46%;
  margin-top: 10px;
  margin-bottom: 12px;
}

.cuerpo-nodo h3 {
  margin: 0;
  font-size: clamp(1.6rem, 2.3vw, 2.05rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* 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: 10px;
  background: var(--rojo);
  content: "";
}

.promesa-nodo {
  margin: 12px 0 0;
  color: #dfe5ee;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.35;
}

.detalle-nodo {
  margin: 6px 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 {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  padding: 14px 24px;
  border-radius: 999px;
  /* Fondo oscuro casi opaco: sobre la foto del panel un cristal claro no se
     distinguía de las luces de la ciudad. */
  background: rgb(4 8 16 / 82%);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 70%);
  color: #f5f5f5;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  isolation: isolate;
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* El hueco con las capacidades lo daba el padding del enlace; ahora que es un
   botón con relleno propio, lo pone la lista. */
.capacidades-nodo {
  margin-bottom: 16px;
}

.enlace-nodo:active {
  transform: scale(0.97);
}


/* Botón de cristal: js/boton-especular.js pinta en .luz-especular la luz que
   recorre el borde y sigue al cursor. Sin el script queda un borde fino. */
.enlace-nodo:not(.con-especular) {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 22%),
    0 10px 24px -14px rgb(0 0 0 / 45%);
}

.luz-especular {
  position: absolute;
  z-index: -1;
  display: block;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  inset: -24px;
  filter: drop-shadow(0 0 3px rgb(255 255 255 / 55%));
  pointer-events: none;
}



/* Las fichas ocupan la misma columna que el texto, de dos en fondo. */
.capacidades-nodo {
  max-width: 44%;
}

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


/* Cada ficha es un rectángulo de cristal con la luz de js/boton-especular.js
   en el borde, de dos en fondo y con el nombre en tipo normal. Un nombre
   largo parte en dos líneas y su fila crece con él. En el móvil van una
   debajo de otra. */
.capacidades-nodo ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
}

@media (min-width: 601px) {
  .capacidades-nodo ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.capacidades-nodo li {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgb(4 8 16 / 22%);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 70%);
  color: #eef1f5;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.25;
  isolation: isolate;
}

.capacidades-nodo li:not(.con-especular) {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 22%),
    0 10px 24px -14px rgb(0 0 0 / 70%);
}

.capacidades-nodo li {
  position: relative;
  transition: background 220ms ease, transform 220ms ease;
}

.enlace-capacidad {
  position: absolute;
  border-radius: inherit;
  inset: 0;
}

/* El aviso sólo tiene sentido con ratón: en pantallas táctiles no hay estado
   previo al toque donde mostrarlo. */
.aviso-capacidad {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .capacidad {
    cursor: pointer;
  }

  .capacidad:hover,
  .capacidad:has(.enlace-capacidad:focus-visible) {
    background: rgb(10 18 32 / 55%);
    transform: translateY(-1px);
  }

  .aviso-capacidad {
    position: absolute;
    z-index: 3;
    bottom: calc(100% + 9px);
    left: 50%;
    display: block;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--acento-nodo) 45%, transparent);
    border-radius: 4px;
    background: #050a14;
    box-shadow: 0 8px 20px rgb(0 0 0 / 45%);
    color: #e3e8f0;
    font-family: var(--mono);
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 5px);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
  }

  /* Punta del bocadillo, apoyada en el borde superior de la ficha. */
  .aviso-capacidad::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 1px solid color-mix(in srgb, var(--acento-nodo) 45%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--acento-nodo) 45%, transparent);
    background: #050a14;
    transform: translateX(-50%) rotate(45deg);
  }

  .capacidad:hover .aviso-capacidad,
  .capacidad:has(.enlace-capacidad:focus-visible) .aviso-capacidad {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .capacidades-nodo li,
  .aviso-capacidad {
    transition: none;
  }
}

/* Franja del compromiso, debajo del panel: arriba el rótulo, el titular y el
   botón; abajo la cifra y lo que incluye, separados por filetes. Los dos
   bloques del HTML (promesa y detalle) se disuelven en la rejilla con
   display: contents para colocar cada pieza en su casilla. */
.cierre-ecosistema {
  position: relative;
  display: grid;
  margin-top: 0;
  padding: 26px 30px 28px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 12px;
  column-gap: 28px;
  grid-template-columns: minmax(240px, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas:
    "enc   tit   tit   boton"
    "enc   txt   txt   boton"
    "sello lista lista lista";
  background:
    radial-gradient(circle at 0% 100%, rgb(225 29 42 / 18%), transparent 42%),
    rgb(6 10 20 / 82%);
}

.cierre-ecosistema::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--rojo);
  content: "";
}

.promesa-cierre,
.detalle-cierre {
  display: contents;
}

.encabezado-cierre {
  display: flex;
  align-items: center;
  align-self: start;
  gap: 14px;
  grid-area: enc;
}

/* 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 {
  order: 1;
  margin: 0;
  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: 0;
  font-size: clamp(1.15rem, 1.55vw, 1.32rem);
  line-height: 1.22;
  grid-area: tit;
}

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

/* La cifra roja es el dato duro de la franja, con la unidad apilada a su
   lado. */
.sello-cierre {
  display: flex;
  align-items: center;
  margin: 22px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 12%);
  gap: 16px;
  grid-area: sello;
}

.cifra-cierre {
  flex: none;
  color: var(--rojo);
  font-family: var(--titulos);
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  /* contador.js la hace subir de 1 a 180. Con cifras proporcionales y sin
     ancho reservado, cada número medía distinto y empujaba la unidad de al
     lado: "posterior a la implementación" brincaba entre uno y dos renglones
     y la tarjeta entera daba saltos. Se reserva el ancho de las tres cifras
     del valor final. */
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
}

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

.unidad-fuerte {
  color: #fff;
  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 p {
  margin: 8px 0 0;
  color: #aeb9ca;
  font-size: 0.9rem;
  line-height: 1.6;
  grid-area: txt;
}

/* Las tres cosas que incluye, en columnas separadas por un filete. */
.incluye-cierre {
  display: grid;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgb(255 255 255 / 12%);
  grid-area: lista;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.incluye-cierre li {
  display: flex;
  align-items: center;
  padding: 4px 22px;
  border-left: 1px solid rgb(255 255 255 / 12%);
  gap: 14px;
  color: #e3e8f0;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.35;
}

.ico-incluye {
  display: grid;
  flex: none;
  place-items: center;
  color: var(--rojo);
}

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

.detalle-cierre .boton {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  justify-self: end;
  padding-block: 12px;
  gap: 10px;
  grid-area: boton;
  white-space: nowrap;
}

.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;
}

/* Variante de .etiqueta (van juntas en el HTML). */
.etiqueta-roja {
  color: var(--rojo);
  font-weight: 600;
  letter-spacing: 0.2em;
}

.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 200ms ease, transform 200ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .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 200ms ease, background 200ms ease, transform 200ms var(--ease-out);
}

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

.asesoria-acciones .boton-agenda:active,
.asesoria-acciones .boton-contorno:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

.asesoria-acciones .boton-contorno:focus-visible {
  outline: 2px solid #ff6b76;
  outline-offset: 3px;
}

/* 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 ===== */
/* El fondo es la misma red de nodos de las landings (js/red-nodos.js). La
   sección es muy alta, así que el lienzo no la cubre entera: mide una pantalla
   y se queda fijo mientras las tarjetas pasan por encima. clip y no hidden,
   porque hidden volvería la sección contenedor de desplazamiento y el sticky
   dejaría de pegarse a la ventana. */
.casos-exito {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-top: 155px;
  background: linear-gradient(180deg, #01040a 0%, #051026 16%, #06142f 50%, #051026 84%, #01040a 100%);
  isolation: isolate;
}

.fondo-casos {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.vista-casos {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  background:
    radial-gradient(ellipse 46% 42% at 12% 30%, rgb(59 130 246 / 13%), transparent 70%),
    radial-gradient(ellipse 42% 44% at 90% 78%, rgb(25 182 210 / 9%), transparent 70%);
}

/* Se apaga hacia arriba y abajo para no cortarse en seco contra el borde de
   la ventana, y un poco al centro, donde va la línea de tiempo. */
.red-casos {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  opacity: 0.8;
}

.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: "";
}

/* Fondo opaco a propósito: en el vuelo las tarjetas se apilan y el texto de
   la de atrás no debe transparentarse. El filo azul de arriba y el halo de la
   esquina marcan la luz desde la izquierda, igual que el fondo de la sección. */
.caso-exito {
  position: relative;
  width: calc(50% - 52px);
  padding: 40px 40px 32px;
  border: 1px solid rgb(148 180 255 / 11%);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgb(59 130 246 / 90%), rgb(59 130 246 / 0%) 55%) top left / 100% 1px no-repeat,
    radial-gradient(90% 70% at 0% 0%, rgb(59 130 246 / 14%), transparent 62%),
    linear-gradient(160deg, #0f1d3a, #071024);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    0 30px 70px -20px rgb(1 6 20 / 85%);
  transition: border-color 260ms ease, box-shadow 260ms ease;
}

.caso-exito:nth-child(even) {
  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 #06142f;
  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;
}

/* Número en contorno: se lee sin competir con el título. */
.numero-caso {
  position: absolute;
  top: 22px;
  right: 30px;
  color: transparent;
  font-family: var(--titulos);
  font-size: 4.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  -webkit-text-stroke: 1px rgb(148 180 255 / 22%);
  transition: -webkit-text-stroke-color 260ms ease;
}

.ubicacion-caso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--azul);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ubicacion-caso::before {
  width: 18px;
  height: 1px;
  background: currentColor;
  content: "";
}

.caso-exito h3 {
  max-width: 430px;
  margin: 0 0 18px;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

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

/* Pie de la tarjeta: lista sobria separada por un filo, sin cápsulas. */
.caso-exito ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 28px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgb(148 180 255 / 9%);
  list-style: none;
}

.caso-exito li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #c9d6ea;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

.caso-exito li::before {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--azul);
  box-shadow: 0 0 8px rgb(59 130 246 / 70%);
  content: "";
}

.caso-exito:hover {
  border-color: rgb(59 130 246 / 42%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 30px 70px -20px rgb(1 6 20 / 85%),
    0 0 40px rgb(59 130 246 / 12%);
}

.caso-exito:hover .numero-caso {
  -webkit-text-stroke-color: rgb(59 130 246 / 55%);
}

/* ===== Casos en profundidad (js/vuelo-casos.js) =====
   La línea de tiempo pasa a ser un tramo alto: la escena fija más 60vh de
   scroll por cada tarjeta que hay que alcanzar. Las tarjetas dejan la columna
   y se colocan todas arriba de la escena, bajo la barra; su sitio en la
   profundidad lo pone el script con transform. El alto de la escena y el tope
   de las tarjetas los mide el script (--alto-escena, --tope-casos). */
.casos-exito.en-vuelo {
  padding-bottom: 40px;
}

/* La escena reserva arriba el hueco de la barra de navegación, que sólo hace
   falta cuando ya está fija. Antes de eso ese hueco se sumaba al margen del
   encabezado y dejaba las tarjetas muy lejos del título: la línea sube lo que
   mide la reserva menos 84px; descontado el vaivén vertical de la primera
   tarjeta, quedan unos 36px de aire. */
.casos-exito.en-vuelo .casos-encabezado {
  margin-bottom: 0;
}

.casos-exito.en-vuelo .linea-casos {
  --alto-escena: 600px;
  --tope-casos: 116px;
  display: block;
  margin-top: calc(84px - var(--tope-casos));
  height: calc(min(100vh, var(--alto-escena)) + var(--pasos-casos, 4) * 60vh);
}

.casos-exito.en-vuelo .linea-casos::before,
.casos-exito.en-vuelo .caso-exito::before,
.casos-exito.en-vuelo .caso-exito::after {
  content: none;
}

.escena-casos {
  position: sticky;
  top: 0;
  height: min(100vh, var(--alto-escena));
}

/* Ventana ancha pero vertical ("modo computadora" del móvil): 60vh por
   tarjeta eran más de 1200px de scroll vacío entre una y otra. El tramo pasa
   a medirse con el ancho, como las portadas. */
@media (min-width: 901px) and (max-aspect-ratio: 1 / 1) {
  .casos-exito.en-vuelo .linea-casos {
    height: calc(min(100vh, var(--alto-escena)) + var(--pasos-casos, 4) * min(60vh, 40vw));
  }
}

.casos-exito.en-vuelo .caso-exito {
  position: absolute;
  top: var(--tope-casos);
  left: 50%;
  width: min(540px, 80%);
  will-change: transform, opacity;
}

.contador-casos {
  position: absolute;
  bottom: 18px;
  left: 50%;
  margin: 0;
  color: #7f93b8;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  transform: translateX(-50%);
}

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

/* Por debajo de este ancho la franja del compromiso no cabe en cuatro
   columnas: el titular y el texto bajan a su propia fila. */
@media (max-width: 1180px) {
  .cierre-ecosistema {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "enc   enc   boton"
      "tit   tit   tit"
      "txt   txt   txt"
      "sello sello sello"
      "lista lista lista";
  }

  .cierre-ecosistema h3 {
    margin-top: 16px;
  }

  .cuerpo-nodo,
  .capacidades-nodo {
    max-width: 60%;
  }
}

@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: 54px 24px 34px;
  }

  .momento-pilar {
    min-height: 0;
  }
}

@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,
  .dos-columnas {
    grid-template-columns: 1fr;
  }

  .encabezado-servicios {
    gap: 14px;
  }

  /* La foto pasa arriba, a todo el ancho, y se funde hacia el texto que
     queda debajo: así el texto y las fichas toman el ancho entero. */
  .nodo {
    padding: 170px 26px 30px;
  }

  .nodo::before,
  .nodo:nth-child(1)::before,
  .nodo:nth-child(2)::before,
  .nodo:nth-child(3)::before,
  .nodo:nth-child(4)::before,
  .nodo:nth-child(5)::before,
  .nodo:nth-child(6)::before {
    bottom: auto;
    width: 100%;
    height: 220px;
    -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent);
    mask-image: linear-gradient(180deg, #000 35%, transparent);
  }

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

  .ecosistema {
    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. */
  /* Las pestañas se convierten en una tira que se arrastra de lado. El aire
     de arriba y abajo deja ver la luz del borde, que la tira recorta. */
  .rail-ecosistema {
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 6px;
    gap: 8px;
    grid-template-columns: none;
    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: 13px 18px;
    scroll-snap-align: start;
  }

  /* La franja se apila: cada pieza en su fila y el botón al final. */
  .cierre-ecosistema {
    padding: 24px 22px 26px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "enc"
      "tit"
      "txt"
      "sello"
      "lista"
      "boton";
  }

  .incluye-cierre {
    gap: 14px;
    grid-template-columns: 1fr;
  }

  .incluye-cierre li {
    padding: 0;
    border-left: 0;
  }

  .detalle-cierre .boton {
    justify-self: stretch;
    margin-top: 24px;
    white-space: normal;
  }

  .asesoria-panel-fases {
    grid-template-columns: 1fr;
    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) {
    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: 160px 20px 28px;
  }



  .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 26px;
  }

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

  /* Deja libre el hueco del número para que la ubicación no lo pise. */
  .ubicacion-caso {
    padding-right: 72px;
  }
}