/* ============================================================
   DYRECO · Dirección C — NAVE
   p-empresa.css — lo que es SOLO de Sobre nosotros (empresa.html)
   ------------------------------------------------------------
   Se carga DESPUÉS de estilos.css. Los mecanismos compartidos
   (fichas arrastrables, reveals, parallax, contadores, campos,
   microinteracciones) viven en estilos.css §21-26 y en main.js:
   aquí solo va la COMPOSICIÓN de esta página y su transición de
   sección propia (§9 · .sec--porton).

   Índice
     1 Tokens propios
     2 Portada de reportaje + cifras
     3 Línea de tiempo vertical  (la pieza de la página)
     4 Capítulos de división con índice pegajoso
     5 Equipo — la plantilla a sangre
     6 Instalaciones y tiendas
     7 Proveedor integral
     8 FAQ — la tira de notas al pie
     9 TRANSICIÓN DE SECCIÓN PROPIA · el portón (.sec--porton)
    10 Sin JS · 11 prefers-reduced-motion
    12 Impresión — el `break-inside` que se pierde al renombrar `hito`
   ============================================================ */

/* ============================================================
   1 · TOKENS PROPIOS
   ============================================================ */

:root {
  /* El titular de esta página NO vive dentro de un hero de 100dvh, así que no
     puede usar --fs-h1: aquel clamp conoce el ALTO de la ventana (10.5dvh) para
     no desbordar el hero, y aquí eso solo consigue que el titular encoja en un
     portátil bajo sin ninguna razón. Este solo depende del ancho. */
  --fs-port: clamp(2.4rem, 5.9vw, 5.5rem);

  /* Las cifras van dentro de una tarjeta de 4 columnas más estrecha que la
     banda de la Home: "12.000" a --fs-cifra (92 px) no cabe en la celda. */
  --fs-cifra-emp: clamp(2.35rem, 4.4vw, 4.25rem);

  /* Hueco entre las dos columnas de la línea de tiempo. Es un token porque la
     posición del punto de cada hito se calcula con él (la mitad del hueco). */
  --eje-hueco: clamp(56px, 7vw, 120px);
}


/* ============================================================
   2 · PORTADA DE REPORTAJE
   ------------------------------------------------------------
   No hay hero: hay portada. Como esta página no tiene .hero, el
   guardia de main.js deja la cabecera SÓLIDA desde el primer píxel
   (hero === null → solida = true), así que basta con reservar su
   alto arriba del todo.
   ============================================================ */

.port {
  position: relative;
  padding-top: calc(var(--alto-cab) + clamp(28px, 4.5vw, 76px));
  /* La historia ya abre con su propio --sec-y: dos seguidos dejaban 300 px de
     nada entre la tarjeta de cifras y el primer titular. */
  padding-bottom: calc(var(--sec-y) * .55);
}

.port__h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-port);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--texto);
  max-width: 21ch;
  text-wrap: balance;
  margin-bottom: var(--bloque);
}

/* Entradilla a dos columnas: el texto largo a la izquierda y la ficha del
   reportaje (razón social, divisiones, teléfono) a la derecha. */
.port__intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gap) clamp(32px, 6vw, 120px);
  align-items: start;
}
.port__entrada {
  color: var(--apagado);
  max-width: var(--medida);
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
}
/* (Aquí vivían `.port__meta li` y `.port__meta-t`, la ficha de datos del
   hero —razón social, divisiones y teléfono—. El cliente la retiró el
   8-sep-2026 junto con la llamada, y se van con ella.) */


/* Banda a sangre.
   ⚠️ NI `aspect-ratio` NI `max-height` AQUÍ, y menos los dos juntos. Con
   `aspect-ratio: 21/9; max-height: min(560px,58dvh)` Chrome recortaba la altura
   a 551 px y le DEVOLVÍA la proporción al ancho: la banda medía 1.286 px en una
   ventana de 1.440 y dejaba 154 px de fondo pelado a la derecha — una banda «a
   sangre» que no llegaba al borde (medido con getBoundingClientRect). Es el
   mismo mecanismo que ya avisaba el comentario de `min-height`, pero por el
   otro extremo. La solución es no dejar que la proporción decida NADA: el alto
   se declara a pelo en `vw`, que además lo hace predecible para el `sizes` del
   HTML (el ancho pintado depende del alto, no al revés).
   Los 40 px del sumando son el sobreancho de parallax de `.media--banda`. */
.port__banda {
  position: relative;
  overflow: hidden;
  margin-top: clamp(36px, 4.5vw, 72px);
  height: min(42.86vw, 560px, 58dvh);   /* 21:9 hasta el tope de 560 */
}

/* La tarjeta de cifras monta sobre el borde inferior de la banda: es el gesto
   de revista que empalma portada y cuerpo. En móvil el solape desaparece
   (la tarjeta es casi tan alta como la banda y taparía la foto entera). */
.port__pie { position: relative; z-index: 2; margin-top: clamp(-104px, -6vw, -28px); }

.cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--sup);
  border: 1px solid var(--linea);
  border-top: 2px solid var(--amarillo);
  border-radius: var(--radio);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.cifra {
  padding: clamp(22px, 2.2vw, 38px);
  border-left: 1px solid var(--linea);
}
.cifra:first-child { border-left: 0; }
.cifra__d {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-cifra-emp);
  line-height: .9;
  letter-spacing: var(--ls-display);
  color: var(--amarillo);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.cifra__l {
  display: block;
  font-size: var(--fs-sm);
  line-height: var(--lh-corto);
  color: var(--apagado);
  max-width: 20ch;
}

@media (max-width: 1024px) {
  .port__intro { grid-template-columns: 1fr; gap: var(--bloque); }
}
@media (max-width: 900px) {
  .port__banda { height: min(56.25vw, 62dvh); }   /* 16:9 */
  .port__pie { margin-top: clamp(-40px, -3vw, -16px); }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra:nth-child(odd) { border-left: 0; }
  .cifra:nth-child(n+3) { border-top: 1px solid var(--linea); }
}
/* En móvil la banda se cuadra un poco (3:2): a 16/9 se quedaba en 219 px de
   alto y la nave no se reconocía. */
@media (max-width: 560px) {
  .port__banda { height: min(66.67vw, 58dvh); }   /* 3:2 */
}
@media (max-width: 420px) {
  .cifra { padding: 18px 16px; }
}


/* ============================================================
   3 · LA HISTORIA — LÍNEA DE TIEMPO VERTICAL
   ------------------------------------------------------------
   La pieza propia de esta página. Eje de 2 px que se rellena de
   amarillo con el scroll (js/p-empresa.js) y seis hitos en zigzag
   que se encienden al pasar por el centro de la pantalla. Las fotos
   llevan parallax con signo alterno, así que las dos columnas no
   viajan a la misma velocidad.

   ⚠️ SE LLAMABA `hito`, Y ESE NOMBRE ESTABA COGIDO. estilos.css §29-I lo tiene
   fichado: `hito, hito__*` lo usaban empresa Y presupuesto con dos
   implementaciones distintas (aquí un ítem de línea de tiempo con punto sobre
   un eje; allí un paso con filete `::before` y cuña amarilla `::after`). Hoy no
   choca porque cada página carga solo su hoja, pero el volcado a Odoo mete los
   assets en un bundle y ahí la última en cargar se come a la otra — es la misma
   bomba que `sec--cortina`. Renombrado a `hito-empresa` según la regla de §29
   (la página dentro del nombre). Este lado ya no colisiona haga lo que haga
   presupuesto.html.
   ⚠️ El renombrado tiene una consecuencia que §29 avisa por escrito: la hoja de
   impresión COMPARTIDA (estilos.css §28) cita `.hito` en su
   `break-inside: avoid`. Como estilos.css no se toca desde aquí, la regla de
   impresión se repone al final de esta hoja (§12) con el nombre nuevo.
   ============================================================ */

