/* ==========================================================================
   Transpallets — sitio
   Deriva del Sistema de Diseño Transpallets, línea v6 (clara y cálida, 5/10/2026):
   capas de tono en vez de líneas, tarjetas sin borde (radio 16, hoja 22),
   botones y etiquetas en píldora, cifras de indicador en Plex 400, mono sólo
   para medidas y códigos, antetítulos y etiquetas en sans con peso y sin caja
   alta (la mayúscula sostenida queda sólo en el encabezado de tabla), una sola
   sombra para lo que flota y ningún borde de color en un costado.
   Decisiones del proyecto que mandan: fondo Papel (lo confirmó Fede el
   9/10/2026), texto verde en Verde Bosque (Verde Campo no llega a 4,5:1 sobre
   Papel), Verde Brote sólo sobre oscuro, una sola acción (WhatsApp) y el
   permiso de animar al scroll.
   ========================================================================== */

@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("../fonts/chivo-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("../fonts/chivo-mono-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root {
  color-scheme: light;

  /* Paleta del sitio, y ninguna otra */
  --papel: #FAF7F2;
  --papel-hondo: #F2EDE5;
  --verde-bosque: #2A7113;
  --verde-noche: #1B4A0D;
  --verde-brote: #8FE774;
  --verde-lima: #8EBB7F;
  --verde-bruma: #EEF4EB;
  --grafito: #121511;
  --gris-marca: #929497;
  --blanco: #FFFFFF;

  /* Tinta sobre claro: Grafito 800 y sus transparencias */
  --tinta: #121511;
  --tinta-cuerpo: rgba(18, 21, 17, .80);
  --tinta-suave: rgba(18, 21, 17, .66);
  --linea: rgba(18, 21, 17, .16);
  --linea-suave: rgba(18, 21, 17, .09);

  /* Tinta sobre Verde Noche */
  --osc-fuerte: #FFFFFF;
  --osc-cuerpo: rgba(255, 255, 255, .84);
  --osc-suave: rgba(255, 255, 255, .68);
  --osc-linea: rgba(255, 255, 255, .16);
  --osc-marca: rgba(255, 255, 255, .30);

  /* Los dos velos del sistema. No hay otros degradés */
  --velo-foto-lateral: linear-gradient(to right, rgba(27, 74, 13, .9) 0%, rgba(27, 74, 13, .55) 45%, rgba(27, 74, 13, 0) 85%);
  --velo-foto: linear-gradient(to top, rgba(27, 74, 13, .88) 0%, rgba(27, 74, 13, .62) 38%, rgba(27, 74, 13, 0) 100%);

  --f-voz: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --f-cifra: "Chivo Mono", Consolas, "Courier New", monospace;

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px;
  --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px; --e-20: 80px; --e-24: 96px;

  /* Radios v6: control chico, tarjeta y foto, hoja y modal, píldora */
  --r-xs: 6px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;
  /* La única sombra decorativa: lo que flota sobre una foto o una tarjeta */
  --sombra-flotante: 0 1px 2px rgba(18, 21, 17, .06), 0 12px 32px rgba(18, 21, 17, .12);

  --dur-rapida: 140ms;
  --dur-media: 220ms;
  --dur-lenta: 340ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  --ancho: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --seccion: clamp(72px, 9vw, 120px);
  /* Alto de barra = alto visible del logo + 2 X (resguardo del manual) */
  --barra: 72px;
}

@media (max-width: 980px) {
  :root { --barra: 64px; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + env(safe-area-inset-top, 0px)); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/1.6 var(--f-voz);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--verde-bosque); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: rgba(42, 113, 19, .30); }
:focus-visible { outline: 2px solid var(--verde-bosque); outline-offset: 3px; }
.osc :focus-visible { outline-color: var(--verde-brote); }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-voz); color: inherit; text-wrap: balance; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { text-wrap: pretty; }
b, strong { font-weight: 600; }

