*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{

    scroll-behavior:smooth;

    scroll-padding-top:90px;

}
img{

    user-select:none;

}

body{
    font-family:'Poppins',sans-serif;
    background:#111;
    color:white;
}

.hero{
    position: relative;
    min-height:70vh;
    display:flex;
    flex-direction:column;
}
.hero-overlay{

    display:none !important;

}
.hero-logo-fondo{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:0;

    pointer-events:none;

}

.hero-logo-fondo img{

    width:480px;

    opacity:.30;

    filter:brightness(1.1);

    user-select:none;

}
/*=====================================
    HERO 3 COLUMNAS
======================================*/

.hero-contenido{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    max-width:1350px;

    width:100%;

    margin:0 auto;

    padding:0 40px;

}

.hero-panel{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}
.hero-panel h1{

    font-family:'Playfair Display', serif;

    font-size:48px;

    font-weight:700;

    color:#d4af37;

    line-height:1.15;

    letter-spacing:.5px;

    margin-bottom:20px;

    text-shadow:0 3px 12px rgba(0,0,0,.45);

}

.hero-imagen{

    width:260px;

    height:370px;

    background:#ffffff20;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:18px;

    flex-shrink:0;
    overflow:hidden;

}
.hero-imagen img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:20px;

    display:block;

    transform:scale(1);

    transition: opacity .6s ease;

animation: heroZoom 6s linear forwards;

}
.hero-imagen img.oculta{

    opacity:0;

}
/*=====================================
ANIMACIÓN HERO MÓVIL
======================================*/

.hero-mobile-img img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transform:scale(1);

    transition:opacity .6s ease;

    animation:heroZoom 6s linear forwards;

}

.hero-mobile-img img.oculta{

    opacity:0;

}
.menu{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:10000;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;

    padding:20px 8%;

}

.logo{

    color:#d4af37;

    font-size:30px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

    white-space:nowrap;

}

.logo:hover{

    color:#f5d76e;

}

.menu ul{

    display:flex;

    list-style:none;

    gap:25px;

    margin:0;

    padding:0;

    flex:0 0 auto;

}
/*====================================
        BUSCADOR HEADER
====================================*/

.buscador-header{

    flex:1;

    max-width:350px;
    position:relative;
    z-index: 1001;

    display:flex;

    align-items:center;

    background:#ffffff;

    border-radius:30px;

    padding:8px 15px;

    box-shadow:0 4px 10px rgba(0,0,0,.15);
    transition:.3s;

}
.buscador-header:focus-within{

    border:2px solid #d4af37;

    box-shadow:0 0 15px rgba(212,175,55,.35);

}

.buscador-header i{

    color:#d4af37;

    font-size:18px;

}

.buscador-header input{

    flex:1;

    border:none;

    outline:none;

    padding:8px 12px;

    font-size:15px;

    background:transparent;

}

#limpiarBusqueda{

    background:none;

    border:none;

    cursor:pointer;

    color:#888;

    font-size:16px;

    display:none;

}

#limpiarBusqueda:hover{

    color:#d4af37;

}
.btn-buscar{

    background:none;

    border:none;

    cursor:pointer;

    color:#d4af37;

    font-size:18px;

    padding:0;

    margin-right:10px;

    transition:.3s;

}

.btn-buscar:hover{

    color:#b8921d;

}


.menu a{
    color:white;
    text-decoration:none;
    transition:.3s;
}

.menu a:hover{
    color:#d4af37;
}

.hero-text{
    position:relative;
z-index:2;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px;
}

.hero-text h1{

    font-family:'Playfair Display', serif;
    font-size:40px;
    color:#d4af37;
    letter-spacing:1px;
    line-height:1.2;
    text-shadow:0 2px 12px rgba(0,0,0,.45);

}

.hero-text p{
    max-width:650px;
    font-size:20px;
    line-height:1.7;
    margin-bottom:45px;
}

.boton{
    display:inline-block;
    padding:8px 24px;
    background:#d4af37;
    color:#111;
    text-decoration:none;
    border-radius:40px;
    font-weight:bold;
    transition:.3s;
    font-size:14px;
line-height:1.25;
}

.boton:hover{
     transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(212,175,55,.35);
}
.botones{
    display:flex;
    gap:12px;
    margin-top:20px;
}

.boton-secundario{

    display:inline-block;
    padding:8px 24px;
    background:#25D366;
    color:white;
    text-decoration:none;
    border-radius:40px;
    font-weight:bold;
    transition:.3s;
    border:none;
    font-size:14px;
line-height:1.25;
}

