/* ==================================================
HEADER SUPERIOR
================================================== */

.top-header{
    background-color:#002d72;
    padding:10px 20px;
    display:flex;
    justify-content:flex-end;
}

.social-icons a{
    color:white;
    margin-left:15px;
    font-size:18px;
    text-decoration:none;
}


/* ==================================================
NAVBAR
================================================== */

.navbar{
    background-color:#004a99;
}

.menu{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
}

.logo-navbar{
    height:50px;
    width:auto;
    max-width:none;
    display:block;
}

.menu li{
    position:relative;
}

.menu > li > a{
    color:white;
    padding:15px 20px;
    display:block;
    text-decoration:none;
    font-weight:500;
}



.menu li:hover > a::before,
.menu li:hover > a::after{
    content:"";
    position:absolute;
    top:50%;
    width:2px;
    height:30px;
    background-color:white;
    transform:translateY(-50%);
}

.menu li:hover > a::before{
    left:-1px;
}

.menu li:hover > a::after{
    right:-1px;
}

.menu-toggle{
    display:none;
}

/* ==================================================
SUBMENU
================================================== */

.submenu{
    display:none;
    position:absolute;
    top:100%;
    background-color:#0061c2;
    list-style:none;
    min-width:180px;
    z-index:999;
    padding:0;
}

.submenu li a{
    padding:10px;
    display:block;
    color:white;
    text-decoration:none;
}

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


/* ==================================================
LOGIN
================================================== */

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

.login-btn{
    color:white;
    text-decoration:none;
    padding:15px 20px;
    display:block;
    font-weight:600;
}

.login-btn:hover{
    background:#0061c2;
}


/* ==================================================
BANNER PRINCIPAL
================================================== */

.banner-principal{
    max-height:310px;
    overflow:hidden;
}

.banner-slider img{
    width:100%;
    max-height:300px;
    object-fit:cover;
}


/* ==================================================
CONTENIDO PRINCIPAL
================================================== */

.contenido_principal{
    display:flex;
    flex-direction:row;
}

.separador-vertical{
    width:2px;
    height:480px;
    background-color:lightgray;
    margin-top:20px;
}


/* ==================================================
EVENTOS
================================================== */

.seccionEventos{
    padding:0px 20px;
    max-width:700px;
    max-height:800px;
    margin:20px;
}

.seccionEventos h2{
    color:#002d72;
    margin-bottom:20px;
    font-size:30px;
}

.eventos-slider{
    margin-top:20px;
    height:350px;
    position:relative;
    overflow:hidden;
}

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

.evento{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:15px;
    padding:15px;
    border-bottom:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    min-height:120px;
    box-sizing:border-box;
}

.evento .info{
    display:flex;
    flex-direction:row;
    gap:15px;
    flex-wrap:wrap;
    flex:1;
    align-items:center;
}

.evento h3{
    margin:0;
    font-size:16px;
    min-width:220px;
}

.evento p{
    margin:0;
    font-size:14px;
    color:#555;
}


/* ==================================================
NOTICIAS DEL INDEX
================================================== */

.noticiasIndex {
    box-sizing: border-box;
    width: 800px;
    margin: 20px;
    padding: 0 20px;
}

.noticiasIndex h2 {
    margin: 25px 0 12px;
    color: #002d72;
    font-size: 30px;
}

.descripcionNoticiasIndex {
    margin: 0 0 22px;
    color: #222222;
    line-height: 1.5;
}

/* CUADRÍCULA */

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

/* BOTONES */

.botonNoticiaIndex {
    box-sizing: border-box;
    min-height: 125px;
    padding: 20px;
    border: 1px solid #dce2e9;
    border-left: 5px solid #002d72;
    border-radius: 8px;
    background: #ffffff;
    color: #202020;
    text-decoration: none;

    display: flex;
    flex-direction: column;
    justify-content: center;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.botonNoticiaIndex:hover {
    transform: translateY(-3px);
    border-color: #002d72;
    box-shadow: 0 8px 20px rgba(0, 45, 114, 0.12);
}

.tituloBotonNoticiaIndex {
    display: block;
    margin-bottom: 8px;
    color: #002d72;
    font-size: 19px;
    font-weight: 700;
}

.textoBotonNoticiaIndex {
    display: block;
    color: #606060;
    font-size: 14px;
    line-height: 1.4;
}

/* COLOR POR CATEGORÍA */

.botonNoticiaIndex.boletines {
    border-left-color: #00a651;
}

.botonNoticiaIndex.comunicados {
    border-left-color: #002d72;
}

.botonNoticiaIndex.dataCoparmex {
    border-left-color: #7c4d9e;
}

.botonNoticiaIndex.informacionInteres {
    border-left-color: #f58220;
}

/* RESPONSIVE */

@media (max-width: 768px) {

    .noticiasIndex {
        width: auto;
        margin: 20px 0;
        padding: 0 15px;
    }

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

    .botonNoticiaIndex {
        min-height: 110px;
    }
}


/* ==================================================
PODCAST
================================================== */

.seccionPodcast{
    padding:0px 20px;
    width:350px;
    margin:20px;
}

.seccionPodcast h2{
    margin: 25px 0 12px;
    color: #002d72;
    font-size: 30px;
}

.media-container{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
}

.media-container a img{
    width:120px;
    height:120px;
    border-radius:10px;
    transition:transform .3s ease;
}

.media-container a:hover img{
    transform:scale(1.05);
}


/* ==================================================
PATROCINADORES
================================================== */

.seccionPatrocinadores{
    display:flex;
    flex-direction:column;
    padding:0px 20px;
}

.seccionPatrocinadores h2{
    color:#002d72;
    margin-bottom:0px;
    font-size:30px;
}

.sponsors-slider img{
    width:100%;
    max-width:150px;
    max-height:150px;
    object-fit:contain;
    margin:auto;
}


/* ==================================================
PROMOCIONES
================================================== */

.seccionPromos{
    display:flex;
    flex-direction:column;
    padding:0px 20px;
    width:100%;
    box-sizing:border-box;
    min-width:0;
}

.seccionPromos h2{
    color:#002d72;
    margin-bottom:0px;
    font-size:30px;
}

.promos-slider{
    width:100%;
    overflow:hidden;
    position:relative;
    min-width:0;
}

.promos-slider .slick-list{
    overflow:hidden;
}

.promos-slider .slick-track{
    display:flex !important;
}

.promos-slider .slick-slide{
    height:auto;
}

.promos-slider .slick-slide > div{
    width:100%;
}

.promos-slider img{
    width:100%;
    height:300px;
    object-fit:cover;
    display:block;
    border-radius:10px;
}

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

.seccionConsejoDirectivo{
    padding:40px 20px;
}

.contenedorConsejo{
    max-width:1400px;
    margin:0 auto;
}

.contenedorConsejo h1{
    color:#002d72;
    text-align:center;
    margin-bottom:30px;
    font-size:38px;
}

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

.consejo-vertical{
    display:none;
}

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

.seccionStaff{
    padding:40px 20px;
}

.contenedorStaff{
    max-width:1400px;
    margin:0 auto;
}

.contenedorStaff h1{
    color:#002d72;
    text-align:center;
    margin-bottom:30px;
    font-size:38px;
}

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

.staff-vertical{
    display:none;
}

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

.seccionQuienesSomos{
    padding:40px 20px;
}

.contenedorQuienesSomos{
    max-width:1400px;
    margin:0 auto;
}

.contenedorQuienesSomos h1{
    color:#002d72;
    text-align:center;
    font-size:38px;
    margin-bottom:35px;
}

.bloqueIntroQuienesSomos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:stretch;
}

.videoQuienesSomos video{
    width:100%;
    height:100%;
    min-height:380px;
    object-fit:cover;
    border-radius:12px;
    background:#000;
}

.placeholderVideo{
    min-height:380px;
    background:#002d72;
    color:white;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:600;
}

.galeriaQuienesSomos{
    background:#fff;
    border-radius:12px;
    padding:20px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    min-width:0;
}

.galeriaQuienesSomos h2{
    color:#002d72;
    font-size:26px;
    margin-bottom:20px;
}

.quienes-slider{
    width:100%;
    overflow:hidden;
}

.itemGaleriaQuienes img{
    width:100%;
    height:320px;
    object-fit:cover;
    border-radius:10px;
}

.placeholderGaleria{
    height:320px;
    background:#f1f1f1;
    color:#555;
    display:flex !important;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-weight:600;
}

.bloqueMisionVision{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    margin-top:40px;
}

.cardMisionVision{
    background:#fff;
    border-radius:12px;
    padding:30px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    border-top:5px solid #002d72;
}

.iconoMisionVision{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#002d72;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-bottom:15px;
}

.cardMisionVision h2{
    color:#002d72;
    margin-bottom:12px;
    font-size:26px;
}

.cardMisionVision p{
    color:#444;
    font-size:16px;
    line-height:1.6;
}

.bloqueHistoria{
    background:#002d72;
    color:white;
    border-radius:12px;
    padding:35px;
    margin-top:40px;
}

.bloqueHistoria h2{
    color:white;
    font-size:30px;
    margin-bottom:15px;
}

.bloqueHistoria p{
    font-size:17px;
    line-height:1.7;
}

.bloquePresidentes{
    margin-top:45px;
}

.bloquePresidentes h2{
    color:#002d72;
    text-align:center;
    font-size:32px;
    margin-bottom:30px;
}

.presidentes-slider{
    width:100%;
    overflow:hidden;
}

.cardPresidente{
    background:#fff;
    border-radius:12px;
    padding:18px;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    margin:0 10px;
}

.cardPresidente img{
    width:140px;
    height:180px;
    object-fit:cover;
    border-radius:8px;
    margin:0 auto 15px auto;
}

.cardPresidente h3{
    color:#002d72;
    font-size:17px;
    margin-bottom:6px;
}

.cardPresidente p{
    color:#555;
    font-size:14px;
}

.presidentePlaceholder{
    min-height:220px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    font-weight:600;
    color:#555;
}

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

.seccionConvenios{
    padding:45px 20px;
}

.contenedorConvenios{
    max-width:1400px;
    margin:0 auto;
}

.contenedorConvenios h1{
    color:#002d72;
    text-align:center;
    font-size:38px;
    margin-bottom:12px;
}

.introConvenios{
    text-align:center;
    color:#555;
    font-size:17px;
    margin-bottom:40px;
}

.bloqueConvenios{
    margin-bottom:50px;
}

.bloqueConvenios h2{
    color:#002d72;
    font-size:30px;
    margin-bottom:20px;
}

