/* ==========================================
   TEMA CLARO — TIENDA
========================================== */


/* ==========================================
   FONDO GENERAL
========================================== */

body{
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(120, 180, 255, 0.65),
            transparent 40%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(190, 140, 255, 0.60),
            transparent 40%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(120, 200, 255, 0.45),
            transparent 48%
        ),
        #f5f7ff;
}

/* ==========================================
   HEADER — TEMA CLARO
========================================== */

header{
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(120, 180, 255, 0.75),
            transparent 45%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(190, 140, 255, 0.70),
            transparent 45%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(120, 200, 255, 0.55),
            transparent 50%
        ),
        #f5f7ff;

    color:#202124;

    

    box-shadow:
        0 4px 18px rgba(80,70,150,.12);
}


nav button{

    background:#f1f3f5;

    color:#202124;

}

nav button:hover{

    background:var(--verde);

    color:#ffffff;

}

nav button.activo{

    background:var(--verde);

    color:#ffffff;

}


.card {
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(140, 238, 241, 0.75),
            transparent 42%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(75, 194, 168, 0.7),
            transparent 42%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(170, 220, 240, 0.55),
            transparent 40%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(175, 250, 255, 0.5),
            transparent 40%
        ),
        #ffffff;

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

    box-shadow:
        0 10px 30px rgba(80, 70, 150, 0.15);
}

.card h2 {
    color: #34306b;
}


/* ==========================================
   BOTONES + Y -
========================================== */

.cantidad button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(120, 110, 210, 0.25);

    background: linear-gradient(
        145deg,
        #e8f8ef,
        #c9f0d8
    );

    color: #34306b;
    font-size: 22px;
    line-height: 36px;
    cursor: pointer;

    box-shadow:
        0 4px 10px rgba(80, 70, 150, 0.15);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}


/* PASAR EL RATÓN */

.cantidad button:hover {
    background: linear-gradient(
        145deg,
        #d2f5df,
        #a9e8c1
    );

    color: #34306b;

    transform: scale(1.08);

    box-shadow:
        0 6px 14px rgba(80, 70, 150, 0.22);
}


/* AL PRESIONAR */

.cantidad button.mas:active,
.cantidad button.menos:active {
    background: #72c98f !important;
    background-color: #72c98f !important;
    background-image: none !important;

    color: #34306b !important;

    transform: scale(0.94) !important;

    box-shadow:
        0 2px 6px rgba(80, 70, 150, 0.20) !important;
}


/* CUANDO QUEDA ENFOCADO */

.cantidad button:focus,
.cantidad button:focus-visible {
    background: linear-gradient(
        145deg,
        #e8f8ef,
        #c9f0d8
    ) !important;

    color: #34306b !important;

    outline: none;
}

.cantidadValor {
    color: #34306b;
    font-weight: 700;
}

.precio {
    color: #29265c;
    font-weight: 600;
}

#btnCarrito,
#btnCarrito i,
#btnCarrito span {
    color: #ffffff !important;
}


/* =====================================
   MEJORAR ZONA TÁCTIL DEL CARRITO
===================================== */

#btnCarrito {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}






/* ==========================================
   PANEL LATERAL — TEMA CLARO
========================================== */

.menuLateralCategorias{

    position:fixed;

    top:0;
    left:-320px;

    width:300px;
    max-width:85%;
    height:100vh;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.97) 0%,
            rgba(247,249,255,0.97) 50%,
            rgba(250,247,255,0.97) 100%
        );

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

    border-right:1px solid rgba(120,110,210,0.15);

    z-index:10001;

    box-shadow:none;

    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,
            rgba(170,220,255,0.75),
            rgba(215,190,255,0.70)
        );

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


.cabeceraMenuLateralCategorias h2{

    margin:0;

    color:#34306b;

    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.65);

    color:#34306b;

    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 DETRÁS DEL PANEL
========================================== */

.fondoMenuCategoriasMovil{

    position:fixed;

    inset:0;

    background:rgba(30,35,60,.20);

    z-index:10000;

    opacity:0;
    visibility:hidden;

    transition:.3s ease;
}


.fondoMenuCategoriasMovil.activo{

    opacity:1;
    visibility:visible;
}


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

.botonCategoriaMovil{
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 7px;

    border:1px solid rgba(120,110,210,0.14);
    border-radius:50px;

    background:
        linear-gradient(
            145deg,
            #d9edff 0%,
            #c4def4 55%,
            #d1cdf4 100%
        );

    color:#34306b;
    font-size:15px;
    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;

    width:100%;

    box-sizing:border-box;

    border-left:none;

}


/* ==========================================
   BOTÓN SUBCATEGORÍA
========================================== */

.botonSubcategoriaMovil{

    width:100%;

    display:block;

    padding:11px 13px;

    margin:4px 0;

    border:1px solid rgba(120,110,210,0.15);

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f6ff
        );

    color:#34306b;

    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;
}


/* HOVER SUBCATEGORÍA */