.linea { padding-block: var(--sec-y); }
.linea__cab { margin-bottom: clamp(48px, 6vw, 96px); }

.linea__marco { position: relative; }

.linea__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--eje-hueco);
  row-gap: clamp(36px, 4vw, 72px);
}

/* El eje. Va por detrás de los hitos y sus extremos se difuminan para que no
   arranque ni acabe en corte seco. */
.linea__eje {
  position: absolute;
  top: 6px; bottom: 6px;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: var(--linea);
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 3%, #000 96%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 3%, #000 96%, transparent);
}
.linea__eje span {
  display: block;
  width: 100%; height: 100%;
  background: var(--amarillo);
  transform-origin: top;
  transform: scaleY(1);          /* sin JS, el eje se ve entero y quieto */
  will-change: transform;
}
/* Con JS el eje nace vacío y lo rellena el scroll. Si main.js no llega a
   ejecutarse, el sellado del <head> devuelve el eje completo a los 2.500 ms. */
html.js:not(.reveals-sellados) .linea__eje span { transform: scaleY(0); }

.hito-empresa { position: relative; z-index: 1; }
.hito-empresa:nth-child(odd)  { grid-column: 1; }
/* El desplazamiento de la columna derecha va HACIA ABAJO, nunca hacia arriba:
   los hitos se auto-colocan de dos en dos por fila, así que un margen NEGATIVO
   saca al primer par de la lista y le monta la foto encima de la entradilla de
   la sección. Medido a 1440: −129 px, justo encima del texto. */
.hito-empresa:nth-child(even) { grid-column: 2; margin-top: clamp(40px, 7vw, 116px); }

/* El punto se apoya en el eje: media caja de hueco más medio punto. */
.hito-empresa__punto {
  position: absolute;
  top: 10px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--fondo);
  border: 2px solid var(--linea-alta);
  transition: border-color 620ms var(--ease), background 620ms var(--ease), box-shadow 620ms var(--ease);
}
.hito-empresa:nth-child(odd) .hito-empresa__punto  { right: calc(var(--eje-hueco) / -2 - 7.5px); }
.hito-empresa:nth-child(even) .hito-empresa__punto { left:  calc(var(--eje-hueco) / -2 - 7.5px); }
.hito-empresa.is-pasado .hito-empresa__punto {
  border-color: var(--amarillo);
  background: var(--amarillo);
  box-shadow: 0 0 0 6px var(--am-10);
}

.hito-empresa__media { aspect-ratio: 4 / 3; margin-bottom: 20px; }
.hito-empresa:hover .hito-empresa__media img { transform: scale(1.05); }

.hito-empresa__meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-top: 1px solid var(--linea);
  padding-top: 14px;
  margin-bottom: 12px;
  transition: border-color 620ms var(--ease);
}
.hito-empresa.is-pasado .hito-empresa__meta { border-color: var(--am-30); }
.hito-empresa__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  color: var(--amarillo);
}
.hito-empresa__tag {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--texto);
}
.hito-empresa__tag--suave { color: var(--apagado); }
/* ⚠️ `text-wrap: balance` NO ES COSMÉTICA AQUÍ. Reconstruyendo las líneas
   palabra a palabra con `Range.getBoundingClientRect()`, los tres titulares de
   la línea de tiempo terminaban con UNA sola palabra en la última línea en las
   25 ventanas de la matriz, sin excepción: no es un ancho suelto, es la medida.
   `balance` reparte las líneas y quita la viuda sin tocar el copy —que es Lorem
   y va a cambiar— ni la medida de 20ch, que es la que da el ritmo del bloque.
   Con el copy real hay que volver a pasar la sonda de viudas: esto arregla la
   MEDIDA, no la palabra. */
.hito-empresa__t {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.06;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-bottom: 10px;
  max-width: 20ch;
  text-wrap: balance;
}
.hito-empresa__p { font-size: var(--fs-sm); line-height: 1.66; color: var(--apagado); max-width: 46ch; }

/* Una sola columna: el eje se va al margen izquierdo y los seis hitos cuelgan
   de él en orden. El zigzag deja de caber por debajo de 1024: a 915 px (un
   móvil apaisado) las dos columnas se quedan en 352 px y la foto no se lee. */
@media (max-width: 1024px) {
  .linea__lista {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 36px;
    row-gap: clamp(34px, 6vw, 56px);
  }
  .hito-empresa:nth-child(odd),
  .hito-empresa:nth-child(even) { grid-column: 1; margin-top: 0; }
  .hito-empresa:nth-child(odd) .hito-empresa__punto,
  .hito-empresa:nth-child(even) .hito-empresa__punto { left: -36px; right: auto; }
  .linea__eje { left: 0; transform: translateX(6.5px); }
}

/* Tablet y apaisado (561–1024): a una columna la foto se comía 560 px de alto y el texto
   se quedaba en una franja de 46 caracteres con medio ancho vacío al lado.
   El hito se parte en foto vertical + texto, que es la proporción de un
   reportaje impreso. */
@media (min-width: 561px) and (max-width: 1024px) {
  .hito-empresa__caja {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    /* El sobrante de alto que deja la foto (que ocupa las tres filas) va ENTERO
       a la última fila. Con las tres en `auto` se repartía a partes iguales y
       abría dos huecos absurdos entre el número, el titular y el texto. */
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(18px, 3vw, 32px);
    align-items: start;
  }
  .hito-empresa__media {
    grid-column: 1; grid-row: 1 / span 3;
    aspect-ratio: 3 / 4;
    margin-bottom: 0;
  }
  .hito-empresa__meta { grid-column: 2; grid-row: 1; margin-top: -4px; }
  .hito-empresa__t    { grid-column: 2; grid-row: 2; }
  .hito-empresa__p    { grid-column: 2; grid-row: 3; }
}


/* ============================================================
   4 · LAS 4 DIVISIONES COMO CAPÍTULOS
   ------------------------------------------------------------
   Sin fotos —las fotos de cada división están en su página— y con
   índice pegajoso que marca por dónde va el lector. Las cuatro con
   la misma retícula: el requisito del cliente es que pesen igual.
   ============================================================ */

.caps { padding-block: var(--sec-y); border-top: 1px solid var(--linea); }

.caps__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

