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

*{
    box-sizing:border-box;
}


body{

    margin:0;

    font-family:'Inter',Arial,sans-serif;

    background:#fff;

}



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


header{

    height:120px;

    width:100%;

    display:flex;

    align-items:center;

    padding:0 35px;

    background:#000000;

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

    position:relative;

}



/* MENU */

#menu-btn{

    border:none;

    background:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}



/* LOGO */

.logo{

    display:flex;

    align-items:center;

    text-decoration:none;

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    z-index:5;

}

.logo img{

    height:95px;

    width:auto;

    display:block;

}


.logo:visited{

    color:white;

    text-decoration:none;

}


.logo:hover{

    color:white;

    text-decoration:none;

}



/* BUSCADOR */

.search-box{

    position:relative;

    margin-left:auto;

    margin-right:25px;

    display:flex;

    align-items:center;

}



.search-box input{

    width:320px;

    padding:12px 45px 12px 18px;

    border-radius:25px;

    border:none;

    outline:none;

    font-size:15px;

    box-sizing:border-box;

}

#search-btn{

    position:absolute;

    right:6px;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:8px;

    border-radius:50%;

    transition:background 0.2s;

}

#search-btn:hover{

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

}

#search-btn img{

    width:18px;

    height:18px;

    display:block;

}



/* CARRITO HEADER */

.cart button{

    border:none;

    background:none;

    color:white;

    font-size:25px;

    cursor:pointer;

    position:relative;

}


.icono-header{

    height:24px;

    width:auto;

    display:block;

    vertical-align:middle;

}



#cart-count{

    position:absolute;

    top:-10px;

    right:-12px;

    background:red;

    color:white;

    border-radius:50%;

    font-size:12px;

    padding:3px 7px;

}



/* ==========================
   NAV
========================== */


.main-nav{

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

    background:#820808;

}



.main-nav a{

    color:white;

    text-decoration:none;

    font-size:17px;

    font-weight:600;

}


.main-nav a:hover{

    opacity:.8;

}



/* ==========================
   MENU LATERAL
========================== */


#side-menu{

    position:fixed;

    top:0;

    left:-300px;

    width:300px;

    height:100vh;

    background:white;

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

    z-index:1000;

    transition:.3s;

    overflow-y:auto;

}



#side-menu.active{

    left:0;

}



.menu-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:60px 20px 20px 20px;

}



.menu-header h2{

    margin:0;

}



.menu-header button{

    border:none;

    background:none;

    font-size:22px;

    cursor:pointer;

}



/* LISTA */

#side-menu ul{

    list-style:none;

    margin:0;

    padding:0 20px;

}



/* CATEGORIAS */

.category{

    border-bottom:1px solid #eee;

    padding:15px 0;

    position:relative;

}



/* fila categoria */

.category-title{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.category-title a{

    color:black;

    text-decoration:none;

    font-size:16px;

}



/* BOTON + */

.toggle-category{

    width:25px;

    height:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    cursor:pointer;

    line-height:1;

}



/* SUBCATEGORIAS */

.subcategory{

    display:none;

    padding-left:20px !important;

    margin-top:10px !important;

}



.subcategory li{

    padding:8px 0;

    border:none;

}



.subcategory a{

    color:#444;

    text-decoration:none;

    font-size:14px;

}


.subcategory a:hover{

    color:var(--color-acento, #D41622);

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


.products{

    padding:40px;

}



.products h2{

    text-align:center;

    margin-bottom:30px;

}



/* CONTENEDOR PRODUCTOS */


.product-container{

    display:grid;

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

    gap:25px;

}



/* TARJETA PRODUCTO */


.product-card{

    background:white;

    border-radius:15px;

    overflow:hidden;

    padding-bottom:20px;

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

    display:flex;

    flex-direction:column;

    gap:10px;

}



.product-card img{

    width:100%;

    height:220px;

    object-fit:contain;

    background:white;

}



.product-image{

    height:220px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eee;

    border-radius:15px 15px 0 0;

}



.product-card h3{

    padding:0 15px;

}



.product-card p{

    padding:0 15px;

    color:#555;

}



.price{

    font-size:18px;

    font-weight:bold;

}



.custom-text{

    color:#666;

}



/* BOTONES PRODUCTOS */


.add-cart,
.whatsapp-btn{

    border:none;

    padding:12px;

    border-radius:8px;

    cursor:pointer;

    font-size:15px;

    margin:0 15px;

}



.add-cart{

    background:#111;

    color:white;

}



.add-cart:hover{

    opacity:0.8;

}





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


#cart-panel{


    position:fixed;

    top:0;

    right:-400px;


    width:350px;

    height:100vh;


    background:white;


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


    transition:0.3s;


    z-index:1000;


    padding:20px;


    overflow-y:auto;


    box-sizing:border-box;


}



#cart-panel.active{

    right:0;

}



.cart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.cart-header button{

    border:none;

    background:none;

    font-size:22px;

    cursor:pointer;

}



#cart-items{

    margin-top:30px;

}



