/* ============================================================
   DYRECO · Dirección C — NAVE
   p-uniformidad.css — lo que es SOLO de uniformidad.html
   ------------------------------------------------------------
   Se carga DESPUÉS de estilos.css. Los mecanismos compartidos
   (pestañas clip-path, reveals, parallax, contadores, media,
   botones, FAQ) viven en estilos.css y aquí NO se tocan: lo que
   hay debajo es la COMPOSICIÓN propia de esta página y una
   transición de sección nueva, la puntada.

   ⚠️ TRES BLOQUES YA NO VIVEN AQUÍ (1-sep-2026). El cliente pidió
   que las cuatro divisiones vean igual el hero, la FAQ y el cierre,
   así que esos tres pasan a ser componentes compartidos y esta hoja
   se quedó sin sus reglas:
     · hero   → `.hero-div`, estilos.css §30 (era `.uhero`)
     · FAQ    → `.faq`,      estilos.css §18 (era `.ufaq`, conmutador)
     · cierre → `.ccta`,     estilos.css §31 (era `.ucta`)
   Un retoque de forma en cualquiera de los tres va a estilos.css y
   toca a las cuatro páginas; lo que sea SOLO de uniformidad se queda
   aquí como ajuste sobre el componente.

   Índice
     0  Tokens propios
     1  Transición de sección propia — LA PUNTADA
     2  (hero: componente compartido, sin reglas propias)
     3  Sectores — escalera de 4 peldaños
     4  EPIs y calzado — banda a sangre con tabla
     5  Personalización — cifras + pestañas en fila
     6  Proceso — cinco puntadas escalonadas
     7  Merchandising
     8  Cruce de divisiones
     9  (FAQ: componente compartido, sin reglas propias)
     10 (cierre: componente compartido, sin reglas propias)
     11 Costuras y viudas — ajustes de esta página sobre lo compartido
     12 prefers-reduced-motion
   ============================================================ */


/* ============================================================
   0 · TOKENS PROPIOS
   Solo lo que no existe en tokens.css y solo lo usa esta página.
   ------------------------------------------------------------
   Se han ido dos con sus bloques: `--u-over` (la reserva del
   parallax de la torre del hero editorial) y `--u-franja-cta` (el
   alto de la franja del cierre en tableta y móvil). El cierre nuevo
   resuelve su propia banda en estilos.css §31.
   ============================================================ */

:root {
  /* La puntada: el filete amarillo de esta página no es continuo, es
     una costura. Es el recurso que la separa del resto del sitio y
     sale del oficio de la división (uniformidad = confección). */
  --u-puntada: repeating-linear-gradient(90deg,
    var(--amarillo) 0 11px, transparent 11px 20px);

  /* Salto vertical de la escalera de sectores. Baja de 6vw a 4vw (86 →
     58 px a 1440): el desfase es lo que hace escalera, pero cada píxel
     de desfase es una banda de la sección en la que solo hay UN peldaño
     de los dos. Con 4vw se sigue leyendo el escalón y se recorta el
     aire. El proceso ya no lo usa: tiene su propio salto en §6. */
  --u-salto: clamp(32px, 4vw, 80px);

  /* Alto de la FOTO de fondo de la banda de EPIs cuando el contenido
     se apila (≤1024 px). No es un capricho de composición: es lo que
     hace que la foto se pueda servir nítida. Con la foto cubriendo una
     sección de 1.300 px de alto, `cover` la amplía hasta 1.958 px de
     ancho — más que el mayor candidato que existe (1920) — y encima
     cualquier móvil pinta a 2×, así que se veía a media resolución.
     Con la foto convertida en franja, lo que pinta `cover` baja a
     ~950 px y entra la variante grande con holgura. El degradado muere
     en carbón opaco justo donde acaba la foto, así que la costura no
     se ve. */
  --u-franja-epi: clamp(300px, 56dvh, 544px);
}
/* ============================================================
   1 · TRANSICIÓN PROPIA — RETIRADA (5-sep-2026)
   ------------------------------------------------------------
   `.sec--puntada` era la transición de sección de esta página. El cliente
   pidió la misma franja en las cuatro divisiones —la línea fina
   amarilla de maquinaria—, así que todas las secciones estrenan
   `.sec-cota`, que vive en estilos.css §34. Aquí no queda ninguna
   regla: ni la transición ni la segunda capa que desplazaba el
   `.cont`, ni sus guardas de parallax y de reduced-motion.
   ============================================================ */

/* ============================================================
   2 · HERO — sin reglas propias
   ------------------------------------------------------------
   El hero de esta página es el COMPONENTE COMPARTIDO `.hero-div`
   (estilos.css §30), el mismo mosaico a sangre de rotulación: el
   cliente pidió que las cuatro divisiones lo vean igual.

   Aquí vivía `.uhero` — el hero editorial de dos columnas con la
   torre de imagen sangrando por la derecha y el parallax de dos
   capas (`.uhero__marco`, `.uhero__foto`, `.uhero__detalle`,
   `.uhero__claim`, `.uhero__indice`) — con sus cuatro consultas de
   ancho y las dos de ventana baja. Todo eso se ha borrado: ni una
   regla suya queda en esta hoja, y el `--u-over` que reservaba el
   recorrido del parallax se ha ido con ella.

   Si algún día hay que ajustar el hero SOLO de uniformidad, la regla
   va aquí (`.hero-div` + un ajuste), nunca en estilos.css §30, que
   toca a las cuatro páginas a la vez.
   ============================================================ */
/* ============================================================
   3 · SECTORES — CUATRO FILAS Y UNA SOLA FOTO (6-sep-2026)
   ============================================================ */
/* ============================================================
   UNIFORMIDAD · #sectores — ÍNDICE DE OFICIOS
   Sustituye a la «escalera de 4 peldaños» (p-uniformidad.css §3).
   ------------------------------------------------------------
   QUÉ ESTABA MAL. Cuatro peldaños con cuatro anchos de foto
   distintos (780/548/548/780) y dos de ellos caídos --u-salto:
   nada arrancaba a la misma altura ni acababa en el mismo borde,
   así que se leían como cuatro piezas sueltas y no como UNA serie
   de cuatro. Medido: dos huecos verticales muertos de 100,8 y
   177,3 px, y dos pies de foto a 18,9 px de distancia — un fallo
   de puntería, no una composición.
   Y encima el problema que el diseño no podía tapar: las CUATRO
   fotos son la MISMA tienda desde cuatro ángulos (mismo techo
   pintado de cielo, mismas estanterías rojas), así que ninguna
   distinguía su sector. En assets/img/ no hay foto de cocina, de
   obra, de pantalán ni de nave: cambiar de fichero no arregla nada.

   QUÉ SE HACE. Se le quita a la foto el trabajo de distinguir.
   · UNA sola fotografía, grande y ancha, encabeza el bloque: es la
     tienda, y como es una sola no promete ser cuatro cosas.
   · Los cuatro sectores pasan a ser un ÍNDICE: cuatro COLUMNAS con
     la misma estructura, el mismo ancho y los mismos filetes. Los
     cuatro números caen a plomo, los cuatro nombres a plomo, los
     cuatro párrafos a plomo y las cuatro listas a plomo (medido:
     Δ 0,0 px en alto, en arranque de párrafo y en arranque de lista,
     en los siete anchos). La serie se lee como serie, que es lo que
     el bloque promete en su titular.
   · Cero movimiento propio: el único hover que había (`.pel:hover`)
     se retira. Lo que entra lo mueve el [data-reveal] compartido.

   BAUTIZO (§29 de estilos.css consultado antes de nombrar).
   · `.usect` se CONSERVA: es el nombre que esta sección ya tenía en
     esta hoja, y sigue siendo suya (`usect__pie` se reaprovecha).
   · `.uofi` (fila de oficio) es NUEVO — grep limpio en css/, js/ y
     las 8 páginas. NO puede llamarse `sector*`: §29-A lo reserva
     para el sistema (`.sector`, `.sectores`, de la Home).
   · Se retiran `.escalera` y `.pel*`, que no los usa nadie más.
   ============================================================ */

/* La sección no declara borde propio: la costura de arriba la dibuja
   `sec-cota` (estilos.css §34) y un `border-top` aquí se leería como
   línea doble. El `padding-block` es el del sistema, sin tocar. */
.usect { padding-block: var(--sec-y); }


