/* Mobile First Responsive Design - ANETIF */

/* Mobile Styles (up to 768px) */
@media (max-width: 768px) {
    /* Breadcrumb Mobile */
    .breadcrumb {
        font-size: 0.8rem;
    }

    /* Process Steps Mobile */
    .process-steps {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .process-step::before {
        display: none;
    }

    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    /* Requirements Mobile */
    .requirements-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .requirement-category {
        padding: var(--spacing-md);
    }
    :root {
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.75rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
    }

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

    /* Header Mobile */
    .header-content {
        padding: var(--spacing-sm) 0;
    }

    .logo-text h1 {
        font-size: 1.25rem;
    }

    .logo-text span {
        font-size: 0.75rem;
    }

    /* Mobile Navigation */
    .mobile-menu-toggle {
        display: flex;
    }

    .main-nav .nav-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--primary-color);
        flex-direction: column;
        padding: var(--spacing-sm) 0;
        box-shadow: var(--shadow-medium);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }

    .main-nav.active .nav-list {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-link {
        display: block;
        padding: var(--spacing-sm);
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Mobile dropdown styles */
    .nav-dropdown .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background-color: rgba(255, 255, 255, 0.1);
        margin-left: var(--spacing-md);
        border-radius: 0;
    }

    .dropdown-link {
        font-size: 0.9rem;
        padding: var(--spacing-xs) var(--spacing-sm);
        border-left: none;
    }

    /* Executive committee mobile styles */
    .directivo-grid,
    .comisiones-grid,
    .vocales-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .directivo-card,
    .comision-card,
    .vocal-card {
        padding: var(--spacing-md);
    }

    .directivo-role {
        font-size: 1rem;
    }

    .directivo-name {
        font-size: 1.125rem;
    }

    .comision-card h3 {
        font-size: 1rem;
    }

    /* Hero Carousel Mobile */
    .carousel-container {
        height: 500px;
    }

    .hero-content {
        padding: var(--spacing-lg) 0;
    }

    .hero-title {
        font-size: 1.75rem;
    }

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

    .carousel-nav {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        z-index: 5;
    }

    .carousel-prev {
        left: 8px;
    }

    .carousel-next {
        right: 8px;
    }

    .carousel-indicators {
        bottom: 15px;
    }

    .indicator {
        width: 10px;
        height: 10px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    /* Slide with Image Mobile */
    .slide-content-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        text-align: center;
    }

    .slide-text {
        text-align: center;
    }

    .slide-with-image .hero-title {
        text-align: center;
    }

    .slide-with-image .hero-subtitle {
        text-align: center;
    }

    .slide-with-image .hero-actions {
        justify-content: center;
    }

    .slide-image img {
        max-height: 200px;
    }

    /* TIF Logo Mobile */
    .tif-seal-logo {
        max-width: 120px;
        max-height: 120px;
    }

    .section-header-with-logo {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }

    .section-tif-logo {
        max-width: 70px;
        max-height: 70px;
    }

    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        width: 80%;
        max-width: 300px;
    }

    /* Grids Mobile */
    .content-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .services-grid,
    .news-grid,
    .resources-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    /* Cards Mobile */
    .service-card,
    .resource-card {
        padding: var(--spacing-md);
    }

    .stat-item {
        padding: var(--spacing-sm);
    }

    .stat-number {
        font-size: 2rem;
    }

    /* Banner Mobile */
    .banner-content {
        flex-direction: column;
        gap: var(--spacing-xs);
        padding: 0 var(--spacing-lg);
    }

    .banner-close {
        top: var(--spacing-xs);
        right: var(--spacing-xs);
    }

    /* Footer Mobile */
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        text-align: center;
    }

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

/* Small Mobile Styles (up to 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }

    .carousel-container {
        height: 450px;
    }

    /* Sello TIF Mobile */
    .sello-hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }

    .sello-hero-text {
        text-align: center;
    }

    .tif-hero-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .tif-hero-stat .stat-number {
        font-size: 2rem;
    }

    .tif-benefits-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .tif-benefit-card {
        padding: var(--spacing-md);
    }

    .benefit-icon {
        font-size: 2.5rem;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .service-card,
    .resource-card {
        padding: var(--spacing-sm);
    }

    .partners-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid,
    .statistics-grid {
        grid-template-columns: 1fr;
    }

    .statistics-section .stat-number {
        font-size: 3rem;
    }

    .stat-item {
        padding: var(--spacing-sm);
        background-color: var(--white);
        border-radius: var(--border-radius);
        border: 1px solid var(--border-color);
    }

    /* Sello TIF Home Mobile */
    .sello-tif-home-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
        min-height: auto;
    }

    .sello-tif-text-section {
        text-align: center;
        padding: var(--spacing-md);
    }

    .sello-tif-text-section .section-title {
        font-size: 1.75rem;
    }

    .sello-tif-text-section .section-subtitle {
        max-width: 100%;
        margin-bottom: var(--spacing-lg);
    }

    .sello-tif-home-logo {
        max-width: 200px;
        max-height: 200px;
    }

    .sello-tif-logo-section {
        padding: var(--spacing-md);
    }

    .logo-text h1 {
        font-size: 1.125rem;
    }

    .logo-text span {
        font-size: 0.7rem;
    }

    .btn {
        width: 100%;
        max-width: none;
    }

    .form-group input,
    .form-group textarea {
        padding: var(--spacing-xs);
    }
}

