/* ============================================================
   MAYPRO — sistema de diseño «Paper tècnic»  (v2, base clara)
   Papel hueso + tinta grafito + azul MAYPRO #0057B8 como única
   tinta viva. El oscuro se concentra en tres momentos: héroe con
   vídeo, banda de empresa y pie (patrón Formlabs/HOMAG).
   Tipografía: Archivo (display) · IBM Plex Sans (texto) · IBM Plex Mono (datos)
   ============================================================ */

/* Las fuentes se cargan desde el <head> (fuentes.css) para no encadenar peticiones. */

/* ---------- tokens ---------- */
:root {
  /* papel: blanco puro con gris frío para bandas — sala blanca, catálogo técnico */
  --papel: #FFFFFF;
  --banda: #F3F5F8;
  --blanco: #FFFFFF;
  --crudo: #F8FAFC;

  /* noche: casi negro azulado para las bandas oscuras (héroe, empresa, pie) */
  --noche: #0A1220;
  --noche-2: #070D16;

  /* líneas */
  --linea: #E2E6EB;
  --linea-viva: #7E8B9A;

  /* tinta sobre papel */
  --tinta: #16202B;
  --tinta-2: #46525F;
  --tinta-3: #5F6B78;

  /* azules de marca (el azul #0057B8 del rebranding, el color de las máquinas) */
  --azul-maypro: #0057B8;
  --azul-maypro-2: #00448F;
  --azul-maquina: #0057B8;
  --azul-cielo: #0057B8;

  /* la placa: superficie metálica clara donde vive la fotografía */
  --placa-a: #E9EDF2;
  --placa-b: #CBD4DE;
  --placa-tinta: #2B3542;

  /* compatibilidad con nombres antiguos (SVG de la curva, etc.) */
  --acero-0: var(--papel);
  --acero-1: var(--banda);
  --chapa: var(--blanco);
  --chapa-2: var(--crudo);

  /* tipografía */
  --f-display: 'Archivo', 'Arial Black', sans-serif;
  --f-texto: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', 'Consolas', monospace;

  /* ritmo. 06/10/2026: el margen de las secciones baja de 136 a 104 px (en pantallas grandes): dos secciones
     seguidas dejaban 272 px sin nada. Se vigila con build/eines/huecos.js */
  --seccion: clamp(4rem, 7.5vw, 6.5rem);
  --seccion-c: clamp(3rem, 6vw, 5rem);
  --radio: 4px;

  /* movimiento */
  --suave: cubic-bezier(.22, 1, .36, 1);
  --corte: cubic-bezier(.77, 0, .175, 1);
}

/* Ámbito nocturno: dentro del héroe, la banda de empresa y el pie,
   los mismos componentes cambian de tinta sin tocar sus reglas. */
.heroe, .empresa-banda, .pie {
  --tinta: #F2F6FB;
  --tinta-2: #B7C6D5;
  --tinta-3: #8CA0B3;
  --linea: rgba(255, 255, 255, .14);
  --linea-viva: rgba(255, 255, 255, .34);
  --azul-cielo: #7FB9F5;
  --azul-maquina: #4FA3F0;
  --chapa: rgba(255, 255, 255, .07);
  color: var(--tinta); /* los títulos y textos sin color propio heredan la tinta nocturna */
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--azul-maypro); color: #fff; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--azul-cielo); text-decoration: none; }
a:hover { color: var(--azul-maypro-2); }
.heroe a:hover, .empresa-banda a:hover, .pie a:hover { color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--azul-cielo);
  outline-offset: 3px;
  border-radius: 2px;
}

.contenedor {
  width: min(100% - 3rem, 1200px);
  margin-inline: auto;
}

.mono { font-family: var(--f-mono); }

.saltar {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--azul-maypro); color: #fff; padding: .6rem 1rem;
}
.saltar:focus { left: 0; color: #fff; }

/* eyebrow: etiqueta troquelada */
.eyebrow {
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--azul-cielo);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 2rem; height: 1px;
  background: var(--azul-maquina);
  vertical-align: middle;
  margin-right: .75rem;
}

h1, h2, h3 { line-height: 1.08; margin: 0 0 1rem; overflow-wrap: anywhere; }
/* 10/11/2026 (revisión móvil): las palabras larguísimas del alemán y el polaco («Kabeltrommelherstellung»,
   «Datenschutzerklärung») se salían de la pantalla: en móvil se parten con guion, según el idioma de la página */
@media (max-width: 800px) {
  html:lang(de) h1, html:lang(de) h2, html:lang(de) h3, html:lang(pl) h1, html:lang(pl) h2, html:lang(pl) h3,
  html:lang(fr) h1, html:lang(fr) h2 { -webkit-hyphens: auto; hyphens: auto; }
}

.seccion-titulo {
  font-family: var(--f-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: -.01em;
  text-transform: none;
  max-width: 30ch;
  text-wrap: balance;
}

.seccion { padding-block: var(--seccion); }
.seccion-compacta { padding-block: var(--seccion-c); }
/* la sección siguiente tiene el mismo fondo y ya trae su margen: sin esto se suman los dos y queda un hueco en blanco */
.seccion-sin-pie { padding-bottom: 0; }
/* páginas de categoría: la sección que va justo debajo de la cabecera empieza con una línea pequeña («Empiece por
   aquí…») y con el margen entero de sección quedaba flotando 175 px por debajo de la introducción */
.pagina-cabeza + .seccion:not(.seccion-compacta) { padding-top: clamp(1.6rem, 3.2vw, 2.6rem); }
.seccion-banda { background: var(--banda); border-block: 1px solid var(--linea); }

/* ---------- botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: .95rem;
  padding: .85rem 1.5rem;
  border-radius: var(--radio);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--suave);
}
.boton:active { transform: translateY(1px); }
.boton .icono { width: 1.05em; height: 1.05em; transition: transform .25s var(--suave); }
.boton:hover .icono { transform: translateX(4px); }

.boton-primario { background: var(--azul-maypro); color: #fff; }
.boton-primario:hover { background: var(--azul-maypro-2); color: #fff; }

.boton-fantasma { border-color: var(--linea-viva); color: var(--tinta); background: transparent; }
.boton-fantasma:hover { border-color: var(--azul-maypro); color: var(--azul-maypro); }
.heroe .boton-fantasma:hover, .empresa-banda .boton-fantasma:hover { border-color: var(--azul-cielo); color: var(--azul-cielo); }

.icono { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .85); /* fallback para navegadores sin color-mix */
  background: color-mix(in srgb, var(--papel) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.cabecera.con-scroll {
  border-bottom-color: var(--linea);
  background: rgba(255, 255, 255, .95);
  background: color-mix(in srgb, var(--papel) 95%, transparent);
}

.cabecera-int {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 76px;
}

.logo { display: inline-flex; align-items: center; gap: .7rem; color: var(--tinta); flex: none; }
.logo-img { height: 40px; width: auto; display: block; }

.nav { margin-left: auto; }
.nav > ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--tinta-2);
  font-size: .95rem; font-weight: 500;
  padding: .55rem .7rem;
  border-radius: var(--radio);
  transition: color .2s ease, background-color .2s ease;
}
.nav a:hover { color: var(--tinta); background: var(--blanco); }
.nav a.activo { color: var(--tinta); }
.nav a.activo::after {
  content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .15rem;
  height: 2px; background: var(--azul-maypro);
}
.nav li { position: relative; }
.nav .chevron { width: .85em; height: .85em; }

.con-submenu .submenu {
  position: absolute; top: calc(100% + .4rem); left: 0;
  min-width: 260px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  list-style: none; margin: 0; padding: .4rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s var(--suave), visibility .2s;
  box-shadow: 0 18px 40px rgba(22, 32, 43, .16);
}
.con-submenu:hover .submenu,
.con-submenu:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { display: block; padding: .55rem .8rem; color: var(--tinta-2); }
.submenu a:hover { background: var(--papel); }
.submenu-todo { border-top: 1px solid var(--linea); margin-top: .25rem; color: var(--azul-maypro) !important; }

.cabecera-acciones { display: flex; align-items: center; gap: 1rem; }

.nav-conmutador {
  display: none;
  background: none; border: 1px solid var(--linea-viva); border-radius: var(--radio);
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer;
}
.nav-conmutador span { display: block; width: 18px; height: 2px; background: var(--tinta); transition: transform .25s var(--suave), opacity .2s; }
.nav-conmutador[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-conmutador[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-conmutador[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-movil { border-top: 1px solid var(--linea); background: var(--blanco); }
.cta-movil { display: none; }   /* solo en móvil (ver @media 960px) */
.menu-movil ul { list-style: none; margin: 0; padding: 1rem 1.5rem 1.5rem; display: grid; gap: .1rem; }
.menu-movil a { display: block; padding: .8rem .5rem; color: var(--tinta); font-weight: 500; border-bottom: 1px solid var(--linea); }
.menu-movil .boton { margin-top: 1rem; justify-content: center; border-bottom: none; color: #fff; }
.menu-movil-sub a { padding-left: 1.6rem; color: var(--tinta-2); font-weight: 400; }

/* ---------- héroe (banda nocturna nº 1) ---------- */
.heroe {
  position: relative; overflow: hidden;
  background: var(--noche);
  border-bottom: 1px solid var(--linea);
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem);
}

/* vídeo de fondo del héroe: la nave desde el aire, entintado en navy */
.heroe-video { position: absolute; inset: 0; pointer-events: none; }
.heroe-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.85);
}
.heroe-video::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 18, 32, .5), rgba(10, 18, 32, .3) 45%, var(--noche) 97%),
    linear-gradient(to right, rgba(7, 13, 22, .93) 22%, rgba(7, 13, 22, .5) 58%, rgba(7, 13, 22, .22));
}

/* retícula de plano técnico + resplandor azul */
.heroe-fondo {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 55% 45% at 78% 30%, rgba(46, 143, 232, .16), transparent 70%),
    linear-gradient(to right, rgba(237, 241, 245, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(237, 241, 245, .05) 1px, transparent 1px);
  background-size: 100% 100%, 72px 72px, 72px 72px;
  mask-image: linear-gradient(to bottom, black 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
}

.heroe-int { position: relative; }
.heroe-texto { max-width: 50rem; }

.heroe-titulo {
  font-family: var(--f-display);
  font-stretch: 122%;
  font-weight: 900;
  font-size: clamp(2.3rem, 5.4vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}
.heroe-titulo .acento { color: var(--azul-maquina); }

.linea-mascara { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.linea-mascara > span { display: block; }

.heroe-sub { color: var(--tinta-2); max-width: 54ch; font-size: 1.12rem; margin: 0 0 2rem; }

.heroe-acciones { display: flex; flex-wrap: wrap; gap: 1rem; }

/* firma técnica bajo el héroe */
.heroe-firma {
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-3);
  border-top: 1px solid rgba(255, 255, 255, .22);
  padding-top: 1.3rem;
  margin: 2.8rem 0 0;
  max-width: 46rem;
}

/* ---------- la placa (elemento firma) ---------- */
.placa {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, var(--placa-a), var(--placa-b));
  border-radius: 6px;
  border: 1px solid #C6CFD9;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 1px 2px rgba(22, 32, 43, .14),
    0 12px 28px rgba(22, 32, 43, .12);
  color: var(--placa-tinta);
  padding: .9rem .9rem 1.1rem;
  transition: transform .25s var(--suave), box-shadow .25s var(--suave), border-color .25s ease;
}
a.placa:hover {
  transform: translateY(-4px);
  border-color: #A9BACC;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 1px 2px rgba(22, 32, 43, .16),
    0 20px 40px rgba(22, 32, 43, .18);
  color: var(--placa-tinta);
}

/* remaches */
.placa-tornillo {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6f9fc, #97A3B1 60%, #5C6B80);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .35), 0 1px 1px rgba(255, 255, 255, .5);
}
.placa-tornillo.ta { top: 8px; left: 8px; }
.placa-tornillo.tb { top: 8px; right: 8px; }
.placa-tornillo.tc { bottom: 8px; left: 8px; }
.placa-tornillo.td { bottom: 8px; right: 8px; }

.placa-foto {
  margin: 0;
  background: #fff;
  border-radius: 3px;
  border: 1px solid rgba(43, 53, 66, .18);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 2.15 / 1;
}
.placa-foto img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }

.placa-sin-foto {
  font-family: var(--f-display);
  font-stretch: 122%; font-weight: 900;
  font-size: 2.2rem;
  color: rgba(43, 53, 66, .25);
  letter-spacing: .05em;
}

.placa-datos { display: flex; flex-direction: column; gap: .2rem; padding-top: .85rem; }

.placa-serie {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  color: #45525F;
  border-bottom: 1px solid rgba(43, 53, 66, .18);
  padding-bottom: .45rem;
  margin-bottom: .45rem;
}

.placa-codigo {
  font-family: var(--f-display);
  font-stretch: 122%;
  font-weight: 900;
  font-size: 1.55rem;
  letter-spacing: .01em;
  line-height: 1;
}

.placa-nombre { font-size: .88rem; color: #45525F; line-height: 1.4; min-height: 2.5em; }

.placa-ir {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azul-maypro-2);
  margin-top: .5rem;
}
.placa-ir .icono { width: 1em; height: 1em; transition: transform .25s var(--suave); }
a.placa:hover .placa-ir .icono, .placa-ir:hover .icono { transform: translateX(4px); }

/* rejilla de placas */
.placa-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* placa grande de las fichas */
.placa-ficha { padding: 1.1rem 1.1rem 1.2rem; }
.placa-ficha .placa-foto { aspect-ratio: auto; min-height: 260px; }
.placa-foto-esquema {
  position: relative;
  background:
    linear-gradient(to right, rgba(22, 32, 43, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 32, 43, .05) 1px, transparent 1px),
    #FBFCFD !important;
  background-size: 34px 34px, 34px 34px, 100% 100% !important;
}
.placa-foto-esquema img { padding: 1.4rem !important; }
.placa-ficha .placa-nombre { min-height: 0; }
.placa-foto-grande + .placa-foto-grande { margin-top: .8rem; }
.placa-ficha .placa-serie { border-bottom: none; margin: 0; padding: 0; }
.placa-ficha .placa-datos { padding-top: .8rem; }


/* ---------- banda de estadísticas ---------- */
.stats { border-block: 1px solid var(--linea); background: var(--crudo); }
.stats-int {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 2.2rem 1.5rem;
  border-left: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: .3rem;
}
.stat:first-child { border-left: none; }
.stat-num {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  line-height: 1;
}
.stat-prefijo { color: var(--azul-maypro); }
.stat-etq { font-size: .88rem; color: var(--tinta-3); }

/* ---------- paneles de categoría ---------- */
.cat-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.cat-panel {
  display: flex; flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 6px;
  overflow: hidden;
  color: var(--tinta);
  box-shadow: 0 1px 2px rgba(22, 32, 43, .05);
  transition: transform .25s var(--suave), border-color .25s ease, box-shadow .25s var(--suave);
}
.cat-panel:hover {
  transform: translateY(-4px);
  border-color: var(--azul-maypro);
  color: var(--tinta);
  box-shadow: 0 16px 34px rgba(22, 32, 43, .12);
}
.cat-foto { margin: 0; background: #fff; aspect-ratio: 2.3 / 1; overflow: hidden; border-bottom: 1px solid var(--linea); }
.cat-foto img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; }
.cat-datos { padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.cat-num {
  font-family: var(--f-mono); font-size: .75rem; color: var(--azul-maypro); letter-spacing: .15em;
}
.cat-num::after { content: ''; display: block; width: 2.2rem; height: 1px; background: var(--azul-maypro); margin-top: .5rem; }
.cat-datos h3 { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: 1.18rem; margin: 0; }
.cat-datos p { color: var(--tinta-2); font-size: .92rem; margin: 0; flex: 1; }
.cat-pie { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--linea); padding-top: 1rem; margin-top: .5rem; }
.cat-cuenta { font-family: var(--f-mono); font-size: .78rem; color: var(--tinta-3); }
.cat-panel .placa-ir { color: var(--azul-maypro); margin: 0; }

/* ---------- proceso (scrollytelling) ---------- */
.proceso { padding-block: var(--seccion); background: var(--banda); border-block: 1px solid var(--linea); }
.proceso-int {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.paso {
  display: flex; gap: 1.2rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--linea);
  transition: opacity .3s ease;
}
/* el atenuado de pasos solo con animaciones activas (JS + sin reduced-motion) */
html.anim .paso { opacity: .45; }
html.anim .paso.activo { opacity: 1; }
.paso:first-of-type { margin-top: 2rem; }
.paso-num {
  font-family: var(--f-mono); font-size: .8rem; color: var(--azul-maypro);
  border: 1px solid var(--linea-viva); border-radius: 50%;
  width: 2.4rem; height: 2.4rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blanco);
}
.paso.activo .paso-num { background: var(--azul-maypro); border-color: var(--azul-maypro); color: #fff; }
.paso h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.paso p { color: var(--tinta-2); font-size: .95rem; margin: 0; }

.proceso-visual { position: relative; min-height: 100%; }
.proceso-fijo {
  position: sticky; top: 110px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid var(--linea);
  overflow: hidden;
  aspect-ratio: 2.1 / 1;
  box-shadow: 0 10px 26px rgba(22, 32, 43, .08);
}
.proceso-img { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .45s ease; }
.proceso-img.visible { opacity: 1; }
.proceso-img img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.proceso-marcador {
  position: absolute; left: 1rem; bottom: .8rem;
  font-size: .7rem; letter-spacing: .15em;
  color: rgba(85, 99, 116, .85);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(85, 99, 116, .2);
  padding: .25rem .5rem; border-radius: 3px;
}

.ver-todo { margin-top: 2.5rem; }

/* ---------- sección a medida / banda empresa ---------- */
.medida { padding-block: var(--seccion); }
.medida-int {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.medida-foto { margin: 0; background: #fff; border-radius: 6px; border: 1px solid var(--linea); overflow: hidden; box-shadow: 0 10px 26px rgba(22, 32, 43, .07); }
.medida-foto img { width: 100%; object-fit: contain; }
.medida-texto p { color: var(--tinta-2); margin-bottom: 1.8rem; }

/* banda nocturna nº 2: la empresa, sobre fotografía/vídeo */
.empresa-banda {
  position: relative; overflow: hidden;
  background: var(--noche);
  padding-block: var(--seccion);
  border-block: 1px solid #E2E6EB;
}
.empresa-banda-foto { position: absolute; inset: 0; margin: 0; }
.empresa-banda-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%) brightness(.5); }
.empresa-banda-foto video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.6); }
.empresa-banda-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(7, 13, 22, .92) 25%, rgba(7, 13, 22, .5));
}
/* el texto va a la IZQUIERDA, sobre la parte oscura del degradado y alineado con el resto de la página. Antes el
   límite de ancho iba en el propio contenedor y, con sus márgenes automáticos, el bloque quedaba centrado: el
   título empezaba 280 px más adentro que los de las demás secciones (06/10/2026) */
.empresa-banda-texto { position: relative; }
.empresa-banda-texto > * { max-width: 640px; }
.empresa-banda-texto p { color: var(--tinta-2); margin-bottom: 1.8rem; }

