/* ===========================
   HERO INTERNAS — Versión final (465px)
   =========================== */

.page-hero{
  position: relative;
  width: 100%;
  min-height: 580px;   /* ← altura EXACTA del hero */
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #004b78; /* fallback */
}

/* Fondo con imagen de 465px */
.page-hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero-bg img{
  width: 100%;
  height: 580px;    /* ← altura real */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Contenedor del texto */
.page-hero-inner{
  position: relative;
  z-index: 2;
  padding-top: 80px;     /* separa del menú */
  padding-bottom: 80px;
}

/* Título */
.page-hero-title{
  margin: 0;
  color: #ffffff;
  font-family: var(--font-poppins);
  font-size: 48px;
  line-height: 1.1;
  font-weight: 800;
}
/* SUBTITULO EN EL HERO */
.page-hero-subtitle {
  display: block;              /* se comporta como línea propia */
            /* ajusta según tu diseño */
  font-weight: 600;            /* tipo etiqueta */
  color: #ffffff;              /* blanco para que destaque sobre la imagen */
  margin-bottom: 10px;         /* separación con el título */
    /* opcional, mejor legibilidad */
}



/* Wave inferior */
.page-hero-wave{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 219px;    /* ← altura EXACTA del SVG */
  background-image: url("../images/wave/wave-internas.svg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  z-index: 3;
}


.page-hero--solid .page-hero-bg{
  display: none;
}

.page-hero--solid{
  min-height: 465px;  /* misma altura */
  background: var(--azul-100);
}



/* Container exclusivo para héroes internos */
.page-hero-container{
  width: 1096px;        /* ← tu ancho exacto */
  max-width: 100%;
  margin: 0 auto;       /* ← centrado */
  position: relative;
  z-index: 2;
  padding: 80px 0;      /* si deseas mantener separación vertical */
}


/* ===== LISTADO DE NOTICIAS ===== */

.news-section{
  padding: 48px 0 72px;
  background: #fff;
}

.news-section-inner{
  width: 1066px;        /* 👉 ancho exacto */
  max-width: 100%;
  margin: 0 auto;
}



/* ---------------------------------------
   NOTICIAS – CARD DESTACADA
--------------------------------------- */

/* Contenedor general del destacado */
.news-feature-card{
  max-width: 1066px;          /* ancho Figma */
  height: 337px;              /* alto Figma */
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(0,0,0,.18);
  margin: 0 auto 40px;        /* centrado + separación inferior */
  background: #000;           /* por si no carga la imagen */
}

/* Wrapper de la imagen */
.news-feature-media{
  position: relative;
  width: 100%;
  height: 100%;
}

/* Imagen a full cover */
.news-feature-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Degradado inferior para que se lea el texto */
.news-feature-media::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;  /* ajusta si quieres más/menos degradado */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,36,68,0.86) 100%
  );
  pointer-events: none;
}

/* Capa donde va todo el contenido superpuesto */
.news-feature-overlay{
  position: absolute;
  inset: 0;
  padding: 24px 32px 28px; /* top, lados, bottom */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  z-index: 2;

  
}

/* Badge DESTACADO noticias, eventos */
.news-feature-badge{
  align-self: flex-start;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--verde-100, #5DA500);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.events-feature-badge{
  align-self: flex-start;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--azul-oscuro-100);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.recursos-feature-badge{
  align-self: flex-start;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--naranja-100);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.articulos-feature-badge{
  align-self: flex-start;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--azul-100);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* Bloque de fecha + título abajo a la izquierda */
.news-feature-text{
  max-width: 80%; /* deja aire para el botón + */
}

.news-feature-date{
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  opacity: .9;
}

.news-feature-title{
  margin: 0;
  font-family: var(--font-poppins, "Baloo 2", system-ui, sans-serif);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}

/* Botón + flotando abajo a la derecha */
.news-feature-plus{
  position: absolute;
  right: 32px;
  bottom: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--verde-100, #5DA500);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  /* 👇 estado base sin movimiento pero preparado para animar */
  transform: translateY(0) rotate(0deg);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}


