/* ==========================================
   PROYECTO PIZZERÍA V7
   estilos.css
========================================== */

/*-----------------------
VARIABLES
-----------------------*/

:root{

    --fondo:#101010;
    --header:#181818;
    --card:#1f1f1f;

    --verde:#25D366;
    --verdeHover:#1fb85a;

    --amarillo:#FFC107;

    --texto:#ffffff;
    --texto2:#bdbdbd;

    --borde:#303030;

    --radio:18px;

    --sombra:0px 10px 30px rgba(0,0,0,.35);

}

/*-----------------------
RESET
-----------------------*/

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

html{
    scroll-behavior:smooth;
}

body{

    background:

        radial-gradient(
            circle at 10% 15%,
            rgba(0,255,150,.10),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 10%,
            rgba(130,40,220,.14),
            transparent 32%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(0,120,220,.10),
            transparent 38%
        ),

        #070809;

    color:var(--texto);

    font-family:'Poppins',sans-serif;

}

/*-----------------------
HEADER
-----------------------*/

header{

    position:sticky;

    top:0;

    z-index:999;

    background:

    radial-gradient(
        circle at 10% 50%,
        rgba(0,180,255,.10),
        transparent 35%
    ),

    radial-gradient(
        circle at 55% 0%,
        rgba(140,60,255,.12),
        transparent 40%
    ),

    radial-gradient(
        circle at 95% 50%,
        rgba(0,255,150,.08),
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #0b0c0f,
        #15171b 50%,
        #0b0c0f
    );

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 40px;

    border-bottom:none;

}


.logo{

    font-size:28px;

    font-weight:700;

}

nav{

    display:flex;

    gap:15px;

}

nav button{

    border:none;

    padding:12px 24px;

    border-radius:30px;

    background:#2b2b2b;

    color:white;

    cursor:pointer;

    transition:.30s;

}

nav button:hover{

    background:var(--verde);

}

nav button.activo{

    background:var(--verde);

}




.carrito{

     background:#0ca120;

    padding:10px 18px;

    border-radius:30px;

    font-weight:bold;

    cursor:pointer;

}

/* ==========================================
   MI PEDIDO — MÓVIL
========================================== */

@media (max-width:768px){

    .textoMiPedido{
        display:none;
    }

    .carrito{
        padding:10px 14px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:6px;
        transform:translateX(0);
    }

}
@media(max-width:600px){

    .publicidadMedio{
        width:100% !important;
        margin-left:0 !important;
        box-sizing:border-box;
    }

}

/*-----------------------
BANNER
-----------------------*/

.banner{

    height:420px;

    background:
    linear-gradient(rgba(0,0,0,.55),
    rgba(0,0,0,.70)),
    url("../img/banner/banner.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.sombra{

    max-width:700px;

}

.banner h1{

    font-size:58px;

    margin-bottom:20px;

}

.banner p{

    color:#dddddd;

    font-size:22px;

    margin-bottom:30px;

}

.banner a{

    background:var(--verde);

    color:white;

    text-decoration:none;

    padding:16px 35px;

    border-radius:40px;

    transition:.30s;

}

.banner a:hover{

    background:var(--verdeHover);

}

/*-----------------------
CATALOGO
-----------------------*/

.contenedor{

    width:92%;

    max-width:1300px;

    margin:auto;

    padding:60px 0;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



.card:hover{
    transform:translateY(-8px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.45),
        0 0 25px rgba(80,90,190,.08);
}

.card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:contain;

}

.card h2{

    padding-top:0;

    font-size:17px;

    text-align:left;

    line-height:1.2;

    font-weight:400;

    margin-bottom:8px;

    transform:translateY(-5px);

    padding-left:10px;

}

.precio{

    padding-left:10px;

    text-align:left;

    font-size:16px;

    color:#E1BD50;

    font-weight:400;

    margin:10px 0;
}



/* =====================================
   AJUSTES TARJETAS SOLO EN MÓVIL
===================================== */

@media (max-width: 767px) {

    .precio {
        font-size: 16px;
        font-weight: 600;
        padding-left: 8px;
        margin: 7px 0;
    }

}




/*-----------------------
CANTIDAD
-----------------------*/

.cantidad{

    margin-top:15px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

}

.cantidad button{

    width:40px;

    height:40px;

    border-radius:50%;

    border:none;

    background:#333;

    color:white;

    font-size:22px;
    line-height: 36px;

    cursor:pointer;

}

.cantidad button span{
    position: relative;
    top: -2px;
}

/*-----------------------
BOTON
-----------------------*/

.btnAgregar{

    width:90%;

    display:block;

    margin:0 auto 8px auto;

    border:none;

    background: #03af4b;

    color:white;

    padding:0px 10px;

    border-radius:12px;

    font-size:16px;

    cursor:pointer;

    transition:.30s;
    height: 33px;

}

.btnAgregar:hover{

    background:var(--verdeHover);

}




.cantidad button:active{

    animation: iluminarCantidad 0.35s ease-out;

}


@keyframes iluminarCantidad{

    0%{

        background: #333;

        box-shadow:
            0 0 0 rgba(37,211,102,0);

    }

    40%{

        background: rgba(37,211,102,0.45);

        box-shadow:
            0 0 12px rgba(37,211,102,0.35);

    }

    100%{

        background: #333;

        box-shadow:
            0 0 0 rgba(37,211,102,0);

    }

}








footer{

    text-align:center;

    padding:25px 15px 15px;

    color:var(--texto2);

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

    background:

        radial-gradient(
            circle at 15% 0%,
            rgba(0,180,255,.10),
            transparent 35%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(140,60,255,.10),
            transparent 40%
        ),

        radial-gradient(
            circle at 85% 0%,
            rgba(0,255,150,.07),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #0c0d10,
            #070809
        );

}



/* DATOS DEL FOOTER */

.datoFooter{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin:12px 0;

    font-size:15px;

}


/* ICONOS SVG */

.iconoFooter{

    display:flex;

    align-items:center;

    justify-content:center;

    width:26px;

    height:26px;

    flex-shrink:0;

}


.iconoFooter svg{

    width:24px;

    height:24px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* DERECHOS */

.derechosFooter{

    margin-top:25px;

    padding-top:18px;

    border-top:1px solid var(--borde);

    font-size:13px;

    opacity:.8;

}


/*=====================================
  VISTA PC
=====================================*/

@media (min-width:768px){

    footer{

        display:flex;

        flex-wrap:wrap;

        align-items:center;

        justify-content:center;

        column-gap:45px;

    }


    .datoFooter{

        margin:0;

    }


    .derechosFooter{

        width:100%;

        margin-top:25px;

    }

}


/*=====================================
  VISTA MÓVIL
=====================================*/

@media (max-width:767px){

    .datoFooter{

        margin:14px 0;

    }

}




/*-----------------------
RESPONSIVE
-----------------------*/

.contenedor {

    width: 92%;

    max-width: 1300px;

    margin: auto;

    padding: 60px 0;

    display: grid;

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

    gap: 18px;
}


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

@media (min-width: 700px) {

    .contenedor {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 25px;

    }

}


/* =====================================
   PC
===================================== */

@media (min-width: 1000px) {

    .contenedor {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 25px;

        max-width: 1100px;

    }

}

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

.panelCarrito{

    position:fixed;

    top:0;

    right:-420px;

    width:400px;

    height:100vh;
height:100dvh;

    background:#1c1c1c;

    box-shadow: none;

    transition:.35s;

    display:flex;

    flex-direction:column;

    z-index:9999;

}

.panelCarrito.abierto{

    right:0;

}
/* ==========================================
   CARRITO — MÓVIL
========================================== */

@media(max-width:600px){

    .panelCarrito{
        width:100%;
        max-width:100%;
        right:-100%;
    }

}


.cabeceraCarrito{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

    

}

.cabeceraCarrito h2{

    font-size:22px;

}

.eliminar svg{

    width:25px;
    height:25px;
    transform:translateY(2px);

}

.cabeceraCarrito button{

    background:none;

    border:none;

    color:white;

    font-size:26px;

    cursor:pointer;

}

#listaCarrito{

    flex:1;

    overflow:auto;

    padding:20px;

}

.pieCarrito{

    padding:28px;

    

}

#btnWhatsapp{

    width:100%;

    margin-top:20px;

    padding:10px;

    border:none;

    background:#07c24b;

    color:white;

    border-radius:10px;

    cursor:pointer;

    font-size:17px;

}



/* =========================
CARRITO - BOTONES GRANDES
========================= */

.controlesCarrito {
    display: flex;
    align-items: center;
    justify-content: center; /* 👈 clave */
    gap: 6px; /* 👈 reduce separación */
}

/* botones + y - */
.controlesCarrito .mas,
.controlesCarrito .menos {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: none;
    background: #333;
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.controlesCarrito .mas:hover,
.controlesCarrito .menos:hover {
    background: #25D366;
    transform: scale(1.05);
}

/* número cantidad */
.controlesCarrito span {
    font-size: 18px;
    font-weight: bold;
    min-width: 25px;
    text-align: center;
}

/* 🗑 botón eliminar */
.controlesCarrito .eliminar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: none;
    background: #b00020;
    color: white;
    font-size: 25px;
    cursor: pointer;
    transition: 0.2s;
    
}

.controlesCarrito .eliminar:hover {
    background: #ff1744;
    transform: scale(1.05);
}
@keyframes popCantidad {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
        color: #25d333;
    }
    100% {
        transform: scale(1);
    }
}

.animar-cantidad {
    animation: popCantidad 0.25s ease;
}
.itemCarrito{
    background:#2a2a2a;
    margin-bottom:10px;   /* 👈 espacio entre productos */
    padding:10px;
    border-radius:12px;
}


.heroBanner{

    height:420px;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

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

    text-align:center;

    color:white;

}

.heroContenido h1{
    font-size: 35px;
    margin-bottom: 15px;
}

.heroContenido p{
    font-size: 20px;
    color: #ddd;
}
.btnHero{
    display:inline-block;
    margin-top:20px;
    padding:14px 30px;
    background:#25D366;
    color:white;
    text-decoration:none;
    border-radius:30px;
    font-weight:bold;
}

@media(max-width:600px){

    .heroContenido h1 {
        font-size: 25px !important;
        line-height: 1.12 !important;

        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;

        box-sizing: border-box;

        white-space: normal;
        overflow-wrap: anywhere;

        margin-bottom: 12px;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
        
    }

    .heroContenido p{
        line-height:1.15;
    }

}

/* SOMBRA DEL TITULO DEL BANNER */
#tituloBannerWeb {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
}

/*=================================
FORMULARIO CLIENTE
=================================*/

.datosCliente{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:20px;

}

.datosCliente input,
.datosCliente textarea,
.datosCliente select{

    width:100%;

    padding:12px;

    border:none;

    border-radius:10px;

    background:#2c2c2c;

    color:white;

    font-size:15px;

    outline:none;

}

.datosCliente textarea{

    resize:none;

    min-height:70px;

}

.datosCliente input::placeholder,
.datosCliente textarea::placeholder{

    color:#bdbdbd;

}
#listaCarrito{
    flex:1;
    overflow:auto;
    padding:12px; /* antes 20px */
}
#loader{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#101010;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:99999;
    color:white;
}

/* spinner */
.spinner{
    width:60px;
    height:60px;
    border:6px solid #333;
    border-top:6px solid #25D366;
    border-radius:50%;
    animation: girar 1s linear infinite;
    margin-bottom:15px;
}

@keyframes girar{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
}
/*=================================*
* ANIMACIÓN TARJETAS
*=================================*/

.card {

    cursor: pointer;

    background: var(--card);

    border-radius: var(--radio);

    overflow: hidden;

    box-shadow: var(--sombra);

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .45s ease,
        transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s cubic-bezier(.22,.61,.36,1);

}


/*=================================*
* TARJETA VISIBLE
*=================================*/

.card.visible {

    opacity: 1;

    transform: translateY(0);

}


/*=================================*
* EFECTO AL PASAR EL MOUSE
*=================================*/

.card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 10px 24px rgba(0,0,0,0.15);

}


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

.img-producto {

    transition:
        transform .55s cubic-bezier(.22,.61,.36,1);

}


/*=================================*
* ZOOM SUAVE DE LA IMAGEN
*=================================*/

.card:hover .img-producto {

    transform: scale(1.07);

}


/*=================================*
* IMÁGENES CON FADE
*=================================*/

.card img {

    opacity: 0;

    transition:
        opacity .4s ease,
        transform .55s cubic-bezier(.22,.61,.36,1);

}


.card img.cargada {

    opacity: 1;

}
/*==========================
BOTONES CATEGORÍAS
==========================*/

.btnCategoria{

    background:var(--verde);

    color:#fff;

    border:none;

    border-radius:25px;

    padding:10px 18px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

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

}

.btnCategoria:hover{

    background:var(--verdeHover);

    transform:translateY(-2px);

}

.btnCategoria.activo{

    background:var(--amarillo);

    color:#111;

}
.carrito.rebote{

    animation: rebote .35s;

}

@keyframes rebote{

    0%{transform:scale(1);}
    40%{transform:scale(1.25);}
    70%{transform:scale(.92);}
    100%{transform:scale(1);}

}

@media(max-width:600px){

    .carrito{
        transform:translateY(-8px);
    }

}
@media(max-width:600px){

    .logo{
        transform:translateY(-9px);
    }

}
@media(max-width:600px){

    .carrito{
        transform:translate(29px, -8px);
    }

}

@media (max-width: 767px){

    .logo{
        width:100%;
        justify-content:center;
        text-align:center;
    }

}
/* ==========================================
   HISTORIAL DE PEDIDOS
========================================== */


.zonaHistorial{

    width: 90%;
    max-width: 900px;
    margin: 40px auto;

}


.zonaHistorial h2{

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

}



/* CONTENEDOR DE PEDIDOS */


#historialPedidos{

    padding-top:15px;

}



/* TARJETA PEDIDO */

.pedidoHistorial{

    background: var(--card);

    border-radius: 15px;

    padding: 10px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.3);

    border: 1px solid rgba(255,255,255,0.05);

}



/* TITULO PEDIDO */

.pedidoHistorial h3{

    margin-bottom: 15px;

    font-size: 20px;

}



/* TEXTOS */

.pedidoHistorial p{

    margin: 10px 0;

    line-height: 1.5;

}



/* LISTA PRODUCTOS */

.listaProductosHistorial{

    list-style: none;

    padding: 0;

    margin: 10px 0 15px;

}


.listaProductosHistorial li{

    padding: 5px 0;

}



/* ==================================
   PEDIDO VACÍO
================================== */

.historialVacio{

    text-align:center;

    padding:30px;

    background:
        linear-gradient(
            145deg,
            #181b31 0%,
            #111827 55%,
            #191329 100%
        );

    border:1px solid rgba(145,125,230,0.20);

    border-radius:18px;

    box-shadow:
        0 8px 22px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.03);

}
/* ==========================================
   MEJORAS HISTORIAL
========================================== */


.pedidoHistorial h3{

    font-size:22px;

    padding-bottom:10px;

    border-bottom:1px solid rgba(255,255,255,0.1);

}


/* ETIQUETA ESTADO */

.estadoPedido{

    display:inline-block;

    margin-top:8px;

    padding:5px 12px;

    border-radius:20px;

    background:#665c00;

    color:#fff;

    font-size:14px;

}


/* PRODUCTOS */

.listaProductosHistorial{

    background:rgba(255,255,255,0.03);

    border-radius:10px;

    padding:10px 15px;

}


.listaProductosHistorial li{

    border-bottom:1px solid rgba(255,255,255,0.05);

}


.listaProductosHistorial li:last-child{

    border-bottom:none;

}



.btnDetalles:hover{

    opacity:.85;

}

.btnDetalles:hover{

    transform:scale(1.02);

}


.detallesPedido p{

    margin:12px 0;

}


.listaProductosHistorial{

    padding-left:10px;

}


.listaProductosHistorial li{

    list-style:none;

    margin:8px 0;

}
/* ==========================================
   ESTADOS PEDIDOS
========================================== */


.estadoPedido{

    display:inline-block;

    padding:5px 12px;

    border-radius:20px;

    font-size:14px;

    font-weight:600;

}


/* Pendiente */

.estadoPedido.pendiente{

    background:#8a6d00;

}


/* Preparando */

.estadoPedido.preparando{

    background:#c56b00;

}


/* Listo */

.estadoPedido.listo{

    background:#16803c;

}


/* Entregado */

.estadoPedido.entregado{

    background:#0057a8;

}


/* Cancelado */

.estadoPedido.cancelado{

    background:#a80000;

}
/* ==========================================
   ETIQUETAS DE ESTADO PEDIDO
========================================== */


.estadoPedido{

    display:inline-block;

    margin-top:8px;

    padding:6px 14px;

    border-radius:20px;

    font-size:14px;

    font-weight:600;

}



/* Pendiente */

.estadoPedido.pendiente{

    background:#d6a400;

    color:#111;

}



/* Preparando */

.estadoPedido.preparando{

    background:#e67e22;

    color:white;

}



/* Listo */

.estadoPedido.listo{

    background:#25a65a;

    color:white;

}



/* Entregado */

.estadoPedido.cancelado{

    background:#c0392b;

    color:white;

}



/* Cancelado */

.estadoPedido.cancelado{

    background:#a80000;

    color:white;

}
.detallesPedido{

    max-height:0;

    opacity:0;

    overflow:hidden;

    transition:max-height .45s ease, opacity .35s ease;

}

/* ==================================
   DETALLES PEDIDO
================================== */

.detallesPedido{

    max-height:0;

    opacity:0;

    overflow:hidden;

    margin-top:0;

    padding-top:0;

    border-top:none;

    transition:
        max-height .45s ease,
        opacity .35s ease,
        margin-top .25s ease,
        padding-top .25s ease;

}


.detallesPedido.abierto{

    max-height:800px;

    opacity:1;

    margin-top:15px;

    padding-top:15px;

    border-top:1px solid rgba(255,255,255,.15);

}

.detallesPedido.abierto{

    max-height:800px;

    opacity:1;

}


.btnHistorial:hover{

    background:#252525;

}

#flechaHistorial{

    transition:.35s;

}

#flechaHistorial.abierta{

    transform:rotate(180deg);

}

#contenedorHistorial{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

#contenedorHistorial.abierto{

    max-height:5000px;

}

#historialPedidos .pedidoHistorial + .pedidoHistorial{

    margin-top:15px;

}

/* =====================================
   PRODUCTOS HISTORIAL CLIENTE
===================================== */


.listaProductosHistorial li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#181818;

    padding:10px;

    margin-bottom:8px;

    border-radius:8px;

}


.listaProductosHistorial strong{

    color:#fff;

}
/* ==========================================
   HISTORIAL CLIENTE V9
========================================== */

.detallesPedido{

    margin-top:15px;

}


.datosPedidoCliente{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    margin:15px 0;

}


.datosPedidoCliente p{

    margin:0;

    background:#181818;

    padding:12px;

    border-radius:10px;

    border:1px solid #2d2d2d;

}


.infoPedidoExtra{

    margin-top:15px;

}


.lineaPedido{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#181818;

    padding:12px;

    margin-bottom:10px;

    border-radius:10px;

}


.lineaPedido strong{

     color:#fff;

}
.notificacionCliente{

    position:fixed;

    bottom:25px;

    right:25px;

    background:#25D366;

    color:white;

    padding:15px 20px;

    border-radius:12px;

    font-weight:bold;

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

    z-index:9999;

    animation:entradaNotificacion .3s ease;

}


@keyframes entradaNotificacion{

    from{

        opacity:0;

        transform:translateY(20px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ==============================
   MODAL CONFIRMACION WHATSAPP
============================== */


#modalConfirmacionPedido,
.modalConfirmacion{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    z-index:50000;

}


#modalConfirmacionPedido.mostrar,
.modalConfirmacion.mostrar{

    display:flex;

}



.contenidoConfirmacion{

    background:#1f1f1f;

    padding:30px;

    width:90%;

    max-width:400px;

    border-radius:20px;

    text-align:center;

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

}



.contenidoConfirmacion h2{

    margin-bottom:15px;

}



.contenidoConfirmacion p{

    color:#ccc;

    margin-bottom:25px;

}



.contenidoConfirmacion button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:30px;

    background:#25D366;

    color:white;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

}
.cardAdminProducto{

    position:relative;

}



/* ==========================================
   FILTROS DEL CATÁLOGO
========================================== */

.zonaFiltrosCliente{
    width:90%;
    max-width:900px;
    margin:25px auto 10px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    position:relative;
    z-index:20;
}


/* BUSCADOR */

.contenedorBuscadorCliente{

    width:300px;

    flex:none;

    position:relative;

}


.iconoBuscadorCliente{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    font-size:20px;

    pointer-events:none;

}


#buscarProductoCliente{

    width:100%;

    height:46px;

    padding:12px 20px 12px 50px;

    border:1px solid #3d3b3b;

    border-radius:30px;

    font-family:inherit;

    font-size:15px;

    outline:none;

    background:transparent;
color:#ffffff;

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

}



#buscarProductoCliente:focus{

    border-color:#2196F3;
    color:#ffffff;
    box-shadow:
        0 0 0 2px rgba(33,150,243,.15);
}


/* ==========================================
   FILTRO PRECIO
========================================== */

.filtroPrecioCliente{

    position:relative;

}


/* BOTÓN PRECIO */

.btnFiltroPrecio{

    height:46px;

    padding:0 11px;

    border:1px solid #ddd;

    border-radius:30px;

    background:transparent;
color:#ffffff;
border:1px solid #555;

    font-family:inherit;

    font-size:14px;

    cursor:pointer;

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

    white-space:nowrap;

}

.btnFiltroPrecio.activo{
    border-color:#2196F3;
    color:#ffffff;
    box-shadow:
        0 0 0 2px rgba(33,150,243,.15);
}

.btnFiltroPrecio > span:last-child{
    margin-left:6px;
    font-size:12px;
}


/* ==========================================
   PANEL DESPLEGABLE
========================================== */

