/* ATPI · Avances Tecnológicos para la Industria
   Hoja de estilos del sitio. Tokens según el manual "Universo visual de marca ATPI".
   Tema: oscuro con secciones claras de lectura. */

@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/RedHatDisplay.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("../fonts/RedHatMono.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Paleta principal */
  --verde: #00B26A;
  --morado: #420F66;
  --carbon: #333132;
  --acero: #7F8184;
  --perla: #E8E8E9;
  /* Luz y profundidad */
  --verde-luz: #00CC79;
  --carbon-profundo: #141313;
  --morado-noche: #240838;
  /* Apoyo */
  --blanco: #FFFFFF;
  --gris-claro: #F4F4F5;
  --linea-clara: #DADADC;
  --linea-oscura: rgba(232, 232, 233, .12);
  --texto-suave-oscuro: #B9B9BC; /* perla atenuada: 9.6:1 sobre carbón profundo */
  --texto-suave-claro: #5C5A5B;  /* 6.9:1 sobre blanco */
  --coral: #E26D5A;              /* solo el estado "paro" de la maqueta */
  --ambar: #E0A93B;              /* solo el estado "mantenimiento" de la maqueta */

  --fuente: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Red Hat Mono", ui-monospace, Menlo, Consolas, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px;

  --ancho: 1248px;
  --gutter: clamp(16px, 4vw, 48px);
  --seccion: clamp(72px, 10vw, 128px);
  --alto-encabezado: 76px;
  --sombra-clara: 0 1px 2px rgba(51, 49, 50, .06), 0 12px 32px rgba(66, 15, 102, .08);
  --transicion: 220ms cubic-bezier(.2, .7, .2, 1);
}

/* Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-encabezado) + 16px); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.6;
  color: var(--carbon);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--verde-luz); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--verde-luz); color: var(--carbon-profundo); }
[hidden] { display: none !important; }

.salto {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--verde-luz); color: var(--morado); padding: 12px 20px; border-radius: var(--radius-md); font-weight: 600;
}
.salto:focus { top: 16px; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; padding: var(--seccion) 0; }

/* Tipografía -------------------------------------------------------------- */
h1 { font-size: clamp(40px, 5.6vw, 64px); font-weight: 800; letter-spacing: -.02em; line-height: 1.04; }
h2 { font-size: clamp(30px, 3.8vw, 44px); letter-spacing: -.015em; }
h3, .h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.entrada { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55; max-width: 60ch; }
.verde { color: var(--verde-luz); }

/* Etiqueta de disciplina: mono, mayúsculas, con trazo ATPI a la izquierda */
.ceja {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--morado); margin-bottom: var(--space-4);
}
.ceja::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.etiqueta {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-suave-claro);
}

/* Secciones oscuras */
.oscuro { background: var(--carbon-profundo); color: var(--perla); }
.oscuro .ceja { color: var(--verde-luz); }
.oscuro .etiqueta { color: var(--texto-suave-oscuro); }
.oscuro .entrada, .oscuro p { color: var(--texto-suave-oscuro); }
.oscuro h1, .oscuro h2, .oscuro h3, .oscuro .h3, .oscuro strong { color: var(--perla); }
.oscuro .verde { color: var(--verde-luz); }

.cabeza-seccion {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8) var(--space-16);
  align-items: end; margin-bottom: var(--space-12);
}
.cabeza-seccion .entrada { justify-self: end; }
.cabeza-seccion > .boton { justify-self: end; }

/* Botones (manual, sección 10) --------------------------------------------- */
.boton {
  --sombra: rgba(66, 15, 102, .6);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--radius-md);
  font-family: var(--fuente); font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0;
  transition: box-shadow var(--transicion), transform var(--transicion), background-color var(--transicion), color var(--transicion), border-color var(--transicion);
  white-space: nowrap;
}
.boton:active { transform: translateY(1px); box-shadow: none; }
.boton.chico { min-height: 44px; padding: 0 18px; font-size: 16px; }
.boton.ancho { width: 100%; }
/* Primario: Verde Luz con texto morado y resplandor morado */
.boton.primario { background: var(--verde-luz); color: var(--morado); box-shadow: 0 5px 12px var(--sombra); }
.boton.primario:hover { box-shadow: 0 6px 20px rgba(66, 15, 102, .8); transform: translateY(-1px); }
.oscuro .boton.primario, .encabezado .boton.primario { --sombra: rgba(0, 204, 121, .35); }
.oscuro .boton.primario:hover, .encabezado .boton.primario:hover { box-shadow: 0 6px 24px rgba(0, 204, 121, .5); }
.boton.primario:active { background: var(--verde); }
/* Secundario: morado con texto Verde Luz */
.boton.secundario { background: var(--morado); color: var(--verde-luz); box-shadow: 0 5px 12px rgba(0, 178, 106, .35); }
.boton.secundario:hover { box-shadow: 0 6px 22px rgba(0, 204, 121, .5); transform: translateY(-1px); }
/* Especial · señal: un solo botón por página, sobre carbón profundo */
.boton.senal {
  background: var(--carbon-profundo); border: 1px solid rgba(0, 204, 121, .45);
  box-shadow: 0 5px 14px rgba(0, 204, 121, .25);
  color: var(--verde-luz);
}
.boton.senal span { background: linear-gradient(90deg, var(--perla), var(--verde-luz)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.boton.senal:hover { box-shadow: 0 6px 26px rgba(0, 204, 121, .45); border-color: var(--verde-luz); }
.boton.senal svg { transition: transform var(--transicion); }
.boton.senal:hover svg { transform: translateX(4px); }
/* Fantasma y contorno (acciones terciarias) */
.boton.fantasma { color: var(--perla); border: 1px solid rgba(232, 232, 233, .35); }
.boton.fantasma:hover { border-color: var(--verde-luz); color: var(--verde-luz); }
.boton.contorno { color: var(--morado); border: 1.5px solid var(--morado); }
.boton.contorno:hover { background: var(--morado); color: var(--verde-luz); }

.acciones { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-8); }

/* Íconos */
.icono { flex: none; }
.icono .punto { color: var(--verde-luz); stroke: var(--verde-luz); }

/* Encabezado -------------------------------------------------------------- */
.encabezado {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--alto-encabezado);
  display: flex; align-items: center;
  background: rgba(20, 19, 19, 0); color: var(--perla);
  transition: background-color var(--transicion), box-shadow var(--transicion);
}
.encabezado.fijo, .menu-abierto .encabezado {
  background: rgba(20, 19, 19, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--linea-oscura);
}
.encabezado .contenedor { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.logo img { width: 270px; max-width: 100%; height: auto; }
@media (max-width: 1100px) { .logo img { width: 250px; } }
@media (max-width: 700px) { .logo img { width: 220px; } }
.navegacion { display: flex; align-items: center; gap: var(--space-8); }
.navegacion ul { display: flex; gap: var(--space-6); }
.navegacion ul a {
  position: relative; font-size: 15px; font-weight: 500; color: var(--perla); padding: 8px 0;
}
.navegacion ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--verde-luz); transform: scaleX(0); transform-origin: left; transition: transform var(--transicion);
}
.navegacion ul a:hover::after, .navegacion ul a[aria-current="page"]::after { transform: scaleX(1); }
.hamburguesa { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.hamburguesa span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--perla); transition: transform var(--transicion), opacity var(--transicion), width var(--transicion); }
.hamburguesa span:last-child { width: 14px; align-self: center; margin-left: -8px; background: var(--verde-luz); }
.menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
.menu-abierto .hamburguesa span:nth-child(3) { width: 22px; margin-left: 0; transform: translateY(-7.5px) rotate(-45deg); }

