/* Variables globales */
:root {
    --primary-color: #8b0000;
    --secondary-color: #4a4a4a;
    --accent-color: #d4af37;
    --transition-speed: 0.3s;
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Estilos base mejorados para móvil */
@media screen and (max-width: 768px) {
    /* Contenedor de vinos mejorado */
    .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 15px;
        padding: 15px;
        animation: fadeIn 0.8s ease-out;
    }

    .wine-category {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: transform var(--transition-speed);
        width: 100%;
        margin: 10px 0;
    }

    .wine-category img {
        width: 100%;
        height: auto;
        max-width: 200px;
        transition: transform var(--transition-speed);
    }

    /* Carrusel mejorado para dos productos */
    .carousel-container {
        position: relative;
        overflow: hidden;
        padding: 20px 0;
        margin: 0 15px;
    }

    .productos-container {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc(50% - 8px);
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding: 10px 0;
    }

    .producto-card {
        scroll-snap-align: start;
        width: 100%;
        min-width: 0;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }

    .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: var(--primary-color);
        color: white;
        border: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2;
    }

    .left-arrow {
        left: 5px;
    }

    .right-arrow {
        right: 5px;
    }

    /* Banners responsivos */
    .banners-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }

    .banner2 {
        width: 100%;
        margin: 15px 0;
        overflow: hidden;
        position: relative;
    }

    .banner2 img {
        width: 100%;
        height: auto;
        max-height: 90vh;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    /* Texto promocional */
    .promo-banner {
        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        color: white;
        padding: 20px;
        border-radius: 12px;
        margin: 15px;
    }
}

/* Ajustes para pantallas muy pequeñas */
@media screen and (max-width: 480px) {
    .productos-container {
        grid-auto-columns: calc(50% - 8px);
    }

    .banner2 img {
        max-height: 80vh;
    }
}

/* Ajustes para orientación horizontal */
@media screen and (max-width: 896px) and (orientation: landscape) {
    .container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .productos-container {
        grid-auto-columns: 45%;
    }

    .banner2 img {
        max-height: 70vh;
    }
}