/* =========================================================
   El Diari de Montserrat — estilos
   Revisión editorial clásica: papel + tinta + acento granate.
   Tipografía serif (Source Serif 4) + sans (Source Sans 3).
   ========================================================= */

:root {
  /* ---- Paleta ---- */
  --tinta: #15140f;        /* casi negro cálido: texto y masthead */
  --papel: #fdfbf5;        /* blanco roto: fondo principal */
  --papel-2: #f3efe4;      /* crema sutil: fondos secundarios */
  --linea: #d8d2c2;        /* filetes finos */
  --gris: #6b6759;         /* texto secundario, fechas */
  --acento: #8a1c1c;       /* granate Montserrat */
  --acento-2: #b8410f;     /* terracota: hover puntual */
  --blanco: #ffffff;

  /* ---- Alias de compatibilidad (build.py los usa) ---- */
  --granate: var(--acento);
  --granate-oscuro: var(--acento);
  --ocre: var(--acento);
  --crema: var(--papel-2);
  --tinta-orig: var(--tinta);
  --fondo-oscuro: var(--tinta);
  --fondo-medio: var(--tinta);
  --fondo-claro: var(--papel-2);
  --naranja: var(--acento);
  --naranja-claro: var(--acento-2);
  --naranja-oscuro: var(--acento);
  --or: var(--acento);
  --blanco-suave: var(--papel-2);
  --gris-claro: var(--papel-2);
  --gris-medio: var(--gris);
  --gris-oscuro: var(--tinta);
  --verde-tinta: var(--tinta);
  --verde-bosque: var(--tinta);
  --texto: var(--tinta);
  --texto-suave: var(--gris);
  --gris-texto: var(--gris);
  --gris-fondo: var(--papel-2);
  --linea-suave: var(--linea);

  /* ---- Tipografía ---- */
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --display: var(--serif);
  --font-display: var(--serif);
  --font-body: var(--serif);

  /* ---- Escala tipográfica fluida ---- */
  --size-masthead: clamp(34px, 6.4vw, 56px);
  --size-h1: clamp(30px, 4.4vw, 44px);
  --size-h2-destacada: clamp(26px, 3.6vw, 38px);
  --size-h3-tarjeta: clamp(18px, 1.6vw, 21px);
  --size-kicker: 11px;
  --size-meta: 12px;
  --size-body: 18px;

  /* ---- Espaciado ---- */
  --content-max: 1200px;
  --article-max: 720px;
  --pad-seccion: 44px;
  --radio: 2px;

  /* ---- Animación ---- */
  --animacion: 0.2s ease-out;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--tinta);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--animacion);
}
a:hover { color: var(--acento); }

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

.contenedor {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* =========================================================
   Barra superior
   ========================================================= */
.barra-superior {
  background: var(--tinta);
  color: var(--papel);
  border-bottom: 1px solid var(--tinta);
}
.barra-superior .contenedor {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 1.5rem;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .02em;
}
.barra-superior .clima { opacity: .8; white-space: nowrap; }

.barra-derecha {
  display: flex; align-items: center; gap: 1.25rem;
}

/* Selector de idiomas */
.idiomas {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  display: inline-flex;
  gap: 0.15rem;
  align-items: center;
}
.idiomas a,
.idiomas .idioma-actual {
  min-width: 44px;
  min-height: 44px;
  padding: 0.25rem 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--animacion);
}
.idiomas a { color: var(--papel); opacity: .65; }
.idiomas a:hover { color: var(--papel); opacity: 1; }
.idiomas .idioma-actual {
  color: var(--papel);
  font-weight: 700;
  opacity: 1;
}

/* =========================================================
   Masthead
   ========================================================= */
header.cabecera {
  background: var(--papel);
  text-align: center;
  padding: 32px 1.5rem 18px;
  position: relative;
}
header.cabecera::after {
  content: "";
  position: absolute;
  left: 1.5rem; right: 1.5rem; bottom: 0;
  height: 1px;
  background: var(--linea);
}

.cabecera h1,
.cabecera .marca {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--size-masthead);
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--tinta);
}
.cabecera h1 a,
.cabecera .marca a {
  color: inherit;
}
.cabecera h1 a:hover,
.cabecera .marca a:hover { color: var(--tinta); }
.cabecera .punto { color: var(--acento); }

.cabecera .lema {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gris);
  margin-top: 0.9rem;
}

/* =========================================================
   Navegación
   ========================================================= */
