/* =========================================================
   Expo Profesiográfica 2026 Theme
   Archivo: expo2026.css
   Compatible: Bootstrap 4.5.3
   Fecha: 04:28 a. m. 12/01/2026
   ========================================================= */

/* ---------------------------
   1) Variables / Tokens
---------------------------- */
:root {
    --expo-bg-1: #062f25;
    --expo-bg-2: #05352a;
    --expo-bg-3: #064536;
    --expo-glass: rgba(255,255,255,.06);
    --expo-glass-2: rgba(255,255,255,.08);
    --expo-border: rgba(255,255,255,.10);
    --expo-text: rgba(255,255,255,.92);
    --expo-muted: rgba(255,255,255,.72);
    --expo-primary: #20d3a1; /* botón / acento */
    --expo-primary-2: #18b58c; /* hover */
    --expo-primary-3: #0c8f70; /* sombras */

    --expo-shadow: 0 18px 45px rgba(0,0,0,.35);
    --expo-shadow-soft: 0 10px 25px rgba(0,0,0,.25);
    --expo-radius-xl: 22px;
    --expo-radius-lg: 16px;
    --expo-nav-h: 70px;
}

/* ---------------------------
   2) Reset ligero / Base
---------------------------- */
html, body {
    height: 100%;
}

    body.expo-body {
        color: var(--expo-text);
        background: radial-gradient(1200px 600px at 50% 0%, rgba(32,211,161,.12) 0%, rgba(32,211,161,0) 50%), linear-gradient(180deg, var(--expo-bg-2), var(--expo-bg-1));
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
        overflow-x: hidden;
    }

/* Evita que el navbar fixed tape el ancla al hacer click */
[id] {
    scroll-margin-top: calc(var(--expo-nav-h) + 24px);
}

/* Links */
a {
    color: var(--expo-text);
}

    a:hover {
        color: var(--expo-primary);
        text-decoration: none;
    }

/* ---------------------------
   3) Navbar (sticky)
---------------------------- */
.expo-navbar {
    height: var(--expo-nav-h);
    background: linear-gradient(180deg, rgba(8,72,56,.95), rgba(6,48,38,.86));
    border-bottom: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .expo-navbar .navbar-brand {
        font-weight: 600;
        letter-spacing: .2px;
        opacity: .95;
    }

    .expo-navbar .nav-link {
        color: rgba(255,255,255,.85) !important;
        padding: .5rem .9rem;
        border-radius: 999px;
        transition: all .2s ease;
    }

        .expo-navbar .nav-link:hover {
            color: #fff !important;
            background: rgba(255,255,255,.06);
        }

.ipn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    border-radius: 12px;
    background: rgba(32,211,161,.18);
    border: 1px solid rgba(32,211,161,.25);
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    font-weight: 700;
}

/* Botón “Registrarse” del navbar */
.btn-expo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .48rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--expo-primary), var(--expo-primary-2));
    color: #053126 !important;
    font-weight: 700;
    border: 0;
    box-shadow: 0 12px 28px rgba(32,211,161,.22);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

    .btn-expo:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 16px 35px rgba(32,211,161,.28);
    }

/* ---------------------------
   4) Hero
---------------------------- */
.expo-hero {
    position: relative;
    min-height: calc(100vh - var(--expo-nav-h));
    padding-top: calc(var(--expo-nav-h) + 60px);
    padding-bottom: 90px;
    overflow: hidden;
}

    /* capa con gradientes extra */
    .expo-hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(700px 350px at 30% 20%, rgba(32,211,161,.12) 0%, rgba(32,211,161,0) 60%), radial-gradient(700px 350px at 70% 30%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%);
        pointer-events: none;
    }

/* Contenido arriba de partículas */
.hero-content {
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.88);
    font-weight: 600;
    letter-spacing: .3px;
    box-shadow: var(--expo-shadow-soft);
}

