/* =========================================
   HERO
========================================= */

.school-hero {
  position: relative;

  padding:
    185px 0
    120px;

  overflow: hidden;

  color: white;

  background:
    linear-gradient(
      125deg,
      #061d33 0%,
      var(--primary-dark) 50%,
      var(--primary) 100%
    );
}


.school-hero::before {
  content: "";

  position: absolute;

  width: 560px;
  height: 560px;

  top: -260px;
  right: -150px;

  border:
    1px solid
    rgba(255,255,255,0.12);

  border-radius: 50%;
}


.school-hero::after {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  right: 180px;
  bottom: -200px;

  border-radius: 50%;

  background:
    rgba(255,255,255,0.04);
}


.school-hero .container {
  position: relative;

  z-index: 2;
}


.school-hero span {
  display: block;

  margin-bottom: 15px;

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

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


.school-hero h1 {
  max-width: 950px;

  margin-bottom: 25px;

  color: white;

  font-size:
    clamp(
      3.2rem,
      7vw,
      6rem
    );

  line-height: 1;
}


.school-hero p {
  max-width: 650px;

  margin: 0;

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

  font-size: 1.05rem;

  line-height: 1.8;
}


/* =========================================
   GENERAL
========================================= */

.school-eyebrow {
  display: block;

  margin-bottom: 10px;

  color:
    var(--primary);

  font-size: 0.77rem;
  font-weight: 800;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.school-section-header {
  max-width: 760px;

  margin-bottom: 50px;
}


.school-section-header h2 {
  margin-bottom: 15px;

  color:
    var(--primary-dark);

  font-size:
    clamp(
      2.5rem,
      5vw,
      4.2rem
    );
}


.school-section-header p {
  margin: 0;

  color:
    var(--text-light);
}


/* =========================================
   PRESENTACIÓN
========================================= */

.school-about {
  padding:
    120px 0;
}


.school-about-grid {
  display: grid;

  grid-template-columns:
    1.25fr 0.75fr;

  gap: 90px;

  align-items: center;
}


.school-about-content h2 {
  margin-bottom: 25px;

  color:
    var(--primary-dark);

  font-size:
    clamp(
      2.6rem,
      5vw,
      4.4rem
    );

  line-height: 1.07;
}


.school-about-text p {
  margin-bottom: 20px;

  color:
    var(--text-light);

  font-size: 1.02rem;

  line-height: 1.9;
}


.school-about-card {
  min-height: 370px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 42px;

  position: relative;

  overflow: hidden;

  border-radius: 30px;

  background:
    linear-gradient(
      145deg,
      var(--primary),
      var(--primary-dark)
    );

  color: white;
}


.school-about-card::before {
  content: "HF";

  position: absolute;

  top: -20px;
  right: -5px;

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

  font-size: 12rem;

  font-weight: 800;

  line-height: 1;
}


.school-about-card span {
  margin-bottom: 8px;

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

  font-size: 0.74rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.school-about-card strong {
  position: relative;

  font-family:
    "Playfair Display",
    serif;

  font-size: 2.5rem;

  line-height: 1.1;
}


.school-about-card p {
  position: relative;

  max-width: 300px;

  margin:
    15px 0 0;

  color:
    rgba(255,255,255,0.68);
}


/* =========================================
   CIFRAS
========================================= */

.school-numbers {
  padding:
    85px 0;

  background:
    var(--primary-dark);

  color: white;
}


.school-numbers-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);
}


.school-numbers article {
  padding:
    20px 35px;

  border-right:
    1px solid
    rgba(255,255,255,0.13);
}


.school-numbers article:last-child {
  border-right: none;
}


.school-numbers strong {
  display: block;

  margin-bottom: 10px;

  color: white;

  font-size:
    clamp(
      2.7rem,
      5vw,
      4.5rem
    );

  line-height: 1;

  font-weight: 800;
}


.school-numbers span {
  color:
    rgba(255,255,255,0.63);

  font-size: 0.85rem;
}


/* =========================================
   NIVELES
========================================= */

.school-levels {
  padding:
    125px 0;

  background:
    var(--background);
}


.school-level-grid {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 25px;
}


.school-level-card {
  position: relative;

  min-height: 340px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 42px;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 28px;

  background: white;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.school-level-card:hover {
  transform:
    translateY(-6px);

  box-shadow:
    var(--shadow);
}


.level-index {
  position: absolute;

  top: 20px;
  right: 28px;

  color:
    rgba(16,60,104,0.06);

  font-size: 7rem;

  line-height: 1;

  font-weight: 800;
}


.level-range {
  margin-bottom: 10px;

  color:
    var(--primary);

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.school-level-card h3 {
  margin-bottom: 12px;

  color:
    var(--primary-dark);

  font-size: 1.7rem;
}


.school-level-card p {
  max-width: 500px;

  margin: 0;

  color:
    var(--text-light);
}


/* =========================================
   MISIÓN / VISIÓN
========================================= */

.school-purpose {
  padding:
    120px 0;
}


.school-purpose-grid {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 25px;
}


.purpose-card {
  min-height: 400px;

  padding: 45px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  border:
    1px solid
    var(--border);

  border-radius: 30px;

  background:
    var(--background);
}


.purpose-card > span {
  margin-bottom: 10px;

  color:
    var(--primary);

  font-size: 0.75rem;

  font-weight: 800;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.purpose-card h2 {
  margin-bottom: 20px;

  color:
    var(--primary-dark);

  font-size: 3rem;
}


.purpose-card p {
  margin: 0;

  color:
    var(--text-light);

  line-height: 1.85;
}


.purpose-dark {
  background:
    var(--primary-dark);

  color: white;
}


.purpose-dark > span {
  color:
    rgba(255,255,255,0.6);
}


.purpose-dark h2 {
  color: white;
}


.purpose-dark p {
  color:
    rgba(255,255,255,0.67);
}


/* =========================================
   PROYECTO EDUCATIVO
========================================= */

.school-project {
  padding:
    110px 0;

  background:
    var(--primary);
}


.school-project-grid {
  display: grid;

  grid-template-columns:
    0.8fr 1.2fr;

  gap: 80px;
}


.school-project .school-eyebrow {
  color:
    rgba(255,255,255,0.6);
}


.school-project h2 {
  color: white;

  font-size:
    clamp(
      2.5rem,
      5vw,
      4rem
    );
}


.school-project p {
  margin: 0;

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

  font-size: 1.03rem;

  line-height: 1.9;
}


/* =========================================
   VALORES
========================================= */

.school-values {
  padding:
    125px 0;

  background:
    var(--background);
}


.school-values-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 18px;
}


.school-value-card {
  min-height: 235px;

  padding: 28px;

  border:
    1px solid
    var(--border);

  border-radius: 23px;

  background: white;
}


.school-value-number {
  display: block;

  margin-bottom: 45px;

  color:
    var(--primary);

  font-size: 0.75rem;

  font-weight: 800;
}


.school-value-card h3 {
  margin-bottom: 10px;

  color:
    var(--primary-dark);

  font-size: 1.15rem;
}


.school-value-card p {
  margin: 0;

  color:
    var(--text-light);

  font-size: 0.86rem;

  line-height: 1.7;
}


/* =========================================
   CTA
========================================= */

.school-cta {
  padding:
    95px 0;

  background:
    #071b31;

  color: white;
}


.school-cta-grid {
  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 60px;

  align-items: center;
}


.school-cta span {
  display: block;

  margin-bottom: 8px;

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

  font-size: 0.76rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}


.school-cta h2 {
  margin-bottom: 12px;

  color: white;

  font-size:
    clamp(
      2.3rem,
      5vw,
      3.7rem
    );
}


.school-cta p {
  max-width: 620px;

  margin: 0;

  color:
    rgba(255,255,255,0.64);
}


.school-cta-button {
  min-height: 52px;

  display: inline-flex;

  align-items: center;

  padding:
    0 24px;

  border-radius: 100px;

  background: white;

  color:
    var(--primary-dark);

  font-weight: 800;

  white-space: nowrap;

  transition:
    transform 0.25s ease;
}


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


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

@media (max-width: 950px) {

  .school-about-grid {
    grid-template-columns:
      1fr;

    gap: 50px;
  }


  .school-about-card {
    max-width: 600px;
  }


  .school-numbers-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .school-numbers article {
    border-bottom:
      1px solid
      rgba(255,255,255,0.13);
  }


  .school-purpose-grid {
    grid-template-columns:
      1fr;
  }


  .school-project-grid {
    grid-template-columns:
      1fr;

    gap: 30px;
  }


  .school-values-grid {
    grid-template-columns:
      repeat(2,1fr);
  }

}


@media (max-width: 650px) {

  .school-hero {
    padding:
      150px 0
      80px;
  }


  .school-about,
  .school-purpose,
  .school-levels,
  .school-values {
    padding:
      80px 0;
  }


  .school-level-grid {
    grid-template-columns:
      1fr;
  }


  .school-numbers-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .school-numbers article {
    padding:
      25px 18px;
  }


  .school-values-grid {
    grid-template-columns:
      1fr;
  }


  .school-cta-grid {
    grid-template-columns:
      1fr;
  }

}