/* Hero -------------------------------------------------------------------- */
.hero {
  min-height: min(100svh, 920px); padding: calc(var(--alto-encabezado) + 72px) 0 40px;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate;
}
canvas.senal { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
/* Escena de puntos (inicio): Hero y Cifras comparten un fondo de puntos que sigue la página.
   El lienzo es pegajoso, del tamaño de la ventana, y no ocupa espacio (margen negativo). Sin JS queda el negro liso. */
/* clip-path recorta el lienzo sticky (que con margin-bottom negativo se saldría por abajo) sin romper el sticky */
.escena-puntos { position: relative; isolation: isolate; background: var(--carbon-profundo); clip-path: inset(0); }
.escena-puntos > .hero, .escena-puntos > .cifras { background: transparent; }
canvas.cascada { display: block; position: sticky; top: 0; width: 100%; height: 100vh; margin-bottom: -100vh; z-index: -2; pointer-events: none; }
/* Modo ola (encabezados interiores): el lienzo llena su sección, sin sticky. Debajo de la viñeta (::before, z -1). */
canvas.cascada[data-modo="ola"] { position: absolute; inset: 0; height: 100%; margin: 0; }
/* Viñeta: el texto vive en la zona oscura, la luz queda del lado opuesto */
.hero::before, .hero-interior::before, .contacto::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 19, 19, .92) 0%, rgba(20, 19, 19, .55) 45%, rgba(20, 19, 19, 0) 70%);
}
.hero-rejilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: var(--space-8); flex: 1; }
.hero-texto { max-width: 680px; }
.hero h1 { margin-bottom: var(--space-6); }
.hero-datos { position: relative; height: 340px; }
.hero-datos li {
  position: absolute; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-md);
  background: rgba(20, 19, 19, .82); border: 1px solid var(--linea-oscura);
  font-family: var(--mono); font-size: 13px; color: var(--perla); white-space: nowrap;
  animation: flotar 8s ease-in-out infinite;
}
.hero-datos b { color: var(--verde-luz); font-weight: 500; }
.hero-datos i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-luz); box-shadow: 0 0 10px var(--verde-luz); }
.hero-datos .d1 { top: 6%; left: 8%; }
.hero-datos .d2 { top: 44%; right: 0; animation-delay: -2.6s; }
.hero-datos .d3 { bottom: 4%; left: 20%; animation-delay: -5.2s; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.confianza {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8);
  margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--linea-oscura);
}
.confianza ul, .logos-clientes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
/* Logos de clientes: siluetas en perla (el color va dentro del SVG); el alto se ajusta por logo para igualar su peso visual */
.confianza li, .logos-clientes li { display: flex; opacity: .7; }
.confianza img, .logos-clientes img { display: block; width: auto; height: var(--alto-logo, 28px); }
.logo-bombardier { --alto-logo: 24px; }
.logo-topre { --alto-logo: 22px; }
.logo-ccl { --alto-logo: 30px; }
.logo-graphic-packaging { --alto-logo: 38px; }
.logo-brp { --alto-logo: 40px; }

/* Hero interior (páginas internas) */
.hero-interior { padding: calc(var(--alto-encabezado) + 88px) 0 88px; overflow: hidden; isolation: isolate; }
.hero-interior h1 { font-size: clamp(38px, 5.4vw, 60px); max-width: 16ch; margin-bottom: var(--space-6); }
.indice { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-12); }
.indice a {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--linea-oscura); background: rgba(20, 19, 19, .7); font-weight: 500; color: var(--perla);
  transition: border-color var(--transicion), color var(--transicion);
}
.indice a .etiqueta { color: var(--verde-luz); }
.indice a:hover { border-color: var(--verde-luz); }
.indice a:hover .icono { color: var(--verde-luz); }

/* Cifras ------------------------------------------------------------------ */
.cifras { padding: var(--space-16) 0; background: var(--gris-claro); border-bottom: 1px solid var(--linea-clara); }
.cifras.oscuro { border-bottom-color: var(--linea-oscura); }
/* Una cifra grande con tres líneas a su derecha; la cifra mide lo mismo que las tres líneas juntas */
/* Dos columnas iguales: el hueco entre la cifra y las líneas queda en el centro exacto de la franja */
/* --l baja en pantallas angostas para que «Visión Multidisciplinaria» (~10.3 l de ancho) quepa en su mitad: (100vw − 32 px) / 21.5 */
.cifra-lema { --l: clamp(13px, min(4.2vw, (100vw - 32px) / 21.5), 26px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: calc(var(--l) * .9); margin: 0; }
.cifra-lema .dato { justify-self: end; }
.cifra-lineas { justify-self: start; white-space: nowrap; }
.cifra-lema .dato { font-family: var(--mono); font-size: calc(var(--l) * 4.4); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--perla); }
.cifra-lineas { display: flex; flex-direction: column; font-size: var(--l); font-weight: 500; line-height: 1.2; color: var(--perla); }

/* Perfiles (pestañas) ---------------------------------------------------- */
.pestanas {
  display: flex; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -2px 0 var(--linea-clara);   /* riel bajo todas las pestañas (opción B aprobada) */
  margin-bottom: var(--space-8); position: relative;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  flex: 1 0 0; min-width: max-content; padding: 14px 18px; border-radius: 0; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave-claro);
  transition: background-color var(--transicion), color var(--transicion), box-shadow var(--transicion);
}
.pestanas button:hover { color: var(--carbon); box-shadow: inset 0 -3px 0 rgba(66, 15, 102, .25); }
.pestanas button[aria-selected="true"] { color: var(--morado); box-shadow: inset 0 -3px 0 var(--morado); }
/* Con JS el subrayado es una sola barrita que se desliza bajo la pestaña elegida (sitio.js) */
.js .pestanas button[aria-selected="true"] { box-shadow: none; }
.pestanas-barra {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--morado); pointer-events: none; clip-path: inset(0);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), width .5s cubic-bezier(.2, .7, .2, 1), clip-path .5s cubic-bezier(.2, .7, .2, 1) .4s;
}
.perfiles[data-entrada="espera"] .pestanas-barra { clip-path: inset(0 50%); }
.perfiles-pausa {
  display: block; margin: 0 0 var(--space-2) auto; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave-claro);
}
.perfiles-pausa:hover { color: var(--morado); }
.perfiles-pausa[hidden] { display: none; }
.perfil { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-12); align-items: stretch; }
/* Paneles apilados en la misma celda: la sección mide lo del perfil más alto y el cierre no se mueve al cambiar de pestaña */
.js .perfiles-paneles { display: grid; }
.js .perfiles-paneles > .perfil { grid-area: 1 / 1; align-self: start; }
.js .perfil[data-oculto] { visibility: hidden; }
.js .perfil:not([data-oculto]) { animation: aparecer .45s ease both; }
/* Entrada (sitio.js): al llegar a la sección, la pestaña elegida «se pulsa» y después aparece su contenido */
.perfiles[data-entrada="espera"] .pestanas button[aria-selected="true"] { color: var(--texto-suave-claro); box-shadow: none; }
.perfiles[data-entrada="espera"] .perfil:not([data-oculto]) { opacity: 0; animation: none; }
.perfiles[data-entrada="activa"] .pestanas button[aria-selected="true"] { animation: pestana-pulsar .6s cubic-bezier(.2, .7, .2, 1) .2s both; }
.perfiles[data-entrada="activa"] .perfil:not([data-oculto]) { animation: aparecer .6s cubic-bezier(.2, .7, .2, 1) .65s both; }
@keyframes pestana-pulsar {
  0% { color: var(--texto-suave-claro); background: transparent; transform: none; }
  40% { transform: scale(.95); background: rgba(66, 15, 102, .1); }
  100% { color: var(--morado); background: transparent; transform: none; }
}
/* Patrón de puntos de fondo en Perfiles (sitio.js decide dónde dibuja: franja superior y lado derecho) */
.perfiles { position: relative; overflow-x: clip; }
.perfiles > .contenedor { position: relative; z-index: 1; }
.patron-puntos { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
/* Capa de la transición Cifras → Perfiles (sitio.js): encima de las secciones, debajo del encabezado */
.migracion-puntos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.perfil + .perfil { margin-top: var(--space-16); }
.js .perfil + .perfil { margin-top: 0; }
.perfil .cita { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.25; color: var(--morado); margin-bottom: var(--space-8); }
.perfil dl { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.perfil dt { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave-claro); }
.perfil dd { font-size: 18px; margin-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.chips li { font-family: var(--mono); font-size: 13px; padding: 6px 12px; border-radius: 999px; background: rgba(66, 15, 102, .07); color: var(--morado); }
.perfil-disc { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.perfil-disc a, .perfil-disc span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--carbon); border-bottom: 1.5px solid var(--linea-clara); padding-bottom: 2px; }
.perfil-disc a:hover { border-color: var(--morado); color: var(--morado); }
.perfil-disc .icono { color: var(--morado); }
.perfiles-cierre { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--linea-clara); text-align: center; text-wrap: balance; font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--morado); }
.perfil-caso {
  position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--carbon-profundo);
  box-shadow: var(--sombra-clara);
}
.perfil-caso img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; filter: blur(3px); transition: transform .6s ease, opacity var(--transicion); }
.perfil-caso::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 19, 19, .9) 0%, rgba(20, 19, 19, .15) 60%), rgba(38, 8, 60, .55); }
.perfil-caso-texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--space-6); display: grid; gap: 6px; }
.perfil-caso-texto .etiqueta { color: var(--verde-luz); }
.perfil-caso-texto strong { font-size: 22px; line-height: 1.25; color: var(--perla); }
.ver { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--verde-luz); }
.ver .icono { transition: transform var(--transicion); }
a:hover .ver .icono { transform: translateX(4px); }

