*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    background:#f7f7f7;
    color:#1f1f1f;

    padding-top:80px;

}

/* NAVBAR */

.navbar{

    width:100%;

    padding:10px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    position:fixed;

    top:0;
    left:0;

    z-index:1000;

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

    backdrop-filter:blur(12px);

    transition:all .45s ease;

    box-shadow:0 2px 15px rgba(0,0,0,.05);

}

.navbar.scrolled{

    padding:1px 8%;

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

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

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

}


.logo img{

    width:135px;

    transition:all .45s ease;

}

.logo img:hover{
    transform:scale(1.05);
}

/* LOGO SCROLL */

.navbar.scrolled .logo img{
    width:135px;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:40px;
    list-style:none;
}

.nav-links li a{
    display:flex;
    align-items:center;
    height:42px;
    color:#26529C;
    text-decoration:none;
    font-weight:700;
    line-height:1;
    font-size: 14px;
}

.nav-links a:hover{
    color:#1f7a5c;
}

/* DROPDOWN */

.dropdown{
    position:relative;
}

.dropdown-menu{
    position:absolute;
    top:30px;
    left:0;
    background:white;
    width:260px;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.1);
    opacity:0;
    visibility:hidden;
    transition:.3s;
}

.dropdown-menu li{
    list-style:none;
}

.dropdown-menu a{
    display:block;
    padding:15px;
}

/*.dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
}*/

/* HERO */

.hero{

    width:100%;
    height:85vh;

    position:relative;

    overflow:hidden;

}

/* SLIDES */

.slide{

    position:absolute;

    width:100%;
    height:100%;

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

    opacity:0;

    transition:1s ease;

}

.slide.active{
    opacity:1;
}

/* OVERLAY */

.overlay{

    width:100%;
    height:100%;

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

}

/* CONTENIDO */

.hero-content{

    position:absolute;

    top:50%;
    left:10%;

    transform:translateY(-50%);

    color:white;

    max-width:700px;

    z-index:10;

}

.hero-content h1{

    font-size:4rem;

    margin-bottom:20px;

}

.hero-content p{

    font-size:1.2rem;

    line-height:1.8;

}

/* BOTONES */

.hero-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;
    height:60px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(8px);

    color:white;

    font-size:1.2rem;

    cursor:pointer;

    z-index:20;

    transition:.4s ease;

}

.hero-btn:hover{

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

    transform:translateY(-50%) scale(1.08);

}

/* IZQUIERDA */

.prev{
    left:30px;
}

/* DERECHA */

.next{
    right:30px;
}

/* DOTS */

.hero-dots{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:15px;

    z-index:20;

}

.dot{

    width:14px;
    height:14px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.4s;

}

.dot.active{

    width:40px;

    border-radius:20px;

    background:white;

}


/* INTRO */

.intro{
    padding:100px 8%;
}

.intro h2{

    margin-bottom:50px;

    color:#26529C;

    font-size:2.7rem;

    font-weight:700;

}

.section-title{

    display:flex;
    align-items:center;

    gap:15px;

    font-size:2.5rem;

    color:#26529C;

    margin-bottom:50px;

    font-weight:700;

}

.section-title i{

    color:#1f7a5c;

    font-size:2.2rem;

}


.intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

.intro-card{
    background:white;
    padding:40px;
    border-radius:20px;
    line-height:1.8;
    box-shadow:0 5px 15px rgba(0,0,0,.05);
    transition:.3s;
}

.intro-card:hover{
    transform:translateY(-10px);
}

/* FUTURE EVENTS */

.future-events{
    padding:40px 8% 100px;
}

.future-events h2{

    margin-bottom:60px;

    color:#26529C;

    font-size:2.7rem;

    font-weight:700;

}

.cards-container{
    display:flex;
    gap:40px;
    flex-wrap:wrap;
    justify-content:center;
}

.flip-card{
    width:320px;
    height:500px;
    perspective:1000px;
}

.flip-card-inner{
    width:100%;
    height:100%;
    position:relative;
    transition:transform .8s;
    transform-style:preserve-3d;
}

.flip-card:hover .flip-card-inner{
    transform:rotateY(180deg);
}

.flip-card-front,
.flip-card-back{
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    border-radius:20px;
}

.flip-card-front{
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:flex-end;
    padding:30px;
    color:white;
}

.flip-card-back{
    background:#0e8a4b;
    color:white;
    transform:rotateY(180deg);
    padding:40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}



/* ANIMACIÓN */

.menu-toggle.active span:nth-child(1){
    transform:rotate(45deg) translate(7px, 7px);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(10px, -10px);
}


/* ===== MENU HAMBURGUESA ===== */

.menu-toggle{

    display:none;

    flex-direction:column;

    justify-content:center;

    gap:6px;

    cursor:pointer;

    z-index:2000;

}

/* LINEAS */

.menu-toggle span{

    width:28px;

    height:3px;

    background:#26529C;

    border-radius:10px;

    transition:.4s ease;

}


@media(max-width:900px){

    .hero-btn{

    width:45px;
    height:45px;

    font-size:1rem;

}

.prev{
    left:15px;
}

.next{
    right:15px;
}

    .nav-links{
        position:absolute;
        top:90px;
        right:-100%;
        background:white;
        width:300px;
        flex-direction:column;
        padding:40px;
        transition:.4s;
    }

    .nav-links.active{
        right:0;
    }


    .menu-toggle{
    display:flex;
}

    /*.menu-toggle{
        display:block;
        font-size:2rem;
        cursor:pointer;
        color:#154734;
    }*/

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

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

    .hero-content h1{
        font-size:2.5rem;
    }


}

/* ===== WHATSAPP FLOAT ===== */

.whatsapp-float{

    position:fixed;

    width:65px;
    height:65px;

    bottom:30px;
    right:30px;

    background:#25D366;

    color:#fff;

    border-radius:50%;

    display:flex;

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

    font-size:38px;

    text-decoration:none;

    z-index:9999;

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

    transition:all .35s ease;

    animation:floatWhatsapp 2.5s ease-in-out infinite;

}

/* HOVER */

.whatsapp-float:hover{

    transform:scale(1.12);

    background:#1ebe5d;

    box-shadow:0 12px 30px rgba(0,0,0,.35);

}

/* ANIMACIÓN FLOTANTE */

@keyframes floatWhatsapp{

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

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

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

}

/*Responsive para movil*/

@media(max-width:768px){

    .whatsapp-float{

        width:58px;
        height:58px;

        font-size:32px;

        bottom:20px;
        right:20px;

    }

}

/* FOOTER  */

.footer{

    width:100%;

    margin-top:80px;

}

/* FRANJA VERDE */

.footer-social{

    background:#0e8a4b;

    padding:18px 0;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:35px;

}

/* ICONOS */

.footer-social a{

    color:#fff;

    font-size:30px;

    transition:.35s ease;

}

/* HOVER */

.footer-social a:hover{

    transform:translateY(-5px) scale(1.1);

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

}

/* PARTE BLANCA */

/* ZONA CONTACTO */

.footer-contact{

    background:#fff;

    padding:18px 20px 30px;

    display:flex;

    flex-direction:column;

    align-items:center;

}

/*CUADRO BLANCO FOOTER*/

/* TITULO */

.footer-title{

    color:#0e8a4b;

    font-size:24px;

    margin-bottom:18px;

    font-weight:700;

}

/* CONTENEDOR */

.contact-container{

    width:100%;

    display:flex;

    justify-content:center;

    gap:22px;

    flex-wrap:wrap;

}

/* CUADROS */

.contact-box{

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    border-radius:14px;

    padding:16px 24px;

    min-width:240px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    box-shadow:0 4px 14px rgba(0,0,0,.05);

    transition:.35s ease;

}

/* HOVER */

.contact-box:hover{

    transform:translateY(-5px);

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

}

/* ICONOS */

.contact-box i{

    color:#0e8a4b;

    font-size:18px;

}

/* TEXTO */

.contact-box p{

    color:#444;

    font-size:14px;

    margin:0;

}

/* ICONOS */

.contact-box li i{

    color:#0e8a4b;

    font-size:15px;

}

/* Responsive FOOTER */

@media(max-width:768px){

    .footer-title{

        font-size:22px;

    }

    .contact-container{

        flex-direction:column;

        align-items:center;

    }

    .contact-box{

        width:90%;

    }

}



.contact-box{

    border:1px solid rgba(0,0,0,.05);

}



/*Carreras*/

/* HERO */

.career-hero{

position:relative;

height:650px;

border-radius:0px;

margin:0px auto;

max-width:1600px;

overflow:hidden;

display:flex;

align-items:center;

padding:80px;

}

/* Imagen del Hero */

.career-hero img{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

z-index:1;

}

/* Capa oscura */

.career-hero::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

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

z-index:2;

}

