/* ========================= */
/* BASE */
/* ========================= */

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

body{
font-family:Arial, Helvetica, sans-serif;
background:#f8f9fb;
}

.container{
max-width:1200px;
margin:0 auto;
padding-left:18px;
padding-right:18px;
}

/* ========================= */
/* TOP BAR */
/* ========================= */

.top-bar{
background:#000;
font-size:13px;
color:#ccc;
border-bottom:1px solid rgba(255,255,255,.08);
}

.top-bar-wrapper{
display:flex;
justify-content:flex-end;
align-items:center;
padding:8px 0;
gap:22px;
flex-wrap:wrap;
}

.top-link{
color:#ccc;
text-decoration:none;
display:flex;
align-items:center;
gap:6px;
font-size:12.5px;
transition:.2s;
}

.top-link i{
font-size:12px;
color:#0010FF;
}

.top-link:hover{
color:#fff;
}

/* ========================= */
/* HEADER */
/* ========================= */

.header{
background:#000;
padding:12px 0;
position:relative;
z-index:50;
}

.header-wrapper{
display:flex;
align-items:center;
justify-content:flex-start;
gap:20px;
flex-wrap:wrap;
}

.logo-area{
display:flex;
flex-direction:column;
align-items:flex-start;
}

.logo-mobile-row{
display:flex;
align-items:center;
justify-content:center;
width:auto;
position:relative;
}

.logo-area img,
.logo-link{
display:block;
line-height:0;
text-decoration:none;
}

.header-logo{
height:70px;
width:auto;
display:block;
object-fit:contain;
}

.menu-toggle-header{
display:none;
}

.codigo-postal{
display:flex;
align-items:center;
gap:6px;
font-size:13px;
color:#e8e8e8;
cursor:pointer;
transition:.2s;
background:none;
border:none;
font-family:inherit;
white-space:nowrap;
}

.codigo-postal:hover{
color:#fff;
}

.cp-flecha{
font-size:10px;
opacity:.8;
transition:.2s;
}

.codigo-postal:hover .cp-flecha{
transform:translateX(3px);
}

/* ========================= */
/* BUSCADOR */
/* ========================= */

.search-area{
flex:0 1 640px;
display:flex;
max-width:640px;
margin:0;
background:#fff;
border-radius:999px;
overflow:hidden;
box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.buscador{
flex:1;
min-width:0;
padding:12px 20px;
border:none;
border-radius:999px 0 0 999px;
outline:none;
font-size:14px;
background:transparent;
}

.btn-buscar{
background:#0010FF;
border:none;
color:#fff;
padding:0 22px;
border-radius:0 999px 999px 0;
cursor:pointer;
transition:.2s;
}

.btn-buscar:hover{
background:#9c1ccc;
}

/* ========================= */
/* HEADER RIGHT */
/* ========================= */

.header-right{
display:flex;
align-items:center;
gap:26px;
margin-left:auto;
}

/* ========================= */
/* CARRITO HEADER */
/* ========================= */

.carrito-icon{
position:relative;
width:44px;
height:44px;
border:none;
background:transparent;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:22px;
padding:0;
transition:.2s;
}

.carrito-icon i{
color:#fff;
font-size:22px;
line-height:1;
display:block;
}

.carrito-icon:hover i{
color:#0010FF;
}

.carrito-badge{
position:absolute;
top:2px;
right:0;
min-width:18px;
height:18px;
padding:0 5px;
border-radius:999px;
background:#fff;
color:#0010FF;
font-size:11px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
border:1px solid #e5e5e5;
box-shadow:0 2px 6px rgba(0,0,0,.25);
pointer-events:none;
}

/* ========================= */
/* CARRITO LATERAL */
/* ========================= */

#carritoOverlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
opacity:0;
visibility:hidden;
z-index:3000;
transition:.25s;
}

#carritoOverlay.activo{
opacity:1;
visibility:visible;
}

