/* Móviles pequeños (menos de 480px) */
@media only screen and (max-width: 479px) {
    /* Estilos para móviles pequeños */
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero p { margin-left: auto; margin-right: auto; }
    .btn-group { justify-content: center; }
    .hero-img i { font-size: 10rem; }

    .nav-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .nav-menu {
        gap: 1.2rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-lang-toggle {
        margin-left: 0;
        padding: 4px 12px;
    }
    body { padding-top: 120px; }

    .contacto-container {
        grid-template-columns: 1fr;
    }

    .hero-planta-colgante{
        position: absolute;
        left: -100px;
        top:-20px;
        opacity: 50%;
        max-width: 80%
    }
    .info-hero {
        position: relative;
        top: -100px;
    }

    .quienes-somos{       
        padding-left: 5%;
        padding-right: 5%;
        background: linear-gradient(135deg, white 40%, #006666 100%);
    }

    .mision-vision {

        padding-bottom: 10px;

        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
    }


    .mv-card {
        background: white;
        border-radius: 40px;
        padding: 3rem 2.5rem;

        /*flex: 1 1 400px;*/
        max-width: 100%;
        box-shadow: var(--sombra-suave);
        transition: 0.3s;
        border-bottom: 5px solid var(--terracota);
        opacity: 0;
        transform: scale(0.95);
        animation: aparecer 0.5s 0.2s forwards;
    }

    .img-hero1{

        border-radius: 25px;
        max-width: 85%;

        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px white inset; /* Sombra exterior y borde blanco interno opcional */
        border: 4px solid white;  /* Borde blanco para resaltar */
        transition: transform 0.2s ease;    
    }

    .section-sub {
        text-align: center;
        color: #5e6f5e;
        font-size: 1.2rem;
        max-width: 100%;
        margin: 0 auto 3.5rem;
    }

    .servicios-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        /*gap: 1rem;*/
        gap: 4px;
        max-width:100%;
        margin: 0 auto;
        padding: 8px;
    }

    .servicios-grid .card {
        max-width: 100%;

    }



    .modal .row{
        max-width: 100%;
        display: block;
    }


}

/*---------------------------------------------------------------------------------*/

/* Móviles (480px - 767px) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* Estilos para móviles */

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero p { margin-left: auto; margin-right: auto; }
    .btn-group { justify-content: center; }
    .hero-img i { font-size: 10rem; }

    .nav-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .nav-menu {
        gap: 1.2rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-lang-toggle {
        margin-left: 0;
        padding: 4px 12px;
    }


    .contacto-container {
        grid-template-columns: 1fr;
    }

    .hero-planta-colgante{
        position: absolute;
        left: -100px;
        top:-20px;
        opacity: 50%;
        max-width: 80%
    }
    .info-hero {
        position: relative;
        /*top: -100px;*/

    }
    .info-hero .col-lg-4 {

    }

    .quienes-somos{       
        padding-left: 5%;
        padding-right: 5%;
        background: linear-gradient(135deg, white 40%, #006666 100%);
    }

    .mision-vision {
        padding-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
    }


    .mv-card {
        background: white;
        border-radius: 40px;
        padding: 3rem 2.5rem;

        /*flex: 1 1 400px;*/
        max-width: 100%;
        box-shadow: var(--sombra-suave);
        transition: 0.3s;
        border-bottom: 5px solid var(--terracota);
        opacity: 0;
        transform: scale(0.95);
        animation: aparecer 0.5s 0.2s forwards;
    }

    .img-hero1{

        border-radius: 25px;
        max-width: 85%;

        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px white inset; /* Sombra exterior y borde blanco interno opcional */
        border: 4px solid white;  /* Borde blanco para resaltar */
        transition: transform 0.2s ease;    
    }

    .section-sub {
        text-align: center;
        color: #5e6f5e;
        font-size: 1.2rem;
        max-width: 100%;
        margin: 0 auto 3.5rem;
    }

    .servicios-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        /*gap: 1rem;*/
        gap: 4px;
        max-width:100%;
        margin: 0 auto;
        padding: 8px;
    }

    .servicios-grid .card  {
        max-width: 100%;
    }   

    .modal .row{
        max-width: 100%;
        display: block;
    }


}
/*----------------------------------------------------------------------------------*/
/* Tablets (768px - 1023px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    /* Estilos para tablets */

    .hero-container {
        /*grid-template-columns: 1fr;*/
        text-align: left;
        padding-left: 25px;
    }
    .hero p { margin-left: auto; margin-right: auto; }
    .btn-group { justify-content:  center; }
    .hero-img i { font-size: 10rem; }

    .nav-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .nav-menu {
        gap: 1.2rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-lang-toggle {
        margin-left: 0;
        padding: 4px 12px;
    }


    .contacto-container {
        /*grid-template-columns: 1fr;*/
    }

    .hero-planta-colgante{
        position: absolute;
        left: -100px;
        top:-20px;
        opacity: 50%;
        max-width: 80%
    }
    .info-hero {
        position: relative;
    }

    .quienes-somos{       
        padding-left: 5%;
        padding-right: 5%;

        background: linear-gradient(135deg, white 40%, #006666 100%);
    }

    .mision-vision {

        padding-bottom: 10px;

        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
    }


    .mv-card {
        background: white;
        border-radius: 40px;
        padding: 3rem 2.5rem;

        max-width: 100%;
        box-shadow: var(--sombra-suave);
        transition: 0.3s;
        border-bottom: 5px solid var(--terracota);
        opacity: 0;
        transform: scale(0.95);
        animation: aparecer 0.5s 0.2s forwards;
    }

    .img-hero1{

        border-radius: 25px;
        max-width: 150%;

        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px white inset; /* Sombra exterior y borde blanco interno opcional */
        border: 4px solid white;  /* Borde blanco para resaltar */
        transition: transform 0.2s ease;    
    }

    .section-sub {
        text-align: center;
        color: #5e6f5e;
        font-size: 1.2rem;
        max-width: 100%;
        margin: 0 auto 3.5rem;
    }

    .servicios-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        /*gap: 1rem;*/
        gap: 4px;
        max-width:100%;
        margin: 0 auto;
        padding: 8px;
    }

    .servicios-grid .card {
        max-width: 100%;

    }

    .modal .row{
        max-width: 100%;
        display: block;
    }



}

/* Escritorio pequeño / laptops (1024px - 1279px) */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
    /* Estilos para escritorio pequeño */
    .hero-container {
        /*grid-template-columns: 1fr;*/
        text-align:  left;
        padding-left: 25px;
    }
    .hero p { margin-left: auto; margin-right: auto; }
    .btn-group { justify-content:  center; }
    .hero-img i { font-size: 10rem; }

    .nav-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .nav-menu {
        gap: 1.2rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-lang-toggle {
        margin-left: 0;
        padding: 4px 12px;
    }

    .contacto-container {
        /*grid-template-columns: 1fr;*/
    }

    .hero-planta-colgante{
        position: absolute;
        left: -100px;
        top:-20px;
        opacity: 50%;
        max-width: 80%
    }
    .info-hero {
        position: relative;
        margin-left: 2%;
        margin-right: 2%;
        top: -80px;
    }

    .quienes-somos{       
        padding-left: 5%;
        padding-right: 5%;
        background: linear-gradient(135deg, white 40%, #006666 100%);
    }

    .mision-vision {
        padding-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
    }


    .mv-card {
        background: white;
        border-radius: 40px;
        padding: 3rem 2.5rem;
        max-width: 100%;
        box-shadow: var(--sombra-suave);
        transition: 0.3s;
        border-bottom: 5px solid var(--terracota);
        opacity: 0;
        transform: scale(0.95);
        animation: aparecer 0.5s 0.2s forwards;
    }

    .img-hero1{
        border-radius: 25px;
        max-width: 150%;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px white inset; /* Sombra exterior y borde blanco interno opcional */
        border: 4px solid white;  /* Borde blanco para resaltar */
        transition: transform 0.2s ease;    
    }

    .section-sub {
        text-align: center;
        color: #5e6f5e;
        font-size: 1.2rem;
        max-width: 100%;
        margin: 0 auto 3.5rem;
    }

    .servicios-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        /*gap: 1rem;*/
        gap: 4px;
        max-width:100%;
        margin: 0 auto;
        padding: 8px;
    }

    .column1{
        max-width: 30%;
    }

    .servicios-grid .card {
        max-width: 100%;
    }




}

/* Escritorio estándar (1280px - 1439px) */
@media only screen and (min-width: 1280px) and (max-width: 1439px) {
    /*@media only screen and (min-width: 1280px) {*/
    /* Estilos para escritorio estándar */

    .hero-container {
        /*grid-template-columns: 1fr;*/
        text-align:  left;
        padding-left: 25px;
    }
    .hero p { margin-left: auto; margin-right: auto; }
    .btn-group { justify-content:  center; }
    .hero-img i { font-size: 10rem; }

    .nav-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .nav-menu {
        gap: 1.2rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-lang-toggle {
        margin-left: 0;
        padding: 4px 12px;
    }
    /*body { padding-top: 120px; }*/

    .contacto-container {
        /*grid-template-columns: 1fr;*/
    }

    .hero-planta-colgante{
        position: absolute;
        left: -100px;
        top:-20px;
        opacity: 50%;
        max-width: 80%
    }
    .info-hero {
        position: relative;
        /*top: -100px;*/
        margin-left: 10%;
        margin-right: 10%;
        top: -80px;
    }

    .quienes-somos{       
        padding-left: 5%;
        padding-right: 5%;
        /*background-color: rgb(233, 238, 245);*/
        background: linear-gradient(135deg, white 40%, #006666 100%);
    }

    .mision-vision {
        /*padding: 5rem 2rem;*/
        padding-bottom: 10px;
        /*background: var(--gris-claro);*/
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
    }


    .mv-card {
        background: white;
        border-radius: 40px;
        padding: 3rem 2.5rem;

        /*flex: 1 1 400px;*/
        max-width: 100%;
        box-shadow: var(--sombra-suave);
        transition: 0.3s;
        border-bottom: 5px solid var(--terracota);
        opacity: 0;
        transform: scale(0.95);
        animation: aparecer 0.5s 0.2s forwards;
    }

    .img-hero1{

        border-radius: 25px;
        max-width: 150%;

        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px white inset; /* Sombra exterior y borde blanco interno opcional */
        border: 4px solid white;  /* Borde blanco para resaltar */
        transition: transform 0.2s ease;    
    }

    .section-sub {
        text-align: center;
        color: #5e6f5e;
        font-size: 1.2rem;
        max-width: 100%;
        margin: 0 auto 3.5rem;
    }

    .servicios-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        /*gap: 1rem;*/
        gap: 4px;
        max-width:100%;
        margin: 0 auto;
        padding: 8px;
    }

    .column1{
        max-width: 30%;
    }

    .servicios-grid .card {
        max-width: 100%;
    }

}

/* Escritorio grande (1440px - 1919px) */
@media only screen and (min-width: 1440px) and (max-width: 1919px) {
    /* Estilos para escritorio grande */


    .hero-container {
        /*grid-template-columns: 1fr;*/
        text-align:  left;
        padding-left: 25px;
    }
    .hero p { margin-left: auto; margin-right: auto; }
    .btn-group { justify-content:  center; }
    .hero-img i { font-size: 10rem; }

    .nav-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .nav-menu {
        gap: 1.2rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-lang-toggle {
        margin-left: 0;
        padding: 4px 12px;
    }


    .contacto-container {
        /*grid-template-columns: 1fr;*/
    }

    .hero-planta-colgante{
        position: absolute;
        left: -100px;
        top:-20px;
        opacity: 50%;
        max-width: 80%
    }
    .info-hero {
        position: relative;
        margin-left: 10%;
        margin-right: 10%;
        top: -80px;
    }

    .quienes-somos{       
        padding-left: 5%;
        padding-right: 5%;
        background: linear-gradient(135deg, white 40%, #006666 100%);
    }

    .mision-vision {
        /*padding: 5rem 2rem;*/
        padding-bottom: 10px;
        /*background: var(--gris-claro);*/
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
    }


    .mv-card {
        background: white;
        border-radius: 40px;
        padding: 3rem 2.5rem;

        /*flex: 1 1 400px;*/
        max-width: 100%;
        box-shadow: var(--sombra-suave);
        transition: 0.3s;
        border-bottom: 5px solid var(--terracota);
        opacity: 0;
        transform: scale(0.95);
        animation: aparecer 0.5s 0.2s forwards;
    }

    .img-hero1{
        border-radius: 25px;
        max-width: 150%;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px white inset; /* Sombra exterior y borde blanco interno opcional */
        border: 4px solid white;  /* Borde blanco para resaltar */
        transition: transform 0.2s ease;    
    }

    .section-sub {
        text-align: center;
        color: #5e6f5e;
        font-size: 1.2rem;
        max-width: 100%;
        margin: 0 auto 3.5rem;
    }

    .servicios-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        /*gap: 1rem;*/
        gap: 4px;
        max-width:100%;
        margin: 0 auto;
        padding: 8px;
    }

    .column1{
        max-width: 30%;
    }

    .servicios-grid .card {
        max-width: 100%;
    }

}

/* Pantallas extra grandes (1920px y más) */
@media only screen and (min-width: 1920px) {
    /* Estilos para pantallas extra grandes */


    .hero-container {
        /*grid-template-columns: 1fr;*/
        text-align:  left;
        padding-left: 25px;
    }
    .hero p { margin-left: auto; margin-right: auto; }
    .btn-group { justify-content:  center; }
    .hero-img i { font-size: 10rem; }

    .nav-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .nav-menu {
        gap: 1.2rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-lang-toggle {
        margin-left: 0;
        padding: 4px 12px;
    }


    .contacto-container {
        /*grid-template-columns: 1fr;*/
    }

    .hero-planta-colgante{
        position: absolute;
        left: -100px;
        top:-20px;
        opacity: 50%;
        max-width: 80%
    }
    .info-hero {
        position: relative;
        max-width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        top: -80px;

    }

    .quienes-somos{       
        padding-left: 5%;
        padding-right: 5%;
        background: linear-gradient(135deg, white 40%, #006666 100%);
    }

    .mision-vision {
        padding-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
    }


    .mv-card {
        background: white;
        border-radius: 40px;
        padding: 3rem 2.5rem;

        /*flex: 1 1 400px;*/
        max-width: 100%;
        box-shadow: var(--sombra-suave);
        transition: 0.3s;
        border-bottom: 5px solid var(--terracota);
        opacity: 0;
        transform: scale(0.95);
        animation: aparecer 0.5s 0.2s forwards;
    }

    .img-hero1{
        border-radius: 25px;
        max-width: 160%;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px white inset; /* Sombra exterior y borde blanco interno opcional */
        border: 4px solid white;  /* Borde blanco para resaltar */
        transition: transform 0.2s ease;    
    }

    .section-sub {
        text-align: center;
        color: #5e6f5e;
        font-size: 1.2rem;
        max-width: 100%;
        margin: 0 auto 3.5rem;
    }

    .servicios-grid {     
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        /*gap: 1rem;*/
        gap: 4px;
        max-width:100%;
        margin: 0 auto;
        padding: 2%;
    }

    .column1{
        max-width: 30%;
    }

    .servicios-grid .card {
        max-width: 100%;
    }
}