/* ------------------------------------------------------------------
   Portal ITESCO Campus Coatzacoalcos — estilos basados en ITESCO
   ------------------------------------------------------------------ */

:root {
    --azul-tecnm: #1b396a;
    --azul-tecnm-claro: #2b508c;
    /* Guinda oficial del Gobierno de México, tomado de coacalco.tecnm.mx */
    --guinda: #611232;
    --guinda-claro: #7a1a40;
    --gris-fondo: #efefef;
    --texto: #333;
    --ancho-contenido: 85%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: Roboto, "Open Sans", "Segoe UI", Arial, sans-serif;
    color: var(--texto);
    overflow-x: hidden;
}

body.portal-mobile-shell {
    padding-bottom: 0;
}

body.portal-loading {
    overflow: hidden;
}

a {
    text-decoration: none;
}

img,
iframe {
    max-width: 100%;
}

/* ---------- Preloader ---------- */
.portal-preloader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    background: #fff;
    transition: opacity .42s ease, visibility .42s ease;
}

.portal-preloader::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(27, 57, 106, .08) 0%, rgba(27, 57, 106, 0) 62%);
    opacity: 0;
    transform: scale(.92);
    transition: opacity .35s ease, transform .42s ease;
}

.portal-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.portal-preloader.is-leaving::after {
    opacity: 1;
    transform: scale(1.08);
}

.portal-preloader__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, rgba(27, 57, 106, .05) 0%, rgba(27, 57, 106, 0) 55%),
        linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.portal-preloader__content {
    position: relative;
    z-index: 1;
    width: min(90vw, 320px);
    padding: 1.5rem 1rem;
    isolation: isolate;
    text-align: center;
    color: var(--azul-tecnm);
    animation: preloaderEntrada .5s ease-out both;
    transition: transform .42s ease, opacity .35s ease;
}

.portal-preloader__halo,
.portal-preloader__orbit {
    position: absolute;
    inset: 50% auto auto 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.portal-preloader__halo {
    z-index: -2;
    mix-blend-mode: normal;
}

.portal-preloader__halo--outer {
    width: 18.5rem;
    height: 18.5rem;
    background:
        radial-gradient(circle, rgba(72, 118, 196, .18) 0%, rgba(72, 118, 196, .08) 32%, rgba(72, 118, 196, .02) 56%, rgba(72, 118, 196, 0) 72%);
    filter: blur(4px);
    opacity: .95;
    animation: preloaderHaloPulse 2.2s ease-in-out infinite;
}

.portal-preloader__halo--inner {
    width: 13.5rem;
    height: 13.5rem;
    border: 1px solid rgba(65, 111, 189, .18);
    box-shadow:
        0 0 0 8px rgba(65, 111, 189, .04),
        0 0 48px rgba(65, 111, 189, .10);
    opacity: .9;
    animation: preloaderHaloRotate 4.5s linear infinite;
}

.portal-preloader__orbit {
    z-index: -1;
    border: 1px solid rgba(27, 57, 106, .08);
    box-shadow: inset 0 0 18px rgba(27, 57, 106, .03);
}

.portal-preloader__orbit::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -.42rem;
    width: .7rem;
    height: .7rem;
    margin-top: -.35rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(100, 145, 219, .9));
    box-shadow:
        0 0 0 4px rgba(98, 144, 219, .08),
        0 0 14px rgba(86, 132, 207, .26);
}

.portal-preloader__orbit--one {
    width: 16rem;
    height: 16rem;
    animation: preloaderOrbit 5.5s linear infinite;
}

.portal-preloader__orbit--two {
    width: 11.35rem;
    height: 11.35rem;
    border-color: rgba(27, 57, 106, .11);
    animation: preloaderOrbitReverse 4.2s linear infinite;
}

.portal-preloader__orbit--three {
    width: 13.4rem;
    height: 13.4rem;
    border-style: dashed;
    border-color: rgba(72, 118, 196, .13);
    animation: preloaderOrbit 7.4s linear infinite;
}

.portal-preloader__orbit--three::before {
    width: .44rem;
    height: .44rem;
    margin-top: -.22rem;
    left: auto;
    right: -.26rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(43, 80, 140, .95));
    box-shadow:
        0 0 0 3px rgba(43, 80, 140, .08),
        0 0 10px rgba(43, 80, 140, .3);
}

.portal-preloader__orbit--two::before {
    width: .56rem;
    height: .56rem;
    margin-top: -.28rem;
    left: auto;
    right: -.34rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(27, 57, 106, .92));
    box-shadow:
        0 0 0 4px rgba(27, 57, 106, .07),
        0 0 12px rgba(27, 57, 106, .22);
}

/* Sin disco blanco: el PNG ya trae canal alfa, asi que el logo va suelto sobre
   el fondo y solo flota. */
.portal-preloader__logo-wrap {
    position: relative;
    width: 7.25rem;
    height: 7.25rem;
    margin: 0 auto .9rem;
    display: grid;
    place-items: center;
    animation: preloaderFlotar 2.8s ease-in-out infinite;
    transition: transform .42s ease, opacity .35s ease;
}

/* Logo y destello comparten celda para que la mascara calce exacto sobre la imagen. */
.portal-preloader__logo-wrap > * {
    grid-area: 1 / 1;
}

/* El destello se recorta a la silueta del logo. La mascara va en el contenedor
   (quieto) y el barrido en el ::before, para que el recorte no se mueva con el. */
.portal-preloader__shine {
    position: relative;
    z-index: 2;
    width: 76%;
    aspect-ratio: 707 / 726;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask: url("../img/logo-itesco.png") center / contain no-repeat;
    mask: url("../img/logo-itesco.png") center / contain no-repeat;
}

.portal-preloader__shine::before {
    content: "";
    position: absolute;
    inset: -25% -15%;
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, .95) 50%,
        rgba(255, 255, 255, 0) 62%);
    transform: translateX(-160%) skewX(-18deg);
    animation: preloaderShine 2.4s ease-in-out infinite;
}

.portal-preloader__logo {
    position: relative;
    z-index: 1;
    width: 76%;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 24px rgba(27, 57, 106, .22));
    animation: preloaderLogo 2.4s ease-in-out infinite;
    transition: transform .42s ease, opacity .35s ease, filter .42s ease;
}

.portal-preloader__title {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
}

/* Onda letra por letra. */
.portal-preloader__title span {
    display: inline-block;
    animation: preloaderLetra 1.5s ease-in-out infinite;
}

.portal-preloader__title span:nth-child(2) { animation-delay: .09s; }
.portal-preloader__title span:nth-child(3) { animation-delay: .18s; }
.portal-preloader__title span:nth-child(4) { animation-delay: .27s; }
.portal-preloader__title span:nth-child(5) { animation-delay: .36s; }
.portal-preloader__title span:nth-child(6) { animation-delay: .45s; }

/* Barra indeterminada: da sensacion de avance en la ventana corta que dura el preloader. */
.portal-preloader__barra {
    position: relative;
    display: block;
    width: 8.5rem;
    height: 3px;
    margin: .9rem auto 0;
    border-radius: 999px;
    background: rgba(27, 57, 106, .10);
    overflow: hidden;
}

.portal-preloader__barra::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(27, 57, 106, 0), var(--azul-tecnm), rgba(27, 57, 106, 0));
    animation: preloaderBarra 1.35s ease-in-out infinite;
}

/* Al salir se cortan las animaciones en bucle: si no, ganan sobre estas
   declaraciones y el preloader se congela en vez de despedirse. */
.portal-preloader.is-leaving .portal-preloader__content {
    animation: none;
    transform: translateY(-4px);
    opacity: 0;
}

.portal-preloader.is-leaving .portal-preloader__logo-wrap {
    animation: none;
    transform: scale(1.08);
}

.portal-preloader.is-leaving .portal-preloader__logo {
    animation: none;
    transform: scale(1.12);
    opacity: 0;
    filter: drop-shadow(0 10px 28px rgba(27, 57, 106, .10));
}

.portal-preloader.is-leaving .portal-preloader__title span,
.portal-preloader.is-leaving .portal-preloader__barra::before {
    animation: none;
}

.portal-preloader.is-leaving .portal-preloader__halo--outer {
    animation-duration: 1.2s;
    opacity: .45;
}

.portal-preloader.is-leaving .portal-preloader__orbit {
    opacity: .25;
}

@keyframes preloaderEntrada {
    from {
        opacity: 0;
        transform: translateY(.8rem) scale(.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes preloaderFlotar {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-.5rem);
    }
}

@keyframes preloaderLogo {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.05) rotate(-2deg);
    }
    50% {
        transform: scale(1.08) rotate(0deg);
    }
    75% {
        transform: scale(1.05) rotate(2deg);
    }
}

@keyframes preloaderLetra {
    0%, 55%, 100% {
        transform: translateY(0);
        opacity: .5;
    }
    22% {
        transform: translateY(-.3rem);
        opacity: 1;
    }
}

@keyframes preloaderBarra {
    0% {
        transform: translateX(-115%);
    }
    100% {
        transform: translateX(330%);
    }
}

@keyframes preloaderShine {
    0% {
        transform: translateX(-160%) skewX(-18deg);
    }
    50%, 100% {
        transform: translateX(160%) skewX(-18deg);
    }
}

@keyframes preloaderHaloPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(.96);
        opacity: .82;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.04);
        opacity: 1;
    }
}