.caps__indice { position: sticky; top: calc(var(--alto-cab) + 40px); }
.caps__indice-t {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 14px;
}
/* ⚠️ `li a` Y NO `a` A SECAS. Dentro de este <nav> hay dos cosas distintas: los
   enlaces del índice, que van todos en <li>, y el CTA amarillo, que cuelga
   directamente del <nav>. `.caps__indice a` (0,1,1) alcanzaba también al CTA y,
   como esta hoja carga después de estilos.css, le ganaba a `.btn--luz` (0,1,0)
   en TODO: le imponía `color: var(--apagado)` sobre el amarillo (2,76:1) y
   `var(--texto)` al pasar el ratón (1,08:1 — el contrato de C·NAVE dice «sobre
   el botón amarillo el texto va casi negro, nunca blanco»); le anulaba el
   `display:none` con el que se le retira por debajo de 1024 (aparecía como una
   losa amarilla al 90 % del ancho, y el amarillo no rellena superficies); y de
   paso le cambiaba alto, cuerpo, interletraje, alineación y relleno, así que ni
   siquiera se parecía al resto de botones del sitio. Acotando el selector a los
   <li> desaparecen los cuatro defectos de una vez y sin un solo !important. */
.caps__indice li a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 48px;
  padding: 13px 4px 13px 0;
  border-top: 1px solid var(--linea);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--apagado);
  transition: color 420ms var(--ease), padding-left 420ms var(--ease);
}
.caps__indice li a span {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--amarillo);
  opacity: .5;
  transition: opacity 420ms var(--ease);
}
.caps__indice li a::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: 2px; background: var(--amarillo);
  transform: scaleX(0) skewX(-30deg);
  transform-origin: left;
  transition: transform 620ms var(--ease-suave);
}
.caps__indice li a:hover { color: var(--texto); padding-left: 6px; }
.caps__indice li.is-activo a { color: var(--texto); }
.caps__indice li.is-activo a::after { transform: scaleX(1) skewX(-30deg); }
.caps__indice li.is-activo a span { opacity: 1; }
.caps__indice-cta { margin-top: var(--pieza); width: 100%; }

.cap {
  /* El índice salta a cada capítulo por ancla: el filete superior no puede
     quedarse debajo de la cabecera fija. */
  scroll-margin-top: calc(var(--alto-cab) + 32px);
  display: grid;
  grid-template-columns: clamp(74px, 8vw, 148px) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 44px);
  padding-block: clamp(34px, 4vw, 68px);
  border-top: 1px solid var(--linea);
  transition: border-color 620ms var(--ease);
}
.cap:first-child { padding-top: 0; border-top: 0; }
.cap:hover { border-color: var(--linea-alta); }

/* Ordinal en hueco: el número es arquitectura del capítulo, no un adorno con
   peso de titular. El relleno sólido es el respaldo si no hay text-stroke. */
.cap__ord {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.25rem, 6.6vw, 6.5rem);
  line-height: .78;
  letter-spacing: 0;
  color: var(--linea-alta);
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .cap__ord {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--linea-alta);
    transition: -webkit-text-stroke-color 620ms var(--ease);
  }
  .cap:hover .cap__ord { -webkit-text-stroke-color: var(--am-30); }
}

.cap__n { margin-bottom: 12px; }
/* 62ch eran 607 px y 83 caracteres reales. */
.cap__p { max-width: var(--medida); }
.cap__items { margin-bottom: 14px; }

@media (max-width: 1024px) {
  /* minmax(0,1fr) y no 1fr: el ítem de rejilla con `min-width:auto` le pasaba su
     ancho de contenido —602 px— a la columna entera, arrastrando con ella los
     cuatro capítulos. */
  .caps__cuerpo { grid-template-columns: minmax(0, 1fr); gap: var(--bloque); }
  /* El índice deja de ser una columna pegajosa y pasa a ser una tira de
     capítulos: sigue sirviendo para saltar, pero no roba media pantalla. */
  .caps__indice { position: static; min-width: 0; }
  /* ⚠️ NI CARRIL NI BARRA ESCONDIDA. Esto era
     `display:flex; overflow-x:auto; scrollbar-width:none` y el resultado, medido
     en las 30 ventanas de la matriz, era que los cuatro capítulos vivían en una
     tira de 602 px metida en una caja de 272–382: «04 ROTULACIÓN» se quedaba
     FUERA en los seis anchos de móvil vertical (0 px visibles de 136), y a
     320×568 desaparecían dos de los cuatro. Sin degradado, sin flechas y con la
     barra oculta, nada decía que hubiera más. Y las cuatro divisiones tienen que
     aparecer con el mismo peso: es el requisito explícito del cliente
     (comun.md §1), no una preferencia de maqueta.
     Son cuatro entradas fijas y cortas, así que no necesitan carril: rejilla.
     Cuatro columnas mientras el rótulo más largo («03 Uniformidad», 148 px)
     quepa en su celda —a 760 px de ventana la celda mide 166— y 2×2 por debajo,
     donde además se deja que el rótulo parta de línea. */
  .caps__indice ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    gap: var(--gap-s);
  }
  .caps__indice li { min-width: 0; }
  .caps__indice li a { white-space: nowrap; padding-right: 18px; }
  .caps__indice li a:hover { padding-left: 0; }
  .caps__indice-cta { display: none; }   /* el CTA vive en el cierre y en la cabecera */
}
@media (max-width: 760px) {
  .caps__indice ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A dos columnas la celda baja de 148 px: el rótulo parte de línea en vez de
     desbordar. `align-items:baseline` del enlace se mantiene, así que el ordinal
     sigue alineado con la primera línea. */
  .caps__indice li a { white-space: normal; padding-right: 0; }
}
/* A 320 CSS la celda mide 128 px y «Uniformidad» —una palabra que no parte—
   pide 130 con el ordinal al lado: se sale por 2 px (medido). El ordinal sube
   encima del rótulo y le deja la celda entera; de paso queda como el ordinal en
   hueco de los capítulos, que es el mismo gesto. */
@media (max-width: 420px) {
  .caps__indice li a { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 620px) {
  .cap { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cap__ord { font-size: clamp(2.75rem, 15vw, 4rem); }
}


/* ============================================================
   6 · INSTALACIONES Y LAS 3 TIENDAS
   ------------------------------------------------------------
   Banda a sangre del taller con PARALLAX DE DOS CAPAS (fondo 0.14,
   contenido -0.06) y, debajo, las tres fichas de tienda — las mismas
   de la Home, pero aquí cada una con su fotografía.
   ============================================================ */

.insta__banda {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 82dvh;
  display: grid;
  align-items: center;
  padding-block: var(--sec-y);
  border-block: 1px solid var(--linea);
}
.insta__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* Scrim rasante: fuerte donde se apoya el texto (izquierda y bajos), flojo
   arriba a la derecha, que es donde se ve el taller. */
.insta__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14,14,16,.94) 0%, rgba(14,14,16,.80) 46%, rgba(14,14,16,.66) 100%),
    linear-gradient(180deg, rgba(14,14,16,.72) 0%, rgba(14,14,16,.12) 32%, rgba(14,14,16,.24) 66%, rgba(14,14,16,.86) 100%);
}

.insta__cont {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(36px, 4.5vw, 80px) var(--gap);
  align-items: end;
}
.insta__texto { grid-column: 1 / span 6; }
.insta__p {
  margin-top: var(--pieza);
  color: rgba(242,242,240,.92);
  max-width: var(--medida);
  text-shadow: 0 2px 26px rgba(0,0,0,.85);
}
.insta__datos { position: relative; grid-column: 8 / span 5; display: grid; gap: clamp(18px, 2vw, 30px); }
/* Refuerzo local del scrim justo bajo los datos: la mitad derecha del taller es
   la parte más clara de la foto (los hilos blancos). Radial que muere en
   transparente, para que se lea como sombra y no como tarjeta. */