.botonSubcategoriaMovil:hover{
    background:
        linear-gradient(145deg,#e9f3ff,#eee7ff);
    border-color:rgba(120,150,230,0.38);
    color:#34306b;
    box-shadow:none;
    transform:none;
}


/* SUBCATEGORÍA ACTIVA */

.botonSubcategoriaMovil.activo{
    background:
        linear-gradient(135deg,#78b8ff,#9b83ed);
    border-color:transparent;
    color:#ffffff;
    box-shadow:none !important;
    filter:none !important;
}

/* BLOQUE CATEGORÍA */

.bloqueCategoriaMenu{

    border-radius:14px;

    overflow:hidden;
}


/* TOQUE SUBCATEGORÍA */

.botonSubcategoriaMovil:active{

    background:
        linear-gradient(
            145deg,
            #c5f0d5,
            #91d9ad
        );

    color:#34306b;

    border-color:
        rgba(100,170,130,0.35);
}


/* ==========================================
   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;
    }
}


/* ==========================================
   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,.35);

        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,.45)
            );
    }


    .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);
    }
}

.contenedorBuscadorCliente input{
    color:#34306b;
}

.contenedorBuscadorCliente input::placeholder{
    color:#5f6090;
    opacity:1;
}

.btnFiltroPrecio{
    color:#34306b;
}

.iconoBuscadorCliente,
.iconoPrecioCliente{
    color:#34306b;
}

#btnFiltroPrecio #flechaFiltroPrecio,
#btnFiltroPrecio.activo #flechaFiltroPrecio{
    color:#34306b !important;
}



#buscarProductoCliente{
    color:#34306b !important;
}

#btnFiltroPrecio.activo,
#btnFiltroPrecio.activo .iconoPrecioCliente,
#btnFiltroPrecio.activo #flechaFiltroPrecio{
    color:#34306b !important;
}




.filaPrecios label{
    color:#34306b;
}

.filaPrecios input{
    color:#34306b;
}

.filaPrecios input::placeholder{
    color:#6b6a95;
    opacity:1;
}

.filaPrecios select{
    color:#34306b;
}

.filaPrecios option{
    color:#34306b;
}

#monedaFiltroPrecio{
    color:#34306b !important;
}

#btnAplicarPrecio{
    color:#34306b !important;
}

#btnCancelarPrecio{
    color:#34306b !important;
}


.campoMoneda::after{

    content:"▼";

    position:absolute;

    right:10px;

    bottom:13px;

    font-size:10px;

    color:#34306b;

    pointer-events:none;

}


.paginaProductosDestacados > .card {
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(140, 238, 241, 0.80),
            transparent 42%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(175, 150, 255, 0.75),
            transparent 42%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(170, 220, 240, 0.60),
            transparent 40%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(210, 180, 255, 0.55),
            transparent 40%
        ),
        #ffffff;

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

    box-shadow:none;
}

.estrellaProductoDestacado svg{
    color:#ffffff !important;
}

.estrellaProductoDestacado svg path{
    fill:#ffffff !important;
}


#textoTituloProductosDestacados,
#tituloProductosWeb{
    color:#34306b !important;
}

#textoTituloProductosDestacados,
#tituloProductosWeb{
    color:#34306b !important;
    font-weight:500;
}




#menuCategorias {
    width:100%;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(120,200,255,0.28),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(190,140,255,0.25),
            transparent 38%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(120,200,255,0.20),
            transparent 40%
        ),
        rgba(248,250,255,0.72);

    

    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;
}


.btnMenuCategoriasMovil i{
    color:#6f6cff;
    font-size:22px;
    filter:
        drop-shadow(0 0 5px rgba(111,108,255,0.35));
}

footer{
    text-align:center;
    padding:15px 15px 15px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(120, 180, 255, 0.75),
            transparent 45%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(190, 140, 255, 0.70),
            transparent 45%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(120, 200, 255, 0.55),
            transparent 50%
        ),
        #f5f7ff;

    color:#34306b;

    border-top:none;

    box-shadow:
        0 -4px 18px rgba(80,70,150,0.12);
}


.btnHistorial{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:9px 18px;

    background:
        linear-gradient(
            145deg,
            #d9edff 0%,
            #c5dcf5 55%,
            #d7cef5 100%
        );

    color:#34306b;

    border:1px solid rgba(255,255,255,0.85);
    border-radius:22px;

    cursor:pointer;
    font-size:16px;
    font-weight:500;

    box-shadow:
        0 5px 14px rgba(80,70,150,0.14);

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

.btnHistorial:hover{
    background:
        linear-gradient(
            145deg,
            #c9e5ff 0%,
            #b7d4f2 55%,
            #cfc1f2 100%
        );

    color:#34306b;

    border-color:rgba(120,110,210,0.30);

    box-shadow:
        0 6px 16px rgba(80,70,150,0.18);

    transform:none;
}


.derechosFooter{

    margin-top:25px;

    padding-top:18px;

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

    font-size:13px;

    opacity:.8;

}

 /* =====================================
    AVISO DE PEDIDO - TEMA CLARO
    ===================================== */

.modalAvisoPedido{
    position:fixed;
    inset:0;
    z-index:9999;

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

    padding:20px;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(120,190,255,0.30),
            transparent 45%
        ),
        radial-gradient(
            circle at 80% 25%,
            rgba(190,150,255,0.28),
            transparent 45%
        ),
        rgba(245,248,255,0.58);

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


/* CONTENIDO */

.contenidoAvisoPedido{
    position:relative;

    width:100%;
    max-width:480px;

    padding:32px 30px 28px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.82),
            rgba(238,245,255,0.72)
        );

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

    box-shadow:
        0 20px 50px rgba(80,100,160,0.18),
        0 5px 20px rgba(120,140,200,0.12);

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

    color:#26324a;
}


/* ICONO WHATSAPP */

.iconoAvisoPedido{
    width:auto;
    height:auto;

    margin:0 auto 18px;

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

    background:transparent !important;

    border:none !important;
    border-radius:0 !important;

    box-shadow:none !important;

    color:#25D366;

    font-size:42px;

    padding:0;
}


/* TITULO */

.contenidoAvisoPedido h2{
    margin:0 0 14px;

    text-align:center;

    color:#283654;

    font-size:24px;
    font-weight:700;
}


/* TEXTO */

.contenidoAvisoPedido p{
    margin:0 0 22px;

    text-align:center;

    color:#53617a;

    font-size:15px;
    line-height:1.6;
}

.contenidoAvisoPedido p strong{
    color:#4056a1;
}


/* CHECKBOX */

.checkAvisoPedido{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    margin-bottom:22px;

    color:#5c6980;

    font-size:14px;

    cursor:pointer;
}

.checkAvisoPedido input{
    width:17px;
    height:17px;

    accent-color:#667eea;

    cursor:pointer;
}


/* BOTON */

.btnCerrarAvisoPedido{
    width:100%;

    padding:13px 20px;

    border:0;
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #6fa8ff,
            #8b6fe8
        );

    color:#ffffff;

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

    cursor:pointer;

    box-shadow:
        0 8px 18px rgba(100,120,220,0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btnCerrarAvisoPedido:hover{
    transform:translateY(-2px);

    box-shadow:
        0 11px 24px rgba(100,120,220,0.30);
}


/* ==========================================
   AVISO PEDIDO — PÁRRAFO CENTRADO
   TEMA CLARO
========================================== */

html[data-tema="claro"] .contenidoAvisoPedido p{
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}

/* X */

.cerrarAvisoPedidoX{
    position:absolute;

    top:14px;
    right:14px;

    width:34px;
    height:34px;

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

    border:0;
    border-radius:50%;

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

    color:#68758d;

    font-size:16px;

    cursor:pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.cerrarAvisoPedidoX:hover{
    background:rgba(255,255,255,0.85);

    color:#4056a1;

    transform:rotate(90deg);
}

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

.iconoHistorial{

    width:22px;

    height:22px;

    flex-shrink:0;

    color:#7c8cff;

}


/* ==========================================
   CARRITO — TEMA CLARO
========================================== */

#panelCarrito{
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f7ff,
            #f8f4ff
        );

    box-shadow:
        -10px 0 35px rgba(80,100,160,0.16);

    color:#283654;

    border-left:1px solid rgba(120,140,200,0.14);
}

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

#panelCarrito .cabeceraCarrito{
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.92),
            rgba(238,244,255,0.92)
        );

    border-bottom:1px solid rgba(120,140,200,0.16);

    color:#283654;
}

#panelCarrito .cabeceraCarrito h2{
    color:#34446d;
}

#panelCarrito .cabeceraCarrito h2 i{
    color:#7187e8;
}


/* BOTÓN CERRAR */

#panelCarrito #cerrarCarrito{
    color:#53617a;
}

#panelCarrito #cerrarCarrito:hover{
    color:#7b68d8;
}


/* ==========================================
   PRODUCTOS DEL CARRITO
========================================== */

#panelCarrito .itemCarrito{
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f6ff
        );

    border:1px solid rgba(120,140,200,0.14);

    box-shadow:
        0 5px 18px rgba(90,110,170,0.08);

    color:#34405c;
}


/* NOMBRE PRODUCTO */

#panelCarrito .datosCarrito h3{
    color:#303d61;
}


/* PRECIO */

#panelCarrito .precioLinea{
    color:#68758e;
}

#panelCarrito .precioLinea strong{
    color:#536bbd;
}

/* PRECIO EN UNA SOLA LINEA */

.precioLinea{

    margin:0 0 8px;

    font-size:16px;

    color:#ccc;

}

/* ==========================================
   CONTROLES + / -
========================================== */