.cart-product{

    border-bottom:1px solid #ddd;

    padding:15px 0;

}



.cart-footer{

    margin-top:30px;

}



.cart-footer button{

    width:100%;

    padding:12px;

    margin-top:10px;

    border:none;

    border-radius:8px;

    cursor:pointer;

}




/* ==========================
       CANTIDADES
========================== */


.quantity-control{

    display:flex;

    align-items:center;

    gap:15px;

}



.quantity-control button{

    width:30px;

    height:30px;

    border:none;

    border-radius:50%;

    cursor:pointer;

}



.quantity-box{

    display:flex;

    align-items:center;

    gap:5px;

}



.quantity-number{

    width:45px;

    height:35px;

    border:1px solid #ccc;

    border-radius:8px;


    display:flex;

    justify-content:center;

    align-items:center;


    font-weight:bold;

}



.quantity-box button{

    opacity:0;

    width:25px;

    height:25px;


    border:none;

    background:#111;

    color:white;


    border-radius:50%;


    cursor:pointer;

}



.quantity-box:hover button{

    opacity:1;

}





/* ==========================
        PAGINA PEDIDO
========================== */


.order-page{

    width:100%;

    margin:40px auto;

    padding:20px;

    box-sizing:border-box;

}



.order-page form{

    display:flex;

    flex-direction:column;

    gap:10px;

}



.order-page input,
.order-page select{


    padding:12px;


    border-radius:8px;


    border:1px solid #ccc;


}



.help-text{

    font-size:14px;

    color:#666;

}



.summary-product{

    border-bottom:1px solid #ddd;

    padding:10px 0;

}



.order-page button{


    margin-top:20px;

    padding:15px;


    border:none;


    border-radius:8px;


    background:#111;


    color:white;


    cursor:pointer;


}
/* ==========================
        CHECKOUT PEDIDO
========================== */


.checkout-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:120px;

    width:95%;

    margin:50px auto;

}



.customer-box,
.order-box{

    background:white;

    border-radius:15px;

    padding:35px;

    min-height:450px;

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

}



.customer-box h2,
.order-box h2{

    margin-top:0;

    text-align:center;

}



.customer-box form{

    display:flex;

    flex-direction:column;

    gap:10px;

}



.customer-box input,
.customer-box select{

    padding:12px;

    border-radius:8px;

    border:1px solid #ccc;

}



#confirm-order{

    width:100%;

    padding:15px;

    margin-top:20px;

    border:none;

    border-radius:10px;

    background:#111;

    color:white;

    font-size:16px;

    cursor:pointer;

}



#confirm-order:hover{

    opacity:0.8;

}





/* ==========================
        BOTON VOLVER
========================== */


.back-button{

    margin-top:20px;

    margin-left:40px;

    background:#111827;

    color:white;

    border:none;

    border-radius:10px;

    padding:10px 22px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:0.2s;

}