.insta__datos::before {
  content: "";
  position: absolute; inset: -56px -60px; z-index: -1;
  background: radial-gradient(74% 68% at 50% 50%,
    rgba(14,14,16,.56) 0%, rgba(14,14,16,.46) 54%, rgba(14,14,16,.18) 82%, rgba(14,14,16,0) 100%);
  pointer-events: none;
}
.insta__datos li {
  border-top: 1px solid var(--linea-alta);
  padding-top: 16px;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: rgba(242,242,240,.94);
  text-shadow: 0 1px 14px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.7);
  transition: border-color 620ms var(--ease);
}
.insta__datos li:hover { border-color: var(--amarillo); }
.insta__dato {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto);
}

.insta__tiendas { padding-block: var(--sec-y); }
.insta__h3 { max-width: 22ch; }

/* Las fichas de tienda con foto: la imagen manda arriba y el cuerpo hereda la
   ficha de la Home (filete izquierdo amarillo incluido). */
.tienda--foto { padding: 0; overflow: hidden; }
.tienda--foto .tienda__media { aspect-ratio: 16 / 10; border-radius: 0; }
.tienda--foto:hover .tienda__media img { transform: scale(1.05); }
.tienda--foto .tienda__cuerpo { padding: clamp(24px, 2.2vw, 36px); }
.tienda--foto .tienda__n { font-size: var(--fs-h4); margin-bottom: 6px; }
.insta__mas { margin-top: var(--pieza); }

@media (max-width: 1024px) {
  .insta__banda {
    --insta-foto: clamp(200px, 42vw, 340px);
    min-height: 0;
    /* Sitio para la banda de foto que ahora encabeza la sección. */
    padding-top: calc(var(--insta-foto) + clamp(28px, 4vw, 52px));
  }
  .insta__texto, .insta__datos { grid-column: 1 / -1; }
  /* ⚠️ EL FONDO DEJA DE SER FONDO. Con el scrim de móvil (de .86 a .97 de
     opacidad) la foto era un fantasma: no se veía, pero se descargaba, y
     encima con la caja en vertical `cover` tenía que pintarla a 1.800 px de
     ancho para cubrir 390 — ninguna variante daba la densidad. Aquí pasa a ser
     una banda propia en la cabecera de la sección: se ve de verdad, la caja es
     apaisada otra vez y basta con la variante de 800/1280. */
  .insta__fondo { bottom: auto; height: var(--insta-foto); }
  .insta__scrim {
    /* Velo suave sobre la foto y disolución a fondo sólido en el último tercio,
       para que la banda no acabe en un corte seco contra el texto. */
    background: linear-gradient(180deg,
      rgba(14,14,16,.34) 0%, rgba(14,14,16,.30) 46%,
      rgba(14,14,16,.72) 78%, rgba(14,14,16,1) 100%);
  }
  /* el texto ya no va sobre foto: se le quitan sombras y refuerzos */
  .insta__p, .insta__datos li { text-shadow: none; }
  .insta__datos::before { display: none; }
  .insta__datos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .insta__datos { grid-template-columns: 1fr; }
}


/* ============================================================
   7 · PROVEEDOR INTEGRAL
   ------------------------------------------------------------
   Sin foto y sobre --sup: el remate en seco del reportaje. El
   argumento se sostiene con enlazado, así que cada punto termina
   en la página de su división.
   ============================================================ */

.integ {
  padding-block: var(--sec-y);
  background: var(--sup);
  border-block: 1px solid var(--linea);
}
.integ__cont {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
/* ⚠️ AQUÍ HABÍA UN `position:sticky` QUE NO PEGABA NUNCA, y era código muerto.
   Un sticky solo tiene recorrido si su columna es MÁS CORTA que la que scrollea
   a su lado, y aquí pasa lo contrario: medido recorriendo la sección en 16
   posiciones de scroll con `behavior:'instant'`, el `top` del bloque pasa de
   +955 a −691 px sin clavarse ni una vez en su `top` declarado (0/16 en
   1920×1080, 1512×982, 1440×900, 1366×768, 1280×800 y en los portátiles bajos
   1440×600, 1366×650 y 1280×620). Alturas a 1440×900: intro 456 px contra
   puntos 416 → recorrido 0. En el único ancho donde la vecina es más alta
   (1152×720: 430 contra 446) el recorrido son 16 px, que es indistinguible de
   no pegarse. Y no se arregla adelgazando la intro: la sección entera cabe de
   una pantalla, así que no hay nada que fijar. Se quita.
   `align-items:start` de `.integ__cont` es lo que mantiene la composición. */
.integ__p {
  margin-top: var(--pieza);
  color: var(--apagado);
  max-width: var(--medida);
  margin-bottom: clamp(24px, 2.6vw, 36px);
}
.integ__puntos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 3.2vw, 54px) var(--gap);
}
/* .punto está escrito para ir sobre foto (texto casi blanco con sombra). Aquí
   va sobre superficie sólida: se devuelve al color de lectura de la casa. */
.integ .punto__t { text-shadow: none; }
.integ .punto__p { color: var(--apagado); text-shadow: none; }
.integ__n {
  display: block;
  margin-bottom: 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  color: var(--amarillo);
}
.integ__enl {
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
}

/* Los enlaces de texto de esta página son objetivos táctiles de pleno derecho:
   se les da los 44 px de alto por arriba (align-items:flex-end) para que el
   subrayado que se dibuja siga pegado a la línea base y no se despegue 11 px. */
.integ__enl {
  display: inline-flex;
  align-items: flex-end;
  min-height: 44px;
  padding-bottom: 2px;
}