nav.principal {
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
nav.principal ul {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1rem;
}
nav.principal .nav-mobil { display: none; }
nav.principal a,
nav.principal span {
  display: block;
  min-height: 44px;
  padding: 14px 18px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid transparent;
  transition: color var(--animacion), border-color var(--animacion);
}
nav.principal a:hover,
nav.principal summary:hover,
nav.principal a.activo,
nav.principal summary.activo {
  color: var(--acento);
  border-bottom-color: var(--acento);
  background: transparent;
}

/* =========================================================
   Rejilla principal
   ========================================================= */
main { padding: var(--pad-seccion) 0; }
.rejilla {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
}
@media (max-width: 900px) {
  .rejilla { grid-template-columns: 1fr; gap: 36px; }
}

/* Briefing de consulta ràpida: apareix abans del flux de notícies en estret. */
.briefing-mobil { display: none; }

@media (max-width: 900px) {
  .briefing-mobil {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
  }
  .briefing-bloc { min-width: 0; }
  .briefing-mobil h2 {
    margin-bottom: 1rem;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--tinta);
  }
  .briefing-cap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .briefing-cap a {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: flex-start;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gris);
  }
  .briefing-cap a:hover { color: var(--acento); }
  .briefing-mobil .tiempo-embed { text-align: left; }
  aside .bloque--tiempo { display: none; }
}

/* =========================================================
   Imágenes (reales y placeholder)
   ========================================================= */
.destacada .imagen,
.tarjeta .imagen,
.pagina .imagen {
  position: relative;
  overflow: hidden;
  background: var(--papel-2);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  padding: 0.9rem 1rem;
  color: var(--gris);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--linea);
  margin-bottom: 1rem;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 11px,
      rgba(21, 20, 15, 0.025) 11px,
      rgba(21, 20, 15, 0.025) 12px
    );
}
.tarjeta .imagen {
  aspect-ratio: 4 / 3;
  padding: 0.7rem 0.85rem;
}
.destacada .imagen::before,
.tarjeta .imagen::before,
.pagina .imagen::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--acento);
  opacity: 0.55;
}

/* Imagen real (objeto con {src, alt}) — sin el tratamiento placeholder */
.destacada img.imagen,
.tarjeta img.imagen,
.pagina img.imagen {
  background: var(--papel-2);
  border: 1px solid var(--linea);
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.tarjeta img.imagen { aspect-ratio: 4 / 3; }
.destacada img.imagen::before,
.tarjeta img.imagen::before,
.pagina img.imagen::before { display: none; }
.tarjeta .imagen-respaldo {
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(145deg, var(--papel-2), #e7dfce);
  color: var(--tinta);
}
.imagen-respaldo span {
  align-self: flex-start;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--acento);
}
.imagen-respaldo strong {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-align: right;
}

/* =========================================================
   Etiqueta (categoría) — tipográfica, sin pastilla
   ========================================================= */
.etiqueta {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--size-kicker);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  background: transparent;
  padding: 0;
  margin-bottom: 0.5rem;
  border: none;
}

/* =========================================================
   Noticia destacada
   ========================================================= */
.destacada {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 2.5rem;
}
.destacada.con-imagen {
  grid-template-columns: 1.25fr 1fr;
  gap: 36px;
}
/* La rejilla no debe estirar la foto hasta la altura del titular y la entradilla. */
.destacada > .imagen {
  width: 100%;
  align-self: start;
}
@media (max-width: 800px) {
  .destacada.con-imagen { grid-template-columns: 1fr; gap: 24px; }
}
.destacada-cuerpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.destacada h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--size-h2-destacada);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin-bottom: 0.7rem;
  color: var(--tinta);
}
.destacada h2 a { color: inherit; }
.destacada h2 a:hover { color: var(--acento); }
.entradilla {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: #444036;
}

/* =========================================================
   Meta (autor · fecha · lectura)
   ========================================================= */
.meta {
  font-family: var(--sans);
  font-size: var(--size-meta);
  color: var(--gris);
  margin-top: 0.85rem;
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 400;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* =========================================================
   Título de sección — tipográfico con filete
   ========================================================= */
.titulo-seccion {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 2.5rem 0 1.5rem;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--tinta);
  background: transparent;
  padding: 0;
  border-top: none;
}
.titulo-seccion::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
  align-self: center;
}
.titulo-seccion a {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gris);
  text-transform: uppercase;
}
.titulo-seccion a:hover { color: var(--acento); }
.titulo-seccion:first-child { margin-top: 0; }

/* =========================================================
   Tarjetas de noticias
   ========================================================= */