#panelCarrito .controlesCarrito button{
    background:#edf2ff;
    border:1px solid rgba(120,140,210,0.18);
    color:#536bbd;
}

#panelCarrito .controlesCarrito button:hover{
    background:#e1e9ff;
    color:#465cae;
}

#panelCarrito .controlesCarrito span{
    color:#34405c;
}


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

#panelCarrito .controlesCarrito .eliminar{
    color:#d26b7d;
    background:rgba(255,235,240,0.75);
    border-color:rgba(210,107,125,0.16);
}

#panelCarrito .controlesCarrito .eliminar:hover{
    color:#c84f67;
    background:rgba(255,225,232,0.95);
}


/* ==========================================
   PIE DEL CARRITO
========================================== */

#panelCarrito .pieCarrito{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.96),
            rgba(242,246,255,0.96)
        );

    border-top:1px solid rgba(120,140,200,0.16);
}


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

#panelCarrito .totalMoneda{
    color:#53617a;
}

#panelCarrito .totalMoneda strong{
    color:#5364c4;
}


/* ==========================================
   CAMPOS DEL PEDIDO
========================================== */

#panelCarrito .campoConIcono,
#panelCarrito .selectorEntrega{
    background:#ffffff;

    border:1px solid rgba(120,140,200,0.18);

    box-shadow:
        0 3px 12px rgba(90,110,170,0.05);
}

#panelCarrito .campoConIcono i,
#panelCarrito .selectorEntrega i{
    color:#7187e8;
}

#panelCarrito input,
#panelCarrito textarea,
#panelCarrito select{
    color:#34405c;
    background:transparent;
}

#panelCarrito input::placeholder,
#panelCarrito textarea::placeholder{
    color:#8b96aa;
}

#panelCarrito input:focus,
#panelCarrito textarea:focus,
#panelCarrito select:focus{
    outline:none;
}


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

#panelCarrito #btnWhatsapp{
    background:
        linear-gradient(
            135deg,
            #25D366,
            #20bd5b
        );

    color:#ffffff;

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

#panelCarrito #btnWhatsapp:hover{
    box-shadow:
        0 10px 24px rgba(37,211,102,0.25);
}

#panelCarrito .campoConIcono input,
#panelCarrito .campoConIcono textarea,
#panelCarrito .selectorEntrega select{
    border:1px solid transparent;
    outline:none;
    box-shadow:none;
    background:#ffffff;
    color:#34405c;
}

#panelCarrito .campoConIcono,
#panelCarrito .selectorEntrega{
    border-radius:14px;
    overflow:hidden;
}

/* ==========================================
   CAMPOS CON ERROR
========================================== */



/* ==========================================
   FONDO CLARO DE LOS CAMPOS DEL PEDIDO
========================================== */

#panelCarrito .zonaDatosPedido input,
#panelCarrito .zonaDatosPedido select,
#panelCarrito .zonaDatosPedido textarea{
    background:#ffffff !important;
    background-image:none !important;
    background-color:#ffffff !important;
    color:#34405c !important;
}



/* ==========================================
   MODAL CONFIRMACIÓN — TEMA CLARO
========================================== */

#modalConfirmacionPedido,
.modalConfirmacion{
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(120,190,255,0.28),
            transparent 42%
        ),
        radial-gradient(
            circle at 80% 25%,
            rgba(190,150,255,0.25),
            transparent 42%
        ),
        rgba(245,248,255,0.72);

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


/* ==========================================
   MODAL CONFIRMACIÓN — TEMA CLARO
========================================== */

#modalConfirmacionPedido,
.modalConfirmacion{
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(120,190,255,0.28),
            transparent 42%
        ),
        radial-gradient(
            circle at 80% 25%,
            rgba(190,150,255,0.25),
            transparent 42%
        ),
        rgba(245,248,255,0.72);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
#modalConfirmacionPedido .contenidoConfirmacion{
    width:100%;
    max-width:520px;
    max-height:90vh;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.98),
            rgba(243,247,255,0.98),
            rgba(248,244,255,0.98)
        );

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

    border-radius:24px;

    box-shadow:
        0 25px 70px rgba(70,90,150,0.18),
        0 8px 25px rgba(100,120,180,0.10);

    color:#34405c;

    overflow:hidden;
}
#modalConfirmacionPedido .cabeceraResumen{
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #eef4ff
        );

    border-bottom:1px solid rgba(120,140,200,0.14);

    padding:24px 24px 18px;
}

#modalConfirmacionPedido .cabeceraResumen h2{
    color:#34446d;
}

#modalConfirmacionPedido .cabeceraResumen h2 i{
    color:#7187e8;
}

#modalConfirmacionPedido .subtituloResumen{
    color:#7a879f;
}

#modalConfirmacionPedido .datoResumen{
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f6ff
        );

    border:1px solid rgba(120,140,200,0.14);

    border-radius:13px;

    color:#45526d;
}

#modalConfirmacionPedido .datoResumen i{
    color:#7187e8;
}

#modalConfirmacionPedido .datoResumen span{
    color:#45526d;
}
#modalConfirmacionPedido .productoResumen{
    background:#ffffff;

    border:1px solid rgba(120,140,200,0.13);

    border-radius:14px;

    color:#45526d;

    box-shadow:
        0 3px 12px rgba(90,110,170,0.05);
}

#modalConfirmacionPedido .productoResumenInfo i{
    color:#8194e8;
}

#modalConfirmacionPedido .productoResumenInfo span{
    color:#45526d;
}

#modalConfirmacionPedido .productoResumen strong{
    color:#5368c3;
}
#modalConfirmacionPedido .totalResumen{
    background:
        linear-gradient(
            135deg,
            #edf4ff,
            #f1ebff
        );

    border:1px solid rgba(120,140,200,0.14);

    border-radius:16px;

    box-shadow:
        0 5px 18px rgba(90,110,170,0.06);
}

#modalConfirmacionPedido .tituloTotalResumen{
    color:#435170;
}

#modalConfirmacionPedido .tituloTotalResumen i{
    color:#7187e8;
}

#modalConfirmacionPedido .totalResumenMoneda span{
    color:#75829a;
}

#modalConfirmacionPedido .totalResumenMoneda strong{
    color:#5368c3;
}


/* ==========================================
   TOTALES POR MONEDA — TEMA CLARO
========================================== */

#modalConfirmacionPedido .totalResumenMoneda{
    background:#ffffff !important;
    border:1px solid rgba(120,140,200,0.12);
    border-radius:12px;
    box-shadow:none;
}

#modalConfirmacionPedido .totalResumenMoneda span{
    color:#75829a;
}

#modalConfirmacionPedido .totalResumenMoneda strong{
    color:#5368c3;
}

/* ==========================================
   ACCIONES DEL RESUMEN — TEMA CLARO
========================================== */
#modalConfirmacionPedido #cancelarResumen{
    background:
        linear-gradient(
            135deg,
            #eef3ff,
            #e8e9ff
        );

    color:#4d5b82;

    border:1px solid rgba(110,130,190,0.22);

    box-shadow:
        0 3px 10px rgba(90,110,170,0.06);
}

/* ==========================================
   CONTENEDOR DE ACCIONES — TEMA CLARO
========================================== */

#modalConfirmacionPedido .accionesResumen{
    background:#f5f8ff !important;
    background-image:none !important;
    background-color:#f5f8ff !important;

    border-top:1px solid rgba(120,140,200,0.14);

    box-shadow:
        0 -5px 18px rgba(90,110,170,0.06);

    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

