/* =========================================================
   CONFIGURACIÓN GENERAL
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --azul:#003b70;
    --azul-oscuro:#002c55;
    --azul-claro:#eef5fb;
    --gris:#6b7280;
    --gris-texto:#7b8490;
    --gris-claro:#f5f7fa;
    --borde:#d9e1e8;
    --blanco:#ffffff;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#ffffff;
    color:#172033;
}

button{
    font-family:inherit;
}

.contenedor{
    width:100%;
    max-width:1100px;
    margin:0 auto;
}


/* =========================================================
   ENCABEZADOS GENERALES
========================================================= */

.etiqueta{
    color:var(--azul);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:3px;
    margin-bottom:9px;
}

.linea{
    width:55px;
    height:3px;
    background:var(--azul);
    border-radius:10px;
    margin:19px auto 0;
}


/* =========================================================
   PÁGINA PRINCIPAL MICROSITIOS
========================================================= */

#paginaMicrositios{
    width:100%;
    min-height:100vh;
    padding:70px 20px 90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 70%,
            #f8fafc 100%
        );
}

.encabezado{
    text-align:center;
    margin-bottom:45px;
}

.encabezado h1{
    color:#10253e;
    font-size:42px;
    font-weight:800;
    margin-bottom:12px;
}

.encabezado h1 span{
    color:var(--azul);
}

.encabezado p{
    max-width:680px;
    margin:auto;
    color:#7b8491;
    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   TARJETAS DE MICROSITIOS
========================================================= */

.seccion-micrositios{
    margin-top:34px;
}

.seccion-micrositios:first-of-type{
    margin-top:0;
}

.encabezado-grupo-micrositios{
    display:flex;
    align-items:center;
    gap:13px;
    margin:0 0 18px;
    padding:0 2px;
}

.encabezado-grupo-micrositios .grupo-icono{
    width:38px;
    height:38px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--azul-claro);
    color:var(--azul);
    font-size:15px;
}

.encabezado-grupo-micrositios h2{
    margin:0;
    color:#17263b;
    font-size:18px;
    line-height:1.25;
}

.encabezado-grupo-micrositios p{
    margin:4px 0 0;
    color:#7b8490;
    font-size:11px;
    line-height:1.45;
}

.grid-micrositios{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    align-items:stretch;
}

.grid-micrositios > .tarjeta{
    height:100%;
    display:flex;
    flex-direction:column;
}

.grid-micrositios > .tarjeta .entrar{
    margin-top:auto;
    padding-top:20px;
}