.panelFiltroPrecio{

    width:fit-content;

    max-width:none;

    min-width:0;

    margin:10px auto 0;

    padding:10px 12px;

    background:transparent;

    border-radius:16px;

    box-shadow:none;

    display:none;
}


.panelFiltroPrecio.abierto{

    display:block;

}
/* CAMPOS DE PRECIO */
.panelFiltroPrecio input[type="number"]{

    width:90px;

    height:40px;

    font-size:16px;

    text-align:center;

    border-radius:10px;

    border:1px solid #ddd;

}


/* ==========================================
   TODOS LOS ELEMENTOS EN UNA SOLA LÍNEA
========================================== */

.filaPrecios{

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:8px;

    width:fit-content;

    margin:auto;

}





/* ==========================================
   CAMPOS DE PRECIO
========================================== */

.campoPrecio input{

    width:60px;
    height:38px;

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

    border-radius:9px;

    border:1px solid #555;

    background:transparent;
    color:#ffffff;

    font-family:inherit;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}



/* ==========================================
   CAMPO DE PRECIO ACTIVO
========================================== */

.campoPrecio input:focus{

    outline:none;

    border-color:#2196F3;

    box-shadow:
        0 0 0 2px rgba(33,150,243,.15);
}


/* ==========================================
   PLACEHOLDER
========================================== */

.campoPrecio input::placeholder{

    color:#999999;
    opacity:1;
}

/* ==========================================
   ETIQUETAS DE LOS CAMPOS DE PRECIO
========================================== */

.campoPrecio label,
.campoMoneda label{

    display:block;

    width:100%;

    text-align:center;

    font-size:13px;

    color:#ffffff;

    font-weight:500;

    margin:0;

}

/* ==========================================
   SELECTOR DE MONEDA
========================================== */





#monedaFiltroPrecio{

    width:70px;

    height:38px;

    padding:0 5px;

    border:1px solid #555;

    border-radius:9px;

    font-family:inherit;

    background:transparent;

    color:#ffffff;

}

/* ==========================================
   MONEDA — ESTADO ACTIVO
========================================== */

#monedaFiltroPrecio:focus{

    outline:none;

    border-color:#2196F3;

    box-shadow:
        0 0 0 2px rgba(33,150,243,.15);
}


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

#btnAplicarPrecio{

    width:70px;

    height:38px;

    padding:0 12px;

    border:1px solid #555;

    border-radius:9px;

    background:transparent;

    color:#ffffff;

    font-family:inherit;

    font-size:14px;

    cursor:pointer;

    white-space:nowrap;

    transition:.2s ease;
}


#btnAplicarPrecio:hover{

    opacity:.9;

}

/* ==========================================
   FILTRO POR PRECIO — AGRANDAR EN PC
   SIN AFECTAR EL ESTILO ACTUAL
========================================== */

@media (min-width:769px){

    .panelFiltroPrecio{
        padding:16px 22px;
    }

    .filaPrecios{
        gap:14px;
    }

    .campoPrecio input{
        width:70px;
        height:45px;
        font-size:13px;
    }

    #monedaFiltroPrecio{
        width:80px;
        height:45px;
        font-size:13px;
    }

    #btnAplicarPrecio,
    #btnCancelarPrecio{
        min-height:44px;
        padding-left:16px;
        padding-right:16px;
        font-size:15px;
    }

}


/* ==========================================
   SUBIR FILA DE PRECIOS — MÓVIL
========================================== */

@media(max-width:600px){

    .filaPrecios{
        transform:translateY(-85px) !important;
    }

}

@media(max-width:650px){

    .filaPrecios label{
        font-size:10px !important;
    }

    .filaPrecios input,
    .filaPrecios select,
    .filaPrecios button{
        font-size:10px !important;
    }

}

@media(max-width:650px){

    .filaPrecios .campoPrecio input{
        width:52px !important;
        height:34px !important;
    }

    .filaPrecios .campoMoneda select{
    width:72px !important;
    height:34px !important;
}

    .filaPrecios button{
        width:62px !important;
        height:34px !important;
        padding:0 6px !important;
    }

}

@media(max-width:650px){

    .filaPrecios .campoMoneda{
        position:relative;
    }

    .filaPrecios .campoMoneda select{
        width:72px !important;
        height:34px !important;
        appearance:none;
        -webkit-appearance:none;
    }

    .filaPrecios .campoMoneda::after{
        content:"▼";
        position:absolute;
        right:7px;
        top:27px;
        font-size:8px;
        pointer-events:none;
    }

}


/* ==========================================
   CENTRAR TEXTO DE BOTONES PRECIO — PC
========================================== */

@media (min-width: 769px){

    #btnAplicarPrecio,
    #btnCancelarPrecio{

        display:flex;

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

        text-align:center;

        padding-left:16px;
        padding-right:16px;

    }

}


/* ==========================================
   SELECTOR DE MONEDA — FLECHA
========================================== */

.campoMoneda{

    position:relative;

}


#monedaFiltroPrecio{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    padding-right:28px;

    cursor:pointer;

}


/* FLECHA PERSONALIZADA */

.campoMoneda::after{

    content:"▼";

    position:absolute;

    right:10px;

    bottom:13px;

    font-size:10px;

    color:#ffffff;

    pointer-events:none;

}
/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:600px){

    .zonaFiltrosCliente{

        flex-direction:row;

        align-items:center;

        gap:5px;

        width:95%;

    }


    .contenedorBuscadorCliente{

        width:auto;

        min-width:200px;

        flex:1;

    }


    #buscarProductoCliente{

        height:46px;

        padding-left:45px;

        font-size:14px;

    }


    .filtroPrecioCliente{

        flex:none;

    }


    .btnFiltroPrecio{

        height:46px;

        padding:0 16px;

        font-size:14px;

    }

}

@media (max-width: 550px) {
    .zonaFiltrosCliente {
        transform: translateY(-70px);
        margin-bottom: 30px;
    }
}
/* ==========================================
   FILTROS — MÁS COMPACTOS SOLO EN MÓVIL
========================================== */

@media(max-width:600px){

    .zonaFiltrosCliente{
        gap:7px;
    }

    .contenedorBuscadorCliente{
        width:240px;
    }

    #buscarProductoCliente{
        height:40px;
        padding:10px 16px 10px 45px;
        font-size:14px;
    }

    .iconoBuscadorCliente{
        left:16px;
        font-size:18px;
    }

    .btnFiltroPrecio{
        height:40px;
        padding:0 10px;
        font-size:13px;
    }

}


/* =====================================
   TEXTO DE EJEMPLO DEL BUSCADOR
===================================== */

#buscarProductoCliente::placeholder {
    color: #ffffff;
    opacity: 1;
}

@media (max-width:600px){

    .zonaFiltrosCliente .contenedorBuscadorCliente{
        width:220px !important;
        flex:none !important;
    }

}


@media (min-width:491px) and (max-width:549px){

    .zonaFiltrosCliente{
        transform:translateY(0) !important;
        margin-bottom:100px;
    }

}

@media(max-width:600px){

    #seccionProductosDestacados{
        transform:translateY(-90px);
    }

}

@media(max-width:600px){

    #tituloProductosWeb{
        transform:translateY(-140px);

         font-size:20px !important;
    }

}

@media(max-width:600px){

    #productos{
        transform:translateY(-145px);
    }

}





.iconoBuscadorCliente{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);

    width:20px;
    height:20px;

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

    color:#555;

    pointer-events:none;
}

.iconoBuscadorCliente svg{
    width:20px;
    height:20px;
    display:block;
}

.iconoPrecioCliente{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
    margin-right:6px;
     color:#777;
}

.iconoPrecioCliente svg{
    width:22px;
    height:22px;
    display:block;
    transform:translateY(-1px);
}



/* =====================================
   CARRUSEL DE IMÁGENES INDEX
===================================== */

.contenedorImagenProducto{

    position:relative;

}


.flechaProducto{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:34px;
    height:34px;

    border:none;

    border-radius:50%;

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

    color:white;

    font-size:18px;

    cursor:pointer;

    z-index:5;

}


.flechaProducto.izquierda{

    left:10px;

}


.flechaProducto.derecha{

    right:10px;

}


.flechaProducto:hover{

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

}
/* =====================================
   CONTADOR DE FOTOS DEL PRODUCTO
===================================== */

.contadorProducto{

    position:absolute;

    bottom:10px;

    right:10px;

    padding:5px 10px;

    border-radius:8px;

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

    color:white;

    font-size:12px;

    font-weight:600;

    z-index:5;

}
/* ==========================================
   MODAL DETALLES DEL PRODUCTO
========================================== */

.modalProducto{

    position:fixed;

    inset:0;

    width:100%;
    height:100vh;

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

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    z-index:10000;

    opacity:0;

    pointer-events:none;

    transition:.3s ease;

}


.modalProducto.mostrar{

    opacity:1;

    pointer-events:auto;

}

/* ==========================================
   MODAL DETALLES DEL PRODUCTO
========================================== */

#modalProducto{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    padding:25px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0,255,150,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(150,70,255,.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(0,180,255,.07),
            transparent 35%
        ),
        rgba(0,0,0,.78);

    backdrop-filter:blur(8px);

    z-index:50000;

}


/* ==========================================
   MOSTRAR MODAL
========================================== */

#modalProducto.mostrar{

    display:flex;

}


/* ==========================================
   CONTENEDOR PRINCIPAL
========================================== */

.contenidoModalProducto{

    position:relative;

    width:min(1180px, 94vw);

    height:min(88vh, 820px);

    max-height:92vh;

    display:grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, .92fr);

    gap:45px;

    padding:38px;

    overflow:hidden;

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

    border-radius:28px;

    background:

        radial-gradient(
            circle at 15% 30%,
            rgba(0,255,150,.08),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 15%,
            rgba(180,70,255,.10),
            transparent 30%
        ),

        radial-gradient(
            circle at 70% 100%,
            rgba(0,150,255,.06),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #161719,
            #1c1d20 55%,
            #15161a
        );

    box-shadow:

        0 30px 100px
        rgba(0,0,0,.75),

        0 0 80px
        rgba(120,70,255,.08);

}


@media (max-height: 800px){

    .contenidoModalProducto{

        overflow-y:auto;

        overflow-x:hidden;

        padding-top:100px;

        padding-bottom:0px;

        box-sizing:border-box;

    }

}

@media (max-height: 800px){

    .infoModalProducto{

        justify-content:flex-start;

    }

}


/* ==========================================
   BRILLO SUPERIOR
========================================== */

.contenidoModalProducto::before{

    content:"";

    position:absolute;

    top:-180px;

    left:15%;

    width:400px;

    height:250px;

    background:
        radial-gradient(
            circle,
            rgba(0,255,170,.12),
            transparent 70%
        );

    pointer-events:none;

}


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

.cerrarModalProducto{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid
        rgba(255,255,255,.10);

    border-radius:50%;

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

    color:white;

    font-size:25px;

    font-weight:300;

    line-height:1;

    cursor:pointer;

    z-index:50;

    transition:
        .25s ease;

}

.cerrarModalProducto:hover{ 
    background: rgba(255,255,255,.13); 
    transform: scale(1.04); }


/* ==========================================
   GALERÍA
========================================== */

.galeriaModalProducto{

    min-width:0;

    min-height:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


/* ==========================================
   CONTENEDOR DE IMAGEN
========================================== */

.imagenModal{

    position:relative;

    width:100%;

    aspect-ratio:1 / 1;

    max-height:calc(88vh - 150px);

    overflow:hidden;

    border-radius:22px;

    background:

        radial-gradient(
            circle at center,
            rgba(255,255,255,.045),
            transparent 65%
        ),

        #0d0e10;

    border:1px solid
        rgba(255,255,255,.07);

    box-shadow:

        inset 0 0 50px
        rgba(0,0,0,.35),

        0 20px 50px
        rgba(0,0,0,.25);

}


/* ==========================================
   IMAGEN
========================================== */
#imagenModalProducto{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    cursor:pointer;

    transition:
        opacity .35s ease,
        transform .45s ease;

}



/* ==========================================
   ANIMACIÓN CAMBIO DE IMAGEN
========================================== */

#imagenModalProducto.cambiando{

    opacity:0;

    transform:scale(.97);

}


/* ==========================================
   FLECHAS ELEGANTES
========================================== */

.flechaModal{

    position:absolute;

    top:50%;

    transform:
        translateY(-50%);

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:1px solid
        rgba(255,255,255,.25);

    border-radius:50%;

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

    backdrop-filter:blur(5px);

    color:white;

    font-family:Arial,sans-serif;

    font-size:42px;

    font-weight:200;

    line-height:1;

    cursor:pointer;

    z-index:5;

    opacity:.72;

    transition:
        .25s ease;

}

.flechaModal:hover{

    opacity:1;

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

    border-color:
        rgba(255,255,255,.5);

    transform:
        translateY(-50%)
        scale(1.08);

}

.flechaModal.izquierda{

    left:18px;

}

.flechaModal.derecha{

    right:18px;

}


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

.contadorModal{

    position:absolute;

    right:16px;

    bottom:16px;

    min-width:48px;

    padding:7px 11px;

    border:1px solid
        rgba(255,255,255,.12);

    border-radius:20px;

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

    backdrop-filter:blur(8px);

    color:white;

    font-size:13px;

    font-weight:600;

    text-align:center;

}


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

.btnAmpliarImagenProducto{

    position:absolute;

    left:16px;

    bottom:16px;

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid
        rgba(255,255,255,.18);

    border-radius:50%;

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

    backdrop-filter:blur(8px);

    color:white;

    font-size:22px;

    cursor:pointer;

    transition:
        .25s ease;

}

.btnAmpliarImagenProducto:hover{

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

    border-color:
        rgba(255,255,255,.4);

    transform:scale(1.08);

}



/* ==========================================
   MINIATURAS
========================================== */

.miniaturasModalProducto{

    display:flex;

    gap:10px;

    width:100%;

    margin-top:14px;

    overflow-x:auto;

    padding:3px 2px 5px;

    scrollbar-width:thin;

}


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

.infoModalProducto{

    min-width:0;

    min-height:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:10px 15px 10px 0;

    overflow:visible;

}

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

#nombreModalProducto{

    margin:0 0 14px;

    color:#fff;

    font-size:clamp(
        28px,
        3vw,
        42px
    );

    font-weight:500;

    line-height:1.1;

    letter-spacing:-.5px;

}


/* ==========================================
   PRECIO
========================================== */

.precioModal{
    margin:0;
    color:#d6b85a;
    font-size:25px;
    font-weight:500;
    line-height:1.1;
}


/* ==========================================
   SEPARADOR
========================================== */

.separadorInfoModal{

    width:100%;

    height:1px;

    margin:25px 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.04),
            transparent
        );

}


/* ==========================================
   DESCRIPCIÓN
========================================== */

.bloqueDescripcionModal{

    margin-bottom:24px;

}


.bloqueDescripcionModal h3{

    margin:0 0 10px;

    color:#fff;

    font-size:18px;

    font-weight:700;

}


.bloqueDescripcionModal h3::before{

    content:"";

    display:inline-block;

    width:5px;

    height:18px;

    margin-right:9px;

    vertical-align:-3px;

    border-radius:5px;

    background:var(--verde);

}


#descripcionModalProducto{

    margin:0;

    color:#bdbdbd;

    font-size:15px;

    line-height:1.7;

    text-align:left;
    white-space: pre-line;

}


/* ==========================================
   ZONA CANTIDAD
========================================== */

.zonaCantidadModal{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-top:15px;

    margin-bottom:18px;

}


.tituloCantidadModal{

    color:#bdbdbd;

    font-size:14px;

    font-weight:600;

}


/* ==========================================
   CONTROL CANTIDAD
========================================== */

.cantidadModal{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin:0;

    padding:5px;

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

    border-radius:30px;

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

}


.cantidadModal button{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:none;

    border-radius:50%;

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

    color:white;

    font-size:22px;

    line-height:1;

    cursor:pointer;

    transition:.2s ease;

}


.cantidadModal button:active{
    outline:none !important;
    box-shadow:none !important;
    animation: pulsoCantidad .35s ease;
}

@keyframes pulsoCantidad{

    0%{
        background:rgba(255,255,255,.08);
    }

    45%{
        background:#168A4A;
    }

    100%{
        background:rgba(255,255,255,.08);
    }

}


.cantidadModal span{

    min-width:28px;

    color:white;

    font-size:17px;

    font-weight:700;

    text-align:center;

}


/* ==========================================
   BOTONES PRINCIPALES
========================================== */

.accionesModalProducto{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:12px;

}


/* ==========================================
   AÑADIR AL CARRITO
========================================== */

.accionesModalProducto
.btnAgregar{

    width:100%;

    min-height:50px;

    margin:0;

    padding:12px 18px;

    border:none;

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            #00c853,
            #00a844
        );

    color:white;

    font-family:inherit;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:
        .25s ease;

    box-shadow:
        0 8px 25px
        rgba(0,200,83,.15);

}


.accionesModalProducto
.btnAgregar:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(0,200,83,.25);

}


/* ==========================================
   COMPARTIR
========================================== */

.accionesModalProducto
.btnCompartirProducto{

    width:100%;

    min-height:50px;

    margin:0;

    padding:12px 18px;

    border:1px solid
        rgba(160,100,255,.45);

    border-radius:13px;

    background:
        rgba(100,60,180,.12);

    color:white;

    font-family:inherit;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:
        .25s ease;

        max-width:none;

box-sizing:border-box;

}


.accionesModalProducto
.btnCompartirProducto:hover{

    background:
        rgba(120,70,220,.22);

    border-color:
        rgba(180,130,255,.7);

    transform:
        translateY(-2px);

}


/* ==========================================
   BENEFICIOS
========================================== */

.beneficiosModalProducto{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:12px;

    margin-top:20px;

    padding-top:18px;

    border-top:1px solid
        rgba(255,255,255,.07);

}


.beneficioModal{

    display:flex;

    align-items:center;

    gap:10px;

    color:#aaa;

    font-size:11px;

}


.beneficioModal strong{

    display:block;

    margin-bottom:3px;

    color:#ddd;

    font-size:12px;

}


.beneficioModal span{

    display:block;

    color:#777;

}


.iconoBeneficio{

    width:34px;

    height:34px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid
        rgba(0,255,150,.25);

    border-radius:50%;

    color:#00d878;

    background:
        rgba(0,255,150,.06);

}


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

@media(max-width:900px){

    .contenidoModalProducto{

        width:94vw;

        height:90vh;

        padding:30px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, .8fr);

        gap:25px;

    }

    #nombreModalProducto{

        font-size:30px;

    }

}


/* ==========================================
   RESPONSIVE MÓVIL
========================================== */

@media(max-width:700px){

    #modalProducto{

        padding:10px;

        align-items:center;

    }


    .contenidoModalProducto{

        width:96vw;

        height:94vh;

        max-height:94vh;

        display:flex;

        flex-direction:column;

        gap:0;

        padding:20px;

        border-radius:22px;

        overflow-y:auto;

    }


    .cerrarModalProducto{

        top:12px;

        right:12px;

        width:38px;

        height:38px;

    }


    .galeriaModalProducto{

        flex-shrink:0;

        padding-top:5px;

    }


    .imagenModal{

        width:100%;

        max-width:none;

        aspect-ratio:1 / 1;

        border-radius:18px;

    }


    .flechaModal{

        width:44px;

        height:44px;

        font-size:34px;

    }


    .flechaModal.izquierda{

        left:10px;

    }


    .flechaModal.derecha{

        right:10px;

    }


    .infoModalProducto{

        padding:20px 2px 5px;

        overflow:visible;

        justify-content:flex-start;

    }


    #nombreModalProducto{

        margin-bottom:8px;

        font-size:26px;

    }


    .precioModal{

        font-size:27px;

    }


    .separadorInfoModal{

        margin:18px 0;

    }


    #descripcionModalProducto{

        font-size:14px;

        line-height:1.6;

    }


   @media(max-width:700px){

    .zonaCantidadModal{
        margin-top:5px;
        margin-bottom:18px;
    }

}


    .accionesModalProducto{

        grid-template-columns:1fr;

        gap:10px;

    }


    .beneficiosModalProducto{

        margin-bottom:5px;

    }

}
/* ==========================================
   AJUSTE TABLET / VENTANA INTERMEDIA
========================================== */

@media(
    min-width:701px
)
and
(max-width:1100px){

    .accionesModalProducto{

        grid-template-columns:1fr;

        gap:12px;

    }

    .accionesModalProducto
    .btnAgregar,
    .accionesModalProducto
    .btnCompartirProducto{

        white-space:nowrap;

    }

}

/* ==========================================
   MÓVILES PEQUEÑOS
========================================== */

@media(max-width:430px){

    .contenidoModalProducto{

        padding:16px;

    }


    .imagenModal{

        border-radius:16px;

    }


    #nombreModalProducto{

        font-size:23px;

    }


    .precioModal{

        font-size:25px;

    }


    .beneficiosModalProducto{

        display:none;

    }

}

@media (max-width: 700px){

    .precioModal{
        position: relative;
        top: -17px;
    }

}


/* ==========================================
   VENTANA FLOTANTE DE COMPARTIR
========================================== */

.opcionesCompartirProducto{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

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

    z-index:20000;

    opacity:0;

    pointer-events:none;

    transition:.3s ease;

}


.opcionesCompartirProducto.mostrar{

    opacity:1;

    pointer-events:auto;

}


/* ==========================================
   CONTENIDO DE LA VENTANA
========================================== */

.contenidoCompartirProducto{

    position:relative;

    width:90%;

    max-width:420px;

    padding:30px;

    border-radius:20px;

    background:#1f1f1f;

    box-shadow:0 15px 50px rgba(0,0,0,.7);

    display:flex;

    flex-direction:column;

    gap:12px;

}


.contenidoCompartirProducto h3{

    text-align:center;

    color:white;

    font-size:22px;

    margin-bottom:10px;

}


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

