/* Industrias SONI: sitio informativo
   Marca: blanco dominante, azules SONI, Montserrat para títulos y Source Sans 3 para textos.
   Fuente: Manual de marca soni/manual-identidad-industrias-soni.md (§§7, 8, 9, 14 y 15). */

/* Fuentes autoalojadas: si los archivos no están en assets/fonts/, el navegador usa el respaldo del sistema. */
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("../assets/fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("../assets/fonts/montserrat-700.woff2") format("woff2"); }
/* 800 para los títulos gigantes de Inicio (11-nov): el archivo de Montserrat es variable (eje de peso), así que sale del mismo woff2, sin descargar otro. */
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap; src: url("../assets/fonts/montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("../assets/fonts/source-sans-3-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url("../assets/fonts/source-sans-3-600.woff2") format("woff2"); }

:root {
  --soni-blue: #00315e;
  --soni-cyan: #009fe3;
  --soni-deep: #001943;
  --soni-pie: #0a2a5c;
  --soni-gray: #707070;
  --soni-text: #383838;
  --soni-ice: #e6f4fc;
  --soni-surface: #f3f6f8;
  --soni-white: #ffffff;
  --alerta: #ff5c39;
  --error: #a3190a;
  --error-bg: #fdecea;
  --exito: #0b6b3a;

  --font-heading: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --content-max: 75rem;
  --radius: 0.5rem;
  --margin: clamp(20px, 3vw, 24px);
  --seccion: clamp(64px, 8vw, 96px);

  --t-press: 140ms;
  --t-hover: 180ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  color-scheme: light;
}

/* Fondo A1 (SONI-VIS-002): degradado suave fijo al viewport. Las bandas de color conservan su fondo. */
body {
  margin: 0;
  background: linear-gradient(160deg, #ffffff 0%, #e6f4fc 62%, #cfeaf8 100%) fixed;
  color: var(--soni-text);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, figure { margin: 0; }
p { max-width: 72ch; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--soni-blue);
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 600; }

a { color: var(--soni-blue); text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
a:hover { color: var(--soni-deep); }

::selection { background: var(--soni-ice); color: var(--soni-deep); }
:focus-visible { outline: 3px solid var(--soni-blue); outline-offset: 3px; border-radius: 2px; }

.contenedor { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--margin); }

.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; /* taste-skill-ignore: texto para lectores de pantalla */
  clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; left: var(--margin); top: -100px; z-index: 30;
  background: var(--soni-blue); color: var(--soni-white); padding: 12px 16px; border-radius: var(--radius);
}
.saltar:focus { top: 12px; color: var(--soni-white); }

/* Marcas [PENDIENTE]: solo visibles en la versión local (ver js/main.js) */
.pendiente { display: none; }
.es-local .pendiente {
  display: block;
  margin: 12px 0;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--alerta);
  color: #1b1b1b;
  font: 600 1rem/1.4 var(--font-body);
}

/* Botones (manual §14.4): primario azul con texto blanco, secundario blanco con borde azul */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: 600 1rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.boton:active { transform: scale(0.97); }
.boton--primario { background: var(--soni-blue); color: var(--soni-white); }
.boton--secundario { background: var(--soni-white); color: var(--soni-blue); border-color: var(--soni-blue); }
.boton--claro { background: var(--soni-white); color: var(--soni-deep); }
.boton--borde-claro { background: transparent; color: var(--soni-white); border-color: var(--soni-white); }
@media (hover: hover) and (pointer: fine) {
  .boton--primario:hover { background: var(--soni-deep); color: var(--soni-white); }
  .boton--secundario:hover { background: var(--soni-ice); color: var(--soni-deep); }
  .boton--claro:hover { background: var(--soni-ice); color: var(--soni-deep); }
  .boton--borde-claro:hover { background: var(--soni-white); color: var(--soni-deep); }
}
.boton[disabled] { opacity: 0.6; cursor: progress; }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--soni-cyan); text-decoration-thickness: 2px;
}
.enlace-flecha::after { content: "→"; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) { .enlace-flecha:hover::after { transform: translateX(4px); } }

/* Encabezado B1 (SONI-VIS-002): vidrio flotante. Queda fijo al desplazarse y el contenido se ve a través del vidrio.
   Respaldo sólido sin backdrop-filter o con prefers-reduced-transparency; sin transiciones con prefers-reduced-motion. */
