/* ============================================================
   DYRECO · Dirección C — NAVE
   p-maquinaria.css — lo que es SOLO de la página Maquinaria
   ------------------------------------------------------------
   Se carga DESPUÉS de estilos.css. Aquí no se redefine ningún
   token global ni ningún mecanismo compartido: el vocabulario
   (.cont, .kicker, .h2, .btn, .media, .punto, .enlace-flecha,
   .cabecera-sec) sale de estilos.css sin tocar.

   Lo que sí es propio de esta página:
     1 · Hero de PLACA TÉCNICA (ni 100dvh, ni foto a sangre)
     2 · Aviso VENTA / ALQUILER — arriba del todo
     3 · Familias en FILAS de hoja de especificación + índice fijo
     4 · Andamios y escaleras — FRANJA con parallax de dos capas
     5 · Asesoramiento — raíl vertical con nodos
     6 · Marcas — carrusel de una fila (el `.marquee` compartido; el
         muro de placas quieto se retiró el 6-sep-2026 a petición del cliente)
     7 · Cruce de divisiones — YA NO ES PROPIO: usa el componente
         compartido `.otras` (estilos.css §35) desde el 5-sep-2026
     8 · FAQ en TABLA de ficha técnica, sin acordeón
     9 · Cierre de placa
    10 · TRANSICIÓN DE SECCIÓN PROPIA: la COTA
    11 · prefers-reduced-motion · sin JS
   ============================================================ */

:root {
  /* Ancho de la foto en la fila de familia. Es un token nuevo porque la
     composición de esta página (fila de catálogo, no tarjeta) necesita una
     foto pequeña y CONSTANTE: si crece, la fila deja de leerse como línea de
     especificación y se convierte en la tarjeta que ya usa la Home. */
  /* Ancho de la columna de foto de cada fila de familia. Sube de
     clamp(170px,15vw,230px): la fila sigue siendo línea de especificación —la
     columna es fija, pequeña y constante— pero a 230 px la lámina de catálogo
     no se leía, y esta sección son ocho de las trece fotos de la página.
     Va acoplado al `sizes` de las ocho <img>, que declara este mismo clamp. */
  /* ⚠️ SUBE DE 21vw/320 A 28vw/430 (6-sep-2026). Al retirar la cuarta
     columna —la tabla de especificación— la fila liberó 300 px + su junta, y
     ese ancho no puede irse todo al texto: medido, el párrafo saltaba a 68
     caracteres por línea, por encima de los 66 de `--medida`. Se reparte:
     el texto se topa en su medida de lectura y el resto se lo lleva la FOTO,
     que es lo que a esta página le falta (la de menos superficie fotográfica
     de las ocho). No sube más porque el alto de fila lo fija `.fam__vistas`
     (210 px de mínimo): a 34vw la caja pasa a 2,4:1 sobre un fichero de 1,5 y
     el recorte empieza a comerse el encuadre. */
  --fam-foto: clamp(190px, 28vw, 430px);
  /* Ancho de la columna del índice fijo de familias. */
  --indice-an: clamp(160px, 14vw, 210px);
}


/* ============================================================
   00 · ESTADO ACTIVO DE LA NAVEGACIÓN
   ------------------------------------------------------------
   La cabecera es compartida y se copia verbatim, pero estilos.css
   no tiene todavía estado para [aria-current="page"]: en la Home no
   hacía falta porque el enlace activo era el propio logo. Se define
   aquí, en el CSS de la página, porque los ficheros compartidos no
   se tocan; cuando las ocho páginas estén hechas, esta regla es la
   candidata evidente a subir a estilos.css §05.
   ============================================================ */


/* La zona de toque del pie del menú móvil (.panel__tel / .panel__mail) ya NO
   se parchea aquí: vive donde le toca, en el componente compartido
   (estilos.css § 05 · .panel__pie). El `padding-block: 10px` que llevaba esta
   copia era además el que dejaba el teléfono a 61 px solo en maquinaria. */


/* ============================================================
   10 · LA COTA — SUBIDA A LA HOJA COMPARTIDA (5-sep-2026)
   ------------------------------------------------------------
   Era la transición propia de esta página y ahora es la de las
   cuatro divisiones: el cliente pidió la misma franja —la línea
   fina amarilla— en todas. Vive en estilos.css §34.
   ============================================================ */

/* ============================================================
   01 · HERO — RETIRADO (sep-2026)
   ------------------------------------------------------------
   Aquí vivían `.hero-maq`, `.hero-maq__trama/__int/__texto/__h1/
   __entrada/__botones` y la placa `.ficha-tec` con sus `__media/__dl/
   __fila` y sus tres media queries: el hero de «placa técnica» propio
   de esta página, unos 155 renglones.

   Se ha borrado entero porque el encargo del cliente (sep-2026) es que
   el hero de las cuatro divisiones se vea IGUAL que el de rotulación,
   y ese hero es `.hero-div`, que vive en la hoja COMPARTIDA
   (estilos.css §30). Dejar aquí las reglas viejas no era neutral: dos
   de ellas —`.ficha-tec { grid-column: 8 / span 5 }` y la trama— solo
   se explican dentro de una rejilla de 12 columnas que ya no existe en
   el marcado, y el nombre `.ficha-tec` es de los genéricos que §29 de
   estilos.css tiene fichados por repetirse entre páginas.

   Los CUATRO PARES de la placa (Modalidad, Garantía, Servicio,
   Teléfono) bajaron en septiembre al aviso de venta en firme como
   `.datos-maquinaria`, y de ahí los retiró el cliente el 6-sep-2026.
   Ya no están en la página.
   ============================================================ */