/* Convergencia: flujo + disciplinas ---------------------------------------- */
.convergencia { overflow: hidden; }
.convergencia::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(232, 232, 233, .14) 1px, transparent 1.4px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 20%, transparent 75%);
}
/* Diagrama de solución: Sensor → Control → Edge ⟶ MES / Tablero (manual, sección 8) */
.flujo {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr) 48px minmax(0, 1fr);
  grid-template-rows: auto auto; gap: var(--space-4) 0; align-items: center; margin-bottom: var(--space-12);
}
.flujo .nodo {
  display: grid; gap: 4px; text-align: center; padding: 16px 12px; border-radius: var(--radius-md);
  background: #1C1B1B; border: 1.5px solid rgba(232, 232, 233, .22);
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion), opacity .5s ease, filter .5s ease;
}
.flujo .nodo .etiqueta { color: var(--verde-luz); }
.flujo .nodo strong { font-size: 16px; font-weight: 600; }
.flujo .n-sensor { grid-column: 1; grid-row: 1 / 3; }
.flujo .c1 { grid-column: 2; grid-row: 1 / 3; }
.flujo .n-control { grid-column: 3; grid-row: 1 / 3; }
.flujo .c2 { grid-column: 4; grid-row: 1 / 3; }
.flujo .n-edge { grid-column: 5; grid-row: 1 / 3; }
.flujo .bifurca { grid-column: 6; grid-row: 1 / 3; align-self: stretch; }
.flujo .n-mes { grid-column: 7; grid-row: 1; }
.flujo .n-tablero { grid-column: 7; grid-row: 2; }
/* Conectores ortogonales en verde, con un pulso que avanza */
.flujo .con { position: relative; height: 2px; background: var(--verde); border-radius: 2px; }
.flujo .con::after {
  content: ""; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--verde-luz); box-shadow: 0 0 12px 2px rgba(0, 204, 121, .7); animation: pulso-con 3s linear infinite;
}
.flujo .c2::after { animation-delay: 1s; }
@keyframes pulso-con { from { left: -5px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 5px); opacity: 0; } }
.flujo .bifurca { height: auto; background: none; }
.flujo .bifurca::before { content: ""; position: absolute; left: 0; width: 50%; top: calc(50% - 1px); height: 2px; background: var(--verde); }
.flujo .bifurca::after {
  content: ""; position: absolute; left: 50%; right: 0; top: 25%; bottom: 25%; width: auto; height: auto;
  border: 2px solid var(--verde); border-right: 0; border-radius: 6px 0 0 6px; background: none; box-shadow: none; animation: none;
}
/* Pulsos de la bifurcación: siguen el tallo y se reparten a MES y a Tablero, tras los de c1 y c2 */
.flujo .pulso-rama {
  position: absolute; z-index: 1; width: 10px; height: 10px; border-radius: 50%; opacity: 0;
  background: var(--verde-luz); box-shadow: 0 0 12px 2px rgba(0, 204, 121, .7);
  animation: rama-arriba 3s linear 2s infinite;
}
.flujo .pulso-rama.abajo { animation-name: rama-abajo; }
@keyframes rama-arriba {
  0% { left: -5px; top: calc(50% - 5px); opacity: 0; }
  10% { opacity: 1; }
  35% { left: calc(50% - 5px); top: calc(50% - 5px); }
  60% { left: calc(50% - 5px); top: calc(25% - 5px); }
  90% { opacity: 1; }
  100% { left: calc(100% - 5px); top: calc(25% - 5px); opacity: 0; }
}
@keyframes rama-abajo {
  0% { left: -5px; top: calc(50% - 5px); opacity: 0; }
  10% { opacity: 1; }
  35% { left: calc(50% - 5px); top: calc(50% - 5px); }
  60% { left: calc(50% - 5px); top: calc(75% - 5px); }
  90% { opacity: 1; }
  100% { left: calc(100% - 5px); top: calc(75% - 5px); opacity: 0; }
}
.flujo .nodo.encendido, .flujo .nodo.fijo { border-color: var(--verde-luz); box-shadow: 0 0 24px rgba(0, 204, 121, .25); }
.flujo .nodo.encendido { transform: translateY(-3px); }
.flujo.estatico .nodo:not(.fijo) { border-style: dashed; }
.flujo.estatico .nodo:not(.fijo) .etiqueta { color: var(--texto-suave-oscuro); }

.disciplinas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.disciplina {
  position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
  background: #1C1B1B; border: 1px solid var(--linea-oscura);
  transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion), filter .5s ease;
}
.disciplina img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; filter: saturate(.9); transition: transform .6s ease; }
.disciplina.activa { border-color: rgba(0, 204, 121, .6); }
.disciplina.activa .icono { color: var(--verde-luz); }
/* Sin elevación ni zoom: la tarjeta es informativa (no enlace); el borde marca el nodo del flujo. */
.disciplina:hover { border-color: rgba(0, 204, 121, .6); }
.disciplina:hover .icono { color: var(--verde-luz); filter: drop-shadow(0 0 6px rgba(0, 204, 121, .6)); }
.disciplina .contenido { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); flex: 1; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.disciplina .etiqueta b { color: var(--verde-luz); font-weight: 500; margin-right: 8px; }
.disciplina .icono { color: var(--perla); transition: color var(--transicion), filter var(--transicion); }
.disciplina .frase { color: var(--texto-suave-oscuro); font-size: 15px; flex: 1; }
/* Línea conectora de la disciplina activa (la crea sitio.js) y desaturación de lo inactivo */
.convergencia .contenedor { position: relative; }
.conectores { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.conectores path {
  fill: none; stroke: var(--verde-luz); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(0, 204, 121, .5)); transition: opacity .25s;
}
.convergencia.hay-activa .disciplina:not(.activa) { filter: saturate(.15) brightness(.7); }
.convergencia.hay-activa .flujo .nodo:not(.encendido) { opacity: .45; filter: saturate(.2); }
.nota-soporte { margin-top: var(--space-8); }
.nota-soporte a { color: var(--verde-luz); border-bottom: 1px solid currentColor; }

