/* ====================================
   RESPONSIVE DESIGN
   Mobile First Approach
   ==================================== */

/* ====================================
   TABLET - 768px y menor
   ==================================== */
@media (max-width: 768px) {
    :root {
        --top-banner-height: 14px;
        --top-banner-offset: 8px;
        --navbar-height-offset: 82px;
    }
    
    /* Contenedor */
    .container {
        padding: 0 var(--spacing-md);
    }

    /* Tipografía */
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    /* Navbar */
    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100vh;
        background-color: white;
        flex-direction: column;
        padding: var(--spacing-3xl) var(--spacing-lg);
        box-shadow: var(--shadow-lg);
        transition: left var(--transition-normal);
        z-index: 999;
    }

    .top-banner-pill {
        width: min(280px, calc(100vw - 2.25rem));
    }

    .top-banner-track span {
        font-size: 0.4rem;
        letter-spacing: 0.02em;
        padding-left: 0.55rem;
        padding-right: 1.25rem;
    }

    .top-banner-track span::after {
        margin-left: 1.25rem;
    }

    .nav-menu.active {
        left: 0;
    }

    .menu-toggle {
        display: flex;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    /* Hero */
    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }

    .hero-description {
        margin: 0 auto var(--spacing-xl);
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-img-placeholder {
        height: 400px;
    }

    .hero-img {
        height: 400px;
    }

    /* Configurador */
    .configurator-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .product-display {
        position: relative;
        top: 0;
    }

    .product-placeholder {
        height: 400px;
    }

    .product-config {
        padding: var(--spacing-lg);
    }

    /* Beneficios */
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* Galería */
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .gallery-placeholder {
        height: 300px;
    }

    /* En casa */
    .home-stories-header {
        margin-bottom: var(--spacing-xl);
    }

    .home-stories-marquee::before,
    .home-stories-marquee::after {
        display: none;
    }

    .home-stories-track {
        width: auto;
        overflow-x: auto;
        padding-bottom: var(--spacing-sm);
        animation: none;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .home-stories-track::-webkit-scrollbar {
        display: none;
    }

    .home-story {
        min-width: 300px;
        width: 300px;
        scroll-snap-align: start;
    }

    .home-story-photo {
        min-height: 240px;
    }

    /* About */
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .about-placeholder {
        height: 350px;
    }

    /* Newsletter */
    .newsletter-form {
        flex-direction: column;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }

    /* Carrito */
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }
}

/* ====================================
   MÓVIL - 480px y menor
   ==================================== */
