/* ==========================================================================
   Noticias — sala de prensa y ficha de una nota

   Estilo: retícula editorial. Jerarquía fuerte, filetes en vez de cajas,
   titulares grandes y mucho aire. Una parrilla de tarjetas iguales obliga a
   leerlo todo para encontrar algo; un periódico se barre en dos segundos.

   TIPOGRAFÍA — la regla del sitio, que aquí se rompió una vez y no se vuelve a
   romper:

     Visby (--display)  → TODO el texto que se lee de corrido: cuerpo, bajadas,
                          rótulos, fechas, botones.
     Etna  (--serif)    → titulares, capitular y citas. Es un serif condensado
                          de display: en un párrafo largo se lee apretado y
                          cansa.
     BDSans (--fiesta)  → sólo el número de índice y el display gigante.

   Cuerpo a 1,05–1,15 rem con interlínea 1,7 y medida de 66ch: lo que piden las
   guías de lectura larga (65–75 caracteres por línea, interlínea 1,5–1,75).
   ========================================================================== */

/* ------------------------------------------------------------- escala */

.dk-sala,
.dk-nota {
	/* Escala tipográfica propia de la sección, para no repetir clamps sueltos
	   por toda la hoja. */
	--n-rotulo: 0.68rem;
	--n-meta: 0.74rem;
	--n-cuerpo: clamp(1.02rem, 0.98rem + 0.25vw, 1.14rem);
	--n-bajada: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	--n-t3: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
	--n-t2: clamp(1.5rem, 1.2rem + 1.6vw, 2.3rem);
	--n-t1: clamp(2.1rem, 1.4rem + 3.4vw, 4.2rem);
	--n-display: clamp(2.6rem, 1.4rem + 5.6vw, 6.2rem);

	--filete: 1px solid rgb(255 255 255 / 0.11);
	--tinta-suave: #b7aea7;
	--tinta-media: #d7cfc9;
}

/* Rótulo: la unidad de texto pequeño de toda la sección. Reemplaza a
   .dk-eyebrow aquí porque necesita menos margen inferior y más color. */
.dk-rotulo {
	margin: 0;
	font-family: var(--display);
	font-size: var(--n-rotulo);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgb(245 242 238 / 0.62);
}
.dk-rotulo--flama { color: var(--flama); }

/* ============================================================== masthead */

/* Cabecera corta a propósito. La versión anterior abría con un párrafo de
   presentación y tres cifras; en una sala de prensa eso lo dice la primera
   foto. Aquí sólo queda el nombre de la sección y dos datos sueltos. */
.dk-masthead {
	padding: calc(var(--nav-alto) + clamp(2rem, 5vw, 3.4rem)) 0 clamp(1rem, 2vw, 1.6rem);
}

.dk-migas {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: var(--n-meta); letter-spacing: 0.14em; text-transform: uppercase;
	color: rgb(245 242 238 / 0.55); margin-bottom: clamp(1.2rem, 3vw, 2rem);
}
.dk-migas a:hover { color: var(--flama); }
.dk-migas__actual { color: var(--tiza); }

.dk-masthead__caja {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
	gap: 12px 24px;
}

.dk-masthead__titulo {
	margin: 0;
	font-family: var(--fiesta); font-weight: 900;
	font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.6rem); line-height: 0.9; letter-spacing: -0.02em;
	text-transform: uppercase;
}

.dk-masthead__pie {
	display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0;
	font-size: var(--n-meta); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	color: rgb(245 242 238 / 0.55);
}

/* ================================================================== tabs */

.dk-tabs {
	position: sticky; top: var(--nav-alto); z-index: 40;
	background: rgb(11 9 8 / 0.9); backdrop-filter: blur(14px);
	border-bottom: var(--filete);
}
.dk-tabs__caja {
	display: flex; align-items: stretch; gap: clamp(14px, 2vw, 26px);
	overflow-x: auto; scrollbar-width: none;
}
.dk-tabs__caja::-webkit-scrollbar { display: none; }