.boton-secundario:hover{
    background:#1EBE5D;
    transform:scale(1.05);
}
.boton-canal{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:8px 24px;

    border-radius:30px;

    border:1px solid #25d366;

    background:#111;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
    font-size:14px;
line-height:1.25;

}

.boton-canal i{

    color:#25d366;

    font-size:17px;

}

.boton-canal:hover{

    background:#575e5a;

    color:#fff;

    transform:translateY(-2px);

}

.boton-canal:hover i{

    color:#fff;

}
/*=========================
   HEADER INTELIGENTE
==========================*/

.menu{

    transition: all .35s ease;

}

.menu.scrolled{

    background:#fff;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    padding:15px 8%;

}

.menu.scrolled a{

    color:#111;

}

.menu.scrolled a:hover{

    color:#d4af37;

}
/*=========================
      CONÓCENOS
==========================*/

.about{

    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:40px;
    padding:20px 8% 70px;
    background:#fff;
    color:#111;
    flex-wrap:wrap;

}

.about-image{
    flex:0 0 41%;
    display:flex;
}

.about-image img{
    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:20px;

}

.about-text{

    flex:0 0 45%;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}
.about-button{

    display:flex;

    justify-content:center;

    margin-top:10px;

}

.about-text h2{

    font-size:36px;

    margin-bottom:25px;

    color:#d4af37;

}

.about-text p{

    font-size:17px;
    line-height:1.7;
    margin-bottom:15px;

    color:#555;

}
.social-icons{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:14px;

}

.social-icons a{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#111;

}

.social-icons a i{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#d4af37;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

    transition:.3s;

}

.social-icons a:hover{

    color:#d4af37;

}

.social-icons a:hover i{

    background:#111;

    transform:scale(1.08);

}
.social-icons span{

    display:inline;

}

.tarjeta-horario{

    grid-column:1 / -1;

}

.tarjeta-horario span{

    display:flex;

    flex-direction:column;

    gap:6px;

    font-size:13px;

    line-height:1.4;

}
.info-top{

    display:flex;

    gap:40px;

    justify-content:space-between;

    align-items:flex-start;

}

.info-item{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:25px;

}


.info-item strong{

    display:block;

    margin-bottom:8px;

    color:#626060;

    font-size:18px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

}
.info-column{

    flex:1;

}
.about-header{

    background:#fff;

    text-align:center;

    padding:45px 8% 25px;

}

.about-header h2{

    color:#d4af37;

    font-size:38px;

    font-weight:700;

    margin-bottom:15px;

    letter-spacing:.5px;

}

.about-header p{

    max-width:700px;

    margin:0 auto;

    color:#555;

    font-size:17px;

    line-height:1.7;

}
.about-button{

    display:flex;

    justify-content:center;

    margin-top:10px;

}
.about-button .boton{

    width:220px;

    text-align:center;
    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

}

.info-item > i{

    color:#d4af37;

    font-size:22px;

    min-width:24px;

    margin-top:3px;

}

/*=========================
      CATEGORÍAS
==========================*/

.categorias{
    padding:30px 4%;
    background:#f8f8f8;
}

.categorias h2{
    text-align:center;
    font-size:40px;
    color:#111;
    margin-bottom:50px;
}

.categorias-grid{
    display:grid;
    grid-template-columns:repeat(3, 220px);
    justify-content:center;
    gap:25px;
}
.categoria-card{
    width:220px;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:all .35s ease;
    cursor:pointer;
}
.categoria-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 35px rgba(0,0,0,.18);
}
.categoria-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;
}
.categoria-todos img{

    height:220px;

    object-fit:contain;

    background:#fff;

    padding:12px;

}
.categoria-icono{

    height:260px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f5f5f5;

}
.categoria-icono i{

    font-size:80px;

    color:#d4af37;

    transition:.35s;

}
.categoria-todos img{

    object-fit:contain;

    background:#fff;

    padding:10px;

}
.categoria-card:hover .categoria-icono i{

    transform:scale(1.15);

}
.categoria-card:hover img{
    transform:scale(1.08);
}
.categoria-card h3{
    padding:18px;
    text-align:center;
    font-size:20px;
    color:#111;
    font-weight:600;
}
/*=========================
    CATEGORÍA ACTIVA
==========================*/

.categoria-card.activa{

    border:3px solid #d4af37;

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(212,175,55,.35);

}
.categoria-card.activa h3{

    color:#d4af37;

}
.categoria-card{

    transition:.35s;

}
/*=========================
      TARJETA VER TODO
==========================*/

