:root {
    --external-primary: #287452;
    --external-secondary: #3f3f3f;
    --external-primary-soft: #8ab9a5;
    --external-primary-dark: #1f5c3e;
    --external-secondary-soft: #b3b2b2;
    --external-light: #e5e4e4;
    --external-white: #ffffff;

    /* Neutros fríos tomados de los materiales que fabricamos:
       aluminio anodizado, PVC y vidrio. Conviven con los grises
       cálidos de arriba; no los reemplazan. */
    --g-carbon: #23262a;
    --g-vidrio: #f6f8f9;

    /* Escalones claros del verde de marca: es el mismo #287452 diluido
       sobre blanco (≈6% y ≈12%), no colores nuevos. Existen para que una
       sección se lea teñida y no pálida sin salir de la paleta ni pedir
       otro gris. Misma lógica que la escala de hover: cada color se mueve
       dentro de la suya.
         --g-verde-wash   banda clara, apenas insinuada
         --g-verde-tinte  banda clara marcada, un escalón más */
    --g-verde-wash: #eef4f1;
    --g-verde-tinte: #e1ece6;

    /* Trama del plano de taller. La firma de la marca es la cota, y esto
       es su fondo: la grilla milimetrada. Se aplica con .g-plano (o
       repitiendo estas dos variables en un ::before) y cubre la banda
       entera, pareja de borde a borde. Todas las bandas la anclan igual
       arriba a la izquierda, así las líneas verticales siguen de una
       banda a la otra y se lee como una sola trama. */
    --g-plano-linea: rgba(40, 116, 82, 0.07);
    --g-plano-linea-light: rgba(255, 255, 255, 0.07);
    --g-plano-paso: 32px;

    /* Archivo y Asap: dos familias de Omnibus-Type (Buenos Aires).
       Archivo titula y etiqueta; Asap sostiene el texto corrido. */
    --font-display: 'Archivo', 'Segoe UI', Tahoma, sans-serif;
    --font-body: 'Asap', 'Segoe UI', Tahoma, sans-serif;

    /* ── Escala tipográfica ───────────────────────────────────────────
       Siete pasos, uno por rol. Nadie escribe font-size a mano: se elige
       el paso que corresponde al papel que cumple el texto. Así dos
       títulos de sección miden igual aunque vivan en vistas distintas.

       Los pasos grandes usan clamp() para no necesitar media queries;
       el valor de la izquierda es el de teléfono y el de la derecha el
       de escritorio.

                                         390px    1440px
       --fs-hero     h1 de hero            30.4px   57.6px
       --fs-title    h2 de sección           28px   41.6px
       --fs-title-sm h2 dentro de página   21.6px     28px
       --fs-lead     párrafo de entrada    17.3px   19.2px
       --fs-sub      h3 de tarjeta/bloque  17.6px   17.6px
       --fs-body     texto corrido           16px     16px
       --fs-small    apoyo, botones, meta  14.1px   14.1px
       --fs-label    eyebrow y rótulos     11.2px   11.2px

       --fs-title-sm existe por la ficha de producto: ahí el nombre del
       producto es el título de la página y los bloques internos ("Más
       en Mamparas") necesitan un escalón abajo para no empatarle.
       ─────────────────────────────────────────────────────────────── */
    --fs-hero: clamp(1.9rem, 7.5vw, 3.6rem);
    --fs-title: clamp(1.75rem, 5.2vw, 2.6rem);
    --fs-title-sm: clamp(1.35rem, 3.6vw, 1.75rem);
    --fs-lead: clamp(1.08rem, 3.6vw, 1.2rem);
    --fs-sub: 1.1rem;
    --fs-body: 1rem;
    --fs-small: 0.88rem;
    --fs-label: 0.7rem;

    /* ── Hover ────────────────────────────────────────────────────────
       Un solo gesto en toda la app: el hover no le cambia el color al
       botón, lo corre un escalón dentro de su propia escala.

         relleno    →  el fondo baja al tono oscuro de ese mismo color
         sin fondo  →  aparece el tinte del 8% de su propio color
         ya teñido  →  el tinte sube al siguiente escalón (16%)

       Cada color tiene su escala y el hover se mueve dentro de ella,
       nunca salta a otra. Ningún botón inventa un valor intermedio:

         verde    0 → 8% → 16% → #287452 → #1f5c3e
         neutro   0 → 12% → #ffffff → #e5e4e4

       Por eso un botón blanco sobre fondo oscuro se apaga a
       --external-light y no se tiñe de verde: el verde es otra escala.

       Nada se levanta al pasar el mouse. Los botones se hunden 1px al
       pulsarlos (.g-btn:active) y son las superficies —las tarjetas—
       las que flotan; un botón que hace las dos cosas se lee como dos
       componentes distintos. Antes había tres versiones del mismo
       hover verde (liso, con salto, con salto y sombra).
       ─────────────────────────────────────────────────────────────── */
    --g-hover-verde: rgba(40, 116, 82, 0.08);
    --g-hover-verde-alto: rgba(40, 116, 82, 0.16);
    --g-hover-blanco: rgba(255, 255, 255, 0.12);
    --g-hover-gris: rgba(63, 63, 63, 0.07);

    /* Cuánto flota una superficie al pasar el mouse. Uno solo para todas
       las tarjetas del sitio: había tres (6px en el catálogo, 4px en
       Inicio, 2px en la ficha) con tres sombras distintas, y la misma
       tarjeta de producto se movía distinto según la vista en la que
       estaba. La única que se aparta es la del conector de Inicio, que
       usa la misma altura pero una sombra más densa: flota sobre verde
       oscuro y ahí esta no se ve. */
    --g-flota: translateY(-4px);
    --g-flota-sombra: 0 12px 26px rgba(0, 0, 0, 0.14);

    /* Rojo de las acciones que borran. Uno solo: convivían tres
       (#e74c3c, #dc3545, #c0392b) y con tres rojos ningún hover podía
       ser el mismo. */
    --g-peligro: #c0392b;
    --g-peligro-dark: #a5322a;
    --g-hover-peligro: rgba(192, 57, 43, 0.08);

    /* Verde de WhatsApp: es el color del canal, no el de la marca, así
       que tiene su propia escala y no toma el verde Giacomazzi. */
    --g-whatsapp: #25d366;
    --g-whatsapp-dark: #1da851;

    /* Alto del navbar pegado (58px de .external-nav-container + 0.5rem
       de padding arriba y abajo del <nav>). Lo usan el scroll-padding de
       los anclajes y todo lo que se pega debajo del header —la barra de
       filtros del catálogo, el sidebar, la galería de la ficha— para no
       quedar tapado. Si cambia el alto de la barra, se cambia acá. */
    --g-nav-h: 74px;
}