.wrap { width: 100%; max-width: calc(var(--ancho) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.solo-lectores { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: var(--gutter); top: -80px; z-index: 100; padding: 10px 14px; background: var(--blanco); color: var(--grafito); border-radius: var(--r-pill); font-weight: 600; }
.saltar:focus { top: 12px; }

/* ---------- Tipografía ---------- */

.ante {
  display: flex; align-items: center; gap: 12px;
  font: 600 14px/1.35 var(--f-voz);
  letter-spacing: .01em;
  color: var(--verde-bosque);
}
.ante::before { content: ""; width: 22px; height: 3px; background: currentColor; flex: none; }
.osc .ante { color: var(--verde-brote); }
/* Sobre foto el antetítulo va en blanco y el filete en Brote: Brote sobre foto no llega a 4,5:1 */
.hero .ante { color: var(--osc-fuerte); }
.hero .ante::before { background: var(--verde-brote); }

.titulo-1 { font-size: clamp(40px, 5.1vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; }
.titulo-2 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; line-height: 1.12; letter-spacing: -.022em; }
.titulo-3 { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.bajada { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--tinta-cuerpo); max-width: 52ch; }
.cuerpo { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.62; color: var(--tinta-cuerpo); max-width: 60ch; }
.cuerpo + .cuerpo { margin-top: var(--e-4); }
.cuerpo strong { color: var(--tinta); }
.nota { font-size: 14px; line-height: 1.6; color: var(--tinta-suave); max-width: 58ch; }
.osc { color: var(--osc-fuerte); }
.osc .bajada, .osc .cuerpo { color: var(--osc-cuerpo); }
.osc .cuerpo strong { color: var(--osc-fuerte); }
.osc .nota { color: var(--osc-suave); }

/* ---------- Barra ---------- */

.barra {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--papel);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-media) var(--ease);
}
.barra.con-filete, .barra.menu-abierto { border-bottom-color: var(--linea); }
.barra__in { height: var(--barra); display: flex; align-items: center; gap: var(--e-10); }
.barra__marca { display: flex; flex: none; }
.barra__nav { display: flex; gap: var(--e-8); margin-left: auto; }
.barra__nav a {
  font: 600 14px/1 var(--f-voz); color: var(--tinta-cuerpo); text-decoration: none;
  padding-block: 10px 8px; border-bottom: 2px solid transparent;
  transition: color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease);
}
.barra__nav a:hover { color: var(--tinta); border-bottom-color: var(--verde-bosque); }
.barra__menu {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--tinta); cursor: pointer; border-radius: var(--r-pill);
}
.barra__menu svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.barra__menu .cerrar, .barra__menu[aria-expanded="true"] .abrir { display: none; }
.barra__menu[aria-expanded="true"] .cerrar { display: block; }
.menu-movil { border-top: 1px solid var(--linea); background: var(--papel); }
.menu-movil ul { padding-block: var(--e-2) var(--e-6); }
.menu-movil li + li { border-top: 1px solid var(--linea-suave); }
.menu-movil a { display: block; padding: 16px 0; font: 600 18px/1.2 var(--f-voz); color: var(--tinta); text-decoration: none; }

@media (max-width: 980px) {
  .barra__nav { display: none; }
  .barra__in { gap: var(--e-4); }
  .barra .btn { margin-left: auto; }
  .barra__menu { display: inline-flex; }
}
@media (min-width: 981px) { .menu-movil { display: none !important; } }

/* ---------- Logo (vector oficial, en línea) ---------- */

.logo {
  --logo-trans: #929497; --logo-pallets: #2A7113; --logo-iso: #2A7113;
  position: relative; display: block; perspective: 900px;
  height: 40px; width: calc(40px * 563 / 209);
}
.logo--blanco { --logo-trans: #A8ABAD; --logo-pallets: #FFFFFF; --logo-iso: #FFFFFF; }
.logo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.logo svg.logo__base { position: relative; }
.logo .t { fill: var(--logo-trans); }
.logo .p { fill: var(--logo-pallets); }
.logo .i { fill: var(--logo-iso); }
.logo__tabla { transform-style: preserve-3d; }
.logo.se-arma .logo__tabla { animation: tabla-giro 6s cubic-bezier(.7, 0, .25, 1) 1 both; }
@keyframes tabla-giro { 0% { transform: rotateY(0); } 58%, 100% { transform: rotateY(360deg); } }
@media (max-width: 980px) { .barra .logo { height: 34px; width: calc(34px * 563 / 209); } }

/* ---------- Botón y enlaces ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  font: 600 15px/1 var(--f-voz); letter-spacing: -.005em;
  border-radius: var(--r-pill);
  background: var(--verde-bosque); color: var(--blanco);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.btn:hover { background: var(--verde-noche); color: var(--blanco); }
.btn:active { background: #143A09; }
.btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--chico { min-height: 40px; padding: 0 16px; font-size: 14px; gap: 8px; }
.btn--chico svg { width: 16px; height: 16px; }
.osc .btn { background: var(--verde-brote); color: var(--verde-noche); }
.osc .btn:hover { background: var(--verde-lima); color: var(--verde-noche); }
@media (max-width: 420px) { .btn__largo { display: none; } }

.salida {
  font: 500 15px/1.45 var(--f-voz); color: var(--tinta-cuerpo);
  text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: color var(--dur-rapida) var(--ease), text-decoration-color var(--dur-rapida) var(--ease);
}
.salida:hover { color: var(--verde-bosque); text-decoration-color: currentColor; }
.osc .salida { color: var(--osc-cuerpo); text-decoration-color: var(--osc-marca); }
.osc .salida:hover { color: var(--verde-lima); text-decoration-color: currentColor; }

.enlace { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--f-voz); color: var(--verde-bosque); text-decoration: none; }
.enlace svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.enlace:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Apertura ---------- */

.hero { background: var(--verde-noche); color: var(--osc-fuerte); }
.hero__escena { position: relative; overflow: hidden; }
.hero__foto { position: absolute; inset: 0; margin: 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero__foto::after { content: ""; position: absolute; inset: 0; background: var(--velo-foto-lateral); }
.hero__in { position: relative; min-height: clamp(540px, calc(88svh - var(--barra) - 150px), 700px); display: flex; align-items: center; padding-block: var(--e-20) var(--e-24); }
.hero__texto { max-width: 690px; }
.hero .titulo-1 { margin-top: var(--e-8); max-width: 15ch; }
.hero .bajada { margin-top: var(--e-6); max-width: 47ch; color: var(--osc-cuerpo); }
.hero__accion { display: flex; align-items: center; gap: var(--e-4) var(--e-8); flex-wrap: wrap; margin-top: var(--e-10); }

.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--osc-linea); }
.cifra { padding: var(--e-8) var(--e-8) var(--e-10) 0; min-width: 0; }
.cifra + .cifra { padding-left: var(--e-8); border-left: 1px solid var(--osc-linea); }
.cifra__n { display: block; font: 400 clamp(36px, 3.6vw, 52px)/1.05 var(--f-voz); letter-spacing: -.022em; font-variant-numeric: tabular-nums; color: var(--osc-fuerte); white-space: nowrap; }
.cifra__n small { font-size: .42em; font-weight: 500; letter-spacing: 0; margin-left: .3em; color: var(--osc-cuerpo); }
.cifra__n em { font-style: normal; color: var(--verde-brote); }
/* El punto de miles va con su ancho natural: en Plex no hace falta ajustarlo como en la mono */
.sep { display: inline; }
.cifra__t { display: block; margin-top: var(--e-3); font-size: 15px; line-height: 1.5; color: var(--osc-suave); max-width: 30ch; }