.categoria-todos{

    width:260px;

}

.imagen-todos{

    position:relative;

    height:260px;

    overflow:hidden;

    border-radius:18px;

}

.imagen-todos img{

    width:100%;

    height:100%;

    object-fit:contain;

    background:white;

    padding:10px;

    transition:.4s;

}

.overlay-todos{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:20px;

    background:linear-gradient(transparent, rgba(0,0,0,.85));

    text-align:center;

    color:white;

}

.overlay-todos h3{

    color:white;

    font-size:24px;

    margin-bottom:5px;

}

.overlay-todos p{

    font-size:14px;

    opacity:.9;

}

.categoria-todos:hover img{

    transform:scale(1.05);

}

.categoria-todos:hover .overlay-todos{

    background:linear-gradient(transparent, rgba(212,175,55,.90));

}

.categoria-todos:hover h3,

.categoria-todos:hover p{

    color:#111;

}
/*=========================
    NUESTROS PRODUCTOS
=========================*/

.productos{
    padding:40px 8%;
    background:#f8f8f8;
}

.productos h2{
    text-align:center;
    font-size:46px;
    color:#111;
    margin-bottom:60px;
}

.categoria-productos{
    margin-bottom:80px;
}

.categoria-productos h3{
    font-size:34px;
    color:#111;
    margin-bottom:35px;
    border-left:6px solid #d4af37;
    padding-left:10px;
}
/*=========================
      TARJETAS PRODUCTOS
==========================*/

.productos-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));

    gap:15px;

    margin-top:35px;

}


.producto-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #ececec;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    
}
.producto-card.activa{

    border:2px solid #d4af37;

    box-shadow:
        0 8px 25px rgba(212,175,55,.18);

    transform:translateY(-2px);

    transition:all .25s ease;

}

.producto-card:hover{

    transform:translateY(-10px);

    box-shadow:0 22px 45px rgba(0,0,0,.18);

}

.producto-imagen{

    position:relative;

    aspect-ratio:1/1.12;

    overflow:hidden;

}

.producto-imagen img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

    transition: opacity .35s ease;

}

/*====================================
        PRODUCTO AGOTADO
====================================*/

.imagen-agotada{

    filter: grayscale(100%) brightness(0.75);

}

/*=========================
      BADGES SUPERIORES
==========================*/

.badges-superiores{

    position:absolute;

    top:5px;

    left:8px;

    z-index:4;

}
.badges-superior .badge{

    padding:4px 6px;

    border-radius:30px;

    font-size:.80rem;

    font-weight:700;

    color:#fff;

    box-shadow:0 4px 10px rgba(0,0,0,.20);

}

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 8px;

    border-radius:10px;

    font-size:.60rem;

    font-weight:700;

    letter-spacing:.3px;

    text-transform:uppercase;

    color:#fff;

    box-shadow:0 5px 12px rgba(0,0,0,.20);

}

.badge.nuevo{

    background:#d4af37;

    color:#111;

}

.badge.oferta{

    background:#E53935;

    color:#fff;

    font-weight:800;

    animation:badgeOferta 2.5s infinite;

}

.badge.destacado{

    background:#111;

    color:#fff;

    border:1px solid #d4af37;

}

.producto-card:hover .producto-imagen img:not(.imagen-agotada){

    transform:scale(1.08);

    filter:brightness(1.03);

}

.producto-info{

    padding:8px 10px;
    text-align:center;

}

.producto-info h4{

    font-size:0.78rem;

    line-height:1.15;

    min-height:20px;

    margin-bottom:3px;

    font-weight:700;
    text-align:center;

    display:-webkit-box;

line-clamp:2;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

}
.producto-info h4::after{
    content:"";
    display:block;
    width:60px;
    height:3px;
    background:#d4af37;
    margin:4px auto 0;
    border-radius:5px;
}

.tipo-producto{
    color:#777;
    font-size:16px;
    margin-bottom:10px;
}
.precio-anterior{

    text-align:center;

    color:#9b9b9b;

    text-decoration:line-through;

    font-size:.70rem;

    font-weight:500;

    margin-top:2px;

    margin-bottom:2px;

}

.precio{

    text-align:center;

    font-size:0.95rem;

    font-weight:800;

    color:#111;

    margin:2px 0 4px;

}

/*====================================
        BOTÓN WHATSAPP V2
====================================*/

