/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

/* Variables y Tokens */
:root {
    --black: #080808;
    --black-soft: #111111;
    --black-card: #161616;
    --gold: #d4a840;
    --gold-light: #e6bf68;
    --gold-dim: rgba(212, 168, 64, 0.15);
    --gold-border: rgba(212, 168, 64, 0.3);
    --gold-solid: rgba(212, 168, 64, 0.85);
    --white: #f5f0e8;
    --muted: #888070;
    --gap-sm: 16px;
    --gap-md: 28px;
    --gap-lg: 64px;
    --radius: 14px;
    --radius-sm: 8px;
    --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reset y Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background: var(--black);
}

body {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    background: var(--black);
    color: var(--white);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    scrollbar-width: none;
}

body::-webkit-scrollbar {
    display: none;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    line-height: 1.15;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Ayudas de Maquetación */
.container-narrow {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gap-sm);
}

.section-header {
    text-align: center;
    margin-bottom: var(--gap-md);
}

.section-header h2 {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    color: var(--white);
    display: inline-block;
    position: relative;
    padding-bottom: 14px;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 2px;
    background: var(--gold);
}

/* Sección Hero */
.hero {
    position: relative;
    height: 100vh;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* centra verticalmente TODO */
    gap: 0;
    overflow: hidden;
    background:
        linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.55)),
        url('graduation_hero_bg_1776119002456.png') center / cover no-repeat fixed;
}

/* ── Esquinas decorativas ── */
.corner {
    position: absolute;
    width: 80px;
    height: 80px;
    border-color: var(--gold-solid);
    border-style: solid;
    pointer-events: none;
    z-index: 1;
}

.corner--tr {
    top: 22px;
    right: 22px;
    border-width: 1.5px 1.5px 0 0;
}

.corner--bl {
    bottom: 22px;
    left: 22px;
    border-width: 0 0 1.5px 1.5px;
}

/* ── Barra de luz inferior ── */
.hero-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
    animation: barPulse 4s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes barPulse {
    0% {
        opacity: 0.35;
    }

    100% {
        opacity: 1;
    }
}

/* ── Brillo radial ── */
.hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 55%, rgba(212, 168, 64, 0.26) 0%, transparent 65%),
        radial-gradient(circle at 10% 90%, rgba(180, 130, 40, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 90% 10%, rgba(180, 130, 40, 0.08) 0%, transparent 40%);
    pointer-events: none;
}

/* ── Partículas ── */
.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hero-particles span {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    background: rgba(212, 168, 64, 0.7);
    animation: particleFloat linear infinite;
    opacity: 0;
}

.hero-particles span:nth-child(1) {
    width: 3px;
    height: 3px;
    left: 12%;
    animation-duration: 9s;
    animation-delay: 0s;
}

.hero-particles span:nth-child(2) {
    width: 2px;
    height: 2px;
    left: 25%;
    animation-duration: 12s;
    animation-delay: 1.5s;
}

.hero-particles span:nth-child(3) {
    width: 4px;
    height: 4px;
    left: 38%;
    animation-duration: 8s;
    animation-delay: 3s;
}

.hero-particles span:nth-child(4) {
    width: 2px;
    height: 2px;
    left: 52%;
    animation-duration: 14s;
    animation-delay: 0.8s;
}

.hero-particles span:nth-child(5) {
    width: 3px;
    height: 3px;
    left: 65%;
    animation-duration: 10s;
    animation-delay: 2s;
}

.hero-particles span:nth-child(6) {
    width: 2px;
    height: 2px;
    left: 77%;
    animation-duration: 7s;
    animation-delay: 4s;
}

.hero-particles span:nth-child(7) {
    width: 3px;
    height: 3px;
    left: 88%;
    animation-duration: 11s;
    animation-delay: 1s;
}

.hero-particles span:nth-child(8) {
    width: 2px;
    height: 2px;
    left: 45%;
    animation-duration: 9s;
    animation-delay: 5s;
}

@keyframes particleFloat {
    0% {
        bottom: -10px;
        opacity: 0;
        transform: translateX(0);
    }

    10% {
        opacity: 0.8;
    }

    50% {
        transform: translateX(12px);
    }

    90% {
        opacity: 0.4;
    }

    100% {
        bottom: 105%;
        opacity: 0;
        transform: translateX(-8px);
    }
}

