/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
/* ===== INICIO paginas corporativas Macy - no editar a mano ===== */
/* ==========================================================================
   Pinturas Macy - Paginas corporativas
   Hoja comun a las 5 paginas del rediseno (Figma: Macy - Propuesta webs corporativas)
   ========================================================================== */

/* --- Tokens del diseno ---------------------------------------------------- */
/*
 * Los tokens van en .macy-page y no en :root a proposito: esta hoja se carga en
 * TODAS las paginas de la tienda, y Bootstrap ya declara en :root nombres como
 * --teal o --green. Declararlos ahi los pisaria en todo el sitio; dentro de
 * .macy-page solo existen para nuestras paginas.
 */
.macy-page {
    --azul-macy: #273756;
    --b-dark: #425d93;
    --b-medio: #5272b0;
    --b-lighter: #6c8fd3;
    --b-claro: #94b5f3;
    --verde: #5fc52e;
    --teal: #2eaec5;
    --teal-idi: #0fa3b1;
    --beige: #a79676;
    --gris-fondo: #f4f5f6;

    --ancho-contenido: 1040px;
    --ancho-hero: 1252px;
    --radio: 40px;
}

/* Esquina redondeada asimetrica: el gesto que define todo el diseno */
.macy-radio {
    border-radius: 0 var(--radio) 0 var(--radio);
}

/* --- Base ----------------------------------------------------------------- */
.macy-page {
    font-family: "Barlow", -apple-system, "Segoe UI", sans-serif;
    color: var(--azul-macy);
    background: #fff;
}

.macy-page * {
    box-sizing: border-box;
}

.macy-page p {
    margin: 0;
}

/*
 * El tema de PrestaShop pinta `h1 { color: #273756 }` y `a { color: #007bff }`.
 * Una regla puesta directamente sobre el elemento gana siempre al color que
 * heredaria del contenedor, asi que los titulares blancos sobre foto salian
 * azules. Aqui se devuelve la herencia a los elementos de texto.
 * Va con :where() para que no cuente en la especificidad: cualquier regla
 * nuestra de mas abajo (como .macy-dato__cifra) sigue mandando sobre el color.
 */
.macy-page :where(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, em, sup, sub) {
    color: inherit;
}

/*
 * Y con los enlaces hace falta mas mano dura: el tema los resetea con
 *   a:link:not(.nav-link):not(.btn) { color: #777 }
 * cuya especificidad (0,3,1) gana a cualquier clase suelta. Repetir la clase
 * del contenedor sube la nuestra a (0,4,1) y la supera sin usar !important.
 * Las tres reglas van juntas y en este orden: la general devuelve la herencia
 * y las dos siguientes recuperan los enlaces que si llevan color propio.
 */
.macy-page.macy-page.macy-page a:link,
.macy-page.macy-page.macy-page a:visited {
    color: inherit;
}

/* Las tarjetas son enlaces con foto de fondo: su texto va en blanco */
.macy-page.macy-page.macy-page a.macy-tarjeta {
    color: #fff;
}

.macy-page.macy-page.macy-page a.macy-enlace {
    color: var(--b-lighter);
}

/*
 * PrestaShop envuelve el contenido CMS en un <div class="rte-content"> pensado
 * para texto de editor, y eso trae dos regalos indeseados:
 *   .rte-content ul  { list-style-type: disc; padding: .6rem .6rem .6rem 2rem }
 *   .rte-content img { max-width: 100%; height: auto }
 * Sus selectores son (0,1,1) y ganan a una clase suelta. Aqui todas las listas
 * son rejillas (no texto) y las imagenes de fondo deben llenar su caja, asi que
 * se repite la clase del contenedor para recuperar el control.
 */
.macy-page.macy-page ul,
.macy-page.macy-page ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.macy-page.macy-page .macy-tarjeta__img,
.macy-page.macy-page .macy-hero__img,
.macy-page.macy-page .macy-banda__img,
.macy-page.macy-page .macy-bloque-foto__img {
    height: 100%;
}

/*
 * El padding se SUMA al ancho, no se resta: con box-sizing:border-box un
 * max-width de 1040 dejaria 1000 utiles y todas las rejillas saldrian un 4% mas
 * estrechas que en el diseno. Los 20px son aire para movil, no parte de la
 * retícula, asi que van fuera de la medida.
 */
.macy-contenedor {
    width: 100%;
    max-width: calc(var(--ancho-contenido) + 40px);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Tipografia ----------------------------------------------------------- */
.macy-h1 {
    font-size: 51px;
    line-height: 59px;
    font-weight: 800;
    margin: 0;
}

.macy-h2 {
    font-size: 40px;
    line-height: 53px;
    font-weight: 400;
    margin: 0;
}

.macy-h2 strong,
.macy-h2 b {
    font-weight: 700;
}

/*
 * En el titulo de "Sigue descubriendo" el nombre en negrita va en su propia
 * linea (como en el diseno). Se hace por CSS y no con un <br> para no tener que
 * re-pegar el HTML de cada pagina en el editor CMS: solo lo afecta el <h2> que
 * precede a las tarjetas, gracias a :has(+ .macy-descubre).
 */
.macy-h2:has(+ .macy-descubre) strong {
    display: block;
}

.macy-h3 {
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    margin: 0;
}

.macy-h4 {
    font-size: 21px;
    line-height: 28px;
    font-weight: 700;
    margin: 0;
}

.macy-body {
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
}

.macy-caption {
    font-size: 15px;
    line-height: 23px;
    font-weight: 500;
}

/* --- Hero ----------------------------------------------------------------- */
.macy-hero {
    position: relative;
    max-width: var(--ancho-hero);
    min-height: 680px;
    margin: 0 auto;
    padding: 90px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    color: #fff;
}

.macy-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.macy-hero__texto {
    position: relative;
    z-index: 1;
    max-width: 813px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Parallax de raton (hero de Macy y banda de Sostenibilidad) ----------- */
/*
 * La foto de fondo se desplaza suavemente siguiendo el cursor (efecto elegante).
 * El movimiento lo aplica custom.js poniendo un transform en linea sobre la
 * imagen; aqui solo se prepara: un ligero scale para que el desplazamiento no
 * descubra los bordes, y una transicion para que el seguimiento y el retorno al
 * centro (al salir el raton) sean suaves.
 */
.macy-hero__img,
.macy-banda__img,
.macy-bloque-foto__img {
    transform: scale(1.12);
    transition: transform 0.35s ease-out;
    will-change: transform;
}

/* En tactil no hay parallax de raton (custom.js sale en `hover: none`), asi que
   se quita el zoom base para mostrar el encuadre completo de la foto. */
@media (hover: none) {
    .macy-hero__img,
    .macy-banda__img,
    .macy-bloque-foto__img {
        transform: none;
    }
}

/* TODAS las fotos a sangre (hero de quienes somos, bandas de cabecera y bloques
   de foto de fondo) muestran siempre la parte SUPERIOR de la imagen: al agrandar
   la ventana, object-fit:cover recorta por ABAJO (object-position: center top ->
   centrada en horizontal, anclada arriba) en vez de por el centro.
   transform-origin ancla igual el zoom del parallax de raton: sin el, el
   scale(1.12) se expandiria desde el centro y volveria a comerse la parte de
   arriba. Las dos propiedades van siempre juntas. */
.macy-hero__img,
.macy-banda__img,
.macy-bloque-foto__img {
    object-position: center top;
    transform-origin: center top;
}

/* Excepcion de I+D+i (tema teal): sus fotos a sangre se encuadran CENTRADAS en
   vertical. El anclaje arriba dejaba a la investigadora cortada por los hombros
   en pantallas anchas. Solo cambia algo cuando el hueco es mas apaisado que la
   foto (2752x1536 -> a partir de ~1220px de ventana con la banda de 680px de
   alto); por debajo el recorte es horizontal y da igual, por eso no hace falta
   media query. transform-origin acompana para que el zoom del parallax de raton
   se expanda desde el mismo punto. */
.macy-tema-teal .macy-banda__img,
.macy-tema-teal .macy-bloque-foto__img {
    object-position: center;
    transform-origin: center;
}

/* Misma excepcion para Instalaciones (tema beige): el hero de la fachada y la
   vista aerea de la fabrica se encuadran centradas en vertical. */
.macy-tema-beige .macy-banda__img,
.macy-tema-beige .macy-bloque-foto__img {
    object-position: center;
    transform-origin: center;
}

/* Ajuste fino del hero de I+D+i: el punto de encuadre sube 20 puntos (50% ->
   30%), asi se recupera la cabeza de la investigadora sin volver al anclaje
   arriba. Solo el hero; el fondo del bloque FROSIO se queda centrado. */
.macy-tema-teal .macy-banda__img {
    object-position: center 30%;
    transform-origin: center 30%;
}

/* --- Aparición elegante al hacer scroll (las 4 páginas) --------------------
 * custom.js (initReveal) pone .macy-reveal en los bloques que estan BAJO el
 * pliegue al cargar (los que ya se ven NO se tocan -> sin parpadeo) y les añade
 * .macy-visible al entrar en pantalla al hacer scroll (una sola vez). Usa la
 * propiedad `translate` (no `transform`) para no pisar los hover de las
 * tarjetas. Los heros no se animan (estan sobre el pliegue). Respeta
 * prefers-reduced-motion (en el JS). Revertir: borrar este bloque + la funcion
 * initReveal del custom.js y su llamada en init().
 */
.macy-reveal {
    opacity: 0;
    translate: 0 26px;
    transition: opacity 0.7s ease, translate 0.7s ease;
}

.macy-reveal.macy-visible {
    opacity: 1;
    translate: 0 0;
}

/* --- Hitos desplegables (enlace "Ver hitos" en quienes-somos) ------------- */
/*
 * Panel que se despliega bajo el enlace. El contenido lo genera custom.js. La
 * animacion de altura usa el truco grid-template-rows 0fr->1fr. El margin-top
 * negativo cancela el gap:40px del contenedor cuando esta cerrado (para que no
 * deje hueco); al abrir vuelve a 0 y aparece esa separacion.
 */
.macy-hitos {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: -40px;
    transition: grid-template-rows 0.45s ease, margin-top 0.45s ease;
}

.macy-hitos.is-open {
    grid-template-rows: 1fr;
    margin-top: 0;
}

.macy-hitos__wrap {
    overflow: hidden;
    min-height: 0;
}

.macy-hitos__item {
    display: flex;
    gap: 20px;
    align-items: baseline;
    padding: 18px 0 10px;
    border-top: 1px solid rgb(39 55 86 / 0.2);
}

.macy-hitos__ano {
    flex: 0 0 52px;
    font-weight: 700;
    font-size: 21px;
    line-height: 28px;
    color: var(--b-lighter);
}

.macy-hitos__texto {
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--azul-macy);
}

/* --- Hover de las tarjetas de valores en Macy (Transformar / Referente /
   Constancia): elevacion + sombra, zoom de la foto y el icono a plena opacidad. */
.macy-valor {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.macy-valor .macy-tarjeta__img {
    transition: transform 0.6s ease;
}

.macy-valor .macy-valor__icono {
    transition: opacity 0.4s ease;
}

.macy-valor:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 34px rgb(39 55 86 / 0.22);
}

.macy-valor:hover .macy-tarjeta__img {
    transform: scale(1.08);
}

.macy-valor:hover .macy-valor__icono {
    opacity: 1;
}

/* --- Pills que invierten sus colores al pasar el raton -------------------- */
.macy-etiqueta {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Macy, "Lo que nos diferencia": al pasar el raton por su seccion. Tras el split
   (initSplitMacy) hay dos secciones --gris; solo la 2a contiene .macy-intro-centrada,
   asi que este selector solo se activa al hover de esa 2a seccion. */
.macy-seccion--gris:hover .macy-intro-centrada .macy-etiqueta {
    background: var(--acento, var(--b-lighter));
    color: #fff;
}

/* Primera seccion (portada) de Sostenibilidad e I+D+i: hover en toda la seccion
   invierte su pill ("Sostenibilidad" / "I+D+i"). */
.macy-tema-verde .macy-portada:hover .macy-etiqueta,
.macy-tema-teal .macy-portada:hover .macy-etiqueta,
.macy-tema-beige .macy-portada:hover .macy-etiqueta {
    background: var(--acento);
    color: #fff;
}

/* Hover en toda la seccion invierte su pill: "Tres pilares" (Sostenibilidad) y
   "Compromiso con la calidad" (I+D+i). */
.macy-tema-verde .macy-seccion:hover .macy-intro-centrada .macy-etiqueta,
.macy-tema-teal .macy-seccion:hover .macy-titular-grupo .macy-etiqueta,
.macy-tema-beige .macy-seccion:hover .macy-intro-centrada .macy-etiqueta,
.macy-tema-beige .macy-cierre:hover .macy-etiqueta {
    background: var(--acento);
    color: #fff;
}

.macy-hero__entradilla {
    font-size: 21px;
    line-height: 28px;
    font-weight: 400;
}

/* --- Secciones ------------------------------------------------------------ */
.macy-seccion {
    padding: 90px 0;
}

.macy-seccion--gris {
    background: var(--gris-fondo);
}

/* Cabecera a dos columnas: titular grande + parrafo de apoyo */
.macy-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 60px;
}

.macy-cabecera__titulo {
    flex: 0 1 508px;
}

.macy-cabecera__apoyo {
    flex: 0 1 305px;
    padding-top: 6px;
}

/* --- Tarjeta con imagen de fondo y degradado ------------------------------ */
/*
 * El degradado va en ::after en vez de en un div aparte: misma imagen visual,
 * un elemento menos por tarjeta.
 */
.macy-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
}

.macy-tarjeta__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/*
 * El degradado arranca del mismo color con alpha 0, no de `transparent`:
 * `transparent` es rgba(0,0,0,0) y al interpolar ensucia el degradado de gris.
 */
.macy-tarjeta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        206deg,
        rgb(var(--tarjeta-rgb, 82 114 176) / 0) 36%,
        rgb(var(--tarjeta-rgb, 82 114 176)) 85%
    );
}

/*
 * El contenido de la tarjeta sube por encima de la foto de fondo. Se excluye la
 * .macy-cobertura: esta regla tiene mas especificidad (0,2,0) que la suya (0,1,0)
 * y, sin el :not, le imponia position:relative + z-index:2, con lo que el enlace
 * perdia el inset:0 (se encogia a 1px) y el <div> del cuerpo se comia el clic.
 */
.macy-tarjeta > *:not(.macy-tarjeta__img):not(.macy-cobertura) {
    position: relative;
    z-index: 2;
}

/* Variantes de color del degradado */
.macy-tarjeta--medio { --tarjeta-rgb: 82 114 176; }
.macy-tarjeta--claro { --tarjeta-rgb: 148 181 243; }
.macy-tarjeta--verde { --tarjeta-rgb: 95 197 46; }
.macy-tarjeta--teal { --tarjeta-rgb: 46 174 197; }
.macy-tarjeta--teal-idi { --tarjeta-rgb: 15 163 177; }
.macy-tarjeta--beige { --tarjeta-rgb: 167 150 118; }

/* --- Cifras (Una compania solida) ----------------------------------------- */
.macy-cifras {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.macy-cifra {
    min-height: 286px;
    gap: 10px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/*
 * Hover de las tarjetas de cifras (50 años, +3 continentes...): la tarjeta se
 * eleva con una sombra suave, la foto de fondo hace un zoom lento (recortado por
 * el overflow:hidden de .macy-tarjeta) y el numero crece un poco. Son tarjetas
 * decorativas, no enlaces: el efecto es solo visual.
 */
.macy-cifra .macy-tarjeta__img {
    transition: transform 0.6s ease;
}

.macy-cifra .macy-cifra__dato {
    transition: transform 0.4s ease;
    transform-origin: left bottom;
}

.macy-cifra:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 34px rgb(39 55 86 / 0.22);
}

.macy-cifra:hover .macy-tarjeta__img {
    transform: scale(1.08);
}

.macy-cifra:hover .macy-cifra__dato {
    transform: scale(1.07);
}

.macy-cifra__dato {
    display: flex;
    align-items: baseline;
    gap: 7px;
    /* El dato va siempre en una linea, como en el diseno */
    white-space: nowrap;
}

.macy-cifra__numero {
    font-size: 40px;
    line-height: 53px;
    font-weight: 800;
}

.macy-cifra__unidad {
    font-size: 21px;
    line-height: 28px;
    font-weight: 700;
}

.macy-cifra__etiqueta {
    text-transform: uppercase;
}

/* --- Valores (Casi cinco decadas) ----------------------------------------- */
.macy-valores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.macy-valor {
    min-height: 390px;
    padding: 40px;
    justify-content: space-between;
}

.macy-valor__icono {
    width: 82px;
    height: 82px;
    opacity: 0.6;
}

/* La tercera tarjeta no lleva foto: degradado azul de marca */
.macy-valor--solido::after {
    background: linear-gradient(113deg, var(--azul-macy) 18%, var(--b-dark) 82%);
}

.macy-valor__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.macy-enlace {
    color: var(--b-lighter);
    text-decoration: underline;
    font-size: 15px;
    line-height: 23px;
    font-weight: 500;
}

/*
 * En quienes somos no hay color de acento y la etiqueta va en azul claro; en
 * las paginas de seccion toma el color del tema. De ahi el fallback.
 */
.macy-etiqueta {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--acento, var(--b-lighter));
    border-radius: 20px;
    color: var(--acento, var(--b-lighter));
    text-transform: uppercase;
}

/*
 * En las filas de "Sostenibilidad que se aplica" (pagina verde), al pasar el
 * raton por CUALQUIER parte de la fila el pill invierte sus colores: de borde y
 * texto en acento a fondo acento con texto blanco.
 */