.boton-producto{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    width:100%;

    margin-top:6px;

    padding:4px 6px;

    border-radius:30px;

    background:linear-gradient(135deg,#039c3b,#36c00c);

    color:white;

    text-decoration:none;

    font-weight:600;

    font-size:15px;

    transition:.25s ease;

    box-shadow:0 4px 8px rgb(1, 128, 47);
    transition: all .3s ease;
cursor: pointer;

}

.boton-producto.deshabilitado{

    background:#7fdca1;

    cursor:not-allowed;

    opacity:.75;

}
.boton-producto:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(37,211,102,.35);

}

.boton-producto i{

    font-size:18px;

}
/* =====================================
   BOTÓN VER MÁS
===================================== */

.mostrar-mas{

    display: flex;

    justify-content: center;

    margin: 30px 0 50px;

}

.btn-mostrar-mas{

    padding: 14px 40px;

    border: none;

    border-radius: 30px;

    background: #111;

    color: #fff;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;

}

.btn-mostrar-mas:hover{

    background: #d4af37;

    color: #111;

}
/*=========================
      ETIQUETAS PRODUCTO
==========================*/

.badges span{

    padding:5px 11px;

    font-size:9px;
}
.badges{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:4px;

    flex-wrap:wrap;

    margin:2px 0;

}

.badge-tipo,
.badge-genero{

    padding:4px 8px;
    border-radius:18px;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
}

.badge-tipo{
    background:#d4af37;
    color:#111;
}

.badge-genero{
    background:#111;
    color:#fff;
}
.badge-tipo.tipo-original{
    background:#c9a227;
    color:#111;
}

.badge-tipo.tipo-1-1{
    background:#ead9a3;
    color:#4a4025;
}
/* Género de perfumes */

.badge-genero.genero-hombre{
    background:rgba(20,45,80,.78);
    color:#fff;
}

.badge-genero.genero-mujer{
    background:rgba(190,105,135,.72);
    color:#fff;
}

.badge-genero.genero-unisex{
    background:#f5f5f5;
    color:#111;
    border:1px solid #ddd;
}
.badge-oferta{

    background:#e63946;
    color:white;

}
/*==================================
    TEXTOS DE LA TARJETA
===================================*/

.producto-info{

    color:#111;

}

.producto-info h4{

    color:#111;

}

.marca{

    color:#666;

    font-size:10px;

    margin:3px 0 6px;

    text-align:center;

}

.precio{

    color:#111;

    font-weight:700;

}

.estado{

    margin:6px 0;

    font-size:.75rem;
    color:#111;

}
/*====================================
    TARJETAS V2 - TALLAS
====================================*/

.tallas-container{

    display:flex;
    justify-content:center;
    gap:2px;
    flex-wrap:wrap;
    margin:2px 0;

}

.talla-chip{

    padding: 2px 6px;
    border: 1px solid #d4af37;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: #222;
    min-width: 20px;
    text-align: center;

    cursor: pointer;
    user-select: none;
    transition: all .2s ease;

}

.talla-chip.seleccionada{

    background: #d4af37;
    color: #fff;
    border-color: #d4af37;

}
/*====================================
    TARJETAS V2 - COLORES
====================================*/

.colores-container{

    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin:4px 0;

}

.color-chip{

    width:20px;
    height:20px;
    border-radius:50%;
    border:1px solid #cfcfcf;
    display:inline-block;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    cursor: pointer;
transition: all .2s ease;


}

.color-chip.seleccionado{

    transform: scale(1.12);

    outline: 3px solid #d4af37;
    outline-offset: 3px;

    box-shadow:
        0 0 0 2px #ffffff,
        0 0 8px rgba(212,175,55,.45);

}
.color-chip:hover{

    transform: scale(1.08);

}
/*====================================
        ESTADO DEL PRODUCTO
====================================*/

.estado{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:24px;

    display:flex;

    justify-content:center;
    align-items:center;

    margin:0;

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#fff;

    z-index:5;

    backdrop-filter:blur(3px);

}

.estado.disponible{

    background:rgba(39,174,96,.88);

}

.estado.agotado{

    background:rgba(231,76,60,.90);

}
/*====================================
        TOOLTIP COLORES
====================================*/

.color-chip{

    position:relative;
    cursor:pointer;

    transition:.2s;

}

.color-chip:hover{

    transform:scale(1.2);

}

.color-chip::after{

    content:attr(title);

    position:absolute;

    bottom:130%;

    left:50%;

    transform:translateX(-50%);

    background:#222;

    color:#fff;

    padding:5px 8px;

    border-radius:6px;

    font-size:12px;

    white-space:nowrap;

    opacity:0;

    pointer-events:none;

    transition:.2s;

    z-index:100;

}

