/* =========================================================
IMPORTAR FUENTE
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

/* =========================================================
ROOT
========================================================= */
:root{

    --azul:#0a1f44;
    --azul2:#163d7a;

    --celeste:#00c2ff;
    --celeste2:#009fd1;

    --blanco:#ffffff;

    --gris:#555;
    --gris-claro:#f5f7fa;

    --shadow:
    0 15px 35px rgba(0,0,0,.08);

    --radius:28px;
}

/* =========================================================
HTML
========================================================= */
html{
    scroll-behavior:smooth;
}

/* =========================================================
BODY
========================================================= */
body{

    font-family:'Poppins',sans-serif;

    min-height:100vh;

    display:flex;
    flex-direction:column;

    overflow-x:hidden;

    position:relative;

    background:
    linear-gradient(
    rgba(255,255,255,.90),
    rgba(255,255,255,.90)
    ),
    url('../img/fondo.jpeg');

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    color:#222;
}

body > *{
    position:relative;
    z-index:2;
}

.container{
    width:90%;
    max-width:1300px;
    margin:auto;
}

main{
    flex:1;
    padding-top:100px;
}

/* =========================================================
HEADER
========================================================= */
.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:18px 0;

    z-index:9999;

    transition:.4s ease;

    background:
    rgba(10,31,68,.35);

    backdrop-filter:blur(8px);
}

.header.scrolled{

    background:
    rgba(10,31,68,.96);

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

.nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;
}

.logo-area{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;
}

.logo-area img{

    width:65px;
    height:65px;

    object-fit:contain;

    background:#fff;

    border-radius:18px;

    padding:5px;
}

.logo-text h1{

    color:#fff;

    font-size:1.5rem;

    font-weight:700;

    line-height:1.2;
}

.logo-text span{

    color:#d7e6ff;

    font-size:.9rem;
}

/* =========================================================
MENU
========================================================= */
.menu{

    display:flex;

    align-items:center;

    gap:10px;
}

.menu a{

    color:#fff;

    text-decoration:none;

    padding:10px 14px;

    border-radius:12px;

    transition:.3s ease;

    position:relative;

    font-weight:500;
}

.menu a:hover{

    background:
    rgba(255,255,255,.08);
}

.menu a::after{

    content:"";

    position:absolute;

    left:12px;
    bottom:6px;

    width:0;

    height:2px;

    background:var(--celeste);

    transition:.3s;
}

.menu a:hover::after{

    width:calc(100% - 24px);
}

/* =========================================================
DROPDOWN
========================================================= */
.dropdown{
    position:relative;
}

.dropdown-content{

    position:absolute;

    top:55px;
    left:0;

    min-width:240px;

    background:
    rgba(10,31,68,.98);

    border-radius:18px;

    overflow:hidden;

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:.35s ease;

    box-shadow:
    0 15px 30px rgba(0,0,0,.25);
}

.dropdown-content a{

    display:block;

    margin:0;

    padding:16px 22px;

    border-bottom:
    1px solid rgba(255,255,255,.05);
}

.dropdown-content a:hover{
    background:var(--celeste);
}

.dropdown:hover .dropdown-content{

    opacity:1;
    visibility:visible;

    transform:translateY(0);
}

/* =========================================================
CARRUSEL
========================================================= */
.carousel{

    width:100%;
    height:100vh;

    min-height:750px;

    position:relative;

    overflow:hidden;

    border-radius:
    0 0 40px 40px;
}

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity 1.2s ease;
}

.slide.active{

    opacity:1;

    z-index:2;
}

.slide::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.45)
    );

    z-index:1;
}

.slide img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;
}

.overlay{

    position:absolute;

    top:50%;
    left:50%;

    transform:
    translate(-50%,-50%);

    z-index:3;

    text-align:center;

    width:90%;
    max-width:900px;

    color:#fff;
}

.overlay h2{

    font-size:4.8rem;

    line-height:1.1;

    margin-bottom:25px;

    font-weight:800;

    text-shadow:
    0 8px 25px rgba(0,0,0,.35);
}

.overlay p{

    font-size:1.3rem;

    line-height:1.8;

    margin-bottom:30px;
}

/* =========================================================
TITULOS INTERNOS LIMPIOS Y PEQUEÑOS
========================================================= */
.page-top,
.overlay-page,
.contacto-top{

    width:100%;

    padding:
    135px 20px 35px;

    text-align:center;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    position:relative;

    background:transparent;
}