.tarjeta{
    position:relative;
    min-height:230px;

    background:#ffffff;

    border:1px solid var(--borde);
    border-radius:18px;

    padding:30px 27px 27px;

    text-decoration:none;
    color:inherit;

    overflow:hidden;
    cursor:pointer;

    box-shadow:
        0 7px 20px rgba(0,43,84,.05);

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

.tarjeta::before{
    content:"";
    position:absolute;

    width:100px;
    height:100px;

    right:-30px;
    top:-37px;

    background:#f0f3f7;

    border-radius:50%;

    transition:.3s;
}

.tarjeta::after{
    content:"";
    position:absolute;

    bottom:0;
    left:0;

    width:0;
    height:4px;

    background:var(--azul);

    transition:width .35s ease;
}

.tarjeta:hover{
    transform:translateY(-7px);
    border-color:#b5c8d9;

    box-shadow:
        0 18px 35px rgba(0,49,91,.13);
}

.tarjeta:hover::before{
    transform:scale(1.25);
    background:#e9f1f8;
}

.tarjeta:hover::after{
    width:100%;
}


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

.icono{
    position:relative;
    z-index:2;

    width:48px;
    height:48px;

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

    background:var(--azul-claro);
    color:var(--azul);

    border-radius:13px;

    font-size:20px;

    margin-bottom:24px;

    transition:.3s;
}

.tarjeta:hover .icono{
    background:var(--azul);
    color:#ffffff;
    transform:scale(1.05);
}


/* Tarjeta TransformaTec: misma plantilla con identidad cromática TecNM */
.tarjeta-transformatec::after{background:#1B396A;}
.tarjeta-transformatec .icono{background:#EAF0F8;color:#1B396A;}
.tarjeta-transformatec:hover .icono{background:#1B396A;color:#FFFFFF;}
.tarjeta-transformatec .entrar{color:#1B396A;}


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

.tarjeta h2{
    position:relative;
    z-index:2;

    font-size:17px;
    color:#17263b;

    margin-bottom:11px;
}

.tarjeta p{
    position:relative;
    z-index:2;

    color:#7b8490;

    font-size:12px;
    line-height:1.6;

    min-height:58px;
}

.entrar{
    position:relative;
    z-index:2;

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

    margin-top:20px;

    color:var(--azul);

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

    text-transform:uppercase;
    letter-spacing:.7px;
}

.entrar i{
    font-size:10px;
    transition:.3s;
}

.tarjeta:hover .entrar i{
    transform:translateX(5px);
}


/* =========================================================
   CENTRAR LAS DOS ÚLTIMAS TARJETAS
========================================================= */

.tarjeta:nth-child(4){
    grid-column:1 / 2;
    margin-left:50%;
}

.tarjeta:nth-child(5){
    grid-column:2 / 3;
    margin-left:50%;
}


/* =========================================================
   PIE MICROSITIOS
========================================================= */

.pie-micrositios{
    text-align:center;

    margin-top:55px;

    color:#929aa5;

    font-size:11px;
    line-height:1.8;
}

.pie-micrositios strong{
    color:var(--azul);
}


/* =========================================================
   =========================================================
   PÁGINA INTERNA DE CONVOCATORIAS
   =========================================================
========================================================= */

#paginaConvocatorias{
    display:none;
    min-height:100vh;
    background:#ffffff;
}


/* =========================================================
   HERO CONVOCATORIAS
========================================================= */

.hero-convocatorias{
    padding:65px 20px 55px;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fafd 100%
        );

    border-bottom:1px solid #edf1f5;
}

.hero-convocatorias h1{
    font-size:42px;
    color:#10253e;
    margin-bottom:12px;
}

.hero-convocatorias h1 span{
    color:var(--azul);
}

.hero-convocatorias p{
    max-width:680px;
    margin:auto;

    color:#7b8490;

    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   CONTENIDO CONVOCATORIAS
========================================================= */

.contenido-convocatorias{
    max-width:1100px;

    margin:30px auto 80px;

    padding:0 20px;
}


/* =========================================================
   BOTÓN REGRESAR
========================================================= */

.btn-regresar{
    display:inline-flex;
    align-items:center;
    gap:9px;

    border:1px solid #dce7ef;

    background:#f4f8fb;
    color:var(--azul);

    padding:11px 17px;

    border-radius:9px;

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

    cursor:pointer;

    transition:.25s;

    margin-bottom:38px;
}

.btn-regresar:hover{
    background:var(--azul);
    color:#ffffff;
}


/* =========================================================
   TÍTULO TABLA
========================================================= */

.titulo-tabla{
    margin-bottom:23px;
}

.titulo-tabla span{
    color:var(--azul);

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

    letter-spacing:2px;

    text-transform:uppercase;
}

.titulo-tabla h2{
    margin-top:7px;

    font-size:28px;

    color:#17263b;
}

.titulo-tabla p{
    margin-top:8px;

    color:#818a95;

    font-size:13px;
}


/* =========================================================
   CONTENEDOR TABLA
========================================================= */

.tabla-contenedor{
    background:#ffffff;

    border:1px solid var(--borde);

    border-radius:17px;

    overflow:hidden;

    box-shadow:
        0 8px 30px rgba(0,43,84,.06);
}


/* =========================================================
   TABLA
========================================================= */

table{
    width:100%;
    border-collapse:collapse;
}

thead{
    background:var(--azul);
}

thead th{
    color:#ffffff;

    text-align:left;

    padding:19px 25px;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.7px;
}

thead th:last-child{
    width:190px;
    text-align:center;
}

tbody tr{
    border-bottom:1px solid #e8edf2;

    transition:.2s;
}

tbody tr:last-child{
    border-bottom:none;
}

tbody tr:hover{
    background:#f7fafc;
}

tbody td{
    padding:20px 25px;

    font-size:13px;

    color:#3d4652;

    line-height:1.5;
}

tbody td:last-child{
    text-align:center;
}


/* =========================================================
   DATOS DE CONVOCATORIA
========================================================= */

.convocatoria-info{
    display:flex;
    align-items:center;
    gap:16px;
}

.icono-documento{
    flex:none;

    width:42px;
    height:42px;

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

    background:var(--azul-claro);

    color:var(--azul);

    border-radius:10px;

    font-size:16px;
}

.nombre-convocatoria{
    font-weight:600;
    color:#29384b;
}

.anio{
    display:inline-block;

    margin-top:5px;

    padding:3px 8px;

    background:#f1f5f8;

    color:#637282;

    border-radius:5px;

    font-size:9px;
    font-weight:800;
}


/* =========================================================
   BOTÓN DESCARGAR
========================================================= */

.btn-descarga{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    min-width:125px;

    padding:11px 16px;

    background:var(--azul);

    color:#ffffff;

    border-radius:8px;

    text-decoration:none;

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

    text-transform:uppercase;

    letter-spacing:.4px;

    transition:.25s;
}

.btn-descarga:hover{
    background:var(--azul-oscuro);

    transform:translateY(-2px);

    box-shadow:
        0 7px 16px rgba(0,59,112,.22);
}


/* =========================================================
   FOOTER CONVOCATORIAS
========================================================= */

.footer-convocatorias{
    text-align:center;

    padding:25px 20px 50px;

    color:#929aa5;

    font-size:11px;
    line-height:1.8;
}

.footer-convocatorias strong{
    color:var(--azul);
}


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

@media(max-width:900px){

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

    .grid-micrositios > .tarjeta{
        grid-column:auto;
        margin-left:0;
        width:auto;
        justify-self:stretch;
    }

    .grid-micrositios > .tarjeta:last-child:nth-child(odd){
        grid-column:1 / -1;
        width:calc(50% - 11px);
        justify-self:center;
    }

}


/* =========================================================
   RESPONSIVE CELULAR
========================================================= */

@media(max-width:650px){

    #paginaMicrositios{
        padding:45px 17px 60px;
    }

    .encabezado h1,
    .hero-convocatorias h1{
        font-size:31px;
    }

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

    .tarjeta,
    .grid-micrositios > .tarjeta:last-child:nth-child(odd){
        width:100%;
        grid-column:auto;
        margin-left:0;
        justify-self:stretch;
    }

    .seccion-micrositios{
        margin-top:28px;
    }

    .encabezado-grupo-micrositios{
        align-items:flex-start;
    }

    .tabla-contenedor{
        overflow-x:auto;
        border-radius:12px;
    }

    table{
        min-width:700px;
    }

    thead th,
    tbody td{
        padding:15px;
    }

}


/* =========================================================
   PÁGINAS INTERNAS: ÉTICA, IGUALDAD Y CHIAPAS PUEDE
========================================================= */
.pagina-interna{
    display:none;
    min-height:100vh;
    background:#ffffff;
}
.hero-interno{
    padding:65px 20px 55px;
    text-align:center;
    background:linear-gradient(180deg,#ffffff 0%,#f7fafd 100%);
    border-bottom:1px solid #edf1f5;
}
.hero-interno h1{
    font-size:42px;
    color:#10253e;
    margin-bottom:12px;
}
.hero-interno h1 span{ color:var(--azul); }
.hero-interno p{
    max-width:760px;
    margin:auto;
    color:#7b8490;
    font-size:13px;
    line-height:1.7;
}
.contenido-interno{
    max-width:1100px;
    margin:30px auto 80px;
    padding:0 20px;
}
.grid-interno{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}
.bloque-interno{
    border:1px solid var(--borde);
    border-radius:16px;
    padding:25px;
    background:#fff;
    box-shadow:0 8px 25px rgba(0,43,84,.05);
}
.bloque-interno.ancho{ grid-column:1 / -1; }
.bloque-interno .icono-interno{
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    border-radius:11px;
    background:var(--azul-claro);
    color:var(--azul);
    margin-bottom:15px;
}
.bloque-interno h2{
    color:#17263b;
    font-size:20px;
    margin-bottom:10px;
}
.bloque-interno p, .bloque-interno li{
    color:#66717e;
    font-size:13px;
    line-height:1.75;
}
.bloque-interno ul{ padding-left:20px; }
.enlaces-internos{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}
.btn-interno{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 16px;
    border-radius:8px;
    background:var(--azul);
    color:#fff;
    text-decoration:none;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
}
.btn-interno:hover{ background:var(--azul-oscuro); }
@media(max-width:650px){
    .hero-interno h1{font-size:31px;}
    .grid-interno{grid-template-columns:1fr;}
    .bloque-interno.ancho{grid-column:auto;}
}


/* =========================================================
   BOTÓN PORTAL OFICIAL ITSC
========================================================= */
.boton-portal-principal{
    display:flex;
    justify-content:center;
    margin:0 0 34px;
}
.btn-portal-itsc{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 20px;
    border-radius:10px;
    background:#003b70;
    color:#fff;
    text-decoration:none;
    font-size:11px;
    font-weight:800;
    letter-spacing:.4px;
    box-shadow:0 8px 20px rgba(0,59,112,.16);
    transition:.25s;
}
.btn-portal-itsc:hover{background:#002c55;transform:translateY(-2px);}

/* =========================================================
   IDENTIDAD VISUAL - IGUALDAD DE GÉNERO
========================================================= */
#paginaIgualdadGenero{
    --genero-magenta:#6A1B9A;
    --genero-magenta-oscuro:#45206B;
    --genero-rosa:#F1E8FA;
    --genero-morado:#5B2C83;
    --genero-lila:#EEE5F7;
    --genero-dorado:#8E6BB5;
    background:#FBF9FE;
}
#paginaIgualdadGenero .hero-genero{
    padding:0;
    background:#fff;
    border-bottom:1px solid #DED0EB;
}
.hero-genero-imagen{
    width:100%;
    max-height:520px;
    object-fit:cover;
    display:block;
}
.hero-genero-texto{
    padding:40px 20px 45px;
    text-align:center;
    background:linear-gradient(180deg,#ffffff 0%,#F5EFFB 100%);
}
.hero-genero-texto .etiqueta{color:var(--genero-magenta);}
.hero-genero-texto h1{
    font-size:42px;
    color:#38204F;
    margin-bottom:12px;
}
.hero-genero-texto h1 span{color:var(--genero-magenta);}
.hero-genero-texto p{
    max-width:780px;
    margin:auto;
    color:#665A70;
    font-size:13px;
    line-height:1.75;
}
#paginaIgualdadGenero .linea{background:var(--genero-magenta);}
#paginaIgualdadGenero .btn-regresar{
    color:var(--genero-magenta-oscuro);
    background:#F2EAF9;
    border-color:#D9C8E8;
}
#paginaIgualdadGenero .btn-regresar:hover{
    background:var(--genero-magenta);
    color:#fff;
}
#paginaIgualdadGenero .bloque-interno{
    border-color:#DED0EB;
    box-shadow:0 8px 25px rgba(91,44,131,.08);
}
#paginaIgualdadGenero .icono-interno{
    background:var(--genero-rosa);
    color:var(--genero-magenta);
}
#paginaIgualdadGenero .bloque-interno h2{color:#45265F;}
#paginaIgualdadGenero .btn-interno{background:var(--genero-magenta);}
#paginaIgualdadGenero .btn-interno:hover{background:var(--genero-magenta-oscuro);}