/* ---------- banda CTA ---------- */
.banda-cta { background: linear-gradient(135deg, var(--azul-maypro), var(--azul-maypro-2)); }
.banda-cta-int {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 2rem; padding-block: clamp(3rem, 6vw, 4.5rem);
}
.banda-cta .eyebrow { color: #BFDCFF; }
.banda-cta .eyebrow::before { background: #BFDCFF; }
.banda-cta h2 {
  font-family: var(--f-display); font-stretch: 112%; font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: #fff; margin: 0; max-width: 34ch;
}
.banda-cta-acciones { display: flex; flex-wrap: wrap; gap: 1rem; }
.banda-cta .boton-primario { background: #fff; color: var(--azul-maypro-2); }
.banda-cta .boton-primario:hover { background: #E3EEFA; color: var(--azul-maypro-2); }
.banda-cta .boton-fantasma { border-color: rgba(255, 255, 255, .55); color: #fff; }
.banda-cta .boton-fantasma:hover { border-color: #fff; color: #fff; }

/* ---------- cabeceras de página interiores ---------- */
.pagina-cabeza {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 3vw, 2rem);
  background:
    linear-gradient(to right, rgba(22, 32, 43, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 32, 43, .045) 1px, transparent 1px);
  background-size: 72px 72px;
}
.migas {
  display: flex; flex-wrap: wrap; gap: .5rem;
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em;
  color: var(--tinta-3);
  margin-bottom: 2rem;
}
.migas a { color: var(--tinta-3); }
.migas a:hover { color: var(--azul-maypro); }
.migas span[aria-current] { color: var(--tinta-2); }

.pagina-titulo {
  font-family: var(--f-display);
  font-stretch: 120%; font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.pagina-intro { color: var(--tinta-2); max-width: 62ch; font-size: 1.05rem; }

.serie-cabeza {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--linea); padding-bottom: 1.2rem;
}
.serie-cabeza .seccion-titulo { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.serie-cabeza .placa-ir { color: var(--azul-maypro); }
/* «Ver la serie completa», en la cabecera de cada serie del catálogo. Era un enlace pequeño y pasaba desapercibido (el
   usuario, 08/10/2026: «no es veu massa»): ahora es un botón con borde azul, que se rellena al pasar por encima.
   Va por debajo del botón de presupuesto de la cabecera, que sigue siendo el único relleno de la página.
   El botón mide 38 px y el título de la serie, 30: el margen negativo hace que no estire la cabecera, así la primera
   máquina del catálogo sigue asomando en las ventanas bajas (lo vigila eines/primera_pantalla.js). En pantallas
   táctiles, 44 px de alto y sin ese margen. */
.serie-cabeza .serie-ver {
  align-self: center;
  margin: -.3rem 0;
  padding: .6rem 1.1rem;
  line-height: 1.2;
  font-size: .8rem;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--azul-maypro);
  background: #EEF4FB;
  border: 1.5px solid var(--azul-maypro);
  border-radius: var(--radio);
  transition: background-color .2s ease, color .2s ease;
}
.serie-cabeza .serie-ver:hover, .serie-cabeza .serie-ver:focus-visible { background: var(--azul-maypro); color: #fff; }
@media (pointer: coarse) { .serie-cabeza .serie-ver { min-height: 2.75rem; margin-block: 0; } }

/* ---------- ficha de máquina ---------- */
.ficha-cabeza { padding-bottom: 0; }
.ficha-codigo {
  font-family: var(--f-display);
  font-stretch: 125%; font-weight: 900;
  font-size: clamp(3rem, 9vw, 6.2rem);
  line-height: .95;
  letter-spacing: -.01em;
  margin-bottom: .5rem;
}
.ficha-subtitulo { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--tinta-2); max-width: 56ch; margin: 0; }

.ficha-int {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
.ficha-media { position: sticky; top: 100px; }
/* carrusel dentro de la placa: dos imágenes en el mismo marco */
.placa-foto:has(.carrusel) { flex-direction: column; align-items: stretch; }
.carrusel { position: relative; display: grid; width: 100%; aspect-ratio: 1.6 / 1; }
.carrusel-slide {
  grid-area: 1 / 1; width: 100%; height: 100% !important;
  object-fit: contain; opacity: 0; transition: opacity .35s ease;
}
.carrusel-slide.activo { opacity: 1; }
.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--linea); background: rgba(255, 255, 255, .92);
  color: var(--tinta-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s ease, border-color .15s ease;
}
.carrusel-flecha .icono { width: 17px; height: 17px; }
.carrusel-flecha:hover, .carrusel-flecha:focus-visible { color: var(--azul-maypro); border-color: var(--azul-maypro); }
.carrusel-ant { left: 10px; }
.carrusel-sig { right: 10px; }
.carrusel-puntos {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; gap: 7px;
}
.carrusel-puntos i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--linea-viva, #C9D2DC); transition: background .2s ease;
}
.carrusel-puntos i.activo { background: var(--azul-maypro); }
.carrusel-nota {
  font-size: .68rem; color: var(--tinta-3); letter-spacing: .06em;
  padding: .55rem .8rem; border-top: 1px solid var(--linea); background: #fff;
}

.ficha-cuerpo p { color: var(--tinta-2); }
.ficha-lista { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ficha-lista li {
  position: relative;
  padding: .8rem 0 .8rem 1.6rem;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta-2);
}
.ficha-lista li::before {
  content: '';
  position: absolute; left: 0; top: 1.42rem;
  width: .6rem; height: 1px;
  background: var(--azul-maypro);
}
.ficha-lista li:first-child { border-top: 1px solid var(--linea); }

.ficha-consulta {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px;
  padding: 1.6rem;
}
.ficha-consulta p { margin-top: 0; }

.ficha-specs { margin-top: 2rem; }
.ficha-specs-titulo {
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: .8rem;
}
.ficha-specs dl { margin: 0; }
.spec-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem;
  padding: .7rem 0; border-top: 1px solid var(--linea);
}
.spec-fila:last-child { border-bottom: 1px solid var(--linea); }
.spec-fila dt { font-family: var(--f-mono); font-size: .8rem; color: var(--tinta-3); letter-spacing: .04em; }
.spec-fila dd { margin: 0; color: var(--tinta); font-variant-numeric: tabular-nums; }

.ficha-acciones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.ficha-decadas {
  margin-top: 2.5rem;
  border-left: 2px solid var(--azul-maypro);
  padding: .4rem 0 .4rem 1.4rem;
}
.ficha-decadas h2 {
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--azul-maypro); margin-bottom: .5rem;
}
.ficha-decadas p { color: var(--tinta-2); font-size: .95rem; margin: 0; }

/* ---------- MAYPRO en el mundo ---------- */
.mundo { border-top: 1px solid var(--linea); }
.mundo-mapa {
  margin: 2.6rem 0 0;
}
.mundo-mapa img {
  width: 100%;
  max-width: 980px;
  height: auto;
  margin-inline: auto;
  display: block;
}
/* 10/11/2026: crédito del mapa base (CC BY-SA 3.0 lo pide), pequeño y a la derecha */
.mundo-credito { max-width: 980px; margin: .4rem auto 0; text-align: right; font-size: .68rem; color: var(--tinta-3); }
.mundo-credito a { color: inherit; }
/* 09/11/2026: los países en texto, debajo del mapa (discreto: el mapa sigue siendo lo principal) */
.mundo-paises {
  max-width: 980px; margin: 1.8rem auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .6rem 2rem;
}
.mundo-paises p { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--tinta-3); }
.mundo-paises strong { display: block; color: var(--tinta-2); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.mundo-coda {
  margin-top: 2.6rem;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--tinta-3);
  text-transform: uppercase;
}
.mundo-coda::before {
  content: '';
  display: inline-block;
  width: 2rem; height: 1px;
  background: var(--azul-maypro);
  vertical-align: middle;
  margin-right: .75rem;
}

/* ---------- SAT / servicio postventa ---------- */
.sat { background: var(--banda); border-block: 1px solid var(--linea); }
/* como en .empresa-banda-texto: el límite de ancho, en lo de dentro; el bloque, alineado a la izquierda */
.sat-int > * { max-width: 780px; }
.sat-texto { color: var(--tinta-2); }
.sat-puntos { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .9rem; }
.sat-puntos li { position: relative; padding-left: 1.4rem; color: var(--tinta-2); }
.sat-puntos li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--azul-maypro);
}
.sat-puntos strong { color: var(--tinta); }
.sat-cierre {
  font-family: var(--f-display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--azul-maypro);
  border-left: 2px solid var(--azul-maypro);
  padding-left: 1.2rem;
  margin: 1.8rem 0 2.2rem;
}

/* ---------- buscador de máquinas ---------- */
/* 06/10/2026 — el usuario: «semblaria que haguessis de buscar una màquina pel buscador, no es veu lo de sota». En su
   portátil (1536×730 útiles) la caja del buscador llenaba la primera pantalla y la primera máquina empezaba en 870 px.
   Ahora la cabecera del catálogo es más baja (.pagina-cabeza-catalogo), el buscador es una barra (campo y filtros en
   una fila en pantallas anchas, sin la línea vacía de la cuenta) y la primera serie va pegada: las máquinas asoman. */
.buscador { padding-block: 0 clamp(.6rem, 1.4vw, 1rem); }
.buscador-caja {
  background: var(--banda);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 1rem 1.2rem 1.1rem;
}
.buscador-etiqueta {
  display: block;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: .55rem;
}
.buscador-campo { position: relative; display: flex; align-items: center; }
.buscador-lupa {
  position: absolute; left: 1rem;
  width: 1.15em; height: 1.15em;
  color: var(--tinta-3);
  pointer-events: none;
}
.buscador-campo input {
  width: 100%;
  background: var(--blanco);
  border: 1px solid var(--linea-viva);
  border-radius: var(--radio);
  color: var(--tinta);
  font: inherit;
  font-size: 1.02rem;
  padding: .9rem 3rem .9rem 3rem;
  min-height: 52px;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.buscador-campo input::-webkit-search-cancel-button { display: none; }
.buscador-campo input:focus {
  outline: none;
  border-color: var(--azul-maypro);
  box-shadow: 0 0 0 3px rgba(0, 87, 184, .16);
}
.buscador-campo input::placeholder { color: var(--tinta-3); }
.buscador-limpiar {
  position: absolute; right: .5rem;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--tinta-3);
  border-radius: var(--radio);
}
.buscador-limpiar:hover { color: var(--tinta); background: var(--banda); }
.buscador-limpiar[hidden] { display: none; }   /* el display de arriba anulaba el atributo hidden: la × salía con el campo vacío */

.buscador-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.chip-filtro {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-texto);
  font-size: .88rem; font-weight: 500;
  color: var(--tinta-2);
  background: var(--blanco);
  border: 1px solid var(--linea-viva);
  border-radius: 999px;
  padding: .55rem 1rem;
  min-height: 44px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.chip-filtro:hover { border-color: var(--azul-maypro); color: var(--azul-maypro); }
.chip-filtro.activo { background: var(--azul-maypro); border-color: var(--azul-maypro); color: #fff; }
.chip-num { font-size: .78rem; opacity: .75; font-variant-numeric: tabular-nums; }

.buscador-cuenta {
  font-size: .8rem; letter-spacing: .06em;
  color: var(--tinta-3);
  margin: .8rem 0 0;
  min-height: 1.2em;
}
.buscador-cuenta:empty { display: none; }     /* solo ocupa sitio cuando hay una búsqueda */
/* una barra: el campo y los filtros, en la misma fila. Si en algún idioma los filtros no caben, saltan a dos filas
   dentro de su columna (el campo no baja de 20rem) en vez de salirse */
@media (min-width: 1180px) {
  .buscador-caja { display: grid; grid-template-columns: minmax(20rem, 1fr) auto; column-gap: .75rem; align-items: center; }
  .buscador-etiqueta, .buscador-cuenta { grid-column: 1 / -1; }
  .buscador-chips { margin-top: 0; gap: .4rem; justify-content: flex-end; }
  .buscador-caja .chip-filtro { padding-inline: .7rem; white-space: nowrap; font-size: .82rem; }
  .buscador-campo input { padding-left: 2.7rem; text-overflow: ellipsis; }
}
/* ventanas bajas (un portátil de 1920×1080 al 150 %, uno de 1366×768…): la cabecera del catálogo, aún más corta, y
   la etiqueta del buscador fuera de la vista (sigue ahí para los lectores de pantalla): la lupa y la ayuda del campo
   ya dicen qué es */
@media (min-width: 900px) and (max-height: 720px) {
  .pagina-cabeza-catalogo { padding-block: 1rem .6rem; }
  .pagina-cabeza-catalogo .migas { margin-bottom: .7rem; }
  .pagina-cabeza-catalogo .eyebrow { margin-bottom: .6rem; }
  .pagina-cabeza-catalogo .pagina-titulo { font-size: clamp(2rem, 3.6vw, 2.6rem); margin-bottom: .6rem; }
}
@media (min-width: 1180px) and (max-height: 640px) {
  .buscador-etiqueta { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* móvil: los filtros, en una sola fila que se desliza con el dedo (eran tres filas y la caja llenaba la pantalla);
   la fila llega hasta el borde de la caja para que el filtro cortado avise de que hay más */
@media (max-width: 640px) {
  .buscador-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1.1rem; padding-inline: 1.1rem; scroll-padding-inline: 1.1rem; }
  .buscador-chips::-webkit-scrollbar { display: none; }
  .buscador-chips .chip-filtro { flex: none; white-space: nowrap; }
}
/* la cabecera del catálogo y la primera serie, más juntas */
.pagina-cabeza-catalogo { padding-block: clamp(1.4rem, 2.6vw, 2.2rem) clamp(.7rem, 1.6vw, 1.1rem); }
.pagina-cabeza-catalogo .migas { margin-bottom: 1.1rem; }
.pagina-cabeza-catalogo .pagina-intro { margin-bottom: 0; }
#navegacion-series > .seccion:first-child { padding-top: clamp(1.1rem, 2vw, 1.5rem); }
#navegacion-series .placa-rejilla { margin-top: 1.6rem; }
.serie-cabeza .seccion-titulo { max-width: none; }   /* el título de la serie, en una línea */

/* resultados */
.resultados { padding-top: 1rem; }
.lista-resultados a { grid-template-columns: 8.5rem minmax(0, 1fr) auto auto; }
.lm-serie {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
}
.lista-maquinas li[hidden] { display: none; }

.sin-resultados {
  border: 1px dashed var(--linea-viva);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  color: var(--tinta-2);
}
.sin-resultados p { margin: 0 auto; max-width: 60ch; }
.sin-resultados-titulo { font-size: 1.05rem; color: var(--tinta); margin-bottom: .8rem !important; }
.sin-resultados-q { color: var(--azul-maypro); }
.sugerencia {
  font: inherit;
  font-family: var(--f-mono);
  font-size: .88em;
  color: var(--azul-maypro);
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  padding: 0;
  cursor: pointer;
}
.sugerencia:hover { color: var(--azul-maypro-2); }

/* ---------- resto del catálogo (listado compacto) ---------- */
.resto-catalogo { background: var(--banda); border-top: 1px solid var(--linea); }
.resto-cuenta { font-size: .78rem; letter-spacing: .12em; color: var(--tinta-3); }
.resto-intro { color: var(--tinta-2); max-width: 60ch; font-size: .95rem; margin: 1.2rem 0 0; }

.lista-maquinas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 2.5rem;
  margin: 1.8rem 0 0;
  padding: 0;
}
.lista-maquinas a {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding: .95rem .6rem .95rem .2rem;
  border-bottom: 1px solid #DFE3E8;
  color: var(--tinta-2);
  border-radius: 3px;
  transition: background-color .2s ease, color .2s ease, padding-left .2s var(--suave);
}
.lista-maquinas a:hover {
  background: var(--blanco);
  color: var(--tinta);
  padding-left: .7rem;
}
.lm-codigo {
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--azul-maypro);
}
.lm-nombre { font-size: .9rem; line-height: 1.45; }
.lm-flecha { display: inline-flex; color: var(--tinta-3); opacity: 0; transition: opacity .2s ease, transform .25s var(--suave); }
.lm-flecha .icono { width: 1em; height: 1em; }
.lista-maquinas a:hover .lm-flecha { opacity: 1; transform: translateX(3px); }