.color-chip:hover::after{

    opacity:1;

}
/*==================================
    PRODUCTOS DINÁMICOS
===================================*/

@keyframes badgeOferta{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}
/* ===========================
   SUGERENCIAS DEL BUSCADOR
=========================== */

.sugerencias{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#fff;

    border-radius:0 0 10px 10px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    display:none;

    z-index:999;

    overflow:hidden;

}

.sugerencia-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 15px;

    cursor:pointer;

    transition:.25s;

    font-size:14px;

    color:#222;

}
.flecha-sugerencia{

    opacity:0;

    transform:translateX(-8px);

    transition:.25s;

    color:#111;

}
.sugerencia-item:hover .flecha-sugerencia{

    opacity:1;

    transform:translateX(0);

}

.sugerencia-item:hover{

    background:#d4af37;

    color:#111;

    transition:.25s;

}
/* =====================================
   MEGA MENÚ
===================================== */

.menu ul{

    display:flex;
    align-items:center;
    gap:30px;

}

.menu ul li{

    position:relative;
    list-style:none;

}

.mega-menu{

    position:absolute;

    top:100%;

    left:50%;

    transform:translateX(-50%);

    width:420px;

    background:#fff;

    color:#222;

    font-size:16px;

    border-radius:18px;

    padding:30px;

    box-shadow:0 20px 50px rgba(0,0,0,.18);

    display:none;

    z-index:9999;

    transition:.3s;

}

.mega-menu.abierto{

    display:block;

}

/*
.menu-dama:hover .mega-menu{

    display:block;

}
*/
/*=====================================
    ESTRUCTURA MEGA MENÚ
======================================*/

.mega-grid{

    display:flex;

    gap:10px;
    align-items:flex-start;

}
.mega-filtros{

    display:grid;

    grid-template-columns:80px 80px 40px;

    gap:12px;

    align-items:start;

}

.mega-columna{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    min-width:90px;

    flex:0 0 auto;
    text-align:left;

}

.mega-columna h3{

    display:inline-block;

    color:#d4af37;

    font-size:12px;

    font-weight:600;

    margin:0 0 10px 0;

    padding-bottom:4px;

    border-bottom:1px solid #d4af37;

}

.mega-imagen{

    width:100px;
    height:150px;

    border-radius:14px;

    overflow:hidden;

    background:#f5f5f5;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#999;

    font-size:14px;

    flex-shrink:0;
    margin-left:15px;

}
.mega-derecha{

    left:auto;

    right:0;

    transform:none;

}
.mega-accesorios-menu{

    width:460px;

}

.mega-accesorios-menu .mega-filtros{

    grid-template-columns:90px 80px 110px;

    gap:8px;

}

.mega-accesorios-menu .mega-columna{

    min-width:0;

}

.mega-accesorios-menu .mega-imagen{

    margin-left:8px;

}
/* =====================================
   MEGA MENÚ PERFUMES
===================================== */

#mega-perfumes{

    width:460px;

}

#mega-perfumes .mega-filtros{

    grid-template-columns:90px 80px 100px;

    gap:8px;

}

#mega-perfumes .mega-columna{

    min-width:0;

}

#mega-perfumes .mega-imagen{

    margin-left:8px;

}
/* =====================================
   MEGA MENÚ PROMOCIONES
===================================== */

#mega-promociones{

    width:460px;

}

#mega-promociones .mega-filtros{

    grid-template-columns:80px 80px 110px;

    gap:8px;

}

#mega-promociones .mega-columna{

    min-width:0;

}

#mega-promociones .mega-imagen{

    margin-left:8px;

}
/*=====================================
    FILTRO SELECCIONADO
======================================*/

.item-filtro{

    display:flex;

    align-items:center;

    gap:6px;

    padding:3px 6px;
    font-size:12px;

    cursor:pointer;

    user-select:none;

    transition:.25s;

    border-radius:8px;

}
.item-filtro.activo{

    background:#d4af37;

    color:#111;

    border-radius:8px;

    font-weight:200;

    padding:3px 6px;

}
.item-filtro::before{

    content:"➜";

    opacity:0;

    width:0;

    margin-right:0;

    transition:.25s;

}

.item-filtro:hover::before{

    opacity:1;

    width:14px;

    margin-right:6px;

}

.item-filtro.activo::before{

    opacity:1;

    width:14px;

    margin-right:6px;

}

