/*
  Módulo Noticias — Municipalidad de La Toma
  Estilo del sitio público (Etapa 6).

  Paleta y tipografías tomadas de www.latomaciudad.com (revisado el
  17/09/2026) para que noticias.latomaciudad.com se sienta parte del
  mismo sitio institucional:
    - Tipografía de títulos: Montserrat.
    - Tipografía de texto: Source Sans 3.
    - Colores: --orange/--amber (marca), --purple, --green, --ink, --muted,
      --cream, --line, y el fondo oscuro del footer.
    - Cada rubro tiene el mismo tipo de degradé que usan las tarjetas de
      "Noticias de la ciudad" en el sitio real (Obras=naranja, Cultura=
      violeta, Comunidad=verde). "Otras" no existe en el sitio real, así
      que se le asignó celeste/teal (decisión tomada con David en la
      Etapa 6). Cualquier rubro nuevo que se cree desde el admin (más
      allá de estos 4) cae en una paleta de reserva por hash de nombre,
      para no romper el diseño.
*/

:root {
  --orange: #e85c09;
  --amber: #f39a00;
  --purple: #7d126f;
  --green: #78b928;
  --teal: #2f6b7d;
  --teal-light: #5fa3b6;
  --ink: #292633;
  --muted: #676470;
  --cream: #f7f3ed;
  --line: #e7e2dc;
  --footer-bg: #2f2b37;

  --grad-obras: linear-gradient(145deg, #e7660d, #f1a50a);
  --grad-cultura: linear-gradient(145deg, #722267, #9b257f);
  --grad-comunidad: linear-gradient(145deg, #6aa224, #9cce48);
  --grad-otras: linear-gradient(145deg, #2f6b7d, #5fa3b6);
  --grad-reserva-1: linear-gradient(145deg, #47516b, #6c7aa0);
  --grad-reserva-2: linear-gradient(145deg, #8a5a1f, #c98a3a);

  --font-titulos: "Montserrat", sans-serif;
  --font-texto: "Source Sans 3", sans-serif, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-texto);
  color: var(--ink);
  background: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.envoltorio {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------------
   Header
--------------------------------------------------------------------- */

.barra-utilitaria {
  background: var(--ink);
  color: #fff;
}

.barra-utilitaria .envoltorio {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 0.85rem;
}

.barra-utilitaria a:hover { color: var(--amber); }

.site-header {
  border-bottom: 1px solid var(--line);
}

.site-header .envoltorio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-link img {
  height: 44px;
  width: auto;
}

.marca-noticias {
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--orange);
  letter-spacing: 0.02em;
  border-left: 2px solid var(--line);
  padding-left: 10px;
  margin-left: 2px;
}

/* ---------------------------------------------------------------------
   Hero / encabezado de sección
--------------------------------------------------------------------- */

.hero {
  background: var(--cream);
  padding: 48px 0 36px;
}

.eyebrow {
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  color: var(--orange);
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

.hero h1 {
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.1;
  margin: 0 0 14px;
}

.hero p.bajada {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 60ch;
  margin: 0;
}

/* ---------------------------------------------------------------------
   Filtro por rubro
--------------------------------------------------------------------- */

.filtro-rubros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 24px 0 8px;
}

.pastilla-rubro {
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.pastilla-rubro:hover { border-color: var(--orange); }

.pastilla-rubro.activa {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------------------------------------------------------------------
   Tarjetas de noticias
--------------------------------------------------------------------- */

.grilla-noticias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  padding: 28px 0 56px;
}

.tarjeta-noticia {
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

.tarjeta-noticia:hover {
  box-shadow: 0 8px 24px rgba(41, 38, 51, 0.1);
}

.tarjeta-noticia .portada {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

.badge-rubro {
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: #fff;
  text-transform: uppercase;
}

.tarjeta-noticia .cuerpo-tarjeta {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.fecha-noticia {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 8px;
}

.tarjeta-noticia h3 {
  font-family: var(--font-titulos);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 10px;
}

.tarjeta-noticia .resumen {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 16px;
  flex: 1;
}

.leer-mas {
  font-weight: 700;
  color: var(--orange);
  font-size: 0.92rem;
}

.leer-mas:hover { text-decoration: underline; }

.estado-vacio, .estado-error {
  padding: 40px 0 60px;
  color: var(--muted);
  font-size: 1.05rem;
}

.estado-cargando {
  padding: 40px 0;
  color: var(--muted);
}

/* ---------------------------------------------------------------------
   Detalle de noticia
--------------------------------------------------------------------- */

.detalle-noticia { padding: 40px 0 64px; }

.volver-listado {
  display: inline-block;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 20px;
}

.volver-listado:hover { color: var(--orange); }

.detalle-noticia h1 {
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1.2;
  margin: 10px 0 12px;
}

.galeria-detalle { margin: 24px 0; }

.galeria-detalle .imagen-principal {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
}

.galeria-detalle .miniaturas {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.galeria-detalle .miniaturas img {
  width: 88px;
  height: 66px;
  object-fit: cover;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.75;
}

.galeria-detalle .miniaturas img:hover { opacity: 1; }
.galeria-detalle .miniaturas img.activa {
  border-color: var(--orange);
  opacity: 1;
}

.cuerpo-noticia {
  font-size: 1.08rem;
  line-height: 1.7;
  /* Sin max-width: usa todo el ancho del contenedor central (.envoltorio,
     hasta 1100px), igual que el título y la galería de arriba. Antes
     tenía un límite de 72ch pensado para no cansar la vista en renglones
     muy largos, pero en pantallas grandes dejaba una franja vacía a la
     derecha que se veía como un error de layout. */
}

.cuerpo-noticia h2, .cuerpo-noticia h3 {
  font-family: var(--font-titulos);
  font-weight: 600;
  margin-top: 1.6em;
}

/* .cuerpo-noticia div: el editor del admin fuerza <p> para párrafos
   nuevos, pero por las dudas (contenido viejo, u otro navegador que no
   respete esa preferencia) un <div> se ve con el mismo espaciado que un
   párrafo, no pegado al de al lado. */
.cuerpo-noticia p, .cuerpo-noticia div { margin: 0 0 1em; }
.cuerpo-noticia a { color: var(--orange); text-decoration: underline; }
.cuerpo-noticia ul, .cuerpo-noticia ol { padding-left: 1.3em; }
.cuerpo-noticia blockquote {
  margin: 1.2em 0;
  padding-left: 1em;
  border-left: 3px solid var(--orange);
  color: var(--muted);
}

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */

.site-footer {
  background: var(--footer-bg);
  color: #fff;
  margin-top: auto;
}

.site-footer .envoltorio {
  padding: 48px 24px 28px;
}

.site-footer .logo-link img { filter: brightness(0) invert(1); }

.site-footer .tagline {
  color: #cfc9d6;
  margin: 14px 0 0;
  max-width: 46ch;
}

.footer-columnas {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 32px 0 0;
}

.footer-columnas h4 {
  font-family: var(--font-titulos);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}

.footer-columnas p, .footer-columnas a {
  display: block;
  color: #cfc9d6;
  font-size: 0.92rem;
  margin: 0 0 8px;
}

.footer-columnas a:hover { color: var(--amber); }

.site-footer .volver {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--amber);
}

.copyright {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 32px;
  padding-top: 20px;
  font-size: 0.82rem;
  color: #a79fb0;
}

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */

@media (max-width: 640px) {
  .hero h1 { font-size: 1.9rem; }
  .barra-utilitaria .envoltorio { justify-content: center; }
  .footer-columnas { gap: 28px; }
}