/* ==========================================================
   BEBIDA CALLEJERA
   ESTILO.CSS
   VERSION LIMPIA Y UNIFICADA
========================================================== */


/* ==========================================================
   RESET
========================================================== */

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


html{
    scroll-behavior:smooth;
}


body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    background:#f5f5f5;
    color:#222;
    overflow-x:hidden;
}


/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --negro:#111111;
    --negro-suave:#1c1c1c;

    --ocre:#C9822A;
    --ocre-oscuro:#b87422;

    --blanco:#ffffff;

    --gris:#888888;
    --gris-claro:#eeeeee;

    --verde:#25D366;
    --verde-hover:#1EBE5A;

    --rojo:#e53935;

    --sombra:0 6px 18px rgba(0,0,0,.10);
    --sombra-fuerte:0 12px 28px rgba(0,0,0,.18);

    --radio:16px;
}


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

.header{
    position:relative;

    z-index:1000;

    background:var(--negro);

    border-bottom:5px solid var(--ocre);
}


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

.header-contenedor{

    position:relative;

    width:95%;
    max-width:1700px;

    margin:0 auto;

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

    padding:10px 0 12px;

}


/* ==========================================================
   FILA 1
   LOGO + TITULO
========================================================== */

.header-logo{

    width:100%;

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:flex-start;

    gap:18px;

}


/* ==========================================================
   LOGO
========================================================== */

.header-logo img{

    width:145px;

    height:auto;

    display:block;

    flex-shrink:0;

}


/* ==========================================================
   TITULOS
========================================================== */

.header-titulos{

    display:flex;

    align-items:center;

}


.header-titulos h1{

    color:#ffffff;

    font-size:38px;

    font-weight:800;

    line-height:1.15;

    white-space:nowrap;

}


.header-titulos h1 span{

    color:#d0d0d0;

    font-size:20px;

    font-weight:400;

    margin-left:10px;

}


/* ==========================================================
   CONTACTO - ESQUINA DERECHA
========================================================== */

.header-contacto{

    position:absolute;

    top:24px;

    right:0;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:5px;

    z-index:5;

}


.header-contacto a{

    color:#ffffff;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

}


.header-contacto a:hover{

    color:var(--ocre);

}


.header-contacto div{

    color:#d0d0d0;

    font-size:14px;

    font-weight:500;

}


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

.header-buscador{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:18px;

    margin-bottom:12px;

}


.header-buscador .buscador{

    width:65%;

    max-width:850px;

    min-width:500px;

    height:46px;

    padding:0 20px;

    border:none;

    border-radius:12px;

    background:#ffffff;

    color:#222222;

    font-size:16px;

    outline:none;

}


.header-buscador .buscador::placeholder{

    color:#888888;

}


.header-buscador .buscador:focus{

    box-shadow:
        0 0 0 4px
        rgba(201,130,42,.25);

}


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

.header-acciones{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}


.accion-header{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:140px;

    height:40px;

    padding:0 18px;

    border-radius:10px;

    border:2px solid transparent;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.25s;

    cursor:pointer;

}


.accion-header:hover{

    transform:translateY(-2px);

}


/* ==========================================================
   WHATSAPP
========================================================== */

.header-acciones .whatsapp{

    background:var(--verde);

    color:#ffffff;

}


.header-acciones .whatsapp:hover{

    background:var(--verde-hover);

}


/* ==========================================================
   ENVIOS
========================================================== */

.header-acciones .envios{

    background:#202020;

    color:#ffffff;

}


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

.header-acciones .carrito{

    background:var(--ocre);

    color:#ffffff;

    border:none;

}


.header-acciones .carrito:hover{

    background:var(--ocre-oscuro);

}


/* ==========================================================
   CONTADOR CARRITO
========================================================== */

#cantidad-carrito{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:24px;

    height:24px;

    margin-left:8px;

    padding:0 6px;

    border-radius:50%;

    background:#ffffff;

    color:#111111;

    font-size:13px;

    font-weight:700;

}


