@media(max-width:991px){

.topbar{

display:none;

}

#navbarMedic{

padding:15px 0;

}

.logo{

height:60px;

}

#navbarMedic .navbar-nav{

padding-top:20px;

gap:5px;

}

#navbarMedic .nav-link{

padding:14px;

border-radius:12px;

}

#navbarMedic .nav-link:hover{

background:#FFF2F7;

}

}

/*RESPONSIVE PARA TABLETS*/
@media (max-width:991px){

.hero{

padding:60px 0;

}

.hero-image{

margin-top:50px;

text-align:center;

}

.hero-image img{

width:100%;

max-width:500px;

}

.card-one{

left:10px;

top:20px;

}

.card-two{

left:10px;

bottom:20px;

}

.card-three{

right:10px;

top:120px;

}

}

/*RESPONSIVE PARA CELULAR*/
/*==================================================
MÓVIL
==================================================*/

@media (max-width:768px){

    /* Evita cualquier desbordamiento */
    html,body{
        overflow-x:hidden;
    }

    .hero{
        padding:35px 0 50px;
    }

    .hero .row{
        min-height:auto !important;
    }

    .hero-content{
        text-align:center;
        order:1;
    }

    .hero-image{
        order:2;
        margin-top:35px;
        text-align:center;
        position:relative;
    }

    .hero-image img{
        width:100%;
        max-width:340px;
        height:auto;
        display:block;
        margin:0 auto;
    }

    .hero h1{
        font-size:3rem;
        line-height:1.08;
        margin-bottom:20px;
    }

    .hero p{
        font-size:1.1rem;
        line-height:1.8;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        gap:15px;
        margin-top:30px;
    }

    .hero-buttons .btn{
        width:100%;
    }

    /* ===== TARJETAS ===== */

    .floating-card{

        position:absolute;

        padding:12px;

        width:85px;

        border-radius:16px;

        animation:none;

    }

    .floating-card h3{

        font-size:20px;

        margin-bottom:2px;

    }

    .floating-card p{

        font-size:12px;

        margin:0;

    }

    .card-one{

        top:10px;

        left:5px;

    }

    .card-two{

        bottom:15px;

        left:5px;

    }

    .card-three{

        top:100px;

        right:5px;

    }

}

@media (max-width:480px){

    .hero h1{

        font-size:2.5rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-image img{

        max-width:300px;

    }

    .floating-card{

        width:75px;

        padding:10px;

    }

    .floating-card h3{

        font-size:18px;

    }

    .floating-card p{

        font-size:11px;

    }

    .card-one{

        left:0;

    }

    .card-two{

        left:0;

    }

    .card-three{

        right:0;

    }

}