/*
  Estilos Responsive - Yaris Constructora SAC
  Archivo: responsive.css
  Descripción: Media queries y adaptaciones para diferentes tamaños de pantalla
  Funciones: Adaptación mobile-first, tablet, desktop y dispositivos grandes
  Enlazado con: main.css, variables.css
  Breakpoints: 480px, 640px, 768px, 1024px, 1280px, 1536px
*/

/* ========================================
   MOBILE FIRST - BASE (hasta 479px)
   Los estilos base están en main.css
======================================== */

/* ========================================
   EXTRA SMALL DEVICES (480px y superior)
======================================== */
@media (min-width: 480px) {
    .container {
        padding: 0 var(--spacing-lg);
    }
    
    .hero-title {
        font-size: var(--font-size-4xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-lg);
    }
    
    .hero-buttons {
        flex-direction: row;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .projects-gallery {
        grid-template-columns: 1fr;
    }
    
    .testimonials {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   SMALL DEVICES (640px y superior)
======================================== */
@media (min-width: 640px) {
    .hero-title {
        font-size: var(--font-size-5xl);
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .projects-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonials {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .whatsapp-text {
        display: inline;
    }
    
    /* Carrusel de clientes - Small devices */
    .client-logo-item {
        min-width: 160px;
        height: 80px;
    }
    
    .carousel-control {
        width: 45px;
        height: 45px;
    }
}

/* ========================================
   MEDIUM DEVICES - TABLET (768px y superior)
======================================== */
@media (min-width: 768px) {
    /* Header adaptaciones */
    .navbar-menu {
        display: flex;
    }
    
    .navbar-toggle {
        display: none;
    }
    
    /* Hero adaptaciones */
    .hero {
        height: var(--hero-height);
    }
    
    .hero-title {
        font-size: var(--font-size-6xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-xl);
    }
    
    /* Secciones */
    .section-title {
        font-size: var(--font-size-4xl);
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2xl);
    }
    
    .projects-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2xl);
    }
    
    .testimonials {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-3xl);
    }
    
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
    
    /* Controles del slider más grandes */
    .slider-control {
        width: 60px;
        height: 60px;
    }
    
    .slider-control.prev {
        left: var(--spacing-xl);
    }
    
    .slider-control.next {
        right: var(--spacing-xl);
    }
    
    /* Carrusel de clientes - Tablet */
    .clients-logos-carousel {
        margin: 0 var(--spacing-xl);
    }
    
    .carousel-control.prev {
        left: -10px;
    }
    
    .carousel-control.next {
        right: -10px;
    }
    
    .client-logo-item {
        min-width: 180px;
        height: 90px;
    }
}

/* ========================================
   MEDIUM DEVICES - AJUSTES ESPECÍFICOS
======================================== */
@media (max-width: 767px) {
    /* Header móvil */
    .header {
        height: var(--header-height-mobile);
    }
    
    .navbar {
        height: var(--header-height-mobile);
    }
    
    .navbar-menu {
        position: fixed;
        top: var(--header-height-mobile);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height-mobile));
        background: var(--color-white);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: var(--spacing-2xl) 0;
        gap: var(--spacing-xl);
        transform: translateX(-100%);
        transition: var(--transition-all);
        box-shadow: var(--shadow-lg);
        z-index: var(--z-dropdown);
        display: flex;
    }
    
    .navbar-menu.active {
        transform: translateX(0);
    }
    
    .navbar-toggle {
        display: flex;
        z-index: var(--z-modal);
    }
    
    .nav-link {
        font-size: var(--font-size-lg);
        padding: var(--spacing-md) var(--spacing-lg);
        width: 100%;
        text-align: center;
    }
    
    /* Hero móvil */
    .hero {
        height: var(--hero-height-mobile);
        min-height: 500px;
    }
    
    .hero-content {
        padding: var(--spacing-lg);
    }
    
    .hero-title {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-md);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-xl);
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: center;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 250px;
    }
    
    /* Controles del slider móvil */
    .slider-control {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-sm);
    }
    
    .slider-control.prev {
        left: var(--spacing-sm);
    }
    
    .slider-control.next {
        right: var(--spacing-sm);
    }
    
    .slider-indicators {
        bottom: var(--spacing-sm);
    }
    
    /* Secciones móvil */
    section {
        padding: var(--spacing-3xl) 0;
    }
    
    .section-title {
        font-size: var(--font-size-2xl);
    }
    
    .section-subtitle {
        font-size: var(--font-size-base);
    }
    
    /* Servicios móvil */
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .service-card {
        padding: var(--spacing-lg);
    }
    
    .service-icon {
        width: 60px;
        height: 60px;
        font-size: var(--font-size-xl);
    }
    
    /* Proyectos móvil */
    .projects-filters {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }
    
    .filter-btn {
        width: 150px;
    }
    
    /* Carrusel de clientes - Móvil */
    .clients-logos-carousel {
        margin: 0 var(--spacing-md);
        padding: 0 var(--spacing-xl);
    }
    
    .carousel-container {
        overflow: visible; /* Para mostrar controles */
    }
    
    .client-logo-item {
        min-width: 140px;
        height: 70px;
        padding: var(--spacing-sm);
    }
    
    .client-logo {
        max-height: 50px;
    }
    
    .carousel-control {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-sm);
    }
    
    .carousel-control.prev {
        left: -20px;
    }
    
    .carousel-control.next {
        right: -20px;
    }
    
    .carousel-indicators {
        margin-top: var(--spacing-lg);
    }
    
    .carousel-indicator {
        width: 10px;
        height: 10px;
    }
    
    .projects-gallery {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .project-image {
        height: 200px;
    }
    
    /* Clientes móvil */
    .clients-carousel {
        justify-content: center;
        gap: var(--spacing-lg);
    }
    
    .client-logo {
        height: 40px;
    }
    
    .testimonials {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .testimonial-card {
        padding: var(--spacing-lg);
    }
    
    /* Contacto móvil */
    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }
    
    .contact-info {
        order: 2;
    }
    
    .contact-form-container {
        order: 1;
        padding: var(--spacing-lg);
    }
    
    .contact-item {
        gap: var(--spacing-md);
    }
    
    .social-icons a {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-base);
    }
    
    /* Footer móvil */
    .footer {
        padding: var(--spacing-2xl) 0 var(--spacing-lg);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }
    
    .footer-brand {
        justify-content: center;
    }
    
    .footer-social,
    .social-icons {
        justify-content: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }
    
    .footer-legal {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }
    
    /* Componentes flotantes móvil */
    .whatsapp-float {
        bottom: var(--spacing-md);
        right: var(--spacing-md);
    }
    
    .whatsapp-text {
        display: none;
    }
    
    .scroll-to-top {
        bottom: var(--spacing-md);
        left: var(--spacing-md);
        width: 45px;
        height: 45px;
    }
    
    /* Modal móvil */
    .modal {
        padding: var(--spacing-sm);
    }
    
    .modal-content {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .modal-body {
        padding: var(--spacing-lg);
    }
}

