/* ==========================================================================
   PÁGINA: ACADEMIA
   Paleta propia (celeste + amarillo), más clara y vivaz que el resto del
   sitio, para que la página tenga su propio "choque" visual.
   CTN y Becas del Gobierno / Itaipú son los dos bloques centrales.
   Refuerzo y Competencias se muestran como información extra, más chica.
   La sección de inscripción (.cta) reutiliza el mismo componente del index.s
========================================================================== */

:root{
  --sky:#0c6c89;
  --sky-dark:#014a6f;
  --sky-light:#eafaff;
  --amarillo:#ffd400;
  --amarillo-dark:#f2a900;
}


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

.academy-hero{
  padding:150px 0 var(--space-6);
  min-height: 80vh;
  background:
    linear-gradient(135deg,rgba(0, 51, 105, 0.72),rgba(1, 40, 82, 0.615)),
    url("../../img/hero/hero-image-moment.jpeg") center/cover;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.academy-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

}

.academy-hero .hero-subtitle{
  color:var(--amarillo);
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:var(--fs-sm);
}

.academy-hero h1{
  color:var(--white);
  max-width:800px;
  margin:var(--space-2) auto;
  font-size:clamp(2.2rem,4vw,3.2rem);
  line-height:1.2;
}

.academy-hero p{
  max-width:650px;
  margin:0 auto;
  color:#e6faff;
  line-height:1.8;
}

.academy-hero .hero-buttons{
  display:flex;
  justify-content:center;
  gap:var(--space-3);
  margin-top:var(--space-4);
  position:relative;
}

.academy-hero .btn.secondary{
  border-color:var(--white);
  color:var(--white);
}


/* ---------- PROGRAMAS: BLOQUES CENTRALES (CTN + BECAS) ---------- */

.academy-programs{
  padding:var(--space-7) 0;
}

.academy-programs .section-header p{
  color:var(--sky-dark);
}

.featured-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
  max-width:1000px;
  margin:0 auto;
}

.featured-card{
  border-radius:var(--radius);
  padding:var(--space-5) var(--space-4);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:340px;
  justify-content:flex-end;
}

.featured-card .icon{
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:var(--space-2);
}

.featured-card .icon i{
  font-size:1.6rem;
}

.featured-card h3{
  font-size:var(--fs-xl);
  margin-bottom:var(--space-1);
  color:var(--white);
}

/* Tarjeta CTN: foto de Tajy amarillo de fondo */
.ctn-card{
  color:var(--white);
  background:
    linear-gradient(180deg,rgba(2, 33, 49, 0.35),rgba(3, 8, 11, 0.85)),
    url("https://commons.wikimedia.org/wiki/Special:FilePath/Golden%20Trumpet%20Tree%20Handroanthus%20chrysanthus%200279.jpg") center/cover;
}

.ctn-card .icon{
  background:rgba(255,255,255,.2);
}

.ctn-card .icon i{
  color:var(--amarillo);
}

.ctn-card p{
  color:#eafaff;
}

.ctn-card .badges{
  position:absolute;
  top:var(--space-3);
  right:var(--space-3);
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:5px;
  max-width:60%;
}

.ctn-card .badges img{
  height:24px;
  width:24px;
  border-radius:4px;
  object-fit:cover;
  background:var(--white);
}

/* Tarjeta Becas / Itaipú */
.becas-card{
  color:var(--white);
  background:
    linear-gradient(180deg,rgba(2, 33, 49, 0.35),rgba(3, 8, 11, 0.85)),
    url("https://i.pinimg.com/1200x/df/7e/1a/df7e1a19193406032b61986dad1f2fec.jpg") center/cover;
}

.becas-card .badges{
  position:absolute;
  top:var(--space-3);
  right:var(--space-3);
  display:flex;
  align-items:center;
  gap:8px;
}

.becas-card .badges img{
  height:28px;
  width:auto;
  border-radius:4px;
  object-fit:contain;
  background:var(--white);
}