/* Los anclajes internos (#seccion) frenan debajo del navbar, no atrás */
html {
    scroll-padding-top: calc(var(--g-nav-h) + 0.5rem);
}

.external-body {
    font-family: var(--font-body);
    background-color: var(--external-white);
    color: var(--external-secondary);
}


/* ── Hero de página interior ───────────────────────────────────────────
   Encabezado de sección con foto de fondo. Lo usan Nosotros y Catálogo.
   Siempre la mitad que el hero de Inicio, porque acá presenta la sección,
   no la convence.

   El alto sale de una relación de aspecto declarada y no del alto de la
   ventana. Antes era 30svh / 42svh, y eso tenía dos costos: el hero no
   tenía forma propia —iba de 1.76:1 a 2.26:1 entre teléfonos y de 4.39:1
   a 5.02:1 entre monitores—, así que el editor del panel sólo podía
   mostrar una forma representativa; y como el min-height cedía ante el
   contenido, un título de dos renglones estiraba ese hero y dejaba de
   medir igual que sus hermanos ("Todos los productos" contra "Mamparas").

   Las cuatro bandas están elegidas para pegarle a los altos que tenía
   antes, no por prolijidad: diez de doce dispositivos frecuentes quedan
   dentro de ±7%. Los ratios son los mismos números que declara
   Categoria::RECUADROS_HERO — esto y esa constante son una sola fuente
   de verdad, y por eso el recuadro del panel es lo que se publica.

   Doble selector: .g-hero es el nombre nuevo y .about-hero el alias que
   mantiene andando a Nosotros sin tocarle el markup. Los dos tienen que
   estar: con uno solo, la mitad de los heros del sitio queda sin reglas.
   ──────────────────────────────────────────────────────────────────── */
.g-hero,
.about-hero {
    position: relative;
    display: flex;
    align-items: center;
    aspect-ratio: 19 / 10;
    /* Sin esto el hero se angosta y queda una franja blanca al costado.
       Cuando el max-height de abajo ata —ventanas bajas—, el navegador
       toma el alto recortado y le aplica la relación para calcular el
       ANCHO, en vez de dejarlo llenar el contenedor: una ventana de
       1909×700 daba un hero de 1645px (350 × 4.7) en vez de 1909.
       Con el ancho declarado, el que cede es el ratio y no el ancho. */
    width: 100%;
    /* Rieles para lo que el ratio solo no cubre. El techo es por un caso
       concreto: un teléfono en horizontal (844×390) cae en la banda de
       tablet y sin él el hero mediría 402px sobre una ventana de 390px.
       Ata sólo ahí y en monitores ultra anchos; en todo lo demás manda el
       ratio. El piso evita que overflow:hidden recorte el texto. */
    max-height: 50svh;
    min-height: 11rem;
    overflow: hidden;
    /* Cancela el padding-top de .external-main (1rem hasta 767.98px).
       Tiene que coincidir con ese padding: de más, el hero se mete
       debajo del navbar; de menos, queda una franja blanca arriba. */
    margin-top: -1rem;
    /* Respaldo para categorías sin imagen_hero: el scrim solo no tapa */
    background: var(--g-carbon);
    /* La banda verde del cierre es parte del hero, no de la sección que
       sigue: así viaja con el componente y no hay que acordarse de
       ponérsela a cada página nueva. */
    border-bottom: 5px solid var(--external-primary);
}


