.periodico_seccion{
  margin-bottom:40px;
  scroll-margin-top:100px;
}
.periodico_enlace-seccion{
  text-decoration:none;
  display:inline-block;
}

/* ===== TITULO SECCIÓN ===== */
.periodico_h1{
  font-size:2.2rem;
  font-weight:800;
  color:var(--color-primario);
  margin:0 0 20px 0;
  padding-bottom:12px;
  border-bottom:4px solid;
  border-image:linear-gradient(90deg,var(--color-primario),var(--color-secundario)) 1;
  transition:var(--trans-rapida);
}
.periodico_h1:hover{
  transform:translateX(5px);
  color:var(--color-primario-oscuro);
}

/* ===== ARTÍCULO PRINCIPAL ===== */
.periodico_main-article{ margin-bottom:30px; }

.periodico_portada{
  position:relative;
  border-radius:var(--radio-borde-grande);
  overflow:hidden;
}

/* ===== TAGS ===== */
.periodico_tags{
  position:absolute;
  top:16px;
  left:16px;
  z-index:10;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.periodico_tag{
  padding:6px 14px;
  background:linear-gradient(135deg,var(--color-primario),var(--color-secundario));
  color:#fff;
  border-radius:30px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:var(--sombra-media);
}

/* ====================================================
   IMAGEN PRINCIPAL (POSTER) + FONDO BONITO SI NO HAY
   ==================================================== */
.periodico_portada .periodico_contenedor-imagen{
  width:100%;
  max-width:520px;
  margin:0 auto 18px auto;

  /* poster bonito (ajústalo si quieres) */
  aspect-ratio: 9 / 10;

  overflow:hidden;
  border-radius:var(--radio-borde-grande);
  position:relative;
  box-shadow:var(--sombra-media);

  /* fondo bonito por defecto (sirve incluso cuando sí hay img, debajo) */
  background:
    radial-gradient(1200px circle at 20% 20%, rgba(0,196,180,.35), transparent 55%),
    radial-gradient(900px circle at 80% 30%, rgba(0,123,255,.35), transparent 55%),
    linear-gradient(135deg,#0f172a,#111827);
}

/* la imagen llena el contenedor */
.periodico_portada .periodico_contenedor-imagen > img.periodico_imagen-portada{
  width:100% !important;
  height:100% !important;
  display:block !important;

  object-fit:cover !important;
  object-position:center !important;

  aspect-ratio:auto !important;
  max-width:100% !important;
  max-height:100% !important;

  margin:0 !important;
  padding:0 !important;

  transition:transform .25s ease;
}
.periodico_contenedor-imagen:hover > img.periodico_imagen-portada{
  transform:scale(1.03);
}

/* Safety: si otro CSS mete height:auto al img */
img.periodico_imagen-portada{
  height:100% !important;
  max-height:none !important;
}

/* ===== SIN IMAGEN / ERROR: mostramos placeholder centrado ===== */
.periodico_contenedor-imagen.periodico_sin-imagen{
  display:grid;
  place-items:center;
}
.periodico_placeholder{
  width:min(82%,360px);
  padding:18px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-align:center;
}
.periodico_placeholder-icon{
  font-size:28px;
  opacity:.95;
}
.periodico_placeholder-texto strong{
  display:block;
  font-size:1rem;
  letter-spacing:.3px;
}
.periodico_placeholder-texto span{
  display:block;
  font-size:.9rem;
  opacity:.85;
  margin-top:2px;
}

/* (Opcional) si quieres que el placeholder SOLO aparezca en error,
   puedes dejarlo oculto por defecto y mostrarlo cuando .periodico_sin-imagen */
.periodico_contenedor-imagen[data-placeholder] .periodico_placeholder{
  display:none;
}
.periodico_contenedor-imagen.periodico_sin-imagen .periodico_placeholder{
  display:flex;
}

/* ===== TITULO NOTICIA PRINCIPAL ===== */
.periodico_titulo-principal{
  font-size:2rem;
  font-weight:800;
  line-height:1.25;
  color:#222;
  margin:10px 0 10px 0;
}

/* ===== FECHA ===== */
.periodico_fecha-principal{
  font-size:.95rem;
  color:var(--color-texto-claro);
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-bottom:1px dashed var(--color-borde);
}
.periodico_fecha-principal i{ color:var(--color-primario); }

/* ===== DESCRIPCIÓN ===== */
.periodico_descripcion{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--color-texto);
  margin-bottom:10px;
}
.periodico_parrafo-descripcion{
  margin-bottom:14px;
  text-align:justify;
}

/* links dentro del texto (no botones) */
.periodico_descripcion a:not(.periodico_boton-principal){
  color:var(--color-primario);
  text-decoration:underline;
  font-weight:600;
}

/* ===== BOTÓN PRINCIPAL ===== */
.periodico_boton-principal{
  display:inline-block;
  margin-top:10px;
  padding:10px 22px;
  background:linear-gradient(135deg,var(--color-primario),var(--color-secundario));
  color:#fff;
  text-decoration:none;
  border-radius:30px;
  font-weight:800;
  font-size:.95rem;
  box-shadow:var(--sombra-suave);
  transition:var(--trans-rapida);
}
.periodico_boton-principal:hover{
  transform:translateY(-2px);
  box-shadow:var(--sombra-media);
}

/* ====================================================
   NOTICIAS SECUNDARIAS
   ==================================================== */
.periodico_secondary-news{
  margin-top:34px;
  padding-top:18px;
  border-top:2px solid transparent;
  border-image:linear-gradient(
    90deg,
    transparent,
    var(--color-primario),
    var(--color-secundario),
    var(--color-primario),
    transparent
  ) 1;
}

.periodico_secundarias-titulo{
  font-size:1.4rem;
  font-weight:800;
  color:var(--color-primario);
  margin-bottom:18px;
  padding-bottom:8px;
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--color-primario),var(--color-secundario)) 1;
  display:inline-block;
}