/* ==========================================
   DATOS DEL CLIENTE — SIN CONTENEDORES
========================================== */

#modalConfirmacionPedido .datoResumen{
    background:transparent !important;
    background-image:none !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0;
}

#modalConfirmacionPedido .datoResumen i{
    color:#7187e8;
}

#modalConfirmacionPedido .datoResumen span{
    color:#45526d;
}


/* ==========================================
   LISTA DE PRODUCTOS DEL CARRITO — TEMA CLARO
========================================== */

#panelCarrito #listaCarrito{
    background:
        linear-gradient(
            145deg,
            #e9eef8,
            #e7e9f5
        );

    border-top:1px solid rgba(120,140,200,0.12);
    border-bottom:1px solid rgba(120,140,200,0.12);
}

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

@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
====================================== */

/* ======================================
   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:#45526d;
}


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

#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,
            #edf3ff,
            #eee9ff
        );

    border:1px solid rgba(115,135,210,0.16);

    color:#7187e8;

    font-size:14px;
}


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

#modalConfirmacionPedido .datoResumen span{
    display:block;

    min-width:0;

    color:#45526d;

    line-height:1.2;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

}

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

#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
========================================== */


@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
========================================== */

#modalConfirmacionPedido .tituloProductosResumen{
    display:flex;
    align-items:center;
    gap:5px;

    width:100%;

    margin:15px 0 10px;
    padding:0;

    color:#435170;

    font-size:16px;
    font-weight:600;
}

#modalConfirmacionPedido .tituloProductosResumen i{
    color:#7187e8;
    font-size:15px;
}

/* ======================================
   TÍTULO PRODUCTOS — ALINEAR CON TARJETAS
====================================== */

#modalConfirmacionPedido .tituloProductosResumen{
    margin-top:20px;
    margin-bottom:0px;
    padding-left:22px;
}

@media (min-width: 551px) and (max-width: 559px){

    #seccionProductosDestacados{
        transform: translateY(0) !important;
        margin-bottom: 150px !important;
    }

}

@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;
    }

}

.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(0,0,0,.08);

    border-radius: 28px;

    background:

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

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

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

        linear-gradient(
            135deg,
            #ffffff,
            #f8f9fc 55%,
            #f3f5f9
        );

    box-shadow:

        0 25px 70px rgba(0,0,0,.18),

        0 0 60px rgba(100,80,255,.06);

}


.contadorModal{

    position:absolute;

    right:16px;

    bottom:16px;

    min-width:48px;

    padding:7px 11px;

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

    border-radius:20px;

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

    backdrop-filter:blur(8px);

    color:#444;

    font-size:13px;

    font-weight:600;

    text-align:center;

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

}

.btnAmpliarImagenProducto{

    position:absolute;

    left:16px;

    bottom:16px;

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

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

    backdrop-filter:blur(8px);

    color:#444;

    font-size:22px;

    cursor:pointer;

    transition:
        .25s ease;

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

}

.btnAmpliarImagenProducto:hover{

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

    border-color:
        rgba(0,0,0,.16);

    transform:scale(1.08);

}






/* ==========================================
   MODAL PRODUCTO — TEMA CLARO
========================================== */


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

#modalProducto{

    background:

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

        radial-gradient(
            circle at 85% 20%,
            rgba(120,70,255,.08),
            transparent 32%
        ),

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

        rgba(245,247,250,.82);

    backdrop-filter:blur(8px);

}


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

.contenidoModalProducto{

    position:relative;

    width:min(1180px,94vw);

    height:min(88vh,820px);

    max-height:92vh;

    display:grid;

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

    gap:45px;

    padding:38px;

    overflow:hidden;

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

    border-radius:28px;

    background:

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

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

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

        linear-gradient(
            135deg,
            #ffffff,
            #f8f9fc 55%,
            #f3f5f9
        );

    box-shadow:

        0 25px 70px
        rgba(0,0,0,.18),

        0 0 60px
        rgba(100,80,255,.06);

}


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

.contadorModal{

    position:absolute;

    right:16px;

    bottom:16px;

    min-width:48px;

    padding:7px 11px;

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

    border-radius:20px;

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

    backdrop-filter:blur(8px);

    color:#444;

    font-size:13px;

    font-weight:600;

    text-align:center;

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

}


/* ==========================================
   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(0,0,0,.08);

    border-radius:50%;

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

    backdrop-filter:blur(8px);

    color:#444;

    font-size:22px;

    cursor:pointer;

    transition:.25s ease;

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

}


.btnAmpliarImagenProducto:hover{

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

    border-color:
        rgba(0,0,0,.16);

    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 DEL PRODUCTO
========================================== */

.infoModalProducto{

    min-width:0;

    min-height:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:10px 15px 10px 0;

    overflow-y:auto;

    scrollbar-width:thin;

}


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

#nombreModalProducto{

    margin:0 0 14px;

    color:#222;

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

    font-weight:500;

    line-height:1.1;

    letter-spacing:-.5px;

}


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

.precioModal{

    margin:0;

    color:#b08a18;

    font-size:25px;

    font-weight:500;

    line-height:1.1;

}




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

.separadorInfoModal{

    width:100%;

    height:1px;

    margin:10px 0;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.14),
            rgba(0,0,0,.05),
            transparent
        );

}


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

.bloqueDescripcionModal{

    margin-bottom:12px;

}




.bloqueDescripcionModal h3{

    margin:0 0 10px;

    color:#222;

    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:#666;

    font-size:15px;

    line-height:1.7;

    text-align:left;

}


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

.zonaCantidadModal{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-top:15px;

    margin-bottom:18px;

}


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

.bloqueDescripcionModal::-webkit-scrollbar{

    width:7px;

}


.bloqueDescripcionModal::-webkit-scrollbar-track{

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

    border-radius:10px;

}


.bloqueDescripcionModal::-webkit-scrollbar-thumb{

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

    border-radius:10px;

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

}


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

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

}




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

@media(max-width:700px){

    #modalProducto{

        padding:10px;

        align-items:center;

    }


    .contenidoModalProducto{

        width:96vw;

        height:94vh;

        max-height:94vh;

        margin-top:-20px;

        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;

        line-height:1;

        padding:0;

    }


    .flechaModal.izquierda{

        left:10px;

        padding-right:3px;

        padding-bottom:5px;

    }


    .flechaModal.derecha{

        right:10px;

        padding-left:3px;

        padding-bottom:5px;

    }


    .infoModalProducto{

        padding:8px 2px 5px;

        overflow:visible;

        justify-content:flex-start;

    }


    #nombreModalProducto{

        margin-top:-20px;

        margin-bottom:3px;

        font-size:26px;

    }


    .precioModal{

        margin-top:0;

        margin-bottom:5px;

        font-size:27px;

    }


    .separadorInfoModal{

        margin-top:5px;

        margin-bottom:7px;

    }


    .bloqueDescripcionModal{

        margin-top:0;

    }


    .bloqueDescripcionModal h3{

        margin-bottom:3px;

    }


    #descripcionModalProducto{

        height:auto;

        overflow-y:auto;

        font-size:14px;

        line-height:1.35;

    }


    .zonaCantidadModal{

        margin-top:15px !important;

        margin-bottom:-10px !important;

    }


    .accionesModalProducto{

        margin-top:10px !important;

    }


    .beneficiosModalProducto{

        margin-bottom:5px;

    }

}

