/* ===========================================================================
   TEMA C — INMERSIVO
   Aquí lo que cambia no es la paleta: es la ESTRUCTURA. A y B parten la
   pantalla en dos columnas y ordenan el contenido en tarjetas. Este no.

   · La portada es una fotografía a pantalla completa con el mensaje encima.
   · Los títulos de sección se quedan clavados a la izquierda mientras el
     contenido pasa por delante.
   · Los sectores son un índice numerado a todo lo ancho: la foto invade la
     fila al pasar por encima.
   · Los casos son carteles, no fichas: texto sobre la imagen.
   · La página alterna piedra oscura y crema, en vez de un único fondo.

   Piedra cálida (no el negro frío del tema B), crema en vez de blanco, y una
   grotesca ancha de titular. La fotografía manda.
   =========================================================================== */

:root {
  --ancho-max: 1400px;
  --gotera: clamp(1.25rem, 4.5vw, 4rem);

  --fuente-display: 'Syne', system-ui, sans-serif;
  --fuente-texto: 'Archivo', system-ui, sans-serif;
  --fuente-mono: 'Archivo', system-ui, sans-serif;

  --piedra: #191713;          /* la superficie dominante */
  --piedra-alta: #221F19;
  --crema: #F4F0E6;           /* la superficie de descanso */
  --crema-suave: #E9E3D5;
  /* El gris de rótulos, migas y numeraciones sobre crema. Era #8C8676, que
     se queda en 3,19:1 sobre --crema y 2,84:1 sobre --crema-suave (WCAG pide
     4,5:1); éste da 5,17:1 y 4,60:1 y sigue siendo el mismo gris cálido. */
  --gris-crema: #6A6455;

  --fondo: var(--piedra);
  --fondo-alt: var(--piedra-alta);
  --fondo-inverso: var(--crema);
  --texto: var(--crema);
  --texto-suave: #A39C8C;
  --texto-inverso: var(--piedra);

  --acento: #FFD700;
  --acento-texto: #191713;
  --acento-legible: #FFD700;

  --borde: rgba(244,240,230,.14);
  --borde-fuerte: rgba(244,240,230,.3);
  --rejilla-linea: rgba(244,240,230,.14);

  --radio: 0px;
  --radio-boton: 0px;
  --sombra: none;
  --sombra-panel: 0 40px 90px -40px rgba(0,0,0,.85);

  --panel-fondo: #201D17;
  --panel-borde: rgba(244,240,230,.14);
  --panel-hover: rgba(244,240,230,.07);

  --seccion-y: clamp(5rem, 10vw, 10rem);
  --cabecera-alto: 80px;

  --tarjeta-fondo: transparent;
  --tarjeta-borde: transparent;

  --logo-filtro: brightness(0) invert(1) opacity(.4);
  --logos-hueco: 4rem;
  --mega-img-filtro: saturate(.85);

  --curva: cubic-bezier(.16, 1, .3, 1);
}

body { font-weight: 400; }
.cabecera__logo--claro { display: none; }
.cabecera__logo--oscuro { display: block; }

/* Titulares: grotesca ancha, en versalitas altas y muy apretada */
.hero__titulo, .seccion__titulo, .cierre__titulo {
  font-family: var(--fuente-display);
  font-weight: 700; letter-spacing: -.035em; line-height: .95;
  text-transform: uppercase;
}
.hero__titulo { font-size: clamp(2.3rem, 5.2vw, 4.7rem); }
.seccion__titulo { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.cierre__titulo { font-size: clamp(2.2rem, 5vw, 4rem); }

.hero__eyebrow, .caso__sector, .valor__indice, .cifra__etiqueta, .mega__titulo,
.mega__familia, .pie__titulo, .sector__app, .revisor__etiqueta {
  font-family: var(--fuente-texto);
  font-variation-settings: 'wdth' 112;
  text-transform: uppercase; letter-spacing: .2em; font-weight: 600; font-size: .66rem;
}

/* =========================================================================
   CABECERA — transparente sobre la fotografía, sólida al bajar
   ========================================================================= */
.cabecera {
  --cabecera-fondo: transparent;
  --cabecera-borde: transparent;
  --nav-texto: var(--crema);
}
.cabecera.encogida {
  --cabecera-fondo: rgba(25,23,19,.92);
  --cabecera-borde: rgba(244,240,230,.12);
}
/* El desenfoque va en una capa aparte y no en la cabecera: un backdrop-filter
   la convierte en el bloque contenedor de sus hijos `position: fixed`, y el
   menú móvil (.nav, que espera fuera con translateX(100%)) pasaba a colgar de
   ella al bajar: el documento medía dos pantallas de ancho y el menú, abierto,
   sólo el alto de la cabecera. */
.cabecera::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
}
.cabecera.encogida::before {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav__enlace {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 108;
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
}
.nav__enlace:hover { color: var(--acento); }
.cabecera__acceso {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 600;
  color: rgba(244,240,230,.72);
}

.mega { border-bottom: 0; }
.mega__titulo { color: var(--acento); }
.mega__familia { color: var(--crema); border-bottom-color: var(--borde); }

/* --- botones: rectángulo seco, sin adornos ------------------------------ */
.boton {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 110;
  text-transform: uppercase; letter-spacing: .11em; font-weight: 600; font-size: .76rem;
  --_pad-y: 1.15rem; --_pad-x: 2.1rem;
}
.boton--compacto { --_pad-y: .8rem; --_pad-x: 1.3rem; }
.boton--primario:hover { background: var(--crema); border-color: var(--crema); color: var(--piedra); }
.boton--fantasma { border-color: rgba(244,240,230,.4); color: var(--crema); }
.boton--fantasma:hover { background: var(--crema); border-color: var(--crema); color: var(--piedra); }

/* =========================================================================
   PORTADA — fotografía a pantalla completa, mensaje encima
   ========================================================================= */
.hero {
  display: flex; flex-direction: column;
  min-height: 100svh;
  margin-top: calc(var(--cabecera-alto) * -1);   /* la cabecera flota encima */
  padding-top: var(--cabecera-alto);
}
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  margin: 0; overflow: hidden;
}
.hero__media img {
  width: 100%; height: 122%; object-fit: cover; border: 0; border-radius: 0;
  transform: translate3d(0, calc(var(--desplaz, 0px) * 2.6), 0) scale(1.02);
  transition: transform 1.4s var(--curva);
}
.hero__pie-media { display: none; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(25,23,19,.82) 0%, rgba(25,23,19,.35) 34%, rgba(25,23,19,.55) 68%, rgba(25,23,19,.95) 100%),
    linear-gradient(96deg, rgba(25,23,19,.9) 0%, rgba(25,23,19,.62) 42%, rgba(25,23,19,.2) 100%);
}

/* El orden de capas es delicado: en la plantilla la figura vive DENTRO de
   .hero__interior, así que si ese contenedor crea contexto de apilamiento la
   foto se pone por delante del texto. Se deja sin posicionar y las capas se
   resuelven todas dentro de .hero. */
.hero__interior {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: end;
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 2.5vw, 2.25rem);
}
.hero__texto { position: relative; z-index: 2; max-width: none; }
.hero__eyebrow { color: var(--acento); margin-bottom: 1.75rem; }
.hero__titulo { max-width: 19ch; }
.hero__lead {
  max-width: 46ch; color: rgba(244,240,230,.78); font-weight: 350;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem); margin-top: 1.75rem; margin-bottom: 2.5rem;
}

/* Indicador de scroll: una línea que cae sin parar */
.hero::after {
  content: ''; position: absolute; left: var(--gotera); bottom: 7.5rem; z-index: 3;
  width: 1px; height: 3.5rem;
  background: linear-gradient(180deg, var(--acento) 0%, transparent 100%);
  animation: caer 2.6s ease-in-out infinite;
  transform-origin: 0 0;
}
@keyframes caer {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(3.5rem); opacity: 0; }
}