[id^="filtro-"]{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}
.mega-imagen img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}
.hero-contenido{

    position: relative;

    z-index: 2;

}

.hero-imagen{

    position: relative;

    z-index: 3;

}

.hero-panel{

    position: relative;

    z-index: 3;

}
/*=========================
      HEADER AL HACER SCROLL
==========================*/

.menu.scrolled{

    background:#ffffff;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    padding:15px 8%;

    transition:all .35s ease;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.06);

    }

}
/*=========================
      PANEL DE FILTROS
=========================*/

.categoria-layout{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:5px;

    align-items:start;

}

.panel-filtros{

    width:220px;

    min-width:220px;

    padding:18px;

    border-radius:16px;

    position:sticky;
    top:110px;

}

.panel-filtros h4{

    font-size:16px;

    margin-bottom:18px;

    color:#3a3936;

}

.btn-filtros-mobile{

    display:none;

}


@media(max-width:992px){

    .categoria-layout{

        grid-template-columns:90px 1fr 90px;
    }

    .btn-filtros-mobile{

        display:flex;

        align-items:center;

        gap:10px;

        width:100%;

        justify-content:center;

        padding:12px;

        border:none;

        border-radius:12px;

        background:#d4af37;

        color:#fff;

        cursor:pointer;

        margin-bottom:15px;

    }

}
/*=========================
      VER MAS 
=========================*/
.ver-mas{

    color:#d4af37;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.ver-mas:hover{

    color:#111;

    text-decoration:underline;

}
/*=========================
      PANEL DE FILTROS
==========================*/

.grupo-filtro-panel{

    margin-bottom:20px;

}

.grupo-filtro-panel h5{

    color:#d4af37;

    font-size:16px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:10px;

}
.titulo-filtro{

    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
}

.titulo-filtro i{

    transition: transform .25s ease;

}

.titulo-filtro.abierto i{

    transform: rotate(90deg);

}

.item-filtro-panel{

    color:#555;

    font-size:14px;

    padding:7px 0;

    cursor:pointer;

    transition:.25s;

}

.item-filtro-panel:hover{

    color:#d4af37;

    padding-left:6px;

}
.item-filtro-panel.activo{

    color:#111;

    font-weight:600;

}

.item-filtro-panel.activo::before{

    content:"✔";

    color:#d4af37;

    margin-right:8px;

    font-weight:bold;

}
.lista-filtro{

    display: none;

    max-height: 260px;

    overflow-y: auto;

    overflow-x: hidden;

    direction: rtl;

}
.lista-filtro .item-filtro-panel{

    direction: ltr;

}
.item-filtro-panel{

    padding: 6px 10px;

}
.flecha-filtro{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    width:18px;
    flex-shrink:0;

}
.resaltar{

    animation: resaltarFiltro .8s ease;

}

@keyframes resaltarFiltro{

    0%{

        box-shadow:0 0 0 rgba(212,175,55,0);

    }

    50%{

        box-shadow:0 0 15px rgba(212,175,55,.6);

    }

    100%{

        box-shadow:0 0 0 rgba(212,175,55,0);

    }

}
/* =====================================
   BOTÓN LIMPIAR FILTROS
===================================== */

.btn-limpiar-filtros{

    display: none;

    align-items: center;
    justify-content: center;
    gap: 6px;

    width: fit-content;

    padding: 4px 10px;

    margin-bottom: 14px;

    border: 1px solid #c89b00;

    border-radius: 5px;

    background: #fff;

    color: #222;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: .25s;

}

.btn-limpiar-filtros i{

    color: #c89b00;

    transition: .25s;

}

.btn-limpiar-filtros:hover{

    background: #c89b00;

    color: #fff;

}

.btn-limpiar-filtros:hover i{

    color: #fff;

}

.mensaje-seleccion{

    min-height:0;

    margin-top:2px;

    font-size:13px;

    font-weight:600;

    color:#d32f2f;

}

.mensaje-seleccion.activo{

    display:block;

}

/*=====================================
    BOTÓN MENÚ MÓVIL
======================================*/

.btn-menu-mobile{

    display:none;

    background:none;

    border:none;

    color:#d4af37;

    font-size:28px;

    cursor:pointer;

    transition:.3s;

}

.btn-menu-mobile:hover{

    color:#f5d76e;

}

/*=====================================
    MENÚ MÓVIL
======================================*/

