/* =====================================================
   DISPOSITIVOS GRANDES (≤ 1200px)
===================================================== */
@media (max-width: 1200px) {

    .hero-section h1 {
        font-size: 2.4rem;
    }

    .carousel {
        max-width: 600px;
    }
}

/* =====================================================
   TABLETS (≤ 992px)
===================================================== */
@media (max-width: 992px) {

    .navbar .nav-link {
        margin-left: 0;
        margin-bottom: 0.5rem;
    }

    .hero-section {
        height: 440px;
    }

    .hero-section h1 {
        font-size: 2.2rem;
    }

    .hero-section p {
        font-size: 1.1rem;
    }

    .nav-pills {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .carousel img {
        max-height: 260px;
    }
}

/* =====================================================
   MÓVILES GRANDES (≤ 768px)
===================================================== */
@media (max-width: 768px) {

    .hero-section {
        height: 380px;
        text-align: center;
    }

    .hero-overlay .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-section h1 {
        font-size: 1.9rem;
    }

    .hero-section p {
        font-size: 1rem;
    }

    .card {
        margin-bottom: 1rem;
    }

    .carousel {
        max-width: 100%;
    }

    footer iframe {
        height: 180px;
    }
}

/* =====================================================
   MÓVILES PEQUEÑOS (≤ 576px)
===================================================== */
@media (max-width: 576px) {

    .hero-section {
        height: 320px;
    }

    .hero-section h1 {
        font-size: 1.6rem;
    }

    .hero-section p {
        font-size: 0.95rem;
    }

    .btn-lg {
        font-size: 0.95rem;
        padding: 0.5rem 1.2rem;
    }

    .nav-pills .nav-link {
        font-size: 0.85rem;
        padding: 0.45rem 1rem;
    }

    footer {
        text-align: center;
    }

    footer .col-md-3,
    footer .col-md-6 {
        margin-bottom: 1.5rem;
    }
}
@media (max-width: 768px) {
    .team-img {
        height: 220px;
    }
}