.macy-tema-verde .macy-fila .macy-etiqueta {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.macy-tema-verde .macy-fila:hover .macy-etiqueta,
.macy-tema-teal .macy-fila:hover .macy-etiqueta {
    background: var(--acento);
    color: #fff;
}

/* --- Capacidades (Lo que nos diferencia) ---------------------------------- */
.macy-intro-centrada {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    text-align: center;
}

.macy-capacidades {
    display: grid;
    gap: 40px 20px;
    /* 6 columnas para poder hacer 3+2 con las mismas guias */
    grid-template-columns: repeat(6, 1fr);
}

.macy-capacidad {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Las dos ultimas ocupan media fila cada una */
.macy-capacidad--ancha {
    grid-column: span 3;
}

.macy-capacidad__figura {
    min-height: 390px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/*
 * Mismo hover que las tarjetas de cifras: la tarjeta se eleva con sombra y la
 * foto de fondo hace zoom (recortado por el overflow:hidden de .macy-tarjeta).
 * Estas no llevan numero, asi que no se aplica el crecer del dato.
 */
.macy-capacidad__figura .macy-tarjeta__img {
    transition: transform 0.6s ease;
}

.macy-capacidad__figura:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 34px rgb(39 55 86 / 0.22);
}

.macy-capacidad__figura:hover .macy-tarjeta__img {
    transform: scale(1.08);
}

.macy-capacidad__pie {
    color: var(--azul-macy);
}

/* --- Sigue descubriendo --------------------------------------------------- */
.macy-descubre {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.macy-descubre__tarjeta {
    min-height: 390px;
    justify-content: space-between;
}

/* Zoom de la foto de fondo al pasar el raton (recortado por el overflow:hidden
   de .macy-tarjeta). Es la foto la que crece, no la tarjeta. */
.macy-descubre__tarjeta .macy-tarjeta__img {
    transition: transform 0.5s ease;
}

.macy-descubre__tarjeta:hover .macy-tarjeta__img {
    transform: scale(1.08);
}

.macy-descubre__seccion {
    text-transform: uppercase;
}

.macy-descubre__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.macy-descubre__texto {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.macy-boton-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 12px 24px 10px;
    background: #fff;
    border-radius: 40px;
    transition: transform 0.2s ease;
}

.macy-boton-flecha img {
    width: 26px;
    height: 26px;
    display: block;
}

/*
 * Enlace que cubre toda la tarjeta. El editor de PrestaShop "corrige" los <a>
 * que envuelven bloques cerrandolos tras el primer hijo (regla de HTML4), y eso
 * desmontaba las tarjetas al pegarlas. Con este patron el <a> solo contiene
 * texto en linea, asi que ningun editor lo toca, y la tarjeta sigue siendo
 * clicable entera.
 */
.macy-cobertura {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* El enlace necesita texto para lectores de pantalla, pero no debe verse */
.macy-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Boton de flecha de las tarjetas "Sigue descubriendo": al pasar el raton por la
 * tarjeta (o al enfocar su enlace con teclado) el boton crece hacia la derecha y
 * aparece el nombre de la seccion. El texto se genera por CSS (::after) para no
 * tener que re-pegar el HTML en el editor CMS; en estas tarjetas el color de la
 * variante identifica la seccion, de ahi el mapeo de abajo.
 */
.macy-descubre__tarjeta .macy-boton-flecha::after,
.macy-panel__destacado .macy-boton-flecha::after,
.macy-vidrio .macy-boton-flecha::after {
    content: "VER PÁGINA";
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    color: #273756;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    transition: max-width 0.4s ease, margin-left 0.4s ease, opacity 0.3s ease;
}

.macy-descubre__tarjeta:hover .macy-boton-flecha::after,
.macy-descubre__tarjeta:focus-within .macy-boton-flecha::after,
.macy-panel:hover .macy-boton-flecha::after,
.macy-panel:focus-within .macy-boton-flecha::after,
.macy-vidrio:hover .macy-boton-flecha::after,
.macy-vidrio:focus-within .macy-boton-flecha::after {
    max-width: 220px;
    margin-left: 10px;
    opacity: 1;
}

/* ==========================================================================
   Paginas de seccion: Sostenibilidad, Instalaciones e I+D+i
   Las tres comparten estructura y solo cambian de color, asi que todo lo de
   aqui abajo se pinta con --acento y cada pagina elige su tema en el <main>.
   ========================================================================== */

.macy-tema-verde { --acento: #5fc52e; --acento-rgb: 95 197 46; }
.macy-tema-beige { --acento: #a79676; --acento-rgb: 167 150 118; }
.macy-tema-teal  { --acento: #0fa3b1; --acento-rgb: 15 163 177; }

/* Fondo tenue del acento: se repite en portada, cierres y bloques de lista */
.macy-tenue {
    background: rgb(var(--acento-rgb) / 0.1);
}

/* --- Portada de seccion (entradilla + banda + cifras) --------------------- */
.macy-portada {
    display: flex;
    flex-direction: column;
    gap: 120px;
    padding: 120px 0 90px;
}

/* Etiqueta + titular apilados; se repite en portadas y cabeceras de bloque */
.macy-titular-grupo,
.macy-portada__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.macy-portada__titulo {
    max-width: 824px;
    font-size: 40px;
    line-height: 53px;
    font-weight: 400;
    color: var(--acento);
}

/* --- Banda: la foto de cabecera, a sangre y con degradado del acento ------ */
.macy-banda {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 680px;
    padding: 90px 0;
    overflow: hidden;
    color: #fff;
}

.macy-banda__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.macy-banda::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        198deg,
        rgb(var(--acento-rgb) / 0) 37%,
        rgb(var(--acento-rgb)) 92%
    );
}

.macy-banda__texto {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 813px;
}

.macy-banda__entradilla {
    font-size: 21px;
    line-height: 28px;
    font-weight: 400;
}

/* --- Cifras con filete superior ------------------------------------------ */
/*
 * minmax(0,1fr) y no 1fr: las cuatro columnas miden lo mismo y la cifra puede
 * desbordar sobre el hueco sin ensanchar su columna, como en el diseno.
 */
.macy-datos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 60px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.macy-dato {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 10px;
    border-top: 1px solid rgb(var(--acento-rgb) / 0.6);
}

/* La cifra va en el acento rebajado; el texto, en el acento pleno */
.macy-dato__cifra {
    font-size: 40px;
    line-height: 53px;
    font-weight: 800;
    color: rgb(var(--acento-rgb) / 0.4);
    /* "Flota propia" o "ISO 14001" nunca parten en dos lineas */
    white-space: nowrap;
}

.macy-dato__texto {
    color: var(--acento);
}

/* --- Tarjeta de seccion (pilares, laboratorios) --------------------------- */
.macy-tarjeta--acento { --tarjeta-rgb: var(--acento-rgb); }

/* Rotulo pequeno dentro de una tarjeta, encima del titulo */
.macy-tarjeta__kicker {
    text-transform: uppercase;
}

/* Igual que .macy-capacidad pero con la tarjeta pegada arriba y el pie debajo */
.macy-ficha {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.macy-ficha__figura {
    min-height: 390px;
}

/*
 * Mismo hover que las cifras/capacidades en las fichas CON FOTO (los pilares
 * Personas/Planeta/Prosperidad de sostenibilidad): elevacion + sombra + zoom de
 * la foto. Se excluyen las fichas con icono (`--icono`, los laboratorios de
 * instalaciones), que no llevan foto de fondo que ampliar.
 */
.macy-ficha__figura {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.macy-ficha__figura .macy-tarjeta__img {
    transition: transform 0.6s ease;
}

.macy-ficha__figura:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 34px rgb(39 55 86 / 0.22);
}

.macy-ficha__figura:hover .macy-tarjeta__img {
    transform: scale(1.08);
}

/* Con icono, la tarjeta lo apoya arriba y el titulo abajo */
.macy-ficha__figura--icono {
    justify-content: space-between;
}

/* Icono translucido dentro de la tarjeta (laboratorios) */
.macy-ficha__icono {
    width: 82px;
    height: 82px;
    opacity: 0.6;
}

.macy-fichas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --- Bloque con foto a sangre de fondo ------------------------------------ */
.macy-bloque-foto {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    color: #fff;
}

.macy-bloque-foto__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/*
 * Velo del acento para las fotos que no vienen ya tenidas del diseno. Va en
 * multiply para que la foto conserve su textura en vez de quedar plana.
 */
.macy-bloque-foto--tenido .macy-bloque-foto__img {
    filter: blur(10px);
    transform: scale(1.06);
}

.macy-bloque-foto--tenido::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(var(--acento-rgb) / 0.8);
    mix-blend-mode: multiply;
}

/* Bloque alto con el contenido apoyado abajo (vista aerea de la fabrica) */
.macy-bloque-foto--alto {
    display: flex;
    align-items: flex-end;
    min-height: 826px;
}

/* Cifra suelta sobre la foto, sin caja: acompana al titular de la izquierda */
.macy-dato-suelto {
    text-align: center;
    color: #fff;
}

.macy-dato-suelto .macy-cifra-grande {
    color: rgb(255 255 255 / 0.6);
}

/* Velo neutro, solo para que el texto blanco tenga contraste sobre la foto.
   Las paradas replican el degradado del Figma, medido franja a franja sobre el
   render del frame (comparando su brillo con el de la foto sin velo): el diseño
   NO oscurece el primer tercio y luego baja mas fuerte, hasta un 36% al 82% de
   la altura. Una rampa lineal 0->30% en toda la altura, que es lo que habia,
   dejaba el "50.000m2" sobre la nave blanca sin contraste.
   Antes no se notaba porque la foto de la aerea traia el degradado quemado
   dentro del archivo y se oscurecia dos veces; la foto buena viene limpia. */
.macy-bloque-foto--oscurecido::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgb(0 0 0 / 0) 28%,
        rgb(0 0 0 / 0.28) 55%,
        rgb(0 0 0 / 0.36) 82%,
        rgb(0 0 0 / 0.34) 100%);
}

.macy-bloque-foto > .macy-contenedor {
    position: relative;
    z-index: 2;
}

/* --- Panel con borde del acento (el dato que respalda / certificaciones) --- */
.macy-panel {
    display: flex;
    align-items: stretch;
    gap: 20px;
    border: 1px solid var(--acento);
}

.macy-panel__texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px;
}

.macy-panel__destacado {
    flex: 0 0 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
    background: rgb(var(--acento-rgb) / 0.4);
    text-align: center;
}

/* El boton nace alineado a la izquierda; aqui la columna va centrada */
.macy-panel__destacado .macy-boton-flecha {
    align-self: center;
}

.macy-cifra-grande {
    font-size: 64px;
    line-height: 72px;
    font-weight: 800;
}

/* --- Tarjeta de vidrio (sellos de construccion sostenible) ---------------- */
.macy-vidrio {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px;
    background: rgb(255 255 255 / 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid #fff;
}

/* Estas van mas separadas que el resto de rejillas: 60px, como en el diseno */
.macy-vidrios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.macy-vidrio__sello {
    width: 120px;
    height: auto;
    transition: transform 0.4s ease;
}

/* Ligero zoom del sello al pasar el raton por la tarjeta (VERDE/BREEAM/LEED) */
.macy-vidrio:hover .macy-vidrio__sello {
    transform: scale(1.08);
}

.macy-vidrio__cuerpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

/* --- Filas con filete (lineas de producto, principios) -------------------- */
.macy-filas {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * El filete de separacion va a todo el ancho de la pantalla, pero el contenido
 * de la fila se alinea con el resto de la pagina: por eso el borde esta en el
 * <li> y el flex en un contenedor interior.
 */
.macy-fila {
    border-bottom: 1px solid rgb(var(--acento-rgb) / 0.6);
}

.macy-fila__contenido {
    display: flex;
    align-items: center;
    gap: 135px;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Con el icono delante no cabe tanto aire entre columnas */
.macy-fila__contenido:has(.macy-fila__icono) {
    gap: 60px;
}

/*
 * En las filas SIN icono (los principios de I+D+i) la descripcion arranca
 * arriba, a la altura de la etiqueta, en vez de centrarse: si se centra, las
 * descripciones de 2 lineas "flotan" mas abajo que las de 3 y no comparten una
 * linea superior comun de fila a fila. Las filas con icono siguen centradas.
 */
.macy-fila__contenido:not(:has(.macy-fila__icono)) {
    align-items: flex-start;
}

.macy-fila__icono {
    flex: none;
    width: 90px;
    height: 90px;
}

.macy-fila__titular {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.macy-fila__nombre {
    font-size: 32px;
    line-height: 42px;
    font-weight: 800;
    color: rgb(var(--acento-rgb) / 0.4);
    margin: 0;
}

.macy-fila--compacta .macy-fila__nombre {
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
}

/*
 * Los principios de I+D+i (filas SIN icono) usan el titulo compacto del diseno
 * (Barlow Bold 26/32, estilo LS-H5). A 32px los titulos largos ("Innovacion
 * orientada a valor y mercado") no caben en su columna de 452px y, al ir en
 * nowrap, la ensanchaban empujando a la derecha la columna del texto: la
 * descripcion salia desalineada respecto a las filas de titulo corto. A 26px el
 * titulo mas largo (449px en el diseno) cabe y todas las columnas de texto
 * arrancan en la misma x. El min-width:0 es un seguro para que un titulo nunca
 * pueda volver a empujar la columna del texto.
 */
.macy-fila__contenido:not(:has(.macy-fila__icono)) .macy-fila__nombre {
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
}

.macy-fila__contenido:not(:has(.macy-fila__icono)) .macy-fila__titular {
    min-width: 0;
}

/* En escritorio el nombre va en una linea, como en el diseno; por debajo se
   deja partir para que no desborde a lo ancho. */
@media (min-width: 1101px) {
    .macy-fila__nombre {
        white-space: nowrap;
    }
}

.macy-fila__texto {
    flex: 1;
    color: var(--acento);
}

/* --- Certificados (I+D+i) ------------------------------------------------- */
/* minmax(0,1fr) para que el sello de PYME, que es ancho, no ensanche su columna */
.macy-certificados {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* space-between deja los cuatro sellos alineados abajo aunque el texto varie */
.macy-certificado {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 60px;
    padding: 40px;
    border: 1px solid rgb(var(--acento-rgb) / 0.6);
    color: var(--acento);
}

.macy-certificado__nombre {
    font-size: 21px;
    line-height: 28px;
    font-weight: 700;
    margin: 0 0 10px;
    /* "ISO 9001:2015" no se parte en dos lineas */
    white-space: nowrap;
}

.macy-certificado__sello {
    max-height: 185px;
    width: auto;
    align-self: flex-start;
}

/* El sello de PYME es un SVG con preserveAspectRatio="none" y sin tamaño
   intrinseco: por defecto se renderiza a 300x150 (horizontal) y estira su
   contenido, que en realidad es vertical (viewBox 124x185). Se le fija su
   proporcion real para que no se deforme. */
.macy-certificado__sello[src$="idi-cert-pyme.svg"] {
    height: 185px;
    aspect-ratio: 124.272 / 185.001;
}

/* Hover de las tarjetas de certificados (ISO / ISO / UNE / PYME): elevacion +
   sombra y un ligero zoom del sello. No tienen foto de fondo. */
.macy-certificado {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.macy-certificado__sello {
    transition: transform 0.5s ease;
}

.macy-certificado:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 34px rgb(39 55 86 / 0.18);
}

.macy-certificado:hover .macy-certificado__sello {
    transform: scale(1.06);
}

/* Logo sobre foto, en su cajita blanca translucida (FROSIO) */
.macy-sello-flotante {
    flex: none;
    width: 117px;
    height: auto;
    padding: 8px 15px 15px;
    background: rgb(255 255 255 / 0.6);
    border: 1px solid #fff;
    border-radius: 15px;
}

/* Texto a la izquierda y lista de comprobaciones a la derecha */
.macy-dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: start;
}

/* --- Lista de verificaciones (FROSIO) ------------------------------------- */
.macy-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.macy-check {
    display: flex;
    align-items: center;
    gap: 10px;
}

.macy-check img {
    flex: none;
    width: 24px;
    height: 24px;
}

/* --- Cierre centrado (stock permanente) ----------------------------------- */
.macy-cierre {
    padding: 90px 0;
    border-bottom: 1px solid rgb(var(--acento-rgb) / 0.6);
}

.macy-cierre__contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
    color: var(--acento);
}

/* Titular de 51px en color de acento; lo usan el cierre y los cinco principios */
.macy-titular-grande {
    font-size: 51px;
    line-height: 59px;
    font-weight: 400;
    color: var(--acento);
    margin: 0;
}

.macy-titular-grande strong {
    font-weight: 700;
}

.macy-cierre__contenido .macy-titular-grande {
    max-width: 900px;
}

.macy-cierre__apoyo {
    max-width: 634px;
    font-size: 21px;
    line-height: 28px;
}

/* --- Cabecera a dos columnas en color de acento --------------------------- */
.macy-cabecera--acento .macy-cabecera__titulo,
.macy-cabecera--acento .macy-cabecera__apoyo {
    color: var(--acento);
}

/* El titular ocupa lo que necesite (titulares largos sobre foto) */
.macy-cabecera--libre .macy-cabecera__titulo {
    flex: 1 1 auto;
}

/* Reparto invertido: titular corto a la izquierda y parrafo ancho a la derecha */
.macy-cabecera--partida .macy-cabecera__titulo {
    flex: 0 1 295px;
}

.macy-cabecera--partida .macy-cabecera__apoyo {
    flex: 0 1 520px;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
    .macy-hero {
        min-height: 520px;
        padding: 60px 40px;
    }

    .macy-h1 {
        font-size: 40px;
        line-height: 48px;
    }

    .macy-cifras {
        grid-template-columns: repeat(2, 1fr);
    }

    .macy-cabecera {
        flex-direction: column;
        gap: 24px;
    }

    /* Se resetea el flex-basis a auto tambien en la variante --partida: sus
       295px/520px son ANCHO en escritorio (fila), pero al apilar en columna se
       interpretaban como ALTURA y dejaban huecos enormes. */
    .macy-cabecera__titulo,
    .macy-cabecera__apoyo,
    .macy-cabecera--partida .macy-cabecera__titulo,
    .macy-cabecera--partida .macy-cabecera__apoyo {
        flex-basis: auto;
    }

    .macy-banda {
        min-height: 520px;
        padding: 60px 0;
    }

    .macy-portada {
        gap: 60px;
        padding: 60px 0;
    }

    .macy-portada__titulo,
    .macy-cierre__titular {
        font-size: 30px;
        line-height: 40px;
    }

    .macy-datos,
    .macy-certificados {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }

    /* El panel deja de ser dos columnas: el dato grande pasa debajo del texto */
    .macy-panel {
        flex-direction: column;
    }

    .macy-panel__destacado {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .macy-valores,
    .macy-descubre,
    .macy-fichas,
    .macy-vidrios,
    .macy-dos-columnas {
        grid-template-columns: 1fr;
    }

    .macy-dos-columnas {
        gap: 40px;
    }

    .macy-capacidad,
    .macy-capacidad--ancha {
        grid-column: span 6;
    }

    .macy-h2 {
        font-size: 30px;
        line-height: 40px;
    }

    /* Las filas dejan de ser una tabla de 3 columnas y se apilan. Se repite el
       selector :has(icono) para anular el gap:60px de escritorio (mas especifico),
       que en columna dejaba huecos enormes entre icono, titulo y texto. */
    .macy-fila__contenido,
    .macy-fila__contenido:has(.macy-fila__icono) {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .macy-fila__texto {
        flex: none;
    }
}

@media (max-width: 600px) {
    .macy-seccion {
        padding: 60px 0;
    }

    .macy-hero {
        padding: 40px 24px;
        min-height: 440px;
    }

    .macy-h1 {
        font-size: 32px;
        line-height: 38px;
    }

    .macy-cifras,
    .macy-datos,
    .macy-certificados {
        grid-template-columns: 1fr;
    }

    .macy-banda {
        min-height: 440px;
        padding: 40px 0;
    }

    .macy-cierre__titular {
        font-size: 26px;
        line-height: 34px;
    }

    .macy-vidrio,
    .macy-panel__texto,
    .macy-certificado {
        padding: 24px;
    }

    .macy-page {
        --radio: 24px;
    }
}
/* ===== FIN paginas corporativas Macy ===== */

/* ===== INICIO home Macy - no editar a mano ===== */
/* ==========================================================================
   Pinturas Macy - Home
   Bloques de la home nueva (Figma: "Macy - Propuesta webs corporativas",
   frame 1:1653 "Home").

   Hoja SEPARADA de macy-corporativas.css a proposito: la home no es una
   pagina CMS sino una pagina del builder iqitelementor ("Principal 2025"),
   y va en su propio bloque de custom.css para poder quitarla sin tocar las
   corporativas. Los pocos tokens que comparten se repiten aqui en vez de
   acoplar las dos hojas.

   Bloques incluidos:
     1. Productos (rejilla de 6 tarjetas de categoria)
     2. Botones de flecha "Leer mas" / "Ver producto" (todo el sitio)
     3. Tarjetas de blog: conservar el redondeo en hover
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
/*
 * Igual que en las corporativas, los tokens NO van en :root: esta hoja se
 * carga en todo el sitio y Bootstrap ya declara ahi nombres genericos.
 * Dentro de .macy-home solo existen para nuestros bloques.
 */
.macy-home {
    --azul-macy: #273756;
    --radio: 40px;

    /* El contenido del diseno va de x=94 a x=1346 sobre un lienzo de 1440 */
    --ancho-contenido: 1252px;

    /* Alto de la franja de titulo en reposo (98 px en el Figma) */
    --alto-pestana: 98px;
}

/* --- Base ----------------------------------------------------------------- */
.macy-home {
    font-family: "Barlow", -apple-system, "Segoe UI", sans-serif;
    color: var(--azul-macy);
}

.macy-home * {
    box-sizing: border-box;
}

/*
 * El tema pinta `h1,h2 { color: #273756 }` en custom_s_1.css, y una regla
 * puesta sobre el elemento gana al color heredado del contenedor: sin esto,
 * los titulos blancos sobre foto salen azules. Con :where() para que no
 * sume especificidad y cualquier regla nuestra posterior siga mandando.
 */
.macy-home :where(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, em) {
    color: inherit;
}

/*
 * Y los enlaces necesitan mas mano dura: el tema los resetea con
 *   a:link:not(.nav-link):not(.btn) { color: #777 }
 * que es (0,3,1) y gana a una clase suelta. Repetir la clase raiz sube la
 * nuestra a (0,4,1) y la supera sin recurrir a !important.
 */
.macy-home.macy-home.macy-home a:link,
.macy-home.macy-home.macy-home a:visited {
    color: inherit;
}

/*
 * Contenedor. El +40 es a proposito: con box-sizing: border-box los 20 px de
 * padding se restarian del ancho util y todas las rejillas saldrian un 3-4 %
 * estrechas. Asi el contenido mide exactamente --ancho-contenido.
 */
.macy-home__contenedor {
    width: 100%;
    max-width: calc(var(--ancho-contenido) + 40px);
    margin-inline: auto;
    padding-inline: 20px;
}

/* ==========================================================================
   1. Bloque Productos
   ========================================================================== */

/*
 * 100 px arriba y abajo: es la separacion del diseno respecto al hero y al
 * buscador, y coincide con el margen que ya usa la seccion equivalente del
 * builder, asi que el bloque encaja sin retocar la seccion que lo contenga.
 */
.macy-productos {
    padding-block: 100px;
    background: #fff;
}

.macy-productos__cabecera {
    margin-bottom: 50px;
}

.macy-productos__titulo {
    margin: 0;
    font-size: 40px;
    line-height: 53px;
    font-weight: 800;              /* Barlow ExtraBold - estilo LS-H3 */
}

.macy-productos__subtitulo {
    margin: 9px 0 0;
    font-size: 21px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- Rejilla -------------------------------------------------------------- */
.macy-productos__rejilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 24px;                /* del diseno: 28 vertical, ~24 horizontal */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Tarjeta -------------------------------------------------------------- */
/*
 * Cada tarjeta lleva su tinte propio como terna R,G,B para poder componer la
 * transparencia en un unico sitio (.macy-cat__pestana). Salen del Figma.
 */
.macy-cat--interiores { --tinte: 58, 58, 60; }
.macy-cat--industria  { --tinte: 44, 62, 80; }
.macy-cat--fachadas   { --tinte: 122, 107, 93; }
.macy-cat--madera     { --tinte: 139, 90, 60; }
.macy-cat--imper      { --tinte: 69, 106, 107; }
.macy-cat--obra       { --tinte: 132, 121, 86; }

.macy-cat__enlace {
    position: relative;
    display: block;
    overflow: hidden;              /* recorta el zoom de la foto */
    aspect-ratio: 401 / 334;       /* proporcion de la tarjeta en el diseno */
    border-radius: 0 var(--radio) 0 var(--radio);
    text-decoration: none;
    background: #e9eaec;           /* se ve mientras carga la foto */
}

.macy-cat__enlace:focus-visible {
    outline: 3px solid var(--azul-macy);
    outline-offset: 3px;
}

.macy-cat__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Pestana de titulo ---------------------------------------------------- */
/*
 * La pestana hace de forma y de contenedor del texto a la vez. En reposo es
 * una franja arriba; al pasar el raton crece hasta cubrir la foto entera y el
 * texto se recoloca en el centro ACOMPANANDO el movimiento, sin saltar.
 *
 * Se anima con dos propiedades que si interpolan:
 *   - `height`, que al crecer arrastra el texto hacia abajo porque el propio
 *     grid lo mantiene centrado con align-content (centrado VERTICAL).
 *   - las columnas `fr` del grid, que abren hueco a la izquierda del texto
 *     hasta igualarlo con el de la derecha (centrado HORIZONTAL).
 * La alternativa evidente -- cambiar justify-content o text-align -- NO sirve:
 * ninguna de las dos es animable y el texto daria un salto seco.
 *
 * La altura de reposo va en --alto-pestana en vez de depender del contenido
 * porque `height: auto` no se puede animar hacia `height: 100%`. Los valores
 * salen de medir en el navegador la altura real que ocupaba antes el texto.
 * OJO: si se alarga el copy, hay que revisar esas medidas.
 */
.macy-cat__pestana {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--alto-pestana);

    display: grid;
    /* [hueco izq] [texto] [hueco der] - en reposo el hueco izquierdo es 0 */
    grid-template-columns: 0fr minmax(0, max-content) 1fr;
    align-content: center;

    /*
     * El Figma sangra 40 px, pero ahi la descripcion mas larga ("Masillas,
     * imprimaciones y soluciones tecnicas") ocupa 319 de los 321 utiles y
     * cabe por los pelos. Chrome compone Barlow un pelin mas ancho: necesita
     * 328 y la parte en dos lineas, con lo que esa pestana crece frente a las
     * demas y la fila se ve torcida. Con 32 px quedan 337 utiles (9 de margen).
     * Se prefiere ceder 8 px de sangrado antes que descuadrar las seis.
     */
    padding-inline: 32px;
    background: rgba(var(--tinte), .8);
    border-radius: 0 var(--radio) 0 var(--radio);
    color: #fff;

    transition:
        height .55s cubic-bezier(.22, 1, .36, 1),
        grid-template-columns .55s cubic-bezier(.22, 1, .36, 1),
        background-color .55s ease;
}

.macy-cat__texto {
    grid-column: 2;                /* las columnas 1 y 3 van vacias, son el hueco */
}

/*
 * Al cubrir toda la foto se baja la opacidad de .8 a .68: con .8 la imagen
 * queda demasiado apagada y el sentido del efecto es justo que se siga viendo.
 */
.macy-cat__enlace:hover .macy-cat__pestana,
.macy-cat__enlace:focus-visible .macy-cat__pestana {
    height: 100%;
    grid-template-columns: 1fr minmax(0, max-content) 1fr;
    background: rgba(var(--tinte), .68);
}

/* En tactil no hay hover de verdad: se quedaria "pegado" tras el toque */
@media (hover: none) {
    .macy-cat__enlace:hover .macy-cat__pestana {
        height: var(--alto-pestana);
        grid-template-columns: 0fr minmax(0, max-content) 1fr;
        background: rgba(var(--tinte), .8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .macy-cat__pestana {
        transition: none;
    }
}

.macy-cat__nombre {
    display: block;
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;              /* estilo LS-H5 */
}

.macy-cat__desc {
    display: block;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;              /* estilo LS-Body */
}

/* ==========================================================================
   Responsive
   Mismos cortes que macy-corporativas.css (1100 / 900 / 600) para que las
   dos hojas rompan a la vez y no haya saltos raros entre paginas.
   ========================================================================== */

/* A tres columnas por debajo de 1100 las tarjetas bajan de ~340 px y el
   titular de 26 px ya no cabe: se pasa a dos. */
@media (max-width: 1100px) {
    .macy-productos__rejilla {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .macy-productos {
        padding-block: 70px;
    }

    .macy-productos__cabecera {
        margin-bottom: 36px;
    }

    .macy-productos__titulo {
        font-size: 32px;
        line-height: 40px;
    }

    .macy-productos__subtitulo {
        font-size: 18px;
        line-height: 24px;
    }

    /*
     * Con dos columnas estrechas el titular necesita menos cuerpo y menos
     * sangrado. Aun asi la descripcion mas larga se parte en dos lineas, asi
     * que la franja crece a 108 para que quepan: titulo (28) + 2 lineas de
     * descripcion (2x22) + aire. Al ser el mismo valor para las seis, siguen
     * midiendo todas igual ocupe el texto una linea o dos.
     */
    .macy-home {
        --alto-pestana: 108px;
    }

    .macy-cat__pestana {
        padding-inline: 28px;
    }

    .macy-cat__nombre {
        font-size: 22px;
        line-height: 28px;
    }

    .macy-cat__desc {
        font-size: 15px;
        line-height: 22px;
    }
}

@media (max-width: 600px) {
    .macy-productos {
        padding-block: 50px;
    }

    .macy-productos__rejilla {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* A una columna la tarjeta se va a ~560 px de ancho: con la proporcion
       original quedaria demasiado alta, asi que se achata a 3:2. */
    .macy-cat__enlace {
        aspect-ratio: 3 / 2;
    }

    /* A una columna vuelve a haber sitio: el texto cabe en una linea y la
       franja puede volver a los 98 px del diseno. */
    .macy-home {
        --alto-pestana: 98px;
    }

    .macy-cat__pestana {
        padding-inline: 28px;
    }

    .macy-cat__nombre {
        font-size: 26px;
        line-height: 32px;
    }

    .macy-cat__desc {
        font-size: 16px;
        line-height: 24px;
    }
}

/* ==========================================================================
   2. Botones de flecha "Leer mas" / "Ver producto" (TODO EL SITIO)
   ==========================================================================

   OJO AL ALCANCE: esto no es solo de la home. Estos botones son los redondos
   blancos o azules con la flecha que, al pasar el raton, se estiran y sacan
   el texto. Aparecen en las tarjetas de blog (home y blog), en las fichas de
   las categorias ("Ver producto"), al pie de los posts y en las corporativas.

   Los estiliza el CSS del modulo Theme Editor
   (modules/iqitthemeeditor/views/css/custom_s_1.css), que es un archivo de
   una sola linea de 72 KB y se edita desde el back office, NO por FTP: el
   modulo lo regenera. Por eso el arreglo se hace desde nuestro custom.css,
   que se carga despues (posicion 20 frente a 16) y solo necesita igualar
   especificidad, sin !important.

   Hay cuatro variantes y todas comparten el mismo mecanismo, asi que se
   corrigen de una vez atacando .elementor-button:
       (sin clase)  azul, flecha blanca      .dos  blanco, flecha azul
       .dd          icono de descarga        .auth flecha de volver
   (`.tres`, que llevan los "Ver producto", no existe en el CSS: son
   genericos con una clase huerfana.)

   QUE ESTABA MAL -- tres cosas, medidas con getAnimations():
     1. Animaba `width: 60px -> fit-content`. `fit-content` es una palabra
        clave, no una longitud: NO se puede interpolar. El navegador ni
        siquiera crea la transicion y el boton se ensancha de golpe.
     2. La opacidad del texto duraba `0s`: aparecia de golpe y ENCABALGADO
        sobre la flecha ("LE/R MAS").
     3. Y luego el `transform` tardaba 1s en separarlo.
   O sea: dos saltos secos y despues un deslizamiento lento.

   COMO SE ARREGLA: no se anima el ancho del boton, se anima el `max-width`
   del texto -- que si interpola -- y el boton crece detras porque su ancho
   lo marca el contenido. Es el mismo mecanismo del boton "VER PAGINA" de las
   paginas institucionales (.macy-boton-flecha en macy-corporativas.css).

   Lo que se ve NO cambia: en reposo el boton sigue midiendo 60x40 con solo
   la flecha, y al pasar el raton sale el texto con el mismo sangrado de
   antes (50 px a la izquierda, 20 a la derecha). Solo cambia el camino entre
   los dos estados.
   -------------------------------------------------------------------------- */

/*
 * Las clases van repetidas a proposito. Las variantes se declaran como
 * `.elementor-button.dos .elementor-button-text`, que es (0,3,0), y una
 * clase suelta pierde: sin esto los botones `.dos` de la home y el blog
 * conservaban su `margin-left:45px` + `margin-right:20px` y nacian con
 * 125 px de ancho en vez de 60. Repetir la clase sube la nuestra sin
 * recurrir a !important, igual que se hizo en macy-corporativas.css.
 */
.elementor-button.elementor-button {
    box-sizing: border-box;        /* para que min-width incluya el padding */
    justify-content: flex-start;
    width: fit-content;            /* fijo: ya no cambia en :hover */
    min-width: 60px;               /* 44 + 16 de padding = los 60 de reposo */
    height: 40px;
    /*
     * El hueco de la izquierda lo hace el padding, no el margen del texto.
     * 44 + los 6 de margin-left del texto = los mismos 50 px de sangrado que
     * tenia el original al desplegarse; 16 + 4 = los mismos 20 de la derecha.
     */
    padding: 0 16px 0 44px;
    transition: none;              /* el ancho lo dicta el texto */
}

.elementor-button.elementor-button.elementor-button .elementor-button-text {
    max-width: 0;
    margin: 0;
    opacity: 0;
    /*
     * overflow hidden hace dos cosas: recorta el texto mientras se descubre
     * y, por ser un flex item, le permite bajar de su ancho minimo
     * automatico (sin esto no colapsaria a 0 y el boton naceria ancho).
     */
    overflow: hidden;
    white-space: nowrap;
    transform: none;               /* anula el translateX(-20px) del original */
    transition:
        max-width .4s ease,
        margin-left .4s ease,
        opacity .3s ease;
}

/* El hover del original es (0,4,0), asi que este sube a (0,5,0) */
.elementor-button.elementor-button.elementor-button:hover .elementor-button-text,
.elementor-button.elementor-button.elementor-button:focus-visible .elementor-button-text {
    max-width: 220px;
    margin: 0 4px 0 6px;
    opacity: 1;
    transform: none;
}

/* En tactil no hay hover: se quedaria desplegado tras el toque */
@media (hover: none) {
    .elementor-button.elementor-button.elementor-button:hover .elementor-button-text {
        max-width: 0;
        margin: 0;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-button.elementor-button.elementor-button .elementor-button-text {
        transition: none;
    }
}

/* ==========================================================================
   3. Tarjetas de blog: conservar la esquina redondeada al pasar el raton
   ==========================================================================

   Las tarjetas de "Ultimas novedades" (y las del listado del blog) llevan
   `border-radius: 0 0 0 40px` -- la esquina inferior izquierda redondeada,
   que es el gesto de la marca. Pero el CSS del Theme Editor lo anula al
   pasar el raton con dos reglas:

       .cardblog:hover .card-block        { border-radius: 0!important }
       .elementor-element .post-item:hover { border-radius: 0!important }

   asi que la tarjeta se cuadra justo cuando el usuario la mira. Aqui se
   devuelve el radio. Como las originales llevan !important, hay que repetir
   -- !important tambien y subir la especificidad repitiendo la clase.

   NO se toca el cambio de degradado del hover (la tarjeta se aclara): eso
   es intencionado y sigue funcionando igual.

   Tampoco afecta a la ficha del post, donde la tarjeta va sin redondeo a
   proposito: esas reglas se declaran con `#module-ph_simpleblog-single`, y
   un id gana a cualquier numero de clases.
   -------------------------------------------------------------------------- */

.cardblog.cardblog:hover .card-block,
.elementor-element .post-item.post-item:hover {
    border-radius: 0 0 0 40px !important;
}

/* ==========================================================================
   4. Banner de empresa: la foto, tratada como las fotos a sangre de las
      institucionales
   ==========================================================================

   La aerea de la fabrica pasa a comportarse como el hero y las bandas de las
   paginas corporativas: nace con un zoom ligero y se desplaza siguiendo el
   cursor (el movimiento lo pone custom.js; aqui van el zoom de partida y la
   transicion que lo suaviza).

   Tres cambios, ademas del efecto:

   1. LA FOTO YA NO MANDA EL ALTO. Antes se dibujaba a su proporcion
      (1676x1296), asi que al ensanchar la ventana la seccion entera crecia a
      lo alto: 495 px a 1100 de ventana, 875 a 1920. Ahora el alto lo fija la
      columna y la foto lo rellena con `object-fit: cover`, de modo que al
      ensanchar la ventana la foto se ENSANCHA y se recorta por arriba y por
      abajo, siempre centrada (`object-position: center`).
   2. LA FOTO NO LLEVA NINGUNA ESQUINA REDONDEADA. El tema le ponia 40 px en
      la superior derecha (`.home-radius-right img`). La unica esquina
      redondeada del modulo es la inferior derecha del panel de texto, que ya
      viene del tema (`0 0 40px`) pero que el propio tema anulaba al pasar el
      raton por la seccion: aqui se le devuelve.
   3. `.elementor-animation-grow` le aplica `transform: scale(1.05)!important`
      al pasar el raton, y un !important de hoja gana al transform en linea
      del parallax. No se puede anular desde aqui sin romper tambien el
      nuestro, asi que custom.js le quita la clase a la imagen. Si el JS no
      llega a ejecutarse, la foto conserva el efecto original del tema.
   -------------------------------------------------------------------------- */

/* El alto de referencia del banner. Con tope, que es lo que evita que la
   seccion se dispare en pantallas anchas; con minimo, para que el texto del
   panel siga cabiendo en las estrechas. */
#index .elementor-element-0h0vgb4 > .elementor-column-wrap {
    min-height: clamp(420px, 45vw, 660px);
}

/* Las capas del builder se estiran a ese alto por flex: si el panel de texto
   fuera mas alto que el minimo, la foto crece con el y no queda una franja en
   blanco debajo.
   Se hace con flex y NO encadenando `height: 100%`: una altura porcentual sobre
   un `min-height` no resuelve (el navegador la trata como `auto`) y la foto
   recuperaba su proporcion, que es justo lo que se quiere evitar. */
#index .elementor-element-0h0vgb4 .elementor-widget-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

#index .home-radius-right {
    flex: 1 1 auto;
    position: relative;
}

/* La foto cubre esa caja: se ensancha con la ventana y el sobrante se recorta
   arriba y abajo, siempre centrada. Va en absoluto para no depender de la
   altura de las capas intermedias del builder. */
#index .home-radius-right img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    transform: scale(1.12);
    transition: transform 0.35s ease-out;
    will-change: transform;
}

/* En tactil no hay parallax (custom.js sale en `hover: none`): sin el zoom de
   partida se ve el encuadre completo del recorte. */
@media (hover: none) {
    #index .home-radius-right img {
        transform: none;
    }
}

/* El contenido del panel (comilla, cita, firma y boton) centrado en vertical
   dentro del azul. El contenedor de widgets se estira a todo el alto de la
   columna, asi que el texto quedaba arriba y el sobrante debajo: 59 px a 1920
   de ventana. Con los margenes verticales en `auto` deja de estirarse y se
   centra -- y funciona igual tanto si el contenedor flex del builder va en fila
   como en columna, que es lo que lo hace seguro aqui. */
#index .elementor-element-uzyxhnp > .elementor-column-wrap > .elementor-widget-wrap {
    margin-top: auto;
    margin-bottom: auto;
}

/* Y el texto del panel tampoco puede pasarse del eje de contenido por la
   derecha. La seccion va a sangre a proposito (la foto llega al borde), pero
   dentro el panel solo dejaba 40 px fijos, asi que en pantallas anchas la cita
   se metia 112 px mas alla de donde acaban los productos y las novedades:
   acababa en 1682 con el eje en 1570, a 1887 px de ventana.

   El padding que hace falta es `(ventana - 1252) / 2`. No se puede escribir con
   `vw` porque `100vw` incluye la barra de desplazamiento y el eje se calcula sin
   ella (los 33 px de descuadre que ya nos costo el ajuste de las novedades).
   Pero esta columna es el 40 % de la ventana, asi que `ventana = columna / 0.4`
   y el mismo padding sale de su propio ancho: `1.25 x columna - 626`. Como el
   porcentaje de un padding se resuelve sobre el ancho del contenedor -- la
   columna --, `calc(125% - 626px)` es exacto en cualquier pantalla y sin barra
   de por medio. El `max()` deja los 40 px originales cuando la formula da menos,
   que es por debajo de 1332 px, justo donde el texto ya cae dentro del eje.

   Solo de 1025 px para arriba: por debajo el builder apila las columnas al 100 %
   y el 40 % deja de cumplirse, con lo que la formula daria un padding enorme. */
@media (min-width: 1025px) {
    #index .elementor-element-uzyxhnp > .elementor-column-wrap {
        padding-right: max(40px, calc(125% - 626px));
    }
}

/* La esquina inferior derecha del panel de texto es la unica redondeada del
   modulo, y debe seguir estandolo con el raton encima. El tema la cuadra con
   `.banner-hover:hover .radius-hover .elementor-column-wrap {border-radius:0
   !important}` (0,3,0): hace falta !important tambien, y el id de la home para
   ganar la especificidad. El cambio de degradado de ese hover no se toca. */
#index .banner-hover:hover .radius-hover .elementor-column-wrap {
    border-radius: 0 0 40px !important;
}

/* ==========================================================================
   7. "Ultimas novedades", a la misma rejilla
   ==========================================================================

   Esa seccion del builder (`elementor-element-nb4ponu`) iba a ancho libre: sus
   tarjetas ocupaban 1600 px a 1920 de ventana, frente a los 1252 del bloque
   Productos y del header. Con el mismo contenedor, las tres tarjetas de blog
   arrancan y acaban en la misma vertical que los productos de arriba.

   La fila del blog lleva `margin: 0 -19px`, asi que la caja se sale 19 px por
   lado; las tarjetas, que es lo que se ve, quedan justo en el borde del
   contenido, que es lo que interesa alinear.
   -------------------------------------------------------------------------- */

/* El limite va en el `.elementor-widget-wrap`, que es el equivalente exacto de
   `.macy-home__contenedor` del bloque Productos: los dos cuelgan de una columna
   del builder que ya aporta 15 px de canal, asi que con el mismo `max-width` y
   el mismo padding de 20 px los dos bloques dan el mismo ancho util --
   `min(1252, ventana - 70)` -- en cualquier tamano de pantalla.

   Se hizo antes sobre `> .elementor-container` con un `@media` para las
   pantallas medias, y no vale: la media query mide la ventana CON la barra de
   desplazamiento y el ancho util se calcula SIN ella, asi que en la franja de
   ventana que ocupa la barra (33 px en las pruebas) los dos bloques se
   descuadraban 7 px. Puesto aqui no hay corte que ajustar y desaparece la
   dependencia de la barra.

   La fila del blog lleva `margin: 0 -19px`, asi que su caja se sale 19 px por
   lado; las tarjetas, que es lo que se ve, caen justo en el borde del contenido. */
/* Hijo directo de SU columna (`bre71fb`) y no `.elementor-widget-wrap` a secas:
   el widget de blog monta columnas propias con su propio `.elementor-widget-wrap`
   dentro, asi que el selector suelto aplicaba el padding dos veces y las
   tarjetas quedaban 20 px metidas hacia dentro. */
#index .elementor-element-bre71fb > .elementor-column-wrap > .elementor-widget-wrap {
    max-width: calc(var(--ancho-contenido, 1252px) + 40px);
    margin-inline: auto;
    padding-inline: 20px;
}

/* En movil el builder deja de meter canal en la columna (`padding: 0` por
   debajo de 768 px, medido) y ademas el propio widget de blog aporta 20 px por
   su cuenta, asi que los nuestros sobraban: las tarjetas quedaban 20 px mas
   estrechas que las de Productos. Sin ellos, los dos bloques vuelven a arrancar
   en la misma vertical. */
@media (max-width: 767.98px) {
    #index .elementor-element-bre71fb > .elementor-column-wrap > .elementor-widget-wrap {
        padding-inline: 0;
    }

    /* Cada tarjeta va en su propia columna del builder, y cada columna trae
       su trozo de canal para ESCRITORIO: la 1 `0 14px 0 0`, la 2 `0 7px` y la
       3 `0 0 0 14px`. En movil se apilan, pero solo la 3 tiene puesto su
       padding a 0 para movil en el builder: la 1 perdia 14 px por la derecha
       y la 2 quedaba 7 px desplazada (medido a 390: x 20/27/20, anchos
       336/336/350 frente a los 350 de Productos). Igual que la 3. */
    #index .elementor-element-crj76c4 > .elementor-element-populated,
    #index .elementor-element-9z5gvn3 > .elementor-element-populated {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ==========================================================================
   La tira de sellos del pie no cabe en pantallas estrechas (TODO EL SITIO)
   ==========================================================================

   `img.sellosPC` mide 613 px fijos y no se encoge, asi que por debajo de esa
   anchura empuja la pagina: 237 px de desbordamiento horizontal a 768 px de
   ventana y 125 a 992, medidos en la ficha de producto y en la home. Es un
   defecto previo a nuestros cambios (comprobado cargando las mismas paginas con
   el CSS anterior) y afecta a cualquier pagina, porque va en el pie.

   `max-width: 100%` con `height: auto` la hace encogerse manteniendo su
   proporcion. Se le quita ademas el `margin-left: -15px` que traia: era el
   canal de una fila de Bootstrap y, con la imagen ya encogida, solo servia para
   sacarla del margen por la izquierda. */
/* Clase repetida y `!important` en el `max-width`: algo del tema le pone
   `max-width: none` con mas peso (el valor computado seguia en `none` con la
   regla de una sola clase, aun cargandose nuestra hoja despues). El alto pasa a
   `auto` para que se encoja sin deformarse: la imagen es de 8696x1418, asi que
   a 768 px de ventana se dibuja a 768x125 en vez de a 613x100. */
img.sellosPC.sellosPC {
    max-width: 100% !important;
    height: auto;
    margin-left: 0;
}
/* ===== FIN home Macy ===== */
/* ===== INICIO header Macy - no editar a mano ===== */
/* ==========================================================================
   MACY - HEADER (todo el sitio)
   ==========================================================================

   El header es el mismo en toda la tienda, asi que estas reglas NO son solo de
   la home: van en un bloque propio de custom.css para poder subirlas o
   retirarlas sin tocar el de la home (banner de empresa y "Ultimas novedades",
   que son de #index).

   Se sube con:  python subir-ftp.py css-header
   Se retira con: python subir-ftp.py quitar-css-header
   -------------------------------------------------------------------------- */

/* ==========================================================================
   5. Barra de enlaces del header: una sola linea con menu de escritorio, y
      oculta en cuanto entra la hamburguesa
   ==========================================================================

   Los cinco enlaces (CATALOGO DE PRODUCTOS, INSTANCOLOR, CONTACTO, SOPORTE,
   CANAL DENUNCIAS) se partian en dos lineas ya a 1600 px de ventana, y la
   franja azul pasaba de 28 a 56 px de alto. No era falta de sitio: la fila es
   una rejilla de Bootstrap y a `.right-nav` se le asignaba un ancho por reparto
   de columnas, mas estrecho que el contenido, asi que los <li> (inline-block)
   se envolvian. Con `nowrap` la columna se ajusta al contenido y las otras dos
   columnas de la fila, que estan vacias, le ceden el espacio.

   Medido: el contenido ocupa 713 px fijos y, en el ancho mas estrecho con menu
   de escritorio, el contenedor da 960, de los que 100 se van en el
   `padding-right` de `.right-nav`. Quedan 147 px de margen, asi que cabe
   sobrado -- pero si algun dia se anaden mas enlaces hay que volver a medir:
   con `nowrap` un contenido que no quepa desbordaria en vez de partirse.

   El corte en 992 px es el mismo en el que el tema cambia al header de
   hamburguesa (comprobado con matchMedia a la vez que la visibilidad del header
   de escritorio: coinciden exactamente).

   Por debajo de ese corte la franja se oculta ENTERA, no solo los enlaces: su
   unico contenido es ese modulo (las columnas izquierda y central de la fila
   estan vacias), asi que ocultar solo los enlaces dejaria una banda azul de
   30 px vacia. Comprobado que contiene exactamente lo mismo en home, categoria,
   pagina CMS, blog y contacto.

   OJO: tres de los cinco enlaces -- CATALOGO DE PRODUCTOS (el PDF de tarifas),
   SOPORTE y CANAL DENUNCIAS -- NO estan en ningun otro sitio de la pagina, asi
   que dejan de ser accesibles en movil. Si hay que recuperarlos, el sitio es el
   menu de hamburguesa o el pie.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    #header .header-nav .block-iqitlinksmanager-2 ul {
        white-space: nowrap;
    }
}

@media (max-width: 991.98px) {
    #header .header-nav {
        display: none;
    }
}

/* ==========================================================================
   6. Header: margen lateral fluido y lupa de busqueda
   ==========================================================================

   MARGEN LATERAL. El logo va en `position: absolute` y su columna llevaba
   `padding-left: 150px` FIJO (y la derecha `padding-right: 150px`). Como el
   menu se mantiene centrado en la pantalla y el logo no se movia, la distancia
   entre ambos se comia sola al estrechar la ventana: 393 px a 1920, 153 a 1440
   y solo 5 px a 1024, donde el menu casi tocaba el logo.

   Ahora ese margen es fluido, igual a los dos lados para no descentrar el menu.
   El 7.9vw equivale a los 150 px originales a 1900 px de ventana, asi que en
   pantallas grandes NO cambia nada; el tope inferior evita que el logo se pegue
   al borde. A 1024 el hueco pasa de 5 a ~76 px.

   Un hueco estrictamente proporcional no es posible por debajo de ~1200 px: a
   1006 px de viewport el menu ocupa 460 y el logo 118 por lado, de modo que el
   hueco proporcional (20,7 % por lado) sumaria mas ancho del que hay.
   -------------------------------------------------------------------------- */

/* El header comparte rejilla con el contenido: del logo a la lupa hay el mismo
   ancho maximo que en el bloque Productos (--ancho-contenido, 1252 px, mas los
   20+20 de padding que el contenedor descuenta). Asi el logo arranca en la
   misma vertical que el primer producto y la lupa acaba en la del ultimo.
   Sustituye al margen lateral fluido que habia antes: ahora el margen lo marca
   el contenedor, igual que en el resto de la pagina. */
#desktop-header #desktop-header-container {
    max-width: calc(var(--ancho-contenido, 1252px) + 40px);
    margin-inline: auto;
    padding-inline: 20px;
}

#header .col-header-left {
    /* 15 px devuelven la columna al borde del contenedor: la `.row` de Bootstrap
       lleva `margin: 0 -15px` y sin esto el logo arrancaba 15 px por delante del
       contenido de Productos. */
    padding-left: 15px;
    /* Compensa el ancho que la lupa aporta a la columna derecha. El logo va en
       `position: absolute`, asi que NO ocupa ancho en su columna; la lupa si.
       Sin esto las dos columnas dejan de ser simetricas y el menu, que se
       centra en el espacio sobrante, se desplaza 9 px a la izquierda. Son los
       15 px de canal de la rejilla mas los 24 de la lupa. */
    padding-right: 39px;
}

#header .col-header-right {
    padding-right: 15px;   /* mismo motivo que en la columna del logo */
}

/* CENTRADO VERTICAL CON EL LOGO. El logo va en absoluto con `top:-30px`, asi
   que su centro cae en y=82, mientras que el texto de las pestanas estaba en 77
   y la lupa en 75: el menu se veia 5 px alto respecto al logotipo.

   Se baja con MARGENES (arriba positivo, abajo negativo para no alterar la
   altura de la franja) y no con `position:relative` ni `transform`: cualquiera
   de esos dos crearia un contexto de posicionamiento nuevo dentro del menu, y
   los submenus del mega menu se anclan al contenedor del header -- el tema pone
   `#header .col-header-menu { position: static }` justo para eso. Con margenes
   no se toca el anclaje.

   La lupa baja 7 en vez de 5 porque su centro de partida es el de su caja (75),
   no el optico del texto: asi los tres centros acaban en 82. */
#header .cbp-hrmenu > ul {
    margin-top: 5px;
    margin-bottom: -5px;
}