.back-button:hover{

    color:var(--color-acento, #D41622);

}





/* ==========================
        NAVEGACION
========================== */


.main-nav{

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

    background:#b01019;

}



.main-nav a{

    text-decoration:none;

    color:white;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:0.2s;

}



.main-nav a:hover{

    transform:scale(1.05);

}





/* ==========================
       PAGINA PRODUCTO
========================== */


.product-page{

    width:95%;

    max-width:1500px;

    margin:40px auto;

}


.product-view{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    align-items:start;

}



.product-photo{

    height:550px;

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    position:relative;

}

.product-photo img{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

}

.gallery-arrow{

    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.9);
    box-shadow:0 2px 10px rgba(0,0,0,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111;
    cursor:pointer;
    transition:background .2s, transform .2s;
}

.gallery-arrow:hover{
    background:#fff;
    transform:translateY(-50%) scale(1.08);
}

.gallery-arrow-prev{
    left:16px;
}

.gallery-arrow-next{
    right:16px;
}

.product-info{

    display:flex;

    flex-direction:column;

    gap:15px;

    padding-top:60px;

}


.product-info h1{

    font-size:36px;

    margin:0;

    line-height:1.2;

}



.product-price{

    color:#D41622;

    font-size:42px;

    font-weight:800;

    margin-top:30px;

    margin-bottom:20px;

}



.product-description{

    margin-top:60px;

}



.product-description h2{

    margin-top:40px;

}





/* SELECTOR COLOR */


.color-select,
.vendor-select{

    width:100%;

    padding:15px;

    border-radius:10px;

    border:1px solid #ccc;

    font-size:16px;

    cursor:pointer;

    background:white;

}


.whatsapp-btn:disabled{

    background:#ccc;

    color:#888;

    cursor:not-allowed;

    box-shadow:none;

    transform:none;

}





/* BOTON AGREGAR */


.add-cart-detail{

    width:100%;

    padding:16px;

    margin-top:10px;

    border:none;

    border-radius:10px;

    background:#D41622;

    color:white;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

}



.add-cart-detail:hover{

    opacity:0.8;

}





/* ==========================
        LINKS MENU
========================== */


#side-menu a{

    color:black;

    text-decoration:none;

}



#side-menu a:visited{

    color:black;

}



#side-menu a:hover{

    color:var(--color-acento, #D41622);

}





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


/* ==========================
   CATEGORIAS MENU FINAL
========================== */


/* ==========================
   CATEGORIAS MENU LATERAL
========================== */


.category{

    position:relative;

    padding:15px 35px 15px 5px;

    margin:0;

    border-bottom:1px solid #e5e5e5;

    cursor:pointer;

    width:100%;

    box-sizing:border-box;

}


.category + .category{

    border-top:1px solid #f2f2f2;

}


.category:hover{

    background:#fafafa;

}



/* TEXTO DE LA CATEGORIA */

.category > a{

    display:block;

    line-height:20px;

    color:black;

    text-decoration:none;

}



/* SIGNO + FIJO */

.toggle-category{

    position:absolute;

    right:8px;

    top:15px;

    width:25px;

    height:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    line-height:1;

}



/* SUBCATEGORIAS */

.subcategory{

    display:none;

    margin-top:12px;

    padding-left:15px;

    border-top:1px solid #ddd;

}



.subcategory li{

    padding:10px 0;

    border:none;

    font-size:14px;

}



.subcategory a{

    color:#333;

    text-decoration:none;

}





/* ==========================
       SUBCATEGORIAS
========================== */


/* SUBCATEGORIAS ABIERTAS */

.subcategory{

    display:none;

    margin-top:12px;

    margin-left:8px;

    padding-left:18px;

    border-left:2px solid #D41622;

    border-top:1px solid #ddd;

}



.subcategory li{

    padding:10px 0;

    border:none;

    font-size:14px;

}



.subcategory a{

    display:block;

}





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


@media(max-width:900px){


.product-container{

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

}


.checkout-container{

    grid-template-columns:1fr;

    gap:30px;

}


.product-view{

    grid-template-columns:1fr;

}



}



@media(max-width:600px){


.product-container{

    grid-template-columns:1fr;

}


header{

    height:auto;

    flex-wrap:wrap;

    justify-content:space-between;

    row-gap:10px;

    padding:12px 16px;

}


.logo{

    position:static;

    transform:none;

    order:1;

    margin:0;

}

#menu-btn{

    order:0;

}

.cart{

    order:2;

    margin-left:0;

}

.logo img{

    height:65px;

}


.search-box{

    order:3;

    width:100%;

    margin:0;

}

.search-box input{

    width:100%;

    box-sizing:border-box;

}


.main-nav{

    height:auto;

    flex-wrap:nowrap;

    justify-content:space-around;

    gap:6px;

    padding:12px 10px;

}

.main-nav a{

    font-size:13px;

    white-space:nowrap;

}

.main-nav a:first-child{

    display:none;

}


.product-gallery{

    flex-direction:column;

}

.product-thumbnails{

    flex-direction:row;

    flex-wrap:wrap;

    order:2;

}