/* ------------------------------------------------------------
   1 · LA FOTO — una sola, ancha, y encabezando el bloque
   ------------------------------------------------------------
   LA CAJA ES UNA FRANJA Y EL CORTE VA BAJO. El original es un gran
   angular donde el techo pintado de cielo se lleva la mitad de
   arriba: encuadrada al centro, la banda salía azul de pared a pared
   y el bloque entero se iba de color contra el carbón. Con 2,35:1 y
   `object-position` al 90 % se ve del 33 % al 96 % del alto —el
   maniquí de alta visibilidad, los percheros, el rótulo de marca y la
   ropa colgada— y el cielo se queda en un filo. La foto pasa a
   enseñar PRODUCTO, que es de lo que va la página.
   Y la proporción se eligió MIDIENDO, no a ojo: a 2,85:1 el encuadre
   es el mismo pero la foto se queda en 477 px de alto a 1440; a
   2,35:1 sube a 578 px (787.000 px² frente a 648.000, un 21 % más de
   fotografía) sin dejar entrar más techo. Por debajo de 2,2:1 empieza
   a mandar la mesa del primer plano.
   El `sizes` va en el HTML y es el ancho de la caja: la foto es 3:2 y
   la caja mucho más ancha de proporción, así que `cover` recorta por
   ALTO y el ancho pintado ES el de la caja, sin factor que añadir.
   ------------------------------------------------------------ */
.usect__foto {
  aspect-ratio: 2.35 / 1;
  margin-bottom: clamp(40px, 4.4vw, 76px);
}
.usect__foto img { object-position: 50% 90%; }


/* ------------------------------------------------------------
   2 · EL ÍNDICE — cuatro columnas idénticas
   ------------------------------------------------------------
   Cuatro tramos iguales de la retícula, mismo gap y el `stretch` de
   serie: las cuatro fichas miden lo mismo de alto y arrancan a la
   misma altura. Ese es todo el arreglo del bloque — antes eran
   cuatro anchos de foto distintos (780/548/548/780) y dos alturas de
   arranque distintas, y por eso se leía como cuatro piezas sueltas.
   Las CUATRO horizontales que ordenan la serie: el filete que
   encabeza cada columna, la línea de los cuatro números, la de los
   cuatro nombres y el filete que abre las cuatro listas de prendas.
   ------------------------------------------------------------ */
.usect__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(40px, 4vw, 64px) clamp(24px, 2.6vw, 44px);
}

/* Cada ficha es una columna con un filete de 1 px por sombrero. Los
   cuatro caen a la misma altura y con el mismo hueco entre ellos: de
   un vistazo son UNA regla segmentada, que es lo que convierte cuatro
   piezas en una serie. */
.uofi {
  display: flex;
  flex-direction: column;
  padding-top: clamp(18px, 1.8vw, 26px);
  border-top: 1px solid var(--linea);
}

/* El número es LUZ, no relleno: cifra amarilla sobre carbón, sin
   caja ni pastilla. Va a cuerpo de H4 y no de kicker (19,4 px a 1440
   frente a 13) porque es la marca de posición con la que enlaza el
   índice del hero —01…04, uniformidad.html 140-143— y a 13 px no se
   veía. El tracking baja de .22em a .1em: a ese cuerpo, el de kicker
   separaba tanto las dos cifras que dejaban de leerse como número. */
.uofi__n {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1;
  letter-spacing: .1em;
  color: var(--amarillo);
  margin-bottom: clamp(10px, 1.1vw, 15px);
}

/* EL NOMBRE, que es lo que se busca en este bloque. Sube de los
   28,8 px del diseño anterior —donde pesaba menos que su propio
   párrafo— a 33,1 px a 1440: queda declaradamente entre el H2 de la
   sección (57,6) y el cuerpo, sin competir con el titular.
   Medido de 1920 a 360 px: el más largo, «Restaurante y hotel», cabe
   en UNA línea en los siete anchos (la holgura más justa son 20,1 px,
   a 1025), así que los cuatro párrafos arrancan solos a la misma
   altura y no hay que reservar una segunda línea que estaría vacía
   las cuatro veces. `balance` queda por si el copy crece. */
.uofi__t {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.45rem, 2.3vw, 2.3rem);
  line-height: .98;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--texto);
  text-wrap: balance;
  margin-bottom: clamp(14px, 1.5vw, 20px);
}

/* Cuerpo --fs-sm → `--medida-s`. Con los 66ch que valía `--medida` antes
   del 8-sep-2026 esta columna daba 82 caracteres por línea a 1440; el
   peldaño pequeño la deja en 60. Ver tokens.css §2.bis. */
.uofi__p {
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--apagado);
  max-width: var(--medida-s);
  text-wrap: pretty;
  margin-bottom: clamp(24px, 2.4vw, 36px);
}

/* LAS PRENDAS VAN ABAJO DEL TODO. `margin-top:auto` las ancla al pie
   de la ficha: como las cuatro fichas miden lo mismo y las cuatro
   listas tienen tres prendas, las doce líneas caen en las mismas tres
   horizontales aunque un párrafo ocupe una línea más que otro. El
   filete de arriba convierte ese hueco variable en una costura: es la
   segunda regla que cruza el bloque entero.
   Marca diagonal amarilla —el activo gráfico de la marca, el mismo
   `skewX(-30deg)` del kicker— y ningún filete DEBAJO de cada prenda:
   cuatro fichas × tres prendas eran doce reglas grises compitiendo
   con las que ordenan las columnas. */
.uofi__items {
  display: grid;
  gap: clamp(9px, 1vw, 12px);
  margin-top: auto;
  padding-top: clamp(16px, 1.7vw, 24px);
  border-top: 1px solid var(--linea);
}
.uofi__items li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-sm);
  line-height: var(--lh-corto);
  color: var(--texto);
}
.uofi__items li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 9px; height: 2px;
  background: var(--amarillo);
  transform: skewX(-30deg);
}


/* ------------------------------------------------------------
   3 · CIERRE DEL ÍNDICE
   El enlace NO va dentro del párrafo: un enlace en texto corrido mide
   20 px de alto y el objetivo táctil mínimo son 44. Va suelto a la
   derecha como `.enlace-flecha`, que ya nace con sus 44 px. Su filete
   superior es la línea que CIERRA la tabla.
   ------------------------------------------------------------ */
.usect__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px var(--gap);
  margin-top: clamp(40px, 4vw, 64px);
  padding-top: clamp(18px, 1.8vw, 26px);
  border-top: 1px solid var(--linea);
}
/* Cuerpo corriente (--fs-body): peldaño de en medio. Antes 48ch = 470 px.
   (Aquí había además un comentario huérfano de otra regla, el que hablaba de
   62ch y del «párrafo de la ficha»: se va con el parche.) */
.usect__pie p { color: var(--apagado); max-width: var(--medida); }


/* ------------------------------------------------------------
   4 · TABLETA (621-1024) — dos columnas
   A cuatro columnas, una ventana de 1.024 px deja la ficha en 212 px
   y el párrafo en cinco líneas de 31 caracteres. A dos columnas la
   ficha mide 456 px y el párrafo vuelve a tres líneas.
   La franja NO cambia de proporción aquí: 2,35:1 sigue dando 402 px
   de alto a 1024 y 334 a 834, y el encuadre es el mismo que en
   escritorio. Solo cambia la rejilla.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .usect__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------
   5 · MÓVIL (≤620) — una columna
   16:9 es lo más ancho que aguanta la franja sin quedarse en un hilo
   (192 px de alto a 390), y con el corte al 88 % sigue mandando la
   ropa. Y en una columna la ficha ya no comparte alto con nadie: el
   ancla de las prendas al pie sobra y solo separaría de más.
   ------------------------------------------------------------ */
@media (max-width: 620px) {
  .usect__foto { aspect-ratio: 16 / 9; }
  .usect__foto img { object-position: 50% 88%; }
  .usect__lista { grid-template-columns: 1fr; gap: clamp(32px, 7vw, 44px); }
  .uofi__items { margin-top: 0; }
  .usect__pie { gap: 14px; }
}


/* ------------------------------------------------------------
   6 · MOVIMIENTO REDUCIDO — no hace falta ninguna regla
   Este bloque no anima NADA propio: sin hover, sin parallax, sin
   contador y sin conmutador. Lo único que se mueve al entrar es el
   `[data-reveal]` compartido, que estilos.css §27 ya deja quieto.
   Verificado con `prefers-reduced-motion: reduce`: mismo alto
   (1.663 px a 1440), mismo contenido visible y cero animaciones en
   `document.getAnimations()`. Y sin JS: los 20 nodos de texto
   visibles y la cota dibujada.
   ⚠️ Al trasplantar se BORRA de §12 de p-uniformidad.css la línea
   `.pel:hover .pel__media img,` — su bloque se queda con
   `.pest__panel:hover .upan__grande img`, que sigue vivo.
   ------------------------------------------------------------ */


/* ============================================================
   4 · EPIs — PLACA DE SEIS Y MARQUEE DE MARCAS (7-sep-2026)
   ============================================================ */