/* Logo grande del hero */
.hero-logo {
    display: block;
    max-width: 680px;
    width: 100%;
    margin: 22px auto 0 auto;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

/* Lema */
.hero-tagline {
    margin-top: 18px;
    font-size: 1.35rem;
    color: rgba(255,255,255,.82);
    text-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* ---------------------------
   5) Cards estilo “glass”
---------------------------- */
.expo-card {
    position: relative;
    background: var(--expo-glass);
    border: 1px solid var(--expo-border);
    border-radius: var(--expo-radius-xl);
    padding: 28px 26px;
    text-align: left;
    box-shadow: var(--expo-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    min-height: 120px;
}

    .expo-card:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(32,211,161,.10), rgba(255,255,255,0) 55%);
        opacity: .7;
        pointer-events: none;
    }

    .expo-card i {
        font-size: 1.35rem;
        color: rgba(32,211,161,.92);
        margin-right: 10px;
    }

    .expo-card h5 {
        margin: 0;
        font-weight: 700;
        font-size: 1.05rem;
        color: rgba(255,255,255,.92);
    }

    .expo-card p {
        margin: 6px 0 0 0;
        color: rgba(255,255,255,.75);
    }

    .expo-card:hover {
        transform: translateY(-3px);
        background: var(--expo-glass-2);
        box-shadow: 0 22px 55px rgba(0,0,0,.40);
    }

/* ---------------------------
   6) Secciones (Conoce la Expo, etc.)
---------------------------- */
.expo-section {
    position: relative;
    padding: 90px 0;
}

.expo-section-title {
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: .4px;
    text-align: center;
    margin-bottom: 12px;
}

.expo-section-subtitle {
    text-align: center;
    color: var(--expo-muted);
    max-width: 720px;
    margin: 0 auto 50px auto;
    line-height: 1.5;
}

/* Card grande estilo mockup (Sustentabilidad, Tecnología, Innovación) */
.expo-feature {
    background: var(--expo-glass);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--expo-radius-xl);
    padding: 30px 26px;
    box-shadow: var(--expo-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    transition: transform .2s ease, background .2s ease;
    height: 100%;
}

    .expo-feature:hover {
        transform: translateY(-4px);
        background: var(--expo-glass-2);
    }

    .expo-feature .icon {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(32,211,161,.18);
        border: 1px solid rgba(32,211,161,.25);
        box-shadow: 0 18px 45px rgba(0,0,0,.25);
        margin: 0 auto 14px auto;
    }

        .expo-feature .icon i {
            font-size: 1.45rem;
            color: rgba(255,255,255,.92);
        }

    .expo-feature h5 {
        text-align: center;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .expo-feature p {
        text-align: center;
        color: var(--expo-muted);
        margin: 0;
    }

/* ---------------------------
   7) Footer + Carrusel de escudos
---------------------------- */
.expo-footer {
    background: linear-gradient(180deg, rgba(6,48,38,1), rgba(5,40,32,1));
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 20px;
}

.footer-carousel {
    padding: 18px 0 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

    .footer-carousel .owl-carousel .item {
        padding: 10px 6px;
    }

        .footer-carousel .owl-carousel .item img {
            max-height: 46px;
            width: auto;
            opacity: .92;
            filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
            transition: transform .18s ease, opacity .18s ease;
        }

            .footer-carousel .owl-carousel .item img:hover {
                transform: translateY(-2px) scale(1.03);
                opacity: 1;
            }

.footer-bottom {
    padding: 18px 0;
    color: rgba(255,255,255,.75);
    text-align: center;
}

/* ---------------------------
   8) Animaciones de entrada (logo, lema, cards)
---------------------------- */
@keyframes expoFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    opacity: 0;
    animation: expoFadeUp .9s ease forwards;
}

.animate-in-delay {
    opacity: 0;
    animation: expoFadeUp .9s ease forwards;
    animation-delay: .22s;
}

.animate-card {
    opacity: 0;
    animation: expoFadeUp .9s ease forwards;
    animation-delay: .35s;
}

    .animate-card.delay {
        animation-delay: .50s;
    }

/* ---------------------------
   9) Partículas flotantes (CSS puro)
   (Sin JS: se generan con pseudo-elementos)
---------------------------- */
.particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

    /* 1er set */
    .particles:before,
    .particles:after {
        content: "";
        position: absolute;
        inset: -40px;
        background-repeat: no-repeat;
        opacity: .55;
    }

    /* Set A: puntitos */
    .particles:before {
        background-image: radial-gradient(circle, rgba(32,211,161,.22) 0 4px, transparent 5px), radial-gradient(circle, rgba(32,211,161,.18) 0 3px, transparent 4px), radial-gradient(circle, rgba(255,255,255,.10) 0 2px, transparent 3px), radial-gradient(circle, rgba(32,211,161,.14) 0 3px, transparent 4px), radial-gradient(circle, rgba(255,255,255,.08) 0 2px, transparent 3px);
        background-size: 14px 14px, 12px 12px, 10px 10px, 12px 12px, 10px 10px;
        background-position: 12% 35%, 28% 22%, 70% 30%, 84% 55%, 55% 72%;
        animation: floatA 8s ease-in-out infinite;
    }

    /* Set B: puntitos extra */
    .particles:after {
        background-image: radial-gradient(circle, rgba(32,211,161,.18) 0 3px, transparent 4px), radial-gradient(circle, rgba(255,255,255,.08) 0 2px, transparent 3px), radial-gradient(circle, rgba(32,211,161,.12) 0 3px, transparent 4px), radial-gradient(circle, rgba(255,255,255,.07) 0 2px, transparent 3px);
        background-size: 12px 12px, 10px 10px, 12px 12px, 10px 10px;
        background-position: 18% 68%, 40% 58%, 78% 22%, 90% 40%;
        animation: floatB 10s ease-in-out infinite;
    }

@keyframes floatA {
    0% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(0,-18px,0);
    }

    100% {
        transform: translate3d(0,0,0);
    }
}