/* Tablet Styles (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    .carousel-container {
        height: 450px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

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

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

    /* Slide with Image Tablet */
    .slide-content-grid {
        grid-template-columns: 1fr 1.2fr;
        gap: var(--spacing-lg);
    }

    .slide-image img {
        max-height: 250px;
    }

    /* TIF Logo Tablet */
    .tif-seal-logo {
        max-width: 160px;
        max-height: 160px;
    }

    .section-tif-logo {
        max-width: 50px;
        max-height: 50px;
    }

    /* Sello TIF Tablet */
    .sello-hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }

    .sello-hero-text {
        text-align: center;
    }

    .tif-hero-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }

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

    /* Sello TIF Home Tablet */
    .sello-tif-home-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
        min-height: auto;
    }

    .sello-tif-text-section {
        text-align: center;
        padding: var(--spacing-lg);
    }

    .sello-tif-text-section .section-title {
        font-size: 2.25rem;
    }

    .sello-tif-text-section .section-subtitle {
        max-width: 100%;
        margin-bottom: var(--spacing-xl);
    }

    .sello-tif-home-logo {
        max-width: 280px;
        max-height: 280px;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .carousel-container {
        height: 300px;
    }

    .hero-content {
        padding: var(--spacing-md) 0;
    }

    .hero-title {
        font-size: 1.75rem;
    }

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

    .section {
        padding: var(--spacing-md) 0;
    }

    .hero-actions {
        flex-direction: row;
        justify-content: center;
    }

    .btn {
        width: auto;
        max-width: 200px;
    }
}

/* Dark Mode Support - Manteniendo esquema blanco */
@media (prefers-color-scheme: dark) {
    /* Mantener colores originales - sitio debe ser blanco siempre */
    :root {
        --text-color: #000000;
        --background-light: #FEFEFE;
        --white: #FEFEFE;
        --border-color: #E0E0E0;
        --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
        --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
        --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.16);
    }
}

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

    html {
        scroll-behavior: auto;
    }

    .btn::before {
        display: none;
    }

    .service-card:hover,
    .news-card:hover,
    .resource-card:hover,
    .partner-logo:hover,
    .stat-item:hover {
        transform: none;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero::before,
    .promotional-banner::before,
    .footer::before {
        background-size: 200px 200px;
    }
}

/* Print Responsive */
@media print {
    .services-grid,
    .news-grid,
    .resources-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .content-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: var(--spacing-sm) 0;
        page-break-inside: avoid;
    }

    .hero {
        background: var(--white);
        color: var(--primary-color);
        padding: var(--spacing-md) 0;
        border-bottom: 2px solid var(--primary-color);
    }

    .btn {
        border: 1px solid var(--primary-color);
        background: none;
        color: var(--primary-color);
    }

    .promotional-banner {
        display: none;
    }

    .hero::before,
    .promotional-banner::before,
    .footer::before {
        display: none;
    }
}

/* Focus Visible Support */
@supports selector(:focus-visible) {
    a:focus {
        outline: none;
    }

    a:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
}

/* Container Queries Support */
@supports (container-type: inline-size) {
    .services-grid {
        container-type: inline-size;
    }

    @container (max-width: 600px) {
        .services-grid {
            grid-template-columns: 1fr;
        }
    }
}

/* Large Screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }

    .hero-title {
        font-size: 3.5rem;
    }

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

    .section-title {
        font-size: 2.25rem;
    }
}
.partner-logo img {
        max-height: 40px;
    }

    /* Sponsors Mobile - Más pequeños y más rápidos */
    .sponsor-item {
        min-width: 240px;
        height: 150px;
        padding: var(--spacing-sm);
    }

    .sponsor-item img {
        max-height: 80px;
        max-width: 180px;
    }

    .sponsors-track {
        gap: var(--spacing-sm);
        animation-duration: 12s !important;
    }
    
    .sponsors-track:last-child {
        animation-duration: 16s !important;
    }