.encabezado {
  position: sticky; top: 12px; z-index: 20;
  margin: 12px 12px 0;
  border-radius: 20px;
  /* Degradado de Andrés (10-nov): azul claro en el lado del logo que se difumina a blanco hacia el centro; sigue siendo vidrio translúcido */
  background: linear-gradient(90deg, rgba(138, 198, 238, 0.85) 0%, rgba(200, 230, 248, 0.82) 30%, rgba(255, 255, 255, 0.78) 52%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 24px rgba(0, 25, 67, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85); /* taste-skill-ignore: encabezado de vidrio flotante */
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .encabezado { background: var(--soni-white); }
}
@media (prefers-reduced-transparency: reduce) {
  .encabezado { background: var(--soni-white); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Las anclas no quedan tapadas por el encabezado de vidrio */
[id] { scroll-margin-top: 132px; }
/* Lote visual del 31-oct: cabecera con más presencia (+25 %: logo de 64 a 80 px y fila de 72 a 92 px; en móvil 48 a 60 px y 72 a 90 px) */
.encabezado__fila { display: flex; align-items: center; gap: 12px 24px; min-height: 92px; }
.marca { display: inline-flex; margin-right: auto; text-decoration: none; }
.marca__logo { height: 80px; width: auto; }
/* El clic en el logo siempre cae en el enlace al inicio: la imagen no se arrastra, no se selecciona
   ni abre el menú de «guardar imagen» al mantener pulsado en el celular. */
.marca { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.marca__logo { pointer-events: none; -webkit-user-drag: none; }

.menu { display: flex; gap: 4px 20px; }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--soni-text); font-weight: 600; font-size: 1rem; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.menu a:hover { color: var(--soni-blue); border-bottom-color: var(--soni-ice); }
.menu a[aria-current="page"] { color: var(--soni-blue); border-bottom-color: var(--soni-cyan); }
.menu-boton { display: none; }
/* CTA de cotización: en el encabezado por encima de 560 px; dentro del menú desplegable en móvil */
.menu .menu__cta { display: none; color: var(--soni-white); border-bottom: 0; justify-content: center; }
.menu .menu__cta:hover { color: var(--soni-white); }

@media (max-width: 1080px) {
  .encabezado__fila { flex-wrap: wrap; }
  .js .menu-boton {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border: 2px solid var(--soni-blue); border-radius: var(--radius); background: var(--soni-white);
    color: var(--soni-blue); font: 600 0.9375rem/1 var(--font-body); cursor: pointer;
  }
  .menu { order: 3; width: 100%; flex-wrap: wrap; }
  .js .menu { display: none; flex-direction: column; padding: 8px 0 16px; }
  .js .menu.abierto { display: flex; }
  .js .menu a { font-size: 1.0625rem; min-height: 48px; }
}
@media (max-width: 560px) {
  .encabezado__cta { display: none; }
  .encabezado__fila { min-height: 90px; }
  .marca__logo { height: 60px; }
  .menu .menu__cta { display: inline-flex; margin-top: 12px; }
}

/* Secciones */
.seccion { padding-block: var(--seccion); }
.seccion--ajustada { padding-block: 40px 56px; }
/* Translúcidas (11-nov): dejan ver el wireframe fijo; el texto va sobre placas (ver «Páginas interiores: placas»). */
.seccion--hielo { background: rgba(230, 244, 252, 0.5); }
.seccion--superficie { background: rgba(243, 246, 248, 0.5); }
.seccion--profunda { background: var(--soni-deep); color: var(--soni-white); }
.seccion--profunda h2, .seccion--profunda h3 { color: var(--soni-white); }

/* Título de sección con la línea cian y punto terminal del manual (§9.2) */
.titulo-seccion { font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); margin-bottom: 32px; }
.titulo-seccion::after {
  content: ""; display: block; width: 64px; height: 4px; margin-top: 14px;
  border-radius: 2px; background: var(--soni-cyan);
}
.subtitulo { margin-bottom: 16px; }

.texto > p + p, .texto p + p { margin-top: 1em; }
.texto { max-width: 68ch; }
.politica h2 { margin-top: 2em; font-size: 1.35rem; }
.politica h1 + p { margin-top: 1em; }
.politica ul { list-style: disc; padding-left: 1.4em; margin-top: 0.8em; display: grid; gap: 0.5em; }
.politica p + p, .politica ul + p, .politica p + ul { margin-top: 1em; }
.politica h2 + p, .politica h2 + ul { margin-top: 0.8em; }
.entrada { margin-top: 20px; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); max-width: 60ch; }
.nota { margin-top: 20px; color: var(--soni-gray); font-size: 1rem; }
/* El gris #707070 solo cumple 4,5:1 sobre blanco (manual §15.1); en fondos de color se usa el texto principal */
.seccion--hielo .nota, .seccion--superficie .nota, .cabecera-pagina .nota, .seccion--hielo .campo__ayuda { color: var(--soni-text); }
.seccion--profunda .nota { color: var(--soni-ice); }
/* Sobre el degradado de página la nota gris bajaría de 4,5:1: se usa el texto principal (SONI-VIS-002, V1). */
main .seccion:not(.seccion--hielo):not(.seccion--superficie):not(.seccion--profunda) .nota { color: var(--soni-text); }

.lista { display: grid; gap: 10px; }
.lista li { position: relative; padding-left: 22px; }
.lista li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--soni-cyan);
}
.lista--columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; margin-block: 20px 12px; }
.lista--marcada { background: var(--soni-white); padding: 28px; border-radius: var(--radius); gap: 12px; }
.seccion--hielo .lista--marcada { background: var(--soni-white); }
.cabecera-pagina + .seccion .lista--marcada, .seccion:not(.seccion--hielo):not(.seccion--superficie) .lista--marcada { background: var(--soni-surface); }

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.dos-columnas--foto { align-items: center; }

.foto-marco img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }
figcaption { margin-top: 10px; color: var(--soni-text); font-size: 1rem; }

/* Portada de inicio: texto y foto dentro del contenedor (SONI-EJEC-001, OBS-02) */
.portada__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 80px);
}
.portada__texto h1 { max-width: 18ch; }
.portada__apoyo { margin-top: 24px; max-width: 54ch; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); }
.portada__foto { margin: 0; }
.portada__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 45%; border-radius: var(--radius); }

/* Carrusel de la portada: avanza solo cada 6 s (js/main.js) con fundido cruzado. Sin JavaScript solo se ve la primera foto.
   Las diapositivas se apilan en la misma celda (sin saltos de altura): la entrante se funde encima de la saliente, que sigue opaca
   hasta que termina el fundido (sin parpadeo). El botón de pausa cumple WCAG 2.2.2; el indicador de barras no es interactivo. */
