/* ============================================
   RESPONSIVE CSS - Mobile First Approach
   ============================================ */

/* ========== MOBILE (< 768px) ========== */
@media (max-width: 767px) {
    
    /* VARIABLES MOBILE */
    :root {
        --font-size-body: 1.2rem;
        line-height: 2rem;
    }

    /* HEADER */
    /* TOP BAR - Ocultar en mobile */
    .top-bar {
        display: none;
    }

/* HEADER */
.header {
    top: 0 !important; /* Sin top bar en mobile */
    height: var(--header-height-mobile);
    grid-template-columns: auto 1fr auto;
    padding: 0 1rem;
    gap: 0.5rem;
}

main {
    margin-top: var(--header-height-mobile) !important;
}

/* TIPOGRAFÍA MOBILE */

p {
    line-height: 1.6rem;
}

.section__subtitle {
     line-height: 1.2; /* Ajusta este valor según prefieras */
}

.empresa__text {
    line-height: 1.4;
    }

.politica__number {
    font-size: 1rem;
}

.separator__text {
    padding: 0 50px;
}

.servicios__text {
    line-height: 1.4;
    width: 100%;
}

.service-card__text {
    font-size: 16px;
}

.productos__text {
    line-height: 1.4;
    width: 100%;
}

.producto-slider__list li {
    font-size: 16px;
}

.producto-slider__title {
    font-size: var(--font-size-h2);
}

.producto-slider__text p {
    line-height: 1.4;
}

.footer__small {
    font-size: 12px;
    line-height: 1.2;
}

#contacto {
    padding: 0;
}

/* Logo INTI a la izquierda */
.header__inti {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
}

.header__inti-logo {
    width: 60px !important;
    min-width: 90px !important;
    max-width: 60px !important;
}

/* Logo TecnoDil en el centro */
.header__logo {
    grid-column: 2;
    grid-row: 1;
}

.header__logo img {
    height: 40px;
}

/* Burger a la derecha */
.header__burger {
    grid-column: 3;
    grid-row: 1;
}
    
    /* Navegación Mobile */
    .header__nav {
        position: fixed;
        top: var(--header-height-mobile);
        left: 0;
        right: 0;
        background-color: var(--white);
        box-shadow: var(--shadow-md);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-normal);
        grid-column: 1 / -1;
        z-index: 999;
    }
    
    .header__nav.header__nav--active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .header__nav-list {
        flex-direction: column;
        gap: 0;
        padding: var(--spacing-sm) 0;
    }
    
    .header__nav-link {
        font-size: 16px;
        display: block;
        width: 100%;
        text-align: left;
        border-radius: 0;
    }
    
    .header__nav-link::after {
        display: none;
    }
    
    /* Ocultar contacto del header en mobile */
    .header__contact {
        display: none;
    }
    
    /* Mostrar hamburguesa */
    .header__burger {
        display: flex;
        grid-column: 3;
    }
    
    /* HERO SLIDER */
    .hero-slider {
        height: 400px;
    }
    
    .slider__content {
        left: 2%;
        right: 2%;
        max-width: none;
        padding: var(--spacing-sm);
    }
    
    .slider__title {
        font-size: 2rem;
    }
    
    .slider__subtitle {
        font-size: 1.2rem;
    }
    
    .btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
    
    /* EMPRESA */
    .empresa__grid {
        grid-template-columns: 1fr;
    }
    
    .empresa__content {
        padding-right: 0;
    }
    
    .empresa__image {
        order: -1; /* Imagen arriba en mobile */
    }
    
    /* POLÍTICA */
    .politica__list {
        grid-template-columns: 1fr;
    }
    
    /* SERVICIOS */
    .servicios__grid {
        grid-template-columns: 1fr;
    }
    
    .service-card {
        padding: var(--spacing-md);
    }
    
    /* PRODUCTOS */
    .marcas__logos {
        gap: var(--spacing-md);
    }
    
    .marcas__logo {
        max-width: 100px;
    }
    
    .producto-slider__content {
        grid-template-columns: 1fr;
    }
    
    .producto-slider__image {
        height: 250px;
        order: -1;
    }
    
    /* FOOTER */
    .footer__grid {
        grid-template-columns: 1fr;
    }
    
    /* SECCIONES */
    .section {
        padding: var(--spacing-lg) 0;
    }
}

/* ========== TABLET (768px - 1023px) ========== */
@media (min-width: 768px) and (max-width: 1023px) {
    
    .header__logo img {
        height: 45px;
    }
    
    .header__nav-list {
        gap: var(--spacing-sm);
    }
    
    .header__nav-link {
        font-size: 0.875rem;
        padding: var(--spacing-xs);
    }
    
    /* HERO */
    .hero-slider {
        height: 500px;
    }
    
    /* EMPRESA */
    .empresa__grid {
        grid-template-columns: 55% 45%;
    }
    
    /* SERVICIOS */
    .servicios__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== DESKTOP PEQUEÑO (1024px - 1439px) ========== */
@media (min-width: 1024px) and (max-width: 1439px) {
    
    .container {
        padding: 0 var(--spacing-md);
    }
    
    /* SERVICIOS - 3 columnas */
    .servicios__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== DESKTOP GRANDE (1440px+) ========== */
@media (min-width: 1440px) {
    
    :root {
        --container-max-width: 1400px;
    }
    
    .hero-slider {
        height: 700px;
    }
    
    .slider__content {
        max-width: 700px;
    }
    
    /* SERVICIOS - 5 columnas en pantallas grandes */
    .servicios__grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ========== LANDSCAPE MOBILE ========== */
@media (max-width: 767px) and (orientation: landscape) {
    
    .hero-slider {
        height: 100vh;
        min-height: 300px;
    }
    
    .slider__content {
        top: 50%;
    }
}

/* ========== TOUCH DEVICES ========== */
@media (hover: none) and (pointer: coarse) {
    
    /* Aumentar área de toque para botones */
    .btn {
        min-height: 48px;
        padding: 15px 40px;
    }
    
    .slider__arrow {
        width: 48px;
        height: 48px;
    }
    
    .header__nav-link {
        min-height: 48px;
    }
    
    /* Desactivar efectos hover en touch */
    .service-card:hover {
        transform: none;
    }
    
    .header__nav-link:hover::after {
        width: 0;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    
    .header,
    .slider__arrow,
    .slider__dots,
    .footer {
        display: none;
    }
    
    main {
        margin-top: 0;
    }
    
    .section {
        page-break-inside: avoid;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
    }
}

/* ========== MOTION PREFERENCES ========== */
@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;
    }
}

/* ========== HIGH CONTRAST MODE ========== */
@media (prefers-contrast: high) {
    
    .btn--primary {
        border: 3px solid var(--primary-color);
    }
    
    .header__nav-link::after {
        height: 3px;
    }
}