/* --------------------------- Responsive Design --------------------------- */

@media (min-width:1200px) and (max-width:1440px) {

    /* ---------------------------------------------------- Estilos genericos ---------------------------------------------------- */
    /* Titulos de cada seccion */

    .section-title {
        margin-top: 2vw;
        font-size: 1.8rem;
    }

    .section-title::after {
        width: 8vw;
        height: 3px;
    }


    /* --------------------------- Seccion Empresa --------------------------- */
    .empresa {
        display: flex;
        justify-content: center;
        margin-top: 10vw;
    }

    .empresa p {
        font-size: 1.3em;
    }

    .boton {
        padding: 1vw 2vw;
        border-radius: 10px;
        background-color: #2C537C;
        color: white;
        font-size: 17px;
    }

    .boton:hover {
        background-color: #2A61B3;

    }

    /* --------------------------- Seccion Productos --------------------------- */

    /* --------------------------- Seccion Servicios --------------------------- */

    .servicios {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .imagenes,
    .imagenes1 {
        display: flex;
        justify-content: center;
    }

    .imagenes {
        width: 100%;
    }

    .imagenes1 {
        width: 90%;
        margin: 0 6vw;
    }

    .imagenes img {
        width: 25vw;
    }

    .imagenes1 img {
        width: 18.5vw;
    }

    .texto {
        display: flex;
        flex-direction: column;
        width: 80%;
        justify-self: center;
        padding: 4vw;
    }


    /* --------------------------- Seccion Preguntas --------------------------- */


    .gracias {
        margin-top: 2vw;
        margin-bottom: 2vw;
        padding: 5vw 0;
        text-align: center;
        font-size: 2.2rem;
        font-family: 'system-ui, -apple-system, BlinkMacSystemFont, ' Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, ' Open Sans', ' Helvetica Neue', sans-serif';
        color: #325278f9;
        /* Azul marino */
        position: relative;
    }
}

@media (min-width:992px) and (max-width:1200px) {

    /* ---------------------------------------------------- Estilos genericos ---------------------------------------------------- */
    /* Titulos de cada seccion */

    .section-title {
        margin-top: 2vw;
        font-size: 1.8rem;
    }

    .section-title::after {
        width: 8vw;
        height: 3px;
    }


    /* --------------------------- Seccion Empresa --------------------------- */
    .empresa {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10vw;
        margin-bottom: 5vw;
        gap: 5vw;
    }

    .empresa h1 {
        font-size: 2.5em;
    }

    .empresa h3 {
        font-size: 1.5em;
    }

    .empresa p {
        font-size: .9em;
    }

    .boton {
        padding: 1vw 2vw;
        border-radius: 10px;
        background-color: #2C537C;
        color: white;
        font-size: .9em;
    }


    /* --------------------------- Seccion Productos --------------------------- */

    /* --------------------------- Seccion Servicios --------------------------- */

    .servicios {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .imagenes,
    .imagenes1 {
        display: flex;
        justify-content: center;
    }

    .imagenes {
        width: 100%;
    }

    .imagenes1 {
        width: 90%;
        margin: 0 6vw;
    }

    .imagenes img {
        width: 25vw;
    }

    .imagenes1 img {
        width: 18.5vw;
    }

    .texto {
        display: flex;
        flex-direction: column;
        width: 70%;
        justify-self: center;
        padding: 3vw;
    }

    /* --------------------------- Seccion Preguntas --------------------------- */


    .gracias {
        margin-top: 2vw;
        margin-bottom: 2vw;
        padding: 5vw 0;
        text-align: center;
        font-size: 2.2rem;
        font-family: 'system-ui, -apple-system, BlinkMacSystemFont, ' Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, ' Open Sans', ' Helvetica Neue', sans-serif';
        color: #325278f9;
        /* Azul marino */
        position: relative;
    }
}

@media (min-width:768px) and (max-width:992px) {
    /* ---------------------------------------------------- Estilos genericos ---------------------------------------------------- */
    /* Titulos de cada seccion */

    .section-title {
        margin-top: 2vw;
        text-align: center;
        font-size: 1.5rem;
    }

    .section-title::after {
        content: '';
        display: block;
        width: 8vw;
        height: 2px;
        margin: 10px auto;
    }

    /* --------------------------- Seccion Empresa --------------------------- */
    .empresa {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-top: 10vw;
        margin-bottom: 5vw;
        gap: 5vw;
    }

    .empresa h1 {
        font-size: 2em;
    }

    .empresa h3 {
        font-size: 1em;
    }

    .empresa p {
        font-size: .8em;
    }

    .boton {
        padding: 1vw 2vw;
        border-radius: 10px;
        background-color: #2C537C;
        color: white;
        font-size: .6em;
    }

    /* --------------------------- Seccion Productos --------------------------- */

    /* --------------------------- Seccion Servicios --------------------------- */
    .servicios {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .imagenes,
    .imagenes1 {
        display: flex;
        justify-content: center;
    }

    .imagenes {
        width: 100%;
    }

    .imagenes1 {
        width: 90%;
        margin: 0 6vw;
    }

    .imagenes img {
        width: 25vw;
    }

    .imagenes1 img {
        width: 18.5vw;
    }

    .texto {
        display: flex;
        flex-direction: column;
        width: 75%;
        justify-self: center;
        padding: 3vw;
    }

    /* --------------------------- Seccion Preguntas --------------------------- */



    /* ---------------------------------------------------- Contact Section ---------------------------------------------------- */

    form {
        display: flex;
        flex-direction: column;
        /* Organización en columna */
        align-items: stretch;
        /* Inputs ocupan todo el ancho disponible dentro del formulario */
        position: relative;
        /* Para posicionar el botón */
        max-width: 100%;
        /* El formulario ocupará un % del ancho */
        margin: 0 auto;
        /* Centra el formulario horizontalmente */
        gap: 1rem;
        /* Espaciado entre elementos */
        padding: 1rem;
        border-radius: 8px;
        box-sizing: border-box;
        /* Evita problemas con padding */
        padding-bottom: 4rem;
        /* Espacio suficiente para el botón */
    }

    /* Estilos para los inputs y textarea */
    input,
    textarea {
        padding: 1rem;
        border: 1px solid #176f8c;
        border-radius: 5px;
        font-size: 1.3vw;
        width: 100%;
        /* Se adapta al contenedor del formulario */
        box-sizing: border-box;
        /* Evita que el padding afecte el ancho */
    }

    textarea {
        margin-bottom: 1rem;
    }

    /* Posición del botón */
    form button {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        padding: 0.75rem 1.5rem;
        background: #0d4e64;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1rem;
    }

    /* Hover en el botón */
    form button:hover {
        border: 1px solid #0d4e64;
        background: #ff7043;
        /* Cambia el color al pasar el cursor */
    }

    .gracias {
        margin-top: 2vw;
        margin-bottom: 2vw;
        padding: 5vw 0;
        text-align: center;
        font-size: 1.6rem;
        font-family: 'system-ui, -apple-system, BlinkMacSystemFont, ' Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, ' Open Sans', ' Helvetica Neue', sans-serif';
        color: #325278f9;
        /* Azul marino */
        position: relative;
    }



}

@media (min-width:450px) and (max-width:768px) {

    /* ---------------------------------------------------- Estilos genericos ---------------------------------------------------- */
    /* Titulos de cada seccion */
    .section-title {
        margin-top: 2vw;
        text-align: center;
        font-size: 1.2rem;
    }

    .section-title::after {
        content: '';
        display: block;
        width: 8vw;
        height: 2px;
        margin: 10px auto;
    }

    /* --------------------------- Seccion Empresa --------------------------- */
    .empresa {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 10vw;
        margin-bottom: 5vw;
        gap: 5vw;
    }

    .empresa img {
        width: 100%;
        padding: 0 5vw;
        text-align: center;
    }

    .empresa h1 {
        font-size: 2.8em;
        text-align: center;
    }

    .empresa h3 {
        font-size: 1.6em;
    }

    .empresa p {
        font-size: 1em;
    }

    .boton {
        padding: 1vw 2vw;
        border-radius: 10px;
        background-color: #2C537C;
        color: white;
        font-size: 13px;
    }

    /* --------------------------- Seccion Productos --------------------------- */

    .grid-container {
        width: 90vw;
        gap: 15px;
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas en tabletas y móviles grandes */
        aspect-ratio: auto;
        /* Desactiva el aspecto cuadrado para mejor adaptación en móviles */
    }

    .grid-item {
        padding: 20px;
        font-size: 0.9em;
    }

    .grid-item h3 {
        font-size: 1.3em;
    }

    .grid-item p {
        font-size: 0.85em;
    }

    .grid-item .btn {
        padding: 8px 18px;
        font-size: 0.8em;
    }


    /* --------------------------- Seccion Servicios --------------------------- */
    .servicios {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .imagenes,
    .imagenes1 {
        display: flex;
        justify-content: center;
    }

    .imagenes {
        width: 100%;
    }

    .imagenes1 {
        width: 90%;
        margin: 0 6vw;
    }

    .imagenes img {
        width: 25vw;
    }

    .imagenes1 img {
        width: 18.5vw;
    }

    .texto {
        display: flex;
        flex-direction: column;
        width: 70%;
        justify-self: center;
        padding: 3vw;
    }

    .texto p {
        font-size: 15px;
    }

    .texto h3 {
        font-size: 20px;
    }

    /* --------------------------- Seccion Preguntas --------------------------- */

    .faq-section {
        width: 95%;
        /* Más ancho en pantallas pequeñas */
        margin: 40px auto;
    }

    .faq-section h2 {
        font-size: 2em;
    }

    .faq-section .faq-intro {
        font-size: 1em;
        margin-bottom: 30px;
    }

    .accordion-header {
        padding: 18px 20px;
        font-size: 1.05em;
    }

    .accordion-header .icon {
        font-size: 1.3em;
    }

    .accordion-content {
        padding: 0 20px;
    }

    .accordion-content.active {
        padding: 15px 20px 20px;
    }


    /* ---------------------------------------------------- Contact Section ---------------------------------------------------- */

    form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: relative;
        max-width: 100%;
        margin: 0 auto;
        gap: 0;
        padding: 1rem;
        border-radius: 8px;
        box-sizing: border-box;
        padding-bottom: 4rem;
    }

    input,
    textarea {
        padding: 1rem;
        border: 1px solid #176f8c;
        border-radius: 5px;
        font-size: .8rem;
        width: 100%;
        box-sizing: border-box;
    }

    textarea {
        margin-bottom: 1rem;
    }

    /* Posición del botón */
    form button {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        padding: 0.75rem 1rem;
        font-size: .8rem;
    }

    .gracias {
        margin-top: 2vw;
        margin-bottom: 2vw;
        padding: 5vw 0;
        text-align: center;
        font-size: 1.1rem;
        font-family: 'system-ui, -apple-system, BlinkMacSystemFont, ' Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, ' Open Sans', ' Helvetica Neue', sans-serif';
        color: #325278f9;
        /* Azul marino */
        position: relative;
    }


}

@media (max-width:450px) {
    /* ---------------------------------------------------- Estilos genericos ---------------------------------------------------- */
    /* Titulos de cada seccion */

    .section-title h2 {
        margin-top: 3vw;
        text-align: center;
        font-size: 1.3rem;
    }

    .section-title::after {
        content: '';
        display: block;
        width: 10vw;
        height: 2px;
        margin: 5px auto;
    }



    /* --------------------------- Seccion Empresa --------------------------- */
    .empresa {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 10vw;
        margin-bottom: 5vw;
    }

    .empresa img {
        width: 100%;
        padding: 0 10vw;
        text-align: center;
    }

    .empresa .texto {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .empresa h1 {
        font-size: 2em;
        text-align: center;
    }

    .empresa h3 {
        font-size: 1.2em;
        text-align: center;
    }

    .empresa p {
        font-size: .8em;
        text-align: center;
    }

    .boton {
        align-content: center;
        margin-left: 31vw;
        padding: 1vw 2vw;
        border-radius: 10px;
        background-color: #2C537C;
        color: white;
        font-size: 12px;
    }

    /* --------------------------- Seccion Productos --------------------------- */
    .productos{
        padding: 2vw;
    }

    .grid-container {
        width: 90vw;
        gap: 15px;
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas en tabletas y móviles grandes */
        aspect-ratio: auto;
        /* Desactiva el aspecto cuadrado para mejor adaptación en móviles */
    }

    .grid-item {
        padding: 10px;
        font-size: 0.9em;
    }

    .grid-item h3 {
        font-size: 1.3em;
    }

    .grid-item p {
        font-size: 0.85em;
    }

    .grid-item .btn {
        padding: 8px 18px;
        font-size: 0.8em;
    }

    /* --------------------------- Seccion Servicios --------------------------- */

    .servicios {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .imagenes,
    .imagenes1 {
        display: flex;
        justify-content: center;
    }

    .imagenes {
        width: 100%;
    }

    .imagenes1 {
        width: 100%;
        margin: 0 6vw;
    }

    .imagenes img {
        width: 30vw;
    }

    .imagenes1 img {
        width: 23vw;
    }

    .texto {
        display: flex;
        flex-direction: column;
        width: 85%;
        justify-self: center;
        padding: 3vw;
    }

    .texto p {
        font-size: 15px;
        text-align: justify;
    }

    .texto h3 {
        font-size: 18px;
    }

    /* --------------------------- Seccion Preguntas --------------------------- */

    .faq-section {
        padding: 0;
        margin: 1vw;
        width: 95%;
    }

    .faq-section h2 {
        font-size: 1.8em;
    }

    .accordion-header {
        padding: 15px 15px;
        font-size: 1em;
    }

    .accordion-content.active {
        padding: 10px 15px 15px;
    }



    /* ---------------------------------------------------- Contact Section ---------------------------------------------------- */

    form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: relative;
        max-width: 90%;
        margin: 0 auto;
        gap: 0;
        padding: 1rem;
        border-radius: 8px;
        box-sizing: border-box;
        padding-bottom: 4rem;
    }

    input,
    textarea {
        padding: 1rem;
        border: 1px solid #176f8c;
        border-radius: 5px;
        font-size: .8rem;
        width: 100%;
        box-sizing: border-box;
    }

    textarea {
        margin-bottom: 0;
    }

    /* Posición del botón */
    form .btn-primary {
        position: absolute;
        padding: .4rem;
        font-size: .7rem;
    }

    .gracias {
        margin-top: 2vw;
        margin-bottom: 2vw;
        padding: 5vw 0;
        text-align: center;
        font-size: .7rem;
        font-family: 'system-ui, -apple-system, BlinkMacSystemFont, ' Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, ' Open Sans', ' Helvetica Neue', sans-serif';
        color: #325278f9;
        /* Azul marino */
        position: relative;
    }

}