@keyframes floatB {
    0% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(0,14px,0);
    }

    100% {
        transform: translate3d(0,0,0);
    }
}

/* ---------------------------
   10) Ajustes Responsive
---------------------------- */
@media (max-width: 992px) {
    .expo-section-title {
        font-size: 2.2rem;
    }

    .hero-tagline {
        font-size: 1.15rem;
    }
}

@media (max-width: 576px) {
    .expo-hero {
        padding-top: calc(var(--expo-nav-h) + 38px);
        padding-bottom: 70px;
    }

    .hero-logo {
        max-width: 95%;
    }

    .expo-card {
        padding: 22px 18px;
    }
}

/* ---------------------------
   11) Compatibilidad con formularios Bootstrap
   (para tu Admin mockup: inputs oscuros)
---------------------------- */
.expo-form .form-control,
.expo-form .custom-select {
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.90);
    border-radius: 12px;
}

    .expo-form .form-control:focus,
    .expo-form .custom-select:focus {
        background: rgba(0,0,0,.22);
        border-color: rgba(32,211,161,.45);
        box-shadow: 0 0 0 .2rem rgba(32,211,161,.12);
        color: #fff;
    }

.expo-form label {
    color: rgba(255,255,255,.85);
    font-weight: 600;
}

.expo-form .btn {
    border-radius: 999px;
    font-weight: 700;
}

.expo-btn-dark {
    background: rgba(0,0,0,.15);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.88);
}

    .expo-btn-dark:hover {
        background: rgba(0,0,0,.22);
        color: #fff;
    }


/* CONTENEDOR PRINCIPAL */
.expo-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding-top: 22px;
    color: rgba(255,255,255,.85);
}

/* IZQUIERDA */
.expo-footer-left {
    display: flex;
    align-items: center;
    gap: 42px; /* separación entre IPN y SEP */
    white-space: nowrap;
}

/* BLOQUE IPN / SEP */
.expo-footer-org {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.05rem;
    font-weight: 500;
}