/* Panel demo --------------------------------------------------------------- */
.panel { background: var(--gris-claro); }
.panel-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-16); align-items: center; }
.panel h2 { margin-bottom: var(--space-4); }
.capacidades { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.capacidades li { display: flex; gap: var(--space-4); }
.capacidades .icono { color: var(--morado); margin-top: 2px; }
.capacidades h3 { font-size: 17px; }
.capacidades p { font-size: 15px; color: var(--texto-suave-claro); }
.enlace-url { font-family: var(--mono); font-size: 14px; color: var(--morado); border-bottom: 1px solid currentColor; }
.maqueta-marco figcaption { margin-top: var(--space-3); font-size: 13px; color: var(--texto-suave-claro); text-align: right; }
/* Panel con capturas reales: capacidades en rejilla y tira de tres capturas */
.captura img { width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--sombra-clara); }
.captura figcaption { margin-top: var(--space-3); font-size: 14px; color: var(--texto-suave-claro); }
.capacidades-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-12); margin-top: var(--space-16); }
.panel-capturas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-16); align-items: start; }
@media (max-width: 960px) { .capacidades-panel, .panel-capturas { grid-template-columns: 1fr; } }
.maqueta {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--carbon-profundo); color: var(--perla);
  box-shadow: 0 30px 60px rgba(20, 19, 19, .25), 0 0 0 1px rgba(20, 19, 19, .08);
  font-size: 13px;
}
.maqueta-barra { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #1C1B1B; border-bottom: 1px solid var(--linea-oscura); }
.maqueta-barra i { width: 10px; height: 10px; border-radius: 50%; background: #3A3839; }
.maqueta-barra span { margin-left: 10px; font-family: var(--mono); font-size: 12px; color: var(--texto-suave-oscuro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vivo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--verde-luz); flex: none; }
.vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde-luz); animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .25; } }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; }
.kpi { padding: 14px; border-radius: var(--radius-md); background: #1C1B1B; border: 1px solid var(--linea-oscura); }
.kpi small, .grafica small { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave-oscuro); }
.kpi b { display: block; font-family: var(--mono); font-size: clamp(18px, 2vw, 26px); font-weight: 500; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.kpi b.ok { color: var(--verde-luz); }
.kpi .var { font-family: var(--mono); font-size: 12px; color: var(--texto-suave-oscuro); } /* acero solo en ≥ 18 px (manual) */
.maquinas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
.maquina { padding: 12px 14px; border-radius: var(--radius-md); background: #1C1B1B; border: 1px solid var(--linea-oscura); }
.maquina h4 { font-size: 13px; font-weight: 600; }
.maquina .t { display: block; font-family: var(--mono); font-size: 18px; margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.estado { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 3px 7px; border-radius: var(--radius-sm); white-space: nowrap; }
.estado.op { background: rgba(0, 204, 121, .14); color: var(--verde-luz); }
.estado.paro { background: rgba(226, 109, 90, .16); color: #F29684; } /* 5.4:1 */
.estado.mtto { background: rgba(224, 169, 59, .16); color: var(--ambar); }
.barra-prog { height: 4px; border-radius: 4px; background: #2C2A2B; overflow: hidden; }
.barra-prog i { display: block; height: 100%; width: var(--avance, 50%); background: var(--verde-luz); border-radius: 4px; transition: width 1s ease; }
.maquina[data-estado="paro"] .barra-prog i { background: var(--coral); }
.maquina[data-estado="mtto"] .barra-prog i { background: var(--ambar); }
.grafica { padding: 16px; }
.barras { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-top: 10px; background-image: linear-gradient(rgba(232, 232, 233, .06) 1px, transparent 1px); background-size: 100% 22.5px; }
.barras i { flex: 1; height: var(--alto, 50%); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--verde-luz), rgba(0, 178, 106, .5)); transition: height 1s ease; }
.barras i.baja { background: var(--acero); }

/* Proyectos -------------------------------------------------------------- */
.casos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12) var(--space-6); }
.caso { display: flex; flex-direction: column; }
.caso-media {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--carbon-profundo); margin-bottom: var(--space-4);
}
.caso-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter var(--transicion); }
button.caso-media:hover img { transform: scale(1.04); filter: brightness(.8); }
.play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--verde-luz); color: var(--morado);
  box-shadow: 0 0 0 8px rgba(0, 204, 121, .25); transition: transform var(--transicion), box-shadow var(--transicion);
}
.play .icono { margin-left: 3px; }
button.caso-media:hover .play { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(0, 204, 121, .3); }
.insignia {
  position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: var(--radius-sm);
  background: rgba(20, 19, 19, .8); color: var(--perla); font-family: var(--mono); font-size: 12px;
}
.caso .etiqueta { color: var(--morado); }
.caso h3 { margin: 6px 0 8px; font-size: 21px; }
.caso .cuerpo > p:not(.etiqueta) { color: var(--texto-suave-claro); font-size: 16px; }

/* Antes / después con trazo de convergencia */
.antes-despues { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: stretch; margin: var(--space-4) 0; }
.antes-despues > div { padding: 12px 14px; border-radius: var(--radius-md); }
.antes-despues p { color: var(--carbon); font-size: 14px; line-height: 1.45; margin-top: 4px; }
.antes { background: var(--gris-claro); border: 1px solid var(--linea-clara); }
.antes .etiqueta { color: var(--texto-suave-claro); }
.despues { background: rgba(0, 204, 121, .08); border: 1px solid rgba(0, 178, 106, .45); }
.despues .etiqueta { color: #00764A; }
.trazo { align-self: center; width: 22px; height: 2px; border-radius: 2px; background: var(--verde); position: relative; }
.trazo::after { content: ""; position: absolute; right: -1px; top: -3px; width: 8px; height: 8px; border-top: 2px solid var(--verde); border-right: 2px solid var(--verde); border-radius: 1px; transform: rotate(45deg); }

.vineta { display: grid; gap: 8px; }
.vineta li { position: relative; padding-left: 22px; font-size: 15px; }
.vineta li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; border-radius: 2px; background: var(--verde); }
.vineta.dos-columnas { grid-template-columns: 1fr 1fr; gap: 10px var(--space-6); margin-bottom: var(--space-2); }

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-12); }
.filtros button {
  padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--linea-clara); font-size: 15px; font-weight: 600; color: var(--texto-suave-claro);
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.filtros button:hover { border-color: var(--morado); color: var(--morado); }
.filtros button[aria-pressed="true"] { background: var(--morado); border-color: var(--morado); color: var(--verde-luz); }
.contador { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--texto-suave-claro); }
.caso.filtrado { display: none; }
.nota-clientes { margin-top: var(--space-12); font-size: 14px; color: var(--texto-suave-claro); }