.dk-tab {
	flex: 0 0 auto; position: relative; cursor: pointer;
	padding: 16px 0 14px; background: none; border: 0;
	font-family: var(--display); font-size: var(--n-meta); font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: rgb(245 242 238 / 0.62);
	transition: color .25s var(--curva);
}
.dk-tab::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
	background: var(--flama); transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--curva);
}
.dk-tab:hover { color: var(--tiza); }
.dk-tab--activo { color: var(--tiza); }
.dk-tab--activo::after { transform: scaleX(1); }
.dk-tab--tipo { margin-left: auto; padding-left: clamp(14px, 2vw, 26px); color: var(--hueso); }

/* ================================================================ zonas */

.dk-sala__cuerpo { padding-bottom: clamp(2.5rem, 6vw, 4rem); }

/* El aire de arriba lo pone cada zona, no el contenedor: al filtrar por un tema
   la portada se esconde y el mosaico pasa a ser lo primero. Con el aire en el
   contenedor, la primera pieza quedaba pegada al borde de la barra de pestañas
   —que es fija— y se leía como si estuviera metida debajo. */
.dk-zona--hero { padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(1rem, 2vw, 1.4rem); }
.dk-zona--mosaico { padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(1rem, 2vw, 1.6rem); }
/* Con la portada visible el mosaico va justo debajo y no necesita repetir el
   aire: dos paddings seguidos abren un hueco que parece un error. */
.dk-zona--hero:not([hidden]) + .dk-zona--mosaico { padding-top: 0; }
.dk-zona[hidden] { display: none; }

/* ========================================================= publicaciones */

/* Regla de la sección: el texto nunca va sobre la foto.
   Un velo sobre la imagen funciona hasta que alguien sube una portada clara, y
   entonces el titular desaparece sin que nadie lo note hasta que está
   publicado. Con el texto en su propio bloque sólido, cualquier imagen sirve.

   Segunda regla: todas las piezas recortan 3:2. El mosaico cambia el ANCHO de
   la pieza, nunca su proporción, así que una sola foto apaisada vale para
   cualquier posición y no hay que preparar tres versiones. */

.dk-np[hidden] { display: none; }

.dk-np__link {
	display: flex; flex-direction: column; height: 100%;
	overflow: hidden; border-radius: 14px; color: inherit;
	background: var(--superficie);
	border: 1px solid rgb(255 255 255 / 0.08);
	transition: border-color .35s var(--curva), background-color .35s, transform .35s var(--curva);
}
.dk-np__link:hover {
	border-color: rgb(255 61 20 / 0.45);
	background: #17130f;
	transform: translateY(-3px);
}

.dk-np__foto {
	display: block; position: relative; overflow: hidden;
	aspect-ratio: 3 / 2; background: var(--tinta-2);
}
.dk-np__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curva); }
.dk-np__link:hover .dk-np__img { transform: scale(1.04); }
.dk-np__sinfoto {
	position: absolute; inset: 0;
	background: radial-gradient(120% 90% at 30% 20%, rgb(255 61 20 / .22), transparent 62%), var(--tinta-2);
}

.dk-np__copy {
	display: flex; flex-direction: column; flex: 1;
	padding: 14px 15px 15px;
}