.product-photo{

    height:350px;

    order:1;

}


}
/* ==========================
   TARJETAS PRODUCTOS NUEVAS
========================== */


.product-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

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

    transition:0.25s;

    cursor:pointer;

    display:flex;

    flex-direction:column;

}



.product-card:hover{

    transform:translateY(-5px);

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

}




.product-image{

    width:100%;

    height:240px;

    background:#f4f4f4;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    position:relative;

}



.product-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    background:white;

    transition:0.3s;

}



.product-card:hover .product-image img{

    transform:scale(1.05);

}




.product-content{

    padding:18px;

    display:flex;

    flex-direction:column;

    flex:1;

}




.product-brand{

    font-size:12px;

    color:#999;

    text-transform:uppercase;

    font-weight:600;

}



.product-content h3{

    margin:8px 0;

    font-size:18px;

    line-height:1.25;

    min-height:45px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}




.product-description-short{

    color:#666;

    font-size:14px;

    line-height:1.4;

    min-height:40px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}



.price{

    font-size:22px;

    font-weight:700;

    color:#D41622;

    margin:15px 0;

}




.add-cart{

    width:100%;

    background:#D41622;

    color:white;

    border:none;

    padding:18px;

    border-radius:10px;

    font-weight:600px;

    cursor:pointer;

}



.add-cart:hover{

    background:#b01019;

}



.personalized-label{

    color:#D41622;

    font-weight:600;

}



.whatsapp-btn{

    width:100%;

    background:#25D366;

    color:white;

    border:none;

    padding:14px;

    border-radius:10px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:0.2s;

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

}

.whatsapp-btn:hover{

    background:#1ebe5b;

    transform:translateY(-2px);

    box-shadow:0 6px 16px rgba(37,211,102,0.4);

}
/* ==========================
   MODAL SELECCION COLOR
========================== */


#color-modal{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

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

    display:none;

    align-items:center;

    justify-content:center;

    z-index:2000;

}



.color-box{

    background:white;

    padding:32px;

    border-radius:18px;

    width:320px;

    text-align:center;

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

}

.color-box h3{

    margin:0 0 5px;

    font-size:20px;

}

.color-box p.color-box-sub{

    margin:0 0 5px;

    color:#777;

    font-size:14px;

}



.color-box select{

    width:100%;

    padding:12px;

    margin:20px 0;

    border-radius:10px;

    border:1px solid #ccc;

    font-size:15px;

    cursor:pointer;

    transition:0.2s;

}

.color-box select:focus{

    outline:none;

    border-color:var(--color-acento, #D41622);

}



.color-box button{

    width:100%;

    padding:13px;

    margin-top:10px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-weight:600;

    font-size:15px;

    transition:0.2s;

}



#confirm-color{

    background:var(--color-acento, #D41622);

    color:white;

}

#confirm-color:hover{

    filter:brightness(0.9);

    transform:translateY(-1px);

}



#cancel-color{

    background:#eee;

    color:#444;

}

#cancel-color:hover{

    background:#ddd;

}
.product-info p{

    margin:0;

}


.product-info .product-description{

    color:#555;

    font-size:16px;

    line-height:1.6;

    max-width:450px;

}
/* ==========================
   CONTROL DE CANTIDAD CARRITO
========================== */


.cart-quantity{

    display:flex;

    align-items:center;

    gap:10px;

    margin:15px 0;

}



.quantity-control{

    display:flex;

    align-items:center;

    border:1px solid #ddd;

    border-radius:8px;

    overflow:hidden;

    height:32px;

}



.quantity-control button{

    width:30px;

    height:100%;

    border:none;

    background:white;

    cursor:pointer;

    font-size:18px;

    font-weight:600;

    transition:0.2s;

}



.quantity-control button:hover{

    background:#f2f2f2;

}



.quantity-number{

    width:35px;

    text-align:center;

    font-size:15px;

    font-weight:600;

}
/* ==========================
   BOTONES CARRITO MEJORADOS
========================== */


/* BOTON CONFIRMAR PEDIDO */

#send-order{

    background:#D41622;

    color:white;

    font-size:16px;

    font-weight:600;

    padding:14px;

    border-radius:10px;

    transition:0.25s;

}


#send-order:hover{

    background:var(--color-acento, #b01019);

    transform:translateY(-2px);

}





/* BOTON VACIAR */

#clear-cart{

    background:white;

    color:#555;

    border:1px solid #ddd;

    font-size:14px;

}