@media (max-width: 900px) {
  .hero__escena { display: flex; flex-direction: column; }
  .hero__foto { position: relative; inset: auto; aspect-ratio: 4 / 3; max-height: 46svh; width: 100%; }
  .hero__foto::after { background: var(--velo-foto); top: 55%; }
  .hero__foto img { object-position: 50% 62%; }
  .hero__in { min-height: 0; padding-block: var(--e-2) var(--e-12); margin-top: calc(-1 * var(--e-16)); }
  .hero .titulo-1 { margin-top: var(--e-6); }
}
@media (max-width: 640px) {
  .cifras { grid-template-columns: 1fr; }
  .cifra, .cifra + .cifra { padding: var(--e-6) 0; border-left: 0; }
  .cifra + .cifra { border-top: 1px solid var(--osc-linea); }
  .cifra__t { margin-top: var(--e-2); }
}

/* ---------- Clientes ---------- */

.clientes { border-bottom: 1px solid var(--linea); }
.clientes__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-5) var(--e-12); padding-block: var(--e-10); }
.clientes__rot { font: 500 14px/1.35 var(--f-voz); letter-spacing: .01em; color: var(--tinta-suave); }
.clientes__mas { font-size: 14px; line-height: 1.5; color: var(--tinta-suave); max-width: 30ch; }

/* Cinta de logos: dos vueltas iguales que se desplazan juntas, así el giro no
   tiene corte. Se frena con el puntero encima y queda quieta con movimiento
   reducido. Los logos ya vienen en el gris de la marca. */
.cinta {
  --cinta-hueco: clamp(40px, 5vw, 72px);
  --cinta-tiempo: 38s;
  flex: 1 1 320px; min-width: 0; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.cinta__pista {
  flex: 0 0 auto; min-width: 100%; display: flex; align-items: center; justify-content: space-around;
  gap: var(--cinta-hueco); padding-right: var(--cinta-hueco);
  animation: cinta var(--cinta-tiempo) linear infinite;
}
.cinta__pista li { flex: 0 0 auto; display: flex; align-items: center; height: 44px; }
.cinta__pista img { display: block; max-width: none; height: auto; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .cinta { -webkit-mask-image: none; mask-image: none; }
  .cinta__pista { animation: none; flex: 1 1 auto; min-width: 0; padding-right: 0; flex-wrap: wrap; justify-content: flex-start; row-gap: var(--e-4); }
  .cinta__pista[aria-hidden] { display: none; }
}
@media (max-width: 900px) {
  .clientes__in { gap: var(--e-4) var(--e-8); padding-block: var(--e-8); }
  .clientes__rot, .cinta { width: 100%; flex-basis: 100%; }
  .clientes__mas { max-width: none; }
  .cinta { --cinta-tiempo: 28s; }
}

/* ---------- Secciones ---------- */

.seccion { padding-block: var(--seccion); }
.seccion--hondo { background: var(--papel-hondo); }
.osc { background: var(--verde-noche); }

.encabezado { display: grid; gap: var(--e-6); max-width: 820px; }
.encabezado .titulo-2 { margin-top: var(--e-2); }

.duo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.duo--foto-izq { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.duo--foto-izq > .foto { order: -1; }
.duo__texto > .titulo-2 { margin-top: var(--e-6); margin-bottom: var(--e-6); }
@media (max-width: 900px) {
  .duo, .duo--foto-izq { grid-template-columns: 1fr; }
  .duo--foto-izq > .foto { order: 0; }
}

/* Fotografía: siempre real, texto encima sólo con velo */
.foto { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--papel-hondo); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--vertical { aspect-ratio: 4 / 5; }
.foto--ancha { aspect-ratio: 21 / 9; }
.foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--e-16) var(--e-6) var(--e-5);
  background: var(--velo-foto);
  font: 500 14px/1.4 var(--f-voz); color: var(--osc-fuerte);
}
@media (max-width: 900px) { .foto--vertical { aspect-ratio: 4 / 3.4; } }
@media (max-width: 700px) { .foto--ancha { aspect-ratio: 4 / 3; } }