/* ============================================================
   4 · EPIs Y PROTECCIÓN — MITAD INFERIOR (rediseño 7-sep-2026)
   ------------------------------------------------------------
   La mitad de arriba —cabecera partida, entradilla, enlace y foto
   apaisada— se queda EXACTAMENTE como está: le gusta al cliente y
   no se toca ni una declaración. Se rehacen las dos piezas de abajo.

   (a) LA PLACA. Eran seis celdas en fila separadas por filetes
   verticales, con una barrita amarilla en diagonal arriba y el
   rótulo a 16,7 px. Los tres defectos, dichos por el cliente:
     · «no pasa nada al mirarlas» → el único evento era un cambio de
       fondo de carbón a `--sup`, ocho puntos de luminancia.
     · «no hay jerarquía dentro de la celda» → rótulo 16,7 px y valor
       14,7: un escalón de 2 px, o sea ninguno.
     · «el amarillo aparece seis veces igual sin significar nada» →
       seis tajos idénticos, decoración pura.

   Ahora cada una es una PLACA DE VERDAD, partida en dos tonos:
     · la CHAPA (`--sup-2`) con el rótulo a cuerpo de H3;
     · el CAMPO del dato (`--sup`), colgado de un filete de 1 px que
       cruza la placa de canto a canto y que baja hasta el borde
       inferior. Es lo que hace que el hueco a la derecha de «S1P, S3
       y SRC» se lea como campo de una ficha y no como aire sobrante
       de una tarjeta.
   Escalón tipográfico medido a 1440: 28,8 px contra 15,1 = 1,9×
   (antes 1,14×). El rótulo más largo en tinta, «Calzado de
   seguridad», pinta 261 px en una caja de 389 —el 67 %— y entra de
   una línea en los siete anchos. El más corto, «Alta visibilidad»,
   llena el 49 %: es lo que da de sí el texto, y por eso el campo del
   dato de abajo es lo que cierra la placa por la derecha.

   ⚠️ EL CORTE ES LA SILUETA DEL WORDMARK, Y VA EN LA DIAGONAL BUENA.
   Dos esquinas cortadas, arriba a la izquierda y abajo a la derecha,
   las dos con la inclinación `/` del `skewX(-30deg)` del kicker y del
   `clip-path` del `.btn` (estilos.css §02). Se probó primero con un
   solo corte arriba a la derecha: esa es la diagonal CONTRARIA a la
   de la marca (`\`) y se descartó en captura.
   ⚠️ Y POR ESO LA PLACA NO LLEVA `border`. Ya está escrito en la casa,
   en `.btn--linea`: «un borde de 1 px se parte contra el corte
   diagonal del clip-path; se resuelve como superficie». La placa se
   define por su superficie y los dos cantos cortados los remata una
   línea propia dibujada con gradiente, que sí sigue la diagonal.

   ⚠️ NI NÚMEROS NI AMARILLO EN REPOSO, Y LAS DOS COSAS SON MEDIDAS,
   NO GUSTO.
     · Números: esta página ya numera DOS veces —`.uofi__n` 01-04 en
       #sectores, que va JUSTO ENCIMA, y `.utramo__n` 01-05 en
       #proceso—. Una tercera serie a 200 px de la primera se leería
       como su continuación.
     · Amarillo: el encargo es quitarle el papel de adorno repetido.
       Pasa a ser LO QUE SE ENCIENDE, y de una en una: al pasar el
       ratón o al llegar el foco se iluminan los dos cantos cortados
       de ESA placa, su campo sube al tono de la chapa —los dos tonos
       se funden— y la designación pasa a texto pleno. Es la doctrina
       de `.cap__ord` en p-empresa.css (hueco gris en reposo, amarillo
       al mirarlo) y la del contrato: el amarillo es LUZ, no relleno.
       Cero movimiento: es una sección de lectura.
   La sección NO se queda sin amarillo en reposo: lo ponen la cota de
   arriba, la diagonal del kicker y la flecha del enlace.

   (b) LA TIRA DE MARCAS. Era una fila estática a 13-16 px con la
   etiqueta encima. Adopta el `.marquee` compartido (estilos.css §11),
   que es lo que ya usan ferretería (#marcas-sector) y maquinaria
   (#marcas, puesto el 6-sep-2026 a petición del propio cliente, que
   pidió que los logos pasaran «todos en la misma fila»). Los nombres
   pasan a 20-34 px: EXACTAMENTE el mismo cuerpo que en esas dos
   páginas —medido: 34,0 px a 1920, 33,1 a 1440, 20,0 a 390— y 2,25×
   lo que medían aquí. Va FUERA de `.cont`, como en las otras dos, para
   barrer de borde a borde; la máscara de los extremos la pone el
   componente y el filete que enmarca la banda lo pone `.uepi__marquee`.

   ⚠️ LA CUENTA DE LA PISTA — TRES GRUPOS, NO DOS. La animación
   traslada la pista un −50 %, así que MEDIA pista tiene que ser más
   ancha que la ventana o se ve el vacío entre la cola y la cabeza.
   Medido con la Saira Condensed real, un grupo de las nueve marcas
   mide 1.866 px a 1920. Con DOS grupos media pista son esos mismos
   1.866 px contra una ventana de 1.920: NO LLEGA, faltan 54 px. Con
   TRES son 2.800 y sobran 880. Comprobado en los siete anchos: media
   pista cubre la ventana con +880 (1920), +1.145 (1440), +1.018
   (1280), +815 (1024), +710 (834), +897 (620) y +1.127 px (390).
   El de 834 es el más justo y sigue sobrando una ventana entera.
   Solo el primer grupo se anuncia; los otros dos van `aria-hidden`
   para que un lector de pantalla no lea nueve marcas tres veces.
   Velocidad: 5.599 px de pista, media pista 2.800 en los 56 s del
   componente = 50,0 px/s. Maquinaria, con sus cuatro grupos de ocho,
   va a 50,3 px/s: misma velocidad aparente sin tocar la duración, así
   que las tres páginas se mueven igual.
   ============================================================ */

/* ⚠️ LA REGLA DE LA SECCIÓN SE PERDIÓ EN EL TRASPLANTE Y VUELVE AQUÍ
   (7-sep-2026). Al sustituir el §4 entero por el rediseño de la mitad
   inferior, se fue con él el `.uepi` que declaraba el relleno de la sección,
   y el bloque se quedó a 0/0 mientras sus nueve vecinas iban a 144/144 en
   escritorio y 96/96 por debajo de 1024. El cliente lo vio enseguida: pidió
   «relleno arriba y abajo para que respire y se asemeje a los demás».
   Las cinco declaraciones que la acompañan son las que neutralizan lo que
   esta sección heredaba de cuando era una BANDA A SANGRE con la foto de
   fondo: sin ellas volvería el `min-height` de la banda y su recorte. */
.uepi {
  position: relative;
  isolation: auto;
  overflow: visible;
  min-height: 0;
  display: block;
  padding-block: var(--sec-y);
  border-block: 0;
}

/* --- (a) LA PLACA DE SEIS ------------------------------------- */

/* Se anula lo que traía la placa vieja y que aquí ya no aplica: los filetes
   de reparto, el tajo amarillo con su `left` y su `skewX`, y la reserva de dos
   líneas del rótulo en móvil.
   ⚠️ AL TRASPLANTAR ESTE BLOQUE DE ANULACIÓN NO VA: en producción se sustituye
   el bloque entero de p-uniformidad.css y no queda nada que anular. Está aquí
   porque el prototipo carga la hoja real, y sin él el `left: var(--uepi-x)` y
   el `transform: skewX(-30deg)` del tajo viejo seguían gobernando mi propio
   `::before` —medido: la línea del corte aparecía inclinada a la izquierda de
   la placa en vez de sobre el canto—. */
.uepi__celda,
.uepi__celda:nth-child(6n + 1),
.uepi__celda:nth-child(3n + 1),
.uepi__celda:nth-child(2n + 1) { border: 0; }
.uepi__celda::before { left: auto; transform: none; width: auto; height: auto; }
.uepi__celda dt { min-height: 0; }

.uepi__placa {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Canal estrecho a propósito: seis placas separadas, no seis islas. Con 14 px
     a 1440 las dos filas se siguen leyendo como una sola pieza de seis. */
  gap: clamp(10px, 1vw, 16px);
  margin: 0;
}