/* --- cifras: barra de vidrio al pie de la portada ----------------------- */
.cifras {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(244,240,230,.16);
  background: rgba(25,23,19,.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.cifras__interior { padding-block: clamp(1.25rem, 2.4vw, 1.75rem); gap: 0; }
.cifra { padding-inline: clamp(1rem, 3vw, 2.5rem); border-left: 1px solid rgba(244,240,230,.14); }
.cifra:first-child { border-left: 0; padding-left: 0; }
/* Por debajo de 56rem la barra va en dos columnas: sin esto la segunda fila
   no tenía aire y el +20.000 salía sangrado y con filete a la izquierda. */
@media (max-width: 55.99rem) {
  .cifras__interior { row-gap: 1.25rem; }
  .cifra:nth-child(odd) { border-left: 0; padding-left: 0; }
}
.cifra__valor {
  font-family: var(--fuente-display); font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.04em;
}
.cifra__unidad { color: var(--acento); }
.cifra__etiqueta { color: var(--texto-suave); margin-top: .6rem; }
.cifra--nota .cifra__etiqueta strong { color: var(--acento); }

/* =========================================================================
   COLUMNA FIJA — el título se queda, el contenido pasa
   ========================================================================= */
.seccion__cabecera { max-width: none; margin-bottom: 0; }
@media (min-width: 60rem) {
  .seccion--valor > .contenedor,
  .seccion--sectores > .contenedor {
    display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .seccion--valor .seccion__cabecera,
  .seccion--sectores .seccion__cabecera {
    position: sticky; top: calc(var(--cabecera-alto) + 3rem);
  }
}
@media (max-width: 59.99rem) {
  .seccion__cabecera { margin-bottom: 3rem; }
}
.seccion__entradilla { color: var(--texto-suave); font-weight: 350; margin-top: 1.25rem; font-size: 1rem; }

/* --- valor: dos columnas al lado del título fijo ------------------------ */
.seccion--valor { background: var(--crema); color: var(--piedra); }
.seccion--valor .seccion__entradilla { color: #6E6656; }
.valor__lista { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 4vw, 4rem); }
@media (min-width: 46rem) { .valor__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.valor__bloque { border-top: 1px solid rgba(25,23,19,.16); padding-top: 1.5rem; }
.valor__indice { color: #8C8676; margin-bottom: 1.25rem; }
.seccion--valor .valor__indice { color: var(--gris-crema); }
.valor__titulo {
  font-family: var(--fuente-display); font-weight: 600; font-size: 1.1rem;
  letter-spacing: -.02em; line-height: 1.25;
}
/* En el estilo C las listas de valor van sobre piedra (Área privada,
   Formación): el #6E6656 de antes se quedaba en 3,15:1 sobre --piedra y
   2,89:1 sobre --piedra-alta. --texto-suave da 6,56:1 y 6,02:1; sobre la
   crema de .seccion--valor sigue el #6E6656 (4,99:1). */
.valor__texto { color: var(--texto-suave); font-weight: 350; font-size: .9rem; }
.seccion--valor .valor__texto { color: #6E6656; }

/* --- casos: carteles, el texto va sobre la imagen ----------------------- */
.seccion--casos .seccion__cabecera { max-width: 44ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* «Productos relacionados» no cabe en 44ch a este cuerpo: partido con guión
   quedaba «PRODUCTOS RELA-CIONADOS». */
.seccion--relacionados .seccion__cabecera { max-width: 62ch; }
.seccion--relacionados .seccion__titulo { hyphens: manual; }
.casos { gap: 2px; }
.caso__enlace {
  position: relative; min-height: clamp(26rem, 34vw, 32rem);
  border: 0; background: var(--piedra-alta); overflow: hidden;
}
.caso__enlace:hover { transform: none; box-shadow: none; }
.caso__media { position: absolute; inset: 0; margin: 0; }
.caso__media img { width: 100%; height: 100%; object-fit: cover; }
.caso__enlace::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(25,23,19,.15) 0%, rgba(25,23,19,.55) 45%, rgba(25,23,19,.94) 100%);
  transition: background .45s;
}
.caso__enlace:hover::after {
  background: linear-gradient(180deg, rgba(25,23,19,.3) 0%, rgba(25,23,19,.7) 45%, rgba(25,23,19,.97) 100%);
}
.caso__cuerpo {
  position: relative; z-index: 1;
  flex: none; margin-top: auto;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
}
/* Sin foto no hace falta la altura de un cartel: sólo el texto y su filete. */
.caso__enlace--sinfoto { min-height: 17rem; }
.caso__enlace--sinfoto::after { background: none; }
.caso__sector { color: var(--acento); margin-bottom: 1rem; }
.caso__titulo {
  font-family: var(--fuente-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -.025em; line-height: 1.05;
}
.caso__texto { color: rgba(244,240,230,.72); font-weight: 350; font-size: .88rem; margin-bottom: 1.25rem; }
.caso__mas { color: var(--acento); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 600; }

/* --- sectores: índice numerado, la foto invade la fila ------------------ */
.sectores {
  display: block; gap: 0; background: none; border: 0;
  counter-reset: sector;
  border-top: 1px solid var(--borde);
}
.sector { display: block; counter-increment: sector; }
.sector__enlace {
  position: relative; min-height: 0;
  padding: clamp(1.5rem, 2.4vw, 2.15rem) 0;
  border-bottom: 1px solid var(--borde);
  background: transparent;
  display: grid; gap: .5rem 2rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 52rem) {
  /* Número, título y subtítulo: la columna de aplicaciones se fue de la celda,
     así que el subtítulo ocupa lo que sobra en vez de dejar el hueco. */
  .sector__enlace {
    grid-template-columns: 3.5rem minmax(0, 13.5rem) minmax(0, 1fr);
    padding-inline: clamp(.75rem, 1.5vw, 1.5rem);
  }
  /* La celda de llamada a la acción sí conserva su enlace, en una cuarta
     columna que se encoge sola cuando la página lo apaga. */
  .sector--cta .sector__enlace {
    grid-template-columns: 3.5rem minmax(0, 13.5rem) minmax(0, 1fr) auto;
  }
}
/* El número lo pone el CSS: no hace falta tocar la plantilla */
.sector__enlace::before {
  content: counter(sector, decimal-leading-zero);
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 112;
  font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  color: var(--texto-suave);
  transition: color .4s;
}
.sector--cta .sector__enlace::before { content: '—'; }

.sector__img {
  inset: 0; z-index: -2; opacity: 0;
  transition: opacity .6s var(--curva), transform .9s var(--curva);
}
.sector__velo {
  inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(25,23,19,.94) 18%, rgba(25,23,19,.45) 100%);
  opacity: 0; transition: opacity .6s var(--curva);
}
.sector__enlace:hover .sector__img { opacity: .55; transform: scale(1.04); }
.sector__enlace:hover .sector__velo { opacity: 1; }
.sector__enlace:hover::before { color: var(--acento); }

.sector__cuerpo { display: contents; }
.sector__titulo {
  font-family: var(--fuente-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.2rem, 2vw, 1.65rem); letter-spacing: -.03em; line-height: 1.05;
  transition: transform .55s var(--curva);
  /* La columna es de 13.5rem: sin guiones, «PENITENCIARIOS» e
     «INFRAESTRUCTURAS» se partían por cualquier letra entre 1280 y 1440 px. */
  hyphens: auto;
}
.sector__resumen { color: var(--texto-suave); font-weight: 350; font-size: .92rem; min-width: 0; }
.sector__apps { margin-top: 0; padding-top: 0; justify-content: flex-end; gap: .35rem .9rem; min-width: 0; text-align: right; }
.sector__app { border: 0; padding: 0; color: var(--texto-suave); font-size: .6rem; }
.sector__enlace:hover .sector__titulo { transform: translateX(.5rem); }
.sector__enlace:hover .sector__resumen,
.sector__enlace:hover .sector__app { color: rgba(244,240,230,.85); }

.sector--cta .sector__titulo { color: var(--acento); }
.sector--cta .sector__enlace:hover .sector__titulo { color: var(--acento); }
.sector--cta .caso__mas { color: var(--crema); }

/* --- tecnología: sin caja, cada bloque sobre su filete ------------------ */
.tecno__bloque {
  border-top-color: var(--borde);
  border-radius: 0;
  padding: 0;
}
/* La foto entra a sangre bajo el filete; el texto conserva su respiro. */
.tecno__cuerpo { padding: 1.4rem 0 0; }
.tecno__titulo { text-transform: uppercase; letter-spacing: -.02em; font-weight: 600; }
.tecno__texto { color: var(--texto-suave); font-weight: 350; }

/* --- referencias: descanso en crema ------------------------------------- */
.seccion--referencias { background: var(--crema); color: var(--piedra); --logo-filtro: grayscale(1) opacity(.42); }
.seccion--referencias .seccion__entradilla { color: #6E6656; }
.seccion--referencias .seccion__cabecera { max-width: 44ch; }

/* --- cierre -------------------------------------------------------------- */
.seccion--cierre { background: var(--piedra); }
.cierre { align-items: start; }
.cierre__lead { color: var(--texto-suave); font-weight: 350; }
.cierre__directo { color: var(--texto-suave); }

/* --- pie ----------------------------------------------------------------- */
.pie { --pie-fondo: #100E0B; --pie-texto: var(--crema); }
.pie__claim, .pie__datos, .pie__lista { font-weight: 350; }


/* =========================================================================
   COREOGRAFÍA DE SCROLL
   Todo lo que ESCONDE algo cuelga de .anim-init, que sólo existe si el JS ha
   arrancado. Si el JS falla, la página se ve entera y quieta.
   ========================================================================= */
.progreso { display: block; }

/* --- titulares: las palabras suben desde una máscara -------------------- */
.palabra { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.palabra__i { display: inline-block; transition: transform 1.05s var(--curva); }
.anim-init [data-anim]:not(.visible) .palabra__i { transform: translateY(110%); }

/* --- lo que acompaña al titular ----------------------------------------- */
:is(.hero__eyebrow, .hero__lead, .hero__acciones, .seccion__entradilla,
    .cierre__sub, .cierre__lead, .cierre__acciones, .cifra) {
  transition: opacity .95s var(--curva), transform .95s var(--curva);
}
.anim-init [data-anim]:not(.visible) :is(.hero__eyebrow, .hero__lead, .hero__acciones,
    .seccion__entradilla, .cierre__sub, .cierre__lead, .cierre__acciones, .cifra) {
  opacity: 0; transform: translateY(1.2rem);
}
[data-anim].visible .hero__eyebrow { transition-delay: .06s; }
[data-anim].visible .hero__lead { transition-delay: .4s; }
[data-anim].visible .hero__acciones { transition-delay: .5s; }
[data-anim].visible .cifra:nth-child(1) { transition-delay: .62s; }
[data-anim].visible .cifra:nth-child(2) { transition-delay: .70s; }
[data-anim].visible .cifra:nth-child(3) { transition-delay: .78s; }
[data-anim].visible .cifra:nth-child(4) { transition-delay: .86s; }
[data-anim].visible .seccion__entradilla,
[data-anim].visible .cierre__lead { transition-delay: .24s; }
[data-anim].visible .cierre__acciones { transition-delay: .34s; }
/* El subtítulo del cierre propio, entre el titular y los párrafos. */
[data-anim].visible .cierre__sub { transition-delay: .16s; }

/* --- la fotografía de portada arranca ampliada -------------------------- */
.anim-init [data-anim]:not(.visible) .hero__media img {
  transform: translate3d(0, calc(var(--desplaz, 0px) * 2.6), 0) scale(1.14);
}

/* --- carteles: se destapan y la imagen se asienta ----------------------- */
.caso__enlace { transition: clip-path 1.15s var(--curva); }
.anim-init [data-anim]:not(.visible) .caso__enlace { clip-path: inset(0 0 100% 0); }
.caso__media img { transition: transform 1.5s var(--curva); }
.anim-init [data-anim]:not(.visible) .caso__media img { transform: scale(1.16); }
.caso__enlace:hover .caso__media img { transform: scale(1.05); }
[data-anim].visible .caso:nth-child(2) .caso__enlace,
[data-anim].visible .caso:nth-child(2) .caso__media img { transition-delay: .1s; }
[data-anim].visible .caso:nth-child(3) .caso__enlace,
[data-anim].visible .caso:nth-child(3) .caso__media img { transition-delay: .2s; }

/* --- bloques de valor: filete que se dibuja + subida -------------------- */
.valor__bloque { position: relative; transition: opacity .8s var(--curva), transform .8s var(--curva); }
.anim-init .valor__bloque { border-top-color: transparent; }
.anim-init .valor__bloque::after {
  content: ''; position: absolute; top: 0; left: 0; height: 1px; width: 0;
  background: rgba(25,23,19,.16); transition: width 1s var(--curva);
}
.anim-init [data-anim]:not(.visible) .valor__bloque { opacity: 0; transform: translateY(1.2rem); }
[data-anim].visible .valor__bloque::after { width: 100%; }
[data-anim].visible .valor__bloque:nth-child(1) { transition-delay: .05s; }
[data-anim].visible .valor__bloque:nth-child(2) { transition-delay: .13s; }
[data-anim].visible .valor__bloque:nth-child(3) { transition-delay: .21s; }
[data-anim].visible .valor__bloque:nth-child(4) { transition-delay: .29s; }

/* --- las filas del índice entran escalonadas ---------------------------- */
.sector { transition: opacity .75s var(--curva), transform .75s var(--curva); }
.anim-init [data-anim]:not(.visible) .sector { opacity: 0; transform: translateY(1.4rem); }
.anim-init .sector__enlace { border-bottom-color: transparent; }
.anim-init .sector__enlace::after {
  content: ''; position: absolute; bottom: 0; left: 0; height: 1px; width: 0;
  background: var(--borde); transition: width .9s var(--curva);
}
[data-anim].visible .sector__enlace::after { width: 100%; }
[data-anim].visible .sector:nth-child(1) { transition-delay: 0.04s; }
[data-anim].visible .sector:nth-child(2) { transition-delay: 0.08s; }
[data-anim].visible .sector:nth-child(3) { transition-delay: 0.12s; }
[data-anim].visible .sector:nth-child(4) { transition-delay: 0.16s; }
[data-anim].visible .sector:nth-child(5) { transition-delay: 0.20s; }
[data-anim].visible .sector:nth-child(6) { transition-delay: 0.24s; }
[data-anim].visible .sector:nth-child(7) { transition-delay: 0.28s; }
[data-anim].visible .sector:nth-child(8) { transition-delay: 0.32s; }
[data-anim].visible .sector:nth-child(9) { transition-delay: 0.36s; }
[data-anim].visible .sector:nth-child(10) { transition-delay: 0.40s; }
[data-anim].visible .sector:nth-child(11) { transition-delay: 0.44s; }
[data-anim].visible .sector:nth-child(12) { transition-delay: 0.48s; }

/* --- respeto a quien pide menos movimiento ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
  .anim-init [data-anim]:not(.visible) :is(.palabra__i, .hero__eyebrow, .hero__lead,
      .hero__acciones, .seccion__entradilla, .cierre__sub, .cierre__lead, .cierre__acciones,
      .cifra, .valor__bloque, .sector, .caso__enlace, .caso__media img, .hero__media img) {
    opacity: 1; transform: none; clip-path: none;
  }
  .anim-init .valor__bloque::after, .anim-init .sector__enlace::after { width: 100%; }
}

/* La cinta de logos va fuera del .contenedor, así que la cabecera de esa
   sección necesita su propio margen o se solapan. */
.seccion--referencias .seccion__cabecera { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Los logos de cliente son PNG con fondo transparente, así que sobre el crema
   no hay recuadro que disimular. */

/* En móvil el velo horizontal no llega a cubrir: el texto ocupa todo el ancho
   y se apoya sobre la parte encendida de la foto. Se refuerza el vertical. */
@media (max-width: 52rem) {
  .hero::before {
    background: linear-gradient(180deg,
      rgba(25,23,19,.88) 0%, rgba(25,23,19,.55) 22%,
      rgba(25,23,19,.8) 52%, rgba(25,23,19,.97) 100%);
  }
  .hero__titulo { max-width: none; }
}

/* =========================================================================
   PÁGINA DE SECTOR (plantillas/c/sector.html)
   Narrativa fotográfica: portada a sangre, el reto como declaración sobre
   crema, aplicaciones en filas numeradas y familias como carteles.
   ========================================================================= */
.sc-abre {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 78svh;
  margin-top: calc(var(--cabecera-alto) * -1);
  padding-top: var(--cabecera-alto);
  overflow: hidden;
}
.sc-abre__foto { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; }
.sc-abre__foto img {
  width: 100%; height: 118%; object-fit: cover;
  transform: translate3d(0, calc(var(--desplaz, 0px) * 2.2), 0);
  transition: transform 1.4s var(--curva);
}
.sc-abre::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(25,23,19,.8) 0%, rgba(25,23,19,.32) 32%, rgba(25,23,19,.92) 100%),
    linear-gradient(96deg, rgba(25,23,19,.88) 0%, rgba(25,23,19,.5) 48%, rgba(25,23,19,.15) 100%);
}
.sc-abre__interior {
  position: relative; z-index: 2;
  /* En variable: el logo de marca (.apertura-marca) se alinea con la primera
     línea, la de la ruta, y necesita saber dónde empieza. */
  --abre-pad: clamp(3rem, 7vw, 6rem);
  padding-block: var(--abre-pad);
}
.sc-ruta {
  /* En móvil la ruta baja de línea entre saltos; sin wrap, cada rótulo se
     partía por dentro («IA — / DESARROLLO / PROPIO», «G- / LOCATOR»). */
  display: flex; flex-wrap: wrap; gap: .35rem .7rem; align-items: center;
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 112;
  font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em;
  color: rgba(244,240,230,.6); margin-bottom: 1.75rem;
}
.sc-ruta a:hover { color: var(--acento); }
.sc-ruta span[aria-current] { color: var(--acento); }

.sc-claim {
  font-family: var(--fuente-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: -.035em; line-height: .95;
  font-size: clamp(2.2rem, 4.8vw, 4.2rem); max-width: 17ch; margin-bottom: 1.5rem;
}
.sc-entrada {
  color: rgba(244,240,230,.78); font-weight: 350; max-width: 44ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem); margin-bottom: 2.25rem;
}
.sc-acciones { display: flex; flex-wrap: wrap; gap: .85rem; }

/* --- el reto: declaración sobre crema ------------------------------------ */
.sc-reto { background: var(--crema); color: var(--piedra); }
.sc-reto__rotulo {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 112;
  font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em;
  color: var(--gris-crema); margin-bottom: 2rem;
}
.sc-reto__texto {
  font-family: var(--fuente-display); font-weight: 600;
  font-size: clamp(1.4rem, 2.9vw, 2.4rem); line-height: 1.18; letter-spacing: -.03em;
  max-width: 30ch;
}

/* --- aplicaciones: filas numeradas con el título clavado ------------------ */
@media (min-width: 60rem) {
  .sc-apps > .contenedor {
    display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
  }
  .sc-apps .seccion__cabecera { position: sticky; top: calc(var(--cabecera-alto) + 3rem); }
}
.sc-apps__lista { border-top: 1px solid var(--borde); }
.sc-app {
  display: grid; gap: .4rem 2rem; align-items: baseline;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.5rem, 2.6vw, 2.1rem) 0;
  border-bottom: 1px solid var(--borde);
}
@media (min-width: 46rem) {
  .sc-app { grid-template-columns: 3.5rem minmax(0, 14rem) minmax(0, 1fr); }
}
.sc-app__indice {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 112;
  font-size: .66rem; font-weight: 600; letter-spacing: .16em; color: var(--acento-legible);
}
.sc-app__titulo {
  font-family: var(--fuente-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); letter-spacing: -.028em; line-height: 1.1;
}
.sc-app__texto { color: var(--texto-suave); font-weight: 350; font-size: .95rem; }

/* --- equipo: carteles ---------------------------------------------------- */
.sc-fams { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.sc-fam__enlace {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--piedra-alta);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  transition: background-color .4s;
}
.sc-fam__enlace:hover { background: var(--crema); color: var(--piedra); }
.sc-fam__num {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 112;
  font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  color: var(--acento); margin-bottom: 2.5rem;
}
.sc-fam__enlace:hover .sc-fam__num { color: var(--piedra); }
.sc-fam__titulo {
  font-family: var(--fuente-display); font-weight: 600; text-transform: uppercase;
  font-size: 1.15rem; letter-spacing: -.03em; line-height: 1.05; margin-bottom: .7rem;
}
.sc-fam__resumen { color: var(--texto-suave); font-weight: 350; font-size: .9rem; margin-bottom: 1rem; }
.sc-fam__enlace:hover .sc-fam__resumen { color: #6E6656; }
.sc-fam__items {
  font-family: var(--fuente-texto); font-size: .72rem; letter-spacing: .02em;
  color: var(--texto-suave); margin-bottom: 1.75rem;
}
.sc-fam__enlace:hover .sc-fam__items { color: var(--gris-crema); }
.sc-fam__mas {
  margin-top: auto; display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 110;
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  color: var(--acento);
}
.sc-fam__enlace:hover .sc-fam__mas { color: var(--piedra); }
.sc-fam__mas span { transition: transform .3s; }
.sc-fam__enlace:hover .sc-fam__mas span { transform: translateX(.35rem); }

/* --- referencias del sector ---------------------------------------------- */
.sc-refs { background: var(--crema); color: var(--piedra); }
.sc-refs .seccion__entradilla { color: #6E6656; }
.sc-refs__lista { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(2rem, 4vw, 3.5rem); }
.sc-refs__lista img {
  height: clamp(38px, 4.6vw, 52px); width: auto; object-fit: contain;
  filter: grayscale(1) opacity(.45); mix-blend-mode: multiply; transition: filter .3s;
}
.sc-refs__lista li:hover img { filter: none; }

/* La coreografía de scroll también aquí */
.anim-init [data-anim]:not(.visible) :is(.sc-entrada, .sc-acciones, .sc-ruta, .sc-reto__texto) {
  opacity: 0; transform: translateY(1.2rem);
}
:is(.sc-entrada, .sc-acciones, .sc-ruta, .sc-reto__texto) {
  transition: opacity .95s var(--curva), transform .95s var(--curva);
}
[data-anim].visible .sc-entrada { transition-delay: .34s; }
[data-anim].visible .sc-acciones { transition-delay: .44s; }
.sc-app { transition: opacity .75s var(--curva), transform .75s var(--curva); }
.anim-init [data-anim]:not(.visible) .sc-app { opacity: 0; transform: translateY(1.2rem); }
[data-anim].visible .sc-app:nth-child(1) { transition-delay: .05s; }
[data-anim].visible .sc-app:nth-child(2) { transition-delay: .12s; }
[data-anim].visible .sc-app:nth-child(3) { transition-delay: .19s; }
[data-anim].visible .sc-app:nth-child(4) { transition-delay: .26s; }

/* =========================================================================
   FAMILIA Y FICHA DE PRODUCTO (plantillas/c/)
   ========================================================================= */
.fc-indice { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; }
.fc-indice a {
  display: inline-block; padding: .5rem .9rem;
  border: 1px solid rgba(244,240,230,.28);
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 110;
  font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  transition: background-color .25s, color .25s, border-color .25s;
}
.fc-indice a:hover { background: var(--crema); color: var(--piedra); border-color: var(--crema); }

.fc-gama { scroll-margin-top: calc(var(--cabecera-alto) + 2rem); }
.fc-gama--claro { background: var(--crema); color: var(--piedra); }
.fc-gama--claro .seccion__entradilla { color: #6E6656; }
.fc-gama--claro .fc-prod__media { background: #FFFFFF; }
.fc-gama--claro .fc-prod__sub { color: #6E6656; }
.fc-gama__num {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 112;
  font-size: .66rem; font-weight: 600; letter-spacing: .2em;
  color: var(--acento); margin-bottom: 1rem;
}
.fc-gama--claro .fc-gama__num { color: var(--gris-crema); }

/* La columna fija también aquí */
@media (min-width: 60rem) {
  .fc-gama > .contenedor {
    display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start;
  }
  .fc-gama .seccion__cabecera { position: sticky; top: calc(var(--cabecera-alto) + 3rem); margin-bottom: 0; }
}

.fc-prods {
  display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
}
.fc-prod__enlace { display: block; padding: 1rem; transition: background-color .35s; }
.fc-prod__enlace:hover { background: rgba(244,240,230,.06); }
.fc-gama--claro .fc-prod__enlace:hover { background: rgba(25,23,19,.05); }
.fc-prod__media {
  display: grid; place-items: center; aspect-ratio: 1; margin-bottom: .9rem;
  background: var(--crema-suave); border: 0; overflow: hidden;
}
.fc-prod__media img {
  max-width: 82%; max-height: 82%; width: auto; height: auto; object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .5s var(--curva);
}
.fc-prod__enlace:hover .fc-prod__media img { transform: scale(1.06); }
.fc-prod__titulo {
  display: block; font-family: var(--fuente-display); font-weight: 600;
  text-transform: uppercase; font-size: .95rem; letter-spacing: -.025em; line-height: 1.1;
}
.fc-prod__sub { display: block; font-size: .76rem; color: var(--texto-suave); margin-top: .4rem; }
.fc-vacio { color: var(--texto-suave); font-weight: 350; }
.fc-vacio a { color: var(--acento); }
/* Sobre la crema el amarillo no se lee: el enlace va en piedra y subrayado,
   como «Ver sólo esta gama». */
.fc-gama--claro .fc-vacio a { color: var(--piedra); border-bottom: 1px solid currentColor; }

/* --- ficha: el objeto sobre crema ---------------------------------------- */
.pc-abre { background: var(--crema); color: var(--piedra); }
.pc-abre__interior {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  /* Abajo menos aire: debajo va la tabla de datos, dentro de la misma crema. */
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
}
@media (min-width: 58rem) { .pc-abre__interior { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pc-media { display: grid; place-items: center; aspect-ratio: 1; background: #FFFFFF; }
.pc-media img { max-width: 76%; max-height: 76%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.pc-abre .sc-ruta { color: var(--gris-crema); margin-bottom: 1.5rem; }
.pc-abre .sc-ruta a:hover, .pc-abre .sc-ruta span[aria-current] { color: var(--piedra); }
.pc-titulo {
  font-family: var(--fuente-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: .98; letter-spacing: -.035em;
  margin-bottom: .9rem;
}
.pc-sub { font-weight: 500; font-size: 1.05rem; margin-bottom: 1.5rem; }
.pc-desc { color: #6E6656; font-weight: 350; font-size: .98rem; max-width: 50ch; margin-bottom: 1.75rem; }
/* Formato de las fichas de 2026: viñetas bajo el subtítulo, desplegable en
   párrafos y una nota al final («Caja de registro incluida.»). El reset de
   base.css quita las viñetas a todas las listas: aquí sí se quieren. */
.pc-puntos {
  list-style: disc; padding-left: 1.1rem; margin-bottom: 1.75rem;
  display: grid; gap: .35rem; max-width: 56ch; font-size: .95rem;
}
.pc-puntos li { line-height: 1.45; }
.pc-puntos li::marker { color: var(--gris-crema); }
.pc-puntos strong, .pc-desc strong { font-weight: 600; }
/* Entre párrafos, menos aire que el que deja el último antes del filete. */
.desplegable__cuerpo .pc-desc:not(:last-child) { margin-bottom: .9rem; }
.pc-nota { margin-bottom: 1.75rem; font-size: .9rem; color: #6E6656; }
/* Gama bajo proyecto (ATEX): en lugar de viñetas y desplegable, una sola frase
   que manda al equipo comercial, a un cuerpo algo mayor que el subtítulo. */
.pc-proyecto { margin-bottom: 1.75rem; font-size: 1.1rem; max-width: 40ch; }
.pc-proyecto a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.pc-gama { margin-bottom: 2rem; }
.pc-gama a {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 110;
  font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
  border-bottom: 1px solid currentColor;
}
.pc-abre .boton--fantasma { border-color: rgba(25,23,19,.28); color: var(--piedra); }
.pc-abre .boton--fantasma:hover { background: var(--piedra); color: var(--crema); border-color: var(--piedra); }
/* --texto-suave está calculado para la piedra; sobre la crema no se lee. */
.pc-abre .copiar { color: var(--gris-crema); }
.pc-abre .copiar:hover, .pc-abre .copiar--hecho { color: var(--piedra); }

/* --- logo de marca arriba a la derecha (plantillas/_marca.html) ----------
   En la misma línea que la ruta de migas, pegado al borde derecho del
   contenido. En la gama y la familia cuelga de .sc-abre__interior, que ya es
   `relative`; en la ficha, de la columna de texto, donde está su ruta.
   Tamaño: una caja máxima y no una altura fija. Geutebrück es una palabra
   larga y fina (8:1) y PNS-PRO un bloque macizo (4:1); a la misma altura el
   primero doblaba en ancho al segundo. Con la caja pesan parecido y ninguno
   compite con el titular. */
.pc-texto { position: relative; }
.sc-abre__interior, .pc-texto { --marca-ancho: clamp(110px, 11vw, 160px); }
.apertura-marca {
  position: absolute; right: var(--gotera);
  /* centro de la primera línea de la ruta: .66rem de letra × 1.6 de interlínea */
  top: calc(var(--abre-pad, 0px) + .66rem * 1.6 / 2);
  transform: translateY(-50%);
  width: auto; height: auto;
  max-width: var(--marca-ancho); max-height: clamp(20px, 2vw, 28px);
}
.pc-texto > .apertura-marca { right: 0; }
/* En Formación el logo va en la cabecera de la sección, no en una apertura a
   sangre: ahí no hay --abre-pad ni ruta que dejarle sitio. */
.seccion__cabecera { position: relative; }
.seccion__cabecera > .apertura-marca { top: 0; right: 0; transform: none; }
/* Sobre la foto oscura, el azul de PNS y el «PRO» calado no se leen. */
.apertura-marca--placa { box-sizing: content-box; background: var(--crema); padding: .45rem .7rem; }
@media (min-width: 45.0625rem) {
  /* La ruta deja libre el sitio del logo y, si no le cabe, baja de línea en
     vez de meterse debajo. */
  .apertura-marca + .sc-ruta {
    padding-right: calc(var(--marca-ancho) + 3rem);
  }
}
/* En móvil no hay sitio al lado: el logo va encima de la ruta. */
@media (max-width: 45rem) {
  .apertura-marca { position: static; transform: none; display: block; margin-bottom: 1.25rem; }
}


/* La columna fija de los títulos es estrecha: los rótulos largos del PDF
   ("Cámaras LPR / Tráfico inteligente") no caben a tamaño completo. */
@media (min-width: 60rem) {
  .sc-apps .seccion__titulo,
  .fc-gama .seccion__titulo,
  .gc-catalogo .seccion__titulo {
    font-size: clamp(1.4rem, 2vw, 2rem);
    hyphens: auto;
  }
}
.seccion__titulo, .sc-claim, .pc-titulo { overflow-wrap: break-word; hyphens: auto; }
/* =========================================================================
   FICHA — la tabla de datos, debajo del producto
   Sigue en la crema de la cabecera, pero ya no en la columna del texto: cae
   debajo de las dos columnas, justo bajo la imagen, y ocupa todo el ancho.
   La piedra de más abajo la ocupan los accesorios.
   ========================================================================= */

/* A todo el ancho el bloque necesita su propio aire por debajo: el interior
   ya no cierra la cabecera. */
.pc-datos { padding-bottom: clamp(3rem, 7vw, 6rem); }
.pc-datos .pc-ficha { margin-bottom: 0; }

/* Filas de filetes. Va en flex y no en rejilla a propósito: la ficha tiene
   cuatro datos o cinco según el producto lleve tipo o resolución, y con una
   rejilla el sobrante deja media fila vacía. Así la última fila se reparte
   el ancho. */
.pc-ficha {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: rgba(25,23,19,.16);
  border: 1px solid rgba(25,23,19,.16);
  margin-bottom: 2rem;
}
.pc-ficha > div {
  flex: 1 1 11rem; min-width: 0;
  background: var(--crema);
  padding: clamp(.85rem, 1.5vw, 1.15rem) clamp(1rem, 1.8vw, 1.3rem);
}
.pc-ficha dt {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 112;
  font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
  color: var(--gris-crema); margin-bottom: .5rem;
}
.pc-ficha dd { font-size: .95rem; color: var(--piedra); line-height: 1.35; }
.pc-ficha dd a { border-bottom: 1px solid rgba(25,23,19,.3); transition: color .2s, border-color .2s; }
.pc-ficha dd a:hover { color: var(--piedra); border-color: var(--piedra); }

/* El desplegable de la descripción también cae sobre la crema. */
.pc-abre .desplegable { border-color: rgba(25,23,19,.18); }


/* Los accesorios ya están sobre piedra: la placa de la foto sigue siendo
   clara, como la del propio producto. */
.accesorios .acc__nombre { color: var(--crema); }
.accesorios .acc__incluido { color: rgba(244,240,230,.72); border-color: rgba(244,240,230,.24); }
.accesorios .acc-consultar { color: rgba(244,240,230,.72); }
.accesorios .acc-consultar a { color: var(--crema); border-bottom-color: rgba(244,240,230,.35); }
.accesorios .acc-consultar a:hover { color: var(--acento); border-bottom-color: currentColor; }



/* =========================================================================
   CABECERA — lupa y menú de tercer nivel
   ========================================================================= */
.cabecera__lupa { color: rgba(244,240,230,.72); }
.cabecera__lupa:hover { color: var(--acento); border-color: rgba(244,240,230,.28); }
.mega__tipos { border-left-color: var(--borde); }
.mega__tipos li a { font-size: .76rem; }
.mega__tipos li a:hover { color: var(--acento); }

/* =========================================================================
   BUSCADOR
   ========================================================================= */
.busca__panel { background: #16140F; }
.busca__input { font-variation-settings: 'wdth' 105; }
.busca__res-t {
  font-family: var(--fuente-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: -.02em;
}
.busca__res-c { color: var(--acento); opacity: .8; }
.busca__res.activo, .busca__res:hover { background: rgba(244,240,230,.07); }
.busca__cerrar:hover { color: var(--acento); border-color: var(--acento); }

/* =========================================================================
   SELECTOR DE TIPO
   ========================================================================= */
.filtro__rotulo { font-variation-settings: 'wdth' 112; }
.filtro__chip { border-color: rgba(244,240,230,.28); }
.filtro__chip:hover { border-color: var(--crema); }
.filtro__chip[aria-pressed="true"] { color: var(--piedra); }
.filtro__limpiar { color: var(--acento); }

/* =========================================================================
   PÁGINA DE GAMA (plantillas/c/gama.html)
   ========================================================================= */
.gc-sub {
  font-family: var(--fuente-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.25; letter-spacing: -.02em;
  color: var(--acento); max-width: 40ch; margin-bottom: 1.25rem;
}

/* Varias imágenes de familia son gráficos promocionales con texto quemado
   dentro. En la portada de familia el rótulo cae fuera del área de lectura,
   pero aquí compite con el título de la gama: el velo se refuerza. */
.gc .sc-abre::before {
  background:
    linear-gradient(180deg, rgba(25,23,19,.86) 0%, rgba(25,23,19,.5) 32%, rgba(25,23,19,.95) 100%),
    linear-gradient(96deg, rgba(25,23,19,.95) 0%, rgba(25,23,19,.76) 55%, rgba(25,23,19,.55) 100%);
}

.gc-intro { background: var(--crema); color: var(--piedra); padding-block: clamp(3rem, 6vw, 5rem); }
.gc-intro__p {
  font-family: var(--fuente-display); font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.32; letter-spacing: -.02em;
  max-width: 46ch; margin-bottom: 1.25rem;
}
.gc-intro__p:last-child { margin-bottom: 0; color: #56503F; font-weight: 400; font-size: clamp(1rem, 1.4vw, 1.15rem); }

/* Mismo esqueleto que las gamas dentro de la familia: título clavado a la
   izquierda y el catálogo pasando por delante. */
@media (min-width: 60rem) {
  .gc-catalogo > .contenedor {
    display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start;
  }
  .gc-catalogo .seccion__cabecera { position: sticky; top: calc(var(--cabecera-alto) + 3rem); margin-bottom: 0; }
}
.gc-catalogo__cuerpo { min-width: 0; }

.gc-hermanas__lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.gc-hermana {
  display: inline-flex; align-items: baseline; gap: .7rem;
  padding: .7rem 1.1rem; border: 1px solid rgba(244,240,230,.28);
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 110;
  font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  transition: background-color .25s, color .25s, border-color .25s;
}
.gc-hermana:hover { background: var(--crema); color: var(--piedra); border-color: var(--crema); }
.gc-hermana__n { font-variant-numeric: tabular-nums; opacity: .55; font-size: .68rem; letter-spacing: 0; }

/* =========================================================================
   DETALLE DE GAMA (plantillas/_detalle.html)
   Los titulares de estos bloques son subsecciones: no pueden ir al tamaño
   de un titular de sección o la página se convierte en un cartel tras otro.
   ========================================================================= */
.det-bloque, .det-func, .det-checks { padding-block: clamp(3rem, 6vw, 5.5rem); }
.det-bloque .seccion__titulo,
.det-func .seccion__titulo,
.det-checks .seccion__titulo { font-size: clamp(1.45rem, 2.6vw, 2.2rem); }
.det-bloque .seccion__cabecera,
.det-func .seccion__cabecera,
.det-checks .seccion__cabecera { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

.det-bloque--alt { background: var(--crema); color: var(--piedra); }
.det-bloque--alt .det-p,
.det-bloque--alt .det-pasos li { color: #6E6656; }
.det-bloque--alt .det-pasos li::before { color: var(--gris-crema); }
.det-bloque--alt .seccion__entradilla { color: #6E6656; }

.det-p { font-weight: 350; }
.det-item__titulo {
  font-family: var(--fuente-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(.95rem, 1.4vw, 1.12rem); letter-spacing: -.025em; line-height: 1.15;
}
.det-item__indice { font-variation-settings: 'wdth' 112; }
.det-item__texto { font-weight: 350; }
.det-app__titulo {
  font-family: var(--fuente-display); font-weight: 600; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: -.025em;
}
.det-checks__lista li, .det-puntos li { font-weight: 350; }
.det-pasos li { font-weight: 350; }

/* Los índices y los filetes entran escalonados, como las demás listas. */
.det-item { transition: opacity .7s var(--curva), transform .7s var(--curva); }
.anim-init [data-anim]:not(.visible) .det-item { opacity: 0; transform: translateY(1.1rem); }
[data-anim].visible .det-item:nth-child(1) { transition-delay: .04s; }
[data-anim].visible .det-item:nth-child(2) { transition-delay: .10s; }
[data-anim].visible .det-item:nth-child(3) { transition-delay: .16s; }
[data-anim].visible .det-item:nth-child(4) { transition-delay: .22s; }
[data-anim].visible .det-item:nth-child(5) { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .anim-init [data-anim]:not(.visible) .det-item { opacity: 1; transform: none; }
}


/* =========================================================================
   SECTOR — bloques nuevos (reto, solución, beneficios)
   El titular de la página pasa a ser el subtítulo del documento, que es una
   frase larga; encima va el nombre del sector como rótulo.
   ========================================================================= */
/* .sc-rotulo es el mismo rótulo en la apertura larga (_apertura-larga.html). */
.sc-sector, .sc-rotulo {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 112;
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .22em;
  color: var(--acento); margin-bottom: 1rem;
}
.sc-claim { font-size: clamp(1.9rem, 4vw, 3.5rem); max-width: 22ch; }
.sc-entrada--extra { margin-top: -1.25rem; font-size: 1rem; color: rgba(244,240,230,.62); }

.sc-reto { padding-block: clamp(4rem, 8vw, 7rem); }
.sc-reto__resto {
  color: #6E6656; font-weight: 350; max-width: 58ch;
  margin-top: 1.75rem; font-size: 1rem;
}

.sc-solucion__cuerpo { max-width: 62ch; }
.sc-solucion__p {
  color: rgba(244,240,230,.78); font-weight: 350;
  font-size: clamp(1rem, 1.3vw, 1.1rem); margin-bottom: 1.1rem;
}
.sc-solucion__p:last-child { margin-bottom: 0; }

.sc-benef { background: var(--piedra-alta); }

/* --- el vídeo del sector ------------------------------------------------ */
/* Se trata como un cartel más de los de .caso: sin filete, sobre piedra alta y
   con el mismo velo que oscurece hacia abajo. Así el bloque no parece traído
   de otra web, que es lo que pasa cuando un reproductor entra con sus propios
   grises y sus esquinas redondeadas. */
.visor__barra {
  background: var(--piedra-alta); border: 0;
  border-top: 2px solid var(--acento);
}
.visor__rotulo { color: var(--crema); }
.visor__dato { font-variation-settings: 'wdth' 112; color: rgba(244,240,230,.55); }

/* Coreografía: los mismos tiempos que el resto de la página. */
:is(.sc-sector, .sc-rotulo, .sc-reto__resto, .sc-solucion__p) {
  transition: opacity .95s var(--curva), transform .95s var(--curva);
}
.anim-init [data-anim]:not(.visible) :is(.sc-sector, .sc-rotulo, .sc-reto__resto, .sc-solucion__p) {
  opacity: 0; transform: translateY(1.2rem);
}
[data-anim].visible :is(.sc-sector, .sc-rotulo) { transition-delay: .06s; }
[data-anim].visible .sc-reto__resto { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .anim-init [data-anim]:not(.visible) :is(.sc-sector, .sc-rotulo, .sc-reto__resto, .sc-solucion__p) {
    opacity: 1; transform: none;
  }
}

/* --- familia: enlace a la página de cada gama ---------------------------- */
.fc-gama__ver {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.25rem;
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 110;
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  color: var(--acento);
}
.fc-gama__ver span { transition: transform .3s; }
.fc-gama__ver:hover span { transform: translateX(.35rem); }
.fc-gama--claro .fc-gama__ver { color: var(--piedra); border-bottom: 1px solid currentColor; }


/* =========================================================================
   GAMA POR APARTADOS (c/gama.html: Centros de control)
   Cada apartado es una gama de la familia (.fc-gama). Cambia lo que pide la
   maqueta del 16/09:
   · columna del titular algo más ancha, letra algo menor y sin partir
     palabras: sus rótulos son más largos que un nombre de gama y partidos
     («VISUA-LIZACIÓN», «FUNCIO-NAMIENTO») no se leían. Con 19rem y 1,75rem
     como mucho cabe la palabra más larga, FUNCIONAMIENTO;
   · el esquema de un apartado va al lado de sus tarjetas, sobre la misma placa
     que las fotos, y cae debajo cuando no caben.
   ========================================================================= */
@media (min-width: 60rem) {
  .gc-apartado > .contenedor { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
  .gc-apartado .seccion__titulo { font-size: clamp(1.4rem, 1.9vw, 1.75rem); hyphens: manual; }
}
.gc-apartado__cuerpo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px; }
.gc-apartado__cuerpo > .fc-prods { flex: 1 1 12.5rem; min-width: 0; }
/* El relleno es el de .fc-prod__enlace, para que la placa arranque a la altura
   de las fotos; la placa se queda dentro (content-box) y el esquema se funde
   con ella como las fotos con la suya. */
.gc-apartado__imagen {
  flex: 0 1 30rem; padding: 1rem;
  background: var(--crema-suave); background-clip: content-box;
}
.fc-gama--claro .gc-apartado__imagen { background-color: #FFFFFF; }
.gc-apartado__imagen img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }


/* =========================================================================
   MICROSITE DE GAMA Y PÁGINAS DE SECCIONES (_secciones.html, _bloques.html)
   Las páginas largas de desarrollo propio, G-SIM y G-CORE, y todas las que
   se arman con las mismas secciones (familias, Productos, sectores…). Casi
   no traen piezas nuevas: cada bloque se viste con una que el sitio ya tiene.
   · la sección alterna crema y piedra como las gamas de la familia
     (.fc-gama--claro) y deja el titular clavado a la izquierda (.fc-gama);
   · la etiqueta es el rótulo de «El reto» (.sc-reto__rotulo);
   · pasos y funcionalidades son las filas numeradas de .sc-app / .det-item;
   · las listas llevan el cuadrado de .det-checks, los chips son los del
     índice de la familia (.fc-indice) y los desplegables, los de la ficha.
   ========================================================================= */
.ms-seccion { padding-block: clamp(4rem, 8vw, 7rem); }
.ms-seccion--claro { background: var(--crema); color: var(--piedra); }

@media (min-width: 60rem) {
  .ms-seccion > .contenedor {
    display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
  }
  .ms-seccion .seccion__cabecera { position: sticky; top: calc(var(--cabecera-alto) + 3rem); }
}
@media (max-width: 59.99rem) {
  .ms-seccion .seccion__cabecera { margin-bottom: 2.25rem; }
}

.ms-etiqueta {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 112;
  font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em;
  color: var(--acento); margin-bottom: 1.25rem;
}
.ms-seccion--claro .ms-etiqueta { color: var(--gris-crema); }
/* Los titulares de estos PDF son frases, no nombres: en versal y al cuerpo de
   un titular de sección cada apartado era un cartel. Van en redonda, con la
   letra de la declaración de «El reto». */
.ms-titulo {
  font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 600;
  text-transform: none; letter-spacing: -.03em; line-height: 1.14;
  margin-bottom: 0; hyphens: manual;
}

/* --- el cuerpo: todo en una columna con el mismo aire entre bloques ------- */
.ms-cuerpo { display: grid; gap: 1.1rem; min-width: 0; align-content: start; }
.ms-cuerpo > :is(.ms-filas, .ms-flujo, .ms-defs, .ms-desplegables, .ms-imagen, .ms-sub, .ms-chips) {
  margin-block: .6rem;
}
.ms-p, .ms-lista li, .ms-def dd {
  font-weight: 350; color: rgba(244,240,230,.78);
}
.ms-p { max-width: 64ch; }
.ms-seccion--claro :is(.ms-p, .ms-lista li, .ms-def dd) { color: #56503F; }
.ms-cuerpo strong { font-weight: 600; color: var(--crema); }
.ms-seccion--claro .ms-cuerpo strong { color: var(--piedra); }

.ms-lista { display: grid; gap: .55rem; max-width: 64ch; }
.ms-lista li { position: relative; padding-left: 1.4rem; }
.ms-lista li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; background: var(--acento);
}
/* El amarillo sobre crema no se ve: ahí el cuadrado va en piedra. */
.ms-seccion--claro .ms-lista li::before { background: var(--piedra); }
.ms-lista--num { counter-reset: ms-num; }
.ms-lista--num li { counter-increment: ms-num; padding-left: 2.2rem; }
.ms-lista--num li::before {
  content: counter(ms-num, decimal-leading-zero);
  width: auto; height: auto; background: none; top: .32em;
  font-family: var(--fuente-texto); font-size: .66rem; font-weight: 600; letter-spacing: .14em;
  color: var(--acento);
}
.ms-seccion--claro .ms-lista--num li::before { background: none; color: var(--gris-crema); }

/* --- pasos y funcionalidades: filas numeradas ---------------------------- */
.ms-filas { border-top: 1px solid var(--borde); }
.ms-fila {
  display: grid; gap: .6rem 1.5rem; align-items: baseline;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.25rem, 2.2vw, 1.75rem) 0;
  border-bottom: 1px solid var(--borde);
}
.ms-seccion--claro :is(.ms-filas, .ms-fila) { border-color: rgba(25,23,19,.16); }
/* Número a la izquierda y, a su lado, el título encima del texto. Las tres
   columnas de .sc-app sólo cuando la columna del cuerpo es ancha: al lado del
   titular clavado, a menos de 75rem, el texto se quedaba en un palmo. */
@media (min-width: 30rem) {
  .ms-fila { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .ms-fila__cuerpo { grid-column: 2; }
}
@media (min-width: 75rem) {
  .ms-fila { grid-template-columns: 2.75rem minmax(0, 13rem) minmax(0, 1fr); column-gap: 2rem; }
  .ms-fila__cuerpo { grid-column: 3; grid-row: 1; }
}
.ms-fila__num {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 112;
  font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  font-variant-numeric: tabular-nums; color: var(--acento-legible);
}
.ms-seccion--claro .ms-fila__num { color: var(--gris-crema); }
.ms-fila__titulo, .ms-sub__titulo, .ms-def dt {
  font-family: var(--fuente-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(.98rem, 1.4vw, 1.12rem); letter-spacing: -.025em; line-height: 1.15;
}
.ms-fila__cuerpo { display: grid; gap: .8rem; min-width: 0; }
.ms-fila__cuerpo :is(.ms-p, .ms-lista li) { font-size: .95rem; }

/* --- flujo: la cadena del PDF, en chips con flecha ----------------------- */
.ms-flujo { padding: clamp(1.25rem, 2.4vw, 1.9rem); background: var(--piedra-alta); }
.ms-seccion--claro .ms-flujo { background: var(--crema-suave); }
.ms-flujo__titulo {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 112;
  font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em;
  color: var(--acento); margin-bottom: 1.1rem;
}
.ms-seccion--claro .ms-flujo__titulo { color: var(--gris-crema); }
.ms-flujo__pasos { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .5rem; }
.ms-flujo__pasos li { display: inline-flex; align-items: center; gap: .5rem; }
.ms-flujo__paso, .ms-chips li {
  display: inline-block; padding: .5rem .85rem;
  border: 1px solid rgba(244,240,230,.28);
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 110;
  font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  line-height: 1.35;
}
.ms-flujo__pasos li:not(:last-child)::after { content: "→"; color: var(--acento); font-size: .95rem; }
.ms-seccion--claro :is(.ms-flujo__paso, .ms-chips li) { border-color: rgba(25,23,19,.3); }
.ms-seccion--claro .ms-flujo__pasos li:not(:last-child)::after { color: var(--piedra); }
/* En móvil la cadena baja en vertical: en horizontal las flechas quedaban
   colgando al final de cada renglón. */
@media (max-width: 40rem) {
  .ms-flujo__pasos { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .ms-flujo__pasos li { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .ms-flujo__pasos li:not(:last-child)::after { content: "↓"; padding-left: .85rem; }
}

/* --- chips ---------------------------------------------------------------- */
.ms-chips { display: flex; flex-wrap: wrap; gap: .45rem; }

/* --- definiciones: término y texto en filas de filete --------------------- */
.ms-defs { border-top: 1px solid var(--borde); }
.ms-def {
  display: grid; gap: .45rem 2rem; align-items: baseline;
  padding: clamp(1rem, 1.8vw, 1.4rem) 0; border-bottom: 1px solid var(--borde);
}
.ms-seccion--claro :is(.ms-defs, .ms-def) { border-color: rgba(25,23,19,.16); }
@media (min-width: 75rem) { .ms-def { grid-template-columns: minmax(0, 15.75rem) minmax(0, 1fr); } }
.ms-def dd { font-size: .95rem; }

/* --- desplegables: un acordeón, filete con filete ------------------------- */
.ms-desplegable { margin-bottom: 0; }
.ms-desplegable + .ms-desplegable { border-top: 0; }
.ms-seccion--claro .ms-desplegable { border-color: rgba(25,23,19,.18); }
.ms-desplegable .desplegable__titulo { font-size: .76rem; padding-block: 1.1rem; }
.ms-desplegable .desplegable__cuerpo { padding-bottom: 1.6rem; }

/* --- subapartados ---------------------------------------------------------- */
.ms-sub { display: grid; gap: .9rem; }
.ms-sub > .ms-cuerpo { gap: .9rem; }
/* Dentro de un desplegable ya hay filete arriba: el rótulo basta. */
.ms-cuerpo > .ms-sub + .ms-sub { padding-top: 1.5rem; border-top: 1px solid var(--borde); }
.ms-seccion--claro .ms-cuerpo > .ms-sub + .ms-sub { border-color: rgba(25,23,19,.16); }

/* --- imagen: la infografía, como mucho a su tamaño ------------------------ */
/* Es un PNG de 887 px: estirado a lo ancho de la columna emborronaba los
   rótulos pequeños. */
.ms-imagen img { display: block; width: auto; max-width: 100%; height: auto; }

/* --- ganchos sin regla ------------------------------------------------------
   .ms-seccion--oscuro (sección con `oscuro: true`) y .ms-tarjeta--foto
   (tarjeta con imagen) no tienen regla a propósito: la sección oscura ya es
   piedra por no llevar --claro, y la tarjeta con foto se viste sola con
   .ms-tarjeta__media. Están en el marcado para poder ajustarlas sin tocar
   las plantillas ni el PHP. */

/* --- tarjetas: rejillas de 3 a 6 (familias, Productos, sectores) --------- */
/* Filete fino y el enlace al pie, para que en una fila todos los botones
   queden a la misma altura aunque los textos midan distinto. */
.ms-cuerpo > :is(.ms-tarjetas, .ms-tabla-marco, .ms-lema) { margin-block: .6rem; }
.ms-tarjetas {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.ms-tarjeta {
  display: flex; flex-direction: column; gap: .7rem; min-width: 0;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid var(--borde);
}
.ms-seccion--claro .ms-tarjeta { border-color: rgba(25,23,19,.16); }
/* Con foto, la imagen va a sangre arriba: el padding se lo come el margen negativo. */
.ms-tarjeta__media { margin: calc(-1 * clamp(1.25rem, 2.2vw, 1.75rem)); margin-bottom: .4rem; }
.ms-tarjeta__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.ms-tarjeta__etiqueta {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 112;
  font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  font-variant-numeric: tabular-nums; color: var(--acento-legible);
}
.ms-seccion--claro .ms-tarjeta__etiqueta { color: var(--gris-crema); }
.ms-tarjeta__titulo {
  font-family: var(--fuente-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(.98rem, 1.4vw, 1.12rem); letter-spacing: -.025em; line-height: 1.15;
}
.ms-tarjeta__texto { font-size: .95rem; font-weight: 350; color: rgba(244,240,230,.78); }
.ms-seccion--claro .ms-tarjeta__texto { color: #56503F; }
.ms-tarjeta__enlace {
  margin-top: auto; padding-top: .6rem;
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 110;
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  color: var(--acento-legible); transition: color .2s;
}
.ms-tarjeta__enlace:hover { color: var(--crema); }
.ms-seccion--claro .ms-tarjeta__enlace { color: var(--piedra); }
.ms-seccion--claro .ms-tarjeta__enlace:hover { color: var(--gris-crema); }

/* --- botón suelto («Descubrir G-SIM →») ------------------------------------ */
/* El hover del primario es crema: sobre la sección crema desaparecía. */
.ms-seccion--claro .ms-boton .boton--primario:hover { background: var(--piedra); border-color: var(--piedra); color: var(--crema); }

/* --- tabla: la comparativa de Servidores ----------------------------------- */
/* El marco hace el scroll lateral: en el móvil la tabla no cabe y, sin él,
   arrastraba la página entera. */
.ms-tabla-marco { overflow-x: auto; max-width: 100%; }
.ms-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ms-tabla :is(th, td) {
  padding: .8rem 1rem .8rem 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--borde);
}
.ms-seccion--claro .ms-tabla :is(th, td) { border-color: rgba(25,23,19,.16); }
.ms-tabla thead th {
  font-family: var(--fuente-texto); font-variation-settings: 'wdth' 112;
  font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  color: var(--acento-legible); white-space: nowrap;
}
.ms-seccion--claro .ms-tabla thead th { color: var(--gris-crema); }
.ms-tabla tbody th { font-weight: 600; }
.ms-tabla td { font-weight: 350; color: rgba(244,240,230,.78); }
.ms-seccion--claro .ms-tabla td { color: #56503F; }

/* --- lema: las frases en versal de los PDF --------------------------------- */
.ms-lema {
  font-family: var(--fuente-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.1rem, 2vw, 1.45rem); letter-spacing: .08em; line-height: 1.25;
  color: var(--acento); max-width: 40ch;
}
/* El amarillo sobre crema no se lee: ahí el lema va en piedra. */
.ms-seccion--claro .ms-lema { color: var(--piedra); }

/* --- la apertura del microsite y la apertura larga ------------------------- */
/* Traen dos o tres párrafos: con el aire de la entrada de un sector entre
   cada uno, la portada se partía en bloques sueltos. La larga
   (_apertura-larga.html) los pinta grandes sobre la foto: van más anchos. */
.gc--microsite .sc-entrada { max-width: 52ch; }
.sc-abre--larga .sc-entrada { max-width: 62ch; }
:is(.gc--microsite, .sc-abre--larga) .sc-entrada:has(+ .sc-entrada) { margin-bottom: 1rem; }
:is(.gc--microsite, .sc-abre--larga) .sc-entrada strong { font-weight: 600; color: var(--crema); }
.gc-cta { margin-top: 1.75rem; }
.cierre__lead + .cierre__lead { margin-top: 1rem; }
.cierre__lead strong { font-weight: 600; color: var(--crema); }

/* Coreografía: las filas entran escalonadas como las de .det-item. */
.ms-fila { transition: opacity .7s var(--curva), transform .7s var(--curva); }
.anim-init [data-anim]:not(.visible) .ms-fila { opacity: 0; transform: translateY(1.1rem); }
[data-anim].visible .ms-fila:nth-child(2) { transition-delay: .06s; }
[data-anim].visible .ms-fila:nth-child(3) { transition-delay: .12s; }
[data-anim].visible .ms-fila:nth-child(n+4) { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .anim-init [data-anim]:not(.visible) .ms-fila { opacity: 1; transform: none; }
}

/* --- apertura larga y cierre propio (_apertura-larga.html, _cierre-propio.html) */
/* Los párrafos comparten reglas con los del microsite (más arriba). */
/* Los chips de anclas van debajo del botón, no pegados a él. */
.sc-abre--larga .sc-acciones + .anclas { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
/* El subtítulo del cierre: una línea más firme que los párrafos, bajo el h2. */
.cierre__sub {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 500; line-height: 1.35;
  max-width: 46ch; margin-bottom: 1rem;
}

/* === Tarea 17: páginas legales === */
/* El texto del cliente en apartados: el titular en versal, como en su PDF, y
   el cuerpo con la macro de las secciones (.ms-cuerpo), a medida de lectura. */
.legal-cuerpo {
  display: grid; gap: clamp(2.25rem, 4vw, 3rem);
  max-width: 76ch; margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.legal-apartado { display: grid; gap: 1.1rem; min-width: 0; }
.legal-apartado__titulo {
  font-family: var(--fuente-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.18rem); letter-spacing: -.02em; line-height: 1.2;
  color: var(--crema);
}
.legal-cuerpo :is(.ms-p, .ms-lista) { max-width: none; }
.legal-cuerpo :is(.ms-p, .ms-lista li) { font-size: .95rem; overflow-wrap: anywhere; }
.legal-cuerpo .ms-sub__titulo { font-size: .95rem; }
/* La tabla de Google Analytics: la descripción es un párrafo entero; con su
   ancho mínimo, en el móvil se desplaza dentro del marco. */
.legal-cuerpo .ms-tabla td:last-child { min-width: 20rem; }

/* === Tarea 13: portada (HOMEPAGE WEB.pdf) === */
/* Las secciones de bloques de la portada (Geutebrück, Novedades, Soluciones y
   ¿Por qué?) van a todo lo ancho, como en el PDF: el titular encima y las
   tarjetas en una sola fila (tres, dos y cuatro). Con la columna fija de los
   micrositios las cuatro de Soluciones se partían en tres y una. */
@media (min-width: 60rem) {
  .pagina--home .ms-seccion > .contenedor { display: block; }
  .pagina--home .ms-seccion .seccion__cabecera { position: static; max-width: 46rem; margin-bottom: 2.75rem; }
}
.pagina--home .ms-cuerpo > .ms-p { max-width: 70ch; }
.pagina--home .ms-tarjetas { grid-template-columns: repeat(auto-fit, minmax(min(14.5rem, 100%), 1fr)); }
/* El rótulo de cada tarjeta va en versal («PNS-NEXUS ULTRA – NUEVA GENERACIÓN»). */
.pagina--home .ms-tarjeta__etiqueta { text-transform: uppercase; }
/* Novedades y Soluciones titulan con frases («Busca. Describe. Encuentra.»):
   en redonda y algo más grandes. En versal, «G-CORE» se partía por el guion. */
.pagina--home :is(#novedades, #soluciones) .ms-tarjeta__titulo {
  text-transform: none; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.18;
}
/* La etiqueta de la sección Geutebrück es su logo amarillo. */
.ms-etiqueta--marca img { display: block; width: auto; height: clamp(2.1rem, 3.4vw, 2.8rem); }
/* «Aplicaciones para cada sector» es más largo que el titular de antes: en la
   columna fija de 17rem «APLICACIONES» se partía con guion. */
.pagina--home .seccion--sectores .seccion__titulo { hyphens: manual; }
@media (min-width: 60rem) {
  .pagina--home .seccion--sectores > .contenedor { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); }
  .pagina--home .seccion--sectores .seccion__titulo { font-size: clamp(2rem, 3vw, 2.6rem); }
}

/* === Tarea 08: logo Geutebrück más grande en las aperturas === */
/* 1,6 veces la caja de .apertura-marca (decisión 0.4.16), sólo en las
   aperturas a sangre: Grabadores, G-SIM y G-CORE, y cualquier familia o gama
   con `marca: geutebruck`. Formación lo lleva en la cabecera de una sección y
   se queda como estaba. La ruta de migas le deja el sitio proporcional. */
.sc-abre__interior > .apertura-marca--geutebruck {
  max-width: calc(var(--marca-ancho) * 1.6);
  max-height: clamp(32px, 3.2vw, 44.8px);
}
@media (min-width: 45.0625rem) {
  .sc-abre__interior > .apertura-marca--geutebruck + .sc-ruta {
    padding-right: calc(var(--marca-ancho) * 1.6 + 3rem);
  }
}

/* === Tarea 14: Sobre nosotros === */
/* Las tres, sólo en Sobre nosotros (<body class="pagina--nosotros">, también
   en WordPress: functions.php). */
/* Un logo en un bloque `imagen` (el de Geutebrück): a tamaño de rótulo, no a
   su ancho natural de 800 px. */
.pagina--nosotros .ms-imagen img[src*="/logos/"] { width: min(15rem, 100%); }
/* Una apertura sin migas no deja el hueco de la ruta. */
.pagina--nosotros .sc-ruta:not(:has(*)) { display: none; }
/* «Lo que nos diferencia»: las cuatro tarjetas en 2 × 2; con la rejilla de
   siempre salían tres y una huérfana. */
@media (min-width: 40rem) {
  .pagina--nosotros #diferencia .ms-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === Tarea 16: nota del formulario RMA === */
/* «Si finalmente no se acepta el presupuesto…» bajo «Información adicional»,
   antes de la casilla de privacidad (PÁGINA SOPORTE.pdf, 1/10). Con la letra
   de .ficha-lateral__nota, de donde viene. */
.form__nota { font-size: .88rem; color: var(--texto-suave); max-width: 62ch; margin-top: 1.5rem; }
/* Soporte y Formación: la foto del 1/10 detrás del titular y los botones,
   a sangre y bajo la cabecera transparente, como .sc-abre. El velo es el
   suyo: oscuro a la izquierda, donde va el texto. */
.seccion--foto {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
  min-height: min(78svh, 48rem);
  margin-top: calc(var(--cabecera-alto) * -1);
  padding-top: calc(var(--cabecera-alto) + clamp(3rem, 6vw, 5.5rem));
}
.seccion__foto { position: absolute; inset: 0; z-index: -2; margin: 0; }
.seccion__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.seccion--foto::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(25,23,19,.7) 0%, rgba(25,23,19,.2) 30%, rgba(25,23,19,.85) 100%),
    linear-gradient(96deg, rgba(25,23,19,.88) 0%, rgba(25,23,19,.5) 48%, rgba(25,23,19,.15) 100%);
}
.seccion--foto .seccion__entradilla { color: rgba(244,240,230,.85); max-width: 52ch; }
/* Centros de control: un apartado con una sola ficha (Gestor de videowall)
   la enseña algo mayor que las de la rejilla (chat 1/10). A 30rem quedaba
   demasiado grande (chat 6/10: «esta foto hay que hacerla más pequeña»). */
.gc-apartado__cuerpo > .fc-prods:has(> .fc-prod:only-child) { grid-template-columns: minmax(0, 20rem); }

/* === Tarea 12c: el titular de los cierres, en el móvil === */
/* sitio.js mete cada palabra del titular de cualquier cierre en su caja
   (.palabra, inline-block), que no se parte: «infraestructura» (Energéticas,
   Infraestructuras críticas) no cabía en 390 px y daba scroll horizontal.
   Vale para todos los cierres, porque todos se trocean igual y sus titulares
   los escribe el cliente. Sólo actúa por debajo de unos 463 px (donde 7,6vw
   es menos que los 2,2rem del clamp de .cierre__titulo): por encima, el
   tamaño es el de siempre. */
@media (max-width: 30rem) {
  .cierre__titulo { font-size: min(2.2rem, 7.6vw); }
}

/* === Ajuste 6/10: Últimas noticias y Newsletter === */
/* Chat 6/10: Últimas noticias se queda en «Próximamente», sin listado. Con
   sólo el titular y una línea la página se quedaba corta y el pie subía a
   media pantalla: la sección toma casi todo el alto de la pantalla y el bloque
   queda centrado en vertical. */
.proximamente {
  min-height: min(72svh, 44rem);
  display: flex; align-items: center;
}
.proximamente > .contenedor { width: 100%; }
.proximamente .seccion__entradilla { max-width: 62ch; }

/* El alta en la newsletter (_newsletter.html / bloque ffv/newsletter): los
   campos de _formulario.html, pero activos, a la medida de dos campos. */
.form--newsletter { max-width: 44rem; }
/* En escritorio la cabecera de sección no deja margen (columna fija): sin
   éste, las etiquetas de los campos quedaban pegadas a la entradilla. En el
   móvil ya lo pone la cabecera (3rem). */
@media (min-width: 60rem) {
  .form--newsletter { margin-top: 2.5rem; }
}
/* La trampa para robots del formulario de Mailrelay: fuera de la vista. */
.form__trampa {
  position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden;
}
.form--newsletter .form__campo input:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento);
}
.form--newsletter .form__acepta { align-items: flex-start; line-height: 1.55; }
.form--newsletter .form__acepta input[type="checkbox"] {
  flex: none; width: 1.1rem; height: 1.1rem; margin-top: .1rem;
}
/* === Ajuste 6/10: foto de producto en los relacionados === */
/* Chat 6/10 («algunos productos relacionados salen sin foto»): las gamas sin
   foto de ambiente (centros de control, accesorios, servidores…) llevan en su
   cartel el recorte de uno de sus productos (`tarjeta.producto`, build.py).
   A sangre bajo el velo se cortaba por los bordes y el blanco del recorte
   quedaba gris sucio; aquí va entero, sobre la misma placa clara de las
   rejillas de fichas (.fc-prod__media), y el texto debajo, sobre piedra y sin
   velo. El cartel conserva el alto de los demás: la fila sigue alineada. */
.caso__enlace--producto::after { content: none; }
.caso__enlace--producto .caso__media {
  position: relative; inset: auto; flex: 1 1 auto; min-height: 12rem;
  background: var(--crema-suave); transition: background-color .45s;
}
.caso__enlace--producto:hover .caso__media { background: var(--crema); }
.caso__enlace--producto .caso__media img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto; max-width: 74%; max-height: 76%;
  object-fit: contain; mix-blend-mode: multiply;
}
.caso__enlace--producto .caso__cuerpo { margin-top: 0; }
/* === Ajuste 6/10: menú superior en anchos medios === */
/* Chat 6/10: «revisar el responsive del menú superior, en tamaños medios se
   come una parte». El menú de escritorio pedía unos 1340 px de ventana (con
   barra de scroll) para que cupieran logo, seis entradas, lupa, Área privada
   y Contactar; entre 992 y 1320 px se salía por la derecha y el
   `overflow-x: clip` de <html> se comía Contactar (y por debajo de 1120,
   también Área privada). Apretarlo hasta 992 px no daba (sobraban 250 px),
   así que la hamburguesa llega ahora hasta 79,99rem (base.css) y, de 80 a
   90rem (1280-1440 px), huecos, interletra y relleno del botón van de un
   punto algo más justo a los de siempre, en línea recta y sin saltos: cada
   clamp vale su mínimo a 1280 px y su máximo, el valor de antes, a 1440 px.
   Por encima, la cabecera de siempre. */
@media (min-width: 80rem) and (max-width: 89.99rem) {
  .cabecera__interior { gap: clamp(1.25rem, 14.5vw - 10.35rem, 2.7rem); }
  .nav__lista { gap: clamp(.9rem, 5.4vw - 3.42rem, 1.44rem); }
  .nav__enlace {
    gap: clamp(.25rem, 1.5vw - .95rem, .4rem);
    letter-spacing: clamp(.05em, .39vw - 4.37px, .1em);
  }
  .cabecera__acciones { gap: clamp(.6rem, 3vw - 1.8rem, .9rem); }
  .cabecera__acceso { letter-spacing: clamp(.1em, .42vw - 4.26px, .16em); }
  .cabecera__acciones .boton--compacto { --_pad-x: clamp(.9rem, 4vw - 2.3rem, 1.3rem); }
}
/* Con la hamburguesa, el .nav es fijo y sale del flujo: sin él, nada
   empujaba lupa, Contactar y hamburguesa a la derecha y, en tableta y en
   los anchos medios que ahora van con hamburguesa, se quedaban pegados al
   logo con media cabecera vacía detrás. Mismo ancho que MÓVIL en base.css. */
@media (max-width: 79.99rem) {
  .cabecera__acciones { margin-left: auto; }
}
/* Y el menú de hamburguesa ahora se abre también en pantallas de 1000-1280
   px: a una sola columna, los sectores y las familias dejaban vacío casi
   todo el panel. Desde tableta, en columnas como en escritorio. */
@media (min-width: 48rem) and (max-width: 79.99rem) {
  .mega__rejilla--sectores { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
  .mega__rejilla--familias { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.5rem; }
}

/* === Ajuste 6/10: aperturas de Soluciones a pantalla completa === */
/* Chat 6/10: «los hero de las páginas de soluciones que ocupen 100vh siempre
   que sea posible, ahora hay algunos que son demasiado grandes, ajustar
   tipografía, márgenes etc, que queden bonitos». La portada de Soluciones y
   los once sectores (sc-abre--pantalla, que ponen c/soluciones.html y
   c/sector.html). Los textos son del cliente y no se tocan: lo que cambia es
   cómo se reparten.
   La cabecera fija va encima de la apertura (el margin-top negativo de
   .sc-abre), así que la apertura entera es la pantalla: 100svh, la altura
   con las barras del móvil a la vista, y 100vh para quien no lo entienda.
   min-height y no height: si el texto no cabe (el móvil), la apertura crece
   en vez de cortarlo. Los márgenes van en svh para que una pantalla baja de
   portátil (720-768 px) no se los coma enteros. */
.sc-abre--pantalla {
  min-height: 100vh;
  min-height: 100svh;
  justify-content: center;
}
.sc-abre--pantalla .sc-abre__interior { --abre-pad: clamp(1.75rem, 6svh, 4.5rem); }
.sc-abre--pantalla .sc-ruta { margin-bottom: clamp(1rem, 3svh, 1.75rem); }
.sc-abre--pantalla .sc-abre__texto > .sc-entrada { margin-bottom: .85em; }
.sc-abre--pantalla .sc-abre__texto > .sc-entrada:last-child { margin-bottom: 0; }
.sc-abre--pantalla .sc-abre__texto + .sc-acciones { margin-top: clamp(1.5rem, 4svh, 2.25rem); }
.sc-abre--pantalla .anclas { margin-top: clamp(1.5rem, 4svh, 2.5rem); }
/* Más menudos, para que las ocho anclas quepan en una fila desde 1280 px. */
.sc-abre--pantalla .anclas__chip { padding: .45rem .7rem; font-size: .66rem; letter-spacing: .08em; }

/* En escritorio y portátil, dos columnas: a la izquierda el rótulo, el
   titular y el botón; a la derecha los párrafos. En una sola columna los
   tres párrafos del PDF y las ocho anclas medían 1,2-1,6 pantallas en un
   portátil (1000-1200 px de alto); repartidos, caben en una. Los chips de
   anclas van debajo, a todo el ancho. */
@media (min-width: 64rem) {
  .sc-abre--pantalla.sc-abre--larga .sc-abre__interior {
    display: grid;
    /* Hasta 1440 px los párrafos se llevan la columna ancha: son lo que
       más mide. Por encima, el titular (más abajo), para que no pase de
       seis líneas. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: clamp(2.5rem, 5.5vw, 6.5rem);
    align-items: start;
  }
  .sc-abre--pantalla.sc-abre--larga .sc-abre__interior > :is(.sc-ruta, .anclas) { grid-column: 1 / -1; }
  .sc-abre--pantalla.sc-abre--larga .sc-rotulo { grid-column: 1; grid-row: 2; }
  .sc-abre--pantalla.sc-abre--larga .sc-claim {
    grid-column: 1; grid-row: 3; max-width: none; margin-bottom: 0;
    font-size: clamp(2rem, min(3.1vw, 6svh), 3.1rem);
    /* En la columna, el corte con guion salía casi en cada titular
       («INTELI-GENTE», «CEN-TRALIZADO»): la palabra entera baja de línea. */
    hyphens: manual;
  }
  .sc-abre--pantalla.sc-abre--larga .sc-abre__texto { grid-column: 2; grid-row: 3 / 5; }
  .sc-abre--pantalla.sc-abre--larga .sc-acciones {
    grid-column: 1; grid-row: 4; align-self: end; margin-top: clamp(1.5rem, 4svh, 2.5rem);
  }
  .sc-abre--pantalla.sc-abre--larga .anclas { grid-row: 5; }
  .sc-abre--pantalla .sc-entrada {
    font-size: clamp(.94rem, 2.05svh, 1.08rem); line-height: 1.55; max-width: 64ch;
  }
}
@media (min-width: 90rem) {
  .sc-abre--pantalla.sc-abre--larga .sc-abre__interior { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* === Ajuste 7/10: confirmaciones, newsletter y 404 === */
/* Las páginas de después de enviar (confirmacion.html: /gracias/,
   /gracias-rma/ y las tres de la newsletter) y la de error (404.html). Usan
   el bloque centrado de Últimas noticias (.proximamente); aquí sólo lo que
   les falta: aire entre las dos líneas, el correo con pinta de enlace y la
   fila de apartados de la 404. */
.confirmacion .seccion__entradilla { max-width: 62ch; }
.confirmacion .seccion__entradilla + .seccion__entradilla { margin-top: .6rem; }
.confirmacion .seccion__entradilla a {
  color: var(--texto); text-decoration: underline; text-underline-offset: .2em;
}
.confirmacion__enlaces {
  list-style: none; padding: 0; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  display: flex; flex-wrap: wrap; gap: .75rem;
}
.confirmacion__enlaces a {
  display: inline-block; padding: .75rem 1.2rem;
  border: 1px solid rgba(244,240,230,.22);
  font-family: var(--fuente-display); font-weight: 600; font-size: .95rem;
  transition: border-color .18s, color .18s;
}
.confirmacion__enlaces a:hover,
.confirmacion__enlaces a:focus-visible { border-color: var(--acento); color: var(--acento); }
/* En el móvil los titulares largos («Suscripción no completada») no caben
   en una línea con el tamaño de cabecera: se parten sin desbordar. */
.confirmacion .seccion__titulo { overflow-wrap: anywhere; hyphens: auto; }
/* === Ajuste 7/10: aviso de cookies === */
/* El faldón (plantillas/_cookies.html, temas/cookies.js): una franja de
   piedra abajo, sin velo ni modal, para que la web se pueda usar sin
   contestar. Por debajo de la cabecera (z 100: el menú móvil lo tapa) y del
   buscador (z 200); por encima del contenido. «Aceptar» y «Rechazar» son el
   mismo botón (la AEPD pide que rechazar cueste lo mismo que aceptar);
   «Configurar» va como enlace. */
.cookies__faldon {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--panel-fondo); color: var(--crema);
  border-top: 1px solid var(--borde-fuerte);
  box-shadow: 0 -24px 60px -30px rgba(0,0,0,.7);
}
.cookies__faldon[hidden] { display: none; }
.cookies__faldon-interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2.5rem; padding-block: 1.1rem;
}
.cookies__texto { font-size: .9rem; line-height: 1.55; color: rgba(244,240,230,.82); max-width: 70ch; }
.cookies__marca {
  display: inline-block; margin-right: .6rem;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 600;
  color: var(--acento);
}
.cookies__texto a, .cookies__panel-intro a {
  color: var(--crema); text-decoration: underline; text-underline-offset: .2em;
  text-decoration-color: rgba(244,240,230,.4); white-space: nowrap;
}
.cookies__texto a:hover, .cookies__panel-intro a:hover { color: var(--acento); text-decoration-color: currentColor; }
.cookies__botones { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.cookies__boton {
  background: transparent; color: var(--crema); border-color: rgba(244,240,230,.5);
  min-width: 8.5rem;
}
.cookies__boton:hover { background: var(--crema); border-color: var(--crema); color: var(--piedra); }
.cookies__configurar {
  padding: .7rem .4rem; background: none; border: 0; cursor: pointer; color: var(--crema);
  font: inherit; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .11em;
  text-decoration: underline; text-underline-offset: .35em; text-decoration-color: rgba(244,240,230,.4);
}
.cookies__configurar:hover { color: var(--acento); text-decoration-color: currentColor; }

/* Mientras se ve el faldón, el final de la página y la flecha de subir se
   apartan lo que mide (--cookies-alto lo pone cookies.js). */
.hay-aviso-cookies body { padding-bottom: var(--cookies-alto, 0px); }
/* Con margen y no con `bottom`: así sube sobre la altura que ya tenga (no es
   la misma en el prototipo que en WordPress, wp.css). */
.hay-aviso-cookies .subir { margin-bottom: var(--cookies-alto, 0px); }

/* Al elegir desde el teclado el faldón desaparece y cookies.js lleva el foco
   al <main>, para que no se pierda: ahí no hace falta el recuadro amarillo. */
#contenido[tabindex="-1"]:focus { outline: none; }

/* El panel: un <dialog> modal, caja de piedra con las dos categorías. */
.cookies__panel {
  width: min(40rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem);
  margin: auto; padding: clamp(1.5rem, 4vw, 2.25rem); overflow: auto;
  background: var(--panel-fondo); color: var(--crema);
  border: 1px solid var(--borde-fuerte); border-radius: 0;
  box-shadow: var(--sombra-panel);
}
.cookies__panel::backdrop { background: rgba(12,11,9,.72); }
.cookies__panel-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cookies__panel-titulo {
  font-family: var(--fuente-display); font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 700;
  line-height: 1.15; letter-spacing: -.01em;
}
.cookies__cerrar {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem; margin: -.4rem -.4rem 0 0;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--crema);
}
.cookies__cerrar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cookies__cerrar:hover { color: var(--acento); }
.cookies__panel-intro { margin: .75rem 0 1.5rem; font-size: .9rem; line-height: 1.55; color: rgba(244,240,230,.75); }
.cookies__categoria { padding-block: 1.1rem; border-top: 1px solid var(--borde); }
.cookies__categoria:last-of-type { border-bottom: 1px solid var(--borde); }
.cookies__categoria-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cookies__categoria-titulo {
  font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--crema);
}
.cookies__categoria-texto { margin-top: .45rem; font-size: .86rem; line-height: 1.5; color: rgba(244,240,230,.68); }
.cookies__siempre { font-size: .72rem; letter-spacing: .06em; color: var(--acento); }

/* Interruptor: la casilla de verdad, con otra cara (sigue siendo el control
   que lee el lector de pantalla y el que recibe el foco y la barra). */
.cookies__interruptor {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 0; cursor: pointer;
  position: relative; width: 2.75rem; height: 1.5rem; border-radius: 999px;
  background: rgba(244,240,230,.16); border: 1px solid rgba(244,240,230,.4);
  transition: background-color .2s, border-color .2s;
}
.cookies__interruptor::after {
  content: ''; position: absolute; top: 50%; left: .2rem;
  width: 1rem; height: 1rem; border-radius: 50%; background: var(--crema);
  transform: translateY(-50%); transition: transform .2s var(--curva), background-color .2s;
}
.cookies__interruptor:checked { background: var(--acento); border-color: var(--acento); }
.cookies__interruptor:checked::after { transform: translate(1.2rem, -50%); background: var(--piedra); }
.cookies__interruptor:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .cookies__interruptor, .cookies__interruptor::after { transition: none; }
}

/* Los tres del mismo ancho siempre: en fila o, si no caben, uno debajo de
   otro; ninguno destaca sobre los demás. */
.cookies__acciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: .75rem; margin-top: 1.5rem;
}
.cookies__acciones .cookies__boton { min-width: 0; white-space: nowrap; --_pad-x: .5rem; letter-spacing: .07em; }

/* Tableta y móvil: el texto arriba y los botones en una fila debajo (al
   lado, en 820 px, el texto se quedaba en una columna de cuatro líneas). En
   móvil, además, los tres botones se reparten el ancho. */
@media (max-width: 63.99rem) {
  .cookies__faldon-interior { flex-direction: column; align-items: flex-start; gap: .85rem; padding-block: 1rem; }
  .cookies__texto { max-width: none; }
}
@media (max-width: 47.99rem) {
  .cookies__faldon-interior { align-items: stretch; }
  .cookies__texto { font-size: .84rem; }
  .cookies__botones { gap: .5rem; }
  .cookies__boton { flex: 1 1 0; min-width: 0; --_pad-x: .6rem; }
  .cookies__configurar { flex: 0 0 auto; }
}

/* === Ajuste 7/10: empleo, contacto México, eventos y nuestros catálogos === */

/* Formulario: el grupo de opciones (departamento) y el campo de archivo (CV)
   que pide Empleo (_formulario.html). La leyenda, como las etiquetas. */
.form__opciones { border: 0; padding: 0; margin: 0; min-width: 0; }
.form__opciones legend {
  font-family: var(--fuente-mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--texto-suave); margin-bottom: .6rem; padding: 0;
}
.form__opciones .form__opcion {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0 1.5rem .4rem 0; font-size: .92rem; color: var(--texto-suave);
  text-transform: none; letter-spacing: 0; font-family: var(--fuente-texto);
}
/* Sin esto heredan el input de texto (.form__campo input): todo el ancho. */
.form__opciones .form__opcion input { width: auto; padding: 0; accent-color: var(--acento); }
.form__campo input[type="file"] { padding: .65rem .9rem; font-size: .88rem; }
.form__campo input[type="file"]::file-selector-button {
  margin-right: 1rem; padding: .45rem .9rem;
  font-family: var(--fuente-texto); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  background: transparent; color: var(--texto);
  border: 1px solid var(--borde-fuerte); border-radius: calc(var(--radio) * .6);
}
.form__acepta + .form__acepta { margin-top: -.75rem; }

/* Sin los chips de motivos (Contacto México, Empleo), el formulario y el
   lateral quedaban pegados a la entradilla. */
.pagina-dos--separada { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Empleo: el título del formulario y las ofertas del lateral. */
.empleo__subtitulo {
  font-family: var(--fuente-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: .01em;
  margin-bottom: 1.5rem;
}
.oferta + .oferta { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--borde); }
.oferta__dpto {
  font-family: var(--fuente-display); font-weight: 600; font-size: 1rem;
  text-transform: uppercase; margin-bottom: .55rem;
}
.oferta__texto { font-size: .92rem; line-height: 1.6; }
.oferta__texto--sin { color: var(--texto-suave); }
.oferta__requisitos { margin-top: .75rem; padding-left: 1.1rem; list-style: disc; }
.oferta__requisitos li { font-size: .9rem; color: var(--texto-suave); line-height: 1.5; }
.oferta__requisitos li + li { margin-top: .35rem; }

/* Contacto México: horario, LinkedIn, el enlace a la otra sede y el equipo. */
.ficha-lateral__horario { font-size: .92rem; line-height: 1.7; margin-top: 1rem; color: var(--texto-suave); }
.ficha-lateral__rrss { margin-top: .75rem; font-size: .92rem; }
.ficha-lateral__rrss a { border-bottom: 1px solid var(--borde-fuerte); }
.ficha-lateral__rrss a:hover, .ficha-lateral__otra a:hover { color: var(--acento); }
.ficha-lateral__otra { margin-top: 1.25rem; }
.ficha-lateral__otra .enlace-accion { margin-top: 0; }
.equipo-sede { margin-top: clamp(3rem, 6vw, 5rem); }
.equipo-sede__titulo {
  font-family: var(--fuente-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin-bottom: 1.5rem;
}
.equipo-sede__lista {
  display: grid; gap: 1px; background: var(--borde);
  border: 1px solid var(--borde);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.equipo-sede__persona {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.25rem 1.4rem; background: var(--fondo);
}
.equipo-sede__cargo {
  font-family: var(--fuente-texto); font-size: .64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--acento-legible);
}
.equipo-sede__nombre { font-family: var(--fuente-display); font-weight: 600; font-size: 1rem; }
.equipo-sede__persona a {
  font-size: .86rem; color: var(--texto-suave); overflow-wrap: anywhere;
  justify-self: start; align-self: start; border-bottom: 1px solid var(--borde-fuerte);
}
.equipo-sede__persona a:hover { color: var(--acento); }

/* Eventos: las tarjetas de curso de Formación con la foto arriba, a sangre
   dentro de la tarjeta. */
.evento__foto {
  margin: calc(-1 * clamp(1.25rem, 2.4vw, 1.75rem)) calc(-1 * clamp(1.25rem, 2.4vw, 1.75rem)) 1.25rem;
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--piedra-alta);
  border-radius: var(--radio) var(--radio) 0 0;
}
.evento__foto img { width: 100%; height: 100%; object-fit: cover; }
.evento__lugar { font-size: .86rem; color: var(--texto-suave); margin-bottom: .6rem; }

/* Nuestros catálogos: un bloque de filas de Documentación por familia. */
.catalogos {
  display: grid; gap: clamp(2rem, 4vw, 3rem); max-width: 60rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.catalogos__titulo {
  font-family: var(--fuente-display); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--acento-legible); margin-bottom: .9rem;
}
.catalogos .descarga__nombre a { border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.catalogos .descarga__nombre a:hover { color: var(--acento); border-bottom-color: currentColor; }
.catalogos ~ .descargas__acceso { margin-top: 2rem; }
/* En el móvil el estado baja bajo el nombre: al lado, «Catálogo G-SIM»
   se partía por el guion. */
@media (max-width: 46rem) {
  .catalogos .descarga { grid-template-columns: auto minmax(0, 1fr); }
  .catalogos .descarga__estado { grid-column: 2; }
}

/* === Ajuste 7/10: cuenta de usuario === */
/* (Encargo del 7/10.) Las páginas de la cuenta: /acceso/, /registro/,
   /recuperar-contrasena/, /mi-perfil/ y /gracias-registro-usuario/.
   La maqueta (_formulario.html) gana el desplegable y las casillas sueltas
   («Recordarme», el uso de la información), con la letra de los campos. */
.form__campo select {
  width: 100%; padding: .8rem 2.4rem .8rem .9rem;
  background: var(--fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A39C8C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .9rem center / .75rem;
  color: var(--texto); appearance: none;
  border: 1px solid var(--borde-fuerte); border-radius: calc(var(--radio) * .8);
  font: inherit; font-size: .95rem;
}
.form__campo select:disabled { opacity: .55; cursor: not-allowed; }
/* Como la casilla de privacidad (.form__acepta), que va justo debajo. */
.form__casilla { display: flex; align-items: baseline; gap: .6rem; }
.form__campo.form__casilla input {
  flex: none; width: auto; padding: 0; accent-color: var(--acento);
}
.form__campo.form__casilla label {
  margin: 0; font-family: var(--fuente-texto); font-size: .82rem;
  text-transform: none; letter-spacing: 0; line-height: 1.55;
}
/* Sin el aviso legal (`legal = false`: la entrada, la recuperación y el
   perfil), el botón venía pegado al último campo. */
.form :is(.form__campos, .form__nota) + .boton { margin-top: 1.75rem; }
/* «¿Ha olvidado su contraseña?» y «Volver a entrar», bajo el formulario. */
.cuenta__olvido { font-size: .85rem; margin-top: 1.25rem; }
.cuenta__olvido a { border-bottom: 1px solid var(--borde-fuerte); transition: border-color .2s, color .2s; }
.cuenta__olvido a:hover { color: var(--acento); border-color: var(--acento); }
/* La recuperación: un solo campo; a todo el ancho de .pagina-dos--sola la
   caja quedaba desproporcionada. */
.cuenta__estrecha { max-width: 34rem; }
/* Como en la Newsletter: en escritorio la cabecera de sección no deja margen
   y el aviso de la maqueta (o el primer campo del plugin) quedaba pegado a la
   entradilla. */
@media (min-width: 60rem) {
  .cuenta__cuerpo { margin-top: 2.5rem; }
}

/* Área privada propia (9/10): los formularios de la cuenta en WordPress
   (wp/plugin-ffv/area-privada/) llevan el marcado de esta maqueta, ya
   activo; lo único suyo son los avisos: el general, arriba (.form__estado,
   con el filo del color de su tipo), y el de cada campo, debajo de él
   (.form__error, en el rojo de los avisos de CF7). En las casillas el aviso
   baja a su propia línea. */
.form__estado {
  margin: 0 0 1.5rem; padding: .9rem 1.1rem;
  border: 1px solid var(--borde-fuerte); border-left: 3px solid var(--acento);
  background: var(--fondo-alt); color: var(--texto);
  font-size: .9rem; line-height: 1.55;
}
.form__estado--error { border-left-color: #E5734F; }
.form__estado a { border-bottom: 1px solid currentColor; }
.form__error { display: block; margin-top: .4rem; font-size: .8rem; color: #E5734F; }
.form__campo :is(input, select)[aria-invalid="true"] { border-color: #E5734F; }
.form__campo :is(input, select):focus-visible {
  outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento);
}
:is(.form__acepta, .form__casilla):has(.form__error) { flex-wrap: wrap; }
:is(.form__acepta, .form__casilla) .form__error { flex-basis: 100%; margin: 0 0 0 1.6rem; }
.form .opciones { margin-top: 0; }

/* === Ajuste 8/10: Contact Form 7 === */
/* Contacto, Contacto México, RMA y Empleo envían con CF7 en WordPress (bloque
   ffv/formulario con `clave`). Su cuerpo lo monta `wp ffv formularios`
   (wp/plugin-ffv/formularios.php) con las clases de la maqueta, así que los
   campos ya salen como aquí; esto es lo que CF7 pone por su cuenta: el
   envoltorio de cada control, las casillas metidas en <label>, la rueda de
   envío y los avisos. Su hoja se carga, pero estas reglas pesan más. */
.form--plugin .wpcf7-form-control-wrap { display: block; }
.form--plugin .wpcf7-list-item-label::before,
.form--plugin .wpcf7-list-item-label::after { content: none; }
/* Botones de opción (departamento de Empleo): como .form__opcion. */
.form--plugin .form__opciones .wpcf7-list-item { margin: 0 1.5rem .4rem 0; }
.form--plugin .form__opciones .wpcf7-list-item label {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0;
  font-family: var(--fuente-texto); font-size: .92rem; color: var(--texto-suave);
  text-transform: none; letter-spacing: 0;
}
.form--plugin .form__opciones .wpcf7-list-item input { width: auto; padding: 0; accent-color: var(--acento); }
/* Casillas (privacidad y las optativas): como .form__acepta, la casilla a la
   izquierda y el texto al lado. */
.form--plugin .form__acepta > .wpcf7-form-control-wrap { flex: 1; }
.form--plugin :is(.form__acepta, .form__casilla) .wpcf7-list-item { display: block; margin: 0; }
.form--plugin :is(.form__acepta, .form__casilla) .wpcf7-list-item label {
  display: flex; align-items: baseline; gap: .6rem; margin: 0;
  font-family: var(--fuente-texto); font-size: .82rem; color: var(--texto-suave);
  text-transform: none; letter-spacing: 0; line-height: 1.55;
}
.form--plugin :is(.form__acepta, .form__casilla) input[type="checkbox"] {
  flex: none; width: auto; padding: 0; accent-color: var(--acento);
}
/* El botón es un <input type="submit">: la letra no la hereda. */
.form--plugin .wpcf7-submit { font-family: inherit; cursor: pointer; }
/* CF7 lo deja desactivado hasta marcar la casilla de privacidad. */
.form--plugin .wpcf7-submit:disabled { opacity: .5; cursor: not-allowed; }
.form--plugin .wpcf7-spinner { margin: 0 0 0 1rem; vertical-align: middle; background-color: var(--texto-suave); }
/* Avisos de validación, bajo cada campo, en rojo (como .form__error). */
.form--plugin .wpcf7-not-valid-tip {
  display: block; margin-top: .4rem; font-size: .8rem; font-weight: 400; color: #E5734F;
}
.form--plugin .wpcf7-form-control.wpcf7-not-valid { border-color: #E5734F; }
/* El aviso del resultado (enviado, error, faltan campos), como los de la
   cuenta (.form__estado): filo de color a la izquierda en vez del recuadro de CF7. */
.form--plugin .wpcf7 form.wpcf7-form .wpcf7-response-output {
  margin: 1.5rem 0 0; padding: .9rem 1.1rem;
  border: 1px solid var(--borde-fuerte); border-left: 3px solid var(--acento);
  background: var(--fondo-alt); color: var(--texto);
  font-size: .9rem; line-height: 1.55;
}
.form--plugin .wpcf7 form.wpcf7-form:is(.failed, .aborted, .spam, .invalid, .unaccepted, .payment-required) .wpcf7-response-output {
  border-color: var(--borde-fuerte); border-left-color: #E5734F;
}

/* === Ajuste 8/10: repaso del móvil === */
/* Chat 8/10: «revisa la web entera, que sea responsive en el movil». Se
   pasaron las 312 páginas a 360 y 390 px: ninguna se sale de lado. Lo que
   se arregla es lo que estorbaba al leerlas. */

/* Rejillas de productos y de accesorios: en el móvil iban de una en una, con
   la foto a todo el ancho, y una gama de 31 cámaras eran 31 pantallas de
   desplazamiento. De dos en dos se ven y se comparan. */
@media (max-width: 37.5rem) {
  .fc-prods, .acc-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-prods { gap: .5rem; }
  .fc-prod__enlace { padding: .5rem .5rem .9rem; }
  .fc-prod__media { margin-bottom: .65rem; }
  .fc-prod__titulo { font-size: .8rem; overflow-wrap: anywhere; }
  .fc-prod__sub { font-size: .7rem; }
}

/* La flecha de subir va fija en la esquina y, al llegar al final, tapaba
   «Política de cookies» del pie: la última franja deja su hueco. */
@media (max-width: 48rem) {
  .pie__legal-interior { padding-bottom: calc(46px + 2.75rem); }
}

/* Convocatorias de Formación: la tabla (curso × mes) se desplazaba de lado
   sin que se notara y cortaba la columna de octubre. En el móvil cada curso
   es una ficha, con el mes delante de cada fecha (data-mes). */
@media (max-width: 40rem) {
  .convocatorias { overflow: visible; }
  .convocatorias table, .convocatorias tbody, .convocatorias tr,
  .convocatorias th, .convocatorias td { display: block; min-width: 0; }
  .convocatorias thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .convocatorias tr { border: 1px solid var(--borde); }
  .convocatorias tr + tr { margin-top: .75rem; }
  .convocatorias tbody th {
    background: var(--fondo-alt); border-bottom: 2px solid var(--borde-fuerte);
  }
  .convocatorias td { display: flex; justify-content: space-between; gap: 1rem; }
  .convocatorias td:last-child { border-bottom: 0; }
  .convocatorias td::before {
    content: attr(data-mes);
    font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--texto-suave);
  }
}

/* === Ajuste 8/10: IA — Desarrollo propio, más vistosa === */
/* Chat 8/10: «la pagina de IA-desarrollo propio, hazla mas bonita». Los
   textos del cliente no se tocan: cambia cómo se presentan. Todo va acotado
   a .familia--ia-desarrollo-propio (la clase de <body> de c/familia.html y
   de functions.php), así que las otras familias con secciones (Gestión de
   vídeo, Analíticas) siguen como estaban. */

/* --- apertura: la placa de circuito, con un brillo cálido ------------------ */
/* Las pistas doradas de la foto quedan a la derecha; el velo del sc-abre
   oscurece la izquierda, donde va el texto. */
.familia--ia-desarrollo-propio .sc-abre__foto img { object-position: 70% 50%; }
.familia--ia-desarrollo-propio .sc-abre::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 70% at 85% 40%, rgba(255,215,0,.10), transparent 70%);
}

/* --- Nuestros desarrollos: la sección a todo el ancho --------------------- */
/* Siete tarjetas con foto no caben en la columna del cuerpo: el titular va
   encima y la rejilla ocupa el contenedor entero. La primera (PNS-NEXUS
   ULTRA, «Nueva generación») va destacada a lo ancho; las otras seis, de
   tres en tres, sin ninguna huérfana. */
@media (min-width: 60rem) {
  .familia--ia-desarrollo-propio #desarrollos > .contenedor { display: block; }
  .familia--ia-desarrollo-propio #desarrollos .seccion__cabecera {
    position: static; max-width: 40rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  }
  .familia--ia-desarrollo-propio #desarrollos .ms-cuerpo {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5rem);
  }
  .familia--ia-desarrollo-propio #desarrollos .ms-cuerpo > .ms-p:first-child {
    grid-column: 1 / -1;
    font-family: var(--fuente-display); font-weight: 600; letter-spacing: -.02em;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: var(--piedra);
  }
  .familia--ia-desarrollo-propio #desarrollos .ms-cuerpo > .ms-tarjetas {
    grid-column: 1 / -1; margin-top: clamp(1.5rem, 3vw, 2.5rem);
  }
}
.familia--ia-desarrollo-propio #desarrollos .ms-tarjetas { gap: clamp(1rem, 1.8vw, 1.5rem); }
@media (min-width: 48rem) {
  .familia--ia-desarrollo-propio #desarrollos .ms-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .familia--ia-desarrollo-propio #desarrollos .ms-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.familia--ia-desarrollo-propio #desarrollos .ms-tarjeta {
  position: relative; background: #FBF9F3; border-color: rgba(25,23,19,.1);
  transition: transform .35s var(--curva), box-shadow .35s var(--curva), border-color .2s;
}
.familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:hover {
  transform: translateY(-4px); border-color: rgba(25,23,19,.22);
  box-shadow: 0 24px 48px -28px rgba(25,23,19,.45);
}
/* La foto, con un filo amarillo que se alarga al pasar por encima. */
.familia--ia-desarrollo-propio #desarrollos .ms-tarjeta__media {
  position: relative; overflow: hidden; background: var(--piedra);
}
.familia--ia-desarrollo-propio #desarrollos .ms-tarjeta__media img { transition: transform .8s var(--curva); }
.familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:hover .ms-tarjeta__media img { transform: scale(1.04); }
.familia--ia-desarrollo-propio #desarrollos .ms-tarjeta__media::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 2.5rem;
  background: var(--acento); transition: width .5s var(--curva);
}
.familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:hover .ms-tarjeta__media::after { width: 100%; }
/* «Nueva generación» y «New»: una etiqueta amarilla sobre la foto. */
.familia--ia-desarrollo-propio #desarrollos .ms-tarjeta__etiqueta {
  position: absolute; z-index: 1; top: .9rem; left: .9rem;
  padding: .35rem .6rem; background: var(--acento); color: var(--acento-texto);
  text-transform: uppercase; font-size: .6rem;
}
.familia--ia-desarrollo-propio #desarrollos .ms-tarjeta__titulo {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem); margin-top: .3rem;
}
/* El claim en negrita hace de subtítulo. */
.familia--ia-desarrollo-propio #desarrollos .ms-tarjeta__texto:first-of-type strong {
  font-family: var(--fuente-display); font-weight: 600; letter-spacing: -.01em;
}
/* La destacada: oscura, con la foto a la izquierda y el texto a la derecha. */
@media (min-width: 48rem) {
  .familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:first-child {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-content: start; column-gap: clamp(1.5rem, 3vw, 2.75rem); row-gap: .7rem;
    background: var(--piedra); color: var(--crema); border-color: var(--piedra);
  }
  .familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:first-child > * { grid-column: 2; }
  .familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:first-child .ms-tarjeta__media {
    grid-column: 1; grid-row: 1 / span 8;
    margin: calc(-1 * clamp(1.25rem, 2.2vw, 1.75rem)); margin-right: 0;
  }
  .familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:first-child .ms-tarjeta__media img {
    height: 100%; min-height: 20rem; aspect-ratio: auto;
  }
  .familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:first-child .ms-tarjeta__titulo {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-top: clamp(.5rem, 2vw, 1.5rem);
  }
  .familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:first-child .ms-tarjeta__texto { color: rgba(244,240,230,.78); }
  .familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:first-child .ms-tarjeta__texto strong { color: var(--crema); }
  .familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:first-child .ms-tarjeta__texto:first-of-type { font-size: 1.1rem; }
  .familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:first-child .ms-tarjeta__enlace { color: var(--acento); }
}

/* --- Del vídeo a la información: la cadena como diagrama ------------------- */
/* Cuatro pasos numerados; el segundo, los desarrollos de F.F. Videosistemas,
   en amarillo: es el paso que pone la casa. */
.familia--ia-desarrollo-propio .ms-flujo { padding: clamp(1.5rem, 3vw, 2.5rem); }
.familia--ia-desarrollo-propio .ms-flujo__pasos {
  counter-reset: ia-paso; display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.familia--ia-desarrollo-propio .ms-flujo__pasos li {
  counter-increment: ia-paso; position: relative;
  display: flex; flex-direction: column; align-items: stretch; gap: .6rem;
}
.familia--ia-desarrollo-propio .ms-flujo__pasos li::before {
  content: counter(ia-paso, decimal-leading-zero);
  font-family: var(--fuente-texto); font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  color: var(--acento);
}
.familia--ia-desarrollo-propio .ms-flujo__pasos li:not(:last-child)::after {
  content: "↓"; padding: 0 0 0 1rem; font-size: 1.1rem; line-height: 1;
}
.familia--ia-desarrollo-propio .ms-flujo__paso {
  display: flex; align-items: center; min-height: 4.5rem; flex: 1;
  padding: 1rem 1.1rem; border: 1px solid var(--borde-fuerte);
  font-size: .72rem; line-height: 1.45; white-space: normal;
}
.familia--ia-desarrollo-propio .ms-flujo__pasos li:nth-child(2) .ms-flujo__paso {
  background: var(--acento); border-color: var(--acento); color: var(--acento-texto);
}
.familia--ia-desarrollo-propio .ms-flujo__pasos li:last-child .ms-flujo__paso {
  border-color: var(--crema); color: var(--crema);
}
@media (min-width: 48rem) {
  .familia--ia-desarrollo-propio .ms-flujo__pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
  .familia--ia-desarrollo-propio .ms-flujo__pasos li:not(:last-child)::after {
    /* A media altura del recuadro, que empieza debajo del número. */
    content: "→"; position: absolute; right: -1.3rem; top: calc(50% + .7rem); padding: 0;
    width: 1rem; text-align: center; transform: translateY(-50%);
  }
}

/* --- Diferentes necesidades: un panel por necesidad ------------------------ */
/* Con `>`: cada subapartado lleva dentro su propio .ms-cuerpo. */
.familia--ia-desarrollo-propio #necesidades > .contenedor > .ms-cuerpo {
  counter-reset: ia-nec; display: grid; gap: clamp(1rem, 1.8vw, 1.5rem);
}
@media (min-width: 48rem) {
  .familia--ia-desarrollo-propio #necesidades > .contenedor > .ms-cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .familia--ia-desarrollo-propio #necesidades > .contenedor > .ms-cuerpo > .ms-sub:last-child { grid-column: 1 / -1; }
}
.familia--ia-desarrollo-propio #necesidades > .contenedor > .ms-cuerpo > .ms-sub,
.familia--ia-desarrollo-propio #necesidades > .contenedor > .ms-cuerpo > .ms-sub + .ms-sub {
  counter-increment: ia-nec; margin: 0; align-content: start;
  padding: clamp(1.25rem, 2.2vw, 1.75rem); background: #FBF9F3;
  border: 1px solid rgba(25,23,19,.1); border-top: 3px solid var(--piedra);
}
.familia--ia-desarrollo-propio #necesidades .ms-sub__titulo::before {
  content: counter(ia-nec, decimal-leading-zero); display: block; margin-bottom: .6rem;
  font-family: var(--fuente-texto); font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  color: var(--gris-crema);
}
.familia--ia-desarrollo-propio #necesidades .ms-defs { border-top: 0; margin: 0; }
.familia--ia-desarrollo-propio #necesidades .ms-def {
  grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: .8rem 0 0; border-bottom: 0;
}
.familia--ia-desarrollo-propio #necesidades .ms-def + .ms-def {
  border-top: 1px solid rgba(25,23,19,.1); margin-top: .8rem;
}
.familia--ia-desarrollo-propio #necesidades .ms-def dt { font-size: .92rem; }

/* --- ¿Por qué desarrollo propio?: cinco razones numeradas ------------------ */
/* Dos arriba y tres abajo, en una rejilla de seis: con auto-fit quedaban
   tres y dos, con un hueco al final. */
.familia--ia-desarrollo-propio #por-que-desarrollo-propio .ms-tarjetas { counter-reset: ia-razon; }
.familia--ia-desarrollo-propio #por-que-desarrollo-propio .ms-tarjeta {
  counter-increment: ia-razon; background: #FBF9F3; border-color: rgba(25,23,19,.1);
}
.familia--ia-desarrollo-propio #por-que-desarrollo-propio .ms-tarjeta::before {
  content: counter(ia-razon, decimal-leading-zero);
  align-self: flex-start; padding-bottom: .7rem; margin-bottom: .3rem;
  border-bottom: 3px solid var(--acento);
  font-family: var(--fuente-display); font-weight: 700; font-size: 2.2rem; line-height: 1;
  letter-spacing: -.04em; color: var(--piedra);
}
@media (min-width: 48rem) {
  .familia--ia-desarrollo-propio #por-que-desarrollo-propio .ms-tarjetas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .familia--ia-desarrollo-propio #por-que-desarrollo-propio .ms-tarjeta { grid-column: span 2; }
  .familia--ia-desarrollo-propio #por-que-desarrollo-propio .ms-tarjeta:nth-child(-n+2) { grid-column: span 3; }
}

@media (prefers-reduced-motion: reduce) {
  .familia--ia-desarrollo-propio #desarrollos :is(.ms-tarjeta, .ms-tarjeta__media img, .ms-tarjeta__media::after) { transition: none; }
  .familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:hover { transform: none; }
  .familia--ia-desarrollo-propio #desarrollos .ms-tarjeta:hover .ms-tarjeta__media img { transform: none; }
}

/* === Revisión 9/10: visual === */

/* Formación: el logo de Geutebrück va arriba a la derecha de la cabecera
   (.seccion__cabecera > .apertura-marca), a la altura del titular. Entre
   45 y 80rem (721-1279 px) «FORMACIÓN Y CERTIFICACIÓN» llega hasta él y se
   montaban; por debajo de 45rem ya iba encima del titular. Ahora también
   hasta 80rem, el mismo corte que la hamburguesa; desde ahí, con la cabecera
   ancha, le quedan 35 px o más. */
@media (max-width: 79.99rem) {
  .seccion__cabecera > .apertura-marca {
    position: static; transform: none; display: block; margin-bottom: 1.25rem;
  }
}

/* Área privada en el menú de la hamburguesa: por debajo de 80rem el enlace
   de la cabecera (.cabecera__acceso) se oculta (base.css, MÓVIL) y no
   quedaba otra forma de llegar al área privada. En escritorio sobra. */
.nav__item--acceso { display: none; }
@media (max-width: 79.99rem) {
  .nav__item--acceso { display: block; }
}