.page-top::before,
.overlay-page::before,
.contacto-top::before{
    display:none;
}

.page-top .container,
.overlay-page .container,
.contacto-top .container{

    max-width:900px;

    margin:auto;
}

.page-top h1,
.overlay-page h1,
.contacto-top h1{

    font-size:2.3rem;

    font-weight:800;

    color:var(--azul);

    margin-bottom:12px;

    line-height:1.25;

    text-align:center;

    max-width:900px;

    text-shadow:none;
}

.page-top p,
.overlay-page p,
.contacto-top p{

    max-width:750px;

    margin:auto;

    color:var(--gris);

    line-height:1.8;

    font-size:1rem;

    text-align:center;
}

/* =========================================================
SECCIONES
========================================================= */
.admisiones,
.institucional,
.contador,
.filosofia,
.oferta-intro,
.oferta-section,
.especiales,
.talleres,
.niveles,
.nosotros,
.contacto-section,
.inscripcion-section,
.documentacion-section,
.noticias-section,
.colaboradores-section{

    padding:100px 0;
}

.titulo-seccion{

    text-align:center;

    font-size:2.7rem;

    color:var(--azul);

    margin-bottom:25px;

    font-weight:800;
}

/* =========================================================
TEXTOS GENERALES
========================================================= */
.texto-oferta,
.section-texto{

    max-width:950px;

    margin:auto;

    text-align:center;

    line-height:1.9;

    color:var(--gris);

    font-size:1.05rem;
}

.section-header{

    text-align:center;

    margin-bottom:60px;
}

/* =========================================================
NOSOTROS
========================================================= */
.nosotros-header{
    text-align:center;
    margin-bottom:60px;
}

.subtitulo{
    display:inline-block;
    background:rgba(0,194,255,.12);
    color:var(--azul2);
    padding:10px 18px;
    border-radius:50px;
    font-weight:600;
    margin-bottom:20px;
}

.nosotros-header h2{
    font-size:2.7rem;
    color:var(--azul);
    margin-bottom:25px;
    line-height:1.3;
}

.nosotros-header p{
    max-width:850px;
    margin:auto;
    line-height:1.9;
    color:var(--gris);
}

.nosotros-grid,
.especial-grid,
.taller-grid,
.niveles-grid,
.noticias-grid,
.colaboradores-grid,
.filo-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;
}

.card,
.especial-card,
.taller-card,
.nosotros-card,
.filo-card,
.colaborador-card,
.noticia-card,
.oferta-card-full,
.filo-box{

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

    border-radius:30px;

    box-shadow:var(--shadow);

    transition:.35s ease;
}

.card:hover,
.especial-card:hover,
.taller-card:hover,
.nosotros-card:hover,
.filo-card:hover,
.colaborador-card:hover,
.noticia-card:hover,
.filo-box:hover{

    transform:translateY(-8px);
}

.nosotros-card,
.especial-card,
.taller-card,
.filo-card,
.colaborador-card,
.noticia-info,
.filo-box,
.oferta-card-full{

    padding:35px;
}

.icono-nosotros{
    font-size:3rem;
    margin-bottom:20px;
}

.nosotros-card h3,
.especial-card h3,
.taller-card h3,
.filo-card h3,
.filo-box h3,
.oferta-card-full h2{

    color:var(--azul);

    margin-bottom:18px;
}

.nosotros-card p,
.especial-card p,
.taller-card p,
.filo-card p,
.filo-box p,
.oferta-card-full p,
.texto-oferta,
.section-texto{

    line-height:1.9;

    color:var(--gris);
}

.filosofia-extra{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin-top:50px;
}

.nivel-btn,
.btn,
.btn-admision,
.btn-contacto,
.btn-noticia{

    display:inline-flex;

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

    background:
    linear-gradient(
    135deg,
    var(--celeste),
    var(--celeste2)
    );

    color:#fff;

    text-decoration:none;

    border:none;

    padding:16px 30px;

    border-radius:18px;

    font-weight:600;

    transition:.35s ease;

    cursor:pointer;
}

.nivel-btn:hover,
.btn:hover,
.btn-admision:hover,
.btn-contacto:hover,
.btn-noticia:hover{

    transform:translateY(-5px);
}

/* =========================================================
CONTACTO
========================================================= */
.contacto-grid{

    display:grid;

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

    gap:35px;

    align-items:start;
}

