/*
Theme Name: Diario Nacional
Theme URI: http://paginabrasil.local
Author: Diario Nacional
Description: Tema de diario digital al estilo de los grandes portales de noticias: portada automatica por bloques de categoria, tarjetas con titular sobre la imagen, etiquetas de categoria, modo oscuro y cero noticias repetidas en la home.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diario-nacional
Tags: news, magazine, blog, two-columns, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Variables / paleta
   ========================================================================== */

:root {
	/* Azul marino institucional (rgb para poder usar alfa) */
	--dn-primary: 19 35 73;          /* #132349 */
	--dn-bg: 255 255 255;
	--dn-surface: 255 255 255;
	--dn-alt: 228 228 231;        /* gris claro de las tarjetas de Opinion */
	--dn-text: 19 35 73;
	--dn-body: 75 85 99;
	--dn-muted: 107 114 128;
	--dn-border: 229 231 235;
	--dn-rule: 19 35 73;
	--dn-badge-bg: 19 35 73;
	--dn-badge-text: 255 255 255;
	--dn-footer: 19 35 73;

	--dn-max: 1600px;
	--dn-gap: 1.5rem;
	--dn-radius: 0px;

	/* velo negro que el diario aplica sobre el azul (le da profundidad) */
	--dn-veil: linear-gradient(to bottom, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.2) 50%, rgb(0 0 0 / 0.6));

	--dn-font-title: "Archivo", "Proxima Nova", "Segoe UI", system-ui, -apple-system, sans-serif;
	--dn-font-body: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html.dark {
	--dn-primary: 14 118 168;        /* #0e76a8 */
	--dn-bg: 15 15 15;
	--dn-surface: 20 20 20;
	--dn-alt: 30 30 32;
	--dn-text: 220 220 222;
	--dn-body: 190 190 195;
	--dn-muted: 150 150 155;
	--dn-border: 42 42 42;
	--dn-rule: 90 90 96;
	--dn-badge-bg: 14 118 168;
	--dn-footer: 15 15 15;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: rgb(var(--dn-bg));
	color: rgb(var(--dn-body));
	font-family: var(--dn-font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img, picture, video, iframe { max-width: 100%; }
img { height: auto; display: block; border: 0; }

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dn-font-title);
	color: rgb(var(--dn-text));
	margin: 0;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.005em;
	overflow-wrap: anywhere;
}

p { margin: 0 0 1em; }

button { font: inherit; cursor: pointer; }

hr { border: 0; border-top: 1px solid rgb(var(--dn-border)); margin: 0; }

.dn-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.dn-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: rgb(var(--dn-primary)); color: #fff; padding: .75rem 1.25rem; font-weight: 700;
}
.dn-skip-link:focus { left: 0; }

.dn-wrap { max-width: var(--dn-max); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .dn-wrap { padding: 0 1.5rem; } }

/* ==========================================================================
   3. Cabecera
   ========================================================================== */

.dn-header-shell { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }

.dn-topbar {
	position: relative;
	background-color: rgb(var(--dn-primary));
	background-image: var(--dn-veil);
	color: #fff;
	box-shadow: 0 2px 6px rgb(0 0 0 / .18);
}

.dn-topbar__inner {
	position: relative; z-index: 2;
	max-width: var(--dn-max); margin: 0 auto; padding: 0 1.25rem;
	height: 80px;
	display: flex; align-items: center; justify-content: space-between;
}
@media (min-width: 768px) { .dn-topbar__inner { height: 96px; } }

.dn-burger {
	background: none; border: 0; color: #fff; padding: 0;
	width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
	margin-left: -.5rem;
}
.dn-burger svg { width: 28px; height: 28px; }
@media (min-width: 1300px) { .dn-burger { display: none; } }

.dn-brand {
	position: absolute; inset: 0; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none; padding: 0 3.5rem;
}
.dn-brand > a { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; }
.dn-brand .custom-logo-link { display: inline-flex; }
.dn-brand img {
	max-height: calc(var(--dn-logo-h, 64px) * .78);
	width: auto; max-width: 100%; height: auto; object-fit: contain;
}
@media (min-width: 768px) { .dn-brand img { max-height: var(--dn-logo-h, 64px); } }