/* Negación en lista */
.negacion { margin-top: var(--e-6); display: grid; }
.negacion li { display: flex; gap: var(--e-4); align-items: baseline; padding-block: 14px; border-top: 1px solid var(--linea); font: 600 17px/1.4 var(--f-voz); color: var(--tinta); }
.negacion li:last-child { border-bottom: 1px solid var(--linea); }
.negacion li::before { content: ""; width: 12px; height: 2px; background: var(--verde-bosque); flex: none; transform: translateY(-5px); }
.duo__texto .nota { margin-top: var(--e-6); }

/* ---------- La red: diecisiete entregas ---------- */

.red__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
@media (max-width: 1000px) { .red__grid { grid-template-columns: 1fr; } }
.red .titulo-2 { margin-block: var(--e-6); }
.red .cuerpo { max-width: 54ch; }
.red__remate { margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--osc-linea); font: 600 19px/1.4 var(--f-voz); color: var(--osc-fuerte); max-width: 40ch; }

.diagrama { display: grid; gap: var(--e-10); padding: clamp(24px, 3vw, 40px); background: rgba(255, 255, 255, .06); border-radius: var(--r-md); }
.diagrama__rot { font: 500 15px/1.4 var(--f-voz); color: var(--osc-cuerpo); padding-bottom: var(--e-5); border-bottom: 1px solid var(--osc-linea); }
.camion { display: grid; gap: var(--e-3); }
.camion__cab { display: flex; align-items: center; gap: var(--e-3); }
.camion__cab svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--osc-suave); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.camion__cab span { font: 500 15px/1.3 var(--f-voz); color: var(--osc-cuerpo); }
.camion__cab b { margin-left: auto; font: 400 clamp(24px, 2.4vw, 32px)/1 var(--f-voz); letter-spacing: -.022em; font-variant-numeric: tabular-nums; color: var(--osc-fuerte); white-space: nowrap; }
.camion__cab b small { font-size: .56em; font-weight: 500; letter-spacing: 0; margin-left: .3em; color: var(--osc-cuerpo); }
.camion__caja { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 3px; height: 60px; padding: 4px; border: 1px solid var(--osc-marca); border-radius: var(--r-xs); }
.camion__caja li { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; border-radius: 1px; font: 500 11px/1 var(--f-cifra); font-variant-numeric: tabular-nums; }
.camion__caja .tuya { background: var(--verde-brote); color: var(--verde-noche); }
.camion__caja .otros { background: rgba(255, 255, 255, .2); }
.camion__pie { font-size: 14px; line-height: 1.55; color: var(--osc-suave); max-width: 56ch; }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-8); padding-top: var(--e-5); border-top: 1px solid var(--osc-linea); }
.leyenda li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--osc-suave); }
.leyenda i { width: 12px; height: 12px; border-radius: 0; flex: none; }
.leyenda .tuya { background: var(--verde-brote); }
.leyenda .otros { background: rgba(255, 255, 255, .2); }
@media (max-width: 560px) {
  .camion__caja { gap: 2px; height: 48px; padding: 3px; }
  .camion__caja li { font-size: 0; }
}

/* ---------- Gestión de parques ---------- */