.career-overlay{

position:relative;

z-index:3;

max-width:650px;

color:white;

}

.career-overlay h1{

font-size:3rem;

margin-bottom:20px;

}

.career-overlay p{

font-size:1.1rem;

line-height:1.7;

}



/* BLOQUES */

.career-content{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

margin:50px auto;

max-width:1400px;

}

.career-card{

background:white;

padding:30px;

border-radius:25px;

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

}

.card-title{

display:flex;

gap:15px;

align-items:center;

margin-bottom:25px;

color:#26529C;

}

.image-card img{

width:100%;

border-radius:20px;

}



/* ===== SECCIÓN INFORMACIÓN ===== */

.career-info{

margin-top:70px;

}



/* GRID SUPERIOR */

.info-grid{

display:grid;

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

gap:28px;

margin-bottom:45px;

padding-left:35px;

padding-right:35px;

}



/* TARJETAS */

.info-card{

background:white;

border-radius:34px;

padding:60px 30px;

border:6px solid rgba(14,60,45,.10);

box-shadow:

0 6px 20px rgba(0,0,0,.04);

transition:.35s;

min-height:320px;

}

.info-card:hover{

transform:translateY(-8px);

box-shadow:

0 14px 30px rgba(0,0,0,.08);

}



/* CABECERA */

.info-header{

display:flex;

align-items:center;

gap:18px;

margin-bottom:25px;

}



/* ICONOS */

.info-icon{

width:82px;

height:82px;

border-radius:50%;

background:#edf5f0;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:#26529C;

flex-shrink:0;

}



/* TITULOS */

.info-card h3{

font-size:1.8rem;

color:#113327;

margin-bottom:8px;

}



/* LINEA */

.info-line{

height:2px;

width:170px;

background:

linear-gradient(
to right,

rgba(18,63,47,.25),

transparent
);

}


/* ETIQUETA INFO CARRERA */

.info-tag{

width:240px;

height:42px;

display:flex;

justify-content:center;

align-items:center;

margin:20px auto;

border-radius:10px;

background:white;

border:2px solid #d8d8d8;

font-weight:600;

}

/* Link a WhatsApp */

.info-link{

text-decoration:none;

color:inherit;

display:block;

}

/* TEXTO */

.info-card p{

font-size:.9rem;

line-height:1.8;

text-align:center;

color:#333;

}



/* TARJETAS GRANDES */

.feature-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(420px,1fr));

gap:30px;

padding-left:35px;

padding-right:35px;

}



.feature-card{

background:white;

padding:35px;

border-radius:22px;

border:1px solid rgba(14,60,45,.10);

box-shadow:

0 5px 18px rgba(0,0,0,.04);

transition:.35s;

}



.feature-card:hover{

transform:translateY(-6px);

}



.feature-top{

display:flex;

align-items:center;

gap:18px;

margin-bottom:25px;

}



.feature-icon{

width:80px;

height:80px;

border-radius:50%;

background:#edf5f0;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

color:#26529C;

}



.feature-card h3{

font-size:2rem;

color:#113327;

}



.feature-line{

height:2px;

width:320px;

background:

linear-gradient(
to right,

rgba(18,63,47,.25),

transparent
);

margin-top:8px;

}



.feature-card ul{

padding-left:25px;

}



.feature-card li{

margin-bottom:15px;

font-size:1.1rem;

line-height:1.6;

color:#1f1f1f;

}



/* PLAN */

.study-plan{

margin:80px auto;

max-width:1400px;

padding:40px;

background:#EDF4EF;

border-radius:25px;

text-align:center;

}

.study-plan i{

font-size:2rem;

color:#26529C;

text-align:center;

}

.plan-btn{

display:inline-flex;

gap:10px;

margin-top:20px;

padding:4px 20px;

background:#0e8a4b;

color:white;

border-radius:40px;

text-decoration:none;

}



/* RESPONSIVE */

@media(max-width:900px){

.career-content{

grid-template-columns:1fr;

}

.career-info{

grid-template-columns:1fr 1fr;

}

.career-lists{

grid-template-columns:1fr;

}

.career-hero{

height:420px;

padding:40px;

}

.career-overlay h1{

font-size:2rem;

}

}


/*Plantel*/

.plantel-page{
    width:min(95%, 1500px);
    margin:0 auto;
}

/* HERO */

.plantel-hero{
    position:relative;
    height:620px;
    overflow:hidden;
    border-radius:34px;
    margin:20 calc(50% - 50vw) 80px;
}

.plantel-hero img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-dark{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.22));
}

.hero-info{
    position:absolute;
    left:max(6vw, 70px);
    bottom:90px;
    max-width:620px;
    color:white;
}

.hero-info span,
.plantel-section-title span,
.porque-content span{
    color:#FFFFFF;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
    font-size:.9rem;
}

.hero-info h1{
    font-size:4.5rem;
    line-height:1;
    margin:16px 0 22px;
}

.hero-info p{
    font-size:1.18rem;
    line-height:1.8;
    max-width:560px;
}

/* TÍTULOS GENERALES */

.plantel-section-title{
    text-align:center;
    margin-bottom:42px;
}

.plantel-section-title h2{
    color:#26529C;
    font-size:2.75rem;
    margin-top:10px;
    font-weight:800;
}

.left-title{
    text-align:left;
}

.left-title h2 i{
    color:#26529C;
    margin-right:12px;
}

/* MISIÓN Y VISIÓN */

.institucional{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    margin:80px 0;
}

.inst-card{
    background:#fff;
    padding:38px;
    border-radius:26px;
    display:flex;
    gap:22px;
    align-items:flex-start;
    border:1px solid rgba(38,82,156,.08);
    box-shadow:0 12px 30px rgba(0,0,0,.05);
    transition:.35s ease;
}

.inst-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.inst-icon{
    min-width:72px;
    height:72px;
    border-radius:50%;
    background:#EDF4EF;
    display:flex;
    align-items:center;
    justify-content:center;
}

.inst-icon i{
    font-size:2rem;
    color:#26529C;
}

.inst-card h2{
    color:#26529C;
    font-size:1.8rem;
    margin-bottom:12px;
}

.inst-card p{
    color:#111;
    line-height:1.8;
    font-size:1rem;
}

/* VALORES */

.valores-cut{
    margin:90px 0;
}

.valores-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
}

.valor{
    text-align:center;
    padding:34px 18px;
    background:#fff;
    border-radius:22px;
    border:1px solid rgba(38,82,156,.08);
    box-shadow:0 8px 24px rgba(0,0,0,.04);
    transition:.35s ease;
    cursor:pointer;
}

.valor i{
    display:block;
    font-size:3rem;
    color:#26529C;
    margin-bottom:18px;
    transition:.35s ease;
}

.valor span{
    color:#111;
    font-weight:800;
    font-size:1rem;
}

.valor:hover{
    transform:translateY(-8px);
    background:#EDF4EF;
}

.valor:hover i{
    color:#0e8a4b;
    transform:scale(1.08);
}

/* PORQUE CUT */

.porque-cut{
    background:linear-gradient(135deg, #EDF4EF, #F8FBF9);
    padding:86px 80px;
    border-radius:34px;
    margin:90px 0;
    text-align:center;
    position:relative;
    overflow:hidden;
    box-shadow:0 14px 35px rgba(0,0,0,.04);
}

.porque-cut::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:#dbece2;
    top:-130px;
    left:-90px;
    opacity:.75;
}

.porque-content{
    position:relative;
    z-index:2;
}

.porque-cut h2{
    color:#26529C;
    font-size:3rem;
    margin:12px 0 24px;
    font-weight:800;
}

.porque-cut p{
    max-width:850px;
    margin:0 auto;
    font-size:1.08rem;
    line-height:1.9;
    color:#111;
}

.porque-cut h3{
    color:#26529C;
    margin-top:48px;
    font-size:1.4rem;
}

.beneficios{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-top:28px;
}

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

.beneficios li{
    background:#fff;
    padding:17px 22px;
    border-radius:16px;
    color:#111;
    margin-bottom:14px;
    text-align:left;
    box-shadow:0 8px 22px rgba(0,0,0,.04);
    border-left:4px solid transparent;
    transition:.3s ease;
}

.beneficios li::before{
    content:"✓";
    color:#0e8a4b;
    font-weight:900;
    margin-right:10px;
}

.beneficios li:hover{
    transform:translateY(-4px);
    border-left-color:#0e8a4b;
}

/* HORARIOS + MAPA */

.horarios-mapa{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:30px;
    align-items:start;
}

.horario-box,
.mapa-box{
    background:white;
    padding:34px;
    border-radius:28px;
    box-shadow:0 12px 30px rgba(0,0,0,.05);
    border:1px solid rgba(38,82,156,.08);
}

.horario-box{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    min-height:auto;
    height:auto;
    padding:32px 28px;
}

.plantel-card-title{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
}