/* ── Eyebrow ── */
.hero-eyebrow {
    position: absolute;
    top: clamp(28px, 5vh, 52px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    z-index: 2;
}

.eyebrow-line {
    width: 40px;
    height: 0.5px;
    background: rgba(255, 255, 255, 0.3);
    display: block;
    flex-shrink: 0;
}

.eyebrow-text {
    font-size: 1rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

/* ── Bloque central ── */
.hero-center {
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 10;
    padding: 0 var(--gap-md);
}

/* ── Logo con anillo dorado ──
   La clave: background negro del mismo color que el fondo del hero
   más el borde dorado bien grueso para CUBRIR el borde blanco del PNG.
   outline añade un segundo anillo más tenue exterior.
*/
.hero-logo-wrap {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    flex-shrink: 0;
    /* Capas de fondo: negro sólido para tapar cualquier blanco del PNG */
    background: #000;
    /* Borde dorado grueso que tapa el contorno blanco del logo */
    border: 5px solid var(--gold-solid);
    /* Segundo anillo tenue exterior */
    outline: 1px solid rgba(212, 168, 64, 0.28);
    outline-offset: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.85) translateY(1.5%); /* Escala y ajuste de posición para centrar el sello perfectamente */
    display: block;
}
/* ── Divisor vertical ── */
.hero-divider-v {
    width: 1px;
    height: 200px;
    flex-shrink: 0;
    background: linear-gradient(to bottom,
            transparent,
            rgba(212, 168, 64, 0.7) 25%,
            rgba(212, 168, 64, 0.7) 75%,
            transparent);
}

/* ── Texto del hero ── */
.hero-text {
    text-align: left;
}

.hero-sup-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.hero-dash {
    width: 22px;
    height: 1px;
    background: rgba(212, 168, 64, 0.6);
    flex-shrink: 0;
    display: block;
}

.hero-sup {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(212, 168, 64, 0.85);
}

.hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: var(--white);
    margin: 0;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
}

.hero-rule {
    width: 55px;
    height: 1.5px;
    background: var(--gold);
    margin: 14px 0;
}

.hero-promo {
    margin: 0 0 6px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--gold);
}

.hero-date {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.5);
}

/* ── Hero responsive ── */
@media (max-width: 768px) {
    .hero-eyebrow {
        display: none;
    }

    .hero-center {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        text-align: center;
    }

    .hero-divider-v {
        display: none;
    }

    .hero-logo-wrap {
        width: 170px;
        height: 170px;
        border-width: 4px;
    }

    .hero-text {
        text-align: center;
    }

    .hero-sup-line {
        justify-content: center;
    }

    .hero-rule {
        margin: 14px auto;
    }

    .hero-title {
        font-size: clamp(1.7rem, 7vw, 2.4rem);
    }
}

/* Títulos de Sección */
.section-title {
    text-align: center;
    margin-bottom: var(--gap-md);
}

.section-title h2 {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    color: var(--white);
    display: inline-block;
    position: relative;
    padding-bottom: 14px;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 2px;
    background: var(--gold);
}

/* Sección Rector */
.section-rector {
    padding: var(--gap-lg) 0;
    background: var(--black-soft);
}

/* Vista previa de discurso */
.speech-preview {
    background: var(--black-card);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius);
    padding: clamp(24px, 5vw, 48px);
    text-align: center;
}

.speech-preview-quote {
    font-size: 4rem;
    color: var(--gold);
    opacity: 0.35;
    line-height: 1;
    margin-bottom: 12px;
}

.speech-preview-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--white);
    opacity: 0.9;
    margin-bottom: 28px;
    line-height: 1.7;
}

.btn-gold {
    background: var(--gold);
    color: #080808;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    border: none;
    border-radius: 40px;
    padding: 13px 20px;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-block;
}

.btn-gold:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 168, 64, 0.35);
    color: #080808;
}

/* Sección Programa */
.section-programa {
    padding: var(--gap-lg) 0;
    background: var(--black);
}