/* ============================================================
   01b · HERO — QUIÉN VA DEBAJO DEL TITULAR (sep-2026)
   ------------------------------------------------------------
   El reparto del mosaico es de la hoja compartida y no se toca; lo que
   se cambia aquí es QUÉ FOTO cae en cada banda de la columna central,
   que es decisión de esta página. Medido a 1440: el h1 (40–622 × 283–493)
   se comía 261×210 px de la banda de en medio —el 28 % de la pieza de
   generadores, la foto más «maquinaria» del mosaico— mientras la fachada,
   que es la más oscura y la que menos información pierde debajo de un
   texto, se veía entera abajo.
   Se intercambian las filas de las piezas 3 y 4: la fachada aguanta el
   titular y los generadores bajan a la banda inferior, donde solo los
   roza la entrada (169×110 px, un 9 %). Las dos cajas miden EXACTAMENTE
   lo mismo (719×274 a 1440), así que ni el `sizes` ni la densidad de
   ninguna de las dos cambian, y `gemelos.py hero` sigue dando idéntico
   (compara x, ancho y cuerpo, no la fila).
   Solo en escritorio: por debajo de 1024 px las dos piezas dejan de ser
   bandas hermanas y cada una tiene su propia caja.
   ============================================================ */
@media (min-width: 1025px) {
  #hero .hero-div__p--3 { grid-row: 5 / 7; }
  #hero .hero-div__p--4 { grid-row: 3 / 5; }
}

/* ============================================================
   02 · VENTA / ALQUILER — «LA BALANZA»
   ============================================================ */
/* ============================================================
   PROTOTIPO · AVISO VENTA / ALQUILER — «LA BALANZA»
   Sustituye a `.aviso-maquinaria` + `.aviso-col-maquinaria` +
   `.datos-maquinaria` en la sección #aviso de maquinaria.html.
   ------------------------------------------------------------
   QUÉ CAMBIA Y POR QUÉ

   1 · LA COMPARACIÓN ES LA PIEZA, Y VA A TODO EL ANCHO.
       Antes la comparación vivía apretada en 6 de 12 columnas, al
       lado de una declaración más alta que ella: 664 px de texto
       contra dos cajas de 285,8 px, y el resto —el cuadrante
       inferior derecho— vacío. Ahora la declaración sube a
       CABECERA de sección (patrón `.cabecera-sec--split` del
       sistema) y la comparación baja a las 12 columnas. Nadie
       compite con nadie y no queda hueco muerto.

   2 · NO HAY CAJAS. Las dos tarjetas con borde, radio y filete
       lateral eran el origen del problema: una caja se tiene que
       llenar, y la de ALQUILER —con un punto menos— no se llenaba.
       Las columnas pasan a ser dos PLATOS abiertos que cuelgan de
       una viga: filetes de 1 px, cero fondo, cero borde. Sin caja
       no hay caja vacía.

   3 · LAS DOS COLUMNAS COMPARTEN FILAS DE VERDAD (`subgrid`).
       Empatarlas con `align-items: stretch` era lo que dejaba el
       aire muerto. Aquí las dos listas son `grid-template-rows:
       subgrid` sobre las MISMAS cinco filas de `__pesada`, así que
       cada punto de VENTA cae a la altura exacta de su contrario y
       los filetes se encuentran en la costura. VENTA tiene cuatro
       puntos y ALQUILER tres: la quinta fila del lado derecho la
       ocupa su nota al pie, que es texto real. Las dos columnas
       terminan en el mismo píxel sin estirar nada.
       ⚠️ `subgrid` es lo que hace el trabajo. El `@supports` de
       abajo deja el bloque legible donde no exista, pero entonces
       las filas dejan de cuadrar: no se retira.

   4 · LA ASIMETRÍA ES EL ARGUMENTO. La viga que corona los dos
       platos es un filete de 1 px AMARILLO en la mitad de VENTA y
       GRIS en la de ALQUILER, y del punto de apoyo —el centro
       exacto, donde arranca la costura— cuelgan 9 px de amarillo.
       Es el mismo vocabulario de `.sec-cota` (§34: filete de 1 px
       + remates de 9 px). A un metro se ve qué lado es el nuestro
       sin leer una palabra.

   5 · UNA FOTO, Y QUE PAGUE SU SITIO. El bloque no tenía ninguna.
       Entra en la mitad derecha de la cabecera, donde el texto ya
       reservaba el alto: la sección NO crece por meterla. Es la
       carretilla —la máquina que se compra y entra en inventario,
       que es de lo que habla el bloque—.

   EL AMARILLO NO RELLENA NADA: sello de 121×32 (el que ya existía),
   filetes de 1 px, rótulo VENTA y las marcas de visto. Superficie
   amarilla total medida: 0,5 % del bloque a 1440.

   NOMBRES (§29 de estilos.css). El componente es de UNA página, así
   que lleva la página dentro: `balanza-maquinaria` con sus
   `__int/__decl/__sello/__h2/__p/__foto/__pesada/__viga/__costura/
   __et/__lista/__nota`. Comprobado con el grep de §29 sobre las once
   hojas: `balanza`, `viga`, `costura` y `pesada` están libres.
   AL TRASPLANTAR se borran `.aviso-maquinaria*`, `.aviso-col-maquinaria*`
   y `.datos-maquinaria*` de p-maquinaria.css (bloque 115-321) — y con
   ellas las dos reglas inertes de las líneas 182-183 y la @media de
   900 px, que se queda vacía.
   ============================================================ */