.becas-card .badges .flag-icon{
  box-shadow:0 0 0 1px var(--border);
}

.becas-card .icon{
  background:rgba(255,255,255,.2);
}

.becas-card .icon i{
  color:var(--amarillo);
}

.becas-card p{
  color:#eafaff;
}


/* ---------- EXTRAS: REFUERZO Y COMPETENCIAS ---------- */

.extra-programs{
  max-width:1000px;
  margin:var(--space-5) auto 0;
}

.extra-label{
  text-align:center;
  color:var(--gray);
  font-size:var(--fs-sm);
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:var(--space-3);
}

.extra-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
}

.extra-item{
  display:flex;
  align-items:flex-start;
  gap:var(--space-2);
  padding:var(--space-3);
  background:var(--light);
  border:1px dashed var(--border);
  border-radius:var(--radius);
}

.extra-item i{
  width:44px;
  height:44px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--sky-light);
  color:var(--sky-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
}

.extra-item h4{
  font-size:var(--fs-md);
  margin-bottom:4px;
}

.extra-item p{
  color:var(--gray);
  font-size:var(--fs-sm);
  line-height:1.6;
}


/* ---------- BLOQUE BECAS / BECAL (detalle del proceso) ---------- */

.academy-becal{
  padding:var(--space-7) 0;
  background:var(--sky-light);
}

.academy-becal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-6);
  align-items:center;
}

.academy-becal-info small{
  color:var(--sky-dark);
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:var(--fs-sm);
}

.academy-becal-info h2{
  font-size:var(--fs-2xl);
  line-height:1.2;
  margin:var(--space-2) 0 var(--space-3);
  color:var(--sky-dark);
}

.academy-becal-info p{
  color:var(--gray);
  line-height:1.8;
  margin-bottom:var(--space-3);
}

.academy-becal-info .btn{
  background:var(--amarillo);
  color:#3a2900;
  border:none;
}

.academy-becal-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}

.academy-becal-list .card{
  display:flex;
  align-items:flex-start;
  gap:var(--space-2);
  padding:var(--space-3);
  background:var(--white);
}

.academy-becal-list i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--sky-light);
  color:var(--sky-dark);
  font-size:1.3rem;
}

.academy-becal-list h4{
  font-size:var(--fs-md);
  margin-bottom:4px;
}

.academy-becal-list p{
  color:var(--gray);
  font-size:var(--fs-sm);
  line-height:1.6;
}


/* ---------- INSCRIPCIÓN (misma estructura .cta del index, colores propios) ---------- */

#cta{
  scroll-margin-top:100px;
}

/* Reemplaza el navy del index por el celeste de esta página */
.academy-cta{
  background:linear-gradient(135deg,var(--sky-dark),var(--sky));
}

.academy-cta .cta-info small{
  color:var(--amarillo);
}

.academy-cta .cta-info h2{
  color:var(--white);
}

.academy-cta .cta-info p{
  color:#e6faff;
}

.academy-cta .cta-list i{
  color:var(--amarillo);
}

.academy-cta .contact-form .btn{
  background:var(--amarillo);
  color:#3a2900;
  border:none;
}

.cta-form-wrap{
  display:flex;
  flex-direction:column;
}

.cta-whatsapp-link{
  text-align:center;
  margin-top:var(--space-3);
  color:#e6faff;
  font-size:var(--fs-sm);
}

.cta-whatsapp-link a{
  color:var(--amarillo);
  font-weight:700;
  text-decoration:underline;
}

footer {
    background-color: var(--sky-dark);
}


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

@media (max-width:992px){

  .academy-becal-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:768px){

  .academy-hero{ padding:130px 0 var(--space-5); }

  .academy-hero .hero-buttons{
    flex-direction:column;
    align-items:center;
  }

  .featured-grid,
  .extra-grid{
    grid-template-columns:1fr;
  }

  .featured-card{
    min-height:260px;
  }
}