/* style-front.css - Estilos definitivos para VentaSocio Cataloger */

/* --- Configuración Base y Contenedor Principal --- */
.vsc-app-container {
    width: 100%;
    max-width: 500px; /* Móvil por defecto */
    margin: 0 auto;
    background: #fff;
    font-family: sans-serif;
    position: relative;
    box-shadow: 0 0 25px rgba(0,0,0,0.08);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.vsc-contenido-principal {
    flex: 1;
}

.vsc-banner-estrategico {
    height: 160px; /* Móvil */
}

.vsc-logo-marca {
    width: 100px; 
    height: 100px; 
    bottom: -40px;
}

/* Tablets y Notebooks */
@media (min-width: 768px) {
    .vsc-app-container {
        max-width: 850px;
    }
    .vsc-banner-estrategico {
        height: 240px;
    }
    .vsc-logo-marca {
        width: 120px; 
        height: 120px; 
        bottom: -50px;
    }
}

/* Escritorio / PC (Pantallas Grandes) */
@media (min-width: 1024px) {
    .vsc-app-container {
        max-width: 1200px; /* Mucho más ancho en PC */
        border-radius: 0 0 12px 12px;
    }
    .vsc-banner-estrategico {
        height: 320px; /* Banner grande y llamativo */
        border-radius: 0;
    }
    .vsc-logo-marca {
        width: 140px; 
        height: 140px; 
        bottom: -60px; 
        border-width: 5px;
    }
}

/* --- Efectos en las tarjetas de productos --- */
.vsc-item-producto {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vsc-item-producto:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
}

/* --- Ocultar barra de desplazamiento en píldoras de categorías pero mantener scroll --- */
.vsc-app-container div::-webkit-scrollbar {
    display: none;
}

/* --- Animaciones para el Carrito Lateral y Modal --- */
#vsc-carrito-lateral {
    transition: right 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

#vsc-modal-content {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}