@media(max-width:700px){

    #descripcionModalProducto{
        height:auto;
        min-height:35px;
        overflow-y:auto;
        font-size:14px;
        line-height:1.35;
    }

}


/* ==========================================
   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: -16px;
    }

}


/* ==========================================
   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;

    }

}


/* ==========================================
   BOTONES 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;

    }

}


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

@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;

    }

}


/* ==========================================
   ORDEN BOTONES PC
========================================== */

@media(min-width:768px){

    .accionesModalProducto #btnCompartirProducto{

        order:1;

    }


    .accionesModalProducto #agregarModal{

        order:2;

    }

}


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

.iconoCarritoModal{

    width:25px;

    height:25px;

    display:inline-block;

    flex-shrink:0;

    vertical-align:middle;

}


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

.iconoCompartirModal{

    width:20px;

    height:20px;

    display:inline-block;

    flex-shrink:0;

    vertical-align:middle;

}






/* =====================================
   INFORMACIÓN DEL PRODUCTO — TEMA CLARO
===================================== */

.infoModalProducto{

    min-width:0;
    min-height:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:10px 15px 10px 0;

    overflow-y:auto;

    scrollbar-width:thin;

}



/* =====================================
   SEGURIDAD
===================================== */

.infoModalProducto{

    min-height:0;

}








/* =====================================
   INFORMACIÓN DEL PRODUCTO
   TEMA CLARO
===================================== */

.infoModalProducto{

    min-width:0;

    min-height:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:10px 15px 10px 0;

    overflow-y:auto;

    scrollbar-width:thin;

}


/* =====================================
   SEGURIDAD
===================================== */

.infoModalProducto{

    min-height:0;

}


/* =====================================
   CONTADOR DE FOTOS
   OCULTO CUANDO NO TIENE CONTENIDO
===================================== */

.contadorModal:empty{

    display:none;

}



/* =====================================
   AJUSTE MÓVIL
   POSICIÓN DE LOS DATOS DEL PRODUCTO
   IGUAL AL TEMA OSCURO
===================================== */

@media(max-width:700px){

    .infoModalProducto{

        padding:8px 2px 5px;

        overflow:visible;

        justify-content:flex-start;

    }


    #nombreModalProducto{

        margin-top:-20px;

        margin-bottom:3px;

    }


    #precioModalProducto{

        margin-top:0;

        margin-bottom:5px;

    }


    .separadorInfoModal{

        margin-top:5px;

        margin-bottom:7px;

    }


    .bloqueDescripcionModal{

        margin-top:0;

    }


    .bloqueDescripcionModal h3{

        margin-bottom:3px;

    }


    #descripcionModalProducto{

        margin-top:0;

        line-height:1.35;

    }

   


    .zonaCantidadModal{

        margin-top:15px !important;

        margin-bottom:-10px !important;

    }


    .accionesModalProducto{

        margin-top:10px !important;

    }

}



/* =====================================
   IMAGEN DEL PRODUCTO — TEMA CLARO
   SIN MARCO OSCURO
===================================== */

.imagenModal{

    border:1px solid rgba(0,0,0,.035);

    background:#ffffff;

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

}



/* =====================================
   BOTÓN CERRAR MODAL — MÓVIL
===================================== */

@media(max-width:700px){

    .cerrarModalProducto{

        top:27px;
        right:32px;

        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);
    }

}


@media(max-width:700px){

    .cerrarModalProducto{
        padding-top:2px;
    }

}

/* SUBIR ICONO MAXIMIZAR 2 PX */ 
.btnAmpliarImagenProducto{ padding-bottom:2px; }



/* =====================================
   CERRAR MODAL — MÓVIL TEMA CLARO
===================================== */

@media (max-width:700px){

    html[data-tema="claro"] #cerrarModalProducto{
        position:fixed !important;
        top:30px !important;
        right:38px !important;
    }

}


/* =====================================
   SELECTOR DE CANTIDAD — TEMA CLARO
===================================== */

.cantidadModal{

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

    gap:12px;

    margin:0;
    padding:5px;

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

    border-radius:30px;

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

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


/* =====================================
   AJUSTE SELECTOR DE CANTIDAD — CLARO
===================================== */

.cantidadModal{

    transform:translateY(-25px);

}


/* NÚMERO DE CANTIDAD */

.cantidadModal span{

    color:#333333;

}




/* =====================================
   BOTONES CANTIDAD MODAL — EFECTO VERDE
===================================== */

.cantidadModal button{

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

}


/* AL PULSAR */

.cantidadModal button:active{

    background:#25D366 !important;

    color:#ffffff !important;

    border-color:#25D366 !important;

    transform:scale(.94);

}



/* =====================================
   NÚMERO DE CANTIDAD — TEMA CLARO
===================================== */

.cantidadModal .cantidadValor{

    color:#34306b;

    font-weight:700;

    transition:
        color .15s ease,
        transform .15s ease;
}


/* DESTELLO AL CAMBIAR */

.cantidadModal .cantidadValor.cantidadCambiada{

    color:#25D366 !important;

    animation:
        destelloCantidad .35s ease;

}


@keyframes destelloCantidad{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.12);
    }

    100%{
        transform:scale(1);
    }

}


/* =====================================
   NÚMERO DE CANTIDAD
===================================== */

.cantidadModal .cantidadValor{

    color:#34306b;

    font-weight:700;

    transition:color .15s ease;

}


/* VERDE TEMPORAL AL CAMBIAR */

.cantidadModal .cantidadValor.cantidadCambiada{

    color:#25D366 !important;

}





/* =====================================
   BOTÓN COMPARTIR — CRISTAL VIOLETA
===================================== */

.btnCompartirProducto{

    background:rgba(120,85,190,.14) !important;

    color:#5b3a91 !important;

    border:1px solid rgba(120,85,190,.25) !important;

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

    backdrop-filter:blur(10px);

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

}


/* HOVER */

.btnCompartirProducto:hover{

    background:rgba(120,85,190,.22) !important;

    color:#4b2a7a !important;

    border-color:rgba(120,85,190,.35) !important;

    box-shadow:
        0 8px 22px rgba(80,50,130,.12);

}





/* =====================================
   TÍTULO "DESCRIPCIÓN" — TEMA CLARO
===================================== */

.bloqueDescripcionModal h3{

    color:#555555 !important;

    font-weight:500 !important;

}



/* =====================================
   TEXTO BENEFICIO — TEMA CLARO
===================================== */

.beneficioModal strong{

    color:#555555 !important;

    font-weight:400 !important;

}

 /* ===================================== 
    SEPARAR TEXTO DE LA BARRA DE SCROLL 
    ===================================== */ 
    #descripcionModalProducto{ 
        padding-right:12px !important; 
    }





/* =====================================
   BOTONES MODAL — MÓVIL
   MENOR ALTURA
===================================== */

@media(max-width:700px){

    .accionesModalProducto .btnAgregar,
    .accionesModalProducto .btnCompartirProducto{

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

        padding-top:0 !important;
        padding-bottom:0 !important;

        box-sizing:border-box;

    }

}



/* =====================================
   VISOR DE IMAGEN — TEMA CLARO
   ===================================== */

