/* ==================================================
   EXÁMENES
   Usa las variables del CSS principal:

   --blue
   --blue-light
   --navy
   --dark
   --text
   --muted
   --soft
   --soft-blue
   --border
   --shadow
================================================== */



/* ==================================================
   HEADER - PÁGINA ACTUAL
================================================== */

.current-page{
  color:var(--blue);
}



/* ==================================================
   INTRO
================================================== */

.exams-intro{
  position:relative;

  padding:
    95px
    0
    90px;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #f4f9ff,
      #ffffff
    );
}


.exams-intro .container{
  position:relative;

  z-index:3;
}


.exams-intro-copy{
  width:min(
    820px,
    100%
  );

  margin:auto;

  text-align:center;
}


.exams-intro h1{
  margin:
    13px
    0
    20px;

  color:var(--dark);

  font-size:
    clamp(
      48px,
      6vw,
      74px
    );

  line-height:1.02;

  letter-spacing:-.05em;
}


.exams-intro h1 span{
  display:block;

  color:var(--blue);
}


.exams-intro p{
  width:min(
    650px,
    100%
  );

  margin:
    0
    auto
    28px;

  color:var(--muted);

  font-size:17px;

  line-height:1.75;
}



/* DECORACIONES */

.intro-decoration{
  position:absolute;

  border-radius:50%;

  pointer-events:none;
}


.intro-decoration-one{
  width:290px;

  height:290px;

  left:-120px;

  bottom:-100px;

  background:#dfeaff;

  opacity:.55;
}


.intro-decoration-two{
  width:220px;

  height:220px;

  right:-80px;

  top:15px;

  background:#e7e2ff;

  opacity:.45;
}



/* ==================================================
   LISTA
================================================== */

.exam-list{
  background:#fff;
}



/* ==================================================
   BLOQUE DE EXAMEN
================================================== */

.exam-showcase{
  padding:
    80px
    0;

  background:#fff;
}


.exam-showcase-soft{
  background:var(--soft);
}



/* ==================================================
   GRID
================================================== */

.exam-showcase-grid{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  align-items:center;

  gap:70px;
}



/* ALTERNA LA IMAGEN */

.exam-reverse
.exam-image-wrap{
  order:2;
}


.exam-reverse
.exam-info{
  order:1;
}



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

.exam-image-wrap{
  position:relative;

  overflow:hidden;

  min-height:370px;

  display:flex;

  align-items:center;

  justify-content:center;

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

  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      #edf5ff,
      #f8fbff
    );

  box-shadow:
    0
    18px
    45px
    rgba(14,45,90,.09);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.exam-image-wrap:hover{
  transform:
    translateY(-5px);

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


.exam-image-wrap::after{
  content:"";

  position:absolute;

  right:-65px;

  top:-65px;

  width:170px;

  height:170px;

  border-radius:50%;

  background:
    rgba(
      82,
      120,
      255,
      .08
    );

  pointer-events:none;
}


.exam-image-wrap img{
  position:relative;

  z-index:2;

  width:100%;

  height:100%;

  min-height:370px;

  object-fit:cover;

  transition:
    transform .45s ease;
}


.exam-image-wrap:hover img{
  transform:
    scale(1.025);
}



/* ==================================================
   INFORMACIÓN
================================================== */

.exam-info{
  max-width:520px;
}


.exam-label{
  display:inline-block;

  margin-bottom:11px;

  color:var(--blue);

  font-size:11px;

  font-weight:900;

  letter-spacing:.12em;
}


.exam-info h2{
  margin:
    0
    0
    13px;

  color:var(--dark);

  font-size:
    clamp(
      38px,
      4.5vw,
      57px
    );

  line-height:1.05;

  letter-spacing:-.04em;
}


.exam-lead{
  margin:
    0
    0
    12px;

  color:#264b72 !important;

  font-size:19px !important;

  font-weight:800;

  line-height:1.45 !important;
}


.exam-info > p{
  margin:
    0
    0
    25px;

  color:var(--muted);

  font-size:15px;

  line-height:1.8;
}



/* ==================================================
   MÁS INFORMACIÓN
================================================== */

.exam-more{
  display:inline-flex;

  align-items:center;

  gap:9px;

  padding:
    12px
    0;

  color:var(--blue);

  font-size:14px;

  font-weight:900;

  transition:
    gap .2s ease,
    color .2s ease;
}


.exam-more span{
  font-size:20px;

  line-height:1;
}


.exam-more:hover{
  gap:14px;

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



/* ==================================================
   CONTACTO
================================================== */

.exam-contact{
  background:#fff;
}



/* ==================================================
   ANIMACIÓN ADICIONAL DE IMAGEN
================================================== */

.exam-image-wrap.reveal.visible img{
  animation:
    imageEntry
    .75s
    ease
    both;
}


@keyframes imageEntry{

  from{
    opacity:.8;

    transform:
      scale(.97);
  }

  to{
    opacity:1;

    transform:
      scale(1);
  }

}



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

@media(max-width:1000px){


  .exam-showcase{
    padding:
      70px
      0;
  }


  .exam-showcase-grid{
    grid-template-columns:1fr;

    gap:38px;
  }


  .exam-image-wrap,
  .exam-info{
    width:min(
      700px,
      100%
    );

    margin:auto;
  }


  .exam-info{
    max-width:700px;

    text-align:center;
  }


  .exam-reverse
  .exam-image-wrap{
    order:1;
  }


  .exam-reverse
  .exam-info{
    order:2;
  }


}



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

@media(max-width:700px){


  .exams-intro{
    padding:
      70px
      0
      65px;
  }


  .exams-intro h1{
    font-size:44px;
  }


  .exams-intro p{
    font-size:15px;
  }


  .exam-showcase{
    padding:
      55px
      0;
  }


  .exam-showcase-grid{
    gap:28px;
  }


  .exam-image-wrap{
    min-height:0;

    border-radius:22px;
  }


  .exam-image-wrap img{
    min-height:0;

    aspect-ratio:
      16 / 9;

    object-fit:cover;
  }


  .exam-info h2{
    font-size:38px;
  }


  .exam-lead{
    font-size:17px !important;
  }


  .exam-info > p{
    font-size:14px;
  }


}



/* ==================================================
   CELULAR PEQUEÑO
================================================== */

@media(max-width:480px){


  .exams-intro h1{
    font-size:38px;
  }


  .exam-showcase{
    padding:
      47px
      0;
  }


  .exam-info h2{
    font-size:34px;
  }


}

/* ==================================================
   FALLBACK DE IMAGEN
================================================== */

.exam-image-wrap.image-error{
  min-height:370px;

  background:
    linear-gradient(
      145deg,
      #dcecff,
      #f4f8fd
    );
}


.image-error-message{
  position:relative;

  z-index:3;

  padding:30px;

  display:flex;

  flex-direction:column;

  align-items:center;

  text-align:center;
}


.image-error-message strong{
  color:var(--dark);

  font-size:20px;
}


.image-error-message span{
  margin-top:7px;

  color:var(--muted);

  font-size:13px;
}