/* LA LUPA. Ya existe en el HTML (#header-search-btn, con su desplegable y el
   mismo modulo de busqueda que usa la columna de filtros de /10-productos),
   pero custom_s_1.css la oculta junto al boton de cuenta:
   `#header-search-btn, #header-user-btn { display:none }` -- especificidad
   (1,0,0). Aqui se muestra SOLO la lupa; el de cuenta sigue oculto. */
#header .col-header-right #header-search-btn {
    display: block;
    /* Ancho fijo y conocido: es el que compensa el padding-right de la columna
       del logo para que el menu quede centrado. Si se cambia, cambiar alli. */
    width: 24px;
    /* el panel de busqueda se posiciona respecto a la lupa */
    position: relative;
    top: 7px;              /* alineada con el logo y el menu (ver arriba) */
}

/* EL DESPLEGABLE. El del tema es un buscador A PANTALLA COMPLETA: el mismo div
   lleva `fullscreen-search` (min-height:100vh) y `modal-backdrop` (fixed, 100vw
   x 100vh, fondo negro al 50%). Aqui se convierte en una PASTILLA que nace como
   un circulo alrededor de la lupa y crece hacia la izquierda destapando el
   campo de escritura -- el mismo gesto que los botones de flecha del sitio.
   No se tocan las clases del HTML (no hay que pasar por el back office): basta
   con ganar en especificidad.

   Va en `position: absolute` A PROPOSITO: si creciera dentro del flujo, la
   columna de la derecha se ensancharia al abrirse y el menu, que se centra en
   el espacio sobrante, se desplazaria a cada clic.

   Se anima el `width` (interpolable) y NO propiedades como `fit-content`, que
   no lo son. La visibilidad la sigue llevando el tema
   (`.fullscreen-search {visibility:hidden}` + `#header-search-btn.show`), asi
   que el elemento conserva su caja de 40 px cerrado y la transicion arranca
   desde el circulo. */