.contacto-formulario,
.contacto-mapa{

    background:#fff;

    padding:40px;

    border-radius:30px;

    box-shadow:var(--shadow);
}

.contacto-formulario h2,
.contacto-mapa h2{

    color:var(--azul);

    margin-bottom:30px;

    font-size:2rem;
}

.input-group{

    position:relative;

    margin-bottom:28px;
}

.input-group input,
.input-group textarea{

    width:100%;

    padding:18px 20px;

    border:
    2px solid #e3e8f0;

    border-radius:18px;

    outline:none;

    font-size:1rem;

    font-family:'Poppins',sans-serif;

    transition:.3s ease;

    background:#fff;
}

.input-group input:focus,
.input-group textarea:focus{

    border-color:var(--celeste);
}

.input-group label{

    position:absolute;

    left:18px;
    top:16px;

    background:#fff;

    padding:0 8px;

    color:#777;

    transition:.3s ease;

    pointer-events:none;
}

.input-group input:focus + label,
.input-group input:valid + label,
.input-group textarea:focus + label,
.input-group textarea:valid + label{

    top:-10px;

    font-size:.82rem;

    color:var(--celeste2);
}

.mapa-box{

    width:100%;

    height:320px;

    overflow:hidden;

    border-radius:24px;

    margin-bottom:30px;
}

.info-contacto{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.info-item{

    padding:20px;

    border-radius:20px;

    background:var(--gris-claro);
}

.info-item h3{

    color:var(--azul);

    margin-bottom:10px;
}

.info-item p{

    color:var(--gris);

    line-height:1.7;
}

/* =========================================================
NOTICIAS
========================================================= */
.noticia-img img,
.colaborador-img img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:30px 30px 0 0;
}

.categoria,
.section-badge{

    display:inline-block;

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

    color:var(--azul2);

    padding:8px 16px;

    border-radius:50px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:15px;
}

.noticia-card{

    overflow:hidden;

    cursor:pointer;
}

.noticia-card h3{

    color:var(--azul);

    margin-bottom:15px;
}

.noticia-card p{

    line-height:1.8;

    color:var(--gris);

    margin-bottom:20px;
}

.colaborador-info{

    padding:30px;
}

.colaborador-info h3{

    color:var(--azul);

    margin-bottom:10px;
}

.colaborador-info span{

    display:block;

    color:var(--celeste2);

    margin-bottom:15px;

    font-weight:600;
}

.colaborador-info p{

    color:var(--gris);

    line-height:1.8;
}

/* =========================================================
MODAL NOTICIAS
========================================================= */
.modal-noticia{

    position:fixed;

    inset:0;

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

    z-index:999999;

    display:none;

    justify-content:center;

    align-items:center;

    padding:30px;
}

.modal-contenido{

    background:#fff;

    width:100%;

    max-width:950px;

    border-radius:30px;

    overflow:hidden;

    position:relative;

    max-height:90vh;

    overflow-y:auto;
}

.cerrar-modal{

    position:absolute;

    top:18px;
    right:25px;

    font-size:2.5rem;

    color:#fff;

    cursor:pointer;

    z-index:5;
}

.contenido-noticia{

    display:none;
}

.contenido-noticia.active{

    display:block;
}

.contenido-noticia img{

    width:100%;

    height:380px;

    object-fit:cover;
}

.contenido-texto{

    padding:40px;
}

.contenido-texto h2{

    color:var(--azul);

    margin-bottom:20px;
}

.contenido-texto p{

    color:var(--gris);

    line-height:1.9;

    margin-bottom:20px;
}

/* =========================================================
MASCOTA
========================================================= */
.mascota{

    position:fixed;

    right:25px;
    bottom:25px;

    width:110px;

    z-index:999999;

    display:flex;

    flex-direction:column;

    align-items:flex-end;
}

.mascota img{

    width:100%;

    animation:flotar 3s ease-in-out infinite;
}

.globo{

    position:relative;

    background:#fff;

    width:240px;

    padding:15px 18px;

    border-radius:18px;

    margin-bottom:14px;

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

    opacity:0;

    transform:translateY(15px);

    transition:.35s ease;
}

.globo::after{

    content:"";

    position:absolute;

    bottom:-10px;
    right:25px;

    border-width:10px;

    border-style:solid;

    border-color:
    #fff transparent transparent transparent;
}