.balanza-maquinaria {
  background: var(--sup);
  /* Arriba respira MENOS que el resto de secciones (≈la mitad del token): el
     aviso va pegado al hero a propósito, para que el sello amarillo asome en
     el primer pliegue de un portátil de 1440×950. Verbatim del bloque que
     sustituye. Ni `border-top` ni `border-bottom`: los pone `.sec-cota`. */
  padding-block: clamp(56px, 5.6vw, 96px) var(--sec-y);
}

/* --- 1 · CABECERA: declaración a la izquierda, máquina a la derecha ------
   Reutiliza `.cabecera-sec--split` del sistema (7fr / 5fr, `align-items:
   end`, apilado a ≤900). Lo único que cambia respecto a las otras cabeceras
   de la web es QUÉ va en la segunda columna: aquí no es la entrada de texto
   —que sube a la primera, debajo del titular, porque forma cuerpo con él—
   sino la foto. */
.balanza-maquinaria__decl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Contra el `align-items: end` del patrón: aquí las dos mitades arrancan en
     la misma horizontal —sello y foto— y la que sobra por abajo es la foto,
     a propósito. Con el `end` heredado el texto caía 30,9 px y el sello se
     quedaba descolgado del borde superior de la foto sin motivo. */
  align-self: start;
}

/* Sello: bloque amarillo con el corte diagonal del wordmark. Sobre amarillo,
   el texto va casi negro — nunca blanco. Verbatim del bloque anterior. */
.balanza-maquinaria__sello {
  display: inline-block;
  margin-bottom: var(--pieza);
}
.balanza-maquinaria__sello span {
  display: inline-block;
  padding: 10px 22px;
  background: var(--amarillo);
  color: var(--sobre-amarillo);
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-kicker);
  line-height: 1;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
}

/* 26ch parte el titular en «COMPRAS LA MÁQUINA / Y YA ES TUYA», que es el
   corte que respeta la frase. Con los 20ch del `.h2` estándar salían tres
   líneas y con la columna suelta (743 px a 1440) entraba «…MÁQUINA Y» en la
   primera. Medido: 662,2 px de línea larga en una columna de 742,9. */
.balanza-maquinaria__h2 { max-width: 26ch; }

/* Tope por TOKEN. Aquí ponía «52ch, Y NO `--medida`», y tenía razón mientras
   `--medida` valía 66ch = 646 px y renderizaba 87 caracteres. Desde el
   8-sep-2026 `--medida` son 440 px MEDIDOS para el cuerpo corriente
   (tokens.css §2.bis), así que el token ya es lo coherente Y lo correcto: el
   52ch de aquí eran 509 px y 67 caracteres, uno por encima del techo. */
.balanza-maquinaria__p {
  color: var(--apagado);
  max-width: var(--medida);
  margin-block: var(--pieza) 6px;
}

/* La foto entra donde la cabecera partida pone la entrada de texto, y arranca
   en la MISMA línea que el sello (`align-self: start`, contra el `end` del
   patrón): dos arranques en la misma horizontal se leen; dos pies, no.
   ⚠️ LA PROPORCIÓN ES FIJA A PROPÓSITO, no `stretch`. Estirándola al alto de
   la declaración la caja se hacía más alta que ancha en proporción y `cover`
   pasaba a casar por ALTO: medido a 1024, densidad 0,89 —por debajo del
   mínimo 1,0 del proyecto— con el mismo fichero. Con 3:2 fijo la caja es
   siempre ancho × 2/3 y la densidad la fija el ancho, que es justo lo que
   declara `sizes`: 1,20 a 1440, 1,08 a 1024, 1,24 a 390.
   3:2 contra el 1,506:1 del fichero: `cover` amplía un 0,4 %, dentro del
   redondeo del propio `sizes`. La foto sobresale 36,8 px por debajo del
   último renglón del párrafo, y es la única pieza que lo hace: es lo que le
   da peso al lado derecho de la cabecera. */
.balanza-maquinaria__foto {
  aspect-ratio: 3 / 2;
  align-self: start;
  width: 100%;
}

/* --- 2 · LA BALANZA -------------------------------------------------------
   Tres pistas: plato, costura de 1 px, plato. La costura NO es un borde de
   ninguno de los dos lados —sería de uno o del otro—: es una pista propia de
   la rejilla, así que cae en el centro geométrico exacto y los dos platos
   miden lo mismo hasta el subpíxel.
   Cinco filas: el rótulo y los cuatro puntos. Las dos listas son `subgrid`
   sobre estas filas (ver nota 3 de la cabecera del fichero). */
.balanza-maquinaria__pesada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  grid-template-rows: auto repeat(4, auto) 1px;
  column-gap: clamp(24px, 3.2vw, 52px);
}

/* La base. Cierra los dos platos con un filete a todo el ancho —también sobre
   la costura— para que el bloque TERMINE en una línea y no se deshilache
   contra el aire del pie de sección. Gris: el amarillo es la viga, que es
   donde está el argumento. */
.balanza-maquinaria__base {
  grid-column: 1 / -1;
  grid-row: 6;
  height: 1px;
  background: var(--linea);
}

/* La viga. Cruza las tres pistas —también la costura— para que el filete no
   se interrumpa en el canal: amarillo en la mitad de VENTA, gris en la de
   ALQUILER. Va en la fila 1 y anclada arriba, así que comparte celda con los
   dos rótulos sin empujarlos (ellos llevan su propio `padding-top`). */
