Error de conexión: SQLSTATE[HY000] [2002] Operation not permitted
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<style>
    :root {
        --color-principal:#DBCCB6;
        --color-secundario: #c98952;
        --color-oscuro: #7b5a3e;
        --color-oscuro-2: #5f4029;
        --color-claro: #fffaf5;
        --color-acento: #f5d67f;
        --color-texto: #ffffff;
        --color-texto-oscuro: #4f3827;
    }

    * {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .menu-principal {
        width: 100%;
        background: #E0CCC8;
        box-shadow: 0 4px 12px rgba(0,0,0,0.18);
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    /* PARTE SUPERIOR */
    .menu-top {
        width: 100%;
        background: var(--color-principal);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 12px 22px;
    }

    .menu-logo a {
        display: flex;
        align-items: center;
        text-decoration: none !important;
    }

    .menu-logo img {
        max-width: 230px;
        height: auto;
        display: block;
        transition: opacity 0.5s ease-in-out;
    }

    .menu-busqueda {
        flex: 1;
        max-width: 650px;
    }

    .busqueda-form {
        display: flex;
        align-items: center;
        width: 100%;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        border: 2px solid rgba(255,255,255,0.45);
        box-shadow: 0 8px 18px -14px rgba(0,0,0,0.35);
    }

    .busqueda-form input {
        flex: 1;
        border: none;
        outline: none;
        padding: 14px 16px;
        font-size: 1rem;
        background: transparent;
        color: var(--color-texto-oscuro);
        width: 100%;
    }

    .busqueda-form input::placeholder {
        color: #8b7b70;
    }

    .btn-buscar {
        border: none;
        background: var(--color-acento);
        color: var(--color-oscuro);
        width: 58px;
        height: 48px;
        font-size: 1.1rem;
        cursor: pointer;
    }

    .menu-acciones {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .accion-btn {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: var(--color-oscuro);
        color: #fff;
        text-decoration: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        font-size: 1.1rem;
        transition: 0.2s ease;
    }

    .accion-btn:hover {
        background: var(--color-oscuro-2);
        color: #fff;
    }

    .accion-btn.favoritos i {
        color: #ffb08b;
    }

    .accion-btn.carrito {
        background: var(--color-acento);
        color: var(--color-oscuro);
    }

    .menu-toggle {
        display: none;
    }

    /* Botón de búsqueda exclusivo para móvil */
    .buscar-movil {
        display: none;
    }

    /* BARRA INFERIOR COMO COPPEL */
    .menu-bottom {
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0 18px;
        min-height: 58px;
        border-top: 1px solid rgba(0,0,0,0.06);
    }

    .menu-link,
    .dropdown-boton {
        min-height: 58px;
        padding: 0 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        background: transparent;
        color: var(--color-texto-oscuro);
        text-decoration: none !important;
        border: none;
        cursor: pointer;
        font-weight: 800;
        font-size: 0.98rem;
        white-space: nowrap;
        transition: 0.2s ease;
    }

    .menu-link i,
    .dropdown-boton i {
        color: var(--color-oscuro);
        font-size: 1rem;
    }

    .menu-link:hover,
    .dropdown-boton:hover {
        background: var(--color-claro);
        color: var(--color-oscuro);
    }

    .menu-dropdown {
        position: relative;
    }

    .dropdown-menu-custom {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 245px;
        background: #fff;
        border-radius: 0 0 18px 18px;
        box-shadow: 0 8px 18px rgba(0,0,0,0.22);
        padding: 8px 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: 0.2s ease;
        z-index: 2000;
    }

    .menu-dropdown:hover .dropdown-menu-custom,
    .menu-dropdown.activo .dropdown-menu-custom {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-menu-custom a {
        display: block;
        padding: 12px 16px;
        color: var(--color-texto-oscuro);
        text-decoration: none !important;
        font-weight: 700;
        font-size: 0.93rem;
        transition: 0.2s ease;
    }

    .dropdown-menu-custom a:hover {
        background: var(--color-claro);
        color: var(--color-oscuro);
    }

    /* MODAL BÚSQUEDA */
    .search-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
    }

    .search-modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .search-modal-content {
        width: 90%;
        max-width: 500px;
        position: relative;
        animation: modalFadeIn .4s ease;
    }

    @keyframes modalFadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px) scale(.95);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    .search-modal-form {
        display: flex;
        gap: 10px;
    }

    .search-modal-input {
        flex: 1;
        padding: 15px;
        border-radius: 0;
        border: none;
        font-size: 1.1rem;
        outline: none;
    }

    .search-modal-submit {
        width: 60px;
        border-radius: 0;
        border: none;
        background: #F2AB9D;
        color: #fff;
        cursor: pointer;
    }

    .search-modal-close {
        position: absolute;
        top: -90px;
        right: 0;
        background: none;
        border: none;
        color: white;
        font-size: 2.5rem;
        cursor: pointer;
    }

    /* TABLET */
    @media (max-width: 1100px) {
        .menu-top {
            flex-wrap: wrap;
        }

        .menu-logo {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .menu-busqueda {
            max-width: 100%;
            width: 100%;
        }

        .menu-acciones {
            width: 100%;
            justify-content: center;
        }

        .menu-bottom {
            overflow-x: auto;
            justify-content: flex-start;
        }
    }

    /* MÓVIL */
    @media (max-width: 768px) {
        .menu-top {
            width: 100%;
            padding: 0;
            gap: 0;
            flex-wrap: wrap;
        }

        .menu-logo {
            width: auto;
            flex: 1;
            padding: 10px 12px;
            justify-content: flex-start;
        }

        .menu-logo img {
            max-width: 160px;
        }

        .menu-toggle {
            display: flex;
            width: 54px;
            height: 54px;
            align-items: center;
            justify-content: center;
            background: var(--color-oscuro);
            color: #fff;
            border: none;
            font-size: 1.25rem;
            cursor: pointer;
        }

        .menu-acciones {
            width: auto;
            gap: 0;
        }

        .accion-btn {
            width: 54px;
            height: 54px;
            border-radius: 0;
        }
        /* En móvil se oculta el input del encabezado */
        .menu-busqueda {
            display: none !important;
        }

        /* Solo queda visible el botón de lupa */
        .buscar-movil {
            display: flex;
        }

        .menu-bottom {
            display: none;
            width: 100%;
            order: 5;
            padding: 0;
            min-height: auto;
            flex-direction: column;
            align-items: stretch;
            overflow: visible;
            border-top: none;
        }

        .menu-principal.menu-abierto .menu-bottom {
            display: flex;
        }

        .menu-link,
        .dropdown-boton {
            width: 100%;
            min-height: 54px;
            justify-content: flex-start;
            padding: 0 16px;
            border-top: 1px solid rgba(0,0,0,0.08);
            background: #fff;
        }

        .dropdown-boton {
            justify-content: space-between;
        }

        .menu-dropdown {
            width: 100%;
        }

        .dropdown-menu-custom {
            position: static;
            width: 100%;
            min-width: 100%;
            border-radius: 0;
            box-shadow: none;
            padding: 0;
            display: none;
            opacity: 1;
            visibility: visible;
            transform: none;
        }

        .menu-dropdown:hover .dropdown-menu-custom {
            display: none;
        }

        .menu-dropdown.activo .dropdown-menu-custom {
            display: block;
        }

        .dropdown-menu-custom a {
            padding: 13px 30px;
            background: #fffaf5;
            border-top: 1px solid #f1dfd2;
        }
    }

    @media (max-width: 420px) {
        .menu-logo img {
            max-width: 145px;
        }

        .accion-btn,
        .menu-toggle {
            width: 50px;
            height: 52px;
        }
    }
</style>

<nav class="menu-principal" id="menuPrincipal">

    <!-- PARTE SUPERIOR -->
    <div class="menu-top">

        <div class="menu-logo">
            <a href="home">
                <!-- ====================================================== -->
                <!-- LOGO DINÁMICO POR TEMPORADA (MODIFICADO) -->
                <img src="vistas/img/logo_siempre_ella_animado.gif" width="250" height="45" alt="Logo Siempre Ella">
                <!-- ====================================================== -->
            </a>
        </div>

        <!-- BUSCADOR PRINCIPAL FUNCIONANDO -->
        <div class="menu-busqueda">
            <form class="busqueda-form" action="index.php" method="GET">
                <input type="hidden" name="accion" value="resultados-busqueda">
                <input 
                    type="search" 
                    name="query" 
                    placeholder="Buscar por color, marca, detalle o largo"
                    required
                >
                <button type="submit" class="btn-buscar">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>

        <div class="menu-acciones">

            <!-- En móvil abre el buscador como modal -->
            <button
                type="button"
                class="accion-btn buscar-movil"
                id="searchToggle"
                title="Buscar"
                aria-label="Abrir buscador"
                aria-controls="searchOverlay"
                aria-expanded="false"
            >
                <i class="fas fa-search"></i>
            </button>

            <a href="lista-deseos" class="accion-btn favoritos" title="Favoritos">
                <i class="fas fa-heart"></i>
            </a>

            <a href="carrito" class="accion-btn carrito" title="Carrito" hidden>
                <i class="fas fa-cart-shopping"></i>
            </a>

            <button type="button" class="menu-toggle" id="btnMenuMovil">
                <i class="fa-solid fa-bars"></i>
            </button>

        </div>

    </div>

    <!-- ENLACES ABAJO COMO EN LA FOTO -->
    <div class="menu-bottom">

        <a href="home" class="menu-link">
            <i class="fa-solid fa-house"></i>
            Inicio
        </a>

        <div class="menu-dropdown">
            <button type="button" class="dropdown-boton">
                <span>
                    <i class="fa-solid fa-store"></i>
                    Boutiques
                </span>
                <i class="fa-solid fa-chevron-down"></i>
            </button>

            <div class="dropdown-menu-custom">
                <a href="sucursal-santiago">Sucursal Santiago Ixc</a>
                <a href="sucursal-tepic">Sucursal Tepic</a>
                <a href="sucursal-villahermosa">Sucursal Villahermosa</a>
                <a href="sucursal-huimanguillo">Sucursal Huimanguillo</a>
            </div>
        </div>

        <div class="menu-dropdown">
            <button type="button" class="dropdown-boton">
                <span>
                    <i class="fa-solid fa-tags"></i>
                    Categoría
                </span>
                <i class="fa-solid fa-chevron-down"></i>
            </button>

            <div class="dropdown-menu-custom">
                <a href="vestidos">Vestidos</a>
                <a href="conjuntos">Conjuntos</a>
                <a href="palazzos">Palazzos</a>
                <a href="faldas">Faldas</a>
            </div>
        </div>

        <a href="grupos" class="menu-link">
            <i class="fa-solid fa-users"></i>
            Grupos
        </a>

        <div class="menu-dropdown">
            <button type="button" class="dropdown-boton">
                <span>
                    <i class="fa-regular fa-circle-user"></i>
                    Mi cuenta                </span>
                <i class="fa-solid fa-chevron-down"></i>
            </button>

            <div class="dropdown-menu-custom">
                                    <a href="login-cliente">Iniciar sesión</a>
                            </div>
        </div>

        <div class="menu-dropdown">
            <button type="button" class="dropdown-boton">
                <span>
                    <i class="fa-solid fa-circle-info"></i>
                    Nosotros
                </span>
                <i class="fa-solid fa-chevron-down"></i>
            </button>

            <div class="dropdown-menu-custom">
                <a href="oportunidad-laboral">Oportunidad Laboral</a>
                <a href="ubicacion-sucursales">Ubicaciones de Sucursales</a>
            </div>
        </div>

        <a href="salon" class="menu-link" hidden>
            <i class="fa-solid fa-spa"></i>
            Nail Spa
        </a>

    </div>

</nav>

<!-- MODAL DE BÚSQUEDA -->
<div class="search-modal-overlay" id="searchOverlay" role="dialog" aria-modal="true" aria-hidden="true" aria-label="Buscador">
    <div class="search-modal-content">

        <form class="search-modal-form" action="index.php" method="GET">
            <input type="hidden" name="accion" value="resultados-busqueda">
            <input 
                type="search" 
                name="query" 
                id="searchInputModal"
                placeholder="Buscar prenda o modelo" 
                required
                class="search-modal-input"
            >
            <button type="submit" class="search-modal-submit">
                <i class="fas fa-search"></i>
            </button>
        </form>

        <button type="button" class="search-modal-close" id="closeSearch" aria-label="Cerrar buscador">&times;</button>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const btnMenuMovil = document.getElementById('btnMenuMovil');
    const menuPrincipal = document.getElementById('menuPrincipal');

    if (btnMenuMovil && menuPrincipal) {
        btnMenuMovil.addEventListener('click', function () {
            menuPrincipal.classList.toggle('menu-abierto');

            const icono = btnMenuMovil.querySelector('i');

            if (menuPrincipal.classList.contains('menu-abierto')) {
                icono.classList.remove('fa-bars');
                icono.classList.add('fa-xmark');
            } else {
                icono.classList.remove('fa-xmark');
                icono.classList.add('fa-bars');
            }
        });
    }

    const dropdowns = document.querySelectorAll('.menu-dropdown');

    dropdowns.forEach(dropdown => {
        const boton = dropdown.querySelector('.dropdown-boton');

        boton.addEventListener('click', function (e) {
            if (window.innerWidth <= 768) {
                e.preventDefault();

                dropdowns.forEach(item => {
                    if (item !== dropdown) {
                        item.classList.remove('activo');
                    }
                });

                dropdown.classList.toggle('activo');
            }
        });
    });

    const toggle = document.getElementById('searchToggle');
    const overlay = document.getElementById('searchOverlay');
    const close = document.getElementById('closeSearch');
    const input = document.getElementById('searchInputModal');

    if (toggle && overlay && close && input) {

        const abrirBuscador = () => {
            if (menuPrincipal) {
                menuPrincipal.classList.remove('menu-abierto');
            }

            if (btnMenuMovil) {
                const icono = btnMenuMovil.querySelector('i');
                icono.classList.remove('fa-xmark');
                icono.classList.add('fa-bars');
            }

            overlay.classList.add('active');
            overlay.setAttribute('aria-hidden', 'false');
            toggle.setAttribute('aria-expanded', 'true');
            document.body.style.overflow = 'hidden';

            setTimeout(() => input.focus(), 250);
        };

        const cerrarBuscador = () => {
            overlay.classList.remove('active');
            overlay.setAttribute('aria-hidden', 'true');
            toggle.setAttribute('aria-expanded', 'false');
            document.body.style.overflow = '';
            toggle.focus();
        };

        toggle.addEventListener('click', e => {
            e.preventDefault();
            abrirBuscador();
        });

        close.addEventListener('click', cerrarBuscador);

        overlay.addEventListener('click', e => {
            if (e.target === overlay) {
                cerrarBuscador();
            }
        });

        document.addEventListener('keydown', e => {
            if (e.key === 'Escape' && overlay.classList.contains('active')) {
                cerrarBuscador();
            }
        });
    }

    // ============================================================
    // CAMBIO DE LOGO POR TEMPORADA (VERSIÓN JAVASCRIPT - RESPUESTA)
    // ============================================================
    function cambiarLogoPorTemporada() {
        const hoy = new Date();
        const mes = String(hoy.getMonth() + 1).padStart(2, '0');
        const dia = String(hoy.getDate()).padStart(2, '0');
        const fechaActual = `${mes}-${dia}`;
        
        // Configuración de temporadas con tus logos
        const temporadas = [
            {
                nombre: '15 años',
                inicio: '09-01',
                fin: '09-30',
                logo: 'vistas/img/logos_pagina_menu/logo_mexico.png'
            },
            {
                nombre: 'Diademuertos',
                inicio: '10-25',
                fin: '11-05',
                logo: 'vistas/img//logos_pagina_menu/logo_dia_muertos.png'
            },
            {
                nombre: 'Navidad',
                inicio: '12-01',
                fin: '01-10',
                logo: 'vistas/img//logos_pagina_menu/logo_navidad.png'
            }
        ];
        
        // Función para verificar si fecha está en rango
        function estaEnRango(fecha, inicio, fin) {
            if (inicio > fin) {
                // Para temporadas que cruzan año (Navidad)
                return fecha >= inicio || fecha <= fin;
            }
            return fecha >= inicio && fecha <= fin;
        }
        
        // Buscar temporada activa
        let logoEncontrado = null;
        for (const temp of temporadas) {
            if (estaEnRango(fechaActual, temp.inicio, temp.fin)) {
                logoEncontrado = temp.logo;
                break;
            }
        }
        
        // Si no hay temporada, usar logo normal
        const logoFinal = logoEncontrado || 'vistas/img/logo_siempre_ella_animado.gif';
        
        // Aplicar el cambio al logo
        const logoImg = document.querySelector('.menu-logo img');
        if (logoImg) {
            logoImg.src = logoFinal;
            console.log(`🔄 Logo cambiado a: ${logoFinal}`); // Para depuración
        }
    }

    // Ejecutar el cambio de logo
    cambiarLogoPorTemporada();
    // ============================================================
});
</script>
Error de conexión: SQLSTATE[HY000] [2002] Operation not permitted