/* ==================================================
TABLET
================================================== */

@media(max-width:1200px){

    .contenido_principal{
        flex-direction:column;
    }

    .separador-vertical{
        display:none;
    }

    .seccionEventos,
    .seccionNoticias,
    .seccionPodcast{
        width:auto;
        max-width:none;
        margin:20px;
    }

}


/* ==================================================
MENU HAMBURGUESA
================================================== */

.menu-toggle{
    display:none;
}


/* ==================================================
MOVIL
================================================== */

@media(max-width:768px){

    .top-header{
        justify-content:center;
    }

    .navbar{
        background:#004a99;
        padding:10px 15px;
        display:flex;
        align-items:center;
        flex-wrap:wrap;
    }

    .menu{
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        width:100%;
        margin:0;
        padding:0;
        background:#004a99;
    }

    .menu > a{
        display:block;
        order:1;
    }

    .menu > a .logo-navbar{
        height:42px;
        width:auto;
        max-width:none;
        display:block;
    }

    .menu-toggle{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:5px;

        width:45px;
        height:45px;

        margin-left:auto;

        background:#002d72;
        border:none;
        border-radius:6px;

        cursor:pointer;
        z-index:1001;

        order:2;
    }

    .menu-toggle span{
        width:28px;
        height:3px;
        background:white;
        display:block;
        border-radius:2px;
    }

    .menu > li{
        display:none;
        width:100%;
        order:3;
    }

    .menu.activo > li{
        display:block;
    }

    .menu > li > a{
        padding:15px 20px;
        border-top:1px solid rgba(255,255,255,.10);
    }

    .usuario-info{
        margin-left:0;
    }

    .submenu{
        position:static;
        width:100%;
        min-width:100%;
        background:#0061c2;
    }

    .menu li.abierto .submenu{
        display:block;
    }

    .menu li:hover .submenu{
        display:none;
    }

    .menu li.abierto:hover .submenu{
        display:block;
    }


    /* ==================================================
    EVENTOS RESPONSIVE - SLIDER VERTICAL
    ================================================== */

    .eventos-slider{
        height:390px;
        overflow:hidden;
    }

    .eventos-slider .slick-list{
        height:390px !important;
        overflow:hidden;
    }

    .eventos-slider .slick-track{
        display:block !important;
    }

    .eventos-slider .slick-slide{
        height:195px !important;
        box-sizing:border-box;
        padding-bottom:15px;
    }

    .eventos-slider .slick-slide > div{
        height:100%;
    }

    .evento{
        height:180px;
        min-height:180px;
        overflow:hidden;
        padding:14px;
        box-sizing:border-box;
        flex-direction:column;
    }

    .evento h3{
        font-size:15px;
        line-height:1.25;
        margin-bottom:8px;
        min-width:auto;
    }

    .evento .info{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

    .evento p{
        font-size:13px;
        line-height:1.25;
    }

}


/* ==================================================
MOVIL PEQUEÑO
================================================== */

@media(max-width:576px){

    .social-icons{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
    }

    .social-icons a{
        margin:0 8px;
    }

    .menu > a .logo-navbar{
        height:40px;
    }

    .banner-slider img{
        max-height:180px;
    }

    .seccionEventos h2,
    .seccionNoticias h2,
    .seccionPodcast h2,
    .seccionPatrocinadores h2,
    .seccionPromos h2{
        font-size:24px;   
    }

    .seccionPromos img{
       max-height:100px; 
    }

}

/* ==================================================
CONSEJO DIRECTIVO RESPONSIVE
================================================== */

@media(max-width:768px){

    .contenedorConsejo h1{
        font-size:28px;
    }

    .consejo-horizontal{
        display:none;
    }

    .consejo-vertical{
        display:block;
        width:100%;
        border-radius:10px;
    }

}

/* ==================================================
NUESTRO STAFF RESPONSIVE
================================================== */

@media(max-width:768px){

    .contenedorStaff h1{
        font-size:28px;
    }

    .staff-horizontal{
        display:none;
    }

    .staff-vertical{
        display:block;
        width:100%;
        border-radius:10px;
    }

}

/* ==================================================
QUIÉNES SOMOS RESPONSIVE
================================================== */

@media(max-width:992px){

    .bloqueIntroQuienesSomos{
        grid-template-columns:1fr;
    }

    .videoQuienesSomos video,
    .placeholderVideo{
        min-height:300px;
    }

    .bloqueMisionVision{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .seccionQuienesSomos{
        padding:30px 15px;
    }

    .contenedorQuienesSomos h1{
        font-size:28px;
        margin-bottom:25px;
    }

    .galeriaQuienesSomos h2{
        font-size:22px;
    }

    .itemGaleriaQuienes img,
    .placeholderGaleria{
        height:260px;
    }

    .cardMisionVision{
        padding:24px;
    }

    .cardMisionVision h2{
        font-size:23px;
    }

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

    .bloqueHistoria{
        padding:25px;
    }

    .bloqueHistoria h2{
        font-size:24px;
    }

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

    .bloquePresidentes h2{
        font-size:26px;
    }

}

@media(max-width:480px){

    .videoQuienesSomos video,
    .placeholderVideo{
        min-height:220px;
    }

    .itemGaleriaQuienes img,
    .placeholderGaleria{
        height:220px;
    }

    .cardPresidente img{
        width:130px;
        height:170px;
    }

}

/* ==================================================
CONVENIOS RESPONSIVE
================================================== */

@media(max-width:1200px){

    .gridConveniosSimples{
        grid-template-columns:repeat(3, 1fr);
    }

    .gridConveniosInstituciones{
        grid-template-columns:repeat(2, 1fr);
    }

}

@media(max-width:768px){

    .seccionConvenios{
        padding:35px 15px;
    }

    .contenedorConvenios h1{
        font-size:30px;
    }

    .introConvenios{
        font-size:15px;
        margin-bottom:30px;
    }

    .bloqueConveniosSocios{
        padding:20px;
    }

    .encabezadoConvenios{
        flex-direction:column;
    }

    .gridConveniosSimples,
    .gridConveniosInstituciones{
        grid-template-columns:1fr;
    }

    .cardConvenioSocio,
    .cardConvenioInstitucion{
        height:540px;
        min-height:540px;
    }

    .modalConvenioContenido{
        padding:25px;
    }

    .modalConvenioContenido h2{
        font-size:24px;
    }

}

@media(max-width:480px){

    .contenedorConvenios h1{
        font-size:26px;
    }

    .bloqueConvenios h2{
        font-size:24px;
    }

    .btnConvenios,
    .btnConveniosSecundario{
        width:100%;
        text-align:center;
        box-sizing:border-box;
    }

    .cardConvenioSocio,
    .cardConvenioInstitucion{
        height:520px;
        min-height:520px;
    }

    .modalConvenioContenido{
        padding:22px;
    }

}

/* ==================================================
LOGIN SOCIO RESPONSIVE
================================================== */

@media(max-width:768px){

    .seccionLoginSocio{
        padding:40px 20px;
        min-height:auto;
    }

    .contenedorLoginSocio{
        max-width:100%;
    }

    .cardLoginSocio{
        padding:32px 28px;
    }

    .cardLoginSocio h1{
        font-size:28px;
    }

}

@media(max-width:576px){

    .seccionLoginSocio{
        padding:30px 15px;
    }

    .cardLoginSocio{
        padding:25px 20px;
    }

    .cardLoginSocio h1{
        font-size:24px;
    }

    .cardLoginSocio p{
        font-size:14px;
    }

    .cardLoginSocio input{
        padding:13px 14px;
    }

    .cardLoginSocio button{
        padding:14px;
        font-size:15px;
    }

}

/* ==================================================
NAVBAR SOCIO RESPONSIVE
================================================== */

@media(max-width:768px){

    .socio-navbar-info{
        display:none;
        width:100%;
        padding:15px 20px;
        border-top:1px solid rgba(255,255,255,.10);
        box-sizing:border-box;
    }

    .menu.activo .socio-navbar-info{
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .nombre-socio-navbar{
        max-width:220px;
    }

}

@media(max-width:480px){

    .nombre-socio-navbar{
        max-width:170px;
    }

}

/* ==================================================
INICIO PORTAL SOCIO RESPONSIVE
================================================== */

@media(max-width:768px){

    .seccionInicioSocio{
        padding:40px 15px;
    }

    .cardInicioSocio{
        padding:32px 24px;
    }

    .cardInicioSocio h1{
        font-size:28px;
    }

    .cardInicioSocio h2{
        font-size:23px;
    }

    .datosInicioSocio{
        grid-template-columns:1fr;
    }

}

@media(max-width:480px){

    .cardInicioSocio{
        padding:28px 20px;
    }

    .logoInicioSocio{
        width:200px;
        height:130px;
    }

    .logoInicioSocio img{
        max-width:170px;
        max-height:100px;
    }

}

/* ==================================================
CONTENIDO DEL DASHBOARD RESPONSIVE
================================================== */

@media screen and (max-width:1050px){

    .itemEventoDashboardSocio{
        grid-template-columns:74px minmax(0,1fr) 140px 120px;
    }

    .accionesEventoDashboardSocio{
        grid-column:2 / -1;
        justify-content:flex-end;
    }

    .botonVerQREventoSocio{
        width:auto;
        min-width:125px;
    }

}

@media screen and (max-width:850px){

    .seccionContenidoDashboardSocio{
        padding:0 15px 55px;
    }

    .seccionEventosDashboardSocio{
        padding:27px 22px;
    }

    .encabezadoEventosDashboardSocio{
        flex-direction:column;
        align-items:flex-start;
    }

    .itemEventoDashboardSocio{
        grid-template-columns:70px minmax(0,1fr);
        gap:16px;
    }

    .precioEventoDashboardSocio,
    .estatusEventoDashboardSocio,
    .accionesEventoDashboardSocio{
        grid-column:2;
    }

    .accionesEventoDashboardSocio{
        justify-content:flex-start;
    }

    .botonVerQREventoSocio{
        width:auto;
    }

    .avisoPagosPendientesSocio{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .botonDatosBancariosSocio{
        margin-left:66px;
    }

    .bannerPatrociniosDashboardSocio{
        grid-template-columns:60px minmax(0,1fr);
    }

    .iconoBannerPatrociniosSocio{
        width:60px;
        height:60px;
    }

    .bannerPatrociniosDashboardSocio > strong{
        grid-column:2;
        justify-self:start;
    }

}

@media screen and (max-width:576px){

    .seccionContenidoDashboardSocio{
        padding:0 14px 45px;
    }

    .seccionEventosDashboardSocio{
        padding:22px 16px;
        border-radius:14px;
    }

    .encabezadoEventosDashboardSocio{
        margin-bottom:22px;
    }

    .encabezadoEventosDashboardSocio h2{
        font-size:24px;
    }

    .encabezadoEventosDashboardSocio p{
        font-size:13px;
    }

    .botonExplorarEventosSocio{
        width:100%;
    }

    .itemEventoDashboardSocio{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:15px;
        padding:17px;
    }

    .fechaEventoDashboardSocio{
        width:66px;
        min-height:66px;
    }

    .fechaEventoDashboardSocio span{
        font-size:23px;
    }

    .informacionEventoDashboardSocio h3{
        font-size:17px;
    }

    .datosEventoDashboardSocio{
        flex-direction:column;
        gap:7px;
    }

    .precioEventoDashboardSocio,
    .estatusEventoDashboardSocio,
    .accionesEventoDashboardSocio{
        width:100%;
    }

    .accionesEventoDashboardSocio{
        justify-content:stretch;
    }

    .botonVerQREventoSocio{
        width:100%;
    }

    .avisoPagosPendientesSocio{
        flex-direction:column;
        gap:13px;
        padding:17px;
    }

    .iconoAvisosPendientesSocio{
        width:43px;
        height:43px;
    }

    .botonDatosBancariosSocio{
        width:100%;
        margin-left:0;
    }

    .mensajeEventosDashboardVacio{
        padding:40px 17px;
    }

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

    .botonExplorarEventosVacio{
        width:100%;
    }

    .bannerPatrociniosDashboardSocio{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:17px;
        padding:23px 19px;
        border-radius:14px;
    }

    .iconoBannerPatrociniosSocio{
        width:55px;
        height:55px;
        font-size:22px;
    }

    .bannerPatrociniosDashboardSocio h2{
        font-size:21px;
    }

    .bannerPatrociniosDashboardSocio p{
        font-size:12px;
    }

    .bannerPatrociniosDashboardSocio > strong{
        width:100%;
        justify-content:center;
        box-sizing:border-box;
    }

    .modalQREventoSocio,
    .modalDatosBancariosSocio{
        align-items:flex-end;
        padding:10px;
    }

    .contenidoModalQREventoSocio,
    .contenidoModalDatosBancariosSocio{
        max-height:94vh;
        padding:30px 18px 23px;
        border-radius:17px 17px 10px 10px;
    }

    .contenidoModalQREventoSocio h2,
    .contenidoModalDatosBancariosSocio h2{
        font-size:23px;
    }

    .imagenModalQREventoSocio{
        padding:14px;
    }

    .imagenModalQREventoSocio img{
        max-width:240px;
    }

}

/* ==================================================
EVENTOS SOCIO RESPONSIVE
================================================== */

@media(max-width:1200px){

    .layoutEventosSocio{
        grid-template-columns:1fr;
        gap:22px;
    }

    .sliderMiniaturasEventos{
        height:300px;
    }

    .miniaturaEventoSocio{
        padding:10px;
    }

    .miniaturaEventoSocio img,
    .miniaturaEventoPlaceholder{
        height:220px;
    }

    .columnaFormularioEvento,
    .columnaMapaEvento{
        width:100%;
        box-sizing:border-box;
    }

    .seatingMapSocio{
        min-height:520px;
        max-height:620px;
        overflow:auto;
    }

}

@media(max-width:768px){

    .seccionEventosSocio{
        padding:25px 12px;
    }

    .contenedorEventosSocio h1{
        font-size:28px;
        margin-bottom:25px;
    }

    .layoutEventosSocio{
        gap:18px;
    }

    .columnaMiniaturasEventos,
    .columnaFormularioEvento,
    .columnaMapaEvento{
        padding:18px;
        overflow:hidden;
    }

    .columnaMiniaturasEventos h2,
    .columnaFormularioEvento h2,
    .columnaMapaEvento h2{
        font-size:24px;
    }

    .sliderMiniaturasEventos{
        width:100%;
        height:auto;
        overflow:hidden;
    }

    .sliderMiniaturasEventos .slick-slide{
        padding:0 5px;
        box-sizing:border-box;
    }

    .miniaturaEventoSocio img,
    .miniaturaEventoPlaceholder{
        height:210px;
    }

    .miniaturaEventoSocio p{
        font-size:14px;
        line-height:1.3;
    }

    .formRegistroEventoSocio{
        gap:12px;
    }

    .formRegistroEventoSocio input{
        padding:11px;
        font-size:14px;
    }

    .precioEventoSocio{
        font-size:14px;
        padding:13px;
    }

    .asientoSeleccionadoBox{
        font-size:14px;
        padding:13px;
    }

    .formRegistroEventoSocio button{
        width:100%;
        padding:13px;
        font-size:15px;
    }

    .columnaMapaEvento{
        max-width:100%;
    }

    .leyendaMapaEvento{
        gap:10px;
        font-size:12px;
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:8px;
    }

    .leyendaMapaEvento span{
        white-space:nowrap;
    }

    .seatingMapSocio{
        min-height:480px;
        max-height:560px;
        overflow:auto;
        padding:10px 0;
    }

    .mesa-row{
        gap:20px;
        margin-bottom:42px;
        min-width:max-content;
        justify-content:flex-start;
    }

}

@media(max-width:576px){

    .seccionEventosSocio{
        padding:20px 10px;
    }

    .contenedorEventosSocio h1{
        font-size:25px;
    }

    .columnaMiniaturasEventos,
    .columnaFormularioEvento,
    .columnaMapaEvento{
        padding:16px;
    }

    .miniaturaEventoSocio img,
    .miniaturaEventoPlaceholder{
        height:190px;
    }

    .formRegistroEventoSocio label{
        font-size:14px;
    }

    .formRegistroEventoSocio input{
        font-size:14px;
    }

    .seatingMapSocio{
        max-height:520px;
    }

    .mesa{
        width:115px;
        height:115px;
        margin:16px;
    }

    .asiento{
        width:22px;
        height:22px;
    }

    .mesa-label{
        font-size:12px;
    }

}

/* ==================================================
SERVICIOS COPARMEX RESPONSIVE
================================================== */

@media(max-width:1200px){

    .tablaMembresiaVistazo{
        grid-template-columns:repeat(3, 1fr);
    }

    .itemMembresiaVistazo{
        border-right:1px solid rgba(255,255,255,.45);
        border-bottom:1px solid rgba(255,255,255,.45);
    }

    .itemMembresiaVistazo:nth-child(3n){
        border-right:none;
    }

    .itemMembresiaVistazo:nth-child(n+4){
        border-bottom:none;
    }

    .gridServiciosCoparmex{
        grid-template-columns:repeat(4, 1fr);
    }

}

@media(max-width:768px){

    .tablaMembresiaVistazo{
        grid-template-columns:repeat(2, 1fr);
    }

    .itemMembresiaVistazo{
        border-right:1px solid rgba(255,255,255,.45);
        border-bottom:1px solid rgba(255,255,255,.45);
    }

    .itemMembresiaVistazo:nth-child(3n){
        border-right:1px solid rgba(255,255,255,.45);
    }

    .itemMembresiaVistazo:nth-child(2n){
        border-right:none;
    }

    .itemMembresiaVistazo:nth-child(n+4){
        border-bottom:1px solid rgba(255,255,255,.45);
    }

    .itemMembresiaVistazo:nth-child(n+5){
        border-bottom:none;
    }

    .seccionServiciosCoparmex{
        padding:35px 15px;
    }

    .contenedorServiciosCoparmex h1{
        font-size:30px;
    }

    .bloqueMembresiaVistazo h2,
    .bloqueServiciosListado h2{
        font-size:24px;
    }

    .itemMembresiaVistazo{
        min-height:145px;
    }

    .itemMembresiaVistazo strong{
        font-size:42px;
    }

    .gridServiciosCoparmex{
        grid-template-columns:repeat(3, 1fr);
    }

    .cardServicioCoparmex{
        height:145px;
    }

    .modalServicioContenido{
        padding:30px 24px;
    }

    .modalServicioContenido h2{
        font-size:25px;
    }

}

@media(max-width:480px){

    .tablaMembresiaVistazo{
        grid-template-columns:repeat(2, 1fr);
    }

    .itemMembresiaVistazo{
        border-right:1px solid rgba(255,255,255,.45);
        border-bottom:1px solid rgba(255,255,255,.45);
    }

    .itemMembresiaVistazo:nth-child(2n){
        border-right:none;
    }

    .itemMembresiaVistazo:nth-child(n+5){
        border-bottom:none;
    }

    .contenedorServiciosCoparmex h1{
        font-size:26px;
    }

    .gridServiciosCoparmex{
        grid-template-columns:repeat(2, 1fr);
    }

    .cardServicioCoparmex{
        height:140px;
        padding:15px 10px;
    }

    .iconoServicioCoparmex{
        width:60px;
        height:60px;
    }

    .iconoServicioCoparmex img{
        max-width:48px;
        max-height:48px;
    }

    .cardServicioCoparmex h3{
        font-size:14px;
    }

    .modalServicioContenido{
        padding:28px 20px;
    }

    .modalServicioImagen{
        width:120px;
        height:120px;
    }

    .modalServicioImagen img{
        max-width:95px;
        max-height:95px;
    }

}

/* ==========================================================
   RESPONSIVE BENEFICIOS SOCIOS
========================================================== */

@media(max-width:768px){

    .bloqueBeneficiosSocios{
        grid-template-columns:1fr;
        padding:28px;
    }

    .textoBeneficiosSocios h2{
        font-size:24px;
    }

}

/* ==========================================================
   RENTA DE ESPACIOS RESPONSIVE
========================================================== */

@media screen and (max-width: 950px){

    .seccionRentaEspacios{
        width:100%;
        max-width:100%;
        padding:55px 18px;
        overflow-x:hidden;
    }

    .contenedorRentaEspacios,
    .contenidoRentaEspacios,
    .informacionRentaEspacios,
    .contenedorFormularioRenta,
    .formularioRentaEspacios{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .contenidoRentaEspacios{
        display:grid;
        grid-template-columns:minmax(0, 1fr);
        gap:32px;
    }

    .informacionRentaEspacios{
        display:flex;
        flex-direction:column;
        gap:18px;
    }

    .bloqueInformacionRenta{
        display:flex;
        flex-direction:row;
        align-items:flex-start;
        gap:18px;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .bloqueInformacionRenta > div{
        flex:1;
        min-width:0;
    }

    .numeroInformacionRenta{
        flex:0 0 46px;
        width:46px;
        height:46px;
    }

}

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

    .seccionRentaEspacios{
        padding:48px 16px;
    }

    .encabezadoRentaEspacios{
        width:100%;
        max-width:100%;
        margin-bottom:30px;
    }

    .encabezadoRentaEspacios h1{
        font-size:34px;
        line-height:1.15;
    }

    .encabezadoRentaEspacios p{
        font-size:15px;
        line-height:1.65;
    }

    .contenidoRentaEspacios{
        gap:26px;
    }

    .bloqueInformacionRenta{
        padding:20px;
        gap:16px;
    }

    .contenedorFormularioRenta{
        width:100%;
        max-width:100%;
        min-width:0;
        padding:26px 22px;
        overflow:hidden;
    }

    .formularioRentaEspacios{
        display:grid;
        grid-template-columns:minmax(0, 1fr);
        column-gap:0;
        row-gap:20px;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .grupoFormularioRenta,
    .grupoFormularioRentaCompleto,
    .separadorFormularioRenta,
    .accionesFormularioRenta{
        grid-column:auto;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .grupoFormularioRenta input,
    .grupoFormularioRenta select{
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    .accionesFormularioRenta{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:16px;
    }

    .accionesFormularioRenta p{
        width:100%;
        max-width:100%;
    }

    .botonSolicitarCotizacion{
        width:100%;
        max-width:100%;
        min-width:0;
    }

}

@media screen and (max-width: 480px){

    .seccionRentaEspacios{
        padding:38px 14px;
    }

    .etiquetaRentaEspacios{
        font-size:11px;
        letter-spacing:1.2px;
    }

    .encabezadoRentaEspacios h1{
        font-size:29px;
    }

    .encabezadoRentaEspacios p{
        font-size:14px;
    }

    .informacionRentaEspacios{
        gap:14px;
    }

    .bloqueInformacionRenta{
        flex-direction:row;
        align-items:flex-start;
        gap:14px;
        padding:18px;
    }

    .numeroInformacionRenta{
        flex:0 0 40px;
        width:40px;
        height:40px;
        font-size:12px;
    }

    .bloqueInformacionRenta h2{
        margin:0 0 6px;
        font-size:17px;
        line-height:1.3;
    }

    .bloqueInformacionRenta p{
        margin:0;
        font-size:13px;
        line-height:1.55;
    }

    .contenedorFormularioRenta{
        padding:22px 16px;
        border-radius:12px;
    }

    .encabezadoFormularioRenta{
        margin-bottom:22px;
    }

    .encabezadoFormularioRenta h2{
        font-size:23px;
    }

    .encabezadoFormularioRenta p{
        font-size:14px;
    }

    .grupoFormularioRenta label{
        font-size:13px;
    }

    .grupoFormularioRenta input,
    .grupoFormularioRenta select{
        height:48px;
        padding:0 13px;
        font-size:13px;
    }

    .mensajeFormularioRenta{
        padding:14px;
    }

    .botonSolicitarCotizacion{
        height:48px;
        padding:0 16px;
        font-size:13px;
    }

}

/* ==========================================================
   RENTA DE CABINA RESPONSIVE
========================================================== */

@media screen and (max-width:1050px){

    .seccionRentaCabina{
        padding:58px 18px;
    }

    .gridPaquetesCabina{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:22px;
    }

    .bloqueCondicionesCabina{
        grid-template-columns:minmax(0,1fr);
    }

    .seccionFormularioCabina{
        grid-template-columns:minmax(0,1fr);
        gap:30px;
    }

    .informacionFormularioCabina{
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        column-gap:18px;
        row-gap:18px;
    }

    .informacionFormularioCabina > span,
    .informacionFormularioCabina h2,
    .informacionFormularioCabina > p{
        grid-column:1 / -1;
    }

    .datoFormularioCabina{
        margin:0;
    }

}

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

    .seccionRentaCabina{
        padding:48px 16px;
    }

    .encabezadoRentaCabina{
        width:100%;
        max-width:100%;
        margin-bottom:28px;
    }

    .encabezadoRentaCabina h1{
        font-size:35px;
        line-height:1.15;
    }

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

    .avisoGeneralCabina{
        align-items:flex-start;
        margin-bottom:45px;
        padding:21px;
    }

    .iconoAvisoCabina{
        flex:0 0 48px;
        width:48px;
        height:48px;
        font-size:19px;
    }

    .bloquePaquetesCabina{
        margin-bottom:50px;
    }

    .encabezadoBloqueCabina{
        width:100%;
        max-width:100%;
        margin-bottom:25px;
    }

    .encabezadoBloqueCabina h2{
        font-size:27px;
    }

    .gridPaquetesCabina{
        grid-template-columns:minmax(0,1fr);
        gap:20px;
    }

    .cardPaqueteCabina{
        width:100%;
        max-width:100%;
        min-width:0;
        height:auto;
        padding:25px;
    }

    .bloqueCondicionesCabina{
        gap:18px;
    }

    .columnaCondicionesCabina{
        padding:25px;
    }

    .avisoDisponibilidadCabina{
        margin-bottom:50px;
    }

    .informacionFormularioCabina{
        display:block;
    }

    .informacionFormularioCabina h2{
        font-size:29px;
    }

    .datoFormularioCabina{
        margin-bottom:14px;
    }

    .contenedorFormularioCabina{
        padding:27px 22px;
    }

    .formularioRentaCabina{
        grid-template-columns:minmax(0,1fr);
        column-gap:0;
        row-gap:20px;
    }

    .grupoFormularioCabina,
    .grupoFormularioCabinaCompleto,
    .accionesFormularioCabina{
        grid-column:auto;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .accionesFormularioCabina{
        flex-direction:column;
        align-items:stretch;
        gap:16px;
    }

    .accionesFormularioCabina p{
        width:100%;
        max-width:100%;
    }

    .botonConsultarCabina{
        width:100%;
        max-width:100%;
        min-width:0;
    }

}

@media screen and (max-width:480px){

    .seccionRentaCabina{
        padding:38px 14px;
    }

    .etiquetaRentaCabina{
        font-size:11px;
        letter-spacing:1.1px;
    }

    .encabezadoRentaCabina h1{
        font-size:29px;
    }

    .encabezadoRentaCabina p{
        font-size:14px;
    }

    .avisoGeneralCabina{
        gap:14px;
        padding:18px;
        border-radius:11px;
    }

    .iconoAvisoCabina{
        flex:0 0 42px;
        width:42px;
        height:42px;
        font-size:17px;
    }

    .avisoGeneralCabina strong{
        font-size:14px;
    }

    .avisoGeneralCabina p{
        font-size:12px;
    }

    .encabezadoBloqueCabina h2{
        font-size:24px;
    }

    .encabezadoBloqueCabina p{
        font-size:13px;
    }

    .gridPaquetesCabina{
        gap:16px;
    }

    .cardPaqueteCabina{
        padding:22px 18px;
        border-radius:13px;
    }

    .distintivoPaqueteCabina{
        max-width:68%;
        padding:7px 10px;
        font-size:8px;
    }

    .cabeceraCardPaquete{
        gap:12px;
        margin-bottom:17px;
    }

    .iconoPaqueteCabina{
        flex:0 0 46px;
        width:46px;
        height:46px;
        font-size:18px;
    }

    .nivelPaqueteCabina{
        font-size:10px;
    }

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

    .precioPaqueteCabina strong{
        font-size:28px;
    }

    .cardPaqueteCabina li{
        font-size:12px;
    }

    .botonSeleccionarPaqueteCabina{
        min-height:46px;
        height:auto;
        padding:12px 15px;
        white-space:normal;
    }

    .columnaCondicionesCabina{
        padding:21px 18px;
    }

    .tituloCondicionesCabina h2{
        font-size:19px;
    }

    .columnaCondicionesCabina li{
        font-size:12px;
    }

    .avisoDisponibilidadCabina{
        gap:13px;
        padding:18px;
    }

    .avisoDisponibilidadCabina > i{
        font-size:19px;
    }

    .avisoDisponibilidadCabina p{
        font-size:12px;
    }

    .informacionFormularioCabina h2{
        font-size:25px;
    }

    .informacionFormularioCabina > p{
        font-size:13px;
    }

    .datoFormularioCabina{
        padding:15px;
    }

    .contenedorFormularioCabina{
        padding:22px 16px;
        border-radius:13px;
    }

    .encabezadoFormularioCabina h2{
        font-size:23px;
    }

    .encabezadoFormularioCabina p{
        font-size:13px;
    }

    .grupoFormularioCabina label{
        font-size:13px;
    }

    .grupoFormularioCabina input,
    .grupoFormularioCabina select{
        height:48px;
        padding:0 13px;
        font-size:13px;
    }

    .mensajeFormularioCabina{
        padding:14px;
    }

    .botonConsultarCabina{
        min-height:48px;
        padding:11px 15px;
        font-size:13px;
    }

}

/* ==========================================================
   NOTICIAS RESPONSIVE
========================================================== */

@media(max-width:991px){

.menuSeccionesNoticias{

    grid-template-columns:1fr;

}

.encabezadoNoticias h1{

    font-size:40px;

}

.bloquePresentacionNoticias{

    flex-direction:column;
    align-items:flex-start;

}

}

@media(max-width:768px){

.seccionNoticias{

    padding:55px 16px;

}

.encabezadoNoticias{

    margin-bottom:40px;

}

.encabezadoNoticias h1{

    font-size:34px;

}

.encabezadoNoticias p{

    font-size:15px;

}

.botonSeccionNoticias{

    padding:24px;

    gap:18px;

}

.iconoSeccionNoticias{

    width:65px;
    height:65px;

    font-size:26px;

}

.contenidoBotonNoticias h2{

    font-size:22px;

}

.contenidoBotonNoticias p{

    font-size:14px;

}

.bloquePresentacionNoticias{

    padding:24px;

}

.bloquePresentacionNoticias h2{

    font-size:24px;

}

}

@media(max-width:576px){

.botonSeccionNoticias{

    flex-direction:column;
    align-items:flex-start;

}

.iconoSeccionNoticias{

    width:60px;
    height:60px;

    border-radius:14px;

}

.contenidoBotonNoticias{

    width:100%;

}

.encabezadoNoticias h1{

    font-size:30px;

}

.bloquePresentacionNoticias{

    text-align:left;

}

.iconoPresentacionNoticias{

    width:60px;
    height:60px;

    font-size:24px;

}

.bloquePresentacionNoticias h2{

    font-size:22px;

}

}

/* ==========================================================
   LISTADO NOTICIAS RESPONSIVE
========================================================== */

@media(max-width:991px){

.encabezadoListadoNoticias{

    flex-direction:column;
    align-items:flex-start;

}

.gridListadoNoticias{

    grid-template-columns:repeat(2,minmax(0,1fr));

}

.modalArticuloImagen{

    height:300px;

}

.modalArticuloInformacion{

    padding:32px;

}

.modalArticuloInformacion h2{

    font-size:30px;

}

}

@media(max-width:768px){

.seccionListadoNoticias{

    padding:55px 16px;

}

.encabezadoListadoNoticias{

    margin-bottom:40px;

}

.encabezadoListadoNoticias h1{

    font-size:36px;

}

.gridListadoNoticias{

    grid-template-columns:1fr;

}

.imagenArticuloNoticia{

    height:220px;

}

.modalArticuloNoticia{

    padding:15px;

}

.modalArticuloImagen{

    height:240px;

}

.modalArticuloInformacion{

    padding:25px;

}

.modalArticuloInformacion h2{

    font-size:27px;

}

.modalArticuloInformacion h3{

    font-size:18px;

}

.modalArticuloCuerpo{

    font-size:15px;

}

}

@media(max-width:576px){

.botonRegresarNoticias{

    width:100%;
    justify-content:center;

}

.imagenArticuloNoticia{

    height:200px;

}

.modalArticuloImagen{

    height:210px;

}

.modalArticuloInformacion{

    padding:22px 18px;

}

.modalArticuloInformacion h2{

    font-size:24px;

}

.modalArticuloInformacion h3{

    font-size:17px;

}

.modalArticuloCuerpo{

    font-size:14px;

}

.cerrarModalArticulo{

    width:40px;
    height:40px;

    font-size:24px;

}

}

/* ==========================================================
   COMISIONES DE TRABAJO RESPONSIVE
========================================================== */

@media screen and (max-width:1000px){

    .seccionComisionesTrabajo{
        padding:58px 18px;
    }

    .gridComisionesTrabajo{
        grid-template-columns:minmax(0,1fr);
        gap:24px;
    }

    .cardComisionTrabajo{
        max-width:850px;
        margin:0 auto;
    }

    .videoComisionPlaceholder{
        min-height:360px;
    }

}

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

    .seccionComisionesTrabajo{
        padding:48px 16px;
    }

    .encabezadoComisionesTrabajo{
        width:100%;
        max-width:100%;
        margin-bottom:38px;
    }

    .encabezadoComisionesTrabajo h1{
        font-size:36px;
    }

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

    .gridComisionesTrabajo{
        gap:20px;
    }

    .encabezadoCardComision{
        padding:23px;
    }

    .iconoCardComision{
        flex:0 0 51px;
        width:51px;
        height:51px;
        font-size:20px;
    }

    .encabezadoCardComision h2{
        font-size:21px;
    }

    .encabezadoCardComision h3{
        font-size:15px;
    }

    .videoComisionPlaceholder{
        min-height:280px;
    }

    .accionesComisionTrabajo{
        padding:20px;
    }

    .modalDescripcionComision{
        padding:18px;
    }

    .modalDescripcionComisionContenido{
        max-height:92vh;
        padding:34px 28px;
    }

    .modalDescripcionComisionContenido h2{
        font-size:28px;
    }

}

@media screen and (max-width:576px){

    .seccionComisionesTrabajo{
        padding:38px 14px;
    }

    .etiquetaComisionesTrabajo{
        font-size:11px;
        letter-spacing:1.1px;
    }

    .encabezadoComisionesTrabajo h1{
        font-size:30px;
    }

    .encabezadoComisionesTrabajo p{
        font-size:14px;
    }

    .cardComisionTrabajo{
        border-radius:14px;
    }

    .encabezadoCardComision{
        gap:14px;
        padding:20px 17px;
    }

    .iconoCardComision{
        flex:0 0 44px;
        width:44px;
        height:44px;
        border-radius:11px;
        font-size:17px;
    }

    .encabezadoCardComision h2{
        margin-bottom:10px;
        font-size:19px;
    }

    .encabezadoCardComision span{
        font-size:9px;
    }

    .encabezadoCardComision h3{
        font-size:13px;
    }

    .videoComisionTrabajo{
        aspect-ratio:16 / 10;
    }

    .videoComisionPlaceholder{
        min-height:210px;
    }

    .videoComisionPlaceholder i{
        font-size:40px;
    }

    .accionesComisionTrabajo{
        display:grid;
        grid-template-columns:minmax(0,1fr);
        gap:10px;
        padding:17px;
    }

    .botonRecursoComision{
        width:100%;
        max-width:100%;
        min-height:44px;
        padding:11px 14px;
    }

    .mensajeComisionesVacio{
        padding:55px 20px;
    }

    .mensajeComisionesVacio i{
        font-size:55px;
    }

    .mensajeComisionesVacio h2{
        font-size:23px;
    }

    .modalDescripcionComision{
        align-items:flex-end;
        padding:10px;
    }

    .modalDescripcionComisionContenido{
        max-height:94vh;
        padding:30px 19px 25px;
        border-radius:17px 17px 10px 10px;
    }

    .cerrarModalDescripcionComision{
        top:14px;
        right:14px;
        width:39px;
        height:39px;
        font-size:24px;
    }

    .iconoModalComision{
        width:55px;
        height:55px;
        margin-bottom:17px;
        font-size:22px;
    }

    .modalDescripcionComisionContenido h2{
        margin-bottom:18px;
        padding-right:30px;
        font-size:24px;
    }

    .presidenteModalComision{
        margin-bottom:21px;
        padding:15px 17px;
    }

    .presidenteModalComision strong{
        font-size:14px;
    }

    .textoModalComision{
        font-size:14px;
        line-height:1.8;
    }

}

/* ==========================================================
   CONTACTO RESPONSIVE
========================================================== */

@media screen and (max-width:950px){

    .gridContactoPrincipal{
        grid-template-columns:minmax(0,1fr);
    }

    .bloqueAtencionContacto{
        min-height:360px;
    }

}

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

    .seccionContacto{
        padding:50px 16px;
    }

    .encabezadoContacto{
        margin-bottom:38px;
    }

    .encabezadoContacto h1{
        font-size:36px;
    }

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

    .gridContactoPrincipal{
        gap:20px;
        margin-bottom:50px;
    }

    .bloqueInformacionContacto{
        padding:27px 22px;
    }

    .encabezadoBloqueContacto h2{
        font-size:26px;
    }

    .bloqueAtencionContacto{
        min-height:0;
        padding:31px 26px;
    }

    .bloqueAtencionContacto h2{
        font-size:27px;
    }

    .encabezadoDocumentosContacto h2{
        font-size:28px;
    }

    .botonAcordeonContacto{
        padding:20px;
    }

    .textoLegalContacto{
        padding-left:22px;
        padding-right:22px;
    }

}

@media screen and (max-width:576px){

    .seccionContacto{
        padding:40px 14px;
    }

    .etiquetaContacto{
        font-size:11px;
        letter-spacing:1.1px;
    }

    .encabezadoContacto h1{
        font-size:30px;
    }

    .encabezadoContacto p{
        font-size:14px;
    }

    .bloqueInformacionContacto{
        padding:22px 17px;
        border-radius:14px;
    }

    .encabezadoBloqueContacto h2{
        font-size:23px;
    }

    .datoContacto{
        gap:13px;
        padding:15px;
    }

    .iconoDatoContacto{
        flex:0 0 42px;
        width:42px;
        height:42px;
        font-size:16px;
    }

    .datoContacto strong{
        font-size:12px;
    }

    .flechaDatoContacto{
        display:none;
    }

    .bloqueAtencionContacto{
        padding:27px 21px;
        border-radius:14px;
    }

    .iconoAtencionContacto{
        width:58px;
        height:58px;
        font-size:23px;
    }

    .bloqueAtencionContacto h2{
        font-size:24px;
    }

    .botonContactoPrincipal{
        width:100%;
    }

    .encabezadoDocumentosContacto h2{
        font-size:25px;
    }

    .encabezadoDocumentosContacto p{
        font-size:13px;
    }

    .botonAcordeonContacto{
        gap:13px;
        padding:17px 15px;
    }

    .tituloAcordeonContacto{
        gap:12px;
    }

    .iconoAcordeonContacto{
        flex:0 0 43px;
        width:43px;
        height:43px;
        font-size:16px;
    }

    .tituloAcordeonContacto h2{
        font-size:17px;
    }

    .tituloAcordeonContacto span{
        font-size:8px;
    }

    .textoLegalContacto{
        padding-left:17px;
        padding-right:17px;
        font-size:13px;
        line-height:1.75;
    }

    .acordeonContacto.activo .textoLegalContacto{
        padding-bottom:23px;
    }

    .textoLegalContacto h3{
        font-size:16px;
    }

    .contactoLegalContacto{
        gap:12px;
        padding:15px;
    }

    .contactoLegalContacto a{
        font-size:11px;
    }

}

/* ==========================================================
   AFÍLIATE RESPONSIVE
========================================================== */

@media screen and (max-width:1000px){

    .gridAfiliatePrincipal{
        grid-template-columns:minmax(0,1fr);
    }

    .gridProcesoAfiliacion{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

}

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

    .seccionAfiliate{
        padding:50px 16px;
    }

    .encabezadoAfiliate{
        margin-bottom:38px;
    }

    .encabezadoAfiliate h1{
        font-size:36px;
    }

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

    .gridAfiliatePrincipal{
        gap:20px;
        margin-bottom:50px;
    }

    .bloqueBeneficiosAfiliate{
        padding:27px 22px;
    }

    .encabezadoBeneficiosAfiliate h2{
        font-size:26px;
    }

    .contenedorFormularioAfiliate{
        padding:31px 26px;
    }

    .contenedorFormularioAfiliate > h2{
        font-size:27px;
    }

    .encabezadoProcesoAfiliacion h2{
        font-size:28px;
    }

}

@media screen and (max-width:576px){

    .seccionAfiliate{
        padding:40px 14px;
    }

    .etiquetaAfiliate{
        font-size:11px;
        letter-spacing:1.1px;
    }

    .encabezadoAfiliate h1{
        font-size:30px;
    }

    .encabezadoAfiliate p{
        font-size:14px;
    }

    .bloqueBeneficiosAfiliate{
        padding:22px 17px;
        border-radius:14px;
    }

    .encabezadoBeneficiosAfiliate h2{
        font-size:23px;
    }

    .beneficioAfiliate{
        gap:13px;
        padding:15px;
    }

    .iconoBeneficioAfiliate{
        flex:0 0 42px;
        width:42px;
        height:42px;
        font-size:16px;
    }

    .beneficioAfiliate h3{
        font-size:14px;
    }

    .beneficioAfiliate p{
        font-size:12px;
    }

    .contenedorFormularioAfiliate{
        padding:27px 20px;
        border-radius:14px;
    }

    .iconoFormularioAfiliate{
        width:57px;
        height:57px;
        font-size:22px;
    }

    .contenedorFormularioAfiliate > h2{
        font-size:24px;
    }

    .formularioAfiliate{
        grid-template-columns:minmax(0,1fr);
    }

    .grupoFormularioAfiliate,
    .grupoFormularioAfiliateCompleto,
    .accionesFormularioAfiliate{
        grid-column:auto;
        width:100%;
        min-width:0;
    }

    .grupoFormularioAfiliate input{
        height:47px;
        font-size:12px;
    }

    .encabezadoProcesoAfiliacion h2{
        font-size:25px;
    }

    .encabezadoProcesoAfiliacion p{
        font-size:13px;
    }

    .gridProcesoAfiliacion{
        grid-template-columns:minmax(0,1fr);
        gap:14px;
    }

    .pasoAfiliacion{
        padding:21px;
    }

}

/* ==========================================================
   DIRECTORIO COMERCIAL RESPONSIVE
========================================================== */

@media screen and (max-width:1100px){

    .formularioFiltrosDirectorio{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .accionesFiltrosDirectorio{
        grid-column:1 / -1;
    }

    .gridDirectorioComercial{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

}

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

    .seccionDirectorioComercial{
        padding:50px 16px;
    }

    .encabezadoDirectorioComercial{
        margin-bottom:36px;
    }

    .encabezadoDirectorioComercial h1{
        font-size:34px;
    }

    .encabezadoDirectorioComercial p{
        font-size:15px;
        line-height:1.7;
    }

    .panelFiltrosDirectorio{
        padding:24px 20px;
    }

    .encabezadoFiltrosDirectorio{
        align-items:flex-start;
    }

    .formularioFiltrosDirectorio{
        grid-template-columns:minmax(0,1fr);
        gap:17px;
    }

    .grupoFiltroDirectorio,
    .accionesFiltrosDirectorio{
        grid-column:auto;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .accionesFiltrosDirectorio{
        justify-content:stretch;
    }

    .botonBuscarDirectorio,
    .botonLimpiarDirectorio{
        flex:1;
        min-width:0;
    }

    .resumenDirectorioComercial{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .gridDirectorioComercial{
        grid-template-columns:minmax(0,1fr);
        gap:22px;
    }

    .cardSocioDirectorio{
        max-width:650px;
        margin:0 auto;
    }

}

@media screen and (max-width:480px){

    .seccionDirectorioComercial{
        padding:40px 14px;
    }

    .etiquetaDirectorioComercial{
        padding:7px 14px;
        font-size:11px;
    }

    .encabezadoDirectorioComercial h1{
        font-size:29px;
    }

    .encabezadoDirectorioComercial p{
        font-size:14px;
    }

    .panelFiltrosDirectorio{
        padding:21px 16px;
        border-radius:14px;
    }

    .encabezadoFiltrosDirectorio{
        gap:13px;
    }

    .iconoFiltrosDirectorio{
        flex:0 0 46px;
        width:46px;
        height:46px;
        font-size:18px;
    }

    .encabezadoFiltrosDirectorio h2{
        font-size:20px;
    }

    .encabezadoFiltrosDirectorio p{
        font-size:12px;
    }

    .accionesFiltrosDirectorio{
        flex-direction:column;
        align-items:stretch;
    }

    .botonBuscarDirectorio,
    .botonLimpiarDirectorio{
        width:100%;
        min-width:0;
    }

    .logoSocioDirectorio{
        height:150px;
    }

    .logoSocioDirectorio img{
        max-height:100px;
    }

    .contenidoSocioDirectorio{
        padding:20px 17px;
    }

    .contenidoSocioDirectorio h2{
        font-size:20px;
    }

    .paginacionDirectorio{
        gap:8px;
    }

    .botonPaginaDirectorio span{
        display:none;
    }

    .botonPaginaDirectorio{
        min-width:40px;
        padding:9px;
    }

    .numeroPaginaDirectorio{
        min-width:38px;
        min-height:38px;
    }

    .mensajeDirectorioVacio{
        padding:40px 18px;
    }

    .mensajeDirectorioVacio h2{
        font-size:22px;
    }

    .botonRestablecerDirectorio{
        width:100%;
    }

}

@media(max-width:768px){

.gridPasswordSocio{

grid-template-columns:1fr;

}

}

.separadorInicioSocio{

margin:30px 0 25px;

border:none;

border-top:1px solid #e5e7eb;

}

.tituloCambiarPassword{

margin:0 0 18px;

font-size:18px;

color:#0b3c5d;

font-weight:600;

}