.carrusel { position: relative; }
.carrusel__pista { position: relative; display: grid; }
.carrusel__diapositiva { grid-area: 1 / 1; }
.carrusel__diapositiva img { display: block; }
html:not(.js) .carrusel__diapositiva:not(:first-child) { display: none; }
html.js .carrusel__diapositiva { opacity: 0; visibility: hidden; z-index: 0; }
html.js .carrusel:not(.carrusel--lista) .carrusel__diapositiva:first-child,
html.js .carrusel__diapositiva.activa { opacity: 1; visibility: visible; z-index: 2; }
html.js .carrusel__diapositiva.saliente { opacity: 1; visibility: visible; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.js .carrusel__diapositiva.activa { transition: opacity 800ms ease; }
}
.carrusel__pausa {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 25, 67, 0.72); color: var(--soni-white); cursor: pointer;
}
.carrusel__pausa:hover { background: var(--soni-deep); }
.carrusel__pausa:focus-visible { outline: 3px solid var(--soni-white); outline-offset: 2px; box-shadow: 0 0 0 6px var(--soni-blue); }
.carrusel__pausa svg { width: 16px; height: 16px; fill: currentColor; }
.carrusel__pausa .ico-play, .carrusel__pausa[aria-pressed="true"] .ico-pausa { display: none; }
.carrusel__pausa[aria-pressed="true"] .ico-play { display: block; }
.carrusel__indicador { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
/* Rayitas del carrusel (Andrés, 13-nov): son botones; cada una lleva a su foto. Área de clic de 28×24 px, raya visible de 5 px. */
.carrusel__punto { position: relative; width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.carrusel__punto::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 3px; background: #b7cfe0; transition: background-color var(--t-hover) ease; }
.carrusel__punto:hover::before { background: #7fa9c9; }
.carrusel__punto.activo::before { background: var(--soni-blue); }
.carrusel__punto:focus-visible { outline: 3px solid var(--soni-blue); outline-offset: 2px; border-radius: 4px; }

/* Dispositivos: la foto va a la derecha para no repetir el lado de Servicios complementarios */
.linea--invertida .linea__foto { order: 2; }

/* Flotantes: WhatsApp y Contacto, abajo a la derecha, bajo el encabezado (20) y sobre el contenido (10) */
.flotantes { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 10; display: grid; gap: 12px; justify-items: end; }
.flotante { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--soni-blue); color: var(--soni-white); box-shadow: 0 4px 14px rgba(0, 25, 67, 0.25); text-decoration: none; } /* taste-skill-ignore: botón flotante fijo sobre el contenido */
.flotante[hidden] { display: none; }
/* SONI-P2b (decisión de Andrés): con el menú del celular abierto, WhatsApp y Contacto se ocultan en todo el sitio.
   display: none también los saca del orden de foco. Vuelven al cerrar el menú (botón, Escape) o al pasar a escritorio.
   Sin :has (navegadores antiguos), se quedan visibles como hoy: degradación aceptable. En escritorio no cambia nada. */
@media (max-width: 1080px) {
  body:has(.menu.abierto) .flotantes { display: none; }
}
.flotante:hover { background: var(--soni-deep); color: var(--soni-white); }
.flotante svg { width: 26px; height: 26px; }
/* WhatsApp: verde oficial #25D366 con el ícono reconocible (glifo blanco). El glifo es decorativo; el enlace lleva aria-label. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono-wa { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
.flotante--whatsapp { background: #25d366; color: var(--soni-white); box-shadow: 0 4px 14px rgba(0, 25, 67, 0.3), 0 0 0 2px var(--soni-white); } /* taste-skill-ignore: botón flotante fijo sobre el contenido */
.flotante--whatsapp svg { width: 32px; height: 32px; fill: var(--soni-white); }
.flotante--whatsapp:hover { background: #1ebe5b; color: var(--soni-white); }
.boton--whatsapp { background: #25d366; color: var(--soni-deep); gap: 10px; }
.boton--whatsapp .icono-wa { width: 1.4em; height: 1.4em; fill: var(--soni-white); }
@media (hover: hover) and (pointer: fine) { .boton--whatsapp:hover { background: #1ebe5b; color: var(--soni-deep); } }
.enlace-wa, .enlace-red { display: inline-flex; align-items: center; gap: 10px; }
/* Íconos de redes y WhatsApp del pie: logos a color de marca (los colores van dentro de cada <symbol> del sprite),
   mismo tamaño (22 px) y separación del texto para que la columna se vea ordenada. */
.icono-red { width: 22px; height: 22px; flex: none; }

/* Líneas principales: filas alternas imagen y texto */
.lineas { display: grid; gap: clamp(48px, 6vw, 80px); }
.linea { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.linea:nth-child(even) .linea__foto { order: 2; }
.linea__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.linea__texto h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; margin-bottom: 14px; }
.linea__texto p { max-width: 52ch; margin-bottom: 12px; }

/* Sectores sobre azul profundo */
.sectores { display: grid; gap: 4px; }
.sectores li { font: 600 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.3 var(--font-heading); padding-block: 8px; }
.seccion--profunda .lista li::before { background: var(--soni-cyan); }

/* Datos y principios */
.datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 48px; }
.datos p { padding-top: 16px; border-top: 4px solid var(--soni-blue); }
.datos strong { display: block; font: 700 1.375rem/1.25 var(--font-heading); color: var(--soni-blue); margin-bottom: 6px; }
.principios { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.principios > div { background: var(--soni-white); padding: 24px; border-radius: var(--radius); }
.principios h3 { font-size: 1.125rem; margin-bottom: 8px; }
/* SONI-VIS-002, ronda 1: con cinco tarjetas (Nosotros) la rejilla de cuatro columnas deja una sola en la última fila.
   Desde tablet se usa una rejilla de seis: 3 + 2, centrada. Con cuatro (Inicio) la rejilla anterior no cambia. */
@media (min-width: 768px) and (max-width: 959px) {
  /* Con cuatro tarjetas (Inicio) a 768-959 px la rejilla auto-fit dejaba una en cuatro columnas estrechas o 3 + 1: se fuerza 2 + 2. */
  .principios:not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .principios:has(> :nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .principios:has(> :nth-child(5)) > div { grid-column: span 2; }
  .principios:has(> :nth-child(5)) > :nth-child(4) { grid-column: 2 / span 2; }
  .principios:has(> :nth-child(5)) > :nth-child(5) { grid-column: 4 / span 2; }
}

/* C1 (SONI-VIS-002): cada principio es una tarjeta enfocable; su etiqueta flota sobre la tarjeta y se llena al señalarla.
   El texto se lee sin hover y sin JavaScript. En táctil la etiqueta ya va llena, sin depender del hover. */
.principios > div { position: relative; padding-top: 34px; }
.principios h3 {
  display: inline-block; margin-bottom: 10px; padding: 4px 14px;
  border: 1px solid var(--soni-blue); border-radius: 999px;
  background: var(--soni-white); color: var(--soni-blue);
  font-size: 1.0625rem; line-height: 1.3;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover) ease;
}
.principios > div:focus-visible { outline: 3px solid var(--soni-deep); outline-offset: 4px; }
.principios > div:focus-visible h3 { background: var(--soni-blue); color: var(--soni-white); }
@media (hover: hover) and (pointer: fine) {
  .principios > div:hover { background: var(--soni-ice); box-shadow: 0 10px 24px rgba(0, 25, 67, 0.12); }
  .principios > div:hover h3 { background: var(--soni-blue); color: var(--soni-white); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 25, 67, 0.28); }
}
@media (hover: none) {
  .principios h3 { background: var(--soni-blue); color: var(--soni-white); }
}

/* Llamado final */
.llamado { background: var(--soni-blue); color: var(--soni-white); padding-block: 56px; }
.llamado__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.llamado h2 { color: var(--soni-white); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.llamado .acciones { margin-top: 0; }
.llamado-interno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.llamado-interno .titulo-seccion { margin-bottom: 16px; }

/* Cabecera de páginas internas */
.cabecera-pagina { padding-block: clamp(32px, 5vw, 64px); }
.cabecera-pagina--simple { padding-block: clamp(32px, 5vw, 56px); }
.migas { margin-bottom: 16px; font-size: 1rem; color: var(--soni-text); }
.migas a { color: var(--soni-blue); }

/* Wireframe de refinería (Andrés y Hermes): desde el 11-nov es la capa fija .plano de TODAS las páginas (plantilla y 404),
   definida con la portada de Inicio más abajo. Las cabeceras ya no llevan el dibujo como fondo propio (se vería doble):
   son transparentes y dejan ver la capa fija. Las bandas oscuras (llamado, cartel, pie) siguen sólidas y lo tapan. */
.cabecera-pagina { background: none; }

/* El texto de las cabeceras va sobre blanco limpio (≥ 97 %): el bloque de texto lleva su propio fondo blanco con
   borde difuminado, así el dibujo solo se ve donde no hay texto (arriba, abajo, entre columnas y detrás de la foto). */
.cabecera-pagina__texto {
  position: relative;
  padding-block: 6px;
  background-color: rgba(255, 255, 255, 0.97);
  border-radius: 12px;
  box-shadow: 0 0 24px 14px rgba(255, 255, 255, 0.97);
}
.cabecera-pagina__texto--solo { width: fit-content; max-width: 100%; }
/* Documento largo (política): con el wireframe fijo detrás, el cuerpo del documento va sobre una placa casi opaca (0,96). */
.cabecera-pagina--documento .contenedor { padding-block: clamp(20px, 3vw, 36px); background: rgba(255, 255, 255, 0.96); border-radius: 16px; }
@media (max-width: 960px) {
  /* En una columna el texto va arriba y la foto debajo: se deja una franja inferior para que el dibujo se vea bajo la foto. */
  .cabecera-pagina:not(.cabecera-pagina--simple) { padding-bottom: 72px; }
}

/* Galerías */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--soni-white); }
.galeria--productos img { object-fit: contain; background: var(--soni-white); }

/* Referencias de la escalera basculante */
.referencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-top: 28px; }
.referencia { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--soni-white); border-radius: var(--radius); border-top: 4px solid var(--soni-blue); }
.referencia h3 { font-size: 1.5rem; }
.referencia .boton { margin-top: auto; align-self: flex-start; }
.referencias__comunes { margin-top: 40px; }
.sin-corte { white-space: nowrap; }
.referencias__comunes h3 { font-size: 1.25rem; margin-bottom: 8px; }

/* Servicios complementarios */
.servicios { display: grid; gap: clamp(40px, 5vw, 64px); }
.servicio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
/* Alterna imagen-texto / texto-imagen, como las líneas de la portada (corrección de Andrés, 10-nov) */
.servicio:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.servicio:nth-child(even) > .foto-marco { order: 2; }
.servicio h2 { font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem); margin-bottom: 12px; }
.servicio p + p { margin-top: 10px; }

/* Contacto */
.canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.canal { padding: 22px; border-radius: var(--radius); background: var(--soni-surface); }
.canal__tipo { color: var(--soni-text); font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.canal__valor { font: 600 1.125rem/1.35 var(--font-heading); color: var(--soni-blue); overflow-wrap: anywhere; }
a.canal__valor { display: inline-block; min-height: 44px; padding-top: 6px; }

.formulario-bloque { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); }
.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; background: var(--soni-white); padding: clamp(20px, 3vw, 36px); border-radius: var(--radius); }
.campo { display: grid; gap: 6px; align-content: start; }
.campo--ancho { grid-column: 1 / -1; }
.campo[hidden] { display: none; }
/* Sin JavaScript no hay envío: se oculta el formulario y el aviso <noscript> da los canales directos (SONI-EJEC-001, F04). */
html:not(.js) #formulario, html:not(.js) .solo-js { display: none; }
.aviso-sin-js ul { margin: 12px 0; padding-left: 20px; display: grid; gap: 8px; }
.campo label { font-weight: 600; color: var(--soni-deep); }
.campo input:not([type="checkbox"]), .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1.5px solid #8a96a3; border-radius: var(--radius);
  background: var(--soni-white); color: var(--soni-text); font: inherit; font-size: 1rem;
}
.campo textarea { resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--soni-blue); outline-offset: 1px; border-color: var(--soni-blue); }
.campo [aria-invalid="true"] { border-color: var(--error); background: var(--error-bg); }
.campo__ayuda { color: var(--soni-gray); font-size: 1rem; }
.campo__error { color: var(--error); font-weight: 600; font-size: 1rem; }
.campo__error:empty { display: none; }
.campo--casilla { grid-template-columns: auto 1fr; align-items: start; column-gap: 12px; }
.campo--casilla input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--soni-blue); }
.campo--casilla label { font-weight: 400; color: var(--soni-text); }
.campo--casilla .campo__error { grid-column: 1 / -1; }
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: campo oculto contra spam */
.formulario__enviar { display: grid; gap: 12px; justify-items: start; }
.formulario__estado { font-weight: 600; }
.formulario__estado:empty { display: none; }
.formulario__estado.es-error { color: var(--error); }
.formulario__estado.es-exito { color: var(--exito); }
.formulario__estado .boton { margin-top: 10px; }