.visorImagenProducto{
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0,180,255,.06),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(120,70,255,.07),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(0,180,255,.04),
            transparent 38%
        ),
        rgba(250,251,253,.97) !important;

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}


/* =====================================
   VISOR DE IMAGEN — QUITAR SOMBRA
   ===================================== */

.visorImagenProducto{
    box-shadow:none !important;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0,180,255,.06),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(120,70,255,.07),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(0,180,255,.04),
            transparent 38%
        ),
        #fafbfe !important;

    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

/* =====================================
   SOMBRA IMAGEN — TEMA CLARO
   ===================================== */

#imagenVisorProducto{
    box-shadow:
        0 12px 35px rgba(40,40,70,.14) !important;
}


/* =====================================
   SUBIR LAS FLECHAS DEL VISOR
   ===================================== */

.visorImagenFlecha{
    line-height:1 !important;
    padding-bottom:4px !important;
}


/* =====================================
   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;

    }

}



/* ==========================================
   CONFIRMACIÓN PEDIDO — TEMA CLARO
========================================== */

#modalPedidoEnviado .pedidoFinalizacion{

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(245,248,255,.94)
        );

    border:1px solid rgba(80,90,120,.16);

    box-shadow:
        0 25px 70px rgba(40,50,90,.20),
        inset 0 1px 0 rgba(255,255,255,.95);

    color:#202124;

}


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

#modalPedidoEnviado .pedidoFinalizacion h2{

    color:#202124;

}


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

#modalPedidoEnviado .textoFinalizacion{

    color:#555;

}


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

#modalPedidoEnviado .numeroPedidoFinalizacion{

    background:rgba(90,110,180,.08);

    border:1px solid rgba(90,110,180,.14);

}


#modalPedidoEnviado .numeroPedidoFinalizacion span{

    color:#666;

}


#modalPedidoEnviado .numeroPedidoFinalizacion strong{

    color:#202124;

}


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

#modalPedidoEnviado .avisoCorreoFinalizacion{

    background:rgba(90,110,180,.07);

    border:1px solid rgba(90,110,180,.14);

}


#modalPedidoEnviado #tituloCorreoFinalizacion{

    color:#333;

}


#modalPedidoEnviado #textoCorreoFinalizacion{

    color:#666;

}


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

#modalPedidoEnviado #btnPedidoEnviado,
#modalPedidoEnviado #btnCancelarPedidoWhatsApp{

    color:#202124;

    font-size:25px !important;

}

/* ==========================================
   BOTÓN CERRAR — CONFIRMACIÓN TEMA CLARO
========================================== */

#modalPedidoEnviado .cerrarConfirmacion{

    color:#34306b !important;

}

/* ==========================================
   BOTÓN CERRAR — TEMA CLARO
========================================== */

#modalPedidoEnviado .cerrarConfirmacion{

    width:44px !important;

    height:44px !important;

    display:flex !important;

    align-items:center;

    justify-content:center;

    border-radius:50% !important;

    background:rgba(90,110,180,.12) !important;

    border:1px solid rgba(90,110,180,.20) !important;

    color:#34306b !important;

}


/* ==========================================
   X DEL BOTÓN
========================================== */

#modalPedidoEnviado .cerrarConfirmacion i{

    font-size:20px;

}


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

#modalPedidoEnviado .cerrarConfirmacion:hover{

    background:rgba(90,110,180,.20) !important;

    color:#252052 !important;

}

/* ==========================================
   BOTÓN CERRAR — ROJO — TEMA CLARO
========================================== */

#modalPedidoEnviado .cerrarConfirmacion{

    background:rgba(220,70,70,.12) !important;

    border:1px solid rgba(220,70,70,.22) !important;

    color:#c62828 !important;

}


#modalPedidoEnviado .cerrarConfirmacion:hover{

    background:rgba(220,70,70,.20) !important;

    border-color:rgba(220,70,70,.32) !important;

    color:#a91f1f !important;

}


/* ==========================================
   CANCELAR PEDIDO — TEXTO TEMA CLARO
========================================== */

#modalPedidoEnviado #btnCancelarPedidoWhatsApp{

    color:#333 !important;

}


/* HOVER CANCELAR */

#modalPedidoEnviado #btnCancelarPedidoWhatsApp:hover{

    color:#333 !important;

}


/* ==========================================
   BOTÓN CERRAR — TEMA CLARO
========================================== */

#modalPedidoEnviado .cerrarConfirmacion{
    background:rgba(220,70,70,.16) !important;
    border:1px solid rgba(220,70,70,.28) !important;
    color:#c62828 !important;
}

#modalPedidoEnviado .cerrarConfirmacion:hover{
    background:rgba(220,70,70,.30) !important;
    border-color:rgba(190,45,45,.45) !important;
    color:#a91f1f !important;
}

#modalPedidoEnviado .cerrarConfirmacion i{
    font-size:20px;
}


/* ==========================================
   CANCELAR PEDIDO — TEMA CLARO
========================================== */

#modalPedidoEnviado #btnCancelarPedidoWhatsApp{
    background:rgba(220,70,70,.16) !important;
    border:1px solid rgba(220,70,70,.28) !important;
    color:#c62828 !important;
}

#modalPedidoEnviado #btnCancelarPedidoWhatsApp:hover{
    background:rgba(220,70,70,.30) !important;
    border-color:rgba(190,45,45,.45) !important;
    color:#a91f1f !important;
}

/* ==========================================
   ICONO CORREO — PC
========================================== */

#modalPedidoEnviado .iconoAvisoCorreo i{
    font-size:26px !important;
}



/* ==========================================
   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;
}

/* ==========================================
   CONFIRMAR PEDIDO — VERDE MEJORADO
========================================== */

#modalPedidoEnviado #btnPedidoEnviado{
    background:linear-gradient(
        135deg,
        #58d68d,
        #2fbf71
    ) !important;

    border:1px solid rgba(45,180,105,.45) !important;
    color:#ffffff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 8px 25px rgba(40,180,90,.16) !important;
}

#modalPedidoEnviado #btnPedidoEnviado:hover{
    background:linear-gradient(
        135deg,
        #07c245,
        #07c245
    ) !important;

    border-color:rgba(35,150,85,.55) !important;
    color:#ffffff !important;
}

#modalPedidoEnviado #btnPedidoEnviado:active{
    background:linear-gradient(
        135deg,
        #2fa866,
        #1f824b
    ) !important;

    border-color:rgba(30,125,70,.65) !important;
    color:#ffffff !important;
}





/* =====================================
   TEMA CLARO
   COLOR DE LA TARJETA SEGÚN ESTADO
===================================== */


/* =====================================
   PENDIENTE — AMARILLO
===================================== */

#historialPedidos .pedidoHistorial.estado-pendiente{
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fffdf4 55%,
            #fff5c7 100%
        ) !important;
}


/* =====================================
   PREPARANDO — AZUL
===================================== */

#historialPedidos .pedidoHistorial.estado-preparando{
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f5f9ff 55%,
            #dcecff 100%
        ) !important;
}


/* =====================================
   EN CAMINO — VIOLETA
===================================== */

#historialPedidos .pedidoHistorial.estado-encamino{
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf7ff 55%,
            #e9ddff 100%
        ) !important;
}


/* =====================================
   ENTREGADO — VERDE
===================================== */