#header #header-search-btn .fullscreen-search {
    position: absolute;
    top: 50%;
    /* -9 px centra el circulo de 42 sobre la lupa, que va en el centro de un
       boton de 24: (24 + 9) - 42/2 = 12. Si se cambia el tamano del circulo
       hay que recalcularlo o el gesto se ve descolocado. */
    right: -9px;
    left: auto;
    transform: translateY(-50%);
    width: 42px;                       /* cerrado: el circulo */
    height: 42px;
    min-height: 0;
    padding: 0;
    /* Estetica del buscador de /10-productos, medida sobre la pagina: borde de
       2 px navy (no gris), radio 40 y fondo blanco. Sin sombra, como alli. */
    background: #fff;
    border: solid 2px #273756;
    border-radius: 40px;
    overflow: hidden;
    z-index: 999992;
    transition: width 0.38s cubic-bezier(0.7, 0, 0.3, 1);
}

#header #header-search-btn.show .fullscreen-search {
    width: 333px;                      /* abierto: la pastilla, como en /10-productos */
}

#header #header-search-btn .fullscreen-search #search_widget {
    width: 100%;
    margin: 0;
    transform: none;                   /* el tema lo nacia a scale(0.8) */
}

/* La capa oscura de pantalla completa ya no pinta nada aqui */
#header #header-search-btn #fullscreen-search-backdrop {
    display: none;
}

