/* ============================================================
DYRECO · Dirección C — NAVE
p-rotulacion.css — lo que es SOLO de rotulacion.html
------------------------------------------------------------
Se carga DESPUÉS de estilos.css. Los mecanismos (galería
horizontal, reveals, parallax, contadores, microinteracciones)
son compartidos y viven en css/estilos.css: aquí no se toca
ninguno, solo se COMPONE con ellos.
Índice
1 · Tokens propios de la página
2 · Transición de sección propia — la CINTA
3 · Hero — mosaico de portfolio a sangre con titular encima
4 · Entrada y cifras
5 · Servicios — rejilla desalineada 7+5 / 5+7
6 · Proceso — escalera diagonal
7 · Portfolio — composición sobre la galería horizontal
8 · Materiales y acabados
9 · Las otras tres divisiones
10 · FAQ — subida a la hoja compartida (`.faq`, estilos.css §18)
11 · CTA final — subido a la hoja compartida (`.ccta`, §31)
12 · La banda #rotulos y el raíl #durar — sin reglas propias
13 · prefers-reduced-motion y sin JS
============================================================ */
/* ============================================================
1 · TOKENS PROPIOS
Ninguno de estos existe en tokens.css y ninguno de ellos debe
existir allí: son decisiones de composición de esta página.
============================================================ */
:root {
/* Junta entre piezas del mosaico del hero. Es carbón, no aire: el
mosaico se apoya sobre `--fondo` y la junta lo deja ver. Va en px
fijos a propósito, porque el cálculo de `sizes` de las seis fotos
depende de ella. */
--rot-junta: 3px;
/* Escalón horizontal del proceso: lo que se desplaza cada paso. */
--rot-escalon: clamp(0px, 4.6vw, 88px);
/* Caída de las piezas de la derecha en la rejilla de servicios. */
--rot-desfase: clamp(28px, 5vw, 96px);
}
/* ============================================================
2 · TRANSICIÓN PROPIA — RETIRADA (5-sep-2026)
------------------------------------------------------------
`.sec--cinta` 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.
============================================================ */
/* ============================================================
3 · HERO — SUBIDO A LA HOJA COMPARTIDA (1-sep-2026)
------------------------------------------------------------
El hero de mosaico dejó de ser de esta página: el cliente pidió
que las cuatro divisiones lo vean igual, así que el componente
vive ahora en estilos.css §30 con el nombre `.hero-div` y la
junta en el token compartido `--junta-mosaico`.
Aquí no queda ni una regla: si hace falta un ajuste SOLO para
rotulación, va debajo de esta nota y acotado a `.rot .hero-div`.
============================================================ */
/* ⚠️ LAS DOS REGLAS DEL HERO SUBIERON A LA COMPARTIDA (3-sep-2026)
------------------------------------------------------------
Vivían aquí acotadas a `#hero` y las dos eran del COMPONENTE, no de esta
página: la columna izquierda del mosaico tapada por la caja de texto en
escritorio, y el índice a 2×2 por debajo de 560 px. Están en estilos.css
§30, así que las cuatro divisiones las tienen y siguen viéndose iguales.
============================================================ */
/* ============================================================
4 · ENTRADA — SIN CIFRAS, CON FOTO (7-sep-2026)
============================================================ */
/* ============================================================
§4 · ENTRADA — «EL PLIEGO»
Sustituye ENTERO al §4 «ENTRADA Y CIFRAS» de p-rotulacion.css
(líneas 79-187: .rot-intro, __int, __izq, __der, __nota, __lead,
__p, __cifras, __dato, __label y sus tres @media).
------------------------------------------------------------
QUÉ SE RETIRA Y POR QUÉ
· La tira de tres cifras. «4 · Servicios de rotulación» y «5 · Pasos
hasta el montaje» ya están dichas CON LETRA en los H2 de #servicios
y #proceso —«Cuatro servicios…», «…en cinco pasos»—, dos y cinco
secciones más abajo; decirlas aquí en cifra era decirlas dos veces.
«8 · Materiales y acabados» contaba las ocho fichas de #materiales,
bloque retirado el 6-sep-2026: desde entonces esa cuenta no la
sostenía nada publicado en la página.
· Las tres columnas de texto. Medido a 1440 antes de tocar nada:
cerraban a 0,9 · 90,9 · 16,4 px del pie de su caja —o sea ninguna a
la misma altura— y a 1024 el hueco bajo la del centro llegaba a
116 px. El `align-items: stretch` estiraba la CAJA, no el texto.
QUÉ ENTRA
· LA FOTO. Era la única sección de contenido de la página sin
material fotográfico, y es la primera que se lee tras el hero en la
página que el brief llama «la más visual de las cuatro».
· UN CIERRE DE VERDAD. Un filete de 1 px de borde a borde del
contenedor: la foto se apoya encima, el párrafo acaba en él y el
enlace cuelga de él a plomo con el titular. Las tres cosas cierran
en la MISMA línea y por construcción, no por ajuste a mano —la foto
ocupa las dos filas del texto, así que su pie ES el pie del texto—.
============================================================ */
/* La sección no declara filetes propios: la cota de §34 es el divisor y
dos líneas en la misma costura se leen como una doble. (El
`border-bottom` que había aquí ya lo neutralizaba §34; se retira para
no dejar código que miente.) */
.rot-intro {
padding-block: var(--sec-y);
/* Canalón entre la foto y el texto. Es un token de la sección porque
el filete de cierre repite la misma retícula y tiene que casar. */
--rot-canal: clamp(40px, 5.4vw, 100px);
/* Profundidad del corte diagonal de la lámina. */
--rot-corte: clamp(18px, 2.4vw, 42px);
}
/* 5fr / 6fr y no 5/7: con 7 la columna de texto se iba a 751 px, el
párrafo pedía tope de medida y el bloque acababa con 200 px muertos
en la esquina derecha —el mismo defecto que se está corrigiendo,
mudado de sitio—. Con 6fr la columna ES la medida.
`row-gap: 0` a propósito: el aire entre el titular y el cuerpo lo
ponen el filete y sus paddings, y así el pie de la lámina cae
EXACTAMENTE sobre el filete de cierre, sin un `gap` en medio. */
.rot-intro__int {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
column-gap: var(--rot-canal);
row-gap: 0;
}
.rot-intro__cab { grid-column: 2; grid-row: 1; align-self: start; }
/* El titular manda sobre el tope compartido de 20ch: su columna ya lo
acota, y con el tope puesto partía en tres líneas cortas donde caben
dos limpias. */
.rot-intro__cab .h2 { max-width: none; }
/* EL CUERPO cuelga del pie de su fila (`align-self: end`), así que su
última línea acaba a la misma altura que la lámina y que el filete de
cierre. El filete de arriba es el que convierte el aire que queda
bajo el titular en una separación dibujada: sin él, ese hueco —que
nace de que la foto es más alta que 470 caracteres de texto— se lee
como un olvido. */
.rot-intro__cuerpo {
grid-column: 2;
grid-row: 2;
align-self: end;
border-top: 1px solid var(--linea);
/* Era `clamp(26px, 7.4vw, 152px)` —106 px a 1440— y estaba calculado para
rellenar el hueco que dejaba la lámina vertical. Sin ese hueco, el aire
vuelve al ritmo del sitio. */
padding-top: clamp(22px, 2.2vw, 40px);
padding-bottom: clamp(24px, 3.4vw, 56px);
}
/* LA LÁMINA — dos filas de alto: del kicker al filete de cierre.
`aspect-ratio` NO fija su forma: es el ALTO MÍNIMO con el que entra
en la rejilla. Con `align-self: stretch` un ítem con proporción sí se
estira (lo mismo que hace el carrete de #proceso), así que si algún
día el texto crece la lámina crece con él y las dos siguen acabando
en la misma línea, sin una sola medida escrita a mano. Con el copy de
hoy manda siempre la proporción: la columna de texto es más corta en
los cuatro anchos de escritorio medidos. */
.rot-intro__foto {
grid-column: 1;
grid-row: 1 / span 2;
align-self: stretch;
/* ⚠️ EL `width: 100%` NO SOBRA, ES EL SEGURO. Un ítem con
`aspect-ratio` + `align-self: stretch` estira el ALTO y luego se
recalcula el ANCHO con la proporción: medido, con la columna de
texto forzada a 980 px la lámina se iba a 817 px de ancho e
invadía el canalón (583 → 817). Con el ancho fijado al 100 % de su
columna, la proporción sigue valiendo de alto MÍNIMO y el estirón
solo puede ir hacia abajo: 583 × 980 y ni un píxel fuera. */
width: 100%;
position: relative;
/* ⚠️ ERA 5/6 Y ESE ERA EL PROBLEMA (7-sep-2026). Con la lámina vertical su
alto era SIEMPRE mayor que el de la columna de texto —700 px contra 530 a
1440—, y como el cuerpo cuelga del pie de su fila, los 170 px de sobrante
se acumulaban TODOS entre el titular y la primera frase. Medido antes de
tocar: 197 px de hueco a 1440 y 301 a 1920. El cliente lo señaló: «mucho
espacio entre el título y el primer párrafo».
Con 4/3 la proporción deja de mandar: la lámina pide 437 px de alto
mínimo, el texto mide más, y el `align-self: stretch` estira la foto
hasta el pie del texto. Quien fija el alto de la fila pasa a ser el
TEXTO, que es lo que hay que leer, y no queda sobrante que repartir. */
aspect-ratio: 4 / 3;
/* Este amarillo NO se ve como superficie: la lámina lo tapa entero
salvo la línea de 1 px que asoma por el corte. El amarillo sigue
siendo luz —un filete—, que es lo que manda la dirección. */
background: var(--amarillo);
clip-path: polygon(0 var(--rot-corte), 100% 0, 100% 100%, 0 100%);
break-inside: avoid; /* §28 conoce `figure`, no este envoltorio */
}
/* La lámina va 1 px por debajo del corte del envoltorio: de ahí sale el
filete amarillo en diagonal, eco del sesgo del wordmark —el mismo que
llevan la marca del kicker (§02) y el corte de los botones (§03)—. */
.rot-intro__lam {
position: absolute;
inset: 0;
border-radius: 0;
clip-path: polygon(0 calc(var(--rot-corte) + 1px), 100% 1px, 100% 100%, 0 100%);
}
/* EL CIERRE. Repite la retícula de la sección en vez de heredarla con
`subgrid` para que el enlace caiga a plomo con el titular también
donde no haya subgrid. Sin `margin-top`: el filete tiene que quedar
pegado al pie de la lámina, que es de lo que va el bloque. */
.rot-intro__cierre {
grid-column: 1 / -1;
grid-row: 3;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
column-gap: var(--rot-canal);
border-top: 1px solid var(--linea);
padding-top: clamp(8px, 1vw, 16px);
}
.rot-intro__cierre .enlace-flecha { grid-column: 2; justify-self: start; }
/* La entradilla sube un escalón sobre el cuerpo corriente: es la frase
que presenta la división entera y la primera que se lee tras el hero.
El párrafo de apoyo se queda en `--apagado`, que es el escalón de
jerarquía del sitio, y en la medida de lectura compartida. */
/* ⚠️ LA ENTRADILLA VUELVE A LA ESCALA DEL SITIO (7-sep-2026). Iba a
`clamp(1.1875rem, 1.95vw, 1.75rem)`, o sea 28 px a 1440 y 28 a 1920, contra
los 16-18 px de `.cabecera-sec__entrada`, que es la pieza equivalente en las
otras siete secciones y en las otras siete páginas. El cliente lo vio y lo
dijo con estas palabras: «texto muy grande y grueso en comparación con todas
las demás partes de la web, queda como descuadrado». Tenía razón: era el
único cuerpo del sitio a 28 px.
La jerarquía frente al párrafo de apoyo NO se pierde, solo deja de hacerla
el tamaño: la entradilla se queda en `--texto` (blanco) y el apoyo en
`--apagado`, que es el escalón que usa el resto de la web. */
.rot-intro__lead {
font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
line-height: 1.55;
color: var(--texto);
/* clamp(1.0625rem, 1.15vw, 1.1875rem) = 17 px a 1440 y 19 a 1920: banda de
16-18, o sea el peldaño de en medio. Aquí había un 46ch 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);
margin-bottom: clamp(16px, 1.6vw, 24px);
}
.rot-intro__p {
font-size: var(--fs-body);
color: var(--apagado);
max-width: var(--medida);
margin-bottom: 0;
}
/* 901-1200 · el canalón se comía demasiada columna. */
@media (max-width: 1200px) {
.rot-intro { --rot-canal: clamp(32px, 4vw, 56px); }
.rot-intro__cuerpo { padding-top: clamp(22px, 2.4vw, 34px); }
}
/* ≤900 · APILADO, y en el orden en que se lee: titular, lámina, cuerpo,
cierre. Es el orden del marcado, así que basta con soltar la rejilla.
La lámina pierde el alto de dos filas y toma proporción propia. */
@media (max-width: 900px) {
.rot-intro__int { grid-template-columns: minmax(0, 1fr); }
.rot-intro__cab,
.rot-intro__cuerpo,
.rot-intro__foto,
.rot-intro__cierre { grid-column: 1; grid-row: auto; }
/* Apilada y a todo el ancho, la lámina NO puede seguir siendo vertical:
a 834 px medía 786 × 983 y se comía la pantalla entera —la sección
se iba a 1.599 px—. Pasa a banda 3/2, que es la proporción con la
que la página sirve sus fotos a todo el ancho en tableta. */
.rot-intro__foto {
aspect-ratio: 3 / 2;
margin-top: clamp(28px, 4.4vw, 44px);
}
.rot-intro__cuerpo {
border-top: 0;
padding-top: clamp(26px, 4.4vw, 44px);
padding-bottom: clamp(26px, 4.4vw, 44px);
}
.rot-intro__cierre { display: block; }
/* Apilados y a todo el ancho, 56ch renderizaba 74 caracteres por línea a
834 px. Mismo cálculo que arriba: los 66 caen en 48ch. */
.rot-intro__lead { max-width: var(--medida); }
.rot-intro__p { max-width: var(--medida); }
}
/* ≤560 · en el móvil la lámina vuelve a ser vertical y manda: 3/4 es la
proporción EXACTA del fichero (2560×3413), así que aquí `cover` no
recorta ni un píxel. */
@media (max-width: 560px) {
.rot-intro__foto { aspect-ratio: 3 / 4; }
}
/* ============================================================
5 · SERVICIOS — rejilla desalineada 7+5 / 5+7
Dos filas de anchos distintos, con la pieza de la derecha caída
medio bloque. La Home alterna izquierda/derecha a ancho completo;
aquí las cuatro conviven en la misma retícula y ninguna manda.
============================================================ */
.rot-serv { padding-block: var(--sec-y); }
.rot-serv__rej {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(44px, 5.5vw, 104px) var(--gap);
}
/* ⚠️ EL ALTO DE LA TARJETA LO CIERRA EL CUERPO, NO LA FOTO (1-sep-2026).
Antes lo fijaba el `aspect-ratio` de la lámina y punto: en la segunda fila la
03 (5 col, caja 3/2) remataba 146 px por encima de la 04 (7 col, caja 16/9) y
dejaba ese rectángulo muerto en su esquina inferior. Ahora la tarjeta es una
rejilla de dos filas —lámina `auto` y cuerpo `1fr`— y el enlace de salida se
cuelga del pie del cuerpo: el sobrante de la fila se reparte dentro del
cuerpo y las dos hermanas cierran a la misma altura, con sus dos «Pedir
presupuesto» en la misma línea.
⚠️ La lámina se queda en `auto` a propósito. Chrome NO estira un ítem de
rejilla que lleva `aspect-ratio`, así que ponerla en `1fr` no la haría crecer:
solo abriría un hueco entre la foto y el cuerpo. Y el `aspect-ratio` no es
decorativo — es de lo que depende el `sizes` de las cuatro fotos (ver el
bloque de comentarios de la rejilla en rotulacion.html): si la caja cambiase
de proporción, `cover` pasaría a casar por altura y lo declarado se quedaría
corto. */
.serv {
position: relative;
scroll-margin-top: calc(var(--alto-cab) + 28px);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}
/* ⚠️ EL DESFASE VIAJA A LA PIEZA ESTRECHA EN LAS DOS FILAS (1-sep-2026).
En la fila 1 caía la 02 (estrecha) y en la fila 2 la 04 (ancha): con la
ancha desplazada, las dos piezas de la fila arrancaban desalineadas 145 px
y la estrecha, que además es la más baja, remataba en el aire. Con la
estrecha caída en las dos filas, las anchas comparten borde superior de fila
y la escalonada es siempre la pequeña. */
.serv:nth-child(1) { grid-column: 1 / span 7; }
.serv:nth-child(2) { grid-column: 8 / span 5; margin-top: var(--rot-desfase); }
.serv:nth-child(3) { grid-column: 1 / span 5; margin-top: var(--rot-desfase); }
.serv:nth-child(4) { grid-column: 6 / span 7; }
/* ⚠️ LAS DOS PROPORCIONES SON FIJAS EN TODOS LOS ANCHOS.
Antes la caja se volvía 3/2 por debajo de 1024 y 4/3 por debajo de 700
TAMBIÉN en las tarjetas anchas, así que la foto 16:9 de la tarjeta 01
quedaba dentro de una caja más alta de proporción que ella y `cover` la
ampliaba un 19 % y un 34 %; el `sizes` declaraba el ancho pelado de la
caja y el navegador servía siempre una variante más pequeña de la que
hacía falta (0,88 de densidad incluso a 1×: hallazgo 2). Con las dos
proporciones fijas, la caja es siempre igual o más ancha de proporción
que su foto, `cover` casa por ancho y el `sizes` puede ser —y es— el
ancho real de la tarjeta. */
.serv__media { aspect-ratio: 3 / 2; margin-bottom: clamp(20px, 2.2vw, 30px); }
.serv--ancha .serv__media { aspect-ratio: 16 / 9; }
/* Misma razón que en `.esc__foto`: con la lámina estirada el `height:100%` del
![]()
pierde su referencia y el navegador cae al alto intrínseco del fichero,
que volvería a mandar sobre la fila. Posicionada, la figura se queda sin
contenido en flujo y su alto lo fija la rejilla de la tarjeta. */
.serv__media img { position: absolute; inset: 0; }
.serv:hover .serv__media img { transform: scale(1.05); }
.serv__cuerpo {
border-top: 1px solid var(--linea);
padding-top: 16px;
display: flex;
flex-direction: column;
transition: border-color 620ms var(--ease);
}
/* La salida al presupuesto baja al pie de la tarjeta: es la que iguala el
remate de las dos piezas de cada fila. */
.serv__cuerpo .enlace-flecha { margin-top: auto; align-self: flex-start; }
.serv:hover .serv__cuerpo { border-color: var(--am-30); }
.serv__n {
display: block;
font-family: var(--display);
font-weight: 600;
font-size: var(--fs-kicker);
letter-spacing: var(--ls-kicker);
color: var(--amarillo);
margin-bottom: 12px;
}
.serv__t {
font-family: var(--display);
font-weight: 800;
font-size: var(--fs-rotulo);
line-height: var(--lh-rotulo);
letter-spacing: var(--ls-display);
text-transform: uppercase;
margin-bottom: 14px;
}
.serv__p { color: var(--apagado); max-width: var(--medida); margin-bottom: 20px; }
/* Etiquetas, no lista con viñetas: es un servicio con variantes, no
un índice de catálogo (eso es de ferretería). */
.serv__items { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 8px; }
.serv__items li {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 6px 12px;
border: 1px solid var(--linea);
border-radius: var(--radio);
font-family: var(--display);
font-weight: 600;
font-size: .75rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--texto);
transition: border-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.serv:hover .serv__items li { border-color: var(--linea-alta); }
@media (max-width: 1024px) {
.rot-serv__rej { gap: clamp(40px, 5vw, 64px) var(--gap); }
.serv:nth-child(1),
.serv:nth-child(2),
.serv:nth-child(3),
.serv:nth-child(4) { grid-column: span 6; margin-top: 0; }
/* ⚠️ UNA SOLA PROPORCIÓN CUANDO LAS CUATRO SON IGUALES (sep-2026). En dos
columnas de 6, la lámina de la tarjeta ancha seguía en 16/9 y la de la
estrecha en 3/2: en la misma fila la 01 medía 456×256 y la 02 456×304,
los numerales y los H3 de dos hermanas arrancaban 48 px desfasados (40 a
834) y la 01 abría 56 px entre las etiquetas y «Pedir presupuesto» donde
la 02 tenía 8. A 390, en columna, alternaban láminas de 192 y 228 px.
Con caja 16/9 las cuatro fotos casan por ANCHO (las 3:2 recortan arriba y
abajo; la 03, que es 16:9, deja de ampliarse y su `sizes` ×1,19 solo
sobre-sirve un 19 %), así que ningún `sizes` cambia. */
.serv__media,
.serv--ancha .serv__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
.serv:nth-child(1),
.serv:nth-child(2),
.serv:nth-child(3),
.serv:nth-child(4) { grid-column: 1 / -1; }
}
/* ============================================================
6 · PROCESO — CARRUSEL DE CINCO PASOS (7-sep-2026)
============================================================ */
/* ============================================================
PROTOTIPO · §6 PROCESO — CARRIL DE CINCO PASOS
Sustituye entero al §6 «CARRETE DE CINCO LÁMINAS» de
p-rotulacion.css (líneas 333-512: .rot-proc, .rot-carrete,
.rot-carrete__* y sus tres @media).
------------------------------------------------------------
QUÉ CAMBIA Y POR QUÉ
1 · El bloque pasa a CARRIL DESLIZABLE con TRES PASOS A LA
VISTA. No se inventa carrusel: se reusa el mecanismo nº 2
del repertorio —`.fichas` / `[data-fichas]`, estilos.css
§21— que está vivo en main.js y no lo usaba ninguna de las
ocho páginas desde ago-2026. Aquí solo se AJUSTA en su
contexto, que es lo que §29 H autoriza para `--ficha-an`.
No se toca ni main.js ni estilos.css.
2 · La tarjeta se recompone: la lámina pasa de 4/5 estrecha
(269×337 px a 1440) a CUADRADA y del ancho entero de la
ficha (416×416) —de 90.855 px² a 173.056, o sea un 90 % más
de foto por paso—, el número se despega del rótulo y sube a
numeral de 42 px en columna propia, y el párrafo pasa de
una columna que TOPABA en 35 caracteres a otra que cabe 57
y que `balance` reparte en tres líneas de 35 a 45, sin
colas de 8 caracteres.
============================================================ */
/* La sección conserva su fondo gris —es la única banda elevada
entre #durar y #trabajos, las dos en carbón— y no declara
filetes propios: los pone `sec-cota` (§34). */
.rot-proc {
padding-block: var(--sec-y);
background: var(--sup);
}
/* ------------------------------------------------------------
EL CARRIL · ajustes de §21 en el contexto de esta página
------------------------------------------------------------
`--ficha-an` es la variable que §21 expone para esto (§29 H).
El porcentaje se resuelve contra el ANCHO INTERIOR DE LA PISTA
—que es exactamente el de `.cont`, porque la pista sangra
`--gutter` por cada lado y lo devuelve como relleno—, así que
la cuenta es la del ojo: tres fichas, dos huecos y el asomo de
la cuarta.
`--asomo` es lo que se ve de la ficha nº 4 al entrar. No es
decoración: es la única señal de que el carril sigue. Medido,
el asomo real que resulta es `--gutter + --asomo − --gap`
= 56 px por encima de 900 y 52 px por debajo. */
.rot-riel {
--asomo: 48px;
--ficha-an: calc((100% - 2 * var(--gap) - var(--asomo)) / 3);
/* Columna del numeral en el pie de la tarjeta. Medida la TINTA real del
numeral («01» ocupa 31,6 px a 36 y 36,8 px a 41,8), la columna deja
entre 18 y 24 px de aire hasta el rótulo en los siete anchos y no
roba más medida de lectura de la que hace falta. */
--paso-n: clamp(50px, 4.1vw, 70px);
}
/* El relleno que §21 usa para poder CENTRAR la primera ficha
(613 px medidos a 1440) aquí sobra: con tres a la vista la
primera arranca a plomo con el titular de la sección, o sea a
`--gutter`. Y con el relleno hay que mover también el encaje:
sin `scroll-padding` el snap alinearía la ficha con el borde
de la VENTANA y se comería el margen izquierdo entero. */
.rot-riel__pista {
padding-inline: var(--gutter);
scroll-padding-inline: var(--gutter);
/* Los 28/34 px de §21 eran el aire de la ficha central elevada,
que aquí no existe. */
padding-block: 0;
}
/* El anillo de foco es global (§00, +3 px de separación). En una
pista que sangra hasta el borde de la ventana ese anillo se
dibujaría fuera de pantalla: aquí va por dentro. */
.rot-riel__pista:focus-visible { outline-offset: -3px; }
/* LA FICHA DEL SISTEMA, APAGADA. §21 pinta la ficha del EQUIPO de
la Home: tarjeta gris con filete, laterales al 48 % de opacidad
y sin saturación, y la central elevada. Un proceso no funciona
así —los cinco pasos valen lo mismo y los tres visibles se leen
a la vez—, así que aquí la ficha es solo un ancho. El JS sigue
marcando `is-centro` y no pinta nada: no hace falta tocarlo. */
.rot-riel .ficha {
background: none;
border: 0;
border-radius: 0;
padding: 0;
opacity: 1;
filter: none;
transform: none;
box-shadow: none;
scroll-snap-align: start;
}
.rot-riel .ficha.is-centro {
background: none;
box-shadow: none;
transform: none;
border-top-color: transparent;
}
/* ⚠️ EL ÚLTIMO PASO ENCAJA POR SU FINAL, Y NO ES UN CAPRICHO.
Con `scroll-snap-type: x mandatory` el navegador solo descansa
en un punto de encaje ALCANZABLE. Medido a 1440: el recorrido
máximo son 848 px y los puntos de inicio de las fichas 3, 4 y 5
caen en 896, 1344 y 1792 — todos fuera. Con solo `start` el
carril rebotaba a la ficha 2 y los pasos 04 y 05 no se podían
dejar a la vista. Alineando la última por el final aparece el
punto 848, que sí se alcanza, y el carril cierra enseñando
03·04·05. Comprobado a 1920, 1440, 1280, 1024, 834, 620 y 390. */
.rot-riel .ficha:last-child { scroll-snap-align: end; }
/* ------------------------------------------------------------
LA TARJETA · la lámina manda
------------------------------------------------------------
Cuadrada y a todo el ancho de la ficha. Sobre ficheros 3:2
`cover` casa por altura y se ve el 66,7 % del ancho del
encuadre —contra el 53 % que dejaba la caja 4/5 de antes—, y
la foto pasa de 90.855 px² a 173.056 a 1440. Es lo primero de
la tarjeta, lo más grande y lo único que no se ha reducido
para que quepa otra cosa. */
.rot-paso__lam { aspect-ratio: 1 / 1; }
/* Misma razón que en `.serv__media`: la ![]()
sale del flujo para
que el alto de la caja lo fije la proporción y no la altura
intrínseca del fichero. */
.rot-paso__lam img { position: absolute; inset: 0; }
.rot-paso:hover .rot-paso__lam img { transform: scale(1.04); }
/* ------------------------------------------------------------
EL PIE · cota, numeral y texto
------------------------------------------------------------
Dos columnas: el número a la izquierda, en columna propia y a
42 px, y el rótulo con su párrafo a la derecha, a plomo. Antes
el número era un `1em` del rótulo y los dos compartían renglón
—«01 VISITA»—, así que el paso no tenía cifra: tenía un
prefijo. Ahora la cifra se lee sola de lado a lado del carril
(01 · 02 · 03) y es lo que dice por dónde va el proceso. */
.rot-paso__pie {
position: relative;
display: grid;
grid-template-columns: var(--paso-n) minmax(0, 1fr);
grid-template-rows: auto auto;
row-gap: clamp(6px, .6vw, 10px);
margin-top: clamp(14px, 1.4vw, 22px);
padding-top: clamp(13px, 1.2vw, 18px);
/* El carril va en `--linea-alta` y no en `--linea`: sobre el
gris de sección el filete normal no se ve, y sin carril los
cinco tramos amarillos se leen como cinco rayas de largo
distinto en vez de como una cota que se va llenando. */
border-top: 1px solid var(--linea-alta);
}
/* LA COTA. El tramo encendido crece un quinto por paso (20 →
100 %). En una fila de cinco eso era un adorno; en un carril
que enseña tres de cinco es la barra de progreso del bloque, y
sale gratis: se lee sin flechas y sin contador. El amarillo
sigue siendo luz —2 px de línea y una marca de 4—, nunca
relleno. */
.rot-paso__pie::before {
content: "";
position: absolute;
left: 0; top: -1px;
height: 2px;
width: calc((var(--i, 0) + 1) * 20%);
background: var(--amarillo);
}
/* La marca de cota, con el ángulo del corte del wordmark, en el
punto al que llega el tramo. Los 2 px de más son el vuelo del
sesgo: sin ellos la marca del quinto paso se sale de su ficha. */
.rot-paso__pie::after {
content: "";
position: absolute;
left: calc((var(--i, 0) + 1) * 20%);
top: -3px;
width: 14px; height: 4px;
background: var(--amarillo);
transform: translateX(calc(-100% - 2px)) skewX(-30deg);
}
.rot-paso__n {
grid-column: 1;
grid-row: 1 / span 2;
align-self: start;
font-family: var(--display);
font-weight: 800;
font-size: clamp(2.25rem, 2.9vw, 3.25rem);
line-height: .78;
letter-spacing: .04em;
color: var(--amarillo);
font-variant-numeric: tabular-nums;
/* Cuadra la ALTURA DE MAYÚSCULA del numeral con la del rótulo. Las dos
cajas puestas a `start` no alinean nada: cada una lleva su medio
interlineado y su ascendente, y medido a 2× el numeral montaba 3,75 px
por encima de la V de VISITA. La corrección va en `em` para que siga
valiendo en los siete anchos. */
margin-top: .05em;
}
.rot-paso__t {
grid-column: 2;
grid-row: 1;
/* El 700 se declara: sin él lo pondría el `bold` por defecto del
y el rótulo dependería de a qué llame `bold` cada motor.
Mismo par de pesos de siempre: 800 la cifra, 700 el rótulo. */
font-family: var(--display);
font-weight: 700;
font-size: clamp(1.1875rem, 1.5vw, 1.6875rem);
line-height: 1.06;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--texto);
}
.rot-paso__p {
grid-column: 2;
grid-row: 2;
font-size: var(--fs-sm);
line-height: 1.62;
color: var(--apagado);
max-width: none;
/* BALANCE, NO `pretty`. La lista de §2.x pone `text-wrap: pretty` en todo
`main p` para que la última línea no quede en un muñón, y aquí no
llegaba: medido a 1440, los cinco párrafos cerraban en colas de 16, 24,
12, 8 y 17 caracteres —el de 8 es una viuda de libro—. `balance` reparte
las tres líneas: 35-45 caracteres cada una, ninguna cola. La columna NO
se ha quedado corta —cabe hasta 57, medido—, es el motor el que reparte;
que es justo la diferencia con la fila de cinco que este bloque
sustituye, donde 35 era el techo del ancho. Y es vocabulario de la casa:
`.h2` ya va con `balance` (estilos.css §02). Donde no esté soportado, el
párrafo parte como siempre. */
text-wrap: balance;
}
/* ------------------------------------------------------------
ANCHOS
------------------------------------------------------------
Tres a la vista es la petición, y se cumple mientras la ficha dé
medida de lectura. El corte está MEDIDO, no elegido: a 1201 px el
párrafo va a 38-47 caracteres por línea y a 1150 se desploma a
33-41 con cuatro líneas y colas de 12 y 15 —exactamente el defecto
de la fila de cinco que este bloque sustituye—. Así que de 1200
para abajo el carril enseña DOS y, de 700 para abajo, UNA. El asomo
se queda en los tres casos: es lo único que dice que hay más. */
@media (max-width: 1200px) {
.rot-riel { --ficha-an: calc((100% - var(--gap) - var(--asomo)) / 2); }
/* Con la ficha al doble de ancho, la lámina cuadrada se comería
media pantalla de alto: vuelve a 4/3, que además es el recorte
que menos quita de un fichero 3:2. */
.rot-paso__lam { aspect-ratio: 4 / 3; }
}
@media (max-width: 700px) {
.rot-riel { --ficha-an: calc(100% - var(--asomo)); }
/* Con una sola ficha a la vista la columna del numeral se lleva 50 de los
294 px de la tarjeta y al párrafo le quedan 244: 30 caracteres por
línea, otra vez la columna de periódico. El numeral se queda donde
está —el bloque «01 VISITA» es el mismo— y el párrafo pasa por debajo,
a ancho completo. Medido a 390: 35-45 caracteres. */
.rot-paso__n { grid-row: 1; }
.rot-paso__p {
grid-column: 1 / -1;
/* Y con un tope de medida, porque a 620 px la ficha mide 524 y el
párrafo a ancho completo se iba a 84 caracteres por línea —el doble
de lo que se lee de un vistazo—. 25rem son 64. El tope no hace nada
por debajo de 480 px, donde la ficha ya es más estrecha que él. */
max-width: 25rem;
}
}
/* ------------------------------------------------------------
MOVIMIENTO REDUCIDO
------------------------------------------------------------
§27 ya convierte el carril en rejilla, apaga el arrastre y
esconde flechas y ayuda. Lo único que no sirve es el número de
columnas: está dimensionado para los OCHO retratos del equipo
(`repeat(4)`, y 3 por debajo de 1200), así que con cinco pasos
salía 4+1. Aquí manda la misma cuenta que en el carril. */
@media (prefers-reduced-motion: reduce) {
.rot-riel .fichas__pista {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: var(--bloque);
/* §27 devuelve el sangrado del carril a cero, pero el relleno que
coloca la primera ficha a plomo con el titular lo declara ESTA hoja
y sobrevive: medido, la rejilla quedaba 40 px metida por cada lado y
las columnas en 405 px en vez de 427. En rejilla no hay nada que
colocar: fuera. */
padding-inline: 0;
scroll-padding-inline: 0;
}
}
@media (prefers-reduced-motion: reduce) and (max-width: 1200px) {
.rot-riel .fichas__pista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
.rot-riel .fichas__pista { grid-template-columns: minmax(0, 1fr); }
}
/* ------------------------------------------------------------
SIN JS · y con main.js bloqueado, que no es lo mismo
------------------------------------------------------------
§21 esconde flechas y ayuda sin JS y el carril nativo sigue
desplazándose — pero la barra de scroll está oculta a propósito
(`scrollbar-width: none`), así que un ratón sin rueda lateral se
quedaba sin manera de llegar a los pasos 04 y 05. Sin JS la
barra vuelve: es fea y es la única salida.
La segunda regla es el caso distinto de «hay JavaScript pero
main.js no ha llegado» (404, bloqueador, caché envenenada): ahí
la clase `js` está puesta igual y las flechas se pintan sin que
nadie las escuche. Mismo patrón que §21 y §05. */
html:not(.js) .rot-riel__pista,
html.reveals-sellados:not(.js-ok) .rot-riel__pista {
scrollbar-width: auto;
-ms-overflow-style: auto;
}
html:not(.js) .rot-riel__pista::-webkit-scrollbar,
html.reveals-sellados:not(.js-ok) .rot-riel__pista::-webkit-scrollbar {
display: block;
height: 10px;
}
html.reveals-sellados:not(.js-ok) .rot-riel .fichas__flechas,
html.reveals-sellados:not(.js-ok) .rot-riel .fichas__ayuda { display: none; }
/* ------------------------------------------------------------
PAPEL
------------------------------------------------------------
§28 despliega el carril (`.fichas__pista { display: block }`) y
salva `.ficha` de partirse, pero no le quita ni el ancho de
ficha ni el sangrado, así que los cinco pasos salían en una
columna de un tercio, desplazada. Dos por hoja. */
@media print {
.rot-riel .fichas__pista {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18pt;
margin-inline: 0;
padding-inline: 0;
}
.rot-riel .ficha { flex: none; width: auto; }
}
/* ============================================================
7 · LA NAVE POR DENTRO — MOSAICO (6-sep-2026)
============================================================ */
/* ============================================================
07 · LA NAVE POR DENTRO — EL MURAL
(sustituye a `.rot-port` + la galería horizontal `[data-galh]`)
------------------------------------------------------------
POR QUÉ SE CAMBIA. El mecanismo gastaba 2.557 px de documento a
1440 —2,56 pantallas— para mover el carro 1.254 px, y en cualquier
fotograma el 56-73 % de la escena era carbón vacío: el bloque MÁS
fotográfico de la página era el que menos foto enseñaba por metro de
scroll, y tres de las cinco piezas solo existían si el visitante
seguía bajando. Medido otra vez el 6-sep-2026 en las siete anchuras
del encargo: 2.342 / 2.557 / 2.307 / 1.933 / 2.150 / 3.107 / 2.412 px.
QUÉ HACE AHORA. Las cinco fotos, quietas, a la vez y a tamaño de
lámina, en dos filas de peso muy distinto: arriba el PLANO LARGO
—el plóter de gran formato con la vertical de las lonas al lado—,
abajo la TIRA DE TRES. Sección 1.953 / 1.643 / 1.468 / 1.817 /
1.686 / 1.410 / 2.143 px: entre un 6 y un 55 % más corta que el
mecanismo, y sin un solo píxel de negro que no esté trabajando.
LA RETÍCULA SALE DE LAS FOTOS, no al revés. Cada columna vale la
PROPORCIÓN DEL FICHERO que va dentro —1.5fr para una 3:2, .6667fr
para la vertical, 1.7778fr para la 16:9—, así que dentro de una fila
todas las piezas caen a la MISMA ALTURA por construcción (medido:
Δ ≤ 0,1 px en 24 anchuras, de 360 a 1920) y `cover` no tiene nada
que recortar. Es «la foto manda» escrito en el CSS.
fila A plóter 1.5fr · lonas .6667fr → 927×618 y 412×618 a 1440
fila B banderolas · camión · vinilos → 413/415/490 × 313 a 1440
El orden de lectura es 1-3-2-4-5 respecto de la entradilla: la
vertical sube a la fila A porque en una tira de tres se quedaba en
222 px de ancho, la mitad que sus hermanas, y ahí arriba mide 412.
REFLUJO. A 1200 px la fila B ya no da de sí para tres: banderolas y
camión se quedan en pareja y la panorámica pasa a lámina de ancho
completo. A 560 px todo baja a una columna. La fila A aguanta en
pareja hasta 560 porque su pieza estrecha es justo la vertical.
SIN JS Y CON MOVIMIENTO REDUCIDO no cambia nada —comprobado en los
cuatro modos: mismo alto de sección, mismas cajas y las cinco piezas
con `opacity: 1`—. No hay pin, no hay carro, no hay contador y no hay
nada escondido detrás de un mecanismo: se retiran `[data-galh]`,
`[data-galh-n]`, el riel y el contador 01/05. Lo único que se mueve
es la entrada escalonada de `[data-reveal]` y el zoom de `.media img`
en hover, y de los dos se encarga ya §27 de la hoja compartida — por
eso este bloque NO añade ni una línea allí.
⚠️ El `data-reveal` de la NO es decorativo: es lo único que
enciende la línea de cota (estilos.css §34). No se quita.
============================================================ */
.rot-mural {
/* La junta del mural. Más apretada que `--gap` (32 px a 1440) a
propósito: aquí el carbón entre fotos es hueco, no ritmo. */
--rotmur-junta: clamp(14px, 1.45vw, 24px);
/* `--rc` = ratio de la CAJA de cada pieza, declarado abajo pieza a
pieza. No hay un valor por defecto a propósito: si alguien añade
una sexta foto sin declararlo, la lámina no se dibuja y se ve. */
padding-block: var(--sec-y);
}
/* --- Las dos filas --------------------------------------------
`align-items: start` para que un rótulo de dos líneas no estire la
pieza hermana: las fotos ya salen parejas por la retícula. */
.rot-mural__fila {
display: grid;
/* La junta vertical va DOBLE que la horizontal, aquí y entre filas: en
el canalón vertical, además de la junta, va el pie de la pieza de
arriba, y con la misma medida el rótulo se leía pegado a la foto de
abajo. Importa cuando la fila B se parte en dos (≤1200) y cuando
todo baja a una columna (≤560). */
gap: calc(var(--rotmur-junta) * 2) var(--rotmur-junta);
align-items: start; /* el `list-style: none` ya lo pone el reset de §01 */
}
.rot-mural__fila + .rot-mural__fila { margin-top: calc(var(--rotmur-junta) * 2); }
.rot-mural__fila--a { grid-template-columns: 1.5fr .6667fr; }
.rot-mural__fila--b { grid-template-columns: 1.32fr 1.3252fr 1.5644fr; }
.rot-mural__p {
display: flex;
flex-direction: column;
min-width: 0; /* sin esto el rótulo largo ensancha la columna */
}
/* --- La lámina ------------------------------------------------
El alto sale de la proporción, no de un `clamp` de píxeles: por eso
las hermanas de una fila coinciden al píxel en las siete anchuras. */
.rot-mural__media {
width: 100%;
aspect-ratio: var(--rc);
}
/* Un modificador por pieza, todos con la MISMA especificidad (una
clase): así el reflujo de abajo puede reescribir `--rc` sin pelearse
con la cascada.
FILA A · el valor es, literalmente, el tamaño del fichero, y la
columna vale lo mismo: las dos fotos salen enteras, sin un píxel de
recorte, y a la misma altura.
FILA B · las tres comparten una LÁMINA COMÚN un 12 % más alta que su
proporción (factor 0,88 sobre las tres a la vez, así que las anchuras
no se mueven). Es el único recorte del bloque: un 6 % por lado, para
que la tira no quede de canto contra el plano largo de arriba. */
.rot-mural__p--placa { --rc: 1.5; } /* rot-nave 1920x1280 · entera */
.rot-mural__p--vert { --rc: .6667; } /* rot-plotter 1280x1920 · entera */
.rot-mural__p--bande { --rc: 1.32; } /* rot-banderas 1920x1280 (1,5) */
.rot-mural__p--cam { --rc: 1.3252; } /* furgoneta 1920x1275 (1,5059) */
.rot-mural__p--pano { --rc: 1.5644; } /* rot-vinilos 2560x1440 (1,7778) */
/* --- El pie: filete de 1 px con el arranque en amarillo --------
Mismo lenguaje que el resto del sitio (filete gris que se enciende
al pasar por encima) más la diagonal de la marca —los mismos 2 px
escorados 30° del `.kicker`—. El amarillo aquí es luz sobre el
filete, no relleno. */
.rot-mural__pie {
position: relative;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--linea);
transition: border-color 620ms var(--ease);
}
.rot-mural__pie::before {
content: "";
position: absolute;
left: 0; top: -2px;
width: 28px; height: 2px;
background: var(--amarillo);
transform: skewX(-30deg);
transform-origin: left center;
transition: width var(--dur-ui) var(--ease);
}
.rot-mural__p:hover .rot-mural__pie { border-color: var(--linea-alta); }
.rot-mural__p:hover .rot-mural__pie::before { width: 52px; }
.rot-mural__p:hover .rot-mural__media img { transform: scale(1.05); }
.rot-mural__cat {
display: block;
font-family: var(--display);
font-weight: 600;
font-size: var(--fs-kicker);
line-height: 1;
letter-spacing: var(--ls-kicker);
text-transform: uppercase;
color: var(--amarillo);
margin-bottom: 9px;
}
.rot-mural__t {
font-family: var(--display);
font-weight: 700;
font-size: var(--fs-h4);
line-height: 1.12;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--texto);
}
/* --- Reflujo ---------------------------------------------------
1200 px: la fila B ya no da de sí para tres —a 1201 la tira mide 258
px de alto y de ahí para abajo se queda en cromos—. Banderolas y
camión conservan su lámina común y la panorámica baja a banda de
ancho completo: 944 px a 1024, que es la foto más grande de toda la
página. La banda es el recorte más fuerte del bloque (2,45 de caja
contra 1,7778 de fichero → se ve el 73 % del alto) y se le hace a
ella a propósito: es una TEXTURA —bobinas en fila— y aguanta el
corte. A un camión o a una banderola no se les haría. */
@media (max-width: 1200px) {
.rot-mural__fila--b { grid-template-columns: 1.32fr 1.3252fr; }
.rot-mural__p--pano { grid-column: 1 / -1; --rc: 2.45; }
}
@media (max-width: 860px) {
.rot-mural__p--pano { --rc: 2.25; }
}
/* 560 px: una columna. La vertical es la única que no cabe entera
—a 342 px de ancho pediría 513 de alto—, así que su caja se abre a
0,9 y enseña el 74 % del alto. Las demás van a su proporción. */
@media (max-width: 560px) {
.rot-mural__fila--a,
.rot-mural__fila--b { grid-template-columns: 1fr; }
.rot-mural__p--vert { --rc: .9; }
.rot-mural__p--bande { --rc: 1.5; }
.rot-mural__p--cam { --rc: 1.5059; }
.rot-mural__p--pano { --rc: 1.7778; }
.rot-mural__pie { margin-top: 13px; padding-top: 12px; }
}
/* --- Papel -----------------------------------------------------
§28 ya salva `figure` de partirse, pero aquí la pieza es el ``
(foto + pie) y es eso lo que no puede quedar a caballo de dos A4.
Y el amarillo del rótulo, que en papel es jerarquía, la lleva el
peso — el mismo trato que §28 le da a `.trab__cat`. */
@media print {
.rot-mural__fila { display: block; }
.rot-mural__p { break-inside: avoid; margin-bottom: 14pt; }
.rot-mural__pie::before { display: none; }
.rot-mural__cat { font-weight: 800; }
}
/* ============================================================
8 · MATERIALES Y ACABADOS — RETIRADO (6-sep-2026)
------------------------------------------------------------
Aquí vivían las 102 líneas de `.rot-mat`, `.mat`, `.mat__f`,
`.mat__sw`, `.mat__t`, `.mat__p` y `.mat__tag` — incluidas las
ocho muestras de material, que no eran fotos sino tramas y
cortes en diagonal dibujados con `repeating-linear-gradient`
sobre una variable de color en línea. El cliente retiró el
bloque entero; ver el comentario del HTML.
============================================================ */
/* ============================================================
9 · LAS OTRAS TRES DIVISIONES — SUBIDO A LA HOJA COMPARTIDA (5-sep-2026)
------------------------------------------------------------
Aquí vivían las 165 líneas de `.rot-cruce` / `.cruce__*`, 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: el pie con la frase y los dos enlaces («Pedir
presupuesto» y el teléfono). Los dos siguen en la cabecera, en el
pie de página y en el `.ccta` final de esta misma página.
============================================================ */
/* ============================================================
10 · FAQ y 11 · CTA FINAL — YA NO SON DE ESTA PÁGINA (1-sep-2026)
------------------------------------------------------------
El cliente pidió que las cuatro páginas de división vean la FAQ
igual que la de inicio y el cierre igual que el de ferretería, así
que las dos composiciones propias que vivían aquí se han borrado
enteras:
· `.rot-faq*` — acordeón a una columna con la pregunta en display
grande y el número amarillo colgando. Ahora la sección es el
`.faq` compartido de estilos.css §18. Con ella se han ido el
fondo `--sup` y el `border-block` que solo tenía esta página;
la separación con `#divisiones` la sostienen ahora el
`padding-block: var(--sec-y)` de las dos secciones y el filete
de `[data-filete]`.
· `.rot-cta*` — caja de superficie elevada cortada en diagonal.
Ahora la sección es el `.ccta` compartido de estilos.css §31.
Si algún día hace falta un ajuste SOLO para rotulación, va debajo
de esta nota y acotado a `.faq` / `.ccta` de esta hoja, nunca en la
hoja compartida.
============================================================ */
/* ============================================================
12 · LA BANDA #rotulos Y EL RAÍL #durar — SIN REGLAS PROPIAS (1-sep-2026)
------------------------------------------------------------
El cliente pidió que los dos bloques que estrenó Maquinaria —la banda
destacada y el raíl de cuatro pasos— estuvieran en las cuatro páginas
de división, así que subieron a la hoja compartida: `.destacado` es
estilos.css §32 y `.asesor + .rail` es §33, con `--rail-x` en
tokens.css. Aquí no hay ni una regla suya, y es a propósito: se han
maquetado con el componente TAL CUAL, sin excepción de página.
`gemelos.py` lo confirma a 1440 px: `.destacado` y `.asesor` salen
idénticos a los de maquinaria.html.
Lo único de esta página que llevan puesto es la transición de
sección: las dos `` estrenan `sec--cinta` (§2), igual que
#servicios, #trabajos y #divisiones. Eso las mete gratis en las dos
guardas de §13 —la cinta se apaga con movimiento reducido y sin JS—,
así que tampoco hay nada que añadir allí.
⚠️ `sec--cinta` lleva `overflow-x: clip` para que el sobreancho de la
cinta no ensanche el viewport en móvil, y en #durar convive con el
`position: sticky` de `.asesor__cab`. Es compatible y está medido:
`clip` no crea contenedor de scroll —por eso se eligió frente a
`hidden`, ver §2—, así que el pin conserva su recorrido (medido a
1440×900: se queda clavado en 3 de 16 posiciones de scroll) y
`document.documentElement.scrollWidth` sigue siendo igual a
`innerWidth` a 1440 y a 390.
Si algún día hace falta un ajuste SOLO para rotulación, va debajo de
esta nota y acotado a `#rotulos` / `#durar`, nunca en §32 ni en §33:
esas dos tocan a las cuatro divisiones a la vez.
============================================================ */
/* Encuadre del fondo de la banda. La foto (2,334:1) es más apaisada que la
franja a partir de ~1.380 px de ventana y `cover` recorta por arriba y por
abajo, centrado. Con la frontal de la nave el rótulo DYRECO va en el tercio
alto de la foto: se ancla el encuadre al 30 % para que las letras no
toquen nunca el tramo superior del scrim ni queden seccionadas en ventanas
muy anchas (a 2560 se recortan 505 px y centrado las dejaba justo al
borde). A 1440 el recorte es de 25 px y no se aprecia. */
#rotulos .destacado__fondo img { object-position: 50% 30%; }
/* Scrim lateral de la banda, tramo derecho subido de .34 a .60. Los cuatro
puntos van en la mitad derecha, justo donde el scrim compartido afloja
«para que se reconozca la nave», y el numeral «33» y los marcos de las
ventanas asomaban detrás de «LO INSTALA DYRECO» y «LA LUZ DEL RÓTULO». La
vertical queda igual que en §32; solo se cierra la lateral. Va acotado
porque en las otras tres divisiones el fondo es otro y ahí sí se quiere
ver. */
@media (min-width: 1025px) {
#rotulos .destacado__scrim {
background:
linear-gradient(90deg, rgba(14,14,16,.90) 0%, rgba(14,14,16,.80) 40%, rgba(14,14,16,.66) 72%, rgba(14,14,16,.60) 100%),
linear-gradient(180deg, rgba(14,14,16,.66) 0%, rgba(14,14,16,.16) 28%, rgba(14,14,16,.28) 56%, rgba(14,14,16,.84) 86%, rgba(14,14,16,1) 100%);
}
}
/* ============================================================
12b · VIUDAS — `text-wrap: pretty` en los párrafos cortos
------------------------------------------------------------
Una palabra sola cerrando párrafo en media página: «equipo.» en la
entrada del hero, «carretera.» en el lead, «vehículo.» en la tarjeta
01, «entero.» en la banda, tres fichas de materiales a 1440 (bloque
retirado el 6-sep-2026) y siete
de ocho a 390, los cuatro puntos de la banda a 834, cuatro de seis
respuestas de la FAQ. El copy se ha reescrito donde hacía falta, y
además el navegador reparte las últimas líneas (Chrome 117+, Safari
17.5+; donde no exista no cambia nada). `balance` en las preguntas de
la FAQ, que son de una o dos líneas. No cambia el número de líneas,
así que la geometría que compara gemelos.py sigue siendo la misma.
→ CANDIDATA A SUBIR a estilos.css: las clases compartidas
(`.hero-div__entrada`, `.destacado__p`, `.punto__p`, `.rail__p`,
`.cabecera-sec__entrada`, `.faq__r p`, `.faq__p`) tienen las mismas
viudas en las otras divisiones.
============================================================ */
#hero .hero-div__entrada,
.rot-intro__lead,
.rot-intro__p,
#servicios .cabecera-sec__entrada,
#proceso .cabecera-sec__entrada,
#trabajos .cabecera-sec__entrada,
#divisiones .cabecera-sec__entrada,
.serv__p,
#rotulos .destacado__p,
#rotulos .punto__p,
#durar .rail__p,
#durar .asesor__entrada,
#faq .faq__r p,
#cta .ccta__p { text-wrap: pretty; }
#faq .faq__p { text-wrap: balance; }
/* ============================================================
13 · PREFERS-REDUCED-MOTION Y SIN JS
Todo visible y quieto. La galería pasa a rejilla por el CSS
compartido; aquí solo se apaga lo que es de esta página.
============================================================ */
/* ⚠️ ESTE BLOQUE SE QUEDÓ SIN NADA QUE APAGAR (6-sep-2026). Sus reglas
domesticaban la GALERÍA HORIZONTAL de #trabajos —el carro, sus tres
anchos de pieza y el contador «01 / 05»— cuando no había JS o el
visitante pedía movimiento reducido. La galería se retiró ese día: el
bloque es ahora un mosaico quieto que no necesita mecanismo, así que no
hay nada que degradar. Con ella se fue también la última regla de las
fichas de materiales. El movimiento que queda en la página —reveals y
zoom de `.media img`— lo apaga §27 de la hoja compartida. */