.balanza-maquinaria__viga {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  height: 1px;
  background: linear-gradient(90deg, var(--amarillo) 0 50%, var(--linea) 50% 100%);
}

/* La costura y el punto de apoyo. Los primeros 9 px van en amarillo: es el
   remate de `.sec-cota` (§34) puesto de pie en el centro de la viga.
   Va en `--linea-alta` y no en `--linea`: es la línea que tiene que LEERSE
   —es la que separa los dos platos— y con el mismo gris de los filetes de
   fila se perdía entre ellos. */
.balanza-maquinaria__costura {
  grid-column: 2;
  grid-row: 1 / 6;
  background: linear-gradient(var(--amarillo) 0 9px, var(--linea-alta) 9px);
}

.balanza-maquinaria__et {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  grid-row: 1;
  padding-top: clamp(20px, 1.8vw, 28px);
  padding-bottom: clamp(20px, 1.8vw, 30px);
}
.balanza-maquinaria__et--si { grid-column: 1; color: var(--amarillo); }
.balanza-maquinaria__et--no { grid-column: 3; color: var(--apagado); }

.balanza-maquinaria__lista {
  display: grid;
  grid-template-rows: subgrid;
}
.balanza-maquinaria__lista--si { grid-column: 1; grid-row: 2 / span 4; }
.balanza-maquinaria__lista--no { grid-column: 3; grid-row: 2 / span 3; }

.balanza-maquinaria__lista li {
  position: relative;
  padding: 16px 0 18px 34px;
  font-size: var(--fs-body);
  line-height: var(--lh-corto);
  border-top: 1px solid var(--linea);
}
.balanza-maquinaria__lista--si li { color: var(--texto); }
.balanza-maquinaria__lista--no li { color: var(--apagado); }

/* LAS DOS MARCAS SON EL MISMO TRAZO (6-sep-2026, a petición del cliente).
   En VENTA había un VISTO —dos filetes rotados 45° que formaban una uve— y el
   cliente lo ha pedido igual que el de ALQUILER. Ahora las dos columnas
   llevan exactamente la misma pieza: un filete de 17 × 2 px sesgado −30°, a
   la misma altura de línea, así que los ocho puntos del bloque arrancan en la
   misma vertical.
   ⚠️ LO ÚNICO QUE LAS DIFERENCIA ES EL COLOR, y es a propósito: el trazo de
   VENTA se queda en amarillo y el de ALQUILER en `--linea-alta`. Es lo que
   sostiene el argumento del bloque —la viga ya es amarilla en la mitad de
   VENTA y gris en la de ALQUILER—; con los dos trazos en gris las dos
   columnas se leerían como la misma lista. */
.balanza-maquinaria__lista li::before {
  content: "";
  position: absolute; left: 0; top: calc(16px + .86em);
  width: 17px; height: 2px;
  transform: skewX(-30deg);
}
.balanza-maquinaria__lista--si li::before { background: var(--amarillo); }
.balanza-maquinaria__lista--no li::before { background: var(--linea-alta); }

/* La nota ES la cuarta fila del plato derecho. No es un punto de la lista
   —no es una desventaja del alquiler, es a dónde mandamos a quien busca
   alquiler—, así que va fuera del `<ul>` y con su propia tipografía; pero
   ocupa la fila 5, que es lo que hace que las dos columnas cierren juntas. */
.balanza-maquinaria__nota {
  grid-column: 3;
  grid-row: 5;
  border-top: 1px solid var(--linea);
  padding: 16px 0 18px;
  font-size: var(--fs-sm);
  line-height: var(--lh-corto);
  color: var(--apagado);
}

/* ⚠️ EL ENLACE SE QUEDA EN LA CABECERA, y se probó lo contrario. Puesto
   DEBAJO de la balanza el argumento se leía antes que la acción, que es mejor
   orden de lectura, pero el bloque cerraba con un enlace de 173 px pegado al
   margen izquierdo y **217 px de cola vacía en la mitad derecha** —medido a
   1440—: exactamente el defecto que hay que quitar. En la cabecera, lo último
   del bloque es la base de la balanza, un filete a todo el ancho, y la cola
   de abajo son los 144 px de `--sec-y` que lleva CUALQUIER sección del sitio,
   iguales a izquierda y a derecha. */

/* --- 3 · Respuesta ------------------------------------------------------- */

/* La cabecera apila a ≤900 por la regla del sistema; la foto pasa a todo el
   ancho y se queda en 3:2. */
@media (max-width: 900px) {
  /* Apilada, la foto va a todo el ancho y pasa a 16:9: en 3:2 medía 524 px de
     alto a 834 y se comía media pantalla de tableta (la sección se iba a
     1.372 px). En 16:9 son 442 y sigue mandando. La densidad no sufre —la
     caja es más apaisada que el fichero, así que `cover` casa por ancho—:
     1,22 a 834@2 · 1,12 a 620@2 · 1,25 a 390@3. */
  .balanza-maquinaria__foto { aspect-ratio: 16 / 9; }
}

/* En el móvil la foto vuelve a 3:2. Es la única fotografía del bloque y en
   16:9 se quedaba en 342×192 —una tira—: en 3:2 son 342×228 y aguanta el
   ancho de la columna. Los 36 px que cuesta no se notan en una sección que
   ya mide 1.387. */