.dk-np__rotulo {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px;
	font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.dk-np__tema { color: var(--flama); }
.dk-np__tipo {
	padding: 3px 9px; border: 1px solid rgb(230 220 194 / 0.35); border-radius: 99px;
	color: var(--hueso); font-size: 0.58rem;
}
.dk-np__fecha { color: rgb(245 242 238 / 0.6); font-weight: 600; }

.dk-np__titulo {
	margin: 0; font-family: var(--serif); font-weight: 700;
	line-height: 1.08; letter-spacing: -0.008em; color: var(--tiza);
	text-wrap: balance;
	font-size: clamp(0.98rem, 0.9rem + 0.26vw, 1.12rem);
	/* Tres líneas como tope: más que eso no es un titular. */
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
	transition: color .3s;
}
.dk-np__link:hover .dk-np__titulo { color: var(--hueso); }


/* ------------------------------------------------------------- la portada */

/* La única que lleva el texto sobre la imagen, y no suelto: va dentro de un
   panel opaco con desenfoque detrás. Opaco de verdad (.88) y no un degradado,
   porque el degradado es justo lo que falla con las fotos claras. */
.dk-np--hero .dk-np__link {
	position: relative; display: block; border-radius: 18px; border: 0;
}
.dk-np--hero .dk-np__link:hover { transform: none; }
/* La portada iba en 16:9 y a 1440 px medía 810 px de alto: una sola noticia se
   comía la pantalla entera. En 21:9 y con tope de 420 px sigue siendo la pieza
   grande de la página sin ser la única. */
.dk-np--hero .dk-np__foto { aspect-ratio: 21 / 9; max-height: 420px; }
@media (max-width: 759px) { .dk-np--hero .dk-np__foto { aspect-ratio: 3 / 2; max-height: 260px; } }

.dk-np--hero .dk-np__copy {
	position: absolute; left: 0; bottom: 0; width: 100%;
	padding: clamp(14px, 1.6vw, 22px);
	background: linear-gradient(to top, rgb(9 7 6 / .93), rgb(9 7 6 / .78));
	backdrop-filter: blur(10px);
	border-top: 1px solid rgb(255 255 255 / 0.1);
}
@media (min-width: 900px) {
	.dk-np--hero .dk-np__copy { width: min(56%, 620px); border-right: 1px solid rgb(255 255 255 / 0.1); border-top-right-radius: 14px; }
}
.dk-np--hero .dk-np__titulo { font-size: clamp(1.35rem, 1rem + 1.35vw, 2.25rem); -webkit-line-clamp: 3; }
.dk-np--hero .dk-np__rotulo { font-size: 0.66rem; }

/* --------------------------------------------------------------- mosaico */

/* Columnas que se acomodan solas: cuatro en un portátil, cinco en un monitor
   grande, dos en tableta y una en teléfono. Sin tamaños alternados —todas las
   piezas miden igual— porque así una sola foto apaisada sirve para cualquier
   posición y caben ocho noticias por pantalla en vez de tres. */
.dk-mosaico {
	display: grid; gap: clamp(12px, 1.2vw, 18px);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}

@media (max-width: 519px) {
	.dk-mosaico { grid-template-columns: 1fr; }
	.dk-np--pieza .dk-np__titulo { font-size: 1.12rem; }
}

.dk-sala__vacio { color: var(--ceniza); text-align: center; padding: 3rem 0; }

/* =========================================================== paginación */

.dk-paginacion {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.dk-paginacion .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 14px; border-radius: 99px;
	border: 1px solid rgb(255 255 255 / 0.12); color: rgb(245 242 238 / 0.6);
	font-size: var(--n-meta); font-weight: 600; letter-spacing: 0.1em;
	transition: color .25s, border-color .25s, background-color .25s;
}
.dk-paginacion .page-numbers:hover { color: var(--tiza); border-color: rgb(255 61 20 / .6); }
.dk-paginacion .page-numbers.current { background: var(--flama-honda); border-color: var(--flama-honda); color: #fff; }

/* ============================================================ cobertura */

/* Antes era una fila de botones que sólo decían «PRODU», cuatro veces: un sello
   sin información, porque quien lo ve no sabe qué publicaron ni cuándo. Ahora
   cada tarjeta lleva el medio, el titular de la nota y la fecha. */
.dk-cobertura { padding: clamp(2rem, 5vw, 3.4rem) 0; border-top: var(--filete); }
.dk-cobertura .dk-rotulo { margin-bottom: 1.2rem; }
.dk-cobertura__lista {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .dk-cobertura__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dk-cobertura__lista { grid-template-columns: repeat(4, 1fr); } }

.dk-cobertura__lista a {
	display: grid; gap: 8px; height: 100%; align-content: start;
	grid-template-columns: 1fr auto;
	padding: 16px; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 12px;
	transition: border-color .3s, background-color .3s, transform .3s var(--curva);
}
.dk-cobertura__lista a:hover {
	border-color: rgb(255 61 20 / .5); background: rgb(255 61 20 / .06); transform: translateY(-3px);
}
.dk-cobertura__medio {
	font-family: var(--fiesta); font-weight: 900; font-size: 0.86rem;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--flama);
}
.dk-cobertura__titulo {
	grid-column: 1 / -1;
	font-family: var(--serif); font-weight: 700; font-size: 0.98rem; line-height: 1.22;
	color: var(--tiza);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.dk-cobertura__fecha {
	grid-column: 1 / -1;
	font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: rgb(245 242 238 / 0.55);
}
.dk-cobertura__flecha { grid-column: 2; grid-row: 1; color: var(--flama); align-self: start; }

.dk-sala__pie { padding: clamp(2.5rem, 6vw, 4rem) 0; border-top: var(--filete); }
.dk-sala__pie .dk-h-serif { margin-bottom: 1.6rem; }

/* ==========================================================================
   La nota
   ========================================================================== */

/* La foto abre la página y el bloque de título va pegado debajo, sobre fondo
   sólido: el titular nunca pelea con la imagen y no queda una banda vacía entre
   el menú flotante y las migas. */
.dk-nota__portada { position: relative; margin: 0; }

/* Sombra sólo en la franja del menú. El menú flota sobre la foto y sin esto se
   pierde encima de una zona clara —pelo naranja, cielo, una pared blanca—. No
   es un velo sobre toda la imagen: son los primeros 150 px. */
.dk-nota__portada::after {
	content: ""; position: absolute; inset: 0 0 auto; height: 170px; pointer-events: none;
	background: linear-gradient(to bottom, rgb(9 7 6 / .88), rgb(9 7 6 / .45) 55%, transparent);
}
.dk-nota__portada img, .dk-nota__portada video {
	width: 100%; height: clamp(230px, 44vw, 520px); object-fit: cover; display: block;
}

.dk-nota__cab {
	padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(1.6rem, 3.5vw, 2.6rem);
	background:
		radial-gradient(90% 120% at 0% 0%, rgb(255 61 20 / .10), transparent 58%),
		var(--tinta);
}

/* Sin foto no hay nada que llene el hueco del menú, así que el aire vuelve. */
.dk-nota > .dk-nota__cab:first-child {
	padding-top: calc(var(--nav-alto) + clamp(1.6rem, 4vw, 2.6rem));
}
.dk-nota__rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 1.2rem; }

.dk-nota__titulo {
	margin: 0; max-width: 20ch;
	font-family: var(--serif); font-weight: 700;
	font-size: var(--n-t1); line-height: 1.02; letter-spacing: -0.012em;
	text-wrap: balance;
}

.dk-nota__bajada {
	margin: 1.4rem 0 0; max-width: 58ch;
	font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem); line-height: 1.55;
	color: var(--tinta-media);
}