.lista-noticias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px 28px;
}
.tarjeta {
  background: transparent;
  border-top: 1px solid var(--linea);
  padding-top: 1rem;
  transition: border-color var(--animacion);
  position: relative;
}
.tarjeta:hover { border-top-color: var(--acento); }
.tarjeta h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--size-h3-tarjeta);
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin-bottom: 0.45rem;
  color: var(--tinta);
}
.tarjeta h3 a { color: inherit; }
.tarjeta h3 a:hover { color: var(--acento); }
.tarjeta p {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--gris);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.tarjeta .meta { margin-top: 0.4rem; }

/* =========================================================
   Lateral — aside
   ========================================================= */
aside .bloque {
  background: transparent;
  border-top: 1px solid var(--linea);
  padding: 1.1rem 0 0;
  margin-bottom: 2rem;
}
aside .bloque:first-child { border-top: none; padding-top: 0; }
aside h2 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--tinta);
  margin-bottom: 1rem;
}

/* Envia'ns la teua notícia (cta del lateral) */
.enviar-targeta {
  display: block;
  padding: 1rem 1.1rem;
  background: var(--papel-2);
  border-left: 3px solid var(--acento);
  text-decoration: none;
  transition: background 0.15s ease;
}
.enviar-targeta:hover { background: var(--papel); }
.enviar-targeta p {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tinta);
  margin: 0 0 0.65rem;
}
.enviar-targeta-cta {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acento);
}
.enviar-targeta:hover .enviar-targeta-cta { color: var(--acento-2); }

/* Agenda */
.agenda,
.mas-leidas { list-style: none; padding: 0; }
.agenda li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linea);
  font-family: var(--serif);
  font-size: 15px;
  color: var(--tinta);
  line-height: 1.4;
}
.agenda li:last-child { border-bottom: none; }
.agenda .fecha {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--acento);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}

/* Más leídas */
.mas-leidas { counter-reset: leidas; }
.mas-leidas li {
  counter-increment: leidas;
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--linea);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.35;
}
.mas-leidas li:last-child { border-bottom: none; }
.mas-leidas li::before {
  content: counter(leidas, decimal-leading-zero);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--acento);
  min-width: 1.8rem;
}
.mas-leidas li a { color: var(--tinta); }
.mas-leidas li a:hover { color: var(--acento); }

/* =========================================================
   El tiempo
   ========================================================= */
.tiempo {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--sans);
}
.tiempo .grados {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--tinta);
  line-height: 1;
}
.tiempo .detalle {
  font-size: 12px;
  color: var(--gris);
}
.tiempo-embed { margin-top: 0; text-align: center; }
.tiempo-embed iframe {
  max-width: 100%;
  border: 1px solid var(--linea);
}

/* =========================================================
   Pie
   ========================================================= */
footer {
  background: var(--tinta);
  color: var(--papel-2);
  margin-top: 4rem;
  padding: 48px 0 24px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
}
footer .columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
footer h2 {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--papel);
  margin-bottom: 1.1rem;
}
footer ul { list-style: none; }
footer li {
  padding: 0.25rem 0;
  color: var(--papel-2);
}
footer a {
  color: var(--papel-2);
  transition: color var(--animacion);
}
footer a:hover { color: var(--papel); }
footer p {
  color: var(--papel-2);
  opacity: 0.8;
  max-width: var(--article-max);
}

/* Iconos de redes sociales */
.redes-footer {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.2rem;
}
.redes-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--papel-2);
  transition: background var(--animacion), color var(--animacion), transform var(--animacion);
}
.redes-icono:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--papel);
  transform: translateY(-2px);
}

.copy {
  text-align: center;
  font-size: 12px;
  color: var(--papel-2);
  opacity: 0.6;
}
.copy a {
  color: var(--papel-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.copy a:hover { color: var(--papel); opacity: 1; }

/* =========================================================
   Páginas internas (legales)
   ========================================================= */
.pagina {
  max-width: var(--article-max);
  margin: 0 auto;
  padding: 48px 24px 60px;
  background: transparent;
}
.pagina h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--size-h1);
  color: var(--tinta);
  margin-bottom: 0.6rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.pagina .meta-legal {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linea);
}
.pagina h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--tinta);
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 1rem;
}
.pagina p {
  margin-bottom: 1.2rem;
  line-height: 1.7;
  font-family: var(--serif);
  font-size: var(--size-body);
  color: var(--tinta);
}
.pagina ul { margin: 0 0 1.2rem 1.6rem; }
.pagina li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  font-family: var(--serif);
}
.pagina a {
  color: var(--acento);
  text-decoration: underline;
}
.pagina a:hover { color: var(--acento-2); }