@media (max-width: 1024px) {
  .integ__cont { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .integ__puntos { grid-template-columns: 1fr; gap: 30px; }
}


/* ============================================================
   9 · TRANSICIÓN DE SECCIÓN PROPIA · EL PORTÓN  (.sec--porton)
   ------------------------------------------------------------
   ⚠️ Se llamaba `.sec--cortina`, y ese nombre YA existía en
   css/p-contacto.css con otra implementación (fondo y luz que se
   recolocan, con `isolation`). Hoy no choca porque cada página carga
   solo su hoja, pero el volcado a Odoo mete los assets en un bundle y
   ahí la última en cargar se come a la otra: `overflow: clip` peleando
   con `isolation` en secciones que no son las suyas. Cada página tiene
   su transición CON NOMBRE PROPIO —`sec--regla` (ferretería),
   `sec-cota` (maquinaria), `sec--puntada` (uniformidad), `sec--cinta`
   (rotulación), `sec--telon` (presupuesto)— y ésta es el PORTÓN de la
   nave: el que sube y descubre lo que hay dentro.

   Esta página entra con un PORTÓN: un panel de carbón con el borde inferior
   cortado en diagonal —el ángulo del wordmark— que sube y descubre la
   sección, mientras el contenido se posa desde abajo. Dos tiempos
   distintos (1.200 ms el telón, 1.000 ms el contenido) para que se lea
   como una cortina y no como un bloque.

   Degradación: el telón SOLO existe mientras hay JS y el estado no
   está sellado. Sin JS —o si main.js no llega— no se pinta nunca y la
   sección se ve entera desde el primer píxel. `overflow: clip` (nunca
   `hidden`: rompería los índices pegajosos) impide que el telón se
   salga por arriba y pinte encima de la sección anterior.
   ============================================================ */

.sec--porton { position: relative; overflow: clip; }

/* La sección no se desplaza en bloque: lo que se mueve es el telón. Gana por
   especificidad a la regla de [data-reveal] de estilos.css §01. */
html.js:not(.reveals-sellados) .sec--porton[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

html.js:not(.reveals-sellados) .sec--porton[data-reveal]::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; top: 0;
  height: 101%;
  z-index: 6;
  pointer-events: none;
  background: var(--fondo);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
  transform: translate3d(0, 0, 0);
  transition: transform 1200ms var(--ease-suave);
  will-change: transform;
}
html.js .sec--porton[data-reveal].is-in::after { transform: translate3d(0, -102%, 0); }

html.js:not(.reveals-sellados) .sec--porton[data-reveal] > * {
  transform: translate3d(0, 34px, 0);
  transition: transform 1000ms var(--ease-suave);
}
html.js .sec--porton[data-reveal].is-in > * { transform: none; }


/* ============================================================
   10 · SIN JS
   ============================================================ */

/* El retoque de la cabecera sin JS se movió a estilos.css §05: la cabecera es
   compartida y aquí solo se aplicaba a 1 de las 8 páginas. Abajo se queda lo
   que sí es de esta página. */

/* Sin JS no hay hito «pasado» que marcar: se encienden todos. */
html:not(.js) .hito-empresa__punto {
  border-color: var(--amarillo);
  background: var(--amarillo);
}
html:not(.js) .hito-empresa__meta { border-color: var(--am-30); }


/* ============================================================
   11 · PREFERS-REDUCED-MOTION
   Todo visible y quieto. El telón no se pinta, el eje sale entero,
   los hitos salen encendidos y el zigzag se deshace en una columna
   (una línea de tiempo que no se recorre no necesita zigzag).
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  html.js:not(.reveals-sellados) .sec--porton[data-reveal]::after { display: none; }
  html.js:not(.reveals-sellados) .sec--porton[data-reveal] > *,
  html.js .sec--porton[data-reveal].is-in > * { transform: none !important; }

  .linea__eje span { transform: scaleY(1) !important; }
  .hito-empresa__punto {
    border-color: var(--amarillo) !important;
    background: var(--amarillo) !important;
    box-shadow: none !important;
  }
  .hito-empresa__meta { border-color: var(--am-30); }
  /* ⚠️ La RETÍCULA de la línea de tiempo no se toca aquí: es maquetación, no
     movimiento. Cuando este bloque la pasaba a una columna, las seis fotos
     saltaban a 1.360 px de caja con un `sizes` declarado para 700 y salían
     borrosas. Lo que se apaga es el recorrido, no el zigzag. */

  /* EQUIPO. Aquí ya no hay carrusel que desmontar —la nómina es una lista de
     filas y se lee igual sin movimiento—, así que solo se apaga lo que anima:
     el `sticky` del rótulo (un elemento que se queda quieto mientras el resto
     sube ES movimiento) y el zoom del retrato al pasar por encima. La
     retícula NO se toca: es maquetación, no movimiento. */
  .eq__rail { position: static; }
  .nomina__f:hover .nomina__media img { transform: none !important; }

  .hito-empresa:hover .hito-empresa__media img,
  .tienda--foto:hover .tienda__media img { transform: none !important; }
}


/* ============================================================
   12 · IMPRESIÓN — lo que se pierde al renombrar `hito`
   ------------------------------------------------------------
   estilos.css §28 (hoja de impresión compartida) cita `.hito` por su nombre
   viejo en el `break-inside: avoid` junto a `.tda` y `.fpaso`, y §29 avisa
   expresamente de que quien renombre uno de esos tres tiene que reponer la
   regla. Como estilos.css lo comparten las 8 páginas y no se toca desde aquí,
   se repone en local y con el nombre nuevo: un hito de la línea de tiempo no
   se puede partir entre dos A4.
   ============================================================ */

@media print {
  .hito-empresa { break-inside: avoid; }
}


/* ============================================================
   REMAQUETADO 7-sep-2026 — este tramo va AL FINAL a propósito:
   sustituye por cascada lo que quedaba arriba de la portada, del
   portón y de la medida de lectura, y trae entero lo nuevo.
   ============================================================ */

/* ============================================================
   DYRECO · empresa.html — REMAQUETADO 7-sep-2026
   ------------------------------------------------------------
   Este bloque es EXACTAMENTE lo que hay que trasplantar a
   css/p-empresa.css. Cada apartado dice a qué sustituye.

     A · §2  PORTADA — la retícula de dos columnas de altura común
             (sustituye a `.port__intro` y a las cifras)
     B · §5  EQUIPO — el carril de fichas
             (sustituye ENTERO al §5 «LA NÓMINA», líneas 530-676:
              `.eq`, `.eq__int`, `.eq__cab`, `.eq__t`, `.eq__rail`,
              `.eq__cuenta*`, `.eq__entrada`, `.nomina*` y sus dos
              @media)
     C · §8  FAQ — SE BORRA ENTERO, líneas 878-961. No queda ni
             una @media vacía: los dos bloques `@media` de ese
             tramo (1024 y 620) contienen SOLO reglas `.empfaq`,
             así que desaparecen con él. Comprobado: ningún otro
             selector de p-empresa.css ni de estilos.css cuelga de
             `.empfaq`, y ninguna página enlaza a `#faq`.
     D · §9-§11 EL PORTÓN — se retira `.sec--porton`
     E · Impresión
   ============================================================ */

/* ============================================================
   A · §2 · PORTADA — DOS COLUMNAS DE ALTURA COMÚN
   ------------------------------------------------------------
   EL DEFECTO, MEDIDO. `.port__intro` era una retícula de dos
   columnas que empezaba DEBAJO del kicker y del H1, porque los
   dos eran hermanos suyos y no items suyos. Resultado a 1920 ·
   1440 · 1280 · 1024: la ficha de la derecha arrancaba 323 · 299
   · 266 · 347 px por debajo de la primera línea del titular. Y
   `align-items: start` sobre dos columnas de alto intrínseco
   dejaba 143 · 145 · 118 · 281 px de vacío bajo el párrafo.

   EL ARREGLO ES DE RAÍZ, no un margen a ojo: las CUATRO piezas
   —kicker, titular, ficha y llamada— pasan a ser items de la
   MISMA retícula. La columna derecha ocupa las cuatro filas
   (`grid-row: 1 / -1`), así que empieza donde empieza el kicker
   y termina donde termina el botón, en los siete anchos y sin
   una sola constante.

   Y EL SOBRANTE DEJA DE CAER AL FINAL. Sólo una de las dos
   columnas puede ser la más alta; la otra reparte su holgura en
   UN sitio elegido:
     · izquierda → la fila 3, que es flexible (`1fr`): el aire
       cae entre el titular y la llamada, que es donde un titular
       de portada quiere aire.
     · derecha → `margin-top: auto` en la ficha de datos, que la
       ancla al pie: el aire cae entre entradilla y ficha.
   Con eso los dos bordes —el de arriba y el de abajo— van a
   plomo SIEMPRE, que es literalmente lo que pidió el cliente.
   ============================================================ */