/* ==========================================================
   DESCARGAR CATALOGO
========================================================== */

.header-acciones .descargar{

    background:#ffffff;

    color:#111111;

    border:2px solid var(--ocre);

}


.header-acciones .descargar:hover{

    background:var(--ocre);

    color:#ffffff;

}


/* ==========================================================
   LAYOUT PRINCIPAL
========================================================== */

.layout{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:30px;

    width:95%;

    max-width:1700px;

    margin:25px auto 25px;

    align-items:start;

}


/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar{

    position:sticky;

    top:180px;

    height:calc(100vh - 210px);

    overflow-y:auto;

    overflow-x:hidden;

    background:var(--blanco);

    border-radius:var(--radio);

    box-shadow:var(--sombra);

    padding:20px;

}


.sidebar::-webkit-scrollbar{

    width:7px;

}


.sidebar::-webkit-scrollbar-track{

    background:#f0f0f0;

    border-radius:10px;

}


.sidebar::-webkit-scrollbar-thumb{

    background:var(--ocre);

    border-radius:10px;

}


.sidebar::-webkit-scrollbar-thumb:hover{

    background:var(--ocre-oscuro);

}


/* ==========================================================
   TITULO SIDEBAR
========================================================== */

.sidebar h3{

    margin-bottom:18px;

    padding-bottom:10px;

    border-bottom:2px solid var(--ocre);

    color:var(--negro);

    font-size:22px;

    font-weight:800;

}


/* ==========================================================
   CATEGORIAS
========================================================== */

.menu-categorias{

    display:flex;

    flex-direction:column;

    gap:6px;

}


.menu-categorias a{

    display:flex;

    align-items:center;

    width:100%;

    padding:10px 14px;

    border-radius:8px;

    text-decoration:none;

    color:#333333;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}


.menu-categorias a:hover{

    background:var(--ocre);

    color:#ffffff;

    transform:translateX(5px);

}


.menu-categorias a.activa,
.menu-categorias a.activo{

    background:var(--ocre);

    color:#ffffff;

    font-weight:700;

}


/* ==========================================================
   ACCESOS RAPIDOS
========================================================== */

.sidebar-rapidos{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:22px;

    padding-bottom:18px;

    border-bottom:2px solid #e9e9e9;

}


.sidebar-rapidos a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:42px;

    border-radius:10px;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    letter-spacing:.4px;

    transition:.25s;

}


/* OFERTAS */

.sidebar-rapidos a:nth-child(1){

    background:var(--ocre);

    color:#ffffff;

}


.sidebar-rapidos a:nth-child(1):hover{

    background:var(--ocre-oscuro);

}


/* MAS VENDIDOS */

.sidebar-rapidos a:nth-child(2){

    background:var(--negro);

    color:#ffffff;

}


.sidebar-rapidos a:nth-child(2):hover{

    background:#2b2b2b;

}


/* NOVEDADES */

.sidebar-rapidos a:nth-child(3){

    background:#ffffff;

    color:var(--negro);

    border:2px solid var(--ocre);

}


.sidebar-rapidos a:nth-child(3):hover{

    background:var(--ocre);

    color:#ffffff;

}


/* ==========================================================
   CONTENIDO
========================================================== */

.contenido{

    width:100%;

    min-width:0;

}


/* ==========================================================
   GRILLA PRODUCTOS
========================================================== */

.productos{

    display:grid;

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

    gap:25px;

}


.productos-grid{

    display:grid;

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

    gap:25px;

}


/* ==========================================================
   TITULO SECCION
========================================================== */

.titulo-seccion{

    margin-bottom:25px;

    color:var(--negro);

    font-size:32px;

    font-weight:800;

}


/* ==========================================================
   TARJETA PRODUCTO
========================================================== */

.producto{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    background:#ffffff;

    border-radius:18px;

    padding:18px;

    text-align:center;

    box-shadow:var(--sombra);

    transition:.25s;

    overflow:hidden;

}