.plantel-card-title i{
    width:54px;
    height:54px;
    border-radius:50%;
    background:#EDF4EF;
    color:#26529C;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.35rem;
}

.plantel-card-title h2{
    color:#26529C;
    font-size:1.85rem;
    font-weight:800;
}

.horario-box ul{
    margin-top:20px;
    margin-bottom:20px;
}

.horario-box img{
    width:110%;
    max-width:250px;
    margin:20px auto 0;
}

.direccion-cut{
    color:#444;
    line-height:1.7;
    font-size:.98rem;
    margin-bottom:20px;
}

.mapa-box{
    display:flex;
    flex-direction:column;
}

.mapa-box iframe{
    width:100%;
    min-height:430px;
    flex:1;
    border:none;
    border-radius:22px;
}

/* INSTALACIONES */

.instalaciones-cut{
    background:#EDF4EF;
    padding:70px;
    border-radius:34px;
    margin:90px 0;
}

.inst-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:36px;
}

.inst-item{
    background:#fff;
    padding:34px 20px;
    border-radius:22px;
    text-align:center;
    box-shadow:0 8px 24px rgba(0,0,0,.04);
    transition:.35s ease;
}

.inst-item i{
    font-size:3rem;
    color:#26529C;
    display:block;
    margin-bottom:18px;
    transition:.35s ease;
}

.inst-item span{
    font-weight:800;
    color:#111;
}

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

.inst-item:hover i{
    color:#0e8a4b;
    transform:scale(1.08);
}

/* GALERIA */

.galeria-cut{
    margin:90px 0;
}

.galeria-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.galeria-grid img{
    width:100%;
    height:240px;
    object-fit:cover;
    border-radius:20px;
    transition:.45s ease;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(0,0,0,.04);
}

.galeria-grid img:hover{
    transform:scale(1.04);
    box-shadow:0 14px 34px rgba(0,0,0,.12);
}

/* LIGHTBOX GALERIA */

.lightbox{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.88);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.4s;
    z-index:99999;
    backdrop-filter:blur(6px);
}

.lightbox.activo{
    opacity:1;
    visibility:visible;
}

.lightbox img{
    max-width:85%;
    max-height:85%;
    border-radius:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.4);
    transform:scale(.85);
    transition:.35s;
}

.lightbox.activo img{
    transform:scale(1);
}

.cerrar-lightbox{
    position:absolute;
    top:30px;
    right:40px;
    font-size:55px;
    color:white;
    cursor:pointer;
    transition:.3s;
}

.cerrar-lightbox:hover{
    color:#0e8a4b;
    transform:rotate(90deg);
}

/* FOOTER LINKS */

.contact-box a{
    color:#444;
    text-decoration:none;
    transition:.3s ease;
}

.contact-box a:hover{
    color:#0e8a4b;
}

/* RESPONSIVE PLANTEL */

@media(max-width:1024px){
    .plantel-page{
        width:min(92%, 1100px);
    }

    .hero-info{
        left:40px;
        bottom:70px;
    }

    .hero-info h1{
        font-size:3.4rem;
    }

    .institucional,
    .horarios-mapa{
        grid-template-columns:1fr;
    }

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

    .inst-grid,
    .beneficios{
        grid-template-columns:1fr 1fr;
    }

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

@media(max-width:768px){
    .plantel-page{
        width:92%;
    }

    .plantel-hero{
        height:460px;
        margin:0 calc(50% - 50vw) 60px;
    }

    .hero-info{
        left:24px;
        right:24px;
        bottom:50px;
    }

    .hero-info h1{
        font-size:2.6rem;
    }

    .hero-info p{
        font-size:1rem;
    }

    .institucional,
    .beneficios,
    .horarios-mapa,
    .inst-grid,
    .galeria-grid{
        grid-template-columns:1fr;
    }

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

    .inst-card{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }

    .porque-cut,
    .instalaciones-cut{
        padding:50px 24px;
        border-radius:26px;
    }

    .plantel-section-title h2,
    .porque-cut h2{
        font-size:2rem;
    }

    .mapa-box iframe{
        min-height:320px;
    }

    .galeria-grid img{
        height:230px;
    }
}

@media(max-width:480px){
    .valores-grid{
        grid-template-columns:1fr;
    }

    .horario-box,
    .mapa-box{
        padding:26px;
    }

    .galeria-grid img{
        height:200px;
    }
}

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

@media (max-width: 1024px) {

    .plantel-hero {
        height: 500px;
    }

    .plantel-hero-content h1 {
        font-size: 3rem;
    }

    .mision-vision-container,
    .horarios-mapa-container {
        grid-template-columns: 1fr;
    }

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

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

    .mapa-container iframe {
        height: 350px;
    }

    .horarios-card img {
        max-width: 260px;
    }

    .porque-cut {
        padding: 70px 40px;
    }
}


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

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    /* HERO */

    .plantel-hero {
        height: 420px;
        border-radius: 20px;
        margin: 20px;
    }

    .plantel-hero-content {
        padding: 30px;
    }

    .plantel-hero-content h1 {
        font-size: 2.3rem;
        line-height: 1.1;
    }

    .plantel-hero-content p {
        font-size: 1rem;
        max-width: 100%;
    }

    /* CONTENEDORES */

    .mision-vision-container,
    .horarios-mapa-container,
    .galeria-grid,
    .valores-grid,
    .instalaciones-grid {
        grid-template-columns: 1fr;
    }

    /* TARJETAS */

    .mision-card,
    .vision-card,
    .horarios-card,
    .mapa-container,
    .valor-card,
    .instalacion-card {
        padding: 30px 25px;
        border-radius: 24px;
    }

    /* TÍTULOS */

    .section-title,
    .porque-cut h2,
    .galeria-title {
        font-size: 2rem;
        text-align: center;
    }

    /* POR QUÉ CUT */

    .porque-cut {
        padding: 60px 25px;
        border-radius: 0;
    }

    .porque-cut p {
        font-size: 1rem;
    }

    .beneficios-lista {
        columns: 1;
    }

    /* VALORES */

    .valor-card i {
        font-size: 2.8rem;
    }

    /* INSTALACIONES */

    .instalacion-card i {
        font-size: 2.5rem;
    }

    /* HORARIOS */

    .horarios-card h3,
    .mapa-container h3 {
        font-size: 2rem;
    }

    .horarios-card ul {
        padding-left: 20px;
    }

    .horarios-card li {
        font-size: 1rem;
        margin-bottom: 14px;
    }

    .horarios-card img {
        max-width: 220px;
        margin-top: 20px;
    }

    /* MAPA */

    .mapa-container iframe {
        height: 300px;
        border-radius: 18px;
    }

    /* GALERÍA */

    .galeria-grid {
        gap: 18px;
    }

    .galeria-grid img {
        height: 240px;
        border-radius: 20px;
    }

    /* ESPACIADOS GENERALES */

    section {
        padding: 60px 20px;
    }
}


/* ======================================================
   RESPONSIVE EXTRA PEQUEÑO
====================================================== */

@media (max-width: 480px) {

    .plantel-hero {
        height: 360px;
    }

    .plantel-hero-content h1 {
        font-size: 2rem;
    }

    .plantel-hero-content p {
        font-size: 0.95rem;
    }

    .section-title,
    .porque-cut h2,
    .galeria-title {
        font-size: 1.7rem;
    }

    .galeria-grid img {
        height: 200px;
    }

    .mapa-container iframe {
        height: 260px;
    }

    .horarios-card img {
        max-width: 180px;
    }
}



/* CONTACTANOS */

.contact-page {
    width: min(100%, 1800px);
    margin: 0 auto;
}

/* HERO */

.contact-hero {
    position: relative;
    height: 620px; 
    border-radius: 0px;
    overflow: hidden;
    margin: 0px 0 45px;
}

.contact-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.48);
}

.contact-hero-content {
    position: absolute;
    left: 55px;
    bottom: 55px;
    color: white;
    max-width: 600px;
}

.contact-hero-content h1 {
    font-size: 4rem;
    margin-bottom: 18px;
    font-weight: 800;
}

.contact-hero-card {
    background: rgba(14,138,75,.35);
    backdrop-filter: blur(8px);
    padding: 24px 28px;
    border-radius: 14px;
    max-width: 470px;
}

.contact-hero-card h2 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.contact-hero-card p {
    font-size: 1rem;
    line-height: 1.7;
}

/* PASOS DE INSCRIPCIÓN */

.admission-steps {
    margin: 70px 0 60px;
    padding: 65px 60px;
    background: #EDF4EF;
    border-radius: 28px;
    text-align: center;
}

.admission-steps h2 {
    color: #26529C;
    font-size: 2.7rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.steps-subtitle {
    color: #111;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 45px;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.step-card {
    background: white;
    border-radius: 18px;
    padding: 34px 26px 32px;
    min-height: 285px;
    box-shadow: 0 8px 22px rgba(0,0,0,.04);
    border: 1px solid rgba(38,82,156,.06);
    transition: .35s ease;
}

.step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 34px rgba(0,0,0,.08);
}

