/* =============================================
   EDMAGO - Base Styles
   ============================================= */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Body defaults */
body {
    font-family: var(--site-font-body);
    color: var(--site-color-text);
    background-color: var(--site-color-bg);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--site-font-titles);
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Footer ── */
footer .footer-muted {
    color: var(--site-color-accent);
    opacity: 0.65;
}
footer .border-t {
    border-color: rgba(var(--site-color-accent-rgb), 0.2);
}

/* ── Navbar: fondo + texto configurables desde Diseño → Sitio Público ──
   Easing unificado: cubic-bezier(0.4, 0, 0.2, 1) (material standard) en 0.5s
   para que el colapso se sienta continuo en lugar de "instantáneo".
   Mantenemos align-items: flex-end SIEMPRE (también en scrolled) y solo
   transicionamos padding-bottom — así los items del menú se desplazan junto
   con la altura sin un salto discreto a "center". */
#main-nav {
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--site-navbar-color);
}
#main-nav .nav-link {
    color: var(--site-navbar-text-color);
    transition: opacity 0.2s;
}
#main-nav .nav-link:hover {
    opacity: 0.75;
}

/* Inner container: expandido al cargar la página */
#main-nav .nav-inner {
    height: 6.875rem; /* 110px de alto total: 70px logo + 24px pb + 16px top */
    align-items: flex-end;
    padding-bottom: 1.5rem;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                padding-bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wrapper del logo: stack relativo para crossfade entre principal e isotipo.
   La altura del wrapper anima; las imágenes hijas usan height:100% y crossfade
   por opacidad. El isotipo se posiciona absolute encima del principal. */
#main-nav .nav-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 70px;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#main-nav .nav-logo {
    display: block;
    height: 100%;
    width: auto;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#main-nav .nav-logo-expanded {
    opacity: 1;
}
#main-nav .nav-logo-collapsed {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
}

#main-nav .nav-logo-text {
    font-size: 1.5rem;
    transition: font-size 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled: la nav se compacta + suma sombra. padding-bottom 0.75rem deja al
   logo (2.5rem) ópticamente centrado dentro del contenedor de 4rem — equivale
   al align-items:center anterior pero sin discontinuidad. */
#main-nav.nav-scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
#main-nav.nav-scrolled .nav-inner {
    height: 4rem;
    padding-bottom: 0.75rem;
}
#main-nav.nav-scrolled .nav-logo-wrap {
    height: 2.5rem;
}
#main-nav.nav-scrolled .nav-logo-expanded {
    opacity: 0;
}
#main-nav.nav-scrolled .nav-logo-collapsed {
    opacity: 1;
}
#main-nav.nav-scrolled .nav-logo-text {
    font-size: 1.25rem;
}

/* Mobile: nav siempre compacta + isotipo siempre visible si existe.
   No hay transición porque no hay cambio de estado — fijamos los valores
   finales directamente. */
@media (max-width: 1023px) {
    #main-nav .nav-inner {
        height: 4rem;
        padding-bottom: 0.75rem;
    }
    #main-nav .nav-logo-wrap {
        height: 2.5rem;
    }
    #main-nav .nav-logo-expanded {
        display: none;
    }
    #main-nav .nav-logo-collapsed {
        position: static;
        transform: none;
        opacity: 1;
    }
    #main-nav .nav-logo-text {
        font-size: 1.25rem;
    }
}

/* Variante "transparente sobre el hero" — toggle desde admin → Diseño → Sitio Público.
   El navbar arranca transparente; al hacer scroll vuelve a su color sólido (.nav-scrolled).
   Para que se vea correctamente, los heroes deben extenderse detrás del navbar
   (margin-top negativo aplicado solo cuando este modo está activo). */