@keyframes preloaderHaloRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes preloaderOrbit {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes preloaderOrbitReverse {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

/* El preloader es la primera pantalla del sitio: si el sistema pide menos
   movimiento, se muestra quieto y legible en vez de girando. */
@media (prefers-reduced-motion: reduce) {
    .portal-preloader__content,
    .portal-preloader__logo-wrap,
    .portal-preloader__logo,
    .portal-preloader__shine::before,
    .portal-preloader__halo,
    .portal-preloader__orbit,
    .portal-preloader__title span,
    .portal-preloader__barra::before {
        animation: none;
    }

    .portal-preloader__content {
        opacity: 1;
        transform: none;
    }

    .portal-preloader__title span {
        opacity: 1;
    }

    .portal-preloader__barra::before {
        width: 100%;
        transform: none;
    }
}

/* ---------- Barra guinda de gob.mx ---------- */
.barra-gobmx {
    background-color: var(--guinda);
    min-height: 62px;
    display: flex;
    align-items: center;
    padding: .5rem 0;
}

.barra-gobmx .marca-gobmx img {
    height: 34px;
    width: auto;
    display: block;
}

.barra-gobmx .enlaces-gobmx {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
}

.barra-gobmx .enlaces-gobmx a {
    color: #fff;
    font-size: .88rem;
    padding: .4rem .85rem;
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
}

.barra-gobmx .enlaces-gobmx a:hover {
    background: rgba(255, 255, 255, .14);
}

/* ---------- Cabecera con plecas y accesibilidad ---------- */
.cabecera {
    background: #fff;
    padding: .85rem 1rem;
    border-bottom: 1px solid #e6e6e6;
}

.cabecera .plecas img {
    max-height: 46px;
    width: auto;
    margin-right: 1.5rem;
}

.cabecera .plecas a:last-child img {
    margin-right: 0;
}

/* Fila de iconos: MT, Buzón, Calendario, banderas, Débil Visual, A+ A- A */
.cabecera .accesos {
    gap: .45rem;
}

.cabecera .accesos img {
    height: 28px;
    width: 28px;
    object-fit: contain;
    display: block;
}

.cabecera .accesos a {
    display: inline-flex;
    align-items: center;
    border-radius: 50%;
    transition: transform .15s;
}

.cabecera .accesos a:hover {
    transform: scale(1.12);
}

.cabecera .accesos .bandera img {
    height: 26px;
    width: 26px;
}

.cabecera .accesos .icono-accesibilidad {
    margin-left: .5rem;
}

.btn-icono-accesibilidad {
    margin-left: .45rem;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, opacity .15s ease;
}

.btn-icono-accesibilidad:hover,
.btn-icono-accesibilidad:focus-visible {
    transform: scale(1.08);
    opacity: .92;
}

.btn-icono-accesibilidad:focus-visible {
    outline: 2px solid rgba(27, 57, 106, .35);
    outline-offset: 2px;
}

.btn-accesibilidad {
    background: none;
    border: 0;
    color: var(--azul-tecnm);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
    padding: .2rem .35rem;
    display: inline-flex;
    align-items: center;
}

.btn-accesibilidad:hover {
    color: var(--guinda);
}

/* Modo alto contraste (botón ◐) */
body.contraste {
    filter: invert(1) hue-rotate(180deg);
}

body.contraste img,
body.contraste iframe {
    filter: invert(1) hue-rotate(180deg);
}

/* Por debajo de 1200px hay elementos anclados al viewport (.tabbar y
   .hoja-movil, ambos hijos directos de body). Un `filter` sobre un elemento lo
   convierte en bloque contenedor de sus descendientes `position: fixed`, asi
   que el filtro de arriba los despegaba del viewport y se iban al final del
   documento: al activar el contraste desaparecia la barra de pestanas.
   Aqui el filtro se aplica hijo a hijo —tabbar y hoja incluidas—: el resultado
   visual es el mismo y cada uno conserva su anclaje, porque un filtro sobre el
   propio elemento no afecta a su posicionamiento, solo al de sus descendientes. */
@media (max-width: 1199.98px) {
    body.contraste {
        filter: none;
        background: #000;
    }

    body.contraste > * {
        filter: invert(1) hue-rotate(180deg);
    }
}

/* ---------- Menús ---------- */
.menu-secundario {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(247, 249, 252, .98) 100%);
    border-bottom: 1px solid #e6e6e6;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 8px 18px rgba(17, 33, 62, .05);
}

.menu-secundario::before,
.menu-secundario::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.menu-secundario::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(circle at 18% 50%, rgba(27, 57, 106, .06), rgba(27, 57, 106, 0) 36%);
}

.menu-secundario::after {
    inset: -8% auto -8% -12%;
    width: 22%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    opacity: .65;
    animation: menuSecundarioShine 9s ease-in-out infinite;
}

.menu-secundario .container-fluid {
    position: relative;
    z-index: 1;
}

.menu-secundario .nav-link {
    position: relative;
    color: var(--azul-tecnm) !important;
    font-size: .85rem;
    font-weight: 500;
    padding: .72rem 1rem;
    border-radius: 10px;
    transition:
        color .24s ease,
        background-color .24s ease,
        transform .24s ease,
        box-shadow .24s ease;
}

.menu-secundario .nav-link::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .42rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(43, 80, 140, 0), rgba(43, 80, 140, .72), rgba(43, 80, 140, 0));
    opacity: 0;
    transform: translateY(5px) scaleX(.65);
    transition: opacity .24s ease, transform .24s ease;
}

.menu-secundario .nav-link:hover,
.menu-secundario .nav-link:focus-visible,
.menu-secundario .nav-link.active {
    color: var(--guinda) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(238, 243, 250, .94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .92),
        0 10px 18px rgba(27, 57, 106, .08);
    transform: translateY(-1px);
}

.menu-secundario .nav-link:hover::after,
.menu-secundario .nav-link:focus-visible::after,
.menu-secundario .nav-link.active::after {
    opacity: 1;
    transform: translateY(0) scaleX(1);
}

.menu-secundario .dropdown-menu {
    border: 1px solid rgba(27, 57, 106, .08);
    border-radius: 0;
    box-shadow: 0 18px 34px rgba(16, 33, 61, .12);
}

.menu-secundario .dropdown-item:hover,
.menu-secundario .dropdown-item:focus {
    color: var(--guinda);
    background: rgba(27, 57, 106, .06);
}

@keyframes menuSecundarioShine {
    0% {
        transform: translateX(-150%) skewX(-20deg);
        opacity: 0;
    }
    18% {
        opacity: .45;
    }
    34% {
        transform: translateX(440%) skewX(-20deg);
        opacity: 0;
    }
    100% {
        transform: translateX(440%) skewX(-20deg);
        opacity: 0;
    }
}

.portal-app-callout {
    display: none;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f9ff 0%, #ffffff 52%, #eef5ff 100%);
    border-bottom: 1px solid rgba(27, 57, 106, .1);
}

.portal-app-callout.is-visible {
    display: block;
}

.portal-app-callout::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 50%, rgba(43, 80, 140, .09), rgba(43, 80, 140, 0) 28%),
        linear-gradient(110deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .85) 48%, rgba(255, 255, 255, 0) 70%);
    transform: translateX(-18%);
}

.portal-app-callout__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.portal-app-callout__copy strong {
    display: block;
    color: var(--azul-tecnm);
    font-size: 1rem;
    margin-bottom: .22rem;
}

.portal-app-callout__copy p {
    margin: 0;
    color: #4b5c77;
    font-size: .92rem;
    line-height: 1.45;
}

.portal-app-callout__eyebrow {
    display: inline-block;
    margin-bottom: .28rem;
    color: #2f7d32;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.portal-app-callout__actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}

.portal-app-callout__button {
    border: 0;
    border-radius: 999px;
    padding: .78rem 1.2rem;
    background: linear-gradient(135deg, #1f7a34 0%, #2e9e49 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(31, 122, 52, .16);
    transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

.portal-app-callout__button:hover,
.portal-app-callout__button:focus-visible {
    transform: translateY(-2px);
    filter: saturate(1.04);
    box-shadow: 0 16px 28px rgba(31, 122, 52, .22);
}

.portal-app-callout__close {
    border: 0;
    background: rgba(27, 57, 106, .06);
    color: var(--azul-tecnm);
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
}

.portal-popup {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.portal-popup[hidden] {
    display: none;
}

.portal-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 19, 38, .58);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .22s ease;
}

.portal-popup__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 42rem);
    padding: 1.5rem 1.5rem 1.35rem;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 249, 253, .98));
    box-shadow: 0 28px 54px rgba(7, 20, 42, .24);
    transform: translateY(16px) scale(.96);
    opacity: 0;
    transition: transform .26s ease, opacity .26s ease;
}

.portal-popup.is-visible .portal-popup__backdrop {
    opacity: 1;
}

.portal-popup.is-visible .portal-popup__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.portal-popup__close {
    position: absolute;
    top: .9rem;
    right: .9rem;
    border: 0;
    background: rgba(27, 57, 106, .07);
    color: var(--azul-tecnm);
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    font-size: 1.28rem;
    line-height: 1;
}

.portal-popup__badge {
    display: inline-flex;
    padding: .38rem .7rem;
    border-radius: 999px;
    background: rgba(27, 57, 106, .08);
    color: var(--azul-tecnm);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: .9rem;
}

.portal-popup__title {
    margin: 0 0 .7rem;
    color: var(--azul-tecnm);
    font-size: clamp(1.55rem, 2vw, 2rem);
    line-height: 1.15;
}

