/* ==========================================================
   MejengaWeb.com - Academy
   Ajustes exclusivos de presentación de /Academy.
   ========================================================== */


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

.academy-hero .academy-hero-content {
  width: min(100%, 980px);
  margin-inline: auto;
}

.academy-hero .academy-hero-copy {
  width: min(100%, 850px);
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}


/* -----------------------
   BENEFICIOS
   ----------------------- */

.academy-benefits {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

.academy-section-heading {
  width: min(100%, 900px);
  margin-left: auto;
  margin-right: auto;
}

.academy-section-copy {
  width: min(100%, 800px);
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.academy-benefits .benefit-card {
  width: 100%;
  height: 100%;
}


/* -----------------------
   PROCESO DE REGISTRO
   ----------------------- */

.academy-process-section {
  width: 100%;
  max-width: none;

  padding: 4.5rem 0;

  /*
   * Separa visualmente la última sección
   * del footer de la página.
   */
  margin-bottom: 4rem;
}

.academy-process-heading {
  width: min(100%, 900px);
  margin: 0 auto 3.5rem;
}

.academy-process-heading .lead {
  width: min(100%, 800px);
  margin: 0.75rem auto 0;
  line-height: 1.7;
}

.academy-process-list {
  width: min(100%, 900px);
  margin-inline: auto;
}


/*
 * Grid fijo:
 *
 *  [ número ] [ contenido ]
 *
 * Todos los pasos comparten exactamente
 * el mismo eje independientemente de la
 * cantidad de texto.
 */
.academy-process-section .process-step {
  display: grid;

  grid-template-columns: 52px minmax(0, 1fr);

  align-items: start;

  column-gap: 1.5rem;

  margin: 0 0 2.25rem;

  flex-wrap: initial;
}

.academy-process-section .process-step:last-child {
  margin-bottom: 0;
}


/* Número completamente centrado */

.academy-process-section .step-number {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  line-height: 1;

  margin: 0;
}


/* Contenido */

.academy-process-section .step-content {
  min-width: 0;
  padding-top: 0.1rem;
}

.academy-process-section .step-content h4 {
  margin: 0 0 0.45rem;

  line-height: 1.3;
}

.academy-process-section .step-content p {
  margin: 0;

  line-height: 1.65;

  max-width: 760px;
}


/* -----------------------
   TABLET
   ----------------------- */

@media (max-width: 991.98px) {

  /*
   * Neutraliza el flex-direction:column
   * definido por Default.css.
   */
  .academy-process-section .process-step {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);

    align-items: start;

    gap: 1.25rem;
  }

}


/* -----------------------
   MOBILE
   ----------------------- */

@media (max-width: 767.98px) {

  .academy-hero .academy-hero-content,
  .academy-section-heading,
  .academy-process-heading,
  .academy-process-list {
    width: 100%;
  }

  .academy-benefits {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .academy-process-section {
    padding: 3rem 0;

    /*
     * Seguimos dejando aire antes del footer
     * pero ligeramente menor en móvil.
     */
    margin-bottom: 2.5rem;
  }

  .academy-process-heading {
    margin-bottom: 2.5rem;
  }

  .academy-process-section .process-step {
    grid-template-columns: 42px minmax(0, 1fr);

    column-gap: 1rem;

    margin-bottom: 2rem;
  }

  .academy-process-section .step-number {
    width: 40px;
    height: 40px;

    font-size: 1.1rem;
  }

  .academy-process-section .step-content {
    padding-top: 0;
  }

  .academy-process-section .step-content h4 {
    font-size: 1.05rem;
  }

  .academy-process-section .step-content p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

}


/* -----------------------
   MOBILE PEQUEÑO
   ----------------------- */

@media (max-width: 575.98px) {

  .academy-process-section .process-step {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 0.85rem;
  }

  .academy-process-section .step-number {
    width: 38px;
    height: 38px;
  }

}


/* ==========================================================
   CTA AL DIRECTORIO DE ACADEMIAS
   ========================================================== */

.academy-directory-cta {
  padding: 0 0 4.5rem;
}

.academy-directory-cta-box {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 2rem;

  padding: 2.5rem;

  background: #f5f8fa;

  border: 1px solid #e1e6ea;

  border-radius: 20px;
}

.academy-directory-cta-kicker {
  display: inline-block;

  margin-bottom: 0.5rem;

  color: #08aeca;

  font-size: 0.78rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.05em;
}

.academy-directory-cta h2 {
  margin: 0 0 0.65rem;

  color: #181818;

  font-weight: 800;
}

.academy-directory-cta p {
  margin: 0;

  max-width: 680px;

  color: #606a73;

  line-height: 1.65;
}

.academy-directory-cta-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 auto;

  padding: 0.9rem 1.4rem;

  background: #0ccaf1;

  color: #181818;

  border-radius: 999px;

  text-decoration: none;

  font-weight: 800;

  white-space: nowrap;
}

.academy-directory-cta-button:hover {
  background: #09b6d8;

  color: #181818;
}


@media (max-width: 767.98px) {

  .academy-directory-cta {
    padding-bottom: 3rem;
  }

  .academy-directory-cta-box {
    flex-direction: column;

    align-items: flex-start;

    padding: 2rem 1.4rem;
  }

  .academy-directory-cta-button {
    width: 100%;
  }

}


/* ==========================================================
   ACADEMY - HERO VISUAL ALIGNMENT WITH /ACADEMIES
   ========================================================== */

.academy-hero {
  /*
   * Default.css aplica margin-top:80px a .hero-reserva.
   * En esta página no corresponde porque el navbar ya
   * ocupa su espacio natural.
   */
  margin-top: 0 !important;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(12, 202, 241, 0.17),
      transparent 32%
    ),
    #181818;

  padding-top: 8.5rem !important;
  padding-bottom: 5rem !important;
}


/* Pequeña etiqueta superior para mantener
   la misma identidad visual del directorio */

.academy-hero .academy-hero-content::before {
  content: "PARA ACADEMIAS DEPORTIVAS";

  display: inline-block;

  margin-bottom: 1rem;

  color: #0ccaf1;

  font-size: 0.8rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.academy-hero h1 {
  width: min(100%, 980px);

  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem;

  color: #fff;

  font-size: clamp(2rem, 4vw, 3.5rem);

  line-height: 1.15;

  font-weight: 800;
}


.academy-hero .academy-hero-copy {
  width: min(100%, 820px);

  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem !important;

  color: rgba(255,255,255,0.82);

  font-size: 1.15rem;

  line-height: 1.7;

  text-shadow: none;
}


.academy-hero .cta-button {
  min-height: 56px;

  padding: 0.9rem 2rem;

  border-radius: 999px;

  box-shadow:
    0 8px 25px rgba(12,202,241,0.18);
}


/* ==========================================================
   BENEFICIOS - TRANSICION DESDE HERO
   ========================================================== */

.academy-benefits {
  background: #fff;
}

.academy-section-heading .section-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);

  line-height: 1.2;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 767.98px) {

  .academy-hero {
    padding-top: 6.5rem !important;
    padding-bottom: 4rem !important;
  }

  .academy-hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .academy-hero .academy-hero-copy {
    font-size: 1rem;
  }

  .academy-hero .cta-button {
    width: 100%;

    max-width: 340px;
  }

}


/* ==========================================================
   ACADEMY HERO COMPACT 20260916
   ========================================================== */

.academy-hero {
    min-height: auto !important;

    padding-top: 72px !important;
    padding-bottom: 42px !important;
}

@media (max-width: 767px) {

    .academy-hero {
        padding-top: 52px !important;
        padding-bottom: 30px !important;
    }
}