@media (max-width: 480px) {
    
    /* Espaciado */
    :root {
        --spacing-xl: 2rem;
        --spacing-2xl: 3rem;
        --spacing-3xl: 4rem;
    }

    /* Tipografía */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    p {
        font-size: 0.95rem;
    }

    /* Botones */
    .btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }

    /* Hero */
    .hero {
        padding: var(--spacing-2xl) 0;
        min-height: 80vh;
    }

    .hero-subtitle {
        font-size: 0.8rem;
    }

    .hero-img-placeholder {
        height: 300px;
    }

    .hero-img {
        height: 300px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    /* Configurador */
    .config-price {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .price-amount {
        font-size: 1.5rem;
    }

    .option-selector {
        flex-direction: column;
    }

    .color-btn {
        width: 45px;
        height: 45px;
    }

    .product-placeholder {
        height: 350px;
    }

    /* Beneficios */
    .benefit-card {
        padding: var(--spacing-lg);
    }

    .benefit-icon {
        width: 60px;
        height: 60px;
    }

    /* Galería */
    .gallery-placeholder {
        height: 250px;
    }

    /* En casa */
    .home-story {
        min-width: 86vw;
        width: 86vw;
    }

    .home-story-photo {
        min-height: 220px;
    }

    .home-story-quote {
        font-size: 1.25rem;
    }

    /* About */
    .about-placeholder {
        height: 280px;
    }

    .about-text p {
        font-size: 1rem;
    }

    /* Newsletter */
    .newsletter {
        padding: var(--spacing-2xl) 0;
    }

    .newsletter-content h2 {
        font-size: 1.75rem;
    }

    .newsletter-input {
        padding: 0.875rem 1.25rem;
    }

    /* Footer */
    .footer {
        padding: var(--spacing-2xl) 0 var(--spacing-md);
    }

    .footer-section {
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

    .footer-links {
        align-items: center;
    }

    /* Carrito */
    .cart-sidebar {
        width: 100%;
        max-width: 100%;
    }

    .cart-header {
        padding: 1rem var(--spacing-md);
    }

    .cart-header h2 {
        font-size: 1.25rem;
    }

    .cart-items {
        padding: var(--spacing-md);
    }

    .cart-sidebar .cart-item {
        flex-direction: column;
        align-items: stretch;
        gap: 0.875rem;
        padding: 1rem 0;
    }

    .cart-sidebar .cart-item-image {
        width: 100%;
        height: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
    }

    .cart-sidebar .cart-item-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 0.75rem;
        mix-blend-mode: multiply;
    }

    .cart-sidebar .cart-item-info {
        width: 100%;
    }

    .cart-sidebar .cart-item-details {
        margin-bottom: 0.75rem;
    }

    .cart-sidebar .cart-item-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .cart-sidebar .cart-item-qty {
        justify-content: center;
        width: 100%;
        padding: 0.5rem 0.75rem;
    }

    .cart-sidebar .cart-item-price {
        text-align: center;
        font-size: 1.1rem;
    }

    .cart-sidebar .cart-item-remove {
        display: inline-flex;
        justify-content: center;
        width: 100%;
        margin-top: 0.25rem;
    }

    .cart-footer {
        padding: var(--spacing-md);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
        background-color: white;
    }

    .cart-total {
        font-size: 1rem;
    }

    .cart-total-amount {
        font-size: 1.25rem;
    }

    .cart-footer .btn {
        min-height: 52px;
    }
}

/* ====================================
   DESKTOP GRANDE - 1200px y mayor
   ==================================== */
@media (min-width: 1200px) {
    
    .container {
        max-width: 1400px;
    }

    /* Hero */
    .hero-content {
        gap: var(--spacing-3xl);
    }

    .hero-img-placeholder {
        height: 700px;
    }

    .hero-img {
        height: 700px;
    }

    /* Configurador */
    .product-placeholder {
        height: 650px;
    }

    /* Galería */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1000px;
    }

    .gallery-placeholder {
        height: 450px;
    }
}

/* ====================================
   SOLO ESCRITORIO - Hover states
   ==================================== */
@media (hover: hover) {
    
    /* Asegurar que los efectos hover solo se apliquen en dispositivos con mouse */
    .nav-link:hover,
    .btn:hover,
    .gallery-item:hover,
    .benefit-card:hover,
    .option-btn:hover,
    .color-btn:hover,
    .cart-btn:hover {
        /* Los estilos hover ya están definidos en style.css */
    }
}

/* ====================================
   MODO OSCURO (OPCIONAL)
   ==================================== */
@media (prefers-color-scheme: dark) {
    /* Puedes agregar estilos para modo oscuro aquí si lo deseas */
    /* Por ahora mantenemos el diseño claro premium */
}

/* ====================================
   PRINT STYLES
   ==================================== */
@media print {
    
    .navbar,
    .cart-sidebar,
    .cart-overlay,
    .newsletter,
    .footer {
        display: none;
    }

    body {
        background-color: white;
    }

    .hero,
    .configurator,
    .benefits,
    .gallery,
    .about {
        page-break-inside: avoid;
    }
}

/* ====================================
   ACCESIBILIDAD
   ==================================== */

/* Reducir movimiento para usuarios con preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Alto contraste */
@media (prefers-contrast: high) {
    :root {
        --color-text: #000000;
        --color-primary: #6B7A4A;
    }

    .btn {
        border-width: 3px;
    }
}

/* ====================================
   ORIENTACIÓN
   ==================================== */
@media (orientation: landscape) and (max-height: 600px) {
    
    /* Ajustes para dispositivos en landscape con poca altura */
    .hero {
        min-height: auto;
        padding: var(--spacing-xl) 0;
    }

    .hero-img-placeholder {
        height: 350px;
    }
}