.emergencia-genero{
    grid-column:1/-1;
    background:linear-gradient(135deg,#45206B,#7B2CBF) !important;
    border:none !important;
    color:#fff;
}
.emergencia-genero h2,.emergencia-genero p{color:#fff !important;}
.emergencia-genero .icono-interno{background:rgba(255,255,255,.16)!important;color:#fff!important;}
.telefonos-emergencia{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:20px;
}
.telefono-card{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
    border-radius:12px;
    padding:18px;
}
.telefono-card strong{display:block;font-size:21px;margin-bottom:5px;}
.telefono-card span{font-size:11px;line-height:1.5;display:block;}
.telefono-card a{color:#fff;font-weight:800;text-decoration:none;}

.noticias-genero{
    grid-column:1/-1;
}
.noticias-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:18px;
}
.noticia-genero{
    border:1px solid #DED0EB;
    border-radius:13px;
    overflow:hidden;
    background:#FBF9FE;
}
.noticia-genero .noticia-top{
    height:7px;
    background:linear-gradient(90deg,var(--genero-magenta),var(--genero-morado));
}
.noticia-genero .noticia-cuerpo{padding:19px;}
.noticia-genero .fecha{
    color:var(--genero-magenta);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.8px;
}
.noticia-genero h3{
    margin:8px 0;
    color:#45265F;
    font-size:15px;
    line-height:1.35;
}
.noticia-genero p{font-size:12px!important;}
.noticia-genero a{
    display:inline-block;
    margin-top:10px;
    color:var(--genero-magenta-oscuro);
    font-size:10px;
    font-weight:800;
    text-decoration:none;
}
.fuente-ayuda{
    display:block;
    margin-top:12px;
    font-size:9px;
    opacity:.85;
}
@media(max-width:750px){
    .telefonos-emergencia,.noticias-grid{grid-template-columns:1fr;}
    .hero-genero-texto h1{font-size:31px;}
    .hero-genero-imagen{max-height:320px;}
}


/* =========================================================
   CARRUSEL DE NOTICIAS - IGUALDAD DE GÉNERO
========================================================= */
.carrusel-genero-wrap{
    position:relative;
    margin-top:22px;
    padding:0 54px;
}
.carrusel-genero{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding:4px 2px 14px;
}
.carrusel-genero::-webkit-scrollbar{display:none;}
.slide-noticia-genero{
    flex:0 0 calc((100% - 36px)/3);
    min-width:0;
    scroll-snap-align:start;
    border:1px solid #DED0EB;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 9px 24px rgba(91,44,131,.09);
    transition:transform .25s ease,box-shadow .25s ease;
}
.slide-noticia-genero:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(91,44,131,.14);
}
.slide-noticia-genero .foto-noticia{
    width:100%;
    height:205px;
    object-fit:cover;
    display:block;
}
.slide-noticia-genero:nth-child(2) .foto-noticia{object-position:center 42%;}
.slide-noticia-genero:nth-child(3) .foto-noticia{object-position:center 58%;}
.slide-noticia-genero .contenido-noticia{
    padding:20px;
}
.slide-noticia-genero .categoria-noticia{
    display:inline-block;
    padding:5px 9px;
    border-radius:20px;
    background:#F1E8FA;
    color:#6A1B9A;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.7px;
}
.slide-noticia-genero h3{
    color:#45265F;
    font-size:16px;
    line-height:1.4;
    margin:11px 0 9px;
}
.slide-noticia-genero p{
    color:#665A70;
    font-size:12px!important;
    line-height:1.65!important;
}
.slide-noticia-genero .leer-noticia{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:14px;
    color:#6A1B9A;
    font-size:10px;
    font-weight:800;
    text-decoration:none;
    text-transform:uppercase;
}
.slide-noticia-genero .leer-noticia:hover{color:#45206B;}
.btn-carrusel-genero{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:5;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:#5B2C83;
    color:#fff;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(69,32,107,.25);
    transition:.2s;
}
.btn-carrusel-genero:hover{background:#7B2CBF;transform:translateY(-50%) scale(1.06);}
.btn-carrusel-genero.anterior{left:0;}
.btn-carrusel-genero.siguiente{right:0;}
.puntos-carrusel{
    display:flex;
    justify-content:center;
    gap:7px;
    margin-top:8px;
}
.punto-carrusel{
    width:8px;height:8px;border:0;border-radius:50%;
    background:#D7C5E7;cursor:pointer;padding:0;
}
.punto-carrusel.activo{background:#6A1B9A;transform:scale(1.25);}
@media(max-width:900px){
    .slide-noticia-genero{flex-basis:calc((100% - 18px)/2);}
}
@media(max-width:650px){
    .carrusel-genero-wrap{padding:0 42px;}
    .slide-noticia-genero{flex-basis:100%;}
    .slide-noticia-genero .foto-noticia{height:190px;}
    .btn-carrusel-genero{width:34px;height:34px;}
}


/* =========================================================
   ÁREA PSICOLÓGICA - IGUALDAD DE GÉNERO
========================================================= */
.area-psicologica{
    margin-top:4px;
    background:linear-gradient(180deg,#ffffff 0%,#F7F2FC 100%) !important;
    border-top:4px solid #6A1B9A !important;
}
.area-psicologica > p{
    max-width:900px;
}
.servicios-psicologia{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:22px;
}
.servicio-psicologia{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:19px;
    border:1px solid #DED0EB;
    border-radius:13px;
    background:#fff;
}
.servicio-psicologia > i{
    flex:none;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#F1E8FA;
    color:#6A1B9A;
    font-size:16px;
}
.servicio-psicologia h3{
    color:#45265F;
    font-size:14px;
    margin-bottom:6px;
}
.servicio-psicologia p{
    font-size:11px !important;
    line-height:1.6 !important;
}
.aviso-psicologia{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-top:18px;
    padding:15px 17px;
    border-radius:11px;
    background:#EEE5F7;
}
.aviso-psicologia > i{
    color:#6A1B9A;
    margin-top:2px;
}
.aviso-psicologia p{
    margin:0;
    font-size:11px !important;
}
.aviso-psicologia a{
    color:#5B2C83;
    font-weight:800;
}
@media(max-width:800px){
    .servicios-psicologia{grid-template-columns:1fr;}
}


/* =========================================================
   INSCRIPCIÓN - CHIAPAS PUEDE
========================================================= */
.inscripcion-alfabetizacion{
    grid-column:1/-1;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#003b70 0%,#006b75 100%) !important;
    border:none !important;
    color:#fff;
    padding:34px !important;
}
.inscripcion-alfabetizacion::after{
    content:"";
    position:absolute;
    width:230px;height:230px;
    right:-70px;top:-85px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}
.inscripcion-alfabetizacion .icono-interno{
    background:rgba(255,255,255,.16)!important;
    color:#fff!important;
}
.inscripcion-alfabetizacion h2,
.inscripcion-alfabetizacion p{color:#fff!important;}
.frase-alfabetizacion{
    max-width:850px;
    margin:18px 0 24px;
    padding:18px 20px;
    border-left:4px solid #fff;
    background:rgba(255,255,255,.10);
    border-radius:0 12px 12px 0;
    font-size:18px!important;
    font-weight:700;
    line-height:1.55!important;
}
.btn-inscribete-alfa{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 22px;
    border:0;
    border-radius:10px;
    background:#fff;
    color:#003b70;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.5px;
    cursor:pointer;
    transition:.25s;
}
.btn-inscribete-alfa:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.18);}
.panel-inscripcion-alfa{
    display:none;
    grid-column:1/-1;
    border:1px solid #d6e2e8;
    border-radius:16px;
    padding:28px;
    background:#fff;
}
.panel-inscripcion-alfa.activo{display:block;}
.panel-inscripcion-alfa h2{color:#17354d;margin-bottom:10px;}
.requisitos-alfa{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin:20px 0 24px;
}
.requisito-alfa{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:15px;
    border-radius:11px;
    background:#f4f8fb;
    border:1px solid #dce8ef;
}
.requisito-alfa i{color:#006b75;margin-top:2px;}
.requisito-alfa strong{display:block;color:#27465b;font-size:12px;margin-bottom:3px;}
.requisito-alfa span{color:#6b7883;font-size:11px;line-height:1.5;}
.aviso-form-google{
    padding:15px 17px;
    border-radius:10px;
    background:#fff8e8;
    border:1px solid #ead8aa;
    color:#695725;
    font-size:11px;
    line-height:1.6;
    margin-bottom:18px;
}
.btn-google-form{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:13px 19px;
    border-radius:9px;
    background:#003b70;
    color:#fff;
    text-decoration:none;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
}
@media(max-width:650px){
    .requisitos-alfa{grid-template-columns:1fr;}
    .inscripcion-alfabetizacion{padding:24px!important;}
    .frase-alfabetizacion{font-size:15px!important;}
}


/* =========================================================
   BANNER CHIAPAS PUEDE - IMAGEN COMPLETA
========================================================= */
#paginaChiapasPuede .banner-chiapas-puede{
    width:100%;
    margin:0;
    padding:0;
    background:#000;
    overflow:hidden;
}
#paginaChiapasPuede .banner-chiapas-puede img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
    object-position:center;
    border-radius:0;
    box-shadow:none;
}
@media(max-width:700px){
    #paginaChiapasPuede .banner-chiapas-puede{
        padding:0;
        margin:0;
    }
    #paginaChiapasPuede .banner-chiapas-puede img{
        width:100%;
        height:auto;
        object-fit:contain;
        border-radius:0;
    }
}

/* =========================================================
   IDENTIDAD VISUAL CHIAPAS PUEDE
   Azul TecNM + Rosa Chiapas Puede
========================================================= */
#paginaChiapasPuede{
    --cp-azul:#1B396A;
    --cp-azul-oscuro:#10284D;
    --cp-azul-claro:#EAF0F8;
    --cp-rosa:#C21875;
    --cp-rosa-fuerte:#D41473;
    --cp-rosa-claro:#FCEAF4;
    --cp-texto:#26384D;
    background:#F8FAFD;
}

/* Encabezado */
#paginaChiapasPuede .hero-interno{
    background:linear-gradient(135deg,var(--cp-azul-oscuro) 0%,var(--cp-azul) 64%,var(--cp-rosa) 100%) !important;
}
#paginaChiapasPuede .hero-interno h1,
#paginaChiapasPuede .hero-interno p{
    color:#fff !important;
}

/* Tarjetas generales */
#paginaChiapasPuede .bloque-interno{
    border-color:#D8E1EE;
    box-shadow:0 8px 24px rgba(27,57,106,.08);
}
#paginaChiapasPuede .bloque-interno h2{
    color:var(--cp-azul) !important;
}
#paginaChiapasPuede .bloque-interno .icono-interno{
    background:var(--cp-rosa-claro) !important;
    color:var(--cp-rosa) !important;
}