#clear-cart:hover{

    background:#f5f5f5;

    color:#222;

}





/* BOTON ELIMINAR PRODUCTO */

.remove{

    background:none;

    border:none;

    color:#d33;

    font-size:13px;

    cursor:pointer;

    padding:5px 0;

}



.remove:hover{

    text-decoration:underline;

}
/* ==========================
   CENTRAR BOTON AGREGAR CARRITO
========================== */

.product-card .add-cart{

    display:block;

    margin:15px auto 0;

    margin-top:auto;

}

/* ==========================
   GALERIA DE FOTOS - TARJETAS (index, categoria, subcategoria, resultados)
========================== */

.gallery-nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:30px;

    height:30px;

    border-radius:50%;

    border:none;

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

    color:#333;

    font-size:18px;

    line-height:1;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:0.2s;

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

    z-index:2;

}

.product-image:hover .gallery-nav{

    opacity:1;

}

.gallery-prev{

    left:8px;

}

.gallery-next{

    right:8px;

}

.gallery-nav:hover{

    background:white;

}

.gallery-dots{

    position:absolute;

    bottom:8px;

    left:0;

    right:0;

    display:flex;

    justify-content:center;

    gap:6px;

    z-index:2;

}

.gallery-dot{

    width:7px;

    height:7px;

    border-radius:50%;

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

    border:1px solid rgba(0,0,0,0.15);

    cursor:pointer;

    transition:0.2s;

}

.gallery-dot.active{

    background:#2563eb;

    border-color:#2563eb;

}


/* ==========================
   GALERIA DE FOTOS - DETALLE DE PRODUCTO (estilo Mercado Libre)
========================== */

.product-gallery{

    display:flex;

    flex-direction:row;

    gap:15px;

}

.product-thumbnails{

    display:flex;

    flex-direction:column;

    gap:10px;

    flex-shrink:0;

}

.product-photo{
    flex:1;
    min-width:0;
}

.product-thumbnails .thumb{

    width:70px;

    height:70px;

    object-fit:contain;

    background:white;

    border:1px solid #eee;

    border-radius:10px;

    border:2px solid transparent;

    cursor:pointer;

    opacity:0.7;

    transition:0.2s;

}

.product-thumbnails .thumb:hover{

    opacity:1;

}

.product-thumbnails .thumb.active{

    border-color:#2563eb;

    opacity:1;

}

@media(max-width:600px){

.gallery-nav{

    opacity:1;

}

}


/* ==========================
   PAGINAS DE CONTENIDO (medios de pago, quienes somos, contacto)
========================== */

.pagina-contenido{

    max-width:800px;

    margin:20px auto 60px;

    padding:0 30px;

}

.pagina-contenido h2{

    font-size:32px;

    margin:20px 0 25px;

    text-align:center;

    color:#222;

}

.pagina-contenido #contenido-texto{

    background:white;

    border-radius:16px;

    padding:35px 40px;

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

    line-height:1.7;

    color:#444;

}

.pagina-contenido #contenido-texto h3{

    color:#D41622;

    margin:20px 0 10px;

}

.pagina-contenido #contenido-texto p{

    margin-bottom:15px;

}

.pagina-contenido #contenido-texto ul{

    margin:0 0 15px 20px;

}


/* ==========================
   PAGINA DE PAGO
========================== */

.payment-page{

    max-width:700px;

    margin:10px auto 60px;

    padding:0 30px;

}

.payment-page h1{

    text-align:center;

    font-size:30px;

    margin:20px 0 25px;

    color:#222;

}

.payment-box{

    background:white;

    border-radius:16px;

    padding:35px 40px;

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

    text-align:center;
}

.payment-box h2{

    font-size:17px;

    color:#666;

    font-weight:600;

    margin:28px 0 8px;

}

.payment-box h2:first-child{

    margin-top:0;

}

#payment-total{

    font-size:44px;

    color:#D41622;

    margin:0 0 10px;

}

.payment-box p{

    font-size:15px;

    margin:6px 0;

    color:#444;
}

.payment-box p strong{

    color:#111;

    font-weight:700;

}

.payment-box .help-text{

    margin:22px 0 18px;

    line-height:1.5;

}

.payment-box .whatsapp-btn{

    max-width:360px;

    margin:0 auto;

}