.piezas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); margin-top: var(--e-12); }
@media (max-width: 1080px) { .piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .piezas { grid-template-columns: 1fr; } }
.card { position: relative; overflow: hidden; background: var(--blanco); border-radius: var(--r-md); padding: var(--e-6) var(--e-6) var(--e-8); }
.card--filete::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--verde-bosque); }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.card__top svg { width: 26px; height: 26px; fill: none; stroke: var(--verde-bosque); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card__n { font: 500 12px/1 var(--f-cifra); letter-spacing: .06em; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.card h3 { margin: var(--e-6) 0 var(--e-2); font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.card > p:not(.ante) { font-size: 15px; line-height: 1.6; color: var(--tinta-cuerpo); }

/* ---------- Reporting ---------- */

.estados { margin-top: var(--e-8); }
.estados__rot { font: 500 13px/1.35 var(--f-voz); letter-spacing: .01em; color: var(--tinta-suave); margin-bottom: 10px; }
.estados__lista { counter-reset: estado; border-top: 1px solid var(--linea); }
.estados__lista li { counter-increment: estado; display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding-block: 11px; border-bottom: 1px solid var(--linea); font: 600 16px/1.35 var(--f-voz); color: var(--tinta); }
.estados__lista li::before { content: counter(estado, decimal-leading-zero); font: 500 12px/1 var(--f-cifra); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.estados__lista li.fuera { color: var(--tinta-cuerpo); font-weight: 500; }
.estados__lista li.fuera::before { content: "—"; }
.duo__texto .salida { display: inline-block; margin-top: var(--e-8); }

/* ---------- Integración vertical ---------- */

.eslabones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--e-8); margin-top: var(--e-12); }
@media (max-width: 960px) { .eslabones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .eslabones { grid-template-columns: 1fr; } }
.eslabon { padding: var(--e-6) 0 var(--e-8); border-top: 1px solid var(--linea); min-width: 0; }
.eslabon__n { font: 500 12px/1 var(--f-cifra); letter-spacing: .06em; color: var(--verde-bosque); font-variant-numeric: tabular-nums; }
.eslabon h3 { margin: var(--e-4) 0 var(--e-2); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.eslabon p { font-size: 15px; line-height: 1.6; color: var(--tinta-cuerpo); max-width: 34ch; }

.foto--sangre { margin-top: var(--e-12); border-radius: 0; aspect-ratio: 12 / 5; max-height: 640px; width: 100%; }
.foto--sangre img { object-position: 50% 58%; }
.foto--sangre figcaption { padding: var(--e-12) 0 var(--e-5); }
.foto--sangre figcaption .wrap { display: block; }
@media (max-width: 700px) { .foto--sangre { aspect-ratio: 4 / 3; } }

/* Video de planta: se monta sobre su fotograma inicial y aparece recién
   cuando ya está reproduciendo, así nunca se ve un cuadro negro. */
.foto__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; opacity: 0; transition: opacity var(--dur-lenta) var(--ease); }
.foto--video.en-marcha .foto__video { opacity: 1; }
.foto--video figcaption { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .foto__video { display: none; } }

.plantas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); margin-top: var(--e-16); align-items: start; }
@media (max-width: 900px) { .plantas { grid-template-columns: 1fr; } }
.plantas .cuerpo { margin-top: var(--e-5); max-width: 44ch; }
.plantas__cifra { display: flex; align-items: baseline; gap: 14px; margin-top: var(--e-6); padding-bottom: var(--e-5); border-bottom: 1px solid var(--linea); }
.plantas__cifra b { font: 400 clamp(64px, 7vw, 96px)/.95 var(--f-voz); letter-spacing: -.03em; color: var(--verde-bosque); font-variant-numeric: tabular-nums; }
.plantas__cifra span { font: 600 18px/1.2 var(--f-voz); color: var(--tinta); }
.tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla th { text-align: left; padding: 0 var(--e-4) 10px 0; font: 600 11px/1.35 var(--f-cifra); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); border-bottom: 1px solid #889185; }
.tabla td { padding: 13px var(--e-4) 13px 0; border-bottom: 1px solid var(--linea); font-size: 16px; line-height: 1.35; vertical-align: baseline; }
.tabla td.n { width: 52px; font: 500 12px/1 var(--f-cifra); color: var(--tinta-suave); }
.tabla th:last-child, .tabla td:last-child { padding-right: 0; }
.tabla tr.central td { font-weight: 600; }
.tabla .marca { display: inline-block; margin-left: 12px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--verde-bruma); font: 600 12px/1.35 var(--f-voz); letter-spacing: .01em; color: var(--verde-bosque); vertical-align: 1px; }

/* ---------- Pallets nuevos y exportación ---------- */

.lineas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); align-items: stretch; }
@media (max-width: 900px) { .lineas { grid-template-columns: 1fr; } }
.lineas .foto--vertical { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 900px) { .lineas .foto--vertical { aspect-ratio: 4 / 3.4; min-height: 0; } }
.lineas__texto { display: grid; align-content: center; }
.linea + .linea { margin-top: var(--e-12); padding-top: var(--e-12); border-top: 1px solid var(--linea); }
.linea .titulo-2 { margin: var(--e-5) 0 var(--e-5); }
.condiciones { margin-top: var(--e-6); border-top: 1px solid var(--linea); }
.condiciones div { display: grid; grid-template-columns: 110px 1fr; gap: var(--e-4); padding-block: 12px; border-bottom: 1px solid var(--linea); align-items: baseline; }
.condiciones dt { font: 500 13px/1.35 var(--f-voz); letter-spacing: .01em; color: var(--tinta-suave); }
.condiciones dd { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--tinta); }
.linea .enlace { margin-top: var(--e-6); }

/* ---------- Cierre ---------- */

.cierre { padding-block: var(--seccion); }
.cierre__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--e-12) clamp(48px, 7vw, 112px); align-items: end; }
@media (max-width: 960px) { .cierre__grid { grid-template-columns: 1fr; } }
.cierre__in { max-width: 760px; }
.titulo-cierre { margin: var(--e-6) 0; font-size: clamp(36px, 4.6vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -.034em; max-width: 16ch; }
.cierre .cuerpo { max-width: 56ch; }
.cierre__accion { display: flex; align-items: center; gap: var(--e-4) var(--e-8); flex-wrap: wrap; margin-top: var(--e-10); }
.cierre__datos { display: grid; border-top: 1px solid var(--osc-linea); }
.cierre__datos div { padding-block: var(--e-5); border-bottom: 1px solid var(--osc-linea); }
.cierre__datos dt { font: 500 13px/1.35 var(--f-voz); letter-spacing: .01em; color: var(--osc-suave); margin-bottom: 8px; }
.cierre__datos dd { font: 600 16px/1.5 var(--f-voz); color: var(--osc-fuerte); user-select: all; }
.cierre__datos dd.texto { font-family: var(--f-voz); font-size: 15px; user-select: text; }

/* ---------- Pie ---------- */

.pie { background: var(--verde-noche); color: var(--osc-suave); font-size: 14px; }
.pie__in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--e-10); padding-block: var(--e-12); border-top: 1px solid var(--osc-linea); }
@media (max-width: 800px) { .pie__in { grid-template-columns: 1fr; gap: var(--e-8); } }
.pie .logo { height: 44px; width: calc(44px * 563 / 209); }
.pie__desc { margin-top: var(--e-5); max-width: 38ch; line-height: 1.6; color: var(--osc-suave); }
.pie__rot { margin-bottom: var(--e-4); font: 600 13px/1.35 var(--f-voz); letter-spacing: .01em; color: var(--osc-suave); }
.pie ul { display: grid; gap: 10px; }
.pie a { color: var(--osc-cuerpo); text-decoration: none; }
.pie a:hover { color: var(--verde-lima); text-decoration: underline; }
.pie__dato { font-family: var(--f-cifra); font-size: 13px; color: var(--osc-cuerpo); }
.pie__legal { display: flex; justify-content: space-between; align-items: center; gap: var(--e-6); flex-wrap: wrap; padding-block: var(--e-6) var(--e-8); border-top: 1px solid var(--osc-linea); font-size: 13px; color: var(--osc-suave); }
.pie__legal .cifra-texto { font-family: var(--f-cifra); }
.guino { display: flex; align-items: center; gap: 14px; }
.guino svg { width: 24px; height: 24px; }
.guino path { fill: var(--verde-bruma); }