/* Lista de proyectos (/proyectos): tarjeta oscura, bento de casos principales y Antes / Con ATPI ---------- */
.casos-detalle .caso { background: var(--carbon-profundo); color: var(--perla); border-radius: var(--radius-lg); overflow: hidden; }
.casos-detalle .caso-media { border-radius: 0; margin-bottom: 0; }
.casos-detalle .caso .cuerpo { display: flex; flex-direction: column; flex: 1; padding: var(--space-6); }
.casos-detalle .caso .etiqueta { color: var(--verde-luz); }
.casos-detalle .caso h3 { color: var(--perla); }
.casos-detalle .caso .cuerpo > p:not(.etiqueta) { color: var(--texto-suave-oscuro); }
.casos-detalle .ver-claro { align-self: flex-start; margin-top: auto; padding-top: var(--space-4); color: var(--verde-luz); }
/* Indicador de proyectos descritos sin el nombre de la planta (--acero: 4.75:1 sobre carbón profundo) */
.casos-detalle .caso .etiqueta .confidencial {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid rgba(127, 129, 132, .6); border-radius: var(--radius-sm);
  color: var(--acero); font-size: 10px; letter-spacing: .08em; vertical-align: 1px; white-space: nowrap;
}
/* Antes / Con ATPI: dos bloques lado a lado; se apilan cuando no caben */
.casos-detalle .antes-despues { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); }
.casos-detalle .antes-despues .trazo { display: none; }
.casos-detalle .antes-despues > div { padding: 12px 14px; }
.casos-detalle .antes-despues .etiqueta { font-size: 11px; }
.casos-detalle .antes-despues p { margin-top: 6px; font-size: 14px; line-height: 1.45; }
.casos-detalle .caso .antes { background: rgba(232, 232, 233, .05); border: 1px solid transparent; }
.casos-detalle .caso .antes .etiqueta { color: #8C8E91; }  /* --acero da 4.26:1 sobre este fondo; este gris da 5.06:1 */
.casos-detalle .caso .antes p { color: #9FA1A4; }
.casos-detalle .caso .despues { background: rgba(0, 204, 121, .10); border: 1px solid rgba(0, 204, 121, .35); }
.casos-detalle .caso .despues .etiqueta { color: var(--verde-luz); }
.casos-detalle .caso .despues p { color: var(--perla); }

/* Bento (>960 px): Bombardier a la izquierda en 2 filas; CCL y TOPRE apilados a la derecha (7 : 5 ≈ 1.4fr / 1fr).
   Los demás casos van debajo en la cuadrícula normal. Con un filtro activo, el JS añade .sin-bento y todo vuelve a la cuadrícula uniforme. */
@media (min-width: 961px) {
  .casos-detalle:not(.sin-bento) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .casos-detalle:not(.sin-bento) .caso { grid-column: span 4; }
  .casos-detalle:not(.sin-bento) .caso-principal:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
  .casos-detalle:not(.sin-bento) .caso-principal:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
  .casos-detalle:not(.sin-bento) .caso-principal:nth-child(3) { grid-column: 8 / 13; grid-row: 2; }
  .casos-detalle:not(.sin-bento) .caso-principal h3 { font-size: 24px; }
  .casos-detalle:not(.sin-bento) .caso-principal .cuerpo > p:not(.etiqueta) { font-size: 17px; }
  /* Como en la maqueta aprobada: CCL y TOPRE sin foto dentro del bento (con foto, Bombardier llegaba a ~1330 px de alto) */
  .casos-detalle:not(.sin-bento) .caso-principal:nth-child(n+2) .caso-media { display: none; }
  /* La tarjeta grande reparte su alto: la foto o el video ocupan lo que sobra */
  .casos-detalle:not(.sin-bento) .caso-principal:nth-child(1) h3 { font-size: 30px; }
  .casos-detalle:not(.sin-bento) .caso-principal:nth-child(1) .caso-media { flex: 1 1 auto; aspect-ratio: auto; min-height: 340px; }
  .casos-detalle:not(.sin-bento) .caso-principal:nth-child(1) .caso-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .casos-detalle:not(.sin-bento) .caso-principal:nth-child(1) .antes-despues p { font-size: 16px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .casos-detalle:not(.sin-bento) .caso:not(.caso-principal) { grid-column: span 6; }
}
/* ≤960 px: sin bento; los 3 principales ocupan todo el ancho y los demás siguen la cuadrícula normal */
@media (max-width: 960px) {
  .casos-detalle:not(.sin-bento) .caso-principal { grid-column: 1 / -1; }
}
@media (min-width: 701px) and (max-width: 960px) {
  .casos-detalle:not(.sin-bento) .caso-principal .caso-media { aspect-ratio: 16 / 9; }
}

/* Etiqueta sobre capturas que muestran cifras de la demo (/panel) */
.captura, .demo-imagen { position: relative; }
.dato-demo {
  position: absolute; top: 10px; right: 10px; z-index: 2; padding: 3px 8px; border-radius: var(--radius-sm); pointer-events: none;
  background: rgba(20, 19, 19, .85); border: 1px solid rgba(232, 232, 233, .25); color: var(--perla);
  font-family: var(--mono); font-size: 10px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase;
}

/* Proceso ---------------------------------------------------------------- */
.pasos { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); }
.pasos::before {
  content: ""; position: absolute; top: 23px; left: 24px; right: 24px; height: 2px; border-radius: 2px; background: var(--linea-clara);
}
.pasos::after {
  content: ""; position: absolute; top: 23px; left: 24px; height: 2px; border-radius: 2px; background: var(--verde);
  width: calc((100% - 48px) * var(--progreso, 0)); transition: width .3s linear;
}
.paso { position: relative; z-index: 1; }
.paso .n {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; margin-bottom: var(--space-6);
  background: var(--blanco); border: 0; font-family: var(--mono); font-weight: 500; color: var(--texto-suave-claro);   /* sin contorno (pedido de Pablo, 2026-10-23) */
  transition: color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.paso.activo .n { background: var(--verde-luz); color: var(--morado); box-shadow: 0 0 0 6px rgba(0, 204, 121, .15); }
.paso h3 { margin-bottom: var(--space-2); }
.paso p { font-size: 15px; color: var(--texto-suave-claro); }

/* Por qué ---------------------------------------------------------------- */
/* Valores: lista completa por defecto; sitio.js añade .valores-destacado (pestañas + panel que rota) */
.porque-rejilla { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: var(--space-12); align-items: center; }
.porque-foto { margin: 0; }
/* object-position: la cara del ingeniero está en el tercio superior; así no se corta al recortar a 16:9 */
.porque-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; border-radius: var(--radius-md); }
.valores { margin-top: var(--space-8); }
/* Íconos de los valores: en la lista (sin JS / celular), en las pestañas y en el panel */
.valores .valores-lista li > .icono { color: var(--perla); }
.valores .valores-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); align-items: center; }
.valores .valores-lista li p { grid-column: 2; }
.valores .valores-lista li { padding: var(--space-6) 0; }
.valores .valores-lista li:first-child { padding-top: 0; }
.valores .valores-lista li + li { border-top: 1px solid var(--linea-oscura); }
.valores .valores-lista h3 { color: var(--verde-luz); margin-bottom: 4px; }
.valores .valores-lista p { color: var(--texto-suave-oscuro); max-width: 60ch; }
.valores-destacado { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); margin-top: var(--space-12); }
.valores-izq { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); padding-right: var(--space-8); }
.valores-tabs { display: flex; flex-direction: column; align-items: flex-start; }
.valores .valor-tab {
  position: relative; padding: 10px 0 14px; border: 0; background: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: var(--space-3);
  font-family: inherit; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; line-height: 1.25; color: var(--texto-suave-oscuro); transition: color var(--transicion);
}
.valores .valor-tab:hover { color: var(--perla); }
.valores .valor-tab[aria-selected="true"] { color: var(--verde-luz); }
/* Barra de progreso: se llena en la duración de la rotación; su fin pasa al siguiente valor */
.valores .valor-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--verde);
  transform-origin: left; transform: scaleX(0); animation: valorBarra var(--rotacion, 5000ms) linear forwards;
}
/* Igual de específica que la regla del activo: su «animation» abreviada volvía a poner play-state en running */
.valores.valores-pausa .valor-tab[aria-selected="true"]::after { animation-play-state: paused; }
.valores-manual .valor-tab::after { display: none; }
@keyframes valorBarra { to { transform: scaleX(1); } }
.valores .valores-pausa-btn {
  padding: 4px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave-oscuro);
}
.valores .valores-pausa-btn:hover { color: var(--perla); }
.valores-panel { display: grid; align-content: start; padding-left: var(--space-12); border-left: 1px solid var(--linea-oscura); }
/* Todos los valores comparten celda: el panel reserva la altura del más largo y no salta al cambiar */
.valores .valor-item {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}
.valores .valor-item.activo { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.valores .valor-nombre {
  display: block; margin-bottom: var(--space-4); font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--verde-luz);
}
.valores .valor-icono { display: block; margin-bottom: var(--space-4); color: var(--perla); }
.valores .valor-texto { font-size: clamp(20px, 2vw, 28px); line-height: 1.3; max-width: 26ch; color: var(--perla); }

/* Tecnologías ------------------------------------------------------------ */
/* Franja de tecnologías en fondo negro (pedido de Pablo, 2026-10-23) */
.tecnologias { padding: var(--space-12) 0; background: var(--carbon-profundo); border-bottom: 1px solid var(--linea-oscura); }
.tecnologias .contenedor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.tecnologias .etiqueta { color: var(--texto-suave-oscuro); }
.tecnologias ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tecnologias li { font-family: var(--mono); font-size: 14px; padding: 8px 14px; border-radius: var(--radius-sm); background: rgba(232, 232, 233, .06); border: 1px solid var(--linea-oscura); color: var(--perla); }

/* Soluciones (página interior) -------------------------------------------- */
.solucion { border-bottom: 1px solid var(--linea-clara); }
.solucion-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-16); align-items: center; }
.solucion.invertida .panel-textura { order: 2; }
/* Panel oscuro con la textura de la disciplina; la foto se apoya del lado del texto
   y el núcleo de luz queda en la esquina opuesta. */
.panel-textura {
  position: relative; aspect-ratio: 4 / 4.2; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 50% 50%, #1C1B1B, var(--carbon-profundo));
}
.panel-textura canvas.senal { z-index: 0; }
.panel-textura img {
  position: absolute; right: 0; bottom: 0; z-index: 1; width: 80%; height: 76%; object-fit: cover;
  border-radius: var(--radius-lg) 0 var(--radius-lg) 0; box-shadow: -12px -12px 40px rgba(0, 0, 0, .45);
}
.panel-textura.a-la-derecha img { right: auto; left: 0; border-radius: 0 var(--radius-lg) 0 var(--radius-lg); box-shadow: 12px -12px 40px rgba(0, 0, 0, .45); }
.solucion-n {
  position: absolute; z-index: 2; right: 20px; top: 12px; font-family: var(--mono); font-size: clamp(48px, 6vw, 80px); font-weight: 500; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(232, 232, 233, .55);
}
.panel-textura.a-la-derecha .solucion-n { right: auto; left: 20px; }
.solucion h2 { margin-bottom: var(--space-4); }
.solucion .entrada { margin-bottom: var(--space-4); color: var(--carbon); font-weight: 500; }
.solucion-texto > p:not(.ceja):not(.entrada) { color: var(--texto-suave-claro); margin-bottom: var(--space-6); }
.relacionados { margin: var(--space-8) 0; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--gris-claro); }
.relacionados ul { display: grid; margin-top: var(--space-3); }
.relacionados a { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; font-weight: 600; border-bottom: 1px solid var(--linea-clara); }
.relacionados li:last-child a { border-bottom: 0; }
.relacionados a span { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--morado); text-transform: uppercase; letter-spacing: .06em; min-width: 120px; }
.relacionados a .icono { margin-left: auto; color: var(--morado); transition: transform var(--transicion); }
.relacionados a:hover .icono { transform: translateX(4px); }
.soporte-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.servicio { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-6); padding: var(--space-4); border-radius: var(--radius-lg); background: #1C1B1B; border: 1px solid var(--linea-oscura); }
.servicio img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); aspect-ratio: 1; }
.servicio > div { padding: var(--space-2) var(--space-2) var(--space-2) 0; }
.servicio .icono { color: var(--verde-luz); }
.servicio p { margin: var(--space-2) 0 var(--space-4); font-size: 15px; }
.servicio .vineta li { color: var(--perla); }