.cerrarCompartirProducto{

    position:absolute;

    top:12px;

    right:12px;

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

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

    color:white;

    font-size:20px;

    cursor:pointer;

}


.cerrarCompartirProducto:hover{

    background:#25D366;

}


/* ==========================================
   BOTONES DE COMPARTIR
========================================== */

.contenidoCompartirProducto button:not(

    .cerrarCompartirProducto

){

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#333;

    color:white;

    font-size:15px;

    cursor:pointer;

    transition:.2s ease;

}


.contenidoCompartirProducto button:not(

    .cerrarCompartirProducto

):hover{

    transform:translateY(-2px);

    background:#444;

}
/* ==========================================
   BOTÓN COMPARTIR PRODUCTO
========================================== */

.btnCompartirProducto{

    display:block;

    width:90%;

    max-width:320px;

    margin:15px auto 0;

    padding:14px 20px;

    border:none;

    border-radius:12px;

    background:#333;

    color:white;

    font-family:inherit;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.25s ease;

}


.btnCompartirProducto:hover{

    background:#25D366;

    transform:translateY(-2px);

    box-shadow:0 6px 15px rgba(37,211,102,.25);

}


.btnCompartirProducto:active{

    transform:scale(.97);

}
/* ==========================================
   DESCRIPCIÓN DEL PRODUCTO
========================================== */

#descripcionModalProducto{

    text-align:left;

}
/* ==========================================
   TÍTULOS DE CAMPOS DEL CARRITO
========================================== */

.datosCliente label{

    display:block;

    width:100%;

    margin-top:10px;

    margin-bottom:5px;

    color:#bdbdbd;

    font-size:14px;

    font-weight:600;

    text-align:left;

}
/* ==========================================
   BOTÓN VER DETALLES
========================================== */

.btnVerDetalles{

    display:block;

    margin:0 auto 18px;

    padding:0;

    border:none;

    background:transparent;

    color:#d4d3d3;

    font-family:inherit;

    font-size:15px;

    cursor:pointer;

    transition:.25s ease;

}


.btnVerDetalles:hover{

    color:#42c542;

    text-decoration:underline;

    transform:translateY(-2px);

}


.btnVerDetalles:active{

    transform:scale(.96);

}


/* =========================================
   NOTIFICACIÓN DE COMPARTIR
========================================= */

.notificacionCompartir{

    position: fixed;

    bottom: 30px;

    left: 50%;

    transform:
        translateX(-50%)
        translateY(20px);

    background:
        rgba(30, 30, 30, 0.95);

    color: white;

    padding:
        12px
        22px;

    border-radius: 8px;

    font-size: 15px;

    opacity: 0;

    pointer-events: none;

    transition:

        opacity 0.3s ease,

        transform 0.3s ease;

    z-index: 9999;

}


/* ESTADO VISIBLE */

.notificacionCompartir.mostrar{

    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);

}
.filtroPrecio {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

/* ==========================================
   BOTÓN CANCELAR FILTRO PRECIO
========================================== */

#btnCancelarPrecio{

    height:38px;

    padding:0 12px;

    border:1px solid #555;

    border-radius:9px;

    background:transparent;

    color:#ffffff;

    font-family:inherit;

    font-size:14px;

    cursor:pointer;

    white-space:nowrap;

    transition:.2s ease;
}


#btnAplicarPrecio:hover,
#btnCancelarPrecio:hover{

    border-color:#2196F3;

    color:#ffffff;

    background:rgba(33,150,243,.12);

}
#btnAplicarPrecio:active,
#btnCancelarPrecio:active{

    background:#2196F3;

    border-color:#2196F3;

    color:#ffffff;

}

#btnAplicarPrecio:active,
#btnCancelarPrecio:active{

    background:#2196F3;

    border-color:#2196F3;

    color:#ffffff;

    transform:scale(.97);

}



.itemListaConfirmacion{

    padding:6px 0;

    line-height:1.6;

    color:white;

    font-size:16px;

}
.fechaEstadoHistorial{

    font-size:11px;

    opacity:.7;

    margin-top:4px;

    line-height:1.2;

}





/* =====================================
   MENÚ DE CATEGORÍAS
===================================== */

/* ==========================================
MENÚ PRINCIPAL DE CATEGORÍAS
========================================== */

#menuCategorias{

    width:100%;

     background:

        radial-gradient(
            circle at 15% 20%,
            rgba(0,255,150,.07),
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 15%,
            rgba(150,70,255,.09),
            transparent 38%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(0,150,255,.06),
            transparent 40%
        ),

        rgba(15,16,18,.45);

    border:1px solid rgba(255,255,255,.06);

    

    backdrop-filter:blur(8px);

    padding:15px 20px;

    position:sticky;

    top:80px;

    z-index:900;

    display:flex;

    flex-direction:column;

    padding-top:6px;
    padding-bottom:6px;

}

/* ==========================================
BARRA HORIZONTAL DE CATEGORÍAS
========================================== */

.barraCategorias{


    width:100%;

    display:flex;

    flex-direction:row;

    justify-content:center;

    align-items:center;

    gap:12px;

    overflow-x:auto;

    overflow-y:hidden;

    white-space:nowrap;

    padding-bottom:0px;

    scrollbar-width:auto;

    -webkit-overflow-scrolling:touch;

}
/* ==========================================
BOTONES DE CATEGORÍAS
NO SE ENCOGEN
========================================== */

.barraCategorias .btnCategoriaMenu{

    flex-shrink:0;

}

/* ==========================================
SCROLLBAR CATEGORÍAS
CHROME / EDGE / SAFARI
========================================== */

.barraCategorias::-webkit-scrollbar{

    height:8px;

}


.barraCategorias::-webkit-scrollbar-track{

    background:#181818;

    border-radius:10px;

}


.barraCategorias::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:10px;

}

/* ==========================================
PANEL DE SUBCATEGORÍAS
DEBAJO DE LAS CATEGORÍAS
========================================== */

#menuCategorias > .panelSubcategorias{

    width:100%;

    flex-wrap:wrap;

    gap:3px;

    margin-top:2px;

}


.barraCategorias {

    width: 100%;

    max-width: 100%;

    min-width: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    overflow-x: auto;

    overflow-y: hidden;

    white-space: nowrap;

    scrollbar-width: none;

    padding-left: 10px;

    padding-right: 10px;

    box-sizing: border-box;

    -webkit-overflow-scrolling: touch;

}

.barraCategorias > * {

    flex-shrink: 0;

}

/* Ocultar scrollbar */


.barraCategorias::-webkit-scrollbar-thumb {

    background: #555;

    border-radius: 10px;

}


/* =====================================
   BOTONES CATEGORÍA
===================================== */

.btnCategoriaMenu {

    flex: 0 0 auto;

    border: none;

    background: #ffffff;
    color: #000000;

    padding: 10px 18px;

    border-radius: 20px;

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    transition: .2s ease;

}


/* Hover PC */

.btnCategoriaMenu:hover {

    background: #66c7ff;

    color: #000000;

}


/* Categoría activa */

.btnCategoriaMenu.activo {

    background: #0076d6;

    color: #ffffff;

}


/* Flecha */

.btnCategoriaMenu span {

    margin-left: 5px;

    font-size: 11px;

}

/* =====================================
   PANEL DE SUBCATEGORÍAS
===================================== */

.panelSubcategorias {

    width: 100%;
    min-width: 0;

    display: none;

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

    gap: 2px;
padding-top: 2px;

    overflow-x: auto;
    overflow-y: hidden;

    white-space: nowrap;
    flex-wrap: nowrap;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    touch-action: pan-x;

}


/* Ocultar scrollbar */

.panelSubcategorias::-webkit-scrollbar {

    display: none;

}


/* Mostrar panel */

.panelSubcategorias.mostrar {

    display: flex;

}


/* =====================================
   BOTONES SUBCATEGORÍA
===================================== */

.btnSubcategoriaMenu {

    flex: 0 0 auto;

    

    background: #ffffff;

    color: #000000;

    padding: 8px 15px;

    border-radius: 30px;

    font-family: inherit;

    font-size: 13px;

    cursor: pointer;

    transition: .2s ease;

}


.btnSubcategoriaMenu:hover {

    background: #66c7ff;

    color: #000000;

}





@media (max-width: 600px) {

    /* ==============================
       MENÚ CATEGORÍAS
    ============================== */

    #menuCategorias {

        padding: 12px 10px;

        top: 120px;

    }


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

    .barraCategorias {

        justify-content: flex-start;

        gap: 8px;

        overflow-x: auto;

        overflow-y: hidden;

        white-space: nowrap;

    }


    .btnCategoriaMenu {

        flex: 0 0 auto;

        padding: 8px 13px;

        font-size: 12px;

    }


    /* ==============================
       SUBCATEGORÍAS
    ============================== */

    .panelSubcategorias {

    width: 100%;
    min-width: 0;

    justify-content: flex-start;

    align-items: center;

    gap: 8px;

    padding-top: 0px;

    overflow-x: auto;
    overflow-y: hidden;

    flex-wrap: nowrap;

    white-space: nowrap;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    touch-action: pan-x;

}


    .panelSubcategorias::-webkit-scrollbar {

        display: none;

    }

.btnSubcategoriaMenu {

    flex: 0 0 auto;

    white-space: nowrap;

    padding: 7px 13px;

    font-size: 12px;

}

}
.btnSubcategoriaMenu.activo {
    background: #1186e6;
    color: #ffffff;
    border-color: #0b88ee;
}








/* =================================
   TONALIDAD TARJETAS HISTORIAL
================================= */


.pedidoHistorial.estado-pendiente{

    background:
    linear-gradient(
        135deg,
        #302a18,
        #222
    );

    border-left:5px solid #f1c40f;

}



.pedidoHistorial.estado-preparando{

    background:
    linear-gradient(
        135deg,
        #182b3a,
        #222
    );

    border-left:5px solid #3498db;

}



.pedidoHistorial.estado-encamino{

    background:
    linear-gradient(
        135deg,
        #30203d,
        #222
    );

    border-left:5px solid #9b59b6;

}



.pedidoHistorial.estado-entregado{

    background:
    linear-gradient(
        135deg,
        #193326,
        #222
    );

    border-left:5px solid #25D366;

}
/* AJUSTE CABECERA PEDIDOS */

.cabeceraPedido h3{

    margin:0 !important;

    padding:0;

    border:none;

    font-size:22px;

}
.cabeceraPedido{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid rgba(255,255,255,0.1);

    padding-bottom:8px;

    margin-bottom:15px;

}

.tipoEntregaProducto{

    margin-top: 2px;

    font-size: 13px;

    color: #666;

    text-align: center;

    font-weight: 400;

    line-height:1.6;

}
/* =========================
CARRITO PRODUCTOS
========================= */

.itemCarrito{

    padding:7px 10px;

    border-radius:12px;

    margin-bottom:8px;

    background:#333;

}


/* CONTENIDO PRODUCTO + IMAGEN */

.itemCarritoInfo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

}


.mensajeSinProductosPrecio{

    width:100%;

    

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:200px;

    box-sizing:border-box;

    margin:0 auto;

    /* OCUPAR TODO EL ANCHO DEL GRID */
    grid-column:1 / -1;
}





.datosCarrito{

    flex:1;

}


.datosCarrito h3{

    margin:0 0 4px;

    font-size:15px;

}


/* PRECIO EN UNA SOLA LINEA */

.precioLinea{

    margin:0 0 8px;

    font-size:16px;

    color:#ccc;

}


/* MINIATURA */

.miniaturaCarrito{

    width:85px;

    height:85px;

    object-fit:cover;

    border-radius:12px;

    flex-shrink:0;

}


/* =========================
BOTONES CANTIDAD
========================= */

.controlesCarrito {

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:6px;

}


/* + y - */

.controlesCarrito .mas,
.controlesCarrito .menos {

    width:34px;

    height:34px;

    border-radius:10px;

    border:none;

    background:#11b326;

    color:white;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}


.controlesCarrito .mas:hover,
.controlesCarrito .menos:hover{

    transform:scale(1.08);

    background:#1ebe5d;

}


/* cantidad */

.controlesCarrito span{

    font-size:18px;

    font-weight:bold;

    min-width:25px;

    text-align:center;

}


/* basura */

.controlesCarrito .eliminar{

    width:38px;

    height:38px;

    border-radius:10px;

    border:none;

    background:#b00020;

    color:white;

    font-size:25px;

    cursor:pointer;

    transition:.2s;

}


.controlesCarrito .eliminar:hover{

    background:#ff1744;

    transform:scale(1.1);

}
.controlesCarrito .eliminar{

    margin-left:10px;

}
.campoAuto{

    width:100%;

    min-height:38px;

    max-height:90px;

    resize:none;

    overflow-y:auto;

    padding:8px 10px;

    border-radius:10px;

    font-size:14px;

    line-height:18px;

}
/* =================================
   DATOS CLIENTE CARRITO
================================= */

.zonaDatosPedido{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:18px;

}


.zonaDatosPedido input,
.zonaDatosPedido select,
.zonaDatosPedido textarea{

    width:100%;

    box-sizing:border-box;

    border:1px solid rgba(125,110,200,0.20);

    outline:none;

    background:
        linear-gradient(
            145deg,
            #211b36 0%,
            #171827 55%,
            #11131f 100%
        );

    color:#ffffff;

    border-radius:13px;

    padding:11px 13px;

    font-size:14px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


/* SELECT */

.zonaDatosPedido select{

    cursor:pointer;

}


/* TEXTAREA */

.zonaDatosPedido textarea{

    min-height:38px;

    resize:none;

}


/* PLACEHOLDER */

.zonaDatosPedido input::placeholder,
.zonaDatosPedido textarea::placeholder{

    color:#9290a5;

}


/* AL ESCRIBIR */

.zonaDatosPedido input:focus,
.zonaDatosPedido select:focus,
.zonaDatosPedido textarea:focus{

    border-color:rgba(150,130,235,0.55);

    background:
        linear-gradient(
            145deg,
            #282044 0%,
            #1b1b32 55%,
            #121421 100%
        );

    box-shadow:
        0 0 0 2px rgba(130,110,220,0.08);

}


/* quitar apariencia vieja del select */

.zonaDatosPedido select{

    cursor:pointer;

}


/* TEXTAREAS */

.zonaDatosPedido textarea{

    min-height:38px;

    resize:none;

}



/* efecto al escribir */

.zonaDatosPedido input:focus,
.zonaDatosPedido select:focus,
.zonaDatosPedido textarea:focus{


    background:#444;

}
.zonaDatosPedido input,
.zonaDatosPedido select,
.zonaDatosPedido textarea{

    transition:.2s;

}
.campoError{

    border:2px solid #ff1744 !important;

    background:
        linear-gradient(
            145deg,
            #321923 0%,
            #211622 55%,
            #15121a 100%
        ) !important;

    box-shadow:
        0 0 0 2px rgba(255,23,68,0.08),
        0 0 14px rgba(255,23,68,0.18);

    animation:
        sacudirCampo .35s ease;

}


@keyframes sacudirCampo{


    0%{
        transform:translateX(0);
    }


    25%{
        transform:translateX(-6px);
    }


    50%{
        transform:translateX(6px);
    }


    75%{
        transform:translateX(-4px);
    }


    100%{
        transform:translateX(0);
    }

}
.notificacionCliente.advertencia{

    background:#ffd600;
    color:#000;

    font-weight:700;

    border:2px solid #e0a800;

}
.notificacion{

    position: fixed;

    bottom: 25px;

    right: 25px;

    background: #25D366;

    color: #fff;

    padding: 15px 20px;

    border-radius: 12px;

    font-weight: bold;

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

    z-index: 99999;

    animation: entradaNotificacion .3s ease;

}
.notificacion.advertencia{

    background:#ffd600;
    color:#000;

}






/* ==========================================
   RESUMEN DEL PEDIDO
   DISEÑO MODERNO VIOLETA / AZUL
========================================== */


/* ==========================================
   CONTENEDOR PRINCIPAL
========================================== */


/* ==========================================
   FONDO MULTIDEGRADADO PREMIUM
========================================== */

#modalConfirmacionPedido
.contenidoConfirmacion{

    position:relative;

    overflow:hidden;

    width:92%;

    max-width:440px;

    max-height:90vh;

    overflow-y:auto;

    padding:0;

    border-radius:26px;

    text-align:left;

    color:#fff;

    background:

        /* LUZ AZUL - ESQUINA SUPERIOR DERECHA */
        radial-gradient(
            circle at 100% 0%,
            rgba(76,150,255,.70) 0%,
            rgba(76,150,255,.35) 16%,
            rgba(76,150,255,0) 38%
        ),

        /* MAGENTA - LATERAL SUPERIOR */
        radial-gradient(
            circle at 5% 15%,
            rgba(170,70,255,.38) 0%,
            rgba(170,70,255,.16) 20%,
            transparent 42%
        ),

        /* VIOLETA - CENTRO */
        radial-gradient(
            circle at 45% 45%,
            rgba(91,60,190,.30) 0%,
            rgba(91,60,190,.12) 30%,
            transparent 62%
        ),

        /* AZUL PROFUNDO - PARTE INFERIOR */
        radial-gradient(
            circle at 85% 100%,
            rgba(42,105,210,.32) 0%,
            rgba(42,105,210,.12) 25%,
            transparent 55%
        ),

        /* BASE */
        linear-gradient(
            145deg,
            #0d0d19 0%,
            #17132d 28%,
            #211842 52%,
            #172b52 78%,
            #101d38 100%
        );

    border:1px solid rgba(151,143,255,.28);

    box-shadow:

        0 30px 80px rgba(0,0,0,.75),

        0 0 45px rgba(100,75,220,.22),

        inset 0 1px 0 rgba(255,255,255,.08);

}



/* ==========================================
   BRILLO SUPERIOR DERECHO
========================================== */

#modalConfirmacionPedido
.contenidoConfirmacion::before{

    content:"";

    position:absolute;

    width:190px;

    height:190px;

    top:-110px;

    right:-75px;

    border-radius:50%;

    background:rgba(145,180,255,.20);

    filter:blur(25px);

    pointer-events:none;

}


/* ==========================================
   CABECERA
========================================== */

#modalConfirmacionPedido
.cabeceraResumen{

    padding:25px 25px 20px;

    text-align:center;

}


#modalConfirmacionPedido
.cabeceraResumen h2{

    margin:0;

    color:#fff;

    font-size:23px;

    font-weight:700;

}


#modalConfirmacionPedido
.cabeceraResumen h2 i{

    margin-right:7px;

}


#modalConfirmacionPedido
.subtituloResumen{

    margin:8px 0 0;

    color:#bfc0d0;

    font-size:13px;

}


/* ==========================================
   SEPARADORES GENERALES
========================================== */

#modalConfirmacionPedido
.productosResumen,
#modalConfirmacionPedido
.datosResumen,
#modalConfirmacionPedido
.totalResumen{

    position:relative;

    margin:0 22px;

    padding:18px 3px;

    border-top:1px solid rgba(255,255,255,.14);

}


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

#modalConfirmacionPedido
.productosResumen{

    padding-top:19px;

}


#modalConfirmacionPedido
.productoResumen{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:9px 10px;

    border-radius:12px;

    background:rgba(5,6,16,.24);

}


#modalConfirmacionPedido
.productoResumen + .productoResumen{

    margin-top:7px;

}


#modalConfirmacionPedido
.productoResumenInfo{

    display:flex;

    align-items:center;

    gap:9px;

    min-width:0;

    color:#e4e4ee;

    font-size:14px;

}


#modalConfirmacionPedido
.productoResumenInfo i{

    flex-shrink:0;

    width:27px;

    height:27px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    background:rgba(130,120,255,.14);

    color:#a9a5ff;

    font-size:12px;

}


#modalConfirmacionPedido
.productoResumenInfo span{

    overflow:hidden;

    text-overflow:ellipsis;

}


#modalConfirmacionPedido
.productoResumen strong{

    flex-shrink:0;

    color:#fff;

    font-size:13px;

    font-weight:700;

}


/* ==========================================
   DATOS DE ENTREGA / CLIENTE
========================================== */

#modalConfirmacionPedido
.datosResumen{

    padding-top:20px;

    padding-bottom:20px;

}


#modalConfirmacionPedido
.datoResumen{

    display:flex;

    align-items:center;

    gap:10px;

    min-height:34px;

    color:#d9d9e5;

    font-size:14px;

}


#modalConfirmacionPedido
.datoResumen + .datoResumen{

    margin-top:7px;

}


#modalConfirmacionPedido
.datoResumen i{

    flex-shrink:0;

    width:29px;

    height:29px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    background:rgba(120,135,255,.13);

    color:#aeb7ff;

    font-size:12px;

}


/* ==========================================
   TOTAL DEL PEDIDO
========================================== */

#modalConfirmacionPedido
.totalResumen{

    padding-top:20px;

    padding-bottom:20px;

}


/* TITULO TOTAL */

#modalConfirmacionPedido .tituloTotalResumen{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    color:#fff;
    font-size:16px;
    font-weight:700;
}


#modalConfirmacionPedido .tituloTotalResumen i{
    color:#aeb7ff;
    font-size:15px;
    flex:0 0 auto;
}

/* ==========================================
   MONEDAS
========================================== */

#modalConfirmacionPedido
.totalResumenMoneda{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:9px 11px;

    border-radius:11px;

    background:rgba(5,6,16,.30);

    color:#d8d8e5;

    font-size:14px;

}


#modalConfirmacionPedido
.totalResumenMoneda + .totalResumenMoneda{

    margin-top:7px;

    padding-top:10px;

    border-top:1px solid rgba(255,255,255,.09);

}


#modalConfirmacionPedido
.totalResumenMoneda strong{

    color:#fff;

    font-size:16px;

    font-weight:800;

}


/* ==========================================
   ACCIONES
========================================== */

#modalConfirmacionPedido
.accionesResumen{

    display:flex;

    flex-direction:column;

    gap:9px;

    padding:19px 22px 23px;

    border-top:1px solid rgba(255,255,255,.14);

}


/* ==========================================
   BOTON CONFIRMAR
========================================== */

