[file name]: common.min.css
[file content begin]
:root{
    --primary-color:#4a6fa5;
    --secondary-color:#6b8cbc;
    --accent-color:#ff6b6b;
    --dark-color:#333;
    --light-color:#f8f9fa;
    --gray-color:#6c757d;
    --border-color:#e0e0e0;
    --shadow:0 4px 6px rgba(0,0,0,.1);
    --shadow-lg:0 10px 25px rgba(0,0,0,.15);
    --transition:all .3s ease
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box
}
body{
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    line-height:1.6;
    color:var(--dark-color);
    background-color:#fff
}
.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 20px
}

/* HEADER */
header{
    background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),url('https://images.unsplash.com/photo-1523381210434-271e8be1f52b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1800&q=80');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:#fff;
    box-shadow:var(--shadow);
    position:sticky;
    top:0;
    z-index:1000
}
.header-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0
}
.logo{
    font-size:1.8rem;
    font-weight:700;
    color:#fff;
    text-decoration:none
}
.logo span{
    color:var(--accent-color)
}
nav ul{
    display:flex;
    list-style:none
}
nav ul li{
    margin-left:25px
}
nav ul li a{
    text-decoration:none;
    color:#fff;
    font-weight:500;
    transition:var(--transition);
    position:relative
}
nav ul li a:hover{
    color:var(--accent-color)
}
nav ul li a::after{
    content:'';
    position:absolute;
    bottom:-5px;
    left:0;
    width:0;
    height:2px;
    background-color:var(--accent-color);
    transition:var(--transition)
}
nav ul li a:hover::after{
    width:100%
}

/* BOTONES Y CONTROLES */
.btn{
    display:inline-block;
    padding:12px 24px;
    border:none;
    border-radius:4px;
    font-weight:600;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    transition:var(--transition)
}
.btn-primary{
    background-color:var(--primary-color);
    color:#fff
}
.btn-primary:hover{
    background-color:var(--secondary-color);
    transform:translateY(-2px)
}
.btn-secondary{
    background-color:transparent;
    color:var(--primary-color);
    border:2px solid var(--primary-color)
}
.btn-secondary:hover{
    background-color:var(--primary-color);
    color:#fff;
    transform:translateY(-2px)
}
.btn-small{
    padding:8px 16px;
    font-size:.9rem
}

/* PRODUCTOS - UNIFICADO */
.product-card{
    border-radius:8px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:var(--transition);
    background-color:#fff;
    cursor:pointer;
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column
}
.product-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(0,0,0,.15)
}
.product-image{
    height:220px;
    overflow:hidden;
    flex-shrink:0
}
.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:var(--transition)
}
.product-card:hover .product-image img{
    transform:scale(1.05)
}
.product-info{
    padding:15px;
    flex-grow:1;
    display:flex;
    flex-direction:column
}
.product-title{
    font-size:1.2rem;
    font-weight:600;
    margin-bottom:10px
}
.product-description{
    color:var(--gray-color);
    margin-bottom:15px;
    font-size:.9rem
}
.product-price{
    font-size:1.3rem;
    font-weight:700;
    color:var(--primary-color);
    margin-bottom:15px
}

/* BOTÓN AÑADIR AL CARRITO UNIFICADO */
.add-to-cart{
    width:100%;
    padding:12px;
    border:none;
    border-radius:4px;
    cursor:pointer;
    font-weight:600;
    transition:var(--transition);
    margin-top:10px;
    position:relative;
    z-index:2;
    background-color:var(--primary-color);
    color:#fff;
    text-align:center;
    text-decoration:none;
    display:block
}
.add-to-cart:hover{
    background-color:var(--secondary-color);
    transform:translateY(-2px);
    color:#fff
}
.add-to-cart-btn{
    background-color:var(--primary-color);
    color:#fff;
    padding:10px 15px;
    border-radius:4px;
    font-weight:bold;
    text-align:center;
    display:block;
    width:100%;
    margin-top:10px;
    border:none;
    cursor:pointer
}
.add-to-cart-btn:hover{
    background-color:var(--secondary-color);
    transform:translateY(-2px)
}