/* Llamada final ---------------------------------------------------------- */
.cta-final { overflow: hidden; isolation: isolate; text-align: center; }
.cta-final .haces { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.cta-final .ceja { justify-content: center; }
.cta-final h2 { font-size: clamp(34px, 4.6vw, 56px); max-width: 18ch; margin: 0 auto var(--space-6); }
.cta-final .entrada { margin: 0 auto; }
.cta-final .acciones { justify-content: center; }

/* Contacto --------------------------------------------------------------- */
.contacto { padding: var(--seccion) 0; overflow: hidden; isolation: isolate; }
.contacto-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-16); align-items: start; }
.contacto-texto h2 { font-size: clamp(38px, 5vw, 58px); margin-bottom: var(--space-6); }
.siguientes { display: grid; gap: var(--space-4); margin: var(--space-8) 0; }
.siguientes li { display: flex; gap: var(--space-4); align-items: flex-start; }
.siguientes .icono { color: var(--verde-luz); margin-top: 2px; }
.siguientes strong { display: block; font-weight: 600; }
.siguientes span { font-size: 15px; color: var(--texto-suave-oscuro); }
.tarjeta-contacto { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--linea-oscura); background: rgba(28, 27, 27, .85); }
.tarjeta-contacto ul, .pie-contacto { display: grid; gap: var(--space-3); }
.tarjeta-contacto li, .pie-contacto li { display: flex; align-items: center; gap: var(--space-3); }
.tarjeta-contacto .icono { color: var(--verde-luz); }
.tarjeta-contacto a { color: var(--perla); border-bottom: 1px solid transparent; overflow-wrap: anywhere; }
.tarjeta-contacto a:hover { border-color: var(--verde-luz); }
.clientes-mini { margin-top: var(--space-6); font-size: 15px; display: grid; gap: var(--space-3); }
/* Botón de salto al formulario: solo cuando el formulario queda debajo del texto (≤960 px) */
.ir-formulario { display: none; margin-top: var(--space-6); }
#solicitud { scroll-margin-top: calc(var(--alto-encabezado) + 16px); }

.formulario {
  position: relative; padding: clamp(24px, 3.5vw, 40px); border-radius: var(--radius-lg); background: var(--blanco); color: var(--carbon);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.oscuro .formulario h2 { font-size: 28px; color: var(--carbon); }
.oscuro .formulario p, .oscuro .formulario .nota-form { color: var(--texto-suave-claro); }
.formulario .nota-form { font-size: 14px; margin: 6px 0 var(--space-6); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.campo { display: grid; gap: 6px; margin-bottom: var(--space-4); }
.campo label { font-size: 15px; font-weight: 600; }
.opcional { font-weight: 400; color: var(--texto-suave-claro); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--linea-clara); background: var(--blanco); font-size: 16px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 4px rgba(66, 15, 102, .12); }
.mensaje-error { display: none; font-size: 14px; color: #B3261E; }
.campo.error input, .campo.error select, .campo.error textarea { border-color: #B3261E; }
.campo.error .mensaje-error { display: block; }
.acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 400 !important; cursor: pointer; }
.acepto input { width: 20px; height: 20px; min-height: 0; padding: 0; margin-top: 2px; accent-color: var(--morado); flex: none; }
.acepto a { color: var(--morado); text-decoration: underline; }
.miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario .boton { margin-top: var(--space-2); }
.formulario .boton[disabled] { background: var(--perla); color: var(--acero); box-shadow: none; cursor: progress; }
.estado-envio { margin-top: var(--space-4); padding: 14px 16px; border-radius: var(--radius-md); font-size: 15px; }
.oscuro .estado-envio.exito { background: rgba(0, 204, 121, .1); border: 1px solid var(--verde); color: #00593A; }
.oscuro .estado-envio.error { background: rgba(179, 38, 30, .07); border: 1px solid #B3261E; color: #8C1D18; }

/* Pie --------------------------------------------------------------------- */
.pie { background: var(--carbon-profundo); color: var(--texto-suave-oscuro); padding: var(--space-16) 0 var(--space-8); border-top: 1px solid var(--linea-oscura); }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-8); }
.pie-marca p { margin-top: var(--space-4); font-size: 15px; }
.pie-titulo { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--perla); margin-bottom: var(--space-4); }
.pie ul { display: grid; gap: 10px; font-size: 15px; }
.pie a:hover { color: var(--verde-luz); }
.pie-contacto .icono { color: var(--verde-luz); }
.pie-contacto a { overflow-wrap: anywhere; }
.pie-final { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--linea-oscura); font-size: 14px; }

/* Visor de video ---------------------------------------------------------- */
.visor { margin: auto; padding: 0; border: 0; background: transparent; width: min(960px, calc(100% - 32px)); max-height: calc(100svh - 32px); color: var(--perla); }
.visor::backdrop { background: rgba(10, 9, 9, .88); }
.visor-caja { background: var(--carbon-profundo); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--linea-oscura); }
.visor-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-6); }
.visor-cabeza .etiqueta { color: var(--verde-luz); }
.visor-cabeza h2 { font-size: 20px; margin-top: 2px; }
.visor-cerrar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--perla); flex: none; }
.visor-cerrar:hover { background: rgba(232, 232, 233, .1); }
.visor-video { background: #000; }
.visor-video video { width: 100%; max-height: calc(100svh - 140px); margin: 0 auto; }
.visor.vertical { width: min(460px, calc(100% - 32px)); }

/* WhatsApp flotante ------------------------------------------------------ */
.whatsapp-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: var(--verde-luz); color: var(--morado);
  box-shadow: 0 6px 18px rgba(66, 15, 102, .45); transition: transform var(--transicion), box-shadow var(--transicion);
}
.whatsapp-flotante:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 26px rgba(66, 15, 102, .6); }
.pagina-contacto .whatsapp-flotante { display: none; }

/* Aviso legal y 404 ------------------------------------------------------- */
.legal { padding-top: calc(var(--alto-encabezado) + 72px); }
.legal .contenedor { max-width: 820px; }
.legal h1 { font-size: clamp(34px, 4.4vw, 48px); margin-bottom: var(--space-6); }
.legal h2 { font-size: 24px; margin: var(--space-12) 0 var(--space-4); }
.legal p, .legal li { margin-bottom: var(--space-3); max-width: 72ch; }
.legal ul { list-style: disc; padding-left: 1.2em; }
.legal a { color: var(--morado); text-decoration: underline; }
.error-404 { min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.error-404 .codigo { font-family: var(--mono); font-size: clamp(96px, 16vw, 180px); line-height: 1; color: var(--verde-luz); font-weight: 500; }
.error-404 h1 { font-size: clamp(32px, 4vw, 48px); margin: var(--space-4) 0; }

/* Variante morada (manual: piezas institucionales) ------------------------ */
.morado { background: var(--morado-noche); overflow: hidden; isolation: isolate; }

/* Ícono de marca: convergencia */
.marca-convergencia { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--space-4); border-radius: 50%; border: 1px solid var(--linea-oscura); color: var(--perla); }
.marca-convergencia .icono .punto { fill: var(--verde-luz); }