.g-hero-bg,
.about-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-x, 50%) var(--hero-y, 50%);
    transform-origin: var(--hero-x, 50%) var(--hero-y, 50%);
    scale: var(--hero-zoom, 1);
    z-index: 0;
}

/* Mismo filtro que el hero de Inicio, para que los tres se lean igual */
.g-hero-scrim,
.about-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
            rgba(15, 17, 19, 0.64) 0%,
            rgba(15, 17, 19, 0.44) 42%,
            rgba(15, 17, 19, 0.14) 100%);
}


.g-hero-inner,
.about-hero-inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(1.5rem, 3.5vw, 3rem);
}

/* El h1 es el último hijo en las tres vistas que usan el hero, así que su
   margen inferior es aire muerto dentro de una caja que ya tiene padding. */
.g-hero-title:last-child,
.about-hero-title:last-child {
    margin-bottom: 0;
}

/* Ventana baja: el teléfono en horizontal. Ahí el techo de 50svh achata el
   hero a ~195px y un título de dos renglones —"Todos los productos"— se
   pasaba por diez píxeles, que overflow:hidden recortaba. Es el único lugar
   donde el aire no alcanza, así que se recorta el aire y no el texto. */
@media (max-height: 520px) {

    .g-hero-inner,
    .about-hero-inner {
        padding-block: 1rem;
    }
}

.g-hero-eyebrow,
.about-hero-eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--external-primary-soft);
    margin: 0 0 0.5rem;
}

.g-hero-title,
.about-hero-title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--external-white);
    margin: 0 0 0.9rem;
    max-width: 18ch;
}

.g-hero-cota,
.about-hero-cota {
    color: var(--external-primary-soft);
    max-width: 26rem;
}

/* Banda tablet. Cada banda cambia dos cosas y sólo dos: su relación de
   aspecto y de qué variables lee el encuadre. Lo demás se hereda. */
@media (min-width: 768px) {
    .g-hero,
    .about-hero {
        /* .external-main pasa a padding-top: 1.5rem desde acá */
        margin-top: -1.5rem;
        aspect-ratio: 21 / 10;
    }

    .g-hero-bg,
    .about-hero-bg {
        object-position: var(--hero-x-tab, 50%) var(--hero-y-tab, 50%);
        transform-origin: var(--hero-x-tab, 50%) var(--hero-y-tab, 50%);
        scale: var(--hero-zoom-tab, 1);
    }

    /* En pantalla ancha el degradado se inclina: oscurece el lado donde
       vive el texto y deja respirar la foto del otro. */
    .g-hero-scrim,
    .about-hero-scrim {
        background: linear-gradient(105deg,
                rgba(15, 17, 19, 0.62) 0%,
                rgba(15, 17, 19, 0.36) 55%,
                rgba(15, 17, 19, 0.1) 100%);
    }
}

/* Banda laptop: tablet en horizontal y laptops chicas. */
@media (min-width: 1024px) {

    .g-hero,
    .about-hero {
        aspect-ratio: 7 / 2;
    }

    .g-hero-bg,
    .about-hero-bg {
        object-position: var(--hero-x-lap, 50%) var(--hero-y-lap, 50%);
        transform-origin: var(--hero-x-lap, 50%) var(--hero-y-lap, 50%);
        scale: var(--hero-zoom-lap, 1);
    }
}

/* Banda escritorio: la franja más apaisada de todas, casi cinco a uno. Lo
   que encuadra bien en el teléfono acá descabeza la foto, y por eso cada
   banda guarda su propio punto focal en vez de heredar el de la anterior. */
@media (min-width: 1366px) {

    .g-hero,
    .about-hero {
        aspect-ratio: 47 / 10;
    }

    .g-hero-bg,
    .about-hero-bg {
        object-position: var(--hero-x-esc, 50%) var(--hero-y-esc, 50%);
        transform-origin: var(--hero-x-esc, 50%) var(--hero-y-esc, 50%);
        scale: var(--hero-zoom-esc, 1);
    }
}

/* Línea de cota: |———— etiqueta ————| */
.g-cota,
.home-cota {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
}

.g-cota::before,
.g-cota::after,
.home-cota::before,
.home-cota::after {
    content: '';
    flex: 1 1 auto;
    min-width: 1.25rem;
    height: 7px;
    border-left: 1px solid currentColor;
    border-right: 1px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
    opacity: 0.55;
}

/* Cota vertical: el writing-mode gira el eje del flex, así que los
   terminales pasan de borde lateral a borde superior/inferior. */