.producto:hover{

    transform:translateY(-6px);

    box-shadow:var(--sombra-fuerte);

}


/* ==========================================================
   IMAGEN PRODUCTO
========================================================== */

.imagen-producto{

    position:relative;

    width:100%;

    height:250px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    margin-bottom:12px;

}


.imagen-producto img{

    max-width:190px;

    max-height:240px;

    width:auto;

    height:auto;

    object-fit:contain;

    transition:.30s;

}


.producto:hover .imagen-producto img{

    transform:scale(1.05);

}


/* ==========================================================
   OFERTA
========================================================== */

.etiqueta-oferta{

    position:absolute;

    top:5px;

    left:5px;

    z-index:20;

    padding:6px 12px;

    background:var(--rojo);

    color:#ffffff;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

    box-shadow:0 3px 10px rgba(0,0,0,.25);

}


/* ==========================================================
   CATEGORIA PRODUCTO
========================================================== */

.categoria{

    margin-bottom:6px;

    color:var(--ocre);

    font-size:13px;

    font-weight:bold;

    text-transform:uppercase;

}


/* ==========================================================
   NOMBRE PRODUCTO
========================================================== */

.producto h2{

    margin-bottom:12px;

    min-height:48px;

    color:#222222;

    font-size:19px;

    font-weight:700;

    line-height:1.3;

}


/* ==========================================================
   MARCA
========================================================== */

.marca{

    margin-bottom:6px;

    color:#777777;

    font-size:13px;

    font-weight:600;

}


/* ==========================================================
   PRECIOS
========================================================== */

.precio-anterior{

    margin-bottom:3px;

    color:#888888;

    font-size:16px;

    text-decoration:line-through;

}


.precio{

    margin-bottom:10px;

    color:var(--ocre);

    font-size:30px;

    font-weight:bold;

}


/* ==========================================================
   STOCK
========================================================== */

.stock{

    margin-bottom:15px;

    font-weight:bold;

}


.disponible,
.ok{

    color:#28a745;

}


.agotado,
.no{

    color:#dc3545;

}


/* ==========================================================
   BOTON AGREGAR
========================================================== */

.agregar-carrito{

    width:100%;

    height:46px;

    margin-bottom:10px;

    border:none;

    border-radius:10px;

    background:var(--negro);

    color:#ffffff;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}


.agregar-carrito:hover{

    background:#2d2d2d;

    transform:translateY(-2px);

}


/* ==========================================================
   BOTON WHATSAPP PRODUCTO
========================================================== */

.boton{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:46px;

    border-radius:10px;

    background:var(--verde);

    color:#ffffff;

    text-decoration:none;

    font-weight:bold;

    transition:.25s;

}


.boton:hover{

    background:var(--verde-hover);

    transform:translateY(-2px);

}


/* ==========================================================
   PRODUCTO OCULTO
========================================================== */

.producto.oculto{

    display:none !important;

}


.producto.oferta{

    border:2px solid rgba(201,130,42,.25);

}


.productos-vacio{

    width:100%;

    padding:60px 20px;

    text-align:center;

    color:#888888;

    font-size:18px;

}


.producto img[src*="no-image"]{

    opacity:.65;

}


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

.panel-carrito{

    position:fixed;

    top:0;

    right:-420px;

    width:400px;

    max-width:100%;

    height:100vh;

    background:#ffffff;

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

    display:flex;

    flex-direction:column;

    transition:right .35s ease;

    z-index:9999;

}


.panel-carrito.abierto{

    right:0;

}


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

.panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:20px;

    background:var(--negro);

    color:#ffffff;

    border-bottom:4px solid var(--ocre);

}


.panel-header h2{

    font-size:22px;

    font-weight:700;

}


#cerrar-carrito{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:none;

    border:none;

    color:#ffffff;

    font-size:25px;

    cursor:pointer;

    border-radius:8px;

}


#cerrar-carrito:hover{

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

}


/* ==========================================================
   LISTA CARRITO
========================================================== */

.lista-carrito{

    flex:1;

    overflow-y:auto;

    padding:20px;

}