/* Grid base */
.periodico_grid-secundarias{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:16px;
  align-items:stretch;
}
@media (max-width: 900px){
  .periodico_grid-secundarias{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .periodico_grid-secundarias{ grid-template-columns:1fr; }
}

/* Card */
.periodico_card-secundaria{
  background:var(--color-fondo-claro);
  border-radius:var(--radio-borde);
  overflow:hidden;
  box-shadow:var(--sombra-suave);
  border:1px solid var(--color-borde);
  display:flex;
  flex-direction:column;
  height:100%;
  transition:var(--trans-media);
}
.periodico_card-secundaria:hover{
  transform:translateY(-4px);
  box-shadow:var(--sombra-media);
  background:var(--color-fondo);
  border-color:transparent;
}

.periodico_card-secundaria-contenido{
  padding:18px 14px 12px 14px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.periodico_tag-secundaria{
  display:inline-block;
  padding:4px 12px;
  background:rgba(0,123,255,.10);
  color:var(--color-primario);
  border-radius:20px;
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  border:1px solid rgba(0,123,255,.20);
}

/* Título con clamp (misma altura visual) */
.periodico_titulo-secundaria{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;

  font-weight:800;
  font-size:.95rem;
  line-height:1.45;
  color:#000;
  text-decoration:none;
  transition:color .2s ease;

  min-height: calc(1.45em * 4);
}
.periodico_titulo-secundaria:hover{ color:var(--color-primario); }

.periodico_card-secundaria-footer{
  display: flex;
  justify-content: center;
  padding: 12px 14px 14px;
}
/* ====================================================
   BOTÓN "VER MÁS" (más pequeño que antes)
   - Tú querías cambiar la class: usa periodico_boton-secundario
   ==================================================== */
/* Botón secundario (cards "Más Noticias") */
.periodico_boton-secundario{
  width: auto;                 /* ya no ocupa todo el ancho */
  min-width: 140px;            /* tamaño mínimo */
  height: 36px;                /* menos alto */
  padding: 0 18px;             /* ancho cómodo */
  margin: 0 auto;              /* centrado */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  font-size: .85rem;
  font-weight: 800;

  background: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
  color: #fff;
  text-decoration: none;

  box-shadow: var(--sombra-suave);
  transition: var(--trans-rapida);
}

.periodico_boton-secundario:hover{
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}

/* Si todavía existe la clase vieja en HTML, la dejamos compatible */
.periodico_leer-mas{
  width:100%;
  height:36px;                 /* 🔥 mismo tamaño */
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--color-primario),var(--color-secundario));
  color:#fff;
  text-decoration:none;
  border-radius:18px;
  font-size:.82rem;
  font-weight:800;
  transition:var(--trans-rapida);
}
.periodico_leer-mas:hover{
  transform:translateY(-2px);
  box-shadow:var(--sombra-media);
}

/* ===== RESPONSIVE extra del bloque ===== */
@media (max-width: 1024px){
  .periodico_h1{ font-size:2rem; }
  .periodico_titulo-principal{ font-size:1.75rem; }
  .periodico_portada .periodico_contenedor-imagen{ max-width:480px; }
}
@media (max-width: 768px){
  .periodico_seccion{ scroll-margin-top:80px; }
  .periodico_h1{ font-size:1.8rem; }
  .periodico_titulo-principal{ font-size:1.5rem; }
  .periodico_portada .periodico_contenedor-imagen{ max-width:420px; }
}
@media (max-width: 480px){
  .periodico_seccion{ scroll-margin-top:70px; }
  .periodico_boton-principal{ width:100%; text-align:center; }
  .periodico_portada .periodico_contenedor-imagen{ max-width:100%; }
}
/* Spinner / "Cargando más noticias..." */
.noticias_spinner{
  display: none;
  width: 100%;
  padding: 24px 0;

  /* centrado real */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.noticias_spinner.is-visible{
  display: flex;
}

.noticias_wave-dots{
  display: inline-flex;
  gap: 8px;
  align-items: flex-end;
  height: 22px;               /* asegura altura visible */
}

.noticias_wave-dots span{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
  animation: noticias_wave 1s ease-in-out infinite;
}

/* delays */
.noticias_wave-dots span:nth-child(2){ animation-delay: .1s; }
.noticias_wave-dots span:nth-child(3){ animation-delay: .2s; }
.noticias_wave-dots span:nth-child(4){ animation-delay: .3s; }
.noticias_wave-dots span:nth-child(5){ animation-delay: .4s; }

.noticias_texto-cargando{
  margin: 0;
  font-weight: 700;
  color: var(--color-texto-claro);
}

/* animación */
@keyframes noticias_wave{
  0%, 60%, 100% { transform: translateY(0); opacity: .75; }
  30% { transform: translateY(-10px); opacity: 1; }
}