@import url("shared.css");
/*RESPONSIVE*/
/*tabled*/

@media(max-width: 768px) {
    /*header*/
    .mostrar-menu,
    .esconder-menu {
        display: block;
    }
    .menu {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: linear-gradient(180deg, rgba(36, 37, 81, 0.98), rgba(36, 37, 81, 0.96));
        right: -100%;
        /*volvemos a agregar esto*/
        top: 0;
        text-align: center;
        padding: 100px 0px;
        z-index: 100;
        transition: right 0.35s ease;
        flex-direction: column;
        justify-content: flex-start;
        gap: 10px;
    }
    .menu a {
        display: block;
        padding: 20px;
    }
    .esconder-menu {
        position: absolute;
        top: 40px;
        right: 40px;
    }
    #check:checked~.menu {
        right: 0;
    }
    /*BANNER*/
    .carousel-item {
        transition: opacity 1s;
        height: 300px;
    }
    .content {
        flex-direction: column;
        text-align: center;
    }
    .image,
    .text {
        padding: 10px;
    }
    /*PERSONAS*/
    #personas {
        flex-direction: column;
        padding: 0px 50px;
    }
    .mapa iframe {
        max-width: 600px;
        /* Ancho máximo del mapa en tablet */
    }
    /*ICONOS*/
    .contenido-iconos {
        flex-direction: column;
    }
    .contenido-iconos div {
        border: none;
    }
    /*.'FORMULARIO*/
    .datos-form {
        flex-direction: column;
    }
    .service {
        width: calc(50% - 20px);
        /* Dos servicios por fila en tablet */
    }
}

@media screen and (max-width: 480px) {
    .service {
        width: calc(100% - 20px);
        /* Un servicio por fila en móvil */
    }
    .mapa iframe {
        max-width: 400px;
        /* Ancho máximo del mapa en móvil */
    }
}