/* ---------------------- RESET ---------------------- */

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

body{
font-family:Arial, sans-serif;
background:#f8f8f8;
color:#222;
line-height:1.4;
}


/* ---------------------- NAVBAR ---------------------- */

.navbar-academy{
position:absolute;
top:0;
left:0;
width:100%;
z-index:10;
padding:12px 0;
}

.nav-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
padding:0 1rem;
}

.logo{
height:42px;
}

.nav-links{
display:flex;
gap:18px;
align-items:center;
flex-wrap:wrap;
}

.nav-links a{
color:white;
text-decoration:none;
font-size:14px;
font-weight:600;
transition:opacity .2s;
}

.nav-links a:hover{
opacity:0.8;
}

.btn-subir{
background:#1f8d4d;
padding:8px 14px;
border-radius:6px;
}

.btn-subir:hover{
background:#156837;
}


/* ---------------------- HERO ---------------------- */

.hero-academy{

background:
linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)),
url("../img/hero_academy.535516fdeeab.webp");

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

color:white;
text-align:center;

min-height:200px;

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

padding:55px 1rem 25px 1rem;

}

.hero-content{
max-width:850px;
}

.hero-academy h1{
font-size:clamp(1.8rem,3vw,2.6rem);
font-weight:bold;
margin-bottom:12px;
}

.hero-academy p{
font-size:clamp(1rem,1.6vw,1.1rem);
opacity:0.95;
margin-bottom:18px;
}

.hero-btn{
display:inline-block;
background:#1f8d4d;
color:white;
padding:10px 18px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
transition:0.2s;
}

.hero-btn:hover{
background:#156837;
}


/* ---------------------- TITULOS ---------------------- */

.titulo-cursos{
text-align:center;
margin:60px 0 30px;
font-size:26px;
font-weight:bold;
}


/* ---------------------- GRID CURSOS ---------------------- */

.contenedor-cursos{

max-width:1200px;
margin:auto;

display:grid;

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

gap:26px;

padding:0 1rem 60px;

}


/* ---------------------- TARJETAS ---------------------- */

.curso-box{

background:white;

border-radius:12px;

box-shadow:0 3px 8px rgba(0,0,0,0.08);

padding:16px;

text-align:center;

transition:transform .15s ease, box-shadow .15s ease;

min-height:380px;

display:flex;
flex-direction:column;

}

.curso-box:hover{

transform:translateY(-4px);

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

}


/* ---------------------- BADGES ---------------------- */

.curso-badges{
display:flex;
gap:6px;
justify-content:center;
margin-bottom:6px;
}

.badge{

font-size:11px;
padding:3px 7px;
border-radius:5px;
font-weight:bold;
color:white;

}

.bestseller{
background:#e67e22;
}

.top{
background:#8e44ad;
}

.new{
background:#16a085;
}


/* ---------------------- IMAGENES ---------------------- */

.curso-img,
.curso-miniatura{

width:100%;

aspect-ratio:16/9;

object-fit:cover;

border-radius:8px;

display:block;

margin-bottom:10px;

}


/* ---------------------- TITULO CURSO ---------------------- */

.curso-box h3{

font-size:16px;

font-weight:bold;

margin-bottom:6px;

min-height:42px;

}


/* ---------------------- META INFO ---------------------- */

.curso-meta{

display:flex;

justify-content:center;

gap:10px;

font-size:12px;

color:#555;

margin-bottom:6px;

}


/* ---------------------- DESCRIPCION ---------------------- */

.curso-descripcion{

font-size:14px;

color:#555;

margin-bottom:10px;

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;

}


/* ---------------------- PRECIO ---------------------- */

.precio{

font-size:16px;

font-weight:bold;

margin-bottom:8px;

}


/* ---------------------- ESTRELLAS ---------------------- */

.promedio-estrellas{

font-size:14px;

margin-bottom:6px;

}

.promedio-estrellas small{

display:block;

color:#777;

font-size:12px;

}


/* ---------------------- BOTONES ---------------------- */

.curso-botones{

display:flex;

gap:6px;

margin-top:auto;

}

.curso-botones a{

flex:1;

text-align:center;

font-size:13px;

padding:8px 6px;

border-radius:6px;

text-decoration:none;

white-space:nowrap;

}

.btn-ver{
background:#1f8d4d;
color:white;
}

.btn-ver:hover{
background:#156837;
}

.btn-secondary{
background:#6c757d;
color:white;
}

.btn-secondary:hover{
background:#555;
}


/* ---------------------- FAQ ---------------------- */

.faq-section{

max-width:900px;
margin:70px auto;

padding:0 1rem;

}

.faq-section h2{
text-align:center;
margin-bottom:30px;
}

.faq-item{
border-bottom:1px solid #ddd;
padding:16px 0;
}

.faq-item h3{
font-size:18px;
margin-bottom:6px;
}

.faq-item p{
color:#555;
font-size:15px;
}


/* ---------------------- OVERLAY VIDEO ---------------------- */

.tutorial-overlay{

position:fixed;
inset:0;

z-index:9999;

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

}

.tutorial-overlay.d-none{
display:none;
}

.overlay-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,0.75);
}

.overlay-content{

position:relative;

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

background:#000;

border-radius:12px;

overflow:hidden;

z-index:2;

}

.overlay-content iframe{
width:100%;
aspect-ratio:16/9;
border:none;
}

.overlay-close{

position:absolute;
top:10px;
right:14px;

background:none;
border:none;

color:white;

font-size:24px;

cursor:pointer;

}


/* ---------------------- FOOTER ---------------------- */

.footer-academy{

background:
linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),
url("../img/footer-bg.b5074e1c3969.webp");

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

color:white;

text-align:center;

padding:90px 10px;

font-size:14px;

}

.footer-academy a{

color:#ddd;
text-decoration:none;

margin:0 6px;

}

.footer-academy a:hover{
text-decoration:underline;
}


/* ---------------------- RESPONSIVE ---------------------- */

@media (max-width:1024px){

.contenedor-cursos{
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}

}

@media (max-width:768px){

.hero-academy{
padding-top:140px;
}

.nav-links{
width:100%;
justify-content:center;
margin-top:8px;
}

.contenedor-cursos{
grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}

}

@media (max-width:480px){

.hero-academy{
padding-top:140px;
}

.hero-academy h1{
font-size:1.6rem;
}

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

.contenedor-cursos{
grid-template-columns:1fr;
}

}