:root{

--green:#063b2d;
--green-dark:#04291f;
--gold:#b58a35;
--cream:#faf8f2;
--text:#26332d;
--gray:#666;

}


*{

box-sizing:border-box;
margin:0;
padding:0;

}


html{

scroll-behavior:smooth;

}


body{

font-family:Arial, Helvetica, sans-serif;
color:var(--text);
background:white;

}


.container{

width:90%;
max-width:1200px;
margin:auto;

}



/* ==========================
HEADER
========================== */


.topbar{

background:white;
height:95px;
display:flex;
align-items:center;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 5px 20px rgba(0,0,0,.08);

}



.nav{

display:flex;
align-items:center;
justify-content:space-between;
height:95px;

}



.brand{

display:flex;
align-items:center;
gap:15px;
text-decoration:none;

}



.brand img{

width:65px;
height:65px;
object-fit:contain;

}



.brand-text{

display:flex;
flex-direction:column;

}



.brand-text strong{

font-family:Georgia,serif;
font-size:20px;
color:var(--green);

}



.brand-text span{

font-size:13px;
color:#777;

}



.nav-links{

display:flex;
align-items:center;
gap:35px;

}



.nav-links a{

text-decoration:none;
font-weight:600;
font-size:16px;
color:var(--green);
transition:.3s;

}



.nav-links a:hover{

color:var(--gold);

}



.btn{

display:inline-block;
padding:14px 32px;
border-radius:35px;
font-weight:bold;
text-decoration:none;

}



.btn-primary{

background:var(--green);
color:white;

}



.btn-primary:hover{

background:var(--green-dark);

}





/* ==========================
HERO
========================== */


.hero{

background:var(--cream);
padding:90px 0;
text-align:center;

}



.hero h1{

font-family:Georgia,serif;
font-size:58px;
line-height:1.15;
color:var(--green);
margin-bottom:20px;

}



.hero p{

font-size:22px;
color:#555;
max-width:900px;
margin:auto;

}



.hero img{

width:280px;
max-width:70%;
margin-top:55px;

}





/* ==========================
SECCIONES
========================== */


.section{

padding:80px 0;

}



.section h2{

font-family:Georgia,serif;
font-size:42px;
color:var(--green);
margin-bottom:25px;

}



.section p{

font-size:18px;
line-height:1.8;
max-width:850px;

}




/* ==========================
PROGRAMAS
========================== */


.programas-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;

}



.card-programa{

background:white;
border-radius:25px;
overflow:hidden;
box-shadow:0 12px 35px rgba(0,0,0,.10);

}



.card-programa img{

width:100%;
height:260px;
object-fit:contain;
background:#f1f2eb;

}



.card-content{

padding:30px;

}



.card-content h2{

font-family:Georgia,serif;
font-size:25px;
color:var(--green);
margin-bottom:15px;

}



.card-content p{

color:#555;

}





/* ==========================
CARRUSEL
========================== */


.carousel{

display:flex;
gap:30px;
overflow-x:auto;
scroll-behavior:smooth;
padding-bottom:20px;

}



.carousel::-webkit-scrollbar{

height:8px;

}



.carousel article{

min-width:360px;

}





/* ==========================
LISTAS
========================== */


ul{

padding-left:25px;
font-size:18px;

}



li{

margin-bottom:10px;

}





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


footer{

background:var(--green);
color:white;
padding:45px 0;
margin-top:80px;

}



footer p{

margin:5px 0;

}





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


@media(max-width:1000px){


.nav{

flex-direction:column;
height:auto;
padding:20px 0;
gap:20px;

}


.topbar{

height:auto;

}


.nav-links{

flex-wrap:wrap;
justify-content:center;
gap:20px;

}


.hero h1{

font-size:42px;

}


.programas-grid{

grid-template-columns:1fr;

}


}


@media(max-width:600px){


.brand-text strong{

font-size:16px;

}


.hero h1{

font-size:34px;

}


.hero p{

font-size:18px;

}


}
/* PROGRAMAS */

.page-title{
padding:80px 0 40px;
}


.page-title h1{
font-size:60px;
color:#003b2f;
}


.program-card{

background:white;
border-radius:30px;
overflow:hidden;
margin:40px 0;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.program-card img{

width:100%;
height:400px;
object-fit:cover;

}



.program-card div{

padding:35px;

}


.program-card h3,
.program-item h3{

color:#003b2f;
font-size:28px;

}



.carousel{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}



.program-item{

background:white;
border-radius:25px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.08);

}



.program-item img{

width:100%;
height:230px;
object-fit:cover;

}



.program-item h3{

padding:20px 20px 5px;
font-size:22px;

}


.program-item p{

padding:0 20px 25px;
color:#555;

}



@media(max-width:900px){

.carousel{

grid-template-columns:1fr;

}


.page-title h1{

font-size:40px;

}

}
/* =========================
 PROGRAMAS
========================= */


.page-title{

padding:70px 0 40px;
text-align:center;

}


.page-title h1{

font-size:55px;
color:#003b2f;

}





/* CARRERAS */


.career-grid{

display:grid;

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

gap:35px;

}



.career-card{

background:white;

border-radius:25px;

overflow:hidden;

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

}



.career-card img{

width:100%;

height:260px;

object-fit:cover;

}



.card-content{

padding:25px;

}



.card-content h3{

color:#003b2f;

font-size:25px;

}





/* CARRUSELES */


.carousel-container{

display:flex;

align-items:center;

gap:15px;

}



.carousel-track{

display:flex;

gap:25px;

overflow:hidden;

flex:1;

}



.small-card{

min-width:280px;

background:white;

border-radius:20px;

overflow:hidden;

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

}



.small-card img{

width:100%;

height:170px;

object-fit:cover;

}



.small-card h3{

padding:15px 20px 5px;

color:#003b2f;

font-size:20px;

}



.small-card p{

padding:0 20px 20px;

color:#555;

}



.arrow{

border:1px solid #0b5c48;

background:white;

color:#0b5c48;

border-radius:50%;

width:40px;

height:40px;

font-size:25px;

cursor:pointer;

}







@media(max-width:900px){


.career-grid{

grid-template-columns:1fr;

}



.page-title h1{

font-size:38px;

}


}