:root{
    --bg:#fbf6e8;
    --card:#ffffff;
    --text:#1f1f1f;
    --muted:#6b6b6b;
    --green:#00ff4c;
    --blue:#6ecbff;
}
*{box-sizing:border-box}
html{scroll-behavior: smooth;}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto;
  background:linear-gradient(120deg,#fafafa,#fff,#fafafa,#fff);
  color:var(--text);
}
.title{
  font-size:2.3rem;
  line-height:1.15;
  margin:0 0 20px;
}
.span{
  background:linear-gradient(90deg,#00ff4c,#5ddcff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.span-junior{
  background:linear-gradient(90deg,#d82ad2, #ff9100);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.navbar{
  width: 1200px;
  background:rgba(255,255,255,0.85);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
  border-radius:18px;
  padding:16px 24px;
  margin:16px auto 0;
  position: fixed;  
  display:flex;
  align-items:center;
  justify-content:space-between;
  top: 0;        
  left: 0;
  right: 0;
  z-index: 999;
}
.nav-left{ display:flex;align-items:center;gap:12px;}  
.logo-box{
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--green),#7dffd4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
.logo-box img{width: 40px;}
.brand{
  font-size:1.3rem;
  font-weight:700;
  
} 
.brand a{color:#00c853;} 
.nav-right{display:flex;align-items:center;gap:16px;}
.link{
  text-decoration:none;
  color:var(--text);
  font-weight:500;
  background: transparent;
  border: 1px solid transparent;
  transition: 0.5s ease;
  padding:10px 18px;
  border-radius:999px;
}
.link:hover{background: var(--bg);font-weight:600; }
.btn-register{
  background:var(--green);
  color:#000;
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-register:hover {transform: translateY(-3px);}
.hero, .services, .levels, .category{
  max-width:1200px;
  margin:120px auto;
  text-align:center;
  padding:0 20px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#eaffea;
  color:#00c853;
  padding:8px 14px;
  border-radius:999px;
  font-weight:600;
  margin-bottom:24px;
}
.hero h1{font-size:3rem;line-height:1.15;margin:0 0 20px;}
.gradient{
  background:linear-gradient(90deg,#00ff4c,#5ddcff,#b45cff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
a{text-decoration: none; color: black;}
p{
  max-width:720px;
  margin:0 auto 36px;
  font-size:1.15rem;
  color:var(--muted);
}
.hero p span, .services-sub span{color:#00ff4c;font-weight:600}
.services-sub span.blue{color:#5ddcff;}  
.hero-actions{display:flex;justify-content:center;gap:16px;}
.btn-primary{
  background:var(--green);
  border:none;
  padding:14px 26px;
  border-radius:14px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-primary:hover {transform: translateY(-3px);}
.btn-secondary{
  background:transparent;
  border:2px solid var(--blue);
  color:var(--blue);
  padding:14px 26px;
  border-radius:14px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition: 0.5s ease;
}
.btn-secondary:hover{background: var(--blue); color: var(--bg);}
.stats{
  max-width:1200px;
  margin:60px auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  padding:0 20px;
}
.stat{
  background: linear-gradient(135deg, #eaf4ff, #f4f8ff);
  border-radius:20px;
  padding:28px;
  text-align:center;
  border: 1px solid transparent;
}
.stat:hover{ border: 1px solid #00ff4c;;}
.stat strong{font-size:2rem;color:var(--green);}
.stat span{
  display:block;
  margin-top:8px;
  color:var(--muted);
}
.service-grid, .levels-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto 80px;
}
.category-grid{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto 80px;
}
.service-grid .service-card, .levels-grid .levels-card{
  background: var(--card);
  border-radius: 24px;
  padding: 36px 28px;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease;
  border: 1px solid #d4d4d4;
}
.category-card{
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  padding: 3rem;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  width: 100%;
  border-radius: 24px 24px 0 0;
}
.category-card.junior::before {background: linear-gradient(90deg, #c026ff, #ffd400);}
.category-card.adultos::before { background: linear-gradient(90deg, #4cc9f0, #00ff6a);}
.service-grid .service-card:hover,
.levels-grid .levels-card:hover,
.category-grid .category-card:hover{transform: translateY(-6px);box-shadow: 0 18px 40px rgba(0,0,0,0.10);border: 1px solid #00ff4c;;}
.service-card:hover h3,
.levels-card:hover h3{color:#00ff4c;}
.service-card .icon, .levels-card .icon, .category-card .icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #d4d4d4;
}
.levels-card .icon{
  width: 76px;
  border: 1px solid #d4d4d4;
  border-radius: 30px;
}
.icon i{color: white;font-size: 1.8rem;}
.oval-gradient.juniors{
  background: linear-gradient(135deg,#d82ad2, #ff9100, #fac906);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.oval-gradient.adultos{
  background:linear-gradient(90deg,#00ff4c,#5ddcff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight: 800;
}
.junior-text {color: #c026ff;font-weight: 800;}
.adultos-text {color: #00c96b;font-weight: 800;}
.small{color: #8a7f75;
  font-weight: 200;
  font-size: .9rem;
  margin-bottom: 1.5rem;
}
.icon.green { background:linear-gradient(135deg,#00ff4c,#5ddcff);}
.icon.purple {background: linear-gradient(135deg,#5ddcff, #7f7bff, #a43cf4);}
.icon.orange {background: linear-gradient(135deg, #d82ad2, #ff9100, #fac906); }
.icon.lime {background: linear-gradient(135deg, #a6ff00, #28a004);}
.levels-card.greens { border-top:.4rem solid #00ff4c;}
.levels-card.blues { border-top:.4rem solid #5ddcff;}
.levels-card.purples { border-top:.4rem solid #a43cf4;}
.levels-card.yellows { border-top:.4rem solid #faf606;}
.category-card.greens {border-top: 6px solid transparent; border-image: linear-gradient(90deg, #c026ff, #ffd400) 1;}
.category-card.blues {border-top: 6px solid transparent; border-image: linear-gradient(90deg, #4cc9f0, #00ff6a) 1;}
.levels-card .icon.greens{color:#00ff4c ; border: 1px solid #00ff4c;}
.levels-card .icon.blues{color:#5ddcff ; border: 1px solid #5ddcff;}
.levels-card .icon.purples{color:#a43cf4 ; border: 1px solid #a43cf4;}
.levels-card .icon.yellows{color:#faf606 ; border: 1px solid #faf606;}
.highlight-junior {color: #c026ff;font-weight: 600;}
.highlight-adultos {color: #4cc9f0;font-weight: 600;}
.service-card h3 {
  margin: 24px 0 12px;
  font-size: 20px;
  font-weight: 600;
  color: #1f1f1f;
}
.category-card h3{
  margin: 24px 0 12px;
  font-size: 20px;
  font-weight: 600;
  color: linear-gradient(135deg, #d82ad2, #ff9100, #fac906);;
}
.service-card p, .levels-card p {font-size: 16px; color: #6b6b6b;line-height: 1.5;}
.confidence-box {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 40px;
  background: linear-gradient(135deg, #eaffea, #f4fff4);
  border-radius: 20px;
  font-size: 18px;
  color: #2f2f2f;
}
.learning {padding: 6rem 2rem;background: linear-gradient(180deg, #fff, #fafafa);}
.learning-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.learning-image img {width: 100%;border-radius: 24px;}
.learning-intro {
  font-size: 1.1rem;
  color: #4a4a4a;
  margin-bottom: 2rem;
  line-height: 1.7;
}
.learning-list {list-style: none;padding: 0; margin: 0;}
.learning-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.4rem;
  color: #2b2b2b;
}
.bullet {
  width: 14px;
  height: 14px;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #5ddcff, #5ddcff);
  flex-shrink: 0;
}


.cta {
  padding: 6rem 2rem;
  background: linear-gradient(135deg, #fff, #fafafa);
}

.cta-container {
  max-width: 1200px;
  margin: auto;
  background: #ffffff;
  border-radius: 32px;
  padding: 4rem;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
}

/* Texto */
.cta-content h2 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 2rem;
  color: #1f1f1f;
}

.price {
  background:linear-gradient(135deg,#5ddcff, #7f7bff, #a43cf4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight: 900;
  position: relative;
}

.price::after {
  content: "";
  display: block;
  width: 320px;
  height: 4px;
  background: linear-gradient(135deg,#5ddcff, #7f7bff, #a43cf4);
  margin-top: 0.5rem;
  margin-left: 6.5rem;
  border-radius: 2px;
}

/* Lista */
.cta-list {list-style: none;padding: 0;margin: 2rem 0 3rem;}

.cta-list li {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  color: #2b2b2b;
  line-height: 1.6;
}

/* Botón */
.cta-button {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg,#5ddcff, #7f7bff, #a43cf4);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {transform: translateY(-3px);}

/* Imagen */
.cta-image img {
  width: 100%;
  max-width: 760px;
  margin: auto;
  display: block;
}

.footer {
  background: #2b2624;
  color: #d4d0cb;
  padding: 4rem 2rem 2rem;
  font-size: 0.95rem;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 3rem;
}

/* Marca */
.footer-logo {
  color: #00ff6a;
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.footer-brand img{ width: 140px;}
.footer-brand p {line-height: 1.6;color: #c7c2bd;}
.footer-column h4 {color: #ffffff;font-weight: 700;margin-bottom: 1rem;}
.footer-column p~p{margin-top: -40px; color: #c7c2bd;}
.footer-column ul {list-style: none;padding: 0;margin: 0;}
.footer-column ul li {margin-bottom: 0.6rem;}
.footer-column a {color: #c7c2bd;text-decoration: none;transition: color 0.3s;}
.footer-column a:hover {color: #fff;}
.footer-iconTop a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .4rem;
  background: linear-gradient(135deg,#00ff4c,#5ddcff);;
  border-radius: .4rem;
  border: .2rem solid transparent;
  color: #2b2624;
  outline: .2rem solid transparent;
  transition: .5s ease;
}
.footer-iconTop a:hover {transform: translateY(-3px);}
.footer-iconTop a i{font-size: 2.4rem;}
.social-icons {display: flex;gap: 1rem;}

.social {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
}

.social.instagram {
  background: #00ff4c;
  color: #2b2624;
  font-size: 1.5rem;
}

.social.linkedin {
  background: #5ddcff;
  color:#2b2624;
  font-size: 1.5rem;
}

.social.youtube {
  background: #d82ad2;
  color:#2b2624;
  font-size: 1.5rem;
}

.social.tiktok {
  background: #fac906;
  color:#2b2624;
  font-size: 1.5rem;
}

/* Línea divisoria */
.footer-divider {
  margin: 3rem 0 2rem;
  height: 2px;
  background:linear-gradient(135deg, #5ddcff, #00ff4c);
  opacity: 0.6;
}

/* Parte inferior */
.footer-bottom {text-align: center;font-size: 0.9rem;}
.footer-bottom p{color: white;}
.footer-cert {
  margin-top: -1.5rem;
  opacity: 0.8;
  color: white;
}
/* ------- terminos ------- */ 
.header h1 {
  background:linear-gradient(90deg,#00ff4c,#5ddcff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

.meta {
  font-size: 0.9rem;
  color: var(--muted);
}
.header, .intro{display: flex;flex-direction: column;align-items: center;}
.intro a{color: var(--blue);}

.content-terminos { margin-top: 2.5rem; text-align: left; font-size: 1.2rem; color: var(--muted);}

.content-terminos h2 {
  color: #00c853;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, #00ff4c, #5ddcff) 1;
  padding-bottom: 0.3rem;
}

.content-terminos h3 {
  margin-top: 1.2rem;
  color: var(--secondary);
}

.content-terminos p {
  margin: 0.8rem 0;
  max-width:1120px;
}

.content-terminos ul {
  padding-left: 1.2rem;
}

.content-terminos li {
  margin-bottom: 0.4rem;
}
.content-terminos li::marker{color: #00c853;}

.alert {
  background: #eef2ff;
  border-left: 4px solid var(--secondary);
  padding: 1rem;
  margin-top: 1rem;
}
    
/* ------- Responsive ------- */  
@media (max-width: 1024px) {
  .service-grid {grid-template-columns: repeat(2, 1fr);}
}
@media(max-width:900px){
  .navbar{
    width: 800px;
    padding:16px 24px;
    margin:16px auto 0;
  }
  .stats{grid-template-columns:1fr 1fr}
  .hero h1{font-size:2.2rem}
  .category-grid {grid-template-columns: repeat(2, 1fr);}
  .levels-grid {grid-template-columns: repeat(2, 1fr);}
  .learning-container {grid-template-columns: 1fr;text-align: center;}
  .learning-list{margin: 0 auto;width: 70%;}
  .learning-list li {justify-content: center;text-align: left;}
  .learning-image {order: 1;}
  .learning-image img{width: 70%;}
  .footer-container {grid-template-columns: 1fr; text-align: center;}
  .social-icons {justify-content: center;}
  .cta-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cta-list li {
    justify-content: center;
    text-align: left;
  }

  .price::after {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  .brand{display: none;}
  .navbar{ width: 500px;}
  .hero-actions{flex-direction: column;}
  .stats{grid-template-columns:1fr}
  .services {padding: 80px 24px;}
  .services h2 { font-size: 34px; }
  .category-grid {grid-template-columns: 1fr;}
  .service-grid {grid-template-columns: 1fr;}
  .levels-grid {grid-template-columns: 1fr;}
}
@media(max-width: 400px){
  .navbar{ width: 400px;font-size: 12px;}
  .nav-left{align-items:flex-start;gap:6px;}
  .nav-right{align-items:flex-start;gap:6px;}
  .cta-content h2 {font-size: 2rem;}
  .cta-container {
    padding: 2rem;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: flex-start;
  }

}