body.navbar-transparent #main-nav {
    background-color: transparent;
    box-shadow: none;
}
body.navbar-transparent #main-nav.nav-scrolled {
    background-color: var(--site-navbar-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
body.navbar-transparent .page-hero,
body.navbar-transparent #hero-slider,
body.navbar-transparent .home-hero-placeholder {
    margin-top: -6.875rem;
}
body.navbar-transparent .page-hero {
    padding-top: calc(6.875rem + 3rem);
}

/* Compatibilidad: páginas que declaran .nav-force-primary (login, registro, 404).
   Pisan al navbar con primario, ignorando navbar_color. */
.nav-force-primary #main-nav {
    background-color: var(--site-color-primary) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Dropdown: siempre fondo blanco con texto normal */
#main-nav .nav-dropdown {
    background-color: white;
}
#main-nav .nav-dropdown a {
    color: var(--site-color-text) !important;
}
#main-nav .nav-dropdown a:hover {
    color: var(--site-color-primary) !important;
    background-color: #f9fafb;
}

/* Botón Ingresar */
#main-nav .btn-nav-login {
    border: 2px solid var(--site-color-accent);
    color: var(--site-color-accent);
    background-color: transparent;
    border-radius: 0.5rem;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
}
#main-nav .btn-nav-login:hover {
    background-color: var(--site-color-accent);
    color: var(--site-color-primary);
}
#main-nav.nav-scrolled .btn-nav-login {
    border-color: white;
    color: white;
}
#main-nav.nav-scrolled .btn-nav-login:hover {
    background-color: white;
    color: var(--site-color-primary);
}

/* Menú móvil: siempre fondo primario */
#mobile-menu {
    background-color: var(--site-color-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
#mobile-menu a {
    color: var(--site-color-accent);
}
#mobile-menu a:hover {
    opacity: 0.8;
}

/* ── Page hero banner (secciones) ── */
/* Se sienta debajo del navbar (que ahora tiene color de footer sólido). Sin overlap negativo. */
.page-hero {
    position: relative;
    overflow: hidden;
    /* Color y opacidad configurables desde el admin → Diseño → Sitio Público → Banner superior.
       La var --site-banner-color-rgba ya incluye la opacidad (pre-computada en PHP).
       Cuando opacity < 100, deja pasar el fondo del body (--site-color-bg) por detrás. */
    background-color: var(--site-banner-color-rgba);
    color: white;
    padding: 3rem 0;
}

/* Cuando tiene imagen de fondo configurada — hero más alto para que la imagen
   respire y el título tenga protagonismo. Sin imagen el padding original (3rem)
   alcanza para un hero compacto. */
.page-hero.page-hero-img {
    background: none;
    background-color: var(--site-color-primary);
    min-height: 220px;
}

.page-hero h1 {
    font-size: 2.5rem;
    /* font-weight lo controlan las clases Tailwind del template (font-bold / font-normal) */
}

/* Subtítulo del hero — usado por las páginas de lista (categoría con descripción).
   Truncado a 3 líneas con elipsis: si una descripción es larguísima, el hero no
   deja de ser hero. Centrado horizontalmente con max-width acotado para que la
   línea de lectura sea cómoda incluso en pantallas anchas. */
.page-hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    max-width: 42rem;
    margin: 0.75rem auto 0;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    /* line-clamp: 3 líneas máx con "…" */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hero extendido cuando hay subtítulo: más respiro arriba/abajo y min-height
   mayor para imagen de fondo, sin pisar el search bar flotante que se sienta
   sobre el borde inferior con margin-top: -4.5rem. */
.page-hero.page-hero-with-subtitle {
    padding: 4rem 0;
}
.page-hero.page-hero-with-subtitle.page-hero-img {
    min-height: 300px;
}

/* Breadcrumbs dentro del hero: color de acento */
.page-hero nav       { color: var(--site-color-accent); }
.page-hero nav a     { color: var(--site-color-accent); opacity: 0.75; }
.page-hero nav a:hover { opacity: 1; }
.page-hero nav span  { color: var(--site-color-accent); }
.page-hero nav i     { color: var(--site-color-accent); opacity: 0.5; }

/* ── Search bar flotante (pisa borde inferior del hero/slider) ── */
.search-bar-hero-float {
    position: relative;
    z-index: 20;
    margin-top: -4.5rem;
    padding: 0 1rem 0;
}