.step-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 34px;
    border-radius: 50%;
    background: #e8eef8;
    color: #26529C;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.step-icon i {
    font-size: 2.4rem;
}

.step-icon span {
    position: absolute;
    bottom: -14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #8ba9c9;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.step-card h3 {
    color: #26529C;
    font-size: 1.35rem;
    margin-bottom: 22px;
    font-weight: 800;
}

.step-card p {
    color: #111;
    font-size: 1rem;
    line-height: 1.7;
}

/* FORMULARIO + CONTACTO */

.contact-main-section {
    display: grid;
    grid-template-columns: 1.6fr .9fr;
    gap: 28px;
    margin: 55px 0 80px;
    align-items: stretch;
}

.form-card,
.contact-line-card {
    background: white;
    border-radius: 24px;
    padding: 38px;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
    border: 1px solid rgba(38,82,156,.08);
}

.section-heading,
.contact-line-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
}

.section-heading i,
.contact-line-title i {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #EDF4EF;
    color: #26529C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.section-heading h2,
.contact-line-title h2 {
    color: #26529C;
    font-size: 1.7rem;
}

/* FORM */

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.form-group label {
    font-size: .95rem;
    color: #111;
    font-weight: 700;
}

.form-group input,
.form-group select {
    height: 46px;
    border: 1px solid rgba(0,0,0,.22);
    border-radius: 8px;
    padding: 0 14px;
    font-size: .95rem;
    outline: none;
    transition: .3s;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #0e8a4b;
    box-shadow: 0 0 0 3px rgba(14,138,75,.12);
}

.contact-btn {
    width: fit-content;
    min-width: 180px;
    height: 48px;
    border: none;
    border-radius: 9px;
    background: #0e8a4b;
    color: white;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease;
    grid-column: 1 / 2;
}

.contact-btn:hover {
    background: #0b6f3d;
    transform: translateY(-3px);
}


/* ======================================================
   AVISO DE PRIVACIDAD + GOOGLE reCAPTCHA
====================================================== */

.privacy-consent {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    border: 1px solid rgba(38,82,156,.18);
    border-radius: 10px;
    background: rgba(237,244,239,.72);
}

.privacy-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: #0e8a4b;
    cursor: pointer;
}

.privacy-consent label {
    color: #222;
    font-size: .92rem;
    line-height: 1.45;
    cursor: pointer;
}

.privacy-consent a {
    color: #26529C;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.privacy-consent a:hover {
    color: #0e8a4b;
}

.captcha-panel {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(14,138,75,.22);
    background: linear-gradient(135deg, rgba(237,244,239,.92), rgba(255,255,255,.98));
    box-shadow: 0 14px 28px rgba(38,82,156,.07);
}

.captcha-panel::before {
    content: "";
    position: absolute;
    inset: -55% auto auto -12%;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14,138,75,.13), transparent 68%);
    pointer-events: none;
}

.captcha-copy {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}

.captcha-copy > i {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0e8a4b;
    background: #fff;
    box-shadow: 0 10px 20px rgba(14,138,75,.12);
    font-size: 1.2rem;
}

.captcha-copy strong {
    display: block;
    color: #26529C;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 4px;
}

.captcha-copy span {
    display: block;
    color: #333;
    font-size: .88rem;
    line-height: 1.45;
}

.captcha-widget-wrap {
    position: relative;
    z-index: 1;
    justify-self: end;
    min-height: 78px;
    display: flex;
    align-items: center;
}

.contact-btn:disabled {
    opacity: .58;
    cursor: not-allowed;
    transform: none;
}

.contact-btn:disabled:hover {
    background: #0e8a4b;
    transform: none;
}

@media (max-width: 768px) {
    .captcha-panel {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px 16px;
    }

    .captcha-widget-wrap {
        justify-self: start;
        max-width: 100%;
        overflow: hidden;
    }
}

@media (max-width: 420px) {
    .captcha-widget-wrap {
        transform: scale(.88);
        transform-origin: left top;
        width: 114%;
        height: 70px;
    }

    .captcha-copy {
        align-items: flex-start;
    }
}

/* CONTACT INFO */

.contact-line-card {
    display: flex;
    flex-direction: column;
}

.contact-info-list {
    margin-top: 10px;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(0,0,0,.12);
    font-size: 1.05rem;
    color: #111;
}

.contact-info-item:last-child {
    border-bottom: none;
}

.contact-info-item i {
    color: #0e8a4b;
    font-size: 1.45rem;
    width: 32px;
}

/* TEST VOCACIONAL */

.vocational-cta {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) 1px auto auto;
    align-items: center;
    gap: 30px;
    margin: -20px 0 55px;
    padding: 22px 34px;
    background: linear-gradient(135deg, rgba(237,244,239,.92), rgba(255,255,255,.98));
    border: 1px solid rgba(14,138,75,.24);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(0,0,0,.05);
}

.vocational-main-icon {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #fff;
    color: #26529C;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    flex-shrink: 0;
}

.vocational-main-icon > i {
    font-size: 3rem;
}

.vocational-main-icon span {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0e8a4b;
    color: #fff;
    border: 4px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.vocational-copy h2 {
    color: #26529C;
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.vocational-copy p {
    color: #111;
    font-size: 1rem;
    line-height: 1.55;
    max-width: 490px;
}

.vocational-divider {
    width: 1px;
    height: 66px;
    background: rgba(14,138,75,.22);
}

.vocational-benefits {
    display: flex;
    align-items: center;
    gap: 28px;
}

.vocational-benefit {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 145px;
}

.vocational-benefit i {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    color: #26529C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    box-shadow: inset 0 0 0 3px rgba(237,244,239,.9);
}

.vocational-benefit p {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #111;
    font-size: .95rem;
    line-height: 1.25;
}

.vocational-benefit strong {
    font-size: 1rem;
}

.vocational-btn {
    min-width: 210px;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 28px;
    background: #0e8a4b;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(14,138,75,.25);
    transition: .3s ease;
    white-space: nowrap;
}

.vocational-btn:hover {
    background: #0b6f3d;
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(14,138,75,.30);
}

/* RESPONSIVE */

@media(max-width: 1024px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admission-steps {
        padding: 55px 35px;
    }

    .vocational-cta {
        grid-template-columns: auto 1fr;
        gap: 22px;
        padding: 26px;
    }

    .vocational-divider {
        display: none;
    }

    .vocational-benefits,
    .vocational-btn {
        grid-column: 1 / -1;
    }

    .vocational-benefits {
        justify-content: center;
    }
}

@media(max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .admission-steps {
        padding: 45px 22px;
        border-radius: 22px;
    }

    .admission-steps h2 {
        font-size: 2rem;
    }

    .steps-subtitle {
        font-size: 1rem;
    }
}

@media(max-width: 768px) {
    .contact-page {
        width: 92%;
    }

    .vocational-cta {
        grid-template-columns: 1fr;
        text-align: center;
        margin: -18px auto 45px;
        padding: 28px 22px;
    }

    .vocational-main-icon {
        margin: 0 auto;
    }

    .vocational-copy p {
        margin: 0 auto;
    }

    .vocational-benefits {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .vocational-benefit {
        justify-content: center;
    }

    .vocational-btn {
        width: 100%;
    }

    .contact-hero {
        height: 360px;
    }

    .contact-hero-content {
        left: 25px;
        right: 25px;
        bottom: 30px;
    }

    .contact-hero-content h1 {
        font-size: 2.8rem;
    }

    .contact-hero-card {
        padding: 18px;
    }

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

    .admission-steps h2 {
        font-size: 2rem;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-btn {
        grid-column: auto;
        width: 100%;
    }

    .form-card,
    .contact-line-card {
        padding: 26px;
    }
}


:root{
    --cut-azul:#26529C;
    --cut-verde:#0e8a4b;
    --cut-verde-claro:#EDF4EF;
    --cut-texto:#111;
    --cut-sombra:0 14px 38px rgba(0,0,0,.06);
    --cut-sombra-hover:0 20px 48px rgba(0,0,0,.10);
}

/* Animaciones generales */
.cut-reveal{
    opacity:0;
    transform:translateY(45px);
    transition:opacity .75s ease, transform .75s ease;
}

.cut-reveal.cut-visible{
    opacity:1;
    transform:translateY(0);
}

/* =========================
   PÁGINAS DE CARRERAS
========================= */

.career-hero{
    position:relative;
    width:min(96%,1600px);
    max-width:1600px;
    height:640px;
    margin:0 auto 80px;
    border-radius:34px;
    overflow:hidden;
    padding:80px;
    display:flex;
    align-items:center;
    box-shadow:0 18px 45px rgba(0,0,0,.10);
}

.career-hero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
}

.career-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.50) 45%, rgba(0,0,0,.20) 100%);
    z-index:2;
}