.uepi__celda {
  /* --uepi-px: el relleno lateral. Sale por variable porque el filete del
     valor lo necesita en negativo para cruzar la placa de canto a canto. */
  --uepi-px: clamp(18px, 1.9vw, 30px);
  /* …y el vertical, por lo mismo: el campo del valor baja hasta el canto. */
  --uepi-py: clamp(20px, 1.9vw, 30px);
  /* EL CORTE. 37 px a 1440 sobre una placa de 444: la muesca se ve a la primera
     y no toca el rótulo, que arranca por debajo del bisel. */
  --uepi-corte: clamp(26px, 2.6vw, 44px);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--uepi-py) var(--uepi-px);
  background: var(--sup-2);
  /* LA SILUETA DEL WORDMARK. Dos cortes en esquinas opuestas —arriba a la
     izquierda y abajo a la derecha— con la MISMA inclinación `/` que el
     `skewX(-30deg)` del kicker y que el `clip-path` del `.btn` (estilos.css
     §02). Un corte en la otra diagonal (`\`) es la inclinación contraria a la
     de la marca: se probó y se descartó. */
  clip-path: polygon(
    var(--uepi-corte) 0, 100% 0,
    100% calc(100% - var(--uepi-corte)), calc(100% - var(--uepi-corte)) 100%,
    0 100%, 0 var(--uepi-corte));
  transition: background 620ms var(--ease);
}
/* AL MIRAR LA PLACA no se «ilumina una tarjeta»: la ficha se despierta. El
   campo del dato sube al tono de la chapa —los dos tonos se funden en uno—,
   la designación pasa a texto pleno y los dos biseles se encienden en
   amarillo. Cero movimiento: es una sección de lectura, no un carrusel. */
.uepi__celda:hover dd,
.uepi__celda:focus-within dd { background: var(--sup-2); }

/* LA LÍNEA DE LOS DOS CORTES, en reposo. Dos gradientes de 45° metidos en
   sendos cuadrados de lado `--uepi-corte`, uno en cada esquina cortada.
   ⚠️ LA BANDA SE APOYA ENTERA HACIA DENTRO (del 50 % del eje del gradiente
   —que es exactamente el canto cortado— hacia el interior), no centrada en el
   50 %. El pseudoelemento cae dentro del `clip-path`, así que una banda
   centrada pierde su mitad exterior y de 2 px quedaba 1 que el antialias del
   propio recorte se comía: medido en captura, la línea no se veía. Apoyada por
   dentro se pintan los 2 px enteros (3 los del amarillo, para que la luz se
   lea de un vistazo y no haya que buscarla).
   ⚠️ Y por eso la placa no lleva `border`: estilos.css §02 ya lo escribe para
   `.btn--linea` —«un borde de 1 px se parte contra el corte diagonal del
   clip-path; se resuelve como superficie»—. Aquí, igual. */
.uepi__celda::before,
.uepi__celda::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Por ENCIMA del campo del valor (`dd`, z-index 1): el corte de abajo a la
     derecha atraviesa ese campo y, por debajo, su línea quedaba tapada. */
  z-index: 2;
}
.uepi__celda::before {
  background:
    linear-gradient(135deg, transparent 0 50%, var(--linea-alta) 50% calc(50% + 2px), transparent calc(50% + 2px))
      top left / var(--uepi-corte) var(--uepi-corte) no-repeat,
    linear-gradient(315deg, transparent 0 50%, var(--linea-alta) 50% calc(50% + 2px), transparent calc(50% + 2px))
      bottom right / var(--uepi-corte) var(--uepi-corte) no-repeat;
}
/* …y las mismas dos líneas en amarillo, encendidas al mirar la placa. Es el
   ÚNICO amarillo de la pieza, y solo se enciende de una en una. */
.uepi__celda::after {
  opacity: 0;
  transition: opacity 520ms var(--ease);
  background:
    linear-gradient(135deg, transparent 0 50%, var(--amarillo) 50% calc(50% + 3px), transparent calc(50% + 3px))
      top left / var(--uepi-corte) var(--uepi-corte) no-repeat,
    linear-gradient(315deg, transparent 0 50%, var(--amarillo) 50% calc(50% + 3px), transparent calc(50% + 3px))
      bottom right / var(--uepi-corte) var(--uepi-corte) no-repeat;
}
.uepi__celda:hover::after,
.uepi__celda:focus-within::after { opacity: 1; }

/* EL RÓTULO, que es lo que se busca aquí. Sube de 16,7 px a 28,8 —cuerpo de
   H3— y queda un escalón por debajo del nombre de sector de #sectores (33,1 px
   a 1440), que es el nivel de arriba. Medido con la Saira Condensed real:
   «Calzado de seguridad», el más largo en tinta, pinta 261 px a 1440 en una
   caja de 389 (67 %) y entra de UNA línea en los siete anchos: 290/476 a
   1920, 232/343 a 1280, 199/269 a 1024, 219/352 a 834, 199/245 a 620 y
   199/306 a 390. */
.uepi__celda dt {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.02;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--texto);
  margin-bottom: clamp(12px, 1.15vw, 18px);
}

/* EL VALOR, colgado de un filete que CRUZA LA PLACA ENTERA. El filete es lo
   que convierte la placa en una ficha —rótulo arriba, dato abajo, costura en
   medio— y lo que la separa de las listas de «filete superior + texto» que
   esta misma página usa dos veces más abajo (`.destacado__puntos` y
   `.umerch__lista`): allí el filete es el techo de la celda; aquí es su
   partición interna. `margin-top:auto` lo clava al pie, así que si un rótulo
   salta a dos líneas los seis valores siguen cerrando a la misma altura. */
.uepi__celda dd {
  position: relative;
  z-index: 1;
  margin: auto calc(var(--uepi-px) * -1) calc(var(--uepi-py) * -1);
  /* El relleno de la derecha lleva medio bisel de más: el corte de abajo a la
     derecha entra en este campo y el dato no puede meterse debajo de él. */
  padding: clamp(12px, 1.2vw, 18px) calc(var(--uepi-px) + var(--uepi-corte) * .5)
           clamp(15px, 1.5vw, 24px) var(--uepi-px);
  border-top: 1px solid var(--linea);
  /* CUERPO DE PÁRRAFO Y NO `--fs-sm`. Con el rótulo a 28,8 px, los 13,7 del
     token pequeño dejaban la designación —que es EL DATO que se busca: S1P,
     S3, clase 2— como un pie de foto. A 15,1 px sigue habiendo un escalón de
     1,9× con el rótulo y el campo deja de leerse vacío. */
  font-size: var(--fs-body);
  /* EL CAMPO DEL DATO. La placa se parte en dos tonos: arriba la chapa
     (`--sup-2`) con el rótulo, abajo el campo hundido con la designación
     técnica. Es lo que hace que el hueco a la derecha del dato se lea como
     campo vacío de una ficha y no como aire sobrante de una tarjeta. */
  background: var(--sup);
  line-height: var(--lh-corto);
  color: var(--apagado);
  transition: color 620ms var(--ease), background 620ms var(--ease);
}
.uepi__celda:hover dd,
.uepi__celda:focus-within dd { color: var(--texto); }

/* --- Anchos de la placa ------------------------------------------ */
@media (max-width: 900px) {
  /* A tres columnas por debajo de 901 px la placa baja de 267 px y el rótulo
     se queda a 22 px de holgura del bisel. Dos columnas le devuelven ancho…
     …y con el ancho hay que devolverle CUERPO: la fórmula de escritorio
     (2vw) da 18 px a 900 y el rótulo se quedaba llenando el 52 % de una caja
     de 375. Con 2,9vw pinta 236 px sobre 375 (63 %) y sigue por debajo del
     cuerpo de escritorio. */
  .uepi__placa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uepi__celda dt { font-size: clamp(1.375rem, 2.9vw, 1.75rem); }
}
@media (max-width: 600px) {
  /* UNA columna. A 390 px, dos placas de 166 dejan una caja de texto de 120 y
     «Calzado de seguridad» pide 199: tres renglones de dos palabras. En una
     columna la caja es de 296 y el rótulo entra de una. */
  .uepi__placa { grid-template-columns: 1fr; }
  .uepi__celda { --uepi-corte: 26px; }
}

/* --- (b) LA TIRA DE MARCAS --------------------------------------- */

/* ⚠️ AL TRASPLANTAR: `.uepi__marcas` y `.uepi__marcas li` de la §4 vieja se
   BORRAN. Ya no hay ninguna `<ul class="uepi__marcas">` en el marcado —las
   nueve marcas viven ahora en los `.marquee__grupo`— y sus dos reglas (el
   `space-between` de la fila y el cuerpo de 13-16 px) quedan sin dueño.
   También sale la línea `.uepi__celda:hover { --uepi-tajo: 26px; }` de la
   @media de movimiento reducido: el tajo ya no existe. */

/* El pie ya no lleva filete propio: el que enmarca la tira lo pone el
   marquee, y a sangre. Aquí solo queda el rótulo. */
.uepi__pie {
  /* Menos que `--bloque` (72 px a 1440): la banda de marcas ya trae su propio
     filete superior a sangre, así que el aire de bloque entero duplicaba la
     separación. Medido: la sección baja 20 px sin que el rótulo se pegue. */
  margin-top: clamp(34px, 3.6vw, 64px);
  padding-top: 0;
  border-top: 0;
}
.uepi__pie-t { margin-bottom: clamp(16px, 1.6vw, 24px); }