/* EL CAMPO. Ocupa la pastilla entera y deja hueco a la derecha para la lupa.
   Sin borde ni fondo propios: el contorno lo pone ya la pastilla.
   Hace falta !important porque custom_s_1.css fija el tamano del campo con
   `#search_widget .input-group .form-search-control { font-size:32px
   !important; padding-top:20px !important }`, pensado para el buscador grande
   de la home. */
#header #header-search-btn #search_widget .input-group .form-search-control {
    height: 38px !important;           /* 42 del circulo menos los 2+2 del borde */
    max-height: 38px !important;
    width: 329px;                      /* fijo: si fuera 100% el texto se
                                          reacomodaria durante la animacion */
    padding: 0 46px 0 19px !important;  /* 19 a la izquierda, como en /10-productos */
    /* En /10-productos el campo va a 21 px, pero ahi es el titulo de una
       columna de filtros; en el header desentonaba con los enlaces del menu,
       que son de 15. A 18 mantiene la presencia sin cantar. */
    font-size: 18px !important;
    font-weight: 700;
    line-height: 38px !important;
    color: #273756;
    border: none;
    background: transparent;
    border-radius: 40px;
}

/* La lupa del formulario ocupa el circulo entero, asi queda centrada en el y
   con aire alrededor (antes iba pegada al borde).
   El tamano se iguala al de la lupa del boton (20 px): el tema le pone
   `#header-search-btn .fullscreen-search .search-btn { font-size: 1.5rem }`,
   que son 28,5 px, y como al abrir una releva a la otra en el mismo sitio, la
   lupa parecia crecer de golpe al pulsarla. */
#header #header-search-btn #search_widget .search-btn {
    width: 38px;
    padding: 0;
    color: #273756;
    text-align: center;
}

/* El tamano va en las dos: el `font-size` del boton es el que hereda el icono,
   pero el propio `.fa` se declara aparte en el CSS del tema. */
#header #header-search-btn #search_widget .search-btn,
#header #header-search-btn #search_widget .search-btn .fa {
    font-size: 20px;
    line-height: 23px;
}

/* Abierto, la lupa del boton se apaga y la del formulario -- que ocupa su
   sitio -- pasa a ser la visible: asi no se ven dos lupas superpuestas y la que
   queda es la que envia la busqueda. */
#header #header-search-btn.show .header-search-btn .icon {
    opacity: 0;
}

/* Por debajo de 1380 px la lupa se retira: ahi el hueco entre el menu y los
   lados ya va justo y el buscador estorba mas que ayuda.
   Hay que quitar TAMBIEN la compensacion de la columna del logo: esos 39 px
   existen solo para contrarrestar el ancho de la lupa, asi que sin ella el menu
   se iria 12 px a la derecha. Se vuelve al canal de 15 px de la rejilla. */
@media (max-width: 1379.98px) {
    #header .col-header-right #header-search-btn {
        display: none;
    }

    #header .col-header-left {
        padding-right: 15px;
    }
}

/* ==========================================================================
   La barra de enlaces del header, al eje del contenido
   ==========================================================================

   Los cinco enlaces (CATALOGO, InstanColor, CONTACTO, SOPORTE, CANAL
   DENUNCIAS) iban anclados al borde de la VENTANA, no al del contenido: su
   `.container` es el unico del sitio con `max-width: 100%`, y la columna que
   los agrupa remataba con un `padding-right: 100px` fijo. Resultado medido:
   el ultimo enlace acababa en 1787 con el eje en 1570 a 1887 px de ventana
   (217 px de mas), y en 1274 con el eje en 1313 a 1374 (39 px de menos). Es
   decir, el desajuste cambiaba de signo segun la pantalla.

   Se le da el mismo tratamiento que al contenedor de la ficha: el ancho de
   contenido mas los 15 px de padding que el `.container` ya trae a cada lado.
   Con el `padding-right` de la columna devuelto a esos mismos 15 px, el borde
   derecho del ultimo enlace cae exactamente sobre el eje, y la columna de la
   izquierda queda alineada con el borde izquierdo por el mismo motivo.

   Los enlaces siguen en una sola linea: ocupan 713 px y el hueco disponible es
   mayor en cualquier pantalla donde esta barra se muestra (desaparece por
   debajo de 992). */
.header-nav > .container {
    max-width: calc(var(--ancho-contenido, 1252px) + 30px);
    margin-left: auto;
    margin-right: auto;
}

/* Mismo selector exacto que usa el Theme Editor para poner esos 100 px
   (`#header .header-nav .container .row .right-nav`, con id y cuatro clases):
   con menos peso no hay manera, y como nuestra hoja se carga despues basta con
   igualarlo. */
#header .header-nav .container .row .right-nav {
    padding-right: 15px;
}

/* El fondo azul tiene que seguir yendo a sangre, y lo pintaba la FILA
   (`#header .header-nav .container .row`, con su esquina `0 0 40px 0`), que al
   limitar el contenedor se quedaba encerrada con el contenido y dejaba dos
   franjas blancas a los lados.

   Se pasa el degradado y el redondeo al `<nav>`, que es de ancho completo y por
   tanto los dibuja de borde a borde como antes; la fila se queda solo con la
   tarea de colocar los enlaces. El degradado es el mismo del Theme Editor
   copiado tal cual, para no cambiar el color. */
#header .header-nav {
    background: rgb(39, 55, 86);
    background: linear-gradient(135deg, rgba(39, 55, 86, 1) 0%, rgba(66, 93, 147, 1) 100%);
    border-radius: 0 0 40px 0;
}

#header .header-nav .container .row {
    background: none;
    border-radius: 0;
}

/* ===================================================================
   DESPLEGABLES DEL MENU PRINCIPAL: realineados tras quitar PROYECTOS
   (26/08/2026)
   ===================================================================

   Los paneles del megamenu NO cuelgan de su pestana. El JS del modulo
   (modules/iqitmegamenu/views/js/front.js, funcion open) les anade la clase
   `cbp-notfit` cuando el panel es mas ancho que el hueco que queda a su
   derecha, y esa clase los ancla con `right: 0` al contenedor del header, un
   bloque fijo y centrado de 1292 px. Resultado: el panel sale siempre en el
   mismo sitio, mirando su pestana donde mirando.

   Para que el contenido cayera bajo cada titulo, el Custom CSS del Theme
   Editor los empuja a mano con margenes en pixeles:
       #cbp-hrmenu-tab-3 .menu-element-id-2  MACY        calc(50% - 110px)
       #cbp-hrmenu-tab-4 .menu-element-id-2  ACTUALIDAD  calc(50% - 20px)
       #cbp-hrmenu-tab-5 .menu-element-id-2  PROYECTOS   calc(50% + 131px)

   Al borrar PROYECTOS del menu, el `ul` va centrado (`text-align: center`) y
   las tres pestanas restantes se recolocaron 71 px a la DERECHA (la mitad del
   ancho de la pestana que desaparecio), mientras los paneles se quedaron
   quietos. Medido con Chrome: el desvio contenido-titulo paso de +3 a -68 en
   MACY y de -1 a -72 en ACTUALIDAD.

   Se corrige sumando esos 71 px. Los selectores repiten la misma
   especificidad que los del Theme Editor (un id y una clase): como esta hoja
   se carga despues, con igualarla basta y no hace falta !important.

   La regla de `#cbp-hrmenu-tab-5` quedo huerfana; no se toca desde aqui
   porque no pinta nada (ese tab ya no existe en el HTML), pero conviene
   borrarla del panel cuando se entre a el.

   ------------------------------------------------------------------
   RECALCULADO EL 8/09/2026 AL ANADIR "MAGAZINE" AL MENU
   ------------------------------------------------------------------

   ESTOS VALORES DEPENDEN DEL NUMERO Y ANCHO DE LAS PESTANAS. El `ul` va
   centrado, asi que cada vez que se anade o se quita una entrada del menu, las
   demas se desplazan y ESTE BLOQUE HAY QUE VOLVER A MEDIRLO. Ya ha pasado dos
   veces: en agosto al borrar PROYECTOS (las pestanas se fueron 71 px a la
   derecha) y ahora al anadir MAGAZINE, de 130 px, que las ha movido ~65 px a
   la izquierda.

   Desvios medidos con el menu de 4 pestanas (PRODUCTOS, MACY, ACTUALIDAD,
   MAGAZINE), antes de tocar nada: PRODUCTOS +13, MACY +73, ACTUALIDAD +73.
   Se restan esas cantidades a los valores anteriores.

   COMO SE MIDE: los paneles no se abren con eventos sinteticos; hay que mover
   el raton de verdad (Input.dispatchMouseEvent 'mouseMoved' de CDP) sobre el
   centro de la pestana, esperar ~700 ms y comparar el borde izquierdo de la
   primera columna CON CONTENIDO del panel con el de su pestana.

   Verificado a 1920, 1600, 1440 y 1366: desvio 0 en los tres desplegables.
   Por debajo de 1292 no llega a 0 (a 1280 quedan -57 / -30 / 0) porque ahi el
   `50%` se mide sobre un contenedor que ya se encoge mientras las pestanas se
   mueven a otro ritmo; aun asi mejora respecto a antes del ajuste, donde en
   esos anchos la suma de desvios era casi el doble. */
#cbp-hrmenu-tab-3 .menu-element-id-2 {
    margin-left: calc(50% - 115px);   /* MACY: antes -42, menos los 73 de desvio */
}

#cbp-hrmenu-tab-4 .menu-element-id-2 {
    margin-left: calc(50% - 21px);    /* ACTUALIDAD: antes +52, menos 73 */
}

/* PRODUCTOS es otro caso: su panel es ancho y el contenido se centra con dos
   columnas VACIAS de relleno (col-3 delante y col-3 detras), no con un margen,
   asi que nunca estuvo alineado con su titulo. Solo se le devuelven los mismos
   71 px para dejarlo como estaba antes del borrado (desvio -62 px).

   La col-3 vacia del final se oculta: la fila es un flex de 12 columnas justas
   y, al anadir el margen, esa ultima columna se envolveria a una segunda
   linea. Esta vacia, asi que quitarla no cambia nada visualmente y evita el
   salto de linea. Comprobado: una sola fila y sin scroll horizontal en los
   seis anchos medidos. */
#cbp-hrmenu-tab-9 .menu-element-id-4 {
    margin-left: 58px;   /* antes 71, menos los 13 de desvio (8/09/2026) */
}

#cbp-hrmenu-tab-9 .menu-element-id-7 {
    display: none;
}
/* ===== FIN header Macy ===== */
/* ===== INICIO ancho global Macy - no editar a mano ===== */
/* Ancho del contenido de la ficha de producto.

   Debe coincidir con el del hero de las institucionales (.macy-hero en
   /content/6-macy): 1252 px, que es --ancho-hero. Medido en vivo: el hero
   dibuja 1252 px centrados, o sea de x=78 a x=1330 en un viewport de 1407.

   Se limita el UNICO contenedor de la ficha (#wrapper > .container), que en
   esta plantilla va sin padding lateral: asi el contenido cae justo en los
   bordes del contenedor y mide esos 1252 px exactos. Las filas de Bootstrap de
   dentro llevan su margen de -15 px y sus columnas lo devuelven, de modo que la
   caja de la foto y la columna de texto quedan en el mismo eje que el hero.

   Efecto secundario buscado: desaparece el desbordamiento horizontal de 15 px
   que tenia la ficha, porque la fila ya no rebasa el ancho de la ventana.

   Solo afecta a las fichas (body#product); el resto del sitio sigue igual. */
body#product #wrapper > .container {
    max-width: 1252px;
}

/* La calculadora de pintura (modulo macy_calculator) trae un
   @media (max-width: 1285px) que pone los dos campos al 50% y baja el boton
   CALCULAR a su propia linea. Ese media query mide la VENTANA, no el hueco:
   con la ficha a 1252 px la columna derecha se queda en 718 px, pero si la
   ventana es mas ancha de 1285 no se activa y el boton se sale 57 px de la caja
   (por su margin-left de 3rem). Como el contenedor ya no crece por encima de
   1252, esa columna mide 718 px en cualquier pantalla grande: se aplican ahi
   las mismas reglas del modulo. Por debajo de 1286 no se toca nada: manda el
   modulo, que ya tiene su propio responsive hasta movil. */
@media (min-width: 1286px) {
    body#product .macycalc-inputs {
        flex-wrap: wrap;
        column-gap: 1.5rem;
        row-gap: 1rem;
    }

    body#product .macycalc-field {
        flex: 1 1 calc(50% - .75rem);
    }

    body#product .macycalc-calc-btn {
        order: 99;
        flex: 0 0 auto;
        margin-top: .5rem;
        margin-left: 0;
    }
}

/* Mismo hueco entre "Descargas" y la calculadora que entre las dos pestanas.

   El acordeon de la ficha (#productdaas-accordion: "Caracteristicas tecnicas" y
   "Descargas") llega con la clase .mb-5 del tema, que son 3rem = 57 px con la
   raiz a 19 px. La calculadora va inmediatamente despues, asi que ese es el
   hueco que la separa de Descargas. Entre las dos pestanas, en cambio, solo hay
   20 px: el margin-bottom de cada .card. Medido en vivo en la ficha 42.

   Igualamos el de abajo a 20 px. Hace falta !important porque .mb-5 del tema lo
   lleva. El margin-bottom de 20 px del ultimo .card se colapsa con este, de modo
   que el hueco final son 20 px, no 40. */
body#product .product-information > .iqit-accordion {
    margin-bottom: 20px !important;
}