#carritoLateral{
position:fixed;
top:0;
right:-390px;
width:370px;
max-width:92%;
height:100%;
background:#fff;
box-shadow:-8px 0 28px rgba(0,0,0,.22);
transition:.3s ease;
z-index:9999;
display:flex;
flex-direction:column;
}

#carritoLateral.activo{
right:0;
}

/* ========================= */
/* MENU PRINCIPAL DESKTOP */
/* ========================= */

.menu-principal{
background:#fdfdfd;
border-top:1px solid #eee;
border-bottom:1px solid #ececec;
box-shadow:0 2px 8px rgba(0,0,0,.04);
position:relative;
z-index:60;
}

.menu-bar{
width:100%;
height:52px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:32px;
flex-wrap:nowrap;
}

.menu-toggle{
display:none;
}

.menu-categorias{
position:relative;
display:flex;
align-items:center;
margin:0;
flex:0 0 auto;
}

.btn-categorias{
background:none;
border:none;
color:#111;
font-size:14.5px;
font-weight:800;
display:flex;
align-items:center;
gap:7px;
height:52px;
padding:0;
cursor:pointer;
white-space:nowrap;
}

.btn-categorias i{
font-size:12px;
color:#666;
}

.menu-links{
display:flex;
align-items:center;
flex-direction:row;
gap:28px;
height:52px;
width:auto;
flex:0 0 auto;
}

.menu-links a{
color:#333;
text-decoration:none;
font-size:14px;
font-weight:600;
height:52px;
display:flex;
align-items:center;
white-space:nowrap;
transition:.2s;
}

.menu-links a:hover,
.btn-categorias:hover{
color:#0010FF;
}

.menu-ofertas{
position:relative;
display:flex;
align-items:center;
}