.uepi__marquee {
  border-block: 1px solid var(--linea);
  padding-block: clamp(18px, 2vw, 30px);
}
/* Aire entre el rótulo de la tira y la banda: el rótulo vive dentro de
   `.cont` y la banda va a sangre, así que la separación la pone la banda. */
.uepi__pie + .uepi__marquee { margin-top: clamp(14px, 1.5vw, 22px); }

/* --- Movimiento reducido ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* La luz del corte no se enciende sola ni se apaga: aparece con el hover
     sin transición. El componente `.marquee` ya trae su propia versión
     arrastrable en estilos.css §27. */
  .uepi__celda,
  .uepi__celda::after,
  .uepi__celda dd { transition: none; }
}


/* ============================================================
   4-bis · EPIs — EL CUERPO NORMATIVO (8-sep-2026)
   ------------------------------------------------------------
   POR QUÉ EXISTE. La auditoría de SERP del 8-sep-2026 descartó cuatro
   candidatos a artículo —guantes y EN 388, categorías I/II/III, alta
   visibilidad EN ISO 20471 y trabajos en altura— porque los cuatro
   chocaban contra ESTA sección, cuyo clúster son 810 búsquedas/mes con
   geo CERO y competencia LOW. Su conclusión, literal: «no faltan cuatro
   artículos, es que /uniformidad/epis está infradesarrollada y ese
   contenido es suyo». La sección pasa de 150 palabras a resolver la
   consulta real, que es «qué EPI necesito para este puesto».

   ⚠️ LA MITAD DE ARRIBA NO SE TOCA. Cabecera partida, entradilla, enlace
   y foto apaisada siguen exactamente como estaban (le gustan al cliente,
   §4). Las seis placas tampoco cambian de forma: solo se corrigen DOS
   datos caducados y uno incompleto — ver «CORRECCIONES DE DATO» abajo.

   ------------------------------------------------------------
   LAS CUATRO FORMAS NUEVAS, Y POR QUÉ CADA UNA ES DISTINTA

   El contrato del proyecto dice que dos piezas no pueden moverse ni
   componerse igual. En esta página ya viven: la escalera en zigzag de
   #sectores, las placas cortadas en diagonal de aquí arriba, el marquee,
   la banda con parallax y los cuatro `.punto` de filete superior de
   #calzado, el raíl vertical con cabecera pegajosa de #decidir, las
   cuatro fichas de #tecnicas, la costura de cinco puntadas de #proceso y
   la rejilla de seis de #merchandising. Así que:

   · `.ucat`  — TABLA de verdad, la única de las cuatro divisiones. Es la
     forma que pedía la auditoría («va como tabla de normativa + FAQ
     dentro de la comercial») y la correcta para tres filas que se
     comparan en horizontal. Filetes de 1 px y nada más: cero cajas.
   · `.umark` — REGLETA de seis casillas en tira continua, partida por
     filetes verticales. Se lee como un marcado estampado, que es lo que
     es. ⚠️ NO repite la placa de arriba —ni fondo elevado, ni los dos
     cortes en diagonal— justo porque las dos son seis: a 700 px de
     distancia, con la misma piel, la segunda leería como continuación
     de la primera.
   · `.uclase` — tres peldaños que DIBUJAN el dato: la clase de alta
     visibilidad se mide en metros cuadrados, así que cada peldaño lleva
     una regla con el tramo proporcional a los suyos (0,14 · 0,50 · 0,80
     sobre el 0,80 de la clase 3 = 17,5 % · 62,5 % · 100 %). Es la única
     pieza de la página que compara con una longitud.
   · `.ucierre` — dos fichas anchas con filete IZQUIERDO. El filete
     superior ya lo usan `.destacado__puntos` y `.umerch__lista`; de
     canto es otra pieza.

   EL AMARILLO, IGUAL QUE EN LAS PLACAS: no rellena, se ENCIENDE, y de uno
   en uno. En reposo el bloque va de carbón y grises; al pasar el ratón o
   llegar el foco se ilumina la cifra de esa fila, esa casilla o esa
   ficha. La única excepción es la regla de `.uclase`, donde el amarillo
   es el DATO —4 px de alto, una regla, no una superficie— y por eso está
   encendida desde el principio: apagarla dejaría el bloque sin lo que
   viene a enseñar.

   ------------------------------------------------------------
   🔴 LA MEDIDA DE LECTURA VA EN PÍXELES, NO EN `ch`

   `--medida` vale 66ch = 646 px y en Public Sans renderiza 86 caracteres
   reales: la `ch` es el ancho del «0» y aquí miente por arriba. El tope
   del proyecto son 66 caracteres REALES, así que estos párrafos se topan
   con `--lectura`, en rem, y se comprueban reconstruyendo las líneas con
   `Range.getClientRects()`. Medido tras fijarlo (peor línea de cada
   bloque, en caracteres): ver el informe de la entrega.

   ------------------------------------------------------------
   CORRECCIONES DE DATO EN LO QUE YA HABÍA (uniformidad.html)

   Tres, y las tres son normativa caducada o incompleta, no estilo:
   1. Placa de calzado, «S1P, S3 y SRC» → «S1P y S3, EN ISO 20345». La
      revisión de 2022 RETIRÓ los marcados SRA, SRB y SRC: el ensayo de
      deslizamiento pasó a ser requisito básico de todo el calzado de
      seguridad y solo se marca aparte «SR», así que la placa anunciaba un
      marcado que ya no se estampa. Se sustituye por las DOS clases que la
      web ya publica en #calzado («Categorías S1P y S3») más la norma; S6 y
      S7 —las dos clases nuevas de 2022, con el zapato entero impermeable—
      se cuentan en la ficha de cierre, que habla de la NORMA, y no en la
      placa, que se lee como lo que hay en el lineal.
   2. `.punto` de #calzado, «El sello SRC es el nivel más alto de agarre
      en suelo resbaladizo» → mismo motivo. Es la única línea que se toca
      fuera de #epis, y se toca porque una web de EPIs que especifica mal
      una protección no comete una errata: crea un riesgo.
   3. Placa de altura, «Arnés y línea de vida» → «Arnés anticaídas
      EN 361». §9 dato 15 del dosier de hechos deja SIN CONFIRMAR si
      Dyreco instala y certifica líneas de vida, y la propia auditoría
      avisa de que «línea de vida tejado» (390/mes) es demanda de
      INSTALACIÓN: posicionar ahí trae llamadas que hay que rechazar. El
      dato pasa a nombrar el equipo que sí se vende, y su norma.
   Y una de alcance: la placa de alta visibilidad decía «Clase 2 y clase
   3» cuando abajo se desarrollan las tres.

   ------------------------------------------------------------
   FUENTES DE CADA CIFRA (verificadas el 8-sep-2026, contra la fuente y
   no de memoria). Ninguna afirmación de este bloque va sin una:

   · Categorías I/II/III y la lista de riesgos de la III — Reglamento (UE)
     2016/425, ANEXO I, literal del DOUE L 81/73 (boe.es/doue/2016/081).
   · Quién certifica cada categoría — mismo Reglamento, artículo 19:
     cat. I módulo A (control interno); cat. II examen UE de tipo
     (módulo B) + módulo C; cat. III módulo B + C2 o D.
   · El CE con cuatro cifras detrás — artículo 17.3, literal: «En el caso
     de los EPI de categoría III, el marcado CE irá seguido del número de
     identificación del organismo notificado».
   · EN 388: orden de los cuatro dígitos, rangos (1-4, 1-5, 1-4, 1-4), la
     quinta letra A-F del corte TDM (ISO 13997) y la P de impacto, y qué
     significa una X — INSST, ficha «Guantes mecánicos» (insst.es).
   · Los valores: abrasión nivel 4 = 8.000 ciclos, rasgado nivel 4 = 75 N,
     perforación nivel 4 = 150 N, índice de corte 1,2 a 20, TDM de 2 N (A)
     a 30 N (F) — uvex safety, tabla de niveles EN 388, contrastada con la
     ficha del INSST.
     ⚠️ Se descartó una tabla de proveedor que daba la abrasión en
     800/2.000 ciclos: dos fuentes independientes dan 8.000 en el nivel 4.
     Por eso no se publica la escalera entera de ciclos, solo el tope.
   · EN ISO 374-1 tipos A/B/C (6 productos ≥30 min, 3 ≥30 min, 1 ≥10 min
     sobre una lista de 18) y EN 511 (tres dígitos: convección, contacto y
     paso de agua) — Ansell, guía de marcado EN ISO 374, y ficha EN 511.
   · EN ISO 20471 clases 1/2/3 con 0,14 / 0,50 / 0,80 m² de fondo y
     0,10 / 0,13 / 0,20 m² de retrorreflectante; la clase 3 cubre torso y
     brazos y un chaleco sin mangas no la alcanza; dos prendas
     certificadas como conjunto suman clase; el fabricante puede declarar
     un máximo de lavados que va en el marcado — Confecciones Oroel
     (fabricante que publica sus ensayos) y Juba.
   · EN ISO 20345:2022: retirada de SRA/SRB/SRC, SR como único marcado de
     agarre, WRU → WPA, y S6/S7 impermeables — uvex safety y Safety
     Jogger; coincide con lo que ya publica nuestra propia guía del blog.
   · EN 361 (arnés anticaídas), revisión periódica por persona competente
     al menos cada 12 meses (EN 365) y retirada del equipo que ha frenado
     una caída — lineaprevencion.com (EPI altura, construcción) y MSA.

   🔴 LO QUE SE DEJÓ FUERA POR NO PODER VERIFICARLO: la obligación legal
   de adiestramiento para los EPI de categoría III. Es afirmación
   corriente en el sector, pero el artículo 8 del RD 773/1997 leído en el
   BOE consolidado NO la ata a la categoría: habla de formación y sesiones
   de entrenamiento en general. No se escribe.
   ============================================================ *//* --- La cabecera de cada norma --------------------------------
   ⚠️ ESTO SALIÓ DE UNA MEDICIÓN, NO DE UN GUSTO. Con la cabecera apilada
   —kicker, titular y párrafo uno debajo de otro— la sección medía 5.466 px a
   1440, y la más larga del SITIO son los 2.924 px de #trabajos en la Home:
   casi el doble. Además la mitad derecha del bloque se quedaba vacía en las
   tres cabeceras. Partida en dos, el párrafo deja de sumar alto —va al lado
   del titular, no debajo— y el bloque usa el ancho que ya tenía.
   NO es `.cabecera-sec--split`, que es 7/5, alinea por la BASE y ancla la
   entrada al borde derecho: esta es 6/6, alinea por arriba y las dos columnas
   arrancan del borde izquierdo de su celda. Con este cuerpo —37 px contra los
   58 del H2 de la sección— se lee como lo que es, un nivel por debajo.
   Por debajo de 1025 px vuelve a apilarse: a 1024 las dos columnas caen a
   440 px y el titular pedía tres renglones. *//* --- (C) LA TABLA DE CATEGORÍAS -------------------------------- *//* La columna de la romana crece de 7 a 13 %: con «Categoría» encima, a 7 %
   el rótulo caía en tres renglones de una palabra. *//* --- (D) LA REGLETA DEL MARCADO EN 388 ------------------------- *//* --- LAS NOTAS ------------------------------------------------- */

