/* ============================================================
   MEGA MENÚ — COMPARAMÁS — CSS
   ------------------------------------------------------------
   Paleta tomada de tu sitio actual:
   - Barra de navegación azul marino
   - Acento celeste (hover de "Tecnología" en tu navbar)
   - Amarillo del botón "Mi Cuenta"

   RESPONSIVE: reescrito con breakpoints explícitos en vez de
   calc()/min() basados en variables, que es lo que rompía el
   ancho en pantallas chicas. En mobile el panel de categorías
   y el de contenido ocupan SIEMPRE 100% del viewport cada uno;
   nunca se calcula un ancho "restante".
============================================================= */

:root {
    --cm-navy:          #1c2b6b;   /* azul marino de tu barra de navegación */
    --cm-navy-soft:     #24338a;   /* hover dentro del panel oscuro */
    --cm-accent:        #3ea8e0;   /* celeste, igual al hover "Tecnología" */
    --cm-yellow:        #f5a623;   /* amarillo del botón "Mi Cuenta" */
    --cm-bg-light:      #ffffff;
    --cm-bg-page:       #f4f5f7;
    --cm-text-dark:     #1d1d1d;
    --cm-text-secondary:#5b5f6b;
    --cm-text-light:    #ffffff;
    --cm-text-muted:    #aab1d6;
    --cm-border:        #e7e8ee;

    --cm-menu-width-cats: 300px;
    --cm-menu-width-content: 880px;
    --cm-menu-z: 2000;

    --cm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cm-dur-panel: 0.38s;
    --cm-dur-content: 0.28s;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ---------- Botón hamburguesa ---------- */
.cm-burger-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 10px;
    color: #1c2b6b;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: 'Cairo', sans-serif;
}

.cm-burger-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 22px;
}

.cm-burger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transition: background 0.15s ease;
}

.cm-burger-btn:hover .cm-burger-icon span {
    background: var(--cm-accent);
}

/* ---------- Overlay ---------- */
.cm-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 35, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: calc(var(--cm-menu-z) - 1);
}

.cm-menu-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* ---------- Contenedor general del menú ---------- */
/* Ya NO tiene un ancho propio: es solo un wrapper posicionado
   en fixed que envuelve a sus dos paneles hijos. Cada panel
   define su propio ancho según el breakpoint. Esto evita los
   desbordes que pasaban al calcular "lo que sobra" del viewport. */
.cm-mega-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--cm-menu-z);
    display: flex;
    align-items: stretch;
    pointer-events: none; /* el wrapper nunca bloquea clics; solo sus paneles hijos lo hacen */
}

/* Los paneles SÍ deben recibir clics (para poder cerrarlos, navegar, etc),
   pero solo dentro de su propia área, y solo mientras el menú está abierto.
   Cuando está cerrado, aunque sigan posicionados en pantalla (con opacity:0
   durante la transición), no deben bloquear clics en el contenido de la
   página que hay debajo. */
.cm-menu-categories,
.cm-menu-content {
    pointer-events: none;
}

.cm-mega-menu.is-active .cm-menu-categories,
.cm-mega-menu.is-active .cm-menu-content {
    pointer-events: auto;
}

/* ---------- PANEL IZQUIERDO: departamentos ---------- */
.cm-menu-categories {
    width: var(--cm-menu-width-cats);
    max-width: 85vw; /* nunca tapa toda la pantalla en mobile chico */
    flex-shrink: 0;
    background: var(--cm-navy);
    height: 100%;
    overflow-y: auto;
    box-shadow: 6px 0 28px rgba(10, 14, 35, 0.25);

    opacity: 0;
    transform: translateX(-24px);
    transition: opacity var(--cm-dur-panel) var(--cm-ease),
                transform var(--cm-dur-panel) var(--cm-ease);
}

.cm-mega-menu.is-active .cm-menu-categories {
    opacity: 1;
    transform: translateX(0);
}

.cm-menu-categories-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cm-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    color: var(--cm-text-light);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.cm-menu-close:hover {
    background: var(--cm-accent);
}

.cm-menu-categories-title {
    color: var(--cm-text-light);
    font-weight: 700;
    font-size: 1.02rem;
}

.cm-cat-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.cm-cat-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 8px 16px;
}

.cm-cat-item {
    position: relative;
}