#historialPedidos .pedidoHistorial.estado-entregado{
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fff9 55%,
            #dff7e8 100%
        ) !important;
}

/* =====================================
   TEMA CLARO
   TEXTOS Y BOTÓN DEL HISTORIAL
===================================== */


/* NÚMERO DEL PEDIDO */
#historialPedidos .pedidoHistorial .numeroPedido{
    color:#1f2937 !important;
}


/* FECHA DEL PEDIDO */
#historialPedidos .pedidoHistorial .fechaPedido{
    color:#64748b !important;
}


/* BOTÓN VER DETALLES */
#historialPedidos .pedidoHistorial .btnVerDetalles{
    color:#4f46e5 !important;
    background:rgba(99,102,241,.10) !important;
    border:1px solid rgba(99,102,241,.22) !important;
}


/* HOVER DEL BOTÓN */
#historialPedidos .pedidoHistorial .btnVerDetalles:hover{
    color:#ffffff !important;
    background:#6366f1 !important;
    border-color:#6366f1 !important;
}

/* =====================================
   TEMA CLARO
   TEXTO "PEDIDO"
===================================== */

#historialPedidos .pedidoHistorial .textoPedido{
    color:#1f2937 !important;
}

/* =====================================
   TEMA CLARO
   TOTAL DEL PEDIDO
===================================== */

#historialPedidos .pedidoHistorial .totalPedido{
    color:#1f2937 !important;
}

#historialPedidos .pedidoHistorial .textoTotalPedido{
    color:#1f2937 !important;
}

#historialPedidos .pedidoHistorial .totalPedido strong{
    color:#1f2937 !important;
}

#historialPedidos .pedidoHistorial .iconoTotalPedido{
    color:#4f46e5 !important;
}

/* =====================================
   TEMA CLARO
   BOTÓN VER DETALLES — SOLO TEXTO
===================================== */

#historialPedidos .pedidoHistorial .btnDetalles{
    color:#4f46e5 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
}

#historialPedidos .pedidoHistorial .flechaDetalles{
    color:#4f46e5 !important;
}


/* HOVER */
#historialPedidos .pedidoHistorial .btnDetalles:hover{
    color:#3730a3 !important;
    background:transparent !important;
    border:none !important;
}

#historialPedidos .pedidoHistorial .btnDetalles:hover .flechaDetalles{
    color:#3730a3 !important;
}



/* =====================================
   TEMA CLARO
   CONTENEDORES INTERNOS DEL PEDIDO
===================================== */


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

#historialPedidos .pedidoHistorial .listaProductosHistorial{
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(99,102,241,.12) !important;
    box-shadow:0 4px 14px rgba(40,60,100,.06) !important;
}


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

#historialPedidos .pedidoHistorial .filaDatosCliente{
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(99,102,241,.12) !important;
    box-shadow:0 4px 14px rgba(40,60,100,.06) !important;
}


/* =====================================
   DIRECCIÓN
===================================== */

#historialPedidos .pedidoHistorial .datoDireccionCliente{
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(99,102,241,.12) !important;
    box-shadow:0 4px 14px rgba(40,60,100,.06) !important;
}


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

#historialPedidos .pedidoHistorial .lineaPedido{
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(99,102,241,.12) !important;
    box-shadow:0 4px 14px rgba(40,60,100,.06) !important;
}


/* =====================================
   TEMA CLARO
   CONTENEDORES INTERNOS — EFECTO CRISTAL
===================================== */


/* PRODUCTOS */
#historialPedidos .pedidoHistorial .listaProductosHistorial{

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

    border:1px solid rgba(255,255,255,.70) !important;

    box-shadow:
        0 6px 18px rgba(40,60,100,.08),
        inset 0 1px 0 rgba(255,255,255,.75) !important;

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


/* DATOS DEL CLIENTE */
#historialPedidos .pedidoHistorial .filaDatosCliente{

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

    border:1px solid rgba(255,255,255,.70) !important;

    box-shadow:
        0 6px 18px rgba(40,60,100,.08),
        inset 0 1px 0 rgba(255,255,255,.75) !important;

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


/* DIRECCIÓN */
#historialPedidos .pedidoHistorial .datoDireccionCliente{

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

    border:1px solid rgba(255,255,255,.70) !important;

    box-shadow:
        0 6px 18px rgba(40,60,100,.08),
        inset 0 1px 0 rgba(255,255,255,.75) !important;

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


/* ENTREGA */
#historialPedidos .pedidoHistorial .lineaPedido{

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

    border:1px solid rgba(255,255,255,.70) !important;

    box-shadow:
        0 6px 18px rgba(40,60,100,.08),
        inset 0 1px 0 rgba(255,255,255,.75) !important;

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


/* =====================================
   TEXTOS DE LOS CONTENEDORES
===================================== */

#historialPedidos .pedidoHistorial .listaProductosHistorial,
#historialPedidos .pedidoHistorial .filaDatosCliente,
#historialPedidos .pedidoHistorial .datoDireccionCliente,
#historialPedidos .pedidoHistorial .lineaPedido{

    color:#1f2937 !important;
}


/* TEXTOS FUERTES */
#historialPedidos .pedidoHistorial .listaProductosHistorial strong,
#historialPedidos .pedidoHistorial .filaDatosCliente strong,
#historialPedidos .pedidoHistorial .datoDireccionCliente strong,
#historialPedidos .pedidoHistorial .lineaPedido strong{

    color:#111827 !important;
}


/* ICONOS */
#historialPedidos .pedidoHistorial .iconoProductoHistorial,
#historialPedidos .pedidoHistorial .iconoDetallePedido,
#historialPedidos .pedidoHistorial .iconoEntregaPedido{

    color:#4f46e5 !important;
}

/* =====================================
   TEMA CLARO
   ELEMENTOS INTERNOS DEL CRISTAL
   QUITAR FONDO OSCURO
===================================== */


/* CLIENTE Y TELÉFONO */
#historialPedidos .pedidoHistorial .filaDatosCliente p{
    background:transparent !important;
    background-color:transparent !important;
    border:none !important;
    box-shadow:none !important;
}


/* PRODUCTOS */
#historialPedidos .pedidoHistorial .listaProductosHistorial li{
    background:transparent !important;
    background-color:transparent !important;
    border:none !important;
    box-shadow:none !important;
}

/* =====================================
   TEMA CLARO
   CADA PRODUCTO EN SU PROPIO CONTENEDOR
===================================== */

#historialPedidos .pedidoHistorial .listaProductosHistorial li{

    background:rgba(255,255,255,.42) !important;

    border:1px solid rgba(255,255,255,.72) !important;

    border-radius:12px !important;

    box-shadow:
        0 4px 12px rgba(40,60,100,.07),
        inset 0 1px 0 rgba(255,255,255,.75) !important;

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

}

/* =====================================
   TEMA CLARO
   CLIENTE Y TELÉFONO — REDONDEADOS
===================================== */

#historialPedidos .pedidoHistorial .filaDatosCliente p{
    border-radius:12px !important;
    overflow:hidden !important;
}

/* =====================================
   TEMA CLARO
   CONTENEDOR DATOS DEL CLIENTE
===================================== */

#historialPedidos .pedidoHistorial .filaDatosCliente{
    border-radius:12px !important;
    overflow:hidden !important;
}