/* Alternancia visual */
#paginaChiapasPuede .grid-interno > .bloque-interno:nth-child(even){
    border-top:3px solid var(--cp-rosa);
}
#paginaChiapasPuede .grid-interno > .bloque-interno:nth-child(odd){
    border-top:3px solid var(--cp-azul);
}

/* Botones y enlaces */
#paginaChiapasPuede .btn-interno,
#paginaChiapasPuede .btn-google-form{
    background:var(--cp-azul) !important;
    color:#fff !important;
}
#paginaChiapasPuede .btn-interno:hover,
#paginaChiapasPuede .btn-google-form:hover{
    background:var(--cp-rosa) !important;
}

/* Bloque de inscripción */
#paginaChiapasPuede .inscripcion-alfabetizacion{
    background:linear-gradient(125deg,var(--cp-azul-oscuro) 0%,var(--cp-azul) 58%,var(--cp-rosa) 100%) !important;
    border-top:none !important;
}
#paginaChiapasPuede .inscripcion-alfabetizacion .icono-interno{
    background:rgba(255,255,255,.15) !important;
    color:#fff !important;
}
#paginaChiapasPuede .inscripcion-alfabetizacion h2,
#paginaChiapasPuede .inscripcion-alfabetizacion p{
    color:#fff !important;
}
#paginaChiapasPuede .frase-alfabetizacion{
    border-left-color:var(--cp-rosa) !important;
    background:rgba(255,255,255,.11) !important;
}
#paginaChiapasPuede .btn-inscribete-alfa{
    background:#fff !important;
    color:var(--cp-azul) !important;
    border:2px solid #fff;
}
#paginaChiapasPuede .btn-inscribete-alfa:hover{
    background:var(--cp-rosa) !important;
    border-color:var(--cp-rosa);
    color:#fff !important;
}