/* =========================================================
   Artículo (cuerpo de noticia)
   ========================================================= */
.pagina .meta-articulo {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--gris);
  text-transform: none;
  letter-spacing: 0.01em;
  margin-bottom: 2rem;
  padding: 0.8rem 0;
  background: transparent;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  font-weight: 400;
}
.etiqueta-articulo {
  margin-bottom: 0.9rem;
}
.cuerpo {
  font-size: var(--size-body);
  line-height: 1.75;
  color: var(--tinta);
}
.cuerpo p {
  margin-bottom: 1.4rem;
  font-family: var(--serif);
}
.cuerpo > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 3.4em;
  line-height: 0.88;
  float: left;
  margin: 0.05em 0.1em 0 -0.04em;
  color: var(--acento);
}
.cuerpo h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--tinta);
  margin: 2.5rem 0 1rem;
  letter-spacing: -0.01em;
}
.cuerpo ul,
.cuerpo ol { margin: 0 0 1.4rem 1.6rem; }
.cuerpo li {
  margin-bottom: 0.6rem;
  line-height: 1.7;
  font-family: var(--serif);
}
.cuerpo a { color: var(--acento); text-decoration: underline; }
.cuerpo em { color: var(--gris); }

.volver {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  font-family: var(--sans);
  font-size: 13px;
}
.volver a {
  color: var(--tinta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.volver a:hover { color: var(--acento); }

/* =========================================================
   Banner de cookies (solo si cookies_banner_activo = true)
   ========================================================= */
#banner-cookies {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  background: rgba(21, 20, 15, 0.34);
  padding: 0;
}
#banner-cookies[hidden] {
  display: none;
}
.banner-contingut {
  width: 100%;
  background: var(--tinta);
  color: var(--papel-2);
  font-family: var(--sans);
  font-size: 13px;
  display: grid;
  grid-template-columns: minmax(170px, 0.55fr) minmax(300px, 1.45fr) auto;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 0.85rem max(1.5rem, calc((100vw - 1200px) / 2));
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
#banner-cookies h2 {
  margin: 0;
  color: var(--papel);
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#ck-titulo:focus-visible { outline: none; }
#banner-cookies p {
  margin: 0;
  max-width: 68ch;
  line-height: 1.45;
}
.banner-accions {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.banner-accions a {
  color: var(--papel);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
#banner-cookies button {
  min-height: 44px;
  min-width: 154px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.55rem 1rem;
  border: 1px solid var(--papel-2);
  background: transparent;
  color: var(--papel-2);
  cursor: pointer;
  transition: background var(--animacion), color var(--animacion);
}
#banner-cookies button:hover {
  background: var(--papel);
  color: var(--tinta);
  border-color: var(--papel);
}
#ck-aceptar { background: transparent; color: var(--papel-2); }
.enlace-boton {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* =========================================================
   Envia'ns la teua notícia (página colabora)
   ========================================================= */
.pagina .enviar-intro {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--tinta);
}
.enviar-acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.enviar-accion {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.4rem;
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--acento);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.enviar-accion:hover {
  background: var(--papel);
  border-left-color: var(--acento-2);
}
.enviar-accion .enviar-accion-tipo {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento);
}
.enviar-accion strong {
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--tinta);
}
.enviar-accion span:last-child {
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--gris);
}
.pagina .enviar-nota {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--gris);
}

/* =========================================================
   Accesibilidad
   ========================================================= */
.saltar-contenido {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  padding: 0.7rem 1rem;
  transform: translateY(-200%);
  background: var(--papel);
  color: var(--tinta);
  border: 2px solid var(--acento);
  font-family: var(--sans);
  font-weight: 700;
  transition: transform var(--animacion);
}
.saltar-contenido:focus {
  transform: none;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
}
.barra-superior a:focus-visible,
footer :focus-visible,
#banner-cookies :focus-visible {
  outline-color: var(--papel);
}
main:focus {
  outline: none;
}

::selection {
  background: var(--acento);
  color: var(--papel);
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   Responsividad
   ========================================================= */
@media (min-width: 601px) and (max-width: 900px) {
  .banner-contingut {
    grid-template-columns: minmax(150px, 0.5fr) minmax(0, 1.5fr);
  }
  .banner-accions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 154px) 1fr;
  }
  .banner-accions a { justify-self: end; }
}