.g-cota--v,
.home-cota--v {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.g-cota--v::before,
.g-cota--v::after,
.home-cota--v::before,
.home-cota--v::after {
    height: auto;
    width: 7px;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
}

/* Eyebrow: la misma cota, en versión corta */
.g-eyebrow,
.home-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.85rem;
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--external-primary);
}

.g-eyebrow::before,
.home-eyebrow::before {
    content: '';
    flex: 0 0 auto;
    width: 26px;
    height: 7px;
    border-left: 1px solid currentColor;
    border-right: 1px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

.g-eyebrow--light,
.home-eyebrow--light {
    color: var(--external-primary-soft);
}

/* Títulos de sección */
.g-title,
.home-title {
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: var(--external-secondary);
    margin: 0;
}

.g-title--light,
.home-title--light {
    color: var(--external-white);
}

/* Botones — 46px de alto: sigue por encima del mínimo táctil (44px)
   sin que dos apilados se coman media pantalla. */
.g-btn,
.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 46px;
    padding: 0.6rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 3px;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, transform 0.2s ease;
}

.g-btn svg,
.g-btn .bi,
.home-btn svg,
.home-btn .bi {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    font-size: 1.05rem;
    line-height: 1;
}

.g-btn--primary,
.home-btn--primary {
    background: var(--external-primary);
    border-color: var(--external-primary);
    color: var(--external-white);
}

.g-btn--primary:hover,
.g-btn--primary:focus,
.home-btn--primary:hover,
.home-btn--primary:focus {
    background: var(--external-primary-dark);
    border-color: var(--external-primary-dark);
    color: var(--external-white);
}

/* El verde de WhatsApp, no el de la marca: acá el color no decora, dice a
   dónde lleva el botón. Se usa donde consultar es la única acción posible
   (productos a medida) y en el cierre de esas páginas. */
.g-btn--wa {
    background: var(--g-whatsapp);
    border-color: var(--g-whatsapp);
    color: var(--g-carbon);
}

.g-btn--wa:hover,
.g-btn--wa:focus {
    background: var(--g-whatsapp-dark);
    border-color: var(--g-whatsapp-dark);
    color: var(--external-white);
}

.g-btn--ghost,
.home-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--external-white);
}

.g-btn--ghost:hover,
.g-btn--ghost:focus,
.home-btn--ghost:hover,
.home-btn--ghost:focus {
    background: var(--g-hover-blanco);
    border-color: var(--external-white);
    color: var(--external-white);
}

.g-btn--solid,
.home-btn--solid {
    background: var(--external-white);
    border-color: var(--external-white);
    color: var(--g-carbon);
}

.g-btn--solid:hover,
.g-btn--solid:focus,
.home-btn--solid:hover,
.home-btn--solid:focus {
    /* Escalón dentro de su propia escala, que acá es la neutra: el
       blanco baja a --external-light. Antes bajaba a
       --external-primary-soft y un botón blanco se volvía verde, que
       es cambiar de color en vez de bajar un escalón. */
    background: var(--external-light);
    border-color: var(--external-light);
    color: var(--g-carbon);
}

.g-btn:active,
.home-btn:active {
    transform: translateY(1px);
}

/* Link de texto con flecha */
.g-link,
.home-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    color: var(--external-primary);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-body);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.g-link:hover,
.g-link:focus,
.home-link:hover,
.home-link:focus {
    color: var(--external-primary-dark);
    gap: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.g-link svg,
.home-link svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

/* El mismo link sobre fondo oscuro o verde. Baja un escalón dentro de la
   escala neutra —blanco → --external-light—, igual que .g-btn--solid: el
   verde de marca no se lee sobre el verde de marca. */
.g-link--light,
.home-link--light {
    color: var(--external-white);
}

.g-link--light:hover,
.g-link--light:focus,
.home-link--light:hover,
.home-link--light:focus {
    color: var(--external-light);
}


:where(.g-plano) {
    position: relative;
}

:where(.g-plano) > * {
    position: relative;
}

.g-plano::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--g-plano-linea) 1px, transparent 1px),
        linear-gradient(90deg, var(--g-plano-linea) 1px, transparent 1px);
    background-size: var(--g-plano-paso) var(--g-plano-paso);
}

/* Sobre fondo oscuro la trama se dibuja en blanco, no en verde */
.g-plano--light::before {
    background-image:
        linear-gradient(var(--g-plano-linea-light) 1px, transparent 1px),
        linear-gradient(90deg, var(--g-plano-linea-light) 1px, transparent 1px);
}

