/* ===========================================================================
   BASE — estructura, retícula y comportamiento.
   Aquí NO se decide el aspecto: sólo se consumen tokens (--xxx) que cada
   tema define. Cambiar de tema no debe requerir tocar este fichero.
   =========================================================================== */

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* El panel del menú móvil espera fuera con translateX(100%) y eso genera
     scroll horizontal de todo un ancho de pantalla. `clip` lo recorta sin
     romper el position:sticky de la cabecera, que `hidden` sí rompería. */
  overflow-x: clip;
  /* La cabecera es sticky: sin esto, saltar a un ancla esconde su título debajo. */
  scroll-padding-top: calc(var(--cabecera-alto) + 1.5rem);
}
body { min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
h1, h2, h3, h4 { font-weight: inherit; line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* --- valores por defecto (los temas los sobrescriben) -------------------- */
:root {
  --ancho-max: 1280px;
  --gotera: clamp(1.25rem, 4vw, 3.5rem);

  --fuente-display: system-ui, sans-serif;
  --fuente-texto: system-ui, sans-serif;
  --fuente-mono: ui-monospace, monospace;

  --fondo: #fff;
  --fondo-alt: #f4f4f4;
  --fondo-inverso: #101010;
  --texto: #111;
  --texto-suave: #555;
  --texto-inverso: #fff;
  --acento: #ffd700;
  --acento-texto: #000;
  --borde: rgba(0,0,0,.12);
  --borde-fuerte: rgba(0,0,0,.28);

  --radio: 0px;
  --radio-boton: 0px;
  --sombra: none;

  --seccion-y: clamp(4.5rem, 9vw, 9rem);
  --cabecera-alto: 78px;
}

body {
  font-family: var(--fuente-texto);
  background: var(--fondo);
  color: var(--texto);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.6;
}

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

.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--acento); color: var(--acento-texto); padding: .75rem 1.25rem;
}
.salto-contenido:focus { left: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

/* =========================================================================
   BOTONES
   ========================================================================= */
.boton {
  --_pad-y: .95rem;
  --_pad-x: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: var(--_pad-y) var(--_pad-x);
  font-family: var(--fuente-display);
  font-weight: 600; font-size: .95rem; line-height: 1;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: var(--radio-boton);
  cursor: pointer;
  transition: background-color .22s, color .22s, border-color .22s, transform .22s, box-shadow .22s;
}
.boton--compacto { --_pad-y: .7rem; --_pad-x: 1.15rem; font-size: .85rem; }
.boton--grande   { --_pad-y: 1.15rem; --_pad-x: 2.4rem; font-size: 1.02rem; }

.boton--primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.boton--fantasma { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); }

/* -------------------------------------------------------------------------
   COPIAR LA INFO DEL PRODUCTO
   Acción de apoyo: sin caja, en gris y a menor cuerpo, para que no compita
   con el botón que tenga al lado. Al copiar se pone del color del texto
   durante dos segundos — con el icono del check — y vuelve solo.
   ------------------------------------------------------------------------- */
.copiar {
  align-self: center;
  display: inline-flex; align-items: center; gap: .55rem;
  /* Va detrás de un botón con caja: el hueco propio de la fila se queda corto. */
  margin-inline-start: .4rem;
  padding: .55rem 0;
  background: none; border: 0;
  font-family: var(--fuente-display);
  font-size: .84rem; font-weight: 600; line-height: 1; letter-spacing: .02em;
  color: var(--texto-suave);
  cursor: pointer;
  transition: color .2s;
}
.copiar:hover, .copiar--hecho { color: var(--texto); }

.copiar__icono { width: 1.05rem; height: 1.05rem; flex: none; }
.copiar__icono--hecho { display: none; }
.copiar--hecho .copiar__icono--copiar { display: none; }
.copiar--hecho .copiar__icono--hecho { display: block; }

.copiar-aviso {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* =========================================================================
   CABECERA + NAVEGACIÓN
   ========================================================================= */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: var(--cabecera-fondo, var(--fondo));
  border-bottom: 1px solid var(--cabecera-borde, var(--borde));
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.cabecera__interior {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.75rem);
  min-height: var(--cabecera-alto);
}
.cabecera__marca { flex: none; display: block; }
.cabecera__logo { height: 34px; width: auto; }
.cabecera__logo--oscuro { display: none; }

.nav { flex: 1; }
.nav__lista { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.6rem); }
.nav__item { position: relative; }
.nav__enlace {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .1rem;
  font-family: var(--fuente-display);
  font-size: .92rem; font-weight: 600; letter-spacing: .005em;
  color: var(--nav-texto, var(--texto));
  white-space: nowrap;
  transition: color .2s;
}
.nav__flecha {
  width: .42em; height: .42em; margin-top: -.22em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s;
  opacity: .55;
}
.nav__item:hover .nav__flecha,
.nav__item:focus-within .nav__flecha { transform: rotate(225deg) translate(-1px,-1px); opacity: 1; }

/* --- submenú simple --- */
.submenu {
  position: absolute; top: 100%; left: -1rem; min-width: 15rem;
  background: var(--panel-fondo, var(--fondo));
  border: 1px solid var(--panel-borde, var(--borde));
  border-radius: var(--radio);
  box-shadow: var(--sombra-panel, 0 18px 40px -18px rgba(0,0,0,.35));
  padding: .5rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav__item:hover > .submenu,
.nav__item:focus-within > .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a {
  display: block; padding: .6rem .85rem; font-size: .9rem; border-radius: calc(var(--radio) * .6);
  transition: background-color .18s, color .18s;
}
.submenu a:hover { background: var(--panel-hover, rgba(0,0,0,.05)); }
.submenu__nota {
  font-style: normal; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  opacity: .55; margin-left: .4rem;
}

/* --- mega menú --- */
.mega {
  position: fixed; left: 0; right: 0; top: var(--cabecera-alto);
  background: var(--panel-fondo, var(--fondo));
  border-bottom: 1px solid var(--panel-borde, var(--borde));
  box-shadow: var(--sombra-panel, 0 24px 48px -24px rgba(0,0,0,.4));
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  max-height: calc(100vh - var(--cabecera-alto)); overflow-y: auto;
}
.nav__item--mega:hover > .mega,
.nav__item--mega:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }
/* Ajustado para que el panel de Productos, que es el más alto, quepa sin
   scroll en una pantalla de 900 px de alto. */
.mega__interior { padding-block: 1.6rem 1.6rem; }
.mega__titulo {
  font-family: var(--fuente-display);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--texto-suave); margin-bottom: 1.5rem;
}

/* Sin resumen, cada ficha es una línea: caben más columnas y el menú deja de
   ser un muro de texto. */
.mega__rejilla--sectores {
  display: grid; gap: .35rem;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}
.mega__ficha {
  display: grid; grid-template-columns: 46px 1fr; gap: .85rem; align-items: center;
  padding: .6rem; border-radius: var(--radio);
  transition: background-color .18s;
}
.mega__ficha:hover { background: var(--panel-hover, rgba(0,0,0,.05)); }
.mega__ficha-img {
  display: block; width: 46px; height: 46px; border-radius: calc(var(--radio) * .8);
  background-size: cover; background-position: center;
  filter: var(--mega-img-filtro, none);
}
.mega__ficha-txt { display: block; min-width: 0; }
.mega__ficha-titulo {
  display: block; font-family: var(--fuente-display); font-weight: 650; font-size: .92rem;
}
/* IA — Desarrollo propio no es un sector: va detrás de los once, en su propia
   fila y con un filete delante, para que se vea que es otra cosa. */
.mega__extra { grid-column: 1 / -1; border-top: 1px solid var(--borde); margin-top: .35rem; padding-top: .5rem; }
.mega__ficha--extra .mega__ficha-titulo { color: var(--acento-legible, inherit); }