/* ==========================================================================
   Margenes laterales de la ficha en movil y tablet
   ==========================================================================

   Medido a 360, 390, 414 y 500 px: el contenido de la ficha arranca en x=0,
   pegado al borde, y ademas la pagina se desborda 15 px a la derecha
   (scrollWidth 405 con 390 de ventana). Las dos cosas salen del mismo sitio:

   `.row.product-info-row` lleva `margin: 0 -15px` -- el canal de Bootstrap --
   pero su contenedor (`#main-product-wrapper`) NO tiene los 15 px de padding
   que lo compensan. Asi que la fila va de -15 a ventana+15: por la izquierda
   queda cortada y por la derecha genera scroll horizontal. Sus columnas
   devuelven esos 15 px con su padding, y por eso el contenido acaba en x=0.

   Encima de ese 0, cada bloque se salva con su propio padding: el titulo, las
   migas, el precio, los acordeones y la calculadora traen 20 px, pero los
   pictogramas no traen ninguno y quedaban pegados al borde. El mismo patron se
   repite dentro de "Colores disponibles", donde un `<ul>` con margen -15 saca
   las etiquetas a x=5.

   Se corrige en el origen y no bloque a bloque: en movil se anulan el margen
   negativo de la fila y el padding de sus columnas a la vez, de modo que el
   contenido sigue naciendo en x=0 (nada se mueve de sitio) pero la fila ya no
   rebasa la ventana. Con eso, los 20 px de cada bloque siguen valiendo y solo
   hay que darselos a los dos que no los tenian.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    /* El canal de la fila y el de sus hijos se anulan juntos: por separado
       moverian todo el contenido 15 px.

       Son las DOS filas del cuerpo, no solo `product-info-row`: la de
       "Colores disponibles" es un `.row` hermano con el mismo margen negativo,
       y su hijo lo devuelve con `margin: 0 15px` en vez de con padding. De ahi
       que se neutralicen las dos cosas en los hijos directos. */
    body#product #main-product-wrapper > .row {
        margin-left: 0;
        margin-right: 0;
    }

    body#product #main-product-wrapper > .row > * {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    /* Los pictogramas son el unico bloque del cuerpo sin padding propio: se les
       dan los mismos 20 px que al titulo, el precio y los acordeones. */
    body#product .product-features {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* "Colores disponibles": el <ul> de las bases lleva margen -15 dentro de un
       contenedor que ya aporta los 20, y sacaba las etiquetas a x=5. */
    body#product .product-variants-item > ul {
        margin-left: 0;
        margin-right: 0;
    }
}

/* De 768 px en adelante las dos columnas van lado a lado (`col-md-*` arranca
   ahi), asi que NO se les puede quitar el padding: es lo unico que separa la
   foto del texto. Basta con quitar el margen negativo de la fila, que es lo que
   desbordaba; el contenido se mete 15 px, que es justo el aire que le faltaba.

   El tope son 1282 px porque a partir de ahi el contenedor de la ficha ya esta
   limitado a 1252 y deja 15 px libres a cada lado, que es justo lo que la fila
   necesita para no rebasar la ventana: ahi el margen negativo vuelve a ser
   correcto y hay que dejarlo, o el contenido se meteria 15 px y la ficha
   dejaria de cuadrar con el hero. */
@media (min-width: 768px) and (max-width: 1281.98px) {
    body#product #main-product-wrapper > .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
   "Colores disponibles": rejilla al ancho exacto del contenido
   ==========================================================================

   El bloque ocupaba 1084 px de los 1252 (su ancho lo daba el parrafo de aviso,
   no la rejilla) y las pastillas eran cajas flotantes de 140 px con 10 px de
   margen: 160 de paso, seis por fila y 124 px muertos a la derecha.

   Ahora el <ul> es una **rejilla**: `repeat(auto-fill, minmax(140px, 1fr))` con
   26 px de separacion. Las columnas se estiran para repartir el ancho **exacto**
   del contenido, de modo que la primera pastilla arranca en el borde izquierdo y
   la ultima de cada fila termina justo en el derecho, sin sobrante. A 1252 salen
   **siete columnas de 156 px** (7 x 156 + 6 x 26 = 1252) y en un movil de 375
   salen dos, sin necesidad de media queries: el `auto-fill` recalcula solo.

   Cuidado con el HTML: el titulo ("Colores disponibles") y el parrafo de aviso
   viven DENTRO del propio <ul>, no fuera, asi que al hacerlo rejilla se
   convierten en celdas. Por eso ocupan la fila entera con `grid-column: 1/-1`
   y los dos <br> sueltos se ocultan, o dejarian dos filas vacias.
   -------------------------------------------------------------------------- */

/* El bloque ocupaba solo lo que su parrafo mas largo; que llegue al borde. */
body#product .product-actions {
    width: 100%;
}

body#product .product-variants-item {
    display: block;
    width: auto;
    margin-right: 0;
}

body#product .product-variants-item > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 26px;
    /* el <ul> traia el canal de Bootstrap (-15 px) y arrancaba fuera del eje */
    margin-left: 0;
    margin-right: 0;
}

/* Titulo y parrafo: fila completa, que no entren en el reparto de columnas. */
body#product .product-variants-item > ul > span {
    grid-column: 1 / -1;
}

body#product .product-variants-item > ul > br {
    display: none;
}

/* Las pastillas dejan de flotar y de medir 140 fijos: cada una llena su celda.
   El `!important` del margen es obligado — el Theme Editor declara
   `.product-variants-item ul li { margin: 0 10px 0!important }` — y con la
   rejilla la separacion la pone `gap`, no los margenes. */
body#product .product-variants-item ul li {
    margin: 0 !important;
    width: auto;
    float: none;
}

body#product .product-variants-item .input-container {
    width: auto;
    height: auto;
    vertical-align: top;
}

/* La muestra de color llena el ancho de su celda y guarda la proporcion
   original (140x88), asi el redondeo `40px 0` de la marca no se deforma. */
body#product .product-variants-item .color {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 140 / 88;
}

/* El nombre de la base: 26 px de interlinea para un texto de una linea lo
   separaban de su pastilla. Va en `.attribute-name`, declarado por el Theme
   Editor con cuatro clases: se le gana con `body#product` delante. */
body#product .product-variants-item ul li .attribute-name {
    display: block;
    margin-top: 8px;
    line-height: 1.25;
}

/* El <li> trae un <br> entre la muestra y el nombre. Con los dos convertidos en
   bloque ese salto sobra y solo añade una linea vacia de separacion. */
body#product .product-variants-item ul li br {
    display: none;
}

/* Tope al estirado. Con columnas `1fr`, cuando solo caben una o dos la celda se
   reparte todo el ancho y la muestra se iba a 305 px en un movil de 345 y a 210
   en uno de 485, desproporcionada frente a los 156 de escritorio. Con el tope se
   queda en su tamano y la celda sigue llenando el ancho: la rejilla no cambia,
   solo deja de estirarse el color. En escritorio no actua (156 < 190). */
body#product .product-variants-item .color {
    max-width: 190px;
}
/* ===== FIN ancho global Macy ===== */

/* Boton "Ver todas las novedades" de la home a una sola linea (28/08/2026, Novospain) */
.elementor-element-vdb6neg .elementor-heading-title,
.elementor-element-vdb6neg .elementor-heading-title a{white-space:nowrap;}

/* ===== INICIO categoria Macy - no editar a mano ===== */
/* ==========================================================================
   Catalogo de productos: ancho y reticula del diseno
   ==========================================================================

   Afecta a las DOS pantallas de listado, que son plantillas distintas:
     - categorias   body#category                      (con columna de filtros)
     - buscador     body#module-iqitsearch-searchiqit  (a ancho completo)

   Diseno aprobado: Figma "Pinturas Macy Desarrollo", frame "Productos"
   (nodo 5071-39617), lienzo de 1440 px. Su reticula:

       contenido      x =  94 -> 1346    (1252 px)
       filtros        x =  94 ->  389    ( 295 px)
       hueco                             (  24 px)
       3 tarjetas     x = 413, 732, 1051 ( 295 px cada una, 24 de separacion)

   y cierra exacto:   295 + 24 + (295*3 + 24*2) = 1252

   El buscador no tiene columna de filtros, asi que en ese hueco cabe una cuarta
   tarjeta del MISMO ancho y vuelve a cerrar exacto:

                      295*4 + 24*3 = 1252

   de modo que la tarjeta mide 295 px en las dos pantallas.

   El 1252 no es un numero elegido: es el ancho util del contenedor del header
   (#desktop-header-container, 1292 menos sus 20 px de padding) y el mismo
   --ancho-hero de las institucionales, asi que el catalogo cae en el mismo eje
   que el menu y que la ficha de producto. Verificado con desvio 0 a 1920, 1600,
   1440 y 1366 px de ventana.

   Va en su PROPIO bloque de custom.css (marcas "categoria Macy"), separado del
   de la ficha, que vive en macy-ancho.css: asi se puede retirar uno sin tocar
   el otro con  python subir-ftp.py quitar-css-categoria
   ========================================================================== */

/* ---- 1. Ancho del contenido, en las dos pantallas ---- */
body#category #wrapper > .container,
body#module-iqitsearch-searchiqit #wrapper > .container {
  max-width: 1252px;
}

/* ---- 2. CATEGORIA: dos columnas 295 | 24 | resto ----
   Solo de 992 para arriba, que es donde el tema pone las dos columnas.       */
@media (min-width: 992px) {

  /* La fila deja de usar los canales de Bootstrap y separa con gap. */
  body#category #inner-wrapper > .row {
    margin-left: 0;
    margin-right: 0;
    gap: 0 24px;
  }

  body#category #left-column {
    flex: 0 0 295px;
    max-width: 295px;
    padding-left: 0;
    padding-right: 0;
  }

  /* flex-basis 0 (no `auto`): la fila lleva flex-wrap:wrap del tema y con base
     automatica el contenido empujaba esta columna a una segunda linea, donde se
     quedaba con los 1252 enteros y las tarjetas salian de 401 px. Con base 0
     cabe siempre al lado de los filtros y crece hasta llenar el resto.
     min-width:0 evita que el contenido vuelva a inflarla. */
  body#category #content-wrapper {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* Rejilla de 3 columnas: (933 - 48) / 3 = 295, el ancho del diseno. */
  body#category #js-product-list .products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* ---- 3. BUSCADOR: rejilla de 4 columnas ----

   No hay columna de filtros (el body lleva `layout-full-width` y no existe
   #left-column), asi que las cuatro tarjetas se reparten los 1252 enteros:
   (1252 - 72) / 4 = 295, la misma tarjeta que en las categorias.

   El corte sigue siendo 992 porque es donde el tema pasa a `col-lg-3`; por
   debajo manda el tema, que ya baja a 3 y luego a 1 por fila.                */
@media (min-width: 992px) {
  body#module-iqitsearch-searchiqit #js-product-list .products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* ---- 4. Lo comun a las dos rejillas ---- */
@media (min-width: 992px) {

  body#category #js-product-list .products > .js-product-miniature-wrapper,
  body#module-iqitsearch-searchiqit #js-product-list .products > .js-product-miniature-wrapper {
    flex: none;
    width: auto;
    max-width: none;
  }

  /* El hueco de 30 px entre tarjetas salia de aqui (margin: 0 15px), y ademas
     hundia la primera y la ultima 15 px dentro del eje. Ahora separa el gap. */
  body#category #js-product-list .products .product-miniature,
  body#module-iqitsearch-searchiqit #js-product-list .products .product-miniature {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
  }
}

/* ---- 5. Desbordamiento horizontal de 15 px por debajo de 992 (categoria) ----

   La fila lleva el canal de Bootstrap (margin: 0 -15px) dentro de un
   #inner-wrapper que NO tiene el padding que lo compensa, asi que la columna
   izquierda nace en x=-15 y el contenido acaba en ventana+15. Es un defecto
   previo, no lo trae el ancho nuevo, pero de 992 para arriba ya lo cura la
   reticula (la fila deja de tener margen) y aqui se cierra el resto del rango.
   Las columnas conservan su padding de 15, que es el aire lateral en movil.

   El buscador no lo padece: su #content-wrapper no es una columna de Bootstrap
   y no cuelga de ninguna fila con margen negativo.                           */
@media (max-width: 991.98px) {
  body#category #inner-wrapper > .row {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---- 6. El boton "ver producto" se montaba sobre el texto ----

   El <a class="elementor-button"> de cada tarjeta trae estilo EN LINEA en el
   HTML: `margin-top:30px; position:absolute; bottom:40px`. Al ir en absolute
   queda anclado a 40 px del fondo del <article>, que a su vez tiene altura fija
   (`height: calc(100% - 60px)` en .products-grid .product-miniature-default).
   El texto, en cambio, fluye desde arriba: en cuanto la tarjeta se estrecha y
   el titulo o la descripcion ganan una linea, el texto llega hasta el boton y
   se solapan. Medido a 295 px de tarjeta: la descripcion acaba en y=712 y el
   boton ocupa de 682 a 722, o sea 30 px montados encima.

   No es un defecto que traiga el ancho nuevo -- el mismo solape aparece en
   cuanto la tarjeta baja de ~320 px --, pero la reticula lo destapa, asi que se
   arregla aqui.

   La cura es devolver el boton al flujo. `.product-description` ya es un flex
   en columna (`flex-flow: column` del tema), asi que con `margin-top: auto` el
   boton se sigue yendo al fondo de la tarjeta -- que es lo que buscaba el
   absolute -- pero ahora EMPUJA en lugar de superponerse, y la fila del grid
   crece lo que haga falta. Los 30 px de separacion minima los sigue poniendo el
   `margin-bottom:30px` en linea de la descripcion.

   OJO -- `position: relative`, NUNCA `static`: la flecha del boton es un
   pseudo-elemento (`::before` con url(/img/arrow_outward.svg)) en position
   absolute a `top:8px; left:17px`. Con el boton en `static` ese ::before pierde
   su contenedor y se ancla al <article>, que es el siguiente ancestro
   posicionado: la flecha se va a la esquina superior izquierda de la TARJETA.
   Se detecta mirando el `right`/`bottom` computados del ::before: con `static`
   valian 258 y 627,5 px, que son justo las medidas del article (295x656), y no
   las del boton. `relative` no saca del flujo -- coloca igual que `static` --
   pero devuelve el anclaje, y ademas es lo que ya declara el tema.

   Sin media query: el solape puede darse en cualquier ancho.

   Hace falta !important: el estilo en linea solo se gana asi.                */
body#category #js-product-list .product-miniature .elementor-button,
body#module-iqitsearch-searchiqit #js-product-list .product-miniature .elementor-button {
  position: relative !important;
  bottom: auto !important;
  margin-top: auto !important;
  margin-bottom: 40px !important;  /* el aire que antes daba `bottom: 40px` */
}

/* ---- 7. El texto "Ver producto" iba 2,5 px alto dentro de la pastilla ----

   Defecto PREVIO, no lo trae el ancho nuevo: medido igual en el original y con
   la reticula (desvio -2,5 px en los dos), y tambien en el buscador.

   Causa: `.elementor-button` es flex con `align-items:center`, y lo que centra
   es su unico hijo, `.elementor-button-content-wrapper`, que va en `display:
   block`. Dentro lleva `.elementor-button-text` como `inline-block` con
   `vertical-align: baseline`, asi que el wrapper genera una CAJA DE LINEA: a la
   altura del texto (23 px) se le suma el descender del "strut" de la linea, y
   el wrapper acaba midiendo 28. Esos 5 px sobrantes se reparten todos POR
   DEBAJO del texto, de modo que el wrapper si queda centrado (desvio 0) pero el
   texto dentro de el no: se va 2,5 px hacia arriba.

   Cura: quitar la caja de linea. Con el wrapper en flex no hay strut, mide los
   23 px del texto y el `align-items:center` del boton lo centra exacto.
   Verificado: desvio 0 en reposo y en hover, y la animacion de ancho del boton
   (60 -> 179,8 px) sigue igual.

   Alternativa descartada: `vertical-align: middle` en el texto deja +1,2 px.  */
body#category #js-product-list .product-miniature .elementor-button-content-wrapper,
body#module-iqitsearch-searchiqit #js-product-list .product-miniature .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
}
/* ===== FIN categoria Macy ===== */

/* ===== INICIO blog Macy - no editar a mano ===== */
/* ==========================================================================
   Blog (modulo ph_simpleblog): ancho del contenido
   ==========================================================================

   Mismo ancho que el resto del sitio -- 1252 px, el ancho util del contenedor
   del header (#desktop-header-container, 1292 menos sus 20 px de padding) --,
   de modo que el blog cae en el mismo eje que el menu, la ficha de producto y
   el catalogo. Ver [[project_macy_catalogo_ancho_reticula]].

   Son TRES plantillas del modulo, las tres con `layout-full-width` y sin
   columna lateral:
     - listado general   body#module-ph_simpleblog-list       /blog
     - categoria         body#module-ph_simpleblog-category   /blog/noticias ...
     - articulo          body#module-ph_simpleblog-single     /blog/<cat>/<slug>

   El contenedor es el mismo en las tres (`#wrapper > .container`, que es
   #inner-wrapper) y lo trae el Theme Editor a `max-width: 100%`.

   NO se tocan los botones: a diferencia de las tarjetas de producto, los del
   blog ya vienen bien (`position: relative`, sin el `bottom:40px` en linea, la
   flecha dentro y el texto con desvio 0). Solo es cuestion de ancho.

   Bloque propio en custom.css (marcas "blog Macy"), aparte del catalogo:
       python subir-ftp.py css-blog          # ponerlo
       python subir-ftp.py quitar-css-blog   # retirarlo
   ========================================================================== */

/* ---- 1. Ancho del contenido en las tres plantillas ---- */
body#module-ph_simpleblog-list #wrapper > .container,
body#module-ph_simpleblog-category #wrapper > .container,
body#module-ph_simpleblog-single #wrapper > .container {
  max-width: 1252px;
}