.ubicacion { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.ubicacion__direccion { font: 600 1.25rem/1.4 var(--font-heading); color: var(--soni-blue); }
.mapa { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--soni-surface); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__aviso { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: clamp(20px, 4vw, 40px); overflow: auto; background: var(--soni-surface); border: 1px solid var(--soni-ice); border-radius: var(--radius); }
.mapa__aviso[hidden] { display: none; }
.mapa__direccion { font: 600 1.25rem/1.4 var(--font-heading); color: var(--soni-blue); }
.mapa__aviso .nota { margin-top: 0; max-width: 36rem; }
.mapa__aviso .acciones { margin-top: 4px; }
.campo--turnstile { min-height: 65px; }

/* Pie */
/* Pie un tono más claro que --soni-deep (Andrés, 12-nov) para que el logo claro se lea sin tarjeta */
.pie { background: var(--soni-pie); color: var(--soni-ice); padding-top: 64px; }
.pie a:not(.boton) { color: var(--soni-white); }
.pie a:not(.boton):hover { color: var(--soni-ice); }
.pie__rejilla { display: grid; grid-template-columns: minmax(400px, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 48px; }
/* Firma completa del manual: 360 px de ancho, versión clara directamente sobre el azul del pie (sin tarjeta, decisión de Andrés 12-nov) */
.pie__firma { display: inline-block; max-width: 100%; margin-bottom: 24px; }
.pie__firma img { -webkit-user-drag: none; }
.pie__firma img { width: min(360px, 100%); min-width: min(280px, 100%); height: auto; }
.pie__nombre { font: 700 1.5rem/1.2 var(--font-heading); color: var(--soni-white); margin-bottom: 12px; }
.pie__marca p + p { margin-bottom: 20px; }
.pie__titulo { font: 600 1rem/1.3 var(--font-heading); color: var(--soni-white); margin-bottom: 14px; }
.pie__lista { display: grid; gap: 8px; }
.pie__lista a { display: inline-block; min-height: 32px; }
/* Los enlaces con ícono (WhatsApp y redes) alinean ícono y texto con la misma separación */
.pie__lista a.enlace-wa, .pie__lista a.enlace-red { display: inline-flex; align-items: center; gap: 10px; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 24px 32px; font-size: 1rem; background: var(--soni-pie); }

/* Página 404 */
.no-encontrada { display: grid; align-content: center; justify-items: start; gap: 20px; min-height: 60svh; padding-block: 64px; }

/* Adaptación a pantallas pequeñas */
@media (max-width: 960px) {
  .portada__rejilla { grid-template-columns: minmax(0, 1fr); }
  .dos-columnas, .linea, .servicio, .servicio:nth-child(even), .formulario-bloque, .ubicacion { grid-template-columns: minmax(0, 1fr); }
  .linea:nth-child(even) .linea__foto, .linea--invertida .linea__foto, .servicio:nth-child(even) > .foto-marco { order: 0; }
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .lista--columnas { grid-template-columns: minmax(0, 1fr); }
  .datos { grid-template-columns: minmax(0, 1fr); }
  .pie__rejilla { grid-template-columns: minmax(0, 1fr); }
  .acciones .boton { flex: 1 1 100%; }
  .flotantes { gap: 10px; }
  .flotante { width: 44px; height: 44px; }
  .flotante svg { width: 22px; height: 22px; }
  .flotante--whatsapp svg { width: 28px; height: 28px; }
  .pie__legal { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  .formulario { padding-bottom: 96px; }
  .mapa { aspect-ratio: 1 / 1; }
  .mapa:not(.mapa--cargado) { aspect-ratio: auto; }
  .mapa:not(.mapa--cargado) .mapa__aviso { position: static; }
}

/* Entradas suaves por sección: solo con JavaScript y sin preferencia de movimiento reducido */
/* F7 (plan de lanzamiento): en móvil los grupos son columnas altas (referencias, galerías) y la entrada escalonada dejaba bloques
   en blanco bajo el título mientras la foto perezosa no cargaba. Por debajo de 601 px no hay animación de entrada y las fotos llevan fondo. */
.foto-marco img, .linea__foto img, .portada__foto img, .galeria img { background: var(--soni-surface); }
@media (prefers-reduced-motion: no-preference) and (min-width: 601px) {
  /* Salir (quitar «visible») es más rápido y sin retardo; entrar escalona los hijos en orden de lectura. */
  .js .entra > * { opacity: 0; transform: translateY(20px); transition: opacity 280ms var(--ease-out), transform 320ms var(--ease-out); }
  .js .entra.visible > * { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
}
/* Páginas interiores (Andrés, 11-nov): al desplazarse el texto queda anclado mientras la foto o la columna larga sigue pasando.
   Solo en dos columnas (desde 961 px) y solo en páginas con cabecera de página; Inicio no cambia. Sin JavaScript funciona igual.
   El tope deja libre la cabecera fija (12 + 92 + margen). */
@media (min-width: 961px) {
  .cabecera-pagina ~ .seccion .dos-columnas { align-items: start; }
  .cabecera-pagina ~ .seccion .dos-columnas > *,
  .servicio > * { position: sticky; top: 132px; align-self: start; }
  /* Fotos más altas: dan recorrido para que el texto se quede quieto mientras la foto pasa. */
  .servicio > .foto-marco img,
  .cabecera-pagina ~ .seccion .dos-columnas--foto > .foto-marco img { aspect-ratio: 4 / 5; max-height: 78vh; }
}
/* Páginas interiores: placas (Andrés, 11-nov: «usa el wireframe estático de fondo también para las páginas consecuentes»).
   Con el wireframe fijo detrás, cada bloque de texto de las secciones interiores va sobre placa blanca (≥ 0,93).
   Formulario, tarjetas de referencia, principios, canales, lista marcada y mapa ya tienen fondo propio opaco. */
.cabecera-pagina ~ .seccion :is(.dos-columnas > :not(figure), .servicio > :not(figure), .contenedor > .titulo-seccion, .contenedor > p:not(.pendiente), .llamado-interno, .formulario-bloque__intro, .ubicacion > :not(.mapa)) {
  padding: clamp(14px, 2vw, 24px); background: var(--placa); border-radius: 14px;
}
.cabecera-pagina ~ .seccion .contenedor > .titulo-seccion { width: fit-content; max-width: 100%; padding-block: 10px 14px; }
/* Pies de foto (galerías y fotos de cabecera o sección): también sobre placa. */
.galeria figcaption, .foto-marco figcaption { width: fit-content; max-width: 100%; padding: 4px 10px; background: var(--placa); border-radius: 8px; }
/* Fotos que se destapan de abajo hacia arriba, una sola vez, al entrar en pantalla (js/main.js, iniciarDestapes).
   La clase «destapes» solo la pone JavaScript: sin JavaScript o con movimiento reducido las fotos se ven desde el principio. */
@media (prefers-reduced-motion: no-preference) {
  .destapes .destape img { clip-path: inset(100% 0 0 0); transform: scale(1.08); transition: clip-path 900ms var(--ease-out), transform 1300ms var(--ease-out); }
  .destapes .destape.visto img { clip-path: inset(0); transform: none; }
  .destapes .destape { overflow: hidden; border-radius: var(--radius); }
}
/* ==== Portada de Inicio «Del plano al montaje» (aprobada por Andrés el 11-nov; prototipo de Fable) ====
   Base = estado fijo: sin JavaScript o con movimiento reducido todo se lee, la ventana es una foto quieta a pantalla completa
   y no hay piezas ocultas. Los efectos ligados al desplazamiento y las entradas solo existen con la clase «animado», que pone
   js/main.js (iniciarPortada) cuando hay JavaScript y el visitante no pidió reducir el movimiento.
   Valores dinámicos (--p, --lema, --x, --i) solo por style.setProperty desde JS: la CSP no admite estilos en línea. */
:root {
  --gigante: clamp(2.5rem, 11.5vw, 8.5rem);
  --gigante-medio: clamp(2.25rem, 7.4vw, 6rem);
  --titulo-grande: clamp(1.875rem, 4vw, 3.25rem);
  --entradilla: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
  --ease-larga: cubic-bezier(0.16, 1, 0.3, 1);
  /* Velo del wireframe (Andrés: «que se vea un poquito más, está muy opaco»): algo más claro que el del prototipo (0,70 → 0,44 → 0,60). */
  --velo-plano: linear-gradient(180deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.4) 45%, rgba(214, 236, 250, 0.56) 100%);
  /* Placa blanca bajo cada bloque de texto que va sobre el wireframe */
  --placa: rgba(255, 255, 255, 0.93);
}

/* Wireframe fijo: queda quieto detrás de todas las secciones claras de Inicio mientras el contenido sube. Las bandas oscuras lo tapan. */
.plano {
  position: fixed; inset: 0; z-index: -1;
  background-color: var(--soni-white);
  background-image: var(--velo-plano), url("../assets/fondos/refineria-escritorio-1280.jpg");
  background-size: cover, cover;
  background-position: center, center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 1281px) {
  .plano { background-image: var(--velo-plano), url("../assets/fondos/refineria-escritorio-1920.jpg"); }
}
@media (max-width: 720px) {
  .plano { background-image: var(--velo-plano), url("../assets/fondos/refineria-movil-720.jpg"); }
}

/* Títulos gigantes: cada renglón es un <span> en bloque, así nunca pasan de dos líneas. */
.gigante { font-size: var(--gigante); font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; color: var(--soni-blue); white-space: nowrap; }
.gigante > span { display: block; }
.gigante--medio { font-size: var(--gigante-medio); line-height: 1; }
.gigante--claro { color: var(--soni-white); }
.titulo-grande { font-size: var(--titulo-grande); letter-spacing: -0.02em; line-height: 1.05; }
.entradilla { font-size: var(--entradilla); line-height: 1.45; max-width: 46ch; }

/* Portada */
.apertura { padding-block: clamp(28px, 5vw, 64px) clamp(28px, 4vw, 48px); }
/* El título va sobre placa: sin ella, contra el trazo más oscuro del wireframe el azul quedaba en ~3:1 (medido); con placa, ≥ 11:1. */
.apertura .gigante { width: fit-content; max-width: calc(100% + 32px); padding: 6px 16px 12px; margin-left: -16px; background: var(--placa); border-radius: 16px; }
.apertura__apoyo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; margin-top: clamp(20px, 3vw, 36px); }
.apertura__apoyo .entradilla { padding: 10px 14px; margin-left: -14px; background: rgba(255, 255, 255, 0.96); border-radius: 12px; }
.apertura__apoyo .acciones { margin-top: 0; align-items: center; gap: 12px 28px; }
.apertura .enlace-flecha { padding: 0 10px; background: rgba(255, 255, 255, 0.96); border-radius: 8px; }

/* Ventana: el carrusel del sitio a pantalla completa. Quieta en la base; con «animado» se abre de marco a pantalla completa. */
.ventana__fija { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.ventana__marco { position: absolute; inset: 0; background: var(--soni-deep); }
.ventana .carrusel, .ventana .carrusel__pista, .ventana .carrusel__diapositiva { height: 100%; }
/* La fila de la rejilla del carrusel tiene alto fijo: si no, el 100 % de la diapositiva no se resuelve y la foto queda más alta que la ventana. */
.ventana .carrusel__pista { grid-template-rows: minmax(0, 1fr); }
.ventana .carrusel__diapositiva img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; background: var(--soni-deep); }
/* Degradado bajo el lema: el blanco conserva ≥ 4,5:1 aunque la foto sea clara (tanques blancos, cielo). */
.ventana__marco::after { content: ""; position: absolute; inset: auto 0 0 0; height: 52%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0, 25, 67, 0) 0%, rgba(0, 25, 67, 0.62) 38%, rgba(0, 25, 67, 0.86) 100%); }
.ventana__lema {
  /* A la derecha se deja libre la columna de los flotantes (WhatsApp y Contacto). */
  position: absolute; z-index: 3; left: var(--margin); right: calc(var(--margin) + 76px); bottom: clamp(64px, 10vh, 104px); max-width: none;
  font: 700 clamp(1.5rem, 4.4vw, 3.75rem)/1.05 var(--font-heading); letter-spacing: -0.02em; color: var(--soni-white);
}
/* Indicador y pausa juntos abajo a la izquierda: a la derecha están los flotantes de WhatsApp y Contacto. */
.ventana .carrusel__indicador { position: absolute; z-index: 3; left: var(--margin); bottom: 28px; margin: 0; }
.ventana .carrusel__punto::before { background: rgba(255, 255, 255, 0.45); }
.ventana .carrusel__punto:hover::before { background: rgba(255, 255, 255, 0.75); }
.ventana .carrusel__punto.activo::before { background: var(--soni-white); }
.ventana .carrusel__punto:focus-visible { outline-color: var(--soni-white); }
/* La pausa va a la derecha de las rayitas: main.js pone --puntos con el número de fotos (28 px + 8 px de separación cada una). */
.ventana .carrusel__pausa { left: calc(var(--margin) + var(--puntos, 4) * 36px + 8px); right: auto; bottom: 22px; }