.portal-popup__content {
    color: #40516e;
    line-height: 1.7;
}

.portal-popup__content p:last-child {
    margin-bottom: 0;
}

.portal-popup__button {
    display: inline-flex;
    margin-top: 1.2rem;
    align-items: center;
    justify-content: center;
    padding: .86rem 1.2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--azul-tecnm) 0%, var(--azul-tecnm-claro) 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 14px 30px rgba(27, 57, 106, .18);
}

.menu-principal {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(53, 95, 157, .96) 0%, rgba(27, 57, 106, .98) 58%, rgba(18, 41, 79, 1) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 10px 24px rgba(13, 29, 56, .14);
}

.menu-principal::before,
.menu-principal::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.menu-principal::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .02) 32%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle at 18% 50%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 30%);
    opacity: .9;
}

.menu-principal::after {
    inset: -20% auto -20% -18%;
    width: 34%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .14) 45%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-24deg);
    opacity: .75;
    animation: menuPrincipalShine 7.5s ease-in-out infinite;
}

.menu-principal .container-fluid {
    position: relative;
    z-index: 1;
}

.menu-principal .nav-link {
    position: relative;
    color: #fff !important;
    font-weight: 300;
    font-size: .95rem;
    padding: .7rem 1rem;
    border-radius: 12px;
    transition:
        background-color .28s ease,
        color .28s ease,
        opacity .32s ease,
        transform .28s ease,
        box-shadow .28s ease;
}

.menu-principal .nav-link::after {
    content: "";
    position: absolute;
    left: 1.15rem;
    right: 1.15rem;
    bottom: .48rem;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .88), rgba(255, 255, 255, 0));
    opacity: 0;
    transform: translateY(6px) scaleX(.6);
    transform-origin: center;
    transition: opacity .24s ease, transform .24s ease;
}

.menu-principal .nav-link:hover,
.menu-principal .nav-link:focus-visible,
.menu-principal .nav-link.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .08));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 10px 22px rgba(7, 18, 37, .12);
    transform: translateY(-2px);
}

.menu-principal .nav-link:hover::after,
.menu-principal .nav-link:focus-visible::after,
.menu-principal .nav-link.active::after {
    opacity: .98;
    transform: translateY(0) scaleX(1);
}

.menu-principal .dropdown-menu {
    background:
        linear-gradient(180deg, rgba(42, 79, 132, .98) 0%, rgba(22, 47, 88, .99) 100%);
    border: 0;
    border-radius: 0 0 16px 16px;
    margin-top: 0;
    box-shadow: 0 18px 34px rgba(8, 20, 39, .18);
}

.menu-principal .dropdown-item {
    position: relative;
    color: #fff;
    font-size: .9rem;
    white-space: normal;
    max-width: 340px;
    transition:
        background-color .24s ease,
        padding-left .24s ease,
        opacity .24s ease,
        transform .24s ease;
}

.menu-principal .dropdown-item::before {
    content: "";
    position: absolute;
    left: .72rem;
    top: 50%;
    width: .34rem;
    height: .34rem;
    margin-top: -.17rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    opacity: 0;
    transform: scale(.4);
    transition: opacity .22s ease, transform .22s ease;
}

.menu-principal .dropdown-item:hover,
.menu-principal .dropdown-item:focus {
    background-color: var(--azul-tecnm-claro);
    color: #fff;
    padding-left: 1.35rem;
    transform: translateX(3px);
}

.menu-principal .dropdown-item:hover::before,
.menu-principal .dropdown-item:focus::before {
    opacity: 1;
    transform: scale(1);
}

@keyframes menuPrincipalShine {
    0% {
        transform: translateX(-140%) skewX(-24deg);
        opacity: 0;
    }
    18% {
        opacity: .65;
    }
    34% {
        transform: translateX(360%) skewX(-24deg);
        opacity: 0;
    }
    100% {
        transform: translateX(360%) skewX(-24deg);
        opacity: 0;
    }
}

/* Submenús de segundo nivel */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -.4rem;
}

.dropdown-submenu > a::after {
    display: inline-block;
    float: right;
    content: "›";
    font-size: 1.1rem;
    line-height: 1;
}

.dropdown-submenu > a.dropdown-toggle::after {
    border: 0;
}