/* Sección Video */
.section-video {
    padding: var(--gap-lg) 0;
    background: var(--black);
}

.video-frame {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gold-border);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* Sección Egresados */
.section-graduates {
    padding: var(--gap-lg) 0;
    background: var(--black);
}

.graduates-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.graduates-group {
    background: var(--black-card);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    padding: 32px 40px;
    transition: border-color var(--transition);
}

.graduates-group:hover {
    border-color: rgba(212, 168, 64, 0.55);
}

.group-title {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gold);
    text-align: center;
    padding-top: 2rem;
    padding-bottom: var(--gap-sm);
    margin-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--gold-border);
}

.graduates-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.graduate-card {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: all var(--transition);
    cursor: default;
}

.graduate-card:hover {
    background: var(--gold-dim);
    border-color: var(--gold-border);
}

.grad-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--white);
    opacity: 0.88;
    margin: 0;
    text-align: center;
    letter-spacing: 0.4px;
}

/* Pie de Página */
.site-footer {
    background: #000;
    border-top: 1px solid var(--gold-border);
    padding: var(--gap-lg) 0 var(--gap-md);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-md);
    padding-bottom: var(--gap-md);
}

.footer-col h5 {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 0.65rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.footer-col p,
.footer-col a {
    font-size: 0.85rem;
    color: var(--muted);
    display: block;
    margin-bottom: 6px;
    transition: color var(--transition);
}

.footer-col a:hover {
    color: var(--gold);
}

.footer-thanks {
    font-style: italic;
    line-height: 1.7;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: var(--gap-sm);
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted);
    opacity: 0.55;
}

/* Menú Flotante (FAB) */
.fab-container {
    position: fixed;
    bottom: 28px;
    right: 24px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    transition: opacity 0.3s ease;
}

body.modal-open .fab-container {
    opacity: 0;
    pointer-events: none;
}

/* Panel */
.fab-panel {
    display: flex;
    flex-direction: column;
    background: var(--black-soft);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius);
    overflow: hidden;
    min-width: 200px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform-origin: bottom right;
}

.fab-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.fab-nav-links {
    display: flex;
    flex-direction: column;
}

.fab-link {
    display: block;
    width: 100%;
    padding: 13px 20px;
    font-family: 'Jost', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--white);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.fab-link:last-child {
    border-bottom: none;
}

.fab-link:hover,
.fab-link:active {
    background: var(--gold-dim);
    color: var(--gold-light);
}

/* Flechas travel */
.fab-travel {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.fab-travel-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--black-soft);
    border: 2px solid var(--gold);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.fab-travel-btn:active {
    transform: scale(0.9);
    background: var(--gold-dim);
}

/* Botón principal */
.fab-trigger {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--black-soft);
    border: 2px solid var(--gold);
    color: var(--gold);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.fab-trigger:hover {
    transform: scale(1.07);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(212, 168, 64, 0.12);
}

.fab-trigger:active {
    transform: scale(0.95);
}

.fab-label {
    font-family: 'Jost', sans-serif;
    font-size: 0.48rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--gold);
    line-height: 1;
    margin-top: 24px;
    transition: opacity 0.15s ease;
}

.fab-icon {
    position: absolute;
    top: 13px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.fab-icon--close {
    opacity: 0;
    transform: rotate(-90deg);
}

.fab-trigger.is-open .fab-icon--open {
    opacity: 0;
    transform: rotate(90deg);
}

.fab-trigger.is-open .fab-icon--close {
    opacity: 1;
    transform: rotate(0deg);
}

.fab-trigger.is-open .fab-label {
    opacity: 0;
}

/* Estilos de Modales */
.modal-dark {
    background: var(--black-soft) !important;
    border: 1px solid var(--gold-border) !important;
    border-radius: var(--radius) !important;
    color: var(--white);
}

.modal-header--gradient {
    background: linear-gradient(90deg, #111 0%, rgba(212, 168, 64, 0.35) 100%) !important;
    border-bottom: 1px solid var(--gold-border) !important;
    padding: 18px 24px 16px !important;
}

.modal-dark .modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.5px;
}

.modal-dark .modal-body {
    padding: 28px 32px;
    color: var(--white);
}

.modal-dark .modal-footer {
    border-top: 1px solid var(--gold-border) !important;
    padding: 14px 24px;
    justify-content: center;
    background: transparent !important;
}

/* Logo del modal rector */
.modal-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 50%;
    border: 2px solid var(--gold-solid);
    background: #000;
}

