/* ==================================================
   ENGLISHSCORE
   MISMA IDENTIDAD VISUAL DEL SITIO
================================================== */



/* ==================================================
   HEADER
================================================== */

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


.current-exam{
  color:var(--blue) !important;

  background:var(--soft-blue);
}



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

.englishscore-hero{
  position:relative;

  min-height:650px;

  padding:75px 0;

  overflow:hidden;

  display:flex;

  align-items:center;

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


.englishscore-hero-grid{
  position:relative;

  z-index:3;

  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:55px;

  align-items:center;
}


.englishscore-hero-copy{
  position:relative;

  z-index:3;
}


.englishscore-kicker{
  margin:
    14px
    0
    0;

  color:#264b72;

  font-size:20px;

  font-weight:800;
}


.englishscore-hero h1{
  margin:
    13px
    0
    20px;

  color:var(--dark);

  font-size:
    clamp(
      56px,
      7vw,
      88px
    );

  line-height:.95;

  letter-spacing:-.055em;
}


.englishscore-hero h1 span{
  color:var(--blue);
}


.englishscore-hero-description{
  max-width:610px;

  color:var(--muted);

  font-size:17px;

  line-height:1.7;
}



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

.englishscore-hero-visual{
  position:relative;

  min-height:500px;

  display:grid;

  place-items:center;
}


.englishscore-hero-shape{
  position:absolute;

  width:440px;

  height:390px;

  max-width:90%;

  border-radius:
    47%
    53%
    56%
    44%
    /
    44%
    46%
    54%
    56%;

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


.englishscore-main-image{
  position:relative;

  z-index:3;

  width:min(
    520px,
    95%
  );

  border-radius:24px;

  box-shadow:
    0
    25px
    55px
    rgba(12,97,186,.16);

  transform:rotate(-2deg);

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


.englishscore-main-image:hover{
  transform:
    rotate(0deg)
    translateY(-5px);

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


.englishscore-floating-one{
  left:-20px;

  top:95px;
}


.englishscore-floating-two{
  right:-5px;

  bottom:75px;
}



/* ==================================================
   DECORACIONES
================================================== */

.englishscore-decoration{
  position:absolute;

  border-radius:50%;

  pointer-events:none;
}


.englishscore-decoration-one{
  width:310px;

  height:310px;

  left:-140px;

  bottom:-80px;

  background:#dfeaff;

  opacity:.55;
}


.englishscore-decoration-two{
  width:230px;

  height:230px;

  right:-80px;

  top:35px;

  background:#e7e2ff;

  opacity:.45;
}



/* ==================================================
   QUÉ ES ENGLISHSCORE
================================================== */

.englishscore-about{
  background:#fff;
}


.englishscore-about-grid{
  display:grid;

  grid-template-columns:
    .8fr
    1.2fr;

  gap:80px;
}


.englishscore-about-title h2{
  margin:
    10px
    0
    0;

  color:var(--dark);

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

  line-height:1.06;

  letter-spacing:-.04em;
}


.englishscore-about-content > p{
  margin:
    0
    0
    19px;

  color:var(--muted);

  font-size:15px;

  line-height:1.85;
}



/* ==================================================
   NOTA
================================================== */

.englishscore-note{
  margin-top:30px;

  padding:
    23px
    25px;

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

  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      var(--soft-blue),
      #f8fbff
    );
}


.englishscore-note strong{
  display:block;

  margin-bottom:7px;

  color:var(--dark);

  font-size:15px;
}


.englishscore-note p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* ==================================================
   ESTRUCTURA
================================================== */

.englishscore-structure{
  background:var(--soft);
}


.englishscore-skill-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:18px;
}


.englishscore-skill-card{
  position:relative;

  min-height:330px;

  padding:
    27px
    23px;

  overflow:hidden;

  display:flex;

  flex-direction:column;

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

  border-radius:22px;

  background:#fff;

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


.englishscore-skill-card::after{
  content:"";

  position:absolute;

  right:-38px;

  top:-38px;

  width:110px;

  height:110px;

  border-radius:50%;

  background:#eef5ff;
}


.englishscore-skill-card:hover{
  transform:translateY(-6px);

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


.skill-number{
  position:relative;

  z-index:2;

  width:48px;

  height:48px;

  display:grid;

  place-items:center;

  margin-bottom:20px;

  border-radius:14px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--blue-light),
      var(--blue)
    );

  font-size:12px;

  font-weight:900;
}


.englishscore-skill-card h3{
  margin:
    0
    0
    7px;

  color:var(--dark);

  font-size:22px;

  line-height:1.25;
}


.englishscore-skill-card > strong{
  display:block;

  margin-bottom:13px;

  color:var(--blue);

  font-size:13px;
}


.englishscore-skill-card p{
  margin:
    0
    0
    20px;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}


.skill-time{
  margin-top:auto;

  padding-top:14px;

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

  color:#47627e;

  font-size:11px;

  font-weight:800;
}



/* ==================================================
   DATOS PRINCIPALES
================================================== */

.englishscore-details{
  background:#fff;
}


.englishscore-details-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:18px;
}


.detail-card{
  min-height:230px;

  padding:30px;

  display:flex;

  flex-direction:column;

  justify-content:center;

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

  border-radius:24px;

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

  text-align:center;

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


.detail-card:hover{
  transform:translateY(-5px);

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


.detail-label{
  margin-bottom:13px;

  color:var(--blue);

  font-size:10px;

  font-weight:900;

  letter-spacing:.12em;
}


.detail-card > strong{
  margin-bottom:9px;

  color:var(--dark);

  font-size:
    clamp(
      26px,
      3vw,
      38px
    );

  line-height:1.1;
}


.detail-card p{
  max-width:270px;

  margin:
    0
    auto;

  color:var(--muted);

  font-size:12px;

  line-height:1.6;
}



/* ==================================================
   UNA SOLA IMAGEN INFORMATIVA
   MÁXIMO 580PX
================================================== */

.englishscore-images-section{
  background:#fff;
}


.englishscore-images-grid{
  display:grid;

  gap:24px;
}


.englishscore-images-grid.single-image{
  grid-template-columns:1fr;

  width:min(
    580px,
    100%
  );

  margin:auto;
}


.englishscore-info-image{
  overflow:hidden;

  padding:18px;

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

  border-radius:24px;

  background:#fff;

  box-shadow:
    0
    15px
    40px
    rgba(14,45,90,.08);

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


.englishscore-info-image:hover{
  transform:translateY(-5px);

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


.englishscore-info-image img{
  display:block;

  width:100%;

  height:auto;

  border-radius:16px;
}



/* ==================================================
   USOS COMUNES
================================================== */

.englishscore-uses{
  background:var(--soft);
}


.englishscore-uses-grid{
  display:grid;

  grid-template-columns:
    1.1fr
    .9fr;

  gap:70px;

  align-items:center;
}


.englishscore-uses-content h2{
  margin:
    10px
    0
    15px;

  color:var(--dark);

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

  line-height:1.06;

  letter-spacing:-.04em;
}


.englishscore-uses-content > p{
  max-width:650px;

  color:var(--muted);

  font-size:15px;

  line-height:1.75;
}



/* ==================================================
   LISTA DE USOS
================================================== */

.use-list{
  margin-top:30px;

  display:grid;

  gap:13px;
}


.use-item{
  padding:
    17px
    18px;

  display:flex;

  align-items:flex-start;

  gap:14px;

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

  border-radius:17px;

  background:#fff;
}


.use-item > span{
  width:31px;

  height:31px;

  flex:
    0
    0
    31px;

  display:grid;

  place-items:center;

  border-radius:50%;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--blue-light),
      var(--blue)
    );

  font-size:12px;

  font-weight:900;
}


.use-item strong{
  display:block;

  margin-bottom:4px;

  color:var(--dark);

  font-size:14px;
}


.use-item p{
  margin:0;

  color:var(--muted);

  font-size:12px;

  line-height:1.6;
}



/* ==================================================
   SCORE CARD
================================================== */

.englishscore-score-card{
  padding:
    38px
    35px;

  border-radius:28px;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      var(--navy),
      var(--blue)
    );

  box-shadow:
    0
    24px
    55px
    rgba(12,43,103,.20);
}


.score-eyebrow{
  color:#b8d0ff;

  font-size:11px;

  font-weight:900;

  letter-spacing:.12em;
}


.englishscore-score-card h3{
  margin:
    10px
    0
    25px;

  color:#fff;

  font-size:28px;

  line-height:1.15;
}


.score-circle{
  width:180px;

  height:180px;

  margin:
    0
    auto
    25px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  border:
    12px solid
    rgba(255,255,255,.14);

  border-radius:50%;

  background:
    rgba(255,255,255,.06);
}


.score-circle strong{
  color:#fff;

  font-size:48px;

  line-height:1;
}


.score-circle span{
  margin-top:7px;

  color:#c8daf8;

  font-size:11px;
}


.englishscore-score-card > p{
  color:
    rgba(255,255,255,.78);

  font-size:13px;

  line-height:1.7;

  text-align:center;
}


.score-old{
  margin-top:25px;

  padding:18px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  border-radius:16px;

  background:
    rgba(255,255,255,.10);
}


.score-old span{
  color:#c8daf8;

  font-size:11px;
}


.score-old strong{
  color:#fff;

  font-size:20px;
}



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

.englishscore-contact{
  background:#fff;
}



/* ==================================================
   DELAY
================================================== */

.delay-small{
  transition-delay:.08s;
}



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

@media(max-width:1000px){


  .englishscore-hero-grid,
  .englishscore-about-grid,
  .englishscore-uses-grid{
    grid-template-columns:1fr;
  }


  .englishscore-hero-copy{
    text-align:center;
  }


  .englishscore-hero-description{
    margin-left:auto;

    margin-right:auto;
  }


  .englishscore-hero-copy
  .hero-actions,
  .englishscore-hero-copy
  .hero-benefits{
    justify-content:center;
  }


  .englishscore-hero-visual{
    width:min(
      650px,
      100%
    );

    margin:auto;
  }


  .englishscore-about-title,
  .englishscore-about-content{
    max-width:750px;

    margin:auto;
  }


  .englishscore-about-title{
    text-align:center;
  }


  .englishscore-skill-grid{
    grid-template-columns:1fr;
  }


  .englishscore-uses-content{
    text-align:center;
  }


  .englishscore-uses-content > p{
    margin-left:auto;

    margin-right:auto;
  }


  .use-list{
    text-align:left;
  }


  .englishscore-score-card{
    max-width:600px;

    margin:auto;
  }


}



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

@media(max-width:700px){


  .englishscore-hero{
    min-height:auto;

    padding:
      60px
      0;
  }


  .englishscore-hero h1{
    font-size:60px;
  }


  .englishscore-kicker{
    font-size:17px;
  }


  .englishscore-hero-visual{
    min-height:360px;
  }


  .englishscore-hero-shape{
    width:330px;

    height:300px;
  }


  .englishscore-main-image{
    width:92%;
  }


  .englishscore-floating-one,
  .englishscore-floating-two{
    display:none;
  }


  .englishscore-about-grid{
    gap:35px;
  }


  .englishscore-about-title h2{
    font-size:36px;
  }


  .englishscore-details-grid{
    grid-template-columns:1fr;
  }


  .englishscore-info-image{
    padding:12px;

    border-radius:20px;
  }


  .englishscore-info-image img{
    border-radius:13px;
  }


  .englishscore-uses-grid{
    gap:40px;
  }


  .englishscore-uses-content h2{
    font-size:36px;
  }


}



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

@media(max-width:480px){


  .englishscore-hero h1{
    font-size:48px;
  }


  .score-old{
    flex-direction:column;

    text-align:center;
  }


}

/* ==================================================
   FALLBACK IMAGEN PRINCIPAL
================================================== */

.englishscore-image-fallback{
  position:relative;

  z-index:3;

  width:min(
    440px,
    90%
  );

  min-height:280px;

  padding:35px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

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

  border-radius:24px;

  background:#fff;

  box-shadow:var(--shadow);

  text-align:center;
}


.englishscore-image-fallback strong{
  color:var(--dark);

  font-size:42px;
}


.englishscore-image-fallback span{
  margin-top:8px;

  color:var(--muted);

  font-size:13px;
}



/* ==================================================
   FALLBACK IMAGEN DE CALIFICACIÓN
================================================== */

.englishscore-score-fallback{
  min-height:300px;

  padding:30px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      var(--soft-blue),
      #f8fbff
    );
}


.englishscore-score-fallback strong{
  color:var(--dark);

  font-size:30px;
}


.englishscore-score-fallback span{
  max-width:260px;

  margin-top:8px;

  color:var(--muted);

  font-size:13px;
}