/* ─────────────────────────────────────────────
   noticias.css — ficha, tarjeta y listado de noticias.
   La tarjeta usa la base de cards.css (.card, .card__*).
   ───────────────────────────────────────────── */

/* .servicios-grid, .btn y compañía ponen display y le ganan al atributo
   hidden. Sin esto, "ocultar" no oculta. */
.noticias-listado [hidden],
.noticia [hidden],
#seccion-noticias[hidden] { display: none !important; }

/* ── Ficha ── */

/* Los titulares son más largos que un nombre de prestador o de evento: un
   punto menos para que cuatro líneas entren en la banda de 400 px. */
@media (min-width: 769px) {
  .ficha-hero--noticia .ficha-hero__titulo { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
}

/* El resto de la ficha usa la estructura de la del prestador (ficha.css). */
.noticia-franja {
  margin-bottom: var(--espacio-md);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--borde-ocre);
  border-radius: var(--radio-sm);
  background: var(--tinte-ocre);
  color: var(--marron);
  font-weight: 600;
  text-align: center;
}

.noticia-portada { margin: 0 0 var(--espacio-md); }
.noticia-portada .ficha-portada { margin-bottom: 0; }
.noticia-portada figcaption {
  margin-top: var(--sp-2);
  font-size: var(--texto-sm);
  color: var(--gris-medio);
}

/* La bajada, como copete arriba del cuerpo. */
.noticia__bajada {
  margin-bottom: var(--sp-5);
  font-size: var(--texto-lg);
  line-height: 1.6;
  color: var(--gris-medio);
}

/* Columna lateral: las últimas noticias. */
.mas-noticias { list-style: none; margin: 0; padding: 0; }
.mas-noticias li {
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(36,51,32,.06);
}
.mas-noticias li:last-child { border-bottom: 0; padding-bottom: 0; }
.mas-noticias a {
  display: block;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--verde);
  transition: color var(--trans);
}
.mas-noticias a:hover {
  color: var(--verde-oscuro);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mas-noticias span {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-secundaria);
  font-size: var(--texto-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-medio);
}

/* ── Tarjeta ── */
.noticia-fecha {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-secundaria);
  font-size: var(--texto-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-medio);
}
.card--noticia .card__nombre a { color: inherit; text-decoration: none; }
.card--noticia .card__nombre a:hover { color: var(--verde); }

/* ── Listado ── */
.noticias-mas {
  margin-top: var(--sp-7);
  text-align: center;
}
.noticias-vacio {
  padding: var(--sp-8) 0;
  text-align: center;
  color: var(--gris-medio);
}

/* El atributo hidden pierde contra display de .servicios-grid y .btn */
#noticias-grid[hidden],
#noticias-vacio[hidden],
#btn-ver-mas[hidden] { display: none; }