.port__cab {
  display: grid;
  /* La izquierda manda: es la que tiene que dar los 21ch del titular sin
     partirlo en una línea más. El mínimo de 310 px de la derecha es lo que
     necesita la entradilla para no bajar de ~38 caracteres por línea; por
     debajo de 1200 px ya no hay dos columnas que valgan (ver más abajo). */
  grid-template-columns: minmax(0, 1fr) minmax(310px, 29%);
  /* Fila 3 = la holgura de la columna izquierda. El mínimo es el aire que
     separa titular y llamada aunque no sobre nada. */
  /* ⚠️ TRES FILAS DESDE EL 8-sep-2026, no cuatro. La cuarta era la de la
     llamada («Pedir presupuesto»), que el cliente retiró junto con la ficha de
     datos; sin ella la fila seguía reservando su aire y quedaban ~110 px
     muertos entre el titular y la foto. La tercera sigue siendo la flexible:
     es la que reparte lo que sobre cuando la entradilla de la derecha es más
     alta que el titular. */
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(36px, 4.6vw, 96px);
  row-gap: 0;
}
.port__cab > .kicker { grid-column: 1; grid-row: 1; }
.port__h1            { grid-column: 1; grid-row: 2; margin-bottom: 0; }
.port__ficha {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  /* La entradilla se apoya en el PIE de la columna, no en el techo
     (decisión de Juan, 9-sep-2026). Por debajo de 1.200 px la caja pasa a
     `display:block` y esto deja de aplicar: allí va apilada bajo el titular. */
  justify-content: flex-end;
}

/* El titular ya no lleva `margin-bottom`: el hueco lo pone la fila 3, que es
   la que sabe cuánto sobra. `21ch` se queda como TOPE de línea de display —no
   como ancho—: sólo muerde por encima de 1.500 px, donde la columna izquierda
   ya da más de lo que un titular debe medir. */
/* Sin margen inferior en dos columnas: con `justify-content:flex-end` ese
   margen sería un hueco muerto que despega la entradilla del pie. */
.port__entrada { margin-bottom: 0; }

/* --- LAS CIFRAS -------------------------------------------------------
   `grid-auto-flow: column` en vez de `repeat(4, 1fr)`: la tarjeta se
   reparte sola entre las casillas que HAYA. Hoy son tres verificables
   (51 años · 3 tiendas · 4 divisiones); el día que el cliente confirme
   las 12.000 referencias se añade el <li> y no se toca una línea de CSS.
   Con `repeat(4)` la casilla que faltara dejaba un hueco muerto. */