.dk-nota__firma {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
	margin-top: clamp(1.6rem, 3vw, 2.4rem); padding-top: 1.1rem;
	border-top: var(--filete);
	font-size: var(--n-meta); letter-spacing: 0.12em; text-transform: uppercase;
	color: rgb(245 242 238 / 0.62);
}
.dk-nota__firma span:first-child { color: var(--tiza); font-weight: 600; }
.dk-nota__firma a { color: var(--flama); }
.dk-nota__firma a:hover { color: var(--tiza); }

/* ---------------------------------------------------- columna de lectura */

.dk-nota__grid {
	display: grid; gap: clamp(2rem, 4vw, 3.5rem);
	padding-top: clamp(2.4rem, 5vw, 4rem);
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 1024px) { .dk-nota__grid { grid-template-columns: 220px minmax(0, 1fr); } }
@media (min-width: 1400px) { .dk-nota__grid { grid-template-columns: 240px minmax(0, 720px) 1fr; } }

.dk-nota__lado { display: none; }
@media (min-width: 1024px) { .dk-nota__lado { display: block; } }
.dk-nota__pegado { position: sticky; top: calc(var(--nav-alto) + 28px); display: grid; gap: 2.2rem; }

.dk-indice ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.dk-indice a {
	display: block; padding: 8px 0 8px 14px; border-left: 2px solid rgb(255 255 255 / 0.1);
	font-size: 0.84rem; line-height: 1.35; color: rgb(245 242 238 / 0.6);
	transition: color .25s, border-color .25s;
}
.dk-indice a:hover { color: var(--tiza); }
.dk-indice a.dk-indice--aqui { color: var(--flama); border-left-color: var(--flama); }

.dk-compartir__botones { display: flex; gap: 8px; margin-top: 12px; }
.dk-compartir__btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid rgb(255 255 255 / 0.12); background: transparent; cursor: pointer;
	color: rgb(245 242 238 / 0.7); font-family: var(--display); font-size: 0.82rem; font-weight: 700;
	transition: color .25s, border-color .25s, background-color .25s;
}
.dk-compartir__btn:hover { color: #fff; background: var(--flama-honda); border-color: var(--flama-honda); }
.dk-compartir__aviso { margin: 10px 0 0; font-size: 0.74rem; color: var(--flama); min-height: 1em; }

/* -------------------------------------------------------------- resumen */

.dk-resumen {
	margin: 0 0 clamp(2rem, 4vw, 2.8rem); padding: 0 0 0 clamp(1.1rem, 2vw, 1.6rem);
	border-left: 2px solid var(--flama);
}
.dk-resumen__lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 12px; }
.dk-resumen__lista li {
	font-size: var(--n-cuerpo); line-height: 1.55; color: var(--tinta-media);
}