.career-overlay{
    position:relative;
    z-index:3;
    max-width:720px;
    color:white;
}

.career-overlay::before{
    content:"Oferta Académica CUT";
    display:inline-flex;
    padding:9px 18px;
    border-radius:999px;
    background:rgba(14,138,75,.28);
    color:white;
    font-size:.9rem;
    font-weight:700;
    margin-bottom:22px;
    backdrop-filter:blur(8px);
}

.career-overlay h1{
    font-size:clamp(2.5rem,4vw,4.8rem);
    line-height:1.08;
    margin-bottom:24px;
    font-weight:800;
}

.career-overlay p{
    font-size:1.15rem;
    line-height:1.9;
    max-width:700px;
}

.career-info{
    width:min(94%,1400px);
    margin:0 auto;
}

.info-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;
    margin:0 auto 55px;
    padding:0;
}

.info-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

.info-card{
    position:relative;
    min-height:330px;
    background:white;
    border-radius:28px;
    padding:38px 28px;
    border:1px solid rgba(38,82,156,.08);
    box-shadow:var(--cut-sombra);
    overflow:hidden;
    transition:.35s ease;
}

.info-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:7px;
    background:linear-gradient(90deg,var(--cut-verde),rgba(14,138,75,.25));
    opacity:.85;
}

.info-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--cut-sombra-hover);
}

.info-header{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:24px;
}

.info-icon{
    width:76px;
    height:76px;
    border-radius:50%;
    background:var(--cut-verde-claro);
    color:var(--cut-azul);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:2rem;
    flex-shrink:0;
    transition:.35s ease;
}

.info-card:hover .info-icon{
    color:var(--cut-verde);
    transform:scale(1.08);
}

.info-card h3{
    font-size:1.55rem;
    color:var(--cut-azul);
    margin-bottom:10px;
    font-weight:800;
}

.info-line{
    width:150px;
    height:2px;
    background:linear-gradient(90deg,rgba(14,138,75,.55),transparent);
}

.info-tag{
    min-width:170px;
    width:max-content;
    max-width:100%;
    height:auto;
    min-height:42px;
    padding:8px 18px;
    margin:22px auto;
    border-radius:999px;
    border:1px solid rgba(14,138,75,.22);
    background:var(--cut-verde-claro);
    color:#123f2f;
    font-weight:700;
    text-align:center;
}

.info-card p{
    color:#222;
    font-size:.98rem;
    line-height:1.8;
    text-align:center;
    margin:0;
}

.feature-grid{
    width:min(94%,1400px);
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    padding:0;
    margin:0 auto 70px;
}

.feature-card{
    background:white;
    border-radius:28px;
    padding:42px;
    border:1px solid rgba(38,82,156,.08);
    box-shadow:var(--cut-sombra);
    transition:.35s ease;
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--cut-sombra-hover);
}

.feature-top{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:25px;
}

.feature-icon{
    width:78px;
    height:78px;
    border-radius:50%;
    background:var(--cut-verde-claro);
    color:var(--cut-azul);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:2rem;
    flex-shrink:0;
}

.feature-card h3{
    color:var(--cut-azul);
    font-size:1.8rem;
    line-height:1.2;
    font-weight:800;
}

.feature-line{
    width:100%;
    max-width:360px;
    height:2px;
    margin-top:12px;
    background:linear-gradient(90deg,rgba(14,138,75,.55),transparent);
}

.feature-card ul{
    list-style:none;
    padding:0;
    margin:0;
}

.feature-card li{
    position:relative;
    padding-left:34px;
    margin-bottom:16px;
    color:var(--cut-texto);
    font-size:1.05rem;
    line-height:1.7;
}

.feature-card li::before{
    content:"\f00c";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    left:0;
    top:2px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--cut-verde);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.72rem;
}

.study-plan{
    position:relative;
    width:min(94%,1400px);
    margin:80px auto;
    padding:60px 35px;
    background:linear-gradient(135deg,var(--cut-verde-claro),#f8fbf9);
    border-radius:34px;
    text-align:center;
    overflow:hidden;
    box-shadow:var(--cut-sombra);
}

.study-plan::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(14,138,75,.10);
    left:-70px;
    top:-80px;
}

.study-plan i{
    position:relative;
    z-index:1;
    width:76px;
    height:76px;
    border-radius:50%;
    background:white;
    color:var(--cut-azul);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    margin-bottom:18px;
}

.study-plan h2{
    position:relative;
    z-index:1;
    color:var(--cut-azul);
    font-size:2.2rem;
    margin-bottom:22px;
}

.plan-btn{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:220px;
    min-height:52px;
    padding:0 30px;
    background:var(--cut-verde);
    color:white;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
    transition:.35s ease;
}

.plan-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(14,138,75,.28);
}

/* CONTACTO UNIFICADO */

.contact-page{
    width:min(94%,1500px);
    margin:0 auto;
}

.contact-hero{
    border-radius:34px;
    box-shadow:0 18px 45px rgba(0,0,0,.10);
    margin:0 auto 70px;
}

.contact-hero-card{
    background:rgba(14,138,75,.35);
    border:1px solid rgba(255,255,255,.18);
}