/* ==========================================================================
   Páginas interiores
   ========================================================================== */

.barra__nav a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--verde-bosque); }
.menu-movil a[aria-current="page"] { color: var(--verde-bosque); }

.hero-int { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 96px); }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--e-10); font: 400 13px/1.45 var(--f-voz); color: var(--osc-suave); }
.migas a { color: var(--osc-suave); text-decoration: none; }
.migas a:hover { color: var(--verde-lima); text-decoration: underline; }
.titulo-int { margin-top: var(--e-6); font-size: clamp(36px, 4.6vw, 56px); font-weight: 700; line-height: 1.06; letter-spacing: -.032em; max-width: 20ch; }
.hero-int .bajada { margin-top: var(--e-6); max-width: 56ch; }
.hero-int .hero__accion { margin-top: var(--e-10); }
.hero-int + .foto--sangre { margin-top: 0; }
.foto picture, .hero__foto picture { display: contents; }
.cierre--int .titulo-cierre { max-width: 20ch; }

.medida { max-width: 740px; }
.medida .titulo-2 { margin-block: var(--e-6); }
.mas { margin-top: var(--e-8); }

/* Lista definida: título y texto por renglón, numerados */
.lista-def { margin-top: var(--e-10); border-top: 1px solid var(--linea); counter-reset: item; }
.lista-def li { display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-2) var(--e-6); align-items: baseline; padding-block: 22px; border-bottom: 1px solid var(--linea); counter-increment: item; }
.lista-def li::before { content: counter(item, decimal-leading-zero); font: 500 12px/1 var(--f-cifra); letter-spacing: .06em; color: var(--verde-bosque); font-variant-numeric: tabular-nums; }
.lista-def strong { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--tinta); }
.lista-def span { font-size: 16px; line-height: 1.6; color: var(--tinta-cuerpo); }
.dos-col > .lista-def { margin-top: 0; }
.dos-col .lista-def li { grid-template-columns: 44px minmax(0, 1fr); }
.dos-col .lista-def span { grid-column: 2; }
@media (max-width: 760px) {
  .lista-def li { grid-template-columns: 40px minmax(0, 1fr); }
  .lista-def span { grid-column: 2; }
}

.destacado { margin-top: var(--e-8); padding: var(--e-6); background: var(--papel-hondo); border-radius: var(--r-md); font: 600 clamp(18px, 1.6vw, 21px)/1.5 var(--f-voz); color: var(--tinta); max-width: 56ch; }
.seccion--hondo .destacado { background: var(--blanco); }

/* Cifras canónicas sobre claro */
.cifras-claras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--e-12); border-top: 1px solid var(--linea); }
.cifras-claras li { padding: var(--e-6) var(--e-6) var(--e-2) 0; min-width: 0; }
.cifras-claras li + li { padding-left: var(--e-6); border-left: 1px solid var(--linea); }
.cifras-claras b { display: block; font: 400 clamp(36px, 3.6vw, 52px)/1.05 var(--f-voz); letter-spacing: -.022em; color: var(--verde-bosque); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifras-claras li > span { display: block; margin-top: var(--e-3); font-size: 15px; line-height: 1.5; color: var(--tinta-cuerpo); max-width: 30ch; }
@media (max-width: 640px) {
  .cifras-claras { grid-template-columns: 1fr; }
  .cifras-claras li, .cifras-claras li + li { padding: var(--e-5) 0; border-left: 0; }
  .cifras-claras li + li { border-top: 1px solid var(--linea); }
}
.nota--clientes { margin-top: var(--e-6); }

/* Dos columnas: título a la izquierda, contenido a la derecha */
.dos-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-10) clamp(40px, 7vw, 112px); align-items: start; }
.dos-col .titulo-2 { margin-block: var(--e-6); }
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; } }

/* Tabla de condiciones: rótulo y valor */
.tabla--def th[scope="row"] { width: 40%; padding: 14px var(--e-4) 14px 0; border-bottom: 1px solid var(--linea); text-align: left; font: 600 15px/1.4 var(--f-voz); letter-spacing: 0; text-transform: none; color: var(--tinta); vertical-align: baseline; }
.tabla--def td { color: var(--tinta-cuerpo); }
.tabla--def:not(:has(thead)) tbody tr:first-child > * { border-top: 1px solid var(--linea); }