@media (min-width: 1200px) {
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

@media (max-width: 1199.98px) {
    .dropdown-submenu > .dropdown-menu {
        position: static;
        left: 0;
        padding-left: 1rem;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

/* ---------- Ajustes del menu principal ---------- */
.menu-principal {
    position: relative;
    z-index: 120;
    overflow: visible;
}

.menu-principal .container-fluid {
    position: relative;
    z-index: 5;
}

.menu-principal .nav-link,
.menu-principal .dropdown-item,
.menu-principal .dropdown-toggle {
    text-decoration: none;
}

.menu-principal .dropdown-menu {
    min-width: 18rem;
    margin-top: .2rem;
    padding: .55rem 0;
}

.menu-principal .dropdown-item {
    padding: .72rem 1.05rem;
}

.dropdown-submenu > .dropdown-menu {
    top: -.55rem;
    left: calc(100% - .18rem);
    margin-top: 0;
    border-radius: 14px;
}

.dropdown-submenu > a::after {
    content: "›";
    font-size: 1rem;
    margin-top: .1rem;
    opacity: .8;
}

@media (min-width: 1200px) {
    .menu-principal .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(14px) scale(.975);
        transform-origin: top center;
        transition:
            opacity .32s cubic-bezier(.22, 1, .36, 1),
            transform .34s cubic-bezier(.22, 1, .36, 1),
            visibility .32s ease;
    }

    .menu-principal .dropdown:hover > .dropdown-menu,
    .menu-principal .dropdown:focus-within > .dropdown-menu,
    .menu-principal .dropdown > .dropdown-menu.show {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .dropdown-submenu > .dropdown-menu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(14px) translateY(4px) scale(.975);
        transform-origin: left top;
        transition:
            opacity .3s cubic-bezier(.22, 1, .36, 1),
            transform .32s cubic-bezier(.22, 1, .36, 1),
            visibility .3s ease;
    }

    .dropdown-submenu:hover > .dropdown-menu,
    .dropdown-submenu:focus-within > .dropdown-menu,
    .dropdown-submenu > .dropdown-menu.show {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0) translateY(0) scale(1);
    }
}

@media (max-width: 1199.98px) {
    .carrusel-marquee--interes .carrusel-marquee__viewport {
        border-radius: 18px;
    }

    .menu-principal .dropdown-menu {
        display: none;
        min-width: 0;
        margin-top: 0;
        padding: .25rem 0 .35rem;
        border-radius: 0;
        box-shadow: none;
        background: rgba(255, 255, 255, .06);
    }

    .menu-principal .dropdown-menu.show {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    .dropdown-submenu > .dropdown-menu {
        position: static;
        left: 0;
        padding-left: .85rem;
        border-radius: 0;
    }
}

/* ---------- Ajuste visual menu principal ---------- */
.menu-principal {
    background:
        linear-gradient(180deg, rgba(38, 79, 136, .92) 0%, rgba(23, 54, 101, .96) 58%, rgba(17, 40, 78, .98) 100%);
    border-bottom: 1px solid rgba(112, 187, 120, .9);
    box-shadow:
        inset 0 -1px 0 rgba(45, 107, 63, .24),
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 8px 18px rgba(13, 29, 56, .12);
    backdrop-filter: blur(10px) saturate(125%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
}

.menu-principal .nav-link {
    border-radius: 4px;
    letter-spacing: .01em;
}

.menu-principal .nav-link::after {
    background: linear-gradient(90deg, rgba(45, 107, 63, 0), rgba(130, 198, 96, .96), rgba(45, 107, 63, 0));
}

.menu-principal .nav-link:hover::after,
.menu-principal .nav-link:focus-visible::after,
.menu-principal .nav-link.active::after,
.menu-principal .show > .nav-link::after,
.menu-principal .nav-item:hover > .nav-link::after {
    height: 1px;
}

.menu-principal .nav-link:hover,
.menu-principal .nav-link:focus-visible,
.menu-principal .nav-link.active,
.menu-principal .show > .nav-link,
.menu-principal .nav-item:hover > .nav-link {
    background:
        linear-gradient(180deg, rgba(70, 136, 84, .97), rgba(39, 90, 51, .98));
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        inset 0 -1px 0 rgba(9, 42, 17, .22),
        0 6px 14px rgba(18, 46, 25, .16);
    transform: translateY(-1px);
}

.menu-principal .nav-link:hover::after,
.menu-principal .nav-link:focus-visible::after,
.menu-principal .nav-link.active::after,
.menu-principal .show > .nav-link::after,
.menu-principal .nav-item:hover > .nav-link::after {
    opacity: .98;
    transform: translateY(0) scaleX(1);
}

.menu-principal .dropdown-menu,
.dropdown-submenu > .dropdown-menu {
    background:
        linear-gradient(180deg, rgba(31, 68, 118, .94) 0%, rgba(20, 48, 91, .97) 100%);
    border-radius: 0;
    border-top: 2px solid #2d6b3f;
    box-shadow:
        0 14px 28px rgba(10, 25, 46, .18),
        inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.menu-principal .dropdown-menu {
    box-shadow:
        0 18px 32px rgba(10, 25, 46, .20),
        0 6px 14px rgba(10, 25, 46, .10),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

.dropdown-submenu > .dropdown-menu {
    background:
        linear-gradient(180deg, rgba(26, 59, 103, .96) 0%, rgba(17, 41, 79, .985) 100%);
    box-shadow:
        0 22px 36px rgba(7, 18, 35, .24),
        0 8px 18px rgba(7, 18, 35, .14),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

.menu-principal .dropdown-item {
    border-radius: 0;
}

.menu-principal .dropdown-item.active,
.menu-principal .dropdown-submenu.is-active > .dropdown-item {
    background: linear-gradient(90deg, rgba(242, 251, 244, .98), rgba(230, 245, 234, .98));
    color: #235f33 !important;
    box-shadow: inset 3px 0 0 #2d6b3f;
    font-weight: 500;
}

.menu-principal .dropdown-item.active::before,
.menu-principal .dropdown-submenu.is-active > .dropdown-item::before {
    opacity: 1;
    transform: scale(1);
    background: #2d6b3f;
}

.menu-principal .dropdown-item:hover,
.menu-principal .dropdown-item:focus {
    background: linear-gradient(90deg, rgba(246, 252, 247, .98), rgba(233, 246, 236, .98));
    color: #2d6b3f !important;
    box-shadow: inset 4px 0 0 #2d6b3f;
}

.menu-principal .dropdown-item:hover::before,
.menu-principal .dropdown-item:focus::before {
    background: #2d6b3f;
}

/* ---------- Carrusel principal ---------- */
.carrusel-principal {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.carrusel-principal .carousel-inner {
    overflow: hidden;
}

.carrusel-principal .carousel,
.carrusel-principal .carousel-item,
.carrusel-principal .carousel-item img {
    position: relative;
    z-index: 1;
}

.carrusel-principal .carousel-item {
    transition: opacity .9s ease;
}

.carrusel-principal .carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.02);
    transition: transform 1.4s ease, filter 1s ease;
    filter: saturate(1.02);
}

.carrusel-principal .carousel-item.active img {
    transform: scale(1);
}

.carrusel-principal .carousel-item-next:not(.carousel-item-start) img,
.carrusel-principal .carousel-item-prev:not(.carousel-item-end) img {
    transform: scale(1.04);
}

.carrusel-principal::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(45, 107, 63, 0), rgba(130, 198, 96, .9), rgba(45, 107, 63, 0));
    opacity: .9;
    pointer-events: none;
}

/* ---------- Bloques de contenido ---------- */
.bloque {
    width: var(--ancho-contenido);
    max-width: 100%;
    margin: 2rem auto;
    padding: 1.5rem 1rem 2rem;
}

.bloque-gris {
    background-color: var(--gris-fondo);
}

.titulo-seccion {
    text-align: center;
    color: var(--azul-tecnm);
    font-weight: 300;
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

/* ---------- Menú de cafetería ---------- */
.menu-cafeteria {
    background:
        radial-gradient(circle at top left, rgba(97, 18, 50, .08), transparent 28%),
        radial-gradient(circle at top right, rgba(27, 57, 106, .12), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
    border: 1px solid rgba(27, 57, 106, .08);
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(27, 57, 106, .08);
}

.menu-cafeteria__encabezado {
    max-width: 780px;
    margin: 0 auto 1.5rem;
    text-align: center;
}

.menu-cafeteria__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: rgba(97, 18, 50, .08);
    color: var(--guinda);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.menu-cafeteria__descripcion {
    margin: 0;
    color: #5b6572;
    font-size: 1rem;
    line-height: 1.7;
}

.menu-cafeteria__marco {
    margin: 0;
    padding: .9rem;
    background: #fff;
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(27, 57, 106, .08);
}

.menu-cafeteria__marco img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

/* ---------- Avisos ---------- */
.rejilla-avisos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.rejilla-avisos > *,
.rejilla-noticias > *,
.rejilla-enlaces > *,
.galeria > * {
    min-width: 0;
}

.tarjeta-aviso {
    height: 100%;
}

.tarjeta-aviso a {
    position: relative;
    isolation: isolate;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(245, 250, 255, .98) 100%);
    box-shadow:
        0 10px 24px rgba(27, 57, 106, .08),
        inset 0 1px 0 rgba(255, 255, 255, .82);
    transition: transform .24s ease, box-shadow .28s ease;
}

.tarjeta-aviso a::before,
.tarjeta-aviso a::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}

.tarjeta-aviso a::before {
    inset: -18%;
    background: radial-gradient(circle at top center, rgba(130, 182, 255, .24), rgba(130, 182, 255, 0) 58%);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .28s ease, transform .28s ease;
    z-index: -1;
}

.tarjeta-aviso a::after {
    inset: 1px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .66) 0%, rgba(255, 255, 255, .2) 18%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(135deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 40%, rgba(120, 170, 241, .10) 100%);
    opacity: .82;
}

.tarjeta-aviso img {
    width: 100%;
    height: 280px;
    object-fit: contain;
    object-position: center center;
    display: block;
    background:
        radial-gradient(circle at top, rgba(235, 243, 255, .92), rgba(255, 255, 255, .98) 62%),
        linear-gradient(180deg, rgba(248, 251, 255, .98), rgba(255, 255, 255, .98));
    position: relative;
    z-index: 1;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    padding: .55rem;
    transition: transform .22s ease, filter .22s ease, background .24s ease;
}

.tarjeta-aviso a:hover,
.tarjeta-aviso a:focus-visible {
    transform: translateY(-3px);
    box-shadow:
        0 18px 34px rgba(27, 57, 106, .14),
        0 0 0 1px rgba(117, 165, 236, .16),
        inset 0 1px 0 rgba(255, 255, 255, .92);
}

.tarjeta-aviso a:hover::before,
.tarjeta-aviso a:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

.tarjeta-aviso a:hover::after,
.tarjeta-aviso a:focus-visible::after {
    animation: avisoMirrorSweep 1.45s ease;
}

.tarjeta-aviso a:hover img,
.tarjeta-aviso a:focus-visible img {
    transform: translateY(-3px);
    filter: brightness(1.09) drop-shadow(0 10px 18px rgba(62, 110, 180, .16));
}

.boton-aviso {
    position: relative;
    display: block;
    width: 100%;
    margin-top: auto;
    text-align: center;
    background-color: #e9e9e9;
    color: var(--azul-tecnm);
    border-radius: 0 0 14px 14px;
    font-size: 13px;
    padding: 10px 24px;
    transition: all .2s;
    overflow: hidden;
}

.tarjeta-aviso a:hover .boton-aviso {
    background: linear-gradient(to bottom, var(--azul-tecnm) 5%, #f9f9f9 100%);
    color: #fff;
}

@keyframes avisoMirrorSweep {
    0% {
        background-position:
            0 0,
            -220px 0;
    }
    100% {
        background-position:
            0 0,
            260px 0;
    }
}

.carrusel-marquee__encabezado {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.carrusel-marquee__encabezado--interes {
    align-items: flex-start;
    flex-direction: column;
}

.carrusel-marquee__subtitulo {
    margin: .2rem 0 0;
    color: #5c6878;
    font-size: .96rem;
    line-height: 1.55;
}

.carrusel-marquee {
    position: relative;
}

.carrusel-marquee__viewport {
    overflow: hidden;
    border-radius: 24px;
}

.carrusel-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.carrusel-marquee__grupo {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding-right: 1rem;
    flex-shrink: 0;
}

.carrusel-marquee__item {
    flex: 0 0 auto;
}

.carrusel-marquee--avisos .carrusel-marquee__track {
    animation: marqueeAvisos 34s linear infinite;
}

.carrusel-marquee--interes .carrusel-marquee__track {
    animation: marqueeInteres 28s linear infinite;
}

.carrusel-marquee:hover .carrusel-marquee__track,
.carrusel-marquee:focus-within .carrusel-marquee__track {
    animation-play-state: paused;
}

.carrusel-marquee__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(2.5rem, 6vw, 5rem);
    z-index: 3;
    pointer-events: none;
}

.carrusel-marquee__fade--izq {
    left: 0;
    background: linear-gradient(90deg, rgba(239, 239, 239, .98), rgba(239, 239, 239, 0));
}

.carrusel-marquee__fade--der {
    right: 0;
    background: linear-gradient(270deg, rgba(239, 239, 239, .98), rgba(239, 239, 239, 0));
}

.carrusel-marquee--interes .carrusel-marquee__fade--izq {
    background: linear-gradient(90deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, 0));
}

.carrusel-marquee--interes .carrusel-marquee__fade--der {
    background: linear-gradient(270deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, 0));
}

.carrusel-marquee__item--aviso {
    width: min(26rem, 82vw);
}

.carrusel-marquee__item--interes {
    width: min(14rem, 44vw);
}

.carrusel-avisos {
    position: relative;
    padding: 0 4.2rem 3.5rem;
}

.carrusel-avisos__encabezado {
    margin-bottom: 1.4rem;
}

.carrusel-avisos__slide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.carrusel-avisos__item {
    width: 100%;
    margin: 0;
}

.carrusel-avisos__control {
    top: 50%;
    bottom: auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(27, 57, 106, .92);
    box-shadow: 0 10px 22px rgba(13, 29, 56, .18);
    opacity: 1;
}

.carrusel-avisos__control.carousel-control-prev {
    left: .4rem;
}

.carrusel-avisos__control.carousel-control-next {
    right: .4rem;
}

.carrusel-avisos__control:hover,
.carrusel-avisos__control:focus-visible {
    background: #2d6b3f;
}

.carrusel-avisos__control .carousel-control-prev-icon,
.carrusel-avisos__control .carousel-control-next-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.carrusel-avisos__indicadores {
    bottom: -.25rem;
    margin-bottom: 0;
}

.carrusel-avisos__indicadores [data-bs-target] {
    width: .75rem;
    height: .75rem;
    margin: 0 .28rem;
    border-radius: 999px;
    border: 0;
    background-color: rgba(27, 57, 106, .22);
    opacity: 1;
}

.carrusel-avisos__indicadores .active {
    background-color: #2d6b3f;
}

.carrusel-flip {
    position: relative;
    padding: 0 2.9rem 3rem;
    perspective: 1500px;
}

.carrusel-flip .carousel-inner {
    overflow: visible;
}

.carrusel-flip .carousel-item {
    transition: transform .75s cubic-bezier(.22, 1, .36, 1), opacity .55s ease !important;
    transform-origin: center center;
}

.carrusel-flip__slide {
    display: flex;
    justify-content: center;
    align-items: stretch;
    min-height: 100%;
}

.carrusel-flip__item {
    width: min(21rem, 100%);
    filter: drop-shadow(0 16px 26px rgba(9, 23, 44, .14));
}

.carrusel-flip__item--noticia {
    width: min(24rem, 100%);
}

.carrusel-flip__control {
    top: 50%;
    bottom: auto;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(27, 57, 106, .92);
    box-shadow: 0 10px 22px rgba(13, 29, 56, .18);
    opacity: 1;
}

.carrusel-flip__control.carousel-control-prev {
    left: 0;
}

.carrusel-flip__control.carousel-control-next {
    right: 0;
}

.carrusel-flip__control:hover,
.carrusel-flip__control:focus-visible {
    background: #2d6b3f;
}

.carrusel-flip__indicadores {
    bottom: -.25rem;
    margin-bottom: 0;
}

.carrusel-flip__indicadores [data-bs-target] {
    width: .68rem;
    height: .68rem;
    margin: 0 .26rem;
    border-radius: 999px;
    border: 0;
    background-color: rgba(27, 57, 106, .22);
    opacity: 1;
}

.carrusel-flip__indicadores .active {
    background-color: #2d6b3f;
}

.carrusel-marquee--interes .carrusel-marquee__item--interes {
    display: flex;
    align-items: stretch;
}

.carrusel-marquee--interes .carrusel-marquee__item--interes > a {
    width: 100%;
    min-height: 168px;
    height: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.carrusel-marquee--interes .carrusel-marquee__item--interes img {
    max-width: 100%;
    max-height: 92px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.carrusel-marquee--interes .rejilla-enlaces {
    display: contents;
}

.carrusel-marquee--interes .rejilla-interes {
    display: contents;
}

@keyframes marqueeAvisos {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - .5rem));
    }
}

