/* ==========================================================================
   AJUSTES RESPONSIVOS ADICIONALES: SUTILEHOME
   ========================================================================== */

@media (max-width: 767px) {
    /* Ajustes generales de espaciado */
    :root {
        --spacing-md: 1.5rem;
        --spacing-lg: 3rem;
        --spacing-xl: 5rem;
    }

    /* Reducción de tamaños de fuente en encabezados */
    h1 {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 1.6rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    /* Botones más grandes para fácil pulsación táctil */
    .btn {
        padding: 1rem 1.8rem;
        width: 100%;
    }

    /* Ajustes de cuadrículas */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Cuadrícula de packs / productos: 2 columnas en móvil es más Shopify */
    .product-grid-mobile-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }

    .product-grid-mobile-2 .product-card-info {
        padding: 1rem !important;
    }

    .product-grid-mobile-2 .product-card-title {
        font-size: 0.85rem !important;
    }

    .product-grid-mobile-2 .product-card-price {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Antes/Después Slider en móviles */
    .before-after-container {
        aspect-ratio: 1/1 !important; /* Cuadrado en móvil */
    }

    .ba-label {
        font-size: 0.6rem !important;
        padding: 0.2rem 0.4rem !important;
    }

    .ba-handle-button {
        width: 38px;
        height: 38px;
    }

    .ba-handle-button svg {
        width: 14px;
        height: 14px;
    }

    /* Header en móvil */
    header {
        height: 70px;
    }

    /* Ajustes de Checkout en móvil */
    .checkout-layout {
        flex-direction: column-reverse !important;
        gap: 2rem !important;
    }

    .checkout-summary-column {
        position: static !important;
        padding: 1.5rem !important;
    }

    /* Opciones responsive para el Hero Inmersivo */
    .hero-immersive {
        height: auto !important;
        min-height: 100vh !important;
        padding: calc(var(--header-height) + 2rem) 0 4rem !important;
        display: flex !important;
        align-items: center !important;
    }

    .hero-immersive-title {
        font-size: 2.25rem !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-conversion-card {
        padding: 1.5rem !important;
        max-width: 100% !important;
        margin-top: 1.5rem !important;
    }

    .scroll-down-indicator {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Ajustes para tabletas */
    .grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}