/* ── Banda verde ──────────────────────────────────────────────────────
   El golpe de color de la marca, en una banda entera. Una por página, no
   más: en Inicio es "Cómo trabajamos"; en Nosotros, el cierre de
   contacto; en las fichas, el cierre de fabricación a medida o el
   proceso. Si el verde aparece tres veces en la misma vista deja de ser
   el golpe y pasa a ser el fondo.

   Va siempre con la trama en blanco (.g-plano .g-plano--light). Lo que
   se apoya adentro con texto largo va en blanco sobre el verde —tarjetas,
   paneles—; los títulos y bajadas van en blanco directo. */
.g-banda-verde {
    background: linear-gradient(145deg,
            var(--external-primary-dark) 0%,
            var(--external-primary) 100%);
    color: var(--external-white);
}

/* Foco visible y consistente en todo lo accionable */
.g-btn:focus-visible,
.g-link:focus-visible,
.home-btn:focus-visible,
.home-link:focus-visible {
    outline: 2px solid var(--external-primary);
    outline-offset: 3px;
}

.g-btn--ghost:focus-visible,
.g-btn--solid:focus-visible,
.home-btn--ghost:focus-visible,
.home-btn--solid:focus-visible {
    outline-color: var(--external-white);
}

@media (prefers-reduced-motion: reduce) {
    .g-btn,
    .g-link,
    .home-btn,
    .home-link {
        transition: none;
    }
}

/* ── Aparición al entrar en pantalla ──────────────────────────────────
   Ver public/js/modules/reveal.js. Todo cuelga de .reveal-on sobre <html>:
   sin esa clase estas reglas no existen, así que el contenido nunca queda
   invisible por un JS que no cargó. Un solo gesto —subir 16px y aparecer—
   y siempre corto: esto acompaña la lectura, no la interrumpe. */
.reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
}