@media (max-width: 620px) {
  .balanza-maquinaria__foto { aspect-ratio: 3 / 2; }
}

/* ≤620 los dos platos dejan de compartir fila: se apilan y cada uno lleva su
   propia viga (amarilla la de VENTA, gris la de ALQUILER). La costura y la
   viga partida no tienen sentido en una columna y se retiran.
   ⚠️ LAS FILAS SE REASIGNAN UNA A UNA, no se deja `auto`. Con colocación
   automática los dos rótulos se van juntos a las dos primeras filas —el orden
   del DOM es viga · costura · VENTA · ALQUILER · lista · lista · nota, que en
   dos columnas es lo correcto— y apilado salían «VENTA / ALQUILER / los
   cuatro puntos de venta / los tres de alquiler». Medido a 620 y a 390 antes
   de corregirlo: el primer punto de ALQUILER caía exactamente donde acababa
   el último de VENTA, sin rótulo en medio. */
@media (max-width: 620px) {
  .balanza-maquinaria__pesada {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, auto) 1px;
  }
  .balanza-maquinaria__viga,
  .balanza-maquinaria__costura { display: none; }
  .balanza-maquinaria__et,
  .balanza-maquinaria__lista,
  .balanza-maquinaria__nota,
  .balanza-maquinaria__base { grid-column: 1; }
  .balanza-maquinaria__et--si    { grid-row: 1; }
  .balanza-maquinaria__lista--si { grid-row: 2; }
  .balanza-maquinaria__et--no    { grid-row: 3; }
  .balanza-maquinaria__lista--no { grid-row: 4; }
  .balanza-maquinaria__nota      { grid-row: 5; }
  .balanza-maquinaria__base      { grid-row: 6; }
  .balanza-maquinaria__lista { display: block; }
  /* Sin viga que los corone, el filete se lo pone cada rótulo. */
  .balanza-maquinaria__et { border-top: 1px solid var(--linea); }
  .balanza-maquinaria__et--si { border-top-color: var(--amarillo); }
  .balanza-maquinaria__et--no { margin-top: var(--bloque); }
}

/* Donde no haya `subgrid` las filas dejan de cuadrar entre columnas, pero el
   bloque sigue siendo legible y ninguna caja se estira: no hay cajas. */
@supports not (grid-template-rows: subgrid) {
  .balanza-maquinaria__lista { display: block; }
}


/* ============================================================
   03 · FAMILIAS — filas de hoja de especificación
   ============================================================ */

.familias { padding-block: var(--sec-y); }

.familias__int {
  display: grid;
  grid-template-columns: minmax(0, var(--indice-an)) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 56px);
  align-items: start;
}

/* --- Índice fijo. Sin JS son anclas normales; con JS se enciende la
       familia que se está leyendo (js/p-maquinaria.js). --- */
.indice-fam {
  position: sticky;
  top: calc(var(--alto-cab) + 32px);
  border-top: 1px solid var(--linea);
  padding-top: 16px;
}
.indice-fam__t {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
  margin-bottom: 10px;
}
.indice-fam a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  padding: 11px 0 11px 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--apagado);
  transition: color var(--dur-ui) var(--ease), padding-left var(--dur-ui) var(--ease);
}
.indice-fam a::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--amarillo);
  transform: translateY(-50%) skewX(-30deg);
  transition: height 420ms var(--ease-suave);
}
.indice-fam a:hover { color: var(--texto); padding-left: 18px; }
.indice-fam a.is-activo { color: var(--texto); }
.indice-fam a.is-activo::before { height: 22px; }
.indice-fam__n { font-size: .625rem; letter-spacing: .18em; color: var(--amarillo); }

/* --- Las filas --- */
.fam__fila {
  display: grid;
  /* ⚠️ TRES COLUMNAS DESDE EL 6-sep-2026. Había una cuarta,
     `minmax(0, 300px)`, con la tabla de especificación que el cliente ha
     pedido quitar. Ojo: borrar solo el `<dl>` NO devuelve el espacio —el
     máximo de ese `minmax` es una longitud FIJA, así que la pista se seguía
     dibujando a 300 px con el área vacía; medido, la plantilla resuelta salía
     idéntica con y sin los `<dl>` en el DOM—. Hay que quitar la pista y el
     área, que es lo que se hace aquí: 300 px + 26 de junta × cuatro filas. */
  grid-template-columns: 44px var(--fam-foto) minmax(0, 1fr);
  grid-template-areas: "num foto cuerpo";
  column-gap: clamp(18px, 1.8vw, 30px);
  row-gap: 18px;
  /* ⚠️ `start` dejaba el alto de la fila en manos de la columna de fotos (340
     px con las dos vistas apiladas) mientras el cuerpo medía 150 y la tabla
     110: 190 px muertos en DOS columnas, cuatro veces seguidas. Medido: 46 %
     de ocupación útil, la peor de la página. Con `stretch` las tres columnas
     ocupan el alto de la fila y el contenido se reparte —el enlace baja al pie
     del cuerpo, la tabla espacia sus filetes—, que es como se compone una hoja
     de especificación de verdad. */
  align-items: stretch;
  padding-block: clamp(26px, 2.8vw, 44px);
  border-top: 1px solid var(--linea);
  transition: border-color 620ms var(--ease);
}
.fam__fila:last-child { border-bottom: 1px solid var(--linea); }
.fam__fila:hover { border-top-color: var(--am-30); }