/* MODAL DE PRODUCTO */
.product-modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.9);
    z-index:1003;
    overflow-y:auto;
    padding:20px 0
}
.product-modal.active{
    display:block
}
.product-modal-content{
    background-color:#fff;
    margin:20px auto;
    width:95%;
    max-width:1200px;
    border-radius:15px;
    overflow:hidden;
    position:relative;
    animation:modalAppear .3s ease;
    max-height:90vh;
    overflow-y:auto
}
@keyframes modalAppear{
    0%{opacity:0;transform:scale(.9)}
    100%{opacity:1;transform:scale(1)}
}
.close-modal{
    position:absolute;
    top:20px;
    right:20px;
    background:rgba(0,0,0,.7);
    color:#fff;
    border:none;
    border-radius:50%;
    width:40px;
    height:40px;
    font-size:1.2rem;
    cursor:pointer;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition)
}
.close-modal:hover{
    background:rgba(0,0,0,.9);
    transform:scale(1.1)
}
.product-details-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    padding:40px
}
@media(max-width:768px){
    .product-details-container{
        grid-template-columns:1fr;
        gap:20px
    }
}

/* SISTEMA DE ZOOM - NUEVO */
.zoom-modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.95);
    z-index:1004;
    align-items:center;
    justify-content:center
}
.zoom-modal.active{
    display:flex
}
.zoom-container{
    position:relative;
    max-width:90%;
    max-height:90%
}
.zoom-image{
    max-width:100%;
    max-height:90vh;
    object-fit:contain;
    cursor:move;
    transition:transform .2s ease
}
.close-zoom{
    position:absolute;
    top:20px;
    right:20px;
    background:rgba(0,0,0,.7);
    color:#fff;
    border:none;
    border-radius:50%;
    width:50px;
    height:50px;
    font-size:1.5rem;
    cursor:pointer;
    z-index:1005;
    display:flex;
    align-items:center;
    justify-content:center
}
.zoom-controls{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:15px;
    background:rgba(0,0,0,.7);
    padding:10px 20px;
    border-radius:25px;
    backdrop-filter:blur(10px)
}
.zoom-btn{
    background:rgba(255,255,255,.2);
    color:#fff;
    border:none;
    border-radius:50%;
    width:40px;
    height:40px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition)
}
.zoom-btn:hover{
    background:rgba(255,255,255,.3)
}
.zoom-value{
    color:#fff;
    min-width:50px;
    text-align:center;
    font-weight:600
}
.image-counter{
    position:absolute;
    top:20px;
    left:20px;
    background:rgba(0,0,0,.7);
    color:#fff;
    padding:8px 15px;
    border-radius:20px;
    font-size:.9rem
}

/* GALERÍA EN MODAL */
.product-gallery{
    display:flex;
    flex-direction:column;
    gap:20px
}
.main-image{
    border-radius:10px;
    overflow:hidden;
    background:#f8f9fa;
    display:flex;
    align-items:center;
    justify-content:center;
    height:400px;
    cursor:zoom-in;
    position:relative
}
.main-image img{
    max-width:100%;
    max-height:100%;
    object-fit:contain
}
.thumbnail-gallery{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap
}
.thumbnail{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:8px;
    cursor:pointer;
    border:2px solid transparent;
    transition:var(--transition)
}
.thumbnail.active,
.thumbnail:hover{
    border-color:var(--primary-color);
    transform:scale(1.05)
}

/* SELECTOR DE TALLAS */
.size-selector{
    margin:20px 0
}
.size-options{
    display:flex;
    gap:8px;
    flex-wrap:wrap
}
.size-option{
    width:45px;
    height:45px;
    border:2px solid var(--border-color);
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-weight:600;
    transition:var(--transition)
}
.size-option:hover{
    border-color:var(--primary-color)
}
.size-option.active{
    border-color:var(--accent-color);
    background-color:var(--accent-color);
    color:#fff
}