.reveal-on [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s ease,
                transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Escalonado de hermanos. Cuatro pasos y no más: pasados los ~0.3s de
   demora el último de la fila llega tarde a su propia sección. */
.reveal-on [data-reveal-delay="1"].is-in { transition-delay: 0.08s; }
.reveal-on [data-reveal-delay="2"].is-in { transition-delay: 0.16s; }
.reveal-on [data-reveal-delay="3"].is-in { transition-delay: 0.24s; }
.reveal-on [data-reveal-delay="4"].is-in { transition-delay: 0.32s; }

/* Red de seguridad: el inline del <head> ya no agrega .reveal-on con
   reduced-motion, pero si la clase llegara igual, esto la desarma. */
@media (prefers-reduced-motion: reduce) {
    .reveal-on [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.external-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.external-navbar {
    background: #dbdad9;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    /* La sombra solo aparece cuando hay contenido pasando por debajo
       (la clase la pone layout.js); sin scroll el navbar es parte de la
       página, no una capa flotando encima. */
    transition: box-shadow 0.2s ease;
}

.external-header.is-scrolled .external-navbar {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

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

.external-nav-container {
    min-height: 58px;
}

/* Desktop: grid de 3 columnas (logo | menú | carrito) para que el menú
   quede centrado respecto al ancho total, sin importar el ancho del logo */
@media (min-width: 992px) {
    .external-navbar .external-nav-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .external-nav-container .external-logo {
        justify-self: start;
    }

    .external-nav-container .external-menu {
        justify-self: center;
    }

    .external-nav-container .external-cart-wrapper {
        justify-self: end;
    }
}

/* Navbar claro: el logo oscuro se muestra directo, sin chip */
.external-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.external-logo-img {
    height: 40px;
    width: auto;
    display: block;
}

.external-menu {
    align-items: center;
    gap: 0.5rem;
}

.external-menu-btn {
    text-align: center;
    padding: 0.55rem 0.8rem;
    border: none;
    border-radius: 0;
    color: var(--external-primary);
    font-weight: 600;
    background-color: transparent;
    transition: all 0.2s ease;
}

.external-menu-btn:hover,
.external-menu-btn:focus,
.external-menu-btn.active,
.external-menu-btn.dropdown-toggle:hover,
.external-menu-btn.dropdown-toggle:focus,
.external-menu-btn.dropdown-toggle.show {
    background-color: transparent;
    border-color: transparent;
    color: var(--external-primary) !important;
    text-decoration: underline;
    text-underline-offset: 7px;
    text-decoration-thickness: 2px;
}

/* Dropdown de productos */
.external-dropdown-menu {
    background-color: var(--external-white);
    border: none;
    border-top: 2px solid var(--external-primary);
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 8px 28px rgba(27, 45, 33, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 0.4rem 0;
    margin-top: 2px;
    min-width: 210px;
    max-width: 290px;
    display: none;
}

.external-dropdown-menu.show {
    display: block;
}

/* Lista vertical para categorías */
.external-dropdown-menu > li {
    display: block;
    width: 100%;
}

.dropdown-divider {
    margin: 0.4rem 0;
    border-top: 1px solid rgba(40, 116, 82, 0.1);
}

.external-dropdown-menu > li:last-child {
    display: block;
    width: 100%;
}

.external-dropdown-item {
    padding: 0.5rem 1rem;
    color: var(--external-secondary);
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0;
    display: block;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: transparent;
}

.external-dropdown-item:hover,
.external-dropdown-item:focus {
    background-color: var(--g-hover-verde);
    color: var(--external-primary);
    padding-left: 1.25rem;
}

.external-dropdown-item.active {
    background-color: rgba(40, 116, 82, 0.08);
    color: var(--external-primary);
    font-weight: 600;
}


.external-dropdown-menu.nav-prod {
    display: none;
    padding: 0.4rem 0;
    min-width: 232px;
    max-width: none;
    /* Sin overflow oculto: el panel se sale del cuadro a propósito */
    overflow: visible;
}

.external-dropdown-menu.nav-prod.show {
    display: block;
}

.nav-prod-todos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid rgba(40, 116, 82, 0.12);
    color: var(--external-primary);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
}

.nav-prod-todos i {
    font-size: 0.85em;
    opacity: 0.65;
    transition: transform 0.15s ease;
}

.nav-prod-todos:hover,
.nav-prod-todos:focus {
    background: var(--g-hover-verde);
    color: var(--external-primary);
}

.nav-prod-todos:hover i,
.nav-prod-todos:focus i {
    transform: translateX(3px);
}

.nav-prod-todos.active {
    background: rgba(40, 116, 82, 0.1);
}

.nav-prod-rama-wrap {
    position: relative;
}

.nav-prod-rama {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 1rem;
    border: 0;
    background: transparent;
    color: var(--external-secondary);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    cursor: default;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-prod-rama i {
    font-size: 0.75em;
    opacity: 0.5;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

/* La rama apuntada se lee como seleccionada, no sólo como hover: es la que
   está gobernando el panel de al lado. */
.nav-prod-rama-wrap:hover .nav-prod-rama,
.nav-prod-rama-wrap:focus-within .nav-prod-rama {
    background: var(--g-hover-verde);
    color: var(--external-primary);
    box-shadow: inset 3px 0 0 var(--external-primary);
}

.nav-prod-rama-wrap:hover .nav-prod-rama i,
.nav-prod-rama-wrap:focus-within .nav-prod-rama i {
    opacity: 1;
    transform: translateX(2px);
}

/* Marca de página actual, independiente de lo que se esté apuntando */
.nav-prod-rama.active {
    color: var(--external-primary);
}

/* Panel al costado. El -0.4rem cancela el padding vertical del menú para que
   el panel arranque a la altura exacta de su rama. */
.nav-prod-panel {
    /* visibility en vez de display para poder demorar el cierre: el panel
       aguanta un rato después de que sale el mouse. */
    visibility: hidden;
    transition: visibility 0s 400ms;
    position: absolute;
    top: -0.4rem;
    left: 100%;
    width: 250px;
    padding: 0.6rem 0;
    background: var(--external-white);
    border-top: 2px solid var(--external-primary);
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    box-shadow: 0 8px 28px rgba(27, 45, 33, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.nav-prod-rama-wrap:hover > .nav-prod-panel,
.nav-prod-rama-wrap:focus-within > .nav-prod-panel {
    visibility: visible;
    transition-delay: 0s;
}

/* Al pasar a la otra rama, la anterior se cierra en el acto para que los
   dos paneles no se pisen. */
.nav-prod:has(.nav-prod-rama-wrap:hover) .nav-prod-rama-wrap:not(:hover) > .nav-prod-panel {
    visibility: hidden;
    transition: none;
}

.nav-prod-panel-titulo {
    margin: 0 0 0.35rem;
    padding: 0 1rem;
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--external-secondary-soft);
}

.nav-prod-vertodos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    color: var(--external-primary);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
}

.nav-prod-vertodos i {
    font-size: 0.8em;
    opacity: 0.65;
    transition: transform 0.15s ease;
}

.nav-prod-vertodos:hover,
.nav-prod-vertodos:focus {
    background: var(--g-hover-verde);
    color: var(--external-primary);
}

.nav-prod-vertodos:hover i,
.nav-prod-vertodos:focus i {
    transform: translateX(3px);
}

.nav-prod-vertodos.active {
    background: rgba(40, 116, 82, 0.1);
}

.nav-prod-cats {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
    /* Una categoría de más no debe estirar el panel fuera de la pantalla */
    max-height: 15rem;
    overflow-y: auto;
}

.nav-prod-cat {
    display: block;
    padding: 0.42rem 1rem;
    color: var(--external-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.nav-prod-cat:hover,
.nav-prod-cat:focus {
    background: var(--g-hover-verde);
    color: var(--external-primary);
    padding-left: 1.25rem;
}

.nav-prod-cat.active {
    background: rgba(40, 116, 82, 0.08);
    color: var(--external-primary);
    font-weight: 600;
}

.nav-prod-vacio {
    margin: 0;
    padding: 0.45rem 1rem;
    color: var(--external-secondary-soft);
    font-size: 0.8rem;
    font-style: italic;
}

.external-cart-wrapper {
    flex-shrink: 0;
}

.external-cart-link {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--external-primary);
    color: var(--external-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.external-cart-link:hover,
.external-cart-link:focus {
    background-color: var(--g-hover-verde);
    color: var(--external-primary);
}

.external-cart-link svg {
    width: 1.35rem;
    height: 1.35rem;
}

/* ===== MOBILE MENU BTN ===== */

.mobile-menu-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(40, 116, 82, 0.4);
    border-radius: 0.5rem;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.mobile-menu-btn:hover,
.mobile-menu-btn:focus-visible {
    background: var(--g-hover-verde);
    border-color: var(--external-primary);
    outline: none;
}

.mobile-menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--external-primary);
    border-radius: 2px;
    transition: transform 0.28s ease, opacity 0.2s ease, width 0.28s ease;
    transform-origin: center;
}

.mobile-menu-btn.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.open span:nth-child(2) {
    opacity: 0;
    width: 0;
}

.mobile-menu-btn.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===== MOBILE NAV DRAWER ===== */


.mobile-nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    visibility: hidden;
    pointer-events: none;
}

.mobile-nav-drawer.open {
    visibility: visible;
    pointer-events: auto;
}

.mobile-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.32s ease;
}

.mobile-nav-drawer.open .mobile-drawer-backdrop {
    opacity: 1;
}

.mobile-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 82%;
    max-width: 320px;
    height: 100dvh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.34s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.25);
}

.mobile-nav-drawer.open .mobile-drawer-panel {
    transform: translateX(0);
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.mobile-drawer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.mobile-drawer-logo-img {
    height: 30px;
    width: auto;
    display: block;
}

.mobile-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    color: var(--external-secondary);
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mobile-drawer-close:hover {
    background: var(--g-hover-verde);
    border-color: var(--external-primary);
    color: var(--external-primary);
}

.mobile-drawer-nav {
    flex: 1;
    padding: 1.25rem 1.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
}

.mobile-nav-link {
    display: block;
    padding: 0.9rem 0.5rem;
    color: var(--external-secondary);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.01em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    transition: color 0.15s, padding-left 0.2s;
}

.mobile-nav-link:hover {
    color: var(--external-primary);
    padding-left: 0.85rem;
}

.mobile-nav-section {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.mobile-nav-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.9rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--external-secondary);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s;
}

.mobile-nav-section-toggle:hover {
    color: var(--external-primary);
}

.toggle-chevron {
    font-size: 0.8em;
    opacity: 0.6;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

/* Sólo el chevron propio de la sección: sin el `>` una sección abierta
   también rotaría los de sus ramas anidadas, que pueden estar cerradas. */
.mobile-nav-section.open > .mobile-nav-section-toggle > .toggle-chevron {
    transform: rotate(180deg);
}

/* El alto lo maneja layout.js sobre scrollHeight y lo deja en 'auto' al
   terminar: con acordeones anidados un max-height fijo recorta la rama
   interna al abrirse. */
.mobile-nav-section-content {
    overflow: hidden;
    height: 0;
    transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── El árbol: Productos › Especial|Estándar › categorías ─────────────────
   La jerarquía la dicen la sangría y una guía vertical por nivel, no cajas
   ni bordes. Como .mobile-nav-sublista envuelve el contenido de cada nivel,
   alcanza con ponerle la guía a ella: al anidarse, la sangría se acumula
   sola y cada rama queda colgando de la línea de su padre.

   El peso tipográfico también baja un escalón por nivel —Productos 600,
   la rama 600 más chica, la categoría 400— para que se lea de un vistazo
   qué contiene a qué. */
.mobile-nav-sublista {
    display: flex;
    flex-direction: column;
    margin-left: 0.5rem;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(40, 116, 82, 0.16);
}

/* La rama no lleva marco propio: la línea del padre ya la agrupa */
.mobile-nav-section--anidada {
    border-bottom: 0;
}

.mobile-nav-section--anidada > .mobile-nav-section-toggle {
    padding: 0.6rem 0.25rem;
    font-size: 0.9rem;
    color: var(--external-primary);
}

/* "Ver todos": el destino más pedido de cada rama. Va en verde y con la
   flecha, sin fondo ni caja — tres bloques teñidos apilados pesaban más
   que todo lo que colgaba de ellos. */
.mobile-nav-destacado {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    min-height: 42px;
    padding: 0.5rem 0.25rem;
    color: var(--external-primary);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.mobile-nav-destacado i {
    font-size: 0.8em;
    opacity: 0.6;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.mobile-nav-destacado:active {
    color: var(--external-primary-dark);
}

.mobile-nav-destacado:active i {
    transform: translateX(3px);
}

/* Hojas del árbol. Sin borde por fila ni chevron: son el último nivel y no
   llevan a ningún lado más profundo, así que la guía de la izquierda y el
   espaciado alcanzan para agruparlas. El área táctil se sostiene con
   min-height aunque la fila se vea liviana. */
.mobile-nav-cat {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.45rem 0.25rem;
    color: var(--external-secondary);
    font-size: 0.92rem;
    font-weight: 400;
    text-decoration: none;
}

.mobile-nav-cat:active {
    color: var(--external-primary);
}

.mobile-nav-vacio {
    margin: 0;
    padding: 0.5rem 0.25rem;
    color: var(--external-secondary-soft);
    font-size: 0.85rem;
    font-style: italic;
}

.mobile-drawer-footer {
    padding: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.mobile-nav-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--external-primary);
    border: 1.5px solid var(--external-primary);
    border-radius: 0.65rem;
    color: var(--external-white);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 0.2s, border-color 0.2s;
}

.mobile-nav-cart-btn:hover {
    background: var(--external-primary-dark);
    border-color: var(--external-primary-dark);
    color: var(--external-white);
}

.mobile-nav-cart-btn svg {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
}

.external-main {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.external-footer {
    background: #d0cfce;
    color: var(--external-secondary);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    padding: 2rem 0;
}

.external-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.1rem;
}

.external-footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.external-footer-logo-img {
    height: 44px;
    width: auto;
    display: block;
}

/* Redes: iconos sutiles, sin círculo */
.external-footer-social {
    display: flex;
    align-items: center;
    gap: 1.35rem;
}

.external-footer-social a {
    color: var(--external-secondary);
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.7;
    text-decoration: none;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.external-footer-social a:hover,
.external-footer-social a:focus {
    color: var(--external-primary);
    opacity: 1;
}

.external-footer-locations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 3.5rem;
}

.external-footer-loc {
    font-style: normal;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(63, 63, 63, 0.72);
}

.external-footer-loc-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(63, 63, 63, 0.48);
    margin-bottom: 0.25rem;
}

.external-footer-loc-addr {
    display: block;
}

.external-footer-loc-phone {
    display: inline-block;
    margin-top: 0.1rem;
    white-space: nowrap;
    color: rgba(63, 63, 63, 0.8);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.external-footer-loc-phone:hover {
    color: var(--external-primary);
}

.external-footer-copy {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.76rem;
    color: rgba(63, 63, 63, 0.5);
    letter-spacing: 0.02em;
}

/* Acceso interno discreto (personal) — pasa desapercibido para el cliente */
.external-footer-lock {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 0.9rem;
    color: rgba(63, 63, 63, 0.38);
    text-decoration: none;
    transition: color 0.15s ease;
}

.external-footer-lock:hover,
.external-footer-lock:focus {
    color: var(--external-primary);
}

/* Responsive adicional para tablets */
@media (max-width: 767.98px) {
    .external-logo-img {
        height: 32px;
    }

    .external-main {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .external-footer {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .external-footer-logo-img {
        height: 40px;
    }
}

/* Responsive para móviles pequeños */
@media (max-width: 575.98px) {
    /* Mismo padding que en escritorio: ahora la barra viaja con el scroll
       y en teléfono cada píxel que ocupa es alto de contenido perdido.
       También mantiene el alto real igual a --g-nav-h en todo el rango. */
    .external-navbar {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .external-logo-img {
        height: 28px;
    }

    .external-menu-btn {
        font-size: 0.95rem;
    }
    
    .external-cart-link {
        width: 42px;
        height: 42px;
    }
    
    .external-cart-link svg {
        width: 1.2rem;
        height: 1.2rem;
    }
}

/* ===== SECTION HEADER (compartido: contacto y otras vistas) ===== */
.section-header {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--external-secondary);
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--external-secondary-soft);
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive del section header compartido */
@media (max-width: 767.98px) {
    .section-title {
        font-size: 2rem;
    }
}

/* ===== BOTÓN FLOTANTE WHATSAPP ===== */

.whatsapp-float {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1000;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--g-whatsapp);
    color: #ffffff;
    border-radius: 50%;
    font-size: 1.7rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
    color: #ffffff;
    background-color: var(--g-whatsapp-dark);
    /* Único botón que crece al pasar: es flotante, no tiene :active
       con el que hundirse y no convive en línea con ningún otro. */
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.55);
}

.whatsapp-float i {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.whatsapp-float i::before {
    vertical-align: 0;
}

/* Tablets */
@media (max-width: 767.98px) {
    .whatsapp-float {
        right: 1.15rem;
        bottom: 1.15rem;
        width: 50px;
        height: 50px;
        font-size: 1.55rem;
    }
}

/* Móviles */
@media (max-width: 575.98px) {
    .whatsapp-float {
        right: 1rem;
        bottom: 1rem;
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }
}

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

    .whatsapp-float:hover,
    .whatsapp-float:focus {
        transform: none;
    }
}