
/* ############### MOBILE ###############   */

@media (max-width: 481px) { 
    /* Estilos para móviles grandes y tablets pequeñas en vertical */ 
    /* Ajustes en el header */

    /* *{
        background-color: red;
    } */

    .desktop, .tablet {
        display: none;
    }
    
    .mobile {
        display: block;
    }
    

    h1 {
        font-size: 1.2rem;
    }

    h2 {    
        font-size: 1.5rem;
    }

    h4{
        font-size: 1rem;
    }

    .location-section {
        padding: 30px;

    }
     
    .header-content {
        flex-direction: row;
        justify-content: center;
        padding: 0 20px;
    }

    /* .header-left .logo-text {
        font-size: 0.8rem; 
    }
 */
    /* Ajustes en la sección de íconos de redes sociales */
    .header-right {
        display: none; /* Oculta la sección de iconos y texto */
        /* align-items: flex-end; */ /* Alineamos a la derecha */
      /*   padding-bottom: 0; */
    }

    .header-right .icons {
        gap: 5px; /* Reducimos el espacio entre los íconos para pantallas más estrechas */
        margin-left: 0;
        margin-top: 0;
    }

    /* Ajustes en la sección de cita (schedule-call) */
    .schedule-call-section {
        background-size: cover; /* Aseguramos que la imagen de fondo se ajuste al contenedor */
        padding: 1.5rem 0;
    }

    .schedule-call-title {
        padding-left: 4rem;
        padding-right: 4rem;
        margin-top: 0;
        font-weight: 500;
    }

    /* Ajustes en la sección de videos de YouTube */
    .youtube-section {
        padding: 50px 20px; /* Reducimos el padding para pantallas más pequeñas */
    }

    .youtube-title {
        font-size: 1.5rem; /* Ajustamos el tamaño del título */
    }

    .videos {
        flex-direction: column;
        gap: 20px; /* Espacio entre videos */
    }

    .videos iframe {
        width: 100%; /* Ajustamos el ancho al contenedor  */
        height: auto; /* Dejar que la altura se ajuste automáticamente */
    }

    /* Ajustes en el formulario de suscripción */
    .subscribe-title {
        font-size: 35px; /* Reducimos el tamaño del título */
        margin-top: -10px;
    }

    .subscribe-description {
        font-size: 18px; /* Reducimos el tamaño del texto */
        padding: 10px 20px;
    }

    .subscribe-content {
        max-width: 100%; /* Ajustamos el ancho del formulario */
        padding: 20px;
    }

    /* Ajustes en el footer */
    .footer-content {
        flex-direction: column; /* Colocamos el contenido en columna para evitar saturación horizontal */
        text-align: center;
        padding: 20px;
    }

    .footer-icons {
        gap: 10px; /* Reducimos el espacio entre los íconos */
    }

    .footer-left, .footer-middle, .footer-right {
        margin: 10px 0; /* Añadimos espacio entre cada sección del footer */
    }

    .cta-button-content i, .cta-text {
        font-size: 1.2rem;
    }

    .footer-contact {
        flex-direction: column;
    }

    .footer-logo {
        display: block; /* Asegura que se comporte como un elemento bloque */
        margin: auto; /* Centra horizontalmente */
    }
}