.menu-mobile{

    position:fixed;

    top:65px;

    left:-280px;

    width:260px;

    height:calc(100vh - 65px);

    background:#111;

    padding:90px 25px 30px;

    display:flex;

    flex-direction:column;

    gap:20px;

    transition:left .35s ease;

    z-index:99999;

    box-shadow:4px 0 18px rgba(0,0,0,.35);

}

.menu-mobile.activo{

    left:0;

}

.menu-mobile a{

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:500;

    transition:.3s;

}

.menu-mobile a:hover{

    color:#d4af37;

}
.menu-mobile{

    display:none;

}
/* =====================================================
   RESPONSIVE
===================================================== */
.hero-mobile{

    display:none;

}
@media (max-width:768px){
    .menu-mobile{

    display:flex;

}

.hero-contenido.hero-desktop{

    display:none;

}

.hero-mobile{

    display:block;

}
/* MENU */

.menu{

    padding:12px;

    gap:8px;

    align-items:center;

    box-sizing:border-box;

}
/*=========================
HEADER SCROLL MÓVIL
==========================*/

.menu.scrolled{

    padding:12px 15px;

    align-items:center;

    gap:10px;

}

.menu.scrolled .buscador-header{

    flex:1;

    min-width:0;

}

.menu.scrolled #buscador{

    width:100%;

}

.logo{

    font-size:20px;

    flex-shrink:0;

}

.buscador-header{

    flex:1;

    min-width:0;

    margin-left:8px;

}

#buscador{

    width:100%;

}

.menu ul{

    display:none;

}
.hero-logo-fondo{

    display:none;

}
.btn-menu-mobile{

    display:block;

}



/*==================================
HERO EXCLUSIVO PARA MÓVIL
==================================*/

.hero-mobile{

    display:flex;
    flex-direction:column;
    align-items:center;

    max-width:360px;
    margin:0 auto;

    padding:80px 15px 10px;

}
.hero{

    min-height:auto;

    height:auto;

    padding-bottom:0;

}

/*------------- TEXTO -------------*/

.hero-mobile-texto{

    text-align:center;
    margin-bottom:18px;

}

.hero-mobile-texto h1{

    font-size:23px;
    line-height:1.15;

    color:#d8b037;

    margin-bottom:10px;

}

.hero-mobile-texto p{

    font-size:13px;
    line-height:1.5;

    color:#ffffff;

    max-width:300px;

    margin:auto;

}

/*------------- GALERÍA -------------*/

.hero-mobile-galeria{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-bottom:18px;

}

.hero-mobile-img{

    width:145px;

    height:200px;

    border-radius:18px;

    overflow:hidden;

}

.hero-mobile-img img{

    width:100%;

    height:100%;

    object-fit:cover;
     display:block;

    backface-visibility:hidden;

    will-change:transform;

}

/*------------- BOTONES -------------*/

.hero-mobile-botones{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    margin-bottom:0;

}

.hero-mobile-botones a{

    width:190px;

    height:40px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    font-size:13px;

    line-height:1.2;

    padding:0 15px;

}

.about-header{

    padding:20px 8% 20px;

}
/*==================================
CONOCE MALUT STORE - MÓVIL
==================================*/

.about-header{

    padding:18px 20px;

}

.about-header h2{

    font-size:22px;
    line-height:1.2;
    margin-bottom:10px;

}

.about-header p{

    font-size:13px;
    line-height:1.6;
    max-width:320px;
    margin:0 auto;

}

/*==================================
ABOUT
==================================*/

.about{

    display:flex;
    flex-direction:column;
    gap:20px;

    padding:0 18px 30px;

}

.about-image{

    width:100%;

}

.about-image img{

    width:100%;
    display:block;
    border-radius:18px;

}

.about-text{

    width:100%;

}

/*==================================
INFORMACIÓN
==================================*/

.about-info{

    width:100%;

}

.info-top{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    align-items:stretch;

}