/* CÍRCULO CON IMAGEN */
.expo-footer-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: contain;
    padding: 10px;
    background: rgba(32,211,161,.22);
    border: 1px solid rgba(32,211,161,.35);
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

/* DERECHA */
.expo-footer-right {
    text-align: right;
    white-space: nowrap;
    font-size: .95rem;
}

    .expo-footer-right span {
        color: rgba(32,211,161,.85);
    }

/* RESPONSIVE */
@media (max-width: 992px) {
    .expo-footer-circle {
        width: 46px;
        height: 46px;
    }

    .expo-footer-org {
        font-size: .95rem;
    }
}


/*********************************/
/* ===== Mini Stats (Admin) ===== */
.expo-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0,0,0,.14);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.20);
    min-height: 66px;
}

.expo-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(32,211,161,.18);
    border: 1px solid rgba(32,211,161,.22);
    color: rgba(255,255,255,.92);
    flex: 0 0 44px;
}

.expo-stat-label {
    font-size: .78rem;
    letter-spacing: .2px;
    color: rgba(255,255,255,.72);
    line-height: 1.1;
}

.expo-stat-value {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: rgba(255,255,255,.92);
    line-height: 1.15;
}

/* Destacar Total */
.expo-stat-total {
    background: rgba(32,211,161,.12);
    border-color: rgba(32,211,161,.22);
}

    .expo-stat-total .expo-stat-value {
        color: rgba(32,211,161,.95);
    }

/*********************************/

.expo-admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    margin-bottom: 14px;
    color: #e9fff6;
}

.expo-admin-title {
    font-size: 18px;
    font-weight: 500;
}

.expo-admin-menu {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.expo-admin-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(255,255,255,.95);
    color: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.25);
    text-decoration: none !important;
}

    .expo-admin-tab.active {
        background: rgba(0, 185, 140, .75);
        color: #fff !important;
        box-shadow: 0 0 0 3px rgba(255,255,255,.15) inset;
    }

.expo-admin-shell {
    border-radius: 14px;
    background: rgba(0,0,0,.12);
    padding: 22px;
}

.expo-admin-h {
    color: #eafff6;
    font-weight: 600;
}

.expo-admin-card {
    border-radius: 14px;
    background: rgba(0,0,0,.18);
    padding: 22px;
    border: 1px solid rgba(255,255,255,.06);
}

.expo-admin-card-h {
    color: #eafff6;
    font-size: 20px;
    font-weight: 600;
}

.expo-admin-card-p {
    color: rgba(214,255,242,.85);
    margin-top: 8px;
}

.expo-admin-form {
    border-radius: 14px;
    background: rgba(0,0,0,.18);
    padding: 22px;
    border: 1px solid rgba(255,255,255,.06);
}

.expo-search {
    display: flex;
    align-items: center;
    border-radius: 12px;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.06);
    padding: 10px 12px;
    color: rgba(214,255,242,.85);
}

    .expo-search i {
        margin-right: 10px;
        opacity: .9;
    }

.expo-search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: rgba(214,255,242,.95) !important;
    width: 100%;
}

.expo-table-wrap {
    border-radius: 14px;
    overflow: auto;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.06);
}

.expo-table {
    color: rgba(214,255,242,.95);
}

    .expo-table thead th {
        background: rgba(0,0,0,.18);
        color: rgba(214,255,242,.9);
        border-color: rgba(255,255,255,.06);
    }

    .expo-table td {
        border-color: rgba(255,255,255,.06);
    }

.expo-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0,185,140,.22);
    border: 1px solid rgba(0,185,140,.25);
    color: rgba(214,255,242,.95);
    font-size: .85rem;
}

.expo-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.10);
}

.expo-input {
    background: rgba(0,0,0,.18) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: rgba(214,255,242,.95) !important;
    border-radius: 10px !important;
}

.expo-box {
    border-radius: 14px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(214,255,242,.90);
}