.fam__n {
  grid-area: num;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  color: var(--amarillo);
  padding-top: 4px;
}
/* Dos vistas por familia: la foto de catálogo y una franja de detalle debajo,
   como en una ficha de producto. La columna NO crece —`--fam-foto` sigue
   mandando y la fila se sigue leyendo como línea de especificación— pero la
   sección pasa de cuatro fotos a ocho, que es lo que le faltaba a esta página
   para aguantar la comparación con las otras tres divisiones. */
/* ⚠️ QUIÉN MANDA EN EL ALTO DE LA FILA (sep-2026, medido a 1440).
   Las cuatro filas medían 381 px CLAVADOS, y no porque el contenido lo pidiera:
   lo ponía esta columna. `align-self: start` la sacaba del `stretch` de la fila
   y sus dos `aspect-ratio` fijos sumaban 340 px + 8 de gap sobre un ancho de
   `--fam-foto`. El cuerpo pedía 245-268 y la tabla 187, así que sobraban 113-136
   px en el cuerpo y 194 en la tabla — cuatro veces seguidas, 57 % de ocupación.

   Se invierte el mando: la fila la miden ahora el CUERPO y la TABLA, que es lo
   que de verdad tiene contenido, y la columna de fotos RELLENA lo que salga.
   Para eso hacen falta las tres cosas a la vez:
     · `align-self: stretch` — deja de ser una isla y entra en el alto de fila;
     · rows en fracciones en vez de `aspect-ratio` — las dos vistas se reparten
       el alto disponible (70/30) en lugar de imponerlo;
     · las <img> en `position:absolute; inset:0` — sin caja en flujo que pueda
       volver a empujar el alto hacia arriba.
   `sizes` no cambia y sigue siendo correcto: las dos cajas quedan MÁS apaisadas
   que sus ficheros (1,506:1), así que `cover` recorta por alto y el ancho
   pintado sigue siendo el ancho de la columna, que es lo que declaran. */
.fam__vistas {
  grid-area: foto;
  align-self: stretch;
  display: grid;
  grid-template-rows: 1fr 0.42fr;
  gap: 8px;
  /* SUELO de la columna, y conviene decir la verdad sobre él: a 1440 el cuerpo
     de las cuatro familias pide 163-186 px (medido con el suelo a 0), o sea que
     este 210 ES lo que acaba fijando la fila. Se deja a propósito por dos
     razones: sin él las filas salen desparejas (186/163/163/163, la primera
     descolgada de sus tres hermanas) y la foto de catálogo baja a 108 px de
     alto, que ya no es una foto de catálogo. 210 deja las cuatro filas iguales
     y la lámina principal en 142. Lo que se ha quitado es que las fotos
     impusieran 381; que pongan un suelo de 210 es otra cosa. */
  min-height: 210px;
}
.fam__media,
.fam__detalle { min-height: 0; }
.fam__media img,
.fam__detalle img { position: absolute; inset: 0; }
.fam__fila:hover .fam__media img,
.fam__fila:hover .fam__detalle img { transform: scale(1.05); }

.fam__cuerpo { grid-area: cuerpo; display: flex; flex-direction: column; }
.fam__t {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.fam__p {
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--apagado);
  /* El tope va por TOKEN desde el 8-sep-2026: este párrafo es --fs-sm, así
     que le toca `--medida-s`. Aquí había un 48ch medido a mano —uno de los
     cuatro parches de la misma lección repartidos por las hojas de página—,
     y la escalera de tokens.css los sustituye a todos. */
  max-width: var(--medida-s);
}
/* El enlace cae al pie de la fila, a la altura del último filete de la tabla:
   es lo que cierra la línea de especificación por abajo. */
.fam__cuerpo .enlace-flecha { margin-top: auto; padding-top: clamp(14px, 1.6vw, 26px); }


/* ⚠️ EL CORTE DE 1279 SE RETIRA (6-sep-2026). Existía solo para acomodar la
   tabla de especificación cuando ya no cabía como cuarta columna: la bajaba
   bajo el texto, le devolvía el filete a su primera celda y soltaba el
   `margin-top: auto` del enlace, que si no se descolgaba 64-87 px por debajo
   de su párrafo. Sin tabla, su rejilla es un duplicado exacto de la base y no
   queda nada más dentro. */
@media (max-width: 1024px) {
  .familias__int { grid-template-columns: minmax(0, 1fr); }
  /* El índice es redundante en cuanto las filas ocupan todo el ancho: se cae
     antes que estorbar. Los anclajes siguen existiendo en el DOM. */
  .indice-fam { display: none; }
  .fam__fila {
    grid-template-columns: minmax(0, var(--fam-foto)) minmax(0, 1fr);
    grid-template-areas:
      "num  num"
      "foto cuerpo";
  }
  /* ⚠️ Era `none`, y no era inofensivo: sin tope, a 1024 el párrafo medía 711
     px y renderizaba 106 caracteres por línea, y a 834 llegaba a 82. Venía de
     cuando la tabla de especificación ocupaba la franja de abajo y el cuerpo
     se leía como un pie; medido hoy, es sencillamente ilegible. Se queda con
     la misma medida que en escritorio. */
  .fam__p { max-width: var(--medida-s); }
}
@media (max-width: 620px) {
  .fam__fila {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "num" "foto" "cuerpo";
    row-gap: 16px;
  }
  /* Apilada, la columna de fotos ya no comparte fila con nadie: su caja pasa a
     tener alto AUTO y unas filas en `fr` se quedarían en cero. Aquí vuelven las
     proporciones fijas, que es lo que había antes de invertir el mando. */
  .fam__vistas { grid-template-rows: auto auto; min-height: 0; }
  .fam__media { aspect-ratio: 800 / 531; }
  .fam__detalle { aspect-ratio: 800 / 240; }
  .fam__media img,
  .fam__detalle img { position: static; }
}