.mascota.show .globo{

    opacity:1;

    transform:translateY(0);
}

/* =========================================================
FOOTER
========================================================= */
.footer{

    background:
    linear-gradient(
    135deg,
    var(--azul),
    #08152e
    );

    padding:70px 0 25px;

    margin-top:80px;

    position:relative;

    overflow:hidden;
}

.footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at top right,
    rgba(0,194,255,.15),
    transparent 40%
    );
}

/* =========================================================
FOOTER COLUMNAS
========================================================= */

.footer-container{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:50px;

    align-items:flex-start;
}

.footer-col h3{

    color:#fff;

    margin-bottom:20px;

    font-size:1.3rem;
}

.footer-col ul{

    list-style:none;
}

.footer-col ul li{

    margin-bottom:14px;
}

.footer-col ul li a{

    color:rgba(255,255,255,.85);

    text-decoration:none;

    transition:.3s;
}

.footer-col ul li a:hover{

    color:#fff;

    padding-left:6px;
}

.footer-logo{

    text-align:center;
}

.footer-logo img{

    width:110px;

    background:#fff;

    border-radius:20px;

    padding:10px;

    margin-bottom:20px;
}

.footer-logo h2{

    color:#fff;

    margin-bottom:15px;
}

.footer-logo p{

    color:rgba(255,255,255,.85);

    line-height:1.8;
}

.footer-copy{

    margin-top:40px;

    padding-top:20px;

    border-top:
    1px solid rgba(255,255,255,.1);

    text-align:center;
}

.footer-copy p{

    color:rgba(255,255,255,.75);
}

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

@media(max-width:768px){

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;
    }

    .footer-col ul li a:hover{

        padding-left:0;
    }
}
/* =========================================================
RESPONSIVE FOOTER
========================================================= */
@media(max-width:992px){

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

    .footer-logo{
        grid-column:span 2;
    }
}

@media(max-width:768px){

    .footer{
        padding-top:55px;
    }

    .footer-container{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;
    }

    .footer-logo{
        grid-column:span 1;
    }

    .footer-col h3::after{

        left:50%;

        transform:translateX(-50%);
    }

    .footer-col ul li a{
        justify-content:center;
    }
}

/* =========================================================
ANIMACIONES
========================================================= */
.animar{

    opacity:0;

    transform:translateY(50px);

    transition:1s ease;
}

.animar.visible{

    opacity:1;

    transform:translateY(0);
}

@keyframes flotar{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }
}

/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:992px){

    .overlay h2{
        font-size:3.5rem;
    }

    .page-top h1,
    .overlay-page h1,
    .contacto-top h1{
        font-size:2rem;
    }

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

@media(max-width:768px){

    main{
        padding-top:90px;
    }

    .carousel{
        height:80vh;
        min-height:550px;
    }

    .overlay h2{
        font-size:2.5rem;
    }

    .overlay p{
        font-size:1rem;
    }

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

    .page-top,
    .overlay-page,
    .contacto-top{

        padding:
        120px 20px 25px;
    }

    .page-top h1,
    .overlay-page h1,
    .contacto-top h1{

        font-size:1.7rem;
    }

    .page-top p,
    .overlay-page p,
    .contacto-top p{

        font-size:.95rem;
    }

    .contacto-formulario,
    .contacto-mapa{

        padding:28px;
    }

    .mascota{
        width:85px;
        right:15px;
        bottom:15px;
    }

    .globo{
        width:180px;
        font-size:12px;
    }
}

/* =========================================================
ADMISIONES
========================================================= */
.admisiones{

    padding:70px 0 40px;
}

.admisiones-content{

    background:#fff;

    border-radius:30px;

    padding:50px;

    text-align:center;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

    max-width:1000px;

    margin:auto;
}

.admisiones-content h2{

    font-size:2.4rem;

    color:var(--azul);

    margin-bottom:20px;

    font-weight:800;
}

.admisiones-content p{

    max-width:800px;

    margin:auto auto 30px;

    color:var(--gris);

    line-height:1.9;

    font-size:1.05rem;
}

/* =========================================================
INSTITUCIONAL
========================================================= */
.institucional{

    padding:60px 0;
}

.institucional-grid{

    display:grid;

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

    gap:45px;

    align-items:center;
}

.inst-img{

    overflow:hidden;

    border-radius:30px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.10);
}

.inst-img img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.4s ease;
}

