/* ============================================================ DYRECO · Dirección C — NAVE p-ferreteria.css — lo que es SOLO de ferreteria.html ------------------------------------------------------------ Se carga DESPUÉS de estilos.css. Los mecanismos (marquee, reveals, parallax, contadores, microinteracciones) son compartidos y viven en css/estilos.css. Aquí va la COMPOSICIÓN de esta página y su transición de sección propia. La idea: ferretería es la división más antigua y la de catálogo. Su página es la más DENSA de las ocho — ritmo vertical más corto, filetes por todas partes y listas a dos columnas. Se nota que aquí hay de todo. ⚠️ TRES BLOQUES YA NO VIVEN AQUÍ (1-sep-2026). El cliente pidió que las cuatro páginas de división vean IGUAL el hero, la FAQ y el CTA final, así que los tres son componentes compartidos de estilos.css: el hero de mosaico en §30 (`.hero-div`), la FAQ de la Home en §18 (`.faq`) y el CTA en §31 (`.ccta`, que salió de esta misma hoja). Aquí quedan sus notas —§03, §10 y §11— y ninguna regla. 00 Tokens propios 06 Reparto (banda, 2 capas) 01 Navegación activa 07 Marcas 02 Migas (borradas) 08 Obra (albarán) 03 Hero (nota: §30) 09 Cruce de divisiones 03-B Cabeceras partidas 10 FAQ (§18) · 11 CTA (§31) 04 Categorías (el pasillo) 12 Transición .sec--regla 04-B Banda + raíl (§32/§33) 13 reduced-motion y sin JS 05 Mostrador 14 Impresión (compensa el renombrado) ⚠️ NOMBRES CON LA PÁGINA DENTRO. Dos bloques de esta hoja estaban en la lista de colisiones de estilos.css §29-I y se han renombrado con la regla que la propia §29 escribe: `.most` → `.most-ferreteria` (chocaba con contacto, y `.most__foto` tenía valores distintos en cada hoja) y `.cruce` → `.cruce-ferreteria` (cuatro implementaciones, y en rotulación el mismo nombre designa otro nivel del DOM). El detalle, en §05 y §09. ============================================================ */ /* ============================================================ 00 · TOKENS PROPIOS ============================================================ */ :root { /* Ritmo vertical propio. El de la casa (--sec-y: 96→176px) es aire de galería y aquí sobra: esta es la página de catálogo y tiene que leerse apretada. Token propio para no tocar el compartido, que usan las otras siete páginas. */ /* ⚠️ IGUALADO A `--sec-y` (4-sep-2026). Valía clamp(76px,7.4vw,128px) —un ritmo propio, más corto, porque ésta es la página más densa—. Pero desde que cinco de sus doce secciones son componentes compartidos (hero, banda, raíl, FAQ y CTA) que respiran `--sec-y`, la página mezclaba dos ritmos: 106 px en sus secciones propias contra 144 en los compartidos, medido a 1440. Se notaba al bajar. Como los compartidos no pueden ceder —el encargo es que se vean idénticos en las cuatro divisiones—, cede la página. El token se queda declarado (lo leen ocho reglas) apuntando al del sistema, así que basta esta línea para volver atrás. */ --sec-fer: var(--sec-y); --bloque-fer: clamp(32px, 3.4vw, 60px); /* ⚠️ Aquí vivían `--fs-h1-fer` (el cuerpo del H1 de la hoja de contacto) y `--mos-gap` (la junta de sus cuatro fotos). Los dos se han borrado con el hero viejo el 1-sep-2026: el titular lo dimensiona `.hero-div__h1` y la junta del mosaico es el token compartido `--junta-mosaico`. No los reclama ninguna regla de esta hoja ni ningún `sizes` del HTML. */ } /* ============================================================ 01 · NAVEGACIÓN — estado de página activa El vocabulario ya existe (el subrayado amarillo en diagonal del hover); aquí solo se deja encendido de forma permanente. ============================================================ */ /* La zona de toque del pie del menú móvil (.panel__tel / .panel__mail) ya NO se parchea aquí: vive donde le toca, en el componente compartido (estilos.css § 05 · .panel__pie). */ /* ============================================================ 02 · MIGAS — BORRADAS CON EL HERO VIEJO (1-sep-2026) ------------------------------------------------------------ La ruta «Inicio › Ferretería» vivía DENTRO de `.ferh__texto`, que era la columna de texto del hero de hoja de contacto. El hero compartido (`.hero-div`, estilos.css §30) no tiene ese hueco y ninguna de las otras tres divisiones llevaba migas, así que el rastro se cae con el bloque. Las reglas `.migas*` se van con él: eran las únicas de la hoja y ya no las reclama nadie en el HTML. ============================================================ */ /* ============================================================ 03 · HERO — SUBIDO A LA HOJA COMPARTIDA (1-sep-2026) ------------------------------------------------------------ Ferretería abría con una HOJA DE CONTACTO propia: `.hero--fer` más el prefijo `.ferh__*` (dos columnas desalineadas de cuatro fotos con parallax cruzado, la ficha de datos del mostrador y la banda de cifras cosida con filetes). El cliente pidió que las cuatro páginas de división abran IGUAL, así que ese hero se sustituye por el MOSAICO compartido, que es `.hero-div` y vive en estilos.css §30. Aquí no queda ninguna regla suya. Lo que arrastró el cambio, y consta: · `--fs-h1-fer` y `--mos-gap` (§00) se han borrado: el titular lo dimensiona ahora `.hero-div__h1` y la junta del mosaico es el token compartido `--junta-mosaico`. · Las CIFRAS no se pierden: pasan a la banda `.confianza` de estilos.css §07, sin CSS propio (ver el HTML, sección 02). · La ficha de datos (`.ferh__datos`: teléfono, horario y las dos direcciones) sí desaparece, por duplicidad: el teléfono y el horario están enteros en #mostrador y las direcciones en el CTA y en el pie. ⚠️ Para un ajuste que solo afecte a ESTA página, la regla va aquí acotada a `#hero`, nunca en el bloque compartido de estilos.css. ⚠️ Y NO HAY `max-width: 20ch` PARA EL H1 (3-sep-2026): caía en cuatro líneas a 1440 y la tentación era ensancharlo solo aquí, pero gemelos compara el ancho del H1 con Rotulación y dejaría de ser el mismo hero. Se ha resuelto con el texto («…en Palma y Calvià»): 3 líneas a 1440. ============================================================ */ /* ============================================================ 03-B · CABECERAS PARTIDAS — el titular ocupa SU columna ------------------------------------------------------------ `.h2` está topado a 20ch en estilos.css §02, y dentro de la columna izquierda de una `.cabecera-sec--split` (7 de 12 = 743 px a 1440) eso deja el titular en 552 px y 191 px de vacío a su derecha. Pasa en las TRES cabeceras partidas de esta página —el pasillo, las marcas y el cruce de divisiones— y en marcas era lo peor del bloque: 299 px de nada entre el titular y la entrada. 26ch = 718 px a 1440: llena la columna sin desbordarla. ⚠️ Va aquí y NO en estilos.css: el tope de 20ch lo comparten las otras siete páginas y ninguna ha pedido cambiarlo. ============================================================ */ .cabecera-sec--split .h2 { max-width: 26ch; } /* ============================================================ 04 · QUÉ SE ENCUENTRA — el pasillo Foto FIJA a la izquierda mientras las doce familias desfilan a la derecha en dos columnas de filetes. El bloque más denso del sitio. ============================================================ */ .cats { padding-block: var(--sec-fer); } .cats__cuerpo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--bloque-fer) var(--gap); align-items: start; } /* ⚠️ AQUÍ HABÍA UN PIN Y SE RETIRA (1-sep-2026). La foto iba `position: sticky` dentro de un área de dos filas, y ese recorrido —el que hacía que se quedara quieta mientras las doce familias desfilaban— es exactamente el HUECO que se medía debajo: 432 × 227 px de negro bajo la foto en todas las posiciones de scroll menos las del final del recorrido, y 97 px de diferencia entre las dos hermanas de la fila (aside 540 contra lista 637). Un pin de columna corta ese hueco no lo puede evitar: es su combustible. Se cambia por la figura ESTIRADA, que es el patrón que ya usan `.esc__foto` (rotulación) y `.cruce-maquinaria__mini` (maquinaria): la columna ocupa las dos filas y la foto ocupa la columna entera, así que el alto lo marca el TEXTO y no puede sobrar sitio por construcción. Lo que NO se pierde: «el pasillo que se acerca» seguía siendo el zoom por scroll (`--z`, js/p-ferreteria.js), y ese sigue igual —ahora sobre una foto de 548 × 767 en vez de 432 × 540, o sea que se ve más—. ⚠️ `1 / span 5` en vez de `span 4`: con 4 columnas la foto acababa en x=472 y la lista arrancaba en 620, un pasillo muerto de 148 px que no era la junta de la rejilla (32) sino una columna entera sin usar. */ .cats__aside { grid-column: 1 / span 5; grid-row: 1 / span 2; /* La columna ocupa su ÁREA (lista + hueco + pie), no su contenido, y es rejilla para poder pasarle ese alto a la figura de dentro. */ align-self: stretch; display: grid; } /* Sin `aspect-ratio` a propósito: el alto lo fija la columna de al lado y `cover` resuelve el recorte. El `min-height` es la red por si algún día la lista adelgaza (una sección con dos familias en vez de doce). */ .cats__foto { align-self: stretch; min-height: clamp(320px, 34vw, 620px); } /* ⚠️ La sale del flujo. Con `height:100%` sobre una caja de alto automático el porcentaje no resuelve, el navegador cae a la altura intrínseca del fichero y ESA pasa a mandar sobre la fila —que es justo el defecto que se está arreglando—. Posicionada, la
se queda sin contenido en flujo y su alto lo fija la rejilla. Mismo patrón que `.esc__foto img` en p-rotulacion.css. */ .cats__foto img { position: absolute; inset: 0; } /* El zoom lo conduce el scroll (js/p-ferreteria.js): sin transición, o el valor llegaría siempre tarde. Sin JS, --z no existe y la escala es 1. */ .cats__foto img { transform: scale(calc(1 + var(--z, 0) * .09)); transition: none; } /* Pie del bloque: vive en la columna que rueda (segunda fila de la rejilla), no colgando de la foto. Es lo que le devuelve el recorrido al pin. */ .cats__pie { grid-column: 6 / span 7; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px clamp(24px, 3vw, 52px); padding-top: clamp(18px, 1.8vw, 26px); border-top: 1px solid var(--linea); } .cats__nota { font-size: var(--fs-sm); line-height: 1.6; color: var(--apagado); /* 52ch eran 446 px; el peldaño de 14 px lo deja en 400. `flex-basis` en `ch` se queda: ahí solo dice «este trozo puede encoger bastante». */ max-width: var(--medida-s); flex: 1 1 20ch; } .cats__lista { grid-column: 6 / span 7; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 52px); row-gap: 0; align-items: start; } .cat { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 16px 0 18px; border-top: 1px solid var(--linea); transition: border-color 620ms var(--ease); } .cat:hover { border-color: var(--am-30); } .cat::after { content: ""; position: absolute; left: 0; top: -1px; width: 46px; height: 2px; background: var(--amarillo); transform: scaleX(0) skewX(-30deg); transform-origin: left; transition: transform 560ms var(--ease-suave); } .cat:hover::after { transform: scaleX(1) skewX(-30deg); } .cat__n { grid-column: 1; grid-row: 1; font-family: var(--display); font-weight: 600; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); line-height: 1.5; color: var(--amarillo); opacity: .6; transition: opacity 420ms var(--ease); /* ⚠️ LOS DOCE TÍTULOS NO ARRANCABAN EN LA MISMA VERTICAL. La columna del número es `auto`, o sea que cada ficha la mide con SU número, y en Saira Condensed los dígitos no son de ancho fijo (`tabular-nums` no hace nada: la familia no trae la característica). Medido a 1440: los números van de 12,27 px («11») a 16,61 px («08») y los títulos arrancaban en x = 646,3 … 650,4 —4,1 px de escalera en una lista de doce con filete—. El ancho mínimo común (16,61 px = 1,407 em) fija la columna y los títulos caen todos en la misma vertical, a cualquier cuerpo. */ min-width: 1.45em; } .cat:hover .cat__n { opacity: 1; } .cat__t { grid-column: 2; grid-row: 1; font-family: var(--display); font-weight: 700; font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); line-height: 1.12; letter-spacing: .04em; text-transform: uppercase; color: var(--texto); } .cat__p { grid-column: 2; grid-row: 2; margin-top: 6px; font-size: var(--fs-sm); line-height: 1.55; color: var(--apagado); max-width: 34ch; } @media (max-width: 1024px) { /* Una sola columna: el pin se apaga y las tres piezas vuelven a rodar en orden. `grid-row: auto` es imprescindible — sin él el aside seguiría reservando dos filas y dejaría un hueco vacío debajo de la foto. */ .cats__aside { grid-column: 1 / -1; grid-row: auto; align-self: start; display: block; } /* En horizontal la foto pasa a banda: un retrato a todo el ancho ocuparía media pantalla para no contar nada más. Aquí el alto vuelve a salir de la proporción (no hay columna hermana que lo marque), así que el `min-height` del estirado sobra y se apaga. */ .cats__foto { aspect-ratio: 21 / 9; min-height: 0; } /* A una columna la nota se estiraba a 60ch = 514 px → 85 caracteres. */ .cats__nota { max-width: var(--medida-s); } .cats__lista { grid-column: 1 / -1; grid-row: auto; } .cats__pie { grid-column: 1 / -1; grid-row: auto; } } @media (max-width: 620px) { /* A un solo tercio de ancho la nota y el enlace no conviven en línea. */ .cats__pie { display: grid; justify-items: start; } } @media (max-width: 620px) { .cats__lista { grid-template-columns: 1fr; } .cats__foto { aspect-ratio: 3 / 2; } } /* ============================================================ 04-B · LOS DOS BLOQUES COMPARTIDOS DE DIVISIÓN (1-sep-2026) ------------------------------------------------------------ El cliente pidió la banda destacada y el raíl de cuatro pasos en las CUATRO páginas de división. Los dos componentes viven en la hoja compartida —`.destacado` en estilos.css §32 y `.asesor` + `.rail` en §33— y aquí solo va lo que es de ESTA página: el ritmo vertical propio y el ajuste que pide su transición de sección. Son TRES reglas y ninguna toca el componente: van acotadas por el id de la sección, así que no pueden alcanzar a Maquinaria, Uniformidad ni Rotulación. ============================================================ */ /* 1 · RITMO — RETIRADO (3-sep-2026). Aquí había `#elegir, #tornilleria { padding-block: var(--sec-fer); }` para que la banda y el raíl respirasen como el resto de esta página (106 px a 1440 en vez de los 144 de `--sec-y`). Pero el encargo es que los cinco bloques compartidos —hero, banda, raíl, FAQ y CTA— se vean IDÉNTICOS en las cuatro divisiones, y gemelos.py los compara padding incluido: con la regla puesta, `.destacado` y `.asesor` daban 106,56 ≠ 144 contra Maquinaria. Manda la identidad. La consecuencia, que consta: la página mezcla dos ritmos (--sec-fer en sus secciones propias, --sec-y en los cinco bloques compartidos). Si se quiere el ritmo corto también en los compartidos, la decisión es de la hoja compartida, no de esta. */ /* 2 · LA TRANSICIÓN DE SECCIÓN CONTRA EL PARALLAX. §12 de esta hoja desplaza 26 px el hijo directo `.cont` de toda `.sec--regla` — es la segunda capa de la transición— y avisa de que eso NUNCA puede caer sobre una sección con parallax, porque el `.cont` de una banda de dos capas ya lleva su propio `transform` y main.js se lo escribe EN LÍNEA. `#tornilleria` es exactamente ese caso (`.destacado__cont` con `data-parallax="-0.05"`), así que el desplazamiento se desactiva ahí: si no, la primera trama de scroll borra los 26 px de golpe y se ve un salto. El bloque no se queda sin entrada: la ponen la regla de ticks de la sección y el escalonado de los cuatro puntos y de la tira de fotos, que es exactamente lo que hace la banda de Maquinaria (allí el `data-reveal` de la sección lo neutraliza `sec-cota`). El `.cont` de la foto del raíl y `.asesor__int` NO llevan parallax, así que se quedan con la transición entera. */ html.js:not(.reveals-sellados) #tornilleria > .cont { transform: none; } /* 3 · EL FILETE DOBLE. `.destacado` cierra con `border-bottom` (§32) y justo debajo `#elegir` abre con la regla de ticks, que empieza por su propia línea de 1 px: dos filetes pegados que se leen como uno gordo y sucio. Manda la regla, que es la transición de la página; el borde se retira. */ #tornilleria { border-bottom: 0; } /* 4 · LOS CUATRO PUNTOS, CENTRADOS FRENTE AL TEXTO. Con `align-content: start` (§32) la rejilla 2×2 acababa 174 px por encima del pie de la columna de texto —a la altura de los dos botones— y la fila se leía descuadrada: izquierda llena hasta abajo, derecha vacía en su último tercio. Centrada, el vacío se reparte arriba y abajo. Solo cambia la posición vertical, así que el bloque sigue siendo idéntico al de Maquinaria para gemelos. */ #tornilleria .destacado__puntos { align-self: center; } /* ============================================================ 05 · EL MOSTRADOR ------------------------------------------------------------ ⚠️ SE LLAMABA `.most` Y CHOCABA CON CONTACTO (estilos.css §29-I). Las dos hojas usaban `.most` para la `
` —hasta ahí, latente— pero compartían un hijo con valores DISTINTOS: `.most__foto` es `21/9` en p-contacto.css y `1/span 7` + `16/10` aquí. El resto de hijos era disjunto (`__mapa/__lista/__rej` allí, `__cont/__texto/__tel/__items` aquí), que es justo lo que hace el choque difícil de ver: junta las dos hojas y la foto de una de las dos se desmaqueta sin un error en consola. Renombrado a `most-ferreteria` por la regla de §29 (el nombre lleva la página dentro). Contacto se renombra en su hoja, que no es esta. ⚠️ EFECTO COLATERAL YA COMPENSADO: la hoja de impresión compartida cita `.most__tel` por su nombre — ver §14 al final de este fichero. ============================================================ */ .most-ferreteria { padding-block: var(--sec-fer); border-top: 1px solid var(--linea); } .most-ferreteria__cont { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--bloque-fer) var(--gap); /* ⚠️ Era `center`, y con la foto atada a un `aspect-ratio: 16/10` fijo el resultado medido era: texto 697 px, foto 488, y 209 px de negro repartidos arriba y abajo de la foto. Centrar solo tiene sentido cuando las dos columnas miden lo mismo; aquí las hace medir lo mismo el `stretch`. */ align-items: stretch; } /* Figura estirada (mismo patrón que el pasillo, §04): el alto lo marca la columna de texto y `cover` resuelve el recorte. */ .most-ferreteria__foto { grid-column: 1 / span 7; align-self: stretch; min-height: clamp(300px, 30vw, 560px); } .most-ferreteria__foto img { position: absolute; inset: 0; } .most-ferreteria__foto img { transition: transform 1200ms var(--ease); } .most-ferreteria__foto:hover img { transform: scale(1.04); } .most-ferreteria__texto { grid-column: 8 / span 5; } /* El .h2 compartido no trae margen inferior (en la Home siempre vive dentro de .cabecera-sec, que lo pone). Aquí el titular y el párrafo son hermanos sueltos, así que el aire lo pone el párrafo. */ .most-ferreteria__p { color: var(--apagado); max-width: var(--medida); margin-top: var(--pieza); margin-bottom: var(--pieza); } /* El teléfono al cuerpo de un titular: en ferretería la conversión es la llamada, porque el cliente ya conoce al que descuelga. */ .most-ferreteria__llamada { display: grid; justify-items: start; gap: 6px; padding: 20px 0 22px; border-top: 2px solid var(--amarillo); border-bottom: 1px solid var(--linea); margin-bottom: var(--pieza); } .most-ferreteria__k { font-family: var(--display); font-weight: 600; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--amarillo); } .most-ferreteria__tel { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1; letter-spacing: .02em; color: var(--texto); transition: color var(--dur-ui) var(--ease); } .most-ferreteria__tel:hover { color: var(--amarillo); } /* Sin tope, el horario se estiraba a los 548 px de la columna y daba 74 caracteres por línea. Su cuerpo es --fs-sm, así que el peldaño es el pequeño; y como el bloque de la llamada solo contiene inline, capar aquí cierra también `.most-ferreteria__llamada`, que medía lo mismo. */ .most-ferreteria__h { font-size: var(--fs-sm); line-height: 1.5; color: var(--apagado); max-width: var(--medida-s); } /* A 390 la línea se partía DENTRO del paréntesis («(1 jul – 31 / ago)»): cada rango va en un y el salto cae en el «·». Misma ayuda que `.ccta__nota .nowrap` en estilos.css §31; si un tercer bloque la pide, es candidata a utilidad global. */ .most-ferreteria__h .nowrap { white-space: nowrap; } .most-ferreteria__items { display: grid; gap: 0; margin-bottom: var(--pieza); } .most-ferreteria__items li { position: relative; padding: 11px 0 11px 22px; font-size: var(--fs-sm); line-height: var(--lh-corto); color: var(--texto); border-bottom: 1px solid var(--linea); } .most-ferreteria__items li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 10px; height: 2px; background: var(--amarillo); transform: skewX(-30deg); } /* 44 px de área táctil sin despegar el subrayado del texto: el aire se pone con padding y el trazo se sube la misma cantidad. */ .most-ferreteria__enlace { display: inline-block; padding-top: 13px; padding-bottom: 14px; background-position: 0 calc(100% - 12px); font-size: var(--fs-sm); color: var(--texto); } @media (max-width: 1024px) { .most-ferreteria__foto, .most-ferreteria__texto { grid-column: 1 / -1; } /* A una columna no hay hermana que marque el alto: vuelve la proporción y el `min-height` del estirado se apaga. */ .most-ferreteria__foto { aspect-ratio: 16 / 9; min-height: 0; } } @media (max-width: 560px) { .most-ferreteria__foto { aspect-ratio: 4 / 3; } } /* ============================================================ 06 · REPARTO PROPIO — banda a sangre, PARALLAX DE DOS CAPAS Fondo lento (0.13) contra contenido rápido en sentido contrario (−0.06). Los factores viven en el HTML; aquí, la caja. ============================================================ */ .rep { position: relative; isolation: isolate; overflow: clip; /* Las dos bandas a sangre de la página respiran igual: este es el padding del `.ccta` (estilos.css §31). Antes 92→148 (124 px a 1440) contra los 115 del CTA. */ padding-block: clamp(88px, 8vw, 140px); /* Solo el filete de arriba: el de abajo se pegaba a la línea que ya pinta la regla de ticks de #marcas-sector (2 px medidos donde el resto de costuras miden 1). */ border-top: 1px solid var(--linea); } .rep__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; } /* Scrim rasante, reforzado donde se apoya el texto (izquierda y bajos) y más flojo a la derecha, que es por donde se reconoce la furgoneta. */ .rep__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,14,16,.93) 0%, rgba(14,14,16,.80) 44%, rgba(14,14,16,.52) 100%), linear-gradient(180deg, rgba(14,14,16,.66) 0%, rgba(14,14,16,.12) 34%, rgba(14,14,16,.22) 62%, rgba(14,14,16,.86) 100%); } .rep__cont { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(36px, 4vw, 68px) var(--gap); /* Las dos columnas miden lo mismo: es lo que permite cerrar la lista de pasos con un filete a la misma altura que el pie del texto. */ align-items: stretch; } .rep__cab { grid-column: 1 / span 5; } .rep__p { color: rgba(242,242,240,.92); max-width: var(--medida); text-shadow: 0 2px 26px rgba(0,0,0,.85); margin-top: var(--pieza); } .rep .h2 { text-shadow: 0 2px 40px rgba(0,0,0,.7), 0 1px 4px rgba(0,0,0,.5); } /* ⚠️ `7 / span 6` dejaba la cabecera acabando en x=588 y los pasos arrancando en 736: 148 px de pasillo muerto que no era la junta de la rejilla (32) sino una columna entera sin usar. Con `6 / span 7` las dos piezas se tocan por la junta y los tres pasos ganan 116 px de ancho. */ .rep__pasos { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* ⚠️ SUBGRID. Los títulos se alineaban con `margin-top: auto` en cada paso, y eso solo cuadra cuando los tres párrafos tienen las mismas líneas: a 834 el paso 02 tenía 2 y los otros 3, y «LO PREPARAMOS» arrancaba 22 px más abajo que sus hermanos. Con las filas compartidas los tres números, los tres títulos y los tres párrafos van cada uno en SU fila. ⚠️ TRES FILAS, NO CUATRO (5-sep-2026). Había una segunda fila `1fr` que absorbía todo el aire sobrante entre el número y el título: medido, 42 px aquí contra los 10 px del raíl y de la banda, en la misma página. Se veía desproporcionado y el cliente lo señaló. Fuera la fila: el hueco lo pone ahora el margen del número, igual que en sus hermanos. */ grid-template-rows: auto auto auto; /* Hueco SOLO entre columnas. `gap: var(--gap)` separaba también las filas del subgrid: 32 px de hueco + 10 del margen del número = 42 px entre «01» y su título, cuatro veces lo que usan el raíl y la banda de la misma página. */ gap: 0 var(--gap); /* ⚠️ LAS FILAS SE ESTIRABAN (5-sep-2026, 2º pase). El contenedor se estira a la altura de la cabecera para que el filete de cierre case con el pie del texto —eso se mantiene—, pero con `align-content: normal` ese aire sobrante lo repartían las tres filas `auto`: medidas 86/69/126 px para un número, un título y dos líneas. De caja a caja seguían 10 px (por eso la primera medición dijo que estaba bien), pero entre TINTA y TINTA había 43 px, contra los 3-12 de los otros cuatro bloques de pasos de la página. Con `end` las filas recuperan su alto natural y el grupo cuelga del filete de abajo, que es donde el cliente lo quiere. */ align-content: end; /* ⚠️ LA LISTA ESTABA ABIERTA POR ABAJO. Los tres pasos solo llevaban `border-top`, así que la banda terminaba en un texto suelto y no en una lista. El filete de cierre va en el CONTENEDOR y no en cada paso: uno solo, recto, cruzando las tres columnas y las juntas. */ border-bottom: 1px solid rgba(242,242,240,.28); } .rpaso { /* Cada paso es un subgrid de las cuatro filas del contenedor: número, espaciador, título y párrafo, alineados entre las tres columnas. */ display: grid; grid-template-rows: subgrid; grid-row: span 3; border-top: 1px solid rgba(242,242,240,.28); padding-top: 18px; padding-bottom: clamp(16px, 1.6vw, 22px); transition: border-color 620ms var(--ease); } .rpaso:hover { border-color: var(--amarillo); } .rpaso__n { grid-row: 1; display: block; font-family: var(--display); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); color: var(--amarillo); margin-bottom: 10px; text-shadow: 0 1px 12px rgba(0,0,0,.9); } /* Número, título y párrafo, cada uno en su fila: así los tres pasos comparten línea de base aunque un párrafo ocupe una línea más que sus vecinos. */ .rpaso__t { grid-row: 2; } .rpaso__p { grid-row: 3; } .rpaso__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: 10px; text-shadow: 0 2px 24px rgba(0,0,0,.8); } .rpaso__p { font-size: var(--fs-sm); line-height: 1.58; /* A 620 los tres pasos se apilan a fila entera: 572 px y 83 caracteres. */ max-width: var(--medida-s); color: rgba(242,242,240,.94); text-shadow: 0 1px 14px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.7); } @media (max-width: 1024px) { .rep__cab, .rep__pasos { grid-column: 1 / -1; } /* A una columna el scrim tiene que cubrir toda la banda, pero sin llegar a borrar la furgoneta: es la foto de marca de este bloque (contrato de la dirección C — a las fotos flojas se les sube el contraste, no se las apaga). Se queda en .78 arriba, que es donde el titular lleva sombra. */ .rep__scrim { background: linear-gradient(180deg, rgba(14,14,16,.78) 0%, rgba(14,14,16,.90) 50%, rgba(14,14,16,.95) 100%); } } @media (max-width: 620px) { /* Apilados, cada paso mide lo suyo: el subgrid se apaga (si no, cada paso reservaría cuatro filas del contenedor y las juntas vacías se sumarían) y las piezas vuelven a fluir en bloque. */ .rep__pasos { grid-template-columns: 1fr; grid-template-rows: none; gap: 28px; } .rpaso { display: block; grid-row: auto; padding-bottom: 0; } .rpaso__n { margin-bottom: 14px; } } /* ============================================================ 07 · MARCAS DEL SECTOR Mecanismo nº 4 (marquee), compuesto al revés que en la Home: una sola fila con las 20 marcas seguidas y el rótulo arriba a la izquierda, dentro de un marco de filetes. ============================================================ */ /* ⚠️ 531 px de alto para 268 px de contenido (cabecera 170 + marquesina 98): la mitad de la sección era aire. El marquee es una banda de paso, no un bloque de lectura, y no necesita el ritmo entero de la página: se le da una fracción declarada de `--sec-fer` —igual que hace `.confianza` con `--sec-y` en estilos.css §07— en vez de un clamp suelto. Medido a 1440: 213 px de relleno pasan a 150 y la cabecera suelta 17 más. El otro defecto del bloque, los 299 px de vacío tras el titular, se arregla en §03-B (el `.h2` sube de 20ch a 26ch). */ .marcasf { padding-block: calc(var(--sec-fer) * 0.7); } /* La banda de cifras cierra con `border-bottom` (estilos.css §07) y justo debajo #categorias abre con la regla de ticks, que trae su propia línea de 1 px: dos filetes pegados (2 px medidos). Manda la regla. */ #cifras { border-bottom: 0; } .marcasf__cab { margin-bottom: clamp(24px, 2.2vw, 36px); } .marcasf__marquee { border-block: 1px solid var(--linea); padding-block: clamp(20px, 2.2vw, 34px); } /* Una sola pista con el doble de nombres que la de la Home: para que la velocidad aparente sea la misma, la duración también se dobla. */ .marcasf__marquee .marquee__pista--a { animation-duration: 96s; } /* ============================================================ 08 · EQUIPAR UNA OBRA ENTERA — el caso como albarán Ficha fija a la izquierda y líneas numeradas a la derecha. ============================================================ */ .obra { padding-block: var(--sec-fer); } .obra__cont { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--bloque-fer) var(--gap); align-items: start; } /* ⚠️ AQUÍ HABÍA OTRO PIN Y TAMBIÉN SE RETIRA (1-sep-2026), por la misma razón que en el pasillo (§04) y con un motivo más: el recorrido del sticky era el rectángulo muerto de 432 × 364 px que se medía bajo la ficha, y encima el pin ya estaba apagado por las dos guardas de altura de abajo en cualquier portátil de 900 px o menos —o sea, en la mayoría de pantallas—. Ahora la ficha OCUPA la columna: `align-self: stretch` y, dentro, el botón amarillo empujado al pie con `margin-top: auto`. La ficha pasa a leerse como lo que dice ser, un albarán: la cabecera y los datos arriba, la firma abajo. ⚠️ `1 / span 5` en vez de `span 4`: con 4 columnas la ficha acababa en x=472 y el cuerpo arrancaba en 620 —148 px de pasillo muerto, una columna entera—. Con 5 se tocan por la junta de 32. */ .obra__ficha { grid-column: 1 / span 5; align-self: stretch; display: flex; flex-direction: column; background: var(--sup); border: 1px solid var(--linea); border-left: 3px solid var(--amarillo); border-radius: var(--radio); padding: clamp(24px, 2.2vw, 36px); } /* La ficha del albarán ocupa 5 de 12 en escritorio, pero a 1024 pasa a fila entera: ahí el párrafo medía 892 px y daba 120 CARACTERES por línea, el peor dato de la web. A 1440 estaba dentro, por eso no se había visto. */ .obra__p { color: var(--apagado); margin-top: var(--pieza); max-width: var(--medida); } /* ⚠️ LOS RENGLONES MIDEN LO QUE MIDEN Y EL SOBRANTE SE VA AL PIE. Con la columna estirada, el alto de más se puede repartir en tres sitios: dentro de los propios renglones (probado: 185 px de caja para 47 de tinta, los rótulos flotando), entre ellos con `space-between` (250 px entre «El pedido» y «La entrega») o por delante del botón. Lo tercero es lo que hace un albarán de verdad —cabecera y datos arriba, firma abajo—, y desde que la foto salió de esta columna (§08, HTML) casi no queda sobrante que repartir: la ficha y las seis líneas quedan parejas. */ .obra__datos { display: grid; gap: 0; /* ⚠️ `flex: 1 1 auto` + `align-content` en stretch era lo que estiraba los renglones: con la ficha a 1.000 px los tres medían 185 px para 47 de tinta, y `grid-auto-rows: auto` no bastaba porque el sobrante lo repartía `align-content`. Ahora los renglones miden lo suyo (47 px medidos) y el aire, si lo hay, se va al pie con el `margin-top: auto` del botón —que ya casi no lo hay: con la foto fuera de la columna, la ficha y las seis líneas quedan parejas. */ flex: none; align-content: start; margin: var(--pieza) 0 var(--pieza); border-top: 1px solid var(--linea); } .obra__datos > div { display: flex; flex-wrap: wrap; /* ⚠️ Era `baseline`, que cuadra rótulo y valor mientras el renglón mide lo que mide; con el renglón estirado dejaba el par pegado al filete de arriba y el aire entero debajo. `center` lo pone en medio de su fila y los dos textos siguen alineados entre sí (12 px el rótulo, 15 el valor: la diferencia de línea base no se ve). */ align-items: center; justify-content: space-between; gap: 8px 16px; padding: 11px 0; border-bottom: 1px solid var(--linea); } .obra__datos dt { font-family: var(--display); font-weight: 600; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--amarillo); } .obra__datos dd { margin: 0; font-size: var(--fs-sm); color: var(--texto); text-align: right; } /* El pie de la ficha: se lleva el aire sobrante por delante y se queda pegado al borde inferior de la tarjeta. */ /* Botón a su ancho, como el resto de botones de la página: a 100 % era una losa amarilla de 481 px (1440) a 892 (1024), y el amarillo es luz, no relleno. En móvil vuelve a ocupar la línea, igual que los del hero. */ .obra__btn { width: auto; align-self: flex-start; margin-top: auto; } .obra__cuerpo { grid-column: 6 / span 7; } /* Sin foto desde el 5-sep-2026 (ver el comentario del HTML). Aquí vivían las tres reglas de `.obra__foto` —la banda 21/9 a las doce columnas y su zoom en hover— y quedaron muertas al retirarla. El `row-gap` del shorthand de arriba NO sobra: de 1025 px para arriba queda inerte porque solo hay una fila, pero a ≤1024 la ficha y el cuerpo se apilan y lo siguen necesitando. */ .obra__lineas { display: grid; } .olin { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: clamp(14px, 1.6vw, 26px); padding: 16px 0 18px; border-top: 1px solid var(--linea); transition: border-color 620ms var(--ease), background 620ms var(--ease); } .olin:last-child { border-bottom: 1px solid var(--linea); } .olin:hover { border-color: var(--am-30); } .olin__n { font-family: var(--display); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); color: var(--amarillo); /* `tabular-nums` está declarado pero la familia no lo trae, así que «01» medía 14,48 px y «04» 16,36 y las seis líneas del albarán arrancaban en x = 657,5 … 659,4. El ancho mínimo común hace de columna, igual que en `.cat__n` (§04). */ font-variant-numeric: tabular-nums; min-width: 1.45em; } .olin__t { font-family: var(--display); font-weight: 700; /* Mismo cuerpo que .cat__t, .punto__t y .rpaso__t: era un clamp propio que daba 20,16 px donde sus hermanas dan 19,44. */ font-size: var(--fs-h4); line-height: 1.12; letter-spacing: .035em; text-transform: uppercase; margin-bottom: 6px; } /* ⚠️ EXCEPCIÓN RAZONADA A LA MEDIDA DE LECTURA — sigue SIN `max-width`. Medido el 8-sep-2026 con Range en los siete anchos: 1920 · 72 car · 1 línea 1024 · 72 car · 1 línea 1440 · 72 car · 1 línea 834 · 72 car · 1 línea 1280 · 72 car · 1 línea 620 · 66 car · 1 línea 390 · 47 car · 2 líneas Esos 72 caracteres NO son una línea larga de un párrafo: son la FRASE ENTERA («Vallas, conos, cinta, malla y señal homologada para cerrar el perímetro.»), que cabe de una tirada y no se parte en ningún ancho de escritorio. La medida de lectura protege del RETORNO de línea, y aquí no hay ninguno que proteger: el ojo no vuelve nunca. Poner el tope partiría las seis entradas en dos renglones desiguales y rompería el ritmo de seis filas parejas cerradas por filete, que es la forma entera del bloque. Donde sí hay retorno —390 px— la línea se queda en 47. Un tope de 52ch se probó y dejaba el texto en 445 px dentro de una columna de 780 —el 56 %— con los filetes cruzando la fila entera por encima. */ .olin__p { font-size: var(--fs-sm); line-height: 1.55; color: var(--apagado); } .olin__c { font-family: var(--display); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); white-space: nowrap; padding-left: 8px; border-left: 1px solid var(--linea); /* Las seis etiquetas miden cada una lo suyo y el filete que las precede bailaba 24 px de fila en fila (x = 1326…1350 a 1440). Con un ancho mínimo común los seis separadores caen en la misma vertical. */ min-width: 8em; } @media (max-width: 1024px) { /* A una columna la ficha vuelve a medir lo suyo: estirarla contra una fila que solo contiene a ella no haría nada, pero el `margin-top: auto` del botón sí abriría un hueco dentro de la tarjeta. */ .obra__ficha { grid-column: 1 / -1; align-self: start; } .obra__btn { margin-top: 0; } .obra__cuerpo { grid-column: 1 / -1; } } /* ⚠️ AQUÍ VIVÍAN LAS DOS GUARDAS DE ALTURA DEL PIN (`@media (max-height:840px)` y `@media (max-height:900px) and (min-width:1480px)`), que lo apagaban en cuanto la ventana no daba para 104 px + ficha + aire; si no, el botón amarillo —el CTA de la sección— se quedaba por debajo del borde inferior durante todo el recorrido pinchado (medido a 1440×600: caía entre y=677 e y=729, invisible e inalcanzable). Retirado el pin, las dos guardas sobran: la ficha rueda siempre con la página y el botón siempre se alcanza. */ @media (max-width: 560px) { .obra__btn { width: 100%; } /* La cantidad baja a su propia línea: a 360 px la caja de tres columnas dejaba el título en dos letras por línea. */ .olin { grid-template-columns: auto minmax(0, 1fr); } .olin__c { grid-column: 2; grid-row: 2; margin-top: 10px; padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); padding-top: 8px; } } /* ============================================================ 09 · CRUCE CON LAS OTRAS TRES DIVISIONES — SUBIDO A LA HOJA COMPARTIDA (5-sep-2026) ------------------------------------------------------------ Aquí vivían las 156 líneas de `.cruce-ferreteria` / `.cru`, una de las CUATRO implementaciones distintas que tenía el mismo bloque de venta cruzada entre divisiones. El cliente pidió tres tarjetas —fuera la de presupuesto—, una por columna y EN VERTICAL; como las cuatro páginas enseñan exactamente las otras tres divisiones, el encargo valía para las cuatro y la composición subió a estilos.css §35 (`.otras` / `.odiv`). Esta página ya no tiene NADA propio en este bloque. Lo que se pierde: la CUARTA tarjeta, la de «Presupuesto», que el cliente pidió quitar. El camino al presupuesto no se va con ella: la página cierra con el `.ccta` compartido, que es un CTA entero. ============================================================ */ /* ============================================================ 10 · FAQ — SUBIDA A LA HOJA COMPARTIDA (1-sep-2026) ------------------------------------------------------------ Esta página resolvía la FAQ con `.faqf`: dos pilas independientes de distinto ancho (1,14 : 0,86), la segunda arrancando 30 px más abajo, y cada pregunta numerada 01–06 en amarillo. El cliente pidió que las cuatro divisiones vean la MISMA FAQ que la Home, así que el bloque pasa a ser el `.faq` de estilos.css §18 —cabecera pinchada a la izquierda (4 columnas) y una sola lista a la derecha (7)— y aquí no queda ninguna regla. Lo que se pierde con el cambio, y consta: la numeración 01–06 (`.faqf__n`, que era la que cosía la FAQ al resto de la página: .cat__n, .olin__n, .rpaso__n, .odiv__n) y el párrafo de entrada de la cabecera, que el componente de la Home no contempla. Lo que se conserva: la transición `.sec--regla` de la sección, que es de la PÁGINA y no del bloque. ============================================================ */ /* ============================================================ 11 · CTA FINAL — SUBIDO A LA HOJA COMPARTIDA (1-sep-2026) ------------------------------------------------------------ `.ccta` era el cierre de esta página y ahora lo es de las cuatro divisiones, por petición del cliente. El componente vive en estilos.css §31. Aquí no queda ninguna regla. ============================================================ */ /* ============================================================ 12 · TRANSICIÓN PROPIA — RETIRADA (5-sep-2026) ------------------------------------------------------------ `.sec--regla` 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. ============================================================ */ /* ============================================================ 14 · IMPRESIÓN — lo que se perdió al renombrar `most` ------------------------------------------------------------ ⚠️ La hoja de impresión compartida (estilos.css §28.3) cita `.most__tel` por su nombre para devolverle en papel, con el peso, la jerarquía que en pantalla llevaba el amarillo. Ese teléfono es de ESTA página y solo de esta (`grep -l most__tel *.html` → una), pero al renombrar el bloque a `most-ferreteria` —§29-I: `most` colisionaba con p-contacto.css, donde `.most__foto` lleva su propia proporción y aquí la foto va estirada al alto del texto— la regla compartida dejó de encontrarlo y el 971 270 687 salía impreso en redonda. No se toca estilos.css (es compartida y hay siete páginas más en vuelo): la compensación va aquí, que es donde vive el bloque. ============================================================ */ @media print { .most-ferreteria__tel { font-weight: 800; } }