#modalConfirmacionPedido
#confirmarEnviarPedido{

    width:100%;

    min-height:47px;

    border:none;

    border-radius:14px;

    background:

        linear-gradient(
            135deg,
            #1abe5a,
            #25D366
        );

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    box-shadow:

        0 8px 22px rgba(37,211,102,.22);

    transition:

        transform .2s ease,

        filter .2s ease,

        box-shadow .2s ease;

}


#modalConfirmacionPedido
#confirmarEnviarPedido:hover{

    transform:translateY(-2px);

    filter:brightness(1.07);

    box-shadow:

        0 12px 28px rgba(37,211,102,.32);

}


/* ==========================================
   BOTON CANCELAR
========================================== */

#modalConfirmacionPedido
#cancelarResumen{

    width:100%;

    min-height:43px;

    border:1px solid rgba(255,255,255,.11);

    border-radius:14px;

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

    color:#d9d9e5;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:

        background .2s ease,

        transform .2s ease;

}


#modalConfirmacionPedido
#cancelarResumen:hover{

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

    transform:translateY(-1px);

}


/* ==========================================
   SCROLLBAR DEL RESUMEN
========================================== */

#modalConfirmacionPedido
.contenidoConfirmacion::-webkit-scrollbar{

    width:5px;

}


#modalConfirmacionPedido
.contenidoConfirmacion::-webkit-scrollbar-track{

    background:transparent;

}


#modalConfirmacionPedido
.contenidoConfirmacion::-webkit-scrollbar-thumb{

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

    border-radius:10px;

}


/* ==========================================
   MOVIL
========================================== */

@media(max-width:480px){

    #modalConfirmacionPedido
    .contenidoConfirmacion{

        width:94%;

        max-height:88vh;

        border-radius:23px;

    }


    #modalConfirmacionPedido
    .cabeceraResumen{

        padding:22px 20px 18px;

    }


    #modalConfirmacionPedido
    .cabeceraResumen h2{

        font-size:21px;

    }


    #modalConfirmacionPedido
    .productosResumen,
    #modalConfirmacionPedido
    .datosResumen,
    #modalConfirmacionPedido
    .totalResumen{

        margin-left:17px;

        margin-right:17px;

    }


    #modalConfirmacionPedido
    .accionesResumen{

        padding-left:17px;

        padding-right:17px;

    }

}


/* ==========================================
   MODAL
   CONTENIDO SCROLL + BOTONES FIJOS
========================================== */

#modalConfirmacionPedido
.contenidoConfirmacion{

    display:flex;

    flex-direction:column;

    height:min(90vh, 700px);

    max-height:90vh;

    overflow:hidden;

}


/* ==========================================
   CABECERA FIJA
========================================== */

#modalConfirmacionPedido
.cabeceraResumen{

    flex-shrink:0;

}


/* ==========================================
   ZONA QUE SE DESPLAZA
========================================== */

#modalConfirmacionPedido
.contenidoScrollResumen{

    flex:1;

    min-height:0;

    overflow-y:auto;

    overflow-x:hidden;

}



/* ==========================================
   SCROLLBAR PREMIUM — GLASS VIOLETA
========================================== */

#modalConfirmacionPedido
.contenidoScrollResumen{

    scrollbar-width:thin;

    scrollbar-color:
        rgba(150,130,255,.65)
        transparent;

}


/* CHROME / EDGE / FIREFOX */

#modalConfirmacionPedido
.contenidoScrollResumen::-webkit-scrollbar{

    width:12px;

}


/* FONDO DE LA BARRA */

#modalConfirmacionPedido
.contenidoScrollResumen::-webkit-scrollbar-track{

    background:transparent;

    margin:10px 0;

}


#modalConfirmacionPedido
.contenidoScrollResumen::-webkit-scrollbar-thumb{

    border-radius:20px;

    background:

        linear-gradient(
            180deg,
            rgba(115,145,255,.90),
            rgba(150,95,255,.82)
        );

    border:
        1px solid
        rgba(255,255,255,.18);

    box-shadow:

        0 0 9px
        rgba(120,100,255,.40);

}

/* AL PASAR EL RATÓN */

#modalConfirmacionPedido
.contenidoScrollResumen::-webkit-scrollbar-thumb:hover{

    background:

        linear-gradient(
            180deg,
            rgba(130,165,255,1),
            rgba(175,110,255,.95)
        );

    box-shadow:

        0 0 12px
        rgba(135,110,255,.55);

}



/* ==========================================
   BOTONES FIJOS
========================================== */

#modalConfirmacionPedido
.accionesResumen{

    flex-shrink:0;

    position:relative;

    z-index:20;

    padding:16px 22px 21px;

    border-top:1px solid rgba(255,255,255,.16);

    background:rgba(10,10,25,.72);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:

        0 -8px 20px rgba(0,0,0,.20);

}


/* ==========================================
   MOVIL
========================================== */

@media(max-width:480px){

    #modalConfirmacionPedido
    .contenidoConfirmacion{

        height:88vh;

        max-height:88vh;

    }


    #modalConfirmacionPedido
    .accionesResumen{

        padding:14px 17px 18px;

    }

}








/* ==========================================
   MODAL CONFIRMACIÓN — PC — TEMA OSCURO
========================================== */

@media (min-width:768px){

    #modalConfirmacionPedido .contenidoConfirmacion{

        width:92%;

        max-width:860px;

        height:96vh;

        max-height:96vh;

    }


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

    #modalConfirmacionPedido .contenidoScrollResumen{

        flex:1;

        min-height:0;

        padding-left:28px;

        padding-right:28px;

    }


    /* ======================================
       DATOS DEL CLIENTE — 2 COLUMNAS
    ====================================== */

    #modalConfirmacionPedido .datosResumen{

        display:grid;

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

        gap:14px 32px;

        align-items:center;

    }


    #modalConfirmacionPedido .datoResumen{

        width:100%;

        min-width:0;

        height:42px;

        display:flex;

        align-items:center;

        gap:10px;

        color:#ffffff;

    }


    /* ======================================
       ICONOS EN CÍRCULO — OSCURO
    ====================================== */

    #modalConfirmacionPedido .datoResumen i{

        flex:0 0 34px;

        width:34px;

        height:34px;

        display:flex;

        align-items:center;

        justify-content:center;

        border-radius:50%;

        background:
            linear-gradient(
                135deg,
                rgba(80,105,190,0.25),
                rgba(130,80,200,0.25)
            );

        border:1px solid
            rgba(140,150,255,0.20);

        color:#8ea2ff;

        font-size:14px;

    }


    /* ======================================
       TEXTO
    ====================================== */

    #modalConfirmacionPedido .datoResumen span{

        display:block;

        min-width:0;

        color:#e0e4f5;

        line-height:1.2;

        overflow:hidden;

        text-overflow:ellipsis;

        white-space:nowrap;

    }

}


/* ==========================================
   TOTALES POR MONEDA — MÁS FINOS — OSCURO
========================================== */

#modalConfirmacionPedido .totalResumenMoneda{

    padding:8px 14px;

    min-height:auto;

    height:auto;

    border-radius:10px;

}

#modalConfirmacionPedido .totalResumenMoneda span,
#modalConfirmacionPedido .totalResumenMoneda strong{

    line-height:1.2;

}

/* ==========================================
   BOTONES DEL RESUMEN — PC — OSCURO
========================================== */

@media (min-width:768px){

    #modalConfirmacionPedido .accionesResumen{

        display:flex;

        flex-direction:row-reverse;

        align-items:center;

        gap:14px;

    }

    #modalConfirmacionPedido .accionesResumen button{

        flex:1;

        width:100%;

    }

}

/* ==========================================
   TÍTULO PRODUCTOS SELECCIONADOS — OSCURO
========================================== */

#modalConfirmacionPedido .tituloProductosResumen{

    display:flex;

    align-items:center;

    gap:5px;

    width:100%;

    margin:20px 0 0;

    padding:0 0 0 22px;

    color:#e0e4f5;

    font-size:16px;

    font-weight:600;

}

#modalConfirmacionPedido .tituloProductosResumen i{

    color:#8ea2ff;

    font-size:15px;

}


/* ==========================================
   SCROLLBAR PREMIUM
========================================== */

#modalConfirmacionPedido
.contenidoScrollResumen{

    /* Firefox */

    scrollbar-width:auto;

    scrollbar-color:
        rgba(150,130,255,.75)
        transparent;

}


/* ==========================================
   FIREFOX
========================================== */

/* En Firefox el ancho solo admite:
   auto / thin / none.
   No permite 10px personalizados. */


/* ==========================================
   CHROME / EDGE / OTROS WEBKIT
========================================== */

#modalConfirmacionPedido
.contenidoScrollResumen::-webkit-scrollbar{

    width:10px;

}


#modalConfirmacionPedido
.contenidoScrollResumen::-webkit-scrollbar-track{

    background:transparent;

    margin:10px 0;

}


#modalConfirmacionPedido
.contenidoScrollResumen::-webkit-scrollbar-thumb{

    border-radius:20px;

    background:

        linear-gradient(
            180deg,
            rgba(115,145,255,.90),
            rgba(150,95,255,.82)
        );

    border:

        2px solid transparent;

    background-clip:padding-box;

    box-shadow:

        0 0 10px
        rgba(120,100,255,.40);

}


#modalConfirmacionPedido
.contenidoScrollResumen::-webkit-scrollbar-thumb:hover{

    background:

        linear-gradient(
            180deg,
            rgba(135,170,255,1),
            rgba(175,110,255,.95)
        );

    border:

        2px solid transparent;

    background-clip:padding-box;

}
/* ==========================================
   AJUSTE BOTONES MODAL EN MÓVIL
========================================== */

@media(max-width:700px){

    .accionesModalProducto{

        width:100%;

        grid-template-columns:1fr;

    }
.accionesModalProducto
.btnAgregar,

.accionesModalProducto
.btnCompartirProducto{

    width:100%;

    max-width:none;

    min-width:0;

    margin:0;

    box-sizing:border-box;

}



    

}
.iconoCarritoModal{

    width:25px;

    height:25px;

    display:inline-block;

    flex-shrink:0;

    vertical-align:middle;

}
/* ==========================================
   AJUSTE AUTOMÁTICO INFORMACIÓN PRODUCTO
   SOLO PC
========================================== */

@media(min-width:1101px){

    .infoModalProducto
    #nombreModalProducto,

    .infoModalProducto
    .precioModal,

    .infoModalProducto
    .separadorInfoModal,

    .infoModalProducto
    .bloqueDescripcionModal{

        transform:
            translateY(
                var(--ajusteInfoProducto, 0px)
            );

    }

}

@media (max-width:700px){

    .infoModalProducto{
        padding:8px 2px 5px;
    }

    /* NOMBRE */
    #nombreModalProducto{
        margin-top:-20px;
        margin-bottom:3px;
    }

    /* PRECIO */
    #precioModalProducto{
        margin-top:0;
        margin-bottom:5px;
    }

    /* SEPARADOR */
    .separadorInfoModal{
        margin-top:5px;
        margin-bottom:7px;
    }

    /* BLOQUE DE DESCRIPCIÓN */
    .bloqueDescripcionModal{
        margin-top:0;
    }

    .bloqueDescripcionModal h3{
        margin-bottom:3px;
    }

    .bloqueDescripcionModal p{
        margin-top:0;
        line-height:1.35;
    }

}



@media (max-width:700px){

    #descripcionModalProducto{
        height:auto;
        max-height:145px;
        overflow-y:auto;
    }

}

@media (min-width:701px){

    .zonaCantidadModal{
        position:relative;
        z-index:20;
    }

}
/* ==========================================
   AJUSTE VISUAL FLECHAS DEL CARRUSEL
========================================== */

.flechaModal{

    line-height:1;

    padding:0;

}


.flechaModal.izquierda{

    padding-right:3px;

}

.flechaModal.derecha{

    padding-left:3px;

}
.flechaModal{

    line-height:1;

    padding:0;

}

.flechaModal.izquierda,
.flechaModal.derecha{

    padding-bottom:5px;

}
.iconoCompartirModal{

    width:20px;

    height:20px;

    display:inline-block;

    flex-shrink:0;

    vertical-align:middle;

}
.flechaProducto{

    line-height:1;

    padding:0;

}

.flechaProducto.izquierda,
.flechaProducto.derecha{

    padding-bottom:2px;

}
.iconoCarrito{

    width:25px;

    height:25px;

    display:inline-block;

    flex-shrink:0;

    vertical-align:middle;
     position:relative;

    top:-3px;

}
.campoConIcono{

    position:relative;

    width:100%;

}

.campoConIcono i{

    position:absolute;

    left:13px;

    top:50%;

    transform:translateY(-50%);

    color:#bdbdbd;

    font-size:15px;

    pointer-events:none;

}

.campoConIcono input{

    padding-left:38px;

}
.campoConIcono textarea{

    padding-left:38px;

}

.campoConIcono textarea + *{
    pointer-events:none;
}
/* =====================================
   SELECTOR MODALIDAD DE ENTREGA
===================================== */

.selectorEntrega{

    position:relative;

    width:100%;

}


/* SELECT */

.selectorEntrega select{

    width:100%;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    padding-right:45px;

    cursor:pointer;

}


/* FLECHA PERSONALIZADA */

.selectorEntrega i{

    position:absolute;

    right:16px;

    top:50%;

    transform:translateY(-50%);

    font-size:16px;

    pointer-events:none;

}

/* ==========================================
   VISOR DE IMAGEN GRANDE
========================================== */

.visorImagenProducto{

    position:fixed;

    inset:0;

    width:100%;
    height:100vh;

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

    display:none;

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

    z-index:100000;

    padding:40px;

}

/* VISOR ABIERTO */

.visorImagenProducto.mostrar{

    display:flex;

}


/* ==========================================
   IMAGEN GRANDE
========================================== */

#imagenVisorProducto{

    max-width:92vw;

    max-height:90vh;

    width:auto;
    height:auto;

    object-fit:contain;

    border-radius:12px;

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

}


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

.cerrarVisorImagen{

    position:absolute;

    top:25px;
    right:30px;

    width:42px;
    height:42px;

    display:flex;

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

    border:1px solid
        rgba(255,255,255,.25);

    border-radius:50%;

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

    color:white;

    font-size:24px;

    cursor:pointer;

    z-index:10;

    transition:.25s;

}

.cerrarVisorImagen:hover{

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

    transform:scale(1.05);

}


/* ==========================================
   FLECHAS VISOR
========================================== */

.visorImagenFlecha{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:42px;
    height:42px;

    display:flex;

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

    border:1px solid
        rgba(255,255,255,.25);

    border-radius:50%;

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

    color:white;

    font-size:30px;

    font-weight:300;

    line-height:1;

    padding:0;

    cursor:pointer;

    z-index:10;

    transition:.25s;

}

.visorImagenFlecha.izquierda{

    left:25px;

}

.visorImagenFlecha.derecha{

    right:25px;

}

.visorImagenFlecha:hover{

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

    border-color:
        rgba(255,255,255,.45);

}




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

.contadorVisorImagen{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    padding:6px 12px;

    border-radius:8px;

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

    color:white;

    font-size:13px;

    font-weight:600;

    z-index:10;

}
/* =====================================
   ICONOS COMPARTIR PRODUCTO
===================================== */

.iconoCompartir{

    width:20px;
    height:20px;

    flex-shrink:0;

    vertical-align:middle;

}

.iconoCompartirTitulo{

    width:21px;
    height:21px;

    vertical-align:middle;

    margin-right:6px;

}

.iconoCerrarCompartir{

    width:20px;
    height:20px;

    display:block;


}
/* =========================================
   COMPARTIR PRODUCTO
   DISEÑO GLASS PREMIUM
========================================= */


/* =========================================
   FONDO DEL MODAL
========================================= */

#opcionesCompartirProducto{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

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

    backdrop-filter:
        blur(11px);

    -webkit-backdrop-filter:
        blur(11px);

    z-index:50000;

}


/* =========================================
   CONTENEDOR TRANSPARENTE
========================================= */

#opcionesCompartirProducto
.contenidoCompartirProducto{

    position:relative;

    width:min(
        92%,
        420px
    );

    padding:
        30px
        24px
        24px;

    background:
        transparent;

    border:none;

    box-shadow:none;

}


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

#opcionesCompartirProducto
.contenidoCompartirProducto h3{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    margin:
        4px 40px 22px;

    color:#ffffff;

    font-size:21px;

    font-weight:700;

    text-align:center;

    text-shadow:
        0 2px 7px
        rgba(0,0,0,.65);

}


/* =========================================
   ICONO DEL TITULO
========================================= */

#opcionesCompartirProducto
.iconoCompartirTitulo{

    width:22px;

    height:22px;

    flex-shrink:0;

    color:#ffffff;

    filter:
        drop-shadow(
            0 2px 3px
            rgba(0,0,0,.45)
        );

}


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

#opcionesCompartirProducto
.contenidoCompartirProducto
button:not(.cerrarCompartirProducto){

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    min-height:54px;

    margin:
        0 0 11px;

    padding:
        10px
        18px;

    box-sizing:border-box;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius:15px;

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

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    text-align:center;

    cursor:pointer;

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

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

    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;

}


/* =========================================
   ICONOS
========================================= */

#opcionesCompartirProducto
.iconoCompartir{

    width:22px;

    height:22px;

    margin-right:10px;

    flex-shrink:0;

    transition:
        transform .22s ease,
        filter .22s ease;

}


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

#compartirWhatsapp
.iconoCompartir{

    color:#25D366;

}


/* =========================================
   FACEBOOK
========================================= */

#compartirFacebook
.iconoCompartir{

    color:#1877F2;

}


/* =========================================
   TELEGRAM
========================================= */

#compartirTelegram
.iconoCompartir{

    color:#229ED9;

}


/* =========================================
   EMAIL
========================================= */

#compartirEmail
.iconoCompartir{

    color:#EA4335;

}


/* =========================================
   COPIAR ENLACE
========================================= */

#copiarEnlaceProducto
.iconoCompartir{

    color:#ffffff;

}


/* =========================================
   HOVER GENERAL
========================================= */

#opcionesCompartirProducto
.contenidoCompartirProducto
button:not(.cerrarCompartirProducto):hover{

    opacity:1;

    visibility:visible;

    transform:
        translateY(-2px)
        scale(1.015);

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

    border-color:
        rgba(255,255,255,.55);

    color:#ffffff;

    box-shadow:
        0 9px 27px
        rgba(0,0,0,.38);

}


/* =========================================
   HOVER ICONOS
========================================= */

#opcionesCompartirProducto
.contenidoCompartirProducto
button:not(.cerrarCompartirProducto):hover
.iconoCompartir{

    transform:
        scale(1.12);

    filter:
        drop-shadow(
            0 2px 4px
            rgba(0,0,0,.35)
        );

}


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

#compartirWhatsapp:hover
.iconoCompartir{

    color:#25D366;

}


/* =========================================
   HOVER FACEBOOK
========================================= */

#compartirFacebook:hover
.iconoCompartir{

    color:#1877F2;

}


/* =========================================
   HOVER TELEGRAM
========================================= */

#compartirTelegram:hover
.iconoCompartir{

    color:#229ED9;

}


/* =========================================
   HOVER EMAIL
========================================= */

#compartirEmail:hover
.iconoCompartir{

    color:#EA4335;

}


/* =========================================
   HOVER COPIAR
========================================= */

#copiarEnlaceProducto:hover
.iconoCompartir{

    color:#ffffff;

}


/* =========================================
   BOTON CERRAR
========================================= */

#opcionesCompartirProducto
.cerrarCompartirProducto{

    position:absolute;

    top:12px;

    right:12px;

    width:35px;

    height:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius:50%;

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

    color:#ffffff;

    cursor:pointer;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

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

    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease;

}


/* =========================================
   HOVER CERRAR
========================================= */

#opcionesCompartirProducto
.cerrarCompartirProducto:hover{

    transform:
        rotate(90deg)
        scale(1.08);

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

    border-color:
        rgba(255,255,255,.55);

}


/* =========================================
   ICONO CERRAR
========================================= */

#opcionesCompartirProducto
.iconoCerrarCompartir{

    width:18px;

    height:18px;

    color:#ffffff;

}


/* =========================================
   ULTIMO BOTON
========================================= */

#opcionesCompartirProducto
.contenidoCompartirProducto
button:last-child{

    margin-bottom:0;

}


/* =========================================
   EFECTO AL PRESIONAR
========================================= */

#opcionesCompartirProducto
.contenidoCompartirProducto
button:not(.cerrarCompartirProducto):active{

    transform:
        scale(.98);

}


/* =========================================
   ANIMACION DEL CONTENEDOR
========================================= */

#opcionesCompartirProducto
.contenidoCompartirProducto{

    animation:
        aparecerCompartir
        .28s
        ease-out;

}


@keyframes aparecerCompartir{

    from{

        opacity:0;

        transform:
            translateY(12px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================
   MOVILES
========================================= */

@media(max-width:500px){

    #opcionesCompartirProducto{

        padding:
            16px;

    }

    #opcionesCompartirProducto
    .contenidoCompartirProducto{

        width:100%;

        max-width:360px;

        padding:
            28px
            14px
            18px;

    }

    #opcionesCompartirProducto
    .contenidoCompartirProducto
    button:not(.cerrarCompartirProducto){

        min-height:52px;

        font-size:14px;

    }

}
/* =========================================
   NOTIFICACIÓN — ENLACE COPIADO
========================================= */

#notificacionCompartir{

    position:fixed;

    left:50%;

    bottom:30px;

    transform:
        translateX(-50%)
        translateY(15px);

    z-index:60000;

    padding:
        12px
        22px;

    border-radius:14px;

    background:
        rgba(25,25,25,.78);

    border:
        1px solid
        rgba(255,255,255,.28);

    color:#ffffff;

    font-size:14px;

    font-weight:600;

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

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

}


/* =========================================
   MOSTRAR NOTIFICACIÓN
========================================= */

#notificacionCompartir.mostrar{

    opacity:1;

    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0);

}