/* ==========================
   AYUDA DE FORMATO (CUIT/CUIL)
========================== */

.ayuda-formato{

    display:block;

    color:#888;

    font-size:12.5px;

    margin-top:4px;

}

.ayuda-formato.error{

    color:#dc2626;

    font-weight:600;

}

.input-error{

    border:2px solid #dc2626 !important;

}


/* ==========================
   ESTRELLAS (reseñas de productos)
========================== */

.star-rating{
    position:relative;
    display:inline-block;
    width:122px;
    height:22px;
    vertical-align:middle;
    user-select:none;
}

.star-rating .star-rating-track,
.star-rating .star-rating-fill{
    pointer-events:none;
}

.star-rating-row{
    display:flex;
    gap:3px;
}

.star-rating-row svg{
    width:22px;
    height:22px;
    display:block;
    flex-shrink:0;
}

.star-rating .star-rating-track{
    color:#e2e2e2;
}

.star-rating .star-rating-fill{
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    width:0%;
    color:#ffb400;
}

.star-rating.star-rating-select{
    cursor:pointer;
}

.star-rating-clicks{
    position:absolute;
    top:0;
    left:0;
    display:flex;
    width:100%;
    height:100%;
}

.star-rating-clicks button{
    flex:1;
    background:transparent;
    border:none;
    padding:0;
    margin:0;
    cursor:pointer;
}

/* Más específica a propósito: sin esto, ".form-resena button" (el botón
   rojo de "Enviar reseña") le gana por orden de declaración a la regla
   de arriba, porque tienen la misma especificidad — y termina pintando
   de rojo sólido los 10 botones invisibles del selector de estrellas. */
.form-resena .star-rating-clicks button{
    background:transparent;
    border:none;
    padding:0;
    margin:0;
    border-radius:0;
}

.star-rating-valor-texto{
    margin-left:8px;
    font-size:14px;
    color:#555;
    vertical-align:middle;
}


/* ==========================
   SECCIÓN DE RESEÑAS
========================== */

.product-reviews{
    max-width:1100px;
    margin:40px auto;
    padding:0 20px;
}

.product-reviews h2{
    font-size:24px;
    margin-bottom:10px;
}

.reviews-resumen{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:25px;
}

.reviews-resumen .promedio-numero{
    font-size:32px;
    font-weight:800;
    color:#111;
}

.reviews-resumen .promedio-total{
    color:#777;
    font-size:14px;
}

.review-card{
    border:1px solid #eee;
    border-radius:12px;
    padding:16px 18px;
    margin-bottom:14px;
    background:#fafafa;
}

.review-card .review-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px;
    flex-wrap:wrap;
    gap:6px;
}

.review-card .review-nombre{
    font-weight:700;
}

.review-card .review-fecha{
    font-size:12px;
    color:#999;
}

.review-card .review-comentario{
    color:#333;
    font-size:15px;
    line-height:1.4;
}

.sin-resenas{
    color:#777;
    font-style:italic;
    margin-bottom:20px;
}

.form-resena{
    background:#fff;
    border:1px solid #eee;
    border-radius:14px;
    padding:20px 22px;
    max-width:480px;
}

.form-resena label{
    display:block;
    font-weight:600;
    margin:14px 0 6px;
}

.form-resena input,
.form-resena textarea{
    width:100%;
    padding:12px;
    border-radius:8px;
    border:1px solid #d1d5db;
    font-size:15px;
    box-sizing:border-box;
    font-family:inherit;
}

.form-resena textarea{
    min-height:80px;
    resize:vertical;
}

.form-resena button{
    margin-top:18px;
    padding:13px 20px;
    border:none;
    border-radius:10px;
    background:#D41622;
    color:white;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
}

.form-resena button:hover{
    opacity:0.9;
}

.resena-mensaje{
    margin-top:12px;
    font-size:14px;
    font-weight:600;
}

.resena-mensaje.ok{
    color:#15803d;
}

.resena-mensaje.error{
    color:#dc2626;
}


/* ==========================
   BREADCRUMBS (SEO)
========================== */

.breadcrumbs{
    max-width:1100px;
    margin:14px auto 0;
    padding:0 20px;
    font-size:13px;
    color:#777;
}

.breadcrumbs a{
    color:#777;
    text-decoration:none;
}

