/* ==================================================
   NOTICIAS Y RESULTADOS
================================================== */


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

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



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

.news-hero{
  padding:
    90px
    0
    75px;

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


.news-hero-content{
  max-width:760px;

  margin:auto;

  text-align:center;
}


.news-hero h1{
  margin:
    12px
    0
    18px;

  color:var(--dark);

  font-size:
    clamp(
      46px,
      6vw,
      70px
    );

  line-height:1;

  letter-spacing:-.05em;
}


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


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

  margin:auto;

  color:var(--muted);

  font-size:16px;

  line-height:1.75;
}



/* ==================================================
   SECCIÓN
================================================== */

.news-section{
  padding:
    20px
    0
    100px;

  background:#fff;
}



/* ==================================================
   DOS PRINCIPALES
================================================== */

.featured-news-grid{
  display:grid;

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

  gap:46px;
}


.featured-news-card{
  min-width:0;
}


/* ==================================================
   IMÁGENES PRINCIPALES
================================================== */

.featured-image-link{
  display:block;

  text-decoration:none;
}


.featured-image{
  position:relative;

  width:100%;

  aspect-ratio:1.42 / 1;

  overflow:hidden;

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #f1f5fa,
      #e9f1fa
    );

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

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


/* TODAS LAS PRINCIPALES EXACTAMENTE IGUALES */

.featured-image img{
  position:absolute;

  inset:0;

  z-index:2;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .4s ease;
}


.featured-news-card:hover
.featured-image img{
  transform:scale(1.035);
}



/* ==================================================
   PLACEHOLDER
================================================== */

.image-placeholder{
  position:absolute;

  inset:0;

  z-index:1;

  display:grid;

  place-items:center;

  color:#9aaabd;

  font-size:11px;

  font-weight:900;

  letter-spacing:.12em;

  text-align:center;
}


/*
   Cuando todavía NO tengas la imagen,
   el texto IMAGEN 01, etc. se verá.

   Cuando pongas correctamente el archivo,
   la imagen queda encima automáticamente.
*/



/* ==================================================
   TEXTO PRINCIPAL
================================================== */

.featured-content{
  padding:
    25px
    5px
    0;
}


.news-category{
  display:inline-block;

  margin-bottom:10px;

  color:var(--blue);

  font-size:10px;

  font-weight:900;

  letter-spacing:.12em;

  text-transform:uppercase;
}


.featured-content h2{
  margin:
    0
    0
    10px;

  color:var(--dark);

  font-size:
    clamp(
      22px,
      2.3vw,
      30px
    );

  line-height:1.25;

  letter-spacing:-.025em;
}


.featured-content h2 a{
  color:inherit;

  text-decoration:none;
}


.featured-content h2 a:hover{
  color:var(--blue);
}


.news-date{
  display:block;

  color:#8a9aab;

  font-size:11px;

  font-weight:700;
}


.featured-content p{
  margin:
    15px
    0
    18px;

  color:var(--muted);

  font-size:13px;

  line-height:1.75;
}


.news-read-more{
  display:inline-flex;

  align-items:center;

  gap:8px;

  color:var(--blue);

  font-size:12px;

  font-weight:900;

  text-decoration:none;
}


.news-read-more span{
  transition:
    transform .2s ease;
}


.news-read-more:hover span{
  transform:translateX(4px);
}



/* ==================================================
   SEPARADOR
================================================== */

.news-divider{
  margin:
    75px
    0
    38px;

  display:flex;

  align-items:center;

  gap:20px;
}


.news-divider::before,
.news-divider::after{
  content:"";

  flex:1;

  height:1px;

  background:var(--border);
}


.news-divider span{
  color:var(--dark);

  font-size:11px;

  font-weight:900;

  letter-spacing:.1em;

  text-transform:uppercase;
}



/* ==================================================
   12 NOTICIAS
   3 COLUMNAS x 4 FILAS
================================================== */

.news-grid{
  display:grid;

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

  gap:
    50px
    55px;
}



/* ==================================================
   TARJETAS PEQUEÑAS
================================================== */

.news-card{
  min-width:0;
}


.news-image-link{
  display:block;

  text-decoration:none;
}


/*
   IMPORTANTE:
   TODAS LAS 12 IMÁGENES TIENEN EXACTAMENTE
   EL MISMO TAMAÑO
*/

.news-image{
  position:relative;

  width:100%;

  aspect-ratio:1.28 / 1;

  overflow:hidden;

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

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      #f2f6fb,
      #e9f1fa
    );

  box-shadow:
    0 12px 32px
    rgba(14,45,90,.07);
}


.news-image img{
  position:absolute;

  inset:0;

  z-index:2;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .35s ease;
}


.news-card:hover
.news-image img{
  transform:scale(1.04);
}



/* ==================================================
   TEXTO TARJETAS
================================================== */

.news-card-content{
  padding:
    18px
    3px
    0;
}


.news-card-content
.news-category{
  margin-bottom:8px;
}


.news-card-content h3{
  margin:
    0
    0
    10px;

  color:var(--dark);

  font-size:16px;

  line-height:1.4;

  letter-spacing:-.015em;
}


.news-card-content h3 a{
  color:inherit;

  text-decoration:none;

  transition:color .2s ease;
}


.news-card-content h3 a:hover{
  color:var(--blue);
}



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

@media(max-width:1000px){

  .featured-news-grid{
    gap:28px;
  }


  .news-grid{
    gap:
      40px
      28px;
  }

}



/* ==================================================
   TABLET PEQUEÑO
================================================== */

@media(max-width:850px){

  /*
     PRINCIPALES SIGUEN DEL MISMO TAMAÑO,
     PERO PASAN UNA DEBAJO DE LA OTRA.
  */

  .featured-news-grid{
    grid-template-columns:1fr;

    width:min(
      650px,
      100%
    );

    margin:auto;
  }


  /*
     LAS 12 PASAN A 2 COLUMNAS
  */

  .news-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}



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

@media(max-width:600px){

  .news-hero{
    padding:
      65px
      0
      55px;
  }


  .news-hero h1{
    font-size:44px;
  }


  .news-section{
    padding-bottom:75px;
  }


  .featured-news-grid{
    gap:45px;
  }


  .featured-content{
    padding-top:18px;
  }


  .news-divider{
    margin:
      55px
      0
      30px;
  }


  /*
     LAS 12 NOTICIAS UNA DEBAJO DE OTRA
  */

  .news-grid{
    grid-template-columns:1fr;

    width:min(
      480px,
      100%
    );

    margin:auto;

    gap:38px;
  }


  .news-card-content h3{
    font-size:17px;
  }

}