.dn-brand__text {
	font-family: var(--dn-font-title);
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: 1.35rem;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}
@media (min-width: 768px) { .dn-brand__text { font-size: 2.1rem; } }
.dn-brand__text span { color: #fff; opacity: .82; font-weight: 500; }

.dn-topbar__right {
	position: relative; z-index: 2;
	display: flex; align-items: center; gap: 1rem; margin-left: auto;
}
.dn-topbar__social {
	display: none; align-items: center; gap: .7rem;
	padding-right: .9rem; margin-right: .1rem;
	border-right: 1px solid rgb(255 255 255 / .35);
}
@media (min-width: 768px) { .dn-topbar__social { display: flex; } }
.dn-topbar__social a { color: #fff; display: inline-flex; transition: opacity .2s; }
.dn-topbar__social a:hover { opacity: .7; }
.dn-topbar__social svg { width: 24px; height: 24px; fill: currentColor; }
.dn-topbar__social svg.dn-icon--stroke { fill: none; stroke: currentColor; }
@media (min-width: 1100px) { .dn-topbar__social svg { width: 26px; height: 26px; } }

.dn-search-toggle {
	background: none; border: 0; color: #fff; padding: .25rem;
	display: inline-flex; align-items: center;
}
.dn-search-toggle svg { width: 24px; height: 24px; }

/* interruptor modo oscuro */
.dn-theme-toggle {
	display: none; align-items: center;
	width: 4.25rem; height: 2rem; padding: 2px;
	border-radius: 999px;
	border: 1px solid rgb(255 255 255 / .3);
	background: rgb(255 255 255 / .15);
	box-shadow: inset 0 2px 4px rgb(0 0 0 / .25);
	transition: background .2s;
}
@media (min-width: 768px) { .dn-theme-toggle { display: inline-flex; } }
.dn-theme-toggle:hover { background: rgb(255 255 255 / .25); }
.dn-theme-toggle__knob {
	width: 1.75rem; height: 1.75rem; border-radius: 999px;
	background: #fff; color: rgb(var(--dn-primary));
	display: flex; align-items: center; justify-content: center;
	transition: transform .2s ease-out;
	box-shadow: 0 1px 3px rgb(0 0 0 / .3);
}
.dn-theme-toggle svg { width: 15px; height: 15px; }
html.dark .dn-theme-toggle { background: rgb(255 255 255 / .1); }
html.dark .dn-theme-toggle__knob { transform: translateX(2.25rem); }

/* barra de secciones (escritorio) */
.dn-navbar {
	position: relative;
	display: none;
	background-color: rgb(var(--dn-primary));
	background-image: var(--dn-veil);
	border-top: 1px solid rgb(255 255 255 / .22);
}
@media (min-width: 1300px) { .dn-navbar { display: block; } }

.dn-navbar__inner {
	position: relative; z-index: 2;
	max-width: var(--dn-max); margin: 0 auto; padding: 0 1.25rem;
	overflow-x: auto; scrollbar-width: none;
}
.dn-navbar__inner::-webkit-scrollbar { display: none; }

.dn-navbar ul {
	list-style: none; margin: 0 auto; padding: .75rem 0;
	display: flex; align-items: center; gap: 1.5rem; width: max-content;
}
.dn-navbar a {
	color: #fff; font-weight: 800; text-transform: uppercase;
	font-size: 1rem; white-space: nowrap; letter-spacing: .01em;
	transition: opacity .2s;
}
.dn-navbar a:hover { opacity: .75; }
.dn-navbar .current-menu-item > a,
.dn-navbar .current-cat > a { box-shadow: inset 0 -3px 0 #fff; }

/* menu movil */
.dn-mobile-nav {
	display: none;
	background-color: rgb(var(--dn-primary));
	background-image: var(--dn-veil);
	color: #fff;
	max-height: calc(100dvh - 80px);
	overflow-y: auto;
	border-top: 1px solid rgb(255 255 255 / .2);
}
.dn-mobile-nav.is-open { display: block; }
@media (min-width: 1300px) { .dn-mobile-nav, .dn-mobile-nav.is-open { display: none; } }
.dn-mobile-nav ul { list-style: none; margin: 0; padding: .5rem 1.25rem 1.5rem; }
.dn-mobile-nav li { border-bottom: 1px solid rgb(255 255 255 / .18); }
.dn-mobile-nav a {
	display: block; padding: .95rem .25rem; color: #fff;
	font-weight: 800; text-transform: uppercase; font-size: .95rem;
}
.dn-mobile-nav__social { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1.25rem 1.5rem 1.5rem; }
.dn-mobile-nav__social a { color: #fff; display: inline-flex; }
.dn-mobile-nav__social svg { width: 26px; height: 26px; fill: currentColor; }
.dn-mobile-nav__social svg.dn-icon--stroke { fill: none; stroke: currentColor; }

/* selector de idioma de GTranslate dentro del menu
   (el plugin lo inyecta como submenu; sin estas reglas el submenu queda
   siempre abierto y la bandera del idioma actual se ve dos veces) */
.menu-item-gtranslate { position: relative; }
.menu-item-gtranslate > .gt-current-wrapper { display: none; }
.menu-item-gtranslate .sub-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
}
.menu-item-gtranslate .sub-menu li { border: 0; margin: 0; padding: 0; }
.menu-item-gtranslate .sub-menu a {
	display: inline-flex; padding: 0; opacity: .55; transition: opacity .2s;
}
.menu-item-gtranslate .sub-menu a:hover,
.menu-item-gtranslate .sub-menu a:focus-visible { opacity: 1; }
.menu-item-gtranslate .sub-menu .gt-current-lang {
	opacity: 1; box-shadow: 0 0 0 2px rgb(255 255 255 / .9);
}
.menu-item-gtranslate img { display: block; width: 24px; height: 24px; }
.dn-mobile-nav .menu-item-gtranslate .sub-menu { padding: .95rem .25rem; gap: 1rem; }

/* buscador desplegable */
.dn-searchbar { display: none; background: rgb(var(--dn-primary)); padding: .85rem 1.25rem; }
.dn-searchbar.is-open { display: block; }
.dn-searchbar form { max-width: 720px; margin: 0 auto; display: flex; gap: .5rem; }
.dn-searchbar input[type="search"] {
	flex: 1; border: 0; padding: .7rem .9rem; font-size: 1rem; font-family: inherit;
	background: #fff; color: #111;
}
.dn-searchbar button {
	border: 0; background: #fff; color: rgb(var(--dn-primary));
	font-weight: 800; text-transform: uppercase; padding: 0 1.1rem; font-size: .85rem;
}

/* espaciador para el header fijo */
.dn-header-spacer { height: 80px; }
@media (min-width: 768px) { .dn-header-spacer { height: 96px; } }
@media (min-width: 1300px) { .dn-header-spacer { height: 148px; } }

/* ==========================================================================
   4. Titulo de seccion (linea — TITULO — linea)
   ========================================================================== */

.dn-sechead { display: flex; align-items: center; gap: 1rem; margin: 2rem 0 1.75rem; }
.dn-sechead hr { flex: 1 1 0%; min-width: 0; border-top: 1px solid rgb(var(--dn-rule)); }
.dn-sechead a, .dn-sechead > span { min-width: 0; max-width: 85%; }
.dn-sechead h2 {
	font-family: var(--dn-font-title);
	color: rgb(var(--dn-primary));
	font-weight: 600;
	font-size: 1.35rem;
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
	transition: opacity .2s;
}
.dn-sechead a:hover h2 { opacity: .75; }
@media (min-width: 768px) { .dn-sechead h2 { font-size: 1.9rem; } }

/* variante con icono (Drecha Diario TV) */
.dn-sechead--icon a,
.dn-sechead--icon span { display: inline-flex; align-items: center; gap: .6rem; }
.dn-sechead--icon svg { width: 1.6rem; height: 1.6rem; fill: rgb(var(--dn-primary)); flex: 0 0 auto; }

/* variante destacada (banda de tema, tipo portada especial) */
.dn-sechead--feature h2 {
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: .04em;
}

/* ==========================================================================
   5. Etiqueta de categoria
   ========================================================================== */

.dn-badge {
	display: inline-block; position: relative; overflow: hidden;
	background-color: rgb(var(--dn-badge-bg));
	background-image: var(--dn-veil);
	color: rgb(var(--dn-badge-text));
	padding: .15rem .5rem;
	font-family: var(--dn-font-body);
	font-size: .7rem; font-weight: 800; line-height: 1.45;
	text-transform: uppercase; letter-spacing: .04em;
	width: fit-content;
}
.dn-badge:hover { filter: brightness(1.12); }

.dn-badge--ghost {
	background: rgb(255 255 255 / .1);
	border: 1px solid rgb(255 255 255 / .3);
	border-radius: 999px;
	padding: .3rem .85rem;
	letter-spacing: .2em;
	font-size: .68rem;
	backdrop-filter: blur(4px);
	background-image: none;
	color: #fff;
}

/* ==========================================================================
   6. Tarjeta de noticia  (titular ARRIBA de la foto, como el diario original)
   ========================================================================== */

.dn-card { display: flex; flex-direction: column; }
.dn-card > a { display: block; }
.dn-card > a:hover .dn-card__title { opacity: .82; }

.dn-card__title {
	font-family: var(--dn-font-title);
	font-weight: 800;
	color: rgb(var(--dn-text));
	line-height: 1.13;
	font-size: 1.35rem;
	margin: 0 0 .75rem;
	transition: opacity .2s;
}

.dn-card__media {
	position: relative; width: 100%; aspect-ratio: 3 / 2;
	overflow: hidden; margin-bottom: .9rem;
	background: rgb(var(--dn-border));
}
.dn-card__media img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	transition: transform .35s ease;
}
.dn-card > a:hover .dn-card__media img { transform: scale(1.05); }

.dn-card__excerpt {
	color: rgb(var(--dn-body));
	font-size: .95rem; line-height: 1.35; margin: .5rem 0 0;
}

/* icono de video superpuesto */
.dn-card__play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
.dn-card__play span {
	width: 60px; height: 60px; border-radius: 999px;
	background: rgb(0 0 0 / .6); color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgb(0 0 0 / .35);
}

/* tamanos */
.dn-card--xl .dn-card__title { font-size: 1.9rem; }
@media (min-width: 1280px) { .dn-card--xl .dn-card__title { font-size: 2.35rem; } }

.dn-card--lg .dn-card__title { font-size: 1.5rem; }
@media (min-width: 1280px) { .dn-card--lg .dn-card__title { font-size: 1.75rem; } }

.dn-card--sm .dn-card__title { font-size: 1.05rem; }
.dn-card--sm .dn-card__excerpt { display: none; }

/* tarjeta compacta horizontal (columna lateral / listados) */
.dn-card-compact { display: block; padding: .9rem 0; border-bottom: 1px solid rgb(var(--dn-border)); }
.dn-card-compact:last-child { border-bottom: 0; }
.dn-card-compact > a { display: grid; grid-template-columns: 1fr 96px; gap: .85rem; align-items: start; }
.dn-card-compact__title {
	font-family: var(--dn-font-title); font-weight: 800; font-size: 1rem;
	line-height: 1.2; color: rgb(var(--dn-text)); margin: .35rem 0 0;
}
.dn-card-compact > a:hover .dn-card-compact__title { opacity: .8; }
.dn-card-compact__media { aspect-ratio: 1 / 1; overflow: hidden; background: rgb(var(--dn-border)); }
.dn-card-compact__media img { width: 100%; height: 100%; object-fit: cover; }
.dn-card-compact .dn-badge { font-size: .62rem; }

/* ==========================================================================
   7. Rejillas de portada
   ========================================================================== */

.dn-home { padding-bottom: 3rem; }

.dn-layout { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1300px) {
	.dn-layout { flex-direction: row; gap: 2rem; align-items: flex-start; }
	.dn-layout__main { min-width: 0; flex: 1 1 auto; }
	.dn-layout__aside { width: 320px; flex: 0 0 320px; position: sticky; top: 160px; }
}
.dn-layout__aside { display: none; }
@media (min-width: 1300px) { .dn-layout__aside { display: block; } }

/* bloque de apertura: nota principal a la izquierda y cuatro notas a la derecha */
.dn-open {
	display: grid; grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem; padding: 1.5rem 0 2rem;
}
@media (min-width: 1000px) {
	.dn-open {
		grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
		column-gap: 2.5rem; gap: 0;
	}
	.dn-open__side { border-left: 1px solid rgb(var(--dn-border)); padding-left: 2.5rem; }
}

.dn-open__media-link { display: block; }
.dn-open__media {
	position: relative; width: 100%; aspect-ratio: 3 / 2;
	overflow: hidden; background: rgb(var(--dn-border));
}
.dn-open__media img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; transition: transform .35s ease;
}
.dn-open__media-link:hover .dn-open__media img { transform: scale(1.04); }
.dn-open .dn-badge { margin: .9rem 0 .5rem; }

.dn-open__lead-title {
	font-family: var(--dn-font-title); font-weight: 800;
	color: rgb(var(--dn-text)); line-height: 1.12;
	font-size: clamp(1.75rem, 2.6vw, 2.35rem);
	margin: 0 0 1.1rem; transition: opacity .2s;
}
.dn-open__lead a:hover .dn-open__lead-title { opacity: .82; }
.dn-open__summary {
	color: rgb(var(--dn-body)); font-size: .9rem; line-height: 1.45; margin: 0;
}

.dn-open__card-title {
	font-family: var(--dn-font-title); font-weight: 800;
	color: rgb(var(--dn-text)); line-height: 1.2;
	font-size: 1.05rem; margin: 0; transition: opacity .2s;
}
.dn-open__card a:hover .dn-open__card-title,
.dn-open__wide a:hover .dn-open__card-title { opacity: .82; }

.dn-open__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 600px) {
	.dn-open__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
	.dn-open__top > article + article {
		border-left: 1px solid rgb(var(--dn-border)); padding-left: 1.5rem;
	}
}