/* --------------------------------------------------------------- cuerpo */

/* Visby, no Etna: el serif del sitio es condensado y de titular. Medida 66ch e
   interlínea 1,7, que es lo que aguanta una lectura de cinco minutos. */
.dk-nota__cuerpo {
	max-width: 66ch;
	font-family: var(--display); font-weight: 400;
	font-size: var(--n-cuerpo); line-height: 1.7; color: var(--tinta-media);
}
.dk-nota__cuerpo p { margin: 0 0 1.5em; }

/* Capitular sólo en el primer párrafo: repetida en cada sección deja de marcar
   el comienzo y se vuelve adorno. */
.dk-nota__cuerpo > p:first-of-type::first-letter {
	float: left; margin: 0.02em 0.12em 0 0;
	font-family: var(--serif); font-weight: 700; font-size: 3.6em; line-height: 0.82;
	color: var(--flama);
}

.dk-nota__cuerpo h2 {
	font-family: var(--serif); font-weight: 700;
	font-size: var(--n-t2); line-height: 1.1; letter-spacing: -0.008em;
	margin: 2.6em 0 0.6em; color: var(--tiza);
	scroll-margin-top: calc(var(--nav-alto) + 24px);
}
.dk-nota__cuerpo h3 {
	font-family: var(--display); font-weight: 700;
	font-size: 1.08rem; letter-spacing: 0.005em;
	margin: 2.2em 0 0.5em; color: var(--hueso);
}

.dk-nota__cuerpo a { color: var(--flama); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dk-nota__cuerpo a:hover { color: var(--tiza); }
.dk-nota__cuerpo strong { color: var(--tiza); font-weight: 700; }

.dk-nota__cuerpo ul, .dk-nota__cuerpo ol { margin: 0 0 1.6em; padding-left: 0; list-style: none; }
.dk-nota__cuerpo li { margin-bottom: 0.7em; }
.dk-nota__cuerpo ul li { position: relative; padding-left: 26px; }
.dk-nota__cuerpo ul li::before {
	content: ""; position: absolute; left: 2px; top: 0.72em;
	width: 10px; height: 2px; background: var(--flama); opacity: .85;
}
.dk-nota__cuerpo ol { counter-reset: dk-num; }
.dk-nota__cuerpo ol li { position: relative; padding-left: 38px; counter-increment: dk-num; }
.dk-nota__cuerpo ol li::before {
	content: counter(dk-num, decimal-leading-zero);
	position: absolute; left: 0; top: 0.2em;
	font-family: var(--fiesta); font-weight: 900; font-size: 0.78rem; letter-spacing: 0.04em;
	color: var(--flama);
}

/* La cita es la única pieza de cuerpo en serif: es una voz, no una lectura. */
.dk-nota__cuerpo blockquote {
	margin: 2.4em 0; padding: 0;
	border: 0; border-top: var(--filete); border-bottom: var(--filete);
}
.dk-nota__cuerpo blockquote p {
	margin: 1.1em 0 0.5em;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.75rem); line-height: 1.22;
	color: var(--tiza); text-wrap: balance;
}
.dk-nota__cuerpo blockquote cite {
	display: block; margin-bottom: 1.2em; font-style: normal;
	font-family: var(--display); font-size: var(--n-rotulo); font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--ceniza);
}

.dk-nota__cuerpo img { border-radius: 4px; margin: 2em 0; }
.dk-nota__cuerpo figcaption {
	margin-top: -1.4em; font-size: 0.78rem; line-height: 1.45; color: var(--ceniza);
}

.dk-nota__origen {
	max-width: 66ch; margin: 2.5rem 0 0; padding-top: 1.2rem; border-top: var(--filete);
	font-size: 0.84rem; color: var(--ceniza);
}
.dk-nota__origen a { color: var(--hueso); text-decoration: underline; text-underline-offset: 3px; }
.dk-nota__origen a:hover { color: var(--flama); }

