/* Diario Montevideo — componentes. Valores tomados de design/Diario Montevideo - Web.dc.html.
   Colores y modos: variables --dm-* de tokens.css (generado desde marca/identidad.json). */

html { background: var(--dm-bg); }
body {
	margin: 0; background: var(--dm-bg); color: var(--dm-ink);
	font-family: var(--dm-sans); font-size: 17px; font-weight: 400; line-height: 1.65;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
	transition: background var(--dm-transicion), color var(--dm-transicion);
}
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > * { margin-block-start: 0 !important; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--dm-verde-agua); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--dm-verde-agua); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* Logos: el de cada fondo. */
.dm-logo { width: auto; display: block; }
.dm-logo--oscuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .dm-logo--claro { display: none; } :root:not([data-tema="claro"]) .dm-logo--oscuro { display: block; } }
:root[data-tema="oscuro"] .dm-logo--claro { display: none; }
:root[data-tema="oscuro"] .dm-logo--oscuro { display: block; }

/* ---------- Barra superior: modo + suscripción */
.dm-barra { max-width: var(--dm-contenedor); margin: 0 auto; padding: 6px var(--dm-pad) 0; box-sizing: border-box; display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.dm-modo { height: 26px; padding: 0 12px; border: 1px solid var(--dm-rule); border-radius: 999px; background: transparent; color: var(--dm-ink); font: 500 12px var(--dm-sans); cursor: pointer; }
.dm-modo:hover { border-color: var(--dm-ink); }
.dm-suscripcion { height: 26px; padding: 0 14px; border-radius: 999px; background: var(--dm-verde-agua); color: #fff; display: flex; align-items: center; font: 400 12px var(--dm-sans); }
.dm-suscripcion span { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Encabezado: menú · logo centrado · buscador (manual: logo centrado entre menú y buscador) */
.dm-header { max-width: var(--dm-contenedor); margin: 0 auto; padding: 10px var(--dm-pad) 14px; box-sizing: border-box; display: grid; grid-template-columns: 88px 1fr 88px; gap: 6px; align-items: center; border-bottom: 1px solid var(--dm-rule); }
.dm-header__logo { justify-self: center; display: block; }
.dm-header__logo:hover { text-decoration: none; }
.dm-header__logo .dm-logo { height: 30px; }
.dm-header__acciones { justify-self: end; display: flex; align-items: center; }
.dm-icono { width: 44px; height: 44px; border: 0; padding: 0; background: transparent; color: var(--dm-head); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dm-menu { flex-direction: column; gap: 5px; align-items: flex-start; }
.dm-menu span { width: 22px; height: 2px; background: var(--dm-head); display: block; }
.dm-buscar { max-width: var(--dm-contenedor); margin: 0 auto; padding: 10px var(--dm-pad); box-sizing: border-box; display: flex; gap: 8px; }
.dm-buscar[hidden] { display: none; }
.dm-buscar input { flex: 1; height: 40px; padding: 0 14px; border: 1px solid var(--dm-rule); border-radius: 999px; background: var(--dm-bg); color: var(--dm-ink); font: 400 15px var(--dm-sans); }
.dm-buscar button { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--dm-verde-agua); color: #fff; font: 600 14px var(--dm-sans); cursor: pointer; }
.dm-menu-panel { max-width: var(--dm-contenedor); margin: 0 auto; padding: 8px var(--dm-pad) 14px; box-sizing: border-box; border-bottom: 1px solid var(--dm-rule); }
.dm-menu-panel[hidden] { display: none; }
.dm-menu-panel nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 20px; font: 600 15px/2.2 var(--dm-sans); }

/* ---------- Secciones */
.dm-nav { max-width: var(--dm-contenedor); margin: 0 auto; }
.dm-nav__lista { padding: 0 var(--dm-pad); display: flex; justify-content: center; gap: 22px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font: 600 13px var(--dm-sans); }
.dm-nav__lista::-webkit-scrollbar { display: none; }
.dm-nav__lista a { padding: 12px 0; }
.dm-nav__lista a.is-activo { box-shadow: inset 0 -3px 0 var(--dm-verde-agua); color: var(--dm-head); }

/* ---------- Banda de barrios (arena; verde agua en oscuro) */
.dm-barrios { background: var(--dm-band); }
.dm-barrios__lista { max-width: var(--dm-contenedor); margin: 0 auto; padding: 7px var(--dm-pad); box-sizing: border-box; display: flex; justify-content: safe center; gap: 18px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font: 500 12px var(--dm-sans); }
.dm-barrios__lista::-webkit-scrollbar { display: none; }
.dm-barrios__rotulo { font-weight: 700; }

/* ---------- Contenedor principal */
.dm-main { max-width: var(--dm-contenedor); margin: 0 auto; padding: 0 var(--dm-pad) 64px; box-sizing: border-box; display: flex; flex-direction: column; gap: 40px; }
.dm-portada > :first-child { margin-top: 14px; }

/* ---------- Publicidad rotulada */
.dm-publi { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.dm-publi__rotulo { font: 500 9.5px var(--dm-sans); letter-spacing: .1em; color: var(--dm-muted); }
.dm-publi__caja { width: 100%; background: var(--dm-surface); display: flex; align-items: center; justify-content: center; font: 500 12px var(--dm-sans); color: var(--dm-muted); }

/* ---------- Tema del día */
.dm-tema { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: -10px; }
.dm-tema__pildora { display: flex; align-items: center; gap: 6px; background: var(--dm-marron); color: #fff; padding: 4px 10px; border-radius: 999px; font: 700 11px var(--dm-sans); letter-spacing: .06em; }
.dm-tema__punto { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.dm-tema__titulo { font: 500 14px/1.35 var(--dm-sans); }

/* ---------- Notas */
.dm-nota { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dm-nota--principal { gap: 10px; }
.dm-nota--lateral { gap: 8px; }
.dm-foto { position: relative; display: block; overflow: hidden; background: var(--dm-surface); }
.dm-foto--principal { aspect-ratio: 16/9; }
.dm-foto--lateral { aspect-ratio: 16/10; }
.dm-foto--grilla, .dm-foto--grilla3, .dm-foto--seccion { aspect-ratio: 3/2; }
.dm-foto__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.dm-foto__ia { position: absolute; left: 8px; bottom: 8px; background: #141414; color: #fff; padding: 3px 7px; font: 600 10.5px var(--dm-sans); letter-spacing: .02em; }
.dm-volanta { font: 600 11px var(--dm-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--dm-volanta); }
.dm-nota--grilla .dm-volanta, .dm-nota--grilla3 .dm-volanta, .dm-nota--seccion .dm-volanta { font-size: 10.5px; }
.dm-titulo { margin: 0; font-family: var(--dm-serif); font-weight: 700; color: var(--dm-head); text-wrap: balance; }
.dm-titulo--principal, .dm-titulo--nota { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.01em; }
.dm-titulo--lateral { font-size: 21px; line-height: 1.16; }
.dm-titulo--grilla { font-size: 17px; line-height: 1.22; }
.dm-titulo--grilla3, .dm-titulo--seccion { font-size: 18px; line-height: 1.22; }
.dm-bajada { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--dm-muted); text-wrap: pretty; }
.dm-firma { font: 600 11px var(--dm-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--dm-muted); }
.dm-nota--lateral .dm-firma { font-size: 10.5px; }
.dm-nota--grilla .dm-firma, .dm-nota--grilla3 .dm-firma, .dm-nota--seccion .dm-firma { font-size: 10px; }

/* ---------- Apertura: principal 2/3 + columna 1/3 */
.dm-apertura { display: flex; flex-wrap: wrap; gap: 28px; margin-top: -16px; }
.dm-apertura__principal { flex: 2 1 520px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dm-apertura__columna { flex: 1 1 280px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.dm-relacionadas-portada { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--dm-rule); }
.dm-relacionadas-portada a { font: 500 14px/1.4 var(--dm-sans); }
.dm-relacionadas-portada strong { font-weight: 700; color: var(--dm-teal); }

/* ---------- Grillas */
.dm-grilla { display: grid; gap: 24px; }
.dm-grilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.dm-grilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }

/* ---------- Secciones editoriales */
.dm-seccion { display: flex; flex-direction: column; gap: 18px; }
.dm-seccion__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--dm-head); }
.dm-seccion__cabeza h1, .dm-seccion__cabeza h2 { margin: 0; font-family: var(--dm-serif); font-weight: 700; font-size: 26px; line-height: 1; color: var(--dm-head); }
.dm-seccion__mas { font: 600 13px var(--dm-sans); color: var(--dm-teal); }
.dm-archivo > .dm-seccion__cabeza { margin-top: 28px; }

/* ---------- Artículo */
.dm-articulo { gap: 48px; }
.dm-articulo__nota { max-width: 760px; width: 100%; margin: 28px auto 0; display: flex; flex-direction: column; gap: 22px; }
.dm-articulo__cabeza { display: flex; flex-direction: column; gap: 12px; }
.dm-bajada--nota { font-size: 18px; line-height: 1.5; }
.dm-articulo__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--dm-rule); }
.dm-articulo__meta time { font: 400 13px var(--dm-sans); color: var(--dm-muted); }
.dm-articulo__foto { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dm-epigrafe { font: 400 13px/1.45 var(--dm-sans); color: var(--dm-muted); }
.dm-epigrafe strong { font-weight: 600; }
.dm-cuerpo { font-size: 17px; line-height: 1.65; max-width: 68ch; }
.dm-cuerpo > * { margin: 0 0 1.1em; }
.dm-cuerpo a { text-decoration: underline; text-decoration-color: var(--dm-verde-agua); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dm-cuerpo h2, .dm-cuerpo h3 { font-family: var(--dm-serif); font-weight: 700; color: var(--dm-head); line-height: 1.2; margin-top: 1.4em; }
.dm-cuerpo h2 { font-size: 24px; } .dm-cuerpo h3 { font-size: 20px; }
.dm-cuerpo blockquote { margin: 1.4em 0; padding: 0 0 0 18px; border-left: 4px solid var(--dm-pastel); font-family: var(--dm-serif); font-style: italic; font-weight: 600; font-size: 21px; line-height: 1.35; color: var(--dm-head); }
.dm-cuerpo .hub-fuentes { margin-top: 2em; padding-top: 12px; border-top: 1px solid var(--dm-rule); font-size: 14px; line-height: 1.5; color: var(--dm-muted); }
.dm-cuerpo .hub-fuentes strong { font-weight: 600; color: var(--dm-ink); text-transform: uppercase; font-size: 11px; letter-spacing: .06em; margin-right: 6px; }
.dm-cuerpo .dm-transparencia, .dm-cuerpo .hub-transparencia { font-size: 13px; color: var(--dm-muted); }
.dm-relacionadas .dm-seccion__cabeza h2 { font-size: 22px; }

/* ---------- Página genérica, vacío, paginación */
.dm-pagina { max-width: 760px; padding-top: 28px; }
.dm-vacio { color: var(--dm-muted); }
.dm-paginas { display: flex; gap: 10px; flex-wrap: wrap; font: 600 14px var(--dm-sans); }
.dm-paginas .current { color: var(--dm-teal); }

/* ---------- Pie */
.dm-pie { background: #141414; color: #fff; }
.dm-pie__dentro { max-width: var(--dm-contenedor); margin: 0 auto; padding: 40px var(--dm-pad); box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; }
.dm-pie__logo { height: 26px; width: auto; align-self: flex-start; display: block; }
.dm-pie__secciones { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; color: var(--dm-pastel); }
.dm-pie__legal { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 13px; color: var(--dm-gris-400); padding-top: 18px; border-top: 1px solid var(--dm-filete-oscuro); }

/* ---------- Celular (< 760 px): logo 20 px, sin suscripción, una columna, filas deslizables */
@media (max-width: 759.98px) {
	.dm-header__logo .dm-logo { height: 20px; }
	.dm-header { grid-template-columns: 44px 1fr 44px; }
	.dm-suscripcion { display: none; }
	.dm-nav__lista { justify-content: flex-start; }
	.dm-barrios__lista { justify-content: flex-start; }
	.dm-apertura__principal, .dm-apertura__columna { flex-basis: 100%; }
	.dm-articulo__nota { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { body { transition: none; } }