/* Productos: el texto queda anclado sobre su placa mientras pasa su foto grande. */
.productos { padding-block: clamp(72px, 10vw, 140px); }
.productos .titulo-grande { width: fit-content; max-width: 100%; padding: 6px 16px; margin: 0 0 clamp(40px, 6vw, 88px) -16px; background: var(--placa); border-radius: 12px; }
.producto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.producto + .producto { margin-top: clamp(56px, 9vw, 128px); }
.producto:nth-of-type(even) .producto__texto { order: 2; margin-inline: 0 calc(var(--margin) * -1); }
/* La placa sobresale del texto como mucho el margen lateral de la página: así no desborda entre 961 y 1250 px. */
.producto__texto { position: sticky; top: 148px; padding: 24px 28px 20px; margin-inline: calc(var(--margin) * -1) 0; background: var(--placa); border-radius: 14px; }
.producto__texto h3 { font-size: var(--titulo-grande); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 18px; }
.producto__texto p { max-width: 44ch; margin-bottom: 14px; }
.producto__foto { height: min(82vh, 760px); overflow: hidden; border-radius: 4px; }
.producto__foto img { width: 100%; height: 100%; object-fit: cover; background: var(--soni-surface); }

/* Servicios: lista tipográfica en dos columnas sobre placa */
.complementos { background: rgba(243, 246, 248, 0.5); padding-block: clamp(72px, 9vw, 128px); }
.complementos .titulo-grande { width: fit-content; max-width: 100%; padding: 6px 16px; margin: 0 0 clamp(28px, 4vw, 56px) -16px; background: var(--placa); border-radius: 12px; }
.complementos__lista {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 6vw, 96px);
  padding: 8px clamp(16px, 2.4vw, 32px); margin-inline: calc(min(clamp(16px, 2.4vw, 32px), var(--margin)) * -1); background: var(--placa); border-radius: 14px;
}
.complementos__lista a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding-block: 14px;
  font: 600 clamp(1.1875rem, 1rem + 0.9vw, 1.75rem)/1.2 var(--font-heading); letter-spacing: -0.01em; text-decoration: none;
  box-shadow: inset 0 -2px 0 rgba(0, 49, 94, 0.14);
  transition: box-shadow 220ms ease, padding-left 320ms var(--ease-larga);
}
.complementos__lista a::after { content: "→"; flex: none; color: var(--soni-cyan); transition: transform 320ms var(--ease-larga); }
@media (hover: hover) and (pointer: fine) {
  .complementos__lista a:hover { box-shadow: inset 0 -2px 0 var(--soni-cyan); padding-left: 10px; }
  .complementos__lista a:hover::after { transform: translateX(6px); }
}