@media (min-width: 1024px){
  .news-feature-plus:hover{
   
    transform: translateY(-2px) rotate(180deg);
    box-shadow: 0 15px 32px rgba(0,0,0,.4);
    background: #4a8c00;
  }


}




.news-featured-date{
  margin: 8px 0 6px;
  opacity: .9;
}

.news-featured-title{
  margin: 0;
}

/* Botón + flotante en la esquina inferior derecha */
.news-featured-more{
  position: absolute;
  right: 24px;
  bottom: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--verde-100, #63B000);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.news-featured-more:hover{
  transform: translateY(-1px);
}

/* filtros */
.news-filters{
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 24px;
  margin-bottom: 32px;
}

.news-filter{
  flex: 1;
}

.news-filter--search{
  max-width: 360px; /* ocupa menos, como en el figma */
}

.news-filter--sort{
  max-width: 220px;
}

/* Etiqueta + input con look de pill */
.news-filter-label{
  display: none; /* solo si luego quieres versión accesible */
}

.news-search-input{
  width: 100%;
  border-radius: 999px;
  border: 1px solid #E0E0E0;
  padding: 10px 16px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.news-search-input::placeholder{
  color: #B0B0B0;
}

/* Botón de ordenar */
.news-sort-btn{
  width: 100%;
  border-radius: 999px;
  border: 1px solid #E0E0E0;
  background: #fff;
  padding: 10px 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.news-sort-icon{
  width: 10px;
  height: 10px;
  border-right: 2px solid #777;
  border-bottom: 2px solid #777;
  transform: rotate(45deg);
}


/* paginacion */

.news-pagination{
  display: flex;
  justify-content: center;
  gap: 8px;
}



/* ===========================
   PAGINACIÓN DE NOTICIAS
   =========================== */

.news-pagination {
  display: flex;
  justify-content: center;
  margin: 60px 0;   /* 60 arriba / 60 abajo como en tu imagen */
}

.news-pagination-inner {
  display: flex;
  align-items: center;
  background: #ffffff;
  justify-content: center; /* 💥 ESTA ES LA CLAVE */
  border-radius: 40px; /* forma de píldora */
  /* padding-left: 62px;   
  padding-right: 62px;  */
  gap: 62PX; 
  height: 72px; /* se ve como tu imagen */
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  width: 712px;
}

.news-page-arrow {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #444;
  cursor: pointer;
  /* padding: 0 12px; */
  line-height: 1;
  display: flex;
  align-items: center;
}

.news-page-arrow:hover {
  color: #000;
}

.news-page-list {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-page-btn {
   font-family: var(--font-primary);
  background: #f3f3f3;
  border: none;
  color: #333;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s, color 0.2s;
  line-height: 24px;
  
}

.news-page-btn:hover {
  background: #e8e8e8;
}


.news-page-btn.is-active {
  font-family: var(--font-primary);
  background: #66B200; 
  color: #fff;
  font-weight: 600;
  line-height: 24px;
  
}

.news-page-separator {
  font-size: 20px;
  color: #777;
  padding: 0 6px;
}


@media (max-width: 960px){
  .news-section-inner{
    width: 100%;
    padding: 0 16px;
  }

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

@media (max-width: 640px){
  .news-grid{
    grid-template-columns: 1fr;
  }
}

.footer-white{
    background-color: #fff !important;
}

.footer-azul-10{
    background-color: var(--azul-10);
}
.footer-sello-ehr{
    background-color: #000000 !important;
}



/* grillas */


/* ==========================
   GRID – contenedor
   ========================== */

.news-grid{
  margin: 40px 0;
}

.news-grid-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Altura y radios estándar */
.news-more-card,.events-more-card,.articulos-more-card,.publicaciones-more-card,.recursos-more-card,
.news-card{
  position: relative;
  height: 323px;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
}

/* =========================================
   CARD VERDE “MÁS NOTICIAS”
   ========================================= */

.news-more-card{
  background-color: var(--verde-100);
  background-image: url("../images/trama_news.svg"); /* trama SVG */
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
}

.news-more-icon img,.events-more-icon img,.recursos-more-icon img,.articulos-more-icon img{
  width: 32px;
  height: 32px;
  display: block;
  margin-bottom: 40px;
}


.events-more-card{
  background-color: var(--azul-oscuro-100);
  background-image: url("../images/trama_news.svg"); /* trama SVG */
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
}

.recursos-more-card{
  background-color: var(--naranja-100);
  background-image: url("../images/trama_news.svg"); /* trama SVG */
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
}

.articulos-more-card{
  background-color: var(--azul-100);
  background-image: url("../images/trama_news.svg"); /* trama SVG */
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
}

.publicaciones-more-card{
  background-color: var(--azul2-100);
  background-image: url("../images/trama_news.svg"); /* trama SVG */
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
}

/* .events-more-icon img{
  width: 32px;
  height: 32px;
  display: block;
  margin-bottom: 40px;
} */



/* =========================================
   CARDS DE NOTICIAS (con imagen)
   ========================================= */

.news-card{
  color: #fff;
  box-shadow: 0 20px 45px rgba(0,0,0,.28);
  transition:
    transform .35s ease,
    box-shadow .35s ease;

  
   
}

/* imagen ocupa TODA la card */
.news-card-media{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  margin: 0;   /* <figure> sin margen */
  padding: 0;
}

.news-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* overlay (gradiente oscuro) generado automáticamente */
.news-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(0, 27, 54, 0.35) 0%,   /* 🔹 más suave en estado normal */
    rgba(0, 27, 54, 0.65) 50%,
    rgba(0, 27, 54, 0.85) 100%
  );
  opacity:.9;                   /* ✅ degradado visible siempre */
  transition: opacity .35s ease;
  pointer-events:none;
  
  
}

.news-card:hover::before{
  opacity:1;                    /* 🔹 un toque más intenso al hover */
}


/* contenido de texto */
.news-card-content{
  position:absolute;
  inset:0;
  padding: 24px 28px 30px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  z-index:2;
  opacity:1;                    /* ✅ SIEMPRE visibles */
  transition: opacity .35s ease; /* lo dejamos por si luego quieres animar algo */
}

.news-card-date{
  font-family: var(--font-primary);
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
}

.news-card-title{
  margin: 0;
  font-family: var(--font-poppins);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

/* Botón + (posición fija, aparece al hover) */
.news-card-plus{
  position:absolute;
  left:40px;        /* ajusta para pixel perfect */
  top:50%;
  transform:translateY(-50%) scale(0);
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--verde-100);
  color:#fff;
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  opacity:0;
  z-index:4;
  border:none;
  transition:
    opacity .35s ease,
    transform .35s ease;
}

.news-card-plus span{
  display:inline-block;
  margin-top:-2px;
  transition: transform .35s ease;
}

/* ==========================
   Estados hover – solo desktop
   ========================== */

@media (hover:hover) and (pointer:fine){

  .news-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 28px 70px rgba(0,0,0,.35);
  }

  .news-card:hover::before{
    z-index: 2;
    opacity:1;
  }

  /* .news-card:hover .news-card-content{
    opacity:1;
  } */

  .news-card:hover .news-card-plus{
    opacity:1;
    transform:translateY(-50%);
  }

  .news-card:hover .news-card-plus span{
    transform:rotate(180deg);
  }

  .news-more-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
  }

   .events-more-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
  }

  .recursos-more-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
  }
  .articulos-more-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
  }

}

/* ==========================
   Responsive grid
   ========================== */

@media (max-width: 960px){
  .news-section-inner{
    width: 100%;
    padding: 0 16px;
  }

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

@media (max-width: 640px){
  .news-grid-list{
    grid-template-columns: 1fr;
  }
}


/* CARD CONTENEDORA */
.news-card {
  position: relative;
  overflow: hidden;
  border-radius: 32px; /* igual que tu mockup */
}

/* IMAGEN */
.news-card-image {
  position: relative;
}

.news-card-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* GRADIENTE INFERIOR */
.news-card-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90%; /* ajusta si quieres más o menos gradiente */
  background: linear-gradient(
    to bottom,
    rgba(0, 36, 66, 0) 52%,   /* mismo punto que tu mockup */
    rgba(0, 36, 66, 1) 85%    /* opacidad total */
  );
  pointer-events: none; /* no interfiere con clics */
}