.admission-steps{
    background:linear-gradient(135deg,var(--cut-verde-claro),#f8fbf9);
    border-radius:34px;
    box-shadow:var(--cut-sombra);
}

.step-card,
.form-card,
.contact-line-card{
    border:1px solid rgba(38,82,156,.08);
    box-shadow:var(--cut-sombra);
}

.step-card:hover,
.form-card:hover,
.contact-line-card:hover{
    box-shadow:var(--cut-sombra-hover);
}

.section-heading i,
.contact-line-title i,
.step-icon{
    background:var(--cut-verde-claro);
    color:var(--cut-azul);
}

.contact-btn{
    background:var(--cut-verde);
}

/* PLANTEL */

.horarios-mapa{
    grid-template-columns:300px 1fr !important;
    align-items:start !important;
    gap:30px !important;
}

.horario-box{
    height:auto !important;
    min-height:auto !important;
    justify-content:flex-start !important;
    padding:32px 28px !important;
}

.horario-box h2{
    font-size:2.2rem !important;
    margin-bottom:22px !important;
}

.horario-box ul{
    margin:18px 0 20px !important;
    padding-left:18px !important;
    line-height:1.45 !important;
}

.horario-box img{
    width:78% !important;
    max-width:185px !important;
    margin:18px auto 0 !important;
}

.mapa-box iframe{
    min-height:460px;
}

.contact-box a{
    color:#444;
    text-decoration:none;
    transition:.3s ease;
}

.contact-box a:hover{
    color:var(--cut-verde);
}

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

@media(max-width:1100px){
    .info-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .feature-grid,
    .beneficios,
    .plantel-mv,
    .horarios-mapa,
    .contact-main-section{
        grid-template-columns:1fr !important;
    }
}

@media(max-width:768px){
    .career-hero,
    .contact-hero,
    .plantel-hero{
        width:92%;
        height:440px;
        padding:34px;
        border-radius:24px;
        margin:0 auto 55px;
    }

    .career-overlay h1,
    .contact-hero-content h1,
    .plantel-hero-content h1{
        font-size:2.4rem;
    }

    .career-overlay p,
    .contact-hero-card p,
    .plantel-hero-content p{
        font-size:.98rem;
    }

    .info-grid,
    .feature-grid,
    .steps-grid,
    .inst-grid,
    .valores-grid,
    .galeria-grid{
        grid-template-columns:1fr !important;
    }

    .info-card,
    .feature-card,
    .step-card,
    .form-card,
    .contact-line-card,
    .plantel-card,
    .horario-box,
    .mapa-box{
        padding:28px !important;
        border-radius:24px !important;
    }

    .study-plan,
    .porque-cut,
    .instalaciones-cut,
    .admission-steps{
        width:92%;
        padding:45px 24px !important;
        border-radius:26px !important;
        margin:60px auto;
    }

    .mapa-box iframe{
        min-height:330px;
    }
}


/* ======================================================
   RESPONSIVE OPTIMIZADO GENERAL CUT
   Mejora tablet/móvil sin romper la disposición visual.
====================================================== */

/* Tablet grande */
@media (max-width: 1180px){

    .career-hero,
    .contact-hero{
        width:min(94%, 1200px);
        height:560px;
        padding:58px;
    }

    .career-content,
    .career-lists,
    .contact-main-section{
        grid-template-columns:1fr;
        gap:28px;
    }

    .career-info{
        grid-template-columns:repeat(2, minmax(240px, 1fr));
    }

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

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

/* Tablet */
@media (max-width: 900px){

    body{
        overflow-x:hidden;
    }

    .career-hero,
    .contact-hero,
    .plantel-hero{
        height:500px;
        border-radius:26px;
        margin-left:auto;
        margin-right:auto;
    }

    .career-overlay h1,
    .contact-hero-content h1,
    .hero-info h1{
        font-size:clamp(2.4rem, 7vw, 3.4rem);
        line-height:1.08;
    }

    .career-overlay p,
    .contact-hero-card p,
    .hero-info p{
        font-size:1rem;
        line-height:1.7;
    }

    .career-content,
    .career-info,
    .career-lists,
    .mision-vision,
    .institucional,
    .plantel-mv,
    .contact-main-section,
    .horarios-mapa{
        grid-template-columns:1fr;
    }

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

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

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

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

    .mapa-box iframe{
        min-height:380px;
    }

    .horario-box{
        max-width:560px;
        margin:0 auto;
    }
}

/* Teléfono */
@media (max-width: 640px){

    .career-hero,
    .contact-hero,
    .plantel-hero{
        width:100%;
        height:430px;
        border-radius:0;
        margin:0 0 46px;
        padding:28px;
    }

    .career-overlay,
    .contact-hero-content,
    .hero-info{
        left:24px;
        right:24px;
        bottom:34px;
        max-width:none;
    }

    .career-overlay h1,
    .contact-hero-content h1,
    .hero-info h1{
        font-size:2.35rem;
    }

    .contact-hero-card{
        max-width:100%;
        padding:18px;
    }

    .career-content,
    .career-info,
    .career-lists,
    .study-plan,
    .admission-steps,
    .contact-main-section,
    .porque-cut,
    .instalaciones-cut,
    .galeria-cut,
    .valores-cut{
        margin-top:44px;
        margin-bottom:44px;
    }

    .career-card,
    .info-box,
    .list-box,
    .form-card,
    .contact-line-card,
    .inst-card,
    .plantel-card,
    .horario-box,
    .mapa-box{
        padding:24px;
        border-radius:22px;
    }

    .career-info,
    .valores-grid,
    .inst-grid,
    .galeria-grid,
    .steps-grid,
    .contact-form{
        grid-template-columns:1fr;
    }

    .valores-grid,
    .inst-grid{
        gap:16px;
    }

    .valor,
    .valor-item,
    .inst-item{
        padding:26px 18px;
    }

    .porque-cut,
    .instalaciones-cut,
    .admission-steps{
        padding:44px 22px;
        border-radius:24px;
    }

    .porque-cut h2,
    .instalaciones-cut h2,
    .galeria-cut h2,
    .plantel-section-title h2,
    .valores-cut h2,
    .admission-steps h2{
        font-size:2rem;
        line-height:1.15;
    }

    .mapa-box iframe{
        min-height:320px;
        border-radius:18px;
    }

    .horario-box h2,
    .mapa-box h2{
        font-size:2rem;
    }

    .horario-box img{
        max-width:180px;
    }

    .galeria-grid img{
        height:220px;
    }

    .lightbox img{
        max-width:92%;
        max-height:78vh;
    }

    .cerrar-lightbox{
        top:18px;
        right:26px;
        font-size:3rem;
    }

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

/* Teléfono pequeño */
@media (max-width: 420px){

    .career-hero,
    .contact-hero,
    .plantel-hero{
        height:390px;
    }

    .career-overlay h1,
    .contact-hero-content h1,
    .hero-info h1{
        font-size:2rem;
    }

    .galeria-grid img{
        height:190px;
    }

    .mapa-box iframe{
        min-height:280px;
    }
}


/* ======================================================
   AJUSTES NUEVOS: BOTÓN CUENTA, DROPDOWN POR CLIC Y AVISO
====================================================== */

/* Botón "Accede a tu cuenta" en navbar */
.account-nav-item{
    display:flex;
    align-items:center;
}

.nav-links .account-btn{
    background:#0e8a4b;
    color:#fff !important;
    padding:2px 22px;
    border-radius:30px;
    font-weight:700;
    box-shadow:0 8px 18px rgba(14,138,75,.22);
    transition:.35s ease;
    white-space:nowrap;
}

.nav-links .account-btn:hover{
    background:#0b6f3d;
    color:#fff !important;
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(14,138,75,.30);
}

/* El dropdown deja de abrirse por hover */
.dropdown:hover > .dropdown-menu{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(12px);
}

/* El dropdown ahora abre solo cuando JS agrega .open */
.dropdown.open > .dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

/* Mejora visual del dropdown */
.dropdown-menu{
    padding:8px 0;
    transform:translateY(12px);
    pointer-events:none;
    z-index:1500;
}

.dropdown-menu a{
    color:#26529C;
    font-size:13px;
    font-weight:600;
}

.dropdown-menu a:hover{
    background:#EDF4EF;
    color:#0e8a4b;
}

/* Flecha animada cuando el dropdown está abierto */
.dropdown > a i{
    transition:.3s ease;
}

.dropdown.open > a i{
    transform:rotate(180deg);
    color:#0e8a4b;
}

/* Enlace inferior a aviso de privacidad */
.footer-legal{
    background:#fff;
    border-top:1px solid rgba(0,0,0,.06);
    padding:14px 20px 22px;
    text-align:center;
}

.footer-legal a{
    color:#26529C;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    transition:.3s ease;
}

.footer-legal a:hover{
    color:#0e8a4b;
}

/* Página Aviso de privacidad */
.privacy-page{
    width:min(92%,1200px);
    margin:0 auto;
    padding:130px 0 70px;
}

.privacy-hero{
    background:linear-gradient(135deg,#EDF4EF,#ffffff);
    border-radius:34px;
    padding:70px;
    margin-bottom:45px;
    position:relative;
    overflow:hidden;
    box-shadow:0 12px 32px rgba(0,0,0,.05);
}

.privacy-hero::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(14,138,75,.10);
    top:-90px;
    right:-70px;
}

.privacy-hero span{
    color:#0e8a4b;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
    position:relative;
    z-index:2;
}

.privacy-hero h1{
    color:#26529C;
    font-size:3.6rem;
    margin:16px 0;
    position:relative;
    z-index:2;
}

.privacy-hero p{
    color:#111;
    font-size:1.1rem;
    line-height:1.8;
    max-width:760px;
    position:relative;
    z-index:2;
}

.privacy-content{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
}

.privacy-card{
    background:#fff;
    border-radius:24px;
    padding:34px;
    border:1px solid rgba(38,82,156,.08);
    box-shadow:0 8px 24px rgba(0,0,0,.045);
}

.privacy-card h2{
    color:#26529C;
    font-size:1.55rem;
    margin-bottom:14px;
}

.privacy-card p{
    color:#111;
    font-size:1rem;
    line-height:1.85;
}

.privacy-highlight{
    background:#EDF4EF;
    border:none;
    text-align:center;
}

.privacy-highlight a{
    display:inline-block;
    margin-top:18px;
    background:#0e8a4b;
    color:#fff;
    text-decoration:none;
    padding:13px 24px;
    border-radius:28px;
    font-weight:700;
    transition:.3s ease;
}

.privacy-highlight a:hover{
    background:#0b6f3d;
    transform:translateY(-3px);
}

/* Responsive de los nuevos ajustes */
@media(max-width:900px){

    .nav-links .account-btn{
        width:100%;
        display:block;
        text-align:center;
        padding:13px 18px;
    }

    .dropdown-menu{
        position:static;
        width:100%;
        box-shadow:none;
        border-radius:14px;
        background:#F8FBF9;
        max-height:0;
        overflow:hidden;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        padding:0;
        margin-top:0;
        transform:none;
        transition:max-height .35s ease, padding .35s ease, margin .35s ease;
    }

    .dropdown:hover > .dropdown-menu{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
    }

    .dropdown.open > .dropdown-menu{
        max-height:900px;
        padding:8px 0;
        margin-top:10px;
    }

    .dropdown-menu a{
        padding:12px 16px;
    }

    .privacy-page{
        width:92%;
        padding-top:115px;
    }

    .privacy-hero{
        padding:45px 28px;
        border-radius:26px;
    }

    .privacy-hero h1{
        font-size:2.4rem;
    }

    .privacy-card{
        padding:26px;
    }
}

@media(max-width:520px){

    .privacy-hero h1{
        font-size:2rem;
    }

    .privacy-hero p,
    .privacy-card p{
        font-size:.95rem;
    }
}

/* ======================================================
   AJUSTES FINALES CUT: DROPDOWN COMPACTO + INDEX CTA RESPONSIVE
====================================================== */

/* Tarjetas nuevas del index que enlazan a WhatsApp */
.intro-whatsapp-card{
    text-decoration:none;
    color:#111;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(14,138,75,.12);
}

.intro-whatsapp-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(14,138,75,.10), rgba(237,244,239,.55));
    opacity:.9;
    z-index:0;
}

.intro-whatsapp-card span,
.intro-whatsapp-card p{
    position:relative;
    z-index:1;
}

.intro-whatsapp-card span{
    display:block;
    color:#26529C;
    font-size:1.35rem;
    font-weight:800;
    margin-bottom:14px;
}

.intro-whatsapp-card:hover{
    transform:translateY(-10px);
    box-shadow:0 16px 36px rgba(0,0,0,.10);
}

.intro-whatsapp-card:hover span{
    color:#0e8a4b;
}

/* Menú desplegable institucional y con scroll */
.dropdown{
    position:relative;
}

.dropdown > a{
    cursor:pointer;
}

.dropdown > a:focus{
    outline:none;
}

.dropdown > a:focus-visible{
    outline:2px solid rgba(14,138,75,.28);
    outline-offset:5px;
    border-radius:10px;
}

.dropdown-menu{
    position:absolute;
    top:calc(100% + 12px);
    left:50%;
    transform:translateX(-50%) translateY(12px) !important;
    width:340px;
    max-height:330px;
    overflow-y:auto;
    overflow-x:hidden;
    background:#fff;
    padding:14px 12px;
    border-radius:20px;
    border:1px solid rgba(38,82,156,.10);
    box-shadow:0 18px 45px rgba(0,0,0,.14);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:3000;
    transition:opacity .28s ease, visibility .28s ease, transform .28s ease;
    scrollbar-width:thin;
    scrollbar-color:#0e8a4b #EDF4EF;
}

.dropdown-menu::-webkit-scrollbar{
    width:8px;
}

.dropdown-menu::-webkit-scrollbar-track{
    background:#EDF4EF;
    border-radius:10px;
}

.dropdown-menu::-webkit-scrollbar-thumb{
    background:#0e8a4b;
    border-radius:10px;
}

.dropdown:hover > .dropdown-menu{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

.dropdown.open > .dropdown-menu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) !important;
}