/* =========================================
   ICONO VISUAL
========================================= */

#notificacionCompartir::before{

    content:"✓";

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:20px;

    height:20px;

    margin-right:8px;

    border-radius:50%;

    background:#25D366;

    color:#ffffff;

    font-size:13px;

    font-weight:700;

}
/* =========================================================
   MODAL FINALIZAR PEDIDO — ESTILO CRISTAL
========================================================= */

#modalPedidoEnviado {

    position: fixed;

    inset: 0;

    display: none;

    justify-content: center;

    align-items: center;

    padding: 20px;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(0, 180, 255, .14),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(120, 70, 255, .16),
            transparent 35%
        ),
        rgba(0, 0, 0, .72);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    z-index: 60000;
}


#modalPedidoEnviado.mostrar {

    display: flex;

    animation:
        aparecerFondoConfirmacion
        .25s ease forwards;
}


/* =========================================================
   PANEL DE CRISTAL
========================================================= */

#modalPedidoEnviado .pedidoFinalizacion {

    position: relative;

    width: min(470px, 100%);

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    padding: 34px 30px 30px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.055)
        );

    border: 1px solid rgba(255,255,255,.18);

    box-shadow:

        0 30px 80px rgba(0,0,0,.55),

        inset 0 1px 0 rgba(255,255,255,.18),

        inset 0 -1px 0 rgba(255,255,255,.04);

    backdrop-filter: blur(28px);

    -webkit-backdrop-filter: blur(28px);

    color: white;

    text-align: center;

    animation:
        entrarPanelConfirmacion
        .4s cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   BRILLO SUPERIOR DEL CRISTAL
========================================================= */

#modalPedidoEnviado .pedidoFinalizacion::before {

    content: "";

    position: absolute;

    top: 0;
    left: 10%;

    width: 80%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    opacity: .8;
}


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

#modalPedidoEnviado .cerrarConfirmacion {

    position: absolute;

    top: 16px;
    right: 16px;

    width: 38px;
    height: 38px;

    display: flex;

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

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 50%;

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

    color: rgba(255,255,255,.75);

    font-size: 15px;

    cursor: pointer;

    transition:
        .25s ease;
}


#modalPedidoEnviado .cerrarConfirmacion:hover {

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

    color: white;

    transform:
        rotate(90deg);
}


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

#modalPedidoEnviado .iconoFinalizacion {

    width: 76px;
    height: 76px;

    margin: 4px auto 18px;

    display: flex;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.05)
        );

    border: 1px solid rgba(255,255,255,.18);

    box-shadow:

        0 10px 30px rgba(0,0,0,.25),

        inset 0 1px 0 rgba(255,255,255,.18);

    font-size: 35px;

    color: #25D366;

    animation:
        flotarIcono
        3s ease-in-out infinite;
}


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

#modalPedidoEnviado .pedidoFinalizacion h2 {

    margin: 0;

    font-size: 27px;

    font-weight: 700;

    letter-spacing: -.4px;

    color: white;

    text-shadow:
        0 2px 15px rgba(0,0,0,.25);
}


/* =========================================================
   TEXTO
========================================================= */

#modalPedidoEnviado .textoFinalizacion {

    margin: 12px auto 22px;

    max-width: 380px;

    font-size: 14px;

    line-height: 1.6;

    color:
        rgba(255,255,255,.68);
}


/* =========================================================
   NUMERO DEL PEDIDO
========================================================= */

#modalPedidoEnviado .numeroPedidoFinalizacion {

    padding: 15px 20px;

    margin: 0 auto 18px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.035)
        );

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);
}


#modalPedidoEnviado
.numeroPedidoFinalizacion span {

    display: block;

    margin-bottom: 4px;

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 700;

    color:
        rgba(255,255,255,.45);
}


#modalPedidoEnviado
.numeroPedidoFinalizacion strong {

    display: block;

    font-size: 25px;

    letter-spacing: 1px;

    color: white;
}


/* =========================================================
   AVISO CORREO
========================================================= */

#modalPedidoEnviado .avisoCorreoFinalizacion {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 15px;

    margin-bottom: 20px;

    text-align: left;

    border-radius: 18px;

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

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06);
}


#modalPedidoEnviado .iconoAvisoCorreo {

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 12px;

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

    color:
        rgba(255,255,255,.82);

    font-size: 16px;
}


#modalPedidoEnviado
.avisoCorreoFinalizacion strong {

    display: block;

    margin-bottom: 4px;

    font-size: 13px;

    color: white;
}


#modalPedidoEnviado
.avisoCorreoFinalizacion p {

    margin: 0;

    font-size: 12px;

    line-height: 1.5;

    color:
        rgba(255,255,255,.58);
}


/* =========================================================
   ACEPTACIÓN
========================================================= */

#modalPedidoEnviado .aceptacionPedido {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 14px;

    margin-bottom: 20px;

    text-align: left;

    border-radius: 16px;

    cursor: pointer;

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

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

    transition:
        .25s ease;
}


#modalPedidoEnviado
.aceptacionPedido:hover {

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

    border-color:
        rgba(255,255,255,.15);
}


/* Ocultar checkbox original */

#modalPedidoEnviado
.aceptacionPedido input {

    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   CHECKBOX PERSONALIZADO
========================================================= */

#modalPedidoEnviado .checkmarkPedido {

    flex: 0 0 23px;

    width: 23px;
    height: 23px;

    margin-top: 1px;

    display: flex;

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

    border-radius: 7px;

    border: 1px solid rgba(255,255,255,.25);

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

    transition:
        .25s ease;
}


#modalPedidoEnviado
.aceptacionPedido input:checked
+ .checkmarkPedido {

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

    border-color:
        rgba(255,255,255,.55);

    box-shadow:
        0 0 18px rgba(255,255,255,.12);
}


#modalPedidoEnviado
.aceptacionPedido input:checked
+ .checkmarkPedido::after {

    content: "✓";

    font-size: 14px;

    font-weight: 700;

    color: white;

    animation:
        aparecerCheck
        .2s ease;
}


/* =========================================================
   TEXTO ACEPTACIÓN
========================================================= */

#modalPedidoEnviado .textoAceptacion {

    font-size: 12px;

    line-height: 1.5;

    color:
        rgba(255,255,255,.67);
}


/* =========================================================
   CONTENEDOR BOTONES
========================================================= */

#modalPedidoEnviado .botonesConfirmacion {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* =========================================================
   CONFIRMAR PEDIDO
========================================================= */

#modalPedidoEnviado #btnPedidoEnviado {

    width: 100%;

    min-height: 50px;

    border: 1px solid rgba(150,255,190,.35);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(125,230,155,.92),
            rgba(75,190,115,.88)
        );

    color: #082b16;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),

        0 8px 25px rgba(40,180,90,.18);

    transition:
        .25s ease;
}


/* Desactivado */

#modalPedidoEnviado
#btnPedidoEnviado:disabled {

    opacity: .35;

    cursor: not-allowed;

    box-shadow: none;

    transform: none;
}


/* =========================================================
   CONFIRMAR PEDIDO — HOVER
========================================================= */

#modalPedidoEnviado
#btnPedidoEnviado:not(:disabled):hover {

    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            rgba(70,190,110,.98),
            rgba(35,145,75,.98)
        );

    border-color:
        rgba(130,255,165,.55);

    color: white;

    box-shadow:

        0 12px 30px rgba(30,150,70,.28),

        0 0 25px rgba(90,220,130,.16);
}


/* =========================================================
   CANCELAR
========================================================= */

#modalPedidoEnviado
#btnCancelarPedidoWhatsApp {

    width: 100%;

    min-height: 44px;

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

    border-radius: 15px;

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

    color:
        rgba(255,255,255,.52);

    font-size: 13px;

    cursor: pointer;

    transition:
        .25s ease;
}


#modalPedidoEnviado
#btnCancelarPedidoWhatsApp:hover {

    background:
        rgba(255,80,80,.10);

    border-color:
        rgba(255,100,100,.20);

    color:
        rgba(255,180,180,.9);
}


/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes aparecerFondoConfirmacion {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes entrarPanelConfirmacion {

    from {

        opacity: 0;

        transform:
            translateY(25px)
            scale(.96);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }
}


@keyframes flotarIcono {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-4px);

    }
}


@keyframes aparecerCheck {

    from {

        opacity: 0;

        transform:
            scale(.5);

    }

    to {

        opacity: 1;

        transform:
            scale(1);

    }
}


/* =========================================================
   SCROLLBAR DEL PANEL
========================================================= */

#modalPedidoEnviado
.pedidoFinalizacion::-webkit-scrollbar {

    width: 7px;
}


#modalPedidoEnviado
.pedidoFinalizacion::-webkit-scrollbar-track {

    background:
        transparent;
}


#modalPedidoEnviado
.pedidoFinalizacion::-webkit-scrollbar-thumb {

    border-radius: 20px;

    background:
        rgba(255,255,255,.18);
}


#modalPedidoEnviado
.pedidoFinalizacion::-webkit-scrollbar-thumb:hover {

    background:
        rgba(255,255,255,.30);
}


/* =========================================
   CORREO DEL CLIENTE
========================================= */

#modalPedidoEnviado
.correoClienteFinalizacion {

    display: none;

    margin-top: 8px;

    padding: 5px 10px;

    border-radius: 9px;

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

    border: 1px solid
        rgba(255,255,255,.10);

    color:
        rgba(255,255,255,.72);

    font-size: 11px;

    word-break: break-word;

}
/* ==========================================
   DESCRIPCIÓN CON SCROLL
========================================== */

.bloqueDescripcionModal {

    max-height: 250px;

    overflow-y: auto;

    overflow-x: hidden;

    padding-right: 5px;

    flex-shrink: 0;

}



/* ==========================================
   COLUMNA INFORMACIÓN PRODUCTO
========================================== */

.infoModalProducto {

    min-height: 0;

}
/* ==========================================
   SCROLL DESCRIPCIÓN
========================================== */

.bloqueDescripcionModal::-webkit-scrollbar {

    width: 7px;

}

.bloqueDescripcionModal::-webkit-scrollbar-track {

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

    border-radius: 10px;

}

.bloqueDescripcionModal::-webkit-scrollbar-thumb {

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

    border-radius: 10px;

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

}

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

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

}

.logo{

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

}


#logoNegocioWeb{

    width:var(--tamano-logo,80px);

    height:auto;

    object-fit:contain;
    

}





#nombreNegocioCabezalWeb{

    display:flex;

    align-items:center;

    font-weight:600;

    font-size:16px;

    font-weight:400;

    line-height:1;

}
.heroBanner{
    width:100%;
    position:relative;
    overflow:hidden;
    z-index:10;

    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
    min-height: 430px;
}


.fondoBannerAnterior,
.fondoBannerActual{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    pointer-events:none;
}

.fondoBannerAnterior{

    opacity:1;

}


.fondoBannerActual{

    opacity:0;

    transition:opacity 1.2s ease;

}


.fondoBannerActual.mostrar{

    opacity:1;

}





/* ==========================================
   VIDEOS DEL BANNER DEL CABEZAL
========================================== */

.fondoBannerAnterior video,
.fondoBannerActual video{

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;

    pointer-events: none;

}






.heroContenido{

    position:relative;

    z-index:5;

}

.contenedor-banner{
    width:100%;
    overflow:hidden;
}

.contenedor-banner img{
    width:100%;
    height:auto;
    display:block;
}


@media(max-width:600px){

    .fondoBannerAnterior,
    .fondoBannerActual{
        background-size: 160% auto;
        background-position: center center;
    }

}


@media(max-width:600px){

    .fondoBannerAnterior video,
    .fondoBannerActual video{

        width:160%;
        height:100%;

        max-width:none;

        object-fit:contain;
        object-position:center center;

        left:50%;
        top:0;

        transform:translateX(-50%);

    }

}



/* ==========================================
   PRODUCTOS DESTACADOS
========================================== */

.productosDestacados{
    width:100%;
    padding:35px 20px;
    box-sizing:border-box;
}

#tituloProductosDestacados{
    text-align:center;
    font-size:30px;
    font-weight:700;
    margin:80px 0 25px;
}


/* ==========================================
   ENVOLTORIO
========================================== */

.carruselProductosDestacados{
    width:100%;
    max-width:1400px;

    margin:0 auto;

    padding:0 35px;

    position:relative;

    box-sizing:border-box;

    overflow:hidden;
}


/* ==========================================
   VENTANA
========================================== */

.contenedorProductosDestacados{
    width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    box-sizing:border-box;
}


/* ==========================================
   PISTA
========================================== */

.pistaProductosDestacados{
    display:flex;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;

    will-change:transform;
}


/* ==========================================
   PÁGINA
========================================== */

.paginaProductosDestacados{

    flex:0 0 100%;

    width:100%;
    min-width:100%;

    display:flex;

    flex-direction:row;
    flex-wrap:nowrap;

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

    gap:20px;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* ==========================================
   TARJETAS DESTACADAS
========================================== */

.paginaProductosDestacados > .card{

    flex:0 0 calc((100% - 40px) / 3);

    width:calc((100% - 40px) / 3);

    max-width:calc((100% - 40px) / 3);

    min-width:0;

    margin:0;

    box-sizing:border-box;

    background:rgb(27,27,27);

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.12);
}

/* ==========================================
   HOVER SOLO DESTACADOS
========================================== */

.paginaProductosDestacados > .card:hover{

    transform: translateY(-5px);

    box-shadow:
        0 10px 24px rgba(0,0,0,0.15);

}


/* ==========================================
   IMAGEN APAISADA
========================================== */

.paginaProductosDestacados
.card
.contenedorImagenProducto{

    width:100%;

    aspect-ratio:16 / 8;

    overflow:hidden;
}

.paginaProductosDestacados
.card
.img-producto{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}


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

.paginaProductosDestacados
.card
h2{

    margin:0;
}

.paginaProductosDestacados
.card
.precio{

    margin:4px 0;
}


/* ==========================================
   FLECHAS
========================================== */

.flechaDestacado{

    position:absolute;

    top:22%;

    transform:translateY(-50%);

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,0.65);

    color:white;

    font-size:30px;

    line-height:1;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:20;

}

.flechaDestacado:hover{

    transform:
        translateY(-50%)
        scale(1.08);
}

.flechaDestacado.izquierda{
    left:5px;
}

.flechaDestacado.derecha{
    right:5px;
}


/* ==========================================
   TABLET + MOVIL
   UNA TARJETA
========================================== */

@media (max-width:723px){

    .productosDestacados{

        padding:30px 15px;
    }

    #tituloProductosDestacados{

        font-size:20px;

        margin:15px 0 22px;
    }

    .carruselProductosDestacados{

        width:100%;

        max-width:100%;

        padding:0;
    }

    .paginaProductosDestacados{

        gap:0;

    }

    .paginaProductosDestacados > .card{

        flex:0 0 100% !important;

        width:100% !important;

        max-width:100% !important;

        min-width:100% !important;

    }

    .flechaDestacado{

        width:36px;

        height:36px;

        font-size:25px;

    }

    .flechaDestacado.izquierda{

        left:5px;

    }

    .flechaDestacado.derecha{

        right:5px;

    }

}

#tituloProductosDestacados{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    text-align:center;
}

.iconoEstrellaDestacados{

    width:16px;
    height:16px;

    flex-shrink:0;

}

/* ==========================================
   TITULO PRODUCTOS NORMALES
========================================== */

.tituloProductosNormales {

    width: 100%;

    text-align: center;

    margin: 70px 0 0 0;

}

.tituloProductosNormales h2 {

    margin: 0 0 2px 0;

    font-size: 28px;

    font-weight: 700;

    line-height: 1.2;

}

/* ==========================================
   AJUSTE ESPACIO ANTES DE PRODUCTOS NORMALES
========================================== */

#productos {

    padding-top: 35px;

}

/* =====================================
   ESTRELLA PRODUCTO DESTACADO
===================================== */

.card{
    position: relative;
}

.estrellaProductoDestacado{

    position: absolute;

    top: 10px;
    left: 10px;

    width: 20px;
    height: 20px;

    z-index: 20;

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;

}

.estrellaProductoDestacado svg{

    width: 100%;
    height: 100%;

    fill: #ffffff;

    filter:
        drop-shadow(0 2px 3px rgba(0,0,0,.55));

}

.paginaProductosDestacados > .card:hover{
    transform: none;
}




.card{
    background: linear-gradient(
        145deg,
        #181b31 0%,
        #111827 35%,
        #0d111c 65%,
        #191329 100%
    );

    border: 1px solid rgba(105, 112, 190, 0.42);

    box-shadow: 0 10px 30px rgba(0,0,0,.38);
}


.paginaProductosDestacados > .card{

    background:
        linear-gradient(
            145deg,
            #1b2040 0%,
            #121a31 35%,
            #0b101d 62%,
            #211531 100%
        );

    border:1px solid rgba(125, 115, 220, 0.30);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.42),
        0 0 22px rgba(85,75,170,0.10);

}

.estrellaProductoDestacado svg{

    width: 100%;
    height: 100%;

     fill:#b8a7ff;

    filter: none;

}

#panelCarrito{

    background:
        linear-gradient(
            145deg,
            #171b32 0%,
            #101827 38%,
            #0b101b 68%,
            #1a122b 100%
        );

    

    box-shadow:
        none;

}


.itemCarrito{

    background:
        linear-gradient(
            145deg,
            #241b3b 0%,
            #1b1730 45%,
            #131322 100%
        );

    border:1px solid rgba(145,120,220,0.22);

    border-radius:16px;

    padding:12px;

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

}



/* =====================================
   BLOQUEAR SCROLL DEL FONDO CON CARRITO
===================================== */

@media (max-width: 600px) {

    body.carritoAbierto {
        overflow: hidden;
    }

}

@media (max-width: 600px) {

    body.carritoAbierto {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body.carritoAbierto #panelCarrito {
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

}

@media (max-width: 600px) {

    html:has(body.carritoAbierto),
    body.carritoAbierto {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none;
    }

    body.carritoAbierto #panelCarrito {
        touch-action: pan-y;
        overscroll-behavior: contain;
    }

}


/* ==================================
   LINEA COMPLETA DE ESTADOS
================================== */

.lineaEstados{

    width:100%;

    box-sizing:border-box;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    padding:0 8px;

    gap:0;

}

/* ==================================
   ESTRUCTURA DE CADA ESTADO
================================== */

.estadoItem{

    flex:1 1 0;

    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}


/* ==================================
   ICONO + CIRCULO DEL ESTADO
================================== */

.estadoIcono{

    position:relative;

    width:42px;
    height:42px;

    display:flex;

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

    z-index:2;

    color:white;

}


/* ==================================
   CIRCULO DEL ESTADO
================================== */

.estadoIcono .estadoCirculo{

    position:absolute;

    top:0;
    left:0;

    width:42px;
    height:42px;

    border-radius:50%;

    z-index:-1;

    opacity:.45;

}


/* ==================================
   ICONO SVG SIEMPRE ENCIMA
================================== */

.estadoIcono svg{

    width:20px;
    height:20px;

    position:relative;

    z-index:2;

    color:white;

}


/* ==================================
   TEXTO DEL ESTADO
================================== */

.estadoTexto{
    margin-top:7px;
    width:100%;
    box-sizing:border-box;
    padding:0 3px;
    text-align:center;
    font-size:14px;
    font-weight:500;
    line-height:18px;
    color:#aaa;
}


/* ==================================
   FECHA / HORA DEL ESTADO
================================== */

.fechaEstadoHistorial{
    margin-top:3px;
    font-size:12px;
    font-weight:400;
    line-height:15px;
    color:#888;
    white-space:nowrap;
}


/* ==================================
   LINEA ENTRE LOS ESTADOS
================================== */

.estadoLinea{

    flex:0 1 25px;

    width:25px;

    min-width:5px;

    height:3px;

    margin-top:19px;

    background:#444;

    border-radius:10px;

}


/* ==================================
   LINEA ACTIVA
================================== */

.estadoLinea.activa{

    background:#25D366;

}

/* ==================================
   ESTADOS NO ACTIVOS
================================== */

.estadoCirculo{

    background:#444;

    border:3px solid #666;

    opacity:.45;

}


/* ==================================
   COLORES DE LOS ESTADOS ACTIVOS
================================== */

/* ----------------------------------
   PENDIENTE
---------------------------------- */

.estadoCirculo.activo.estado-0{

    background:#FFC107;

    border-color:#FFC107;

    opacity:1;

}


/* ----------------------------------
   PREPARANDO
---------------------------------- */

.estadoCirculo.activo.estado-1{

    background:#3498db;

    border-color:#3498db;

    opacity:1;

}


/* ----------------------------------
   EN CAMINO
---------------------------------- */

.estadoCirculo.activo.estado-2{

    background: #5BCD26;

    background: #5BCD26;

    opacity:1;

}

/* ==========================================
   ESTADOS ACTIVOS — TEMA CLARO
========================================== */

/* PENDIENTE — AMARILLO */
#historialPedidos .estadoCirculo.estado-0.activo{
    background:#FFC107 !important;
    border:none !important;
}

#historialPedidos .estadoCirculo.estado-0.activo + i{
    color:#ffffff !important;
}


/* PREPARANDO — AZUL */
#historialPedidos .estadoCirculo.estado-1.activo{
    background:#4D9CFF !important;
    border:none !important;
}

#historialPedidos .estadoCirculo.estado-1.activo + i{
    color:#ffffff !important;
}


/* EN CAMINO — VIOLETA */
#historialPedidos .estadoCirculo.estado-2.activo{
    background:#9B6CFF !important;
    border:none !important;
}

#historialPedidos .estadoCirculo.estado-2.activo + i{
    color:#ffffff !important;
}


/* ENTREGADO — VERDE */
#historialPedidos .estadoCirculo.estado-3.activo{
    background:#25D366 !important;
    border:none !important;
}

#historialPedidos .estadoCirculo.estado-3.activo + i{
    color:#ffffff !important;
}