.dn-open__wide {
	display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
	gap: 1.25rem; align-items: start;
	padding: 1.25rem 0; border-top: 1px solid rgb(var(--dn-border));
}
.dn-open__wide:last-child { padding-bottom: 0; }
.dn-open__wide .dn-badge { margin: 0 0 .5rem; }
.dn-open__media--wide { aspect-ratio: 16 / 10; }
.dn-open__top + .dn-open__wide { margin-top: 1.5rem; }

/* bloque de categoria: 4 columnas */
.dn-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.dn-grid > .dn-card { padding: 1.1rem 0; border-bottom: 1px solid rgb(var(--dn-border)); }
@media (min-width: 768px) {
	.dn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
	.dn-grid > .dn-card { padding: 0; border-bottom: 0; }
}
@media (min-width: 1100px) {
	.dn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dn-grid--3 { }
@media (min-width: 1100px) { .dn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* bloque "ultimas": 2 columnas de tarjetas medianas */
.dn-grid--wide { }
@media (min-width: 768px) { .dn-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.75rem; } }
@media (min-width: 1100px) { .dn-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dn-section { margin-bottom: 2.5rem; }

.dn-section__more { text-align: center; margin-top: 1.75rem; }
.dn-btn {
	display: inline-block; padding: .7rem 1.6rem;
	border: 1px solid rgb(var(--dn-primary));
	color: rgb(var(--dn-primary));
	font-weight: 800; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em;
	transition: background .2s, color .2s;
}
.dn-btn:hover { background: rgb(var(--dn-primary)); color: #fff; }

/* ==========================================================================
   8. Banda de tema destacado
   ========================================================================== */

.dn-band { background: rgb(var(--dn-primary)); background-image: var(--dn-veil); padding: 1.5rem 0 2rem; margin: 2.5rem 0; }
.dn-band__inner { padding: 0 1.25rem; }
@media (min-width: 768px) { .dn-band__inner { padding: 0 2rem; } }
.dn-band .dn-sechead h2 { color: #fff; }
.dn-band .dn-sechead hr { border-color: rgb(255 255 255 / .45); }
.dn-band .dn-card__title { color: #fff; }
.dn-band .dn-card__excerpt { color: rgb(255 255 255 / .8); }
.dn-band .dn-badge { background-color: #fff; color: rgb(var(--dn-primary)); background-image: none; }
.dn-band .dn-grid > .dn-card { border-bottom-color: rgb(255 255 255 / .2); }

/* ==========================================================================
   8b. Carrusel de Opinion
   ========================================================================== */

/* Los dos modulos respiran mucho mas que el resto de los bloques de la
   portada. En celular se reduce: 15rem ahi seria casi una pantalla vacia. */
.dn-section.dn-opinion,
.dn-section.dn-tv { margin: 7rem 0; }
@media (min-width: 900px) {
	.dn-section.dn-opinion,
	.dn-section.dn-tv { margin: 15rem 0; }
}

.dn-carousel { position: relative; }

.dn-carousel__track {
	display: flex; gap: 1.25rem;
	overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; scrollbar-width: none;
	padding-bottom: .25rem;
}
.dn-carousel__track::-webkit-scrollbar { display: none; }

.dn-carousel__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 38px; height: 38px; border-radius: 999px;
	display: none; align-items: center; justify-content: center;
	border: 1px solid rgb(var(--dn-border));
	background: rgb(var(--dn-surface)); color: rgb(var(--dn-text));
	box-shadow: 0 2px 10px rgb(0 0 0 / .12);
	transition: opacity .2s, background .2s;
}
.dn-carousel__nav svg { width: 20px; height: 20px; }
.dn-carousel__nav:hover { background: rgb(var(--dn-primary)); color: #fff; border-color: rgb(var(--dn-primary)); }
.dn-carousel__nav[hidden] { display: none; }
.dn-carousel__nav--prev { left: -19px; }
.dn-carousel__nav--next { right: -19px; }
@media (min-width: 900px) { .dn-carousel__nav { display: inline-flex; } }

.dn-carousel__dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1.5rem; }
.dn-carousel__dots button {
	width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
	background: rgb(var(--dn-border)); cursor: pointer; transition: background .2s;
}
.dn-carousel__dots button.is-active { background: rgb(var(--dn-primary)); }
.dn-carousel__dots:empty { display: none; }

.dn-opcard {
	flex: 0 0 calc(100% - .5rem); scroll-snap-align: start;
	background: rgb(var(--dn-alt)); border: 1px solid rgb(var(--dn-border));
	border-radius: 1rem; box-shadow: 0 2px 8px rgb(0 0 0 / .07);
	transition: box-shadow .25s;
}
@media (min-width: 560px) { .dn-opcard { flex-basis: calc(50% - .625rem); } }
@media (min-width: 900px) { .dn-opcard { flex-basis: calc(33.333% - .8333rem); } }
@media (min-width: 1200px) { .dn-opcard { flex-basis: calc(25% - .9375rem); } }
.dn-opcard:hover { box-shadow: 0 6px 18px rgb(0 0 0 / .14); }

.dn-opcard > a {
	display: flex; flex-direction: column; align-items: center;
	height: 100%; padding: 1.75rem 1.25rem 1.5rem; text-align: center;
}

.dn-opcard__title {
	font-family: var(--dn-font-title); font-weight: 800;
	font-size: 1.15rem; line-height: 1.35; color: rgb(var(--dn-text));
	margin: 0 0 1.5rem; transition: opacity .2s;
}
.dn-opcard > a:hover .dn-opcard__title { opacity: .8; }

.dn-opcard__media {
	display: block; width: 100%; margin-top: auto;
}
.dn-opcard__media img {
	width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
	border-radius: .55rem; border: 2px solid rgb(var(--dn-primary));
}

/* ==========================================================================
   8c. Bloque de videos (Drecha Diario TV)
   ========================================================================== */

.dn-tv__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 900px) { .dn-tv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dn-tv__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

.dn-tv__item {
	position: relative; display: block; overflow: hidden;
	border-radius: 1rem; border: 1px solid rgb(var(--dn-border));
	background: rgb(var(--dn-border));
	box-shadow: 0 2px 8px rgb(0 0 0 / .1);
	transition: box-shadow .25s;
	aspect-ratio: 16 / 9;
}
.dn-tv__item:hover { box-shadow: 0 8px 22px rgb(0 0 0 / .2); }
.dn-tv__item--main { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .dn-tv__item--main { aspect-ratio: auto; height: 100%; } }

.dn-tv__item img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.dn-tv__item::after {
	content: ""; position: absolute; inset: 0;
	background: rgb(0 0 0 / .10); transition: background .2s;
}
.dn-tv__item:hover::after { background: rgb(0 0 0 / .2); }

.dn-tv__play {
	position: absolute; inset: 0; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
.dn-tv__play svg {
	width: 52px; height: 52px; padding: 14px;
	border-radius: 999px; background: rgb(220 38 38 / .92); fill: #fff;
	box-shadow: 0 4px 14px rgb(0 0 0 / .35);
}
.dn-tv__item--main .dn-tv__play svg { width: 66px; height: 66px; padding: 18px; }

/* reproductor a pantalla completa */
html.dn-locked, html.dn-locked body { overflow: hidden; }

.dn-videobox {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center;
	padding: 1.25rem;
}
/* display:flex le gana al atributo hidden del navegador, hay que repetirlo */
.dn-videobox[hidden] { display: none; }
.dn-videobox__backdrop {
	position: absolute; inset: 0; background: rgb(0 0 0 / .85);
	backdrop-filter: blur(2px);
}
.dn-videobox__inner {
	position: relative; z-index: 1;
	width: 100%; max-width: 1100px;
}
.dn-videobox__frame {
	position: relative; width: 100%; aspect-ratio: 16 / 9;
	background: #000; overflow: hidden; border-radius: .75rem;
	box-shadow: 0 20px 60px rgb(0 0 0 / .6);
}
.dn-videobox__frame iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.dn-videobox__close {
	position: absolute; top: -3rem; right: 0;
	width: 40px; height: 40px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: rgb(255 255 255 / .15); color: #fff;
	transition: background .2s;
}
.dn-videobox__close:hover { background: rgb(255 255 255 / .3); }
.dn-videobox__close svg { width: 22px; height: 22px; }

/* ==========================================================================
   9. Nota individual
   ========================================================================== */

.dn-single { padding: 2rem 0 3rem; }
.dn-single__inner { max-width: 780px; margin: 0 auto; }

.dn-single__title { font-size: 2rem; line-height: 1.1; margin: .9rem 0; }
@media (min-width: 768px) { .dn-single__title { font-size: 2.9rem; } }

.dn-single__standfirst {
	font-size: 1.15rem; line-height: 1.4; color: rgb(var(--dn-body));
	font-weight: 500; margin: 0 0 1.25rem;
}

.dn-single__figure { margin: 0 0 1.5rem; }
.dn-single__figure img { width: 100%; }
.dn-single__figure figcaption { font-size: .8rem; color: rgb(var(--dn-muted)); padding-top: .5rem; }

.dn-content { font-size: 1.125rem; line-height: 1.7; color: rgb(var(--dn-body)); }
.dn-content p { margin: 0 0 1.4em; }
.dn-content h2 { font-size: 1.6rem; margin: 2rem 0 .8rem; }
.dn-content h3 { font-size: 1.3rem; margin: 1.75rem 0 .7rem; }
.dn-content a { color: rgb(var(--dn-primary)); text-decoration: underline; text-underline-offset: 3px; }
.dn-content blockquote {
	margin: 1.75rem 0; padding: .25rem 0 .25rem 1.25rem;
	border-left: 4px solid rgb(var(--dn-primary));
	font-family: var(--dn-font-title); font-size: 1.35rem; font-weight: 700;
	color: rgb(var(--dn-text)); line-height: 1.3;
}
.dn-content ul, .dn-content ol { padding-left: 1.4rem; margin: 0 0 1.4em; }
.dn-content li { margin-bottom: .5em; }
.dn-content img { margin: 1.5rem 0; }

.dn-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0; }
.dn-tags a {
	border: 1px solid rgb(var(--dn-border)); color: rgb(var(--dn-text));
	padding: .35rem .8rem; font-size: .78rem; font-weight: 700; text-transform: uppercase;
}
.dn-tags a:hover { background: rgb(var(--dn-primary)); color: #fff; border-color: rgb(var(--dn-primary)); }

/* ==========================================================================
   10. Archivos y paginacion
   ========================================================================== */

.dn-archive { padding: 1.5rem 0 3rem; }
.dn-archive__head { text-align: center; margin-bottom: 2rem; }
.dn-archive__title { font-size: 2rem; color: rgb(var(--dn-primary)); text-transform: uppercase; }
@media (min-width: 768px) { .dn-archive__title { font-size: 3rem; } }
.dn-archive__desc { color: rgb(var(--dn-muted)); max-width: 640px; margin: .75rem auto 0; }

.dn-pagination { margin-top: 2.5rem; text-align: center; }
.dn-pagination .page-numbers {
	display: inline-block; min-width: 40px; padding: .5rem .7rem; margin: 0 .15rem;
	border: 1px solid rgb(var(--dn-border)); color: rgb(var(--dn-text)); font-weight: 700;
}
.dn-pagination .page-numbers.current,
.dn-pagination .page-numbers:hover { background: rgb(var(--dn-primary)); color: #fff; border-color: rgb(var(--dn-primary)); }

.dn-empty { text-align: center; padding: 3rem 1rem; color: rgb(var(--dn-muted)); }

/* ==========================================================================
   11. Barra lateral
   ========================================================================== */

.dn-rail__head {
	background: rgb(var(--dn-primary)); background-image: var(--dn-veil);
	color: #fff; padding: .6rem .9rem; margin-bottom: .5rem;
	font-family: var(--dn-font-title); font-weight: 800; font-size: .95rem;
	text-transform: uppercase; letter-spacing: .08em;
}
.dn-rail__list { border-top: 1px solid rgb(var(--dn-border)); }

.dn-widget { margin-bottom: 2rem; }
.dn-widget ul { list-style: none; margin: 0; padding: 0; }
.dn-widget li { border-bottom: 1px solid rgb(var(--dn-border)); padding: .6rem 0; }
.dn-widget a { color: rgb(var(--dn-text)); font-weight: 600; }

/* ==========================================================================
   12. Pie
   ========================================================================== */

.dn-footer {
	background-color: rgb(var(--dn-footer)); background-image: var(--dn-veil);
	color: #fff; padding: 3rem 0 2rem; margin-top: 3rem;
}
.dn-footer__top { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .dn-footer__top { grid-template-columns: 1fr minmax(220px, 300px); } }
.dn-footer h3 {
	color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .1em;
	margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid rgb(255 255 255 / .25);
}
.dn-footer ul { list-style: none; margin: 0; padding: 0; }
.dn-footer li { margin-bottom: .55rem; }
.dn-footer a { color: rgb(255 255 255 / .85); font-weight: 600; }
.dn-footer a:hover { color: #fff; }
.dn-footer__brand .dn-brand__text { text-align: left; font-size: 1.8rem; }
.dn-footer__brand img { max-height: var(--dn-logo-h-footer, 56px); width: auto; height: auto; object-fit: contain; }
.dn-footer__about { color: rgb(255 255 255 / .75); font-size: .92rem; margin-top: 1rem; max-width: 46ch; }
.dn-footer__social { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.25rem; }
.dn-footer__social a { color: #fff; display: inline-flex; transition: opacity .2s; }
.dn-footer__social a:hover { opacity: .7; }
.dn-footer__social svg { width: 26px; height: 26px; fill: currentColor; }
.dn-footer__social svg.dn-icon--stroke { fill: none; stroke: currentColor; }
.dn-footer__bottom {
	margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / .2);
	font-size: .82rem; color: rgb(255 255 255 / .7);
	display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between;
}

/* ==========================================================================
   13. Utilidades / comentarios / bloques de WP
   ========================================================================== */

.alignleft { float: left; margin: .3rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .3rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; }
.wp-caption-text, .wp-element-caption { font-size: .8rem; color: rgb(var(--dn-muted)); }
.sticky, .bypostauthor { }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* barra de admin fija: compensar el header */
body.admin-bar .dn-header-shell { top: 32px; }
@media (max-width: 782px) { body.admin-bar .dn-header-shell { top: 46px; } }

/* nota principal de un archivo */
.dn-lead .dn-card__media { aspect-ratio: 16 / 7; max-height: 480px; }
.dn-lead .dn-card__excerpt { font-size: 1.1rem; max-width: 70ch; }
@media (min-width: 900px) {
	.dn-lead .dn-card__title { font-size: 2.6rem; max-width: 30ch; }
}