@keyframes marqueeInteres {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - .5rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    .carrusel-marquee__track {
        animation: none !important;
    }
}

/* ---------- Noticias ---------- */
.rejilla-noticias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.tarjeta-noticia {
    position: relative;
    isolation: isolate;
    background: #fff;
    border: 1px solid #e2e2e2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    box-shadow:
        0 10px 24px rgba(27, 57, 106, .08),
        inset 0 1px 0 rgba(255, 255, 255, .82);
    transition: transform .24s ease, box-shadow .28s ease, border-color .28s ease;
}

.tarjeta-noticia::before,
.tarjeta-noticia::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}

.tarjeta-noticia::before {
    inset: -18%;
    background: radial-gradient(circle at top center, rgba(130, 182, 255, .24), rgba(130, 182, 255, 0) 58%);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .28s ease, transform .28s ease;
    z-index: 0;
}

.tarjeta-noticia::after {
    inset: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .52), rgba(255, 255, 255, 0) 42%, rgba(120, 170, 241, .10) 100%);
    opacity: .72;
    z-index: 0;
}

.tarjeta-noticia > a img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform .22s ease, filter .22s ease;
}

.tarjeta-noticia:hover,
.tarjeta-noticia:focus-within {
    transform: translateY(-3px);
    border-color: rgba(117, 165, 236, .18);
    box-shadow:
        0 18px 34px rgba(27, 57, 106, .14),
        0 0 0 1px rgba(117, 165, 236, .14),
        inset 0 1px 0 rgba(255, 255, 255, .92);
}

.tarjeta-noticia:hover::before,
.tarjeta-noticia:focus-within::before {
    opacity: 1;
    transform: scale(1);
}

.tarjeta-noticia:hover > a img,
.tarjeta-noticia:focus-within > a img {
    transform: scale(1.04);
    filter: brightness(1.08) drop-shadow(0 8px 16px rgba(62, 110, 180, .18));
}

.tarjeta-noticia .cuerpo {
    padding: .9rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 1;
}

.tarjeta-noticia .fecha {
    color: #777;
    font-size: .75rem;
    margin-bottom: .35rem;
    overflow-wrap: anywhere;
}

.tarjeta-noticia h3 {
    font-size: .92rem;
    line-height: 1.4;
    font-weight: 400;
    flex: 1;
    overflow-wrap: anywhere;
}

.tarjeta-noticia h3 a {
    color: var(--texto);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tarjeta-noticia h3 a:hover {
    color: var(--azul-tecnm);
}

.leer-mas,
.enlace-ver-mas {
    color: var(--azul-tecnm);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .5px;
    margin-top: .6rem;
    overflow-wrap: anywhere;
}

.leer-mas:hover,
.enlace-ver-mas:hover {
    text-decoration: underline;
}

.enlace-ver-mas {
    font-size: 1rem;
}

/* ---------- Nota informativa ---------- */
.nota .titulo-nota {
    color: var(--azul-tecnm);
    font-size: 1.9rem;
    font-weight: 400;
    margin-bottom: .5rem;
}

.nota .fecha-nota {
    color: #777;
    font-weight: 600;
}

.nota .portada-nota {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: block;
    margin: 1.5rem auto;
}

.nota .cuerpo-nota {
    max-width: 900px;
    margin: 0 auto;
    text-align: justify;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Contenido redactado con el editor del panel */
.contenido-rico h2 {
    font-size: 1.4rem;
    color: var(--azul-tecnm);
    margin: 1.5rem 0 .75rem;
}

.contenido-rico h3 {
    font-size: 1.15rem;
    color: var(--azul-tecnm);
    margin: 1.25rem 0 .6rem;
}

.contenido-rico p {
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
}

.contenido-rico ul,
.contenido-rico ol {
    margin: 0 0 1rem 1.5rem;
}

.contenido-rico blockquote {
    border-left: 4px solid var(--azul-tecnm);
    padding-left: 1rem;
    color: #555;
    font-style: italic;
}

.contenido-rico a {
    color: var(--azul-tecnm);
    text-decoration: underline;
}

.contenido-rico .ql-align-center {
    text-align: center;
}

.contenido-rico .ql-align-right {
    text-align: right;
}

.contenido-rico .ql-align-justify {
    text-align: justify;
}

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
}

.galeria img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
}

.adjuntos-nota {
    max-width: 900px;
    margin: 2rem auto 0;
}

.adjuntos-nota h2 {
    color: var(--azul-tecnm);
    font-size: 1.15rem;
    margin-bottom: .85rem;
}

.adjuntos-nota__lista {
    display: grid;
    gap: .75rem;
}

.adjuntos-nota__item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: .9rem 1rem;
    border: 1px solid rgba(27, 57, 106, .14);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    color: var(--azul-tecnm);
}

.adjuntos-nota__item:hover {
    border-color: rgba(27, 57, 106, .28);
    transform: translateY(-1px);
}

.adjuntos-nota__nombre {
    font-weight: 600;
}

.adjuntos-nota__meta {
    color: #6c7787;
    font-size: .8rem;
    text-align: right;
}

/* ---------- Mascota flotante ---------- */
.mascota-itesco {
    position: absolute;
    top: -42px;
    right: 1.25rem;
    z-index: 20;
    width: 62px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: 0;
    transform: translate3d(48px, 10px, 0) scale(.88);
    transform-origin: bottom right;
    pointer-events: none;
}

.mascota-itesco.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform .95s cubic-bezier(.2, .9, .18, 1), opacity .45s ease;
    pointer-events: auto;
}

.mascota-itesco.is-floating {
    animation: mascotaFloat 4.8s ease-in-out infinite;
}

.mascota-itesco.is-waving .mascota-itesco__marco {
    animation: mascotaWave 1.3s ease-in-out 3;
}

.mascota-itesco__marco {
    position: relative;
    display: block;
    filter: drop-shadow(0 10px 16px rgba(8, 24, 48, .24));
    transition: transform .25s ease, filter .25s ease;
}