/* Textos del modal */
.modal-lead {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--white);
    margin-bottom: 16px;
    line-height: 1.75;
}

.modal-body-text {
    font-size: 0.9rem;
    color: rgba(245, 240, 232, 0.72);
    margin-bottom: 14px;
    line-height: 1.8;
}

.modal-signature {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--gold-border);
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-signature strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: var(--white);
}

.modal-signature span {
    font-size: 0.8rem;
    color: var(--muted);
}

/* Botón cerrar */
.btn-modal-close {
    background: transparent;
    border: 1px solid var(--gold-border);
    color: var(--gold);
    padding: 9px 32px;
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    border-radius: 40px;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-modal-close:hover {
    background: var(--gold-dim);
    border-color: var(--gold);
}

/* Tarjetas del Programa (Modal) */
.programa-grid {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}

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

.programa-grid--2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 66.6%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.programa-card {
    background: #000;
    border: 2px solid rgba(212, 168, 64, 0.5);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all var(--transition);
}

.programa-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(212, 168, 64, 0.15);
    border-color: var(--gold);
}

.programa-card-top {
    border-bottom: 2px solid rgba(212, 168, 64, 0.5);
    padding: 18px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.programa-step-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}

.programa-icon-ring {
    width: 50px;
    height: 50px;
    border: 1.5px solid rgba(212, 168, 64, 0.45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.programa-icon-ring svg {
    width: 24px;
    height: 24px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.programa-step-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}

.programa-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.programa-card-body p {
    color: rgba(245, 240, 232, 0.78);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.65;
    text-align: center;
    font-weight: 300;
}

.programa-card-foot {
    padding: 10px 16px;
    border-top: 1px solid rgba(212, 168, 64, 0.25);
    text-align: center;
}

.programa-card-foot span {
    font-size: 0.65rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(212, 168, 64, 0.42);
}

/* ── Programa responsive ── */
@media (max-width: 767px) {
    .programa-grid--3 {
        grid-template-columns: 1fr;
    }

    .programa-grid--2 {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    /* Tarjetas horizontales en mobile */
    .programa-card {
        flex-direction: row;
        align-items: stretch;
        min-height: unset;
    }

    .programa-card-top {
        width: 100px;
        flex-shrink: 0;
        border-bottom: none;
        border-right: 2px solid rgba(212, 168, 64, 0.5);
        padding: 14px 10px;
        justify-content: center;
    }

    .programa-step-num {
        font-size: 1.1rem;
    }

    .programa-icon-ring {
        width: 40px;
        height: 40px;
    }

    .programa-icon-ring svg {
        width: 18px;
        height: 18px;
    }

    .programa-step-title {
        font-size: 0.85rem;
    }

    .programa-card-body {
        padding: 12px 14px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .programa-card-body p {
        text-align: left;
        font-size: 0.82rem;
    }

    .programa-card-foot {
        display: none;
    }
}

/* Modales Responsivos */
@media (max-width: 767px) {
    .modal-dialog {
        margin: auto 12px !important;
        max-width: calc(100% - 24px) !important;
        width: auto !important;
    }

    .modal-content {
        border-radius: var(--radius) !important;
        max-height: 85svh;
    }

    .modal-dialog-scrollable .modal-content {
        max-height: 85svh;
    }

    .modal-dark .modal-body {
        padding: 20px 18px !important;
    }

    .fab-trigger {
        display: none !important;
    }

    .fab-travel {
        display: flex;
    }

    .graduates-list {
        grid-template-columns: 1fr !important;
    }

    .graduate-card {
        padding: 12px 14px;
    }
}

/* Animaciones de Entrada (Reveal) */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Responsividad Media Query (Tablet+) */
@media (min-width: 640px) {
    .container-narrow {
        padding: 0 var(--gap-md);
    }

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

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

@media (min-width: 1024px) {
    .graduates-list {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1.4fr 1fr;
    }
}