.inst-img:hover img{

    transform:scale(1.05);
}

.inst-text{

    background:#fff;

    padding:45px;

    border-radius:30px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);
}

.inst-text h2{

    font-size:2.5rem;

    color:var(--azul);

    margin-bottom:25px;

    font-weight:800;
}

.inst-text p{

    color:var(--gris);

    line-height:1.9;

    font-size:1.05rem;
}

/* =========================================================
CONTADOR
========================================================= */
.contador{

    padding:60px 0;
}

.contador-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:30px;
}

.contador-item{

    background:#fff;

    border-radius:30px;

    padding:45px 30px;

    text-align:center;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

    transition:.35s ease;
}

.contador-item:hover{

    transform:translateY(-8px);
}

.contador-item .icon{

    font-size:3.5rem;

    display:block;

    margin-bottom:20px;
}

.contador-item .numero{

    font-size:3rem;

    color:var(--azul);

    margin-bottom:12px;

    font-weight:800;
}

.contador-item p{

    color:var(--gris);

    font-size:1.05rem;

    font-weight:500;
}

/* =========================================================
FILOSOFIA
========================================================= */
.filosofia{

    padding:70px 0 90px;
}

.filo-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin-top:40px;
}

.filo-card{

    background:#fff;

    padding:40px;

    border-radius:30px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

    transition:.35s ease;
}

.filo-card:hover{

    transform:translateY(-8px);
}

.filo-card h3{

    color:var(--azul);

    font-size:1.7rem;

    margin-bottom:20px;

    font-weight:700;
}

.filo-card p{

    color:var(--gris);

    line-height:1.9;
}

.filo-card ul{

    padding-left:20px;
}

.filo-card li{

    margin-bottom:10px;

    color:var(--gris);

    line-height:1.7;
}

/* =========================================================
CARRUSEL MÁS LIMPIO
========================================================= */
.carousel{

    width:100%;

    height:82vh;

    min-height:620px;

    position:relative;

    overflow:hidden;

    border-radius:
    0 0 35px 35px;
}

.overlay{

    width:90%;

    max-width:850px;
}

.overlay h2{

    font-size:3.8rem;

    line-height:1.15;

    margin-bottom:18px;

    font-weight:800;
}

.overlay p{

    font-size:1.15rem;

    line-height:1.8;
}

/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:992px){

    .institucional-grid{

        grid-template-columns:1fr;
    }

    .overlay h2{

        font-size:3rem;
    }

    .inst-text h2{

        font-size:2rem;
    }
}

@media(max-width:768px){

    .carousel{

        height:72vh;

        min-height:500px;
    }

    .overlay h2{

        font-size:2.2rem;
    }

    .overlay p{

        font-size:1rem;
    }

    .admisiones-content,
    .inst-text,
    .contador-item,
    .filo-card{

        padding:30px;
    }

    .admisiones-content h2,
    .inst-text h2{

        font-size:1.9rem;
    }

    .contador-item .numero{

        font-size:2.3rem;
    }

    .contador-item .icon{

        font-size:2.8rem;
    }
}

/* =========================================================
CALENDARIO
========================================================= */
.calendario-section{

    padding:70px 0 100px;
}

.calendario-box{

    background:#fff;

    border-radius:35px;

    padding:35px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);
}

.calendario-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:30px;
}

.calendario-header h2{

    color:var(--azul);

    font-size:2rem;

    font-weight:700;
}

.calendario-header button{

    width:50px;

    height:50px;

    border:none;

    border-radius:15px;

    background:
    linear-gradient(
    135deg,
    var(--celeste),
    var(--celeste2)
    );

    color:#fff;

    font-size:1.2rem;

    cursor:pointer;

    transition:.3s ease;
}

.calendario-header button:hover{

    transform:translateY(-3px);
}

.dias-semana{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:15px;

    margin-bottom:15px;
}

.dias-semana div{

    text-align:center;

    font-weight:700;

    color:var(--azul);
}

.calendario-grid{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:15px;
}

.dia{

    min-height:110px;

    border-radius:20px;

    background:#f7f9fc;

    padding:12px;

    position:relative;

    transition:.3s ease;

    cursor:pointer;
}

.dia:hover{

    transform:translateY(-5px);

    background:#eef6ff;
}

.dia-numero{

    font-weight:700;

    color:var(--azul);

    margin-bottom:10px;
}

