. `overflow: hidden` oculta la mitad duplicada de la pista fuera del viewport del bloque — el contenido en sí no se recorta nunca, solo lo que cae fuera de este contenedor. A diferencia del resto de la home, este bloque CANCELA el padding compartido de `.sitio-layout` (1.5rem 2rem) con márgenes negativos en vez de sumarle algo, para ir a sangre completa contra el sidebar y la barra superior y llegar hasta el borde derecho de la ventana — es el único bloque con fotos de borde a borde, por eso el único con esta excepción. El padding-bottom (heredado de `.bloque-home`) también se cancela, para que `border-radius` recorte justo contra la foto en vez de contra espacio en blanco. El aire antes del Hero lo aporta el padding-top de ESE bloque (cada `.bloque-home` trae el suyo por separado, no es el mismo espacio). */ .bloque-home--carrusel { overflow: hidden; border-radius: 8px; padding: 0; margin-top: -1.5rem; margin-left: -2rem; margin-right: -2rem; } /* La cancelación de arriba usa los valores de escritorio de `.sitio-layout` (1.5rem 2rem) — en mobile ese padding se pone en 0 y es `.sitio-main` quien aporta el suyo propio (ver el bloque `@media (max-width: 700px)` de más abajo), así que aquí hay que cancelar ESE padding en su lugar, con sus propios valores. En mobile la barra superior no es un

normal en el flujo — es `.sitio-sidebar__barra`, `position: fixed` (ver ese selector más abajo), así que no "empuja" contenido: el padding-top de `.sitio-main` es puro espacio simulado para no quedar tapado por ella. Por eso aquí solo se cancela el 1.5rem EXTRA que suma `.sitio-main` (el aire, no la barra) — `--menu-movil-barra-alto` (56px) se deja intacto, así el carrusel empieza justo debajo del borde de la barra fija, no detrás de ella. */ @media (max-width: 700px) { .bloque-home--carrusel { margin-top: -1.5rem; margin-left: -1.25rem; margin-right: -1.25rem; } } /* Pista con TODOS los items impresos dos veces seguidas (ver renderBloqueCarrusel() para el porqué) — `width: max-content` deja que la pista mida lo que su contenido real necesita, no el ancho del contenedor: `assets/js/carrusel.js` necesita ese ancho real completo para calcular dónde está "un juego completo" y reiniciar la posición sin salto, tanto en automático como al soltar un arrastre. `touch-action: pan-y` es lo que le permite a `carrusel.js` capturar el arrastre horizontal con Pointer Events sin pelearse con el scroll vertical nativo de la página en touch (el navegador sigue manejando el scroll vertical solo; el horizontal lo captura el script). `cursor: grab`/`:active { cursor: grabbing }` confirma con el propio puntero que la franja se puede jalar. El movimiento en sí (automático, arrastre e inercia) lo controla `assets/js/carrusel.js` escribiendo `transform` inline en este elemento en cada frame — por eso no hay `animation`/`@keyframes` aquí. */ .bloque-carrusel__pista { display: flex; width: max-content; gap: 1.5rem; list-style: none; margin: 0; padding: 0; touch-action: pan-y; cursor: grab; will-change: transform; /* le avisa al navegador que este transform cambia cada frame — evita repintados de más mientras carrusel.js anima */ user-select: none; /* sin esto, arrastrar con el mouse selecciona el texto de las etiquetas en vez de mover la pista */ -webkit-user-select: none; } .bloque-carrusel__pista:active { cursor: grabbing; } /* `.bloque-carrusel__item` carga una real (ver renderBloqueCarrusel()) cuyo tamaño de caja cambia en 3 cortes — 220px en mobile (por default, sin media query), 350px desde tablet y 500px desde escritorio grande. Los mismos tres cortes (700px / 1200px) los usa el `sizes` del `` en renderBloqueCarrusel() — si estos valores cambian, actualizar también ahí para que la imagen que el navegador DESCARGA siga coincidiendo con el tamaño de caja que en verdad se muestra. */ .bloque-carrusel__item { flex: 0 0 auto; width: 220px; } @media (min-width: 700px) { .bloque-carrusel__item { width: 350px; } } @media (min-width: 1200px) { .bloque-carrusel__item { width: 500px; } } /* `position: relative` ancla la etiqueta superpuesta (ver `.bloque-carrusel__etiqueta` abajo) contra la propia foto — la etiqueta va pegada al borde inferior de cada foto. `overflow: hidden` recorta la foto y el degradado de la etiqueta a las esquinas redondeadas del recuadro. */ .bloque-carrusel__imagen { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; } /* La llena por completo el recuadro cuadrado — `object-fit: cover` recorta en vez de deformar si la proporción de alguna foto no fuera exactamente 1:1 (las 7 reales sí lo son, pero esto defiende contra una foto futura que no lo sea). `pointer-events: none` deja que los eventos de arrastre (mousedown/touchstart) le lleguen siempre a `.bloque-carrusel__pista`/`carrusel.js`, nunca a la suelta — sin esto, el navegador podría interpretar un arrastre sobre la imagen como "arrastrar la imagen" (aunque ya viene con `draggable="false"` en el HTML, esta es la defensa a nivel CSS). */ .bloque-carrusel__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* Texto blanco en mayúsculas sobre un degradado oscuro, pegado abajo de la foto. El degradado (en vez de un fondo sólido) dobla como contraste de lectura y como pista visual de que hay una foto detrás. */ .bloque-carrusel__etiqueta { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.5rem 0.6rem 0.6rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0)); color: #fff; font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; text-align: center; } /* Tamaño de fuente escalado a la misma proporción que el ancho de la foto (220/350/500px, ver .bloque-carrusel__item arriba): 24px en el tamaño grande, y 350px/220px escalan esos 24px en esa misma proporción (16.8px→17px, 10.5px→11px, este último ya es el valor base de arriba). */ @media (min-width: 700px) { .bloque-carrusel__etiqueta { font-size: 17px; } } @media (min-width: 1200px) { .bloque-carrusel__etiqueta { font-size: 24px; } } .grid-productos-destacados, .grid-catalogos, .grid-noticias { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; list-style: none; margin: 1.5rem 0 0; padding: 0; } /* Separación horizontal entre tarjetas propia de esta sección: en el mockup (mupa2.com.mx) el espacio real entre columnas es ~29px contra columnas de ~223px de ancho — más aire que el 1.25rem/20px genérico que comparten Catálogos/Noticias arriba. Solo se escala aquí (no en la regla compartida) para no mover esas otras dos secciones, fuera de lo pedido. `grid-template-columns` con `auto-fit` (no `auto-fill`, que es lo que trae la regla compartida de arriba): con exactamente 4 tarjetas y `auto-fill`, en pantallas anchas el grid calcula cuántas columnas de 200px caben en el contenedor (verificado en vivo: 5 a 1466px de viewport) y crea esa 5ª columna VACÍA en vez de repartir su espacio — resultado, las 4 tarjetas reales quedan apretadas a la izquierda con un hueco muerto a la derecha (reportado por José con captura). `auto-fit` colapsa las columnas vacías a 0 y redistribuye ese espacio entre las columnas con contenido (mismo mecanismo 1fr), así que las 4 tarjetas se estiran para llenar el ancho disponible de forma simétrica — sin volver a fijar el número de columnas a mano, que se rompería en cuanto cambie el ancho de sidebar o el contenido pase a tener más/menos de 4 items. */ .bloque-home--productos-destacados .grid-productos-destacados { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.875rem; } /* Mismo mecanismo que la regla de arriba: `auto-fit` en vez del `auto-fill` compartido, para que las 3 tarjetas de Catálogos se estiren a todo el ancho disponible en vez de dejar una columna vacía. `gap: 4.625rem` (74px, medido en vivo contra mupa2.com.mx con getBoundingClientRect entre tarjetas — mucho más aire que el 1.25rem genérico, propio de esta sección). `margin-top: 4.4375rem` (71px, medido igual: separación real entre el h2 "Catálogos" y la primera fila de tarjetas) reemplaza el 1.5rem de la regla compartida — scoped aquí para no mover Productos Destacados/Noticias, mismo criterio que la regla de arriba. */ .bloque-home--catalogos .grid-catalogos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4.625rem; margin-top: 4.4375rem; } /* Foto real de la tarjeta (antes un