.cm-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 20px;
    color: var(--cm-text-muted);
    text-decoration: none;
    font-size: 0.93rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cm-cat-arrow {
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cm-cat-item:hover .cm-cat-link,
.cm-cat-item.is-active .cm-cat-link {
    background: var(--cm-navy-soft);
    border-left-color: var(--cm-accent);
    color: #ffffff;
}

.cm-cat-item.is-active .cm-cat-arrow {
    opacity: 1;
    color: var(--cm-accent);
    transform: translateX(2px);
}

/* ---------- PANEL DERECHO: contenido del mega menú ---------- */
/* En desktop/tablet: ancho fijo razonable (--cm-menu-width-content),
   nunca calculado a partir del viewport. En mobile: 100% propio,
   superpuesto en fixed por encima de todo. */
.cm-menu-content {
    width: var(--cm-menu-width-content);
    max-width: calc(100vw - var(--cm-menu-width-cats));
    background: var(--cm-bg-light);
    height: 100%;
    overflow-y: auto;
    padding: 40px 60px;
    font-family: 'Cairo', sans-serif;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-12px);
    transition: opacity var(--cm-dur-content) var(--cm-ease),
                transform var(--cm-dur-content) var(--cm-ease),
                visibility 0s linear;
}

.cm-menu-content.is-revealed {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.cm-menu-content-search {
    margin-bottom: 24px;
}

.cm-menu-search {
    display: flex;
    border: 1px solid var(--cm-border);
    border-radius: 999px;
    overflow: hidden;
    max-width: 420px;
}

.cm-menu-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 9px 16px;
    font-size: 0.9rem;
    color: var(--cm-text-dark);
}

.cm-menu-search-btn {
    border: none;
    background: transparent;
    color: var(--cm-text-secondary);
    padding: 0 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.cm-menu-search-btn:hover {
    color: var(--cm-accent);
}

/* ---------- Paneles individuales por categoría ---------- */
.cm-mega-panel {
    display: none;
}

.cm-mega-panel.is-active {
    display: block;
    animation: cmPanelFade 0.18s ease;
}

@keyframes cmPanelFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cm-mega-header {
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--cm-navy);
}

.cm-mega-header-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cm-navy);
}

.cm-mega-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 28px;
}

li.sub {
    font-size: 0.9rem;
}
.cm-mega-col-list li.sub::before {
    content: "↑ ";
    color: #999;
}

/* opcional, si quieres indentar todo el bloque de submarcas */
.cm-mega-col-list li.sub {
    padding-left: 4px;
}

/* Ícono representando a TODO el grupo (ej. "Fragancias"), arriba
   del título de la columna — ya no hay ícono por cada link suelto. */
.cm-mega-col-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 10px;
}

.cm-mega-col-title {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--cm-text-dark);
}

.cm-mega-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cm-mega-col-list a {
    color: var(--cm-text-secondary);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.3;
}

.cm-mega-col-list a:hover {
    color: var(--cm-navy);
    text-decoration: underline;
}

/* ---------- Scrollbars discretos ---------- */
.cm-menu-categories::-webkit-scrollbar,
.cm-menu-content::-webkit-scrollbar {
    width: 8px;
}

.cm-menu-categories::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}

.cm-menu-content::-webkit-scrollbar-thumb {
    background: #d8d8d8;
    border-radius: 4px;
}

/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   Tres tramos:
   - Desktop (>992px): paneles lado a lado, anchos fijos.
   - Tablet (577px–992px): panel de categorías un poco más
     angosto; el de contenido ocupa el resto sin desbordar.
   - Mobile (<=576px): drill-down a pantalla completa. Cada
     panel ocupa 100vw; el de contenido se monta ENCIMA del
     de categorías (position: fixed) en vez de ir al costado.
============================================================= */

@media (max-width: 992px) {
    .cm-menu-categories {
        width: 240px;
    }

    .cm-menu-content {
        width: 100%;
        max-width: calc(100vw - 240px);
        padding: 20px 22px 28px;
    }
}

@media (max-width: 576px) {
    .cm-menu-categories {
        width: 100vw;
        max-width: 100vw;
    }

    .cm-menu-content {
        position: fixed;
        inset: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100%;
        z-index: 1; /* por encima del panel de categorías al revelarse */
        transform: translateX(100%);
        padding: 16px;
    }

    .cm-menu-content.is-revealed {
        transform: translateX(0);
    }

    .cm-mega-columns {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .cm-mega-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: none;
        color: var(--cm-navy);
        font-weight: 600;
        font-size: 0.9rem;
        padding: 4px 0 18px;
        cursor: pointer;
    }
}

@media (min-width: 577px) {
    .cm-mega-back {
        display: none;
    }
}