.breadcrumbs a:hover{
    color:var(--color-acento, #D41622);
    text-decoration:underline;
}

.breadcrumbs .separador{
    margin:0 6px;
    color:#bbb;
}

.breadcrumbs .actual{
    color:#333;
    font-weight:600;
}


/* ==========================
   CUPÓN DE DESCUENTO (checkout)
========================== */

.coupon-box{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid #eee;
}

.coupon-box label{
    display:block;
    font-weight:600;
    margin-bottom:8px;
}

.coupon-input-row{
    display:flex;
    gap:10px;
}

.coupon-input-row input{
    flex:1;
    padding:12px;
    border-radius:8px;
    border:1px solid #d1d5db;
    font-size:15px;
    text-transform:uppercase;
}

.coupon-input-row button{
    padding:12px 18px;
    border:none;
    border-radius:8px;
    background:#111827;
    color:white;
    font-weight:700;
    cursor:pointer;
}

.coupon-input-row button:hover{
    opacity:0.9;
}

.coupon-message{
    margin-top:10px;
    font-size:14px;
    font-weight:600;
}

.coupon-message.ok{
    color:#15803d;
}

.coupon-message.error{
    color:#dc2626;
}

.summary-descuento{
    color:#15803d;
    font-weight:700;
}


/* ==========================
   DESCRIPCIÓN LARGA: respeta los saltos de línea que escribe el admin
========================== */

.descripcion-larga{
    white-space:pre-line;
}


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

.precio-mayorista-aviso{
    background:#dcfce7;
    color:#15803d;
    font-weight:700;
    font-size:13.5px;
    padding:6px 10px;
    border-radius:8px;
    display:inline-block;
    margin:4px 0;
}

.precio-mayorista-ayuda{
    background:#fff7ed;
    color:#9a5b13;
    font-weight:600;
    font-size:13px;
    padding:6px 10px;
    border-radius:8px;
    display:inline-block;
    margin:4px 0;
}

.quantity-number-input{
    width:50px;
    text-align:center;
    border:1px solid #d1d5db;
    border-radius:8px;
    padding:6px 4px;
    font-size:15px;
    font-family:inherit;
    -moz-appearance:textfield;
}

.quantity-number-input::-webkit-outer-spin-button,
.quantity-number-input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}


/* ==========================
   PRECIO MAYORISTA - PÁGINA DE PRODUCTO (bien visible)
========================== */

.precio-mayorista-producto{
    background:linear-gradient(135deg, #fff7ed, #fef3c7);
    border:2px solid #f59e0b;
    border-radius:14px;
    padding:16px 20px;
    margin:10px 0 20px;
    display:flex;
    align-items:center;
    gap:12px;
    transition:background .2s, border-color .2s;
}

.precio-mayorista-producto.mayorista-activo{
    background:linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-color:#22c55e;
}

.precio-mayorista-producto.mayorista-activo .texto-mayorista strong,
.precio-mayorista-producto.mayorista-activo .texto-mayorista span{
    color:#15803d;
}

.precio-mayorista-producto .icono-mayorista{
    font-size:28px;
    line-height:1;
}

.precio-mayorista-producto .texto-mayorista strong{
    display:block;
    font-size:22px;
    color:#92400e;
}

.precio-mayorista-producto .texto-mayorista span{
    font-size:14px;
    color:#78350f;
}

.selector-cantidad-producto{
    display:flex;
    align-items:center;
    gap:16px;
    margin:20px 0;
}

.selector-cantidad-producto label{
    font-weight:600;
    font-size:15px;
    color:#333;
}

.selector-cantidad-producto .quantity-control{
    display:flex;
    align-items:stretch;
    border:1.5px solid #e2e2e2;
    border-radius:12px;
    overflow:hidden;
    background:#fafafa;
}

.selector-cantidad-producto button{
    width:42px;
    border:none;
    background:transparent;
    font-size:20px;
    font-weight:600;
    color:#555;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s, color .15s;
}

.selector-cantidad-producto button:hover{
    background:#D41622;
    color:white;
}

.selector-cantidad-producto input{
    width:54px;
    text-align:center;
    border:none;
    border-left:1.5px solid #e2e2e2;
    border-right:1.5px solid #e2e2e2;
    background:white;
    font-size:16px;
    font-weight:700;
    color:#111;
    font-family:inherit;
    -moz-appearance:textfield;
    padding:10px 4px;
}

.selector-cantidad-producto input:focus{
    outline:none;
    background:#fff5f5;
}

.selector-cantidad-producto input::-webkit-outer-spin-button,
.selector-cantidad-producto input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}