.dia-evento{

    background:
    linear-gradient(
    135deg,
    var(--celeste),
    var(--celeste2)
    );

    color:#fff;

    font-size:.82rem;

    padding:6px 10px;

    border-radius:12px;

    display:inline-block;

    margin-top:8px;
}

.dia.vacio{

    background:transparent;

    pointer-events:none;
}

.modal-evento{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    padding:20px;

    z-index:999999;
}

.modal-evento-contenido{

    width:100%;

    max-width:650px;

    background:#fff;

    border-radius:30px;

    padding:40px;

    position:relative;

    animation:modalShow .35s ease;
}

.cerrar-evento{

    position:absolute;

    top:15px;
    right:22px;

    font-size:2rem;

    cursor:pointer;

    color:var(--azul);
}

.modal-evento-contenido h2{

    color:var(--azul);

    margin-bottom:10px;

    font-size:2rem;
}

#fechaEvento{

    color:var(--celeste2);

    font-weight:600;

    margin-bottom:20px;
}

#descripcionEvento{

    color:var(--gris);

    line-height:1.9;
}

@keyframes modalShow{

    from{
        opacity:0;
        transform:translateY(20px);
    }

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

@media(max-width:768px){

    .calendario-box{

        padding:20px;
    }

    .calendario-grid,
    .dias-semana{

        gap:8px;
    }

    .dia{

        min-height:85px;

        padding:8px;
    }

    .dia-evento{

        font-size:.7rem;

        padding:5px 7px;
    }

    .calendario-header h2{

        font-size:1.4rem;
    }
}

/* =========================================================
REQUISITOS
========================================================= */
.requisitos-section{

    padding:70px 0 40px;
}

/* =========================================================
PERFIL EGRESO
========================================================= */
.perfil-egreso{

    padding:20px 0 100px;
}
.perfil-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;
}

.perfil-card{

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

    transition:.35s ease;
}

.perfil-card:hover{

    transform:translateY(-8px);
}

.perfil-card img{

    width:100%;

    height:250px;

    object-fit:cover;

    display:block;
}

.perfil-info{

    padding:30px;
}

.perfil-info h3{

    color:var(--azul);

    margin-bottom:15px;

    font-size:1.5rem;
}

.perfil-info p{

    color:var(--gris);

    line-height:1.8;
}

@media(max-width:768px){

    .requisito-card,
    .perfil-info{

        padding:25px;
    }

    .perfil-card img{

        height:220px;
    }
}

/* =========================================================
GALERIA
========================================================= */
.galeria-top{
    padding-bottom:40px;
}

.galeria-section{
    padding:40px 0 100px;
}

.galeria-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:25px;
}

.galeria-item{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    cursor:pointer;

    background:#fff;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

    transition:.35s ease;
}

.galeria-item:hover{
    transform:translateY(-8px);
}

.galeria-item img{

    width:100%;

    height:300px;

    object-fit:cover;

    display:block;

    transition:.4s ease;
}

.galeria-item:hover img{
    transform:scale(1.08);
}

.galeria-item::before{

    content:"Ver imagen";

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(10,31,68,.55);

    color:#fff;

    font-size:1.1rem;

    font-weight:600;

    opacity:0;

    transition:.35s ease;

    z-index:2;
}

.galeria-item:hover::before{
    opacity:1;
}

/* =========================================================
MODAL GALERIA
========================================================= */
.modal-galeria{

    position:fixed;

    inset:0;

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

    display:none;

    align-items:center;

    justify-content:center;

    padding:30px;

    z-index:999999;
}

.imagen-modal{

    max-width:95%;

    max-height:90vh;

    border-radius:24px;

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

    animation:zoomGaleria .35s ease;
}

.cerrar-galeria{

    position:absolute;

    top:20px;
    right:35px;

    color:#fff;

    font-size:3rem;

    cursor:pointer;

    transition:.3s ease;
}

.cerrar-galeria:hover{
    transform:scale(1.1);
}

@keyframes zoomGaleria{

    from{
        transform:scale(.85);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }
}

/* =========================================================
RESPONSIVE GALERIA
========================================================= */
@media(max-width:768px){

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

    .galeria-item img{
        height:250px;
    }

    .cerrar-galeria{
        font-size:2.5rem;
        top:15px;
        right:20px;
    }
}

/* =========================================================
ALIADOS / PATROCINADORES
========================================================= */
.aliados-section{

    padding:100px 0;
}