/* Panel del formulario */
#paginaChiapasPuede .panel-inscripcion-alfa{
    border-color:#D8E1EE;
    border-top:4px solid var(--cp-rosa);
}
#paginaChiapasPuede .panel-inscripcion-alfa h2{
    color:var(--cp-azul);
}
#paginaChiapasPuede .requisito-alfa{
    background:var(--cp-azul-claro);
    border-color:#D4DEEC;
}
#paginaChiapasPuede .requisito-alfa:nth-child(even){
    background:var(--cp-rosa-claro);
    border-color:#F1CADF;
}
#paginaChiapasPuede .requisito-alfa i{
    color:var(--cp-rosa);
}
#paginaChiapasPuede .requisito-alfa strong{
    color:var(--cp-azul);
}
#paginaChiapasPuede .aviso-form-google{
    border-left:4px solid var(--cp-rosa);
}

/* Botón regresar */
#paginaChiapasPuede .btn-regresar,
#paginaChiapasPuede button[onclick*="regresarMicrositios"]{
    border-color:var(--cp-azul) !important;
    color:var(--cp-azul) !important;
}
#paginaChiapasPuede .btn-regresar:hover,
#paginaChiapasPuede button[onclick*="regresarMicrositios"]:hover{
    background:var(--cp-azul) !important;
    color:#fff !important;
}


/* TÍTULO PRINCIPAL CHIAPAS PUEDE EN BLANCO */
#paginaChiapasPuede .hero-interno h1,
#paginaChiapasPuede .hero-interno h1 *,
#paginaChiapasPuede .hero-interno .titulo,
#paginaChiapasPuede .hero-interno .titulo *{
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    opacity:1 !important;
}


/* ENCABEZADO CHIAPAS PUEDE: TODOS LOS TEXTOS EN BLANCO */
#paginaChiapasPuede .hero-interno,
#paginaChiapasPuede .hero-interno h1,
#paginaChiapasPuede .hero-interno h1 *,
#paginaChiapasPuede .hero-interno p,
#paginaChiapasPuede .hero-interno p *,
#paginaChiapasPuede .hero-interno span,
#paginaChiapasPuede .hero-interno small,
#paginaChiapasPuede .hero-interno strong{
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    opacity:1 !important;
}