/* Con los tipos plegados las ocho familias vuelven a medir parecido, así que
   la rejilla alinea las cabeceras por filas. Al desplegar una gama sólo crece
   su fila. */
.mega__rejilla--familias {
  display: grid; gap: 1.75rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  align-items: start;
}
/* auto-fill y no un número fijo de columnas: las familias que salen en el
   menú se marcan una a una con `en_menu`, así que cuántas hay cambia. Con
   auto-fill las columnas conservan su ancho y quedan alineadas a la
   izquierda en vez de estirarse a repartirse la fila. */
@media (min-width: 75rem) {
  .mega__rejilla--familias {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2rem;
  }
}
.mega__familia {
  display: block; margin-bottom: .5rem; padding-bottom: .45rem;
  font-family: var(--fuente-display); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .09em;
  border-bottom: 1px solid var(--panel-borde, var(--borde));
  transition: color .18s, border-color .18s;
}
.mega__familia:hover { color: var(--acento-legible, var(--texto)); }
.mega__items li a {
  display: block; padding: .2rem 0; font-size: .87rem; color: var(--texto-suave);
  transition: color .16s, transform .16s;
}
.mega__items li a:hover { color: var(--texto); transform: translateX(3px); }

.cabecera__acciones { flex: none; display: flex; align-items: center; gap: .9rem; }
.cabecera__acceso {
  font-family: var(--fuente-display); font-size: .85rem; font-weight: 600;
  color: var(--nav-texto, var(--texto-suave));
  padding: .5rem 0; white-space: nowrap;
  transition: color .2s;
}
.cabecera__acceso:hover { color: var(--acento-legible, var(--texto)); }

