/**
* Tarjetas de familia — rejilla de fotos con el título sobre la imagen.
*
* Se usa en DOS sitios y por eso cada regla lleva doble ámbito:
*
* · `.elementor-element-famgrid1` — el bloque 03+04 de la portada (7 familias).
* · `.pt-famgrid` — la clase que ponen las landings de línea, empezando
* por /cubrimientos/pergolas/ (5 familias de pérgola).
*
* El id de la portada se conserva en vez de migrarlo a la clase para no tener que volver a
* tocar su `_elementor_data`, que ya está verificado. `:is()` no cambia la especificidad:
* toma la de su argumento más específico y los dos son una sola clase, así que la regla de
* 4 clases del `title_wrapper` (la que le gana al `display: block` del theme) sigue valiendo.
*
* Concepto (decisión de José, 2026-08-05): tarjetas verticales, 3 columnas, título en
* blanco sobre la foto con degradado para legibilidad, y la descripción al hover para no
* saturar. Sustituye a la versión de 4 columnas con foto + título + párrafo + CTA visibles
* a la vez, que se leía cargada.
*
* Lo que NO se toca, y es deliberado: el widget sigue siendo `wgl-infobox` con
* `icon_type: image`, así que la foto sigue siendo un `![]()
` con `alt`, `srcset` y `lazy`.
* Todo el rediseño es CSS sobre ese marcado; no se vuelve a `background-image` (que es lo
* que hacía el acordeón original y costaba el alt y la indexación en Google Images).
*
* Tampoco se re-recortaron las 7 fotos. El encuadre vertical se consigue con
* `aspect-ratio` + `object-fit: cover`: mismo resultado visual que recortar los archivos,
* sin una segunda compresión WebP encima y sin perder los encuadres ya curados. Y la
* proporción se puede afinar cambiando una línea, no siete archivos.
*/
/* ── Rejilla: 3 / 2 / 1 columnas ──────────────────────────────────────────────
El `calc` descuenta el hueco que reparte el contenedor flex (30 px). Sin el
descuento, 3 × 33,33 % + 2 × 30 px desborda la fila y caen a 2 columnas. */
:is(.elementor-element-famgrid1, .pt-famgrid) > .elementor-widget {
flex: 0 1 calc(33.333% - 20px);
max-width: calc(33.333% - 20px);
}
/* A 2 columnas hay que descontar la MITAD del hueco (15 px de 30), no 10: con 10 la suma
daba 2 × (50 % − 10px) + 30px = 100 % + 10px y la fila se partía, dejando una sola
tarjeta por línea a 900 px. */
@media (max-width: 1024px) {
:is(.elementor-element-famgrid1, .pt-famgrid) > .elementor-widget {
flex-basis: calc(50% - 15px);
max-width: calc(50% - 15px);
}
}
@media (max-width: 767px) {
:is(.elementor-element-famgrid1, .pt-famgrid) > .elementor-widget {
flex-basis: 100%;
max-width: 100%;
}
}
/* ── La tarjeta: la foto manda la altura, el texto se superpone ─────────────── */
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox {
position: relative;
overflow: hidden;
display: block;
background-color: #1a1a1a; /* se ve mientras la imagen carga en `lazy` */
}
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox-media_wrapper,
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox-media_wrapper .media-wrapper,
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox-media_wrapper .wgl-image-box_img,
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox-media_wrapper .wgl-image-box_img > span {
display: block;
margin: 0;
line-height: 0;
}
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox-media_wrapper img {
width: 100%;
height: auto;
/* La proporción pedida (420×580). Los archivos son 960×1100, así que `cover`
recorta ~17 % del ancho por el centro: nunca deforma. */
aspect-ratio: 420 / 580;
object-fit: cover;
object-position: center;
transition: transform 0.7s ease;
}
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox:hover img {
transform: scale(1.04);
}
/* ── Degradado de legibilidad ───────────────────────────────────────────────────
Va sobre la imagen y debajo del texto. Se refuerza en hover, cuando además
entra la descripción y hay más texto que sostener. */
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox_wrapper::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.78) 0%,
rgba(0, 0, 0, 0.45) 30%,
rgba(0, 0, 0, 0.08) 60%,
rgba(0, 0, 0, 0) 100%
);
transition: opacity 0.45s ease, background 0.45s ease;
}
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox:hover .wgl-infobox_wrapper::after {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.88) 0%,
rgba(0, 0, 0, 0.66) 45%,
rgba(0, 0, 0, 0.28) 75%,
rgba(0, 0, 0, 0.1) 100%
);
}
/* ── El texto, anclado abajo sobre la foto ─────────────────────────────────── */
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox_wrapper {
position: relative;
display: block;
}
:is(.elementor-element-famgrid1, .pt-famgrid) .content_wrapper {
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
/* El theme ya lo pone en flex; se fija la dirección y se anula su `flex-end`, que
repartía el hueco de forma distinta en cada tarjeta. */
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 26px 24px 24px;
}
/* ── Título + subtítulo: siempre visibles ──────────────────────────────────────
*
* El theme imprime `ib_subtitle` dentro de `.wgl-infobox-title_wrapper` pero **antes** del
* `` (ver templates/wgl-info-boxes.php). Se reordena con flex en vez de tocar la
* plantilla del plugin, que se sobrescribe en cada actualización.
*
* Este par es el que carga las palabras clave y **nunca se plega**: el subtítulo se lee sin
* pasar el ratón, en escritorio y en táctil. Lo único que espera al hover es la explicación
* larga y el CTA. */
/* 4 clases: el theme fija `display: block` con
`.elementor-widget-wgl-infobox .wgl-infobox .wgl-infobox-title_wrapper` (3 clases) y con
menos no se le gana. Sin flex, el `order` del subtítulo es inerte y sigue saliendo
arriba —y en `inline-block`, a veces en la misma línea que el título—. */
:is(.elementor-element-famgrid1, .pt-famgrid) .elementor-widget-wgl-infobox .wgl-infobox .wgl-infobox-title_wrapper {
margin: 0;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox_title {
order: 1;
margin: 0;
}
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox_subtitle {
order: 2;
margin: 6px 0 0;
/* La sombra sostiene la legibilidad en las fotos con zonas claras justo detrás
(la de mobiliario tiene la piscina), sin oscurecer más el degradado. */
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox_title {
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
/* ── Descripción y CTA: al hover ────────────────────────────────────────────────
*
* `@media (hover: hover)` es la pieza importante y no es decorativa:
*
* · En escritorio la descripción arranca plegada, que es lo que pedía el diseño.
* · En cualquier dispositivo táctil —donde no existe el hover— la consulta no aplica
* y el texto se ve SIEMPRE. Como Google indexa con user-agent móvil, la versión
* que rastrea es la que tiene la descripción visible.
* · Y en los dos casos el H3, el enlace con su texto («VER PÉRGOLAS») y el `alt` de la
* foto están visibles siempre. Son las señales que de verdad pesan, y es justo lo que
* el acordeón anterior escondía.
*
* Se plega con `max-height` y no con `grid-template-rows` (que sería animable sin número
* mágico) porque el theme fija su propio `display` en los dos contenedores —`grid` en la
* descripción, `flex` en el botón— y las filas del grid quedaban inertes. `max-height` con
* `overflow: hidden` funciona igual sobre flex, grid o block. Los 220 px son solo un techo
* para la transición: si el texto es más corto, deja de crecer donde acabe.
*/
@media (hover: hover) and (min-width: 768px) {
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox-content_wrapper,
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox .wgl-button-wrapper.rm_btn {
max-height: 0;
min-height: 0;
flex: 0 0 auto;
overflow: hidden;
opacity: 0;
margin-top: 0;
transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.45s ease;
}
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox:hover .wgl-infobox-content_wrapper,
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox:focus-within .wgl-infobox-content_wrapper {
max-height: 220px;
opacity: 1;
margin-top: 12px;
}
/* `:focus-within` para que la tarjeta también se abra llegando con el teclado; sin
ello el CTA sería inalcanzable sin ratón. */
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox:hover .wgl-button-wrapper.rm_btn,
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox:focus-within .wgl-button-wrapper.rm_btn {
max-height: 60px;
opacity: 1;
margin-top: 16px;
}
}
/* ── Táctil y móvil ───────────────────────────────────────────────────────────
*
* Aquí se ve todo el texto a la vez, así que el bloque ocupa ~60 % de la tarjeta y el
* título sube hasta media altura, donde el degradado de escritorio ya está casi
* transparente. Medido en la captura de 390 px: sobre la lona de Toldos y sobre la
* membrana blanca de Tensoestructuras el título se perdía. El degradado se refuerza y se
* estira hasta arriba solo en este caso. */
@media (hover: none), (max-width: 767px) {
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox_wrapper::after {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.88) 0%,
rgba(0, 0, 0, 0.76) 38%,
rgba(0, 0, 0, 0.52) 68%,
rgba(0, 0, 0, 0.18) 100%
);
}
/* Blanco puro en vez del 85 %. Medido a 390 px: sobre la membrana blanca de
Tensoestructuras el subtítulo daba 4,19:1 y sobre el cristal de Cerramientos 4,46:1,
los dos por debajo del 4,5:1 de AA para texto normal. Con opacidad plena pasan.
En escritorio no hace falta: ahí el subtítulo está más abajo, sobre el tramo opaco
del degradado, y va de 5,5 a 7,2:1. */
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox_subtitle {
color: #ffffff;
}
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox-content_wrapper {
margin-top: 10px;
}
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox .wgl-button-wrapper.rm_btn {
margin-top: 14px;
}
}
/* El párrafo del widget trae margen propio del theme. */
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox-content p {
margin: 0;
}
/* El botón no necesita su margen de 26 px: la separación la controlan las reglas de arriba. */
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox .wgl-button-wrapper.rm_btn {
margin-bottom: 0;
}
/* Enlace que cubre la tarjeta (`module_link`): por encima del degradado, por debajo del
CTA, para que el clic funcione en cualquier punto. */
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-infobox__link {
z-index: 3;
}
:is(.elementor-element-famgrid1, .pt-famgrid) .wgl-button-wrapper.rm_btn {
position: relative;
z-index: 4;
}