.dropdown-menu li{
    list-style:none;
}

.dropdown-menu a{
    display:flex;
    align-items:center;
    min-height:46px;
    height:auto !important;
    padding:11px 14px !important;
    margin:3px 0;
    border-radius:13px;
    color:#26529C;
    font-size:.88rem;
    font-weight:700;
    line-height:1.25;
    white-space:normal;
    text-decoration:none;
    transition:background .25s ease, color .25s ease, transform .25s ease;
}

.dropdown-menu a:hover{
    background:#EDF4EF;
    color:#0e8a4b;
    transform:translateX(4px);
}

/* Responsive más limpio para menú, dropdown e index */
@media(max-width:1100px){

    .nav-links{
        gap:22px;
    }

    .nav-links li a{
        font-size:13px;
    }

    .nav-links .account-btn{
        padding:2px 18px;
        font-size:13px;
    }

}

@media(max-width:900px){

    .navbar{
        padding:10px 6%;
    }

    .nav-links{
        position:fixed !important;
        top:82px !important;
        right:-100%;
        width:min(88%,390px);
        max-height:calc(100vh - 105px);
        overflow-y:auto;
        background:#fff;
        border-radius:24px 0 0 24px;
        padding:24px !important;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        box-shadow:0 20px 45px rgba(0,0,0,.18);
        transition:right .35s ease;
        z-index:2500;
    }

    .nav-links.active{
        right:0;
    }

    .nav-links li{
        width:100%;
    }

    .nav-links li a{
        width:100%;
        height:auto !important;
        min-height:48px;
        padding:13px 14px;
        border-radius:15px;
        justify-content:space-between;
        font-size:.95rem;
        line-height:1.25;
    }

    .nav-links li a:hover{
        background:#EDF4EF;
    }

    .nav-links .account-btn{
        margin-top:10px;
        width:100%;
        min-height:48px;
        justify-content:center !important;
        padding:12px 18px !important;
        font-size:.95rem;
    }

    .dropdown-menu{
        position:static !important;
        width:100% !important;
        max-height:0;
        overflow:hidden;
        padding:0 !important;
        margin:0;
        transform:none !important;
        border:none;
        box-shadow:none;
        border-radius:18px;
        background:#EDF4EF;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transition:max-height .35s ease, padding .35s ease, margin .35s ease;
    }

    .dropdown:hover > .dropdown-menu{
        max-height:0;
        padding:0 !important;
        margin:0;
    }

    .dropdown.open > .dropdown-menu{
        max-height:48vh;
        overflow-y:auto;
        padding:10px !important;
        margin:8px 0 4px;
        transform:none !important;
    }

    .dropdown-menu a{
        background:#fff;
        min-height:auto;
        padding:12px 14px !important;
        margin:0 0 7px;
        font-size:.9rem;
    }

    .intro{
        padding:70px 6%;
    }

    .intro-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:24px;
    }

    .intro-card{
        padding:30px;
    }

}

@media(max-width:640px){

    .nav-links{
        width:92%;
        top:78px !important;
        padding:20px !important;
    }

    .intro{
        padding:55px 6%;
    }

    .intro h2{
        font-size:2rem;
        margin-bottom:32px;
    }

    .intro-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .intro-card{
        padding:26px;
        border-radius:18px;
    }

    .intro-whatsapp-card span{
        font-size:1.15rem;
    }

    .dropdown.open > .dropdown-menu{
        max-height:42vh;
    }

}

/* ======================================================
   REDISEÑO FINAL INDEX: SERVICIOS INSTITUCIONALES
====================================================== */

.intro-whatsapp-card.service-access-card{
    min-height:330px;
    padding:34px 30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:14px;
    border-radius:22px;
    border:1px solid rgba(38,82,156,.08);
    background:#fff;
    color:#111;
    text-decoration:none;
    box-shadow:0 10px 28px rgba(0,0,0,.06);
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.intro-whatsapp-card.service-access-card::before{
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    border-radius:50%;
    top:-80px;
    right:-70px;
    background:#EDF4EF;
    opacity:.9;
    z-index:-1;
}

.intro-whatsapp-card.service-access-card::after{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    border-radius:50%;
    left:-35px;
    bottom:-35px;
    background:rgba(38,82,156,.07);
    z-index:-1;
}

.service-access-card .service-icon{
    width:112px;
    height:112px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:8px;
    background:linear-gradient(135deg,#EDF4EF,#dff1e7);
    box-shadow:0 12px 28px rgba(14,138,75,.12);
    transition:.35s ease;
}

.service-access-card .service-icon i{
    font-size:3rem;
    color:#0e8a4b;
    transition:.35s ease;
}

.service-access-card.service-payments .service-icon{
    background:linear-gradient(135deg,#eef4ff,#EDF4EF);
    box-shadow:0 12px 28px rgba(38,82,156,.10);
}

.service-access-card.service-payments .service-icon i{
    color:#26529C;
}

.intro-whatsapp-card.service-access-card h3{
    color:#26529C;
    font-size:1.55rem;
    font-weight:800;
    margin:4px 0 4px;
    line-height:1.2;
}

.intro-whatsapp-card.service-access-card p{
    color:#111;
    font-size:1rem;
    line-height:1.65;
    max-width:390px;
    margin:0 auto;
}

.intro-whatsapp-card.service-access-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 42px rgba(0,0,0,.12);
    border-color:rgba(14,138,75,.28);
}

.intro-whatsapp-card.service-access-card:hover .service-icon{
    transform:translateY(-6px) scale(1.04);
    background:#0e8a4b;
}

.intro-whatsapp-card.service-access-card:hover .service-icon i{
    color:#fff;
}

.intro-whatsapp-card.service-access-card:hover h3{
    color:#0e8a4b;
}

@media(max-width:1024px){
    .intro-whatsapp-card.service-access-card{
        min-height:300px;
        padding:30px 24px;
    }

    .service-access-card .service-icon{
        width:96px;
        height:96px;
    }

    .service-access-card .service-icon i{
        font-size:2.55rem;
    }
}

@media(max-width:640px){
    .intro-whatsapp-card.service-access-card{
        min-height:auto;
        padding:28px 22px;
        border-radius:20px;
    }

    .service-access-card .service-icon{
        width:88px;
        height:88px;
    }

    .service-access-card .service-icon i{
        font-size:2.3rem;
    }

    .intro-whatsapp-card.service-access-card h3{
        font-size:1.35rem;
    }

    .intro-whatsapp-card.service-access-card p{
        font-size:.95rem;
    }
}

/* ======================================================
   REDISEÑO SUAVE INDEX CUT: PROFUNDIDAD + MICROANIMACIONES
   Mantiene la misma estructura visual, pero agrega capas,
   sombras, gradientes institucionales y movimiento ligero.
====================================================== */

:root{
    --cut-blue:#26529C;
    --cut-green:#0e8a4b;
    --cut-green-2:#13a45c;
    --cut-soft:#EDF4EF;
    --cut-card:#ffffff;
    --cut-ink:#101828;
    --cut-muted:#475467;
    --cut-radius:28px;
    --cut-shadow-soft:0 12px 34px rgba(16,24,40,.08);
    --cut-shadow-strong:0 24px 60px rgba(16,24,40,.14);
}

html{
    scroll-behavior:smooth;
}

body{
    background:
        radial-gradient(circle at 8% 12%, rgba(14,138,75,.075), transparent 28%),
        radial-gradient(circle at 92% 6%, rgba(38,82,156,.075), transparent 30%),
        linear-gradient(180deg,#ffffff 0%, #f7faf8 52%, #ffffff 100%);
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(38,82,156,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38,82,156,.035) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.35), transparent 58%);
    z-index:-1;
}

/* NAVBAR con más profundidad sin cambiar su estructura */
.navbar{
    border-bottom:1px solid rgba(38,82,156,.08);
    box-shadow:0 10px 30px rgba(16,24,40,.06);
}

.navbar::after{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    bottom:-1px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(14,138,75,.35), transparent);
    opacity:.55;
}