@media (max-width: 767px) {
  header.cabecera { padding: 24px 1.5rem 14px; }
  .cabecera .lema { margin-top: 0.7rem; font-size: 10px; letter-spacing: 0.18em; }
  nav.principal { position: relative; }
  nav.principal .nav-escriptori { display: none; }
  nav.principal .nav-mobil {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0;
  }
  nav.principal .nav-mobil > li { min-width: 0; }
  nav.principal .nav-mobil > li > a,
  nav.principal .nav-desplegable > summary {
    min-height: 48px;
    padding: 0.65rem 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--tinta);
    font-family: var(--sans);
    font-size: var(--size-kicker);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid transparent;
    cursor: pointer;
  }
  .nav-desplegable > summary { list-style: none; }
  .nav-desplegable > summary::-webkit-details-marker { display: none; }
  .nav-desplegable > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--animacion);
  }
  .nav-desplegable[open] > summary::after {
    transform: translateY(2px) rotate(225deg);
  }
  .nav-desplegable[open] > summary {
    color: var(--acento);
    border-bottom-color: var(--acento);
  }
  nav.principal .nav-submenu {
    position: absolute;
    z-index: 40;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr;
    padding: 0.4rem 1rem 0.8rem;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 10px 22px rgba(21, 20, 15, 0.12);
  }
  nav.principal .nav-submenu a {
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--linea);
    font-size: var(--size-kicker);
    letter-spacing: 0.06em;
  }
  .lista-noticias { grid-template-columns: 1fr; gap: 24px; }
  .destacada { padding-bottom: 24px; margin-bottom: 2rem; }
  .briefing-mobil {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 0;
  }
  .briefing-mobil .tiempo-embed { text-align: center; }
  .banner-contingut {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
  }
  #banner-cookies h2 { font-size: 0.75rem; }
  #banner-cookies p { font-size: 12px; line-height: 1.4; }
  .banner-accions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    justify-content: stretch;
  }
  .banner-accions a {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    min-height: 32px;
  }
  #banner-cookies button { width: 100%; min-width: 0; padding-inline: 0.55rem; }
  #ck-rechazar { grid-column: 1; grid-row: 1; }
  #ck-aceptar { grid-column: 2; grid-row: 1; }
  footer { padding: 36px 0 20px; }
  footer .columnas { gap: 1.5rem; margin-bottom: 1.5rem; }
  .pagina { padding: 32px 1.5rem; }
  .cuerpo { font-size: 17px; }
  .cuerpo > p:first-of-type::first-letter { font-size: 2.8em; }
}

@media (max-width: 420px) {
  .barra-superior .contenedor {
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
  }
  .contenedor { padding: 0 1rem; }
}

/* =========================================================
   Secciones, archivo y búsqueda
   ========================================================= */
.listado-pagina { padding-top: 44px; padding-bottom: 24px; }
.listado-cap {
  max-width: 760px;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--linea);
}
.listado-cap h1 {
  font-size: var(--size-h1);
  line-height: 1.08;
  margin-bottom: 0.6rem;
}
.listado-cap p { color: var(--gris); font-size: 17px; }
.buscador-noticias {
  display: flex;
  gap: 0.65rem;
  max-width: 680px;
  margin-bottom: 2rem;
  font-family: var(--sans);
}
.buscador-noticias label { font-weight: 700; align-self: center; }
.buscador-noticias input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--linea);
  background: var(--blanco);
  color: var(--tinta);
  font: inherit;
}
.lista-noticias--archivo { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.buscador-vacio { padding: 2rem 0; color: var(--gris); font-style: italic; }
@media (max-width: 600px) {
  .buscador-noticias { display: block; }
  .buscador-noticias label { display: block; margin-bottom: 0.45rem; }
  .buscador-noticias input { width: 100%; }
}

/* ---- Tuits embebidos (tarjeta estática, {{tweet:URL}}) ---- */
.tweet-card {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem 1rem;
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--acento);
  font-family: var(--sans);
}
.tweet-autor {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}
.tweet-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--linea);
}
.tweet-autor-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.tweet-nombre { font-weight: 700; color: var(--tinta); }
.tweet-usuario { color: var(--gris); font-size: 0.9em; }
.tweet-texto {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--size-body);
  line-height: 1.6;
  color: var(--tinta);
}
.tweet-texto a { color: var(--acento); }
.tweet-foto,
.tweet-video img {
  width: 100%;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  margin: 0.8rem 0 0;
}
.tweet-meta {
  margin-top: 0.8rem;
  font-size: var(--size-meta);
  color: var(--gris);
}
.tweet-meta a {
  color: var(--gris);
  text-decoration: none;
}
.tweet-meta a:hover {
  color: var(--acento);
  text-decoration: underline;
}