.lista-carrito::-webkit-scrollbar{

    width:7px;

}


.lista-carrito::-webkit-scrollbar-track{

    background:#eeeeee;

}


.lista-carrito::-webkit-scrollbar-thumb{

    background:#cccccc;

    border-radius:10px;

}


.lista-carrito::-webkit-scrollbar-thumb:hover{

    background:var(--ocre);

}


/* ==========================================================
   CARRITO VACIO
========================================================== */

.carrito-vacio{

    margin-top:40px;

    text-align:center;

    color:#888888;

    font-size:15px;

}


/* ==========================================================
   ITEM CARRITO
========================================================== */

.item-carrito{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:12px 0;

    border-bottom:1px solid #dddddd;

}


.item-carrito > div:first-child{

    flex:1;

    min-width:0;

}


.item-carrito h4{

    margin-bottom:5px;

    color:#222222;

    font-size:15px;

    line-height:1.3;

}


.item-carrito p{

    color:var(--ocre);

    font-size:14px;

    font-weight:bold;

}


/* ==========================================================
   CONTROLES CANTIDAD
========================================================== */

.controles-cantidad{

    display:flex;

    align-items:center;

    gap:8px;

    flex-shrink:0;

}


.controles-cantidad button{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:6px;

    background:var(--negro);

    color:#ffffff;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}


.controles-cantidad button:hover{

    background:var(--ocre);

}


.controles-cantidad span{

    min-width:22px;

    text-align:center;

    color:#222222;

    font-weight:bold;

}


/* ==========================================================
   DATOS CLIENTE
========================================================== */

.datos-cliente{

    padding:0 20px 15px;

    background:#ffffff;

}


.datos-cliente input{

    width:100%;

    height:40px;

    margin-bottom:10px;

    padding:0 12px;

    border:1px solid #dddddd;

    border-radius:8px;

    background:#ffffff;

    color:#222222;

    font-family:inherit;

    font-size:14px;

    outline:none;

}


.datos-cliente input:focus{

    border-color:var(--ocre);

    box-shadow:
        0 0 0 3px
        rgba(201,130,42,.12);

}


.datos-cliente input::placeholder{

    color:#999999;

}


/* ==========================================================
   FOOTER CARRITO
========================================================== */

.panel-footer{

    padding:20px;

    background:#ffffff;

    border-top:1px solid #dddddd;

}


.panel-footer h3{

    margin-bottom:15px;

    color:#111111;

    font-size:20px;

    font-weight:700;

}


/* ==========================================================
   VACIAR CARRITO
========================================================== */

.boton-vaciar{

    width:100%;

    height:45px;

    margin-bottom:10px;

    border:none;

    border-radius:10px;

    background:#eeeeee;

    color:#333333;

    font-family:inherit;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

}


.boton-vaciar:hover{

    background:#dddddd;

}


/* ==========================================================
   ENVIAR WHATSAPP
========================================================== */

.boton-whatsapp{

    width:100%;

    height:50px;

    border:none;

    border-radius:10px;

    background:var(--verde);

    color:#ffffff;

    font-family:inherit;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}


.boton-whatsapp:hover{

    background:var(--verde-hover);

}


/* ==========================================================
   ANIMACION CONTADOR
========================================================== */

.contador-animado{

    animation:rebote-contador .3s ease;

}


@keyframes rebote-contador{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.25);
    }

    100%{
        transform:scale(1);
    }

}


/* ==========================================================
   UTILIDADES
========================================================== */

button{

    font-family:inherit;

}


img{

    user-select:none;

}


.hidden{

    display:none !important;

}


/* ==========================================================
   TABLET / NOTEBOOK
========================================================== */