.bloqueConveniosSocios{
    background:#fff;
    border-radius:14px;
    padding:28px;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.encabezadoConvenios{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:22px;
}

.encabezadoConvenios h2{
    margin-bottom:6px;
}

.encabezadoConvenios p{
    margin:0;
    color:#555;
}

.filtroConvenios{
    margin-bottom:25px;
}

.filtroConvenios input{
    width:100%;
    padding:14px 16px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:15px;
    box-sizing:border-box;
}

.sliderConveniosSocios{
    width:100%;
    overflow:hidden;
}

.slideConvenioSocio{
    padding:0 10px;
    box-sizing:border-box;
}

.cardConvenioSocio{
    background:#f8f9fb;
    border:1px solid #e5e5e5;
    border-radius:12px;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:15px;
    height:560px;
    box-sizing:border-box;
    overflow:hidden;
}

.logoConvenioSocio{
    height:95px;
    background:#fff;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    flex-shrink:0;
}

.logoConvenioSocio img{
    max-width:130px;
    max-height:75px;
    object-fit:contain;
}

.logoPlaceholderConvenio{
    color:#002d72;
    font-weight:700;
    text-align:center;
    font-size:13px;
}

.infoConvenioSocio{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
}

.infoConvenioSocio h3{
    color:#002d72;
    margin:0 0 6px 0;
    font-size:19px;
}

.infoConvenioSocio h4{
    color:#004a99;
    margin:0 0 10px 0;
    font-size:16px;
}

.infoConvenioSocio p{
    color:#444;
    font-size:14px;
    line-height:1.45;
    margin:0 0 8px 0;
}

.telefonoConvenio{
    color:#222;
    flex-shrink:0;
}

.descripcionConvenioRecortada{
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:8;
    -webkit-box-orient:vertical;
}

.btnVerMasConvenio{
    margin-top:auto;
    background:none;
    border:none;
    color:#002d72;
    font-weight:700;
    cursor:pointer;
    padding:8px 0 0 0;
    text-align:left;
    font-size:14px;
}

.btnVerMasConvenio:hover{
    color:#004a99;
    text-decoration:underline;
}

.btnConvenios,
.btnConveniosSecundario{
    display:inline-block;
    background:#002d72;
    color:white;
    padding:11px 18px;
    border-radius:7px;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    transition:background .2s ease;
}

.btnConvenios:hover,
.btnConveniosSecundario:hover{
    background:#004a99;
}

.gridConveniosSimples{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
}

.cardConvenioSimple{
    background:#fff;
    border-radius:12px;
    padding:22px;
    min-height:150px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.cardConvenioSimple h3{
    color:#002d72;
    margin:0 0 18px 0;
    font-size:19px;
}

.gridConveniosInstituciones{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}

.cardConvenioInstitucion{
    background:#fff;
    border-radius:12px;
    padding:24px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:560px;
    box-sizing:border-box;
}

.logoInstitucionConvenio{
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f7f7f7;
    border-radius:10px;
    padding:12px;
    flex-shrink:0;
}

.logoInstitucionConvenio img{
    max-width:150px;
    max-height:80px;
    object-fit:contain;
}

.cardConvenioInstitucion h3{
    color:#002d72;
    font-size:20px;
    margin:0;
}

.cardConvenioInstitucion p{
    color:#444;
    font-size:14px;
    line-height:1.5;
    margin:0;
}

.mensajeVacioConvenios,
.mensajeFiltroConvenios{
    background:#fff;
    border-radius:10px;
    padding:25px;
    color:#555;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.modalConvenio{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.modalConvenio.activo{
    display:flex;
}

.modalConvenioContenido{
    width:100%;
    max-width:820px;
    max-height:88vh;
    overflow:auto;
    background:white;
    border-radius:14px;
    padding:32px;
    position:relative;
    box-shadow:0 10px 35px rgba(0,0,0,.35);
}

.cerrarModalConvenio{
    position:absolute;
    top:15px;
    right:18px;
    background:#002d72;
    color:white;
    border:none;
    width:36px;
    height:36px;
    border-radius:50%;
    font-size:24px;
    cursor:pointer;
    line-height:1;
}

.modalConvenioLogo{
    width:160px;
    height:100px;
    background:#f7f7f7;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px;
    margin-bottom:20px;
}

.modalConvenioLogo img{
    max-width:140px;
    max-height:80px;
    object-fit:contain;
}

.modalConvenioContenido h2{
    color:#002d72;
    font-size:28px;
    margin:0 0 8px 0;
}

.modalConvenioContenido h3{
    color:#004a99;
    font-size:20px;
    margin:0 0 14px 0;
}

.modalConvenioContenido p{
    color:#333;
    font-size:15px;
    line-height:1.5;
}

.modalConvenioDescripcion{
    margin-top:18px;
    color:#333;
    font-size:16px;
    line-height:1.7;
}

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

.seccionLoginSocio{
    min-height:calc(100vh - 180px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 20px;
    box-sizing:border-box;
}

.contenedorLoginSocio{
    width:100%;
    max-width:480px;
}

.cardLoginSocio{
    background:#ffffff;
    border-radius:14px;
    padding:40px;
    box-shadow:0 8px 25px rgba(0,0,0,.12);
    border-top:6px solid #002d72;
}

.cardLoginSocio h1{
    margin:0;
    margin-bottom:10px;
    color:#002d72;
    font-size:32px;
    text-align:center;
}

.cardLoginSocio p{
    margin:0;
    margin-bottom:30px;
    text-align:center;
    color:#666;
    line-height:1.6;
}

.cardLoginSocio form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.cardLoginSocio label{
    color:#002d72;
    font-weight:600;
    font-size:15px;
}

.cardLoginSocio input{
    width:100%;
    padding:14px 16px;
    border:1px solid #d9d9d9;
    border-radius:8px;
    font-size:15px;
    box-sizing:border-box;
    transition:.25s;
}

.cardLoginSocio input:focus{
    outline:none;
    border-color:#004a99;
    box-shadow:0 0 0 3px rgba(0,74,153,.15);
}

.cardLoginSocio button{
    margin-top:12px;
    padding:15px;
    border:none;
    border-radius:8px;
    background:#002d72;
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.cardLoginSocio button:hover{
    background:#004a99;
}

.alertaLoginSocio{
    background:#fdecec;
    color:#b30000;
    border:1px solid #f3c7c7;
    border-radius:8px;
    padding:14px;
    margin-bottom:25px;
    text-align:center;
    font-weight:600;
}

.formCambiarPasswordSocio{

margin-top:20px;

}

.gridPasswordSocio{

display:grid;

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

gap:18px;

align-items:end;

}

.gridPasswordSocio label{

display:block;

font-size:13px;

font-weight:600;

margin-bottom:6px;

color:#444;

}

.gridPasswordSocio input{

width:100%;

height:42px;

padding:0 12px;

border:1px solid #d8d8d8;

border-radius:8px;

font-size:14px;

box-sizing:border-box;

}

.contenedorBotonPassword{

display:flex;

align-items:flex-end;

}

.contenedorBotonPassword button{

width:100%;

height:42px;

border:none;

border-radius:8px;

background:#0b3c5d;

color:#fff;

font-size:14px;

font-weight:600;

cursor:pointer;

transition:.2s;

}

.contenedorBotonPassword button:hover{

background:#0d4f7d;

}

/*==========================================================
ALERTAS CAMBIAR CONTRASEÑA
==========================================================*/

.alertaPasswordCorrecta{

background:#e8f7ee;

color:#146c43;

border:1px solid #b7e4c7;

border-left:5px solid #198754;

padding:14px 16px;

border-radius:10px;

margin:18px 0;

font-size:14px;

font-weight:500;

}

.alertaPasswordError{

background:#fdeaea;

color:#b42318;

border:1px solid #f5c2c7;

border-left:5px solid #dc3545;

padding:14px 16px;

border-radius:10px;

margin:18px 0;

font-size:14px;

font-weight:500;

}

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

.socio-navbar-info{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 15px;
}

.nombre-socio-navbar{
    color:white;
    font-weight:600;
    max-width:220px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.logout-socio-btn{
    color:white;
    width:10px;
    height:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.25s;
    margin-bottom: 10px;
}

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

.seccionInicioSocio{
    padding:60px 20px;
    display:flex;
    justify-content:center;
}

.cardInicioSocio{
    width:100%;
    max-width:760px;
    background:#fff;
    border-radius:16px;
    padding:45px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,.12);
    border-top:6px solid #002d72;
}

.cardInicioSocio h1{
    color:#002d72;
    font-size:34px;
    margin:0 0 30px 0;
}

.textoHolaSocio{
    color:#555;
    font-size:20px;
    margin:0 0 8px 0;
}

.cardInicioSocio h2{
    color:#002d72;
    font-size:28px;
    margin:0 0 30px 0;
}

.logoInicioSocio{
    width:230px;
    height:150px;
    margin:0 auto 35px auto;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f7f7f7;
    border-radius:14px;
    padding:20px;
}

.logoInicioSocio img{
    max-width:200px;
    max-height:120px;
    object-fit:contain;
}

.placeholderLogoSocio{
    color:#002d72;
    font-weight:700;
    font-size:15px;
}

.datosInicioSocio{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.datosInicioSocio div{
    background:#f5f6f8;
    border-radius:12px;
    padding:20px;
}

.datosInicioSocio span{
    display:block;
    color:#666;
    font-size:14px;
    margin-bottom:8px;
}

.datosInicioSocio strong{
    color:#002d72;
    font-size:18px;
}

.badgeSocioVigente{
    color:#0a8f3c !important;
}

.badgeSocioNoVigente{
    color:#b30000 !important;
}

/* ==================================================
CONTENIDO ADICIONAL DEL DASHBOARD
================================================== */

.seccionContenidoDashboardSocio{
    width:100%;
    padding:0 20px 70px;
    background:#f3f6f9;
    box-sizing:border-box;
}

.contenedorContenidoDashboardSocio{
    width:100%;
    max-width:1200px;
    min-width:0;
    margin:0 auto;
    box-sizing:border-box;
}

/* ==================================================
EVENTOS REGISTRADOS
================================================== */

.seccionEventosDashboardSocio{
    width:100%;
    min-width:0;
    margin-bottom:35px;
    padding:34px;
    background:#ffffff;
    border:1px solid #dce5ed;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,51,102,.07);
    box-sizing:border-box;
}

.encabezadoEventosDashboardSocio{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:25px;
    width:100%;
    margin-bottom:28px;
}

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

.encabezadoEventosDashboardSocio span{
    display:block;
    margin-bottom:7px;
    color:#0059a7;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.encabezadoEventosDashboardSocio h2{
    margin:0 0 9px;
    color:#002d72;
    font-size:29px;
    font-weight:800;
    line-height:1.25;
}

.encabezadoEventosDashboardSocio p{
    max-width:760px;
    margin:0;
    color:#687580;
    font-size:14px;
    line-height:1.65;
}

.botonExplorarEventosSocio{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    flex:0 0 auto;
    min-height:46px;
    padding:11px 19px;
    background:#ffffff;
    color:#0059a7;
    border:1px solid #0059a7;
    border-radius:9px;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    box-sizing:border-box;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.botonExplorarEventosSocio:hover{
    background:#0059a7;
    color:#ffffff;
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(0,89,167,.18);
}

.listaEventosDashboardSocio{
    display:flex;
    flex-direction:column;
    gap:14px;
    width:100%;
}

.itemEventoDashboardSocio{
    display:grid;
    grid-template-columns:74px minmax(0,1fr) 145px 120px 125px;
    gap:18px;
    align-items:center;
    width:100%;
    min-width:0;
    padding:18px;
    background:#f8fafc;
    border:1px solid #e0e7ed;
    border-radius:13px;
    box-sizing:border-box;
    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.itemEventoDashboardSocio:hover{
    background:#ffffff;
    border-color:#9fc4df;
    box-shadow:0 8px 20px rgba(0,51,102,.07);
}

.fechaEventoDashboardSocio{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:74px;
    min-height:74px;
    padding:8px;
    background:#002d72;
    color:#ffffff;
    border-radius:11px;
    text-align:center;
    box-sizing:border-box;
}

.fechaEventoDashboardSocio span{
    display:block;
    font-size:26px;
    font-weight:800;
    line-height:1;
}

.fechaEventoDashboardSocio strong{
    display:block;
    margin-top:5px;
    color:#dce9f2;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
}

.informacionEventoDashboardSocio{
    min-width:0;
}

.informacionEventoDashboardSocio h3{
    margin:0 0 10px;
    color:#002d72;
    font-size:18px;
    font-weight:800;
    line-height:1.35;
}

.datosEventoDashboardSocio{
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
}

.datosEventoDashboardSocio span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0;
    color:#687580;
    font-size:12px;
    line-height:1.45;
    text-transform:none;
    letter-spacing:0;
}

.datosEventoDashboardSocio i{
    color:#0059a7;
}

.precioEventoDashboardSocio{
    min-width:0;
}

.precioEventoDashboardSocio span{
    display:block;
    margin:0 0 5px;
    color:#7b8791;
    font-size:10px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.precioEventoDashboardSocio strong{
    display:block;
    color:#002d72;
    font-size:14px;
    font-weight:800;
    line-height:1.4;
}

.textoEventoGratuito{
    color:#0a7a3a !important;
}

.estatusEventoDashboardSocio{
    display:flex;
    justify-content:flex-start;
}

.badgeEventoPagado,
.badgeEventoNoPagado{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:34px;
    padding:7px 11px;
    border-radius:30px;
    font-size:11px;
    font-weight:700;
    line-height:1.3;
    white-space:nowrap;
}

.badgeEventoPagado{
    background:#e9f8ef;
    color:#14733d;
    border:1px solid #bce3cb;
}

.badgeEventoNoPagado{
    background:#fff4e7;
    color:#9a5f15;
    border:1px solid #efd3a5;
}

.accionesEventoDashboardSocio{
    display:flex;
    justify-content:flex-end;
}

.botonVerQREventoSocio{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:42px;
    padding:10px 13px;
    background:#0059a7;
    color:#ffffff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    box-sizing:border-box;
    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.botonVerQREventoSocio:hover{
    background:#003f78;
    transform:translateY(-1px);
    box-shadow:0 7px 16px rgba(0,89,167,.18);
}

.botonVerQREventoSocio:disabled{
    background:#b6c1ca;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

/* ==================================================
EVENTOS VACÍOS
================================================== */

.mensajeEventosDashboardVacio{
    width:100%;
    padding:50px 25px;
    background:#f8fafc;
    border:1px dashed #b9c9d5;
    border-radius:14px;
    text-align:center;
    box-sizing:border-box;
}

.iconoEventosDashboardVacio{
    display:flex;
    align-items:center;
    justify-content:center;
    width:62px;
    height:62px;
    margin:0 auto 18px;
    background:#eaf4fb;
    color:#0059a7;
    border-radius:50%;
    font-size:25px;
}

.mensajeEventosDashboardVacio h3{
    margin:0 0 9px;
    color:#002d72;
    font-size:22px;
    font-weight:800;
}

.mensajeEventosDashboardVacio p{
    margin:0 0 20px;
    color:#687580;
    font-size:14px;
    line-height:1.6;
}

.botonExplorarEventosVacio{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:10px 18px;
    background:#0059a7;
    color:#ffffff;
    border-radius:8px;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.botonExplorarEventosVacio:hover{
    background:#003f78;
    color:#ffffff;
}

/* ==================================================
PAGOS PENDIENTES
================================================== */

.avisoPagosPendientesSocio{
    display:flex;
    align-items:center;
    gap:18px;
    width:100%;
    margin-top:22px;
    padding:20px 22px;
    background:#fff8e8;
    color:#6b5725;
    border:1px solid #ead79e;
    border-radius:12px;
    box-sizing:border-box;
}

.iconoAvisosPendientesSocio{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 48px;
    width:48px;
    height:48px;
    background:#ffffff;
    color:#b18421;
    border-radius:11px;
    font-size:19px;
}

.avisoPagosPendientesSocio > div:nth-child(2){
    flex:1;
    min-width:0;
}

.avisoPagosPendientesSocio strong{
    display:block;
    margin-bottom:4px;
    font-size:14px;
}

.avisoPagosPendientesSocio p{
    margin:0;
    font-size:12px;
    line-height:1.6;
}

.botonDatosBancariosSocio{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex:0 0 auto;
    min-height:43px;
    padding:10px 15px;
    background:#ffffff;
    color:#8c6817;
    border:1px solid #c8a653;
    border-radius:8px;
    cursor:pointer;
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    transition:
        background .2s ease,
        color .2s ease;
}

.botonDatosBancariosSocio:hover{
    background:#8c6817;
    color:#ffffff;
}

/* ==================================================
BANNER DE PATROCINIOS
================================================== */

.bannerPatrociniosDashboardSocio{
    display:grid;
    grid-template-columns:68px minmax(0,1fr) auto;
    gap:22px;
    align-items:center;
    width:100%;
    padding:30px;
    background:
        linear-gradient(
            135deg,
            #002d72,
            #0059a7
        );
    color:#ffffff;
    border-radius:18px;
    box-shadow:0 14px 35px rgba(0,51,102,.2);
    text-decoration:none;
    box-sizing:border-box;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.bannerPatrociniosDashboardSocio:hover{
    color:#ffffff;
    transform:translateY(-3px);
    box-shadow:0 20px 42px rgba(0,51,102,.25);
}

.iconoBannerPatrociniosSocio{
    display:flex;
    align-items:center;
    justify-content:center;
    width:68px;
    height:68px;
    background:rgba(255,255,255,.13);
    color:#ffffff;
    border-radius:15px;
    font-size:27px;
}

.bannerPatrociniosDashboardSocio > div:nth-child(2){
    min-width:0;
}

.bannerPatrociniosDashboardSocio span{
    display:block;
    margin-bottom:5px;
    color:#bdd8eb;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.bannerPatrociniosDashboardSocio h2{
    margin:0 0 7px;
    color:#ffffff;
    font-size:25px;
    font-weight:800;
    line-height:1.3;
}

.bannerPatrociniosDashboardSocio p{
    margin:0;
    color:#dce9f2;
    font-size:13px;
    line-height:1.6;
}

.bannerPatrociniosDashboardSocio > strong{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:11px 17px;
    background:#ffffff;
    color:#0059a7;
    border-radius:9px;
    font-size:13px;
    white-space:nowrap;
}

/* ==================================================
MODALES DEL DASHBOARD
================================================== */

.modalQREventoSocio,
.modalDatosBancariosSocio{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:25px;
    background:rgba(0,24,46,.74);
    opacity:0;
    visibility:hidden;
    z-index:9999;
    box-sizing:border-box;
    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.modalQREventoSocio.activo,
.modalDatosBancariosSocio.activo{
    opacity:1;
    visibility:visible;
}

.contenidoModalQREventoSocio,
.contenidoModalDatosBancariosSocio{
    position:relative;
    width:100%;
    max-width:560px;
    max-height:92vh;
    padding:36px;
    background:#ffffff;
    border-radius:18px;
    box-shadow:0 25px 70px rgba(0,0,0,.3);
    overflow-y:auto;
    box-sizing:border-box;
    transform:translateY(15px) scale(.98);
    transition:transform .25s ease;
}

.modalQREventoSocio.activo .contenidoModalQREventoSocio,
.modalDatosBancariosSocio.activo .contenidoModalDatosBancariosSocio{
    transform:translateY(0) scale(1);
}

.cerrarModalQREventoSocio,
.cerrarModalDatosBancariosSocio{
    position:absolute;
    top:15px;
    right:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    padding:0;
    background:#edf4f9;
    color:#002d72;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:25px;
    line-height:1;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.cerrarModalQREventoSocio:hover,
.cerrarModalDatosBancariosSocio:hover{
    background:#0059a7;
    color:#ffffff;
    transform:rotate(90deg);
}

.iconoModalQRSocio,
.iconoModalDatosBancarios{
    display:flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    margin-bottom:19px;
    background:#eaf4fb;
    color:#0059a7;
    border-radius:14px;
    font-size:25px;
}

.etiquetaModalQRSocio,
.etiquetaModalDatosBancarios{
    display:block;
    margin-bottom:7px;
    color:#0059a7;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.contenidoModalQREventoSocio h2,
.contenidoModalDatosBancariosSocio h2{
    margin:0 0 22px;
    padding-right:30px;
    color:#002d72;
    font-size:27px;
    font-weight:800;
    line-height:1.3;
}

.imagenModalQREventoSocio{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin-bottom:20px;
    padding:20px;
    background:#f7f9fb;
    border:1px solid #dce5ed;
    border-radius:13px;
    box-sizing:border-box;
}

.imagenModalQREventoSocio img{
    display:block;
    width:100%;
    max-width:280px;
    height:auto;
    object-fit:contain;
}

.estadoModalQREventoSocio{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    margin-bottom:18px;
    padding:12px 15px;
    border-radius:9px;
    font-size:13px;
    font-weight:700;
    box-sizing:border-box;
}

.estadoModalQRActivo{
    background:#e9f8ef;
    color:#14733d;
    border:1px solid #bce3cb;
}

.estadoModalQRPendiente{
    background:#fff4e7;
    color:#9a5f15;
    border:1px solid #efd3a5;
}

.contenidoModalQREventoSocio > p{
    margin:0;
    color:#687580;
    font-size:13px;
    line-height:1.7;
    text-align:center;
}

.listaDatosBancariosSocio{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:20px;
}

.listaDatosBancariosSocio > div{
    padding:14px 16px;
    background:#f7f9fb;
    border:1px solid #dce5ed;
    border-radius:9px;
}

.listaDatosBancariosSocio span{
    display:block;
    margin-bottom:4px;
    color:#78858f;
    font-size:10px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.listaDatosBancariosSocio strong{
    display:block;
    color:#002d72;
    font-size:14px;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.mensajeDatosBancariosCorreo{
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin-bottom:20px;
    padding:17px;
    background:#edf5fb;
    border-left:4px solid #0059a7;
    border-radius:8px;
}

.mensajeDatosBancariosCorreo i{
    margin-top:2px;
    color:#0059a7;
    font-size:19px;
}

.mensajeDatosBancariosCorreo p{
    margin:0;
    color:#4e6272;
    font-size:13px;
    line-height:1.65;
}

.avisoReferenciaPagoSocio{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:16px;
    background:#fff8e8;
    color:#6b5725;
    border:1px solid #ead79e;
    border-radius:8px;
}

.avisoReferenciaPagoSocio i{
    margin-top:2px;
    color:#b18421;
    font-size:17px;
}

.avisoReferenciaPagoSocio p{
    margin:0;
    font-size:12px;
    line-height:1.65;
}

body.modalDashboardSocioAbierto{
    overflow:hidden;
}

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

.seccionEventosSocio{
    padding:40px 20px;
}

.contenedorEventosSocio{
    max-width:1700px;
    margin:auto;
}

.contenedorEventosSocio h1{
    text-align:center;
    color:#002d72;
    margin-bottom:35px;
}

.layoutEventosSocio{
    display:grid;
    grid-template-columns:280px 420px 1fr;
    gap:25px;
    align-items:flex-start;
}

/* =======================================
MINIATURAS
======================================= */

.columnaMiniaturasEventos,
.columnaFormularioEvento,
.columnaMapaEvento{
    background:#fff;
    border-radius:12px;
    box-shadow:0 5px 18px rgba(0,0,0,.10);
    padding:20px;
}

.columnaMiniaturasEventos h2,
.columnaFormularioEvento h2,
.columnaMapaEvento h2{
    color:#002d72;
    margin-bottom:20px;
}

.sliderMiniaturasEventos{
    height:700px;
    padding-top:12px;
    box-sizing:border-box;
    overflow:hidden;
}

.sliderMiniaturasEventos .slick-list{
    padding-top:8px !important;
}

.sliderMiniaturasEventos .slick-slide{
    height:230px !important;
    box-sizing:border-box;
}

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

.miniaturaEventoSocio{
    height:215px;
    box-sizing:border-box;
    overflow:hidden;
}

.miniaturaEventoSocio:hover{
    background:#f2f6fb;
}

.miniaturaEventoSocio.activo{
    border:2px solid #0057b8;
}

.miniaturaEventoSocio img{
    width:100%;
    height:130px;
    object-fit:cover;
    border-radius:8px;
}

.miniaturaEventoSocio p{
    margin-top:10px;
    text-align:center;
    font-weight:600;
    color:#002d72;
}

.miniaturaEventoPlaceholder{
    width:100%;
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#efefef;
    border-radius:8px;
    color:#666;
}

/* =======================================
FORMULARIO
======================================= */

.formRegistroEventoSocio{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.formRegistroEventoSocio label{
    color:#002d72;
    font-weight:600;
}

.formRegistroEventoSocio input{
    width:100%;
    padding:12px;
    border:1px solid #d7d7d7;
    border-radius:8px;
    box-sizing:border-box;
}

.precioEventoSocio{
    margin-top:10px;
    padding:15px;
    background:#eef5ff;
    border-left:5px solid #0057b8;
    border-radius:8px;
    font-size:16px;
}

.asientoSeleccionadoBox{
    margin-top:5px;
    background:#f8f8f8;
    padding:15px;
    border-radius:8px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:8px 10px;
}

.asientoSeleccionadoBox span{
    font-weight:600;
}

.formRegistroEventoSocio button{
    margin-top:15px;
    padding:15px;
    background:#002d72;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
    font-weight:700;
}

.formRegistroEventoSocio button:hover{
    background:#0057b8;
}

.alertaRegistroExitoso{
    background:#e8f7ee;
    border-left:5px solid #1c9b52;
    color:#145c33;
    padding:18px 22px;
    border-radius:10px;
    margin:20px 0 30px;
    font-size:15px;
    line-height:1.6;
}

.alertaRegistroError{
    background:#fdecec;
    border-left:5px solid #c62828;
    color:#8b1a1a;
    padding:18px 22px;
    border-radius:10px;
    margin:20px 0 30px;
    font-size:15px;
    line-height:1.6;
}

.avisoPagoEvento{
    background:#fff4f4;
    border-left:5px solid #c62828;
    color:#a00000;
    padding:14px 16px;
    border-radius:8px;
    margin:12px 0 18px;
    font-size:13px;
    line-height:1.6;
    font-weight:600;
}

/* =======================================
MAPA
======================================= */

.mensajeMapaEvento{
    text-align:center;
    color:#666;
    padding:40px 0;
}

.seatingMapSocio{
    width:100%;
    overflow:auto;
    min-height:700px;
}

/* =======================================
MESAS
======================================= */

.mesa-row{
    display:flex;
    justify-content:center;
    gap:36px;
    margin-bottom:48px;
}

.mesa{
    width:130px;
    height:130px;
    background:#e6e6e6;
    border-radius:50%;
    position:relative;
    margin:18px;
}

.mesa-principal{
    border-radius:15px !important;
    background:#ddd;
    margin-top:35px;
}

.mesa-label{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:13px;
    font-weight:700;
    color:#002d72;
    text-align:center;
    z-index:1;
}

.asiento{
    width:24px;
    height:24px;
    border-radius:50%;
    background:#2ecc71;
    position:absolute;
    transform:translate(-50%,-50%);
    cursor:pointer;
    transition:.2s;
    z-index:2;
}

.asiento:hover{
    transform:translate(-50%,-50%) scale(1.12);
}

.asiento.seleccionado{
    background:#0057b8;
}

.asiento.ocupado{
    background:#8d8d8d;
    cursor:not-allowed;
}

.asiento-numero{
    color:#fff;
    font-size:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
}

.mesa-bloqueada{
    background:#cfcfcf;
    opacity:.85;
}

.leyendaMapaEvento{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:15px;
    font-size:13px;
    color:#555;
}

.leyendaMapaEvento span{
    display:flex;
    align-items:center;
    gap:6px;
}

.leyendaMapaEvento i{
    width:14px;
    height:14px;
    display:inline-block;
    border-radius:50%;
}

.estadoDisponible{
    background:#2ecc71;
}

.estadoSeleccionado{
    background:#0057b8;
}

.estadoOcupado{
    background:#8d8d8d;
}

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

.seccionServiciosCoparmex{
    padding:45px 20px;
}

.contenedorServiciosCoparmex{
    max-width:1400px;
    margin:0 auto;
}

.contenedorServiciosCoparmex h1{
    color:#002d72;
    text-align:center;
    font-size:38px;
    margin-bottom:35px;
}

.bloqueMembresiaVistazo{
    margin-bottom:55px;
}

.bloqueMembresiaVistazo h2{
    color:#002d72;
    text-align:center;
    font-size:30px;
    text-transform:uppercase;
    margin-bottom:25px;
}

.tablaMembresiaVistazo{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    background:#002d72;
    border:2px solid #ffffff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,.14);
}

.itemMembresiaVistazo{
    min-height:165px;
    padding:22px 15px;
    border-right:1px solid rgba(255,255,255,.45);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
    box-sizing:border-box;
}

.itemMembresiaVistazo:last-child{
    border-right:none;
}

.itemMembresiaVistazo strong{
    display:block;
    font-size:52px;
    line-height:1;
    font-weight:800;
    margin-bottom:12px;
}

.itemMembresiaVistazo span{
    display:block;
    font-size:14px;
    line-height:1.35;
    text-transform:uppercase;
    font-weight:600;
    letter-spacing:.4px;
}

.bloqueServiciosListado{
    margin-bottom:55px;
}

.bloqueServiciosListado h2{
    color:#002d72;
    font-size:30px;
    margin-bottom:25px;
}

.gridServiciosCoparmex{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}

.cardServicioCoparmex{

    background:#fff;
    border:none;
    border-radius:12px;

    height:160px;

    padding:18px 12px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 3px 10px rgba(0,0,0,.10);

}

.cardServicioCoparmex:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 22px rgba(0,0,0,.16);
}

.cardServicioExclusivo{
    border-top-color:#004a99;
}

.iconoServicioCoparmex{

    width:72px;
    height:72px;

    margin-bottom:12px;

    border-radius:14px;

}

.iconoServicioCoparmex img{

    max-width:58px;
    max-height:58px;

}

.iconoServicioCoparmex i{
    font-size:42px;
    color:#002d72;
}

.cardServicioCoparmex h3{

    font-size:16px;
    line-height:1.3;
    margin:0;

}

.mensajeServiciosVacio{
    grid-column:1 / -1;
    background:#fff;
    border-radius:12px;
    padding:28px;
    text-align:center;
    color:#555;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.modalServicioCoparmex{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:9999;
}

.modalServicioCoparmex.activo{
    display:flex;
}

.modalServicioContenido{
    width:100%;
    max-width:760px;
    max-height:88vh;
    overflow:auto;
    background:white;
    border-radius:16px;
    padding:36px;
    position:relative;
    text-align:center;
    box-shadow:0 10px 35px rgba(0,0,0,.35);
}

.cerrarModalServicio{
    position:absolute;
    top:15px;
    right:18px;
    background:#002d72;
    color:white;
    border:none;
    width:38px;
    height:38px;
    border-radius:50%;
    font-size:26px;
    line-height:1;
    cursor:pointer;
}

.modalServicioImagen{
    width:140px;
    height:140px;
    background:#f1f5fb;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 22px auto;
}

.modalServicioImagen img{
    max-width:115px;
    max-height:115px;
    object-fit:contain;
}

.modalServicioImagen i{
    font-size:50px;
    color:#002d72;
}

.modalServicioContenido h2{
    color:#002d72;
    font-size:30px;
    margin:0 0 18px 0;
}

.modalServicioDescripcion{
    color:#444;
    font-size:16px;
    line-height:1.7;
    text-align:left;
}

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

.bloqueBeneficiosSocios{
    background:linear-gradient(135deg,#003b70,#0067b1);
    color:#fff;
    border-radius:22px;
    padding:35px;
    margin:35px 0 55px;
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:25px;
    align-items:center;
}

.textoBeneficiosSocios h2{
    margin:0 0 12px;
    font-size:28px;
}

.textoBeneficiosSocios p{
    margin:0;
    line-height:1.7;
}

.contadorBeneficiosSocios{
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.25);
    border-radius:18px;
    padding:25px;
    text-align:center;
}

.contadorBeneficiosSocios strong{
    display:block;
    font-size:42px;
    line-height:1;
}

.contadorBeneficiosSocios span{
    display:block;
    margin-top:8px;
}

.cardBeneficioSocio{
    position:relative;
}

.etiquetaBeneficioSocio{
    margin-top:15px;
    display:inline-block;
    background:#fff2cc;
    color:#946800;
    padding:7px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
}

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

.seccionRentaEspacios{
    width: 100%;
    padding: 70px 20px;
    background:
        radial-gradient(
            circle at top right,
            rgba(0, 89, 167, 0.12),
            transparent 35%
        ),
        #f3f6f9;
}

.contenedorRentaEspacios{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

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

.etiquetaRentaEspacios{
    display: inline-block;
    margin-bottom: 13px;
    color: #0059a7;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.encabezadoRentaEspacios h1{
    margin: 0 0 16px;
    color: #003366;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.12;
}

.encabezadoRentaEspacios p{
    max-width: 720px;
    margin: 0;
    color: #5c6873;
    font-size: 17px;
    line-height: 1.7;
}

.contenidoRentaEspacios{
    display: grid;
    grid-template-columns: 0.85fr 1.35fr;
    gap: 45px;
    align-items: start;
}

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

.bloqueInformacionRenta{
    display: flex;
    gap: 18px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e0e6ec;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0, 51, 102, 0.06);
}

.numeroInformacionRenta{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    background: #e9f3fb;
    color: #0059a7;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
}

.bloqueInformacionRenta h2{
    margin: 2px 0 8px;
    color: #003366;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.3;
}

.bloqueInformacionRenta p{
    margin: 0;
    color: #66727d;
    font-size: 14px;
    line-height: 1.65;
}

.contenedorFormularioRenta{
    padding: 34px;
    background: #ffffff;
    border: 1px solid #dfe6ec;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 51, 102, 0.1);
}

.encabezadoFormularioRenta{
    margin-bottom: 28px;
}

.encabezadoFormularioRenta h2{
    margin: 0 0 8px;
    color: #003366;
    font-size: 28px;
    font-weight: 800;
}

.encabezadoFormularioRenta p{
    margin: 0;
    color: #687580;
    font-size: 15px;
    line-height: 1.6;
}

.mensajeFormularioRenta{
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 25px;
    padding: 16px 18px;
    border-radius: 10px;
}

.mensajeFormularioRenta i{
    margin-top: 2px;
    font-size: 20px;
}

.mensajeFormularioRenta div{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.mensajeFormularioRenta span{
    font-size: 13px;
    line-height: 1.5;
}

.mensajeFormularioRentaExito{
    background: #edf9f2;
    color: #217747;
    border: 1px solid #bde4cd;
}

.mensajeFormularioRentaError{
    background: #fff0f0;
    color: #a63c3c;
    border: 1px solid #efc1c1;
}

.mensajeFormularioRentaAdvertencia{
    background: #fff8e8;
    color: #8c6a1f;
    border: 1px solid #ead79e;
}

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

.grupoFormularioRenta{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    width:100%;
}

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

.grupoFormularioRenta label{
    display:block;
    margin:0;
    color:#344655;
    font-size:14px;
    font-weight:700;
    line-height:1.4;
}

.grupoFormularioRenta label span{
    color:#d43b3b;
}

.grupoFormularioRenta input,
.grupoFormularioRenta select{
    display:block;
    width:100%;
    max-width:100%;
    height:50px;
    padding:0 15px;
    border:1px solid #ccd6df;
    border-radius:8px;
    background:#fff;
    color:#344655;
    font-size:14px;
    font-family:inherit;
    outline:none;
    box-sizing:border-box;
    transition:.25s;
}

.grupoFormularioRenta input::placeholder{
    color:#98a5b1;
}

.grupoFormularioRenta input:focus,
.grupoFormularioRenta select:focus{
    border-color:#0059a7;
    box-shadow:0 0 0 3px rgba(0,89,167,.12);
}

.grupoFormularioRenta select{
    cursor:pointer;
}

.separadorFormularioRenta{
    grid-column:1 / -1;
    margin-top:4px;
    padding-top:18px;
    border-top:1px solid #dfe5ea;
}

.separadorFormularioRenta span{
    display:inline-block;
    padding:0 12px 0 0;
    background:#fff;
    color:#003366;
    font-size:13px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.accionesFormularioRenta{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-top:10px;
}

.accionesFormularioRenta p{
    flex:1;
    margin:0;
    color:#7c8792;
    font-size:12px;
    line-height:1.6;
}

.botonSolicitarCotizacion{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:230px;
    height:50px;
    padding:0 28px;
    background:#0059a7;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
    font-weight:700;
    transition:.25s;
}

.botonSolicitarCotizacion:hover{
    background:#003f78;
}

.botonSolicitarCotizacion:disabled{
    opacity:.7;
    cursor:not-allowed;
}

.botonSolicitarCotizacion.enviando{
    background:#5d7d96;
}

.mensajeFormularioRenta{
    transition:all .4s ease;
}

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

.seccionRentaCabina{
    width:100%;
    max-width:100%;
    padding:70px 20px;
    background:
        radial-gradient(
            circle at top right,
            rgba(0,89,167,.11),
            transparent 32%
        ),
        #f3f6f9;
    overflow-x:hidden;
    box-sizing:border-box;
}

.contenedorRentaCabina{
    width:100%;
    max-width:1200px;
    min-width:0;
    margin:0 auto;
    box-sizing:border-box;
}

/* ==========================================================
   ENCABEZADO
========================================================== */

.encabezadoRentaCabina{
    width:100%;
    max-width:820px;
    margin:0 0 35px;
}

.etiquetaRentaCabina{
    display:inline-block;
    margin:0 0 13px;
    color:#0059a7;
    font-size:13px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.encabezadoRentaCabina h1{
    margin:0 0 16px;
    color:#003366;
    font-size:48px;
    font-weight:800;
    line-height:1.12;
}

.encabezadoRentaCabina p{
    width:100%;
    max-width:760px;
    margin:0;
    color:#5c6873;
    font-size:17px;
    line-height:1.7;
}

/* ==========================================================
   AVISO GENERAL
========================================================== */

.avisoGeneralCabina{
    display:flex;
    align-items:center;
    gap:20px;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 0 55px;
    padding:24px 28px;
    background:#003366;
    color:#ffffff;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,51,102,.16);
    box-sizing:border-box;
}

.iconoAvisoCabina{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 58px;
    width:58px;
    height:58px;
    background:rgba(255,255,255,.12);
    border-radius:50%;
    font-size:23px;
}

.avisoGeneralCabina > div:last-child{
    flex:1;
    min-width:0;
}

.avisoGeneralCabina strong{
    display:block;
    margin:0 0 5px;
    color:#ffffff;
    font-size:17px;
    font-weight:700;
    line-height:1.4;
}

.avisoGeneralCabina p{
    margin:0;
    color:#d6e4ef;
    font-size:14px;
    line-height:1.6;
}

/* ==========================================================
   BLOQUES DE PAQUETES
========================================================== */

.bloquePaquetesCabina{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 0 65px;
    padding:0;
    clear:both;
    box-sizing:border-box;
}

.encabezadoBloqueCabina{
    display:block;
    width:100%;
    max-width:760px;
    margin:0 0 30px;
}

.encabezadoBloqueCabina > span{
    display:block;
    margin:0 0 7px;
    color:#0059a7;
    font-size:12px;
    font-weight:750;
    line-height:1.4;
    letter-spacing:1.3px;
    text-transform:uppercase;
}

.encabezadoBloqueCabina h2{
    margin:0 0 11px;
    color:#003366;
    font-size:32px;
    font-weight:800;
    line-height:1.2;
}

.encabezadoBloqueCabina p{
    margin:0;
    color:#687580;
    font-size:15px;
    line-height:1.65;
}

/* ==========================================================
   GRID DE PAQUETES
========================================================== */

.gridPaquetesCabina{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    align-items:stretch;
    gap:24px;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.cardPaqueteCabina{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    min-width:0;
    height:100%;
    margin:0;
    padding:28px;
    background:#ffffff;
    border:1px solid #dfe6ec;
    border-radius:16px;
    box-shadow:0 12px 30px rgba(0,51,102,.07);
    overflow:hidden;
    box-sizing:border-box;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.cardPaqueteCabina:hover{
    transform:translateY(-5px);
    border-color:#9fc4df;
    box-shadow:0 18px 38px rgba(0,51,102,.12);
}

.cardPaqueteCabinaDestacado{
    border:2px solid #0059a7;
}

.distintivoPaqueteCabina{
    position:absolute;
    top:0;
    right:0;
    max-width:70%;
    padding:8px 15px;
    background:#0059a7;
    color:#ffffff;
    border-radius:0 0 0 10px;
    font-size:10px;
    font-weight:750;
    line-height:1.3;
    letter-spacing:.7px;
    text-align:center;
    text-transform:uppercase;
    box-sizing:border-box;
}

.cabeceraCardPaquete{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    width:100%;
    min-width:0;
    margin:0 0 20px;
}

.iconoPaqueteCabina{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 52px;
    width:52px;
    height:52px;
    background:#eaf4fb;
    color:#0059a7;
    border-radius:12px;
    font-size:21px;
}

.nivelPaqueteCabina{
    display:block;
    min-width:0;
    color:#667784;
    font-size:11px;
    font-weight:750;
    line-height:1.3;
    letter-spacing:1px;
    text-align:right;
    text-transform:uppercase;
}

.cardPaqueteCabina h3{
    display:block;
    width:100%;
    margin:0 0 14px;
    color:#003366;
    font-size:22px;
    font-weight:800;
    line-height:1.25;
}

.precioPaqueteCabina{
    display:flex;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:6px;
    width:100%;
    min-width:0;
    margin:0 0 22px;
    color:#0059a7;
}

.precioPaqueteCabina small{
    display:block;
    width:100%;
    color:#687580;
    font-size:12px;
    font-weight:700;
    line-height:1.3;
    text-transform:uppercase;
}

.precioPaqueteCabina strong{
    display:block;
    font-size:32px;
    font-weight:850;
    line-height:1;
}

.precioPaqueteCabina span{
    display:block;
    padding-bottom:3px;
    color:#687580;
    font-size:12px;
    font-weight:700;
}

.cardPaqueteCabina ul{
    display:flex;
    flex:1;
    flex-direction:column;
    gap:12px;
    width:100%;
    min-width:0;
    margin:0 0 25px;
    padding:0;
    list-style:none;
}

.cardPaqueteCabina li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    color:#586570;
    font-size:13px;
    line-height:1.55;
}

.cardPaqueteCabina li i{
    flex:0 0 15px;
    width:15px;
    margin-top:3px;
    color:#0059a7;
    font-size:12px;
    text-align:center;
}

.botonSeleccionarPaqueteCabina{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:46px;
    margin-top:auto;
    padding:11px 18px;
    background:#ffffff;
    color:#0059a7;
    border:1px solid #0059a7;
    border-radius:8px;
    cursor:pointer;
    box-sizing:border-box;
    font-family:inherit;
    font-size:13px;
    font-weight:750;
    line-height:1.3;
    text-align:center;
    transition:
        background .2s ease,
        color .2s ease;
}

.botonSeleccionarPaqueteCabina:hover{
    background:#0059a7;
    color:#ffffff;
}

.cardPaqueteCabinaDestacado .botonSeleccionarPaqueteCabina{
    background:#0059a7;
    color:#ffffff;
}

.cardPaqueteCabinaDestacado .botonSeleccionarPaqueteCabina:hover{
    background:#003f78;
}

/* ==========================================================
   CONDICIONES Y REGLAMENTO
========================================================== */

.bloqueCondicionesCabina{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:24px;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 0 28px;
    box-sizing:border-box;
}

.columnaCondicionesCabina{
    width:100%;
    min-width:0;
    padding:30px;
    background:#ffffff;
    border:1px solid #dfe6ec;
    border-radius:15px;
    box-shadow:0 10px 28px rgba(0,51,102,.06);
    box-sizing:border-box;
}

.tituloCondicionesCabina{
    display:flex;
    align-items:center;
    gap:13px;
    margin:0 0 20px;
}

.tituloCondicionesCabina i{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 44px;
    width:44px;
    height:44px;
    background:#eaf4fb;
    color:#0059a7;
    border-radius:10px;
    font-size:18px;
}

.tituloCondicionesCabina h2{
    margin:0;
    color:#003366;
    font-size:22px;
    font-weight:800;
    line-height:1.3;
}

.columnaCondicionesCabina ol{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:0;
    padding-left:20px;
}

.columnaCondicionesCabina li{
    padding-left:5px;
    color:#5f6b75;
    font-size:13px;
    line-height:1.6;
}

/* ==========================================================
   AVISO DE DISPONIBILIDAD
========================================================== */

.avisoDisponibilidadCabina{
    display:flex;
    align-items:flex-start;
    gap:17px;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 0 65px;
    padding:22px 25px;
    background:#fff8e8;
    border:1px solid #ead79e;
    border-radius:12px;
    color:#6b5725;
    box-sizing:border-box;
}

.avisoDisponibilidadCabina > i{
    flex:0 0 auto;
    margin-top:2px;
    color:#b18421;
    font-size:22px;
}

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

.avisoDisponibilidadCabina strong{
    display:block;
    margin:0 0 5px;
    font-size:15px;
}

.avisoDisponibilidadCabina p{
    margin:0;
    font-size:13px;
    line-height:1.65;
}

/* ==========================================================
   FORMULARIO DE DISPONIBILIDAD
========================================================== */

.seccionFormularioCabina{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:40px;
    align-items:start;
    width:100%;
    max-width:100%;
    min-width:0;
    scroll-margin-top:110px;
    box-sizing:border-box;
}

.informacionFormularioCabina{
    width:100%;
    min-width:0;
    padding:10px 0;
}

.informacionFormularioCabina > span{
    display:block;
    margin:0 0 9px;
    color:#0059a7;
    font-size:12px;
    font-weight:750;
    line-height:1.4;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.informacionFormularioCabina h2{
    margin:0 0 15px;
    color:#003366;
    font-size:34px;
    font-weight:800;
    line-height:1.2;
}

.informacionFormularioCabina > p{
    margin:0 0 28px;
    color:#64717c;
    font-size:15px;
    line-height:1.7;
}

.datoFormularioCabina{
    display:flex;
    align-items:flex-start;
    gap:15px;
    width:100%;
    min-width:0;
    margin:0 0 18px;
    padding:18px;
    background:#ffffff;
    border:1px solid #dfe6ec;
    border-radius:11px;
    box-sizing:border-box;
}

.datoFormularioCabina > i{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    width:42px;
    height:42px;
    background:#eaf4fb;
    color:#0059a7;
    border-radius:9px;
}

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

.datoFormularioCabina strong{
    display:block;
    margin:0 0 4px;
    color:#003366;
    font-size:14px;
}

.datoFormularioCabina span{
    display:block;
    color:#697681;
    font-size:12px;
    line-height:1.5;
}

.contenedorFormularioCabina{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:34px;
    background:#ffffff;
    border:1px solid #dfe6ec;
    border-radius:18px;
    box-shadow:0 16px 40px rgba(0,51,102,.1);
    box-sizing:border-box;
}

.encabezadoFormularioCabina{
    margin:0 0 27px;
}

.encabezadoFormularioCabina h2{
    margin:0 0 8px;
    color:#003366;
    font-size:28px;
    font-weight:800;
    line-height:1.25;
}

.encabezadoFormularioCabina p{
    margin:0;
    color:#687580;
    font-size:14px;
    line-height:1.6;
}

/* ==========================================================
   MENSAJES
========================================================== */

.mensajeFormularioCabina{
    display:flex;
    align-items:flex-start;
    gap:13px;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 0 24px;
    padding:16px 18px;
    border-radius:10px;
    box-sizing:border-box;
}

.mensajeFormularioCabina > i{
    flex:0 0 auto;
    margin-top:2px;
    font-size:20px;
}

.mensajeFormularioCabina > div{
    display:flex;
    flex:1;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

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

.mensajeFormularioCabina span{
    font-size:13px;
    line-height:1.5;
}

.mensajeFormularioCabinaExito{
    background:#edf9f2;
    color:#217747;
    border:1px solid #bde4cd;
}

.mensajeFormularioCabinaError{
    background:#fff0f0;
    color:#a63c3c;
    border:1px solid #efc1c1;
}

.mensajeFormularioCabinaAdvertencia{
    background:#fff8e8;
    color:#8c6a1f;
    border:1px solid #ead79e;
}

/* ==========================================================
   CAMPOS DEL FORMULARIO
========================================================== */

.formularioRentaCabina{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:22px;
    row-gap:22px;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

.grupoFormularioCabina{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
    max-width:100%;
    min-width:0;
}

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

.grupoFormularioCabina label{
    margin:0;
    color:#344655;
    font-size:14px;
    font-weight:700;
    line-height:1.4;
}

.grupoFormularioCabina label span{
    color:#d43b3b;
}

.grupoFormularioCabina input,
.grupoFormularioCabina select{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    height:50px;
    margin:0;
    padding:0 15px;
    background:#ffffff;
    color:#344655;
    border:1px solid #ccd6df;
    border-radius:8px;
    outline:none;
    box-sizing:border-box;
    font-family:inherit;
    font-size:14px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.grupoFormularioCabina input::placeholder{
    color:#98a5b1;
}

.grupoFormularioCabina input:focus,
.grupoFormularioCabina select:focus{
    border-color:#0059a7;
    box-shadow:0 0 0 3px rgba(0,89,167,.12);
}

.grupoFormularioCabina select{
    cursor:pointer;
}

.accionesFormularioCabina{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    width:100%;
    min-width:0;
    margin-top:5px;
}

.accionesFormularioCabina p{
    flex:1;
    min-width:0;
    margin:0;
    color:#7c8792;
    font-size:12px;
    line-height:1.6;
}

.botonConsultarCabina{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex:0 0 auto;
    min-width:225px;
    min-height:50px;
    padding:11px 24px;
    background:#0059a7;
    color:#ffffff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    box-sizing:border-box;
    font-family:inherit;
    font-size:14px;
    font-weight:750;
    line-height:1.3;
    text-align:center;
    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.botonConsultarCabina:hover{
    background:#003f78;
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(0,89,167,.22);
}

.botonConsultarCabina:disabled{
    cursor:not-allowed;
    opacity:.75;
    transform:none;
}

.botonConsultarCabina.enviando{
    background:#52758f;
}

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

.seccionNoticias{

    width:100%;
    padding:70px 20px;
    background:
    radial-gradient(
        circle at top right,
        rgba(0,89,167,.10),
        transparent 30%
    ),
    #f3f6f9;

    overflow-x:hidden;

}

.contenedorNoticias{

    width:100%;
    max-width:1200px;
    margin:auto;

}

/*==========================================================
ENCABEZADO
==========================================================*/

.encabezadoNoticias{

    width:100%;
    max-width:760px;
    margin-bottom:55px;

}

.etiquetaNoticias{

    display:inline-block;
    margin-bottom:12px;

    color:#0059a7;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;

}

.encabezadoNoticias h1{

    margin:0 0 18px;

    color:#003366;
    font-size:48px;
    font-weight:800;
    line-height:1.15;

}

.encabezadoNoticias p{

    margin:0;

    color:#66727d;
    font-size:17px;
    line-height:1.75;

}

/*==========================================================
BOTONES DE SECCIÓN
==========================================================*/

.menuSeccionesNoticias{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;

    width:100%;

    margin-bottom:60px;

}

.botonSeccionNoticias{

    display:flex;
    align-items:center;
    gap:25px;

    width:100%;

    padding:32px;

    background:#ffffff;

    border:2px solid #dce5ed;
    border-radius:18px;

    text-decoration:none;

    box-sizing:border-box;

    transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;

    box-shadow:0 10px 30px rgba(0,51,102,.05);

}

.botonSeccionNoticias:hover{

    transform:translateY(-6px);

    border-color:#0059a7;

    box-shadow:0 18px 35px rgba(0,51,102,.12);

}

.iconoSeccionNoticias{

    display:flex;
    align-items:center;
    justify-content:center;

    width:78px;
    height:78px;

    flex-shrink:0;

    border-radius:18px;

    background:#edf6fc;

    color:#0059a7;

    font-size:32px;

}

.contenidoBotonNoticias{

    flex:1;

}

.contenidoBotonNoticias h2{

    margin:0 0 10px;

    color:#003366;

    font-size:25px;
    font-weight:800;

}

.contenidoBotonNoticias p{

    margin:0 0 18px;

    color:#67727d;

    font-size:15px;
    line-height:1.65;

}

.contenidoBotonNoticias span{

    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#0059a7;

    font-size:14px;
    font-weight:700;

}

/*==========================================================
BLOQUE INFORMATIVO
==========================================================*/

.bloquePresentacionNoticias{

    display:flex;
    align-items:center;
    gap:22px;

    width:100%;

    padding:30px;

    background:#003366;

    border-radius:18px;

    box-sizing:border-box;

}

.iconoPresentacionNoticias{

    display:flex;
    align-items:center;
    justify-content:center;

    width:75px;
    height:75px;

    flex-shrink:0;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    color:#ffffff;

    font-size:30px;

}

.bloquePresentacionNoticias h2{

    margin:0 0 10px;

    color:#ffffff;

    font-size:28px;
    font-weight:800;

    line-height:1.2;

}

.bloquePresentacionNoticias p{

    margin:0;

    color:#d6e4ef;

    font-size:15px;
    line-height:1.7;

}

/* ==========================================================
   LISTADO DE NOTICIAS
========================================================== */

.seccionListadoNoticias{

    width:100%;
    padding:70px 20px;
    background:
    radial-gradient(
        circle at top right,
        rgba(0,89,167,.10),
        transparent 30%
    ),
    #f3f6f9;

    overflow-x:hidden;

}

.contenedorListadoNoticias{

    width:100%;
    max-width:1200px;
    margin:auto;

}

/*==========================================================
ENCABEZADO
==========================================================*/

.encabezadoListadoNoticias{

    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;

    margin-bottom:55px;

}

.encabezadoListadoNoticias>div{

    max-width:760px;

}

.etiquetaListadoNoticias{

    display:inline-block;

    margin-bottom:12px;

    color:#0059a7;

    font-size:13px;
    font-weight:700;

    letter-spacing:1.5px;
    text-transform:uppercase;

}

.encabezadoListadoNoticias h1{

    margin:0 0 16px;

    color:#003366;

    font-size:46px;
    font-weight:800;
    line-height:1.15;

}

.encabezadoListadoNoticias p{

    margin:0;

    color:#68737e;

    font-size:16px;
    line-height:1.7;

}

.botonRegresarNoticias{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:13px 20px;

    background:#ffffff;

    border:2px solid #0059a7;
    border-radius:10px;

    color:#0059a7;

    font-size:14px;
    font-weight:700;

    text-decoration:none;

    transition:.25s;

}

.botonRegresarNoticias:hover{

    background:#0059a7;
    color:#ffffff;

}

/*==========================================================
GRID
==========================================================*/

.gridListadoNoticias{

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;

}

.cardArticuloNoticia{

    display:flex;
    flex-direction:column;

    background:#ffffff;

    border:none;
    border-radius:18px;

    overflow:hidden;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 12px 28px rgba(0,51,102,.07);

}

.cardArticuloNoticia:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,51,102,.14);

}

.imagenArticuloNoticia{

    position:relative;

    height:230px;

    overflow:hidden;

}

.imagenArticuloNoticia img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.35s;

}

.cardArticuloNoticia:hover img{

    transform:scale(1.05);

}

.imagenArticuloPlaceholder{

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#e9eef3;

    color:#0059a7;

    font-size:58px;

}

.tipoArticuloNoticia{

    position:absolute;

    top:15px;
    left:15px;

    padding:7px 14px;

    background:#0059a7;

    border-radius:40px;

    color:#ffffff;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;
    text-transform:uppercase;

}

.contenidoArticuloNoticia{

    padding:24px;

}

.fechaArticuloNoticia{

    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-bottom:15px;

    color:#7d8994;

    font-size:13px;

}

.contenidoArticuloNoticia h2{

    margin:0 0 14px;

    color:#003366;

    font-size:24px;
    font-weight:800;
    line-height:1.3;

}

.contenidoArticuloNoticia p{

    margin:0 0 22px;

    color:#67737e;

    font-size:15px;
    line-height:1.65;

}

.enlaceArticuloNoticia{

    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#0059a7;

    font-size:14px;
    font-weight:700;

}

/*==========================================================
VACÍO
==========================================================*/

.mensajeListadoNoticiasVacio{

    padding:80px 40px;

    background:#ffffff;

    border-radius:20px;

    text-align:center;

}

.mensajeListadoNoticiasVacio i{

    margin-bottom:25px;

    color:#0059a7;

    font-size:72px;

}

.mensajeListadoNoticiasVacio h2{

    margin-bottom:12px;

    color:#003366;

}

.mensajeListadoNoticiasVacio p{

    color:#6c7681;

}

/*==========================================================
MODAL
==========================================================*/

.modalArticuloNoticia{

    position:fixed;

    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:35px;

    background:rgba(0,0,0,.65);

    opacity:0;
    visibility:hidden;

    transition:.25s;

    z-index:9999;

}

.modalArticuloNoticia.activo{

    opacity:1;
    visibility:visible;

}

.modalArticuloContenido{

    position:relative;

    width:100%;
    max-width:950px;

    max-height:92vh;

    overflow:auto;

    background:#ffffff;

    border-radius:20px;

}

.modalArticuloImagen{

    width:100%;
    height:380px;

}

.modalArticuloImagen img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.modalArticuloPlaceholder{

    width:100%;
    height:380px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#eef3f7;

    color:#0059a7;

    font-size:90px;

}

.modalArticuloInformacion{

    padding:40px;

}

.modalArticuloTipo{

    display:inline-block;

    margin-bottom:10px;

    color:#0059a7;

    font-size:12px;
    font-weight:700;

    letter-spacing:1.5px;
    text-transform:uppercase;

}

.modalArticuloFecha{

    display:block;

    margin-bottom:15px;

    color:#8b97a3;

    font-size:14px;

}

.modalArticuloInformacion h2{

    margin:0 0 15px;

    color:#003366;

    font-size:36px;
    font-weight:800;

}

.modalArticuloInformacion h3{

    margin:0 0 28px;

    color:#64707b;

    font-size:22px;
    font-weight:500;
    line-height:1.5;

}

.modalArticuloCuerpo{

    color:#4e5963;

    font-size:16px;
    line-height:1.9;

}

.cerrarModalArticulo{

    position:absolute;

    top:18px;
    right:18px;

    width:45px;
    height:45px;

    border:none;
    border-radius:50%;

    background:#ffffff;

    cursor:pointer;

    color:#003366;

    font-size:28px;

    box-shadow:0 8px 20px rgba(0,0,0,.18);

}

body.modalAbierto{

    overflow:hidden;

}

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

.seccionComisionesTrabajo{
    width:100%;
    max-width:100%;
    padding:70px 20px;
    background:
        radial-gradient(
            circle at top right,
            rgba(0,89,167,.10),
            transparent 30%
        ),
        #f3f6f9;
    overflow-x:hidden;
    box-sizing:border-box;
}

.contenedorComisionesTrabajo{
    width:100%;
    max-width:1200px;
    min-width:0;
    margin:0 auto;
    box-sizing:border-box;
}

/* ==========================================================
   ENCABEZADO
========================================================== */

.encabezadoComisionesTrabajo{
    width:100%;
    max-width:820px;
    margin:0 0 50px;
}

.etiquetaComisionesTrabajo{
    display:inline-block;
    margin:0 0 12px;
    color:#0059a7;
    font-size:13px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.encabezadoComisionesTrabajo h1{
    margin:0 0 16px;
    color:#003366;
    font-size:48px;
    font-weight:800;
    line-height:1.15;
}

.encabezadoComisionesTrabajo p{
    max-width:760px;
    margin:0;
    color:#66727d;
    font-size:17px;
    line-height:1.75;
}

/* ==========================================================
   RETÍCULA DE COMISIONES
========================================================== */

.gridComisionesTrabajo{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    align-items:stretch;
    gap:28px;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

.cardComisionTrabajo{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    min-width:0;
    height:100%;
    background:#ffffff;
    border:1px solid #dce5ed;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,51,102,.07);
    overflow:hidden;
    box-sizing:border-box;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.cardComisionTrabajo:hover{
    transform:translateY(-5px);
    border-color:#9fc4df;
    box-shadow:0 18px 38px rgba(0,51,102,.13);
}

/* ==========================================================
   INFORMACIÓN DE LA COMISIÓN
========================================================== */

.encabezadoCardComision{
    display:flex;
    align-items:flex-start;
    gap:18px;
    width:100%;
    min-width:0;
    padding:28px;
    box-sizing:border-box;
}

.iconoCardComision{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 58px;
    width:58px;
    height:58px;
    background:#eaf4fb;
    color:#0059a7;
    border-radius:14px;
    font-size:23px;
}

.encabezadoCardComision > div:last-child{
    flex:1;
    min-width:0;
}

.encabezadoCardComision h2{
    margin:0 0 12px;
    color:#003366;
    font-size:24px;
    font-weight:800;
    line-height:1.3;
}

.encabezadoCardComision span{
    display:block;
    margin:0 0 4px;
    color:#77838e;
    font-size:11px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:1px;
    text-transform:uppercase;
}

.encabezadoCardComision h3{
    margin:0;
    color:#0059a7;
    font-size:16px;
    font-weight:700;
    line-height:1.5;
}

/* ==========================================================
   VIDEO
========================================================== */

.videoComisionTrabajo{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    background:#101820;
    overflow:hidden;
}

.videoComisionTrabajo video{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#000000;
}

.videoComisionPlaceholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    height:100%;
    min-height:280px;
    background:
        linear-gradient(
            135deg,
            #e8eef3,
            #dce7ef
        );
    color:#0059a7;
}

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

.videoComisionPlaceholder span{
    color:#60707d;
    font-size:14px;
    font-weight:700;
}

/* ==========================================================
   BOTONES DE RECURSOS
========================================================== */

.accionesComisionTrabajo{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:11px;
    width:100%;
    min-width:0;
    margin-top:auto;
    padding:22px 24px 25px;
    background:#f8fafc;
    border-top:1px solid #e0e7ed;
    box-sizing:border-box;
}

.botonRecursoComision{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:0;
    min-height:42px;
    padding:10px 15px;
    background:#ffffff;
    color:#0059a7;
    border:1px solid #0059a7;
    border-radius:8px;
    cursor:pointer;
    box-sizing:border-box;
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    line-height:1.35;
    text-align:center;
    text-decoration:none;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.botonRecursoComision:hover{
    background:#0059a7;
    color:#ffffff;
    transform:translateY(-1px);
    box-shadow:0 7px 16px rgba(0,89,167,.18);
}

.botonRecursoComision i{
    flex:0 0 auto;
    font-size:13px;
}

.botonRecursoComision span{
    min-width:0;
}

/* ==========================================================
   ESTADO VACÍO
========================================================== */

.mensajeComisionesVacio{
    width:100%;
    padding:75px 35px;
    background:#ffffff;
    border:1px solid #dce5ed;
    border-radius:20px;
    text-align:center;
    box-shadow:0 12px 30px rgba(0,51,102,.06);
    box-sizing:border-box;
}

.mensajeComisionesVacio i{
    display:block;
    margin:0 0 23px;
    color:#0059a7;
    font-size:68px;
}

.mensajeComisionesVacio h2{
    margin:0 0 10px;
    color:#003366;
    font-size:27px;
    font-weight:800;
}

.mensajeComisionesVacio p{
    margin:0;
    color:#687580;
    font-size:15px;
    line-height:1.6;
}

/* ==========================================================
   MODAL DE DESCRIPCIÓN
========================================================== */

.modalDescripcionComision{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:30px;
    background:rgba(0,24,46,.72);
    opacity:0;
    visibility:hidden;
    z-index:9999;
    box-sizing:border-box;
    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.modalDescripcionComision.activo{
    opacity:1;
    visibility:visible;
}

.modalDescripcionComisionContenido{
    position:relative;
    width:100%;
    max-width:720px;
    max-height:90vh;
    padding:42px;
    background:#ffffff;
    border-radius:20px;
    box-shadow:0 25px 70px rgba(0,0,0,.28);
    overflow-y:auto;
    box-sizing:border-box;
    transform:translateY(15px) scale(.98);
    transition:transform .25s ease;
}

.modalDescripcionComision.activo .modalDescripcionComisionContenido{
    transform:translateY(0) scale(1);
}

.cerrarModalDescripcionComision{
    position:absolute;
    top:18px;
    right:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:43px;
    height:43px;
    padding:0;
    background:#edf4f9;
    color:#003366;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-family:Arial, Helvetica, sans-serif;
    font-size:27px;
    line-height:1;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.cerrarModalDescripcionComision:hover{
    background:#0059a7;
    color:#ffffff;
    transform:rotate(90deg);
}

.iconoModalComision{
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    margin:0 0 20px;
    background:#eaf4fb;
    color:#0059a7;
    border-radius:15px;
    font-size:26px;
}

.etiquetaModalComision{
    display:block;
    margin:0 0 8px;
    color:#0059a7;
    font-size:12px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.modalDescripcionComisionContenido h2{
    max-width:600px;
    margin:0 0 22px;
    padding-right:35px;
    color:#003366;
    font-size:32px;
    font-weight:800;
    line-height:1.3;
}

.presidenteModalComision{
    margin:0 0 26px;
    padding:17px 20px;
    background:#edf5fb;
    border-left:4px solid #0059a7;
    border-radius:7px;
}

.presidenteModalComision span{
    display:block;
    margin:0 0 4px;
    color:#697985;
    font-size:11px;
    font-weight:700;
    letter-spacing:.9px;
    text-transform:uppercase;
}

.presidenteModalComision strong{
    display:block;
    color:#003366;
    font-size:16px;
    line-height:1.5;
}

.textoModalComision{
    color:#4f5c66;
    font-size:16px;
    line-height:1.9;
}

body.modalComisionAbierto{
    overflow:hidden;
}

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

.seccionContacto{
    width:100%;
    max-width:100%;
    padding:70px 20px;
    background:
        radial-gradient(
            circle at top right,
            rgba(0,89,167,.10),
            transparent 30%
        ),
        #f3f6f9;
    overflow-x:hidden;
    box-sizing:border-box;
}

.contenedorContacto{
    width:100%;
    max-width:1200px;
    min-width:0;
    margin:0 auto;
    box-sizing:border-box;
}

/* ==========================================================
   ENCABEZADO
========================================================== */

.encabezadoContacto{
    width:100%;
    max-width:800px;
    margin:0 0 48px;
}

.etiquetaContacto{
    display:inline-block;
    margin:0 0 12px;
    color:#0059a7;
    font-size:13px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.encabezadoContacto h1{
    margin:0 0 16px;
    color:#003366;
    font-size:48px;
    font-weight:800;
    line-height:1.15;
}

.encabezadoContacto p{
    max-width:720px;
    margin:0;
    color:#66727d;
    font-size:17px;
    line-height:1.75;
}

/* ==========================================================
   CONTACTO PRINCIPAL
========================================================== */

.gridContactoPrincipal{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
    gap:28px;
    align-items:stretch;
    width:100%;
    min-width:0;
    margin:0 0 65px;
}

.bloqueInformacionContacto{
    width:100%;
    min-width:0;
    padding:34px;
    background:#ffffff;
    border:1px solid #dce5ed;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,51,102,.07);
    box-sizing:border-box;
}

.encabezadoBloqueContacto{
    margin:0 0 28px;
}

.encabezadoBloqueContacto > span{
    display:block;
    margin:0 0 8px;
    color:#0059a7;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.encabezadoBloqueContacto h2{
    margin:0 0 10px;
    color:#003366;
    font-size:29px;
    font-weight:800;
    line-height:1.25;
}

.encabezadoBloqueContacto p{
    margin:0;
    color:#687580;
    font-size:14px;
    line-height:1.65;
}

.listaDatosContacto{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.datoContacto{
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
    min-width:0;
    padding:17px 18px;
    background:#f8fafc;
    color:inherit;
    border:1px solid #e0e7ed;
    border-radius:12px;
    text-decoration:none;
    box-sizing:border-box;
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.datoContacto:hover{
    background:#ffffff;
    border-color:#9fc4df;
    transform:translateY(-2px);
    box-shadow:0 9px 20px rgba(0,51,102,.08);
}

.iconoDatoContacto{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 48px;
    width:48px;
    height:48px;
    background:#eaf4fb;
    color:#0059a7;
    border-radius:11px;
    font-size:19px;
}

.datoContacto > div:nth-child(2){
    flex:1;
    min-width:0;
}

.datoContacto span{
    display:block;
    margin:0 0 4px;
    color:#74818c;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.datoContacto strong{
    display:block;
    color:#003366;
    font-size:14px;
    font-weight:700;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.flechaDatoContacto{
    flex:0 0 auto;
    color:#0059a7;
    font-size:13px;
}

.bloqueAtencionContacto{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    width:100%;
    min-width:0;
    padding:38px;
    background:#003366;
    color:#ffffff;
    border-radius:18px;
    box-shadow:0 14px 35px rgba(0,51,102,.18);
    box-sizing:border-box;
}

.iconoAtencionContacto{
    display:flex;
    align-items:center;
    justify-content:center;
    width:68px;
    height:68px;
    margin:0 0 24px;
    background:rgba(255,255,255,.12);
    color:#ffffff;
    border-radius:16px;
    font-size:28px;
}

.bloqueAtencionContacto > span{
    display:block;
    margin:0 0 8px;
    color:#b9d4e7;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.bloqueAtencionContacto h2{
    margin:0 0 16px;
    color:#ffffff;
    font-size:31px;
    font-weight:800;
    line-height:1.25;
}

.bloqueAtencionContacto p{
    margin:0 0 28px;
    color:#d7e5ef;
    font-size:14px;
    line-height:1.75;
}

.botonContactoPrincipal{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:12px 22px;
    background:#ffffff;
    color:#0059a7;
    border-radius:9px;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.botonContactoPrincipal:hover{
    color:#0059a7;
    transform:translateY(-2px);
    box-shadow:0 9px 20px rgba(0,0,0,.18);
}

/* ==========================================================
   DOCUMENTOS Y POLÍTICAS
========================================================== */

.contenedorDocumentosContacto{
    width:100%;
    min-width:0;
}

.encabezadoDocumentosContacto{
    width:100%;
    max-width:760px;
    margin:0 0 30px;
}

.encabezadoDocumentosContacto > span{
    display:block;
    margin:0 0 8px;
    color:#0059a7;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.encabezadoDocumentosContacto h2{
    margin:0 0 11px;
    color:#003366;
    font-size:32px;
    font-weight:800;
    line-height:1.25;
}

.encabezadoDocumentosContacto p{
    margin:0;
    color:#687580;
    font-size:15px;
    line-height:1.7;
}

.acordeonesContacto{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.acordeonContacto{
    width:100%;
    min-width:0;
    background:#ffffff;
    border:1px solid #dce5ed;
    border-radius:15px;
    box-shadow:0 9px 24px rgba(0,51,102,.05);
    overflow:hidden;
    box-sizing:border-box;
}

.botonAcordeonContacto{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    width:100%;
    min-width:0;
    padding:22px 25px;
    background:#ffffff;
    color:inherit;
    border:none;
    cursor:pointer;
    text-align:left;
    box-sizing:border-box;
}

.tituloAcordeonContacto{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
}

.iconoAcordeonContacto{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 49px;
    width:49px;
    height:49px;
    background:#eaf4fb;
    color:#0059a7;
    border-radius:11px;
    font-size:19px;
}

.tituloAcordeonContacto > div:last-child{
    min-width:0;
}

.tituloAcordeonContacto span{
    display:block;
    margin:0 0 3px;
    color:#7a8791;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.tituloAcordeonContacto h2{
    margin:0;
    color:#003366;
    font-size:20px;
    font-weight:800;
    line-height:1.35;
}

.flechaAcordeonContacto{
    flex:0 0 auto;
    color:#0059a7;
    font-size:15px;
    transition:transform .25s ease;
}

.acordeonContacto.activo .flechaAcordeonContacto{
    transform:rotate(180deg);
}

.contenidoAcordeonContacto{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .35s ease;
}

.acordeonContacto.activo .contenidoAcordeonContacto{
    grid-template-rows:1fr;
}

.textoLegalContacto{
    min-height:0;
    padding:0 28px;
    color:#4f5c66;
    font-size:14px;
    line-height:1.8;
    overflow:hidden;
    box-sizing:border-box;
    transition:padding .35s ease;
}

.acordeonContacto.activo .textoLegalContacto{
    padding-top:5px;
    padding-bottom:30px;
}

.textoLegalContacto h3{
    margin:25px 0 10px;
    color:#003366;
    font-size:18px;
    font-weight:800;
}

.textoLegalContacto p{
    margin:0 0 17px;
}

.textoLegalContacto ul{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding-left:21px;
}

.textoLegalContacto li{
    padding-left:5px;
}

.contactoLegalContacto{
    display:flex;
    align-items:flex-start;
    gap:15px;
    margin:25px 0 0;
    padding:18px;
    background:#edf5fb;
    border-left:4px solid #0059a7;
    border-radius:8px;
}

.contactoLegalContacto > i{
    flex:0 0 auto;
    margin-top:3px;
    color:#0059a7;
    font-size:18px;
}

.contactoLegalContacto > div{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
}

.contactoLegalContacto span{
    color:#687580;
    font-size:10px;
    font-weight:700;
    letter-spacing:.9px;
    text-transform:uppercase;
}

.contactoLegalContacto a{
    color:#0059a7;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    overflow-wrap:anywhere;
}

.contactoLegalContacto a:hover{
    text-decoration:underline;
}

.notaLegalContacto{
    margin-top:22px !important;
    color:#7b8791;
    font-size:12px;
}

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

.seccionAfiliate{
    width:100%;
    max-width:100%;
    padding:70px 20px;
    background:
        radial-gradient(
            circle at top right,
            rgba(0,89,167,.10),
            transparent 30%
        ),
        #f3f6f9;
    overflow-x:hidden;
    box-sizing:border-box;
}

.contenedorAfiliate{
    width:100%;
    max-width:1200px;
    min-width:0;
    margin:0 auto;
    box-sizing:border-box;
}

/* ==========================================================
   ENCABEZADO
========================================================== */

.encabezadoAfiliate{
    width:100%;
    max-width:820px;
    margin:0 0 48px;
}

.etiquetaAfiliate{
    display:inline-block;
    margin:0 0 12px;
    color:#0059a7;
    font-size:13px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.encabezadoAfiliate h1{
    margin:0 0 16px;
    color:#003366;
    font-size:48px;
    font-weight:800;
    line-height:1.15;
}

.encabezadoAfiliate p{
    max-width:760px;
    margin:0;
    color:#66727d;
    font-size:17px;
    line-height:1.75;
}

/* ==========================================================
   BLOQUE PRINCIPAL
========================================================== */

.gridAfiliatePrincipal{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:28px;
    align-items:stretch;
    width:100%;
    min-width:0;
    margin:0 0 65px;
}

.bloqueBeneficiosAfiliate{
    width:100%;
    min-width:0;
    padding:34px;
    background:#ffffff;
    border:1px solid #dce5ed;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,51,102,.07);
    box-sizing:border-box;
}

.encabezadoBeneficiosAfiliate{
    margin:0 0 28px;
}

.encabezadoBeneficiosAfiliate > span{
    display:block;
    margin:0 0 8px;
    color:#0059a7;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.encabezadoBeneficiosAfiliate h2{
    margin:0 0 11px;
    color:#003366;
    font-size:30px;
    font-weight:800;
    line-height:1.25;
}

.encabezadoBeneficiosAfiliate p{
    margin:0;
    color:#687580;
    font-size:14px;
    line-height:1.7;
}

.listaBeneficiosAfiliate{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.beneficioAfiliate{
    display:flex;
    align-items:flex-start;
    gap:16px;
    width:100%;
    padding:17px 18px;
    background:#f8fafc;
    border:1px solid #e0e7ed;
    border-radius:12px;
    box-sizing:border-box;
}

.iconoBeneficioAfiliate{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 48px;
    width:48px;
    height:48px;
    background:#eaf4fb;
    color:#0059a7;
    border-radius:11px;
    font-size:19px;
}

.beneficioAfiliate > div:last-child{
    flex:1;
    min-width:0;
}

.beneficioAfiliate h3{
    margin:1px 0 5px;
    color:#003366;
    font-size:16px;
    font-weight:800;
    line-height:1.4;
}

.beneficioAfiliate p{
    margin:0;
    color:#697681;
    font-size:13px;
    line-height:1.6;
}

/* ==========================================================
   FORMULARIO
========================================================== */

.contenedorFormularioAfiliate{
    display:flex;
    flex-direction:column;
    width:100%;
    min-width:0;
    padding:36px;
    background:#003366;
    color:#ffffff;
    border-radius:18px;
    box-shadow:0 14px 35px rgba(0,51,102,.18);
    box-sizing:border-box;
}

.iconoFormularioAfiliate{
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    margin:0 0 22px;
    background:rgba(255,255,255,.12);
    color:#ffffff;
    border-radius:15px;
    font-size:26px;
}

.etiquetaFormularioAfiliate{
    display:block;
    margin:0 0 8px;
    color:#b9d4e7;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.contenedorFormularioAfiliate > h2{
    margin:0 0 13px;
    color:#ffffff;
    font-size:30px;
    font-weight:800;
    line-height:1.25;
}

.descripcionFormularioAfiliate{
    margin:0 0 25px;
    color:#d7e5ef;
    font-size:13px;
    line-height:1.7;
}

.formularioAfiliate{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:16px;
    row-gap:17px;
    width:100%;
    min-width:0;
}

.grupoFormularioAfiliate{
    display:flex;
    flex-direction:column;
    gap:7px;
    width:100%;
    min-width:0;
}

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

.grupoFormularioAfiliate label{
    margin:0;
    color:#e9f2f8;
    font-size:12px;
    font-weight:700;
    line-height:1.4;
}

.grupoFormularioAfiliate label span{
    color:#ffcf66;
}

.grupoFormularioAfiliate input{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    height:48px;
    margin:0;
    padding:0 14px;
    background:#ffffff;
    color:#344655;
    border:1px solid rgba(255,255,255,.55);
    border-radius:8px;
    outline:none;
    box-sizing:border-box;
    font-family:inherit;
    font-size:13px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.grupoFormularioAfiliate input::placeholder{
    color:#98a5b1;
}

.grupoFormularioAfiliate input:focus{
    border-color:#74b6e6;
    box-shadow:0 0 0 3px rgba(116,182,230,.22);
}

.accionesFormularioAfiliate{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    margin-top:3px;
}

.accionesFormularioAfiliate p{
    margin:0;
    color:#c8dbe8;
    font-size:10px;
    line-height:1.6;
}

.botonSolicitarAfiliacion{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-height:49px;
    padding:11px 20px;
    background:#ffffff;
    color:#0059a7;
    border:none;
    border-radius:9px;
    cursor:pointer;
    font-family:inherit;
    font-size:14px;
    font-weight:750;
    line-height:1.3;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.botonSolicitarAfiliacion:hover{
    transform:translateY(-2px);
    box-shadow:0 9px 20px rgba(0,0,0,.18);
}

.botonSolicitarAfiliacion:disabled{
    cursor:not-allowed;
    opacity:.75;
    transform:none;
}

.botonSolicitarAfiliacion.enviando{
    background:#d9e6ef;
}

/* ==========================================================
   MENSAJES
========================================================== */

.mensajeFormularioAfiliate{
    display:flex;
    align-items:flex-start;
    gap:12px;
    width:100%;
    margin:0 0 22px;
    padding:14px 16px;
    border-radius:9px;
    box-sizing:border-box;
}

.mensajeFormularioAfiliate > i{
    flex:0 0 auto;
    margin-top:2px;
    font-size:18px;
}

.mensajeFormularioAfiliate > div{
    display:flex;
    flex:1;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.mensajeFormularioAfiliate strong{
    font-size:13px;
}

.mensajeFormularioAfiliate span{
    font-size:11px;
    line-height:1.5;
}

.mensajeAfiliateExito{
    background:#eaf8f0;
    color:#217747;
    border:1px solid #bde4cd;
}

.mensajeAfiliateError{
    background:#fff0f0;
    color:#a63c3c;
    border:1px solid #efc1c1;
}

.mensajeAfiliateAdvertencia{
    background:#fff8e8;
    color:#8c6a1f;
    border:1px solid #ead79e;
}

/* ==========================================================
   PROCESO DE AFILIACIÓN
========================================================== */

.bloqueProcesoAfiliacion{
    width:100%;
    min-width:0;
}

.encabezadoProcesoAfiliacion{
    width:100%;
    max-width:760px;
    margin:0 0 30px;
}

.encabezadoProcesoAfiliacion > span{
    display:block;
    margin:0 0 8px;
    color:#0059a7;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.encabezadoProcesoAfiliacion h2{
    margin:0 0 11px;
    color:#003366;
    font-size:32px;
    font-weight:800;
    line-height:1.25;
}

.encabezadoProcesoAfiliacion p{
    margin:0;
    color:#687580;
    font-size:15px;
    line-height:1.7;
}

.gridProcesoAfiliacion{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:18px;
    width:100%;
    min-width:0;
}

.pasoAfiliacion{
    width:100%;
    min-width:0;
    padding:25px;
    background:#ffffff;
    border:1px solid #dce5ed;
    border-radius:14px;
    box-shadow:0 9px 24px rgba(0,51,102,.05);
    box-sizing:border-box;
}

.pasoAfiliacion > span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:43px;
    height:43px;
    margin:0 0 18px;
    background:#eaf4fb;
    color:#0059a7;
    border-radius:50%;
    font-size:12px;
    font-weight:800;
}

.pasoAfiliacion h3{
    margin:0 0 8px;
    color:#003366;
    font-size:17px;
    font-weight:800;
    line-height:1.4;
}

.pasoAfiliacion p{
    margin:0;
    color:#697681;
    font-size:12px;
    line-height:1.6;
}

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

.seccionDirectorioComercial{
    width:100%;
    max-width:100%;
    padding:70px 20px;
    background:#f5f8fb;
    overflow-x:hidden;
    box-sizing:border-box;
}

.contenedorDirectorioComercial{
    width:100%;
    max-width:1300px;
    min-width:0;
    margin:0 auto;
    box-sizing:border-box;
}

/* ==========================================================
   ENCABEZADO
========================================================== */

.encabezadoDirectorioComercial{
    width:100%;
    max-width:820px;
    margin:0 0 45px;
}

.etiquetaDirectorioComercial{
    display:inline-block;
    margin:0 0 15px;
    padding:8px 18px;
    background:#eaf3ff;
    color:#005baa;
    border-radius:40px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.encabezadoDirectorioComercial h1{
    margin:0 0 15px;
    color:#002d72;
    font-size:46px;
    font-weight:800;
    line-height:1.15;
}

.encabezadoDirectorioComercial p{
    max-width:800px;
    margin:0;
    color:#666666;
    font-size:17px;
    line-height:1.75;
}

/* ==========================================================
   FILTROS
========================================================== */

.panelFiltrosDirectorio{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 0 35px;
    padding:30px;
    background:#ffffff;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    box-sizing:border-box;
}

.encabezadoFiltrosDirectorio{
    display:flex;
    align-items:center;
    gap:18px;
    width:100%;
    min-width:0;
    margin:0 0 25px;
}

.iconoFiltrosDirectorio{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 60px;
    width:60px;
    height:60px;
    background:#005baa;
    color:#ffffff;
    border-radius:14px;
    font-size:24px;
}

.encabezadoFiltrosDirectorio > div:last-child{
    flex:1;
    min-width:0;
}

.encabezadoFiltrosDirectorio h2{
    margin:0 0 5px;
    color:#002d72;
    font-size:24px;
    font-weight:800;
}

.encabezadoFiltrosDirectorio p{
    margin:0;
    color:#666666;
    font-size:14px;
    line-height:1.55;
}

.formularioFiltrosDirectorio{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:18px 20px;
    align-items:end;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

.grupoFiltroDirectorio{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
    max-width:100%;
    min-width:0;
}

.grupoFiltroDirectorio label{
    display:block;
    margin:0;
    color:#002d72;
    font-size:13px;
    font-weight:700;
    line-height:1.4;
}

.campoIconoDirectorio{
    position:relative;
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
}

.campoIconoDirectorio > i{
    position:absolute;
    top:50%;
    left:15px;
    color:#005baa;
    font-size:14px;
    transform:translateY(-50%);
    pointer-events:none;
    z-index:1;
}

.campoIconoDirectorio input{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    height:50px;
    margin:0;
    padding:0 14px 0 43px;
    background:#ffffff;
    color:#344655;
    border:1px solid #d6dde8;
    border-radius:10px;
    outline:none;
    box-sizing:border-box;
    font-family:inherit;
    font-size:14px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.campoIconoDirectorio input::placeholder{
    color:#98a5b1;
}

.campoIconoDirectorio input:focus{
    border-color:#005baa;
    box-shadow:0 0 0 3px rgba(0,91,170,.12);
}

.accionesFiltrosDirectorio{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
    grid-column:1 / -1;
    width:100%;
    max-width:100%;
    min-width:0;
    padding-top:2px;
    box-sizing:border-box;
}

.botonBuscarDirectorio,
.botonLimpiarDirectorio{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex:0 0 auto;
    min-width:145px;
    min-height:50px;
    margin:0;
    padding:11px 22px;
    border-radius:10px;
    cursor:pointer;
    box-sizing:border-box;
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    line-height:1.3;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.botonBuscarDirectorio{
    background:#005baa;
    color:#ffffff;
    border:1px solid #005baa;
}

.botonBuscarDirectorio:hover{
    background:#00448a;
    color:#ffffff;
    transform:translateY(-1px);
    box-shadow:0 7px 16px rgba(0,91,170,.18);
}

.botonLimpiarDirectorio{
    background:#ffffff;
    color:#555555;
    border:1px solid #d7dce5;
}

.botonLimpiarDirectorio:hover{
    background:#f5f5f5;
    color:#a63c3c;
    border-color:#d9aaaa;
}

/* ==========================================================
   RESUMEN
========================================================== */

.resumenDirectorioComercial{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    width:100%;
    min-width:0;
    margin:0 0 30px;
    padding:18px 22px;
    background:#edf5fb;
    border-left:4px solid #005baa;
    border-radius:10px;
    box-sizing:border-box;
}

.resumenDirectorioComercial > div{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.resumenDirectorioComercial span{
    display:block;
    color:#666666;
    font-size:13px;
    font-weight:700;
}

.resumenDirectorioComercial strong{
    color:#002d72;
    font-size:30px;
    font-weight:800;
}

.resumenDirectorioComercial p{
    margin:0;
    color:#666666;
    font-size:13px;
    line-height:1.5;
}

/* ==========================================================
   TARJETAS
========================================================== */

.gridDirectorioComercial{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    align-items:stretch;
    gap:30px;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

.cardSocioDirectorio{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    min-width:0;
    height:100%;
    background:#ffffff;
    border:1px solid #e1e7ed;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    overflow:hidden;
    box-sizing:border-box;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.cardSocioDirectorio:hover{
    transform:translateY(-6px);
    border-color:#9fc4df;
    box-shadow:0 16px 36px rgba(0,51,102,.13);
}

.logoSocioDirectorio{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:180px;
    padding:20px;
    background:#fafafa;
    border-bottom:1px solid #edf0f3;
    box-sizing:border-box;
}

.logoSocioDirectorio img{
    display:block;
    max-width:200px;
    max-height:120px;
    object-fit:contain;
}

.placeholderSocioDirectorio{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#888888;
    text-align:center;
}

.placeholderSocioDirectorio i{
    color:#005baa;
    font-size:48px;
}

.placeholderSocioDirectorio span{
    font-size:12px;
    font-weight:700;
}

.contenidoSocioDirectorio{
    display:flex;
    flex:1;
    flex-direction:column;
    width:100%;
    min-width:0;
    padding:25px;
    box-sizing:border-box;
}

.etiquetaSocioDirectorio{
    display:inline-block;
    align-self:flex-start;
    margin:0 0 15px;
    padding:5px 12px;
    background:#eaf3ff;
    color:#005baa;
    border-radius:30px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.contenidoSocioDirectorio h2{
    margin:0 0 18px;
    color:#002d72;
    font-size:23px;
    font-weight:800;
    line-height:1.35;
}

.giroSocioDirectorio{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:0 0 18px;
    padding:12px 15px;
    background:#f7f9fb;
    border-left:4px solid #005baa;
    border-radius:10px;
    color:#445763;
    font-size:13px;
    font-weight:700;
    line-height:1.5;
}

.giroSocioDirectorio i{
    flex:0 0 auto;
    margin-top:3px;
    color:#005baa;
}

.datosSocioDirectorio{
    display:flex;
    flex-direction:column;
    gap:15px;
    width:100%;
    min-width:0;
    margin:0 0 20px;
}

.datoSocioDirectorio{
    display:flex;
    align-items:flex-start;
    gap:12px;
    width:100%;
    min-width:0;
    color:inherit;
    text-decoration:none;
}

.datoSocioDirectorio > i{
    flex:0 0 20px;
    width:20px;
    margin-top:3px;
    color:#005baa;
    text-align:center;
}

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

.datoSocioDirectorio span{
    display:block;
    margin:0 0 3px;
    color:#888888;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.datoSocioDirectorio strong{
    display:block;
    color:#333333;
    font-size:14px;
    font-weight:600;
    line-height:1.55;
    overflow-wrap:anywhere;
}

.datoSocioDirectorioEnlace:hover strong{
    color:#005baa;
}

.productosSocioDirectorio{
    margin-top:auto;
    padding-top:18px;
    border-top:1px solid #ececec;
}

.productosSocioDirectorio > span{
    display:block;
    margin:0 0 8px;
    color:#002d72;
    font-size:11px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.productosSocioDirectorio p{
    margin:0;
    color:#555555;
    font-size:13px;
    line-height:1.65;
}

/* ==========================================================
   PAGINACIÓN
========================================================== */

.paginacionDirectorio{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    width:100%;
    margin-top:50px;
}

.numerosPaginacionDirectorio{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
}

.numeroPaginaDirectorio,
.botonPaginaDirectorio{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    min-height:42px;
    padding:9px;
    background:#ffffff;
    color:#002d72;
    border:1px solid #d9d9d9;
    border-radius:8px;
    box-sizing:border-box;
    font-size:12px;
    font-weight:700;
    line-height:1.2;
    text-decoration:none;
}

.botonPaginaDirectorio{
    gap:8px;
    padding:9px 18px;
}

.numeroPaginaDirectorio:hover,
.numeroPaginaDirectorio.activo,
.botonPaginaDirectorio:hover{
    background:#005baa;
    color:#ffffff;
    border-color:#005baa;
}

.separadorPaginaDirectorio{
    color:#71808b;
}

/* ==========================================================
   SIN RESULTADOS
========================================================== */

.mensajeDirectorioVacio{
    width:100%;
    padding:60px 30px;
    background:#ffffff;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    text-align:center;
    box-sizing:border-box;
}

.iconoDirectorioVacio{
    display:flex;
    align-items:center;
    justify-content:center;
    width:80px;
    height:80px;
    margin:0 auto 20px;
    background:#eaf3ff;
    color:#005baa;
    border-radius:50%;
    font-size:32px;
}

.mensajeDirectorioVacio h2{
    margin:0 0 15px;
    color:#002d72;
    font-size:26px;
    font-weight:800;
}

.mensajeDirectorioVacio p{
    max-width:650px;
    margin:0 auto 25px;
    color:#666666;
    font-size:14px;
    line-height:1.75;
}

.botonRestablecerDirectorio{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:46px;
    padding:11px 24px;
    background:#005baa;
    color:#ffffff;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.botonRestablecerDirectorio:hover{
    background:#00448a;
    color:#ffffff;
}