/* =========================================================
   CHIAPAS PUEDE - APARTADOS DESPLEGABLES
========================================================= */
#paginaChiapasPuede .cp-acordeon{
    grid-column:1/-1;
    padding:0 !important;
    overflow:hidden;
}
#paginaChiapasPuede .cp-acordeon-cabecera{
    width:100%;
    border:0;
    background:#fff;
    display:flex;
    align-items:center;
    gap:15px;
    padding:22px 24px;
    text-align:left;
    cursor:pointer;
}
#paginaChiapasPuede .cp-acordeon-cabecera .icono-interno{
    flex:0 0 auto;
    margin:0;
}
#paginaChiapasPuede .cp-acordeon-titulo{
    flex:1;
}
#paginaChiapasPuede .cp-acordeon-titulo h2{
    margin:0 0 4px !important;
}
#paginaChiapasPuede .cp-acordeon-titulo span{
    color:#6b7883;
    font-size:11px;
}
#paginaChiapasPuede .cp-flecha{
    color:var(--cp-rosa);
    font-size:16px;
    transition:transform .25s ease;
}
#paginaChiapasPuede .cp-acordeon.abierto .cp-flecha{
    transform:rotate(180deg);
}
#paginaChiapasPuede .cp-acordeon-contenido{
    display:none;
    padding:0 26px 28px;
    border-top:1px solid #E4EAF2;
}
#paginaChiapasPuede .cp-acordeon.abierto .cp-acordeon-contenido{
    display:block;
}
#paginaChiapasPuede .cp-acordeon-contenido h3{
    color:var(--cp-azul);
    font-size:15px;
    margin:22px 0 9px;
}
#paginaChiapasPuede .cp-acordeon-contenido p,
#paginaChiapasPuede .cp-acordeon-contenido li{
    color:#526170;
    font-size:12px;
    line-height:1.75;
}
#paginaChiapasPuede .cp-acordeon-contenido ul{
    margin:10px 0 5px 20px;
    padding:0;
}
#paginaChiapasPuede .cp-destacado{
    margin:20px 0;
    padding:18px 20px;
    border-left:5px solid var(--cp-rosa);
    background:linear-gradient(90deg,var(--cp-rosa-claro),#fff);
    border-radius:0 12px 12px 0;
}
#paginaChiapasPuede .cp-destacado strong{
    color:var(--cp-azul);
}
#paginaChiapasPuede .cp-autoridades{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin:18px 0;
}
#paginaChiapasPuede .cp-autoridad{
    padding:17px;
    border-radius:12px;
    background:var(--cp-azul-claro);
    border:1px solid #D4DEEC;
}
#paginaChiapasPuede .cp-autoridad:nth-child(2){
    background:var(--cp-rosa-claro);
    border-color:#F1CADF;
}
#paginaChiapasPuede .cp-autoridad small{
    display:block;
    color:#718093;
    font-size:10px;
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:.5px;
    margin-bottom:5px;
}
#paginaChiapasPuede .cp-autoridad strong{
    color:var(--cp-azul);
    font-size:14px;
}
#paginaChiapasPuede .cp-lista-acciones{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-top:15px;
}
#paginaChiapasPuede .cp-accion{
    display:flex;
    gap:11px;
    padding:14px;
    border:1px solid #DDE5EF;
    border-radius:10px;
    background:#fff;
}
#paginaChiapasPuede .cp-accion i{
    color:var(--cp-rosa);
    margin-top:3px;
}
#paginaChiapasPuede .cp-fuentes{
    margin-top:22px;
    padding-top:15px;
    border-top:1px solid #E3E8EF;
    font-size:10px;
    color:#758292;
}
#paginaChiapasPuede .cp-fuentes a{
    color:var(--cp-azul);
    font-weight:700;
}
@media(max-width:700px){
    #paginaChiapasPuede .cp-autoridades,
    #paginaChiapasPuede .cp-lista-acciones{grid-template-columns:1fr;}
    #paginaChiapasPuede .cp-acordeon-cabecera{padding:18px;}
    #paginaChiapasPuede .cp-acordeon-contenido{padding:0 18px 22px;}
}


/* =========================================================
   TRANSFORMATEC - REVISTA OFICIAL DEL ITSC
   Lector interactivo sin PDF, integrado en este mismo HTML
========================================================= */
#paginaTransformatec{
    /* Paleta institucional TecNM */
    --info-azul:#1B396A;
    --info-azul-oscuro:#10284D;
    --info-azul-medio:#2D568A;
    --info-gris:#6B7280;
    --info-gris-claro:#F1F3F5;
    --info-blanco:#FFFFFF;
    background:linear-gradient(180deg,#ffffff 0%,#f4f6f8 100%);
}

#paginaTransformatec .info-hero{
    position:relative;
    overflow:hidden;
    padding:68px 20px 62px;
    text-align:center;
    color:#fff;
    background:
        radial-gradient(circle at 85% 20%,rgba(255,255,255,.15),transparent 27%),
        linear-gradient(135deg,var(--info-azul-oscuro) 0%,var(--info-azul) 58%,var(--info-azul-medio) 100%);
    border-bottom:1px solid #dce6ef;
}
#paginaTransformatec .info-hero::before{
    content:"";
    position:absolute;
    width:280px;height:280px;
    border-radius:50%;
    left:-90px;bottom:-170px;
    border:45px solid rgba(255,255,255,.05);
}
#paginaTransformatec .info-hero-contenido{position:relative;z-index:2;max-width:870px;margin:auto;}
#paginaTransformatec .info-etiqueta{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 14px;border-radius:999px;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.11);
    font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
}
#paginaTransformatec .info-hero h1{
    margin:16px 0 8px;
    font-size:clamp(40px,6vw,68px);
    letter-spacing:1px;
    color:#fff;
}
#paginaTransformatec .info-hero p{
    margin:auto;max-width:760px;color:#f3f5f8;font-size:14px;line-height:1.75;
}
#paginaTransformatec .info-contenido{
    width:100%;max-width:1100px;margin:0 auto;padding:34px 20px 80px;
}
#paginaTransformatec .info-regresar{margin-bottom:28px;}
#paginaTransformatec .info-intro{text-align:center;max-width:760px;margin:0 auto 32px;}
#paginaTransformatec .info-intro .etiqueta{color:var(--info-azul);}
#paginaTransformatec .info-intro h2{font-size:30px;color:#17304d;margin:7px 0 8px;}
#paginaTransformatec .info-intro p{font-size:13px;line-height:1.7;color:#73808f;}