/* Filete arriba y etiqueta en amarillo: el mismo gesto que la nota «En el
   mostrador» de los artículos del blog, resuelto aquí con la familia de
   esta página. Sin caja: la sección ya tiene seis. *//* --- ANCHOS ---------------------------------------------------- */

/* 1280 y menos: la regleta de seis deja las casillas por debajo de 190 px y
   «Corte por cuchilla» pasa a tres renglones. Dos filas de tres. */


/* La nota suelta se apila EN EL MISMO SITIO que la cabecera partida, a 1025:
   entre 901 y 1024 su columna de rótulo caía a 157 px y «El atajo del
   mostrador» se partía en dos renglones contra un texto de una sola línea. */


/* LA TABLA SE DESARMA. Por debajo de 761 px las tres columnas de texto no
   caben ni con scroll cómodo, así que cada fila pasa a ser un bloque: la
   romana arriba y cada dato con su rótulo delante, sacado del `data-et`.
   Es la misma información y el mismo orden; lo que cambia es el eje. */


/* --- Movimiento reducido --------------------------------------- */


/* ============================================================
   5 · PERSONALIZACIÓN — CUATRO FICHAS DE TALLER (6-sep-2026)
   ============================================================ */
/* ============================================================
   PROTOTIPO · 5 · PERSONALIZACIÓN — CUATRO FICHAS DE TALLER
   Sustituye al §5 de p-uniformidad.css (cifras + pestañas).
   ============================================================ */

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

/* LA REJILLA. Cuatro columnas en escritorio: las cuatro técnicas se
   comparan de un vistazo, que es de lo que va el bloque («la técnica
   depende de la prenda, de las unidades y del uso»). El conmutador
   enseñaba una y escondía tres. */
.utec__lista {
  --utec-foto: 4 / 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bloque) var(--gap);
}

/* LA FICHA. Sin superficie propia —manda la foto, no la caja— y con
   las filas declaradas: foto, rótulo, párrafo elástico y lista. El
   `1fr` del párrafo es lo que hace que las cuatro listas cierren a la
   misma altura aunque un párrafo caiga en una línea más. */
.umarcado {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

.umarcado__media {
  aspect-ratio: var(--utec-foto);
  margin-bottom: clamp(14px, 1.5vw, 22px);
}
.umarcado:hover .umarcado__media img { transform: scale(1.04); }

/* EL RÓTULO ES LA PESTAÑA. Mismo vocabulario que `.pest__tab`
   (filete arriba, número amarillo, condensada en caja alta), pero
   cuatro a la vez y cada uno sobre su propia foto. */
.umarcado__t {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--texto);
  margin-bottom: 12px;
  transition: border-color 620ms var(--ease);
}
/* La luz del filete: el mismo trazo de 22 px del kicker, en el arranque de
   cada columna. Es lo único amarillo con superficie del bloque, y son 2 px. */
.umarcado__t::before {
  content: "";
  position: absolute; left: 0; top: -1px;
  width: 22px; height: 2px;
  background: var(--amarillo);
  transform: skewX(-30deg);
}
.umarcado:hover .umarcado__t { border-color: var(--linea-alta); }
/* El número va en data-n y lo pinta CSS (29-sep-2026): dentro del encabezado
   era texto y los buscadores leían «01Bordado». `/ ""` lo calla en lectores. */
.umarcado__t[data-n]::after {
  content: attr(data-n);
  content: attr(data-n) / "";
  order: -1;
  flex: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  color: var(--amarillo);
}
.umarcado__n {
  flex: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  color: var(--amarillo);
}

.umarcado__p {
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--apagado);
  /* El tope va por TOKEN desde el 8-sep-2026: cuerpo --fs-sm → `--medida-s`.
     Aquí había un 48ch medido a mano; la escalera de tokens.css §2.bis
     sustituye los cuatro parches sueltos que decían esto mismo. */
  max-width: var(--medida-s);
  margin-bottom: clamp(16px, 1.7vw, 26px);
}

/* Las tres condiciones de cada técnica, con el guion diagonal de la
   casa. Van pegadas al pie de la ficha: los doce filetes forman las
   mismas cuatro líneas en las cuatro columnas. */
.umarcado__lista {
  display: grid;
  gap: 2px;
  align-self: end;
}
.umarcado__lista li {
  position: relative;
  padding: 10px 0 10px 20px;
  font-size: var(--fs-sm);
  line-height: var(--lh-corto);
  color: var(--texto);
  border-bottom: 1px solid var(--linea);
}
.umarcado__lista li::before {
  content: "";
  position: absolute; left: 0; top: 1.15em;
  width: 9px; height: 2px;
  background: var(--amarillo);
  transform: skewX(-30deg);
}

/* DOS COLUMNAS. Con cuatro, las cajas bajarían de 250 px y el párrafo
   se partiría en renglones de treinta caracteres. La foto recupera de
   paso la proporción del fichero: se ve el encuadre entero. */