.search-bar-hero-float .search-card {
    max-width: 48rem;
    margin: 0 auto;
    background: var(--site-color-primary);
    border-radius: 1rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    padding: 1.75rem 2rem;
}

.search-bar-hero-float .search-card h2 {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--site-color-accent);
    text-align: center;
    margin-bottom: 1rem;
}

/* Compensar el espacio robado por el margin negativo del buscador */
.search-bar-hero-float + div {
    padding-top: 5rem;
}

/* Background pattern (waves) */
.bg-wave {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(255,255,255,0.05)' d='M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,224C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
}

/* Selection color */
::selection {
    background-color: var(--site-color-primary);
    color: white;
}

/* =============================================
   Navbar Mega Menu + Search Panel
   ---
   Ambos paneles se posicionan absolute relativo al <nav id="main-nav"> (sticky),
   abarcando todo el ancho del navbar (left:0 right:0). Comparten el patrón de
   visibilidad (.is-open) y transición. Solo uno visible a la vez — el JS del
   header los toggleea mutuamente.
   ============================================= */
.nav-mega-menu,
.nav-search-panel {
    /* position: fixed (no absolute) — el panel se ancla al viewport, no al nav.
       Antes era `absolute; top: 100%` adentro del nav sticky: visibility:hidden
       no saca al elemento del layout, así que el panel cerrado (≈2200px de alto
       por la grilla de categorías) inflaba el scrollHeight del documento ~390px
       más allá del footer. Eso se veía como una franja gris (--site-color-bg)
       debajo del footer en cualquier página cuyo contenido no llegara a tapar
       ese fantasma (Contacto, Quiénes Somos, Mi Cuenta). Con `fixed`, el panel
       no contribuye al scrollHeight cuando está cerrado. El top se sincroniza
       con la altura del nav abajo. */
    position: fixed;
    top: 6.875rem;
    left: 0;
    right: 0;
    /* El panel se confina al alto disponible debajo del nav. Si el contenido
       (categorías, head, footer-CTA) excede ese alto, el propio panel scrollea
       internamente — única fuente de scroll, evitando scrolls anidados con las
       columnas. `overscroll-behavior: contain` evita que llegar al borde del
       scroll del panel "rebote" al scroll de la página. */
    max-height: calc(100vh - 6.875rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Frosted glass: blanco al 85% + blur sobre el contenido por detrás.
       Comunica claramente "esto está flotando encima" sin necesidad de scrim.
       Fallback automático: si el browser no soporta backdrop-filter, la regla
       de abajo (background) pisa con blanco semi-opaco igual visible.
       Valores calibrados para que el efecto se note (15% de transparencia es
       suficiente para percibir formas detrás) y el blur deje ver siluetas en
       vez de borronear todo a un promedio uniforme. */
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 8px 16px -6px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    /* `top` y `max-height` transicionan en sincronía con el cambio de altura
       del nav (0.5s, mismo easing material que usa el nav). Las otras
       propiedades mantienen el fade de 0.2s ya existente. */
    transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s ease,
                top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 40;
}

/* Cuando el nav se colapsa al hacer scroll, el panel sigue al nav: `top` y
   `max-height` se recalculan al alto del nav colapsado (4rem). Mismo valor
   que la altura del .nav-inner colapsado. */
#main-nav.nav-scrolled .nav-mega-menu,
#main-nav.nav-scrolled .nav-search-panel {
    top: 4rem;
    max-height: calc(100vh - 4rem);
}

/* Mobile: el nav nace ya colapsado (ver regla más arriba), entonces el panel
   también queda en `top: 4rem` con el `max-height` correspondiente. */
@media (max-width: 1023px) {
    .nav-mega-menu,
    .nav-search-panel {
        top: 4rem;
        max-height: calc(100vh - 4rem);
    }
}
/* Fallback: browsers viejos (Safari < 14) sin backdrop-filter caen a blanco
   menos transparente — sin el blur el texto perdería contraste si dejáramos
   0.85; con 0.95 mantenemos legibilidad y aún se nota algo de transparencia. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-mega-menu,
    .nav-search-panel {
        background: rgba(255, 255, 255, 0.95);
    }
}
.nav-mega-menu.is-open,
.nav-search-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Chevron del trigger: rota 180° cuando el panel está abierto.
   El atributo aria-expanded del button es la fuente de verdad. */