/* ========================================
   LARGE DEVICES - DESKTOP (1024px y superior)
======================================== */
@media (min-width: 1024px) {
    .container {
        padding: 0 var(--spacing-xl);
    }
    
    /* Servicios en 2 columnas para formato 2x2 (dos arriba, dos abajo) */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        gap: var(--spacing-3xl);
    }
    
    /* Proyectos en 3 columnas */
    .projects-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Testimonios en 3 columnas cuando hay 3 o más */
    .testimonials {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    /* Footer en 4 columnas */
    .footer-content {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Efectos hover más pronunciados en desktop */
    .service-card:hover {
        transform: translateY(-15px);
    }
    
    .project-card:hover {
        transform: translateY(-8px);
    }
    
    /* Espaciado mayor en secciones */
    section {
        padding: var(--spacing-6xl) 0;
    }
    
    .section-header {
        margin-bottom: var(--spacing-5xl);
    }
}

/* ========================================
   EXTRA LARGE DEVICES (1280px y superior)
======================================== */
@media (min-width: 1280px) {
    .container {
        max-width: var(--container-xl);
    }
    
    /* Hero más imponente */
    .hero-title {
        font-size: 4rem; /* 64px */
    }
    
    .hero-subtitle {
        font-size: var(--font-size-2xl);
    }
    
    /* Secciones con más aire */
    .section-title {
        font-size: 3rem; /* 48px */
    }
    
    /* Servicios: posibilidad de 4 columnas si hay 4 o más servicios */
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    /* Proyectos: hasta 4 columnas */
    .projects-gallery {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* ========================================
   XXL DEVICES (1536px y superior)
======================================== */
@media (min-width: 1536px) {
    .container {
        max-width: var(--container-2xl);
        padding: 0 var(--spacing-2xl);
    }
    
    /* Espaciado aún mayor para pantallas muy grandes */
    section {
        padding: var(--spacing-6xl) 0 var(--spacing-5xl);
    }
    
    /* Hero extremadamente grande */
    .hero-title {
        font-size: 4.5rem; /* 72px */
        margin-bottom: var(--spacing-xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-3xl);
    }
    
    /* Controles del slider más espaciados */
    .slider-control.prev {
        left: var(--spacing-3xl);
    }
    
    .slider-control.next {
        right: var(--spacing-3xl);
    }
}

/* ========================================
   ORIENTACIÓN LANDSCAPE EN MÓVILES
======================================== */
@media (max-width: 1023px) and (orientation: landscape) {
    .hero {
        height: 80vh;
        min-height: 400px;
    }
    
    .hero-title {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-sm);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-lg);
    }
    
    .hero-buttons {
        flex-direction: row;
        gap: var(--spacing-md);
    }
    
    .hero-buttons .btn {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }
    
    section {
        padding: var(--spacing-2xl) 0;
    }
}

/* ========================================
   PANTALLAS DE ALTA DENSIDAD (RETINA)
======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ajustes para pantallas de alta densidad */
    .logo,
    .footer-logo,
    .client-logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Bordes más nítidos */
    .btn,
    .service-card,
    .project-card,
    .testimonial-card,
    .contact-form-container {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ========================================
   MODO IMPRESIÓN
======================================== */
@media print {
    /* Ocultar elementos innecesarios para impresión */
    .header,
    .whatsapp-float,
    .scroll-to-top,
    .slider-control,
    .slider-indicators,
    .contact-form-container,
    .navbar-toggle {
        display: none !important;
    }
    
    /* Ajustar espaciado para impresión */
    section {
        padding: 20px 0;
        page-break-inside: avoid;
    }
    
    .hero {
        height: auto;
        min-height: auto;
        padding: 40px 0;
    }
    
    .hero-content {
        color: black;
    }
    
    /* Ajustar tipografía para impresión */
    .hero-title {
        font-size: 32px;
        color: black;
    }
    
    .section-title {
        font-size: 24px;
        color: black;
    }
    
    /* Simplificar grids para impresión */
    .services-grid,
    .projects-gallery,
    .testimonials {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    /* Ajustar cards para impresión */
    .service-card,
    .project-card,
    .testimonial-card {
        box-shadow: none;
        border: 1px solid #ccc;
        margin-bottom: 20px;
        page-break-inside: avoid;
    }
    
    /* Footer simplificado */
    .footer {
        background: white;
        color: black;
        border-top: 2px solid black;
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   ACCESIBILIDAD - REDUCIR MOVIMIENTO
======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .hero-slide {
        transition: none;
    }
    
    .loader-spinner {
        animation: none;
    }
    
    .whatsapp-float {
        animation: none;
    }
}

/* ========================================
   PREFERENCIA DE CONTRASTE ALTO
======================================== */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #FF4500;
        --color-secondary: #2F1B14;
        --color-gray-300: #999999;
        --color-gray-600: #333333;
    }
    
    .btn {
        border-width: 3px;
    }
    
    .nav-link::after {
        height: 3px;
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
        border-width: 2px;
    }
}

/* ========================================
   DISPOSITIVOS CON HOVER LIMITADO (TOUCH)
======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Eliminar efectos hover en dispositivos táctiles */
    .service-card:hover,
    .project-card:hover {
        transform: none;
        box-shadow: var(--card-shadow);
    }
    
    .btn:hover {
        transform: none;
    }
    
    /* Hacer botones más grandes en dispositivos táctiles */
    .btn {
        min-height: 48px;
        padding: var(--spacing-md) var(--spacing-xl);
    }
    
    .slider-control {
        width: 50px;
        height: 50px;
    }
    
    .social-icons a,
    .footer-social a {
        min-width: 48px;
        min-height: 48px;
    }
}

/* ========================================
   PANTALLAS MUY PEQUEÑAS (320px)
======================================== */
@media (max-width: 320px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .hero-title {
        font-size: var(--font-size-2xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-sm);
    }
    
    .hero-buttons .btn {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .section-title {
        font-size: var(--font-size-xl);
    }
    
    .service-card,
    .testimonial-card,
    .contact-form-container {
        padding: var(--spacing-md);
    }
    
    .whatsapp-float,
    .scroll-to-top {
        bottom: var(--spacing-sm);
        right: var(--spacing-sm);
        left: var(--spacing-sm);
    }
    
    .whatsapp-float {
        left: auto;
    }
}