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

body{
font-family:'Poppins',sans-serif;
background:#0c1325;
color:white;
line-height:1.6;
padding-top: 60px;
}

/* CONTAINER */

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

/* HEADER */

.header{
position:fixed;
top:0;
left:0;
width:100%;
background:#0c1325;
padding:20px 0;
z-index:1000;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-weight:700;
letter-spacing:3px;
font-size:20px;
}

/* MENU BUTTON */

.menu-btn{
width:30px;
height:22px;
display:flex;
flex-direction:column;
justify-content:space-between;
cursor:pointer;
}

.menu-btn span{
height:3px;
background:white;
border-radius:3px;
transition:0.3s;
}


.section h2 {
    text-align: center;
}
/* ANIMATION */

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

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

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

/* SIDEBAR */

.sidebar{
position:fixed;
top:0;
right:-300px;
width:300px;
height:100%;
background:#111a35;
padding:80px 30px;
transition:0.4s;
z-index:2000;
}

.sidebar.active{
right:0;
}

.sidebar a{
display:block;
margin-bottom:25px;
color:white;
text-decoration:none;
font-size:18px;
}

.sidebar a:hover{
color:#2d5bff;
}

/* OVERLAY */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
opacity:0;
visibility:hidden;
transition:0.3s;
z-index:1500;
}

.overlay.active{
opacity:1;
visibility:visible;
}

/* HERO */

.hero{
padding-top:140px;
padding-bottom:120px;
text-align:center;
}

.hero h1{
font-size:48px;
margin-bottom:20px;
}

.hero span{
color:#2d5bff;
}

.hero p{
max-width:600px;
margin:auto;
color:#aaa;
}

.btn{
display:inline-block;
margin-top:30px;
padding:12px 25px;
background:linear-gradient(45deg,#2d5bff,#6a00ff);
border-radius:25px;
color:white;
text-decoration:none;
}

/* SECTION */

.section{
padding:100px 0;
}

/* COURSES GRID */

.courses-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:40px;
}

.course-card{
background:#111a35;
padding:30px;
border-radius:20px;
text-align:center;
transition:0.3s;
}

.course-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.4);
}

.course-card img{
width:100%;
height:180px;
object-fit:contain;
margin-bottom:20px;
}

/* FOOTER */

.footer{
padding:60px 0;
border-top:1px solid rgba(255,255,255,0.1);
text-align:center;
color:#aaa;
}

/* RESPONSIVE */

@media(max-width:768px){

.hero h1{
font-size:36px;
}

}

/* AUTH FORM */

.auth-card{
max-width:420px;
margin:auto;
background:#111a35;
padding:40px;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,0.5);
}

.auth-card h2{
margin-bottom:20px;
text-align:center;
}


/* Solo para inputs de texto, email y password */
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"]{
    width:100%;
    padding:12px;
    margin-bottom:15px;
    border:none;
    border-radius:8px;
    background:#0c1325;
    color:white;
}

.auth-card input[type="text"]:focus,
.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus{
    outline:1px solid #2d5bff;
}

/* Checkbox */
.auth-card input[type="checkbox"]{
    width:auto; /* no ocupa todo el ancho */
    height:auto; /* tamaño normal de checkbox */
    margin:0; /* quitar margen por defecto */
}


.auth-card input:focus{
outline:1px solid #2d5bff;
}

.auth-card button{
width:100%;
padding:12px;
border:none;
border-radius:25px;
background:linear-gradient(45deg,#2d5bff,#6a00ff);
color:white;
cursor:pointer;
}

.auth-links{
text-align:center;
margin-top:15px;
}

.auth-links a{
color:#aaa;
text-decoration:none;
}

.auth-links a:hover{
color:#2d5bff;
}


.footer-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.footer-links{
    display:flex;
    gap:10px;
    align-items:center;
}

.footer-links a{
    color:#aaa;
    text-decoration:none;
    transition:0.3s;
}

.footer-links a:hover{
    color:#2d5bff;
}


.auth-error{
background:#ff3b3b;
padding:10px;
border-radius:8px;
margin-bottom:15px;
text-align:center;
}




/*LOGOUT BOTON */


.logout-btn{
    background:none;        /* sin fondo */
    border:none;            /* sin borde */
    color:white;            /* color igual que links */
    font-size:18px;         /* tamaño similar */
    cursor:pointer;         /* puntero tipo link */
    text-align:left;        /* alinear igual que links */
    margin-bottom:25px;     /* igual que tus a */
    font-family:'Poppins',sans-serif;
    padding:0;              /* quitar padding */
}

.logout-btn:hover{
    color:#2d5bff;          /* efecto hover igual que links */
}


.course-card:hover {
    transform: translateY(-5px);
    transition: 0.3s ease;
}

.course-card img {
    border: 3px solid #2d5bff;
}

.hero img {
    transition: transform 0.3s ease;
}

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

.course-card {
    transition: 0.3s ease;
}

.course-card:hover {
    transform: translateY(-5px);
}

/* CHECKOUT */

.checkout-card{
    max-width:500px;
    margin:auto;
    background:#111a35;
    padding:40px;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,0.5);
    text-align:center;
}

.checkout-card h2{
    margin-bottom:25px;
}

.checkout-course{
    margin-bottom:25px;
}

.checkout-course h3{
    font-size:22px;
    margin-bottom:10px;
}

.checkout-course .price{
    font-size:28px;
    font-weight:700;
    color:#2d5bff;
}

/* INPUT */

.checkout-card input{
    width:100%;
    padding:14px;
    margin-bottom:20px;
    border:none;
    border-radius:10px;
    background:#0c1325;
    color:white;
    font-size:14px;
}

.checkout-card input:focus{
    outline:1px solid #2d5bff;
}

/* BUTTON */

.checkout-card button{
    width:100%;
    padding:14px;
    border:none;
    border-radius:25px;
    background:linear-gradient(45deg,#2d5bff,#6a00ff);
    color:white;
    font-size:16px;
    cursor:pointer;
    transition:0.3s;
}

.checkout-card button:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,0.4);
}


.service-card p {
    color: #aaa;
}

.service-card h3 {
    color: white;
}