/* ================================
   RESPONSIVE STYLES - ULTRA ENHANCED
================================ */

/* === TABLET (1024px and down) === */
@media screen and (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-sm);
    }

    .hero__features {
        gap: 1.5rem;
    }

    .statistics__grid,
    .valores__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === TABLET (768px and down) === */
@media screen and (max-width: 768px) {
    /* Navigation */
    .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 380px;
        height: 100vh;
        background: rgba(26, 26, 26, 0.98);
        backdrop-filter: blur(20px);
        padding: var(--spacing-xxl) var(--spacing-md);
        transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        z-index: 1001;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
        overflow-y: auto;
    }

    .nav__menu.show {
        right: 0;
    }

    .nav__list {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .nav__link {
        width: 100%;
        display: block;
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
    }

    .nav__close {
        display: block;
        position: absolute;
        top: var(--spacing-md);
        right: var(--spacing-md);
        font-size: 2rem;
        transition: var(--transition);
    }

    .nav__close:hover {
        transform: rotate(90deg);
        color: var(--color-primary);
    }

    .nav__toggle {
        display: flex;
    }

    /* Hero */
    .hero {
        height: 100vh;
        min-height: 600px;
    }

    .hero__badge {
        font-size: 0.8rem;
        padding: 0.6rem 1.2rem;
    }

    .hero__features {
        flex-direction: column;
        gap: 1rem;
    }

    .hero__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__buttons .btn {
        width: 100%;
    }

    /* Section padding */
    section {
        padding: var(--spacing-xl) 0 !important;
    }

    /* Statistics */
    .statistics__grid {
        grid-template-columns: 1fr;
    }

    /* Mission & Vision */
    .mission-vision {
        grid-template-columns: 1fr;
    }

    .mission-vision__item {
        flex-direction: column;
        text-align: center;
    }

    /* Valores */
    .valores__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Services */
    .services__grid {
        grid-template-columns: 1fr;
    }

    /* Gallery */
    .gallery {
        grid-template-columns: 1fr;
    }

    .gallery__item {
        height: 300px;
    }

    /* Team */
    .team__grid {
        grid-template-columns: 1fr;
    }

    /* Clients */
    .clients__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contact */
    .contact__content {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer__content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer__bottom-content {
        flex-direction: column;
        text-align: center;
    }

    /* WhatsApp Float */
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 5rem;
    }

    .scroll-top {
        width: 50px;
        height: 50px;
    }
}

/* === MOBILE (480px and down) === */
@media screen and (max-width: 480px) {
    :root {
        --spacing-xl: 2.5rem;
        --spacing-xxl: 3.5rem;
    }

    .container {
        padding: 0 var(--spacing-sm);
    }

    .nav__logo img {
        height: 40px;
    }

    /* Hero */
    .hero {
        min-height: 550px;
    }

    .hero__title {
        font-size: 2rem;
    }

    .hero__description {
        font-size: 1rem;
    }

    .hero__scroll {
        bottom: var(--spacing-md);
    }

    /* Section headers */
    .section-header__title {
        font-size: 2rem;
    }

    .section-header__description {
        font-size: 1rem;
    }

    /* Statistics */
    .stat-card__number {
        font-size: 2.5rem;
    }

    /* Valores */
    .valores__grid {
        grid-template-columns: 1fr;
    }

    .valor__icon-wrapper {
        width: 80px;
        height: 80px;
    }

    /* Gallery */
    .gallery__item {
        height: 250px;
    }

    /* Clients */
    .clients__grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer__logo {
        height: 60px;
    }

    /* Scroll to top */
    .scroll-top {
        width: 45px;
        height: 45px;
        bottom: 1.5rem;
        right: 1.5rem;
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 4.5rem;
        right: 1.5rem;
    }
}

/* === LARGE SCREENS (1400px and up) === */
@media screen and (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }

    .hero__content {
        max-width: 1000px;
    }
}

/* === LANDSCAPE MODE === */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .hero {
        height: auto;
        min-height: 100vh;
        padding: 8rem 0 4rem;
    }

    .hero__scroll {
        display: none;
    }

    .nav__menu {
        max-height: 100vh;
        overflow-y: auto;
    }
}

/* === PRINT STYLES === */
@media print {
    .header,
    .nav,
    .hero__scroll,
    .scroll-top,
    .whatsapp-float,
    .contact__form {
        display: none;
    }

    section {
        page-break-inside: avoid;
    }

    .hero {
        height: auto;
        padding: 2rem 0;
    }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero__scroll-link {
        animation: none;
    }

    .spinner {
        animation: none;
    }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    .hero__overlay {
        background: rgba(0, 0, 0, 0.9);
    }

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

    .glass-card,
    .glass-card-dark {
        border-width: 2px;
    }
}

/* === DARK MODE SUPPORT === */
@media (prefers-color-scheme: dark) {
    /* Can be implemented for system dark mode preference */
}