.mascota-itesco__imagen {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.mascota-itesco__burbuja {
    position: absolute;
    right: calc(100% - .2rem);
    bottom: 2.9rem;
    min-width: 112px;
    max-width: 146px;
    padding: .42rem .58rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    color: var(--azul-tecnm);
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    box-shadow: 0 10px 18px rgba(8, 24, 48, .16);
    opacity: 0;
    transform: translateY(10px) scale(.96);
    transform-origin: bottom right;
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
}

.mascota-itesco__burbuja::after {
    content: "";
    position: absolute;
    right: .9rem;
    bottom: -.3rem;
    width: .58rem;
    height: .58rem;
    background: inherit;
    transform: rotate(45deg);
    border-radius: 2px;
}

.mascota-itesco.is-speaking .mascota-itesco__burbuja,
.mascota-itesco:hover .mascota-itesco__burbuja,
.mascota-itesco:focus-visible .mascota-itesco__burbuja {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mascota-itesco:hover .mascota-itesco__marco,
.mascota-itesco:focus-visible .mascota-itesco__marco {
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 12px 18px rgba(8, 24, 48, .28));
}

.mascota-itesco:focus-visible {
    outline: none;
}

@keyframes mascotaFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -10px, 0);
    }
}

@keyframes mascotaWave {
    0%, 100% {
        transform: rotate(0deg) translateY(0);
    }
    20% {
        transform: rotate(-5deg) translateY(-4px);
    }
    40% {
        transform: rotate(4deg) translateY(-8px);
    }
    60% {
        transform: rotate(-3deg) translateY(-6px);
    }
    80% {
        transform: rotate(3deg) translateY(-2px);
    }
}

/* ---------- Enlaces con logotipo ---------- */
.rejilla-enlaces {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.rejilla-enlaces a {
    position: relative;
    isolation: isolate;
    min-height: 150px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(246, 250, 255, .98) 100%);
    box-shadow:
        0 10px 24px rgba(27, 57, 106, .08),
        inset 0 1px 0 rgba(255, 255, 255, .82);
    overflow: hidden;
    transition:
        transform .24s ease,
        box-shadow .28s ease,
        border-color .28s ease,
        background .28s ease;
}

.rejilla-enlaces a::before,
.rejilla-enlaces a::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}

.rejilla-enlaces a::before {
    inset: -18%;
    background: radial-gradient(circle at top center, rgba(130, 182, 255, .24), rgba(130, 182, 255, 0) 58%);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .28s ease, transform .28s ease;
    z-index: -1;
}

.rejilla-enlaces a::after {
    inset: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%, rgba(120, 170, 241, .12) 100%);
    opacity: .72;
}

.rejilla-enlaces img {
    max-width: 100%;
    max-height: 88px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform .22s ease, filter .22s ease;
}

.rejilla-enlaces a:hover,
.rejilla-enlaces a:focus-visible {
    transform: translateY(-3px);
    box-shadow:
        0 18px 34px rgba(27, 57, 106, .14),
        0 0 0 1px rgba(117, 165, 236, .16),
        inset 0 1px 0 rgba(255, 255, 255, .92);
}

.rejilla-enlaces a:hover::before,
.rejilla-enlaces a:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

.rejilla-enlaces a:hover img {
    transform: translateY(-3px);
    filter: brightness(1.08) drop-shadow(0 8px 16px rgba(62, 110, 180, .18));
}

.rejilla-interes {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.carrusel-interes {
    position: relative;
    padding-bottom: 2.9rem;
}

.carrusel-interes__encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.carrusel-interes__nav {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.carrusel-interes__boton {
    width: 2.8rem;
    height: 2.8rem;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(27, 57, 106, .98), rgba(19, 43, 83, .98));
    box-shadow: 0 12px 24px rgba(19, 43, 83, .18);
    transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.carrusel-interes__boton:hover,
.carrusel-interes__boton:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(19, 43, 83, .24);
    background: linear-gradient(180deg, rgba(38, 75, 130, .98), rgba(25, 52, 96, .98));
}

.carrusel-interes__boton .carousel-control-prev-icon,
.carrusel-interes__boton .carousel-control-next-icon {
    width: 1rem;
    height: 1rem;
    filter: brightness(0) invert(1);
}

.carrusel-interes .carousel-item {
    transition: opacity .55s ease;
}

.carrusel-interes__indicadores {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    gap: .4rem;
}

.carrusel-interes__indicadores [data-bs-target] {
    width: .72rem;
    height: .72rem;
    border: 0;
    border-radius: 999px;
    background: rgba(27, 57, 106, .22);
    opacity: 1;
    margin: 0;
}

.carrusel-interes__indicadores .active {
    background: #2d6b3f;
    box-shadow: 0 0 0 4px rgba(45, 107, 63, .12);
}

/* ---------- Pie ---------- */
.pie-institucional {
    background-color: var(--azul-tecnm);
    color: #fff;
    padding: 3rem 2rem 1.5rem;
    margin-top: 2rem;
}

.pie-institucional .container-fluid {
    position: relative;
}

.pie-institucional a {
    color: #fff;
}

.pie-institucional a:hover {
    text-decoration: underline;
}

.pie-institucional .redes img {
    height: 30px;
    width: auto;
}

.pie-institucional hr {
    border-color: #fff;
    opacity: .15;
    margin: 1.5rem 0;
}

.pie-legal {
    font-size: .9rem;
}

/* ---------- Traductor de Google ---------- */
/* El widget se oculta: las banderas del encabezado son el control visible. */
#google_translate_element {
    display: none;
}

.goog-te-banner-frame,
.skiptranslate {
    display: none !important;
}

body {
    top: 0 !important;
}

/* ---------- Pie guinda de gob.mx ---------- */
.pie-gobmx {
    background-color: var(--guinda);
    color: #fff;
    padding: 2.5rem 2rem 2rem;
    font-size: .88rem;
}

.pie-gobmx h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .75rem;
}

.pie-gobmx a {
    color: #fff;
}

.pie-gobmx a:hover {
    text-decoration: underline;
}

.pie-gobmx ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pie-gobmx ul li {
    margin-bottom: .45rem;
    line-height: 1.35;
}

.pie-gobmx .logo-pie {
    width: 190px;
    max-width: 100%;
    height: auto;
}

.pie-gobmx .redes-gobmx {
    display: flex;
    gap: .6rem;
    align-items: center;
}

.pie-gobmx .redes-gobmx img {
    height: 24px;
    width: 24px;
    object-fit: contain;
}

