/* Droppett - sitio estático. Versión 2026-10-05 (W16).

   La dirección sale del logo, no de una plantilla: el logotipo de Droppett es geométrico,
   monolineal y ultraligero. Por eso Jost (geométrica, trazo uniforme) en pesos livianos para
   los titulares, y una página tranquila en negro, blanco y grises del brandbook.

   Reglas (las mismas del CRM, skill diseno-ui):
   - Neutros cálidos (piedra), nunca grises azulados.
   - El acento es TINTA: el botón principal es casi negro. Sin color de adorno.
   - Separación por borde de 1px, no por sombra. Radio corto (6px).
   - Sin etiquetas en mayúsculas sobre cada título, sin flechas ni puntos medios de relleno.
   - Movimiento solo como respuesta del usuario (hover) y respetando prefers-reduced-motion. */

@font-face {
  font-family: "Jost";
  src: url("/fuentes/jost-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  src: url("/fuentes/jost-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --papel: #fafaf9;
  --blanco: #ffffff;
  --panel: #f5f5f4;
  --linea: #e7e5e4;
  --linea-fuerte: #d6d3d1;
  --texto: #1c1917;
  --suave: #6b6560;
  --tinta: #1c1917;
  --tinta-hover: #000000;
  --noche: #1c1917;
  --noche-texto: #d6d3d1;
  --radio: 6px;
  --ancho: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: "Jost", "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--texto); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0 0 16px; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 300; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 350; letter-spacing: -0.015em; }
h3 { font-size: 1.2rem; font-weight: 500; }
p { margin: 0 0 16px; text-wrap: pretty; }
strong { font-weight: 550; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 2px; }

.contenedor { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }

/* Botones */
.boton {
  display: inline-block; padding: 12px 22px; border-radius: var(--radio); font-weight: 500;
  font-size: 1rem; text-decoration: none; letter-spacing: .01em;
  background: var(--tinta); color: var(--blanco); border: 1px solid var(--tinta);
  transition: background-color .2s, border-color .2s, color .2s;
}
.boton:hover { background: var(--tinta-hover); border-color: var(--tinta-hover); }
.boton.claro { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); }
.boton.claro:hover { background: var(--panel); border-color: var(--panel); }
.boton.grande { padding: 15px 28px; font-size: 1.05rem; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Encabezado: un solo botón de agendar, a la derecha */
.encabezado { position: sticky; top: 0; z-index: 10; background: var(--papel); border-bottom: 1px solid var(--linea); }
.encabezado .contenedor { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; }
.logo img { height: 38px; width: auto; }
.menu { display: flex; align-items: center; gap: 30px; }
.menu a { color: var(--suave); text-decoration: none; font-weight: 450; font-size: 1rem; transition: color .2s; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--texto); }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.menu .boton { color: var(--blanco); padding: 10px 18px; }
#menu-movil, .icono-menu { display: none; }

@media (max-width: 960px) {
  .icono-menu {
    display: block; cursor: pointer; width: 44px; height: 44px; border-radius: var(--radio);
    border: 1px solid var(--linea); position: relative;
  }
  .icono-menu span, .icono-menu span::before, .icono-menu span::after {
    position: absolute; left: 11px; width: 20px; height: 1.5px; background: var(--texto); content: "";
  }
  .icono-menu span { top: 21px; }
  .icono-menu span::before { top: -6px; left: 0; }
  .icono-menu span::after { top: 6px; left: 0; }
  .menu {
    display: none; position: absolute; top: 74px; left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--papel); border-bottom: 1px solid var(--linea); padding: 8px 16px 16px;
  }
  .menu a { padding: 13px 4px; border-bottom: 1px solid var(--linea); color: var(--texto); }
  .menu .boton { margin-top: 12px; text-align: center; border-bottom: 0; }
  #menu-movil:checked ~ .menu { display: flex; }
}