.info-column{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.info-item{

    background:#fff;

    border-radius:16px;

    padding:14px;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

}

.tarjeta-horario{

    margin-top:14px;

    width:100%;

}
.tarjeta-horario .info-item,
.tarjeta-horario{

    display:flex;

    align-items:flex-start;

}

/*==================================
REDES SOCIALES - SOLO MÓVIL
==================================*/

.social-icons{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}

.social-icons a{

    display:flex;

    justify-content:center;

    align-items:center;

}

.social-icons a i{

    width:34px;

    height:34px;

    border-radius:50%;

    font-size:15px;

}

.social-icons a span{

    display:none !important;

}

/*==================================
HORARIO
==================================*/

.info-item span{

    display:block;

    line-height:1.55;

    font-size:13px;

}

.info-item strong{

    display:block;

    margin-bottom:6px;

}

/*==================================
BOTÓN
==================================*/

.about-button{

    margin-top:18px;

    text-align:center;

}


body{

    overflow-x:hidden;

}

/*==================================
CATEGORÍAS - MÓVIL
==================================*/

.categorias h2{

    font-size:28px;

    line-height:1.15;

    margin-bottom:20px;

}

.categorias-grid{

    display:grid;

    grid-template-columns:repeat(2,150px);

    justify-content:center;

    gap:12px 14px;

}

/* Tarjetas normales */

.categoria-card{

    width:150px;

    max-width:none;

}

.categoria-card img{

    height:120px;

}

.categoria-card h3{

    font-size:15px;

    padding:10px;

}

/* Tarjeta Ver Todo */

.categoria-todos img{

    height:180px;

    object-fit:cover;

    padding:0;

}

.overlay-todos{

    padding:8px;

}

.overlay-todos h3{

    font-size:14px;

    margin-bottom:3px;

}

.overlay-todos p{

    font-size:10px;

    line-height:1.2;

    margin:0;

}
.imagen-todos{

    height:170px;

}

.overlay-todos{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    padding:8px;

}

/*==================================
NUESTROS PRODUCTOS - MÓVIL
==================================*/

.productos{

    padding:10px 13px 20px;

}

.productos h2{

    font-size:32px;

    line-height:1.15;

    margin-bottom:20px;

    text-align:center;

}

.categoria-productos h3{

    font-size:22px;

    margin-bottom:18px;

    border-left:4px solid #d4af37;

    padding-left:8px;

}
/*==================================
LAYOUT PRODUCTOS - MÓVIL
==================================*/

.categoria-layout{

    display:flex;

    flex-direction:column;

    gap:18px;

}
.panel-filtros{

    width:100%;

}
/*==================================
PANEL DE FILTROS - MÓVIL
==================================*/

.panel-filtros{

    position:static;

    min-width:100%;

    width:100%;

    padding:0;

    background:transparent;

    box-shadow:none;

    border:none;

}

.panel-filtros h4{

    display:none;

}
.btn-filtros-mobile{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:140px;

    padding:10px 14px;

    margin-bottom:12px;

    border:none;

    border-radius:30px;

    background:#fff;

    border:2px solid #d4af37;

    color:#111;

    font-size:14px;

    font-weight:600;

}
.productos-grid{

    margin-top:5px;

}
/*==================================
CONTENIDO FILTROS - MÓVIL
==================================*/

.contenido-filtros{

    display:none;

}

.contenido-filtros.activo{

    display:block;

    margin-top:12px;

}
}
html,
body{

    width:100%;

    overflow-x:hidden;

    overscroll-behavior-x:none;

}
/* =====================================
   VISOR DE IMAGEN DEL PRODUCTO
===================================== */

.visor-imagen{

    position:fixed;

    inset:0;

    width:100%;
    height:100vh;

    background:rgba(0,0,0,.88);

    display:flex;

    align-items:center;
    justify-content:center;

    z-index:999999;

    opacity:0;
    visibility:hidden;

    transition:opacity .25s ease;

}

.visor-imagen.activo{

    opacity:1;

    visibility:visible;

}

#imagen-ampliada{

    max-width:90%;
max-height:85vh;

    width:auto;
    height:auto;

    object-fit:contain;

    border-radius:12px;

    cursor:pointer;

}

.cerrar-visor{

    position:absolute;

    top:20px;
    right:25px;

    width:40px;
    height:40px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    color:#fff;

    font-size:28px;

    line-height:40px;

    cursor:pointer;

    z-index:10000;

}
/* =====================================
   MODAL HISTORIA MALUT
===================================== */

.modal-historia{
    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.72);

    display:flex;
    justify-content:center;
    align-items:center;

    padding:25px;

    z-index:10000;
}

.modal-historia-contenido{
    position:relative;

    width:auto;
    max-width:90vw;
    max-height:90vh;

    display:flex;
    justify-content:center;
    align-items:center;
}

.modal-historia-contenido img{
    display:block;

    max-width:90vw;
    max-height:90vh;

    width:auto;
    height:auto;

    object-fit:contain;

    border-radius:16px;

    box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.cerrar-historia{
    position:absolute;

    top:12px;
    right:12px;

    width:38px;
    height:38px;

    border:none;
    border-radius:50%;

    background:rgba(0,0,0,.75);
    color:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:20px;
    cursor:pointer;

    z-index:2;
}