/* ==========================================
   ENTREGADO — CORRECCIÓN FINAL
========================================== */

#historialPedidos .estadoCirculo.estado-2.activo{
    background:#25D366 !important;
    border:none !important;
}

#historialPedidos .estadoCirculo.estado-2.activo + i{
    color:#ffffff !important;
}



/* ----------------------------------
   ENTREGADO
---------------------------------- */

.estadoCirculo.activo.estado-3{

    background:#25D366;

    border-color:#25D366;

    opacity:1;

}

/* ==================================
   AJUSTE MOVIL - ESTADOS
================================== */

@media (max-width:600px){

    .estadoTexto{

        font-size:10px;

        line-height:16px;

    }

    .fechaEstadoHistorial{

        font-size:10px;

        line-height:13px;

    }

}

/* ==================================
   FECHA DEL PEDIDO - MOVIL
================================== */

@media (max-width:600px){

    .fechaPedido{

        font-size:11px;

        white-space:nowrap;

    }

}

/* ==================================
   CORRECCION ANCHO TARJETAS - MOVIL
================================== */

@media (max-width:600px){

    .pedidoHistorial{

        width:100%;

        max-width:100%;

        min-width:0;

        box-sizing:border-box;

        overflow:hidden;

    }


    .cabeceraPedido{

        width:100%;

        max-width:100%;

        min-width:0;

        box-sizing:border-box;

    }


    .fechaPedido{

        max-width:100%;

        min-width:0;

        box-sizing:border-box;

        font-size:10px;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;

    }


    .lineaEstados{

        width:100%;

        max-width:100%;

        min-width:0;

        box-sizing:border-box;

    }


    .estadoItem{

        min-width:0;

        max-width:100%;

    }

}
/* ==================================
   TITULO DEL PEDIDO
================================== */

.tituloPedidoHistorial{

    display:flex;

    align-items:center;

    gap:7px;

    margin:0;

    font-weight:400;

}


/* ==================================
   ICONO FACTURA
================================== */

.iconoFacturaPedido{

    width:22px;

    height:22px;

    flex-shrink:0;

}


/* ==================================
   TEXTO PEDIDO
================================== */

.tituloPedidoHistorial .textoPedido{

    font-weight:400;

}


/* ==================================
   NUMERO DEL PEDIDO
================================== */

.tituloPedidoHistorial .numeroPedido{

    font-weight:600;

}
/* ==================================
   TITULO PEDIDO - MOVIL
================================== */
@media (max-width:600px){

    .cabeceraPedido h3.tituloPedidoHistorial{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:1px;

        margin:0;

        font-size:17px !important;

        line-height:20px !important;

    }


   .cabeceraPedidoNombre{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    width:100%;

    margin-left:0;

    padding-left:0;

}


    .iconoFacturaPedido{

        width:18px !important;

        height:18px !important;

    }


    .textoPedido{

        font-size:17px !important;

        font-weight:400;

    }


    .numeroPedido{

    display:block;

    width:100%;

    margin-left:0 !important;

    padding-left:0 !important;

    text-align:left;

    font-size:16px !important;

    font-weight:600;

    line-height:19px;

}
    

}
@media (max-width:600px){

    .tituloPedidoHistorial{

        display:block;

        width:100%;

        text-align:left;

        margin:0;

    }

    .cabeceraPedidoNombre{

        display:flex;

        align-items:center;

        justify-content:flex-start;

        width:100%;

    }

    .numeroPedido{

        display:block;

        width:100%;

        text-align:left;

        margin-top:2px;

    }

}

/* ==================================
   CABECERA PEDIDO - MOVIL
================================== */

@media (max-width:600px){

    .cabeceraPedido{

        position:relative;

    }


    .fechaPedido{

        display:flex !important;

        flex-direction:column;

        align-items:flex-start;

        justify-content:flex-start;

        gap:0;

        font-size:10px;

        line-height:13px;

        white-space:nowrap;

        margin-left: 8px;

    }


    .fechaPedidoDia{

        display:block;

    }


    .fechaPedidoHora{

        display:block;

        padding-left:18px;

    }


    .btnBorrarPedidoCliente{

        flex-shrink:0;

    }

}
/* ==================================
   FECHA + BOTON BORRAR - MOVIL
================================== */

@media (max-width:600px){

    .fechaPedido{

        display:flex !important;

        flex-direction:column;

        align-items:flex-start;

        justify-content:flex-start;

        gap:0;

        margin-left:8px;

        margin-right:14px;

        padding:0;

        flex:1 1 auto;

        min-width:0;

        max-width:none;

        overflow:visible !important;

        white-space:nowrap;

        font-size:10px;

        line-height:13px;

    }

    .fechaPedidoDia{

        display:block;

        white-space:nowrap;

    }

    .fechaPedidoHora{

        display:block;

        padding-left:18px;

        white-space:nowrap;

    }

    .btnBorrarPedidoCliente{

        flex:0 0 auto;

        flex-shrink:0;

        margin-left:4px;

    }

}
/* ==================================
   FECHA + BOTON PEDIDO
================================== */

.fechaYBotonPedido{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:12px;

    min-width:0;

}


/* ==================================
   FECHA Y BOTON - MOVIL
================================== */

@media (max-width:600px){

    .fechaYBotonPedido{

        width:100% !important;

        box-sizing:border-box;

        display:flex;

        align-items:center;

        justify-content:space-between;

        margin:0 !important;

        padding:0;

        gap:20px;

    }


    .fechaPedido{

        flex:0 1 auto !important;

        width:auto !important;

        max-width:none !important;

        min-width:0;

        margin:0 !important;

        padding:0;

        overflow:visible !important;

        text-overflow:clip !important;

        white-space:nowrap;

        flex-shrink:1;

    }


    .btnBorrarPedidoCliente{

        flex:0 0 auto !important;

        margin:0 !important;

        white-space:nowrap;

    }

}


/* ==================================
   ICONO CALENDARIO PEDIDO
================================== */

.iconoCalendarioPedido{

    width:14px;

    height:14px;

    flex-shrink:0;

    vertical-align:-2px;

    color:#888;

}

/* ==================================
   BOTON BORRAR PEDIDO
================================== */

.btnBorrarPedidoCliente{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:7px 12px;

    border:none;

    border-radius:999px;

    background:#3a3a3a;

    color:#ddd;

    font-family:inherit;

    font-size:13px;

    font-weight:500;

    line-height:1;

    cursor:pointer;

    white-space:nowrap;

    box-sizing:border-box;

    transition:
        background .2s ease,
        color .2s ease,
        transform .15s ease;

}


/* ==================================
   ICONO BORRAR
================================== */

.iconoBorrarPedido{

    width:15px;

    height:15px;

    flex-shrink:0;

    color:currentColor;

}


/* ==================================
   EFECTO PC
================================== */

.btnBorrarPedidoCliente:hover{

    background:#555;

    color:#fff;

}


.btnBorrarPedidoCliente:active{

    transform:scale(.96);

}


/* ==================================
   MOVIL
================================== */

@media (max-width:600px){

    .btnBorrarPedidoCliente{

        flex:0 0 auto !important;

        width:auto !important;

        max-width:100% !important;

        padding:5px 8px !important;

        gap:5px;

        border-radius:999px;

        font-size:10px;

    }


    .iconoBorrarPedido{

        width:13px;

        height:13px;

    }

}

/* ==================================
   FECHA Y HORA - PC
================================== */

@media (min-width:601px){

    .fechaPedido{

        display:flex;

        align-items:center;

        gap:10px;

    }

}

/* ==================================
   DIRECCION FOOTER - MOVIL
   ALINEAR ICONO CON PRIMERA LINEA
================================== */

@media (max-width:600px){

    #direccionWeb{
        align-self:flex-start;
    }

    .datoFooter:has(#direccionWeb){
        align-items:flex-start;
    }

}
/* ==================================
   TEXTOS FOOTER - MOVIL
================================== */

@media (max-width:600px){

    .datoFooter span:not(.iconoFooter){
        font-size:13px;
    }

    .derechosFooter{
        font-size:12px;
    }

}
/* ==================================
   DIRECCION FOOTER - MOVIL
   REDUCIR ESPACIO DEL ICONO
================================== */

@media (max-width:600px){

    .datoFooter:has(#direccionWeb){
        gap:2px !important;
    }

    .datoFooter:has(#direccionWeb) .iconoFooter{
        margin-right:0 !important;
        padding-right:0 !important;
        flex-shrink:0;
    }

}
/* ==================================
   SEPARAR BOTON BORRAR DE FECHA
   SOLO PC
================================== */

@media (min-width:601px){

    .fechaYBotonPedido .btnBorrarPedidoCliente{
        margin-left:40px !important;
    }

}


/* ==================================
   FLECHA DETALLES
================================== */

.flechaDetalles{

    display:inline-block !important;

    width:auto !important;
    height:auto !important;

    font-size:30px !important;

    line-height:1 !important;

    transform:rotate(90deg);

    transition:transform .2s ease;

}


.btnDetalles.activo .flechaDetalles{

    transform:rotate(-90deg);

}


/* ==================================
   DETALLES ABIERTOS
================================== */

.btnDetalles.activo .flechaDetalles{

    transform:rotate(-90deg);

}
/* ==================================
   BOTON VER DETALLES
================================== */

.btnDetalles{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin:12px 0 0;

    padding:9px 14px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:var(--texto);

    font-family:inherit;

    font-size:15px;

    font-weight:500;

    line-height:1;

    cursor:pointer;

    text-align:center;

    box-sizing:border-box;

    transition:
        transform .15s ease,
        opacity .2s ease;

}


.btnDetalles:hover{

    opacity:.75;

}


/* ==================================
   PRESIONADO
================================== */

.btnDetalles:active{

    transform:scale(.98);

}


/* ==================================
   ESTADO ABIERTO
================================== */

.btnDetalles:active{

    transform:scale(.98);

}

/* ==================================
   TOTAL DEL PEDIDO
================================== */

.totalPedido{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:7px;

    margin-top:0px;

    margin-bottom:0;

    font-size:16px;

    font-weight:500;

    padding-top:20px;

}


/* ==================================
   ICONO TOTAL
================================== */

.iconoTotalPedido{

    width:20px;

    height:20px;

    flex-shrink:0;

    color:currentColor;

}


/* ==================================
   VALOR TOTAL
================================== */

.totalPedido strong{

    font-size:18px;

    font-weight:700;

}




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

.contenidoHistorial{

    display:flex;

    align-items:center;

    gap:10px;

}


/* ==================================
   ICONO SVG
================================== */

.iconoHistorial{

    width:22px;

    height:22px;

    flex-shrink:0;

    color:#fff;

}


/* ==================================
   FLECHA
================================== */

#flechaHistorial{

    font-size:14px;

    line-height:1;

    margin-left:10px;

    transition:transform .25s;

}
/* ==================================
   BOTÓN HISTORIAL DE PEDIDOS
================================== */

.btnHistorial{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 18px;

    background:
        linear-gradient(
            145deg,
            #1c1d35 0%,
            #151827 55%,
            #1b1429 100%
        );

    color:#fff;

    border:1px solid rgba(145,125,230,0.22);

    border-radius:22px;

    cursor:pointer;

    font-size:16px;

    font-weight:500;

    box-shadow:
        0 6px 18px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.04);

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .15s ease;

}

.btnHistorial:hover{

    background:
        linear-gradient(
            145deg,
            #242747 0%,
            #1b2038 55%,
            #261938 100%
        );

    border-color:rgba(145,125,230,0.38);

    box-shadow:
        0 8px 22px rgba(0,0,0,0.30),
        0 0 16px rgba(100,85,190,0.10);

}

.btnHistorial:active{

    transform:scale(.99);

}
/* =====================================
   ICONOS DE LOS DETALLES DEL PEDIDO
===================================== */

.iconoDetallePedido{

    display:inline-flex;

    width:20px;
    height:20px;

    margin-right:7px;

    vertical-align:middle;

    color:#fff;

}


.iconoDetallePedido svg{

    width:20px;
    height:20px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* =====================================
   ICONO ENTREGA
===================================== */

.iconoEntregaPedido{

    display:inline-flex;

    width:20px;
    height:20px;

    margin-right:7px;

    vertical-align:middle;

    color:#fff;

}


.iconoEntregaPedido svg{

    width:20px;
    height:20px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* =====================================
   ICONO DE CADA PRODUCTO
===================================== */

.iconoProductoHistorial{

    display:inline-flex;

    width:18px;
    height:18px;

    margin-right:7px;

    vertical-align:middle;

    color:#fff;

}


.iconoProductoHistorial svg{

    width:18px;
    height:18px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

}
/* =====================================
   ICONO PRODUCTO HISTORIAL
===================================== */

.iconoProductoHistorial{

    display:inline-flex !important;

    width:14px !important;
    height:14px !important;

    margin-right:6px;

    vertical-align:middle;

    color:#fff;

    flex-shrink:0;

}


.iconoProductoHistorial svg{

    display:block;

    width:14px !important;
    height:14px !important;

    min-width:14px !important;
    min-height:14px !important;

    max-width:14px !important;
    max-height:14px !important;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;

}

/* =====================================
   ICONO CAJITA PRODUCTO
===================================== */

.listaProductosHistorial .iconoProductoHistorial{

    display:inline-flex !important;

    width:14px !important;
    height:14px !important;

    min-width:14px !important;
    max-width:14px !important;

    margin-right:6px;

    flex-shrink:0;

}


.listaProductosHistorial .iconoProductoHistorial svg{

    display:block !important;

    width:14px !important;
    height:14px !important;

    min-width:14px !important;
    max-width:14px !important;

    min-height:14px !important;
    max-height:14px !important;

    fill:none !important;

    stroke:#fff !important;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;

}
/* =====================================
   ICONO PRODUCTO HISTORIAL
===================================== */

.iconoProductoHistorial{

    width:14px !important;
    height:14px !important;

    display:inline-block;

    color:#fff;

    stroke:#fff;

    fill:none;

    vertical-align:middle;

    margin-right:6px;

    flex-shrink:0;

}


.iconoProductoHistorial path{

    stroke:#fff;

    fill:none;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;

}
/* ==========================================
   CLIENTE + TELÉFONO EN LA MISMA FILA
========================================== */

.datosPedidoCliente{

    width:100%;

}


/* ==========================================
   CLIENTE + TELÉFONO
========================================== */

.datosPedidoCliente{

    width:100%;

    box-sizing:border-box;

}


/* ==========================================
   CLIENTE + TELÉFONO — MISMA FILA
========================================== */

.datosPedidoCliente{

    width:100% !important;

    box-sizing:border-box;

}


.filaDatosCliente{

    display:grid !important;

    grid-template-columns:1fr 1fr !important;

    gap:12px;

    width:100% !important;

    margin:0;

    padding:0;

    box-sizing:border-box;

}


.filaDatosCliente p{

    display:block !important;

    width:100% !important;

    max-width:none !important;

    min-width:0 !important;

    margin:0 !important;

    box-sizing:border-box;

}
/* ==========================================
   CLIENTE + TELÉFONO — OCUPAR TODO EL ANCHO
========================================== */

.datosPedidoCliente{

    display:block !important;

    width:100% !important;

    max-width:none !important;

    min-width:0 !important;

    box-sizing:border-box;

}


.filaDatosCliente{

    display:grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap:12px;

    width:100% !important;

    max-width:none !important;

    margin:0 !important;

    padding:0 !important;

    box-sizing:border-box;

}


.filaDatosCliente p{

    width:100% !important;

    max-width:none !important;

    min-width:0 !important;

    margin:0 !important;

    box-sizing:border-box;

}





/* DIRECCIÓN */

.datoDireccionCliente{

    width:100%;

    box-sizing:border-box;

    margin:12px 0 0;

}

/* =====================================
   PUBLICIDAD DENTRO DEL CATÁLOGO
===================================== */

.publicidadMedio{

    grid-column:1 / -1;

    width:calc(100% + 120px);

    margin-left:-60px;

    box-sizing:border-box;

    margin-top:15px;

    margin-bottom:15px;

    position:relative;

    border-radius:15px;

    overflow:hidden;

    overflow-anchor:none;

}



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

.imagenPublicidadMedio{

    width:100%;

    max-width:100%;

    height:auto;

    min-height:220px;

    display:block;

    object-fit:cover;

    border-radius:15px;

}


/* =====================================
   CONTENIDO SOBRE EL BANNER
===================================== */

.contenidoPublicidadMedio{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    box-sizing:border-box;

    padding:20px;

    text-align:center;

    z-index:2;

}


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

.contenidoPublicidadMedio h3{

    margin:0 0 8px;

    color:#fff;

    font-size:28px;

    font-weight:700;

}


/* =====================================
   TEXTO
===================================== */

.contenidoPublicidadMedio p{

    margin:0 0 12px;

    color:#fff;

    font-size:20px;

    line-height:1.4;

}


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

.btnPublicidadMedio{

    display:inline-block;

    margin-top:10px;

    padding:12px 28px;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-size:16px;

    font-weight:600;

}

/* =====================================
   TRANSICIÓN PUBLICIDAD DESDE LA DERECHA
===================================== */

.publicidadMedio{

    position:relative;

    overflow:hidden;

}


/* Banner que sale */

.publicidadMedio.saliendo{

    animation:
        publicidadSaleIzquierda
        .7s
        ease
        forwards;

}


/* Banner que entra */

.publicidadMedio.entrando{

    animation:
        publicidadEntraDerecha
        .7s
        ease
        forwards;

}


@keyframes publicidadSaleIzquierda{

    from{
        transform:translateX(0);
        opacity:1;
    }

    to{
        transform:translateX(-100%);
        opacity:1;
    }

}


@keyframes publicidadEntraDerecha{

    from{
        transform:translateX(100%);
        opacity:1;
    }

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

}

/* =====================================
   ALTURA ESTABLE DE PUBLICIDAD
===================================== */

.publicidadMedio{

    height:220px;

}

.imagenPublicidadMedio{

    width:100%;

    height:100%;

    min-height:0;

    object-fit:cover;

}

.cerrarModalProducto{
    text-indent: 2px;
    padding-bottom: 2px;
}

/* =====================================
   ENTREGA A DOMICILIO
===================================== */

.bannerEntregaDomicilio{

    width:92%;

    max-width:1100px;

    margin:30px auto;

    box-sizing:border-box;

}

@media (max-width: 768px){

    .seccionUbicacionNegocio.ubicacionOculta{

        margin-top:0 !important;

        margin-bottom:0 !important;

    }

}

/* =====================================
   BOTÓN LOCALIDADES SOBRE LA IMAGEN
===================================== */

.btnLocalidadesEntrega{
    position: absolute;
    right: 52px;
    bottom: 50%;
    margin: 0;

    padding: 11px 18px;

    border-radius: 999px;
    border: none;

    background: #ffffff;

    color: #111111;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

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

    transform: translateY(50%);

    transition:
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.btnLocalidadesEntrega:hover{
    background: #f2f2f2;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    transform: translateY(calc(50% - 2px));
}

/* =====================================
   MODAL LOCALIDADES DE ENTREGA
===================================== */

.modalLocalidadesEntrega{

    position:fixed;

    inset:0;

    z-index:9999;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    box-sizing:border-box;

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

}


/* =====================================
   CONTENEDOR CRISTAL
===================================== */

.contenidoModalLocalidades{

    position:relative;

    width:100%;
    max-width:480px;
    max-height:80vh;

    overflow-y:auto;

    box-sizing:border-box;

    padding:30px 22px 24px;

    border-radius:22px;

    /* DEGRADADO DE 3 PUNTOS */

    background:
        linear-gradient(
            135deg,
            #102a56 0%,
            #3b246b 50%,
            #151b46 100%
        );

    /* EFECTO CRISTAL */

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    /* BORDE CRISTAL */

    border:
        1px solid
        rgba(255,255,255,.20);

    /* SOMBRA */

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

        inset 0 1px 0
        rgba(255,255,255,.18);

}


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

.contenidoModalLocalidades h2{

    margin:
        0 35px 24px 0;

    text-align:center;

    font-size:23px;

    font-weight:700;

    color:#ffffff;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,.35);

}


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

.btnCerrarLocalidadesEntrega{
    position:absolute;
    top:10px;
    right:12px;
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.10);
    color:#ffffff;
    font-size:28px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 0 3px 0;
    box-sizing:border-box;
    cursor:pointer;
    transition:
        background .2s ease,
        transform .2s ease;
}

.btnCerrarLocalidadesEntrega:hover{

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

    transform:
        scale(1.08);

}

/* =====================================
   LISTA DE LOCALIDADES
===================================== */

.listaLocalidadesEntrega{
    display:flex;
    flex-direction:column;
    gap:7px;
}


/* =====================================
   FILA CRISTAL
===================================== */

.itemLocalidadEntrega{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:5px 9px;
    border-radius:11px;
    box-sizing:border-box;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.06)
        );

    border:
        1px solid
        rgba(255,255,255,.13);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.08);

    transition:
        transform .2s ease,
        background .2s ease;
}

/* =====================================
   MÓVIL
===================================== */

@media(max-width:600px){

    .modalLocalidadesEntrega{
        padding:0;
        display:none;
        align-items:center;
        justify-content:center;
    }

    .contenidoModalLocalidades{
        position:relative;
        width:92vw;
        max-width:92vw;
        margin:0;
        box-sizing:border-box;
        padding:25px 16px 20px;
        border-radius:16px;
    }

    .contenidoModalLocalidades h2{
        font-size:20px;
    }

}


.contenidoEntregaDomicilio{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    box-sizing:border-box;

}


.imagenRepartidorWeb{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

    object-fit:contain;

    margin:0 auto;

    border-radius:18px;

}

@media(max-width:600px){

    

    .bannerEntregaDomicilio{
        overflow:hidden;
    }

    .contenidoEntregaDomicilio{
        min-height:220px;
        overflow:hidden;
    }

    .imagenRepartidorWeb{
        width:100%;
        height:220px;
        object-fit:cover;
        object-position:center center;
    }

    .btnLocalidadesEntrega {
        left: 50%;
        right: auto;
        bottom: 85%;
        transform: translate(-50%, 50%);
        white-space: nowrap;
    }

    .btnLocalidadesEntrega:hover{
      transform: translate(-50%, calc(50% - 10px));   
    }

}