/* ==========================
   TARJETA: aviso de precio mayorista (ícono "!" con tooltip)
========================== */

.product-image{
    position:relative;
}

.badge-mayorista-tarjeta{
    position:absolute;
    top:16px;
    left:16px;
    height:26px;
    max-width:26px;
    box-sizing:border-box;
    border-radius:13px;
    background:var(--color-mayorista, #D41622);
    color:white;
    border:2px solid white;
    display:flex;
    align-items:center;
    overflow:hidden;
    white-space:nowrap;
    box-shadow:0 3px 8px rgba(0,0,0,0.3);
    z-index:2;
    transition:max-width .35s ease;
}

.badge-mayorista-signo{
    width:22px;
    height:22px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:13px;
}

.badge-mayorista-texto{
    flex-shrink:0;
    padding:0 14px 0 4px;
    font-size:12.5px;
    font-weight:700;
}

.product-card:hover .badge-mayorista-tarjeta{
    max-width:280px;
}


/* ==========================
   TARJETA: resumen de estrellas compacto
========================== */

.resumen-estrellas-tarjeta{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:13.5px;
    color:#555;
    margin:2px 0 4px;
}

.resumen-estrellas-tarjeta svg{
    width:16px;
    height:16px;
    color:#ffb400;
    flex-shrink:0;
}

.resumen-estrellas-tarjeta strong{
    color:#111;
    font-weight:700;
}

.resumen-estrellas-total{
    color:#999;
}


/* ==========================
   TARJETA: precio/botón siempre al mismo nivel abajo
========================== */

.product-card .price,
.product-card .personalized-label{
    margin-top:auto;
}


/* ==========================
   MEDIOS DE PAGO: caja de datos bancarios
========================== */

.caja-datos-bancarios{
    background:#fafafa;
    border:1px solid #eee;
    border-radius:14px;
    padding:22px 26px;
    margin:15px 0 25px;
}

.pagina-contenido #contenido-texto .caja-datos-bancarios h4{
    margin:0 0 15px;
    font-size:15px;
    color:#222;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.dato-bancario{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid #eee;
}

.dato-bancario:last-child{
    border-bottom:none;
}

.dato-bancario-etiqueta{
    width:70px;
    flex-shrink:0;
    font-size:13px;
    color:#888;
    font-weight:600;
    text-transform:uppercase;
}

.dato-bancario-valor{
    font-weight:700;
    color:#222;
    flex:1;
}

.btn-copiar{
    background:#eef1f6;
    color:#374151;
    border:none;
    padding:7px 14px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s, color .15s;
}

.btn-copiar:hover{
    background:#dbe3ee;
}

.btn-copiar.copiado{
    background:#dcfce7;
    color:#15803d;
}


/* ==========================
   CONTACTO: canales
========================== */

.canales-contacto{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:15px 0 25px;
}

.canal-contacto{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fafafa;
    border:1px solid #eee;
    border-radius:12px;
    padding:16px 20px;
    text-decoration:none;
    color:#222;
    transition:background .15s, border-color .15s, transform .15s;
}

.canal-contacto:hover{
    background:#fff5f5;
    border-color:#D41622;
    transform:translateY(-2px);
}

.canal-contacto-icono{
    font-size:24px;
    line-height:1;
}

.canal-contacto strong{
    display:block;
    font-size:15px;
}

.canal-contacto-valor{
    font-size:14px;
    color:#666;
}

/* ==========================
   FIX: recuadro azul al tocar en mobile (tap highlight)
   ========================== */
a, button, .product-card, .category, .subcategory,
.toggle-category, .gallery-nav, .gallery-dot,
input, textarea, select, .canal-contacto{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

a:focus, button:focus, .product-card:focus{
    outline: none;
}

/* ==========================
   ESTADO CARRITO VACIO (reemplaza el texto plano)
   ========================== */
.cart-empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:50px 20px;
    color:#666;
}

.cart-empty-icon{
    font-size:48px;
    margin-bottom:12px;
    opacity:0.6;
}

.cart-empty-state p{
    font-size:16px;
    font-weight:600;
    color:#333;
    margin:0 0 6px 0;
}

.cart-empty-state span{
    font-size:13px;
    color:#888;
}