/* -------------------------------------------------------------- galería */

.dk-ngal { margin-top: clamp(2.5rem, 5vw, 3.6rem); }
.dk-ngal__grid {
	display: grid; gap: 14px; margin-top: 1.2rem;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .dk-ngal__grid { grid-template-columns: repeat(3, 1fr); } }
/* En pantalla ancha la galería se sale de la columna de lectura hacia la
   derecha, donde no hay nada: el texto se lee mejor angosto, las fotos no. */
@media (min-width: 1400px) { .dk-ngal { width: calc(100% + 300px); } }

.dk-ngal__pieza { margin: 0; }
.dk-ngal__pieza img {
	width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4;
	border-radius: 4px; transition: scale .8s var(--curva);
}
.dk-ngal__pieza--ancha { grid-column: span 2; }
.dk-ngal__pieza--ancha img { aspect-ratio: 16 / 10; }
.dk-ngal__pieza:hover img { scale: 1.02; }
.dk-ngal__pieza figcaption { margin-top: 10px; font-size: 0.76rem; line-height: 1.4; color: var(--ceniza); }

/* ------------------------------------------------------------------ faq */

.dk-faq { max-width: 66ch; margin-top: clamp(2.5rem, 5vw, 3.6rem); }
.dk-faq .dk-rotulo { margin-bottom: 0.6rem; }
.dk-faq__item { border-top: var(--filete); }
.dk-faq__item:last-of-type { border-bottom: var(--filete); }
.dk-faq__item summary {
	list-style: none; cursor: pointer; position: relative;
	padding: 20px 40px 20px 0;
	font-family: var(--serif); font-size: var(--n-t3); line-height: 1.2; color: var(--tiza);
	transition: color .25s;
}
.dk-faq__item summary::-webkit-details-marker { display: none; }
.dk-faq__item summary:hover { color: var(--flama); }
.dk-faq__item summary::after {
	content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 2px;
	background: var(--flama); transform: translateY(-50%);
}
.dk-faq__item summary::before {
	content: ""; position: absolute; right: 11px; top: 50%; width: 2px; height: 12px;
	background: var(--flama); transform: translateY(-50%);
	transition: opacity .25s, transform .25s;
}
.dk-faq__item[open] summary::before { opacity: 0; transform: translateY(-50%) rotate(90deg); }
.dk-faq__item p { margin: 0 0 22px; padding-right: 40px; color: var(--tinta-suave); font-size: var(--n-cuerpo); line-height: 1.6; }

/* ------------------------------------------------------------------ cta */

.dk-nota__cta {
	max-width: 66ch; margin-top: clamp(2.8rem, 6vw, 4rem); padding: clamp(1.8rem, 3.5vw, 2.6rem);
	border: 1px solid rgb(255 61 20 / 0.25); border-radius: 4px;
	background: radial-gradient(120% 140% at 0% 0%, rgb(255 61 20 / .14), transparent 62%), var(--superficie);
}
.dk-nota__cta-titulo {
	margin: 0.8rem 0 1.4rem; font-family: var(--serif); font-weight: 700;
	font-size: var(--n-t2); line-height: 1.05;
}

.dk-nota__otras { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.dk-otras-cab {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	padding-top: 1.4rem; border-top: var(--filete); margin-bottom: 1.2rem;
}
.dk-otras-cab__mas {
	font-size: var(--n-meta); letter-spacing: 0.12em; text-transform: uppercase;
	color: rgb(245 242 238 / 0.6);
}
.dk-otras-cab__mas:hover { color: var(--flama); }
.dk-otras-grid { display: grid; gap: clamp(12px, 1.4vw, 20px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .dk-otras-grid { grid-template-columns: repeat(3, 1fr); } }
.dk-np--suelta .dk-np__copy { min-height: clamp(220px, 22vw, 300px); }

/* ------------------------------------------------------- menos movimiento */

@media (prefers-reduced-motion: reduce) {
	.dk-np__img, .dk-np__link, .dk-cobertura__lista a, .dk-tab::after {
		transition: none !important;
	}
	.dk-np__link:hover, .dk-cobertura__lista a:hover { transform: none; }
	.dk-np__link:hover .dk-np__img { transform: none; }
}