/* RESET */

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

body{

font-family:'Poppins',sans-serif;
background:#f8f0ea;
color:#333;

}

/* HEADER */

header{

position:sticky;
top:0;

height:80px;

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

padding:0 40px;

background:white;

z-index:1000;

box-shadow:0 2px 10px rgba(0,0,0,0.05);

transition:0.3s;

}


/* LOGO NAVBAR */

.logo img{

height:55px;
display:block;
transition:0.3s;

}


/* LOGO SCROLL DESKTOP */

header.scrolled .logo img{

height:55px;

}


/* NAVBAR */

.nav{

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

}

.nav a{

text-decoration:none;
color:#333;
font-weight:400;

}


/* BOTÓN CAMPUS */

.btn-campus{

display:inline-flex;
align-items:center;
justify-content:center;

background:#e5a1ad;
color:white;

padding:8px 18px;

border-radius:8px;

font-size:14px;

}


/* HAMBURGER */

.hamburger{

display:none;
font-size:28px;
cursor:pointer;

}


/* HERO */

.hero{

position:relative;

height:100vh;

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

overflow:hidden;

color:white;

}


/* FONDO HERO PARALLAX */

.hero-video{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:0;

}

.hero-overlay{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.35);

z-index:1;

}


/* CONTENIDO HERO */

.hero-content{

position:relative;

z-index:2;

text-align:center;

max-width:700px;

padding:20px;

display:flex;
flex-direction:column;
align-items:center;

gap:15px;

}


/* LOGO HERO */

.hero-logo{

width:260px;
max-width:80%;

margin-bottom:10px;

}


/* TEXTO HERO */

.hero p{

font-size:18px;

}


/* BOTÓN PRINCIPAL */

.btn-principal{

background:#e5a1ad;
color:white;

padding:12px 25px;

border-radius:10px;

text-decoration:none;

transition:0.2s;

}

.btn-principal:hover{

transform:scale(1.05);

}


/* SECCIÓN CURSOS */

.cursos-section{

padding:60px 20px;
text-align:center;

}


/* GRID CURSOS */

.cursos-grid{

display:grid;

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

gap:25px;

margin-top:30px;

}


/* CARD CURSO */

.card-curso{

background:white;

border-radius:15px;

overflow:hidden;

box-shadow:0 10px 20px rgba(0,0,0,0.1);

transition:0.3s;

}

.card-curso:hover{

transform:translateY(-5px);

}


/* IMAGEN CURSO */

.card-curso img{

width:100%;
height:200px;

object-fit:cover;

}


/* TEXTO CARD */

.card-curso h3{

margin:10px;

}

.card-curso p{

padding:0 15px;

}


/* BOTÓN CURSO */

.btn-curso{

display:block;

background:#e5a1ad;

color:white;

padding:10px;

margin:15px;

border-radius:8px;

text-decoration:none;

}


/* INSTAGRAM */

.instagram-section{

padding:60px 20px;
text-align:center;

}


/* FOOTER */

footer{

text-align:center;

padding:40px;

background:#fff;

}


/* BOTÓN WHATSAPP */

.whatsapp{

position:fixed;

bottom:20px;
right:20px;

width:60px;
height:60px;

background:#25D366;

border-radius:50%;

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

box-shadow:0 6px 18px rgba(0,0,0,0.25);

z-index:999;

}


/* DESKTOP GRANDE */

@media (min-width:1200px){

.hero-logo{

width:320px;

}

.hero p{

font-size:20px;

}

}


/* MOBILE */

@media (max-width:768px){

header{

padding:0 20px;

}


/* NAV MOBILE */

.nav{

position:absolute;

top:80px;
left:0;

width:100%;

background:white;

flex-direction:column;

align-items:center;

gap:20px;

padding:20px 0;

display:none;

}

.nav.active{

display:flex;

}


/* HAMBURGER */

.hamburger{

display:block;

}


/* NO ACHICAR LOGO EN MOBILE */

header.scrolled .logo img{

height:55px;

}


/* HERO MOBILE */

.hero{

height:85vh;

}

.hero-logo{

width:200px;

}

.hero-bg{

background-position:center top;

}

.hero p{

font-size:16px;

}

}