/* =========================================================
   POPUP - COLEGIO HENRI FAYOL
========================================================= */

.school-popup {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 25px;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}


/* POPUP VISIBLE */

.school-popup.visible {
  opacity: 1;
  visibility: visible;
}


/* =========================================================
   FONDO
========================================================= */

.school-popup-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(3, 17, 29, 0.82);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


/* =========================================================
   VENTANA
========================================================= */

.school-popup-window {
  position: relative;

  z-index: 2;

  width:
    min(
      940px,
      100%
    );

  min-height: 520px;

  display: grid;

  grid-template-columns:
    0.9fr 1.1fr;

  overflow: hidden;

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

  border-radius: 30px;

  background: white;

  box-shadow:
    0 40px 120px
    rgba(0,0,0,0.38);

  transform:
    translateY(25px)
    scale(0.97);

  transition:
    transform 0.3s ease;
}


.school-popup.visible
.school-popup-window {
  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   IMAGEN
========================================================= */

.school-popup-image {
  position: relative;

  min-height: 520px;

  overflow: hidden;

  background:
    #f5f7fa;
}


.school-popup-image img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;
}


/* PEQUEÑO DEGRADADO ENTRE IMAGEN Y TEXTO */

.school-popup-image::after {
  content: "";

  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;

  width: 45px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(255,255,255,0.18)
    );

  pointer-events: none;
}


/* =========================================================
   CONTENIDO
========================================================= */

.school-popup-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    60px 55px;

  background: white;
}


.school-popup-label {
  display: block;

  margin-bottom: 12px;

  color:
    var(--primary);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.school-popup-content h2 {
  margin:
    0 0
    20px;

  color:
    var(--primary-dark);

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

  line-height: 1.04;

  letter-spacing: -0.025em;
}


.school-popup-content p {
  max-width: 460px;

  margin:
    0 0
    30px;

  color:
    var(--text-light);

  font-size: 0.95rem;

  line-height: 1.8;
}


/* =========================================================
   BOTONES
========================================================= */

.school-popup-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


.school-popup-primary,
.school-popup-secondary {
  min-height: 48px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    0 20px;

  border-radius: 100px;

  font-size: 0.79rem;

  font-weight: 800;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.school-popup-primary:hover,
.school-popup-secondary:hover {
  transform:
    translateY(-2px);
}


/* BOTÓN PRINCIPAL */

.school-popup-primary {
  background:
    var(--primary);

  color: white;

  box-shadow:
    0 8px 25px
    rgba(16,60,104,0.16);
}


.school-popup-primary:hover {
  background:
    var(--primary-dark);
}


/* BOTÓN SECUNDARIO */

.school-popup-secondary {
  border:
    1px solid
    var(--border);

  background: white;

  color:
    var(--primary);
}


.school-popup-secondary:hover {
  border-color:
    rgba(16,60,104,0.25);

  background:
    var(--background);
}


/* =========================================================
   BOTÓN CERRAR
========================================================= */

.school-popup-close {
  position: absolute;

  z-index: 10;

  top: 18px;
  right: 18px;

  width: 43px;
  height: 43px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0;

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

  border-radius: 50%;

  background:
    rgba(255,255,255,0.94);

  color:
    var(--primary-dark);

  font-family: Arial, sans-serif;

  font-size: 1.45rem;

  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 7px 25px
    rgba(0,0,0,0.08);

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.school-popup-close:hover {
  transform:
    rotate(5deg)
    scale(1.06);

  background: white;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

  .school-popup-window {
    grid-template-columns:
      0.85fr 1.15fr;
  }


  .school-popup-content {
    padding:
      50px 38px;
  }


  .school-popup-content h2 {
    font-size:
      clamp(
        2.2rem,
        6vw,
        3.4rem
      );
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .school-popup {
    padding: 15px;
  }


  .school-popup-window {
    width: 100%;

    min-height: 0;

    max-height:
      calc(100vh - 30px);

    display: grid;

    grid-template-columns:
      1fr;

    overflow-y: auto;

    border-radius: 24px;
  }


  .school-popup-image {
    min-height: 310px;

    max-height: 360px;

    background: white;
  }


  .school-popup-image img {
    object-fit: contain;

    background: white;
  }


  .school-popup-image::after {
    display: none;
  }


  .school-popup-content {
    padding:
      35px 28px
      32px;
  }


  .school-popup-content h2 {
    margin-bottom: 14px;

    font-size:
      clamp(
        2rem,
        10vw,
        3rem
      );
  }


  .school-popup-content p {
    margin-bottom: 25px;

    font-size: 0.88rem;
  }


  .school-popup-actions {
    flex-direction:
      column;
  }


  .school-popup-primary,
  .school-popup-secondary {
    width: 100%;
  }


  .school-popup-close {
    position: fixed;

    top: 27px;
    right: 27px;
  }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 430px) {

  .school-popup-image {
    min-height: 260px;
  }


  .school-popup-content {
    padding:
      30px 22px;
  }


  .school-popup-label {
    font-size: 0.66rem;
  }


  .school-popup-content h2 {
    font-size: 2rem;
  }

}