.cifras {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.cifra { border-left: 1px solid var(--linea); border-top: 0; }
.cifra:first-child { border-left: 0; }

@media (max-width: 1200px) {
  /* Una columna. La ficha de datos deja de ser una pila vertical —a 1.120 px
     de ancho tres filas apiladas son una escalera de aire— y pasa a tira de
     tres columnas bajo la entradilla. */
  .port__cab { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .port__cab > .kicker,
  .port__h1,
  .port__ficha { grid-column: 1; grid-row: auto; }
  .port__h1 { margin-bottom: var(--bloque); }
  .port__ficha { display: block; }
  /* A una columna la entradilla se estiraba a la caja entera y llegaba a 85
     caracteres por línea a 1024 y 834, y a 72 a 620. El 48ch que la paraba
     pasa a ser el token que le toca por cuerpo (17-20 px → banda de 16-18),
     como el resto de párrafos de la página. */
  .port__entrada { margin-bottom: var(--bloque); max-width: var(--medida); }
}
@media (max-width: 900px) {
  /* Aquí estaba el `repeat(2)` de las cifras, que con tres casillas dejaba
     una huérfana. Se mantienen las tres en fila —son tres números cortos— y
     el reparto sigue siendo automático.
     ⚠️ Y HAY QUE DESHACER LOS FILETES DE AQUEL `repeat(2)`, no solo su
     retícula. `.cifra:nth-child(odd) { border-left: 0 }` y
     `.cifra:nth-child(n+3) { border-top: 1px }` seguían casando, así que
     entre 621 y 900 px la tercera casilla se quedaba SIN separador y con un
     filete horizontal encima que además le bajaba el número 1 px respecto de
     sus hermanas. Medido y visto a 834. */
  .cifra { padding: clamp(18px, 2.2vw, 30px) clamp(14px, 1.8vw, 24px); }
  .cifra:nth-child(odd) { border-left: 1px solid var(--linea); }
  .cifra:first-child { border-left: 0; }
  .cifra:nth-child(n+3) { border-top: 0; }
}
@media (max-width: 700px) {
}
@media (max-width: 620px) {
  /* Dos por fila y la última a todo el ancho. La regla vale igual para tres
     casillas (2 + 1 ancha) que para cuatro (2 + 2), sin tocar nada. */
  .cifras { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra { border-left: 0; }
  .cifra:nth-child(even) { border-left: 1px solid var(--linea); }
  .cifra:nth-child(n+3) { border-top: 1px solid var(--linea); }
  /* La que cruza no lleva filete izquierdo: sería una raya vertical suelta
     contra el borde de la tarjeta. */
  .cifra:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; }
}


/* ============================================================
   B · §5 · EQUIPO — EL CARRIL DE LAS DIEZ FICHAS
   ------------------------------------------------------------
   Sustituye ENTERO al §5 «LA NÓMINA» (líneas 530-676 de
   p-empresa.css): `.eq`, `.eq__int`, `.eq__cab`, `.eq__t`,
   `.eq__rail`, `.eq__cuenta*`, `.eq__entrada`, toda la familia
   `.nomina*` y sus dos @media (1024 y 700).

   Se reusa el mecanismo nº 2 —`.fichas` / `[data-fichas]`,
   estilos.css §21— y aquí sólo se AJUSTA en su contexto, que es
   lo que §29 H autoriza para `--ficha-an`. Ni main.js ni
   estilos.css se tocan.

   NOMBRES NUEVOS, comprobados contra §29 A/B/C/I y con
   `grep -ohE '\.(eq-riel|eq-carta|carta|riel)[a-z0-9_-]*' css/*.css`
   antes de bautizar (cero coincidencias):
     .eq-riel · .eq-riel__pista · .eq-riel__ui · .eq-riel__cuenta*
     .eq-carta · .eq-carta__media · .eq-carta__n · .eq-carta__nombre
     .eq-carta__puesto
   Llevan el prefijo de la página, como manda la REGLA de §29.
   ============================================================ */

/* La sección ya no declara filete propio: la costura de arriba la dibuja
   `sec-cota` (§34) y dos líneas en la misma costura se leen como una doble. */
.eq { border-top: 0; }
/* `.eq__int` era la retícula de dos columnas (rótulo fijo + nómina). Aquí el
   carril tiene que poder sangrar hasta el borde de la ventana, y una columna
   de 396 px al lado se lo impedía. */
.eq__int { display: block; }
.eq__cab { margin-bottom: clamp(36px, 4vw, 64px); }
.eq__t { max-width: 26ch; }


/* ------------------------------------------------------------
   EL CARRIL
   ------------------------------------------------------------
   🔴 `--ficha-an` NO ES UNA ELECCIÓN DE MAQUETA: es la foto.
   Los diez retratos son ficheros de 400×400 y sus originales
   (_material/fotos/personal/) son 800×400 apaisados —lado corto
   400—, así que no hay ni retrato vertical ni variante mayor.
   Con `object-fit: cover` la caja CUADRADA es la que menos
   amplía: sobre un fichero 1:1 cubre por ancho y pinta
   exactamente el ancho de la caja (una caja 4/5 tendría que
   pintar un 25 % más de ancho para el mismo alto, y una 16/10
   pinta lo mismo pero enseña menos cara). Y la densidad a 2x es
       400 / (ancho pintado × 2)
   así que el ancho pintado no puede pasar de 200 px.
   196 px → 1,02. Lo que cambia con la ventana es el NÚMERO de
   fichas a la vista, no el tamaño de la tarjeta:
   7 a 1920 · 5 a 1440 · 5 a 1280 · 4 a 1024 · 3 a 834 · 2 a 620
   · 1 a 390, y en los siete asoma la siguiente. */
.eq-riel { --ficha-an: 196px; }

/* §21 rellena la pista para poder CENTRAR la primera ficha (es el carril de
   la Home, donde el foco está en el centro). Aquí las diez valen lo mismo y
   la primera arranca a plomo con el titular, o sea a `--gutter`. Y con el
   relleno hay que mover también el encaje: sin `scroll-padding` el snap
   alinearía la ficha con el borde de la VENTANA y se comería el margen. */
.eq-riel__pista {
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  /* Los 28/34 px de §21 eran el aire de la ficha central elevada, que aquí no
     existe; quedan 6 px por abajo para que el filete del pie no toque el
     borde de recorte del carril. */
  padding-block: 0 6px;
}
/* El anillo de foco es global (§00, +3 px de separación). En una pista que
   sangra hasta el borde de la ventana ese anillo se dibujaría fuera de
   pantalla: aquí va por dentro. */
.eq-riel__pista:focus-visible { outline-offset: -3px; }

/* LA FICHA DEL SISTEMA, APAGADA. §21 pinta tarjeta gris con filete, las
   laterales al 48 % de opacidad y sin saturación, y la central elevada. Eso
   es una vitrina con un protagonista, y aquí no hay protagonista: son las
   diez personas de la casa y valen lo mismo — el mismo argumento que ya
   sostenía la nómina («aquí están los diez y están los diez igual»). Con
   cinco a la vista, además, ocho de cada diez caras se veían lavadas.
   El JS sigue marcando `is-centro` y no pinta nada: no hace falta tocarlo. */
.eq-riel .ficha {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  opacity: 1;
  filter: none;
  transform: none;
  box-shadow: none;
  scroll-snap-align: start;
}
.eq-riel .ficha.is-centro {
  background: none;
  box-shadow: none;
  transform: none;
  border-top-color: transparent;
}
/* ⚠️ LA ÚLTIMA FICHA ENCAJA POR SU FINAL. Con `scroll-snap-type: x mandatory`
   el navegador sólo descansa en un punto de encaje ALCANZABLE, y los puntos
   de inicio de las últimas fichas caen más allá del recorrido máximo: con
   sólo `start` el carril rebotaba y las dos últimas personas no se podían
   dejar a la vista. Mismo arreglo que en rotulacion.html #proceso. */
.eq-riel .ficha:last-child { scroll-snap-align: end; }


/* ------------------------------------------------------------
   LA TARJETA · la foto arriba, el nombre y el puesto debajo
   ------------------------------------------------------------ */
.eq-carta__media { aspect-ratio: 1 / 1; }
/* Misma razón que en `.serv__media`: la <img> sale del flujo para que el alto
   de la caja lo fije la proporción y no la altura intrínseca del fichero. */
.eq-carta__media img { position: absolute; inset: 0; }
.eq-carta:hover .eq-carta__media img { transform: scale(1.04); }

.eq-carta__pie {
  margin-top: clamp(12px, 1.2vw, 18px);
  padding-top: clamp(11px, 1vw, 15px);
  /* `--linea-alta` y no `--linea`: sobre el carbón del fondo el filete normal
     se pierde, y este filete es lo que separa la cara del nombre. */
  border-top: 1px solid var(--linea-alta);
  transition: border-color 620ms var(--ease);
}
.eq-carta:hover .eq-carta__pie { border-color: var(--am-30); }

.eq-carta__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: .6875rem;
  line-height: 1;
  letter-spacing: .18em;
  color: var(--amarillo);
  opacity: .75;
  margin-bottom: 9px;
  font-variant-numeric: tabular-nums;
}
.eq-carta__nombre {
  font-family: var(--display);
  font-weight: 800;
  /* No sube más: la tarjeta mide 196 px fijos y un nombre real de dos palabras
     («Bernardino Isern») tiene que caber en dos líneas, no en tres. */
  font-size: clamp(1.0625rem, 1.28vw, 1.3125rem);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--texto);
}
.eq-carta__puesto {
  margin-top: 5px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--apagado);
  max-width: none;
}


/* ------------------------------------------------------------
   LA FILA DE MANDOS · la cifra, la ayuda y las flechas
   ------------------------------------------------------------
   `.fichas__ui` (§21) ya es un flex con `space-between` y las flechas
   ancladas a la derecha; aquí sólo entra una pieza más por la izquierda:
   la cifra «10», que era la columna de rótulo de la nómina. En un carril
   es el dato que hace falta —cuántas fichas hay— y que el propio carril
   esconde. */
.eq-riel__ui { margin-top: clamp(18px, 1.8vw, 28px); }
/* ⚠️ LA HOLGURA SE REPARTE UNA VEZ, Y HAY QUE DECIDIR DÓNDE. `.fichas__ui`
   (§21) es un flex con `space-between` y `.fichas__flechas` lleva
   `margin-left: auto`; un margen auto se lleva TODO el sobrante antes de que
   `space-between` reparta nada, así que con tres piezas la cifra y la ayuda
   quedaban amontonadas a la izquierda. Y con el `auto` en las dos, el
   sobrante se parte en mitades y la ayuda se iba al centro de la fila,
   suelta. El reparto correcto es UN solo `auto`, y en la ayuda: la cifra
   ancla a la izquierda —es dato— y los dos mandos quedan juntos a la
   derecha, separados por el `gap` del contenedor. */
.eq-riel__ui .fichas__ayuda { margin-left: auto; }
.eq-riel__ui .fichas__flechas { margin-left: 0; }
.eq-riel__cuenta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}
.eq-riel__cuenta-d {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height: .82;
  letter-spacing: var(--ls-display);
  color: var(--amarillo);
  font-variant-numeric: tabular-nums;
}
.eq-riel__cuenta-l {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--apagado);
  max-width: 16ch;
}
@media (max-width: 700px) {
  /* Tres piezas no caben en una fila de 342 px: la que se va es la ayuda
     «Arrastra», que en táctil sobra —el gesto es el natural— y que §21 ya
     desvanece al primer uso. La cifra se queda: es dato, no ayuda. */
  .eq-riel__ui .fichas__ayuda { display: none; }
}