/* ---- 2. Desbordamiento horizontal de 15 px en listado y categoria ----

   La rejilla de articulos es una fila de Bootstrap con el canal habitual
   (`margin: 0 -15px`) dentro de un `.simpleblog__listing` que NO tiene el
   padding que lo compensa, asi que la fila iba de x=-15 a ventana+15: el primer
   articulo quedaba cortado por la izquierda y la pagina ganaba 15 px de scroll
   horizontal (scrollWidth 1455 con 1440 de ventana). Defecto previo, el mismo
   que ya se corrigio en la ficha y en el catalogo.

   De 1282 px para arriba lo cura solo el ancho nuevo: con el contenedor en 1252
   la fila va de 79 a 1361, que cabe de sobra, y los articulos -- que devuelven
   los 15 px con su propio padding -- caen exactamente en 94 -> 1346, el eje del
   diseno. Por debajo de 1282 el contenedor ya no llega a 1252 y la fila vuelve
   a salirse, asi que ahi se anula el canal. Los articulos conservan su padding
   de 15, que pasa a ser el aire lateral.

   1282 = 1252 + los 30 px del canal.

   El articulo suelto (single) no lleva esta fila y no lo necesita.           */
@media (max-width: 1281.98px) {
  body#module-ph_simpleblog-list .simpleblog__listing > .row,
  body#module-ph_simpleblog-category .simpleblog__listing > .row {
    margin-left: 0;
    margin-right: 0;
  }
}
/* ===== FIN blog Macy ===== */

/* ===== INICIO paginas sueltas Macy - no editar a mano ===== */
/* ==========================================================================
   Paginas sueltas del tema: ancho del contenido
   ==========================================================================

   Mismo ancho que el resto del sitio -- 1252 px, el ancho util del contenedor
   del header (#desktop-header-container, 1292 menos sus 20 px de padding) --,
   para que caigan en el mismo eje que el menu, la ficha, el catalogo y el blog.
   Ver [[project_macy_catalogo_ancho_reticula]].

   De momento:
     - contacto             body#contact     /contactenos
     - politica de privacidad  body.cms-id-2  /content/2-politica-de-privacidad
     - politica de cookies     body.cms-id-3  /content/3-politica-de-cookies

   OJO CON LAS PAGINAS CMS: las institucionales (/content/6-macy, 7, 8 y 9) son
   TAMBIEN `body#cms` y van a ancho completo A PROPOSITO -- llevan sus propios
   contenedores (--ancho-hero 1252, --ancho-contenido 1040) y bandas a sangre
   que dejarian de llegar a los bordes si se les limita el `.container`. Por eso
   NO se puede usar `body#cms` a secas: hay que ir por la clase `cms-id-N` que
   PrestaShop pone en el body para cada pagina. Otra senal para distinguirlas:
   las institucionales tienen un `.macy-page` dentro y estas dos no.

   Bloque propio en custom.css (marcas "paginas Macy"):
       python subir-ftp.py css-paginas          # ponerlo
       python subir-ftp.py quitar-css-paginas   # retirarlo

   Para anadir otra pagina del tema basta con sumar su body#id a los dos
   selectores de abajo, comprobando antes si su fila de primer nivel cuelga de
   un contenedor sin padding (el defecto del punto 2).
   ========================================================================== */

/* ---- 1. Ancho del contenido ---- */
body#contact #wrapper > .container,
body.cms-id-2 #wrapper > .container,
body.cms-id-3 #wrapper > .container {
  max-width: 1252px;
}

/* ---- 2. Desbordamiento horizontal de 15 px ----

   La pagina montaba 10 filas fuera de la ventana, pero todas colgaban de una:
   `#content.page-content > .row` lleva el canal de Bootstrap (`margin: 0 -15px`)
   dentro de un `#content` SIN padding que lo compense, asi que iba de x=-15 a
   ventana+15 y arrastraba a las filas anidadas de dentro (`.contact-rich > .row`
   y los `.form-group.row` del formulario). La pagina ganaba 15 px de scroll
   horizontal: scrollWidth 1455 con 1440 de ventana.

   Defecto previo del tema, el mismo de la ficha, el catalogo y el blog.

   De 1282 px para arriba lo cura solo el ancho nuevo: con el contenedor en 1252
   la fila va de 79 a 1361, que cabe de sobra, y sus columnas -- que devuelven
   los 15 px con su propio padding -- dejan el contenido en 94 -> 1346, el eje
   del diseno. Por debajo de 1282 el contenedor ya no llega a 1252 y la fila
   vuelve a salirse, asi que ahi se anula el canal; las columnas conservan su
   padding de 15, que pasa a ser el aire lateral.

   1282 = 1252 + los 30 px del canal.

   Se tocan solo los DOS contenedores que no compensan el canal, no todas las
   filas: las anidadas cuelgan de columnas que ya traen su padding, y ahi el
   margen negativo es correcto y hay que dejarlo.

   Como localizarlos sin ir a ojo: recorrer los `.row` y quedarse con aquellos
   cuyo padre no sea una `.col-*` y cuyo `padding-left` no llegue a compensar el
   `margin-left` negativo de la fila. En esta pagina salen dos que desbordan de
   verdad, `#content.page-content` y `.direcciones`; el resto de filas huerfanas
   estan dentro del menu o del pie y no llegan a salirse.                     */
@media (max-width: 1281.98px) {
  body#contact #content.page-content > .row,
  body#contact .direcciones > .row {
    margin-left: 0;
    margin-right: 0;
  }
}
/* ===== FIN paginas sueltas Macy ===== */
/* ===== INICIO footer Macy - no editar a mano ===== */
/* ==========================================================================
   Footer: ancho del contenido y bloque de redes sociales
   ==========================================================================

   Dos cosas en un mismo bloque, porque van juntas: el pie al ancho del sitio y,
   dentro de el, el bloque "Siguenos en" reorganizado (solo iconos).

   El footer es GLOBAL, sale en todas las paginas: este bloque, a diferencia de
   los del catalogo, el blog y contacto, tambien afecta a la home y a las
   institucionales, cuyo cuerpo sigue a ancho completo a proposito.

       python subir-ftp.py css-footer          # ponerlo
       python subir-ftp.py quitar-css-footer   # retirarlo

   Ver [[project_macy_catalogo_ancho_reticula]].
   ========================================================================== */

/* ==========================================================================
   1. ANCHO DEL CONTENIDO DEL PIE
   ==========================================================================

   Mismo eje que el resto del sitio: de 94 a 1346 sobre un lienzo de 1440, o sea
   1252 px. Coincide con el diseno: en el Figma (nodo 5071-39617) el bloque del
   pie -- "Group 107", el de la newsletter y "Siguenos en" -- esta en x=94 con
   width=1252, y el menu del pie y el copyright arrancan tambien en x=94.

   Como esta montado (medido a 1440):

     footer#footer            0 -> 1440   padding lateral 20, fondo gris
       #footer-container-main 20 -> 1420   max-width 1600
         .container           20 -> 1420   max-width 100%, padding 15
       #footer-copyrights     20 -> 1420
         .container           20 -> 1420   max-width 100%, padding 15
           .copys-container   35 -> 1405
             .row.copys       20 -> 1420   margin 0 -15

   Los dos `.container` son los que mandan y los dos van a `max-width: 100%` (lo
   pone el Theme Editor), por eso el contenido del pie acababa en 35 -> 1405 en
   vez de 94 -> 1346: se iba 59 px por lado a 1440, y 159 px a 1920.

   1282 = los 1252 de contenido + los 15 px de padding que el `.container` ya
   trae a cada lado. Es el mismo calculo de la barra de enlaces del header (ver
   macy-header.css). Se centran dentro de #footer-container-main, que a su vez
   esta centrado en la ventana.

   El padding de 20 px del <footer> se deja como esta: es quien pinta el fondo
   gris a sangre. Verificado que el fondo sigue llegando a los bordes.

   Verificado con desvio 0 contra el header a 1920, 1640, 1440 y 1366. Por
   debajo de 1282 la regla no actua y el pie mantiene sus 35 px de margen frente
   a los 20 del menu: son 15 px de diferencia que ya existian.
   ========================================================================== */

body #footer .container {
  max-width: 1282px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   2. BLOQUE "SIGUENOS EN": ICONOS PEQUENOS + NOMBRES
   ==========================================================================

   EL PROBLEMA que se corrige (medido a 1440 con el ancho de arriba puesto):

       icono -> SU nombre         15 / 8 / 9 / 9 px
       nombre -> icono SIGUIENTE   8 / 9 / 8 px

   No era falta de sitio: el hueco ENTRE redes era igual o menor que el que
   habia dentro de cada red, asi que por proximidad cada nombre se leia como del
   icono de su derecha ("Instagram f", "Facebook >"). El ancho nuevo lo agravaba:
   esos huecos eran de 12 px y pasaban a 8.

   PRIMERO se probo dejar SOLO LOS ICONOS, como el Figma (que los lleva de
   20x20 y sin nombre): 4 iconos con 55 / 49 / 49 px de aire. Se publico asi el
   8/09/2026 y el mismo dia se decidio RECUPERAR LOS NOMBRES, encogiendo el
   icono de 36 a 20 px para que quepa todo con holgura. Es lo que hay ahora.

   COMO ESTA MONTADO: 8 columnas de Elementor alternadas (impar = icono, par =
   nombre) dentro de la seccion .elementor-element-8qo6qtd. Cada red son DOS
   enlaces independientes, no uno.

   TRAMPAS, todas verificadas:

   - NO usar `.elementor-row:has(a[href*=instagram])`: hay CUATRO filas en el pie
     que contienen un enlace a Instagram (la buena, la seccion que la envuelve y
     dos copias ocultas). Al aplicar reglas a las columnas pares de la fila padre
     desaparecia el bloque entero (la fila quedaba en 0x0).
   - NO tocar `width` ni `flex-wrap` de las columnas: Elementor reparte la fila
     con anchos calculados y al ponerlos en `auto` la fila se iba de x=762 a
     x=136.
   - Por eso se usan los ids unicos de Elementor. Si alguien rehace ese widget
     desde el editor, esos ids CAMBIAN y hay que volver a sacarlos (se leen con
     la clase `elementor-element-XXXXXXX` de cada columna).

   ACCESIBILIDAD: al estar los nombres visibles ya no hay problema. Si algun dia
   se vuelve a la version de solo iconos, OJO: los enlaces de icono no llevan
   `aria-label`, asi que ocultar el nombre con `display:none` los dejaria
   anunciados como "enlace" a secas. Habria que ocultarlo con `position:absolute`
   + `clip-path: inset(50%)`, que lo saca del flujo sin quitarlo del documento.
   ========================================================================== */

/* Los nombres se quedan VISIBLES. El aire se consigue encogiendo el icono.

   La fila reparte siempre el mismo ancho (542 px de los 546 utiles del
   recuadro), asi que achicar el icono no encoge nada: lo que hace es liberar
   sitio DENTRO de su columna, que es lo que permite separar bien los pares.

   Medido a 1440 con las cuatro redes y sus nombres, todo en UNA sola fila:

       icono   dentro del par   entre redes   ratio
        36 px      30 / 0            0         mal (el par no se distingue)
        24 px     5 - 10            30         2,9
        20 px     7 - 12            32         2,6   <- el elegido
        16 px     9 - 14            34         2,4

   Se eligen 20 px porque es el tamano que marca el Figma (Frame 417 del nodo
   5071-39617: iconos de 20x20) y reduce un 44 % respecto a los 36 de partida,
   dejando el hueco entre redes ~2,6 veces mayor que el hueco dentro del par,
   que es lo que hace que cada nombre se lea junto a SU icono.

   Nota: no se toca `width` ni `flex-wrap` de las columnas -- se probo y la fila
   entera se descolocaba (ver el aviso de mas arriba). Solo font-size y
   margenes. */

/* El icono, al tamano del diseno.

   `vertical-align: bottom`, y NO `middle`: al encogerlo, el icono se queda
   descolgado respecto a su nombre y hay que recolocarlo, pero `middle` lo
   EMPEORA. Medida de la desalineacion entre el centro del icono y el de su
   nombre, con el icono ya a 20 px:

       middle .................. 4,2 px
       top ..................... 5,0 px
       baseline / sin declarar . 1,0 px
       bottom .................. 0,0 px   <- el elegido

   Es contraintuitivo (`middle` suena a lo correcto), pero la caja de linea de
   estos enlaces no tiene la altura del texto, asi que el punto medio no cae
   donde uno espera. */
#footer .elementor-element-juip6ac i,
#footer .elementor-element-hmphkr9 i,
#footer .elementor-element-qyhqgqh i,
#footer .elementor-element-6m1ak6s i {
  font-size: 20px;
  vertical-align: bottom;
}

/* El icono, pegado a SU nombre: sin margen a la derecha. */
#footer .elementor-element-juip6ac,
#footer .elementor-element-hmphkr9,
#footer .elementor-element-qyhqgqh,
#footer .elementor-element-6m1ak6s {
  margin-right: 0;
}

/* El nombre, a 18 px (venia a 20).

   Al encogerlo hay que SUBIR la separacion entre redes, no dejarla igual: las
   columnas conservan su ancho, asi que el texto mas pequeno deja mas hueco
   dentro de su propio par y la agrupacion se afloja. Medido a 1440 con el texto
   ya a 18:

       entre redes 24 -> dentro 12-17, entre 35-36, ratio 2,1
       entre redes 32 -> dentro  9-14, entre 40-41, ratio 2,9   <- el elegido

   Con 32 se conserva la misma jerarquia que habia con el texto a 20. */
#footer .elementor-element-yncxau0 .redesfooter,
#footer .elementor-element-4ho9f3y .redesfooter,
#footer .elementor-element-vk2j762 .redesfooter,
#footer .elementor-element-kh3hsta .redesfooter {
  font-size: 18px;
}

/* Y el aire, ENTRE redes: a la derecha de cada nombre menos el ultimo. */
#footer .elementor-element-yncxau0,
#footer .elementor-element-4ho9f3y,
#footer .elementor-element-vk2j762 {
  margin-right: 32px;
}

/* --------------------------------------------------------------------------
   ALTERNATIVAS que se descartaron el 8/09/2026, por si se quiere volver atras
   sin rehacer el analisis. Las tres se midieron con el ancho del pie puesto.

   B - las 4 redes con nombre, agrupadas, texto a 16 px
       (dentro del par 4-9 px, entre redes 34 px)

         #footer .elementor-element-yncxau0,
         #footer .elementor-element-4ho9f3y,
         #footer .elementor-element-vk2j762 { margin-right: 30px; }
         #footer .redesfooter { font-size: 16px; }

   C - fuera LinkedIn, 3 redes con nombre a 20 px
       (dentro del par 9-16 px, entre redes 50 px)

         #footer .elementor-element-6m1ak6s,
         #footer .elementor-element-kh3hsta { display: none; }
         #footer .elementor-element-yncxau0,
         #footer .elementor-element-4ho9f3y { margin-right: 40px; }
   -------------------------------------------------------------------------- */

/* NOTA - lo que este bloque NO toca, a proposito:

   `.copys-container` tiene `max-height: 66px` con un contenido de 95 px, de
   modo que el copyright se sale 85 px por debajo del <footer> y cae sobre el
   blanco del body. Esa franja blanca del final es ACCIDENTAL, nace de ese
   desbordamiento, pero quitar el max-height la convierte en gris y cambia el
   aspecto del pie. Esta documentado en [[project_macy_footer_desborde]] y no se
   toca sin avisar al cliente. Es un problema vertical, independiente del ancho.
*/
/* ===== FIN footer Macy ===== */
/* ===== INICIO banner movil Macy - no editar a mano ===== */
/* ==========================================================================
   Home, banner superior en movil
   ==========================================================================

   EL PROBLEMA (medido a 390 y a 768 px): el banner abria con 345 px de blanco
   en los que solo flotaba el boton "VER PRODUCTO", y el video aparecia DEBAJO.
   El boton quedaba huerfano, separado de lo que anuncia.

   Era un defecto PREVIO, no lo trajo ninguno de los bloques del 8/09/2026: el
   unico que afecta a la home es el del pie, y solo toca `#footer .container`.

   TRES CAUSAS SUMADAS, todas en el slide del swiper (.dt_swiper):

   1. El orden del DOM es [image-content, text-content], pero el slide lleva
      `flex-direction: column-reverse` en movil, que lo invierte y sacaba el
      TEXTO ARRIBA y el video debajo.
   2. `.text-content` trae `padding: 60px 20px 160px` -> 220 px de aire vertical
      para un boton de 44.
   3. El <h2> y el <p> de ese slide estan VACIOS (el mensaje va quemado dentro
      del video) pero seguian reservando 55 y 20 px por su padding.

   En escritorio no se nota porque ahi `.text-content` va en `position:absolute`
   superpuesto al video; en movil pasaba a `relative` y caia en el flujo.

   SOLUCION APLICADA: la misma que en escritorio -- el boton superpuesto sobre
   el video, apoyado en su borde inferior. El banner pasa de 1038 a 693 px de
   alto (justo el video) y el blanco de 345 a 0.

   DOS TRAMPAS al escribirlo, las dos verificadas:
   - El tema declara `top: 0` en `.text-content` y GANA a un `bottom: 0` suelto:
     hay que estirarlo con los cuatro lados.
   - Con `display: block` el contenido fluye desde arriba y el boton salia
     SOBRE el video, en la parte superior. Hay que empujarlo al fondo con flex
     (`justify-content: flex-end`).

   Alternativa descartada (V1: video arriba y boton pegado debajo, sobre fondo
   blanco) al final del archivo.

       python subir-ftp.py css-banner          # ponerlo
       python subir-ftp.py quitar-css-banner   # retirarlo
   ========================================================================== */

@media (max-width: 991.98px) {

  /* Orden natural: el video primero. Sin esto, `column-reverse` seguiria
     mandando y el hueco del texto se contaria por encima del video. */
  body#index .elementor-element-6mtigas .swiper-slide {
    flex-direction: column;
  }

  /* El bloque de texto, estirado sobre el video y con su contenido apoyado
     abajo a la izquierda. */
  body#index .elementor-element-6mtigas .swiper-slide .text-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 20px 28px;
    z-index: 2;
  }

  /* El titulo y el parrafo vacios dejan de reservar sitio. */
  body#index .elementor-element-6mtigas .swiper-slide .text-content > h2:empty,
  body#index .elementor-element-6mtigas .swiper-slide .text-content > p:empty {
    display: none;
  }

  body#index .elementor-element-6mtigas .swiper-slide .text-content > h2,
  body#index .elementor-element-6mtigas .swiper-slide .text-content > p {
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   ALTERNATIVA DESCARTADA - V1: el video arriba y el boton pegado justo debajo,
   sobre fondo blanco. Medido: banner de 775 px, blanco 0.
   Se prefirio la superposicion por ser lo mismo que hace el escritorio.

@media (max-width: 991.98px) {
  body#index .elementor-element-6mtigas .swiper-slide { flex-direction: column; }
  body#index .elementor-element-6mtigas .swiper-slide .text-content {
    padding: 24px 20px 32px;
  }
  body#index .elementor-element-6mtigas .swiper-slide .text-content > h2:empty,
  body#index .elementor-element-6mtigas .swiper-slide .text-content > p:empty { display: none; }
  body#index .elementor-element-6mtigas .swiper-slide .text-content > h2,
  body#index .elementor-element-6mtigas .swiper-slide .text-content > p { padding-bottom: 0; }
}
   -------------------------------------------------------------------------- */
/* ===== FIN banner movil Macy ===== */

/* ===== INICIO filtros Macy - no editar a mano ===== */
/* ==========================================================================
   Filtros del catalogo: la flecha de abrir/cerrar   >>> SIN PUBLICAR <<<
   ==========================================================================

   EL PROBLEMA: la flecha de cada grupo de filtros (Base, Uso, Superficie,
   Material, Acabado) apunta SIEMPRE hacia abajo, se abra o se cierre el grupo.

   Son en realidad DOS defectos distintos, los dos en el modulo de filtros
   (ps_facetedsearch, plantilla sobreescrita por el tema en
   themes/warehouse/modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl):

   1) FALTA LA REGLA QUE ROTA LA FLECHA.
      El icono es `<i class="fa fa-chevron-down transition-icon">` y ya tiene
      preparada la animacion -- `.transition-icon { transition: transform .3s ease }`
      esta declarada en el CSS del tema --, pero NO existe en ninguna hoja una
      regla que le ponga un `transform`. Comprobado en custom.css, theme.css y
      en las reglas que el navegador dice que le aplican: el `transform`
      computado es `none` en todos los estados. Alguien dejo la transicion
      puesta y nunca escribio el giro.

   2) EL BOTON NACE DICIENDO QUE ESTA CERRADO CUANDO ESTA ABIERTO.
      En la plantilla, el panel se escribe SIEMPRE abierto (linea 76):

          <ul id="facet_..." class="facet-type-... collapse show">

      pero la clase `collapsed` del boton esta puesta A PELO (linea 63):

          <button class="... facet-toggle-link collapsed"

      mientras que el `aria-expanded` de al lado si es condicional. Resultado:
      al cargar, el panel esta abierto pero el boton dice `collapsed` y
      `aria-expanded="false"`. Por eso el PRIMER clic sobre un grupo se comporta
      de forma rara (cierra el panel pero el boton no cambia de clase) y hace
      falta un segundo clic para que se sincronicen.

   POR QUE ESTE CSS NO MIRA LA CLASE DEL BOTON:
   lo natural seria colgar el giro de `.facet-toggle-link.collapsed`, que es lo
   que gestiona Bootstrap. Se probo y NO FUNCIONA por culpa del defecto 2: como
   el boton nace con `collapsed` puesto a mano, la flecha se quedaba abajo en
   los cinco grupos igual que antes.

   La solucion es mirar el ESTADO REAL DEL PANEL, que es el hermano siguiente
   del titulo: `:has(+ ul.show)`. Asi da igual lo que diga el boton. Verificado
   en los cinco grupos, al cargar y despues de cerrar uno: la flecha coincide
   siempre con si el grupo esta abierto o cerrado.

   NOTA: esto arregla el sintoma visible. El defecto 2 sigue ahi y afecta a la
   accesibilidad (`aria-expanded` miente sobre el estado del grupo). Para
   arreglarlo de raiz hay que tocar la plantilla facets.tpl y hacer condicional
   la clase `collapsed` igual que ya lo es el `aria-expanded`. Copia de la
   plantilla en copias-servidor/facets.tpl.20260908.bak

       python subir-ftp.py css-filtros          # ponerlo
       python subir-ftp.py quitar-css-filtros   # retirarlo
   ========================================================================== */

/* ---- La caja del icono, cuadrada y con el glifo centrado ----

   HAY QUE HACER ESTO ANTES DE ROTAR NADA. El tema declara

       .facet-title i { width: 24px; height: 24px; padding-right: 25px; }

   y como el elemento va en `box-sizing: border-box`, esos 25 px de padding se
   comen el ancho: el area de contenido queda en 0 px y el glifo se dibuja
   DESBORDANDO por la izquierda, no en el centro de la caja. El
   `transform-origin` por defecto, en cambio, es el centro de la caja
   (12.5px 12px), asi que al rotar 180 grados el glifo saltaba al otro lado.

   Medido sobre la imagen (centro de masa de los pixeles del glifo): al abrir y
   cerrar, la flecha se desplazaba 12,3 px en horizontal y 7,2 px en vertical.
   De ahi la sensacion de que gira sobre uno de sus lados y queda desalineada
   respecto a las demas flechas. La CAJA no se movia (0,0), por eso no se ve
   midiendo el getBoundingClientRect: hay que mirar el glifo.

   La cura es que la caja sea de verdad 24x24 con el glifo centrado dentro:
   el padding pasa a margin (asi se conserva la separacion de 25 px respecto al
   borde) y se centra con line-height + text-align. Verificado: el
   desplazamiento baja a 0,6 px en horizontal y 1,3 en vertical, que es el
   propio dibujo del chevron, que no es simetrico arriba/abajo.            */
#left-column .facet-title .transition-icon {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-right: 25px;
  line-height: 24px;
  text-align: center;
}

/* Cerrado: la flecha apunta abajo (posicion natural del icono). */
#left-column .facet-title .transition-icon {
  transform: rotate(0deg);
}

/* Abierto: la flecha apunta arriba. Se mira el panel, no el boton.

   DOS selectores, y el segundo NO SOBRA. Bootstrap no pone la clase `show` al
   empezar a abrir sino al TERMINAR: durante la animacion el panel lleva
   `collapsing`. Al cerrar, en cambio, quita `show` de inmediato. Con solo el
   primer selector, la flecha salia perfecta al cerrar pero al abrir esperaba a
   que el panel acabase y solo entonces empezaba a girar. Medido:

       cerrar -> panel 0-383 ms, flecha 23-323 ms   (en paralelo, bien)
       abrir  -> panel 0-362 ms, flecha 382-663 ms  (301 ms de retraso)

   El segundo selector cubre el tramo de apertura: panel en `collapsing` y boton
   ya SIN `collapsed` (Bootstrap se la quita nada mas pulsar). Cuando se esta
   cerrando el boton si conserva `collapsed`, asi que no entra por aqui y la
   flecha no gira antes de tiempo. Medido con el arreglo:

       cerrar -> flecha 22-322 ms
       abrir  -> flecha 22-302 ms

   Nota: aqui si se usa `.collapsed`, pero solo para distinguir si se abre o se
   cierra DURANTE la animacion, no para saber el estado de reposo -- que es lo
   que no se puede fiar al boton por el defecto 2. */
#left-column .facet-title:has(+ ul.show) .transition-icon,
#left-column .facet-title:has(.facet-toggle-link:not(.collapsed)):has(+ ul.collapsing) .transition-icon {
  transform: rotate(180deg);
}
/* ===== FIN filtros Macy ===== */

/* ===== INICIO slider Macy - no editar a mano ===== */
/* Hero de la home (modulo deitnet_slider): texto al eje de 1252 en PC,
   centrado abajo sobre la foto en movil, tope de alto 680/520 y esquinas
   0 40 0 40. Los COLORES los pone el modulo (campo Color del texto). */
@media (max-width: 991.98px) {
  /* El modulo redondea en movil 40 40 40 0. Va como en escritorio: solo la
     esquina superior derecha y la inferior izquierda (el gesto de la marca).
     Para todas las diapositivas, o el banner cambiaria de forma. */
  body#index .elementor-element-6mtigas .swiper-slide {
    border-radius: 0 40px 0 40px;
  }
  body#index .elementor-element-6mtigas .swiper-slide .text-content {
    width: auto; /* de 769 a 991 el modulo aun le da el 33,3 % de escritorio */
    align-items: center;
    text-align: center;
    padding: 0 60px 72px;
  }
  body#index .elementor-element-6mtigas .swiper-slide .text-content > h2:not(:empty) {
    font-size: clamp(28px, 7.2vw, 45px);
    line-height: 1.15;
    text-wrap: balance; /* lineas parejas: sin "toca" suelta en medio */
    margin-bottom: 12px;
  }
  body#index .elementor-element-6mtigas .swiper-slide .text-content > a {
    margin-top: 16px;
  }
}
/* Escritorio: el texto arranca en el eje del sitio (1252 px, o 35 px de margen
   por debajo), igual que "Productos". El modulo le da 100 px fijos. El % de un
   padding se resuelve sobre el ancho de la diapositiva (su bloque contenedor),
   asi que no hace falta `vw`, que contaria la barra de desplazamiento. El ancho
   deja de ser el 33,3 %: es el margen mas una columna fija para el texto. */
@media (min-width: 992px) {
  body#index .elementor-element-6mtigas .swiper-slide .text-content {
    box-sizing: border-box;
    /* El modulo lo esconde en left:-100% y solo lo saca con .swiper-slide-active,
       una clase que su propio JS quita al cambiar de diapositiva (y con tres
       instancias del slider, a veces no vuelve): el texto desaparecia al volver
       del video. Siempre en su sitio; se desliza con su diapositiva. */
    left: 0;
    padding-left: max(35px, calc((100% - 1252px) / 2));
    padding-right: 0;
    width: calc(max(35px, calc((100% - 1252px) / 2)) + 500px);
  }
  body#index .elementor-element-6mtigas .swiper-slide .text-content > h2:not(:empty) {
    font-size: clamp(36px, 3.4vw, 51px);
    line-height: 1.16;
  }
  /* Tope de alto como las bandas a sangre de Sostenibilidad (.macy-banda:
     680 px, 520 por debajo de 1100). Afecta a TODAS las diapositivas: Swiper
     iguala las alturas y un video mas alto dejaria hueco bajo la foto. El
     modulo fuerza height:100% en la imagen; con auto conserva su proporcion
     hasta el tope y a partir de ahi recorta con cover. */
  /* el modulo le da min-height: 600px al contenedor: con el tope de 520
     quedaba un hueco de 80 px bajo la foto */
  body#index .elementor-element-6mtigas .swiper-container {
    min-height: 0;
  }
  body#index .elementor-element-6mtigas .swiper-slide .image-content .desk {
    height: auto !important;
    max-height: 680px;
    object-fit: cover;
    object-position: center;
  }
}
@media (min-width: 992px) and (max-width: 1100px) {
  body#index .elementor-element-6mtigas .swiper-slide .image-content .desk {
    max-height: 520px;
  }
}
/* VIDEO en PC: a todo el ancho y con su altura natural, SIN el tope de las
   fotos (un 1920x1080 mide 800 px a 1440 y 1070 a 1920). Como cada
   diapositiva tiene su propio alto, el slider usa autoHeight (plantilla y
   deitnet_slider.js): el banner cambia de alto al pasar de una a otra. */
@media (min-width: 992px) {
  body#index .elementor-element-6mtigas .swiper-slide .image-content > video.desk {
    max-height: none;
  }
}
/* --- INICIO recorte lateral fotos (01/10/2026) --- */
/* Fotos con alto minimo: una foto muy apaisada (2560x680) se quedaria en 383 px
   a 1440. Con 520 de minimo deja de encogerse y cover recorta los lados, igual
   que recorta arriba y abajo al pasar del tope de 680. Solo <img>: el video
   sigue igual. */
@media (min-width: 992px) {
  body#index .elementor-element-6mtigas .swiper-slide .image-content > img.desk {
    min-height: 520px;
  }
}
/* Tablet (769-991), SOLO diapositivas con foto: el modulo ya pinta la foto de
   escritorio (cambia a la vertical en 768). Va como en PC: texto a la
   izquierda y 520 px de alto recortando por los lados. */
@media (min-width: 769px) and (max-width: 991.98px) {
  body#index .elementor-element-6mtigas .swiper-slide:has(> .image-content > img.desk) {
    border-radius: 0 40px 0 40px;
  }
  body#index .elementor-element-6mtigas .swiper-slide:has(> .image-content > img.desk) .text-content {
    box-sizing: border-box;
    left: 0;
    width: 535px;
    padding: 0 0 0 35px;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
  }
  body#index .elementor-element-6mtigas .swiper-slide:has(> .image-content > img.desk) .text-content > h2:not(:empty) {
    font-size: 36px;
    line-height: 1.16;
    margin-bottom: 0;
  }
  body#index .elementor-element-6mtigas .swiper-slide .image-content > img.desk {
    height: 520px !important;
    object-fit: cover;
    object-position: center;
  }
}
/* --- FIN recorte lateral fotos --- */
/* ===== FIN slider Macy ===== */

/* ===== Ajustes para Warehouse 4.8 (Bootstrap 5 / Font Awesome 6) ===== */
/* En FA6 los iconos solidos (chevron, times...) solo existen en peso 900;
   el CSS del editor del tema fija `.facet-title i{font-weight:500 !important}`
   y salia un cuadrado en lugar del chevron. */
#search_filters .fa,
.btnBorrarFiltro .fa{font-weight:900}
#search_filters .facet-title i.fa{font-weight:900 !important}

/* ===== Antes en modules/iqitcookielaw/views/css/front.css (modificado a mano) ===== */
#iqitcookielaw .cookie-actions .btn{
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Bootstrap 4 daba `position:relative` a todas las columnas y Bootstrap 5 no. El logo
   (#desktop_logo, absoluto con top:-30px) se colocaba respecto a su columna; sin esto sube
   25px y pisa la barra azul superior. Solo en la columna del logo: la del menu NO, porque
   el desplegable del megamenu se coloca respecto a toda la cabecera (ancho completo). */
#desktop-header-container .col-header-left{position:relative}

/* ===== Antes en theme.css del padre (Warehouse 4.5.9 modificado a mano en produccion) ===== */
/* Sin la flecha (FontAwesome) delante de los enlaces de .block-links: politicas del pie, etc. */
.block-links ul>li a:before,
.block-links ul>li a::before{content:none;display:none}
.block-links ul>li a{padding-left:0}
/* Casillas de verificacion redondas */
input[type="checkbox"]+span {appearance: none;-webkit-appearance: none;width: 20px!important;height: 20px!important;border-radius: 50%;border: 3px solid #273756!important;background-color: #eee;cursor: pointer;position: relative;transition: background 0.3s ease;}input[type="checkbox"]:checked+span {background: linear-gradient(to bottom, #2c3e50, #4a90e2)!important;border:3px transparent!important;}input[type="checkbox"]:checked::after {content: "✔";color: white;font-size: 30px;position: absolute;top: 8px;left: 16px;font-weight: bold;}.custom-checkbox input[type="checkbox"]+span .checkbox-checked{color:white!important;top:4px!important;}

/* ===== Antes en modules/iqitmegamenu/views/css/front.css (modificado a mano en produccion) ===== */
/* Sin la flecha animada (FontAwesome) delante de los enlaces del desplegable del megamenu */
.cbp-hrmenu .cbp-links li a:before,
.cbp-hrmenu .cbp-links li a::before{content:none;display:none}

/* Ficha: el bloque de compra/variantes (colores) se movio debajo de la ficha y va directo en
   una .row sin columna; Bootstrap 5 le pone el relleno de columna y el 100% de ancho. */
/* (la regla de Macy `body#product .product-actions{width:100%}` contaba con que encogiera:
   Bootstrap 5 pone flex-shrink:0 a los hijos de .row) */
.product-container > .row > .product-actions{flex-shrink:1;max-width:none;padding-left:0;padding-right:0}


/* Menu movil push (Warehouse 4.5): con el menu abierto la pagina no se desplaza (ver custom.js) */
body.--push-menu-opened{overflow:hidden}
/* Menu movil: estilos de Warehouse 4.5 que la 4.8 cambio o quito */
.mobile-menu__link{width:auto}
.mobile-menu__tab--active>span>.mobile-menu__expand-icon{display:none!important}
.mobile-menu__tab-row-break{width:100%}

/* Font Awesome 6: las flechas de la paginacion son ~5px mas anchas que en FA4 y en movil
   la lista de paginas pasaba a dos lineas. Se les da el ancho de FA4 (0,36em) y se centran. */
.pagination .fa-angle-left,.pagination .fa-angle-right{width:.36em;text-align:center}

/* Bootstrap 4 daba position:relative a las columnas. En el menu movil, el bloque de enlaces (Canal denuncias,
   InstanColor, Contacto, Descargas) quedaba tapado por la lista de pestanas (ul.mobile-menu__scroller, absoluta)
   y no se podia pulsar. Solo dentro del menu movil: aplicado a todas las columnas estrecha el desplegable de escritorio. */
#iqitmegamenu-mobile .col,#iqitmegamenu-mobile [class*="col-"]{position:relative}