.aliados-slider{

    width:100%;

    overflow:hidden;

    position:relative;

    margin-top:40px;
}

.aliados-track{

    display:flex;

    align-items:center;

    gap:35px;

    width:max-content;

    animation:scrollAliados 30s linear infinite;
}

.aliado-item{

    min-width:220px;

    height:140px;

    background:#fff;

    border-radius:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:25px;

    cursor:pointer;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

    transition:.35s ease;
}

.aliado-item:hover{

    transform:translateY(-8px) scale(1.03);

    box-shadow:
    0 20px 40px rgba(0,0,0,.15);
}

.aliado-item img{

    max-width:100%;

    max-height:90px;

    object-fit:contain;

    filter:grayscale(.1);

    transition:.35s ease;
}

.aliado-item:hover img{

    transform:scale(1.08);

    filter:none;
}

@keyframes scrollAliados{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

/* =========================================================
MODAL LOGOS
========================================================= */
.modal-logo{

    position:fixed;

    inset:0;

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

    display:none;

    align-items:center;

    justify-content:center;

    z-index:999999;

    padding:30px;
}

.imagen-logo{

    max-width:90%;

    max-height:85vh;

    background:#fff;

    padding:30px;

    border-radius:30px;

    animation:zoomLogo .35s ease;

    box-shadow:
    0 25px 50px rgba(0,0,0,.4);
}

.cerrar-logo{

    position:absolute;

    top:20px;
    right:35px;

    color:#fff;

    font-size:3rem;

    cursor:pointer;

    z-index:5;
}

@keyframes zoomLogo{

    from{
        transform:scale(.8);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }
}

@media(max-width:768px){

    .aliado-item{

        min-width:170px;

        height:120px;
    }

    .imagen-logo{

        padding:20px;
    }

    .cerrar-logo{

        top:10px;
        right:20px;

        font-size:2.5rem;
    }
}

/* =========================================================
DONATIVOS
========================================================= */
.donativos-top{
    text-align:center;
}

.impacto-section,
.meta-section,
.donacion-section,
.apadrina-section{

    padding:100px 0;
}

.impacto-grid,
.donacion-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;
}

.impacto-card,
.donacion-card{

    background:#fff;

    padding:35px;

    border-radius:30px;

    text-align:center;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

    transition:.35s ease;
}

.impacto-card:hover,
.donacion-card:hover{

    transform:translateY(-8px);
}

.impacto-icon{

    font-size:3.5rem;

    margin-bottom:20px;
}

.impacto-card h3,
.donacion-card h3{

    color:var(--azul);

    margin-bottom:15px;
}

.impacto-card p,
.donacion-card p{

    color:var(--gris);

    line-height:1.8;
}

.meta-box{

    background:#fff;

    padding:50px;

    border-radius:35px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

    text-align:center;

    max-width:950px;

    margin:auto;
}

.meta-box h2{

    color:var(--azul);

    margin:20px 0;
}

.meta-info{

    display:flex;

    justify-content:center;

    gap:60px;

    margin:35px 0;
}

.meta-info div{

    display:flex;

    flex-direction:column;
}

.meta-info strong{

    font-size:2rem;

    color:var(--azul);
}

.meta-info span{

    color:var(--gris);
}

.barra-meta{

    width:100%;

    height:22px;

    background:#e9eef6;

    border-radius:50px;

    overflow:hidden;
}

.barra-progreso{

    width:58%;

    height:100%;

    background:
    linear-gradient(
    135deg,
    var(--celeste),
    var(--celeste2)
    );

    border-radius:50px;

    animation:barraAnimada 2s ease;
}

@keyframes barraAnimada{

    from{
        width:0;
    }

    to{
        width:58%;
    }
}

.qr-box{

    width:220px;
    height:220px;

    margin:auto auto 25px;

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    cursor:pointer;

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

    transition:.35s ease;
}

.qr-box:hover{

    transform:scale(1.04);
}

.qr-box img{

    width:100%;
    height:100%;

    object-fit:cover;
}

/* =========================================================
MODAL QR
========================================================= */
.modal-qr{

    position:fixed;

    inset:0;

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

    display:none;

    align-items:center;

    justify-content:center;

    padding:30px;

    z-index:999999;
}

.imagen-qr{

    max-width:90%;

    max-height:85vh;

    background:#fff;

    padding:25px;

    border-radius:30px;

    animation:zoomQR .35s ease;
}