/* ---------- página de familia de líneas (LCA) ---------- */

/* tarjeta de familia dentro de la rejilla de placas: ocupa todo el ancho */
.placa-familia {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
  gap: 1.4rem;
  border-width: 2px;
  border-color: var(--azul-maypro);
}
.placa-familia .pf-familia {
  aspect-ratio: auto;
  flex: 0 0 min(38%, 380px);
  min-height: 220px;
}
.placa-familia .placa-datos { justify-content: center; padding-top: 0; flex: 1; }
.placa-familia .placa-codigo { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.placa-familia .placa-nombre { font-size: 1rem; min-height: 0; max-width: 52ch; }
.pf-modelos { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.chip-modelo {
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  color: #45525F;
  border: 1px solid rgba(43, 53, 66, .3);
  border-radius: 3px;
  padding: .25rem .55rem;
}
.chip-modelo-top { background: var(--azul-maypro); border-color: var(--azul-maypro); color: #fff; }

/* selector de modelos (tabs) */
.selector-seccion { scroll-margin-top: 90px; }
.selector-modelos {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin-top: 1.8rem;
}
.sm-tab {
  scroll-margin-top: 100px;
  display: grid; gap: .2rem; justify-items: start;
  font-family: var(--f-texto);
  background: var(--blanco);
  border: 1px solid var(--linea-viva);
  border-radius: 6px;
  padding: .8rem 1.2rem;
  min-height: 64px; min-width: 130px;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, background-color .2s ease, transform .2s var(--suave), box-shadow .2s var(--suave);
}
.sm-tab:hover { border-color: var(--azul-maypro); transform: translateY(-2px); }
.sm-tab.activo {
  background: var(--azul-maypro);
  border-color: var(--azul-maypro);
  box-shadow: 0 10px 24px rgba(0, 87, 184, .25);
}
.sm-codigo {
  font-family: var(--f-display); font-stretch: 120%; font-weight: 900;
  font-size: 1.3rem; color: var(--tinta); line-height: 1;
}
.sm-anio { font-size: .68rem; letter-spacing: .1em; color: var(--tinta-3); }
.sm-tab.activo .sm-codigo { color: #fff; }
.sm-tab.activo .sm-anio { color: #BFDCFF; }
.sm-vendida {
  font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--azul-maypro);
  border: 1px solid currentColor;
  border-radius: 3px; padding: .12rem .4rem; margin-top: .2rem;
}
.sm-tab.activo .sm-vendida { color: #fff; }
/* 10/11/2026 (prueba en móvil): las pestañas de modelo, todas del mismo ancho (antes cada una a su medida) */
@media (max-width: 720px) {
  .selector-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .sm-tab { min-width: 0; }
}

.modelo-paneles { margin-top: 1.6rem; }
.modelo-panel {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 1.7rem 1.9rem;
  box-shadow: 0 1px 2px rgba(22, 32, 43, .05);
}
.mp-define {
  font-family: var(--f-display); font-stretch: 112%; font-weight: 800;
  font-size: clamp(1.1rem, 2.1vw, 1.4rem);
  color: var(--tinta);
  margin: 0 0 .5rem;
}
.mp-resumen { color: var(--tinta-2); max-width: 74ch; margin: 0 0 1.4rem; }
.specs-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  border-top: 1px solid var(--linea);
  padding-top: 1.3rem; margin: 0;
}
.specs-strip dt {
  display: flex; align-items: center; gap: .45rem;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: .4rem;
}
.specs-strip dt .icono { width: 1.15em; height: 1.15em; color: var(--azul-maypro); flex: none; }
.specs-strip dd { font-size: 1.15rem; font-weight: 600; color: var(--tinta); margin: 0; font-variant-numeric: tabular-nums; }
.specs-strip dd small { font-size: .68rem; font-weight: 400; color: var(--tinta-3); letter-spacing: .06em; }
.specs-nota { font-size: .72rem; color: var(--tinta-3); margin: .6rem 0 0; max-width: 80ch; }

/* la línea, en foto: el protagonista del panel del modelo */
.mp-fotos {
  display: grid;
  gap: 1rem;
  align-items: start;
  margin-top: 1.6rem;
}
.mp-fotos:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; }
.mp-foto {
  margin: 0;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(22, 32, 43, .07);
}
.mp-foto:has(~ .mp-foto), .mp-foto ~ .mp-foto {
  /* con dos imágenes, cajas idénticas y contenido centrado: nada baila */
  aspect-ratio: 2.2 / 1; display: block; padding: .35rem;
}
.mp-foto img { width: 100%; height: auto; display: block; }
.mp-foto:has(~ .mp-foto) img, .mp-foto ~ .mp-foto img { width: 100%; height: 100%; object-fit: contain; }

/* esquema en planta de la línea, dentro del panel del modelo */
.mp-linea {
  margin: 1.3rem 0 0;
  border-top: 1px solid var(--linea);
  padding-top: 1.3rem;
}
.mp-linea img {
  width: 100%; height: auto; display: block;
  background:
    linear-gradient(to right, rgba(22, 32, 43, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 32, 43, .045) 1px, transparent 1px),
    #FBFCFD;
  background-size: 30px 30px, 30px 30px, 100% 100%;
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: .4rem;
}
.mp-linea figcaption {
  font-size: .72rem; letter-spacing: .08em;
  color: var(--tinta-3);
  margin-top: .8rem;
  text-align: center;
}
.mp-linea figcaption a { color: var(--azul-maypro); }
.mp-linea figcaption .icono { width: .9em; height: .9em; vertical-align: -.1em; }

/* chip persistente: qué modelo se está viendo en el recorrido */
.proceso-modelo { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 1.6rem 0 0; }
.pm-etq { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.pm-chip {
  display: inline-flex; align-items: center; gap: .8rem;
  background: var(--blanco);
  border: 1px solid var(--azul-maypro);
  border-radius: 999px;
  padding: .45rem .5rem .45rem 1rem;
  min-height: 44px;
  color: var(--tinta);
  transition: background-color .2s ease;
}
.pm-chip:hover { background: #EAF2FC; color: var(--tinta); }
.pm-codigo {
  font-family: var(--f-display); font-stretch: 118%; font-weight: 900;
  font-size: 1.1rem; color: var(--azul-maypro); line-height: 1;
}
.pm-cambiar {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--azul-maypro);
  border-radius: 999px; padding: .35rem .7rem;
}

/* etiqueta de modelo sobre la variante específica de un paso */
.gp-etiqueta-modelo {
  display: inline-block;
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--azul-maypro);
  border-radius: 3px; padding: .28rem .65rem;
  margin-bottom: .7rem;
}

/* los pasos EN GRANDE */
.gran-pasos { margin-top: 2.5rem; }
.gran-paso {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.8rem, 4.5vw, 4rem);
  align-items: center;
  padding: clamp(2.2rem, 5vw, 3.6rem) 0;
  border-top: 1px solid var(--linea);
}
.gran-paso:nth-child(even) .gp-texto-col { order: 2; }
.gran-paso:nth-child(even) .gp-media-col { order: 1; }
.gp-texto-col { position: relative; }
.gp-num {
  display: block;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 900;
  font-size: clamp(3.2rem, 7vw, 5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px #C7D0DB;
  margin-bottom: .4rem;
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  .gp-num { color: #E4E8EE; }
}
.gp-accion {
  font-family: var(--f-display); font-stretch: 115%; font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 .8rem;
}
.gp-texto { color: var(--tinta-2); max-width: 56ch; margin: 0; }
.gp-nota-modelo { margin-top: 1.1rem; }
.gp-extras { margin-top: 1.4rem; }
.gp-extra-nota { font-size: .74rem; letter-spacing: .08em; color: var(--tinta-3); margin: .7rem 0 0; }

/* la tarjeta grande del módulo (la imagen clicable) */
.gp-modulo {
  display: block;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(22, 32, 43, .06);
  transition: transform .3s var(--suave), box-shadow .3s var(--suave), border-color .25s ease;
}
.gp-modulo:hover {
  transform: translateY(-5px);
  border-color: var(--azul-maypro);
  box-shadow: 0 24px 48px rgba(22, 32, 43, .16);
}
.gp-foto {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #F4F6F9, #E8ECF1);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
/* los esquemas técnicos viven sobre retícula de plano, no sobre degradado */
.gp-esquema .gp-foto {
  background:
    linear-gradient(to right, rgba(22, 32, 43, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 32, 43, .05) 1px, transparent 1px),
    #FBFCFD;
  background-size: 34px 34px, 34px 34px, 100% 100%;
}
.gp-esquema .gp-foto img { padding: 1.6rem; }
.gp-tag-esquema {
  position: absolute; top: .9rem; right: .9rem;
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--linea);
  border-radius: 3px; padding: .25rem .55rem;
}
.gp-foto img { width: 100%; height: 100%; object-fit: contain; padding: 1.2rem; transition: transform .5s var(--suave); }
.gp-modulo:hover .gp-foto img { transform: scale(1.04); }
.gp-sigla {
  font-family: var(--f-display); font-stretch: 125%; font-weight: 900;
  font-size: clamp(3rem, 8vw, 5rem);
  color: #C7D0DB;
  letter-spacing: .04em;
}
.gp-barra {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  border-top: 1px solid var(--linea);
  padding: 1rem 1.3rem;
}
.gp-codigo { font-size: .78rem; font-weight: 600; letter-spacing: .14em; color: var(--azul-maypro); }
.gp-nombre { font-weight: 600; color: var(--tinta); }
.gp-ver { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-left: auto; transition: color .2s ease; }
.gp-ver .icono { width: 1em; height: 1em; transition: transform .25s var(--suave); }
.gp-modulo:hover .gp-ver { color: var(--azul-maypro); }
.gp-modulo:hover .gp-ver .icono { transform: translateX(4px); }

/* mapa del recorrido (2/11/2026): toda la línea en una fila; se pega bajo la cabecera mientras se bajan los
   pasos y marca el actual (main.js pone --alto-cabecera, --alto-mapa y las clases pegado / activo / hecho) */
.recorrido-mapa {
  position: sticky; top: var(--alto-cabecera, 76px); z-index: 40;
  display: flex; align-items: stretch; gap: .9rem;
  margin: 2.2rem 0 0;
  padding: .8rem 0;
  background: var(--papel);
}
.recorrido-mapa.pegado {
  padding: .5rem 0;
  /* fondo y raya de lado a lado de la ventana, como la cabecera */
  box-shadow: 0 0 0 100vmax var(--papel), 0 1px 0 100vmax var(--linea);
  clip-path: inset(0 -100vmax -1px);
}
.rm-modelo { display: none; }
.recorrido-mapa.pegado .rm-modelo {
  display: flex; align-items: center; flex: none;
  font-family: var(--f-display); font-stretch: 118%; font-weight: 900;
  font-size: 1rem; color: var(--azul-maypro);
  padding-right: .9rem; border-right: 1px solid var(--linea);
}
.rm-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.rm-lista::-webkit-scrollbar { display: none; }
.rm-paso { flex: 1 1 0; min-width: 7.4rem; display: flex; align-items: stretch; }
.rm-paso + .rm-paso::before {
  content: '→'; flex: none; align-self: center;
  font-family: var(--f-mono); font-size: .85rem; color: var(--linea-viva);
  padding: 0 .3rem;
}
.rm-enlace {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .3rem;
  min-height: 44px; padding: .6rem .7rem;
  background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 6px;
  color: var(--tinta);
  transition: border-color .2s ease, background-color .2s ease;
}
.rm-enlace:hover { border-color: var(--azul-maypro); color: var(--tinta); }
.rm-cabeza { display: flex; align-items: baseline; gap: .5rem; white-space: nowrap; }
.rm-num { font-size: .66rem; letter-spacing: .1em; color: var(--tinta-3); }
.rm-codigo { font-size: .8rem; font-weight: 600; letter-spacing: .08em; color: var(--azul-maypro); }
.rm-accion { font-size: .8rem; line-height: 1.3; color: var(--tinta-2); overflow-wrap: anywhere; hyphens: auto; }
.rm-opcional .rm-enlace { border-style: dashed; }
.rm-enlace.hecho { background: var(--crudo); }
.rm-enlace.activo { border-color: var(--azul-maypro); background: #EAF2FC; box-shadow: inset 0 -2px 0 var(--azul-maypro); }
.recorrido-mapa.pegado .rm-accion { display: none; }
.recorrido-mapa.pegado .rm-enlace { padding: .45rem .6rem; justify-content: center; min-width: max-content; }
.recorrido-mapa.pegado .rm-paso { min-width: max-content; }
.gran-paso { scroll-margin-top: calc(var(--alto-cabecera, 76px) + var(--alto-mapa, 64px) + 12px); }
@media (max-width: 720px) {
  .recorrido-mapa { margin-inline: -1.1rem; padding-inline: 1.1rem; }
  .recorrido-mapa.pegado { padding-inline: 1.1rem; }
  .rm-paso { min-width: 6.6rem; }
  .rm-accion { font-size: .76rem; }
}

/* cambio de variante al elegir modelo */
html.anim .gp-media.gp-entra { animation: gp-aparece .45s var(--suave); }
@keyframes gp-aparece {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* tabla comparativa */
.tabla-scroll { overflow-x: auto; margin-top: 2rem; border: 1px solid var(--linea); border-radius: 8px; background: var(--blanco); }
/* 10/11/2026 (revisión móvil): en el móvil la tabla se desliza de lado: el modelo se queda fijo a la izquierda y una
   sombra a la derecha avisa de que hay más columnas (desaparece al llegar al final) */
.tabla-familia thead th:first-child, .tabla-familia tbody tr > :first-child { position: sticky; left: 0; z-index: 1; }
.tabla-familia tbody tr > :first-child { background: var(--blanco); box-shadow: 1px 0 0 var(--linea); }
.tabla-scroll {
  background:
    linear-gradient(to left, var(--blanco) 35%, rgba(255, 255, 255, 0)) right center / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(10, 18, 32, .2), rgba(10, 18, 32, 0)) right center / 16px 100% no-repeat scroll,
    var(--blanco);
}
.tabla-familia { width: 100%; border-collapse: collapse; min-width: 760px; }
.tabla-familia thead th {
  font-family: var(--f-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3);
  text-align: left;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--linea);
  background: var(--crudo);
  white-space: nowrap;
}
.tabla-familia tbody th, .tabla-familia tbody td {
  padding: 1.1rem;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.tabla-familia tbody tr:last-child th, .tabla-familia tbody tr:last-child td { border-bottom: none; }
.tabla-familia tbody td.mono { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta); }
.tabla-familia tbody tr:hover { background: var(--crudo); }
.tabla-familia .fila-destacada { background: rgba(0, 87, 184, .05); }
.tabla-familia .fila-destacada:hover { background: rgba(0, 87, 184, .08); }
.tf-codigo {
  display: block;
  font-family: var(--f-display); font-stretch: 120%; font-weight: 900;
  font-size: 1.25rem; color: var(--tinta); line-height: 1.1;
}
.tabla-familia th a:hover .tf-codigo { color: var(--azul-maypro); }
.tf-anio { display: block; font-size: .7rem; letter-spacing: .1em; color: var(--tinta-3); margin-top: .25rem; }
.tf-vendida {
  display: inline-block;
  font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--azul-maypro);
  border-radius: 3px; padding: .2rem .5rem; margin-top: .45rem;
}
.tf-define { color: var(--tinta-2); font-size: .95rem; min-width: 240px; }
.tabla-nota { font-size: .76rem; letter-spacing: .06em; color: var(--tinta-3); margin: 1rem 0 0; }

/* los pasos del proceso (esqueleto de la página de familia) */
.fam-pasos { margin-top: 2.4rem; }
.fam-paso {
  border-top: 1px solid var(--linea);
  padding: 2rem 0 2.2rem;
}
.fam-paso:last-child { border-bottom: 1px solid var(--linea); }
.fam-paso-cabeza { display: flex; align-items: baseline; gap: 1.1rem; }
.fam-paso-num {
  font-size: 1.6rem; font-weight: 600;
  color: var(--azul-maypro);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fam-paso-cabeza h3 {
  font-family: var(--f-display); font-stretch: 112%; font-weight: 800;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  margin: 0;
}
.fam-paso-etiqueta {
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3);
  border: 1px solid var(--linea-viva);
  border-radius: 3px;
  padding: .18rem .5rem;
  vertical-align: middle;
  margin-left: .6rem;
}
.fam-paso-texto { color: var(--tinta-2); max-width: 72ch; margin: .9rem 0 0; }

/* mini-tarjetas de módulo dentro de cada paso */
.minimod-fila { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.3rem; }
.minimod {
  display: flex; align-items: center; gap: .9rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: .6rem .95rem .6rem .6rem;
  min-height: 64px;
  color: var(--tinta-2);
  transition: border-color .2s ease, transform .2s var(--suave), box-shadow .2s var(--suave);
}
.minimod:hover {
  border-color: var(--azul-maypro);
  color: var(--tinta);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(22, 32, 43, .1);
}
.minimod-visual {
  width: 64px; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #F2F4F7, #E6EAEF);
  border-radius: 4px;
  overflow: hidden;
}
.minimod-visual img { width: 100%; height: 100%; object-fit: contain; padding: .2rem; }
.minimod-sigla { font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: #66788C; }
.minimod-datos { display: grid; gap: .1rem; }
.minimod-codigo { font-size: .7rem; font-weight: 600; letter-spacing: .12em; color: var(--azul-maypro); }
.minimod-nombre { font-size: .86rem; line-height: 1.3; }
.minimod-flecha { display: inline-flex; color: var(--tinta-3); margin-left: .2rem; transition: transform .25s var(--suave), color .2s ease; }
.minimod-flecha .icono { width: 1em; height: 1em; }
.minimod:hover .minimod-flecha { transform: translateX(3px); color: var(--azul-maypro); }
.minimod-fila-suelta { margin-top: 2rem; }

.esq-variante {
  color: var(--tinta-2); font-size: .95rem;
  border-left: 2px solid var(--azul-maypro);
  padding-left: 1.1rem;
  margin: 1.6rem 0 0;
  max-width: 68ch;
}

/* bloque «formato desde la pantalla» */
.pantalla-int {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.pantalla-texto p { color: var(--tinta-2); max-width: 58ch; }
/* foto de la línea con la medida del formato en curso (sección del cambio de formato) */
.formato-foto {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(22, 32, 43, .18);
}
.formato-foto img { width: 100%; height: auto; display: block; }
.formato-rotulo {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(10, 18, 32, .86);
  border-radius: 6px;
  padding: .55rem .85rem;
  color: #fff;
}
.formato-rotulo b {
  display: block;
  font-size: 1.3rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.formato-rotulo b span { color: #4FA3F0; font-size: .62em; }
.formato-rotulo i {
  font-style: normal;
  font-size: .58rem; letter-spacing: .14em; color: #93A6B8;
}

/* nota de módulo (página de módulo) */
.mod-nota { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }

/* ---------- fichas enriquecidas: línea temporal de generaciones ---------- */
.linea-tiempo {
  list-style: none;
  display: flex;
  margin: 3rem 0 0;
  padding: 0;
  position: relative;
}
.linea-tiempo::before {
  content: '';
  position: absolute;
  left: 4%; right: 4%; top: 6px;
  height: 1px;
  background: #C3CBD4;
}
.hito { flex: 1; position: relative; }
.hito-int {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--tinta-3);
  padding-top: 0;
  transition: color .2s ease;
}
a.hito-int:hover { color: var(--azul-maypro); }
a.hito-int:hover .hito-punto { border-color: var(--azul-maypro); }
.hito-punto {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--blanco);
  border: 2px solid var(--linea-viva);
  transition: border-color .2s ease;
}
.hito-codigo {
  font-family: var(--f-display);
  font-stretch: 118%; font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.hito-anio { font-size: .74rem; letter-spacing: .12em; }
.hito.actual .hito-int { color: var(--tinta); }
.hito.actual .hito-punto {
  background: var(--azul-maypro);
  border-color: var(--azul-maypro);
  box-shadow: 0 0 0 5px rgba(0, 87, 184, .16);
}
.hito.actual .hito-anio { color: var(--azul-maypro); }

/* variante historia: hitos con descripción */
.linea-historia .hito-int { padding-inline: .6rem; text-align: center; }
.linea-historia .hito-codigo { color: var(--tinta); }
.hito-desc {
  font-size: .8rem;
  color: var(--tinta-3);
  line-height: 1.5;
  max-width: 21ch;
}
.linea-historia .hito.actual .hito-desc { color: var(--tinta-2); }

/* módulos configurables */
.modulos-rejilla {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin: 2.2rem 0 0;
  padding: 0;
  counter-reset: modulo;
}
.modulo {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 1.3rem 1.4rem;
  position: relative;
  box-shadow: 0 1px 2px rgba(22, 32, 43, .05);
}
.modulo::after {
  content: '';
  position: absolute; right: -1.35rem; top: 50%;
  width: 1.5rem; height: 1px;
  background: var(--linea-viva);
}
.modulo:nth-child(3n)::after, .modulo:last-child::after { display: none; }
.modulo-num { font-size: .72rem; color: var(--azul-maypro); letter-spacing: .15em; }
.modulo h3 { font-size: 1rem; margin: .5rem 0 .35rem; }
.modulo p { font-size: .88rem; color: var(--tinta-2); margin: 0; }

.opciones-titulo {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-3);
  margin: 2.4rem 0 .9rem;
}
.opciones { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; }
.chip {
  font-family: var(--f-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--tinta-2);
  background: var(--blanco);
  border: 1px solid #CBD2DA;
  border-radius: 999px;
  padding: .45rem .9rem;
}

/* la curva calidad-precio */
.curva { border-top: 1px solid var(--linea); }
.curva-int {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.curva-texto p { color: var(--tinta-2); }
.curva-figura { margin: 0; }
.curva-svg { width: 100%; height: auto; display: block; }
.curva-pie {
  font-size: .72rem; letter-spacing: .1em;
  color: var(--tinta-3);
  text-align: center;
  margin-top: .8rem;
}

/* ---------- empresa ---------- */
.empresa-int {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4.5vw, 4rem); align-items: center;
}
.empresa-foto { margin: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--linea); box-shadow: 0 10px 26px rgba(22, 32, 43, .08); }
.empresa-texto p { color: var(--tinta-2); font-size: 1.05rem; }
.empresa-texto p:first-child { color: var(--tinta); font-size: 1.15rem; }

.valores-rejilla {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem;
}
.valor {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px;
  padding: 1.8rem;
  box-shadow: 0 1px 2px rgba(22, 32, 43, .05);
}
.valor-num { font-size: .78rem; color: var(--azul-maypro); letter-spacing: .15em; }
.valor-num::after { content: ''; display: block; width: 2.2rem; height: 1px; background: var(--azul-maypro); margin-block: .6rem 1rem; }
.valor h3 { font-size: 1.12rem; }
.valor p { color: var(--tinta-2); font-size: .93rem; margin: 0; }

/* ---------- galería de instalaciones ---------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(240px, 36vh);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.galeria-item {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--linea);
  box-shadow: 0 1px 2px rgba(22, 32, 43, .06);
}
.galeria-item img { width: 100%; height: 100%; object-fit: cover; }
/* en el móvil, una foto por fila y apaisada: en dos columnas quedaban unas tiras de 163×324 px que cortaban
   el rótulo de la nave por la mitad (06/10/2026) */
@media (max-width: 640px) {
  .galeria { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 1rem; }
  .galeria-item { aspect-ratio: 16 / 9; }
}

/* efecto «acero que despierta»: duotono acero-azul en reposo,
   color real + zoom sutil al pasar el ratón */
.foto-acero { position: relative; }
.foto-acero img {
  filter: grayscale(1) brightness(.94) contrast(1.02);
  transform: scale(1.015);
  transition: filter .55s ease, transform .9s var(--suave);
}
.foto-acero::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--azul-maypro);
  mix-blend-mode: color;
  opacity: .38;
  pointer-events: none;
  transition: opacity .55s ease;
}
.foto-acero:hover img, .foto-acero:focus-within img { filter: none; transform: scale(1.045); }
.foto-acero:hover::after, .foto-acero:focus-within::after { opacity: 0; }

/* en pantallas táctiles (sin hover) las fotos se muestran a color */
@media (hover: none) {
  .foto-acero img { filter: none; transform: none; }
  .foto-acero::after { display: none; }
}
/* con movimiento reducido, sin zoom (el cambio de color se mantiene) */
@media (prefers-reduced-motion: reduce) {
  .foto-acero img { transform: none !important; transition: filter .55s ease; }
}

/* rótulo fantasma: sin caja, solo aparece al pasar el ratón */
.galeria-pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: #F2F6FB;
  padding: 2.6rem 1.1rem .95rem;
  background: linear-gradient(to top, rgba(7, 13, 22, .84), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .45s var(--suave);
  pointer-events: none;
}
.galeria-pie::after {
  content: '';
  display: block;
  width: 2.2rem; height: 1px;
  background: #7FB9F5;
  margin-top: .55rem;
}
.galeria-item:hover .galeria-pie, .galeria-item:focus-within .galeria-pie { opacity: 1; transform: none; }
@media (hover: none) { .galeria-pie { display: none; } }
@media (prefers-reduced-motion: reduce) { .galeria-pie { transform: none; } }

/* ---------- ferias ---------- */
/* próxima feria: tarjeta nocturna con la fecha grande */
.proxima-feria { padding-bottom: 0; }
.pf-tarjeta {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); overflow: hidden;
  border-radius: 10px; background: var(--noche); color: #F2F6FB;
  box-shadow: 0 18px 40px rgba(10, 18, 32, .22);
}
.pf-fecha {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  padding: 2.4rem 1.2rem; text-align: center;
  background: linear-gradient(160deg, var(--azul-maypro), var(--azul-maypro-2));
}
.pf-dias { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; color: #fff; }
.pf-mes { font-size: .9rem; letter-spacing: .2em; text-transform: uppercase; color: #CFE3FF; }
.pf-cuerpo { padding: clamp(1.6rem, 3.5vw, 2.6rem); }
.pf-cuerpo .eyebrow { color: #8FC0FF; }
.pf-cuerpo .eyebrow::before { background: #8FC0FF; }
.pf-nombre { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); margin: .3rem 0 .6rem; color: #fff; }
.pf-lugar { display: flex; align-items: flex-start; gap: .5rem; color: #B7C6D5; margin: 0 0 1rem; }
.pf-lugar .icono { color: #8FC0FF; flex: none; margin-top: .2em; }
.pf-texto { color: #D7E1EC; max-width: 60ch; margin: 0 0 1.2rem; }
.pf-cuenta {
  display: inline-block; margin: 0 0 1.4rem; padding: .35rem .8rem; border-radius: 4px;
  background: rgba(143, 192, 255, .14); color: #CFE3FF; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
}
.pf-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem; }
.pf-tarjeta .boton-fantasma { border-color: rgba(255, 255, 255, .45); color: #fff; }
.pf-tarjeta .boton-fantasma:hover { border-color: #fff; color: #fff; }
.pf-web { color: #CFE3FF; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.pf-web:hover { color: #fff; }
.ferias-anteriores { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 1rem; }
@media (max-width: 720px) {
  .pf-tarjeta { grid-template-columns: 1fr; }
  .pf-fecha { flex-direction: row; gap: .9rem; padding: 1.2rem; }
}
.ferias-lista { display: grid; gap: 1.5rem; margin-top: 1rem; }
.feria {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 1.8rem; align-items: center;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px;
  padding: 1.2rem;
  box-shadow: 0 1px 2px rgba(22, 32, 43, .05);
}
/* los carteles de las ferias son tiras apaisadas (de 2:1 a 4:1): se enseñan ENTEROS en una caja apaisada. Antes iban
   recortados a 8:5 y se comían el nombre («XYLEXPO» se quedaba en «YLEXP», «WOODEX» en «WOOD») (06/10/2026) */
.feria-foto { margin: 0; border-radius: 4px; overflow: hidden; background: #fff; border: 1px solid var(--linea); aspect-ratio: 5 / 2; }
.feria-foto img { width: 100%; height: 100%; object-fit: contain; }
.feria-fecha { font-size: .74rem; color: var(--azul-maypro); letter-spacing: .12em; margin: 0 0 .5rem; }
.feria h2 { font-size: 1.15rem; font-weight: 600; line-height: 1.4; margin: 0; max-width: 56ch; }

/* ---------- contacto ---------- */
.contacto-int {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 4.5vw, 4rem); align-items: start;
}

.formulario { display: grid; gap: 1.3rem; }
.campo { display: grid; gap: .45rem; }
.campo label { font-weight: 500; font-size: .93rem; }
.obligatorio { color: var(--azul-maypro); }
.campo-opcional { font-size: .68rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-left: .4rem; }
.campo input[type="text"], .campo input[type="email"], .campo textarea {
  background: var(--blanco);
  border: 1px solid var(--linea-viva);
  border-radius: var(--radio);
  color: var(--tinta);
  font: inherit;
  padding: .8rem 1rem;
  min-height: 44px;
  transition: border-color .2s ease;
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--azul-maypro); box-shadow: 0 0 0 3px rgba(0, 87, 184, .16); }
/* 10/11/2026: campo mal rellenado (después de tocarlo o de intentar enviar) */
.campo .tocat:invalid { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.campo-check .tocat:invalid { outline: 2px solid #b3261e; outline-offset: 2px; }
.campo textarea { resize: vertical; }
.campo-check { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
.campo-check input { width: 1.4rem; height: 1.4rem; margin-top: .1rem; accent-color: var(--azul-maypro); }
.campo-check label { font-weight: 400; color: var(--tinta-2); }
.formulario .boton { justify-self: start; }
.formulario-nota { font-size: .82rem; color: var(--tinta-3); margin: 0; }
/* 09/11/2026: el aviso de «enviando / recibido» del formulario, y el campo trampa contra robots (fuera de la vista) */
.formulario-estado { margin: 0; padding: .8rem 1rem; border-left: 3px solid var(--azul-maypro); background: rgba(0, 87, 184, .06); color: var(--tinta); font-weight: 500; }
.formulario-estado[hidden] { display: none; }
.campo-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.contacto-placa {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px;
  padding: 1.8rem;
  box-shadow: 0 1px 2px rgba(22, 32, 43, .05);
}
.contacto-placa h2 {
  font-size: .82rem; letter-spacing: .18em; color: var(--azul-maypro);
  border-bottom: 1px solid var(--linea); padding-bottom: .9rem; margin-bottom: 1.2rem;
}
.contacto-placa ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1.1rem; }
.contacto-placa li { display: flex; gap: .9rem; }
.contacto-placa .icono { color: var(--azul-maypro); margin-top: .2rem; }
.contacto-placa strong { display: block; font-size: .8rem; color: var(--tinta-3); font-weight: 500; margin-bottom: .15rem; }
.contacto-placa a { color: var(--tinta); }
.contacto-placa a:hover { color: var(--azul-maypro); }
.contacto-coordenadas { font-size: .74rem; color: var(--tinta-3); letter-spacing: .1em; margin: 1.2rem 0 0; }

/* ---------- asesoramiento técnico (portada, series, catálogo, líneas, fichas y contacto) ---------- */
.asesoria { background: var(--banda); border-block: 1px solid var(--linea); }
.asesoria-int {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.asesoria-texto > p { color: var(--tinta-2); max-width: 60ch; }
.asesoria-mas { border-left: 3px solid var(--azul-maypro); padding: .2rem 0 .2rem 1.1rem; margin: 1.6rem 0 0; }
.asesoria-mas strong { color: var(--tinta); }
.asesoria-acciones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.asesoria-placa { padding: 1.8rem 1.8rem 1.6rem; }
.asesoria-placa-titulo {
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--azul-maypro-2);
  margin: 0 0 1.1rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(43, 53, 66, .18);
}
.asesoria-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.asesoria-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; }
.asesoria-num {
  font-size: .78rem; font-weight: 600; color: #fff; background: var(--azul-maypro);
  border-radius: 3px; padding: .2rem .45rem; margin-top: .1rem;
}
.asesoria-lista strong { display: block; color: var(--placa-tinta); font-size: 1rem; }
.asesoria-lista div span { display: block; color: #46525F; font-size: .92rem; }
.asesoria-placa-pie {
  margin: 1.2rem 0 0; padding-top: .9rem; border-top: 1px solid rgba(43, 53, 66, .18);
  font-size: .92rem; font-weight: 500; color: var(--placa-tinta);
}

.consejo {
  margin-top: 2.5rem; padding: 1.3rem 1.4rem;
  background: #EEF4FC; border: 1px solid #C9DBF3; border-radius: 6px;
}
.consejo h2 { font-family: var(--f-display); font-stretch: 108%; font-size: 1.1rem; font-weight: 700; color: var(--tinta); margin: 0 0 .45rem; }
.consejo p { color: var(--tinta-2); font-size: .95rem; margin: 0 0 .4rem; }
.consejo-enlace, .proceso-mas a {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  font-family: var(--f-mono); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--azul-maypro);
}
.consejo-enlace:hover, .proceso-mas a:hover { color: var(--azul-maypro-2); }

.proceso-mas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1.5rem;
  margin: 2.5rem 0 0; padding: .9rem 1.3rem;
  border: 1px dashed var(--linea-viva); border-radius: 6px; color: var(--tinta-2);
}
.proceso-mas strong { color: var(--tinta); }

.contacto-ayuda {
  margin-top: 1.4rem; padding: 1.5rem 1.8rem;
  background: var(--banda); border: 1px solid var(--linea); border-radius: 6px;
}
.contacto-ayuda h2 { font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--azul-maypro); margin: 0 0 .8rem; }
.contacto-ayuda p { color: var(--tinta-2); font-size: .93rem; margin: 0 0 .6rem; }
.contacto-ayuda ul { margin: 0 0 .9rem; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: .93rem; color: var(--tinta); }
.contacto-ayuda .contacto-ayuda-pie { color: var(--tinta); font-weight: 500; margin: 0; }

@media (max-width: 960px) { .asesoria-int { grid-template-columns: 1fr; } }

/* ---------- legal ---------- */
.legal-int { max-width: 760px; }
.legal-int h2 { font-size: 1.15rem; margin-top: 2.4rem; }
.legal-int p, .legal-int li { color: var(--tinta-2); font-size: .95rem; }

/* ---------- pie (banda nocturna nº 3) ---------- */
.pie { background: var(--noche-2); border-top: 1px solid #E2E6EB; }
.pie-rejilla {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}
.pie h3 {
  font-family: var(--f-mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: 1.1rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie a { color: var(--tinta-2); font-size: .93rem; display: inline-block; padding-block: .2rem; }
.pie a:hover { color: var(--azul-cielo); }
.pie-lema { color: var(--tinta-2); font-size: .93rem; max-width: 30ch; margin: 1.2rem 0 .8rem; }
.pie-coordenadas { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; color: var(--tinta-3); margin: 0; }
.pie-contacto li { display: flex; gap: .7rem; align-items: start; }
.pie-contacto .icono { color: var(--tinta-3); margin-top: .25rem; }
.pie-col .icono { width: .95em; height: .95em; }

.pie-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--linea);
  padding-block: 1.4rem;
}
.pie-base p { margin: 0; font-size: .82rem; color: var(--tinta-3); }
.pie-base ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.pie-base a { font-size: .82rem; color: var(--tinta-3); display: inline-block; padding-block: .35rem; }
/* 10/11/2026 (prueba en móvil): los enlaces del pie, con altura de dedo (44 px) y sin quedar más separados a la vista */
@media (max-width: 720px) {
  .pie ul { gap: 0; }
  .pie a, .pie-base a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .pie-contacto li { align-items: center; }
  .pie-contacto .icono { margin-top: 0; }
}

/* ============================================================
   MOVIMIENTO — solo transform/opacity, gobernado por JS + reduced motion
   ============================================================ */
html.anim [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--suave), transform .65s var(--suave);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.anim [data-reveal].es-visible { opacity: 1; transform: none; }

html.anim [data-linea] {
  display: block;
  transform: translateY(110%);
  transition: transform .8s var(--suave);
  transition-delay: calc(var(--i, 0) * 110ms + 100ms);
}
html.anim [data-linea].es-visible { transform: none; }

/* deja un 2% visible: con inset 100% el IntersectionObserver nunca dispara */
html.anim [data-clip] {
  clip-path: inset(0 0 98% 0);
  transition: clip-path .9s var(--corte);
}
html.anim [data-clip].es-visible { clip-path: inset(0 0 0 0); }

/* El HÉROE se anima solo con CSS, sin esperar al JS.
   El JS se carga con defer: hasta que no se ejecuta no añade .anim ni
   .es-visible, así que el titular llegaba a verse, se ocultaba y volvía a
   entrar — y en una carga lenta parecía que la portada estaba en blanco.
   Con animación pura de CSS la entrada empieza en el primer pintado y
   termina sola, pase lo que pase con el JavaScript. */
.heroe [data-linea] {
  animation: linea-entra .7s var(--suave) both;
  animation-delay: calc(var(--i, 0) * 90ms + 60ms);
}
.heroe [data-reveal] {
  animation: reveal-entra .6s var(--suave) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes linea-entra { from { transform: translateY(110%); } to { transform: none; } }
@keyframes reveal-entra { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .heroe [data-linea], .heroe [data-reveal] { animation: none; }
}


/* ---------- responsive ---------- */
/* entre 961 y 1280 px el menú en alemán o francés no cabía y el logo se aplastaba: menú un poco más junto */
@media (min-width: 961px) and (max-width: 1280px) {
  .cabecera-int { gap: 1rem; }
  .nav > ul { gap: 0; }
  .nav a { padding: .5rem .5rem; font-size: .9rem; }
  .nav a.activo::after { left: .5rem; right: .5rem; }
}
@media (max-width: 960px) {
  .nav { display: none; }
  .nav-conmutador { display: flex; }
  .cabecera-acciones .boton { display: none; }
  /* 10/11/2026 (revisión móvil): sin .nav, nada empujaba los botones a la derecha */
  .cabecera-acciones { margin-left: auto; }
  /* el menú abierto medía más que la pantalla y, con la cabecera fija, el final (idiomas, presupuesto) no se
     alcanzaba: ahora cabe en la pantalla y se desplaza por dentro; la página de detrás no se mueve */
  .menu-movil { max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  html.menu-obert, html.menu-obert body { overflow: hidden; }
  /* barra fija de contacto en las fichas (máquina, línea, módulo) */
  .cta-movil {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--linea);
  }
  .cta-movil .boton { width: 100%; justify-content: center; }
  body:has(.cta-movil) { padding-bottom: 76px; }

  .stats-int { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: none; border-top: 1px solid var(--linea); }
  .stat:nth-child(-n+2) { border-top: none; }
  .stat:nth-child(even) { border-left: 1px solid var(--linea); }

  .cat-rejilla { grid-template-columns: 1fr; }
  .proceso-int { grid-template-columns: 1fr; }
  .proceso-visual { order: -1; }
  .proceso-fijo { position: relative; top: 0; }
  .proceso-img { position: absolute; }
  .medida-int, .empresa-int, .ficha-int, .contacto-int, .curva-int, .pantalla-int { grid-template-columns: 1fr; }
  .gran-paso { grid-template-columns: 1fr; gap: 1.4rem; }
  .gran-paso:nth-child(even) .gp-texto-col { order: 1; }
  .gran-paso:nth-child(even) .gp-media-col { order: 2; }
  .specs-strip { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .mp-fotos:has(> :nth-child(2)) { grid-template-columns: 1fr; }
  .placa-familia { flex-direction: column; }
  .placa-familia .pf-familia { flex: none; }
  .modulos-rejilla { grid-template-columns: repeat(2, 1fr); }
  .modulo::after { display: none; }
  .lista-maquinas { grid-template-columns: 1fr; }
  .linea-historia { flex-direction: column; gap: 1.6rem; }
  .linea-historia::before { left: 6px; right: auto; top: 4%; bottom: 4%; width: 1px; height: auto; }
  .linea-historia .hito-int { flex-direction: row; flex-wrap: wrap; text-align: left; align-items: baseline; gap: .3rem .8rem; padding-inline: 0; }
  .linea-historia .hito-punto { position: absolute; left: 0; top: .35rem; }
  .linea-historia .hito { padding-left: 2rem; }
  .linea-historia .hito-desc { flex-basis: 100%; max-width: 46ch; }
  .ficha-media { position: static; }
  .valores-rejilla { grid-template-columns: 1fr; }
  .feria { grid-template-columns: 1fr; }
  .feria-foto { max-height: 260px; }
  .pie-rejilla { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .contenedor { width: calc(100% - 2.2rem); }
  .modulos-rejilla { grid-template-columns: 1fr; }
  .lista-maquinas a { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .lista-maquinas .lm-flecha { display: none; }
  .lista-resultados a { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .lista-resultados .lm-serie { display: none; }
  .buscador-caja { padding: 1.2rem 1.1rem 1.1rem; }
  .hito-codigo { font-size: .82rem; }
  .hito-anio { font-size: .64rem; }
  .linea-historia .hito-codigo { font-size: 1rem; }
  .linea-historia .hito-anio { font-size: .72rem; }
  .heroe-titulo { font-size: clamp(1.75rem, 8.2vw, 2.4rem); }
  .placa-rejilla { grid-template-columns: 1fr; }
  .stats-int { grid-template-columns: 1fr; }
  .stat { border-left: none !important; border-top: 1px solid var(--linea); padding: 1.6rem 0; }
  .stat:first-child { border-top: none; }
  .pie-rejilla { grid-template-columns: 1fr; gap: 2rem; }
  .banda-cta-int { flex-direction: column; align-items: flex-start; }
  .ficha-codigo { font-size: clamp(2rem, 10vw, 3.6rem); }   /* 10/11/2026: a 14vw «LCP-2 UNIVERSAL» se salía de la pantalla */
  .heroe-acciones .boton { width: 100%; justify-content: center; }
}

/* texto solo para lectores de pantalla */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* impresión básica */
@media print {
  body { background: #fff; color: #000; }
  .cabecera, .pie, .banda-cta, .nav-conmutador, .buscador, .recorrido-mapa { display: none; }
  /* nada puede quedarse invisible por una animación no disparada */
  html.anim [data-reveal],
  html.anim [data-linea],
  html.anim [data-clip] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  /* en papel se imprimen todos los modelos y variantes */
  .modelo-panel[hidden], .gp-media[hidden], .gp-nota-modelo[hidden] { display: block !important; }
  .gran-paso { break-inside: avoid; page-break-inside: avoid; }
}

/* ---- proyectos recientes: líneas completas, en grande ---- */
.proyectos { display: flex; flex-direction: column; gap: 2.2rem; margin-top: 2rem; }
.proyecto {
  display: block; color: inherit;
  border: 1px solid var(--linea); border-radius: 8px; overflow: hidden;
  background: var(--blanco); transition: border-color .2s ease, box-shadow .2s ease;
}
.proyecto-foto-enlace { display: block; }
.proyecto:hover, .proyecto:focus-visible {
  border-color: var(--azul-maypro);
  box-shadow: 0 14px 40px rgba(22, 32, 43, .09);
}
.proyecto-foto { position: relative; margin: 0; background: var(--crudo); overflow: hidden; }
.proyecto-foto img {
  display: block; width: 100%; height: auto;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.proyecto:hover .proyecto-foto img { transform: scale(1.02); }
.proyecto-ref {
  position: absolute; top: 14px; left: 14px;
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-2); background: rgba(255, 255, 255, .92);
  border: 1px solid var(--linea); border-radius: 3px; padding: .3rem .6rem;
}
.proyecto-datos {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  padding: 1.3rem 1.5rem 1.4rem; border-top: 1px solid var(--linea);
}
.proyecto-txt { display: block; }
.proyecto-serie {
  display: block; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--azul-maypro); margin-bottom: .45rem;
}
.proyecto-titulo {
  display: block; font-family: var(--f-display); font-size: 1.25rem;
  font-weight: 600; color: var(--tinta); margin: 0 0 .4rem;
}
.proyecto-texto { display: block; color: var(--tinta-2); max-width: 78ch; font-size: .94rem; margin: 0; }

/* secuencia de módulos de la línea, como en el esquema de familia */
.proy-seq {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin-top: .9rem; font-size: .72rem;
}
.proy-mod {
  display: inline-block; padding: .3rem .55rem;
  border: 1px solid var(--linea); border-radius: 4px;
  color: var(--tinta-2); text-decoration: none; letter-spacing: .06em;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.proy-mod small { color: var(--tinta-3); font-size: .85em; }
a.proy-mod:hover, a.proy-mod:focus-visible {
  color: var(--azul-maypro); border-color: var(--azul-maypro); background: #F2F7FD;
}
.proy-flecha { color: var(--linea-viva); font-size: .8rem; }
.proy-cuenta { font-size: .55em; color: var(--tinta-3); letter-spacing: .1em; font-weight: 400; }
.proyecto-ir {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  font-size: .72rem; letter-spacing: .08em; color: var(--azul-maypro);
  text-decoration: none;
}
.proyecto-ir .icono { width: 15px; height: 15px; transition: transform .2s ease; }
.proyecto:hover .proyecto-ir .icono { transform: translateX(3px); }
@media (max-width: 720px) {
  .proyecto-datos { flex-direction: column; align-items: flex-start; gap: .9rem; padding: 1.1rem 1.1rem 1.2rem; }
  .proyecto-titulo { font-size: 1.1rem; }
}

/* enlaces relacionados en fichas enriquecidas */
.enlaces-rel { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* etiqueta sobre cada imagen del panel: render de diseño vs máquina en planta */
.mp-foto { position: relative; }
.mp-foto-etq {
  position: absolute; top: 10px; left: 10px;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-2); background: rgba(255, 255, 255, .93);
  border: 1px solid var(--linea); border-radius: 3px; padding: .26rem .5rem;
}
.mp-fotos-nota {
  font-size: .82rem; color: var(--tinta-3);
  margin: .7rem 0 0; max-width: 84ch;
}

/* galería de familia en el panel del modelo: marco grande + miniaturas cronológicas */
.mp-galeria { margin-top: 1.6rem; }
.mp-galeria-marco {
  position: relative; display: grid; margin: 0;
  aspect-ratio: 2.35 / 1; background: #fff;
  border: 1px solid var(--linea); border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(22, 32, 43, .07);
}
.mp-galeria-marco .carrusel-slide { padding: .4rem; }
.mp-galeria-tiras {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: .7rem;
}
.carrusel-miniatura {
  display: block; padding: 0; margin: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--linea); border-radius: 6px; overflow: hidden;
  opacity: .58; transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.carrusel-miniatura img { display: block; width: 100%; aspect-ratio: 2.35 / 1; object-fit: contain; padding: .25rem; }
.carrusel-miniatura:hover, .carrusel-miniatura:focus-visible { opacity: .9; }
.carrusel-miniatura.activo { opacity: 1; border-color: var(--azul-maypro); box-shadow: 0 0 0 2px rgba(0, 87, 184, .18); }
@media (max-width: 640px) {
  .mp-galeria-tiras { gap: .45rem; }
  .carrusel-flecha { width: 32px; height: 32px; }
}

/* ---- portada: las dos familias de líneas, de lado ---- */
.lineas-inicio { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.2rem; }
.linea-inicio {
  display: flex; flex-direction: column;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.linea-inicio:hover { border-color: var(--azul-maypro); box-shadow: 0 14px 40px rgba(22, 32, 43, .09); }
/* la imagen va colocada dentro de la caja (no la empuja): antes, un render más alto que 2,2:1 estiraba su caja y
   las dos tarjetas quedaban a distinta altura —la LCA, 11 px más baja que la LC-FA— (06/10/2026). Con «cover» los
   dos renders (2,18:1 y 2,36:1) llenan igual su caja: se recorta menos de un 4 % de cada uno */
.li-foto { display: block; position: relative; aspect-ratio: 2.2 / 1; overflow: hidden; background: #fff; border-bottom: 1px solid var(--linea); }
.li-foto img { position: absolute; inset: .4rem; display: block; width: calc(100% - .8rem); height: calc(100% - .8rem); object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
.linea-inicio:hover .li-foto img { transform: scale(1.02); }
.li-cuerpo { display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem 1.5rem 1.5rem; flex: 1; }
.li-serie { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--azul-maypro); }
.li-titulo { font-family: var(--f-display); font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0; letter-spacing: -.01em; }
.li-titulo a { color: var(--tinta); text-decoration: none; }
.li-titulo a:hover { color: var(--azul-maypro); }
.li-claim { color: var(--tinta-2); margin: 0; }
.li-datos { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .35rem; }
.li-datos li { position: relative; padding-left: 1.1rem; font-size: .92rem; color: var(--tinta-2); }
.li-datos li::before { content: ''; position: absolute; left: 0; top: .62em; width: .5rem; height: 1px; background: var(--azul-maypro); }
.linea-inicio .proy-seq { margin-top: .3rem; }
.li-ir { margin-top: auto; padding-top: .8rem; }

/* ---- portada: lo que lleva de serie una MAYPRO ---- */
.rasgos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 2.2rem; }
.rasgo { background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 1.5rem 1.4rem 1.6rem; }
.rasgo-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #EEF4FC; color: var(--azul-maypro); margin-bottom: 1rem;
}
.rasgo-icono .icono { width: 22px; height: 22px; }
.rasgo h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.rasgo p { color: var(--tinta-2); font-size: .92rem; margin: 0; }
@media (max-width: 1024px) { .rasgos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .lineas-inicio { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rasgos { grid-template-columns: 1fr; } .li-cuerpo { padding: 1.1rem 1.1rem 1.2rem; } }

/* ---- serie: guía y plegable del resto del catálogo ---- */
.serie-guia { font-size: .72rem; letter-spacing: .1em; color: var(--tinta-3); margin: 1rem 0 1.2rem; }
.plegable { border: 1px solid var(--linea); border-radius: 8px; background: var(--blanco); }
.plegable-cabeza {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: 1.15rem 1.4rem; cursor: pointer; list-style: none; user-select: none;
}
.plegable-cabeza::-webkit-details-marker { display: none; }
.plegable-cabeza:focus-visible { outline: 2px solid var(--azul-maypro); outline-offset: 2px; border-radius: 8px; }
.plegable-titulo { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; color: var(--tinta); }
.plegable-meta { font-size: .72rem; letter-spacing: .12em; color: var(--tinta-3); }
.plegable-accion { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; letter-spacing: .08em; color: var(--azul-maypro); }
.plegable-accion .chevron { width: 16px; height: 16px; transition: transform .25s ease; }
.plegable .pa-cerrar { display: none; }
.plegable[open] .pa-abrir { display: none; }
.plegable[open] .pa-cerrar { display: inline; }
.plegable[open] .plegable-accion .chevron { transform: rotate(180deg); }
.plegable[open] .plegable-cabeza { border-bottom: 1px solid var(--linea); }
.plegable .resto-intro { padding: 1.2rem 1.4rem 0; margin: 0; }
.plegable .placa-rejilla { padding: 1.2rem 1.4rem 1.4rem; }

/* enlace a la zona de clientes en la cabecera */
.nav-clientes { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--tinta-3); text-decoration: none; margin-right: .9rem; white-space: nowrap; }
.nav-clientes .icono { width: 14px; height: 14px; }
.nav-clientes:hover { color: var(--azul-maypro); }
@media (max-width: 1280px) { .nav-clientes span { display: none; } }
@media (max-width: 900px) { .nav-clientes { display: none; } }

/* ---- selector de idioma ---- */
.selector-idioma { position: relative; margin-right: .8rem; }
/* la bandera de cada idioma: un adorno pequeño, con un filo para que el blanco no se pierda sobre blanco */
.bandera { width: 18px; height: 12px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(22, 32, 43, .16); }
/* entre 961 y 1100 px la cabecera va justa (menú entero + botón de presupuesto): ahí el botón del idioma se queda
   sin bandera —medido: con ella el botón de presupuesto saltaba a dos líneas—; en la lista sí salen */
@media (max-width: 1100px) { .si-boton .bandera { display: none; } }
/* y hasta 1040 px se aprietan un poco los huecos de la derecha: en alemán, a 961 px, la cabecera se salía 8 px */
@media (max-width: 1040px) { .cabecera-acciones { gap: .6rem; } .selector-idioma { margin-right: .3rem; } }
.si-boton {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: none; border: 1px solid var(--linea); border-radius: 4px;
  padding: .35rem .55rem; color: var(--tinta-2); font: inherit; font-size: .78rem;
}
.si-boton:hover, .si-boton[aria-expanded="true"] { color: var(--azul-maypro); border-color: var(--azul-maypro); }
.si-boton .chevron { width: 13px; height: 13px; transition: transform .2s ease; }
.si-boton[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.si-actual { letter-spacing: .08em; font-weight: 600; }
.si-lista {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60;
  list-style: none; margin: 0; padding: .35rem;
  min-width: 150px; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 6px;
  box-shadow: 0 12px 30px rgba(22, 32, 43, .12);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.selector-idioma:hover .si-lista, .selector-idioma:focus-within .si-lista,
.si-boton[aria-expanded="true"] + .si-lista { opacity: 1; visibility: visible; transform: none; }
.si-lista a {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 4px;
  color: var(--tinta-2); text-decoration: none; font-size: .88rem;
}
.si-lista a:hover { background: var(--banda); color: var(--azul-maypro); }
.si-lista a.activo { color: var(--azul-maypro); font-weight: 600; }
.menu-movil .selector-idioma { margin: .6rem 0 0; }
.menu-movil .si-lista { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.menu-movil .si-boton { display: none; }

/* ---------- preguntas frecuentes (familias) ---------- */
.faq-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.6rem 3rem; margin: 0; }
.faq-item { border-top: 1px solid var(--linea); padding-top: 1rem; }
.faq-item dt { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: 1.08rem; margin: 0 0 .45rem; color: var(--tinta); }
.faq-item dd { margin: 0; color: var(--tinta-2); line-height: 1.6; }

/* ---------- vídeos de familia ---------- */
.videos-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.4rem; margin: 0 0 1.6rem; }
.videos-rejilla-uno { grid-template-columns: minmax(0, 52rem); }
/* un vídeo a todo el ancho del contenedor (el del taller, en Empresa): encima de la galería, que también lo ocupa */
.videos-rejilla-ancha { grid-template-columns: minmax(0, 1fr); margin: 2.5rem 0 0; }
.videos-rejilla-ancha + .galeria { margin-top: 1.5rem; }
.video-tarjeta { margin: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; }
.video-marco { position: relative; background: var(--noche); aspect-ratio: 16 / 9; }
.video-marco video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--noche); }
.video-duracion { position: absolute; right: .6rem; top: .6rem; background: rgba(10, 18, 32, .82); color: #fff; font-size: .68rem; letter-spacing: .08em; padding: .2rem .45rem; border-radius: 2px; pointer-events: none; transition: opacity .2s; }
/* 10/11/2026 (revisión): abajo tapaba los controles del vídeo; arriba, y se esconde mientras se reproduce */
.video-marco.reproduint .video-duracion { opacity: 0; }
.video-tarjeta figcaption { padding: .8rem 1rem 1rem; }
.video-titulo { display: block; font-weight: 600; }
.video-modelo { font-size: .68rem; letter-spacing: .1em; color: var(--azul-maypro); border: 1px solid currentColor; border-radius: 2px; padding: .1rem .4rem; margin-left: .4rem; vertical-align: middle; }
.video-texto { display: block; color: var(--tinta-2); font-size: .92rem; margin-top: .3rem; }

/* vídeos completos, solo con sesión en la zona de clientes */
.videos-privados { border: 1px dashed var(--linea-viva); border-radius: 4px; background: var(--blanco); }
.vp-cerrado { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 1.4rem; flex-wrap: wrap; }
.vp-candado { width: 30px; height: 30px; color: var(--azul-maypro); flex: none; }
.vp-texto { flex: 1 1 18rem; }
.vp-texto strong { display: block; font-family: var(--f-display); font-stretch: 112%; font-size: 1.05rem; }
.vp-texto p { margin: .2rem 0 0; color: var(--tinta-2); font-size: .92rem; }
.vp-texto .vp-pedir { margin-top: .5rem; }
.vp-pedir a { color: var(--azul-maypro); font-weight: 600; text-decoration: none; }
.vp-pedir a:hover, .vp-pedir a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.vp-abierto { padding: 1.2rem 1.4rem; }
.vp-abierto .vp-quien { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 .9rem; }
.vp-abierto .videos-rejilla { margin: 0; }
.vp-abierto .video-marco { cursor: pointer; }
.vp-abierto .video-marco img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vp-abierto .vp-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.vp-abierto .vp-play svg { width: 54px; height: 54px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }