/*
 * 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;
}

/* --- 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;
}
/* ===== FIN home Macy ===== */