/* =====================================
   TEMA CLARO
   SEPARACIÓN DATOS / ENTREGA
===================================== */

#historialPedidos .pedidoHistorial .filaDatosCliente{
    margin-bottom:12px !important;
}



/* =====================================
   BOTÓN CERRAR MODAL PRODUCTO — TEMA CLARO
===================================== */

html[data-tema="claro"] #cerrarModalProducto{
    background:#ffffff !important;
    color:#4f46e5 !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 4px 12px rgba(40,60,100,.12) !important;
}

html[data-tema="claro"] #cerrarModalProducto:hover{
    background:#f5f3ff !important;
    color:#3730a3 !important;
}

/* =====================================
   ICONO PRODUCTO HISTORIAL — TEMA CLARO
===================================== */

html[data-tema="claro"]
#historialPedidos .iconoProductoHistorial{
    color:#4f46e5 !important;
    stroke:#4f46e5 !important;
}

html[data-tema="claro"]
#historialPedidos .iconoProductoHistorial path{
    stroke:#4f46e5 !important;
}


/* =====================================
   TÍTULO DÓNDE ESTAMOS — TEMA CLARO
===================================== */

html[data-tema="claro"] #seccionUbicacionNegocio h2{
    color:#34306b !important;
    font-size:24px !important;
    font-weight:400 !important;
    line-height:1.2 !important;
    margin:0 0 2px 0 !important;
    text-align:center !important;
}


html[data-tema="claro"] #seccionUbicacionNegocio h2 i{
    color:#34306b !important;
}

/* ==========================================
   SEPARACIÓN TÍTULO — MAPA
========================================== */

html[data-tema="claro"] #seccionUbicacionNegocio h2{
    margin-bottom:14px !important;
}

/* ==========================================
   SÍMBOLOS + Y − — TEMA CLARO
========================================== */

html[data-tema="claro"] .mas,
html[data-tema="claro"] .menos {
    line-height:10px !important;
    padding:0 0 3px 0 !important;
    transform:none !important;
    position:static !important;
}

/* ==========================================
   LOADER — TEMA CLARO
========================================== */

html[data-tema="claro"] #loader{

    background:
        radial-gradient(
            circle at center,
            rgba(139, 92, 246, 0.10),
            rgba(255, 255, 255, 0.88) 55%,
            rgba(242, 245, 255, 0.94) 100%
        );

    backdrop-filter:blur(8px);

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

}


/* ==========================================
   SPINNER — TEMA CLARO
========================================== */

html[data-tema="claro"] #loader .spinner{

    border:4px solid rgba(79,70,229,0.12);

    border-top-color:#8b5cf6;

    border-right-color:#6366f1;

    box-shadow:
        0 0 18px rgba(139,92,246,0.30),
        0 0 40px rgba(99,102,241,0.12);

}


/* ==========================================
   TEXTO — TEMA CLARO
========================================== */

html[data-tema="claro"] #loader p{

    color:#30304a;

    text-shadow:
        0 0 10px rgba(139,92,246,0.18);

}

/* ==========================================
   BOTÓN AÑADIR AL CARRITO — MÁS FINO
========================================== */

.btnAgregar{
    min-height:35px !important;
    height:35px !important;
    padding:6px 14px !important;
    transform:translateY(-20px) !important;
}

/* ==========================================
   BOTÓN COMPARTIR — TEMA CLARO
========================================== */

html[data-tema="claro"] .btnCompartirProducto{
    min-height:38px !important;
    height:38px !important;
    padding:6px 14px !important;
    transform:translateY(-20px) !important;
}

html[data-tema="claro"] .tituloCantidadModal{
    transform:translateY(-20px) !important;
}

@media(max-width:700px){

    html[data-tema="claro"] .modalProducto{
        position:fixed !important;
        inset:0 !important;
        width:100% !important;
        height:100dvh !important;
        min-height:100dvh !important;
        overflow:hidden !important;
    }

    html[data-tema="claro"] .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;
        padding-top:0 !important;
    }

}
.btnAgregar{
    transform:translateY(0) !important;
}

/* BOTÓN AÑADIR — DETALLES DEL PRODUCTO */
#agregarModal{
    transform:translateY(-17px) !important;
}

html[data-tema="claro"] #agregarModal{
    min-height:38px !important;
    height:38px !important;
}

/* =====================================
   AJUSTE FOTO MODAL - TEMA CLARO MÓVIL
===================================== */

@media (max-width:700px){

    html[data-tema="claro"] .contenidoModalProducto{
        padding-top:20px !important;
    }

}

/* ==========================================
   BLOQUEAR SCROLL DE LA PÁGINA
   CUANDO ESTÁ ABIERTO EL MODAL PRODUCTO
========================================== */

html:has(#modalProducto.mostrar),
body:has(#modalProducto.mostrar){

    overflow:hidden !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 RECUADRO AZUL AL TOCAR + / −
========================================== */

html[data-tema="claro"] .cantidadModal button{
    -webkit-tap-highlight-color: transparent !important;
    
    outline: none !important;
}

html[data-tema="claro"] .cantidadModal button:focus,
html[data-tema="claro"] .cantidadModal button:focus-visible,
html[data-tema="claro"] .cantidadModal button:active{
    outline: none !important;
}

.telefonoIcono{
    fill:currentColor !important;
    stroke:none !important;
}


@media(min-width:701px){

    .bloqueDescripcionModal{
        max-height:220px;
        overflow-y:auto;
        overflow-x:hidden;
        min-height:0;
    }

}
@media(min-width:701px){

    .bloqueDescripcionModal{
        width:100%;
        max-height:350px;
        margin-bottom:20px;
    }

}

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

    .contenidoModalProducto{

        height:auto;

        max-height:92vh;

        overflow-y:auto;

        overflow-x:hidden;

        padding-top:100px;

        padding-bottom:30px;

        box-sizing:border-box;

    }

    .infoModalProducto{

        justify-content:flex-start;

        overflow-y:auto;

        min-height:0;

        padding-top:50px;

        padding-bottom:40px;

        box-sizing:border-box;

    }

}

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

    .contenidoModalProducto{

        grid-template-rows:minmax(0, 1fr);

    }

    .galeriaModalProducto{

        min-height:0;

    }

    .infoModalProducto{

        min-height:0;

        height:100%;

        overflow-y:auto;

    }

}
/* ==========================================
   MODAL — VENTANA BAJA
========================================== */

@media (max-height:800px){

    .contenidoModalProducto{

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

        padding-top:100px;
        padding-bottom:0;

        box-sizing:border-box;

    }

    .infoModalProducto{

        justify-content:flex-start;

    }

}


/* ==========================================
   DESCRIPCIÓN — TEMA CLARO EN PC
   CONTENEDOR MÁS COMPACTO
========================================== */

@media (min-width:701px){

    html[data-tema="claro"] #descripcionModalProducto{

        max-height:170px !important;

        overflow-y:auto !important;

        overflow-x:hidden !important;

        padding-right:12px !important;

        box-sizing:border-box;

    }

}


/* ==========================================
   LUPA — TEMA CLARO
   REDUCIR SOLO EL CÍRCULO
========================================== */

html[data-tema="claro"] .btnAmpliarImagenProducto{

    width:30px !important;

    height:30px !important;

    font-size:22px;

}


.mensajeSinProductosPrecio {
    color: #17365D !important;
}