/* Portada: foto a color bajo un velo oscuro, titular liviano como el logotipo */
.portada-foto {
  position: relative; color: var(--blanco); padding: 160px 0 140px;
  background: #1c1917; overflow: clip; isolation: isolate;
}
.portada-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,18,17,.94) 0%, rgba(20,18,17,.74) 52%, rgba(20,18,17,.2) 100%); }
.portada-foto .contenedor { position: relative; }
.portada-foto h1 { color: var(--blanco); max-width: 12em; }
.portada-foto p { color: #e7e5e4; font-size: 1.2rem; font-weight: 350; max-width: 33em; margin-bottom: 32px; }

/* Secciones */
.seccion { padding: 96px 0; }
.seccion.suave { background: var(--panel); }
.seccion.corta { padding: 48px 0 80px; }
.oscuro { background: var(--noche); color: var(--noche-texto); }
.oscuro h2, .oscuro h3, .oscuro strong { color: var(--blanco); }
.oscuro p { color: var(--noche-texto); }
.cabeza { max-width: 700px; margin-bottom: 52px; }
.cabeza.centro { margin-inline: auto; text-align: center; }
.cabeza p { color: var(--suave); font-size: 1.1rem; }
.oscuro .cabeza p { color: var(--noche-texto); }
.sutil { color: var(--suave); font-size: .95rem; margin-top: 28px; }
.marcas { display: block; font-size: .95rem; font-weight: 450; color: var(--suave); margin-bottom: 6px; }

/* Pilares: la tarjeta completa es el enlace; el hover cambia el material, no la altura */
.pilares { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
.pilares.tres { grid-template-columns: repeat(3, 1fr); }
.pilar {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; display: flex; flex-direction: column;
}
.pilar img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; transition: transform .5s ease; }
.pilar .cuerpo { padding: 28px 30px 30px; flex: 1; }
.pilar h2 { font-size: 1.9rem; margin-bottom: 10px; }
.pilares.tres h2 { font-size: 1.45rem; }
.pilar p { color: var(--suave); margin-bottom: 0; }
a.pilar { color: inherit; text-decoration: none; transition: border-color .2s; }
a.pilar:hover { border-color: var(--texto); }
a.pilar:hover img { transform: scale(1.03); }
.pilar .ver { display: inline-block; margin-top: 18px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* Impacto: lo que protegemos, sin nombres */
.impacto { display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); }
.impacto > div { border-top: 1px solid var(--texto); padding-top: 18px; }
.impacto h3 { font-weight: 500; }
.impacto p { color: var(--suave); margin: 0; }

/* Logos: todos normalizados al mismo lienzo (normalizar-logos.py) */
.logos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.logos figure, .fabricante figure {
  margin: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  aspect-ratio: 36 / 14; display: grid; place-items: center; overflow: hidden;
  transition: border-color .25s;
}
.logos img, .fabricante img {
  width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .72;
  transition: filter .35s ease, opacity .35s ease, transform .35s ease;
}
/* Hover de clientes y fabricantes: el logo recupera su color y crece un poco */
.logos figure:hover, .fabricante figure:hover { border-color: var(--linea-fuerte); }
.logos figure:hover img, .fabricante figure:hover img { filter: none; opacity: 1; transform: scale(1.06); }
.marca-texto { font-size: 1.15rem; font-weight: 500; text-align: center; line-height: 1.2; color: var(--suave); padding: 0 12px; transition: color .35s; }
figure:hover .marca-texto { color: var(--texto); }

.fabricantes { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.fabricante p { margin: 14px 0 0; font-size: .97rem; color: var(--suave); line-height: 1.45; }
.oscuro .fabricante figure { border-color: transparent; }
.oscuro .fabricante img { opacity: .85; }
.fabricantes.discretos { grid-template-columns: repeat(4, 1fr); max-width: 880px; }
.nota { font-size: .88rem; margin-top: 36px; }
.titulo-menor { font-size: 1.3rem; font-weight: 450; margin-bottom: 24px; }

/* Llamado a la acción al final de cada página */
.llamado { border-radius: var(--radio); padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.llamado h2 { margin-bottom: 8px; }
.llamado p { margin: 0; }

/* Página interior */
.interior { padding: 80px 0 64px; border-bottom: 1px solid var(--linea); }
.interior.compacto { padding: 64px 0 40px; }
.interior h1 { max-width: 17em; }
.interior p { color: var(--suave); font-size: 1.15rem; max-width: 42em; margin: 0; }

/* Bloque de dos columnas */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.dos .imagen { border-radius: var(--radio); overflow: hidden; }
.panel-blanco { background: var(--blanco); border: 1px solid var(--linea); padding: 24px; }
.lista-check { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.lista-check.una { grid-template-columns: 1fr; }
.lista-check li { padding-left: 30px; position: relative; }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--texto);
}
.lista-check li::after {
  content: ""; position: absolute; left: 6px; top: 10px; width: 4px; height: 8px;
  border: solid var(--texto); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}

/* Tarjetas cortas (Nosotros) */
.indicadores { display: grid; gap: 32px; grid-template-columns: repeat(4, 1fr); }
.indicadores > div { border-top: 1px solid var(--texto); padding-top: 18px; }
.indicadores p { color: var(--suave); margin: 0; }

/* Agenda */
.agenda { width: 100%; height: 980px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.agenda-correo { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 48px; max-width: 760px; }
.agenda-correo p { color: var(--suave); }
.contacto-directo { margin-top: 28px; color: var(--suave); }

/* Texto legal */
.texto-legal { max-width: 44em; }
.texto-legal h2 { font-size: 1.4rem; font-weight: 450; margin-top: 40px; }

/* Pie */
.pie { background: linear-gradient(165deg, #141211 0%, #1c1917 45%, #34302d 100%); color: var(--noche-texto); padding: 64px 0 32px; font-size: .97rem; }
.pie .contenedor { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.pie img { height: 34px; width: auto; margin-bottom: 14px; }
.pie h3 { color: var(--blanco); font-size: 1rem; font-weight: 500; }
.pie a { color: #e7e5e4; text-decoration: none; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 8px; }
.pie .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; border-top: 1px solid #44403c; padding-top: 22px; margin: 8px 0 0; font-size: .88rem; }

@media (max-width: 960px) {
  .dos, .llamado, .pie .contenedor, .pilares, .pilares.tres { grid-template-columns: 1fr; }
  .impacto { grid-template-columns: 1fr; gap: 24px; }
  .indicadores, .fabricantes, .fabricantes.discretos { grid-template-columns: 1fr 1fr; }
  .seccion { padding: 68px 0; }
  .llamado { padding: 36px 26px; }
  .portada-foto { padding: 96px 0 80px; }
  .portada-fondo { background-position: 70% center; }
  .interior { padding: 56px 0 44px; }
  .dos { gap: 32px; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .indicadores, .lista-check { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .pilar .cuerpo { padding: 24px; }
  .agenda-correo { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  a.pilar:hover img, .logos figure:hover img, .fabricante figure:hover img { transform: none; }
}

/* Formulario de reunión: corto, en dos columnas, todo obligatorio */
.formulario-bloque { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.formulario { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 40px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; margin-bottom: 28px; }
.campos label { display: flex; flex-direction: column; gap: 7px; font-size: .95rem; font-weight: 500; }
.campos .ancho { grid-column: 1 / -1; }
.campos input, .campos textarea {
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--texto); background: var(--papel);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio); padding: 12px 14px; width: 100%;
  transition: border-color .2s, background-color .2s;
}
.campos textarea { resize: vertical; min-height: 128px; }
.campos input::placeholder, .campos textarea::placeholder { color: #a8a29e; }
.campos input:hover, .campos textarea:hover { border-color: var(--suave); }
.campos input:focus-visible, .campos textarea:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; background: var(--blanco); }
.formulario button { cursor: pointer; font-family: inherit; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.aviso-vista { margin: 16px 0 0; font-size: .9rem; color: var(--suave); }
.contacto-directo h2 { font-size: 1.3rem; font-weight: 450; }
.contacto-directo p { margin: 0 0 6px; }
.volver { margin-top: 28px; }
@media (max-width: 960px) {
  .formulario-bloque { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .formulario { padding: 24px 20px; }
  .campos { grid-template-columns: 1fr; }
}
/* Logos cuyas reglas de marca prohíben cambiarles el color (Cisco) */
.fabricante img.sin-filtro { filter: none; opacity: 1; }

/* Cuadrículas de logos más grandes, centradas y simétricas: 12 clientes = 3 filas de 4
   (computadora), 4 de 3 (tableta), 6 de 2 (celular); complementarios = 3 en una fila centrada. */
.logos { grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1080px; margin-inline: auto; }
.logos figure { aspect-ratio: 36 / 15; }
.fabricantes.discretos { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-inline: auto; gap: 24px; }
.fabricantes.discretos figure { aspect-ratio: 36 / 15; }
.fabricantes.discretos p { text-align: center; }
.titulo-menor { text-align: center; }
@media (max-width: 960px) {
  .logos { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .fabricantes.discretos { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
  .logos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .fabricantes.discretos { grid-template-columns: 1fr; max-width: 320px; }
}

/* Ola de color en las marcas (sin JavaScript). Ritmo amable: cada segundo se encienden 3 clientes a la
   vez, repartidos por la cuadrícula (uno por fila), y el paso gris > color > gris dura 1 s. Las 12 empresas
   se encienden cada 4 s. Fabricantes: uno por segundo. Si cambia la cantidad de clientes, revisar los grupos.
   El hover usa !important para ganarle a la animación sin detenerla: así la ola no se desordena. */
@keyframes color-4s { 0%, 25%, 100% { filter: grayscale(1); opacity: var(--op-gris, .72); } 12.5% { filter: grayscale(0); opacity: 1; } }
@keyframes color-3s { 0%, 33.3%, 100% { filter: grayscale(1); opacity: var(--op-gris, .72); } 16.6% { filter: grayscale(0); opacity: 1; } }
.logos figure img { animation: color-4s 4s ease-in-out infinite; }
/* Grupos de 3 (posición en la cuadrícula de 4 x 3): seg. 0: 1, 6, 11 · seg. 1: 3, 8, 10 · seg. 2: 2, 5, 12 · seg. 3: 4, 7, 9 */
.logos figure:is(:nth-child(3), :nth-child(8), :nth-child(10)) img { animation-delay: 1s; }
.logos figure:is(:nth-child(2), :nth-child(5), :nth-child(12)) img { animation-delay: 2s; }
.logos figure:is(:nth-child(4), :nth-child(7), :nth-child(9)) img { animation-delay: 3s; }
.fabricantes.tres .fabricante img { animation: color-3s 3s ease-in-out infinite; }
.fabricantes.discretos .fabricante img { animation: color-4s 4s ease-in-out infinite; }
.fabricantes .fabricante:nth-child(2) img { animation-delay: 1s; }
.fabricantes .fabricante:nth-child(3) img { animation-delay: 2s; }
.fabricantes .fabricante:nth-child(4) img { animation-delay: 3s; }
.oscuro .fabricante img { --op-gris: .85; }
.fabricante img.sin-filtro { animation: none; }
.logos figure:hover img, .fabricante figure:hover img { filter: none !important; opacity: 1 !important; transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .logos figure img, .fabricante img { animation: none; }
}

/* Fecha y hora preferidas: mismos campos nativos del navegador, con el estilo del formulario */
.campos select {
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--texto); background: var(--papel);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio); padding: 12px 14px; width: 100%;
  transition: border-color .2s, background-color .2s; cursor: pointer;
}
.campos select:hover, .campos input[type="date"]:hover { border-color: var(--suave); }
.campos select:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; background: var(--blanco); }
.campos input[type="date"] { cursor: pointer; min-height: 48px; }
.campos select:invalid { color: #a8a29e; }
.campos .ayuda { font-size: .85rem; font-weight: 400; color: var(--suave); margin-top: -2px; }

/* Vías de contacto directo junto al formulario */
.vias { margin: 0; }
.vias dt { font-size: .85rem; color: var(--suave); margin-top: 16px; }
.vias dt:first-child { margin-top: 0; }
.vias dd { margin: 2px 0 0; font-size: 1.02rem; }

/* Redes sociales en el pie */
.pie .redes { display: flex; gap: 22px; margin-top: 18px; }
.pie .redes a { display: inline-flex; align-items: center; gap: 8px; color: #e7e5e4; }
.pie .redes svg { flex: none; }
.pie .redes a:hover { color: var(--blanco); }

/* ---------- W18: fabricantes principales (3) y complementarios (4) */
.fabricantes.tres { grid-template-columns: repeat(3, 1fr); max-width: 900px; }
.fabricantes.discretos { grid-template-columns: repeat(4, 1fr); max-width: 1040px; }

/* Etiqueta de marca en páginas interiores */
.interior .marcas { margin-bottom: 14px; }

/* Pasos de la metodología (es una secuencia: lleva número) */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; counter-reset: paso; }
.pasos li { counter-increment: paso; border-top: 1px solid var(--texto); padding-top: 18px; }
.pasos li::before { content: counter(paso); display: block; font-size: 2rem; font-weight: 300; line-height: 1; margin-bottom: 12px; }
.pasos h3 { margin-bottom: 6px; }
.pasos p { color: var(--suave); font-size: .97rem; margin: 0; }

/* ---------- Selectores interactivos sin JavaScript (radio + etiqueta + panel) */
.radio-oculto { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.selector .puntos { display: grid; gap: 16px; position: relative; margin-bottom: 28px; }
.selector .punto { display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; text-align: center; position: relative; z-index: 1; }
.selector .bola {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: var(--blanco); border: 1px solid var(--linea-fuerte); color: var(--texto);
  transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.selector .punto:hover .bola { border-color: var(--texto); transform: scale(1.05); }
.selector .rotulo { font-weight: 500; font-size: 1rem; line-height: 1.25; }
.selector .paneles .panel { display: none; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 30px 32px; animation: aparecer .3s ease; }
.selector .panel h3 { font-size: 1.35rem; font-weight: 450; }
.selector .panel p { color: var(--suave); margin-bottom: 10px; max-width: 60em; }
.selector .panel .solucion { color: var(--texto); margin: 14px 0 0; }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Ciclo de vida del dato y Descubrir/Proteger/Controlar: bolitas unidas por una línea */
.selector.ciclo .puntos { grid-template-columns: repeat(4, 1fr); }
.selector.dpc .puntos { grid-template-columns: repeat(3, 1fr); max-width: 760px; margin-inline: auto; }
.selector.ciclo .puntos::before, .selector.dpc .puntos::before {
  content: ""; position: absolute; top: 38px; left: 12%; right: 12%; height: 1px; background: var(--linea-fuerte); z-index: 0;
}
.selector.dpc .puntos::before { left: 17%; right: 17%; }

/* Escalera de madurez: barras que suben */
.selector.escalera .puntos { grid-template-columns: repeat(5, 1fr); align-items: end; gap: 12px; }
.selector.escalera .bola { width: 100%; border-radius: var(--radio); font-size: 1.6rem; font-weight: 300; }
.selector.escalera .punto:nth-child(1) .bola { height: 56px; }
.selector.escalera .punto:nth-child(2) .bola { height: 82px; }
.selector.escalera .punto:nth-child(3) .bola { height: 108px; }
.selector.escalera .punto:nth-child(4) .bola { height: 134px; }
.selector.escalera .punto:nth-child(5) .bola { height: 160px; }
.selector.escalera .punto:hover .bola { transform: none; }

/* Marco del recorrido del dato: aplicación arriba, identidad abajo */
.marco-datos { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--panel); }
.marco-datos .banda { margin: 0; padding: 14px 24px; background: var(--noche); color: var(--noche-texto); font-size: .95rem; }
.marco-datos .selector { padding: 36px 32px 32px; }

/* Cifras, casos, integraciones e historia */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 56px; }
.cifras div { border-top: 1px solid #57534e; padding-top: 16px; }
.cifra { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; color: var(--blanco); }
.cifras span { color: var(--noche-texto); }
.casos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.casos div { background: rgba(255,255,255,.05); border: 1px solid #44403c; border-radius: var(--radio); padding: 24px; }
.casos .cifra { font-size: 2rem; margin-bottom: 8px; }
.casos p { font-size: .97rem; margin-bottom: 14px; }
.casos span { font-size: .88rem; color: #a8a29e; }
.integraciones { margin-top: 48px; }
.integraciones h3 { font-weight: 450; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips span { border: 1px solid var(--linea-fuerte); border-radius: var(--radio); padding: 6px 14px; font-size: .95rem; }
.historia { list-style: none; padding: 0; margin: 0; display: grid; gap: 36px; max-width: 900px; }
.historia li { display: grid; grid-template-columns: 170px 1fr; gap: 28px; border-top: 1px solid var(--linea); padding-top: 24px; }
.historia .anio { font-size: 1.6rem; font-weight: 300; line-height: 1.2; }
.historia p { color: var(--suave); margin: 0; }

@media (max-width: 960px) {
  .pasos { grid-template-columns: 1fr 1fr; }
  .cifras, .casos { grid-template-columns: 1fr 1fr; }
  .fabricantes.tres { grid-template-columns: repeat(3, 1fr); }
  .fabricantes.discretos { grid-template-columns: 1fr 1fr; }
  .selector.ciclo .puntos { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .selector.ciclo .puntos::before { display: none; }
}
@media (max-width: 600px) {
  .pasos, .cifras, .casos { grid-template-columns: 1fr; }
  .fabricantes.tres { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
  .fabricantes.discretos { grid-template-columns: 1fr 1fr; max-width: none; }
  .historia li { grid-template-columns: 1fr; gap: 8px; }
  .selector .bola { width: 64px; height: 64px; }
  .selector.escalera .puntos { gap: 6px; }
  .selector.escalera .rotulo { font-size: .78rem; }
  .selector .paneles .panel { padding: 22px 20px; }
  .marco-datos .selector { padding: 28px 16px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .selector .paneles .panel { animation: none; }
}

/* Selector "ciclo" (4 opciones) */
#ciclo-1:checked ~ .paneles > .panel:nth-child(1) { opacity: 1; visibility: visible; }
#ciclo-1:checked ~ .puntos label[for="ciclo-1"] .bola { background: var(--c, var(--tinta)); border-color: var(--c, var(--tinta)); color: var(--blanco); }
#ciclo-1:focus-visible ~ .puntos label[for="ciclo-1"] .bola { outline: 2px solid var(--tinta); outline-offset: 3px; }
#ciclo-2:checked ~ .paneles > .panel:nth-child(2) { opacity: 1; visibility: visible; }
#ciclo-2:checked ~ .puntos label[for="ciclo-2"] .bola { background: var(--c, var(--tinta)); border-color: var(--c, var(--tinta)); color: var(--blanco); }
#ciclo-2:focus-visible ~ .puntos label[for="ciclo-2"] .bola { outline: 2px solid var(--tinta); outline-offset: 3px; }
#ciclo-3:checked ~ .paneles > .panel:nth-child(3) { opacity: 1; visibility: visible; }
#ciclo-3:checked ~ .puntos label[for="ciclo-3"] .bola { background: var(--c, var(--tinta)); border-color: var(--c, var(--tinta)); color: var(--blanco); }
#ciclo-3:focus-visible ~ .puntos label[for="ciclo-3"] .bola { outline: 2px solid var(--tinta); outline-offset: 3px; }
#ciclo-4:checked ~ .paneles > .panel:nth-child(4) { opacity: 1; visibility: visible; }
#ciclo-4:checked ~ .puntos label[for="ciclo-4"] .bola { background: var(--c, var(--tinta)); border-color: var(--c, var(--tinta)); color: var(--blanco); }
#ciclo-4:focus-visible ~ .puntos label[for="ciclo-4"] .bola { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* Selector "dpc" (3 opciones) */
#dpc-1:checked ~ .paneles > .panel:nth-child(1) { opacity: 1; visibility: visible; }
#dpc-1:checked ~ .puntos label[for="dpc-1"] .bola { background: var(--c, var(--tinta)); border-color: var(--c, var(--tinta)); color: var(--blanco); }
#dpc-1:focus-visible ~ .puntos label[for="dpc-1"] .bola { outline: 2px solid var(--tinta); outline-offset: 3px; }
#dpc-2:checked ~ .paneles > .panel:nth-child(2) { opacity: 1; visibility: visible; }
#dpc-2:checked ~ .puntos label[for="dpc-2"] .bola { background: var(--c, var(--tinta)); border-color: var(--c, var(--tinta)); color: var(--blanco); }
#dpc-2:focus-visible ~ .puntos label[for="dpc-2"] .bola { outline: 2px solid var(--tinta); outline-offset: 3px; }
#dpc-3:checked ~ .paneles > .panel:nth-child(3) { opacity: 1; visibility: visible; }
#dpc-3:checked ~ .puntos label[for="dpc-3"] .bola { background: var(--c, var(--tinta)); border-color: var(--c, var(--tinta)); color: var(--blanco); }
#dpc-3:focus-visible ~ .puntos label[for="dpc-3"] .bola { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* Selector "madurez" (5 opciones) */
#madurez-1:checked ~ .paneles > .panel:nth-child(1) { opacity: 1; visibility: visible; }
#madurez-1:checked ~ .puntos label[for="madurez-1"] .bola { background: var(--c, var(--tinta)); border-color: var(--c, var(--tinta)); color: var(--blanco); }
#madurez-1:focus-visible ~ .puntos label[for="madurez-1"] .bola { outline: 2px solid var(--tinta); outline-offset: 3px; }
#madurez-2:checked ~ .paneles > .panel:nth-child(2) { opacity: 1; visibility: visible; }
#madurez-2:checked ~ .puntos label[for="madurez-2"] .bola { background: var(--c, var(--tinta)); border-color: var(--c, var(--tinta)); color: var(--blanco); }
#madurez-2:focus-visible ~ .puntos label[for="madurez-2"] .bola { outline: 2px solid var(--tinta); outline-offset: 3px; }
#madurez-3:checked ~ .paneles > .panel:nth-child(3) { opacity: 1; visibility: visible; }
#madurez-3:checked ~ .puntos label[for="madurez-3"] .bola { background: var(--c, var(--tinta)); border-color: var(--c, var(--tinta)); color: var(--blanco); }
#madurez-3:focus-visible ~ .puntos label[for="madurez-3"] .bola { outline: 2px solid var(--tinta); outline-offset: 3px; }
#madurez-4:checked ~ .paneles > .panel:nth-child(4) { opacity: 1; visibility: visible; }
#madurez-4:checked ~ .puntos label[for="madurez-4"] .bola { background: var(--c, var(--tinta)); border-color: var(--c, var(--tinta)); color: var(--blanco); }
#madurez-4:focus-visible ~ .puntos label[for="madurez-4"] .bola { outline: 2px solid var(--tinta); outline-offset: 3px; }
#madurez-5:checked ~ .paneles > .panel:nth-child(5) { opacity: 1; visibility: visible; }
#madurez-5:checked ~ .puntos label[for="madurez-5"] .bola { background: var(--c, var(--tinta)); border-color: var(--c, var(--tinta)); color: var(--blanco); }
#madurez-5:focus-visible ~ .puntos label[for="madurez-5"] .bola { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* ---------- Fabricantes centrados en la portada */
.fabricantes.tres { margin-inline: auto; }
.fabricantes.tres .fabricante p { text-align: center; }

/* ==========================================================================
   TEMAS POR PILAR (2026-10-06). La marca Droppett sigue en negro, blanco y grises;
   cada pilar toma la paleta de su fabricante, como en sus presentaciones.
   ========================================================================== */

/* ---------- Thales (Protección de datos): índigo, violeta, cian y magenta */
.tema-thales {
  --t-indigo: #232a74; --t-violeta: #5a61cf; --t-cian: #16b1d6; --t-teal: #1b93a8; --t-magenta: #b2266e;
  --t-lavanda: #e3e5f8; --t-celeste: #d8f3fa;
}
.tema-thales .interior { background: linear-gradient(120deg, #1d2266 0%, #3a40a6 55%, #139fc6 100%); border-bottom: 0; }
.tema-thales .interior h1 { color: var(--blanco); }
.tema-thales .interior p { color: #e4e6ff; }
.tema-thales .interior .marcas { color: #b9ecf8; }
.tema-thales .seccion.suave { background: #f2f3fc; }
.tema-thales .cabeza h2 { color: var(--t-indigo); }

/* Marco del recorrido del dato: bandas con degradado y zonas de control (lavanda) y visibilidad (celeste) */
.tema-thales .marco-datos { border: 0; background: var(--t-lavanda); box-shadow: 0 18px 40px -24px rgba(35, 42, 116, .45); }
.tema-thales .marco-datos .banda { background: linear-gradient(90deg, var(--t-indigo), var(--t-violeta)); color: #eef0ff; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tema-thales .marco-datos .banda:last-child { background: linear-gradient(90deg, #0f7fa6, var(--t-cian)); }
.tema-thales .amenaza { background: linear-gradient(90deg, #6d73e0, var(--t-cian)); color: var(--blanco); font-weight: 500; padding: 4px 12px; border-radius: var(--radio); font-size: .9rem; }
.tema-thales .marco-datos .selector { background: linear-gradient(180deg, var(--t-lavanda) 0 74px, var(--t-celeste) 74px 100%); }
.tema-thales .selector.ciclo .puntos::before {
  top: 31px; height: 14px; left: 4%; right: 4%; border-radius: 7px;
  background: linear-gradient(90deg, var(--t-cian), #1f7fc2 45%, var(--t-indigo));
}
.tema-thales .selector.ciclo .bola { --c: var(--t-indigo); border: 3px solid var(--blanco); background: linear-gradient(140deg, #ffffff, #e9f8fd); color: var(--t-indigo); box-shadow: 0 0 0 5px rgba(22, 177, 214, .35), 0 8px 18px -8px rgba(35, 42, 116, .6); }
.tema-thales .selector.ciclo .rotulo { color: var(--t-indigo); }
.tema-thales .selector .panel { border: 0; border-left: 4px solid var(--t-cian); box-shadow: 0 10px 28px -20px rgba(35, 42, 116, .5); }
.tema-thales .selector .panel h3 { color: var(--t-indigo); }

/* Descubrir (violeta), Proteger (turquesa), Controlar (magenta), con halo */
.tema-thales .selector.dpc .puntos::before { height: 2px; background: linear-gradient(90deg, var(--t-violeta), var(--t-teal), var(--t-magenta)); top: 37px; }
.tema-thales .selector.dpc .punto:nth-child(1) { --c: #4a52c4; }
.tema-thales .selector.dpc .punto:nth-child(2) { --c: var(--t-teal); }
.tema-thales .selector.dpc .punto:nth-child(3) { --c: var(--t-magenta); }
.tema-thales .selector.dpc .bola { border: 2px solid var(--c); color: var(--c); background: var(--blanco); box-shadow: 0 0 22px -4px var(--c); }
.tema-thales .selector.dpc .rotulo { color: var(--c); letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; }
.tema-thales #dpc-1:checked ~ .paneles .panel:nth-child(1) { border-left-color: #4a52c4; }
.tema-thales #dpc-2:checked ~ .paneles .panel:nth-child(2) { border-left-color: var(--t-teal); }
.tema-thales #dpc-3:checked ~ .paneles .panel:nth-child(3) { border-left-color: var(--t-magenta); }

/* Lo que logras y cierre */
.tema-thales .impacto > div { border-top: 3px solid; border-image: linear-gradient(90deg, var(--t-indigo), var(--t-cian)) 1; }
.tema-thales .impacto h3 { color: var(--t-indigo); }
.tema-thales .llamado { background: linear-gradient(120deg, var(--t-indigo) 0%, #3a40a6 55%, #139fc6 100%); }

/* ---------- MaintainX (Gestión de Activos): del azul marino al azul de la marca */
.tema-maintainx { --m-marino: #0b1d3f; --m-azul: #246cff; --m-medio: #1a4fb8; --m-claro: #eaf1ff; }
.tema-maintainx .interior { background: linear-gradient(120deg, var(--m-marino) 0%, #143a8a 55%, var(--m-azul) 100%); border-bottom: 0; }
.tema-maintainx .interior h1 { color: var(--blanco); }
.tema-maintainx .interior p { color: #dfe9ff; }
.tema-maintainx .interior .marcas { color: #a9c6ff; }
.tema-maintainx .seccion.suave { background: #f1f5ff; }
.tema-maintainx .cabeza h2 { color: var(--m-marino); }
.tema-maintainx .pasos li { border-top: 3px solid var(--m-azul); }
.tema-maintainx .pasos li::before { color: var(--m-azul); font-weight: 400; }
.tema-maintainx .pasos h3 { color: var(--m-marino); }

/* Escalera de madurez: cada escalón un azul más brillante, como en la presentación */
.tema-maintainx .selector.escalera .punto:nth-child(1) { --c: #0b1d3f; }
.tema-maintainx .selector.escalera .punto:nth-child(2) { --c: #0f2f6b; }
.tema-maintainx .selector.escalera .punto:nth-child(3) { --c: #153f98; }
.tema-maintainx .selector.escalera .punto:nth-child(4) { --c: #1b55cc; }
.tema-maintainx .selector.escalera .punto:nth-child(5) { --c: #246cff; }
.tema-maintainx .selector.escalera .bola { background: var(--c); border: 0; color: var(--blanco); font-weight: 400; opacity: .78; transition: opacity .25s, box-shadow .25s; }
.tema-maintainx .selector.escalera .punto:hover .bola { opacity: .95; }
.tema-maintainx .selector.escalera .rotulo { color: var(--m-marino); }
.tema-maintainx .selector .panel { border: 0; border-left: 4px solid var(--m-azul); box-shadow: 0 10px 28px -20px rgba(11, 29, 63, .5); }
.tema-maintainx .selector .panel h3 { color: var(--m-marino); }
.tema-maintainx .indicadores > div { border-top: 3px solid var(--m-azul); }
.tema-maintainx .indicadores h3 { color: var(--m-marino); }
.tema-maintainx .chips span { border-color: #b9cffd; background: var(--m-claro); color: var(--m-marino); }

/* MaintainX en el mundo: azul marino profundo con cifras en azul claro */
.tema-maintainx .seccion.oscuro { background: linear-gradient(160deg, var(--m-marino) 0%, #0f2a5e 60%, #163f8f 100%); }
.tema-maintainx .seccion.oscuro .cabeza h2 { color: var(--blanco); }
.tema-maintainx .cifras div { border-top-color: rgba(127, 176, 255, .45); }
.tema-maintainx .cifra { color: #8db8ff; }
.tema-maintainx .casos div { background: rgba(255, 255, 255, .06); border-color: rgba(141, 184, 255, .25); }
.tema-maintainx .casos .cifra { color: var(--blanco); }
.tema-maintainx .llamado { background: linear-gradient(120deg, var(--m-marino) 0%, #143a8a 55%, var(--m-azul) 100%); }

@media (max-width: 960px) {
  .tema-thales .marco-datos .selector { background: var(--t-celeste); }
  .tema-thales .selector.ciclo .puntos::before { display: none; }
}

/* Escalón elegido: color pleno y halo azul */
.tema-maintainx #madurez-1:checked ~ .puntos label[for="madurez-1"] .bola { opacity: 1; box-shadow: 0 0 0 4px rgba(36, 108, 255, .35), 0 10px 22px -10px rgba(11, 29, 63, .7); }
.tema-maintainx #madurez-2:checked ~ .puntos label[for="madurez-2"] .bola { opacity: 1; box-shadow: 0 0 0 4px rgba(36, 108, 255, .35), 0 10px 22px -10px rgba(11, 29, 63, .7); }
.tema-maintainx #madurez-3:checked ~ .puntos label[for="madurez-3"] .bola { opacity: 1; box-shadow: 0 0 0 4px rgba(36, 108, 255, .35), 0 10px 22px -10px rgba(11, 29, 63, .7); }
.tema-maintainx #madurez-4:checked ~ .puntos label[for="madurez-4"] .bola { opacity: 1; box-shadow: 0 0 0 4px rgba(36, 108, 255, .35), 0 10px 22px -10px rgba(11, 29, 63, .7); }
.tema-maintainx #madurez-5:checked ~ .puntos label[for="madurez-5"] .bola { opacity: 1; box-shadow: 0 0 0 4px rgba(36, 108, 255, .35), 0 10px 22px -10px rgba(11, 29, 63, .7); }

/* ==========================================================================
   2026-10-06 · Márgenes más holgados, diagramas que avanzan solos, portada con parallax
   ========================================================================== */

/* Márgenes: más aire a los lados en pantallas grandes y textos más anchos (menos columnas largas) */
:root { --ancho: 1240px; }
.contenedor { width: min(var(--ancho), 100% - clamp(32px, 9vw, 160px)); }
.cabeza { max-width: 820px; }
.interior p { max-width: 50em; }

/* Fabricantes certificados en los azules de los pilares */
.seccion.certificados { background: linear-gradient(135deg, #0b1d3f 0%, #1d2a78 55%, #1468b0 100%); }
.certificados .cabeza p { color: #d4defa; }
.certificados .fabricante p { color: #d4defa; }
.certificados .fabricante p strong { color: var(--blanco); }

/* Portada: la foto se queda atrás y se difumina al bajar (efecto parallax). Navegadores sin soporte:
   foto fija normal, sin efecto. */
.portada-fondo { position: absolute; inset: 0; z-index: 0; background: url("/img/fotos/portada.jpg") center right / cover no-repeat; will-change: transform; }
.portada-foto::before { z-index: 1; }
.portada-foto .contenedor { z-index: 2; }
@supports (animation-timeline: scroll()) {
  .portada-fondo { animation: fondo-al-bajar linear both; animation-timeline: scroll(root); animation-range: 0px 100vh; transform-origin: center top; }
  .portada-foto .contenedor { animation: texto-al-bajar linear both; animation-timeline: scroll(root); animation-range: 0px 60vh; }
}
/* La foto baja al mismo ritmo que la página (parece fija: "te persigue"), crece y se difumina */
@keyframes fondo-al-bajar { to { transform: translateY(100vh) scale(1.3); filter: blur(16px); opacity: .6; } }
@keyframes texto-al-bajar { to { transform: translateY(-14%); opacity: 0; } }

/* Diagramas: los paneles se apilan y se funden (ya no saltan de alto) */
.selector .paneles { display: grid; }
.selector .paneles .panel { display: block; grid-area: 1 / 1; opacity: 0; visibility: hidden; animation: none; transition: opacity .7s ease, visibility .7s; }

/* Bolitas: una capa de color que se enciende sola en modo automático */
.selector .bola { position: relative; isolation: isolate; color: var(--b-color, var(--texto)); }
.selector .bola::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--c, var(--tinta)); opacity: 0; z-index: -1; }
.tema-thales .selector.ciclo .bola { --b-color: var(--t-indigo); }
.tema-thales .selector.dpc .bola { --b-color: var(--c); }
.tema-maintainx .selector.escalera .bola { --b-color: var(--blanco); --b-op: .78; }

/* Al pasar el mouse por el diagrama se pausa, para leer con calma */
.selector:hover .paneles .panel, .selector:hover .bola, .selector:hover .bola::before { animation-play-state: paused; }

/* Selector "ciclo": avance automático (4 etapas, una cada 3 s, cruce suave) */
@keyframes ciclo-panel { 0% { opacity: 0; } 3.00% { opacity: 1; } 25.00% { opacity: 1; } 28.00%, 100% { opacity: 0; } }
@keyframes ciclo-bola { 0%, 28.00%, 100% { color: var(--b-color, var(--texto)); opacity: var(--b-op, 1); transform: scale(1); } 3.00%, 25.00% { color: var(--blanco); opacity: 1; transform: scale(1.06); } }
@keyframes ciclo-capa { 0%, 28.00%, 100% { opacity: 0; } 3.00%, 25.00% { opacity: 1; } }
#ciclo-auto:checked ~ .paneles > .panel { visibility: visible; animation: ciclo-panel 12s ease-in-out infinite; }
#ciclo-auto:checked ~ .puntos .bola { animation: ciclo-bola 12s ease-in-out infinite; }
#ciclo-auto:checked ~ .puntos .bola::before { animation: ciclo-capa 12s ease-in-out infinite; }
#ciclo-auto:checked ~ .paneles > .panel:nth-child(2), #ciclo-auto:checked ~ .puntos .punto:nth-child(2) .bola, #ciclo-auto:checked ~ .puntos .punto:nth-child(2) .bola::before { animation-delay: 3s; }
#ciclo-auto:checked ~ .paneles > .panel:nth-child(3), #ciclo-auto:checked ~ .puntos .punto:nth-child(3) .bola, #ciclo-auto:checked ~ .puntos .punto:nth-child(3) .bola::before { animation-delay: 6s; }
#ciclo-auto:checked ~ .paneles > .panel:nth-child(4), #ciclo-auto:checked ~ .puntos .punto:nth-child(4) .bola, #ciclo-auto:checked ~ .puntos .punto:nth-child(4) .bola::before { animation-delay: 9s; }

/* Selector "dpc": avance automático (3 etapas, una cada 3 s, cruce suave) */
@keyframes dpc-panel { 0% { opacity: 0; } 4.00% { opacity: 1; } 33.33% { opacity: 1; } 37.33%, 100% { opacity: 0; } }
@keyframes dpc-bola { 0%, 37.33%, 100% { color: var(--b-color, var(--texto)); opacity: var(--b-op, 1); transform: scale(1); } 4.00%, 33.33% { color: var(--blanco); opacity: 1; transform: scale(1.06); } }
@keyframes dpc-capa { 0%, 37.33%, 100% { opacity: 0; } 4.00%, 33.33% { opacity: 1; } }
#dpc-auto:checked ~ .paneles > .panel { visibility: visible; animation: dpc-panel 9s ease-in-out infinite; }
#dpc-auto:checked ~ .puntos .bola { animation: dpc-bola 9s ease-in-out infinite; }
#dpc-auto:checked ~ .puntos .bola::before { animation: dpc-capa 9s ease-in-out infinite; }
#dpc-auto:checked ~ .paneles > .panel:nth-child(2), #dpc-auto:checked ~ .puntos .punto:nth-child(2) .bola, #dpc-auto:checked ~ .puntos .punto:nth-child(2) .bola::before { animation-delay: 3s; }
#dpc-auto:checked ~ .paneles > .panel:nth-child(3), #dpc-auto:checked ~ .puntos .punto:nth-child(3) .bola, #dpc-auto:checked ~ .puntos .punto:nth-child(3) .bola::before { animation-delay: 6s; }

/* Selector "madurez": avance automático (5 etapas, una cada 3 s, cruce suave) */
@keyframes madurez-panel { 0% { opacity: 0; } 2.40% { opacity: 1; } 20.00% { opacity: 1; } 22.40%, 100% { opacity: 0; } }
@keyframes madurez-bola { 0%, 22.40%, 100% { color: var(--b-color, var(--texto)); opacity: var(--b-op, 1); transform: scale(1); } 2.40%, 20.00% { color: var(--blanco); opacity: 1; transform: scale(1.06); } }
@keyframes madurez-capa { 0%, 22.40%, 100% { opacity: 0; } 2.40%, 20.00% { opacity: 1; } }
#madurez-auto:checked ~ .paneles > .panel { visibility: visible; animation: madurez-panel 15s ease-in-out infinite; }
#madurez-auto:checked ~ .puntos .bola { animation: madurez-bola 15s ease-in-out infinite; }
#madurez-auto:checked ~ .puntos .bola::before { animation: madurez-capa 15s ease-in-out infinite; }
#madurez-auto:checked ~ .paneles > .panel:nth-child(2), #madurez-auto:checked ~ .puntos .punto:nth-child(2) .bola, #madurez-auto:checked ~ .puntos .punto:nth-child(2) .bola::before { animation-delay: 3s; }
#madurez-auto:checked ~ .paneles > .panel:nth-child(3), #madurez-auto:checked ~ .puntos .punto:nth-child(3) .bola, #madurez-auto:checked ~ .puntos .punto:nth-child(3) .bola::before { animation-delay: 6s; }
#madurez-auto:checked ~ .paneles > .panel:nth-child(4), #madurez-auto:checked ~ .puntos .punto:nth-child(4) .bola, #madurez-auto:checked ~ .puntos .punto:nth-child(4) .bola::before { animation-delay: 9s; }
#madurez-auto:checked ~ .paneles > .panel:nth-child(5), #madurez-auto:checked ~ .puntos .punto:nth-child(5) .bola, #madurez-auto:checked ~ .puntos .punto:nth-child(5) .bola::before { animation-delay: 12s; }

/* Sin animaciones (preferencia del sistema): se muestra fija la primera etapa */
@media (prefers-reduced-motion: reduce) {
  .portada-fondo, .portada-foto .contenedor { animation: none !important; }
  #ciclo-auto:checked ~ .paneles > .panel, #dpc-auto:checked ~ .paneles > .panel, #madurez-auto:checked ~ .paneles > .panel,
  #ciclo-auto:checked ~ .puntos .bola, #dpc-auto:checked ~ .puntos .bola, #madurez-auto:checked ~ .puntos .bola,
  #ciclo-auto:checked ~ .puntos .bola::before, #dpc-auto:checked ~ .puntos .bola::before, #madurez-auto:checked ~ .puntos .bola::before { animation: none; }
  #ciclo-auto:checked ~ .paneles > .panel:first-child, #dpc-auto:checked ~ .paneles > .panel:first-child,
  #madurez-auto:checked ~ .paneles > .panel:first-child { opacity: 1; visibility: visible; }
}

/* ==========================================================================
   2026-10-06 (tarde) · Pasos que se iluminan solos, escalera vertical, diagrama de Thales más ancho
   ========================================================================== */

/* "Cómo lo implementamos": cada paso se ilumina solo, uno tras otro (3 s cada uno), y también con el mouse */
.pasos li { position: relative; padding: 22px 18px 20px; border-radius: 0 0 var(--radio) var(--radio); transition: background-color .4s, transform .4s; }
.pasos li::before { transition: transform .4s, color .4s; transform-origin: left center; }
@keyframes paso-luz {
  0%, 20%, 100% { background-color: transparent; transform: translateY(0); }
  5%, 15% { background-color: var(--luz-paso, #eef3ff); transform: translateY(-4px); }
}
@keyframes paso-numero { 0%, 20%, 100% { transform: scale(1); } 5%, 15% { transform: scale(1.25); } }
.pasos li { animation: paso-luz 15s ease-in-out infinite; }
.pasos li::before { animation: paso-numero 15s ease-in-out infinite; }
.pasos li:nth-child(2), .pasos li:nth-child(2)::before { animation-delay: 3s; }
.pasos li:nth-child(3), .pasos li:nth-child(3)::before { animation-delay: 6s; }
.pasos li:nth-child(4), .pasos li:nth-child(4)::before { animation-delay: 9s; }
.pasos li:nth-child(5), .pasos li:nth-child(5)::before { animation-delay: 12s; }
.pasos li:hover { background-color: var(--luz-paso, #eef3ff) !important; transform: translateY(-4px) !important; }
.pasos li:hover::before { transform: scale(1.25) !important; }
.pasos:hover li, .pasos:hover li::before { animation-play-state: paused; }
.tema-maintainx .pasos { --luz-paso: #e3ecff; }

/* Escalera de madurez: barras verticales a la izquierda y la explicación a la derecha */
.selector.escalera { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 48px; align-items: end; }
.selector.escalera .puntos { margin-bottom: 0; gap: 14px; }
.selector.escalera .punto:nth-child(1) .bola { height: 96px; }
.selector.escalera .punto:nth-child(2) .bola { height: 140px; }
.selector.escalera .punto:nth-child(3) .bola { height: 184px; }
.selector.escalera .punto:nth-child(4) .bola { height: 228px; }
.selector.escalera .punto:nth-child(5) .bola { height: 272px; }
.selector.escalera .paneles { align-self: center; }

/* Diagrama de Thales: más ancho que el texto y con más espacio interno */
.tema-thales .marco-datos { width: min(1400px, calc(100vw - 48px)); position: relative; left: 50%; translate: -50% 0; }
.tema-thales .marco-datos .selector { padding: 44px clamp(24px, 5vw, 72px) 40px; }
.tema-thales .marco-datos .banda { padding-inline: clamp(24px, 5vw, 72px); }

@media (max-width: 960px) {
  .selector.escalera { grid-template-columns: 1fr; gap: 28px; }
  .selector.escalera .punto:nth-child(1) .bola { height: 70px; }
  .selector.escalera .punto:nth-child(2) .bola { height: 100px; }
  .selector.escalera .punto:nth-child(3) .bola { height: 130px; }
  .selector.escalera .punto:nth-child(4) .bola { height: 160px; }
  .selector.escalera .punto:nth-child(5) .bola { height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .pasos li, .pasos li::before { animation: none; }
}

/* Escalera equilibrada: todas las barras apoyan en la misma base (rótulos de una línea) y la explicación
   queda centrada a la altura de la escalera */
.selector.escalera { align-items: center; }
.selector.escalera .puntos { align-items: end; }
.selector.escalera .punto { justify-content: flex-end; }
.selector.escalera .rotulo { white-space: nowrap; font-size: .92rem; }
.selector.escalera .paneles .panel { min-height: 220px; display: flex; flex-direction: column; justify-content: center; }

/* Diagrama de Thales de borde a borde, como la portada. El contenido interno se alinea con el texto de la página.
   body con overflow-x: clip evita la barra horizontal que causaría 100vw (clip no rompe el encabezado fijo). */
body { overflow-x: clip; }
.tema-thales .marco-datos { width: 100vw; border-radius: 0; box-shadow: none; }
.tema-thales .marco-datos .selector,
.tema-thales .marco-datos .banda { padding-inline: max(16px, calc((100vw - min(var(--ancho), 100vw - clamp(32px, 9vw, 160px))) / 2)); }

/* Nosotros: contenido centrado en la página (antes quedaba pegado a la izquierda) */
.pagina-nosotros .interior { text-align: center; }
.pagina-nosotros .interior h1, .pagina-nosotros .interior p { margin-inline: auto; }
.pagina-nosotros .cabeza { margin-inline: auto; text-align: center; }
.pagina-nosotros .historia { max-width: 1040px; margin-inline: auto; }
.pagina-nosotros .historia li { grid-template-columns: 200px 1fr; }
.pagina-nosotros .historia p { max-width: 62em; }

/* "Cómo lo implementamos": con el mouse encima solo se ilumina el paso señalado; la animación se pausa
   y, al salir, sigue su curso */
.pasos:hover li:not(:hover) { background-color: transparent !important; transform: none !important; }
.pasos:hover li:not(:hover)::before { transform: scale(1) !important; }

/* ==========================================================================
   Escenario de la portada (2026-10-06): la foto queda fija detrás de la portada y de los dos pilares,
   crece, se difumina y se oscurece al bajar; las tarjetas de los pilares son vidrio esmerilado.
   Después de los pilares, la sección siguiente sube y cubre la foto como un telón.
   ========================================================================== */
.escenario { position: relative; background: #1c1917; isolation: isolate; }
.escenario > .portada-fondo {
  position: sticky; top: 0; inset: auto; display: block; height: 100vh; margin-bottom: -100vh; z-index: 0;
  background: url("/img/fotos/portada.jpg") center right / cover no-repeat; transform-origin: center 30%;
}
.escenario > .portada-foto { background: transparent; overflow: visible; isolation: auto; position: relative; z-index: 1; }
.escenario > .seccion { position: relative; z-index: 1; background: transparent; }
/* Tarjetas de vidrio ahumado (2026-10-07): translúcidas y oscuras, para no romper el contraste con la foto */
.escenario .pilar {
  background: rgba(20, 18, 17, .42); border-color: rgba(255, 255, 255, .16); color: var(--blanco);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .65);
  transition: border-color .3s, background-color .3s;
}
.escenario .pilar h2 { color: var(--blanco); }
.escenario .pilar p { color: rgba(255, 255, 255, .74); }
.escenario .pilar .marcas { color: rgba(255, 255, 255, .6); }
.escenario a.pilar:hover { border-color: rgba(255, 255, 255, .45); background: rgba(20, 18, 17, .3); }
@supports (animation-timeline: scroll()) {
  .escenario > .portada-fondo { animation: escenario-al-bajar linear both; animation-timeline: scroll(root); animation-range: 0px 110vh; }
}
@keyframes escenario-al-bajar { to { transform: scale(1.3); filter: blur(16px) brightness(.55); } }
@media (max-width: 960px) {
  .escenario > .portada-fondo { background-position: 70% center; }
}
@media (prefers-reduced-motion: reduce) {
  .escenario > .portada-fondo { animation: none; }
}

/* Logo del fabricante a la derecha del titular, en una tarjeta de vidrio sobre el degradado */
.interior .con-logo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.logo-heroe {
  margin: 0; width: clamp(220px, 24vw, 340px); aspect-ratio: 36 / 14; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .6); border-radius: 12px;
  box-shadow: 0 22px 48px -26px rgba(0, 0, 0, .6);
}
.logo-heroe img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 960px) {
  .interior .con-logo { grid-template-columns: 1fr; gap: 28px; }
  .logo-heroe { width: 220px; }
}

/* "También trabajamos con": 5 marcas centradas, filas completas o centradas en pantallas chicas */
.fabricantes.discretos { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1200px; }
.fabricantes.discretos > .fabricante { width: calc((100% - 4 * 20px) / 5); }
@keyframes color-5s { 0%, 20%, 100% { filter: grayscale(1); opacity: var(--op-gris, .72); } 10% { filter: grayscale(0); opacity: 1; } }
.fabricantes.discretos .fabricante img { animation: color-5s 5s ease-in-out infinite; }
.fabricantes .fabricante:nth-child(5) img { animation-delay: 4s; }
@media (max-width: 960px) {
  .fabricantes.discretos > .fabricante { width: calc((100% - 2 * 20px) / 3); }
}
@media (max-width: 600px) {
  .fabricantes.discretos { gap: 12px; }
  .fabricantes.discretos > .fabricante { width: calc((100% - 12px) / 2); }
}

/* Logo del titular sin tarjeta: en blanco, fundido con el degradado (Ezequiel, 2026-10-06) */
.logo-heroe { background: none; border: 0; box-shadow: none; border-radius: 0; }
.logo-heroe img { filter: brightness(0) invert(1); opacity: .95; }

/* Escenario sin cortes (Ezequiel: "ese corte hace ruido"): el velo oscuro ya no termina en la portada, viaja con
   la foto; y al final del escenario la foto se funde con la sección clara en vez de cortarse en seco. */
.escenario > .portada-foto::before { display: none; }
.escenario > .portada-fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20, 18, 17, .92) 0%, rgba(20, 18, 17, .7) 45%, rgba(20, 18, 17, .25) 100%);
}
.escenario::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(245, 245, 244, 0), var(--panel));
}
/* En pantallas muy altas la foto fija no debe salirse del escenario (clip no rompe el sticky) */
.escenario { overflow: clip; }

/* Fundido final del escenario, más bajo y mucho más suave (Ezequiel: "bájalo más y suavízalo"):
   más espacio oscuro bajo las tarjetas y una curva de 280 px que acelera despacio (sin franja dura). */
.escenario > .seccion { padding-bottom: 280px; }
.escenario::after {
  height: 280px;
  background: linear-gradient(to bottom,
    rgba(245, 245, 244, 0) 0%, rgba(245, 245, 244, .03) 12%, rgba(245, 245, 244, .09) 24%,
    rgba(245, 245, 244, .19) 36%, rgba(245, 245, 244, .33) 48%, rgba(245, 245, 244, .5) 60%,
    rgba(245, 245, 244, .68) 71%, rgba(245, 245, 244, .83) 82%, rgba(245, 245, 244, .94) 92%, var(--panel) 100%);
}
@media (max-width: 960px) {
  .escenario > .seccion { padding-bottom: 200px; }
  .escenario::after { height: 200px; }
}

/* Fundido final en NEGRO (Ezequiel: "ponlo negro o algo menos invasivo"): la foto se apaga en el mismo negro de
   la sección siguiente ("Protegemos la tecnología que sostiene al país"), que pasa a ser oscura. Sin salto de luz. */
.escenario > .seccion { padding-bottom: 200px; }
.escenario::after {
  height: 260px;
  background: linear-gradient(to bottom,
    rgba(28, 25, 23, 0) 0%, rgba(28, 25, 23, .06) 15%, rgba(28, 25, 23, .18) 30%, rgba(28, 25, 23, .36) 45%,
    rgba(28, 25, 23, .58) 60%, rgba(28, 25, 23, .78) 75%, rgba(28, 25, 23, .92) 88%, #1c1917 100%);
}
.seccion.continua { background: #1c1917; padding-top: 40px; }
.seccion.continua .cabeza h2 { color: var(--blanco); }
.seccion.continua .impacto > div { border-top-color: #57534e; }
.seccion.continua .impacto p { color: var(--noche-texto); }
@media (max-width: 960px) {
  .escenario > .seccion { padding-bottom: 160px; }
  .escenario::after { height: 200px; }
}

/* Encabezado negro (Ezequiel, 2026-10-06): letras blancas, línea divisoria blanca tenue, botón blanco */
.encabezado { background: #141211; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.menu a { color: rgba(255, 255, 255, .72); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--blanco); }
.menu .boton { background: var(--blanco); border-color: var(--blanco); color: var(--negro, #141211); }
.menu .boton:hover { background: #e7e5e4; border-color: #e7e5e4; }
:focus-visible { outline-color: currentColor; }
@media (max-width: 960px) {
  .icono-menu { border-color: rgba(255, 255, 255, .3); }
  .icono-menu span, .icono-menu span::before, .icono-menu span::after { background: var(--blanco); }
  .menu { background: #141211; border-bottom-color: rgba(255, 255, 255, .16); }
  .menu a { color: var(--blanco); border-bottom-color: rgba(255, 255, 255, .12); }
}
/* Nosotros en celular: el año arriba y el texto debajo (la regla de escritorio apretaba el texto) */
@media (max-width: 600px) {
  .pagina-nosotros .historia li { grid-template-columns: 1fr; gap: 8px; text-align: left; }
}

/* ==========================================================================
   2026-10-07 · Encabezado de vidrio translúcido: deja ver la foto o el degradado que pasa por debajo.
   En las páginas con portada oscura (inicio, Gestión de Activos, Ciberseguridad) la portada sube
   y arranca detrás del encabezado; en las páginas claras el vidrio es un poco más denso para leer bien.
   ========================================================================== */
.encabezado {
  background: rgba(20, 18, 17, .92); border-bottom: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
body:has(.escenario) .encabezado, .tema-thales .encabezado, .tema-maintainx .encabezado { background: rgba(20, 18, 17, .38); }
body:has(.escenario) main, .tema-thales main, .tema-maintainx main { margin-top: -75px; }
.escenario > .portada-foto { padding-top: 235px; }
.tema-thales .interior, .tema-maintainx .interior { padding-top: 155px; }
@media (max-width: 960px) {
  .escenario > .portada-foto { padding-top: 171px; }
  .tema-thales .interior, .tema-maintainx .interior { padding-top: 131px; }
}

/* Textos grises sobre azul (2026-10-07): más claros para que se lean */
.tema-maintainx .seccion.oscuro .casos span, .tema-maintainx .seccion.oscuro .cifras span { color: #d4defa; }

/* ==========================================================================
   2026-10-07 · Cierre oscuro del inicio: clientes y "Conversemos" sobre fondo oscuro con brillos azules
   suaves (dan algo que el vidrio deje ver). Tarjetas de clientes de vidrio con borde: el logo va en blanco
   y, con la ola de siempre (3 por segundo), la tarjeta se enciende en blanco y el logo toma su color real
   (varios logos son oscuros y no se leerían en color sobre negro).
   ========================================================================== */
.final-oscuro {
  color: var(--noche-texto);
  background:
    radial-gradient(60% 50% at 12% 18%, rgba(36, 108, 255, .16), transparent 70%),
    radial-gradient(55% 45% at 88% 70%, rgba(22, 177, 214, .12), transparent 70%),
    #141211;
}
.final-oscuro > .seccion { background: transparent; }
.final-oscuro .cabeza h2 { color: var(--blanco); }
/* Tarjetas de clientes (2026-10-07): blancas como las de los fabricantes, logos en gris. Cada 4 s pasa una ola lenta (Ezequiel: "el doble de lento", para que se perciba cada cliente y su color)
   diagonal (de arriba a la izquierda hacia abajo a la derecha): cada tarjeta sube, el logo toma su color y suelta un
   halo neón en los azules del fondo de fabricantes. Una sola animación (--luz, 0 a 1) mueve todo a la vez.
   Los retrasos van por diagonal (fila + columna) y cambian según las columnas de la cuadrícula (4, 3 o 2). */
@property --luz { syntax: "<number>"; inherits: true; initial-value: 0; }
.final-oscuro .logos figure {
  --luz: 0;
  background: var(--blanco); border-color: rgba(255, 255, 255, .7);
  box-shadow: 0 0 calc(18px * var(--luz)) calc(2px * var(--luz)) rgba(36, 108, 255, calc(.64 * var(--luz))),
              0 0 calc(56px * var(--luz)) calc(10px * var(--luz)) rgba(20, 104, 176, calc(.56 * var(--luz)));
  transform: translateY(calc(-10px * var(--luz)));
  animation: luz-ola 4s ease-in-out infinite;
}
.final-oscuro .logos figure img {
  animation: none;
  filter: grayscale(calc(1 - var(--luz)));
  opacity: calc(.72 + .28 * var(--luz));
}
@keyframes luz-ola { 0%, 36%, 100% { --luz: 0; } 16% { --luz: 1; } }
@media (min-width: 961px) {
  .final-oscuro .logos figure:is(:nth-child(2), :nth-child(5)) { animation-delay: 0.24s; }
  .final-oscuro .logos figure:is(:nth-child(3), :nth-child(6), :nth-child(9)) { animation-delay: 0.48s; }
  .final-oscuro .logos figure:is(:nth-child(4), :nth-child(7), :nth-child(10)) { animation-delay: 0.72s; }
  .final-oscuro .logos figure:is(:nth-child(8), :nth-child(11)) { animation-delay: 0.96s; }
  .final-oscuro .logos figure:is(:nth-child(12)) { animation-delay: 1.20s; }
}
@media (min-width: 601px) and (max-width: 960px) {
  .final-oscuro .logos figure:is(:nth-child(2), :nth-child(4)) { animation-delay: 0.24s; }
  .final-oscuro .logos figure:is(:nth-child(3), :nth-child(5), :nth-child(7)) { animation-delay: 0.48s; }
  .final-oscuro .logos figure:is(:nth-child(6), :nth-child(8), :nth-child(10)) { animation-delay: 0.72s; }
  .final-oscuro .logos figure:is(:nth-child(9), :nth-child(11)) { animation-delay: 0.96s; }
  .final-oscuro .logos figure:is(:nth-child(12)) { animation-delay: 1.20s; }
}
@media (max-width: 600px) {
  .final-oscuro .logos figure:is(:nth-child(2), :nth-child(3)) { animation-delay: 0.24s; }
  .final-oscuro .logos figure:is(:nth-child(4), :nth-child(5)) { animation-delay: 0.48s; }
  .final-oscuro .logos figure:is(:nth-child(6), :nth-child(7)) { animation-delay: 0.72s; }
  .final-oscuro .logos figure:is(:nth-child(8), :nth-child(9)) { animation-delay: 0.96s; }
  .final-oscuro .logos figure:is(:nth-child(10), :nth-child(11)) { animation-delay: 1.20s; }
  .final-oscuro .logos figure:is(:nth-child(12)) { animation-delay: 1.44s; }
}
.final-oscuro .logos figure:hover { --luz: 1 !important; border-color: var(--blanco); }
.final-oscuro .logos figure:hover img { transform: scale(1.06); }

/* "Conversemos": vidrio translúcido con borde en vez de bloque negro */
.final-oscuro .llamado {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.final-oscuro .seccion + .seccion { padding-top: 0; }

/* Pie de página: la foto de la portada vuelve al final, oscurecida (88 %) y con difuminado leve,
   así la página abre y cierra con la misma imagen. */
.pie { position: relative; isolation: isolate; overflow: clip; background: #141211; border-top: 1px solid rgba(255, 255, 255, .12); }
.pie::before {
  content: ""; position: absolute; inset: -20px; z-index: -1;
  background: url("/img/fotos/portada.jpg") center 35% / cover no-repeat;
  filter: blur(6px) saturate(1.1); opacity: .32;
}
.pie::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 18, 17, .55) 0%, rgba(20, 18, 17, .35) 100%); }
.pie .legal { border-top-color: rgba(255, 255, 255, .14); }
@media (prefers-reduced-motion: reduce) {
  .final-oscuro .logos figure { animation: none; }
}

/* Fotos de las tarjetas de los pilares (2026-10-08, Ezequiel: "que haga efecto pulse, así se ve aburrido"):
   la foto se apaga despacio a blanco y negro (3 s) y vuelve al color de golpe con un latido doble, como un
   corazón: crece un poco, se ilumina y la tarjeta suelta un halo azul. Dos variables animadas en la tarjeta
   (--gris y --pulso) mueven foto y halo a la vez, sin desfase. */
@property --gris { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --pulso { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes pilar-latido {
  0%   { --gris: 0; --pulso: 0; }
  48%  { --gris: 1; --pulso: 0; animation-timing-function: cubic-bezier(.2, 0, .1, 1); }
  53%  { --gris: 0; --pulso: 1; }
  58%  { --gris: 0; --pulso: .25; }
  62%  { --gris: 0; --pulso: .7; }
  72%  { --gris: 0; --pulso: 0; }
  100% { --gris: 0; --pulso: 0; }
}
.escenario .pilar {
  animation: pilar-latido 6s ease-in-out infinite;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .65),
              0 0 calc(46px * var(--pulso)) calc(4px * var(--pulso)) rgba(36, 108, 255, calc(.55 * var(--pulso)));
}
.escenario .pilar img {
  filter: grayscale(var(--gris)) brightness(calc(1 + .2 * var(--pulso))) saturate(calc(1 + .35 * var(--pulso)));
  scale: calc(1 + .06 * var(--pulso)); transform-origin: center bottom; /* crece hacia arriba, sin tapar el texto */
}
@media (prefers-reduced-motion: reduce) {
  .escenario .pilar { animation: none; }
}