/* Sectores: cartel sobre azul profundo (banda oscura sólida, sin wireframe). Con «animado» los renglones se cruzan al desplazarse. */
.cartel { background: var(--soni-deep); color: var(--soni-white); padding-block: clamp(72px, 10vw, 140px); overflow: hidden; }
.cartel__lista { display: grid; gap: clamp(2px, 0.6vw, 10px); padding-inline: var(--margin); }
.cartel__lista li { font: 700 clamp(2rem, 7.4vw, 7rem)/1 var(--font-heading); letter-spacing: -0.035em; white-space: nowrap; transform: translateX(calc(var(--x, 0) * 1px)); }
.cartel__lista li:nth-child(even) { color: var(--soni-cyan); transform: translateX(calc(var(--x, 0) * -1px + 6vw)); }
.cartel__nota { margin-top: clamp(32px, 5vw, 64px); max-width: 60ch; font-size: var(--entradilla); color: var(--soni-ice); }

/* Trayectoria */
.trayectoria { background: rgba(230, 244, 252, 0.5); padding-block: clamp(72px, 10vw, 140px); }
/* Placa también en el título de trayectoria (sin ella mide 6,3:1 por el tinte de la sección; con ella, como el resto). */
.trayectoria .gigante { width: fit-content; max-width: calc(100% + 32px); padding: 6px 16px 12px; margin-left: -16px; background: var(--placa); border-radius: 16px; }
.trayectoria .entradilla { margin-top: clamp(20px, 3vw, 36px); max-width: 58ch; }
.cuenta { font-variant-numeric: tabular-nums; }
.valores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px) clamp(32px, 6vw, 96px); margin: clamp(48px, 7vw, 96px) 0 0; }
.valores dt { font: 700 clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem)/1.2 var(--font-heading); color: var(--soni-blue); margin-bottom: 8px; }
.valores dd { margin: 0; max-width: 44ch; }
.trayectoria .entradilla, .valores > div { padding: 14px 18px; margin-left: -18px; background: var(--placa); border-radius: 12px; }