@media(max-width:600px){

    #modalLocalidadesEntrega{
        position:fixed !important;
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        width:100vw !important;
        height:100vh !important;

        margin:0 !important;
        padding:0 !important;

        display:none;
        align-items:center !important;
        justify-content:center !important;

        transform:none !important;
    }

    #modalLocalidadesEntrega .contenidoModalLocalidades{
        position:relative !important;

        width:92vw !important;
        max-width:92vw !important;

        margin:0 !important;

        left:auto !important;
        right:auto !important;

        transform:none !important;
    }

}

@media (max-width:600px){

    #menuCategorias{
        transform:translateY(-80px);
    }

}


@media(max-width:600px){

    .heroBanner{
        margin-top:-90px !important;
    }

}

@media(max-width:600px){

    header{
        padding-bottom:0px;
    }

}


@media (max-width:600px){
    #menuCategorias{
        position:static;
        top:auto;
    }
}


@media(max-width:600px){

    body{
        overflow-x:visible !important;
    }

}
/* ==========================================
   EVITAR DESPLAZAMIENTO HORIZONTAL — MÓVIL
========================================== */

@media(max-width:600px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

}



/* ==========================================
   BOTÓN REINTENTAR TIENDA
========================================== */

#btnReintentarTienda{

    display: block;

    margin: 18px auto 0;

    padding: 11px 28px;

    border: none;

    border-radius: 8px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    background: #ffffff;

    color: #333333;

    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

#btnReintentarTienda:hover{

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.20);
}

#btnReintentarTienda:active{

    transform: translateY(0);

    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

#btnReintentarTienda:disabled{

    opacity: 0.6;

    cursor: wait;
}

@media(max-width:600px){

    .bannerEntregaDomicilio{
        margin-top:-130px;
    }

}



@media(max-width:600px){

    html.seccionesOcultasMovidas .zonaHistorial{
        margin-top:-110px;
    }

}





/* ==========================================
   MENÚ LATERAL DE CATEGORÍAS — MÓVIL
========================================== */

.btnMenuCategoriasMovil{
    display:none;
    border:none;
    background:transparent;
    color:#ffffff;
    font-size:20px;
    cursor:pointer;
}


/* PANEL LATERAL */

.menuLateralCategorias{
    position:fixed;
    top:0;
    left:-320px;
    width:300px;
    max-width:85%;
    height:100vh;

    background:
        linear-gradient(
            145deg,
            rgba(20, 24, 48, 0.88) 0%,
            rgba(14, 19, 37, 0.84) 50%,
            rgba(27, 18, 43, 0.88) 100%
        );

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-right:1px solid rgba(145,125,230,0.18);

    z-index:10001;
    box-shadow:8px 0 30px rgba(0,0,0,.45);
    transition:left .3s ease;
    overflow-y:auto;
}


/* PANEL ABIERTO */

.menuLateralCategorias.abierto{

    left:0;

}


/* CABECERA */

.cabeceraMenuLateralCategorias{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 20px;

    background:
        linear-gradient(
            145deg,
            #1b1d35 0%,
            #131727 55%,
            #1c132c 100%
        );

    

}


.cabeceraMenuLateralCategorias h2{

    margin:0;

    color:#ffffff;

    font-size:21px;

    font-weight:600;

}

.cabeceraMenuLateralCategorias button{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,0.06);

    color:#ffffff;

    font-size:20px;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;

}


/* CONTENIDO */

.contenidoMenuCategoriasMovil{

    padding:15px;

    display:flex;

    flex-direction:column;

    gap:8px;

}


/* FONDO OSCURO */

.fondoMenuCategoriasMovil{

    position:fixed;

    inset:0;

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

    z-index:10000;

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

}


/* FONDO ACTIVO */

.fondoMenuCategoriasMovil.activo{

    opacity:1;

    visibility:visible;

}


/* ==========================================
   MÓVIL
========================================== */

@media(max-width:767px){

    .btnMenuCategoriasMovil{

        display:flex;

        align-items:center;

        justify-content:center;

        width:60px;

        height:60px;

        position:relative;

        left:-30px;

        top:-8px;

    }

    .logo {
        position: relative;
        left: -35px;
    }

}


/* ==========================================
   PC
========================================== */

@media(min-width:768px){

    .menuLateralCategorias{
        display:block;
    }

    .fondoMenuCategoriasMovil{
        display:block;
    }

    .btnMenuCategoriasMovil{
        display:flex;
        align-items:center;
        justify-content:center;
    }
     .contenidoMenuCategoriasMovil{

        display:grid;

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

        gap:20px;

        padding:20px;

    }

    .menuLateralCategorias{

    width:90vw;

    max-width:1200px;

    left:-90vw;

}

}


/* ==========================================
   ELEMENTOS DEL MENÚ DE CATEGORÍAS
========================================== */


.botonCategoriaMovil{

    width:100%;

    display:flex;

    align-items:center;

    gap:10px;

    padding:8px 7px;

    border:1px solid rgba(125,110,200,0.18);

    border-radius:50px;

    background:
        linear-gradient(
            145deg,
            #1c1d35 0%,
            #151827 55%,
            #1b1429 100%
        );

    color:#ffffff;

    font-size:16px;

    font-weight:500;

    cursor:pointer;

    text-align:left;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .15s ease;

}

/* EFECTO AL TOCAR */

.botonCategoriaMovil:active{

    transform:scale(.98);

}


/* EMOJI */

.emojiCategoriaMovil{

    width:30px;

    min-width:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}


/* NOMBRE */

.nombreCategoriaMovil{

    flex:1;

    text-align:left;

}


/* FLECHA */

.flechaCategoriaMovil{

    font-size:12px;

    opacity:.7;

    margin-left:auto;

}


/* ==========================================
   SUBCATEGORÍAS
========================================== */

.subcategoriasMovil{

    margin-left:0;

    padding:6px 0;

    border-left:none;

    width:100%;

    box-sizing:border-box;

}


/* BOTÓN DE SUBCATEGORÍA */

.botonSubcategoriaMovil{
    width:100%;
    display:block;
    padding:11px 13px;
    margin:4px 0;

    border:1px solid rgba(255,255,255,0.10);
    border-radius:20px;

    background:rgba(255,255,255,0.08);

    color:#ffffff;

    font-size:15px;
    cursor:pointer;
    text-align:left;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .15s ease,
        box-shadow .2s ease;
}

.botonSubcategoriaMovil:hover{
    background:rgba(130,170,255,0.18);

    border-color:rgba(130,170,255,0.38);

    color:#ffffff;

    box-shadow:
        0 4px 14px rgba(0,0,0,0.20);

    
}

.botonSubcategoriaMovil.activo{
    background:
        linear-gradient(
            135deg,
            rgba(90,160,255,0.85),
            rgba(105,135,255,0.75)
        );

    border-color:
        rgba(150,200,255,0.90);

    color:#ffffff;

    box-shadow:
        0 4px 16px
        rgba(70,130,255,0.25);
}

.bloqueCategoriaMenu{

    border-radius:14px;

    overflow:hidden;

}

/* TOQUE SUBCATEGORÍA */

.botonSubcategoriaMovil:active{

    background:
        linear-gradient(
            145deg,
            #302650,
            #211b38
        );

    color:#ffffff;

    border-color:rgba(145,125,230,0.25);

}

/* ==========================================
   ANIMACIÓN BOTÓN MENÚ CATEGORÍAS
========================================== */

@media(max-width:767px){

    .btnMenuCategoriasMovil{

        transition:
            transform .18s ease,
            filter .18s ease;

    }


    /* Brillo al tocar */

    .btnMenuCategoriasMovil::before{

        content:"";

        position:absolute;

        width:42px;
        height:42px;

        border-radius:50%;

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

        opacity:0;

        transform:scale(.5);

        transition:
            transform .25s ease,
            opacity .25s ease;

        pointer-events:none;

    }


    /* TOQUE */

    .btnMenuCategoriasMovil:active{

        transform:scale(.88);

        filter:
            drop-shadow(
                0 0 8px
                rgba(120,150,255,.65)
            );

    }


    .btnMenuCategoriasMovil:active::before{

        opacity:1;

        transform:scale(1.35);

    }


    /* ANIMACIÓN DEL ICONO */

    .btnMenuCategoriasMovil i{

        transition:
            transform .25s ease;

    }


    .btnMenuCategoriasMovil:active i{

        transform:
            rotate(-12deg)
            scale(1.15);

    }

}

/* ==========================================
   UBICACIÓN DEL NEGOCIO
========================================== */

.seccionUbicacionNegocio{

    width: 90%;

    max-width: 1100px;

    margin: 35px auto;

    text-align: center;

    

}


.seccionUbicacionNegocio h2{

    margin-bottom: 18px;

}


.mapaNegocioWeb{

    width: 100%;

    height: 350px;

    border-radius: 18px;

    overflow: hidden;

}
@media (max-width: 600px){

    .seccionUbicacionNegocio{

        margin-top: -180px;

        margin-bottom: 160px;

    }

}

@media (min-width: 768px) {

    #menuCategorias .barraCategorias {

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        justify-content: center;

        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        gap: 12px;
        padding-bottom: 0px;
        box-sizing: border-box;
    }



    #menuCategorias .barraCategorias::-webkit-scrollbar {

        height: 8px;

    }

    #menuCategorias .barraCategorias::-webkit-scrollbar-track {

        background: #181818;

        border-radius: 10px;

    }

    #menuCategorias .barraCategorias::-webkit-scrollbar-thumb {

        background: #555;

        border-radius: 10px;

    }

    #menuCategorias .barraCategorias .btnCategoriaMenu {

        flex: 0 0 auto;

    }

}

/* ==========================================
   DESPLAZADOR PERSONALIZADO DE CATEGORÍAS
   PC
========================================== */

.desplazadorCategorias {

      width: 90%;

    max-width: 700px;

    height: 16px;

    margin: -5px auto 1px;

    display: none;

    align-items: center;

    justify-content: center;
}

/* PISTA */

.pistaDesplazador {

    width: 100%;

    height: 3px;

    background: #303030;

    border-radius: 10px;

    position: relative;

}


/* BOLITA */

.bolitaDesplazador {

    position: absolute;

    top: 50%;

    left: 0;

    transform: translateY(-50%);

    width: 14px;

    height: 14px;

    background: #0076d6;

    border-radius: 50%;

    cursor: grab;

    transition: left .05s linear;

}


/* ==========================================
   SOLO PC
========================================== */

/* ==========================================
   DESPLAZADOR
   TABLET + PC
========================================== */

@media (min-width: 600px) {

    .desplazadorCategorias {

        display: flex;

    }

}


/* ==========================================
   MÓVIL
========================================== */


@media (min-width: 600px) and (max-width: 767px) {

    .bolitaDesplazador {
        cursor: grab;
        touch-action: none;
        pointer-events: auto;
    }

    .pistaDesplazador {
        touch-action: none;
    }

}


/* ==========================================
   RESPETAR LÍMITE DEL BANNER
   TAMAÑOS CERCANOS A MÓVIL
========================================== */

@media (min-width: 551px) and (max-width: 600px){

    #menuCategorias{
        transform: translateY(5px);
    }

}


@media (min-width: 560px) and (max-width: 600px){

    #seccionProductosDestacados{

        transform: translateY(30px);

        margin-bottom: 60px !important;

    }

}

@media (min-width: 551px) and (max-width: 559px){

    #seccionProductosDestacados{
        transform: translateY(0) !important;
        margin-bottom: 150px !important;
    }

}

@media (min-width:724px) and (max-width:900px){

    .paginaProductosDestacados{
        gap:12px;
        padding:0 35px;
    }

    .paginaProductosDestacados > .card{

        flex:0 0 calc((100% - 12px) / 2) !important;

        width:calc((100% - 12px) / 2) !important;

        max-width:calc((100% - 12px) / 2) !important;

        min-width:0 !important;

    }

}

@media (min-width: 768px){

    header{
        position:sticky;
top:0;
    }

     #nombreNegocioCabezalWeb {
    position: static;
    transform: none;
    white-space: nowrap;
    flex-shrink: 0;
  }

}

@media (min-width: 768px) {
  #logoNegocioWeb {
    position: static;
    transform: translateY(-4px) !important;
    flex-shrink: 0;
  }
}
.flechaDestacado span{
    position:relative;
    top:-2px;
}

.pieCarrito h3{
    margin-top:-20px;
}

.totalMoneda > span{
    font-weight:400;
}

.totalMoneda > strong{
    font-weight:700;
}


@media (max-width:767px){

    header{
        position:relative;
    }

    header .logo{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%, -50%);
        width:auto;
        justify-content:center;
        text-align:center;
        white-space:nowrap;
    }

}

@media (min-width: 768px) {

  header {
    position: sticky;
  }

  header .logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: max-content;
    max-width: calc(100% - 320px);
  }

}

@media(max-width:767px){

    header{
        position:sticky;
        top:0;
        z-index:1000;
    }

    header .logo{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%, -50%);
        width:auto;
        justify-content:center;
        text-align:center;
        white-space:nowrap;
    }

}
/* =====================================
   AVISO INICIAL DE PEDIDO
===================================== */

.modalAvisoPedido{

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.72);

    backdrop-filter: blur(5px);

}


.contenidoAvisoPedido{

    width: 100%;

    max-width: 430px;

    padding: 28px 24px 24px;

    box-sizing: border-box;

    text-align: center;

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(139,92,246,0.28),
            transparent 38%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(59,130,246,0.22),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #15152b 0%,
            #0d1020 48%,
            #090b15 100%
        );

    border: 1px solid rgba(255,255,255,0.10);

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


.iconoAvisoPedido{

    width: 58px;

    height: 58px;

    margin: 0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(37,211,102,0.12);

    border: 1px solid rgba(37,211,102,0.25);

}


.iconoAvisoPedido i{

    font-size: 30px;

    color: #25D366;

}


.contenidoAvisoPedido h2{

    margin: 0 0 14px;

    font-size: 22px;

    font-weight: 700;

    color: #ffffff;

}


.contenidoAvisoPedido p{

    margin: 0 auto 20px;

    max-width: 360px;

    font-size: 16px;

    line-height: 1.6;

    color: #cccccc;

}


.contenidoAvisoPedido p strong{

    color: #ffffff;

}


.checkAvisoPedido{

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-bottom: 20px;

    font-size: 14px;

    color: #aaaaaa;

    cursor: pointer;

}


.checkAvisoPedido input{

    width: 20px;

    height: 20px;

    cursor: pointer;

}


.btnCerrarAvisoPedido{

    width: 100%;

    max-width: 260px;

    padding: 12px 20px;

    border: none;

    border-radius: 12px;

    background: #25D366;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;

}


.btnCerrarAvisoPedido:hover{

    background: #1fb85a;

    transform: translateY(-1px);

}


@media (max-width: 600px){

    .modalAvisoPedido{

        padding: 16px;

    }


    .contenidoAvisoPedido{

        max-width: 360px;

        padding: 24px 18px 20px;

        border-radius: 20px;

    }


    .contenidoAvisoPedido h2{

        font-size: 21px;

    }


    .contenidoAvisoPedido p{

        font-size: 14px;

    }

}

.contenidoAvisoPedido{

    position: relative;

}


.cerrarAvisoPedidoX{

    position: absolute;

    top: 10px;

    right: 12px;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    background: transparent;

    color: #aaaaaa;

    font-size: 18px;

    cursor: pointer;

    border-radius: 50%;

    transition:
        color 0.2s ease,
        background 0.2s ease;

}


.cerrarAvisoPedidoX:hover{

    color: #ffffff;

    background: rgba(255,255,255,0.08);

}


/* ==========================================
   PAGINACIÓN DE PRODUCTOS CLIENTE
   ========================================== */

.paginacionProductosCliente{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin:35px 0 20px;

    padding:10px 0;

}


/* ==========================================
   BOTONES ANTERIOR / SIGUIENTE
   ========================================== */

.paginacionProductosCliente button{

    min-width:125px;

    height:44px;

    padding:0 18px;

    border:1px solid rgba(120,120,255,.25);

    border-radius:12px;

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

    color:var(--texto);

    font-family:"Poppins", sans-serif;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;

}


/* ==========================================
   EFECTO AL PASAR EL MOUSE
   ========================================== */

.paginacionProductosCliente button:not(:disabled):hover{

    transform:translateY(-2px);

    background:linear-gradient(
        135deg,
        rgba(80,90,255,.22),
        rgba(150,70,255,.22)
    );

    border-color:rgba(120,120,255,.55);

    box-shadow:
        0 6px 18px rgba(80,70,255,.18);

}


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

.paginacionProductosCliente button:disabled{

    opacity:.35;

    cursor:not-allowed;

    box-shadow:none;

}

/* ==========================================
   BOTONES NUMÉRICOS DE PAGINACIÓN
   ========================================== */

.numerosPaginasProductosCliente{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

}


.numerosPaginasProductosCliente button{

    width:38px !important;

    height:38px !important;

    min-width:38px !important;

    max-width:38px !important;

    min-height:38px !important;

    max-height:38px !important;

    padding:0 !important;

    margin:0;

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 38px;

    box-sizing:border-box;

    border:none;

    border-radius:50% !important;

    aspect-ratio:1 / 1;

    background:transparent;

    color:var(--texto2);

    font-family:"Poppins", sans-serif;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


/* ==========================================
   PÁGINA ACTIVA
   ========================================== */

.numerosPaginasProductosCliente
button.paginaActiva{

    background:linear-gradient(
        135deg,
        #5865f2,
        #7657e8
    );

    color:white;

    box-shadow:
        0 5px 15px rgba(88,101,242,.30);

}


/* ==========================================
   HOVER
   ========================================== */

.numerosPaginasProductosCliente
button:not(.paginaActiva):hover{

    background:rgba(88,101,242,.12);

    color:#7d8cff;

    transform:translateY(-1px);

}


/* ==========================================
   BOTONES ANTERIOR / SIGUIENTE
   ========================================== */

.paginacionProductosCliente > button{

    min-width:110px;

    height:40px;

    padding:0 16px;

    border:1px solid rgba(120,120,255,.22);

    border-radius:11px;

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

    color:var(--texto);

    font-family:"Poppins", sans-serif;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;

}


/* ==========================================
   HOVER ANTERIOR / SIGUIENTE
   ========================================== */

.paginacionProductosCliente > button:not(:disabled):hover{

    background:rgba(88,101,242,.13);

    border-color:rgba(120,120,255,.50);

    transform:translateY(-1px);

    box-shadow:
        0 5px 14px rgba(80,70,255,.15);

}


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

.paginacionProductosCliente > button:disabled{

    opacity:.30;

    cursor:not-allowed;

    box-shadow:none;

}


/* ==========================================
   MÓVIL
   ========================================== */

@media(max-width:600px){

    .numerosPaginasProductosCliente{

        gap:4px;

    }


    .numerosPaginasProductosCliente button{

        width:34px;
        height:34px;
        border-radius:50%;

        font-size:13px;

    }


    .paginacionProductosCliente > button{

        min-width:92px;

        height:38px;

        padding:0 10px;

        font-size:12px;

    }

}


/* ==========================================
   MÓVIL
   ========================================== */

@media(max-width:600px){

    .paginacionProductosCliente{

        gap:8px;

        margin:28px 0 15px;

    }


    .paginacionProductosCliente button{

        min-width:105px;

        height:42px;

        padding:0 12px;

        font-size:13px;

    }


    .paginacionProductosCliente span{

        min-width:85px;

        height:42px;

        padding:0 8px;

        font-size:13px;

    }

}
/* ==========================================
   CENTRAR PAGINACIÓN DENTRO DEL GRID
   ========================================== */

.paginacionProductosCliente{

    grid-column:1 / -1;

    width:100%;

    justify-self:stretch;

    margin-left:auto;
    margin-right:auto;

}

@media (min-width:768px){

    .accionesModalProducto #btnCompartirProducto{
        order:1;
    }

    .accionesModalProducto #agregarModal{
        order:2;
    }

}


@media (min-width:768px) and (max-width:1100px){

    .accionesModalProducto{
        display:flex !important;
        flex-direction:column !important;
        gap:10px !important;
        width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    .accionesModalProducto button{
        width:100%;
        min-width:0 !important;
        max-width:100%;
        box-sizing:border-box;
    }

    .accionesModalProducto #agregarModal{
        order:1 !important;
    }

    .accionesModalProducto #btnCompartirProducto{
        order:2 !important;
    }

}

@media (max-width:700px){

    .imagenModalProducto img{
        max-height:220px;
        width:auto;
        max-width:100%;
        object-fit:contain;
    }

}

@media (max-width:700px){

    .accionesModalProducto{
        margin-top:15px !important;
    }

}

@media (max-width:700px){

   

    .accionesModalProducto{
        margin-top:10 !important;
    }

}


/* =====================================
   CONTADOR DE FOTOS
   OCULTO CUANDO NO TIENE CONTENIDO
===================================== */

.contadorModal:empty{

    display:none;

}


@media(max-width:700px){

    .cerrarModalProducto{
        padding-top:2px;
    }

}


/* =====================================
   BOTÓN CERRAR MODAL — MÓVIL
===================================== */

@media(max-width:700px){

    .cerrarModalProducto{

        top:27px;
        right:23px;

        width:40px;
        height:40px;

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

        border:1px solid rgba(90,60,150,.12);
        border-radius:50%;

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

        color:#4b2a7a;

        font-size:24px;
        font-weight:600;
        line-height:1;

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

        backdrop-filter:blur(8px);

        z-index:100;
    }

    .cerrarModalProducto:hover{

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

        color:#35185f;

        transform:scale(1.04);
    }

}

/* SUBIR ICONO MAXIMIZAR 2 PX */ 
.btnAmpliarImagenProducto{ padding-bottom:2px; }