/* ============================================================
   04 · BANDA DESTACADA — SUBIDA A LA HOJA COMPARTIDA (1-sep-2026)
   ------------------------------------------------------------
   `.destacado` era el bloque pesado de esta página y ahora lo es de
   las cuatro divisiones, por petición del cliente. Vive en
   estilos.css §32. Aquí no queda ninguna regla.
   ============================================================ */

/* ============================================================
   05 · RAÍL DE CUATRO PASOS — SUBIDO A LA COMPARTIDA (1-sep-2026)
   ------------------------------------------------------------
   `.asesor` + `.rail` eran el mecanismo de esta página y ahora son
   de las cuatro. Viven en estilos.css §33, y `--rail-x` pasa a ser
   el token compartido `--rail-x` de tokens.css.
   ============================================================ */

/* ============================================================
   06 · MARCAS — muro de placas
   ============================================================ */

.marcas-muro {
  /* El relleno inferior lo pone la TIRA (abajo): la franja de expositores
     tiene que morder el borde de la sección, no flotar dentro de ella. */
  padding-top: var(--sec-y);
  padding-bottom: 0;
  background: var(--sup);
  border-block: 1px solid var(--linea);
}
/* 8 marcas curadas (solo herramienta y maquinaria; ver el comentario del HTML).
   Las columnas son DIVISORES de 8 (4 · 2) a propósito: con `auto-fill` la
   última fila se queda con un hueco vacío, que en un muro de placas se lee
   como un fallo y no como una rejilla. Antes eran 20 y la rejilla iba a 5. */
/* ⚠️ LA CABECERA DEJABA 185.000 px² EN BLANCO (sep-2026, medido a 1440).
   El bloque es el único de la página cuya cabecera es solo kicker + titular:
   no hay entrada a la derecha que lo acompañe, así que el `.h2` topado en los
   20ch de la hoja compartida se plantaba en ~400 px dentro de una banda de
   1.360 y el resto de la fila quedaba vacío. No se puede pasar a
   `.cabecera-sec--split` sin inventarse un texto de entrada que no existe —y
   el copy de esta página está cerrado—, así que se sube el tope del titular
   SOLO aquí: la frase pasa de tres líneas cortas a dos que cruzan la banda.
   El tope global de 20ch no se toca: vive en estilos.css y es de todos. */
/* `balance` y no `pretty`: con `pretty` el override pisaba el `balance` que
   trae `.h2` y el titular caía en una línea larga y una cola de dos palabras
   («…AGUANTAN LA OBRA / DE AQUÍ»). Con el tope subido a 34ch, `balance` reparte
   las dos líneas como en el resto de titulares de la página. */
.marcas-muro .cabecera-sec .h2 { max-width: 34ch; text-wrap: balance; }

/* ⚠️ EL MURO DE PLACAS SE RETIRA (6-sep-2026). Aquí vivían `.placas` y
   `.placa`: las ocho marcas quietas en una rejilla de 4×2, con su casilla,
   su filete y su hover. El cliente pidió que pasaran «todas en la misma
   fila», así que el bloque usa ahora el `.marquee` compartido (estilos.css
   §11) y esta página no tiene nada propio que decir sobre las marcas salvo
   el aire que las separa del titular y de la tira de fotos. */
.marcas-muro__marquee { margin-top: clamp(28px, 3vw, 48px); }
/* La pista come del ancho completo, así que el filete de la tira de
   expositores tiene que despegarse de ella con el mismo aire de bloque que
   tenía el muro. */
.marcas-muro__marquee + .muro__tira { margin-top: var(--bloque); }

/* --- La tira de expositores: A SANGRE, tres placas pegadas ---
   Es la respuesta al hueco de fotografía de la página (9,8 % de superficie
   frente al 17,8-48,1 % del resto) sin salirse de lo sobrio: ni texto encima,
   ni gap, ni tarjeta, ni movimiento propio. Solo tres planchas de la nave
   cerrando la sección de marcas, que es lo que las marcas son aquí: paneles
   de expositor. Va fuera de `.cont` para sangrar de borde a borde. */
.muro__tira {
  /* ⚠️ Era `var(--sec-y)`: 144 px de banda muerta a 1440 entre la última placa
     y la primera foto, dentro de una sección que ya cierra a sangre por abajo.
     Un separador de bloque (`--bloque`, 65 px) basta para que la tira se lea
     como otra pieza y no como parte del muro. */
  margin-top: var(--bloque);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--linea);
}
/* Cuadrada: es la proporción que más aire vertical da a la franja sin llegar
   a competir con la banda de andamios, que es la pieza grande de la página. */