/* ------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------
   🔴 SIN ESTO LA FOTO SE ROMPE. §27 convierte el carril en rejilla de
   `repeat(4, 1fr)` (3 por debajo de 1200, 2 por debajo de 900): a 1440 la
   columna mide 316 px, la foto se pinta a 316 y la densidad a 2x cae a
   0,63 — la única regla dura de esta sección, rota justo en el modo que
   nadie mira. Aquí la rejilla es de columnas FIJAS de 196 px, que es el
   mismo ancho pintado del carril y la misma densidad de 1,02.
   `auto-fill` + `space-between` reparte las que quepan y las diez caen en
   dos o tres filas según la ventana. La especificidad (`.eq-riel
   .fichas__pista`, 0-2-0) gana a las tres reglas de §27 sin `!important`. */
@media (prefers-reduced-motion: reduce) {
  .eq-riel .fichas__pista {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--ficha-an));
    justify-content: space-between;
    column-gap: var(--gap);
    row-gap: var(--bloque);
    /* §27 devuelve el sangrado a cero, pero el relleno que coloca la primera
       ficha a plomo con el titular lo declara ESTA hoja y sobrevive: en
       rejilla no hay nada que colocar. */
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
  .eq-carta:hover .eq-carta__media img { transform: none !important; }
}
/* Y el suelo del móvil estrecho: por debajo de 460 px no caben dos columnas de
   196 y `auto-fill` dejaba UNA sola, con 146 px muertos a la derecha de cada
   fila y la sección en 3.745 px de alto a 390. Dos columnas fluidas: a 390 la
   tarjeta mide 161 px y la densidad SUBE a 1,24 (400 / (161 × 2)), que es la
   dirección correcta —más densidad, no menos—, y la sección baja a la mitad.
   El corte está en 460 porque ahí es donde 2 × 196 + `--gap` deja de caber. */
@media (prefers-reduced-motion: reduce) and (max-width: 460px) {
  .eq-riel .fichas__pista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------
   SIN JS · y con main.js bloqueado, que no es lo mismo
   ------------------------------------------------------------
   §21 esconde flechas y ayuda sin JS y el carril nativo sigue
   desplazándose — pero la barra de scroll está oculta a propósito
   (`scrollbar-width: none`), así que un ratón sin rueda lateral se quedaba
   sin manera de llegar a las últimas personas. Sin JS la barra vuelve: es
   fea y es la única salida. La segunda condición es el caso distinto de
   «hay JavaScript pero main.js no ha llegado» (404, bloqueador, caché
   envenenada): ahí `js` está puesta igual y las flechas se pintarían sin
   que nadie las escuche. Mismo patrón que §21 y §05. */
html:not(.js) .eq-riel__pista,
html.reveals-sellados:not(.js-ok) .eq-riel__pista {
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}
html:not(.js) .eq-riel__pista::-webkit-scrollbar,
html.reveals-sellados:not(.js-ok) .eq-riel__pista::-webkit-scrollbar {
  display: block;
  height: 10px;
}
html.reveals-sellados:not(.js-ok) .eq-riel .fichas__flechas,
html.reveals-sellados:not(.js-ok) .eq-riel .fichas__ayuda { display: none; }


/* ============================================================
   D · §9-§11 · SE RETIRA EL PORTÓN  (`.sec--porton` → `sec-cota`)
   ------------------------------------------------------------
   POR QUÉ, con el dato delante. El telón del portón vive dentro de
   `html.js:not(.reveals-sellados)`, y esa clase la pone el <head> a los
   2.500 ms pase lo que pase. Esta página mide 13.658 px a 1440: la
   segunda sección arranca en 1.741 px y las seis siguientes se alcanzan
   mucho después de ese cronómetro. O sea que el portón sólo existía para
   la sección que ya está en pantalla al cargar — y ni siquiera: main.js
   marca `is-in` a TODAS las piezas en el mismo temporizador de 2.500 ms
   (`API.revelar`). Seis de siete secciones no recibían transición
   ninguna, y la séptima la recibía a medias.

   `sec-cota` (estilos.css §34) no tiene ese problema, y no porque anime
   más tarde —también deja de animar tras el sello— sino porque LO QUE
   DEJA ES COMPOSICIÓN Y NO MOVIMIENTO: su estado base es la línea
   amarilla de 1 px dibujada (sin remates desde el 28-sep-2026). Pasado el
   cronómetro el portón no deja NADA (era un telón: su trabajo es
   desaparecer) y la cota deja el filete puesto. Además:
     · es el componente COMPARTIDO que las otras páginas ya adoptaron el
       5-sep-2026; empresa era la última con transición propia viva,
     · trae `main > section.sec-cota { border-top: 0 }` y el
       `:has(+ section.sec-cota) { border-bottom: 0 }`, que evitan la
       línea doble en cada costura,
     · y quita el `overflow: clip` que el portón imponía a seis secciones
       y que sólo estaba para tapar el telón (la banda de instalaciones y
       la portada ya recortan por su cuenta).
   §29 B queda con `sec--porton` LIBRE y sin dueño.

   Al retirar la clase del marcado, las reglas de §9 y las tres líneas de
   §11 que la citan dejan de casar con nada: se borran de la hoja.
   ============================================================ */

/* ============================================================
   E · IMPRESIÓN
   ------------------------------------------------------------
   §28 despliega el carril (`.fichas__pista { display: block }`) y salva
   `.ficha` de partirse, pero no le quita el ancho de ficha ni el sangrado:
   las diez personas salían en una columna de 196 px, desplazada, en tres
   hojas. Cuatro por fila.
   El `break-inside` de `.hito-empresa` (§12) sigue haciendo falta y no se
   toca.
   ============================================================ */
@media print {
  .eq-riel .fichas__pista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16pt;
    margin-inline: 0;
    padding-inline: 0;
  }
  .eq-riel .ficha { flex: none; width: auto; break-inside: avoid; }
  .eq-riel__ui { display: none; }
}


/* ============================================================
   F · MEDIDA DE LECTURA — el parche local, retirado (8-sep-2026)
   ------------------------------------------------------------
   Aquí vivían seis topes escritos en `ch` a mano, uno por párrafo, con
   esta nota: «No se toca `--medida` en tokens.css: es un token compartido
   por las ocho páginas y cambiarlo desde aquí sería moverle la medida a un
   sitio que no se ha medido». Era la decisión correcta ENTONCES, y por eso
   el defecto sobrevivió: cada hoja arregló lo suyo con su propia
   equivalencia (46ch aquí, 48 en maquinaria, 48 en uniformidad, 47 en el
   aviso de cookies) y el token siguió mintiendo para todo lo demás.
   El 8-sep-2026 se ha medido el sitio ENTERO —treinta familias por encima
   del tope en las once páginas— y la medida ha pasado a ser una escalera
   de píxeles por tamaño de cuerpo en tokens.css §2.bis. Estas seis reglas
   ya no hacen falta: `.cap__p`, `.insta__p`, `.integ__p`, `.punto__p` y
   `.cierre__p` heredan `--medida` de su propia declaración compartida, y
   `.insta__datos li` es lo único que se queda, con el token que le toca.
   Lo que medían antes, para que quede el histórico:
       .cap__p 83 · .insta__p 84 · .integ__p 71 · .cierre__p 71 ·
       .insta__datos li 81 · .port__entrada 85 · .punto__p 69
   ============================================================ */
#instalaciones .insta__datos li { max-width: var(--medida-s); }
/* `.port__entrada` lleva su tope en la rama de una columna (§A, @1200): en dos
   columnas la columna ya la para en 36ch. */