.hamburguesa { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.hamburguesa span { display: block; width: 22px; height: 2px; background: currentColor; }
.hamburguesa span + span { margin-top: 5px; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; overflow: hidden; }
.hero__interior {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__interior { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.hero__eyebrow {
  font-family: var(--fuente-mono); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--texto-suave); margin-bottom: 1.5rem;
}
.hero__titulo {
  font-family: var(--fuente-display);
  font-size: clamp(2.7rem, 6.2vw, 5.1rem);
  margin-bottom: 1.5rem;
}
.hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.55; color: var(--texto-suave);
  max-width: 44ch; margin-bottom: 2.5rem;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .85rem; }
.hero__media { position: relative; }
.hero__media img {
  width: 100%; height: clamp(300px, 42vw, 520px); object-fit: cover;
  border-radius: var(--radio);
}
.hero__pie-media {
  margin-top: .8rem; font-family: var(--fuente-mono);
  font-size: .72rem; letter-spacing: .06em; color: var(--texto-suave);
}

/* --- cifras --- */
.cifras { border-top: 1px solid var(--borde); }
.cifras__interior {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(2, 1fr);
  padding-block: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 56rem) { .cifras__interior { grid-template-columns: repeat(4, 1fr); } }
.cifra__valor {
  font-family: var(--fuente-display); font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1;
  display: flex; align-items: baseline; gap: .06em;
}
.cifra__unidad { font-size: .5em; color: var(--acento-legible, var(--texto-suave)); }
.cifra__etiqueta {
  margin-top: .5rem; font-size: .84rem; color: var(--texto-suave);
  text-wrap: balance;
}
.cifra--nota { display: flex; align-items: center; }
.cifra--nota .cifra__etiqueta { margin-top: 0; }
/* El nombre de la marca, en amarillo. Sobre papel el amarillo puro no se lee,
   así que va el tono legible de cada estilo. */
.cifra__marca { color: var(--acento-legible, var(--acento)); }

/* =========================================================================
   SECCIONES
   ========================================================================= */
.seccion { padding-block: var(--seccion-y); position: relative; }
.seccion__cabecera { max-width: 58ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.seccion__titulo {
  font-family: var(--fuente-display);
  font-size: clamp(1.9rem, 3.8vw, 3.1rem);
  margin-bottom: .9rem;
}
.seccion__entradilla { font-size: 1.1rem; color: var(--texto-suave); }
/* El botón que cierra una sección: rejilla de sectores, tecnología y logos. */
.seccion__accion { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* --- valor --- */
.valor__lista {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.valor__bloque { padding-top: 1.5rem; border-top: 2px solid var(--borde-fuerte); }
.valor__indice {
  display: block; font-family: var(--fuente-mono); font-size: .78rem;
  letter-spacing: .14em; color: var(--acento-legible, var(--texto-suave)); margin-bottom: 1rem;
}
.valor__titulo {
  font-family: var(--fuente-display); font-size: 1.22rem; font-weight: 650;
  line-height: 1.25; margin-bottom: .7rem;
}
.valor__texto { font-size: .95rem; color: var(--texto-suave); }

/* --- casos --- */
.casos {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.caso { display: flex; }
.caso__enlace {
  display: flex; flex-direction: column; width: 100%;
  background: var(--tarjeta-fondo, transparent);
  border: 1px solid var(--tarjeta-borde, var(--borde));
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s, background-color .3s;
}
.caso__enlace:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.caso__media { overflow: hidden; }
.caso__media img {
  width: 100%; height: 200px; object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.3,1), filter .4s;
  filter: var(--media-filtro, none);
}
.caso__enlace:hover .caso__media img { transform: scale(1.045); filter: none; }
.caso__cuerpo { padding: clamp(1.25rem, 2.4vw, 1.85rem); display: flex; flex-direction: column; flex: 1; }
.caso__sector {
  font-family: var(--fuente-mono); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--acento-legible, var(--texto-suave)); margin-bottom: .75rem;
}
.caso__titulo { font-family: var(--fuente-display); font-size: 1.32rem; font-weight: 650; margin-bottom: .7rem; }
.caso__texto { font-size: .92rem; color: var(--texto-suave); margin-bottom: 1.5rem; }
.caso__mas {
  margin-top: auto; font-family: var(--fuente-display); font-size: .85rem; font-weight: 650;
  display: inline-flex; align-items: center; gap: .45rem;
}
.caso__mas span { transition: transform .25s; }
.caso__enlace:hover .caso__mas span { transform: translateX(4px); }
/* Una gama puede no tener foto propia todavía: la tarjeta se sostiene con un
   filete de acento en vez de dejar un hueco. */
.caso__enlace--sinfoto::before { content: ""; display: block; height: 4px; background: var(--acento); }
/* Cuando hay más de tres, el enlace al listado entero: nada queda escondido. */
.rel-mas { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.rel-mas a {
  font-family: var(--fuente-display); font-size: .85rem; font-weight: 650;
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--acento-legible, var(--texto)); border-bottom: 1px solid currentColor;
}

/* --- sectores --- */
.sectores {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  background: var(--rejilla-linea, var(--borde));
  border: 1px solid var(--rejilla-linea, var(--borde));
}
.sector { display: flex; }
.sector__enlace {
  position: relative; display: flex; width: 100%; min-height: 230px;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--fondo);
  overflow: hidden; isolation: isolate;
  transition: background-color .35s;
}
.sector__img {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  opacity: var(--sector-img-op, 0);
  transform: scale(1.02);
  transition: opacity .45s, transform .7s cubic-bezier(.2,.7,.3,1);
}
.sector__velo { position: absolute; inset: 0; z-index: -1; background: var(--sector-velo, transparent); transition: background .35s; }
.sector__enlace:hover .sector__img { opacity: var(--sector-img-op-hover, .9); transform: scale(1.07); }
.sector__enlace:hover .sector__velo { background: var(--sector-velo-hover, rgba(0,0,0,.62)); }
/* Títulos alineados arriba y chips pegados abajo: sin esto, los resúmenes de
   distinta longitud dejan los títulos a alturas dispares dentro de la fila. */
.sector__cuerpo { display: flex; flex-direction: column; width: 100%; }
.sector__titulo {
  font-family: var(--fuente-display); font-size: 1.28rem; font-weight: 650; line-height: 1.15;
  margin-bottom: .5rem; transition: color .3s;
}
.sector__resumen { font-size: .86rem; color: var(--texto-suave); transition: color .3s; }
.sector__apps { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: 1.25rem; }
.sector__app {
  font-family: var(--fuente-mono); font-size: .64rem; letter-spacing: .06em;
  padding: .25rem .5rem;
  border: 1px solid var(--borde);
  border-radius: calc(var(--radio) * .6);
  color: var(--texto-suave);
  transition: color .3s, border-color .3s, background-color .3s;
}
.sector__enlace:hover .sector__titulo,
.sector__enlace:hover .sector__resumen { color: var(--sector-texto-hover, #fff); }
.sector__enlace:hover .sector__app {
  color: var(--sector-texto-hover, #fff);
  border-color: var(--sector-app-borde-hover, rgba(255,255,255,.35));
}

/* --- tecnología --- */
/* Cuatro capacidades, sin foto ni numeración: se apoyan en la caja de tarjeta,
   que cada estilo ya tiene resuelta con sus tokens. */
.tecno {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.tecno__bloque {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--tarjeta-fondo, transparent);
  border: 1px solid var(--tarjeta-borde, var(--borde));
  border-radius: var(--radio);
}
/* La foto es la misma pieza que la de los carteles (.caso__media): mismo alto,
   mismo recorte y mismo filtro de estilo. */
.tecno__media { overflow: hidden; }
.tecno__media img {
  width: 100%; height: 170px; object-fit: cover;
  filter: var(--media-filtro, none);
}
.tecno__cuerpo { padding: clamp(1.25rem, 2.4vw, 1.85rem); }
.tecno__titulo {
  font-family: var(--fuente-display); font-size: 1.18rem; font-weight: 650;
  line-height: 1.25; margin-bottom: .65rem;
}
.tecno__texto { font-size: .92rem; color: var(--texto-suave); }

/* --- referencias (cinta) --- */
.seccion--referencias { overflow: hidden; }
.logos {
  display: flex; gap: var(--logos-hueco, 3rem);
  width: max-content;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* La duración la pone la plantilla a partir de cuántos logos hay: si fuera fija,
   cuantos más logos más rápido pasarían, porque el recorrido es el carril
   entero. Así la velocidad no cambia aunque la lista crezca. */
.logos__pista {
  display: flex; align-items: center; gap: var(--logos-hueco, 3rem);
  animation: desfile var(--desfile-duracion, 66s) linear infinite;
}
.logos:hover .logos__pista { animation-play-state: paused; }
@keyframes desfile { to { transform: translateX(calc(-100% - var(--logos-hueco, 3rem))); } }
.logos__item { flex: none; }
.logos__item img {
  height: clamp(38px, 5vw, 54px); width: auto; object-fit: contain;
  filter: var(--logo-filtro, grayscale(1) opacity(.55));
  transition: filter .3s, transform .3s;
}
.logos__item:hover img { filter: none; transform: scale(1.06); }

/* --- cierre --- */
.cierre {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 58rem) { .cierre { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.cierre__titulo { font-family: var(--fuente-display); font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: 1rem; }
.cierre__lead { font-size: 1.1rem; color: var(--texto-suave); max-width: 46ch; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.cierre__directo { width: 100%; font-size: .9rem; color: var(--texto-suave); }
.cierre__directo a { font-weight: 700; border-bottom: 1px solid currentColor; }

/* =========================================================================
   PIE
   ========================================================================= */
.pie { background: var(--pie-fondo, var(--fondo-inverso)); color: var(--pie-texto, var(--texto-inverso)); }
.pie__interior {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.pie__marca { grid-column: span 1; }
@media (min-width: 62rem) { .pie__marca { grid-column: span 1; } }
.pie__logo { height: 36px; width: auto; margin-bottom: 1.25rem; }
.pie__claim { font-size: .92rem; opacity: .72; line-height: 1.5; }
.pie__claim em { font-style: italic; }
.pie__titulo {
  font-family: var(--fuente-display); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  margin-bottom: 1.1rem; color: var(--acento);
}
.pie__datos, .pie__lista { font-size: .92rem; opacity: .8; }
.pie__datos a, .pie__lista a { transition: opacity .2s, color .2s; }
.pie__datos a:hover, .pie__lista a:hover { color: var(--acento); }
.pie__lista li + li { margin-top: .5rem; }
.pie__legal { border-top: 1px solid rgba(255,255,255,.14); }
.pie__legal-interior {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  padding-block: 1.5rem; font-size: .82rem; opacity: .65;
}
.pie__legal-interior ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pie__legal-interior a:hover { color: var(--acento); opacity: 1; }

/* =========================================================================
   MÓVIL
   El menú de escritorio no cabe holgado por debajo de 80rem (chat 6/10: «en
   tamaños medios se come una parte»): hasta ahí, hamburguesa. sitio.js no
   repite este ancho: pregunta si la hamburguesa se ve.
   ========================================================================= */
@media (max-width: 79.99rem) {
  .hamburguesa { display: block; }
  .cabecera__acceso { display: none; }
  .nav {
    position: fixed; inset: var(--cabecera-alto) 0 0 0;
    background: var(--panel-fondo, var(--fondo));
    padding: 1.5rem var(--gotera) 3rem;
    overflow-y: auto;
    transform: translateX(100%); transition: transform .3s cubic-bezier(.3,.7,.2,1);
  }
  body.menu-abierto .nav { transform: none; }
  /* El bloqueo del scroll va en <html>, no en <body>: con el `overflow-x: clip`
     de <html>, un overflow en <body> ya no pasa a la ventana y convierte el
     body en contenedor de scroll; la cabecera sticky se iba entonces con la
     página y, abierto el menú tras bajar, no quedaba botón para cerrarlo. */
  html:has(> body.menu-abierto) { overflow: hidden; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--borde); }
  .nav__enlace { justify-content: space-between; padding: 1rem 0; font-size: 1.05rem; }
  .mega, .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    max-height: 0; overflow: hidden; transition: max-height .3s;
  }
  /* Cerrado, el .submenu no puede guardar su relleno de escritorio: con
     max-height 0 quedaban 16 px de hueco bajo Soporte, Formación y Sobre
     nosotros. */
  .submenu { padding-block: 0; }
  .nav__item.abierto > .mega,
  .nav__item.abierto > .submenu { max-height: 220vh; }
  .nav__item.abierto > .submenu { padding-block: .5rem; }
  .mega__interior { padding: 0 0 1.25rem; }
  .mega__titulo { display: none; }
  .mega__rejilla--sectores, .mega__rejilla--familias { grid-template-columns: 1fr; gap: .25rem; }
}

/* =========================================================================
   ANIMACIÓN DE ENTRADA
   ========================================================================= */
[data-anim] > * { opacity: 1; }
.anim-init [data-anim]:not(.visible) .seccion__cabecera,
.anim-init [data-anim]:not(.visible) .valor__bloque,
.anim-init [data-anim]:not(.visible) .caso,
.anim-init [data-anim]:not(.visible) .sector,
.anim-init [data-anim]:not(.visible) .cierre > * {
  opacity: 0; transform: translateY(18px);
}
[data-anim] .seccion__cabecera,
[data-anim] .valor__bloque,
[data-anim] .caso,
[data-anim] .sector,
[data-anim] .cierre > * {
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
[data-anim].visible .valor__bloque:nth-child(2),
[data-anim].visible .caso:nth-child(2),
[data-anim].visible .sector:nth-child(2) { transition-delay: .07s; }
[data-anim].visible .valor__bloque:nth-child(3),
[data-anim].visible .caso:nth-child(3),
[data-anim].visible .sector:nth-child(3) { transition-delay: .14s; }
[data-anim].visible .valor__bloque:nth-child(4),
[data-anim].visible .sector:nth-child(n+4) { transition-delay: .2s; }

/* =========================================================================
   SELECTOR DE ESTILO (herramienta de revisión, ajena al diseño)
   ========================================================================= */
.revisor {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900;
  font-family: ui-sans-serif, system-ui, sans-serif;
  display: flex; align-items: flex-end; gap: .6rem; flex-direction: row-reverse;
}
.revisor__toggle {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: #111; border: 1px solid #333; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.6);
}
.revisor__punto { width: 12px; height: 12px; border-radius: 50%; background: #ffd700; display: block; }
.revisor__panel {
  background: #111; color: #fff; border: 1px solid #333; border-radius: 12px;
  padding: .85rem; width: 232px;
  box-shadow: 0 20px 50px -14px rgba(0,0,0,.7);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.revisor.plegado .revisor__panel { opacity: 0; visibility: hidden; transform: translateY(8px) scale(.96); }
.revisor__etiqueta {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .16em;
  color: #888; margin-bottom: .6rem;
}
.revisor__opciones { display: grid; gap: .3rem; }
.revisor__opciones :is(a, button) {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .55rem .65rem; border-radius: 8px;
  background: transparent; border: 1px solid transparent; color: #ccc;
  font-size: .8rem; text-align: left; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.revisor__opciones :is(a, button) b {
  width: 22px; height: 22px; flex: none; border-radius: 5px;
  background: #262626; color: #999;
  display: grid; place-items: center; font-size: .7rem;
}
.revisor__opciones :is(a, button):hover { background: #1c1c1c; color: #fff; }
.revisor__opciones :is(a, button)[aria-current="true"] { background: #1c1c1c; color: #fff; border-color: #444; }
.revisor__opciones :is(a, button)[aria-current="true"] b { background: #ffd700; color: #000; }
.revisor__pista { margin-top: .7rem; font-size: .65rem; color: #777; }
.revisor__pista kbd {
  background: #262626; border: 1px solid #383838; border-radius: 4px;
  padding: .05rem .3rem; font-family: inherit; font-size: .9em;
}
@media (max-width: 40rem) { .revisor { right: .75rem; bottom: .75rem; } }

/* Celda de conversión al final de la rejilla de sectores */
.sector--cta .sector__enlace { background: var(--cta-celda-fondo, var(--fondo-alt)); }
.sector--cta .sector__titulo { color: var(--acento-legible, var(--texto)); }
.sector--cta .sector__enlace:hover { background: var(--acento); }
.sector--cta .sector__enlace:hover .sector__titulo,
.sector--cta .sector__enlace:hover .sector__resumen,
.sector--cta .sector__enlace:hover .caso__mas { color: var(--acento-texto); }
.sector--cta .caso__mas { color: var(--acento-legible, var(--texto)); }

/* =========================================================================
   LÍNEA DE AVANCE DE LECTURA
   Presente en el HTML de todas las páginas, pero sólo la muestra el tema
   que decide usarla (hoy, el C).
   ========================================================================= */
/* --- volver arriba ------------------------------------------------------- */
.subir {
  position: fixed; right: 1.25rem; z-index: 890;
  /* El selector de estilo ocupa la esquina mientras esto sea una revisión; la
     flecha se apoya encima de él. En WordPress no estará: entonces `bottom`
     vuelve a ser 1.25rem y la flecha baja a la esquina. */
  bottom: calc(1.25rem + 46px + .75rem);
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--acento); color: var(--acento-texto);
  box-shadow: var(--sombra-panel, 0 18px 40px -18px rgba(0,0,0,.45));
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.subir svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.subir--visible { opacity: 1; visibility: visible; transform: none; }
.subir--visible:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .subir { transition: none; } }

.progreso { display: none; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; }
.progreso span {
  display: block; height: 100%; background: var(--acento);
  transform: scaleX(var(--avance, 0)); transform-origin: 0 50%;
}

/* =========================================================================
   ÍNDICE DE FAMILIAS (plantillas/productos.html)
   Compartido por los tres estilos: la diferencia la ponen los tokens.
   ========================================================================= */
.fam-rejilla {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.fam-celda { display: flex; }
.fam-celda__enlace {
  display: flex; flex-direction: column; width: 100%;
  background: var(--tarjeta-fondo, transparent);
  border: 1px solid var(--tarjeta-borde, var(--borde));
  border-radius: var(--radio); overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, background-color .3s;
}
.fam-celda__enlace:hover { transform: translateY(-3px); border-color: var(--borde-fuerte); }
.fam-celda__img {
  display: block; height: 150px; background-size: cover; background-position: center;
  filter: var(--media-filtro, none);
}
.fam-celda__cuerpo {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(1.25rem, 2.2vw, 1.6rem);
}
.fam-celda__titulo {
  font-family: var(--fuente-display); font-size: 1.2rem; font-weight: 650;
  line-height: 1.15; margin-bottom: .55rem;
}
.fam-celda__resumen { color: var(--texto-suave); font-size: .92rem; margin-bottom: 1rem; }
.fam-celda__gamas {
  font-family: var(--fuente-mono); font-size: .7rem; line-height: 1.5;
  color: var(--texto-suave); margin-bottom: 1.25rem;
}
.fam-celda__pie {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  font-family: var(--fuente-mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--acento-legible, var(--texto-suave));
  padding-top: 1rem; border-top: 1px solid var(--borde);
}
.fam-celda__flecha { transition: transform .3s; }
.fam-celda__enlace:hover .fam-celda__flecha { transform: translateX(.35rem); }

/* =========================================================================
   DESCARGABLES / ÁREA PRIVADA (plantillas/_descargas.html)
   ========================================================================= */
.descargas__cuerpo {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 56rem) { .descargas__cuerpo { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
/* Sin aviso al lado (cámaras) la lista se queda con las dos columnas: si no,
   el 40% de la derecha se quedaba vacío. */
.descargas__cuerpo--solo-lista { grid-template-columns: minmax(0, 1fr); }

.descargas__lista { border-top: 1px solid var(--borde); }
.descarga {
  display: grid; align-items: center; gap: .3rem 1.25rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 1.1rem .25rem;
  border-bottom: 1px solid var(--borde);
}
.descarga__tipo {
  font-family: var(--fuente-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; padding: .3rem .5rem;
  border: 1px solid var(--borde-fuerte); border-radius: calc(var(--radio) * .6);
  color: var(--texto-suave);
}
.descarga__nombre { font-family: var(--fuente-display); font-weight: 600; font-size: .98rem; }
.descarga__estado {
  font-family: var(--fuente-mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--texto-suave);
  display: inline-flex; align-items: center; gap: .45rem;
}
.descarga__estado::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acento);
}

/* «Consultar con el equipo comercial» es el doble de largo que «requiere
   acceso»: en pantalla estrecha se baja a su propia línea en vez de estrujar
   el nombre de la descarga. */
@media (max-width: 46rem) {
  .descarga--consultar { grid-template-columns: auto minmax(0, 1fr); }
  .descarga--consultar .descarga__estado { grid-column: 1 / -1; }
}

/* Una descarga que no se pide: se abre aquí mismo (el texto de ingeniería).
   La fila es idéntica a las demás — misma retícula, mismo alto, misma placa de
   tipo — y lo único que cambia es la derecha: donde las otras dicen «requiere
   acceso», ésta lleva el + del desplegable. */
.descarga--abrible { display: block; padding: 0; }
.descarga__fila {
  display: grid; align-items: center; gap: .3rem 1.25rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 1.1rem .25rem;
  cursor: pointer; list-style: none;
  transition: opacity .2s;
}
.descarga__fila::-webkit-details-marker { display: none; }
.descarga__fila:hover { opacity: .72; }
.descarga__abrir::after {
  content: "+"; font-size: 1.15rem; line-height: 1; opacity: .55;
}
.descarga--abrible details[open] .descarga__abrir::after { content: "–"; }
.descarga__cuerpo { padding: .35rem .25rem 1.5rem; }

.descargas__aviso {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.descargas__aviso-titulo {
  font-family: var(--fuente-display); font-size: 1.05rem; font-weight: 650;
  margin-bottom: .75rem;
}
.descargas__aviso p { color: var(--texto-suave); font-size: .92rem; margin-bottom: 1.25rem; }
.descargas__acceso { font-size: .85rem; margin-top: 1.25rem; margin-bottom: 0; }
.descargas__acceso a { border-bottom: 1px solid currentColor; }

/* =========================================================================
   PÁGINAS SUELTAS — contacto, RMA, formación, acceso y actualidad.
   Estructura común; el aspecto lo pone cada tema con sus tokens.
   ========================================================================= */
.seccion--pagina { padding-top: clamp(3rem, 6vw, 5.5rem); }
.seccion--alt { background: var(--fondo-alt); }
.seccion--tramite { scroll-margin-top: calc(var(--cabecera-alto) + 2rem); }

.pagina-dos {
  display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 58rem) { .pagina-dos { grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); } }
/* Sin lateral (Solicitud RMA): una columna, del ancho que tenía la primera. */
.pagina-dos--sola { max-width: 48rem; }
@media (min-width: 58rem) { .pagina-dos--sola { grid-template-columns: minmax(0, 1fr); } }

/* Fila de botones grandes: la portada de Soporte y los cierres de Formación. */
.opciones {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.ficha-lateral {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--fondo-alt);
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.seccion--alt .ficha-lateral { background: var(--fondo); }
.ficha-lateral__titulo {
  font-family: var(--fuente-display); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--acento-legible, var(--texto-suave)); margin-bottom: 1rem;
}
.ficha-lateral__datos { font-size: .95rem; line-height: 1.7; }
.ficha-lateral__datos a { border-bottom: 1px solid var(--borde-fuerte); }
.ficha-lateral__nota { font-size: .88rem; color: var(--texto-suave); margin-block: 1.25rem; }
.pasos { counter-reset: paso; }
.pasos li {
  counter-increment: paso; position: relative; padding-left: 2rem;
  font-size: .9rem; color: var(--texto-suave);
}
.pasos li + li { margin-top: .85rem; }
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0;
  font-family: var(--fuente-mono); font-size: .7rem; letter-spacing: .1em;
  color: var(--acento-legible, var(--texto-suave));
}

/* --- formulario ---------------------------------------------------------- */
.form__aviso {
  font-family: var(--fuente-mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--texto-suave); margin-bottom: 1.75rem;
  padding: .6rem .85rem; border: 1px dashed var(--borde-fuerte);
  display: inline-block;
}
.form__campos {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.form__campo--ancho { grid-column: 1 / -1; }
.form__campo label {
  display: block; font-family: var(--fuente-mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--texto-suave); margin-bottom: .45rem;
}
.form__campo :is(input, textarea) {
  width: 100%; padding: .8rem .9rem;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde-fuerte); border-radius: calc(var(--radio) * .8);
  font-size: .95rem;
}
.form__campo :is(input, textarea):disabled { opacity: .55; cursor: not-allowed; }
.form__legal { font-size: .82rem; color: var(--texto-suave); margin-block: 1.5rem; }
.form__legal a { border-bottom: 1px solid currentColor; }
/* El maquetado de Soporte pide casilla, no sólo aviso. */
.form__acepta {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: .82rem; color: var(--texto-suave); margin-block: 1.5rem;
}
.form__acepta input { accent-color: var(--acento); }
.form__acepta a { border-bottom: 1px solid currentColor; }
.form button:disabled { opacity: .5; cursor: not-allowed; }

/* --- contacto: motivos --------------------------------------------------- */
.motivos { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.25rem; }
.motivo {
  display: inline-block; padding: .5rem .9rem;
  border: 1px solid var(--borde-fuerte); border-radius: 999px;
  font-family: var(--fuente-mono); font-size: .7rem; letter-spacing: .04em;
  color: var(--texto-suave);
}

/* --- formación: cursos --------------------------------------------------- */
.cursos {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.curso {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--tarjeta-fondo, var(--fondo));
  border: 1px solid var(--tarjeta-borde, var(--borde)); border-radius: var(--radio);
}
.curso__nivel {
  display: block; font-family: var(--fuente-mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--acento-legible, var(--texto-suave)); margin-bottom: .9rem;
}
.curso__titulo { font-family: var(--fuente-display); font-size: 1.2rem; font-weight: 650; margin-bottom: .6rem; }
.curso__texto { font-size: .92rem; color: var(--texto-suave); }
.nota-suelta { margin-top: 2.5rem; font-size: .88rem; color: var(--texto-suave); }

/* --- formación ----------------------------------------------------------- */
/* La tarjeta de curso lleva lista de puntos y el botón del temario abajo. */
.curso { display: flex; flex-direction: column; }
.curso__puntos { margin: 1rem 0 1.75rem; padding-left: 1.1rem; list-style: disc; }
.curso__puntos li { font-size: .92rem; color: var(--texto-suave); }
.curso__puntos li + li { margin-top: .4rem; }
.curso .boton { margin-top: auto; align-self: start; }

/* La tabla de convocatorias no cabe en móvil: scroll horizontal propio. */
.convocatorias { overflow-x: auto; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.convocatorias table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.convocatorias :is(th, td) {
  padding: .9rem 1.1rem; text-align: left; font-size: .92rem;
  border-bottom: 1px solid var(--borde);
}
.convocatorias thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .14em;
  background: var(--fondo-alt); border-bottom: 2px solid var(--borde-fuerte);
}
.convocatorias tbody th { font-weight: 650; }

.faq { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.enlace-accion {
  display: inline-block; margin-top: .75rem;
  font-size: .82rem; font-weight: 650; text-transform: uppercase; letter-spacing: .12em;
  border-bottom: 1px solid currentColor;
}
/* La etiqueta «Próximamente» va al lado del título, no dentro: sitio.js parte
   los .seccion__titulo en palabras y vacía su contenido. */
.online__titular {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem;
  margin-bottom: .9rem;
}
.online__titular .seccion__titulo { margin-bottom: 0; }
/* Acompaña a un título grande: si se queda en .7rem se pierde al lado. */
.online__etiqueta {
  font-size: clamp(.85rem, 1.6vw, 1.15rem); font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acento);
}

/* --- sobre nosotros: socios de integración ------------------------------- */
.socios {
  display: grid; gap: 1px; background: var(--borde);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  border: 1px solid var(--borde);
}
.socios li {
  background: var(--fondo); padding: .85rem 1rem;
  font-size: .86rem; color: var(--texto-suave);
}
.cifras--suelta { margin-top: clamp(3rem, 6vw, 4.5rem); border-bottom: 1px solid var(--borde); }
.cifras--suelta .cifras__interior { padding-inline: 0; }

/* --- actualidad ---------------------------------------------------------- */
.noticias { border-top: 1px solid var(--borde); }
.noticia__enlace {
  display: grid; gap: .3rem 1.75rem; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.25rem, 2.2vw, 1.75rem) 0;
  border-bottom: 1px solid var(--borde);
  transition: padding-inline .35s cubic-bezier(.2,.7,.3,1), background-color .3s;
}
@media (min-width: 52rem) { .noticia__enlace { grid-template-columns: 7rem minmax(0, 1fr); } }
.noticia__enlace:hover { padding-inline: .75rem; background: var(--fondo-alt); }
.noticia__media {
  display: none; width: 7rem; height: 4.5rem; border-radius: calc(var(--radio) * .8);
  background-size: cover; background-position: center;
}
@media (min-width: 52rem) { .noticia__media { display: block; } }
.noticia__fecha {
  font-family: var(--fuente-mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--texto-suave);
}
.noticia__titulo {
  display: block; font-family: var(--fuente-display); font-size: 1.1rem; font-weight: 650;
  line-height: 1.2; margin-block: .35rem;
}
.noticia__resumen {
  display: block; font-size: .88rem; color: var(--texto-suave);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* --- texto corrido: noticias; y el pie de las páginas legales --------------- */
.texto-largo { max-width: 68ch; }
.texto-largo p { margin-bottom: 1.15rem; color: var(--texto-suave); }
.texto-largo p:first-child {
  font-size: 1.12rem; color: var(--texto); line-height: 1.55;
}
.legal-otros {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  margin-top: clamp(3rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
  font-size: .9rem;
}
.legal-otros a { border-bottom: 1px solid var(--borde-fuerte); }
.noticia-pag .noticia__fecha { margin-bottom: 1rem; display: block; }
.nota-suelta a { border-bottom: 1px solid currentColor; }

/* Segundo grupo del mega menú de Soluciones (IA — Desarrollo propio) */
.mega__titulo--segundo { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--panel-borde, var(--borde)); }
.mega__ia { display: flex; flex-wrap: wrap; gap: .5rem .35rem; }
.mega__ia a {
  display: inline-block; padding: .45rem .8rem;
  border: 1px solid var(--panel-borde, var(--borde)); border-radius: calc(var(--radio) * .8);
  font-family: var(--fuente-display); font-size: .82rem; font-weight: 600;
  transition: background-color .2s, border-color .2s, color .2s;
}
.mega__ia a:hover { background: var(--panel-hover); border-color: var(--borde-fuerte); }

/* Distintivo de texto que NO viene de la web actual */
.propuesta {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1.5rem; padding: .5rem .85rem;
  border: 1px dashed var(--borde-fuerte); border-radius: calc(var(--radio) * .8);
  font-family: var(--fuente-mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--texto-suave);
}
.propuesta::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }

/* =========================================================================
   DESBORDES
   Las aplicaciones de cada sector son ahora los titulares REALES de su
   página ("Gestión centralizada y supervisión total con nuestro VMS G-SIM"),
   no etiquetas cortas: en la tarjeta hay que recortarlas.
   ========================================================================= */
.sector__apps { flex-direction: column; align-items: flex-start; max-width: 100%; }
.sector__app {
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Titulares largos sin espacios (GEUTEBRÜCK, referencias de producto) */
h1, h2, h3, h4,
.seccion__titulo, .noticia__titulo, .caso__titulo, .sector__titulo,
.fa-prod__titulo, .fb-prod__titulo, .fc-prod__titulo, .pa-titulo, .pc-titulo {
  overflow-wrap: break-word;
}
.noticia__cuerpo { min-width: 0; }

/* Un hijo flex no encoge por debajo de su contenido salvo que se le diga.
   Sin esto, una aplicación larga estira la tarjeta del sector y el recorte
   con puntos suspensivos no llega a aplicarse. */
.sector__enlace, .sector__cuerpo, .sector__apps, .sector__app,
.fam-celda__enlace, .fam-celda__cuerpo, .fam-celda__pie,
.caso__enlace, .caso__cuerpo, .noticia__enlace { min-width: 0; }
.fam-celda__pie { row-gap: .4rem; }
.fam-celda__cuenta { min-width: 0; }

/* Las aplicaciones de la tarjeta pasan de etiquetas sueltas a una línea
   corrida: los titulares reales son largos y como chips se recortaban. */
.sector__apps {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
  font-family: var(--fuente-mono); font-size: .68rem; line-height: 1.45;
  letter-spacing: .01em; color: var(--texto-suave);
  margin-top: auto; padding-top: 1.25rem;
}

/* =========================================================================
   BUSCADOR (la lupa de la cabecera)
   Estructura y comportamiento; el color lo ponen los tokens de cada tema.
   ========================================================================= */
.cabecera__lupa {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--radio);
  color: var(--nav-texto, var(--texto)); cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.cabecera__lupa svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
.cabecera__lupa:hover {
  color: var(--acento-legible, var(--texto));
  border-color: var(--borde-fuerte, var(--borde));
}

body.busca-abierta { overflow: hidden; }

.busca { position: fixed; inset: 0; z-index: 200; display: grid; }
.busca[hidden] { display: none; }
.busca__velo {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.busca__panel {
  position: relative;
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(38rem, calc(100vh - 6rem));
  margin: clamp(3rem, 9vh, 7rem) auto auto;
  display: flex; flex-direction: column;
  background: var(--panel-fondo, var(--fondo));
  border: 1px solid var(--panel-borde, var(--borde));
  border-radius: var(--radio);
  box-shadow: var(--sombra-panel, 0 30px 70px -30px rgba(0,0,0,.6));
  overflow: hidden;
}
.busca__campo {
  flex: none; display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--panel-borde, var(--borde));
}
.busca__icono {
  flex: none; width: 18px; height: 18px;
  fill: none; stroke: var(--acento-legible, var(--texto-suave));
  stroke-width: 1.8; stroke-linecap: round;
}
.busca__input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none; padding: .25rem 0;
  font-family: var(--fuente-texto); font-size: 1.05rem; color: var(--texto);
}
.busca__input::placeholder { color: var(--texto-suave); }
.busca__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.busca__cerrar {
  flex: none; background: none; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: .35rem .6rem;
  font-family: var(--fuente-texto); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--texto-suave);
  transition: color .2s, border-color .2s;
}
.busca__cerrar:hover { color: var(--texto); border-color: var(--borde-fuerte, var(--borde)); }

.busca__resultados { flex: 1; overflow-y: auto; padding: .4rem; }
.busca__res {
  display: grid; gap: 0 .9rem; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: .6rem .7rem; border-radius: calc(var(--radio) * .6);
  transition: background-color .15s;
}
.busca__res:hover, .busca__res.activo { background: var(--panel-hover, rgba(0,0,0,.05)); }
.busca__res-t { font-family: var(--fuente-display); font-weight: 650; font-size: .95rem; min-width: 0; }
.busca__res-c {
  grid-row: 1; grid-column: 2;
  font-family: var(--fuente-texto); font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em; color: var(--texto-suave);
  white-space: nowrap;
}
.busca__res-s {
  grid-column: 1 / -1;
  font-size: .8rem; color: var(--texto-suave); line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.busca__res-s:empty { display: none; }
.busca__nada { padding: 1.5rem .7rem; color: var(--texto-suave); font-size: .9rem; }
.busca__pista {
  flex: none; padding: .6rem 1.1rem;
  border-top: 1px solid var(--panel-borde, var(--borde));
  font-size: .68rem; color: var(--texto-suave);
}
.busca__pista kbd {
  display: inline-block; padding: .05rem .3rem; margin-right: .15rem;
  border: 1px solid var(--borde); border-radius: 3px;
  font-family: var(--fuente-mono); font-size: .9em;
}

/* --- tercer nivel del mega menú: los tipos de cada gama ------------------
   La lista va plegada y se abre con el botón de la derecha. El plegado lo
   activa sitio.js poniendo .js-desplegables en el <html>: si el JS no llega
   a ejecutarse, los tipos se quedan a la vista y no se pierde nada. */
.mega__gama { margin-bottom: .1rem; }
.mega__gama-fila { display: flex; align-items: center; gap: .35rem; }
.mega__gama-enlace { flex: 1; min-width: 0; }
/* Sufijo de marca («- GEUTEBRÜCK»): en amarillo y sin partirse, para que en
   una columna estrecha baje entero a la línea de abajo y no se quede a
   medias. */
.mega__etiqueta { color: var(--acento-legible, var(--acento)); font-weight: 600; white-space: nowrap; }

.mega__desp {
  display: none; flex: none;
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  background: none; border: 0; color: var(--texto-suave);
  align-items: center; justify-content: center;
  transition: color .18s;
}
.js-desplegables .mega__desp { display: inline-flex; }
.mega__desp:hover { color: var(--acento-legible, var(--texto)); }
.mega__desp-flecha {
  width: .38em; height: .38em; margin-top: -.2em; font-size: 1rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .22s;
}
.mega__desp[aria-expanded="true"] .mega__desp-flecha {
  transform: rotate(225deg) translate(-1px, -1px);
}
.js-desplegables .mega__gama:not(.abierto) > .mega__tipos { display: none; }

.mega__tipos {
  display: flex; flex-wrap: wrap; gap: 0 .85rem;
  margin: .1rem 0 .5rem .7rem;
  padding-left: .7rem;
  border-left: 1px solid var(--panel-borde, var(--borde));
}
.mega__tipos li a {
  display: block; padding: .1rem 0;
  font-size: .74rem; color: var(--texto-suave); white-space: nowrap;
  transition: color .16s;
}
.mega__tipos li a:hover { color: var(--acento-legible, var(--texto)); }

/* =========================================================================
   SELECTOR DE TIPO (plantillas/_filtro.html)
   ========================================================================= */
.filtro { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.filtro__rotulo {
  font-family: var(--fuente-texto); font-size: .64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; color: var(--texto-suave);
  margin-bottom: .8rem;
}
.filtro__grupo + .filtro__grupo { margin-top: 1.15rem; }
/* En la página de familia el filtro va suelto, antes de la primera gama, y
   manda sobre todas sus rejillas a la vez. */
.seccion--filtro { padding-block: clamp(2rem, 4vw, 3rem) 0; }
.seccion--filtro .filtro { margin-bottom: 0; }
/* La gama que se queda sin referencias visibles se va entera. */
[data-filtro-grupo][hidden] { display: none; }
.filtro__opciones { display: flex; flex-wrap: wrap; gap: .45rem; }
.filtro__chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem; cursor: pointer;
  background: none; border: 1px solid var(--borde);
  border-radius: var(--radio-boton, var(--radio));
  color: var(--texto);
  font-family: var(--fuente-texto); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  transition: background-color .2s, border-color .2s, color .2s;
}
.filtro__chip:hover { border-color: var(--borde-fuerte, var(--borde)); }
.filtro__chip[aria-pressed="true"] {
  background: var(--acento); border-color: var(--acento); color: var(--acento-texto, #000);
}
.filtro__n {
  font-variant-numeric: tabular-nums; font-size: .68rem; font-weight: 500;
  opacity: .6; letter-spacing: 0;
}
.filtro__estado {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
  margin-top: .9rem; font-size: .76rem; color: var(--texto-suave);
}
.filtro__limpiar {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--acento-legible, var(--texto));
  font-family: var(--fuente-texto); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  border-bottom: 1px solid currentColor;
}

/* =========================================================================
   BULLETS DE APARTADO
   Los mismos chips del filtro de cámaras, pero como enlaces: cada uno baja a
   su apartado. Ocupan el sitio de los dos botones que había en la apertura de
   sectores y desarrollos.
   Se pintan con currentColor porque en el estilo C van encima de la foto de
   portada, donde el texto es claro y el borde tiene que serlo también.
   ========================================================================= */
.anclas { margin-top: clamp(1.5rem, 3vw, 2rem); }
.anclas__lista { display: flex; flex-wrap: wrap; gap: .45rem; }
.anclas__chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .9rem;
  border: 1px solid currentColor; border-radius: var(--radio-boton, var(--radio));
  color: inherit; opacity: .72;
  font-family: var(--fuente-texto); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  transition: background-color .2s, border-color .2s, color .2s, opacity .2s;
}
.anclas__chip::after { content: "↓"; font-size: .85em; }
.anclas__chip:hover, .anclas__chip:focus-visible {
  opacity: 1; background: var(--acento); border-color: var(--acento);
  color: var(--acento-texto, #000);
}

/* Con la cabecera pegada arriba, un salto de ancla deja el título tapado. */
section[id] { scroll-margin-top: calc(var(--cabecera-alto) + 1.5rem); }

/* =========================================================================
   DESPLEGABLE
   El texto largo de una ficha ya no vuelca de golpe: lo abre quien lo
   necesita. Es un <details> nativo, así que sin JavaScript sigue abriendo.
   ========================================================================= */
.desplegable {
  border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  margin-bottom: 1.75rem;
}
.desplegable__titulo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 0; cursor: pointer; list-style: none;
  font-family: var(--fuente-texto); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  transition: opacity .2s;
}
.desplegable__titulo::-webkit-details-marker { display: none; }
/* El signo se pinta con el color del texto: la ficha del estilo C está sobre
   crema y el amarillo de acento ahí no se lee. */
.desplegable__titulo::after { content: "+"; font-size: 1.15rem; line-height: 1; opacity: .55; }
.desplegable[open] .desplegable__titulo::after { content: "–"; }
.desplegable__titulo:hover { opacity: .72; }
.desplegable__cuerpo { padding-bottom: 1.35rem; }

/* =========================================================================
   DATOS DE LA FICHA
   Referencia, resolución, tipo, gama y familia, al lado del producto y no dos
   pantallas más abajo. El estilo B ya tenía los suyos (.sb-ficha) y el C los
   suyos (.pc-ficha); esto es para el A y para lo que venga.
   ========================================================================= */
.datos-ficha {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--borde); border: 1px solid var(--borde);
  margin-bottom: 1.75rem;
}
.datos-ficha > div {
  flex: 1 1 11rem; min-width: 0;
  background: var(--panel-fondo); padding: .95rem 1.1rem;
}
.datos-ficha dt {
  font-family: var(--fuente-texto); font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--texto-suave); margin-bottom: .4rem;
}
.datos-ficha dd { font-size: .95rem; line-height: 1.35; }
.datos-ficha dd a { border-bottom: 1px solid var(--borde-fuerte); }
.datos-ficha dd a:hover { color: var(--acento-legible, var(--texto)); border-color: currentColor; }

/* =========================================================================
   ACCESORIOS
   Foto, nombre y tipo. Va en la parte oscura de la ficha, debajo del producto.
   ========================================================================= */
.acc-lista {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
.acc { display: flex; flex-direction: column; }
/* Cada accesorio lleva a su ficha. El enlace es la tarjeta entera y repite su
   columna; con `display: contents` no tendría caja y el foco de teclado no se
   vería. */
.acc__enlace { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.acc__enlace .acc__media { transition: border-color .25s; }
.acc__enlace:hover .acc__media { border-color: var(--borde-fuerte); }
.acc__enlace:hover .acc__nombre { color: var(--acento-legible, var(--texto)); }
.acc__media {
  display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: .9rem;
  background: #FFFFFF; border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
}
.acc__media img { max-width: 78%; max-height: 78%; object-fit: contain; mix-blend-mode: multiply; }
/* Sin fotografía todavía: una placa rayada, que se lee como «falta la foto» y
   no como un hueco roto. La misma en las tarjetas de producto (.fc-prod). */
.acc__sinfoto, .fc-prod__sinfoto {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(20,18,13,.07) 0 1px, transparent 1px 11px),
    #F1EEE6;
}
.acc__nombre { font-family: var(--fuente-display); font-weight: 650; font-size: 1rem; line-height: 1.25; }
.acc__tipo {
  margin-top: .3rem;
  font-family: var(--fuente-mono); font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--acento-legible, var(--texto-suave));
}
/* Los que ya vienen en la caja de la cámara: se dice, para que nadie los
   presupueste dos veces. */
.acc__incluido {
  align-self: start; margin-top: .45rem; padding: .15rem .5rem;
  border: 1px solid var(--borde); border-radius: 999px;
  font-family: var(--fuente-mono); font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--texto-suave);
}
/* Térmicas duales y radares: el montaje se define en proyecto, no hay lista. */
.acc-consultar { max-width: 46ch; color: var(--texto-suave); }
.acc-consultar a { border-bottom: 1px solid var(--borde-fuerte); }
.acc-consultar a:hover { color: var(--acento-legible, var(--texto)); border-color: currentColor; }

/* =========================================================================
   TEXTO DE INGENIERÍA
   Se enseña plegado y se copia entero: es lo que se pega en un pliego.
   ========================================================================= */
.ingenieria {
  font-family: var(--fuente-mono); font-size: .82rem; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: break-word;
  background: var(--panel-fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1rem 1.15rem; margin-bottom: 1rem;
  max-height: 22rem; overflow: auto;
}

/* =========================================================================
   PÁGINA DE GAMA — versión neutra (plantillas/gama.html, estilos A y B)
   ========================================================================= */
.gp-ruta {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-family: var(--fuente-texto); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--texto-suave);
  margin-bottom: 1.25rem;
}
.gp-ruta a:hover { color: var(--acento-legible, var(--texto)); }
.gp-sub { font-size: 1.05rem; font-weight: 600; margin-top: .9rem; max-width: 50ch; }
.gp-intro { color: var(--texto-suave); max-width: 62ch; margin-top: 1rem; }
.gp-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.75rem; }

.gp-prods {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  background: var(--borde);
  border: 1px solid var(--borde);
}
.gp-prod__enlace {
  display: block; height: 100%; padding: 1rem;
  background: var(--fondo);
  transition: background-color .3s;
}
.gp-prod__enlace:hover { background: var(--fondo-alt); }
.gp-prod__media {
  display: grid; place-items: center; aspect-ratio: 1; margin-bottom: .9rem;
  background: #FFFFFF; overflow: hidden;
}
.gp-prod__media img { max-width: 82%; max-height: 82%; width: auto; height: auto; object-fit: contain; }
.gp-prod__titulo { display: block; font-family: var(--fuente-display); font-weight: 650; font-size: .92rem; }
.gp-prod__sub { display: block; font-size: .76rem; color: var(--texto-suave); margin-top: .35rem; }
.gp-vacio { margin-top: 1.5rem; color: var(--texto-suave); }
.gp-vacio a { color: var(--acento-legible, var(--texto)); border-bottom: 1px solid currentColor; }

/* =========================================================================
   EL VÍDEO DEL SECTOR (plantillas/_video.html)

   Vive aquí y no en la hoja de cada estilo porque está escrito con los tokens
   —acento, radio, bordes—, así que los tres lo visten solos, igual que los
   bloques det-*.

   El botón cubre todo el póster: el objetivo de clic es el vídeo entero, no
   una diana de 60 px. Al arrancar se retira y deja los controles nativos, que
   es lo que todo el mundo sabe usar ya.
   ========================================================================= */
/* No ocupa todo el ancho del contenedor: a 16/9 y a sangre se come una pantalla
   entera y empuja el resto de la página fuera de la vista. Con este tope cabe
   el vídeo y se sigue viendo que hay contenido debajo. */
.visor {
  margin: 0; max-width: 58rem;
  border-radius: var(--radio); overflow: hidden;
}

/* El fotograma, limpio: nada encima. Es todo él zona de clic. */
.visor__marco { display: block; background: #000; cursor: pointer; }
.visor__pieza {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; background: #000;
  transition: opacity .4s cubic-bezier(.2,.7,.3,1);
}
.visor__marco:hover .visor__pieza,
.visor__marco:focus-visible .visor__pieza { opacity: .82; }

/* La barra de debajo: el mando a la izquierda y el dato a la derecha, con el
   mismo reparto que el pie de los carteles. */
.visor__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  min-height: 5.5rem;
  padding: clamp(.9rem, 1.6vw, 1.25rem) clamp(1.1rem, 2vw, 1.75rem);
  background: var(--fondo-alt); border: 1px solid var(--borde); border-top: 0;
}
.visor__mando {
  display: flex; align-items: center; gap: clamp(.85rem, 1.4vw, 1.25rem);
  text-decoration: none; color: inherit;
}

/* El cuadrado amarillo con el triángulo. Cuadrado y no círculo: el sistema no
   tiene ni una esquina redondeada (--radio es 0 en los tres estilos). */
.visor__icono {
  flex: none; width: clamp(46px, 3.6vw, 58px); aspect-ratio: 1;
  background: var(--acento); border-radius: var(--radio);
  display: grid; place-items: center;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.visor__icono::before {
  content: ''; margin-left: .22em;
  border-left: clamp(13px, 1.1vw, 17px) solid var(--acento-texto);
  border-block: clamp(9px, .75vw, 11px) solid transparent;
}
.visor__mando:hover .visor__icono,
.visor__mando:focus-visible .visor__icono { transform: scale(1.08); }

.visor__rotulo {
  font-family: var(--fuente-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.1;
}
.visor__dato {
  font-family: var(--fuente-mono);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--texto-suave);
}

/* Reproduciendo: el mando sobra —ya están los controles del navegador— pero la
   barra se queda, con su dato, para que el bloque no pegue un salto de alto. */
.visor--activo .visor__mando { display: none; }
.visor--activo .visor__pieza { object-fit: contain; }
.visor--activo .visor__marco { cursor: default; }
.visor--activo .visor__marco:hover .visor__pieza { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .visor__pieza, .visor__icono { transition: none; }
  .visor__mando:hover .visor__icono { transform: none; }
}

/* =========================================================================
   DETALLE DE GAMA (plantillas/_detalle.html)
   ========================================================================= */
.det-cuerpo { max-width: 68ch; }
.det-p { color: var(--texto-suave); margin-bottom: 1rem; }
.det-p:last-child { margin-bottom: 0; }

.det-pasos { counter-reset: paso; margin-top: 1.25rem; }
.det-pasos li {
  counter-increment: paso; position: relative;
  padding-left: 2.4rem; margin-bottom: .8rem; color: var(--texto-suave);
}
.det-pasos li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute; left: 0; top: .15em;
  font-family: var(--fuente-texto); font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; color: var(--acento-legible, var(--texto));
}

.det-lista { border-top: 1px solid var(--borde); }
.det-item {
  display: grid; gap: .3rem 2rem; align-items: baseline;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.1rem, 2.2vw, 1.7rem) 0;
  border-bottom: 1px solid var(--borde);
}
@media (min-width: 46rem) {
  .det-item { grid-template-columns: 3.2rem minmax(0, 15rem) minmax(0, 1fr); }
}
.det-item__indice {
  font-family: var(--fuente-texto); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; color: var(--texto-suave);
}
.det-item__titulo { font-family: var(--fuente-display); font-weight: 650; font-size: 1rem; line-height: 1.2; }
.det-item__texto { color: var(--texto-suave); font-size: .93rem; }

.det-app { margin-bottom: 2rem; }
.det-app:last-child { margin-bottom: 0; }
.det-app__titulo {
  font-family: var(--fuente-display); font-weight: 650; font-size: 1.05rem; margin-bottom: .7rem;
}

.det-checks__lista {
  display: grid; gap: .55rem clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
.det-checks__lista li,
.det-puntos li {
  position: relative; padding-left: 1.4rem;
  color: var(--texto-suave); font-size: .93rem;
}
.det-checks__lista li::before,
.det-puntos li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; background: var(--acento);
}
.det-puntos { margin: 1rem 0; }
.det-puntos li { margin-bottom: .4rem; }
.sector__enlace:hover .sector__apps { color: var(--sector-texto-hover, inherit); }

/* Una gama sin fichas (G-CORE, G-Camdraw…) no necesita el aire de una sección
   entera: con el aire normal quedaba media pantalla en blanco. */
.gama--vacia { padding-block: clamp(2.5rem, 4vw, 3.5rem); }
.gama--vacia .seccion__cabecera { margin-bottom: 1.25rem; }

/* === Revisión 9/10: rendimiento === */
/* La foto de cada ficha del mega menú la pone sitio.js al ir a abrirlo
   (`data-fondo`). Hasta entonces, y si el JS no llega, un cuadro del tono del
   panel en vez de un hueco. */
.mega__ficha-img { background-color: var(--panel-hover, rgba(0,0,0,.05)); }