/* Foto anotada (manual, sección 7): marcadores verdes numerados y rótulos en mono */
.foto-anotada { margin: 0; }
.foto-anotada-imagen { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--carbon-profundo); }
.foto-anotada-imagen img { width: 100%; }
/* Retícula de puntos al 20 % sobre la foto */
.foto-anotada-imagen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2;
  background-image: radial-gradient(var(--perla) 1px, transparent 1.4px); background-size: 16px 16px;
}
.marcas { display: none; }
.js .marcas { display: block; position: absolute; inset: 0; z-index: 1; }
.marca {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--verde-luz); color: var(--morado); font-family: var(--mono); font-size: 13px; font-weight: 500;
  box-shadow: 0 0 0 4px rgba(0, 204, 121, .3), 0 4px 12px rgba(0, 0, 0, .5);
}
.foto-anotada figcaption { margin-top: var(--space-4); }
.foto-anotada ol { display: grid; gap: 8px; margin-top: var(--space-3); }
.foto-anotada li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.foto-anotada li b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--morado); color: var(--verde-luz); font-family: var(--mono); font-size: 12px; font-weight: 500; }

/* Retícula de puntos sobre la parte oscura de la foto del perfil */
.perfil-caso::before {
  content: ""; position: absolute; inset: 40% 0 0; z-index: 1; pointer-events: none; opacity: .2;
  background-image: radial-gradient(var(--perla) 1px, transparent 1.4px); background-size: 16px 16px;
  mask-image: linear-gradient(0deg, #000 40%, transparent); -webkit-mask-image: linear-gradient(0deg, #000 40%, transparent);
}
.perfil-caso-texto { z-index: 2; }

/* Migas de pan */
.migas { margin-bottom: var(--space-8); }
.migas ol { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--mono); font-size: 13px; }
.migas li { color: var(--texto-suave-oscuro); }
.migas li + li::before { content: "/"; margin-right: 6px; color: var(--acero); }
.migas a { color: var(--perla); border-bottom: 1px solid transparent; }
.migas a:hover { border-color: var(--verde-luz); }
.migas [aria-current] { color: var(--verde-luz); }

/* Tarjetas: título enlazado */
.caso h3 a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--transicion); }
.caso h3 a:hover { background-size: 100% 1.5px; }
.ver-claro { margin-top: var(--space-3); color: var(--morado); }
.caso:hover .ver-claro .icono { transform: translateX(4px); }

/* Página de detalle de solución */
.que-hacemos .solucion-rejilla { align-items: start; }
.que-hacemos h2 { margin-bottom: var(--space-4); }
.que-hacemos .entrada { color: var(--carbon); margin-bottom: var(--space-6); }
.encaja .flujo { margin-bottom: 0; }
.otras { padding: var(--space-12) 0; border-top: 1px solid var(--linea-clara); }
.otras h2 { margin-bottom: var(--space-4); }
.otras ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.otras a {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md);
  border: 1.5px solid var(--linea-clara); font-weight: 600; transition: border-color var(--transicion);
}
.otras a > .icono:first-child { color: var(--morado); }
.otras a span { display: grid; flex: 1; }
.otras a .icono:last-child { color: var(--morado); transition: transform var(--transicion); }
.otras a:hover { border-color: var(--morado); }
.otras a:hover .icono:last-child { transform: translateX(4px); }

/* Página de detalle de proyecto */
.hero-proyecto h1 { max-width: none; font-size: clamp(34px, 4.4vw, 52px); }
.proyecto-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.proyecto-media .caso-media { margin: 0; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.antes-despues.grande { margin: var(--space-8) 0 var(--space-12); gap: var(--space-4); }
.antes-despues.grande > div { padding: var(--space-6); }
.antes-despues.grande p { font-size: 18px; }
.antes-despues.grande .trazo { width: 40px; }
.proyecto-rejilla { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-12); }
.proyecto-rejilla h2 { margin-bottom: var(--space-4); }
.ficha { display: grid; gap: 0; border-top: 1px solid var(--linea-clara); }
.ficha > div { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-4); padding: 12px 0; border-bottom: 1px solid var(--linea-clara); }
.ficha dt { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave-claro); padding-top: 3px; }
.ficha a { display: inline-flex; align-items: center; gap: 8px; color: var(--morado); font-weight: 600; }
.otros-proyectos { background: var(--gris-claro); }