.nav-links > li > a:not(.account-btn){
    position:relative;
    padding-inline:2px;
    transition:color .25s ease, transform .25s ease;
}

.nav-links > li > a:not(.account-btn)::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:4px;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--cut-green),var(--cut-blue));
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .28s ease;
}

.nav-links > li > a:not(.account-btn):hover{
    transform:translateY(-1px);
}

.nav-links > li > a:not(.account-btn):hover::after,
.dropdown.open > a::after{
    transform:scaleX(1);
}

/* HERO principal: misma idea de carrusel, con aspecto menos plano */
.hero{
    width:min(94%, 1560px);
    height:min(78vh, 740px);
    min-height:540px;
    margin:26px auto 0;
    border-radius:34px;
    box-shadow:var(--cut-shadow-strong);
    border:1px solid rgba(255,255,255,.75);
    background:#0b1220;
    isolation:isolate;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(14,138,75,.28), rgba(38,82,156,.26));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    z-index:25;
}

.slide{
    transform:scale(1.035);
    transition:opacity 1s ease, transform 5.8s ease;
}

.slide.active{
    transform:scale(1);
}

.overlay{
    background:
        linear-gradient(90deg, rgba(4,12,22,.42), rgba(4,12,22,.14) 45%, rgba(4,12,22,.32)),
        radial-gradient(circle at 78% 18%, rgba(14,138,75,.18), transparent 36%);
}

.hero-btn{
    background:rgba(255,255,255,.20);
    border:1px solid rgba(255,255,255,.36);
    box-shadow:0 12px 28px rgba(0,0,0,.20);
}

.hero-btn:hover{
    background:rgba(255,255,255,.34);
    box-shadow:0 18px 36px rgba(0,0,0,.26);
}

.dot{
    box-shadow:0 0 0 1px rgba(255,255,255,.35);
}

.dot.active{
    box-shadow:0 8px 18px rgba(0,0,0,.18);
}

/* Secciones con tarjeta ambiental, conservando el layout */
.intro,
.future-events{
    position:relative;
}

.intro h2,
.future-events h2{
    position:relative;
    width:max-content;
    max-width:100%;
}

.intro h2::after,
.future-events h2::after{
    content:"";
    display:block;
    width:82px;
    height:5px;
    border-radius:999px;
    margin-top:12px;
    background:linear-gradient(90deg,var(--cut-green),rgba(38,82,156,.55));
}

.intro-grid{
    align-items:stretch;
}

.intro-card{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(38,82,156,.08);
    box-shadow:var(--cut-shadow-soft);
    transform:translateZ(0);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.intro-card::after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    right:-74px;
    top:-74px;
    border-radius:50%;
    background:linear-gradient(135deg, rgba(14,138,75,.13), rgba(38,82,156,.08));
    pointer-events:none;
    transition:transform .45s ease, opacity .45s ease;
}

.intro-card:hover{
    transform:translateY(-9px);
    box-shadow:var(--cut-shadow-strong);
    border-color:rgba(14,138,75,.22);
}

.intro-card:hover::after{
    transform:scale(1.18);
    opacity:.9;
}

.intro-card p,
.intro-card h3,
.intro-card .service-icon{
    position:relative;
    z-index:1;
}

/* Tarjetas de servicios con una lectura más clara */
.intro-whatsapp-card.service-access-card{
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94)),
        radial-gradient(circle at 100% 0%, rgba(14,138,75,.16), transparent 42%);
    box-shadow:var(--cut-shadow-soft);
}

.intro-whatsapp-card.service-access-card::before{
    filter:blur(.2px);
}

.service-access-card .service-icon{
    box-shadow:0 16px 34px rgba(14,138,75,.16), inset 0 0 0 1px rgba(255,255,255,.6);
}

.intro-whatsapp-card.service-access-card:hover .service-icon{
    animation:cutIconPulse .8s ease both;
}

@keyframes cutIconPulse{
    0%{ transform:translateY(-6px) scale(1.04); }
    45%{ transform:translateY(-8px) scale(1.10); }
    100%{ transform:translateY(-6px) scale(1.04); }
}

/* Eventos: siguen siendo flip cards, pero con luz, borde y volumen */
.flip-card{
    filter:drop-shadow(0 18px 34px rgba(16,24,40,.12));
}

.flip-card-inner{
    transition:transform .9s cubic-bezier(.2,.75,.2,1);
}

.flip-card-front,
.flip-card-back{
    border:1px solid rgba(255,255,255,.55);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    overflow:hidden;
}

.flip-card-front::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 54%, rgba(0,0,0,.32));
    pointer-events:none;
}

.flip-card-back{
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.20), transparent 35%),
        linear-gradient(135deg,#0e8a4b,#0b6f3d 58%,#26529C);
}

.flip-card-back h3{
    font-size:1.6rem;
    line-height:1.16;
    margin-bottom:18px;
}

.flip-card-back p{
    line-height:1.7;
}

/* Footer: cierre más institucional */
.footer{
    position:relative;
}

.footer-social{
    background:linear-gradient(90deg,#0b6f3d,#0e8a4b,#26529C);
}

.footer-contact{
    background:linear-gradient(180deg,#ffffff,#f8fbf9);
}

.contact-box{
    background:rgba(255,255,255,.92);
    box-shadow:var(--cut-shadow-soft);
}

/* Animación on-scroll asignada por script.js */
.cut-reveal{
    opacity:0;
    transform:translate3d(0,34px,0) scale(.985);
    transition:
        opacity .76s ease,
        transform .76s cubic-bezier(.2,.75,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;
    transition-delay:var(--cut-delay, 0ms);
    will-change:opacity, transform;
}

.cut-reveal.cut-visible{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
}

/* Accesibilidad: si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

    .cut-reveal{
        opacity:1 !important;
        transform:none !important;
    }
}

/* Responsive del rediseño: carrusel completo, sin cortar imagen en móvil */
@media(max-width:900px){
    body{
        padding-top:92px;
    }

    .navbar::after{
        left:6%;
        right:6%;
    }

    .hero{
        width:88%;
        height:auto;
        min-height:0;
        aspect-ratio:16 / 9;
        margin:34px auto 0;
        border-radius:24px;
    }

    .slide{
        background-size:contain;
        background-repeat:no-repeat;
        background-color:#05070b;
        transform:none;
    }

    .slide.active{
        transform:none;
    }

    .overlay{
        background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));
    }

    .hero-btn{
        width:48px;
        height:48px;
    }

    .hero-dots{
        bottom:14px;
    }
}

@media(max-width:640px){
    body{
        padding-top:88px;
    }

    .navbar{
        padding:10px 6%;
    }

    .logo img{
        width:128px;
    }

    .hero{
        width:88%;
        margin-top:24px;
        border-radius:18px;
        box-shadow:0 16px 34px rgba(16,24,40,.14);
    }

    .hero-btn{
        width:42px;
        height:42px;
    }

    .prev{ left:12px; }
    .next{ right:12px; }

    .dot{
        width:10px;
        height:10px;
    }

    .dot.active{
        width:28px;
    }

    .future-events{
        padding-top:20px;
    }
}

/* Mantiene los efectos hover aun cuando los elementos ya aparecieron con scroll reveal */
.intro-card.cut-visible:hover,
.info-card.cut-visible:hover,
.feature-card.cut-visible:hover,
.step-card.cut-visible:hover,
.form-card.cut-visible:hover,
.contact-line-card.cut-visible:hover,
.inst-card.cut-visible:hover,
.valor.cut-visible:hover,
.inst-item.cut-visible:hover,
.contact-box.cut-visible:hover{
    transform:translateY(-8px) scale(1);
}

.footer-social a.cut-visible:hover{
    transform:translateY(-5px) scale(1.1);
}

.galeria-grid img.cut-visible:hover{
    transform:scale(1.04);
}