.muro__placa {
  /* Ligeramente vertical: es la proporción de una plancha de expositor y da
     aire a la franja sin llegar a competir con la banda de andamios, que es
     la pieza grande de la página. 5/6 y no 4/5 porque con 4/5 la caja pide
     1.808 px a 2× en 1440 y el escalón que se sirve es el de 1920: densidad
     1,06, demasiado justo. Con 5/6 pide 1.735 y sube a 1,11.
     ⚠️ Esa cuenta solo cubría hasta 1440. Por encima, la misma proporción pide
     más de lo que había declarado: a 1920 la placa mide 640×768 y pinta 1.157
     px CSS → 2.314 reales en retina, y las tres imágenes topaban en el 1920
     (densidad medida 0,83). No se toca la proporción —es la composición— sino
     el `srcset`: cada una declara ahora el escalón que tiene en disco por
     encima del 1920. Ver el comentario de la tira en maquinaria.html. */
  aspect-ratio: 5 / 6;
  border-radius: 0;                     /* a sangre y pegadas: sin esquina */
}
/* La costura entre placas es un filete de 1 px, no un hueco. */
.muro__tira > li + li .muro__placa { box-shadow: -1px 0 0 var(--linea-alta); }
.muro__tira .media img { transition: transform 900ms var(--ease-suave); }
.muro__tira li:hover .media img { transform: scale(1.05); }

@media (max-width: 900px) {
  /* Cuadradas a tres columnas serían tres bloques de 250 px de alto en una
     tablet: la franja pasa a 3:2 y se comporta como una tira de catálogo. */
  .muro__placa { aspect-ratio: 3 / 2; }
}
@media (max-width: 620px) {
  /* A 390 px tres columnas dan 130 px de foto y no cuentan nada: una sola
     columna, y en 16:9 para que la franja no se coma la pantalla entera. */
  .muro__tira { grid-template-columns: minmax(0, 1fr); }
  .muro__placa { aspect-ratio: 16 / 9; }
  .muro__tira > li + li .muro__placa { box-shadow: 0 -1px 0 var(--linea-alta); }
}


/* ============================================================
   07 · CRUCE DE DIVISIONES — SUBIDO A LA HOJA COMPARTIDA (5-sep-2026)
   ------------------------------------------------------------
   Aquí vivían las 187 líneas de `.cruce-maquinaria`, una de las CUATRO
   implementaciones distintas que tenía el mismo bloque de venta
   cruzada entre divisiones. El cliente pidió tres tarjetas —fuera
   la de presupuesto—, una por columna y EN VERTICAL; como las
   cuatro páginas enseñan exactamente las otras tres divisiones, el
   encargo valía para las cuatro y la composición subió a
   estilos.css §35 (`.otras` / `.odiv`).
   Esta página ya no tiene NADA propio en este bloque.
   Lo que se pierde: la PLACA de tres filas con la furgoneta y el
   enlace a presupuesto. La furgoneta sigue apareciendo en la página
   (`furgoneta-*`, 16 usos) y el CTA final lo pone `.ccta`.
   ============================================================ */

/* ============================================================
   08 · FAQ Y CIERRE — RETIRADOS (sep-2026)
   ------------------------------------------------------------
   Aquí vivían dos bloques propios de esta página, unos 160 renglones:

   · La FAQ en TABLA: `.faq-maq` y `.fichafaq` con sus `__fila/__q/
     __n/__r` y tres media queries. Era una tabla de pregunta y
     respuesta, numerada 01-06 y con todo desplegado.
   · El CIERRE en PLACA: `.cierre-maq` con sus `__int/__texto/__placa/
     __p/__botones/__et/__tel/__h/__h--verano/__mail` y dos media
     queries. Cerraba sin foto, con un bloque amarillo a la derecha.

   Los dos se borran porque el encargo del cliente (sep-2026) es que la
   FAQ de cada división se vea igual que la de la Home (`.faq`,
   estilos.css §18) y que el CTA de cierre se vea igual que el de
   ferretería (`.ccta`, estilos.css §31). Las dos piezas son ahora de
   la hoja compartida y esta página no aporta ni una regla propia.

   Las seis preguntas y sus respuestas viajan literales al acordeón. Del
   cierre viejo se han quedado sin sitio el horario de invierno, el de
   verano y el correo: la plantilla de `.ccta` no tiene hueco para ellos
   y los tres siguen publicados en el pie de la página.

   Lo único que sobrevive de esta zona es `sec-cota` (§10), que es la
   transición propia de la página y sigue puesta en la <section> de la
   FAQ.
   ============================================================ */
/* ============================================================
   09 · CTA — un ajuste acotado sobre el componente compartido
   ------------------------------------------------------------
   El párrafo del cierre dejaba «nave.» sola en la última línea a 1440,
   1024 y 834 (y en la cuarta a 390). `text-wrap: pretty` reparte las
   últimas líneas sin cambiar la medida del párrafo (52ch) ni la rejilla,
   así que el CTA sigue siendo idéntico al de ferretería para gemelos.py.
   Va acotado a `#cta` porque `.ccta__p` vive en estilos.css §31 y esa hoja
   no se toca desde aquí: si el coordinador lo sube a la compartida, esta
   regla sobra.
   ============================================================ */
#cta .ccta__p { text-wrap: pretty; }


/* ============================================================
   11 · PREFERS-REDUCED-MOTION Y SIN JS
   Todo visible y quieto. Aquí no hay carruseles que convertir en
   rejilla —esta página no usa ninguno—, así que lo único que hay
   que dejar dibujado es la cota y quieto el parallax.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .destacado__cont { transform: none !important; }
  .indice-fam { position: static; }
  .asesor__cab { position: static; }
  .fam__fila:hover .fam__media img,
  .fam__fila:hover .fam__detalle img { transform: none !important; }
}

/* Sin JS el índice no se enciende solo, pero sigue siendo un índice de anclas
   que funciona: se deja el primero sin marcar para no mentir. */
html:not(.js) .indice-fam a.is-activo::before { height: 0; }
html:not(.js) .indice-fam a.is-activo { color: var(--apagado); }