.nav-megamenu-chevron {
    transition: transform 0.2s ease;
}
#nav-megamenu-trigger[aria-expanded="true"] .nav-megamenu-chevron {
    transform: rotate(180deg);
}

/* Header del panel: título "Categorías" + CTA "Ver todos los productos".
   Reemplaza al chip "Cerrar" de la versión anterior. */
.megamenu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.megamenu-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #6b7280;
    margin: 0;
}
.megamenu-head-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.125rem;
    background: var(--site-color-primary);
    color: var(--site-color-accent);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s, gap 0.2s ease;
}
.megamenu-head-cta:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    gap: 0.75rem;
}

/* Grid auto-adaptable. Cada columna mínimo 220px → en max-w-7xl (≈1248px) caben
   hasta 5 cols; en pantallas medianas 3-4; en mobile chico 2. Gap consistente
   con el espaciado vertical entre filas.
   —— REVERT: si querés volver al layout de 4 cols fijas, en el HTML cambiar
      la clase `megamenu-grid` por `grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-8 gap-y-6` —— */
.megamenu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    column-gap: 2rem;
    row-gap: 1.5rem;
    /* `align-items: start` evita que el grid estire todas las cards al alto de
       la más alta — cada una se queda en su altura natural. Sin esto, una sola
       categoría grande inflaba toda la fila. */
    align-items: start;
}

/* Mega menu: columnas */
.megamenu-col {
    min-width: 0;
}
.megamenu-col-header {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--site-color-primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    padding-bottom: 0.5rem;
    margin-bottom: 0.625rem;
    border-bottom: 2px solid var(--site-color-primary);
    transition: opacity 0.15s, gap 0.2s ease;
    text-decoration: none;
}
.megamenu-col-header > i {
    flex-shrink: 0;
}
.megamenu-col-header:hover {
    opacity: 0.75;
    gap: 0.625rem;
}
.megamenu-col-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* No scroll per columna: el desborde lo maneja el panel completo
       (.nav-mega-menu tiene max-height/overflow-y). Tener scroll acá generaba
       scrolls anidados con el del panel — UX confusa. El cap de 8 items por
       columna desde PHP mantiene cada columna en un alto razonable. */
}
.megamenu-col-list li {
    margin: 0;
}
.megamenu-col-list a {
    display: block;
    padding: 0.5rem 0;
    color: #4b5563;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s, padding-left 0.15s;
}
.megamenu-col-list a:hover {
    color: var(--site-color-primary);
    padding-left: 0.375rem;
}

/* Link "+ N más" al final de la lista cuando hay descendientes por encima del cap.
   Discreto pero claramente afordancia de "hay más, click para ver". */
.megamenu-col-list a.megamenu-col-more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    padding: 0.375rem 0;
    color: var(--site-color-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease;
}
.megamenu-col-list a.megamenu-col-more:hover {
    gap: 0.625rem;
    padding-left: 0;  /* Anula el padding-left:0.375rem del hover genérico. */
}

/* Footer del mega menu: CTA pill destacado en lugar de un link plano. */
.megamenu-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    text-align: center;
}
.megamenu-footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: var(--site-color-primary);
    color: var(--site-color-accent);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s, gap 0.2s ease;
}
.megamenu-footer-cta:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    gap: 0.75rem;
}

/* Indicador "hay más para scrollear" del mega menu.
   ---
   Vive como último hijo del panel (.nav-mega-menu). `position: sticky; bottom: 0`
   lo mantiene pegado al borde inferior visible del panel mientras queda contenido
   por delante; `margin-top: -96px` evita que el elemento sume altura al flow
   (sin esto, generaría un hueco vacío al final del scroll).
   El gradiente blanco va de transparente arriba a casi-opaco abajo: vela
   suavemente las últimas filas de categorías. Compatible con el frosted glass
   del panel (rgba(255,255,255,0.85) + backdrop-blur).
   Visibilidad la maneja el JS del header con las clases `has-scroll-hint`
   (hay overflow) y `at-bottom` (usuario llegó al fondo) sobre el panel. */
