/* ==========================================================================
   responsive.css — Media Queries para todos los breakpoints
   ========================================================================== */

/* --- Tablet (768px - 1023px) --- */
@media (max-width: 1023px) {
    :root {
        --font-size-2xl: 2.5rem;
        --font-size-xl: 1.75rem;
    }

    .carousel-item {
        min-width: 240px;
        height: 300px;
    }

    .map-placeholder {
        height: 200px;
    }
}

/* --- Móvil (max-width: 767px) --- */
@media (max-width: 767px) {
    :root {
        --font-size-2xl: 2rem;
        --font-size-xl: 1.5rem;
        --font-size-lg: 1.2rem;
    }

    nav {
        flex-direction: column;
        gap: var(--spacing-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .logo-text {
        font-size: 1.5rem;
    }

    .nav-links {
        gap: var(--spacing-sm);
    }

    nav a.menu-item {
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs);
    }

    .lang-btn {
        padding: 3px 8px;
        font-size: 0.8rem;
    }

    .lang-btn .lang-flag {
        font-size: 1rem;
    }

    .hero-flag {
        height: 1.5rem;
    }

    .section {
        padding-top: 80px;
    }

    .section-content {
        padding: var(--spacing-sm);
    }

    .carousel-item {
        min-width: 200px;
        height: 250px;
    }

    .carousel-container {
        gap: 20px;
    }

    .section-bridge {
        height: 8vh;
    }

    #contact {
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .contact-body {
        flex-direction: column;
        align-items: center;
    }

    .map-container {
        width: 30vh;
        height: 30vh;
    }

    #leaflet-map {
        width: 100%;
        height: 100%;
    }

    .contact-info td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .contact-label,
    .contact-value {
        font-size: var(--font-size-sm);
    }
}

/* --- Móvil pequeño (max-width: 374px) --- */
@media (max-width: 374px) {
    :root {
        --font-size-2xl: 1.7rem;
        --font-size-xl: 1.3rem;
    }

    .carousel-item {
        min-width: 160px;
        height: 200px;
    }
}

/* --- Desktop grande (min-width: 1440px) --- */
@media (min-width: 1440px) {
    .section-content {
        max-width: 1000px;
    }

    .map-container {
        max-width: 500px;
    }

    .carousel-item {
        min-width: 320px;
        height: 400px;
    }
}

/* --- Preferencia de movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}