@media (max-width: 1200px) {
  .utec__lista {
    --utec-foto: 3 / 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* UNA COLUMNA, y no antes de 520 px. A 620 con una sola columna la caja
   mide 572 px y el párrafo salía a NOVENTA caracteres por línea —el doble
   de la medida de lectura— con la sección en 3.100 px. Con dos columnas
   hasta 520 se queda en 40 caracteres y 1.400 px. Por debajo de 520 la
   celda bajaría de 206 px y «Mejor a partir de 20 prendas» ya no cabría
   de un renglón. */
@media (max-width: 520px) {
  .utec__lista { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .umarcado:hover .umarcado__media img { transform: none !important; }
}

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

/* --- andamio del prototipo, NO se trasplanta ------------------ */


/* ============================================================
   6 · PROCESO — LA REGLETA DEL PEDIDO (6-sep-2026)
   ============================================================ */
/* ============================================================
   6 · PROCESO — LA REGLETA DEL PEDIDO
   ------------------------------------------------------------
   Aquí vivían `.uproc__lista` y `.upaso`: cinco tarjetas en fila, las
   pares medio salto por debajo de las impares y cada una rematada por
   una PUNTADA amarilla discontinua. Se retira entero, por tres motivos
   medidos:
     · el zigzag no se leía como decisión sino como descuadre, y el
       desfase no aportaba ningún dato que no dieran ya los números;
     · el bloque tenía 9,5 % de tinta a 1440 (90,5 % de aire) y medía
       675 px, poco más que su propia cabecera; y
     · era el ÚNICO bloque de la página sin una sola foto, en una web
       cuyo contrato dice que la foto manda.
   Lo que entra: la foto del taller a ancho completo y, colgando de
   ella, una REGLETA de cinco campos cerrada por seis filetes
   verticales cuyos dos extremos caen a plomo con los bordes de la
   foto. Los cinco pasos dejan de ser cinco piezas sueltas y pasan a
   ser cinco tramos de una sola pieza. Medido después: 51,5 % de tinta
   y 1.228 px a 1440, con las cinco columnas exactamente iguales
   (delta 0 px a 1920, 1440, 1280 y 1024).
   ⚠️ SIN PUNTADA. El amarillo de este bloque es luz de filete —las
   cinco marcas que abren cada tramo y los cinco números—, nunca
   relleno ni línea discontinua.
   ============================================================ */

.uruta {
  padding-block: var(--sec-y);
  /* LA BANDA GRIS SE QUEDA. Es la única de la página —las otras diez
     secciones van sobre carbón— y es lo que aísla el proceso entre
     #tecnicas y #merchandising; el cliente no se quejó de ella.
     Lo que NO se hereda del bloque viejo es su `border-block: 1px solid
     var(--linea)`: la sección lleva `sec-cota` y estilos.css §34 lo pone
     a 0 por los dos lados, así que era filete muerto. */
  background: var(--sup);
}

/* LA CABECERA, DE UNA LÍNEA. Se conserva tal cual del bloque anterior: el
   `.h2` del sistema topa en 20ch y «De la talla a la entrega, en cinco
   pasos» se partía en dos líneas de 340 px. Con el tope subido entra de un
   renglón a partir de 1024 y la cabecera mide 86-126 px en vez de 200. */
.uruta .cabecera-sec { margin-bottom: clamp(32px, 3.6vw, 64px); }
.uruta .cabecera-sec .h2 { max-width: 42ch; }

/* LA FOTO. `bor-taller-wide` es la única foto de taller o de tienda que no
   sale ya en esta página (las otras 29 están todas cogidas: ocho de ellas en
   #tecnicas, justo encima), así que el bloque estrena imagen en vez de
   repetir una a 200 px de distancia.
   Proporción: la del fichero en escritorio, o sea CERO recorte. En tableta y
   móvil sube, porque a 2,33:1 la caja se quedaba en 786×337 y 342×147 y la
   foto dejaba de leerse. Ojo al `sizes` del HTML: por debajo de 901 px la
   caja es MENOS apaisada que el fichero, así que `cover` casa por ALTO y el
   ancho pintado ya no es el de la caja (×1,312 a 16/9 y ×1,750 a 4/3). */
.uruta__plano { aspect-ratio: 3840 / 1646; }

/* LA REGLETA. Cinco campos colgados de la foto, sin separación: los filetes
   arrancan en el borde inferior de la imagen y el primero y el último caen a
   plomo con sus bordes laterales. Es lo que hace que foto y pasos se lean
   como una pieza y no como una imagen con su pie de foto.
   `stretch` (el de por defecto) es aquí lo que se quiere: los cinco filetes
   acaban a la misma altura aunque un párrafo tenga una línea más. */
.uruta__tira {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}
.utramo {
  position: relative;
  padding: clamp(20px, 2vw, 30px) clamp(16px, 1.7vw, 26px) 4px;
  border-left: 1px solid var(--linea);
}
.utramo:last-child { border-right: 1px solid var(--linea); }

/* LA LUZ DEL PASO. Los primeros 22-34 px del filete que abre cada campo salen
   amarillos: cinco marcas colgando del borde de la foto, una por paso. El
   filete que CIERRA la regleta por la derecha se queda gris, porque no abre
   ningún paso. Es un filete de 1 px, no una línea discontinua ni una
   superficie: el amarillo sigue siendo luz. */
.utramo::before {
  content: "";
  position: absolute;
  left: -1px; top: 0;
  width: 1px; height: clamp(22px, 2.2vw, 34px);
  background: var(--amarillo);
}

/* EL NÚMERO, GRANDE. Es el único de la página a este cuerpo: los `01-04` del
   raíl de #decidir y los de las pestañas de #tecnicas van a `--fs-kicker`
   (13 px), así que el bloque no se confunde con ninguno de los dos aunque
   los tres numeren pasos. `--fs-rotulo` da 44,6 px a 1440 y 51,2 a 1920. */
.utramo__n {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-rotulo);
  line-height: .86;
  letter-spacing: .01em;
  color: var(--amarillo);
  margin-bottom: 14px;
}
.utramo__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.06;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.utramo__p {
  /* El tope va por TOKEN desde el 8-sep-2026: cuerpo --fs-sm → `--medida-s`.
     Aquí había un 48ch medido a mano; la escalera de tokens.css §2.bis
     sustituye los cuatro parches sueltos que decían esto mismo. */
  max-width: var(--medida-s);
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--apagado);
}

/* TABLETA Y MÓVIL — LA REGLETA SE PONE DE CANTO.
   Cinco campos en fila caen a 157 px de ancho a 834 (19 caracteres por línea,
   párrafos de cinco renglones), así que a partir de aquí cada paso es una
   línea del parte: número, rótulo y frase en la misma fila.
   ⚠️ Las tres columnas van a medida FIJA, no `auto` ni `max-content`: cada
   <li> es su propia rejilla, así que con pistas de contenido los cinco
   rótulos y los cinco párrafos arrancaban en cinco x distintas (medido: 3 px
   de desvío entre «01» y «02», y 5 px entre «EL TALLER» y «LAS PRENDAS» —
   suficiente para leerse como descuadre en una lista de cinco). */
@media (max-width: 900px) {
  .uruta__plano { aspect-ratio: 16 / 9; }
  /* Aquí la regleta ya no cuelga de la foto, así que se separa de ella:
     pegada, la marca amarilla del primer paso caía sobre el último píxel de
     la imagen y se perdía contra el blanco del techo del taller. */
  .uruta__tira { grid-template-columns: 1fr; margin-top: clamp(12px, 1.8vw, 20px); }
  .utramo {
    display: grid;
    grid-template-columns: clamp(34px, 4.4vw, 44px) clamp(132px, 17vw, 200px) minmax(0, 1fr);
    align-items: baseline;
    gap: 0 clamp(12px, 2vw, 24px);
    padding: clamp(15px, 1.9vw, 21px) 0 clamp(17px, 2.1vw, 23px);
    border-left: 0;
    border-top: 1px solid var(--linea);
  }
  .utramo:last-child { border-right: 0; border-bottom: 1px solid var(--linea); }
  /* La luz deja de colgar y pasa a ABRIR la línea: los primeros milímetros
     del filete superior de cada paso, en amarillo. */
  .utramo::before {
    left: 0; top: -1px;
    width: clamp(28px, 4vw, 40px); height: 1px;
  }
  .utramo__n { font-size: var(--fs-h3); margin-bottom: 0; }
  .utramo__t { margin-bottom: 0; }
}

/* MÓVIL — el párrafo ya no cabe al lado del rótulo (76 caracteres en 296 px):
   baja debajo, sangrado a la altura del rótulo para que la columna del número
   siga leyéndose como columna. */
@media (max-width: 620px) {
  .uruta__plano { aspect-ratio: 4 / 3; }
  .utramo { grid-template-columns: clamp(34px, 8vw, 44px) minmax(0, 1fr); }
  .utramo__p { grid-column: 2; margin-top: 9px; }
}

/* IMPRESIÓN — que un paso no se parta entre dos A4. §28 de la hoja compartida
   lista `.tda`, `.hito`, `.fpaso`… y las piezas nuevas de página hay que irlas
   añadiendo o vuelven a partirse. Como esta es de una sola página, la regla
   vive aquí y no toca la hoja común. */
@media print {
  .utramo { break-inside: avoid; }
}


/* ============================================================
   7 · MERCHANDISING — banda apaisada + rejilla compacta
   ============================================================ */

.umerch { padding-bottom: var(--sec-y); }
.umerch__banda {
  position: relative;
  height: clamp(180px, 22vw, 300px);
  overflow: hidden;
  border-bottom: 1px solid var(--linea);
}
.umerch__cont {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(40px, 4.5vw, 72px) var(--gap);
  padding-top: var(--sec-y);
  /* La lista heredaba el alto de la intro y repartía la diferencia entre
     sus dos filas: 122 px de nada entre la fila de arriba y la de abajo.
     Cada columna mide lo que mide su contenido. */
  align-items: start;
}
/* 6 columnas, no 5 (3-sep-2026). Con 5 (548 px a 1440) el titular «Tu marca
   puesta también fuera del trabajo» caía en TRES líneas —«TU MARCA PUESTA /
   TAMBIÉN FUERA / DEL TRABAJO»— cuando todos los H2 propios de la página caen
   en dos: la primera línea natural, «TU MARCA PUESTA TAMBIÉN», mide 591 px.
   Con 6 columnas (664 px) entra, y la lista se queda en 6 con dos columnas
   de 316 px. El canal entre las dos sigue siendo el `--gap`. */
.umerch__intro { grid-column: 1 / span 6; }
/* Mismo caso que `.uepi__intro .h2`: H2 hermano directo de su párrafo, sin
   `.cabecera-sec` que le dé el aire. Ver el comentario de §4. El tope de 28ch
   es el mismo que llevan las tres cabeceras partidas de esta página (§3). */
.umerch__intro .h2 { margin-bottom: var(--pieza); max-width: 28ch; }
.umerch__p { color: var(--apagado); max-width: var(--medida); margin-bottom: 6px; }
.umerch__lista {
  grid-column: 7 / span 6;
  display: grid;
  /* DOS columnas y no tres. Con tres, las seis celdas eran de 240 px —el
     texto de cada una cabía en dos líneas cortas— y la lista se quedaba
     150 px más baja que la intro de al lado, dejando el hueco abajo a la
     derecha. Con dos, cada celda mide 374 px, la lista crece a tres filas
     y las dos columnas de la sección acaban casi a la misma altura. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) var(--gap);
  /* Sin declararlas, las celdas heredaban `stretch` —se estiraban 83 px
     cada una para igualar a la más alta de su fila— y las FILAS heredaban
     `align-content: normal`, que en rejilla estira las filas automáticas
     hasta llenar el contenedor. Cada celda y cada fila miden lo suyo. */
  align-items: start;
  align-content: start;
}
.umi {
  border-top: 1px solid var(--linea);
  padding-top: 16px;
  transition: border-color 620ms var(--ease);
}
.umi:hover { border-color: var(--amarillo); }
.umi__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.umi__p { font-size: var(--fs-sm); line-height: 1.6; color: var(--apagado); }

@media (max-width: 1024px) {
  .umerch__intro, .umerch__lista { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  /* Apiladas, la lista recupera las tres columnas: aquí ya no hay intro
     al lado a la que igualarse y tres filas de dos serían una tira. */
  .umerch__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .umerch__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .umerch__lista { grid-template-columns: 1fr; gap: 24px; }
}


/* ============================================================
   8 · CRUCE DE DIVISIONES — SUBIDO A LA HOJA COMPARTIDA (5-sep-2026)
   ------------------------------------------------------------
   Aquí vivían las 104 líneas de `.ucruce` / `.ucr`, 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.
   Esta página GANA con el cambio: sus tres tarjetas eran de texto
   pelado, sin una sola foto. Ahora llevan las tres insignias.
   ============================================================ */

/* ============================================================
   9 · FAQ — sin reglas propias
   ------------------------------------------------------------
   La FAQ de esta página es el COMPONENTE COMPARTIDO `.faq`
   (estilos.css §18), el mismo acordeón nativo de <details> de la
   Home: el cliente pidió que las cuatro divisiones la vean igual.

   Aquí vivía `.ufaq` — el conmutador lateral montado sobre el
   mecanismo nº 6 ([data-pest]): carril de seis preguntas a la
   izquierda, panel de respuesta a la derecha, con `.ufaq__tab`,
   `.ufaq__tabs`, `.ufaq__panel`, `.ufaq__n`, `.ufaq__q`, `.ufaq__r`,
   el tramo `@media (max-width: 900px)` que lo devolvía a lista
   vertical y la regla `html:not(.js) .ufaq__conm` que lo apilaba sin
   JS. Todo borrado: el acordeón compartido ya funciona sin JS por sí
   mismo, así que ese andamiaje sobra.

   Lo ÚNICO que se conserva de la sección es la transición de la
   página: la marca `sec--puntada` del §1 sigue en el <section>, y por
   eso la sección mantiene su `data-reveal`.
   ============================================================ */
/* ============================================================
   10 · CIERRE — sin reglas propias
   ------------------------------------------------------------
   El cierre de esta página es el COMPONENTE COMPARTIDO `.ccta`
   (estilos.css §31), la banda a sangre a dos columnas de ferretería:
   el cliente pidió que las cuatro divisiones lo vean igual.

   Aquí vivía `.ucta` — el panel de carbón cortado en diagonal sobre
   la foto del taller (`.ucta__fondo`, `.ucta__scrim`, `.ucta__cont`,
   `.ucta__panel` con su `clip-path`, `.ucta__h2`, `.ucta__p`,
   `.ucta__botones`, `.ucta__tel`) y sus dos consultas de ancho, la de
   1024 que convertía el fondo en franja y la de 620 que recortaba la
   diagonal. Todo borrado, y con ello el token `--u-franja-cta`.
   ============================================================ */


/* ============================================================
   11 · COSTURAS Y VIUDAS — ajustes de esta página sobre lo compartido
   ------------------------------------------------------------
   ⚠️ Aquí había una línea suelta —«(estilos.css § 05 · .panel__pie).»
   seguida del cierre de comentario— sin su apertura, resto de un §11
   borrado. Era una regla inválida que el parser prolongaba hasta la
   primera llave: se tragaba ENTERO el bloque @media
   (prefers-reduced-motion) de abajo (115 reglas en la hoja y ninguna de
   reduced-motion, medido). Borrada. Y ojo al escribir aquí: un cierre de
   comentario literal dentro de este texto parte la hoja igual.
   ============================================================ */

/* DONDE HAY PUNTADA, LA PUNTADA ES LA COSTURA. Cuatro secciones llevaban un
   filete gris de 1 px pegado a la puntada amarilla de la sección de al lado:
   el border-bottom del hero con la puntada de #sectores, el de #epis con la
   de #calzado, y el border-top y el border-bottom de #proceso con su propia
   puntada y con la de #merchandising. Dos filetes pegados se leen como uno
   gordo —el mismo caso que ya se corrigió para #calzado → #decidir en §1—.
   Los bordes que NO tocan puntada (uepi arriba, umerch__banda) se quedan.
   ⚠️ La puntada de esta página se retiró el 5-sep-2026 (todas las costuras
   son ya la cota compartida) y el bloque de cruce dejó de ser `.ucruce`:
   ahora es el `.otras` de estilos.css §35, que no declara borde propio. */
#hero    { border-bottom: 0; }
#epis    { border-bottom: 0; }
#proceso { border-top: 0; border-bottom: 0; }

/* SIN VIUDAS EN LAS ENTRADAS. El hero dejaba «puesto.» solo en la cuarta
   línea, #tecnicas «tener.» (42 px de última línea) y el cruce «proveedor.»
   (78 px). `text-wrap: pretty` reparte las últimas líneas para que ninguna
   quede con una sola palabra; donde el navegador no lo conoce, no cambia
   nada. Con `pretty` solo, las tres seguían acabando en dos palabras cortas
   («logo puesto.», «a tener.», «otro proveedor.»), así que las tres frases
   se han acortado en el HTML midiendo cada candidata en el navegador a
   1920/1440/1024/834/390: ahora la última línea más corta mide 184 px.
   Acotado a esta página: `.hero-div__entrada` y `.cabecera-sec__entrada`
   son piezas de estilos.css. */
#hero .hero-div__entrada,
.usect .cabecera-sec__entrada,
.utec .cabecera-sec__entrada { text-wrap: pretty; }


/* ============================================================
   12 · PREFERS-REDUCED-MOTION
   Todo lo propio de esta página, visible y quieto.
   ------------------------------------------------------------
   Se han ido dos reglas con sus bloques: la que paraba las dos capas
   del parallax del hero editorial (`.uhero__foto`, `.uhero__detalle`)
   y la que devolvía el conmutador de la FAQ a una sola columna
   (`.ufaq__conm`). Los dos componentes que las sustituyen resuelven
   el movimiento reducido en estilos.css §27.
   ============================================================ */

/* ⚠️ ESTE BLOQUE SE QUEDÓ SIN NADA QUE APAGAR (6-sep-2026). Tenía tres
   reglas y las tres apuntaban a piezas que ya no existen: la puntada
   amarilla de `.upaso` (los cinco pasos escalonados del proceso), el zoom
   de `.pel` (los peldaños de sectores) y el de `.pest__panel` (el panel de
   la pestaña activa de personalización). Los cuatro bloques se
   recompusieron ese día y ninguno de los nuevos anima nada propio: el
   movimiento que les queda —los reveals y el zoom de `.media img`— lo
   apaga §27 de la hoja compartida. Se deja el hueco anotado para que la
   próxima pieza que sí se mueva sepa dónde va. */