/* HERO */
.hero{
    background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
    color:#fff;
    padding:100px 0;
    text-align:center;
    position:relative
}
.hero-content h1{
    font-size:3rem;
    margin-bottom:20px
}
.hero-content p{
    font-size:1.5rem;
    margin-bottom:10px
}
.subtitle{
    font-size:1.2rem!important;
    opacity:.9;
    margin-bottom:30px!important
}
.hero-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-bottom:50px
}
.hero-features{
    display:flex;
    justify-content:center;
    gap:40px;
    margin-top:30px
}
.feature{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px
}
.feature i{
    font-size:2rem;
    margin-bottom:10px
}

/* CATEGORÍAS */
.category-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:40px
}
@media(max-width:992px){
    .category-grid{
        grid-template-columns:repeat(2,1fr)
    }
}
@media(max-width:576px){
    .category-grid{
        grid-template-columns:1fr
    }
}
.category-card{
    text-decoration:none;
    color:inherit;
    border-radius:12px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:var(--transition);
    position:relative;
    background:#fff;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column
}
.category-image{
    height:180px;
    overflow:hidden;
    position:relative
}
.category-image::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.3) 100%);
    z-index:1
}
.category-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:var(--transition)
}
.category-card:hover .category-image img{
    transform:scale(1.1)
}
.category-card h3{
    padding:15px;
    text-align:center;
    background-color:#fff;
    margin:0;
    font-size:1.1rem;
    font-weight:600;
    color:var(--dark-color);
    flex-grow:1;
    display:flex;
    align-items:center;
    justify-content:center
}
.category-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg)
}

/* CARRITO */
.cart-container{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    margin-top:40px
}
@media(max-width:768px){
    .cart-container{
        grid-template-columns:1fr
    }
}
.cart-items{
    background-color:#fff;
    border-radius:8px;
    box-shadow:var(--shadow);
    padding:20px
}
.cart-item{
    display:grid;
    grid-template-columns:100px 1fr auto auto;
    gap:15px;
    align-items:center;
    padding:15px 0;
    border-bottom:1px solid var(--border-color)
}
@media(max-width:600px){
    .cart-item{
        grid-template-columns:80px 1fr;
        gap:10px
    }
    .cart-item-quantity,
    .cart-item-remove{
        grid-column:1/span 2;
        justify-self:start;
        margin-top:10px
    }
}
.cart-item-image{
    width:100px;
    height:100px;
    border-radius:4px;
    overflow:hidden;
    cursor:zoom-in
}
.cart-item-image img{
    width:100%;
    height:100%;
    object-fit:cover
}
.cart-item-details h3{
    margin-bottom:5px
}
.cart-item-price{
    font-weight:600;
    color:var(--primary-color)
}
.cart-item-quantity{
    display:flex;
    align-items:center;
    gap:10px
}
.quantity-btn{
    width:30px;
    height:30px;
    background-color:var(--light-color);
    border:none;
    border-radius:4px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center
}
.remove-item{
    background:0 0;
    border:none;
    color:var(--accent-color);
    cursor:pointer;
    font-size:1.2rem
}
.cart-summary{
    background-color:#fff;
    border-radius:8px;
    box-shadow:var(--shadow);
    padding:20px;
    height:fit-content
}
.summary-item{
    display:flex;
    justify-content:space-between;
    margin-bottom:15px
}
.summary-item.total{
    font-weight:700;
    font-size:1.2rem;
    border-top:1px solid var(--border-color);
    padding-top:15px;
    margin-top:15px
}
.empty-cart{
    text-align:center;
    padding:60px 20px
}
.empty-cart i{
    font-size:4rem;
    color:var(--border-color);
    margin-bottom:20px
}

/* PAGINACIÓN */
.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:40px;
    gap:10px;
    flex-wrap:wrap
}
.pagination-btn{
    padding:10px 15px;
    border:1px solid var(--border-color);
    background-color:#fff;
    border-radius:4px;
    cursor:pointer;
    transition:var(--transition);
    font-weight:500
}
.pagination-btn:hover:not(.disabled){
    background-color:var(--primary-color);
    color:#fff;
    border-color:var(--primary-color)
}
.pagination-btn.active{
    background-color:var(--primary-color);
    color:#fff;
    border-color:var(--primary-color)
}
.pagination-btn.disabled{
    opacity:.5;
    cursor:not-allowed
}