/* Datos de contacto */
.datos { display: grid; margin-top: var(--e-6); border-top: 1px solid var(--linea); }
.datos > div { padding-block: var(--e-5); border-bottom: 1px solid var(--linea); }
.datos dt { margin-bottom: 8px; font: 500 13px/1.35 var(--f-voz); letter-spacing: .01em; color: var(--tinta-suave); }
.datos dd { font: 500 17px/1.55 var(--f-voz); color: var(--tinta); }
.datos dd.mono { font-family: var(--f-cifra); font-size: 16px; user-select: all; }
.datos .datos__extra { margin-top: var(--e-3); }

/* Otras líneas en tarjetas */
.lineas-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); }
@media (max-width: 780px) { .lineas-duo { grid-template-columns: 1fr; } }
.linea-tarjeta { padding: var(--e-8); }
.linea-tarjeta .titulo-3 { margin: var(--e-5) 0 var(--e-3); font-size: 21px; }
.linea-tarjeta > p:not(.ante) { font-size: 16px; line-height: 1.6; color: var(--tinta-cuerpo); }
.linea-tarjeta .enlace { margin-top: var(--e-6); }

/* Texto largo cargado desde el editor */
.texto-largo { max-width: 68ch; font-size: 17px; line-height: 1.7; color: var(--tinta-cuerpo); }
.texto-largo > * + * { margin-top: var(--e-4); }
.texto-largo h2 { margin-top: var(--e-10); font-size: 24px; font-weight: 700; letter-spacing: -.015em; color: var(--tinta); }
.texto-largo a { color: var(--verde-bosque); }
.texto-largo ul { padding-left: 1.25em; list-style: disc; }
.texto-largo li + li { margin-top: var(--e-2); }
.texto-largo strong { color: var(--tinta); }

/* ---------- El circuito alrededor del pallet 3D (home) ----------
   El anillo sale de inc/circuito-escena.php, calculado con la misma cámara
   que dibuja el pallet. Mitad de atrás debajo del pallet, mitad de adelante
   encima: el pallet la tapa cuando gira por delante, como en el piso. */