.info-grid-ediciones{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
    max-width:900px;
    margin:0 auto;
}
.info-edicion{
    overflow:hidden;
    background:#fff;
    border:1px solid #d5dde7;
    border-radius:20px;
    box-shadow:0 14px 35px rgba(27,57,106,.10);
    transition:transform .25s ease,box-shadow .25s ease;
}
.info-edicion:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(27,57,106,.16);}
.info-portada-wrap{
    min-height:410px;
    display:grid;
    place-items:center;
    padding:24px;
    position:relative;
    background:linear-gradient(145deg,#e7ebf0,#f8f9fb);
}
.info-portada-wrap::after{
    content:"";position:absolute;left:21%;right:21%;bottom:15px;height:18px;
    background:rgba(0,0,0,.20);filter:blur(13px);border-radius:50%;
}
.info-portada{
    position:relative;z-index:2;
    max-height:365px;width:auto;max-width:100%;
    border-radius:4px 8px 8px 4px;
    box-shadow:8px 12px 25px rgba(0,0,0,.28);
    background:#fff;
}
.info-portada-placeholder{
    width:min(285px,90%);aspect-ratio:1/1.28;position:relative;z-index:2;
    display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
    padding:28px;color:#fff;border-radius:4px 8px 8px 4px;
    background:linear-gradient(145deg,var(--info-azul-oscuro),var(--info-azul));
    box-shadow:8px 12px 25px rgba(0,0,0,.25);
}
.info-portada-placeholder i{font-size:48px;margin-bottom:18px;}
.info-portada-placeholder strong{font-size:28px;letter-spacing:1px;}
.info-portada-placeholder span{margin-top:10px;font-size:15px;opacity:.9;}
.info-datos-edicion{padding:23px 24px 25px;}
.info-numero{font-size:10px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:#6d7e90;}
.info-datos-edicion h3{font-size:23px;color:var(--info-azul);margin:7px 0 8px;}
.info-numero{color:var(--info-azul);}
.info-datos-edicion p{font-size:12px;line-height:1.65;color:#6f7b88;min-height:58px;}
.info-btn-leer{
    width:100%;border:0;border-radius:10px;padding:13px 16px;margin-top:12px;
    display:flex;align-items:center;justify-content:center;gap:9px;
    background:var(--info-azul);color:#fff;cursor:pointer;
    font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.45px;
    transition:.22s;
}
.info-btn-leer:hover{background:var(--info-azul-oscuro);transform:translateY(-1px);}
.info-btn-leer:disabled{background:#9ca7b4;cursor:not-allowed;transform:none;}
.info-pendiente{margin-top:9px;text-align:center;color:#8b6b20;font-size:10px;line-height:1.5;}

/* Visor de revista */
#infoVisor{
    position:fixed;inset:0;z-index:99999;
    display:none;flex-direction:column;
    background:#17243a;
}
#infoVisor.activo{display:flex;}
.info-visor-top{
    min-height:60px;display:flex;align-items:center;gap:10px;
    padding:8px 14px;background:var(--info-azul-oscuro);color:#fff;
    border-bottom:1px solid rgba(255,255,255,.10);
}
.info-visor-titulo{
    flex:1;min-width:0;text-align:center;font-size:14px;font-weight:800;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.info-visor-acciones{display:flex;gap:8px;}
.info-visor-btn{
    width:42px;height:42px;display:grid;place-items:center;
    border-radius:10px;border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.07);color:#fff;cursor:pointer;font-size:16px;
}
.info-visor-btn:hover{background:rgba(255,255,255,.15);}
.info-visor-cuerpo{
    position:relative;flex:1;min-height:0;overflow:hidden;
    display:flex;align-items:center;justify-content:center;padding:18px;
    background:radial-gradient(circle at center,#546273 0%,#2b3748 48%,#17243a 100%);
}
#infoBook{margin:auto;}
#infoBook .info-page{background:#fff;overflow:hidden;}
#infoBook .info-page img{
    width:100%;height:100%;object-fit:contain;display:block;
    user-select:none;-webkit-user-drag:none;background:#fff;
}
.info-visor-controles{
    min-height:70px;display:flex;align-items:center;justify-content:center;gap:12px;
    padding:10px 14px;background:var(--info-azul-oscuro);border-top:1px solid rgba(255,255,255,.10);color:#fff;
}
.info-control{
    min-width:48px;height:44px;padding:0 15px;border-radius:10px;
    border:1px solid rgba(255,255,255,.16);background:#253d63;color:#fff;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:800;
}
.info-control:hover{background:#31527f;}
#infoContador{min-width:120px;text-align:center;font-size:13px;font-weight:800;color:#dde7f3;}
.info-cargando{
    position:absolute;inset:0;z-index:15;display:none;place-items:center;
    background:rgba(16,40,77,.92);color:#fff;text-align:center;
}
.info-cargando.visible{display:grid;}
.info-spinner{
    width:48px;height:48px;border-radius:50%;margin:0 auto 14px;
    border:5px solid rgba(255,255,255,.20);border-top-color:#fff;
    animation:infoGirar .75s linear infinite;
}
@keyframes infoGirar{to{transform:rotate(360deg)}}
.info-aviso{
    position:fixed;left:50%;bottom:24px;z-index:100050;
    transform:translateX(-50%) translateY(18px);opacity:0;pointer-events:none;
    background:#10284D;color:#fff;padding:13px 18px;border-radius:10px;
    max-width:min(520px,90%);text-align:center;font-size:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.32);transition:.25s;
}
.info-aviso.visible{opacity:1;transform:translateX(-50%) translateY(0);}

@media(max-width:820px){
    .info-grid-ediciones{grid-template-columns:1fr;max-width:470px;}
    .info-portada-wrap{min-height:360px;}
    .info-visor-cuerpo{padding:8px;}
    .info-control .texto-control{display:none;}
}
@media(max-width:520px){
    #paginaTransformatec .info-hero{padding:48px 18px 45px;}
    #paginaTransformatec .info-intro h2{font-size:25px;}
    .info-portada-wrap{min-height:325px;}
    .info-portada{max-height:300px;}
    .info-visor-top{padding:6px 8px;}
    .info-visor-cuerpo{padding:4px;}
    .info-visor-controles{gap:7px;padding:7px;}
    #infoContador{min-width:88px;font-size:11px;}
}




/* =========================================================
   TRANSFORMATEC - AJUSTE COMPLETO DE PÁGINA + ZOOM
   La revista inicia siempre ajustada al área visible.
   Al aumentar el zoom, el área de lectura habilita desplazamiento.
========================================================= */
#infoVisor{
    --info-zoom:1;
}

#infoVisor .info-visor-cuerpo{
    overflow:auto;
    display:block;
    padding:12px;
    scrollbar-color:#6f8094 #10284D;
    scrollbar-width:thin;
    overscroll-behavior:contain;
}

#infoVisor .info-visor-cuerpo::-webkit-scrollbar{
    width:11px;
    height:11px;
}
#infoVisor .info-visor-cuerpo::-webkit-scrollbar-track{background:#10284D;}
#infoVisor .info-visor-cuerpo::-webkit-scrollbar-thumb{
    background:#72849a;
    border-radius:10px;
    border:2px solid #10284D;
}