.cerrar-qr{

    position:absolute;

    top:20px;
    right:35px;

    color:#fff;

    font-size:3rem;

    cursor:pointer;
}

@keyframes zoomQR{

    from{
        transform:scale(.8);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }
}

@media(max-width:768px){

    .meta-info{

        flex-direction:column;

        gap:25px;
    }

    .meta-box{

        padding:30px;
    }

    .qr-box{

        width:180px;
        height:180px;
    }
}

/* =========================================================
VALORES PREMIUM
========================================================= */

.valores-card{
    position:relative;
    overflow:hidden;
}

.texto-valores{

    color:var(--gris);

    margin-bottom:25px;

    line-height:1.8;
}

.valores-grid{

    display:flex;

    flex-wrap:wrap;

    gap:15px;
}

.valor-chip{

    border:none;

    padding:14px 22px;

    border-radius:50px;

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:.35s ease;

    font-family:'Poppins',sans-serif;

    box-shadow:
    0 10px 20px rgba(0,0,0,.12);
}

.valor-chip:hover{

    transform:
    translateY(-5px)
    scale(1.05);
}

.verdad{
    background:linear-gradient(135deg,#00c6ff,#0072ff);
}

.respeto{
    background:linear-gradient(135deg,#ff9966,#ff5e62);
}

.solidaridad{
    background:linear-gradient(135deg,#56ab2f,#a8e063);
}

.responsabilidad{
    background:linear-gradient(135deg,#7f00ff,#e100ff);
}

.amor{
    background:linear-gradient(135deg,#ff758c,#ff7eb3);
}

.excelencia{
    background:linear-gradient(135deg,#f7971e,#ffd200);
}

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

.modal-valores{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    padding:25px;

    z-index:999999;
}

.modal-valores-content{

    width:100%;

    max-width:650px;

    background:#fff;

    border-radius:35px;

    padding:50px;

    text-align:center;

    position:relative;

    animation:modalValor .35s ease;

    box-shadow:
    0 20px 45px rgba(0,0,0,.25);
}

.cerrar-valores{

    position:absolute;

    top:18px;
    right:25px;

    font-size:2.5rem;

    cursor:pointer;

    color:var(--azul);
}

.icono-valor{

    width:100px;
    height:100px;

    margin:auto auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:3rem;

    background:
    linear-gradient(
    135deg,
    var(--celeste),
    var(--celeste2)
    );

    color:#fff;
}

.modal-valores-content h2{

    color:var(--azul);

    margin-bottom:20px;

    font-size:2.2rem;

    font-weight:800;
}

.modal-valores-content p{

    color:var(--gris);

    line-height:1.9;

    font-size:1.05rem;
}

@keyframes modalValor{

    from{
        opacity:0;
        transform:translateY(30px) scale(.9);
    }

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

/* =========================================================
CONTADOR MÁS PROFESIONAL
========================================================= */

.contador-top{

    text-align:center;

    margin-bottom:60px;
}

.contador-item{

    position:relative;

    overflow:hidden;
}

.contador-item::before{

    content:"";

    position:absolute;

    top:-50px;
    right:-50px;

    width:120px;
    height:120px;

    background:
    rgba(0,194,255,.08);

    border-radius:50%;
}

.contador-icono{

    width:90px;
    height:90px;

    margin:auto auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:25px;

    font-size:3rem;

    background:
    linear-gradient(
    135deg,
    rgba(0,194,255,.15),
    rgba(0,159,209,.15)
    );
}

.barra-progreso{

    width:100%;

    height:12px;

    background:#edf2f7;

    border-radius:30px;

    overflow:hidden;

    margin-top:20px;
}

.barra-fill{

    height:100%;

    border-radius:30px;

    animation:barraAnim 2s ease forwards;
}

.alumnos-fill{

    width:90%;

    background:
    linear-gradient(135deg,#00c6ff,#0072ff);
}

.docentes-fill{

    width:100%;

    background:
    linear-gradient(135deg,#56ab2f,#a8e063);
}

.experiencia-fill{

    width:85%;

    background:
    linear-gradient(135deg,#ff9966,#ff5e62);
}

.contador-extra{

    display:block;

    margin-top:15px;

    color:var(--gris);

    font-size:.95rem;
}

@keyframes barraAnim{

    from{
        width:0;
    }
}