placeholder, ver bitácora) para el rediseño "como el mockup" pedido por José. Antes compartía esta regla de placeholder con `.tarjeta-noticia` (ver esa clase justo abajo, que hoy no se usa en ningún template PHP — se conserva tal cual por si Noticias reutiliza el mismo placeholder más adelante); se separan porque ya no es el mismo tratamiento visual. Mismo aspect-ratio 4/3 que el placeholder que reemplaza, pero SIN radio de esquina: medido con getComputedStyle contra mupa2.com.mx, la foto de Catálogos ahí no lleva border-radius (0px), a diferencia de `.tarjeta-producto-destacado__imagen` (6px) — secciones distintas, tratamiento distinto, confirmado con el mockup. `object-fit: cover` por el mismo motivo que esa regla: las fotos que llegan (800x600, jaladas de mupa2.com.mx) ya son 4:3 pero no conviene depender de que todas las futuras lo sean. `margin-bottom: 2.3125rem` (37px): mismo aire uniforme medido entre imagen/título/párrafo/botón en las 3 tarjetas del mockup (ver `.tarjeta-catalogo h3`/`p` más abajo). */ .tarjeta-catalogo__imagen { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 2.3125rem; } .tarjeta-noticia { aspect-ratio: 4 / 3; background: #f2f2f2; /* placeholder visual mientras no hay imagen real, ver .tarjeta-producto img en categoria.php */ border-radius: 6px; } /* Flex column para que el botón "descargar" quede siempre alineado abajo, mismo mecanismo (y mismo motivo: título con word-wrap distinto entre tarjetas) que `.tarjeta-producto-destacado` arriba — ver el comentario de esa regla para el detalle completo. */ .tarjeta-catalogo { display: flex; flex-direction: column; height: 100%; } /* Flex column para que el botón "más" quede siempre alineado abajo: reportado por José con captura — con las 4 tarjetas en el mismo renglón de grid (que ya las estira a igual altura por el `align-items: stretch` por defecto de `display: grid`), el título a veces hace word-wrap a una línea más que en otra tarjeta y eso empuja el párrafo y el botón hacia abajo un poco distinto en cada una. `.tarjeta-producto-destacado__boton` de abajo cambia su `margin-top` fijo por `auto`: en un contenedor flex column con `height: 100%` eso hace que el botón absorba TODO el espacio sobrante debajo del párrafo y quede pegado al mismo renglón inferior en las 4 tarjetas, sin importar cuántas líneas ocupen el título o el párrafo arriba — mismo mecanismo que ya usa `.categoria-inicio-card` para empujar contenido al fondo de una tarjeta de altura variable. */ .tarjeta-producto-destacado { display: flex; flex-direction: column; height: 100%; } /* Foto real de la tarjeta (antes un

placeholder, ver bitácora): mismo aspect-ratio 4/3 y radio que el placeholder que reemplaza, más `object-fit: cover` porque la foto que llega (600x450, jalada de mupa2.com.mx) ya es justo 4:3 pero no conviene depender de que TODAS las fotos futuras lo sean. */ .tarjeta-producto-destacado__imagen { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; object-fit: cover; } /* El

base (regla `h2, h3, h5` más arriba, más --fs-h3/--fw-h3/ --color-heading-accent de tokens.css) YA da exactamente el tratamiento del título de tarjeta del mockup — Oswald 300, 17px, #3f6964, letter-spacing 1px — verificado con getComputedStyle contra mupa2.com.mx (sección Catálogos, valores idénticos letra por letra). El `font-size: var(--fs-body)` que traía esta regla era un bug: dejaba el título al mismo tamaño que el párrafo (15px). Solo hace falta centrar y poner mayúsculas, que la regla base no trae. `margin` ajustado al aire uniforme medido en el mockup (~37px = 2.3125rem, igual entre imagen→título, título→párrafo y párrafo→botón). / .tarjeta-catalogo h3 { margin: 0 0 2.3125rem; text-align: center; text-transform: uppercase; } / Párrafo de descripción (Lorem ipsum, ver contenido.php): mismo color cálido #665f52 y tamaño 15px que `.bloque-informativatarjeta p` (verificado con getComputedStyle, valores idénticos), `line-height: 1.3` medido igual (19.5px en el mockup). `margin-bottom: 2.3125rem` es el mínimo garantizado (mismo valor que arriba); el `margin-top: auto` del botón de abajo absorbe el espacio extra cuando el título hace word-wrap distinto entre las 3 tarjetas — mismo mecanismo que `.tarjeta-producto-destacado p`/`boton`. / .tarjeta-catalogo p { margin: 0 0 2.3125rem; color: #665f52; font-size: 15px; line-height: 1.3; } / Botón "descargar": mismos valores exactos que `.tarjeta-producto-destacadoboton`/`.bloque-informativaboton` (padding, radio 35px/7px, fondo #607a24, sombra, Poppins 600 13px con letter-spacing 3px) — verificado con getComputedStyle contra mupa2.com.mx, es el mismo botón reutilizado en las 3 secciones del mockup. Se duplica la regla en vez de compartir una clase, mismo criterio conservador que el resto de este archivo. A diferencia de esos otros dos botones, este SÍ es un real (no `enlace-pendiente`): el destino (catalogos.php#formulario-catalogos) ya existe, ver contenido.php. `margin: auto auto 0` alinea el botón al fondo de la tarjeta (`.tarjeta-catalogo` es flex column arriba). / .tarjeta-catalogoboton { display: block; width: fit-content; margin: auto auto 0; padding: 15px 26px; border-bottom: 0; border-radius: 35px 7px; background: #607a24; box-shadow: 0 2px 18px rgba(0, 0, 0, 0.1); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 3px; opacity: 1; } / Título de tarjeta en
(no
): mismo tag y tratamiento tipográfico que usa mupa2.com.mx para este mismo texto — Oswald 24px/600, ya cubierto por el token --fs-h4/--fw-h4 (regla base `h4` más arriba); aquí solo se agrega lo que esa regla base no trae (color, mayúsculas, centrado), porque hoy es el único lugar del sitio que usa
. `line-height: 1.2` (28.8px en el mockup, verificado con getComputedStyle contra mupa2.com.mx): SIN esto se hereda `--lh-body` (24px fijo, pensado para el párrafo de 15px del sitio), que con esta letra de 24px queda apenas 1:1 y se ve encimada en cuanto el título hace word-wrap a 2 líneas en pantallas angostas — mismo bug reportado en el h2 de abajo. `margin-bottom: 1.25rem` (antes 0.25rem): José reportó que el título quedaba muy pegado al párrafo de abajo en las 4 tarjetas. Medido en vivo contra mupa2.com.mx (getBoundingClientRect del módulo de título vs. el del párrafo, sección "Productos Destacados"): 20px de separación real = 1.25rem a 16px base. / .tarjeta-producto-destacado h4 { margin: 0.75rem 0 1.25rem; color: var(--color-heading-accent); text-transform: uppercase; text-align: center; line-height: 1.2; } / `margin-bottom: 1.5rem` (no `margin: 0` como antes): José reportó que el botón "más" quedaba muy pegado al párrafo — "como si agregáramos un
al final de cada texto" — sobre todo en la tarjeta más alta del renglón, donde el `margin-top: auto` del botón (ver esa regla más abajo) casi no tiene espacio libre que absorber. 1.5rem ≈ un renglón de `--lh-body` (24px, la altura de línea fija de este párrafo), o sea el mismo aire visual que dejaría esa línea en blanco extra que describió, como mínimo garantizado en las 4 tarjetas sin importar cuánto espacio sobrante haya. / .tarjeta-producto-destacado p { margin: 0 0 1.5rem; } / Botón "más" de cada tarjeta: en el mockup es un botón real de Divi (fondo #607A24, radio asimétrico 35px/7px, sombra suave, Poppins 600 13px con letter-spacing 3px) pero SIN destino (href="" también ahí) — por eso el marcado es un (ver esa clase más abajo, mismo criterio del resto del repo: "un link que no lleva a ningún lado es peor que una etiqueta que se ve pero no promete nada") en vez de un . Esta regla solo REEMPLAZA lo que `.enlace-pendiente` trae por defecto para texto suelto (subrayado punteado, display inline-block, opacidad) por el tratamiento de botón/píldora del mockup; el cursor "help" de `.enlace-pendiente` se conserva a propósito, es la señal correcta incluso disfrazado de botón. / .tarjeta-producto-destacadoboton { display: block; width: fit-content; margin: auto auto 0; padding: 15px 26px; border-bottom: 0; border-radius: 35px 7px; background: #607a24; box-shadow: 0 2px 18px rgba(0, 0, 0, 0.1); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 3px; opacity: 1; } / Título de la sección (h2 "Productos Destacados"): tratamiento propio de mupa2.com.mx para esta sección, más grande y más ligero que el h2 estándar del resto del sitio (18px/600, ver regla base `h2` arriba) — 30px/300, mayúsculas, centrado. Color y tipografía (Oswald, teal) ya los trae la regla base, sin necesidad de repetirlos aquí. `line-height: 1.2` (36px en el mockup, verificado con getComputedStyle): José reportó el título encimado en celular al hacer word-wrap a 2 líneas ("PRODUCTOS" / "DESTACADOS") — la causa es que sin esta regla se hereda `--lh-body` (24px fijo, pensado para el párrafo de 15px del sitio), MENOR que este tamaño de letra de 30px, así que cada línea queda más baja que sus propios glifos y la segunda línea se monta sobre la primera. / .bloque-home--productos-destacados h2 { font-size: 30px; font-weight: 300; text-transform: uppercase; text-align: center; line-height: 1.2; } / ─── Informativa: "¿Qué es el mobiliario urbano?" (includes/home/ bloques.php, renderBloqueInformativa()). En el mockup (Divi, et_pb_section_5) es una foto de fondo a sangre completa (fondo-2026.jpg) con una tarjeta clara centrada encima y una foto de planta decorativa que sobresale de la esquina inferior derecha de la tarjeta — verificado con getComputedStyle en vivo contra mupa2.com.mx, no a ojo. Fondo a sangre completa: mismo mecanismo de `margin: 0 -2rem` (y su contraparte en `@media (max-width: 700px)`, ver bloque de abajo) que ya usa `.bloque-home--hero` para cancelar el padding horizontal de `.sitio-layout`. `background-position: center` en vez del `50% 100%` del mockup: esa foto (bokeh verde difuminado) no tiene un punto focal marcado, así que centrarla es equivalente visualmente y más simple de mantener. / .bloque-home--informativa { position: relative; margin: 0 -2rem; padding: 3rem 2rem 5rem; background-image: url(/assets/img/informativa/fondo.avif); background-size: cover; background-position: center; } @media (max-width: 700px) { .bloque-home--informativa { margin-left: -1.25rem; margin-right: -1.25rem; } } / Tarjeta clara centrada: en el mockup ocupa ~70% del ancho de su contenedor, medido con getBoundingClientRect en vivo (1176px de 1680px). `max-width: 860px` FIJO (versión anterior) no reproducía eso: a un viewport ancho (1920px) el contenedor real de este sitio mide ~1730px, así que un valor fijo de 860px cae a ~50% en vez de 70% — la tarjeta se veía más angosta que el mockup en pantallas grandes, justo lo que José reportó. `width: 70%` (con `max-width` como tope, no como valor fijo) reproduce el mismo comportamiento fluido en vez de solo acertar a un viewport de referencia. Padding interno también aumentado (antes 2.5rem 3rem): José reportó "márgenes internos más amplios" — 3.5rem arriba/4.5rem a los lados/4rem abajo se acerca a los insets medidos en vivo contra mupa2.com.mx (~55px arriba, ~66px abajo del botón, proporcional a los lados). Mismo fondo que `.bloque-home--hero` (`#f8faf5`) — incluso con el nombre de bloque distinto, es el mismo "panel claro sobre fondo", confirmado igual en el mockup (rgb(248,250,245) en ambos). / .bloque-informativatarjeta { position: relative; z-index: 1; width: 70%; max-width: 1176px; margin: 0 auto; padding: 3.5rem 4.5rem 4rem; background: #f8faf5; border-radius: 5px; } @media (max-width: 700px) { .bloque-informativatarjeta { / `width: auto` deshace el `width: 70%` de la regla base: en mobile la tarjeta debe volver a ocupar el ancho disponible completo (igual que antes, cuando `max-width: 860px` nunca se alcanzaba a este viewport) — José pidió expresamente no tocar la versión móvil. / width: auto; padding: 2rem 1.5rem; } } / 30px/300 Oswald centrado y en mayúsculas — mismo patrón que el h2 de Productos Destacados de arriba (con su mismo bug de interlineado si se omite `line-height`, ver el comentario extenso de esa regla: aquí se agrega `line-height: 1.2` desde el principio en vez de esperar a que alguien lo reporte otra vez). `margin-bottom: 2.5rem` (antes 1.25rem): mismo reporte de José sobre aire interno — medido en vivo contra mupa2.com.mx, el espacio real entre el título y el primer párrafo es ~40px = 2.5rem. / .bloque-informativatarjeta h5 { margin: 0 0 2.5rem; font-size: 30px; font-weight: 300; text-align: center; text-transform: uppercase; line-height: 1.2; } / Color de párrafo propio de este bloque (#665f52, verificado con getComputedStyle) — NO es `--color-body-text` (#666666): son valores distintos aunque parecidos, el mockup usa un tono más cálido/café solo aquí, no el gris neutro del resto del sitio. / .bloque-informativatarjeta p { margin: 0 0 1rem; color: #665f52; font-size: 15px; line-height: 1.3; } .bloque-informativatarjeta p:last-of-type { margin-bottom: 0; } .bloque-informativatarjeta .bloque-homeaviso-pendiente { margin-top: 1.25rem; } / Botón "conoce más de mupa®": mismos valores exactos que `.tarjeta-producto-destacadoboton` (padding, radio 35px/7px, fondo #607a24, sombra, Poppins 600 13px con letter-spacing 3px) — verificado con getComputedStyle contra mupa2.com.mx, es literalmente el mismo botón reutilizado en dos secciones distintas del mockup. Se duplica la regla en vez de compartir una clase para no tocar `.tarjeta-producto-destacadoboton` (ya verificado y en producción) — mismo criterio conservador que el resto de este archivo: no mover código que funciona sin que se haya pedido. También un `` (no ``), mismo motivo: href="" en el mockup también aquí. `margin-top: 2.75rem` (antes 1.75rem): mismo reporte de José sobre aire interno — medido en vivo contra mupa2.com.mx, el espacio real entre el último párrafo y el botón es ~45px = 2.75rem. / .bloque-informativaboton { display: block; width: fit-content; margin: 2.75rem auto 0; padding: 15px 26px; border-bottom: 0; border-radius: 35px 7px; background: #607a24; box-shadow: 0 2px 18px rgba(0, 0, 0, 0.1); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 3px; opacity: 1; } / Planta decorativa (`alt=""` a propósito, ver bloques.php — es puramente decorativa, igual que en el mockup): sobresale de la esquina inferior derecha de la tarjeta, mitad encima/mitad afuera del borde derecho, y debe quedar al ras del borde inferior de la SECCIÓN completa (`.bloque-home--informativa`), no de la tarjeta — corregido 2026-08-08 (José: "no debe haber separación", ver captura). `bottom: -40px` dejaba un hueco de 40px porque solo cubría la mitad del `padding-bottom: 5rem` (80px) de la sección; `position: absolute` es contra `.bloque-informativatarjeta` (`position: relative` arriba), así que -80px equivale exactamente a ese padding-bottom y deja la planta al ras del borde inferior real de la sección. Se mantiene posicionada contra la tarjeta (no contra la sección completa) para que se mueva junto con ella sin importar el ancho real del contenedor en cada viewport, que es distinto al del mockup (sin sidebar). Oculta en mobile (ver media query de abajo): a ese ancho la tarjeta ocupa casi todo el viewport y ya no sobra espacio a los lados para que la planta sobresalga sin recortarse o encimarse con el texto. `width: 278px`: José reportó que el +10% (220px→242px) seguía viéndose notablemente más chica que el original. Medido con getComputedStyle/naturalWidth contra mupa2.com.mx: la imagen del mockup tiene `width="278" height="342"` como atributos HTML fijos — NO escala con el contenedor, es tamaño fijo en cualquier viewport (verificado en 1703px y 1839px, mismo resultado: 278px). El +10% inicial partía de una relación proporcional (ancho de la planta vs. ancho de la tarjeta) que resultó ser una coincidencia de un solo viewport, no el comportamiento real — por eso quedaba corto. 278px es el tamaño natural exacto del archivo `planta.avif` (278×342), mismo que usa el mockup, así que aquí también se usa sin escalar. `right: -206px` (antes -170px): misma fórmula que antes, recalculada para el nuevo ancho — `right' = padding-derecho - ancho-nuevo = 72 - 278 = -206px` — deja la planta al ras del borde del texto (~0px de invasión) en cualquier ancho de pantalla. / .bloque-informativaplanta { position: absolute; right: -206px; bottom: -80px; z-index: 2; width: 278px; height: auto; } @media (max-width: 700px) { .bloque-informativa__planta { display: none; } } / ─── Categorías: mosaico de 8 tarjetas (includes/home/bloques.php, renderBloqueCategorias()). Fondo verde claro a sangre completa, mismo mecanismo que `.bloque-home--hero` (margin negativo cancela el padding horizontal de `.sitio-layout`, ver esa regla para el detalle completo) — incluso el mismo color exacto (#f8faf5, verificado igual en el mockup para esta sección). Sin título de sección: verificado contra mupa2.com.mx que el mockup real no imprime ningún h1/h2/h3 fuera de las 8 tarjetas en este bloque (por eso renderBloqueCategorias() ya no imprime un
— ver el docblock de esa función). El grid en sí (`.grid-categorias-inicio`, íconos, insignia) vive más arriba, junto a `.categoria-inicio-card`. / .bloque-home--categorias { background-color: #f8faf5; margin: 0 -2rem; padding: 2.5rem 2rem; } @media (max-width: 700px) { .bloque-home--categorias { margin-left: -1.25rem; margin-right: -1.25rem; } } / ─── Catálogos (bloque de home, includes/home/bloques.php, renderBloqueCatalogos()) — rediseño completo pedido por José para igualar el mockup ("Rediseño completo como el mockup", no solo las 3 fotos). Fondo verde claro a sangre completa, mismo mecanismo y mismo color exacto que `.bloque-home--categorias` arriba (#f8faf5, verificado igual en el mockup para esta sección también). `padding: 3.4375rem 2rem` (55px verticales): medido en vivo contra mupa2.com.mx — la franja verde mide lo mismo arriba del título y abajo de las tarjetas (55px en ambos lados, simétrico). / .bloque-home--catalogos { background-color: #f8faf5; margin: 0 -2rem; padding: 3.4375rem 2rem; } @media (max-width: 700px) { .bloque-home--catalogos { margin-left: -1.25rem; margin-right: -1.25rem; } } / Título de la sección (h2 "Catálogos"): mismo tratamiento que el h2 de Productos Destacados (`.bloque-home--productos-destacados h2` arriba) — 30px/300, mayúsculas, centrado, `line-height: 1.2` — verificado con getComputedStyle contra mupa2.com.mx, valores idénticos (30px/300, uppercase, center, line-height 36px/1.2). Color y tipografía (Oswald, teal) ya los trae la regla base. / .bloque-home--catalogos h2 { font-size: 30px; font-weight: 300; text-transform: uppercase; text-align: center; line-height: 1.2; } / ─── Proyectos (bloque de home, includes/home/bloques.php, renderBloqueProyectos() — NO confundir con proyectos.php, la página de destino completa del menú superior, que usa `.grid-proyectos` / `.tarjeta-proyecto` más abajo). Dos columnas fiel al mockup, verificado en vivo con Chrome contra mupa2.com.mx (getComputedStyle + DOM real) el 2026-08-08 — reemplaza el placeholder anterior (lista de texto plano sin fotos). Columnas ~47%/47% con separación en el mockup (medido en vivo, fila de 1344px con dos `.et_pb_column_1_2` de 635px cada una) — `1fr 1fr` con gap es la forma simple de lograr la misma proporción sin fijar anchos en px que no sobreviven a un contenedor de ancho distinto (este sitio trae sidebar, el mockup no). / .bloque-proyectoscolumnas { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; margin-top: 1.5rem; } @media (max-width: 700px) { .bloque-proyectoscolumnas { grid-template-columns: 1fr; } } /* Título 30px/300 mayúsculas (mismo tratamiento que `.bloque-home--productos-destacados h2`, el mockup también lo trae así aquí — verificado en vivo: 30px/300, color `--color-heading-accent`, ya heredado de la regla base `h2`) pero SIN centrar: a diferencia de Productos Destacados/Informativa, en este bloque el título queda alineado a la izquierda de su columna (confirmado contra el mockup, no es un descuido). `line-height: 1.2` por el mismo bug de interlineado ya documentado arriba en Productos Destacados/Informativa (se agrega desde el principio en vez de esperar a que alguien lo reporte). / .bloque-proyectosintro h2 { margin: 0 0 1.25rem; font-size: 30px; font-weight: 300; text-transform: uppercase; line-height: 1.2; } .bloque-proyectosintro p { margin: 0 0 1rem; } .bloque-proyectosintro p:last-of-type { margin-bottom: 0; } / Botón "conoce más proyectos": MISMOS valores exactos que `.bloque-informativaboton`/`.tarjeta-producto-destacadoboton` (fondo #607A24, radio 35px/7px, sombra, Poppins 600 13px con letter-spacing 3px) — se duplica la regla en vez de compartir una clase, mismo criterio conservador ya documentado en esas dos reglas. Única diferencia real: acá SÍ es un `` real (el mockup le da href real a este botón, a diferencia de los otros dos) y queda alineado a la izquierda (`margin` sin `auto`, no centrado) en vez de centrado bajo una tarjeta. / .bloque-proyectosboton { display: block; width: fit-content; margin: 1.5rem 0 0; padding: 15px 26px; border-bottom: 0; border-radius: 35px 7px; background: #607a24; box-shadow: 0 2px 18px rgba(0, 0, 0, 0.1); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 3px; text-decoration: none; } / Mosaico 2×2 de fotos con leyenda: sin link (ni siquiera roto) porque el mockup tampoco envuelve estas 4 fotos en un `` — son puramente decorativas, ver docblock de renderBloqueProyectos() en bloques.php. `gap` reutiliza el mismo valor ya establecido en Productos Destacados (1.875rem) en vez del ~39px medido en vivo: suficientemente cerca, y consistente con el resto del sitio en vez de un valor de un solo uso. / .bloque-proyectoscategorias { display: grid; grid-template-columns: 1fr 1fr; gap: 1.875rem; list-style: none; margin: 0; padding: 0; } / José reportó que en mobile las fotos se ven de tamaños dispares — el grid 2×2 sigue siendo `1fr 1fr` (columnas parejas), pero cada celda cambia de alto según cuánto ocupe su leyenda al hacer wrap ("CONSTRUCTORAS Y DESARROLLADORES" ocupa 2 líneas, "GOBIERNO" una sola), y eso se percibe como fotos de tamaño distinto. Una sola columna evita el problema: las 4 fotos quedan del mismo ancho y la leyenda ya no compite por espacio con la celda vecina. / @media (max-width: 700px) { .bloque-proyectoscategorias { grid-template-columns: 1fr; } } / Sin `border-radius` ni `object-fit: cover` (a diferencia del resto de fotos del sitio, que sí llevan ambos): verificado con getComputedStyle en vivo que el mockup usa esquinas cuadradas (`border-radius: 0px`) para estas 4 fotos específicas — se respeta la medición en vez del radio 6px que comparten Productos Destacados/Catálogos/Noticias. `aspect-ratio: 560/450` es la proporción nativa real de los 4 archivos (`assets/img/proyectos/`, confirmada con `identify`), no un valor genérico 4/3. / .bloque-proyectoscategoria-imagen { display: block; width: 100%; aspect-ratio: 560 / 450; object-fit: cover; } / Leyenda bajo cada foto: 18px/600 mayúsculas centrado, mismo tratamiento que ya trae la regla base `h2` de este sitio (color `--color-heading-accent` incluido) — verificado en vivo que en el mockup esta leyenda es, de hecho, un `
` con exactamente estos valores computados. Aquí es un `` en vez de un heading real (mismo criterio que `.categoria-inicio-cardnombre`): 4 leyendas como "h2" repetidos en una sola página inflarían el esquema de encabezados sin necesidad, el título real de la sección ("Nuestros Proyectos") ya es el único
que hace falta aquí. / .bloque-proyectoscategoria-nombre { display: block; margin-top: 1rem; font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-h2); letter-spacing: var(--ls-heading); color: var(--color-heading-accent); text-transform: uppercase; text-align: center; line-height: 1.3; } / José reportó que en escritorio los 5 logos deberían escalar de forma proporcional para quedar siempre en una sola línea, y no lo hacían: el slot tenía ancho fijo (120px), así que en una ventana angosta pero todavía de escritorio (justo arriba del breakpoint mobile de 700px) el renglón de 5×120px + 4 gaps (~696px) ya no cabía dentro del área de contenido (que descuenta el sidebar) y se rompía. Grid de 5 columnas iguales reparte el ancho disponible entre los 5 logos sin depender de un ancho fijo — cada slot ocupa exactamente 1/5 del renglón sin importar cuánto mida. `aspect-ratio: 3/2` conserva la misma proporción que tenía el slot fijo (120/80), así los 5 logos se ven del mismo alto entre sí a cualquier ancho. Mobile (`@media max-width:700px` abajo) se queda exactamente igual que antes (flex-wrap + slot fijo 120×80px) — José pidió explícitamente no tocar esa versión. `margin: 0` (antes 1.5rem arriba): ese margen separaba los logos del
Certificaciones
que imprimía renderBloqueCertificaciones() — José pidió quitar el título para dejar solo los logos. Sin título que separar, el espacio superior del bloque lo aporta `.bloque-home` (padding: 2.5rem 0, ver esa regla), mismo criterio que `.bloque-home--categorias`, que tampoco imprime h2. / .bloque-certificacioneslogos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .bloque-certificacionesslot { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 2; } .bloque-certificacionesslot img { max-width: 100%; max-height: 100%; object-fit: contain; } @media (max-width: 700px) { .bloque-certificacioneslogos { display: flex; flex-wrap: wrap; } .bloque-certificacionesslot { width: 120px; height: 80px; aspect-ratio: auto; } } / ─── Boletín: "Suscríbete a nuestro boletín de noticias" (includes/home/ bloques.php, renderBloqueBoletin()). En el mockup es una franja angosta a sangre completa con la MISMA foto de fondo que Informativa (fondo-2026.jpg, ver `.bloque-home--informativa` arriba) — verificado con getComputedStyle en vivo contra mupa2.com.mx (misma URL de imagen, mismo mecanismo `background-size: cover`). Se copia el archivo a `assets/img/boletin/fondo.avif` en vez de apuntar a la ruta de Informativa: son bloques independientes y no debe haber acoplamiento entre sus assets aunque hoy compartan la foto — si alguno cambia de fondo más adelante, no debe arrastrar al otro. Encabezado, campo y botón: mismo full-bleed que Informativa/Hero (margin: 0 -2rem cancela el padding de `.sitio-layout`). Layout de fila (título a la izquierda, formulario a la derecha) con flexbox — el mockup lo arma con columnas de Divi (dos `et_pb_column` de ancho fijo), pero flex con wrap reproduce el mismo resultado visual y además resuelve solo el colapso a una columna en móvil, sin breakpoint aparte. / .bloque-home--boletin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin: 0 -2rem; padding: 2.25rem 2rem; background-image: url(/assets/img/boletin/fondo.avif); background-size: cover; background-position: center bottom; / 50% 100% medido en vivo / } / José reportó una franja blanca entre esta franja verde y el footer (también verde) — el `margin: 0 -2rem` de arriba solo cancela el padding LATERAL de `.sitio-layout` (1.5rem 2rem), no el vertical: al ser hoy el ÚLTIMO bloque de la home, el `padding-bottom: 1.5rem` de `.sitio-layout` (o, en móvil, el `padding-bottom: 1.5rem` propio de `.sitio-main`, ver el `@media` de esa regla — mismo valor en los dos casos) se quedaba como espacio blanco antes de que el footer empezara. `:last-child` en vez de aplicarlo siempre: si algún día se agrega un bloque después de Boletín, este margen negativo no debe arrastrarlo/encimarlo — solo tiene sentido cuando de verdad es lo último antes del footer. / .bloque-home--boletin:last-child { margin-bottom: -1.5rem; } @media (max-width: 700px) { .bloque-home--boletin { margin-left: -1.25rem; margin-right: -1.25rem; justify-content: center; text-align: center; } } / Título: Oswald 600/1px de letter-spacing ya los cubre la regla compartida `h2, h3, h5` — aquí solo lo que es propio de este bloque: 21px (no el --fs-h2 de 18px de la regla base), cursiva, mayúsculas, y un color navy (#23383f) distinto del teal compartido (--color-heading-accent) — coincide en valor con --cat-movilidad- urbana, pero es una coincidencia del propio mockup, no una reutilización deliberada de esa categoría: se deja como valor fijo con esta nota en vez de tomar prestado un token semánticamente ajeno. / .bloque-home--boletin h2 { flex: 1 1 280px; margin: 0; font-size: 21px; font-style: italic; text-transform: uppercase; color: #23383f; } .bloque-boletinform { display: flex; flex-wrap: wrap; gap: 0.75rem; flex: 0 1 auto; } .bloque-boletinform input { flex: 1 1 200px; padding: 16px; border: none; border-radius: 5px; font-family: var(--font-body); font-size: 14px; color: var(--color-h1); / #526723 medido en vivo, coincide exacto con el token / } / Botón "enviar": relleno navy (mismo #23383f del título), radio asimétrico 35px/7px — mismo valor que `--btn-outline-radius`, aquí fijo porque el resto del botón (relleno sólido, no outline) no corresponde a ese token. Deshabilitado (sin backend de suscripción, ver docblock de `obtenerBloqueBoletin()`): mismo criterio visual que `.btn-outline` para CTAs pendientes — cursor "not-allowed" + opacidad reducida, sin bloquear la lectura del texto. / .bloque-boletinboton { flex-shrink: 0; border: none; border-radius: 35px 7px; background: #23383f; color: #ffffff; font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 3px; padding: 15px 26px; cursor: not-allowed; opacity: 0.9; } .bloque-home--boletin .bloque-homeaviso-pendiente { flex-basis: 100%; margin-top: 0; } / .bloque-redes-sociales se retiró 2026-08-09 junto con el bloque de home del mismo nombre — ver el comentario en bloques.php. Los estilos reales de los íconos ahora viven en `.sitio-footerredes` más abajo. / / ─── Páginas de destino del menú superior (proyectos.php, catalogos.php, noticias.php, contacto.php). Reutilizan al máximo los patrones ya establecidos arriba (grid de tarjetas con placeholder #f2f2f2, .btn-outline, .bloque-homeaviso-pendiente, tokens de tipografía) en vez de inventar un lenguaje visual nuevo, anclándose a los tokens globales ya verificados contra el mockup (assets/css/tokens.css) sin necesidad de extraer CSS en vivo del mockup en cada página nueva. / .pagina-intro { max-width: 720px; margin: 0.75rem 0 2rem; font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-body-text); } / ── Proyectos ── / .seccion-proyectos-categoria { margin-top: 2.5rem; } .seccion-proyectos-categoria:first-of-type { margin-top: 1.5rem; } .grid-proyectos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; list-style: none; margin: 1rem 0 0; padding: 0; } .tarjeta-proyectoimagen { aspect-ratio: 4 / 3; background: #f2f2f2; / mismo placeholder que .tarjeta-catalogoimagen / border-radius: 6px; } .tarjeta-proyecto h3 { margin: 0.75rem 0 0.15rem; font-size: var(--fs-body); } .tarjeta-proyectoubicacion { margin: 0; font-size: 12px; color: #999; } .cta-cotizacion { margin-top: 2.5rem; padding: 2rem; border-top: 1px solid #f0f0f0; text-align: center; } .cta-cotizacion h2 { margin-bottom: 0.75rem; } / ── Noticias (grid-posts) — mismo patrón de .grid-catalogos; --compacto es la variante usada en el bloque de home (3 columnas más apretadas, sin fecha/categorías visibles porque el bloque de home ya las omite en su propia función de render). ── / .grid-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; } / Título de sección ("Noticias MUPA®"): mismo tratamiento 30px/300/ mayúsculas/centrado que .bloque-home--productos-destacados h2 y .bloque-home--catalogos h2 — verificado con getComputedStyle contra mupa2.com.mx (Oswald 300, 30px, uppercase, center, color heredado de la regla base h2). Es un
en el markup real del mockup, aquí sigue como
por el mismo criterio de esquema de encabezados que ya usa el resto de la home (un solo nivel de heading por bloque). / .bloque-home--noticias h2 { font-size: 30px; font-weight: 300; text-transform: uppercase; text-align: center; line-height: 1.2; } / Gap real medido contra el mockup (Claude en Chrome, 3 columnas de ~250px con ~46px entre ellas — proporción bastante más generosa que el resto de grids compactos del sitio, que comparten 1.25rem). Se sube solo para este bloque, sin tocar `.grid-posts--compacto` base (noticias.php sigue usando el gap compartido). / / `auto-fit`, no `auto-fill`: mismo bug ya corregido antes en Productos Destacados (ver entrada 2026-08-07 de la bitácora en README.md) — `auto-fill` reserva tantas columnas como caben en el ancho disponible aunque no tengan tarjeta que mostrar, y esas columnas vacías se comen el espacio que debería repartirse entre las 3 tarjetas reales: a mayor ancho de pantalla, más columnas fantasma, y las 3 reales se ven cada vez MÁS angostas en vez de más anchas. `auto-fit` colapsa las columnas vacías a 0 y reparte su espacio entre las que sí tienen contenido. / .bloque-home--noticias .grid-posts--compacto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2.5rem; } / "ver todas las noticias": José reportó, con captura, que quedaba pegado justo debajo de la tarjeta más corta del grid (el `margin-top: auto` de "Leer más", ver esa regla más abajo, deja a esta tarjeta sin aire propio ahí). `display: block` para que el `margin-top` aplique de forma consistente sobre un `` (inline por default). / .bloque-noticiasver-todas { display: block; margin-top: 2rem; } / Flex column para que "Leer más" quede siempre alineado en el mismo renglón inferior, sin importar que el título o el extracto ocupen más o menos líneas entre una tarjeta y otra — mismo mecanismo (y mismo motivo, reportado por José con captura) que ya usa `.tarjeta-producto-destacado`/`.tarjeta-catalogo`: el grid ya estira las 3 tarjetas a igual altura (`align-items: stretch`, default de `display: grid`), así que un `margin-top: auto` en `.tarjeta-post leer-mas` (ver esa regla más abajo) absorbe el espacio sobrante y empuja el link al fondo en las 3 por igual. / .tarjeta-post { display: flex; flex-direction: column; height: 100%; } / 870/395: proporción nativa de los banners de blog del mockup (traen título superpuesto y logo horneados en la propia imagen) — un aspect-ratio distinto (p.ej. 4/3, el que usa .tarjeta-producto) recorta verticalmente y corta ese texto a la mitad. / .tarjeta-postimagen { display: block; width: 100%; aspect-ratio: 870 / 395; object-fit: cover; background: #f2f2f2; / placeholder visual mientras carga / border-radius: 6px; } .tarjeta-postfecha { margin: 0.75rem 0 0; font-size: 12px; color: #999; } .tarjeta-post h3 { margin: 0.25rem 0 0.5rem; font-size: var(--fs-body); } / El
base (h2, h3, h5 + --fs-h3/--fw-h3/--color-heading-accent) YA da el tratamiento correcto de título de tarjeta — Oswald 300, 17px, #3f6964, letter-spacing propio — mismo hallazgo que ya se documentó para .tarjeta-catalogo h3. El `font-size: var(--fs-body)` de la regla base de arriba es el mismo bug de siempre (deja el título al tamaño del párrafo, 15px); se sobreescribe aquí solo para este bloque. A diferencia de Catálogos, el mockup deja el título de post SIN centrar (alineado a la izquierda de su columna, verificado contra mupa2.com.mx) — no se agrega text-align. `line-height: 1.4` medido en vivo (23.8px/17px) — se agrega desde el inicio porque títulos largos ("CÓMO INTEGRAR JUEGOS INFANTILES...") hacen wrap a 2-3 líneas y ya sabemos por Productos Destacados/Informativa que sin esto se montan. / .bloque-home--noticias .tarjeta-post h3 { margin: 0.75rem 0 0.5rem; font-size: var(--fs-h3); text-transform: uppercase; line-height: 1.4; } / Extracto: mismo color/tamaño que .bloque-informativatarjeta p y .tarjeta-catalogo p (--color-body-text es #666666 contra el #665c52 medido en el mockup — un solo tono de gris de diferencia, mismo criterio ya usado en el resto del sitio de no crear token nuevo solo por eso). `line-height: 1.3` medido en vivo (19.5px/15px). / / `margin-bottom: 0.75rem` (antes 0): mínimo garantizado entre el extracto y "Leer más" en las 3 tarjetas — el `margin-top: auto` del link de abajo solo absorbe el espacio EXTRA cuando lo hay, mismo mecanismo de dos piezas (mínimo fijo aquí + auto en el elemento siguiente) que ya usa `.tarjeta-producto-destacado p`/`boton`. / .tarjeta-postextracto { margin: 0 0 0.75rem; color: var(--color-body-text); font-size: var(--fs-body); line-height: 1.3; } / "Leer más": extiende .enlace-pendiente (href="#" en el mockup también — no hay ficha de post propia en este repo, mismo criterio que el resto del sitio) en vez de reemplazarlo, porque el subrayado punteado + cursor "help" siguen siendo la señal correcta de "esto no lleva a ningún lado todavía". Solo se ajustan los dos valores que sí se midieron distintos contra el mockup: negritas (500, la base no trae peso propio) y letter-spacing (1px, la base no lo trae). El color YA coincide sin tocar nada — `--color-link` (#2ea3f2) es exactamente el mismo azul medido aquí; con este segundo caso real ya no es una "muestra puntual sin confirmar" (ver comentario en tokens.css, pendiente de actualizar esa nota). `margin-top: auto` (antes fijo en 0.75rem): mismo pedido de José que ya resolvimos en Productos Destacados — con las 3 tarjetas estiradas a igual altura por el grid, el título/extracto no siempre ocupan el mismo número de líneas entre una tarjeta y otra, así que un margen fijo dejaba "Leer más" en un renglón distinto en cada una. `auto` dentro de `.tarjeta-post` (flex column, ver esa regla arriba) empuja el link al mismo renglón inferior en las 3, sin importar cuánto texto haya arriba — el mínimo de aire ya lo garantiza el `margin-bottom` del extracto, no este `auto`. / .tarjeta-postleer-mas { display: block; margin-top: auto; font-weight: 500; letter-spacing: 1px; } .tarjeta-postcategorias { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0.75rem 0 0; padding: 0; font-size: 11px; } .tarjeta-postcategorias li { padding: 0.15rem 0.5rem; border: 1px solid #eee; border-radius: 999px; color: #999; } / ── Contacto ── / .tarjetas-servicios-contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; } .tarjeta-servicio-contacto { padding: 1.5rem; border: 1px solid #f0f0f0; border-radius: 6px; } .tarjeta-servicio-contactoicono { width: 48px; height: 48px; margin-bottom: 1rem; background: #f2f2f2; / mismo criterio de placeholder que el resto del sitio: sin ícono real todavía / border-radius: 50%; } .tarjeta-servicio-contacto h2 { font-size: var(--fs-body); font-family: var(--font-heading); margin-bottom: 0.5rem; } .tarjeta-servicio-contacto p { font-size: 13px; color: var(--color-body-text); margin-bottom: 1rem; } .contacto-datos { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #f0f0f0; } .contacto-datos dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 1rem 0 0; } .contacto-datos dt { font-family: var(--font-heading); color: #999; } .contacto-datos dd { margin: 0; } / ── Formulario de captura (includes/formulario_lead.php) — usado por catalogos.php y contacto.php. Grid de 2 columnas, campos "completo" (Comentarios) ocupan el ancho total, mismo criterio que .ficha-productodescripcion para separación de bloques. ── / .formulario-lead { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 1.25rem; max-width: 720px; margin-top: 1.5rem; } .formulario-leadcampo { display: flex; flex-direction: column; gap: 0.35rem; } .formulario-leadcampo--completo { grid-column: 1 / -1; } .formulario-leadcampo label { font-size: 13px; font-family: var(--font-heading); color: var(--color-body-text); } .formulario-leadcampo input, .formulario-leadcampo select, .formulario-leadcampo textarea { padding: 0.6rem 0.85rem; border: 1px solid #ddd; border-radius: 4px; font-family: var(--font-body); font-size: var(--fs-body); background: #fff; } .formulario-leadcampo textarea { resize: vertical; } .formulario-leadnota { margin: 0.15rem 0 0; font-size: 11px; color: #999; } .formulario-leadacciones { grid-column: 1 / -1; margin-top: 0.5rem; } / ─── Responsive: menú vertical con acordeón anidado en mobile ───────── El sidebar fijo de 190px en escritorio no tiene sentido en pantallas de celular: aquí se apila arriba de todo el contenido, a ancho completo (`position: static` en vez de `fixed`, ver más abajo — a pantalla completa `position: fixed` + `height: 100vh` taparía todo el contenido). El panel flotante de subcategorías (`.sidebar-subcategorias`, `position: absolute` + `left: 100%`, ver la regla base más arriba) SÍ tiene sentido en escritorio (hay espacio a la derecha), pero no en celular: en una pantalla angosta un panel "a la derecha" se sale del viewport o se encima con el resto del menú. Aquí se convierte en un bloque normal, EN EL MISMO FLUJO del documento, justo debajo de su categoría — la jerarquía se lee por INDENTACIÓN (`padding-left`, ver más abajo) en vez de por desplazamiento lateral, igual que el mockup de referencia en mobile. El mecanismo de abrir/cerrar (clase `--abierto` por tap en el chevron, o `:focus-within` por teclado — el `:hover` real ya queda descartado en touch por el propio `@media (hover: hover) and (pointer: fine)` de la regla base) es EXACTAMENTE el mismo que en escritorio. Lo único que cambia es CÓMO se anima el panel: como aquí SÍ está en el flujo normal (no `position: absolute`), animar solo `opacity`/`visibility` dejaría un hueco vacío del tamaño del panel mientras está "cerrado" — por eso se anima `max-height` en su lugar, que al colapsar a 0 también colapsa el espacio que ocupa. / @media (max-width: 700px) { / ─── Menú móvil: panel flotante tras botón hamburguesa ───────────── En mobile el menú de navegación completo (categorías + nav superior) está OCULTO por default, revelado por un botón hamburguesa, FLOTANDO sobre el contenido de la página (no empujándolo hacia abajo) y con TRANSPARENCIA — para que se alcancen a ver, detrás del panel, los botones blancos sin color asignado y el resto del contenido de fondo. Estructura (ver includes/header.php y assets/js/sidebar.js):

...