/* ========================================
   RESPONSIVE - Ajustes Adicionales
   Litl Studio Website
   
   - Mobile-first approach
   - Breakpoints consistentes
   - Optimizaciones específicas por dispositivo
   ======================================== */

/* ==================
   VIEWPORT MUY PEQUEÑO (320px)
   ================== */

   @media (max-width: 320px) {
    /* Header ultra compacto */
    .header {
        padding: 0.75rem;
    }
    
    .header__logo img {
        width: 40px;
        height: 40px;
    }
    
    .header__tagline {
        font-size: 0.75rem;
    }
    
    /* Slider content ajustado */
    .slider__content {
        padding: 1rem 0.5rem;
    }
    
    .slider__title {
        font-size: 1.5rem;
    }
    
    .slider__subtitle {
        font-size: 1rem;
    }
    
    .slider__button {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* Dots más pequeños */
    .slider__dots {
        gap: 0.75rem;
    }
    
    .slider__dot {
        width: 6px;
        height: 6px;
    }
    
    /* Secciones ajustadas */
    .section__title {
        font-size: 1.5rem;
    }
    
    .contact__email {
        font-size: 1.1rem;
    }
}

/* ==================
   MOBILE (hasta 767px)
   ================== */

@media (max-width: 767px) {
    /* Ajuste de scroll snap para mobile */
    html {
        scroll-snap-type: y proximity; /* Menos estricto en mobile */
    }
    
    /* Espaciado reducido */
    .section {
        padding: 2rem 1rem;
    }
    
    /* Tipografía optimizada para lectura móvil */
    .section__text p {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    /* Botones más grandes para touch */
    .slider__button {
        min-height: 44px; /* Tamaño mínimo recomendado para touch */
        padding: 1rem 2rem;
    }
}

/* ==================
   TABLET (768px - 1023px)
   ================== */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Header ajustado */
    .header {
        padding: 1.5rem 2rem;
    }
    
    /* Slider content */
    .slider__content {
        max-width: 450px;
    }
    
    /* Secciones */
    .section__content {
        max-width: 700px;
    }
}

/* ==================
   DESKTOP PEQUEÑO (1024px - 1439px)
   ================== */

@media (min-width: 1024px) and (max-width: 1439px) {
    /* Contenido del slider */
    .slider__content {
        left: 6%;
        max-width: 500px;
    }
    
    /* Dots */
    .slider__dots {
        right: 4%;
    }
}

/* ==================
   DESKTOP GRANDE (1440px+)
   ================== */

@media (min-width: 1440px) {
    /* Header con más espacio */
    .header {
        padding: 2.5rem 3rem;
    }
    
    /* Slider content más espacioso */
    .slider__content {
        left: 7%;
        max-width: 600px;
    }
    
    /* Títulos más grandes */
    .slider__title {
        font-size: 4rem;
    }
    
    .slider__subtitle {
        font-size: 1.8rem;
    }
    
    /* Secciones */
    .section__content {
        max-width: 900px;
    }
    
    .section__title {
        font-size: 3.5rem;
    }
}

/* ==================
   4K Y ULTRA WIDE (2560px+)
   ================== */

@media (min-width: 2560px) {
    /* Limitar crecimiento excesivo en pantallas muy grandes */
    .slider__content {
        left: 10%;
        max-width: 700px;
    }
    
    .section__content {
        max-width: 1000px;
    }
}

/* ==================
   LANDSCAPE EN MOBILE
   ================== */

@media (max-width: 767px) and (orientation: landscape) {
    /* Reducir altura de secciones en landscape */
    .section {
        min-height: 100vh;
        height: auto;
    }
    
    /* Ajustar posición del contenido del slider */
    .slider__content {
        top: 45%;
        padding: 1rem;
    }
    
    /* Reducir espaciado vertical */
    .slider__title {
        margin-bottom: 0.5rem;
    }
    
    .slider__subtitle {
        margin-bottom: 1rem;
    }
}

/* ==================
   HOVER CAPABILITIES
   ================== */

/* Solo aplicar efectos hover en dispositivos con hover real */
@media (hover: hover) and (pointer: fine) {
    /* Efectos hover más pronunciados en desktop */
    .slider__button:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(51, 51, 51, 0.15);
    }
    
    .contact__email:hover {
        transform: translateY(-3px);
    }
}

/* Dispositivos touch: eliminar efectos hover */
@media (hover: none) and (pointer: coarse) {
    .slider__button:active {
        transform: scale(0.98);
    }
    
    .contact__email:active {
        transform: scale(0.98);
    }
}

/* ==================
   HIGH DPI / RETINA SCREENS
   ================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ajustar bordes para pantallas retina */
    .slider__button {
        border-width: 1.5px;
    }
    
    .contact__email {
        border-bottom-width: 2px;
    }
}

/* ==================
   DARK MODE SUPPORT (preparado para futuro)
   ================== */

@media (prefers-color-scheme: dark) {
    /* Por ahora mantenemos colores claros según diseño
       Pero dejamos estructura preparada para dark mode futuro */
    /*
    :root {
        --color-bg: #1a1a1a;
        --color-text: #fafafa;
        --color-text-light: #cccccc;
        --color-accent: #fafafa;
    }
    */
}

/* ==================
   PRINT STYLES
   ================== */

@media print {
    /* Ocultar elementos interactivos al imprimir */
    .cursor,
    .slider__dots,
    .header__instagram {
        display: none !important;
    }
    
    /* Mostrar todos los slides */
    .slider__slide {
        position: relative;
        opacity: 1;
        transform: none;
        page-break-inside: avoid;
    }
    
    /* Ajustar colores para impresión */
    body {
        background: white;
        color: black;
    }
}