@media (max-width: 960px) {
  .proyecto-cabeza, .proyecto-rejilla { grid-template-columns: 1fr; }
  .otras ul { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .marca { width: 26px; height: 26px; font-size: 11px; }
  .ficha > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Página /panel (Demo en línea) ------------------------------------------- */
.chips-oscuro { margin-top: var(--space-6); }
.chips-oscuro li { background: rgba(0, 204, 121, .1); color: var(--verde-luz); }
/* Marco de navegador para capturas del panel */
.ventana { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--carbon-profundo); border: 1px solid var(--linea-oscura); box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 204, 121, .08); }
.ventana-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #1C1B1B; border-bottom: 1px solid var(--linea-oscura); }
.ventana-barra i { width: 10px; height: 10px; border-radius: 50%; background: #3A3839; }
.ventana-barra span { margin-left: 10px; font-family: var(--mono); font-size: 12px; color: var(--texto-suave-oscuro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ventana img { width: 100%; }
.demos { background: var(--gris-claro); }
.demos-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.demo { border-radius: var(--radius-lg); overflow: hidden; background: var(--blanco); box-shadow: var(--sombra-clara); display: flex; flex-direction: column; }
.demo-imagen { aspect-ratio: 16 / 9.4; overflow: hidden; background: var(--carbon-profundo); }
.demo-imagen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.demo-cuerpo { padding: var(--space-6) var(--space-8) var(--space-8); }
.demo-cuerpo .etiqueta { color: var(--morado); }
.demo-cuerpo h3 { margin: 6px 0 var(--space-4); font-size: 22px; }
.funcion { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.funcion + .funcion { margin-top: var(--space-16); }
.funcion.invertida .ventana { order: 2; }
.funcion .etiqueta { color: var(--verde-luz); }
.funcion h3 { font-size: clamp(24px, 2.4vw, 30px); margin: 6px 0 var(--space-4); }
.funcion > div > p:not(.etiqueta) { margin-bottom: var(--space-4); }
.funcion .vineta li { color: var(--perla); }
.seguro-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.seguro-rejilla li { padding: var(--space-8); border-radius: var(--radius-lg); border: 1.5px solid var(--linea-clara); }
.seguro-rejilla .icono { color: var(--morado); margin-bottom: var(--space-4); }
.seguro-rejilla h3 { margin-bottom: var(--space-2); }
.seguro-rejilla p { color: var(--texto-suave-claro); font-size: 16px; }
/* Recorrido del dato: módulos con conectores ortogonales en verde (manual, sección 8) */
.tuberia { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.tuberia li { position: relative; display: grid; gap: 4px; padding: 18px 16px; border-radius: var(--radius-md); background: #1C1B1B; border: 1.5px solid rgba(232, 232, 233, .22); }
.tuberia li:last-child { border-color: var(--verde-luz); box-shadow: 0 0 24px rgba(0, 204, 121, .25); }
.tuberia .etiqueta { color: var(--verde-luz); }
.tuberia strong { font-size: 17px; }
.tuberia small { font-size: 14px; color: var(--texto-suave-oscuro); }
.tuberia li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -33px; width: 32px; height: 2px; background: var(--verde); }
.pasos-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.faq .contenedor { max-width: 880px; }
.faq h2 { margin-bottom: var(--space-8); }
.faq-lista { border-top: 1px solid var(--linea-clara); }
.faq details { border-bottom: 1px solid var(--linea-clara); }
.faq summary { position: relative; padding: 20px 44px 20px 0; font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 24px; color: var(--morado); transition: transform var(--transicion); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 44px 20px 0; color: var(--texto-suave-claro); max-width: 72ch; }
.faq summary:hover { color: var(--morado); }
@media (max-width: 960px) {
  .demos-rejilla, .funcion, .seguro-rejilla, .pasos-tres { grid-template-columns: 1fr; }
  .funcion.invertida .ventana { order: 0; }
  .tuberia { grid-template-columns: 1fr; gap: 24px; }
  .tuberia li:not(:last-child)::after { top: auto; bottom: -25px; right: auto; left: 50%; width: 2px; height: 24px; }
}

/* Foto de fondo del hero en clave baja, fundida con la textura ------------ */
.hero-foto {
  position: absolute; inset: 0 0 0 38%; z-index: -3; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.hero-foto img {
  width: 100%; height: 100%; object-fit: cover; opacity: .38;
  filter: grayscale(.35) contrast(1.15) brightness(.62);
  transform-origin: 70% 40%;
  animation: ken-burns 26s ease-in-out infinite alternate;
}
/* Avanza hacia la derecha-arriba, como pide el manual */
@keyframes ken-burns { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.18) translate(2.5%, -2%); } }
@media (max-width: 960px) {
  .hero-foto { inset: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%); mask-image: linear-gradient(180deg, transparent 0%, #000 60%); }
  .hero-foto img { opacity: .28; }
}

/* Titulares que entran palabra por palabra, revelados desde una máscara ---- */
.titular-animado .palabra { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .12em; margin: -.08em 0 -.12em; }
.titular-animado .palabra-in { display: inline-block; transform: translateY(110%); transition: transform .85s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 60ms); }
.titular-animado.visto .palabra-in { transform: none; }
.hero-texto > .titular-animado { animation: none; }

/* El trazo de la ceja crece al aparecer (trazo ATPI que subraya) */
.js .ceja.animable::before { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .7, .2, 1) .1s; }
.js .ceja.animable.visto::before { transform: scaleX(1); }

/* Parallax suave en fotos dentro de marcos con overflow oculto */
.disciplina img, .caso-media img, .perfil-caso img { scale: 1.1; translate: 0 var(--py, 0px); }

/* Entrada del hero: un solo momento de movimiento, escalonado ------------- */
@keyframes entrada-hero { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-texto > *, .hero .confianza, .hero-datos { animation: entrada-hero .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero-texto > :nth-child(2) { animation-delay: .12s; }
.hero-texto > :nth-child(3) { animation-delay: .24s; }
.hero-texto > :nth-child(4) { animation-delay: .36s; }
.hero-texto > :nth-child(5) { animation-delay: .48s; }
/* Nombre de la empresa sobre la ceja: discreto, en perla atenuada (9.5:1 sobre carbón) */
.hero .razon-social { margin: 0 0 var(--space-3); font-size: 15px; font-weight: 500; letter-spacing: .01em; color: var(--texto-suave-oscuro); }
.hero-datos { animation-delay: .5s; }
.hero .confianza { animation-delay: .6s; }

/* Encabezado que se aparta al bajar y vuelve al subir (o al recibir foco) */
.encabezado { transition: background-color var(--transicion), box-shadow var(--transicion), transform .35s cubic-bezier(.2, .7, .2, 1); }
.encabezado.oculto:not(:focus-within) { transform: translateY(-100%); }

/* Animación de aparición -------------------------------------------------- */
@keyframes aparecer { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.revelar.pendiente { opacity: 0; transform: translateY(24px); }
.revelar.visto { animation: aparecer .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--retraso, 0ms); }

/* Responsivo -------------------------------------------------------------- */
@media (max-width: 1100px) {
  .disciplinas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .hero-datos { display: none; }
  .hero-rejilla { grid-template-columns: 1fr; }
  .hamburguesa { display: flex; }
  .navegacion {
    position: fixed; inset: var(--alto-encabezado) 0 auto; flex-direction: column; align-items: stretch; gap: var(--space-6);
    padding: var(--space-6) var(--gutter) var(--space-8); background: rgba(20, 19, 19, .98); border-bottom: 1px solid var(--linea-oscura);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
    max-height: calc(100svh - var(--alto-encabezado)); overflow-y: auto;
  }
  .menu-abierto .navegacion { transform: none; opacity: 1; visibility: visible; }
  .navegacion ul { flex-direction: column; gap: 0; }
  .navegacion ul a { display: block; padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--linea-oscura); }
  .navegacion ul a::after { display: none; }
  .navegacion .boton { min-height: 52px; font-size: 16px; }
}
@media (max-width: 960px) {
  :root { --alto-encabezado: 68px; }
  .porque-rejilla { grid-template-columns: 1fr; gap: var(--space-8); }
  .porque-foto img { aspect-ratio: 16 / 9; }
  .cabeza-seccion, .perfil, .panel-rejilla, .solucion-rejilla, .contacto-rejilla { grid-template-columns: 1fr; }
  .ir-formulario { display: inline-flex; }
  .cabeza-seccion .entrada, .cabeza-seccion > .boton { justify-self: start; }
  .solucion.invertida .panel-textura { order: 0; }
  .panel-textura { aspect-ratio: 4 / 3.4; }
  .pasos { grid-template-columns: 1fr; gap: var(--space-8); }
  .pasos::before, .pasos::after { top: 24px; bottom: 24px; left: 23px; right: auto; width: 2px; height: auto; }
  .pasos::after { height: calc((100% - 48px) * var(--progreso, 0)); bottom: auto; }
  .paso { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--space-6); }
  .paso .n { grid-row: span 2; margin-bottom: 0; }
  .soporte-rejilla { grid-template-columns: 1fr; }
  .flujo { grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
  .flujo .nodo, .flujo .con { grid-column: 1 / 3 !important; grid-row: auto !important; }
  .flujo .con { justify-self: center; width: 2px; height: 28px; }
  .flujo .con:not(.bifurca)::after, .flujo .pulso-rama { display: none; }
  .flujo .bifurca { grid-column: 1 / 3 !important; grid-row: auto !important; height: 28px; width: 100%; }
  .flujo .bifurca::before { left: calc(50% - 1px); width: 2px; top: 0; height: 50%; }
  .flujo .bifurca::after { top: 50%; bottom: 0; left: 25%; right: 25%; border: 2px solid var(--verde); border-bottom: 0; border-radius: 6px 6px 0 0; }
  .flujo .n-mes { grid-column: 1 !important; }
  .flujo .n-tablero { grid-column: 2 !important; }
  .hero::before, .hero-interior::before, .contacto::before { background: linear-gradient(180deg, rgba(20, 19, 19, .9) 0%, rgba(20, 19, 19, .7) 60%, rgba(20, 19, 19, .45) 100%); }
  .perfil-caso { min-height: 280px; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .disciplinas, .casos { grid-template-columns: 1fr; }
  .dos { grid-template-columns: 1fr; gap: 0; }
  .vineta.dos-columnas { grid-template-columns: 1fr; }
  .servicio { grid-template-columns: 1fr; }
  .servicio img { aspect-ratio: 16 / 9; }
  .servicio > div { padding: 0 var(--space-2) var(--space-2); }
  .kpis { gap: 8px; padding: 12px; }
  .kpi { padding: 10px; }
  .kpi .var { display: none; }
  .maquinas { gap: 8px; padding: 0 12px; }
  .maquina .fila { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pie-rejilla { grid-template-columns: 1fr; }
  .acciones .boton { width: 100%; white-space: normal; text-align: center; }
  .antes-despues { grid-template-columns: 1fr; }
  .trazo { transform: rotate(90deg); justify-self: center; margin: 6px 0; }
  .contador { width: 100%; margin-left: 0; }
  .whatsapp-flotante { right: 14px; bottom: 14px; width: 54px; height: 54px; }
  .relacionados a { flex-wrap: wrap; }
  .relacionados a span { min-width: 0; width: 100%; }
  .solucion-n { display: none; }
}

/* Movimiento reducido: sin animaciones decorativas ------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Sin desplazamientos, parallax ni fondos en movimiento... */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .flujo .con:not(.bifurca)::after, .flujo .pulso-rama { display: none; }
  .disciplina img, .caso-media img, .perfil-caso img { translate: none; }
  /* ...pero los contenidos sí aparecen con un fundido suave (no marea y se nota la entrada). */
  @keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
  .revelar.pendiente { opacity: 0; transform: none; }
  .revelar.visto { animation: fundido .8s ease both !important; }
  .hero-texto > *, .hero .confianza, .hero-datos { animation: fundido 1s ease both !important; }
  .hero-texto > :nth-child(2) { animation-delay: .15s !important; }
  .hero-texto > :nth-child(3) { animation-delay: .3s !important; }
  .hero-texto > :nth-child(4) { animation-delay: .45s !important; }
  .hero-texto > :nth-child(5) { animation-delay: .6s !important; }
  .hero .confianza { animation-delay: .6s !important; }
}