/* Cierre a toda pantalla con el selector «¿Qué necesita?» (lleva al formulario con el producto ya marcado) */
.cierre { background: var(--soni-blue); color: var(--soni-white); min-height: 86vh; min-height: 86svh; display: grid; align-items: center; padding-block: clamp(72px, 10vw, 128px); }
.cierre__pregunta { margin-top: clamp(20px, 3vw, 36px); font-size: var(--entradilla); color: var(--soni-ice); }
.selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-block: 24px 28px; }
.selector a {
  display: flex; align-items: flex-end; min-height: 128px; padding: 18px; border-radius: 4px;
  background: var(--soni-white); color: var(--soni-deep); text-decoration: none;
  font: 700 clamp(1.125rem, 1rem + 0.6vw, 1.5rem)/1.15 var(--font-heading); letter-spacing: -0.01em;
  transition: background-color 200ms ease, color 200ms ease, transform 320ms var(--ease-larga);
}
.selector a:active { transform: scale(0.98); }
.cierre :focus-visible { outline-color: var(--soni-white); }
@media (hover: hover) and (pointer: fine) {
  .selector a:hover { background: var(--soni-cyan); color: var(--soni-deep); transform: translateY(-6px); }
}

/* Efectos ligados al desplazamiento y entradas: una sola vez, por posición (js/main.js, iniciarPortada). */
@media (prefers-reduced-motion: no-preference) {
  .animado .ventana { height: 175vh; height: 175svh; }
  .animado .ventana__fija { position: sticky; top: 0; }
  .animado .ventana__marco {
    --abre: calc(1 - var(--p, 0));
    clip-path: inset(calc(var(--abre) * 9vh) calc(var(--abre) * 12vw) calc(var(--abre) * 9vh) calc(var(--abre) * 12vw) round calc(var(--abre) * 14px));
  }
  .animado .ventana .carrusel__diapositiva img { transform: scale(calc(1.14 - var(--p, 0) * 0.14)); }
  .animado .ventana__marco::after { opacity: var(--p, 0); }
  .animado .ventana__lema { opacity: var(--lema, 0); transform: translateY(calc((1 - var(--lema, 0)) * 28px)); }
  .animado .ventana .carrusel__indicador, .animado .ventana .carrusel__pausa { opacity: var(--p, 0); }
  .animado .ventana .carrusel__pausa:focus-visible { opacity: 1; }

  .animado .plano { animation: plano-dibuja 1100ms var(--ease-larga) both; }
  .animado .gigante > span { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); transition: clip-path 900ms var(--ease-larga), transform 900ms var(--ease-larga); }
  .animado .gigante > span:nth-child(2) { transition-delay: 110ms; }
  .animado .gigante.visto > span { clip-path: inset(-0.1em -0.1em -0.25em -0.1em); transform: none; }
  .animado .aparece { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease-larga), transform 720ms var(--ease-larga); transition-delay: calc(var(--i, 0) * 75ms); }
  .animado .aparece.visto { opacity: 1; transform: none; }
  .animado .aparece-foto img { clip-path: inset(100% 0 0 0); transform: scale(1.1); transition: clip-path 1000ms var(--ease-larga), transform 1400ms var(--ease-larga); }
  .animado .aparece-foto.visto img { clip-path: inset(0); transform: none; }
}
@keyframes plano-dibuja { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) {
  .cartel__lista li, .cartel__lista li:nth-child(even) { transform: none; }
  .complementos__lista a, .complementos__lista a::after, .selector a { transition: none; }
}