@media (max-width:1100px){

    .header-logo img{

        width:125px;

    }


    .header-titulos h1{

        font-size:34px;

    }


    .header-titulos h1 span{

        font-size:18px;

    }


    .header-buscador .buscador{

        width:75%;

        min-width:420px;

    }


    .layout{

        grid-template-columns:220px 1fr;

        gap:20px;

        margin-top:305px;

    }


    .productos,
    .productos-grid{

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

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:800px){

    .header-contenedor{

        width:92%;

        padding:14px 0 16px;

    }


    .header-logo{

        gap:14px;

    }


    .header-logo img{

        width:105px;

    }


    .header-titulos h1{

        font-size:30px;

    }


    .header-titulos h1 span{

        font-size:17px;

    }


    .header-contacto{

        top:18px;

        right:0;

    }


    .header-contacto a,
    .header-contacto div{

        font-size:12px;

    }


    .header-buscador{

        margin-top:16px;

        margin-bottom:14px;

    }


    .header-buscador .buscador{

        width:80%;

        min-width:0;

        height:48px;

    }


    .header-acciones{

        gap:8px;

    }


    .accion-header{

        min-width:125px;

        padding:0 12px;

        font-size:14px;

    }


    .layout{

        display:block;

        width:92%;

        margin-top:300px;

    }


    .sidebar{

        position:relative;

        top:auto;

        height:auto;

        max-height:300px;

        margin-bottom:25px;

    }


    .menu-categorias{

        display:grid;

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

        gap:8px;

    }


    .menu-categorias a{

        justify-content:center;

        text-align:center;

    }


    .productos,
    .productos-grid{

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

    }

}


/* ==========================================================
   CELULAR
========================================================== */

@media (max-width:550px){

    .header-contenedor{

        width:92%;

        padding:12px 0 14px;

    }


    .header-logo{

        flex-direction:column;

        gap:7px;

        justify-content:center;

        text-align:center;

    }


    .header-logo img{

        width:90px;

    }


    .header-titulos{

        width:100%;

        justify-content:center;

    }


    .header-titulos h1{

        font-size:27px;

        line-height:1.2;

        white-space:normal;

        text-align:center;

    }


    .header-titulos h1 span{

        display:block;

        margin:5px 0 0;

        font-size:16px;

    }


    /* CONTACTO */

    .header-contacto{

        position:static;

        width:100%;

        margin-top:8px;

        align-items:center;

        text-align:center;

    }


    .header-contacto a,
    .header-contacto div{

        font-size:13px;

    }


    /* BUSCADOR */

    .header-buscador{

        margin-top:18px;

        margin-bottom:18px;

    }


    .header-buscador .buscador{

        width:100%;

        min-width:0;

        height:50px;

        font-size:16px;

    }


    /* BOTONES */

    .header-acciones{

        width:100%;

        flex-direction:column;

        gap:9px;

    }


    .accion-header{

        width:100%;

        min-width:0;

        height:44px;

    }


    /* CONTENIDO */

    .layout{

        width:92%;

        margin-top:25px;

    }


    /* SIDEBAR */

    .sidebar{

        max-height:300px;

        padding:16px;

    }


    .sidebar h3{

        font-size:20px;

    }


    .menu-categorias{

        grid-template-columns:1fr;

    }


    /* PRODUCTOS */

    .productos,
    .productos-grid{

        grid-template-columns:1fr;

        gap:20px;

    }


    .producto{

        padding:15px;

    }


    .imagen-producto{

        height:230px;

    }


    .imagen-producto img{

        max-width:160px;

        max-height:210px;

    }


    .producto h2{

        font-size:18px;

    }


    .precio{

        font-size:28px;

    }


    /* CARRITO */

    .panel-carrito{

        width:100%;

        right:-100%;

    }


    .panel-carrito.abierto{

        right:0;

    }

}


/* ==========================================================
   CELULAR MUY PEQUEÑO
========================================================== */

@media (max-width:380px){

    .header-logo img{

        width:80px;

    }


    .header-titulos h1{

        font-size:24px;

    }


    .header-titulos h1 span{

        font-size:15px;

    }


    .header-contacto a,
    .header-contacto div{

        font-size:12px;

    }


    .header-buscador{

        margin-top:16px;

        margin-bottom:16px;

    }


    .accion-header{

        font-size:13px;

    }


    .producto h2{

        font-size:17px;

    }


    .precio{

        font-size:25px;

    }

}
/* ==========================================================
   AJUSTE CELULAR - HEADER Y CONTENIDO
========================================================== */

@media (max-width:550px){

    /* El header deja de quedar fijo en el celular */
    .header{

        position:relative !important;

        top:auto;

        left:auto;

        right:auto;

    }


    /* El contenido empieza inmediatamente debajo del header */

    .layout{

        margin-top:25px !important;

    }


    /* El sidebar vuelve a quedar visible */

    .sidebar{

        position:relative !important;

        top:auto !important;

        height:auto !important;

        max-height:300px;

        margin-bottom:25px;

    }

}
/* ==========================================================
   CELULAR - HEADER NO FIJO
========================================================== */

@media screen and (max-width:550px){

    body .header{

        position:relative !important;

        top:auto !important;

        left:auto !important;

        right:auto !important;

        bottom:auto !important;

    }

}
/* ==========================================
   BANNERS / CARRUSEL
========================================== */

.banner-contenedor {
    width: 100%;
    max-width: 1200px;
    margin: 22px auto 0;
    position: relative;
}

.banner-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 1920 / 600;
}

.banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
    display: block;
}

.banner.activo {
    opacity: 1;
    z-index: 2;
}

/* Indicadores */

.banner-indicadores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.indicador {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #999;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicador.activo {
    width: 11px;
    height: 11px;
    background: #C9822A;
}


/* ==========================================
   BANNERS EN CELULAR
========================================== */

@media (max-width: 768px) {

    .banner-contenedor {
        width: 100%;
        margin: 15px auto 0;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .banner-slider {
        border-radius: 10px;
        aspect-ratio: 1920 / 600;
    }

    .banner-indicadores {
        margin-top: 6px;
    }

    .indicador {
        width: 8px;
        height: 8px;
    }

    .indicador.activo {
        width: 10px;
        height: 10px;
    }

}


/* ==========================================
   IMAGEN PRODUCTO EN CELULAR
========================================== */

@media (max-width: 768px) {

    .imagen-producto img {
        max-width: 225px;
        max-height: 250px;
        transform: scale(1.10);
    }

}


/* ==========================================================
   ANIMACION AL HACER CLICK / TOCAR
========================================================== */

/* Todos los elementos interactivos */

button,
a,
.indicador,
.menu-categorias a,
.accion-header,
.agregar-carrito,
.boton,
.boton-whatsapp,
.boton-vaciar,
#cerrar-carrito,
.controles-cantidad button {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}


/* Efecto visual mientras se mantiene presionado */

button:active,
a:active,
.indicador:active,
.menu-categorias a:active,
.accion-header:active,
.agregar-carrito:active,
.boton:active,
.boton-whatsapp:active,
.boton-vaciar:active,
#cerrar-carrito:active,
.controles-cantidad button:active {
    transform: scale(0.94);
    filter: brightness(0.88);
    transition: transform 0.08s ease, filter 0.08s ease;
}


/* Botones principales */

.agregar-carrito:active,
.boton-whatsapp:active,
.boton-vaciar:active,
.accion-header:active {
    box-shadow:
        0 0 0 4px rgba(201,130,42,.20);
}


/* Categorías */

.menu-categorias a:active {
    transform: translateX(3px) scale(0.97);
}


/* Botones + y - del carrito */

.controles-cantidad button:active {
    transform: scale(0.88);
}


/* Indicadores del banner */

.indicador:active {
    transform: scale(0.80);
}


/* Botón cerrar carrito */

#cerrar-carrito:active {
    transform: scale(0.85);
}
/* ==========================================================
   IMAGEN EN FICHA INDIVIDUAL DEL PRODUCTO
========================================================== */

.producto-detalle-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 500px;
}

.producto-detalle-imagen img {
    max-width: 360px;
    max-height: 500px;
    width: auto;
    height: auto;
    object-fit: contain;
}