.escena { margin: var(--e-10) auto 0; max-width: 1040px; }
.escena__cuadro { position: relative; aspect-ratio: 2 / 1; }
.orbita { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orbita--atras { z-index: 0; }
.orbita--adelante { z-index: 2; }
.orbita--movil { display: none; }
.orbita__anillo { fill: none; stroke: var(--verde-bosque); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.orbita__flecha { fill: none; stroke: var(--verde-bosque); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.orbita__punto { fill: var(--verde-bosque); stroke: var(--papel); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.pallet3d { position: absolute; inset: 0; z-index: 1; }
.pallet3d picture, .pallet3d img { display: block; width: 100%; height: 100%; }
.pallet3d img { object-fit: contain; }
.pallet3d--vivo picture { visibility: hidden; }
.pallet3d__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.pallet3d--arrastre .pallet3d__lienzo { cursor: grabbing; }
.escena__rotulos { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.rotulo { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: baseline; gap: var(--e-2); white-space: nowrap; }
.rotulo--izq { transform: translate(calc(-100% - 14px), -50%); }
.rotulo--der { transform: translate(14px, -50%); }
.rotulo--abajo { transform: translate(-50%, 12px); }
.rotulo__n { font: 600 12px/1 var(--f-cifra); letter-spacing: .04em; color: var(--verde-bosque); font-variant-numeric: tabular-nums; }
.rotulo__t { font: 600 14px/1.2 var(--f-voz); color: var(--tinta); }
.escena__pie { margin-top: var(--e-4); text-align: center; font: 500 12px/1.4 var(--f-cifra); letter-spacing: .04em; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
@media (max-width: 699px) {
  .escena { margin-top: var(--e-8); }
  .escena__cuadro { aspect-ratio: 16 / 10; }
  .orbita--escritorio { display: none; }
  .orbita--movil { display: block; }
  .rotulo { left: var(--xm); top: var(--ym); }
  .rotulo__t { display: none; }
  .rotulo--izq { transform: translate(calc(-100% - 10px), -50%); }
  .rotulo--der { transform: translate(10px, -50%); }
  .rotulo--abajo { transform: translate(-50%, 9px); }
}

/* Las tres etapas del anillo y, a todo el ancho, el reporte que las mide */
.piezas--ciclo { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--e-10); }
.piezas--ciclo .card--reporte { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--e-10); align-items: baseline; }
.card--reporte .card__top { grid-column: 1 / -1; }
.card--reporte h3 { margin-bottom: 0; }
.card--reporte > p:not(.ante) { margin-top: var(--e-6); max-width: 60ch; font-size: 16px; }
@media (max-width: 1080px) { .piezas--ciclo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .piezas--ciclo { grid-template-columns: 1fr; }
  .piezas--ciclo .card--reporte { display: block; }
  .card--reporte > p:not(.ante) { margin-top: 0; font-size: 15px; }
}

/* ---------- Recorrido con foto real por etapa (Gestión de parques) ---------- */
.recorrido { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-10) var(--e-8); margin: var(--e-12) 0 0; padding: 0; list-style: none; }
.paso { min-width: 0; }
.paso__foto { aspect-ratio: 4 / 5; }
.paso__cab { display: flex; align-items: center; gap: var(--e-3); margin-top: var(--e-5); }
.paso__n { font: 600 12px/1 var(--f-cifra); letter-spacing: .06em; color: var(--verde-bosque); font-variant-numeric: tabular-nums; }
.paso__via { position: relative; flex: 1; height: 1px; margin-right: calc(-1 * var(--e-8) + 6px); background: var(--verde-bosque); }
.paso__via::after { content: ""; position: absolute; right: 1px; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid var(--verde-bosque); border-right: 1.5px solid var(--verde-bosque); transform: rotate(45deg); }
.paso:last-child .paso__via { display: none; }
.paso .titulo-3 { margin-top: var(--e-3); font-size: 19px; }
.paso p { margin-top: var(--e-2); font-size: 15px; line-height: 1.6; color: var(--tinta-cuerpo); }
.recorrido__vuelta { display: flex; align-items: center; gap: var(--e-3); margin-top: var(--e-8); font: 600 15px/1.45 var(--f-voz); color: var(--verde-bosque); }
.recorrido__vuelta svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reporte-banda { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--e-6) var(--e-12); margin-top: var(--e-10); padding: var(--e-8); background: var(--blanco); border-radius: var(--r-lg); }
.reporte-banda::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--verde-bosque); }
.reporte-banda__texto .titulo-3 { margin-top: var(--e-3); font-size: 19px; }
.reporte-banda__texto p { margin-top: var(--e-2); font-size: 15px; line-height: 1.6; color: var(--tinta-cuerpo); max-width: 44ch; }
.linea-estados { display: flex; flex-wrap: wrap; row-gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.linea-estados li { display: flex; align-items: center; font: 600 15px/1.3 var(--f-voz); color: var(--tinta); }
.linea-estados li:not(:last-child)::after { content: ""; width: 24px; height: 1px; margin-inline: var(--e-3); background: var(--verde-bosque); }
.linea-estados__fuera { margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--linea); font-size: 14px; line-height: 1.5; color: var(--tinta-cuerpo); }
@media (max-width: 900px) { .reporte-banda { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .recorrido { grid-template-columns: 1fr; gap: var(--e-10); }
  .paso__foto { aspect-ratio: 3 / 2; }
  .paso__via { display: none; }
  .reporte-banda { padding: var(--e-6); }
}

/* ---------- Aviso de cookies ---------- */

.aviso-cookies {
  position: fixed; z-index: 60; left: var(--gutter); right: var(--gutter);
  bottom: calc(var(--e-4) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--e-4) var(--e-6); flex-wrap: wrap;
  max-width: 760px; margin-inline: auto; padding: var(--e-4) var(--e-5);
  background: var(--blanco); color: var(--tinta-cuerpo);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-flotante);
  font-size: 14px; line-height: 1.5;
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies p { flex: 1 1 320px; min-width: 0; }
.aviso-cookies__botones { display: flex; gap: var(--e-2); flex: none; }
.aviso-cookies__btn {
  min-height: 40px; padding: 0 18px; cursor: pointer;
  font: 600 14px/1 var(--f-voz); color: var(--tinta);
  background: transparent; border: 1px solid #AEB4AC; border-radius: var(--r-pill);
}
.aviso-cookies__btn:hover { background: var(--verde-bruma); }
@media (max-width: 600px) {
  .aviso-cookies { gap: var(--e-3); padding: var(--e-3) var(--e-4); font-size: 13px; line-height: 1.45; bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px)); }
  .aviso-cookies p { flex-basis: 100%; }
  .aviso-cookies__botones { flex: 1 1 100%; }
  .aviso-cookies__btn { flex: 1; min-height: 38px; }
}
.pie__cookies { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--osc-cuerpo); }
.pie__cookies:hover { color: var(--verde-lima); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo.se-arma .logo__tabla { animation: none; }
  *, *::before, *::after { transition-duration: 0ms !important; }
}

/* Captura del reporte que ve el cliente: flota sobre el papel, con la única sombra del sistema */
.panel-captura { margin-top: var(--e-12); }
.panel-captura picture { display: block; }
.panel-captura img { display: block; width: 100%; height: auto; border-radius: var(--r-md); background: var(--blanco); box-shadow: var(--sombra-flotante); }
.panel-captura figcaption { margin-top: var(--e-4); font-size: 14px; line-height: 1.5; color: var(--tinta-suave); }

/* Preguntas frecuentes: el texto está en el HTML aunque esté plegado, así lo
   leen los buscadores; se abre con clic o con teclado. */
.preguntas { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .preguntas { grid-template-columns: 1fr; } }
.preguntas__lista { border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--e-6); align-items: baseline;
  padding: var(--e-5) 0; font: 600 18px/1.35 var(--f-voz); color: var(--tinta);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; flex: none; width: 1ch; text-align: center; font: 400 24px/1 var(--f-voz); color: var(--verde-bosque); }
.pregunta[open] summary::after { content: "−"; }
.pregunta summary:hover { color: var(--verde-bosque); }
.pregunta p { padding: 0 0 var(--e-6); max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--tinta-cuerpo); }