/* =====================================
   TÍTULO "DESCRIPCIÓN" — TEMA CLARO
===================================== */

.bloqueDescripcionModal h3{

    color:#777777 !important;

    font-weight:500 !important;

}



/* =====================================
   BOTÓN CERRAR MODAL — PC
   MISMO ESTILO QUE COMPARTIR
===================================== */

@media(min-width:701px){

    .cerrarModalProducto{

        background:rgba(120,85,190,.22) !important;

        color:#56358a !important;

        border:1px solid rgba(100,70,170,.32) !important;

        box-shadow:
            0 6px 18px rgba(80,50,130,.10);

        backdrop-filter:blur(10px);

        -webkit-backdrop-filter:blur(10px);

    }


    .cerrarModalProducto:hover{

        background:rgba(120,85,190,.30) !important;

        color:#452574 !important;

        border-color:rgba(100,70,170,.42) !important;

        box-shadow:
            0 8px 22px rgba(80,50,130,.14);

    }

}


@media(min-width:701px){

    .cerrarModalProducto{

        transform-origin:center center;

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

        text-align:center;

    }

}

@media(min-width:701px){

    .cerrarModalProducto{

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

    }

    .cerrarModalProducto{

        line-height:1;

    }

    .cerrarModalProducto::first-letter{

        position:relative;
        left:-1px;
        top:-1px;

    }

}




@media(min-width:701px){

    .cerrarModalProducto{

        transform:none !important;

    }

    .cerrarModalProducto:hover{

        transform:scale(1.04) !important;

    }

}

 /* ===================================== 
    SEPARAR TEXTO DE LA BARRA DE SCROLL 
    ===================================== */ 
    #descripcionModalProducto{ 
        padding-right:12px !important; 
    }


/* =====================================
   SUBIR SELECTOR DE CANTIDAD
   TEMA OSCURO
===================================== */

.cantidadModal{

    transform:translateY(-7px);

}




/* =====================================
   MOVER TÍTULO PRODUCTOS NORMALES
   SOLO ENTRE 561px Y 599px
===================================== */

@media (min-width:561px) and (max-width:599px){

    #tituloProductosWeb{

        transform:translateY(-0px) !important;

    }

}




/* =====================================
   EMPUJAR BLOQUE DE PRODUCTOS NORMALES
   SOLO ENTRE 561px Y 599px
===================================== */

@media (min-width:561px) and (max-width:599px){

    #productos{

        padding-top:170px !important;

    }

}






/* ==========================================
   PRUEBA — ANCHO REAL VENTANA CONFIRMACIÓN
========================================== */

#modalPedidoEnviado .contenidoConfirmacion.pedidoFinalizacion{

    width:600px !important;

    max-width:600px !important;

}

/* ==========================================
   CONFIRMACIÓN PEDIDO — TEXTOS PC
========================================== */

#modalPedidoEnviado .pedidoFinalizacion h2{

    font-size:32px;

    line-height:1.3;

    margin-bottom:18px;

}


#modalPedidoEnviado .textoFinalizacion{

    font-size:18px;

    line-height:1.75;

    max-width:520px;

    margin-bottom:28px;

}


/* NUMERO DEL PEDIDO */

#modalPedidoEnviado .numeroPedidoFinalizacion span{

    font-size:14px;

}


#modalPedidoEnviado .numeroPedidoFinalizacion strong{

    font-size:27px;

}


/* AVISO DEL CORREO */

#modalPedidoEnviado #tituloCorreoFinalizacion{

    font-size:17px;

    line-height:1.45;

}


#modalPedidoEnviado #textoCorreoFinalizacion{

    font-size:15px;

    line-height:1.65;

}


/* BOTONES */

#modalPedidoEnviado .botonesConfirmacion button{

    font-size:16px;

    min-height:56px;

}






/* =====================================
   ETIQUETA DE TALLA O MEDIDA
   TEXTO SÓLIDO AZUL-VIOLETA
===================================== */

.etiquetaMedidaProducto{

    position:absolute;
    z-index:5;

    
    bottom:12px;

    left:auto;
right:6px;
transform:none;

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

    min-height:28px;
    padding:5px 10px;

    /* Cristal blanco translúcido */
    background:rgba(255,255,255,.92);

    /* Azul eléctrico sólido */
    color:#477BFF;

    font-family:'Poppins',sans-serif;
    font-size:16px;
    font-weight:800;
    line-height:1.1;
    font-weight:400;

    white-space:nowrap;

    /* Borde discreto */
    border:1px solid rgba(255,255,255,.28);
    border-radius:18px;

    /* Sin resplandor en el contenedor */
    box-shadow:none;

    /* Texto sólido, sin contorno ni resplandor */
color:#6554FF;
text-shadow:none;

    pointer-events:none;
    cursor:default;

    
}


/* =====================================
   ETIQUETA DE MEDIDA EN EL MODAL
===================================== */

.etiquetaMedidaModal{
    left:50%;
    right:auto;
    bottom:12px;
    transform:translateX(-50%);
}


/* =====================================
   ETIQUETA DE TALLA O MEDIDA EN MÓVIL
===================================== */

@media (max-width:700px){

    .etiquetaMedidaProducto{
        min-height:23px;
        padding:3px 7px;
        font-size:12px;
        border-radius:13px;
    }

    /* Mantener la talla circular */
    .etiquetaMedidaProducto.esTalla{
        width:32px;
        height:32px;
        min-height:32px;
        padding:0;
        font-size:13px;
        border-radius:50%;
    }

    /* Etiqueta centrada en el modal */
    .etiquetaMedidaModal{
        top:auto;
        bottom:12px;
    }

}










/* ==========================================
   CONFIRMACIÓN PEDIDO — MÓVIL
========================================== */

@media(max-width:600px){

    #modalPedidoEnviado .pedidoFinalizacion{

        width:calc(100% - 24px) !important;

        max-width:calc(100% - 24px) !important;

        padding:34px 24px 28px;

    }


    #modalPedidoEnviado .pedidoFinalizacion h2{

        font-size:26px;

    }


    #modalPedidoEnviado .textoFinalizacion{

        font-size:16px;

        line-height:1.65;

    }


    #modalPedidoEnviado .numeroPedidoFinalizacion span{

        font-size:13px;

    }


    #modalPedidoEnviado .numeroPedidoFinalizacion strong{

        font-size:23px;

    }


    #modalPedidoEnviado #tituloCorreoFinalizacion{

        font-size:16px;

    }


    #modalPedidoEnviado #textoCorreoFinalizacion{

        font-size:14px;

        line-height:1.6;

    }

#modalPedidoEnviado #textoCorreoFinalizacion{
    margin-left:-45px !important;
    margin-right:-10px !important;
}


    #modalPedidoEnviado .botonesConfirmacion button{

        font-size:15px;

        min-height:52px;

    }
/* ICONO WHATSAPP — MÁS PEQUEÑO EN MÓVIL */

@media (max-width:600px){

    #modalPedidoEnviado .tituloAvisoPedido .iconoWhatsAppTitulo{
        font-size:18px !important;
    }

}


}

/* =====================================
   ICONO WHATSAPP — CONFIRMACIÓN MÓVIL
===================================== */

@media (max-width:600px){

    #modalPedidoEnviado .iconoFinalizacion{
        width:48px !important;
        height:48px !important;
        min-width:48px !important;
        min-height:48px !important;
        padding:0 !important;

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

    #modalPedidoEnviado .iconoFinalizacion i{
        font-size:25px !important;
    }

}

/* ==========================================
   CONFIRMACIÓN DE PEDIDO — BOTONES EN FILA
   SOLO MÓVIL
========================================== */

@media (max-width:600px){

    #modalPedidoEnviado .botonesConfirmacion{
        display:flex !important;
        flex-direction:row !important;
        align-items:stretch !important;
        gap:10px !important;
        width:100% !important;
    }

    #modalPedidoEnviado .botonesConfirmacion button{
    flex:1 1 0 !important;
    min-width:0 !important;
    min-height:38px !important;
    height:38px !important;
    padding:4px 5px !important;
    font-size:11px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    gap:4px !important;
}

#modalPedidoEnviado .botonesConfirmacion button i{
    font-size:12px !important;
}

    

}
/* TEXTO DE LOS BOTONES — MÓVIL */

@media (max-width:600px){

    #modalPedidoEnviado #btnPedidoEnviado,
    #modalPedidoEnviado #btnCancelarPedidoWhatsApp{
        font-size:9px !important;
        font-weight:300 !important;
    }

}

/* ==========================================
   TEXTO BOTONES — CONFIRMACIÓN PEDIDO
========================================== */

#modalPedidoEnviado #btnPedidoEnviado,
#modalPedidoEnviado #btnCancelarPedidoWhatsApp{

    font-size:9px !important;

}

/* ==========================================
   MÓVIL
========================================== */

@media(max-width:600px){

    #modalPedidoEnviado .botonesConfirmacion button{

        font-size:17px;

    }

}

/* ==========================================
   QUITAR RECTÁNGULOS INTERNOS
   CONFIRMACIÓN DE PEDIDO
========================================== */

/* AVISO DE CORREO */
#modalPedidoEnviado .avisoCorreoFinalizacion{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
}

/* NÚMERO DE PEDIDO */
#modalPedidoEnviado .numeroPedidoFinalizacion{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
}


/* AJUSTE FINAL DEL TEXTO CONFIRMAR Y CANCELAR */

#modalPedidoEnviado .botonesConfirmacion #btnPedidoEnviado,
#modalPedidoEnviado .botonesConfirmacion #btnCancelarPedidoWhatsApp {
    font-size: 16px !important;
    line-height: 1.1 !important;
}


/* ICONOS CHECK Y X — CONFIRMACIÓN DE PEDIDO */

#modalPedidoEnviado .botonesConfirmacion button i {
    font-size: 15px !important;
}




/* OCULTAR AVISO E ICONO DEL CORREO EN LA CONFIRMACIÓN */

#modalPedidoEnviado .avisoCorreoFinalizacion {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#modalPedidoEnviado #tituloCorreoFinalizacion,
#modalPedidoEnviado #textoCorreoFinalizacion {
    display: none !important;
}






/* =====================================
   ESTADOS — DIFERENCIAR ENVÍO Y RECOGER
===================================== */

/* EN CAMINO — SOLO PEDIDOS DE ENVÍO */
#historialPedidos .lineaEstados.envio .estadoCirculo.estado-2.activo{
    background:#8b5cf6 !important;
    border:none !important;
    box-shadow:none !important;
}

#historialPedidos .lineaEstados.envio .estadoCirculo.estado-2.activo + i{
    color:#ffffff !important;
}


/* ENTREGADO — PEDIDOS PARA RECOGER */
#historialPedidos .lineaEstados.recoger .estadoCirculo.estado-2.activo{
    background:#25D366 !important;
    border:none !important;
    box-shadow:none !important;
}

#historialPedidos .lineaEstados.recoger .estadoCirculo.estado-2.activo + i{
    color:#ffffff !important;
}


/* ENTREGADO — PEDIDOS DE ENVÍO */
#historialPedidos .lineaEstados.envio .estadoCirculo.estado-3.activo{
    background:#25D366 !important;
    border:none !important;
    box-shadow:none !important;
}

#historialPedidos .lineaEstados.envio .estadoCirculo.estado-3.activo + i{
    color:#ffffff !important;
}

/* =====================================
   TEMA CLARO
   SEPARACIÓN DATOS / ENTREGA
===================================== */

#historialPedidos .pedidoHistorial .filaDatosCliente{
    margin-bottom:12px !important;
}




/* =====================================
   BOTÓN CERRAR MODAL PRODUCTO — OSCURO
===================================== */

#cerrarModalProducto{
    background:rgba(255,255,255,.12) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.25) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.25) !important;
}

/* =====================================
   BOTÓN CERRAR MODAL PRODUCTO — OSCURO
===================================== */

html[data-tema="oscuro"] #cerrarModalProducto{
    background:rgba(255,255,255,.12) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.25) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.25) !important;
}

html[data-tema="oscuro"] #cerrarModalProducto:hover{
    background:rgba(255,255,255,.20) !important;
    color:#ffffff !important;
}

/* =====================================
   BOTÓN CERRAR FLOTANTE
   MÓVIL — TEMA OSCURO
===================================== */

@media (max-width:700px){

    html[data-tema="oscuro"] #cerrarModalProducto{
        position:fixed !important;
        top:30px !important;
        right:38px !important;
        z-index:1000 !important;

        background: #ffffff !important;
        color: #172554 !important;
    }

}

/* ==========================================
   LOADER — TEMA OSCURO
========================================== */

#loader{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:22px;

    background:
        radial-gradient(
            circle at center,
            rgba(74, 54, 160, 0.22),
            rgba(8, 10, 25, 0.96) 55%,
            #05060d 100%
        );

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

}


/* ==========================================
   SPINNER
========================================== */

#loader .spinner{

    width:58px;

    height:58px;

    border-radius:50%;

    border:4px solid rgba(255,255,255,0.10);

    border-top-color:#8b5cf6;

    border-right-color:#6366f1;

    animation:
        girarLoader
        0.85s
        linear
        infinite;

    box-shadow:
        0 0 18px rgba(139,92,246,0.45),
        0 0 40px rgba(99,102,241,0.18);

}


/* ==========================================
   TEXTO
========================================== */

#loader p{

    margin:0;

    color:#ffffff;

    font-family:'Poppins',sans-serif;

    font-size:14px;

    font-weight:500;

    letter-spacing:0.4px;

    text-shadow:
        0 0 12px rgba(139,92,246,0.45);

}


/* ==========================================
   ANIMACIÓN
========================================== */

@keyframes girarLoader{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

html[data-tema="oscuro"] .mas span,
html[data-tema="oscuro"] .menos span{
    position:relative;
    top:1px;
}





@media(max-width:700px){

    .infoModalProducto{
        display:flex !important;
        flex-direction:column !important;
        justify-content:flex-start !important;
        align-items:stretch !important;
    }

}


@media(max-width:700px){

    .beneficiosModalProducto{
        margin-top:0 !important;
    }

}

@media(max-width:700px){

    .infoModalProducto{
        height:auto !important;
        min-height:0 !important;
    }

}

/* ==========================================
   BOTÓN AÑADIR AL CARRITO — MÁS FINO
========================================== */

.btnAgregar{
    min-height:38px !important;
    height:38px !important;
    padding:6px 14px !important;
    transform:translateY(-28px) !important;
}

/* ==========================================
   BAJAR BOTÓN AÑADIR AL CARRITO — OSCURO
   TARJETAS DE PRODUCTOS
========================================== */

html:not([data-tema="claro"]) .card .btnAgregar{

    transform: translateY(-10px) !important;

}

/* ==========================================
   BOTÓN COMPARTIR — MÁS FINO
========================================== */

.btnCompartirProducto{
    min-height:38px !important;
    height:38px !important;
    padding:6px 14px !important;
    transform:translateY(-28px) !important;
}


@media(max-width:700px){

    .modalProducto{
        position:fixed !important;
        inset:0 !important;
        width:100% !important;
        height:100dvh !important;
        min-height:100dvh !important;
        overflow:hidden !important;
    }

    .contenidoModalProducto{
        width:100% !important;
        height:100dvh !important;
        min-height:100dvh !important;
        max-height:none !important;
        border-radius:0 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
    }

}


/* ==========================================
   SUBIR BOTONES DE CANTIDAD — MODAL
   PC / TEMA OSCURO
========================================== */

@media (min-width: 768px){

    html:not([data-tema="claro"]) .cantidadModal{

        transform: translateY(-20px) !important;

    }

}

/* ==========================================
   ICONO LUPA — MÁS PEQUEÑO
========================================== */

.fa-magnifying-glass{

    font-size: 14px !important;

}

/* ==========================================
   NOMBRE PRODUCTO — MODAL
   PC
========================================== */

@media (min-width: 768px){

    #nombreModalProducto{

        font-size: 30px !important;
         font-weight: 600 !important;

    }

}

/* ==========================================
   ESTRUCTURA INFORMACIÓN PRODUCTO — PC OSCURO
========================================== */


/* ==========================================
   BLOQUEAR SCROLL DE LA PÁGINA
   CUANDO ESTÁ ABIERTO EL MODAL PRODUCTO
========================================== */

html:has(#modalProducto.mostrar),
body:has(#modalProducto.mostrar){

    overflow:hidden !important;

}

@media (hover: none) and (pointer: coarse){

    .card:hover{
        transform:none !important;
    }

}

@media (max-width: 767px){

    .card{
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
    }

    .card *{
        -webkit-tap-highlight-color: transparent !important;
    }

}

/* ==========================================
   CATEGORÍAS — 601px A 767px
   NO QUEDAR PEGADAS AL HACER SCROLL
========================================== */

@media (min-width: 601px) and (max-width: 767px){

    #menuCategorias{
        position: static !important;
        top: auto !important;
    }

}

/* ==========================================
   PUBLICIDAD — TABLET / MÓVIL GRANDE
   601px A 767px
========================================== */

@media (min-width:601px) and (max-width:767px){

    .publicidadMedio{
        width:100% !important;
        margin-left:0 !important;
    }

}

/* ==========================================
   QUITAR RESALTADO AZUL — BOTONES + / −
========================================== */

.cantidadModal button{
    -webkit-tap-highlight-color: transparent !important;
    
    outline: none !important;
}

.cantidadModal button:focus,
.cantidadModal button:focus-visible,
.cantidadModal button:active{
    outline: none !important;
}

.telefonoIcono{
    fill:currentColor !important;
    stroke:none !important;
}


.mas,
.menos {
    line-height:normal !important;
    padding:0 0 3px 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}


/* ==========================================
   LUPA — REDUCIR SOLO EL CÍRCULO
   TEMA CLARO Y OSCURO
========================================== */

.btnAmpliarImagenProducto{

    width:30px !important;

    height:30px !important;

    font-size:22px;

}



/* =====================================
   PUBLICIDAD MEDIO - MÓVIL
===================================== */

@media (max-width:1000px){

    .publicidadMedio .imagenPublicidadMedio{

        position:absolute;

        width:165% !important;
        height:100% !important;

        max-width:none;

        left:50%;
        top:0;

        object-fit:cover;
        object-position:center;

        transform:translateX(-50%) scale(0.60);

        border-radius:15px;

    }

}

/* =====================================
   PUBLICIDAD MEDIO - VÍDEO MÓVIL
===================================== */

@media (max-width:1000px){

    .publicidadMedio video.imagenPublicidadMedio{

        position:absolute;

        width:165% !important;
        height:100% !important;

        max-width:none;

        left:50%;
        top:0;

        object-fit:cover;
        object-position:center;

        transform:translateX(-50%) scale(0.60);

        border-radius:15px;

    }

}



/* =====================================
   ALTURA VISIBLE DINÁMICA EN MÓVILES
===================================== */

@media (max-width: 767px) {

    :root {
        --altoVisibleMovil: 100dvh;
    }

}


/* =====================================
   CARRITO ADAPTADO A LA ALTURA VISIBLE
   DEL NAVEGADOR MÓVIL
===================================== */

@media (max-width: 600px) {

    #panelCarrito {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
    overflow: hidden;
}

    #listaCarrito {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

     .pieCarrito {
        flex: 0 0 auto;
        padding: 4px 16px 8px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    #btnWhatsapp {
        margin-top: 6px;
        padding: 9px;
        font-size: 16px;
    }
     /* Reducir espacio alrededor del total */
    .pieCarrito h3 {
        margin: 0 0 4px;
        line-height: 1.1;
    }

    /* Acercar el total al campo Nombre */
    .zonaDatosPedido {
        margin-top: 0;
    }




}



/* =====================================
   CARRITO MÓVIL EN HORIZONTAL
===================================== */

@media (max-width: 900px) and (orientation: landscape) {

    #panelCarrito {
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        box-sizing: border-box;

        overflow-x: hidden;
        overflow-y: auto;

        display: flex;
        flex-direction: column;

        touch-action: pan-y;
        overscroll-behavior-y: contain;
    }

    .cabeceraCarrito {
        flex: 0 0 auto;
        padding: 6px 16px;
    }

    .cabeceraCarrito h2 {
        margin: 0;
        font-size: 18px;
    }

    #listaCarrito {
        flex: 0 0 auto;
    height: 70dvh;
    min-height: 70px;
    max-height: 70dvh;

        overflow-x: hidden;
        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    .pieCarrito {
        flex: 0 0 auto;
        padding: 4px 12px;
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }

    .pieCarrito h3 {
        margin: 0 0 3px;
        line-height: 1.05;
    }

    #btnWhatsapp {
        margin-top: 5px;
        padding: 7px;
        font-size: 15px;
    }

    body.carritoAbierto {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }
}




/* =====================================
   AVISO PEDIDO - MÓVIL HORIZONTAL
===================================== */

@media screen and (max-width: 900px)
       and (orientation: landscape) {

    #modalAvisoPedido {
        padding: 5px 10px;
        overflow-y: auto;
        align-items: center;
    }

    .contenidoAvisoPedido {
        width: 100%;
    max-width: 520px !important;
    padding: 28px 30px 24px;
        border-radius: 16px;
        
    }

    .cerrarAvisoPedidoX {
        top: 5px;
        right: 8px;
    }

    .tituloAvisoPedido {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 25px;
        margin-bottom: 8px;
        font-size: 18px;
        line-height: 1.2;
    }

    .iconoWhatsAppTitulo {
        flex-shrink: 0;
        color: #25D366;
        font-size: 21px;
    }

    .contenidoAvisoPedido p {
        margin-bottom: 10px;
        font-size: 13px;
        line-height: 1.4;
    }

    .checkAvisoPedido {
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 12px;
        line-height: 1.3;
    }

    .btnCerrarAvisoPedido {
        min-height: 34px;
        padding: 7px 18px;
        font-size: 13px;
    }

   /* =====================================
   CABEZAL COMPACTO - MÓVIL HORIZONTAL
===================================== */

header {
    padding: 1px 40px;
}
.btnMenuCategoriasMovil {
    transform: translateY(8px);
}


}