.megamenu-scroll-hint {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 96px;
    margin-top: -96px;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.875rem;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.75) 60%,
        rgba(255, 255, 255, 0.95) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 5;
}
.nav-mega-menu.has-scroll-hint .megamenu-scroll-hint {
    opacity: 1;
}
.nav-mega-menu.has-scroll-hint.at-bottom .megamenu-scroll-hint {
    opacity: 0;
}
/* Pill circular tintado en color de marca que aloja al chevron. Es un <button>
   clickeable: al click, el JS scrollea el panel suave hacia abajo. El fondo
   usa el primary del tema al 20% vía `color-mix()` — así si el admin cambia
   el color primario, el pill se adapta automáticamente. El backdrop-blur
   mantiene el lenguaje frosted del mega menu. La animación de bounce vive
   acá (no en el icono) para que sea el chip entero el que se mueve — más
   legible y con más presencia visual.
   `pointer-events: auto` revierte el `none` heredado del wrapper `.megamenu-scroll-hint`
   (necesario para que el fade no bloquee hovers en categorías parcialmente veladas). */
.megamenu-scroll-hint-pill {
    /* reset de defaults de <button> */
    padding: 0;
    font: inherit;
    cursor: pointer;
    pointer-events: auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--site-color-primary, #1f2937) 20%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--site-color-primary, #1f2937) 25%, transparent);
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.14),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
    animation: megamenu-scroll-hint-bounce 1.8s ease-in-out infinite;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Hover: intensifica el tinte (20% → 35%) y profundiza la sombra. Pausa el
   bounce para que el target esté estable cuando el usuario va a clickear. */
.megamenu-scroll-hint-pill:hover {
    background: color-mix(in srgb, var(--site-color-primary, #1f2937) 35%, transparent);
    border-color: color-mix(in srgb, var(--site-color-primary, #1f2937) 40%, transparent);
    box-shadow: 0 10px 22px -4px rgba(0, 0, 0, 0.18),
                0 4px 8px -2px rgba(0, 0, 0, 0.08);
    animation-play-state: paused;
}
/* Active: pequeño "pulse" al click — sombra más chata simula que se presionó. */
.megamenu-scroll-hint-pill:active {
    box-shadow: 0 3px 8px -2px rgba(0, 0, 0, 0.14),
                0 1px 2px -1px rgba(0, 0, 0, 0.06);
}
/* Focus visible: ring sutil para teclado (no roba protagonismo al hover). */
.megamenu-scroll-hint-pill:focus-visible {
    outline: 2px solid var(--site-color-primary, #1f2937);
    outline-offset: 3px;
}
/* Chevron dentro del pill: color primary a alta opacidad y stroke más grueso
   (2.5 en lugar del 2 default de lucide) para ganar legibilidad sin agrandar
   el ícono. Incluye `svg` además de `i` porque lucide.createIcons() reemplaza
   el `<i>` por un `<svg>` real al inicializar. */
.megamenu-scroll-hint-pill i,
.megamenu-scroll-hint-pill svg {
    color: var(--site-color-primary, #1f2937);
    opacity: 0.95;
    stroke-width: 2.5;
}
@keyframes megamenu-scroll-hint-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
    .megamenu-scroll-hint-pill {
        animation: none;
    }
}

/* Search panel: suggestion items (reusados desde components.css existentes via clases utilitarias). */
.nav-search-panel #nav-search-suggestions .suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}
.nav-search-panel #nav-search-suggestions .suggestion-item:hover {
    background-color: #f5f5f5;
}
.nav-search-panel #nav-search-suggestions .suggestion-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 0.25rem;
    background: #f9fafb;
    flex-shrink: 0;
}