.info-book-viewport{
    width:max-content;
    min-width:100%;
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
    box-sizing:border-box;
}

.info-book-zoom{
    position:relative;
    flex:0 0 auto;
    display:block;
    line-height:0;
}

#infoBook{
    margin:0 !important;
    transform-origin:top left;
    transition:transform .18s ease;
}

#infoBook .info-page{
    background:#fff;
}

#infoBook .info-page img{
    width:100%;
    height:100%;
    object-fit:contain !important;
    object-position:center center;
}

.info-visor-controles{
    min-height:76px;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    padding:10px 16px;
}

.info-navegacion-panel,
.info-zoom-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.info-navegacion-panel{
    flex:1 1 350px;
}

.info-zoom-panel{
    flex:1 1 390px;
    justify-content:flex-end;
}

.info-zoom-etiqueta{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-right:2px;
    color:#cbd7e4;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.info-control-cuadrado{
    min-width:44px;
    width:44px;
    padding:0;
}

.info-zoom-valor{
    min-width:70px;
    height:44px;
    padding:0 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.16);
    background:#171e28;
    color:#fff;
    font-size:12px;
    font-weight:900;
    font-variant-numeric:tabular-nums;
}

.info-ajustar{min-width:104px;}

#infoContador{
    min-width:125px;
}

@media(max-width:900px){
    .info-visor-controles{justify-content:center;}
    .info-zoom-panel{justify-content:center;}
}

@media(max-width:620px){
    #infoVisor .info-visor-cuerpo{padding:5px;}
    .info-book-viewport{padding:2px;}
    .info-visor-controles{padding:7px 6px;gap:7px;}
    .info-navegacion-panel,.info-zoom-panel{flex-basis:100%;}
    .info-zoom-etiqueta{display:none;}
    .info-ajustar{min-width:46px;}
    .info-ajustar .texto-control{display:none;}
    .info-zoom-valor{min-width:60px;}
    #infoContador{min-width:96px;}
}


/* =========================================================
   OPTIMIZACIÓN DE CARGA - ARCHIVO ÚNICO
========================================================= */
.info-page img{
    decoding:auto;
    image-rendering:auto;
}
.info-portada{
    content-visibility:auto;
}


/* =========================================================
   TRANSFORMATEC - LECTOR ESTABLE SIN DEPENDENCIAS EXTERNAS
   Permite abrir, cerrar y cambiar de revista indefinidamente.
========================================================= */

#infoBookViewport{
    width:max-content;
    min-width:100%;
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
    box-sizing:border-box;
}

#infoBookZoom{
    position:relative;
    flex:0 0 auto;
    line-height:0;
    transform-origin:top left;
}

#infoBook{
    margin:0 auto !important;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    transform-origin:top left;
    transition:transform .18s ease;
}

#infoBook .info-page{
    flex:0 0 auto;
    background:#fff;
    overflow:hidden;
    border-radius:3px;
    box-shadow:0 8px 28px rgba(0,0,0,.32);
}

#infoBook .info-page img{
    width:100%;
    height:100%;
    object-fit:contain !important;
    object-position:center center;
    display:block;
    user-select:none;
    -webkit-user-drag:none;
    background:#fff;
}

#infoBook .info-page.info-page-portada{
    box-shadow:0 10px 34px rgba(0,0,0,.38);
}

.info-control:disabled{
    opacity:.38;
    cursor:not-allowed;
    pointer-events:none;
}

#infoVisor .info-visor-cuerpo{
    overflow:auto;
    display:block;
    padding:12px;
    scrollbar-color:#6f8094 #10284D;
    scrollbar-width:thin;
    overscroll-behavior:contain;
}

#infoVisor .info-visor-cuerpo::-webkit-scrollbar{
    width:11px;
    height:11px;
}
#infoVisor .info-visor-cuerpo::-webkit-scrollbar-track{
    background:#10284D;
}
#infoVisor .info-visor-cuerpo::-webkit-scrollbar-thumb{
    background:#72849a;
    border-radius:10px;
    border:2px solid #10284D;
}

.info-visor-controles{
    min-height:76px;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    padding:10px 16px;
}

.info-navegacion-panel,
.info-zoom-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.info-navegacion-panel{
    flex:1 1 350px;
}

.info-zoom-panel{
    flex:1 1 390px;
    justify-content:flex-end;
}

.info-zoom-etiqueta{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-right:2px;
    color:#cbd7e4;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.info-control-cuadrado{
    min-width:44px;
    width:44px;
    padding:0;
}

.info-zoom-valor{
    min-width:70px;
    height:44px;
    padding:0 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.16);
    background:#171e28;
    color:#fff;
    font-size:12px;
    font-weight:900;
    font-variant-numeric:tabular-nums;
}

.info-ajustar{min-width:104px;}
#infoContador{min-width:150px;}

@media(max-width:900px){
    .info-visor-controles{justify-content:center;}
    .info-zoom-panel{justify-content:center;}
}

@media(max-width:620px){
    #infoVisor .info-visor-cuerpo{padding:5px;}
    #infoBookViewport{padding:2px;}
    #infoBook{gap:5px;}
    .info-visor-controles{padding:7px 6px;gap:7px;}
    .info-navegacion-panel,.info-zoom-panel{flex-basis:100%;}
    .info-zoom-etiqueta{display:none;}
    .info-ajustar{min-width:46px;}
    .info-ajustar .texto-control{display:none;}
    .info-zoom-valor{min-width:60px;}
    #infoContador{min-width:120px;}
}



/* Página modular independiente */
#paginaTransformatec{display:block !important;}
.btn-regresar{text-decoration:none;}
a{text-decoration:none;}