.btn-ofertas{
background:linear-gradient(105deg,#0010FF,#8b1fd6);
border:none;
color:#fff;
font-size:13.5px;
font-weight:800;
display:flex;
align-items:center;
gap:7px;
height:36px;
padding:0 18px;
border-radius:999px;
cursor:pointer;
white-space:nowrap;
box-shadow:0 4px 12px rgba(183,32,235,.3);
transition:.2s;
}

.btn-ofertas i{
font-size:11px;
}

.btn-ofertas:hover{
color:#fff;
filter:brightness(1.07);
transform:translateY(-1px);
}

/* ========================= */
/* PANEL CATEGORIAS DESKTOP */
/* ========================= */

.panel-categorias{
position:absolute;
top:100%;
left:0;
width:280px;
background:#f2f2f2;
border-radius:18px;
box-shadow:0 12px 30px rgba(0,0,0,.25);
padding:10px 0;
display:none;
z-index:100;
}

.menu-categorias:hover .panel-categorias{
display:block;
}

.categoria-item{
position:relative;
}

.categoria-item a{
display:flex;
align-items:center;
gap:12px;
padding:16px 20px;
text-decoration:none;
color:#333;
font-size:14px;
font-weight:500;
}

.panel-categorias > .categoria-item > a::after{
content:">";
margin-left:auto;
font-size:18px;
color:#999;
}

.categoria-item:hover{
background:#e9e9e9;
}

.sub-panel{
position:absolute;
left:100%;
top:0;
width:260px;
background:#f2f2f2;
border-radius:18px;
box-shadow:0 12px 30px rgba(0,0,0,.25);
padding:10px 0;
display:none;
}

.categoria-item:hover .sub-panel{
display:block;
}

.sub-panel a{
display:block;
padding:14px 20px;
text-decoration:none;
color:#333;
font-size:14px;
}

.sub-panel a:hover{
background:#e9e9e9;
padding-left:24px;
}

/* ========================= */
/* PANEL OFERTAS */
/* ========================= */

.panel-ofertas{
position:absolute;
top:100%;
left:0;
width:240px;
background:#f2f2f2;
border-radius:16px;
box-shadow:0 12px 25px rgba(0,0,0,.2);
display:none;
padding:10px 0;
z-index:100;
}

.menu-ofertas:hover > .panel-ofertas{
display:block;
}

.panel-ofertas a{
display:flex;
align-items:center;
gap:12px;
padding:14px 18px;
text-decoration:none;
color:#333;
font-size:14px;
height:auto;
}

.panel-ofertas a:hover{
background:#e6e6e6;
color:#333;
}

/* ========================= */
/* MOBILE */
/* ========================= */

.menu-mobile-overlay{
display:none;
}

.cerrar-menu-mobile{
display:none;
}

@media(max-width:768px){

.top-bar{
display:none;
}

.header{
padding:14px 0 16px;
}

.header-wrapper{
flex-direction:column;
align-items:center;
gap:14px;
}

.logo-area{
width:100%;
align-items:center;
}

.logo-mobile-row{
width:100%;
display:grid;
grid-template-columns:52px 1fr 52px;
align-items:center;
min-height:54px;
}

.menu-toggle-header{
grid-column:1;
display:flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border:none;
background:transparent;
color:#fff;
font-size:30px;
cursor:pointer;
}

.menu-toggle-header i{
font-size:30px;
color:#fff;
line-height:1;
}

.logo-mobile-row a{
grid-column:2;
display:flex;
align-items:center;
justify-content:center;
}

.logo-mobile-row img,
.logo-mobile-row .header-logo{
height:48px;
width:auto;
display:block;
object-fit:contain;
}

.codigo-postal{
font-size:13.5px;
max-width:150px;
}

.codigo-postal span{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.header-right{
width:100%;
justify-content:center;
gap:22px;
}

.search-area{
order:3;
flex:0 1 auto;
width:100%;
max-width:100%;
margin-top:4px;
}

.buscador{
height:48px;
font-size:16px;
border-radius:999px 0 0 999px;
}

.btn-buscar{
width:64px;
font-size:18px;
border-radius:0 999px 999px 0;
}

/* MENU MOBILE CERRADO */

.menu-principal{
z-index:60;
}

.menu-bar{
display:flex;
align-items:center;
flex-wrap:nowrap;
gap:26px;
overflow-x:auto;
white-space:nowrap;
padding:14px 18px;
height:auto;
scrollbar-width:none;
}

.menu-bar::-webkit-scrollbar{
display:none;
}

.menu-toggle{
display:none;
}

.menu-categorias{
display:flex;
flex:0 0 auto;
position:static;
margin:0;
}

.btn-categorias{
font-size:18px;
font-weight:700;
height:auto;
padding:10px 0;
}

.menu-links{
display:flex;
flex-direction:row;
align-items:center;
gap:28px;
width:auto;
height:auto;
flex:0 0 auto;
background:transparent;
}

.menu-links a{
display:flex;
align-items:center;
width:auto;
height:auto;
white-space:nowrap;
padding:10px 0;
font-size:18px;
color:#222;
font-weight:600;
}

.btn-ofertas{
display:flex;
align-items:center;
width:auto;
white-space:nowrap;
font-size:16px;
color:#fff;
height:auto;
padding:9px 20px;
}

.menu-ofertas{
display:flex;
flex:0 0 auto;
position:relative;
}

/* PANEL CATEGORIAS MOBILE */

.panel-categorias{
position:fixed;
top:0;
left:-100%;
width:100%;
max-width:none;
height:100vh;
background:#f4f4f4;
z-index:999999;
display:block;
overflow-y:auto;
transition:left .3s ease;
padding:12px 0 30px;
border-radius:0;
box-shadow:none;
}

.panel-categorias.activo{
left:0;
}

.cerrar-menu-mobile{
display:flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border:none;
background:#000;
color:#fff;
font-size:22px;
border-radius:50%;
margin:14px 18px 16px auto;
cursor:pointer;
}

.categoria-item:hover{
background:transparent;
}

.categoria-item a{
font-size:18px;
padding:20px 24px;
}

.sub-panel{
position:static;
width:100%;
box-shadow:none;
border-radius:0;
display:none;
background:#e9e9e9;
padding:0;
}

.categoria-item:hover .sub-panel{
display:none;
}

.categoria-item.activo > .sub-panel{
display:block;
}

.sub-panel a{
font-size:15px;
padding:14px 58px;
}

.panel-ofertas{
position:absolute;
top:100%;
left:0;
width:240px;
background:#f2f2f2;
z-index:999999;
}

body.menu-abierto{
overflow:hidden;
}

}

@media(max-width:420px){

.container{
padding-left:14px;
padding-right:14px;
}

.logo-mobile-row{
grid-template-columns:46px 1fr 46px;
}

.logo-mobile-row img{
height:42px;
}

.menu-toggle-header{
width:42px;
height:42px;
font-size:28px;
}

.whatsapp-header span{
font-size:16px;
}

.carrito-icon{
width:40px;
height:40px;
}

.menu-bar{
gap:24px;
padding:13px 14px;
}

.btn-categorias,
.menu-links a,
.btn-ofertas{
font-size:17px;
}

}

.ofertas-mobile-lateral{
display:none;
}

@media(max-width:768px){

.menu-links .menu-ofertas{
display:none;
}

.ofertas-mobile-lateral{
display:block;
}

}

@media(min-width:769px){

.menu-links .menu-ofertas{
display:flex;
}

.ofertas-mobile-lateral{
display:none;
}

}

/* ========================= */
/* BARRA PROMOCIONES BANCARIAS */
/* ========================= */

.promo-bancos-bar{
    width:100%;
    min-height:40px;

    background:#151515;
    color:#fff;

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

    position:relative;
    z-index:100;

    padding:0 60px;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.promo-bancos-bar.oculta{
    display:none;
}

.promo-bancos-contenido{
    width:100%;
    max-width:900px;
    min-height:40px;

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

    position:relative;
    overflow:hidden;
}

.promo-banco-item{
    width:100%;
    min-height:40px;

    display:none;
    align-items:center;
    justify-content:center;
    gap:7px;

    color:#fff;
    text-decoration:none;

    font-size:14px;
    text-align:center;

    padding:7px 15px;

    animation:promoBancoEntrada .35s ease;
}

.promo-banco-item.activo{
    display:flex;
}

.promo-banco-item:hover{
    color:#fff;
}

.promo-banco-item strong{
    font-weight:800;
}

.promo-banco-nombre{
    color:#d36bff;
    font-weight:800;
}

.promo-bancos-arrow,
.promo-bancos-cerrar{
    position:absolute;
    top:50%;

    transform:translateY(-50%);

    border:none;
    background:transparent;
    color:#fff;

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

    cursor:pointer;
    z-index:5;

    transition:.2s;
}

.promo-bancos-arrow{
    width:36px;
    height:36px;
    font-size:13px;
}

.promo-bancos-prev{
    left:max(18px, calc((100% - 1000px) / 2));
}

.promo-bancos-next{
    right:max(54px, calc((100% - 1000px) / 2));
}

.promo-bancos-cerrar{
    right:14px;

    width:34px;
    height:34px;

    font-size:20px;
}

.promo-bancos-arrow:hover,
.promo-bancos-cerrar:hover{
    color:#0010FF;
}

@keyframes promoBancoEntrada{

    from{
        opacity:0;
        transform:translateY(4px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* TABLET */

@media(max-width:768px){

    .promo-bancos-bar{
        min-height:44px;
        padding:0 46px 0 38px;
    }

    .promo-bancos-contenido{
        min-height:44px;
    }

    .promo-banco-item{
        min-height:44px;
        font-size:12px;
        line-height:1.25;
        gap:4px;
        flex-wrap:wrap;
        padding:6px 5px;
    }

    .promo-bancos-prev{
        left:4px;
    }

    .promo-bancos-next{
        right:34px;
    }

    .promo-bancos-cerrar{
        right:2px;
        font-size:17px;
    }

}

/* CELULAR */

@media(max-width:480px){

    .promo-banco-item{
        font-size:11px;
    }

    .promo-banco-item span:last-child{
        display:none;
    }

    .promo-bancos-arrow{
        width:30px;
        height:30px;
    }

}