/* FILTROS */
.category-filters{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-bottom:40px;
    flex-wrap:wrap
}
.filter-btn{
    padding:10px 20px;
    background-color:#fff;
    border:1px solid var(--border-color);
    border-radius:30px;
    cursor:pointer;
    transition:var(--transition);
    font-weight:500;
    text-decoration:none;
    color:var(--dark-color)
}
.filter-btn.active,
.filter-btn:hover{
    background-color:var(--primary-color);
    color:#fff;
    border-color:var(--primary-color)
}

/* CONTACTO */
.contact-container{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:50px;
    max-width:1000px;
    margin:0 auto
}
@media(max-width:768px){
    .contact-container{
        grid-template-columns:1fr
    }
}
.form-group{
    margin-bottom:20px
}
.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600
}
.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:12px;
    border:1px solid var(--border-color);
    border-radius:4px;
    font-size:1rem;
    font-family:inherit
}
.contact-info{
    background-color:var(--light-color);
    padding:30px;
    border-radius:8px;
    height:fit-content
}
.contact-info h3{
    margin-bottom:20px;
    color:var(--primary-color)
}
.contact-item{
    display:flex;
    align-items:flex-start;
    margin-bottom:20px
}
.contact-item i{
    color:var(--primary-color);
    margin-right:15px;
    margin-top:5px
}

/* FOOTER */
footer{
    background-color:var(--dark-color);
    color:#fff;
    padding:60px 0 20px
}
.footer-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:40px;
    margin-bottom:40px
}
.footer-logo{
    font-size:1.8rem;
    font-weight:700;
    margin-bottom:20px
}
.footer-logo span{
    color:var(--accent-color)
}
.footer-links h3,
.footer-social h3{
    margin-bottom:20px;
    font-size:1.2rem
}
.footer-links ul{
    list-style:none
}
.footer-links ul li{
    margin-bottom:10px
}
.footer-links ul li a{
    color:#ccc;
    text-decoration:none;
    transition:var(--transition)
}
.footer-links ul li a:hover{
    color:#fff
}
.social-icons{
    display:flex;
    gap:15px
}
.social-icons a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    background-color:rgba(255,255,255,.1);
    border-radius:50%;
    color:#fff;
    text-decoration:none;
    transition:var(--transition)
}
.social-icons a:hover{
    background-color:var(--primary-color)
}
.footer-bottom{
    text-align:center;
    padding-top:20px;
    border-top:1px solid hsla(0,0%,100%,.1);
    color:#ccc;
    font-size:.9rem
}
.footer-bottom-links{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:10px
}
.footer-bottom-links a{
    color:#ccc;
    text-decoration:none;
    transition:var(--transition)
}
.footer-bottom-links a:hover{
    color:#fff
}

/* ICONOS - SIMPLIFICADO */
.fab,.fas{
    display:inline-block;
    width:1em;
    text-align:center
}

/* RESPONSIVE */
@media(max-width:768px){
    .header-container{
        flex-direction:column;
        gap:15px
    }
    nav ul{
        flex-wrap:wrap;
        justify-content:center
    }
    nav ul li{
        margin:0 10px 5px
    }
    .hero-content h1{
        font-size:2rem
    }
    .hero-content p{
        font-size:1.2rem
    }
    .hero-features{
        flex-direction:column;
        gap:20px
    }
    .products-grid{
        grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
    }
    .zoom-controls{
        flex-direction:column;
        gap:10px;
        padding:15px;
        bottom:20px
    }
}
@media(max-width:480px){
    .products-grid{
        grid-template-columns:1fr
    }
    .hero-buttons{
        flex-direction:column;
        align-items:center
    }
    .category-filters{
        flex-direction:column;
        align-items:center
    }
    .pagination{
        flex-direction:column;
        gap:5px
    }
    .zoom-controls{
        bottom:15px;
        padding:10px
    }
}
[file content end]