/* ---------------------------------------------------
   🎨 PALETA DE COLORES MODERNA
--------------------------------------------------- */
:root {
    --primary: #6C5CE7;     /* Morado vibrante gamer */
    --secondary: #007BFF;   /* Aqua juvenil */
    --accent: #4F46E5;      /* Rosa/naranja energético */
    --bg: #F2F6FF;          /* Fondo suave */
    --dark: #2D3436;
    --light: #ffffff;
}

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

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; color: var(--dark); background: var(--bg);line-height: 1.2;   }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------
   🔝 NAVBAR
--------------------------------------------------- */
.navbar { position: fixed; top: 0; width: 100%; background: rgba(255,255,255,0.95); box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000; }
.navbar .container  { display: flex; justify-content: space-between; align-items: center; padding: 1px 20px; }
.logo { font-family: 'Fredoka One', cursive; font-size: 1.8rem; color: var(--primary); text-decoration: none; }
.nav-menu ul { display: flex; list-style: none; gap: 25px; }
.nav-menu a { color: var(--dark); text-decoration: none; font-weight: 600; transition: color 0.3s; }
.nav-menu a:hover{ color: var(--primary); }
.btn-signup { background: var(--secondary); color: var(--light); padding: 8px 20px; border-radius: 30px; }
.btn-signup:hover {
    transform: scale(1.05);
}

/* ---------------------------------------------------
   🦸 HERO
--------------------------------------------------- */
.hero {
    display: flex;
    align-items: center;
    padding-top: 100px;
}
.hero .container {
    display: flex;
    align-items: center;
    gap: 40px;
}
.hero-content {
    flex: 1;
}
.hero-title  { font-family: 'Fredoka One', cursive; font-size: 2.5rem; color: var(--primary); animation: bounce 2s infinite; }
.hero-subtitle { font-size: 1.3rem; margin: 20px 0; }
.btn-primary {
    background: var(--secondary);
    color: white;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: 0.3s;
    box-shadow: 0 10px 25px rgba(0,206,201,0.3);
}
.btn-primary:hover {
    transform: translateY(-4px);
}
.hero-images {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 25px;
}
.hero-img {
    width: 420px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));

}

/* Animación suave */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}


.cursos {
    padding: 50px ;
    text-align: center;

}

/* ---------------------------------------------------
   ⭐ WHY SECTION
--------------------------------------------------- */
.why-section {
    padding-top: 50px;
    text-align: center;
}
.section-title {
    font-family: 'Fredoka One', cursive;
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 4px;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px;
}
.feature-card {
    background: white;
    padding: 35px;
    border-radius: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s;
}
.feature-card:hover {
    transform: translateY(-10px);
}
.feature-card i {
    font-size: 2.8rem;
    color: var(--secondary);
    margin-bottom: 15px;
}

/* ---------------------------------------------------
   👋 ABOUT
--------------------------------------------------- */
.about-section {
    padding: 10px 0;
    text-align: center;
}
.btn-secondary {
    background: var(--primary);
    color: white;
    padding: 12px 28px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
}

.about-area-margin-bottom {
    position: relative;
    margin-bottom: -120px;
    z-index: 2;
}
.position-relative {
    position: relative;
}
.bg-cover {
    background-size: cover !important;
    background-position: center;
}
.pd-top-120 {
    padding-top: 120px;
}
.pd-bottom-70 {
    padding-bottom: 70px;
}
/* ---------------------------------------------------
   🦶 FOOTER
--------------------------------------------------- */
.footer {
    background: var(--primary);
    color: white;
    padding: 40px 0;
    text-align: center;
}
.social-icons a {
    color: white;
    font-size: 1.8rem;
    margin: 0 15px;
    transition: 0.3s;
}
.social-icons a:hover {
    color: var(--accent);
}

/* ---------------------------------------------------
   📱 RESPONSIVE
--------------------------------------------------- */
@media (max-width: 768px) {
    .hero .container { flex-direction: column; text-align: center; }
    .hero-title { font-size: 2.8rem; }
    .hero-images { flex-direction: column; }
}


.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}
.col-md-12{flex:0 0 auto;width:100%}
.col-md-3{flex:0 0 auto;width:25%}
.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:rgba(var(--bs-body-color-rgb), 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg:var(--bs-body-bg);--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}
.card>hr{margin-right:0;margin-left:0}
.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}
.card-title{margin-bottom:var(--bs-card-title-spacer-y);color:var(--bs-card-title-color)}
.fw-bold{font-weight:700!important}
.text-center{text-align:center!important}
.text-nowrap{white-space:nowrap!important}

.img-fluid{max-width:100%;height:auto}