/* Tableta y celular */
@media (max-width: 960px) {
  .apertura__apoyo { grid-template-columns: minmax(0, 1fr); }
  .producto { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .producto__texto, .producto:nth-of-type(even) .producto__texto { position: static; order: 2; margin-inline: 0; padding: 18px 18px 14px; }
  .producto__foto { height: auto; aspect-ratio: 4 / 5; max-height: 76vh; max-height: 76svh; width: 100%; }
  .selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selector a { min-height: 104px; }
}
@media (max-width: 700px) {
  .solo-escritorio { display: none; }
  .ventana__lema { right: var(--margin); bottom: 132px; font-size: clamp(1.75rem, 8.6vw, 2.5rem); }
  /* Indicador y pausa por encima de la barra inferior de celular (~66 px). */
  .ventana .carrusel__indicador { bottom: 96px; }
  .ventana .carrusel__pausa { bottom: 90px; }
  .cierre { padding-bottom: 120px; }
  .ventana__marco::after { height: 64%; }
  .complementos__lista, .valores { grid-template-columns: minmax(0, 1fr); }
  .complementos__lista { margin-inline: 0; }
  .cartel__lista li { white-space: normal; font-size: clamp(2rem, 10.5vw, 3.25rem); line-height: 1.02; }
  .gigante--medio { font-size: clamp(2rem, 9.4vw, 3rem); }
  .trayectoria .entradilla, .valores > div { margin-left: 0; }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .animado .ventana { height: 150vh; height: 150svh; }
  .animado .ventana__marco { clip-path: inset(calc(var(--abre) * 2vh) calc(var(--abre) * 5vw) calc(var(--abre) * 2vh) calc(var(--abre) * 5vw) round calc(var(--abre) * 10px)); }
  .cartel__lista li:nth-child(even) { transform: translateX(calc(var(--x, 0) * -0.4px)); }
  .cartel__lista li:nth-child(odd) { transform: translateX(calc(var(--x, 0) * 0.4px)); }
}

/* Línea de avance (Andrés, 11-nov): franja cian en el borde inferior de la cabecera que crece con el recorrido de la página (js/main.js). */
.encabezado { --avance: 0; }
.avance { position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 2px; background: var(--soni-cyan); transform-origin: left center; transform: scaleX(var(--avance)); pointer-events: none; }

/* Barra inferior de celular (Andrés, 11-nov): por debajo de 701 px reemplaza a los flotantes de WhatsApp y Contacto en todas las
   páginas de la plantilla (la 404 conserva sus flotantes). Se oculta con el menú abierto, como los flotantes (decisión P2b).
   Cabecera más baja en celular (Andrés, 11-nov): 64 px de fila y logo de 46 px, para dejar más pantalla al contenido. */
.barra-movil { display: none; }
@media (max-width: 700px) {
  /* Solo donde hay barra: la 404 (sin barra) conserva sus flotantes. */
  body:has(.barra-movil) .flotantes { display: none; }
  .barra-movil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); box-shadow: 0 -6px 20px rgba(0, 25, 67, 0.14);
  }
  .barra-movil .boton { flex: 1 1 0; min-height: 50px; padding: 0 10px; }
  .barra-movil .boton[hidden] { display: none; }
  body:has(.menu.abierto) .barra-movil { display: none; }
  /* El contenido final y el foco por teclado no quedan detrás de la barra. */
  html { scroll-padding-bottom: 84px; }
  .pie__legal { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .encabezado__fila { min-height: 64px; }
  .marca__logo { height: 46px; }
}

/* Sin animación con prefers-reduced-motion: el cambio de color se mantiene, el movimiento no. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .encabezado, .menu a, .menu-boton, .boton, .principios h3, .carrusel__punto, .carrusel__punto::before { transition: none; }
  .principios > div:hover h3 { transform: none; }
}

/* Inicio, trayectoria (Andrés, 13-nov): foto histórica del primer taller de SONI. */
.trayectoria__foto { max-width: 620px; margin: clamp(24px, 4vw, 44px) auto 0; text-align: center; }
.trayectoria__foto img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 18px 40px -24px rgba(0, 25, 67, 0.45); }
.trayectoria__foto figcaption { width: fit-content; max-width: 100%; margin: 10px auto 0; padding: 4px 10px; background: var(--placa); border-radius: 8px; }
/* Carrusel en la foto de cabecera de Tanques, Escalera basculante y Dispositivos (13-nov): mismas reglas que la portada. */
.foto-marco--carrusel .carrusel__diapositiva img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
/* Basculantes (13-nov): una referencia por bloque, con el mismo recorrido de Servicios; la escalera se ve completa. */
.referencias-bloques { margin-top: clamp(28px, 4vw, 44px); }
.servicio h3 { font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem); margin-bottom: 12px; }
.servicio .boton { margin-top: 18px; }
/* Piezas de catálogo cuadradas: se muestran completas, sin bandas. */
.foto-marco--producto img, .servicio > .foto-marco--producto img { aspect-ratio: 1 / 1; object-fit: cover; max-height: none; }
/* Clientes (Andrés, 13-nov): cinta de logos que avanza de derecha a izquierda; se detiene con el mouse, el foco o el botón
   de pausa (WCAG 2.2.2). Con «reducir movimiento» queda quieta y en filas. La segunda lista es copia decorativa (aria-hidden). */
.clientes { padding-block: clamp(56px, 8vw, 104px); }
.clientes__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.clientes__cabecera .titulo-seccion { width: fit-content; max-width: 100%; padding: 10px 16px 14px; margin-left: -16px; background: var(--placa); border-radius: 14px; }
.clientes__cinta { overflow: hidden; margin-top: clamp(20px, 3vw, 32px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.clientes__pista { display: flex; width: max-content; }
.clientes__lista { display: flex; gap: 20px; padding: 8px 20px 8px 0; margin: 0; list-style: none; }
.cliente { display: flex; align-items: center; justify-content: center; width: 200px; height: 104px; padding: 18px 24px; background: var(--soni-white); border-radius: var(--radius); box-shadow: 0 10px 28px -18px rgba(0, 25, 67, 0.35); }
.cliente img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.cliente--oscuro { background: var(--soni-deep); }
.clientes__nota { width: fit-content; max-width: calc(100% - 2 * var(--margin)); margin-top: 18px; padding: 4px 10px; font-size: 0.875rem; color: #3f4f60; background: var(--placa); border-radius: 8px; }
.clientes__pausa { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 25, 67, 0.72); color: var(--soni-white); cursor: pointer; }
.clientes__pausa:hover { background: var(--soni-deep); }
.clientes__pausa:focus-visible { outline: 3px solid var(--soni-white); outline-offset: 2px; box-shadow: 0 0 0 6px var(--soni-blue); }
.clientes__pausa svg { width: 16px; height: 16px; fill: currentColor; }
.clientes__pausa .ico-play, .clientes__pausa[aria-pressed="true"] .ico-pausa { display: none; }
.clientes__pausa[aria-pressed="true"] .ico-play { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .clientes__pista { animation: clientes-cinta 45s linear infinite; }
  .clientes__cinta:hover .clientes__pista, .clientes__cinta:focus-within .clientes__pista, .clientes--pausa .clientes__pista { animation-play-state: paused; }
}
@keyframes clientes-cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .clientes__pista, .clientes__lista:first-child { flex-wrap: wrap; width: auto; }
  .clientes__lista[aria-hidden="true"], .clientes__pausa { display: none; }
  .clientes__cinta { -webkit-mask-image: none; mask-image: none; padding-inline: var(--margin); }
}
@media (max-width: 600px) { .cliente { width: 160px; height: 88px; padding: 14px 18px; } .cliente img { max-height: 52px; } }
/* Pieza de catálogo dentro de una galería (rampas, 13-nov): completa, sin recortar su texto. */
.galeria .galeria__ficha img { object-fit: contain; background: #0b1240; }
/* Basculantes (13-nov): casi todas las fotos son verticales; se muestran completas dentro del marco, sin recorte. */
.foto-completa img, .foto-completa .carrusel__diapositiva img, .servicio > .foto-marco.foto-completa img { object-fit: contain; background: #e9eef3; }