/* ---------- Capa movil / tableta (barra inferior estilo iOS) ---------- */
.tabbar,
.hoja-movil {
    display: none;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1199.98px) {
    :root {
        --ancho-contenido: 94%;
        --tabbar-alto: 3.45rem;
        --tabbar-inferior: env(safe-area-inset-bottom, 0px);
        --ios-separador: rgba(60, 60, 67, .29);
        --ios-secundario: #6b7280;
        --ios-fondo-grupo: #f2f2f7;
    }

    body {
        padding-bottom: calc(var(--tabbar-alto) + var(--tabbar-inferior) + .4rem);
    }

    html {
        scroll-padding-top: 4.5rem;
        -webkit-text-size-adjust: 100%;
    }

    body.hoja-abierta {
        overflow: hidden;
    }

    .barra-gobmx .container-fluid,
    .cabecera .container-fluid,
    .menu-secundario .container-fluid,
    .menu-principal .container-fluid,
    .pie-institucional .container-fluid,
    .pie-gobmx .container-fluid {
        padding-left: .9rem;
        padding-right: .9rem;
    }

    .portal-preloader__content {
        padding: 2rem 1.25rem;
    }

    .portal-preloader__halo--outer {
        width: 17rem;
        height: 17rem;
    }

    .portal-preloader__halo--inner {
        width: 12.5rem;
        height: 12.5rem;
    }

    .portal-preloader__orbit--one {
        width: 15rem;
        height: 15rem;
    }

    .portal-preloader__orbit--two {
        width: 10.5rem;
        height: 10.5rem;
    }

    .portal-preloader__logo-wrap {
        width: 8rem;
        height: 8rem;
        border-radius: 22px;
    }

    .cabecera .plecas img {
        max-height: 30px;
        margin-right: .55rem;
    }

    .cabecera .container-fluid {
        align-items: center !important;
        justify-content: center !important;
    }

    .cabecera .plecas {
        min-width: 0;
    }

    /* En movil y tableta la navegacion vive en la barra inferior y en la hoja
       deslizable, asi que el encabezado se queda solo con la marca. */
    .cabecera .accesos,
    .menu-secundario,
    .menu-principal {
        display: none !important;
    }

    .titulo-seccion {
        font-size: 1.6rem;
    }

    .rejilla-noticias {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        align-items: stretch;
    }

    .rejilla-noticias > * {
        min-width: 0;
    }

    .tarjeta-noticia {
        min-width: 0;
        max-width: 100%;
        height: 100%;
    }

    .tarjeta-noticia > a {
        display: block;
        min-width: 0;
    }

    .tarjeta-noticia > a img {
        height: 165px;
        aspect-ratio: 16 / 10;
    }

    .tarjeta-noticia .cuerpo {
        padding: .8rem;
        min-width: 0;
    }

    .tarjeta-noticia h3 {
        font-size: .88rem;
        margin-bottom: 0;
    }

    .nota .titulo-nota {
        font-size: 1.7rem;
        line-height: 1.15;
    }

    .nota .cuerpo-nota {
        font-size: 1rem;
    }

    .menu-cafeteria {
        border-radius: 18px;
    }

    .menu-cafeteria__marco {
        padding: .65rem;
        border-radius: 16px;
    }

    .menu-cafeteria__marco img {
        border-radius: 12px;
    }

    .mascota-itesco {
        top: -34px;
        right: 1rem;
        width: 54px;
    }

    .mascota-itesco__burbuja {
        bottom: 2.45rem;
        min-width: 102px;
        max-width: 132px;
        font-size: .6rem;
    }

    /* ============================================================
       Barra de pestanas inferior — patron de tab bar de iOS:
       ancho completo, material translucido, filete superior y
       respeto del area segura del iPhone.
       ============================================================ */
    .tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        display: flex;
        align-items: stretch;
        padding-bottom: var(--tabbar-inferior);
        transition: transform .3s cubic-bezier(.32, .72, 0, 1);
    }

    .tabbar.is-oculta {
        transform: translateY(calc(100% + 1px));
    }

    .tabbar__fondo {
        position: absolute;
        inset: 0;
        background: rgba(249, 250, 252, .82);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid var(--ios-separador);
        pointer-events: none;
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .tabbar__fondo {
            background: #f7f8fa;
        }
    }

    .tabbar__item {
        position: relative;
        z-index: 1;
        flex: 1 1 0;
        min-width: 0;
        border: 0;
        background: transparent;
        color: var(--ios-secundario);
        font: inherit;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .1rem;
        height: var(--tabbar-alto);
        padding: .3rem .12rem;
        -webkit-tap-highlight-color: transparent;
        transition: color .18s ease, opacity .12s ease, transform .12s ease;
    }

    .tabbar__item.is-active {
        color: var(--azul-tecnm);
    }

    .tabbar__item:active {
        opacity: .45;
        transform: scale(.94);
    }

    .tabbar__item:focus-visible {
        outline: 2px solid var(--azul-tecnm);
        outline-offset: -4px;
        border-radius: 12px;
    }

    .tabbar__icono {
        width: 1.65rem;
        height: 1.65rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tabbar__icono svg {
        width: 100%;
        height: 100%;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke-width .18s ease;
    }

    .tabbar__item.is-active .tabbar__icono svg {
        stroke-width: 2.15;
    }

    .tabbar__etiqueta {
        font-size: .625rem;
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: -.01em;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tabbar__item.is-active .tabbar__etiqueta {
        font-weight: 600;
    }

    /* ============================================================
       Hoja deslizable (sheet) con el menu completo.
       ============================================================ */
    .hoja-movil {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1400;
    }

    .hoja-movil[hidden] {
        display: none;
    }

    .hoja-movil__velo {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .42);
        opacity: 0;
        transition: opacity .38s cubic-bezier(.32, .72, 0, 1);
    }

    .hoja-movil.is-abierta .hoja-movil__velo {
        opacity: 1;
    }

    .hoja-movil__panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: min(88vh, 46rem);
        display: flex;
        flex-direction: column;
        background: var(--ios-fondo-grupo);
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, .22);
        transform: translateY(100%);
        transition: transform .42s cubic-bezier(.32, .72, 0, 1);
        will-change: transform;
        overscroll-behavior: contain;
    }

    .hoja-movil.is-abierta .hoja-movil__panel {
        transform: translateY(0);
    }

    .hoja-movil__panel.is-arrastrando {
        transition: none;
    }

    .hoja-movil__agarre {
        padding: .55rem 0 .2rem;
        display: flex;
        justify-content: center;
        flex: 0 0 auto;
        touch-action: none;
        cursor: grab;
    }

    .hoja-movil__agarre span {
        width: 2.35rem;
        height: .3rem;
        border-radius: 999px;
        background: #c7c7cc;
    }

    .hoja-movil__encabezado {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .1rem 1.05rem .7rem;
    }

    .hoja-movil__titulo {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #111827;
    }

    .hoja-movil__cerrar {
        border: 0;
        background: transparent;
        color: var(--azul-tecnm);
        font-size: 1rem;
        font-weight: 600;
        padding: .25rem .2rem;
        -webkit-tap-highlight-color: transparent;
    }

    .hoja-movil__cerrar:active {
        opacity: .5;
    }

    .hoja-movil__cuerpo {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0 1.05rem calc(1.4rem + var(--tabbar-inferior));
    }

    .hoja-movil__seccion {
        margin-bottom: 1.35rem;
    }

    .hoja-movil__rotulo {
        margin: 0 0 .45rem .1rem;
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--ios-secundario);
    }

    /* Accesos rapidos en rejilla */
    .hoja-movil__accesos {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .6rem;
    }

    .hoja-movil__acceso {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: .45rem;
        padding: .85rem .4rem;
        border-radius: 14px;
        background: #fff;
        color: #1f2937;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
        transition: transform .12s ease, opacity .12s ease;
    }

    .hoja-movil__acceso:active {
        transform: scale(.96);
        opacity: .7;
    }

    .hoja-movil__acceso-icono {
        width: 2.1rem;
        height: 2.1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        background: rgba(27, 57, 106, .08);
    }

    .hoja-movil__acceso-icono img {
        width: 1.2rem;
        height: 1.2rem;
        object-fit: contain;
    }

    .hoja-movil__acceso-texto {
        font-size: .7rem;
        font-weight: 600;
        line-height: 1.25;
        color: #374151;
    }

    /* Lista agrupada estilo iOS */
    .hoja-movil__lista {
        list-style: none;
        margin: 0;
        padding: 0;
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
    }

    .hoja-movil__fila + .hoja-movil__fila > .hoja-movil__enlace {
        box-shadow: inset 0 .5px 0 rgba(60, 60, 67, .16);
    }

    .hoja-movil__enlace {
        width: 100%;
        border: 0;
        background: transparent;
        font: inherit;
        text-align: left;
        color: #111827;
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .78rem 1rem;
        min-height: 2.9rem;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .12s ease;
    }

    .hoja-movil__enlace:active {
        background: rgba(60, 60, 67, .09);
    }

    .hoja-movil__enlace--nivel2 {
        padding-left: 1.85rem;
    }

    .hoja-movil__enlace--nivel3 {
        padding-left: 2.65rem;
    }

    .hoja-movil__texto {
        flex: 1 1 auto;
        min-width: 0;
        font-size: .95rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .hoja-movil__enlace--nivel2 .hoja-movil__texto,
    .hoja-movil__enlace--nivel3 .hoja-movil__texto {
        font-size: .9rem;
        color: #374151;
    }

    .hoja-movil__chevron,
    .hoja-movil__chevron-fijo,
    .hoja-movil__externo {
        flex: 0 0 auto;
        width: 1.05rem;
        height: 1.05rem;
        stroke: #b6b8bf;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .hoja-movil__chevron {
        stroke: var(--azul-tecnm);
        transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    }

    .hoja-movil__enlace--grupo[aria-expanded="true"] .hoja-movil__chevron {
        transform: rotate(-180deg);
    }

    .hoja-movil__enlace--grupo[aria-expanded="true"] .hoja-movil__texto {
        font-weight: 600;
        color: var(--azul-tecnm);
    }

    .hoja-movil__sublista {
        list-style: none;
        margin: 0;
        padding: 0;
        background: rgba(60, 60, 67, .035);
        box-shadow: inset 0 .5px 0 rgba(60, 60, 67, .16);
    }

    .hoja-movil__sublista[hidden] {
        display: none;
    }

    .hoja-movil__sublista .hoja-movil__fila + .hoja-movil__fila > .hoja-movil__enlace {
        box-shadow: inset 0 .5px 0 rgba(60, 60, 67, .12);
    }

    /* Idiomas y accesibilidad */
    .hoja-movil__idiomas {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .5rem;
    }

    .hoja-movil__idioma {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .32rem;
        padding: .65rem .25rem;
        border-radius: 13px;
        background: #fff;
        color: #374151;
        font-size: .67rem;
        font-weight: 600;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }

    .hoja-movil__idioma:active {
        transform: scale(.96);
        opacity: .7;
    }

    .hoja-movil__idioma img {
        width: 1.35rem;
        height: 1.35rem;
        object-fit: contain;
    }

    .hoja-movil__accesibilidad {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .5rem;
    }

    .hoja-movil__tecla {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .22rem;
        min-height: 3rem;
        padding: .5rem .3rem;
        border: 0;
        border-radius: 13px;
        background: #fff;
        color: var(--azul-tecnm);
        font-size: .78rem;
        font-weight: 700;
        line-height: 1.1;
        -webkit-tap-highlight-color: transparent;
    }

    .hoja-movil__tecla span {
        font-size: .64rem;
        font-weight: 600;
        color: #4b5563;
    }

    .hoja-movil__tecla:active {
        transform: scale(.95);
        opacity: .7;
    }

    /* Acceso al panel */
    .hoja-movil__panel-acceso {
        display: flex;
        align-items: center;
        gap: .8rem;
        padding: .85rem 1rem;
        border-radius: 14px;
        background: #fff;
        color: #111827;
        -webkit-tap-highlight-color: transparent;
    }

    .hoja-movil__panel-acceso:active {
        background: rgba(60, 60, 67, .09);
    }

    .hoja-movil__panel-icono {
        flex: 0 0 auto;
        width: 2.15rem;
        height: 2.15rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--azul-tecnm);
    }

    .hoja-movil__panel-icono svg {
        width: 1.2rem;
        height: 1.2rem;
        stroke: #fff;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

    .hoja-movil__panel-texto {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .hoja-movil__panel-texto strong {
        font-size: .95rem;
        font-weight: 600;
    }

    .hoja-movil__panel-texto small {
        font-size: .75rem;
        color: var(--ios-secundario);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hoja-movil__pie {
        margin: 0;
        text-align: center;
        font-size: .72rem;
        line-height: 1.4;
        color: #9aa0aa;
    }

    @media (prefers-reduced-motion: reduce) {
        .tabbar,
        .hoja-movil__panel,
        .hoja-movil__velo,
        .hoja-movil__chevron {
            transition-duration: .01ms;
        }
    }
}

/* En tableta las pestanas se agrupan al centro, como en iPadOS, en vez de
   estirarse de borde a borde. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    :root {
        --tabbar-alto: 3.6rem;
    }

    .tabbar {
        justify-content: center;
    }

    .tabbar__item {
        flex: 0 1 7.5rem;
    }

    /* Centrada, sin tocar el transform: el arrastre tactil lo usa. */
    .hoja-movil__panel {
        width: min(100%, 34rem);
        margin: 0 auto;
        border-radius: 16px 16px 0 0;
    }

    /* Documentos y sitios de interes no tenian reglas en este tramo, asi que
       heredaban las medidas de escritorio y quedaban desproporcionados. Estos
       valores son el escalon intermedio entre el tramo ancho y el de movil. */
    .rejilla-enlaces {
        grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
        gap: .85rem;
    }

    .rejilla-enlaces a {
        min-height: 118px;
        padding: .8rem;
    }

    .rejilla-enlaces img {
        max-height: 66px;
    }

    .carrusel-marquee__item--interes {
        width: min(11rem, 26vw);
    }

    .carrusel-marquee--interes .carrusel-marquee__item--interes > a {
        min-height: 130px;
        height: 130px;
        padding: .85rem;
    }

    .carrusel-marquee--interes .carrusel-marquee__item--interes img {
        max-height: 70px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --tabbar-alto: 3.3rem;
    }

    .portal-preloader__eyebrow {
        letter-spacing: .08em;
    }

    .portal-preloader__title {
        font-size: 1.05rem;
    }

    .portal-preloader__subtitle {
        font-size: .85rem;
    }

    .barra-gobmx .enlaces-gobmx a {
        padding: .35rem .5rem;
        font-size: .8rem;
    }

    .cabecera .accesos {
        justify-content: center;
        flex-wrap: wrap;
        gap: .18rem;
    }

    .cabecera {
        padding: .65rem .7rem;
    }

    .cabecera .plecas {
        justify-content: center;
        width: 100%;
        gap: .35rem;
    }

    .cabecera .plecas img {
        max-height: 26px;
        margin-right: 0;
        max-width: 100%;
        object-fit: contain;
    }

    .bloque {
        margin: 1.35rem auto;
        padding: 1.05rem .2rem 1.35rem;
    }

    .nota .titulo-nota {
        font-size: 1.45rem;
        line-height: 1.2;
    }

    .nota .cuerpo-nota {
        font-size: .98rem;
        line-height: 1.65;
    }

    .pie-institucional,
    .pie-gobmx {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .pie-institucional iframe {
        min-height: 220px;
    }

    .rejilla-avisos,
    .rejilla-noticias,
    .galeria {
        grid-template-columns: 1fr;
        gap: .9rem;
    }

    /* Los documentos institucionales son logotipos, no tarjetas con texto: a
       una sola columna cada uno se comia el ancho entero de la pantalla. */
    .rejilla-enlaces {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        gap: .7rem;
    }

    .rejilla-enlaces a {
        min-height: 100px;
        padding: .65rem;
        border-radius: 13px;
    }

    .rejilla-enlaces img {
        max-height: 54px;
    }

    .carrusel-interes {
        padding-bottom: 2.5rem;
    }

    .carrusel-interes__encabezado {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 1rem;
    }

    .carrusel-interes__nav {
        justify-content: center;
    }

    .carrusel-interes__boton {
        width: 2.45rem;
        height: 2.45rem;
    }

    .rejilla-interes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem;
    }

    .rejilla-interes a {
        min-height: 132px;
    }

    .carrusel-marquee__encabezado {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 1rem;
    }

    .carrusel-marquee__subtitulo {
        font-size: .88rem;
    }

    .carrusel-marquee__grupo {
        gap: .8rem;
        padding-right: .8rem;
    }

    .carrusel-marquee__item--aviso {
        width: min(19rem, 84vw);
    }

    .carrusel-marquee__item--interes {
        width: min(9.5rem, 50vw);
    }

    .carrusel-marquee--interes .carrusel-marquee__track {
        animation-duration: 18s;
    }

    .carrusel-avisos {
        padding: 0 2.9rem 3rem;
    }

    .carrusel-avisos__slide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem;
    }

    .carrusel-avisos__item {
        width: 100%;
    }

    .carrusel-avisos__control {
        width: 2.45rem;
        height: 2.45rem;
    }

    .carrusel-avisos__control.carousel-control-prev {
        left: 0;
    }

    .carrusel-avisos__control.carousel-control-next {
        right: 0;
    }

    .carrusel-flip {
        display: block;
    }

    .carrusel-flip .carousel-item,
    .carrusel-flip .carousel-item.active,
    .carrusel-flip .carousel-item-start,
    .carrusel-flip .carousel-item-end,
    .carrusel-flip .carousel-item-next,
    .carrusel-flip .carousel-item-prev {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .carrusel-flip .carousel-item-next:not(.carousel-item-start),
    .carrusel-flip .active.carousel-item-end {
        transform: translateX(10%) rotateY(84deg) scale(.9);
        opacity: .18;
        filter: brightness(.82);
    }

    .carrusel-flip .carousel-item-prev:not(.carousel-item-end),
    .carrusel-flip .active.carousel-item-start {
        transform: translateX(-10%) rotateY(-84deg) scale(.9);
        opacity: .18;
        filter: brightness(.82);
    }

    .carrusel-flip .carousel-item.active,
    .carrusel-flip .carousel-item-next.carousel-item-start,
    .carrusel-flip .carousel-item-prev.carousel-item-end {
        transform: rotateY(0) scale(1);
        opacity: 1;
        filter: brightness(1);
    }

    .carrusel-flip .carousel-item.active .carrusel-flip__item {
        filter:
            drop-shadow(0 18px 28px rgba(11, 27, 52, .16))
            drop-shadow(14px 0 20px rgba(11, 27, 52, .06))
            drop-shadow(-14px 0 20px rgba(11, 27, 52, .06));
    }

    .carrusel-marquee--interes .carrusel-marquee__item--interes > a {
        min-height: 112px;
        height: 112px;
        padding: .7rem;
    }

    .carrusel-marquee--interes .carrusel-marquee__item--interes img {
        max-height: 58px;
    }

    .tarjeta-noticia {
        max-width: 100%;
        border-radius: 14px;
    }

    .tarjeta-noticia > a img {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .tarjeta-noticia .cuerpo {
        padding: .75rem .68rem .82rem;
    }

    .tarjeta-noticia h3 {
        font-size: .88rem;
        line-height: 1.35;
    }

    .tarjeta-noticia .fecha {
        font-size: .72rem;
    }

    .tabbar__icono {
        width: 1.55rem;
        height: 1.55rem;
    }

    .tabbar__etiqueta {
        font-size: .6rem;
    }

    .hoja-movil__panel {
        max-height: 86vh;
    }

    .hoja-movil__cuerpo {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .hoja-movil__encabezado {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .mascota-itesco {
        top: -28px;
        right: .75rem;
        width: 44px;
    }

    .mascota-itesco__burbuja {
        right: calc(100% - .1rem);
        bottom: 1.95rem;
        min-width: 92px;
        max-width: 116px;
        padding: .34rem .46rem;
        font-size: .56rem;
    }

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

    .adjuntos-nota__meta {
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .carrusel-marquee__fade {
        width: 1.8rem;
    }

    .carrusel-marquee__grupo {
        gap: .6rem;
        padding-right: .6rem;
    }

    .carrusel-marquee__item--interes {
        width: min(8.35rem, 47vw);
    }

    .carrusel-marquee--interes .carrusel-marquee__item--interes > a {
        min-height: 98px;
        height: 98px;
        padding: .62rem;
    }

    .carrusel-marquee--interes .carrusel-marquee__item--interes img {
        max-height: 50px;
    }

    .carrusel-flip {
        padding: 0 2.35rem 2.8rem;
    }

    .carrusel-flip__item,
    .carrusel-flip__item--noticia {
        width: min(19rem, 100%);
    }

    .carrusel-flip__control {
        width: 2.2rem;
        height: 2.2rem;
    }

    .carrusel-avisos__slide {
        grid-template-columns: 1fr;
    }

    .barra-gobmx .container-fluid,
    .cabecera .container-fluid,
    .menu-principal .container-fluid,
    .pie-institucional .container-fluid,
    .pie-gobmx .container-fluid {
        padding-left: .7rem;
        padding-right: .7rem;
    }

    .titulo-seccion {
        font-size: 1.28rem;
    }

    .nota .titulo-nota {
        font-size: 1.28rem;
    }

    .tabbar__etiqueta {
        font-size: .56rem;
    }

    .tabbar__icono {
        width: 1.5rem;
        height: 1.5rem;
    }

    .hoja-movil__accesos {
        gap: .45rem;
    }

    .hoja-movil__acceso-texto {
        font-size: .66rem;
    }
}

/* En apaisado el alto util es escaso: la barra se compacta. */
@media (max-width: 1199.98px) and (max-height: 480px) and (orientation: landscape) {
    :root {
        --tabbar-alto: 2.75rem;
    }

    .tabbar__icono {
        width: 1.35rem;
        height: 1.35rem;
    }

    .tabbar__etiqueta {
        font-size: .55rem;
    }

    .hoja-movil__panel {
        max-height: 94vh;
    }
}