/* ==========================================================================
   Dirty Kitchen — estilos del tema

   CSS propio, sin build. En el prototipo esto era Tailwind, pero un tema de
   WordPress se mantiene mejor con clases con nombre y cero paso de compilación:
   quien edite el tema no necesita Node instalado.

   Paleta muestreada del .ai de marca. Etna Condensed es el SERIF editorial y
   Visby la geométrica — el nombre engaña, y confundirlas invierte el diseño.
   ========================================================================== */

/* ------------------------------------------------------------- fuentes */
@font-face { font-family: "Etna";  src: url("../fonts/EtnaCondensed-Light.woff2")   format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Etna";  src: url("../fonts/EtnaCondensed-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Etna";  src: url("../fonts/EtnaCondensed-Bold.woff2")    format("woff2"); font-weight: 700; font-display: swap; }
/* Beautifully Delicious Sans: la pidió la revisión para el titular del hero y
   las dos cintas. Vinieron dos pesos, Regular y Black; no hay Medium. */
@font-face { font-family: "BDSans"; src: url("../fonts/BDSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "BDSans"; src: url("../fonts/BDSans-Black.woff2")   format("woff2"); font-weight: 900; font-display: swap; }

@font-face { font-family: "Visby"; src: url("../fonts/Visby-Light.woff2")     format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Visby"; src: url("../fonts/Visby-Regular.woff2")   format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Visby"; src: url("../fonts/Visby-Medium.woff2")    format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Visby"; src: url("../fonts/Visby-Semibold.woff2")  format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Visby"; src: url("../fonts/Visby-Extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Visby"; src: url("../fonts/Visby-Heavy.woff2")     format("woff2"); font-weight: 900; font-display: swap; }

/* -------------------------------------------------------------- tokens */
:root {
	--tinta: #0b0908;
	--tinta-2: #0e0c0b;
	--superficie: #141110;
	--linea: rgb(255 255 255 / 0.09);
	--flama: #ff3d14;
	--flama-honda: #d92800;   /* con texto blanco pequeño: 4,9:1 */
	--tiza: #f5f2ee;
	--ceniza: #8a817b;
	--hueso: #e6dcc2;

	--display: "Visby", ui-sans-serif, system-ui, sans-serif;
	--serif: "Etna", "Times New Roman", serif;
	--fiesta: "BDSans", "Etna", ui-sans-serif, sans-serif;
	--curva: cubic-bezier(0.16, 1, 0.3, 1);
	--nav-alto: 74px;
	--ancho: 1600px;
}

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

/* El clip va también en html: si sólo está en body, un desborde del documento
   deja scroll horizontal igual — pasa con el wordmark grande del pie. */
html { background: var(--tinta); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
	margin: 0;
	background: var(--tinta);
	color: var(--tiza);
	font-family: var(--display);
	font-weight: 400;
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--flama); color: #fff; }

:focus-visible { outline: 2px solid var(--flama); outline-offset: 3px; border-radius: 4px; }

.dk-saltar {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--flama-honda); color: #fff; padding: 12px 20px;
}
.dk-saltar:focus { left: 0; }

.dk-contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .dk-contenedor { padding: 0 36px; } }

/* ==========================================================================
   Una sección, una pantalla

   Regla del 17 de septiembre de 2026, sin excepciones: ninguna sección puede
   obligar a hacer scroll para verse entera. Una sección que no cabe se lee a
   medias — el titular sin la prueba, la imagen sin el texto que la explica.

   El aire de arriba y abajo es lo primero que se recorta, porque es lo único
   que no comunica nada. Encoger la letra para que quepa es justo lo que hace
   que un diseño se vea apretado, así que se quita contenido antes que tamaño.
   ========================================================================== */
.dk-seccion { padding: clamp(1.9rem, 4vw, 3.5rem) 0; }

/* El tope existe para que una sección que crece de más avise en vez de empujar
   la siguiente fuera de la pantalla. `svh` y no `vh`: en un teléfono la barra
   del navegador se come 60px que `vh` no cuenta. */
.dk-seccion, .dk-manif__uno, .dk-manif__dos, .dk-manif__tres {
	display: flex; flex-direction: column; justify-content: center;
	min-height: min-content;
}
.dk-seccion--formatos { background: var(--tinta-2); }
.dk-centrado { text-align: center; margin-top: 2.5rem; }

/* --------------------------------------------------------- tipografía */
.dk-h-serif { font-family: var(--serif); font-weight: 700; line-height: 1.04; letter-spacing: -0.005em; margin: 0; }
.dk-h-grande { font-size: clamp(2.2rem, 5.5vw, 4.4rem); }
.dk-h-medio  { font-size: clamp(1.6rem, 3.2vw, 2.8rem); }

.dk-eyebrow {
	font-weight: 600; font-size: 0.68rem; letter-spacing: 0.22em;
	text-transform: uppercase; margin: 0 0 1.2rem;
}
.dk-eyebrow--flama { color: var(--flama); }

.dk-lede { max-width: 62ch; color: #cdc5bf; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.55; margin: 1rem 0 0; }
.dk-prosa { max-width: 68ch; color: #cdc5bf; }
.dk-hito { font-family: var(--display); font-weight: 700; font-size: 1.22rem; line-height: 1.35; color: var(--flama); margin-top: 1.2rem; }

/* ------------------------------------------------------------ botones */
.dk-btn {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 52px; padding: 0 30px; border-radius: 99px;
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	transition: background-color .35s var(--curva), color .35s var(--curva), border-color .35s var(--curva);
	/* Hasta la parrilla de casos todos los .dk-btn eran <a>. En un <button> el
	   navegador pone su propio fondo gris y su propia tipografía, y el botón
	   «Más info» salía como una cápsula blanca vacía. */
	background: transparent; border: 0; cursor: pointer;
	font-family: inherit; line-height: 1; text-align: center;
}
/* El naranja vivo con texto blanco pequeño da 3,5:1. El hondo, 4,9:1. */
.dk-btn--flama { background: var(--flama-honda); color: #fff; }
.dk-btn--flama:hover { background: var(--tiza); color: var(--tinta); }
.dk-btn--linea { border: 1px solid rgb(245 242 238 / 0.25); color: var(--tiza); }
.dk-btn--linea:hover { border-color: var(--flama); background: var(--flama-honda); color: #fff; }

/* ---------------------------------------------------------------- nav */
.dk-nav {
	position: fixed; inset: 0 0 auto; z-index: 90;
	transition: transform .5s var(--curva), background-color .5s, border-color .5s;
	border-bottom: 1px solid transparent;
}
.dk-nav--solido { background: rgb(11 9 8 / 0.72); backdrop-filter: blur(14px); border-bottom-color: var(--linea); }
.dk-nav--oculto { transform: translateY(-100%); }

.dk-nav__caja {
	max-width: var(--ancho); margin: 0 auto; height: var(--nav-alto);
	padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
@media (min-width: 768px) { .dk-nav__caja { padding: 0 36px; } }
.dk-nav__logo img { height: 36px; width: auto; }

.dk-nav__menu ul { display: none; gap: 4px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1024px) { .dk-nav__menu ul { display: flex; } }
.dk-nav__menu a {
	display: block; padding: 10px 16px; border-radius: 99px;
	font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
	color: rgb(245 242 238 / 0.62); transition: color .2s, background-color .2s;
}
.dk-nav__menu a:hover { color: var(--tiza); background: rgb(255 255 255 / 0.08); }

.dk-nav__acciones { display: flex; align-items: center; gap: 12px; }
.dk-nav__acciones .dk-btn { display: none; min-height: 44px; padding: 0 22px; font-size: 0.7rem; }
@media (min-width: 640px) { .dk-nav__acciones .dk-btn { display: inline-flex; } }

/* Las barras van posicionadas, no en grid: así el giro a equis cae exacto. */
.dk-nav__hamburguesa {
	position: relative; width: 44px; height: 44px; padding: 0;
	background: rgb(255 255 255 / 0.04); border: 1px solid var(--linea); border-radius: 99px;
	cursor: pointer; transition: border-color .3s;
}
.dk-nav__hamburguesa:hover { border-color: rgb(255 61 20 / .6); }
.dk-nav__hamburguesa span {
	position: absolute; left: 50%; display: block; width: 20px; height: 2px;
	margin-left: -10px; background: var(--flama); border-radius: 2px;
}
.dk-nav__hamburguesa span:nth-child(1) { top: 15px; }
.dk-nav__hamburguesa span:nth-child(2) { top: 21px; }
.dk-nav__hamburguesa span:nth-child(3) { top: 27px; }

/* --------------------------------------------------------------- hero */
.dk-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.dk-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dk-hero__velo {
	position: absolute; inset: 0;
	background:
		linear-gradient(to bottom, rgb(11 9 8 / .7) 0%, rgb(11 9 8 / .25) 40%, var(--tinta) 100%),
		radial-gradient(120% 80% at 20% 60%, rgb(11 9 8 / .82) 0%, transparent 62%);
}
.dk-hero__copy { position: relative; padding-bottom: clamp(3rem, 10vh, 7rem); width: 100%; }
.dk-hero__rotulo { color: var(--tiza); text-shadow: 0 2px 14px rgb(0 0 0 / .9); line-height: 1.5; }
.dk-hero__rotulo strong { color: var(--flama); font-weight: 700; }

/* Titular en BDSans, por la revisión. Se probó en Regular —que era lo más
   cercano al «medium» que se pidió— y quedaba demasiado fina para un titular
   de 150 px: va en Black. Ojo, es el único otro peso que hay, y `700` cae en
   ese mismo archivo. */
.dk-hero__titulo {
	font-family: var(--fiesta); font-weight: 900; line-height: 0.94; letter-spacing: -0.02em;
	font-size: clamp(3rem, 10.5vw, 9.5rem); margin: 0; max-width: 14ch;
}
.dk-hero__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }

/* ------------------------------------------------- revelado por líneas */
.dk-linea-marco { display: block; overflow: hidden; padding-bottom: 0.06em; }
.dk-linea {
	display: block;
	transform: translateY(112%);
	transition: transform 1s var(--curva);
}
/* Se observa el contenedor, nunca la línea: un elemento recortado por
   overflow:hidden no intersecta y el revelado no dispararía jamás. */
.dk-rev-lineas.dk-visible .dk-linea { transform: translateY(0); }

[data-rev] {
	opacity: 0; transform: translateY(26px); filter: blur(8px);
	transition: opacity .9s var(--curva), transform 1s var(--curva), filter .9s var(--curva);
}
[data-rev].dk-visible { opacity: 1; transform: none; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
	.dk-linea { transform: none !important; }
	[data-rev] { opacity: 1 !important; transform: none !important; filter: none !important; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	html { scroll-behavior: auto; }
}

/* ----------------------------------------------------- tarjeta de caso */
/* La grilla del home está exenta de la regla de una pantalla. El trabajo es lo
   que la gente viene a ver: con seis casos y el destacado a doble altura la
   sección mide más de una pantalla, y así se queda. */
.dk-grilla-casos {
	display: grid; gap: 14px; margin-top: 3.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .dk-grilla-casos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
	.dk-grilla-casos { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(240px, auto); }
	.dk-caso { grid-column: span 4; }
	.dk-caso--lg { grid-column: span 8; grid-row: span 2; }
}

.dk-caso { position: relative; }
.dk-caso__link {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	height: 100%; min-height: 340px; overflow: hidden;
	border: 1px solid var(--linea); border-radius: 16px; background: var(--superficie);
	transition: border-color .5s;
}
.dk-caso--lg .dk-caso__link { min-height: 360px; }
@media (min-width: 640px) {
	.dk-caso__link { min-height: 340px; }
	.dk-caso--lg .dk-caso__link { min-height: 340px; }
}
.dk-caso__link:hover { border-color: rgb(255 61 20 / 0.45); }

.dk-caso__foto { position: absolute; inset: -6% 0; display: block; }
.dk-caso__img {
	width: 100%; height: 100%; object-fit: cover;
	filter: brightness(.78) saturate(.85);
	transition: filter 1.1s var(--curva), scale 1.1s var(--curva);
}
.dk-caso__link:hover .dk-caso__img { filter: brightness(1) saturate(1); scale: 1.06; }
.dk-caso__sinfoto { position: absolute; inset: 0; background: linear-gradient(140deg, #1a1615, #0e0c0b); }

.dk-caso__velo {
	position: absolute; inset: 0;
	background: linear-gradient(to top, var(--tinta) 0%, rgb(11 9 8 / .45) 46%, transparent 100%);
}
.dk-caso__brillo {
	position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
	background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), rgb(255 61 20 / .22), transparent 62%);
}
.dk-caso__link:hover .dk-caso__brillo { opacity: 1; }

.dk-caso__esquinas { position: absolute; inset: 12px; opacity: 0; transition: opacity .5s; }
.dk-caso__link:hover .dk-caso__esquinas { opacity: 1; }
.dk-caso__esquinas i { position: absolute; width: 20px; height: 20px; border: 0 solid var(--flama); }
.dk-caso__esquinas i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.dk-caso__esquinas i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.dk-caso__esquinas i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.dk-caso__esquinas i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.dk-caso__alto {
	position: absolute; inset: 0 0 auto; padding: 20px;
	display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.dk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-chip {
	border: 1px solid rgb(255 255 255 / .15); background: rgb(11 9 8 / .55);
	backdrop-filter: blur(4px); border-radius: 99px; padding: 4px 10px;
	font-size: 0.62rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
	color: rgb(245 242 238 / .85);
}
.dk-chip--tenue { text-transform: none; letter-spacing: .08em; color: rgb(245 242 238 / .7); }

.dk-caso__flecha {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px;
	background: var(--flama-honda); color: #fff; opacity: 0; transform: translateY(-8px);
	transition: opacity .5s var(--curva), transform .5s var(--curva);
}
.dk-caso__link:hover .dk-caso__flecha { opacity: 1; transform: none; }

.dk-caso__texto { position: relative; padding: 20px 20px 24px; }
.dk-caso__marca { display: flex; align-items: center; gap: 10px; }
.dk-caso__marca img { max-height: 20px; max-width: 104px; width: auto; object-fit: contain; opacity: .75; }
.dk-sep { width: 1px; height: 14px; background: rgb(255 255 255 / .2); }
.dk-caso__marca .dk-eyebrow { margin: 0; color: var(--flama); }

.dk-caso__titulo {
	display: block; margin-top: 8px; font-family: var(--serif); font-weight: 700;
	font-size: clamp(1.35rem, 2.2vw, 2.2rem); line-height: 1.05;
}
.dk-caso__meta { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--ceniza); }

.dk-caso__cifras { display: flex; flex-wrap: wrap; gap: 8px 24px; border-top: 1px solid rgb(255 255 255 / .1); padding-top: 12px; margin-top: 12px; }
.dk-cifra { display: block; }
.dk-cifra__valor { display: block; font-weight: 800; font-size: 1.35rem; line-height: 1; color: var(--flama); }
.dk-cifra__label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	max-width: 16ch; margin-top: 4px; font-size: 0.66rem; line-height: 1.35; color: var(--ceniza); }

/* En táctil no hay hover: las cifras van siempre visibles. */
.dk-caso__panel { display: none; }
@media (min-width: 768px) and (hover: hover) {
	.dk-caso__cifras--tactil { display: none; }
	.dk-caso__panel {
		display: block; overflow: hidden; max-height: 0; opacity: 0;
		transition: max-height .55s var(--curva), opacity .45s var(--curva);
	}
	.dk-caso__link:hover .dk-caso__panel { max-height: 260px; opacity: 1; }
}
.dk-caso__resumen { display: block; padding-top: 12px; max-width: 46ch; font-size: 0.86rem; line-height: 1.55; color: rgb(245 242 238 / .8); }

.dk-caso__barra {
	position: absolute; inset: auto 0 0; height: 3px; background: var(--flama-honda);
	transform: scaleX(0); transform-origin: left; transition: transform .7s var(--curva);
}
.dk-caso__link:hover .dk-caso__barra { transform: scaleX(1); }

/* ------------------------------------------------ catálogo de formatos */
.dk-catalogo { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .dk-catalogo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dk-catalogo { grid-template-columns: repeat(3, 1fr); } }

.dk-formato {
	display: flex; align-items: center; gap: 16px; padding: 12px;
	border: 1px solid var(--linea); border-radius: 12px; background: rgb(20 17 16 / .7);
	transition: border-color .4s, background-color .4s;
}
.dk-formato:hover { border-color: rgb(255 61 20 / .45); background: #181413; }
.dk-formato__foto { width: 58px; height: 62px; flex: none; border-radius: 8px; overflow: hidden; background: #1a1615; }
.dk-formato__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--curva); }
.dk-formato:hover .dk-formato__foto img { scale: 1.1; }
.dk-formato__texto { flex: 1; min-width: 0; }
.dk-formato__nombre { display: block; font-weight: 600; font-size: 0.98rem; transition: color .3s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-formato:hover .dk-formato__nombre { color: var(--flama); }
.dk-formato__genero { display: block; margin-top: 2px; font-size: 0.74rem; line-height: 1.35; color: var(--ceniza); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-formato__cifra { flex: none; text-align: right; }
.dk-formato__valor { display: block; font-weight: 800; font-size: 1.15rem; line-height: 1; color: var(--flama); }
.dk-formato__unidad { display: block; margin-top: 4px; font-size: 0.6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ceniza); }

/* --------------------------------------------------------- caso solo */
.dk-caso-single__hero { position: relative; min-height: 70svh; display: flex; align-items: flex-end; overflow: hidden; }
.dk-caso-single__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dk-caso-single__velo { position: absolute; inset: 0; background: linear-gradient(to top, var(--tinta) 5%, rgb(11 9 8 / .35) 60%, rgb(11 9 8 / .55) 100%); }
.dk-caso-single__intro { position: relative; padding-bottom: clamp(2rem, 6vh, 4rem); width: 100%; }
.dk-caso-single__logo { height: 30px; width: auto; margin-bottom: 1.2rem; opacity: .85; }

.dk-ficha {
	display: grid; gap: 20px; margin: 0; padding: 2rem 0;
	border-block: 1px solid var(--linea);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .dk-ficha { grid-template-columns: repeat(6, 1fr); } }
.dk-ficha dt { margin: 0 0 6px; color: var(--ceniza); }
.dk-ficha dd { margin: 0; font-size: 0.95rem; }

.dk-caso-single__cuerpo { display: grid; gap: 40px; padding: clamp(2.5rem, 6vw, 5rem) 0; }
@media (min-width: 1024px) { .dk-caso-single__cuerpo { grid-template-columns: 1fr 1fr; gap: 64px; } }

.dk-resultados { padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.dk-resultados__grid { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .dk-resultados__grid { grid-template-columns: repeat(3, 1fr); } }
.dk-resultado { background: #111; padding: 28px 24px; }
.dk-resultado__valor { display: block; font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: .9; }
.dk-resultado__label { display: block; margin-top: 12px; font-size: 0.8rem; line-height: 1.45; color: var(--ceniza); }

.dk-caso-single__extra { padding-bottom: 4rem; }
.dk-seccion--indice { padding-top: calc(var(--nav-alto) + 3rem); }

/* ---------------------------------------------------------------- pie */
.dk-pie { position: relative; overflow: hidden; border-top: 1px solid var(--linea); }
.dk-pie__cols {
	max-width: var(--ancho); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 20px;
	display: grid; gap: 32px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .dk-pie__cols { grid-template-columns: repeat(2, 1fr); padding-inline: 36px; } }
@media (min-width: 1024px) { .dk-pie__cols { grid-template-columns: repeat(4, 1fr); } }
.dk-pie__cols, .dk-pie__legal { text-align: center; }
/* Un <img> es inline: sin `display:block` el margin auto no lo centra. */
.dk-pie__cols img { display: block; margin-inline: auto; }
.dk-pie p { margin: 0 0 6px; color: var(--ceniza); font-size: 0.9rem; }
.dk-pie a:hover { color: var(--tiza); }
.dk-pie ul { list-style: none; margin: 0; padding: 0; }
.dk-pie li { margin-bottom: 6px; color: var(--ceniza); font-size: 0.9rem; }

.dk-pie__legal {
	max-width: var(--ancho); margin: 0 auto; padding: 20px;
	border-top: 1px solid var(--linea); font-size: 0.72rem; color: var(--ceniza);
}
@media (min-width: 768px) { .dk-pie__legal { padding-inline: 36px; } }

.dk-wordmark {
	display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem);
	padding: 0 20px clamp(1rem, 3vw, 2.5rem);
}
@media (min-width: 768px) { .dk-wordmark { padding-inline: 36px; } }
.dk-wordmark img { height: clamp(2rem, 5.2vw, 5rem); width: auto; flex: none; }
/* Es el mismo claim del hero: si va en otra fuente y en medio peso, el remate
   de la página no se lee como el mismo cierre. */
.dk-wordmark span {
	font-family: var(--fiesta); font-weight: 900; letter-spacing: -.02em; line-height: .95;
	/* En móvil el logo, el aire y el texto tienen que caber en una línea: la
	   Black es más ancha que la Visby que había, así que el mínimo baja. */
	white-space: nowrap; font-size: clamp(1.05rem, 5.4vw, 5.7rem);
}

/* --------------------------------------------------------------- grano */
body.grain::after {
	content: ""; position: fixed; inset: -200%; z-index: 9999; pointer-events: none; opacity: .028;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: dk-grano 8s steps(10) infinite;
}
@keyframes dk-grano {
	0%,100% { transform: translate(0,0); }
	20% { transform: translate(-8%, 2%); }
	40% { transform: translate(-3%, 6%); }
	60% { transform: translate(7%, 0); }
	80% { transform: translate(-4%, -4%); }
}
@media (prefers-reduced-motion: reduce) { body.grain::after { animation: none; } }

/* ==========================================================================
   Secciones del home
   ========================================================================== */

.dk-h-gigante { font-size: clamp(2.6rem, 8vw, 7rem); }
.dk-flama { color: var(--flama); }
.dk-centrado-texto { margin-inline: auto; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Retícula y halo, los dos fondos que se repiten por todo el sitio */
.dk-reticula {
	position: absolute; inset: 0; pointer-events: none; opacity: .4;
	background-image:
		linear-gradient(to right, rgb(255 255 255 / .028) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(255 255 255 / .028) 1px, transparent 1px);
	background-size: 72px 72px;
}
.dk-calor {
	position: absolute; inset: auto 0 0; height: 66%; pointer-events: none; opacity: .4;
	background: radial-gradient(60% 55% at 50% 100%, rgb(255 61 20 / .28) 0%, rgb(255 61 20 / .07) 38%, transparent 72%);
}
.dk-calor--grande { inset: 0; height: 100%; opacity: .7; }
.dk-puntos {
	position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
	background-image: radial-gradient(circle at 1px 1px, #000 1px, transparent 0);
	background-size: 14px 14px;
}

/* --------------------------------------------------------- hero extra */
.dk-hero__marco { position: absolute; inset: 0; display: block; will-change: transform; }
.dk-hero__copy { will-change: transform, opacity; }
.dk-hero__rotulo { display: flex; align-items: center; gap: 14px; margin: 0 0 1.5rem; }
.dk-hero__rotulo .dk-eyebrow { margin: 0; text-shadow: 0 2px 14px rgb(0 0 0 / .9); }
.dk-asterisco {
	display: grid; place-items: center; width: 52px; height: 52px; flex: none;
	border-radius: 99px; background: var(--flama-honda); color: #fff;
}
.dk-asterisco svg { width: 24px; height: 24px; }
.dk-hero__baja {
	position: absolute; left: 50%; bottom: 20px; translate: -50% 0;
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 99px;
	border: 1px solid rgb(245 242 238 / .25); background: rgb(11 9 8 / .4);
	backdrop-filter: blur(8px); color: var(--flama);
	animation: dk-flota 2.1s ease-in-out infinite;
}
@keyframes dk-flota { 0%,100% { translate: -50% 0; } 50% { translate: -50% 9px; } }
@media (prefers-reduced-motion: reduce) { .dk-hero__baja { animation: none; } }

/* ------------------------------------------------------------- intro */
.dk-intro { position: relative; padding-bottom: 0; }
.dk-intro__caja { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .dk-intro__caja { grid-template-columns: 1fr 1fr; gap: 64px; } }
.dk-intro__foto { position: relative; border-radius: 16px; overflow: hidden; }
.dk-intro__foto img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; scale: 1.12; }
.dk-intro__ring { position: absolute; inset: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }

.dk-palabras .dk-palabra { transition: opacity .4s var(--curva); }
/* Seis líneas: pedido de la revisión. El ancho es lo que define el corte;
   26ch es el centro del rango que las da (24–28ch a 1440px). */
.dk-palabras { max-width: 26ch; }

.dk-sello {
	display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 2.5rem;
	border: 1px solid var(--linea); border-radius: 16px; background: rgb(255 255 255 / .03); padding: 20px;
}
.dk-sello__num { display: grid; place-items: center; padding: 0 8px 0 0; flex: none; color: var(--flama); }
.dk-sello__num > span { font-weight: 800; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; }
/* Ronda 2 (Iván): sube a BDSans, crece y se abre. Deshace a propósito las tres
   líneas que había pedido la ronda 1. */
.dk-sello p {
	margin: 0;
	max-width: 92ch;
	color: rgb(245 242 238 / .8);
	font-family: var(--fiesta);
	font-size: 1.42rem;
	line-height: 1.3;
	text-align: left;
}
.dk-sello strong { color: var(--tiza); }
.dk-sello em { font-family: var(--serif); font-style: normal; color: var(--flama); font-size: 1.12rem; }

/* ==========================================================================
   La carta de servicios
   ========================================================================== */

/* El índice: la carta completa de un vistazo, antes de leer ninguna ficha.
   Es lo que convierte la página en algo que se elige y no que se lee. */
.dk-carta-indice { padding-top: clamp(1rem, 3vw, 2rem); }
.dk-carta-indice__lista {
	display: grid; gap: 1px; list-style: none; margin: 0; padding: 0;
	background: var(--linea); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden;
}
@media (min-width: 760px) { .dk-carta-indice__lista { grid-template-columns: repeat(4, 1fr); } }

.dk-carta-indice__lista a {
	display: block; height: 100%; padding: 22px 20px 24px;
	background: var(--tinta); color: inherit; text-decoration: none;
	transition: background-color .35s var(--curva);
}
.dk-carta-indice__lista a:hover { background: #17120f; }
.dk-carta-indice__n {
	display: block; font-family: var(--fiesta); font-weight: 900; font-size: .72rem;
	letter-spacing: .14em; color: var(--flama);
}
.dk-carta-indice__titulo { display: block; margin-top: 10px; font-weight: 700; font-size: 1.12rem; line-height: 1.15; letter-spacing: -.02em; }
.dk-carta-indice__gancho { display: block; margin-top: 7px; font-size: .82rem; line-height: 1.45; color: var(--ceniza); }

/* ------------------------------------------------- la ficha de producto */
.dk-carta { position: relative; padding-block: clamp(1.4rem, 2.4vw, 2rem); }

.dk-producto {
	padding-block: clamp(1.2rem, 2vw, 1.5rem);
	scroll-margin-top: calc(var(--nav-alto) + 20px);
}
.dk-producto + .dk-producto { border-top: 1px solid var(--linea); }

.dk-producto__cab { display: flex; align-items: baseline; gap: clamp(12px, 1.6vw, 18px); }
.dk-producto__n {
	flex: none; font-family: var(--fiesta); font-weight: 900;
	font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1; color: rgb(255 61 20 / .45);
}
.dk-producto__titulo {
	margin: 0; font-family: var(--serif); font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.04; letter-spacing: -.02em;
}
.dk-producto__gancho {
	margin: .3rem 0 0; max-width: 46ch;
	font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.35; color: var(--flama); font-weight: 500;
}

.dk-producto__cuerpo { display: grid; gap: clamp(1.4rem, 2.6vw, 2.2rem); margin-top: clamp(1.1rem, 2vw, 1.6rem); }
/* El gráfico va a la derecha y ocupa algo menos que el texto: explica, no decora,
   pero la lectura empieza por las palabras. */
/* Dos columnas desde 760px, no desde 900.
   Un iPad vertical mide 768 y caía en el diseño apilado: la ficha se iba a 1,3
   pantallas justo en la tableta más común. A 760 cada columna queda en ~350px,
   que es más que la tarjeta más estrecha del home. */
@media (min-width: 760px) { .dk-producto__cuerpo { grid-template-columns: 1fr 1fr; align-items: start; } }

.dk-producto__bloque + .dk-producto__bloque { margin-top: 1.05rem; }
/* En escritorio el plegable no se nota: el rótulo es un rótulo y el contenido
   está siempre abierto. */
.dk-producto__plegable > summary { list-style: none; }
.dk-producto__plegable > summary::-webkit-details-marker { display: none; }
.dk-producto__rotulo {
	margin: 0 0 .3rem; font-family: var(--fiesta); font-weight: 900; font-size: .7rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--ceniza);
}
.dk-producto__texto p { margin: 0; max-width: 54ch; font-size: clamp(.92rem, 1.1vw, 1rem); line-height: 1.5; color: rgb(245 242 238 / .84); }

.dk-producto__entregables { list-style: none; margin: 0; padding: 0; }
.dk-producto__entregables li {
	position: relative; padding: 5px 0 5px 22px;
	font-size: .88rem; line-height: 1.4; color: rgb(245 242 238 / .84);
	border-bottom: 1px solid var(--linea);
}
.dk-producto__entregables li:first-child { border-top: 1px solid var(--linea); }
.dk-producto__entregables li::before {
	content: ""; position: absolute; left: 2px; top: 17px;
	width: 7px; height: 7px; border-radius: 2px; background: var(--flama);
}

/* --------------------------------------------------------- la prueba

   Ocupa la columna donde estaba el diagrama del servicio. Un número, qué mide,
   dos fotogramas del trabajo y su nombre: lo único de la ficha que no se puede
   decir de uno mismo. */
.dk-prueba {
	display: flex; flex-direction: column; padding: clamp(14px, 1.6vw, 18px);
	border: 1px solid rgb(255 61 20 / .32); border-radius: 16px;
	background: rgb(255 61 20 / .06);
	color: inherit; text-decoration: none;
	transition: background-color .35s var(--curva), border-color .35s var(--curva);
}
.dk-prueba:hover { background: rgb(255 61 20 / .12); border-color: rgb(255 61 20 / .6); }
/* Ocupa todo el alto de su columna: si se queda corta contra el texto, el hueco
   de al lado se lee como que falta algo. Los fotogramas se empujan al fondo y el
   número manda arriba. Va pegada a la derecha y con techo de ancho, igual que el
   diagrama que reemplaza, para que la lectura siga empezando por las palabras. */
@media (min-width: 760px) { .dk-prueba { align-self: stretch; max-width: 460px; margin-left: auto; } }

.dk-prueba__rot {
	display: block;
	font-family: var(--fiesta); font-weight: 900; font-size: .66rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--ceniza);
}
/* El número lleva `line-height` menor que uno, así que su caja va pegada al
   glifo: el hueco de arriba se ve más grande de lo que mide y el de abajo, más
   pequeño. Por eso el aire se reparte al revés de lo que dicen los números —
   poco arriba, más abajo— para que el texto no se lea montado sobre la cifra. */
.dk-prueba__cifra {
	display: block; margin-top: .2rem;
	font-family: var(--fiesta); font-weight: 900;
	font-size: clamp(2.6rem, 5.4vw, 4.2rem); line-height: .92; letter-spacing: -.02em;
	color: var(--flama);
}
.dk-prueba__label {
	display: block; margin-top: .7rem; max-width: 34ch;
	font-size: .92rem; line-height: 1.35; color: rgb(245 242 238 / .84);
}

/* Dos fotogramas del caso, uno al lado del otro. Recortados a apaisado: son la
   prueba de que el trabajo existe, no una galería.
   A 16/9 y no a 4/3 porque la prueba no es un caso fijo: la escoge el orden del
   panel, y hay casos cuyo texto de cifra ocupa dos líneas. Esos píxeles son el
   margen para que cambiar la prioridad no saque la ficha de la pantalla. */
.dk-prueba__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: clamp(.8rem, 1.2vw, 1rem); }
.dk-prueba__fotos img {
	display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;
	border-radius: 9px; background: #1a1615;
	transition: scale .6s var(--curva);
}
.dk-prueba:hover .dk-prueba__fotos img { scale: 1.03; }

.dk-prueba__caso {
	display: flex; align-items: center; gap: 7px; margin-top: .7rem;
	font-size: .76rem; color: var(--ceniza);
	transition: color .25s;
}
.dk-prueba:hover .dk-prueba__caso { color: var(--tiza); }


.dk-producto__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: clamp(1rem, 1.8vw, 1.4rem) 0 0; }
.dk-producto__otro { font-size: .8rem; color: var(--ceniza); text-decoration: none; border-bottom: 1px solid var(--linea); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.dk-producto__otro:hover { color: var(--tiza); border-color: var(--flama); }

/* «Qué cocinamos» es la sección con más contenido del home: titular, lede y
   cuatro tarjetas con mockup. Su titular baja un punto para que quepa. */
@media (min-width: 721px) {
	.dk-cocinamos .dk-h-gigante { font-size: clamp(2.2rem, 5vw, 4rem); }
	.dk-cocinamos .dk-lede { margin-top: .7rem; }
}

/* ------------------------------------------- «Qué cocinamos» en el home */
.dk-cocina-grid { display: grid; gap: 12px; margin-top: clamp(1.2rem, 2.4vw, 1.8rem); }
/* En un teléfono las cuatro tarjetas apiladas medían casi tres pantallas. Pasan
   a carrusel: se ve una entera y asoma la siguiente, que es lo que dice que hay
   cuatro sin obligar a bajar por todas. */
@media (max-width: 719px) {
	.dk-cocina-grid {
		grid-auto-flow: column; grid-auto-columns: 80%;
		overflow-x: auto; scroll-snap-type: x proximity;
		scroll-padding-inline: 20px; scrollbar-width: none;
		margin-inline: -20px; padding-inline: 20px;
	}
	.dk-cocina-grid::-webkit-scrollbar { display: none; }
	.dk-cocina-card { scroll-snap-align: start; }
}
@media (min-width: 720px)  { .dk-cocina-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .dk-cocina-grid { grid-template-columns: repeat(4, 1fr); } }

.dk-cocina-card {
	display: flex; flex-direction: column;
	padding: 16px; border: 1px solid var(--linea); border-radius: 16px;
	background: rgb(255 255 255 / .02); color: inherit; text-decoration: none;
	transition: background-color .35s var(--curva), border-color .35s var(--curva), translate .35s var(--curva);
}
.dk-cocina-card:hover { background: rgb(255 61 20 / .06); border-color: rgb(255 61 20 / .4); translate: 0 -4px; }
.dk-cocina-card__n { font-family: var(--fiesta); font-weight: 900; font-size: .72rem; letter-spacing: .14em; color: var(--flama); }
/* La misma prueba de /servicios/, en miniatura y sin fotos: en una tarjeta de
   un cuarto de ancho la imagen no se lee y el número sí. Va al fondo, pegada al
   enlace, para que las cuatro cifras queden a la misma altura aunque los ganchos
   ocupen una línea o dos. */
/* Mismo reparto que en la caja de /servicios/: menos aire encima del número y
   más entre el número y su texto. */
.dk-cocina-card__prueba { display: block; margin-top: auto; padding-top: 10px; }
.dk-cocina-card__cifra {
	display: block; font-family: var(--fiesta); font-weight: 900;
	font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: .95; letter-spacing: -.02em;
	color: var(--tiza);
}
/* Reserva dos renglones aunque el texto ocupe uno.
   El bloque de la prueba se ancla abajo, así que un texto de dos líneas empujaba
   su cifra hacia arriba: «+15 pts» quedaba 16px más alta que las otras tres y
   las cuatro tarjetas se veían desalineadas. Con el alto fijo, los cuatro
   números caen en la misma línea. */
.dk-cocina-card__label {
	display: block; margin-top: 10px; min-height: 2.6em;
	font-size: .78rem; line-height: 1.3; color: var(--ceniza);
}
/* Dos renglones reservados, por lo mismo que el texto de la cifra: a 1280px
   «Cerveza Poker · Impulsar el consumo a través del humor» pasa a dos líneas y
   subía su cifra 14px respecto a las otras tres.
   El `+ 8px` es el relleno de 7px más un píxel que absorbe el redondeo: la caja
   es `border-box`, así que el `min-height` lo incluye, y sin sumarlo reservaba
   línea y media. Dos líneas es el techo real:
   la tarjeta más estrecha del sitio mide 273px, a 1200, y ahí ninguno pasa. */
.dk-cocina-card__caso {
	display: block; margin-top: 7px; padding-top: 7px; min-height: calc(2.6em + 8px);
	border-top: 1px solid var(--linea);
	font-size: .7rem; line-height: 1.3; color: rgb(245 242 238 / .5);
}
.dk-cocina-card:hover .dk-cocina-card__cifra { color: var(--flama); }
.dk-cocina-card__texto { display: block; margin-top: 12px; }
.dk-cocina-card__titulo { display: block; font-weight: 700; font-size: 1rem; line-height: 1.15; letter-spacing: -.02em; }
.dk-cocina-card__gancho { display: block; margin-top: 5px; font-size: .8rem; line-height: 1.4; color: var(--ceniza); }
.dk-cocina-card__mas {
	display: inline-flex; align-items: center; gap: 7px; margin-top: 11px;
	font-family: var(--fiesta); font-weight: 900; font-size: .66rem;
	letter-spacing: .14em; text-transform: uppercase; color: var(--tiza);
}
.dk-cocina-card:hover .dk-cocina-card__mas { color: var(--flama); }

/* ==========================================================================
   El caso como pieza audiovisual: reproductor y lista de piezas
   ========================================================================== */

/* Con video, el hero deja de ser una foto con texto encima: el reproductor no
   se tapa. El copy baja debajo. */
.dk-caso-single__hero--player { display: block; min-height: 0; padding-top: var(--nav-alto); }
/* El marco sostiene la proporción, así que da igual que dentro haya un <video>
   o el <iframe> de Vimeo: al cambiar de pieza la página no da un salto. */
.dk-caso-single__marco {
	display: block; width: 100%; aspect-ratio: 16/9;
	background: #000; overflow: hidden;
}
@media (min-width: 1024px) {
	.dk-caso-single__marco { max-width: var(--ancho); margin: 0 auto; border-radius: 14px; }
}
.dk-caso-single__video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.dk-caso-single__intro--bajo { position: static; padding-top: clamp(1.4rem, 3vw, 2.4rem); }

/* --------------------------------------------------------- las piezas */
.dk-piezas { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.dk-piezas__titulo {
	margin: 0 0 .9rem;
	font-family: var(--fiesta); font-weight: 900; font-size: .72rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--ceniza);
}
.dk-piezas__lista {
	display: flex; gap: 12px; list-style: none; margin: 0; padding: 0 0 8px;
	overflow-x: auto; scrollbar-width: none;
}
.dk-piezas__lista::-webkit-scrollbar { display: none; }

.dk-pieza {
	display: block; width: clamp(170px, 20vw, 230px); flex: none;
	padding: 0; border: 0; background: none; color: inherit;
	cursor: pointer; text-align: left; font-family: inherit;
}
.dk-pieza__foto {
	position: relative; display: block; aspect-ratio: 16/9; overflow: hidden;
	border-radius: 9px; border: 1px solid var(--linea); background: var(--superficie);
	transition: border-color .3s;
}
.dk-pieza__foto img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .72; transition: opacity .3s; }
.dk-pieza:hover .dk-pieza__foto img, .dk-pieza--activa .dk-pieza__foto img { opacity: 1; }
.dk-pieza--activa .dk-pieza__foto { border-color: var(--flama); }

.dk-pieza__play {
	position: absolute; inset: 0; display: grid; place-items: center;
	color: #fff; opacity: 0; transition: opacity .3s;
}
.dk-pieza:hover .dk-pieza__play { opacity: 1; }
.dk-pieza--activa .dk-pieza__play { opacity: 1; color: var(--flama); }

.dk-pieza__nombre {
	display: block; margin-top: 8px; font-size: .82rem; line-height: 1.3;
	color: var(--ceniza);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dk-pieza--activa .dk-pieza__nombre { color: var(--tiza); font-weight: 600; }

/* -------------------------------- los ejemplos de cada servicio */
/* Reusan el póster de la parrilla, pero en rejilla: aquí no hay fila que
   desplazar, son cuatro y se ven los cuatro. */
.dk-producto__ejemplos { margin-top: clamp(.9rem, 1.4vw, 1.1rem); }
.dk-ejemplos {
	display: grid; gap: 10px; list-style: none; margin: .7rem 0 0; padding: 0;
	grid-template-columns: repeat(2, 1fr);
}
/* Entre 760 y 899 la parrilla de ejemplos caía en dos columnas y los tres
   pósters se partían en dos filas: 475px en vez de 250, y la ficha se pasaba de
   la pantalla en un iPad vertical. Son tres pósters, así que van en tres. */
@media (min-width: 760px) and (max-width: 899px) { .dk-ejemplos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .dk-ejemplos { grid-template-columns: repeat(4, 1fr); } }
.dk-ejemplos .dk-poster { width: auto; }
/* Las cajitas de ejemplo son prueba, no portada: a 16/10 la ficha entera se
   pasaba de pantalla en escritorio. Más apaisadas caben y siguen legibles. */
.dk-ejemplos .dk-poster__foto { aspect-ratio: 16 / 9; }
.dk-ejemplos .dk-poster__meta { display: none; }
.dk-ejemplos .dk-poster__pie { padding-top: 8px; }
.dk-ejemplos .dk-poster__titulo { font-size: .88rem; }



/* ------------------------------------------------- cinta de clientes */
.dk-cinta-clientes { position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); border-block: 1px solid var(--linea); background: rgb(16 14 13 / .6); padding: 18px 0; overflow: hidden; }
.dk-cinta { display: flex; gap: 64px; width: max-content; }
.dk-cinta__pista { display: flex; align-items: center; gap: 64px; animation: dk-cinta var(--dk-dur, 52s) linear infinite; }
@keyframes dk-cinta { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 64px)); } }
.dk-cinta-clientes:hover .dk-cinta__pista { animation-play-state: paused; }
/* Caja de tamaño fijo: si sólo se limitara la altura, los logos cuadrados
   (Doritos, FAB) quedarían diminutos al lado de los apaisados. */
.dk-cinta__logo { display: flex; align-items: center; justify-content: center; width: 112px; height: 40px; flex: none; }
@media (min-width: 768px) { .dk-cinta__logo { width: 136px; height: 48px; } }
.dk-cinta__logo img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: .5; filter: grayscale(1); transition: opacity .4s, filter .4s; }
.dk-cinta__logo img:hover { opacity: 1; filter: grayscale(0); }
.dk-cinta__difuminado { position: absolute; inset-block: 0; width: 96px; pointer-events: none; }
.dk-cinta__difuminado--izq { left: 0; background: linear-gradient(to right, var(--tinta), transparent); }
.dk-cinta__difuminado--der { right: 0; background: linear-gradient(to left, var(--tinta), transparent); }
@media (min-width: 768px) { .dk-cinta__difuminado { width: 176px; } }
/* Ronda 2 (Iván): deja de ser un rótulo pequeño y pasa a línea grande. El
   interletrado de .dk-eyebrow (0.22em) está calibrado para 11 px; a 30 px
   abre tanto que se deshace la palabra, así que se cierra. */
.dk-intro__pie {
	padding-top: 20px;
	padding-bottom: clamp(1.4rem, 3vw, 2.2rem);
	margin: 0 auto;
	color: var(--ceniza);
	text-align: center;
	font-family: var(--fiesta);
	font-size: clamp(1.15rem, 2.2vw, 1.9rem);
	font-weight: 900;
	letter-spacing: 0.02em;
	line-height: 1.2;
	max-width: 100%;
}
@media (prefers-reduced-motion: reduce) { .dk-cinta__pista { animation: none; } }

/* -------------------------------------------------------- manifiesto */
.dk-manif__uno { position: relative; overflow: hidden; }
.dk-manif__caja { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .dk-manif__caja { grid-template-columns: 5fr 7fr; gap: 64px; } }
.dk-manif__foto { border-radius: 18px; overflow: hidden; }
.dk-manif__foto img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; scale: 1.14; }

.dk-manif__dos { position: relative; display: flex; align-items: center; min-height: 74svh; overflow: hidden; padding: clamp(3rem, 7vw, 6rem) 0; }
.dk-manif__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dk-manif__velo { position: absolute; inset: 0; background: linear-gradient(to right, var(--tinta), rgb(11 9 8 / .55) 55%, rgb(11 9 8 / .25)); }
.dk-manif__dos-copy { position: relative; }
@media (min-width: 1024px) { .dk-manif__dos-copy { max-width: 50%; margin-left: auto; } }

.dk-panel-naranja {
	display: grid; overflow: hidden; border-radius: 22px;
	background: linear-gradient(135deg, var(--flama), #ff4a1f 45%, var(--flama-honda));
}
@media (min-width: 1024px) { .dk-panel-naranja { grid-template-columns: 5fr 7fr; } }
.dk-panel-naranja--crew { grid-template-columns: 1fr; border-radius: 26px; }
@media (min-width: 1024px) { .dk-panel-naranja--crew { grid-template-columns: 1fr 1fr; } }
.dk-panel-naranja__texto {
	position: relative; display: flex; flex-direction: column; justify-content: center;
	padding: clamp(1.75rem, 4vw, 3.5rem);
	clip-path: inset(0 100% 0 0); transition: clip-path .62s var(--curva);
}
.dk-panel-naranja__texto.dk-visible, .dk-visible .dk-panel-naranja__texto { clip-path: inset(0 0 0 0); }
.dk-panel-naranja--crew .dk-panel-naranja__texto { clip-path: none; }
.dk-panel-naranja__texto h2 { color: #fff; }
/* Sobre naranja, el blanco al 88% da 2,7:1. La tinta oscura da 5,6:1 —
   y es además el par de los stickers de marca. */
.dk-panel-naranja__texto p { position: relative; max-width: 42ch; color: rgb(11 9 8 / .9); font-weight: 500; font-size: .97rem; line-height: 1.62; }
.dk-panel-naranja__texto p.dk-panel-naranja__cierre { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; margin-top: 1.4rem !important; color: var(--tinta) !important; }
.dk-panel-naranja__foto { position: relative; min-height: 300px; overflow: hidden; }
.dk-panel-naranja__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------- cinta velocidad */
.dk-velocidad { overflow: hidden; border-block: 1px solid var(--linea); padding: clamp(.7rem, 1.6vw, 1.4rem) 0; }
.dk-velocidad__pista { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.dk-velocidad__item {
	display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem);
	padding-right: clamp(1rem, 2.4vw, 2.4rem);
	font-family: var(--fiesta); font-weight: 900;
	letter-spacing: -.02em; font-size: clamp(1.7rem, 5.2vw, 4.6rem);
	color: rgb(245 242 238 / .88);
}
.dk-velocidad__punto { width: .38em; height: .38em; border-radius: 99px; background: var(--flama); flex: none; }


/* ------------------------------------------------- cabecera y datos */
.dk-cabecera { display: grid; gap: 24px; align-items: end; }
@media (min-width: 1024px) { .dk-cabecera { grid-template-columns: 1.4fr 1fr; gap: 48px; } }
.dk-lede--corto { max-width: 40ch; }

.dk-datos-formatos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.dk-datos-formatos > div { background: #111; padding: 24px; }
/* Etna es condensada: al cambiar de Visby a Etna hay que subir el cuerpo o
   las cifras encogen. */
.dk-dato__valor { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(2.6rem, 4.7vw, 3.8rem); line-height: .9; }
.dk-dato__label { display: block; margin-top: 8px; font-size: .78rem; line-height: 1.4; color: var(--ceniza); }

/* ------------------------------------------------- reconocimientos */
.dk-reconocimientos { display: grid; gap: 40px; margin-top: clamp(3.5rem, 8vw, 6.5rem); }
@media (min-width: 1024px) { .dk-reconocimientos { grid-template-columns: 5fr 7fr; gap: 64px; } }
.dk-sellos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; list-style: none; margin: 2rem 0 0; padding: 0; }
.dk-sellos img { height: 36px; width: auto; opacity: .55; transition: opacity .3s; }
.dk-sellos img:hover { opacity: 1; }

.dk-cifras-estudio { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.dk-cifra-grande { background: rgb(17 17 17 / .95); padding: 28px 24px; transition: background-color .5s; }
.dk-cifra-grande:hover { background: #171313; }
.dk-cifra-grande > span:first-child { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(3rem, 6.4vw, 5.2rem); line-height: .85; transition: color .5s; }
.dk-cifra-grande:hover > span:first-child { color: var(--flama); }
.dk-cifra-grande__label { display: block; margin-top: 20px; font-size: .8rem; line-height: 1.5; color: var(--ceniza); }

/* --------------------------------------------------- banda naranja */
.dk-banda-naranja { position: relative; overflow: hidden; background: var(--flama-honda); padding: 18px 24px; margin-top: clamp(1.4rem, 2.6vw, 2rem); }
/* Ronda 2 (Iván): crece. El tope de ancho baja de 68ch a 44ch porque `ch`
   escala con el cuerpo: a 1.47rem, 68ch se salía de la banda. */
.dk-banda-naranja p {
	position: relative; max-width: 44ch; margin: 0 auto; text-align: center;
	color: #fff; font-family: var(--fiesta); font-weight: 900;
	font-size: 1.47rem; line-height: 1.35;
}

/* ---------------------------------------------------------- brief */
.dk-brief { position: relative; overflow: hidden; text-align: center; padding-block: clamp(5rem, 11vw, 10rem); }
.dk-brief__caja { position: relative; }
.dk-brief .dk-eyebrow { display: block; }
.dk-brief__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 2.5rem; }
.dk-btn--grande { min-height: 62px; padding: 0 36px; font-size: .82rem; }
.dk-btn--tinta { background: var(--tinta); color: var(--tiza); }
.dk-btn--tinta:hover { background: #fff; color: var(--tinta); }

.dk-sticker { position: absolute; width: 96px; height: auto; pointer-events: none; display: none; }
@media (min-width: 1280px) { .dk-sticker { display: block; } }
/*
 * Colgados del canto de la caja, hacia fuera, a la altura del titular.
 *
 * El número sale de una cuenta, no de tantear: el sticker mide 128px y la caja
 * lleva 20px de relleno propio, así que -136px deja exactamente 28px de aire
 * entre el sticker y la primera letra. Como la caja está centrada, ese aire es
 * el mismo a 1280 que a 2560: lo que se mueve con el ancho es el hueco de
 * fuera, que sobra — el más estrecho tiene 267px y el sticker necesita 136.
 *
 * Van a distinta altura a propósito. A la misma parecen un par de paréntesis.
 */
.dk-sticker--izq { left: -136px; top: 26%; }
.dk-sticker--der { right: -136px; top: 44%; }

/* Vida propia de los stickers. Va en `translate`/`rotate`/`scale` y NO en
   `transform`, porque el parallax de motion.js escribe `transform` en línea y
   se pisarían: las propiedades sueltas se componen con él. */
@keyframes dk-rebote  { 0%, 100% { translate: 0 0; }    50% { translate: 0 -11px; } }
@keyframes dk-latido  { 0%, 100% { rotate: -5deg; scale: 1; } 50% { rotate: 5deg; scale: 1.07; } }

.dk-sticker--intro,
.dk-sticker--via,
.dk-sticker--reco   { animation: dk-rebote 2.6s ease-in-out infinite; }
.dk-sticker--cocina,
.dk-sticker--izq,
.dk-sticker--der,
.dk-sticker--pagehero,
.dk-sticker--paises,
.dk-sticker--donde  { animation: dk-latido 3.4s ease-in-out infinite; }
.dk-sticker--der    { animation-delay: -1.7s; }
/* Desfasados a propósito: tres stickers latiendo al mismo compás en una página
   se leen como un solo efecto y no como tres cosas pegadas. */
.dk-sticker--reco   { animation-delay: -0.9s; }
.dk-sticker--paises { animation-delay: -2.2s; }
.dk-sticker--donde  { animation-delay: -1.3s; }

@media (prefers-reduced-motion: reduce) {
	.dk-sticker--intro, .dk-sticker--cocina,
	.dk-sticker--izq, .dk-sticker--der,
	.dk-sticker--pagehero, .dk-sticker--reco,
	.dk-sticker--paises, .dk-sticker--via,
	.dk-sticker--donde { animation: none; }
}

/* ----------------------------------------------------------- crew */
.dk-crew { padding-bottom: clamp(4rem, 8vw, 7rem); }
.dk-panel-naranja__texto .dk-crew__mercados {
	font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 2rem);
	color: rgb(11 9 8 / .9); margin: 1.2rem 0 2rem; max-width: none;
}
.dk-panel-naranja--crew .dk-btn { align-self: flex-start; }

/* ==========================================================================
   Carrusel de formatos, catálogo y sobremesa
   ========================================================================== */

/* El margen de abajo es el carril de la botonera, que cuelga fuera de la pista.
   Tiene que ser MARGEN y no relleno: los teléfonos son absolutos con
   `height: 100%`, y un porcentaje de un elemento absoluto se mide contra la caja
   de relleno, así que con `padding-bottom` crecían ellos también y la botonera
   volvía a quedar encima. */
.dk-carrusel {
	position: relative; display: flex; align-items: center; justify-content: center;
	height: min(70svh, 610px); margin-top: 2.6rem; margin-bottom: 62px;
	perspective: 1600px; outline: none;
}
.dk-tel {
	position: absolute; display: block; width: min(74vw, 290px); height: 100%;
	border-radius: 30px; overflow: hidden; border: 1px solid var(--linea);
	background: var(--superficie); transform-style: preserve-3d;
	transform: translateX(var(--x, 0)) scale(var(--escala, 1)) rotateY(var(--giro, 0deg));
	opacity: var(--opa, 1); filter: brightness(var(--brillo, 1));
	transition: transform .85s var(--curva), opacity .85s var(--curva),
	            filter .85s var(--curva), border-color .5s;
}
.dk-tel--activo { border-color: rgb(255 61 20 / .7); box-shadow: 0 0 60px -6px rgb(255 61 20 / .55); }
.dk-tel img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--curva); }
/* El video ocupa el mismo hueco que la imagen y va debajo del velo y del rótulo.
   Sin `position: absolute` empujaría el texto fuera del teléfono. */
.dk-tel__video {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; object-fit: cover; border: 0; background: #000;
}
.dk-tel:hover img { scale: 1.05; }
.dk-tel__velo { position: absolute; inset: 0; background: linear-gradient(to top, var(--tinta), rgb(11 9 8 / .25) 55%, rgb(11 9 8 / .3)); }
.dk-tel__muesca { position: absolute; top: 12px; left: 50%; translate: -50% 0; width: 64px; height: 5px; border-radius: 99px; background: rgb(0 0 0 / .55); }
.dk-tel__texto { position: absolute; inset: auto 0 0; padding: 20px; text-align: left; }
/* En los que no están al aire el rótulo se atenúa: con siete teléfonos en fila,
   siete bloques de texto a plena fuerza compiten y no se lee ninguno. */
.dk-tel:not(.dk-tel--activo) .dk-tel__texto { opacity: .62; }
.dk-tel__texto .dk-eyebrow { margin: 0; }
.dk-tel__nombre { display: block; margin-top: 4px; font-weight: 800; font-size: 1.4rem; line-height: 1.05; letter-spacing: -.03em; }
.dk-tel__genero { display: block; margin-top: 6px; font-size: .72rem; line-height: 1.4; color: var(--ceniza); }
@media (prefers-reduced-motion: reduce) { .dk-tel { transition: none; } }

/* Cada pista lleva sus propios controles: con dos carruseles, una botonera
   suelta abajo no dice a cuál de los dos pertenece. */
/* Van DEBAJO de la pista, no encima del teléfono. Estaban en `bottom: 6px`
 * dentro del carrusel, justo sobre el pie del teléfono del centro, que es donde
 * viven el nombre del show y su cifra: la botonera tapaba la métrica.
 *
 * Y ya no se esconden: encima del contenido tenían que desaparecer para dejarlo
 * ver, pero fuera de él esconderlos sólo hace que nadie sepa que se puede pasar.
 * En un teléfono no hay hover y eran invisibles. */
.dk-carrusel__nav {
	position: absolute; z-index: 30; bottom: -62px; left: 50%; translate: -50% 0;
	display: flex; align-items: center; gap: 10px;
	padding: 6px; border-radius: 99px;
	background: rgb(11 9 8 / .72); border: 1px solid var(--linea);
	backdrop-filter: blur(8px);
}
.dk-nav-btn { width: 36px; height: 36px; }
.dk-carrusel__cuenta { width: 56px; text-align: center; font-size: .72rem; color: var(--ceniza); font-variant-numeric: tabular-nums; }
.dk-nav-btn {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 99px;
	border: 1px solid var(--linea); background: rgb(255 255 255 / .04); color: var(--tiza);
	cursor: pointer; transition: background-color .3s, border-color .3s, color .3s;
}
.dk-nav-btn:hover { border-color: var(--flama); background: var(--flama-honda); color: #fff; }

/* --------------------------------- el show que está «al aire» */
/* Sin archivos de video todavía (producción no los ha mandado), lo que vende el
   movimiento es esto: el teléfono del centro hace un zoom lentísimo y su barra
   avanza al ritmo del carrusel. Cuando lleguen los mp4 se cambia la <img> por un
   <video muted loop playsinline> y estas dos reglas se borran, nada más. */
.dk-tel--activo img { animation: dk-aire 7.2s ease-in-out infinite alternate; }
@keyframes dk-aire {
	from { scale: 1; }
	to   { scale: 1.075; }
}

.dk-tel__barra {
	position: absolute; left: 14px; right: 14px; bottom: 12px; height: 2px;
	border-radius: 99px; background: rgb(245 242 238 / .18);
	opacity: 0; transition: opacity .4s;
}
.dk-tel__barra i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--flama); }
.dk-tel--activo .dk-tel__barra { opacity: 1; }
/* 3,6s es el mismo PASO del temporizador en motion.js: si uno cambia, cambia el otro. */
.dk-tel--activo .dk-tel__barra i { animation: dk-avance 3.6s linear infinite; }
@keyframes dk-avance { from { width: 0; } to { width: 100%; } }

/* El texto del teléfono sube un poco para no chocar con la barra. */
.dk-tel__texto { padding-bottom: 26px; }
.dk-tel__cifra {
	display: block; margin-top: 8px;
	font-family: var(--fiesta); font-weight: 900; font-size: .8rem;
	letter-spacing: .04em; color: var(--flama);
}

@media (prefers-reduced-motion: reduce) {
	.dk-tel--activo img, .dk-tel--activo .dk-tel__barra i { animation: none; }
}

/* Dos líneas, como se pidió: con 197 caracteres eso sólo cabe a todo el ancho
   del contenedor, así que sale de la columna de la cabecera. */
.dk-lede--ancho { max-width: 104ch; margin-top: .8rem; }

.dk-catalogo__cab { margin-top: clamp(3rem, 7vw, 5.5rem); }
.dk-catalogo__cab .dk-lede { max-width: 54ch; margin-top: .5rem; font-size: .92rem; }

/* --------------------------------------------------------- stickers */
/* Los de intro y manifiesto colgaban por fuera del marco; la revisión los
   pidió encima de la foto. */
.dk-sticker--intro    { left: 16px; bottom: 16px; width: 120px; z-index: 2; }
.dk-sticker--manif    { right: 16px; top: 16px; width: 112px; z-index: 2; }
.dk-sticker--cocina   { right: 4%; top: 7%; width: 112px; }
.dk-sticker--crew     { left: 50%; bottom: 32px; translate: -50% 0; width: 80px; z-index: 2; }
.dk-sticker--carrusel { left: 7%; bottom: 8%; width: 112px; }
@media (max-width: 1279px) { .dk-sticker--cocina, .dk-sticker--carrusel { display: none; } }
.dk-manif__foto, .dk-intro__foto, .dk-panel-naranja--crew, .dk-cocinamos .dk-contenedor { position: relative; }
.dk-sticker--intro, .dk-sticker--manif, .dk-sticker--crew { display: block; }

/* ------------------------------------------------------- sobremesa */
.dk-sobremesa {
	display: grid; gap: 32px; align-items: center;
	padding-block: clamp(3rem, 7vw, 6rem);
}
@media (min-width: 1024px) { .dk-sobremesa { grid-template-columns: 5fr 7fr; gap: 56px; } }
.dk-sobremesa__form { display: flex; flex-wrap: wrap; gap: 10px; }
.dk-sobremesa__form input {
	flex: 1 1 240px; height: 58px; padding: 0 24px; border-radius: 99px;
	border: 1px solid var(--linea); background: #151212; color: var(--tiza);
	font-family: inherit; font-size: .95rem; outline: none; transition: border-color .3s;
}
.dk-sobremesa__form input:focus { border-color: var(--flama); }
.dk-sobremesa__form input::placeholder { color: rgb(138 129 123 / .6); }
.dk-sobremesa__form .dk-btn { height: 58px; }
.dk-sobremesa__aviso { flex: 1 0 100%; margin: 4px 0 0; padding-left: 8px; font-size: .8rem; min-height: 20px; }
.dk-sobremesa__aviso.dk-ok { color: #7fe0a6; }
.dk-sobremesa__aviso.dk-error { color: #ff8a70; }

.dk-reconocimientos__cta { margin-top: 2.2rem; }
.dk-btn--claro { background: var(--tiza); color: var(--tinta); }
.dk-btn--claro:hover { background: var(--flama-honda); color: #fff; }

/* Los stickers viven dentro de contenedores de foto, y reglas como
   `.dk-intro__foto img { width:100% }` los estiraban hasta tapar la imagen.
   `img.dk-sticker` iguala esa especificidad y, al ir después, gana. */
img.dk-sticker {
	position: absolute;
	width: 112px; height: auto;
	aspect-ratio: auto; object-fit: contain;
	scale: 1; max-width: none;
	pointer-events: none; z-index: 3;
	filter: drop-shadow(0 18px 40px rgb(0 0 0 / .55));
}
img.dk-sticker--intro    { left: 16px; bottom: 16px; width: 116px; }
img.dk-sticker--manif    { right: 14px; top: 16px; width: 108px; }
img.dk-sticker--cocina   { right: 3%; top: 6%; width: 108px; }
img.dk-sticker--crew     { left: 50%; bottom: 26px; translate: -50% 0; width: 84px; }
img.dk-sticker--carrusel { left: 7%; bottom: 8%; width: 108px; }
img.dk-sticker--izq      { left: -136px; top: 26%; bottom: auto; width: 128px; }
img.dk-sticker--der      { right: -136px; top: 44%; bottom: auto; width: 128px; }

/* Los de las páginas internas, del 21 de septiembre de 2026.
   Cuelgan del lado contrario al texto: el titular ocupa 16ch a la izquierda y
   el sticker se para en el aire que queda a la derecha, no encima de la letra.
 *
 * Un sticker es `position: absolute`, así que se cuelga del primer ancestro
 * posicionado. Sin `.dk-estudio-reco` el de reconocimientos no encontraba
 * ninguno, se colgaba de la página entera y aparecía encima del menú. */
.dk-estudio-reco { position: relative; }

img.dk-sticker--pagehero { right: 6%; bottom: 14%; width: 132px; }
img.dk-sticker--reco     { right: 2%; top: 8%; width: 112px; }
img.dk-sticker--paises   { right: 4%; top: 16%; width: 120px; }
img.dk-sticker--via      { right: 18px; top: -26px; width: 92px; }
/* A la derecha: a la izquierda se paraba encima del rótulo «Dónde estamos».
   El titular ocupa 22ch, así que ese lado está libre. */
img.dk-sticker--donde    { right: 6%; top: 18%; width: 116px; }

@media (max-width: 1279px) {
	img.dk-sticker--cocina, img.dk-sticker--carrusel,
	img.dk-sticker--izq, img.dk-sticker--der,
	img.dk-sticker--pagehero, img.dk-sticker--reco,
	img.dk-sticker--paises, img.dk-sticker--via,
	img.dk-sticker--donde { display: none; }
}

/* ==========================================================================
   Cortina, avance, cursor y menú
   ========================================================================== */

/* --------------------------------------------------- cortina de entrada */
body.dk-cargando { overflow: hidden; }

.dk-cortina {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center;
	background: var(--tinta);
	transition: transform 1s cubic-bezier(.76,0,.24,1);
}
.dk-cortina--sube { transform: translateY(-100%); }
.dk-cortina__calor {
	position: absolute; inset: 0; opacity: .6;
	background: radial-gradient(60% 55% at 50% 100%, rgb(255 61 20 / .28) 0%, rgb(255 61 20 / .07) 38%, transparent 72%);
}
.dk-cortina__texto {
	position: relative; display: flex; align-items: baseline; gap: .28em;
	margin: 0; padding: 0 24px;
	font-family: var(--fiesta); font-weight: 900; letter-spacing: -.02em;
	font-size: clamp(2.2rem, 7vw, 5.5rem); line-height: .9;
}
.dk-cortina .dk-linea { transform: translateY(110%); transition: transform .9s var(--curva); }
.dk-cortina--entra .dk-linea { transform: translateY(0); }
.dk-cortina--entra .dk-linea-marco:nth-child(2) .dk-linea { transition-delay: .11s; }
.dk-cortina--entra .dk-linea-marco:nth-child(3) .dk-linea { transition-delay: .22s; }
.dk-cortina__barra {
	position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
	background: var(--flama); transition: width 1.7s cubic-bezier(.3,.8,.4,1);
}
.dk-cortina--entra .dk-cortina__barra { width: 100%; }

/* ---------------------------------------------------- avance de lectura */
.dk-progreso {
	position: fixed; inset: 0 0 auto; z-index: 100; height: 2px;
	transform: scaleX(0); transform-origin: left;
	background: linear-gradient(to right, var(--flama), #ff8a5c, var(--flama));
	box-shadow: 0 0 18px rgb(255 61 20 / .7);
}

/* --------------------------------------------------------------- cursor */
.dk-cursor {
	position: fixed; left: 0; top: 0; z-index: 95;
	width: 14px; height: 14px; margin: -7px 0 0 -7px;
	border-radius: 99px; background: rgb(245 242 238 / .9);
	border: 1px solid transparent; pointer-events: none;
	display: none;
	transition: width .3s var(--curva), height .3s var(--curva), margin .3s var(--curva),
	            background-color .3s, border-color .3s;
}
@media (pointer: fine) { .dk-cursor { display: grid; place-items: center; } }
.dk-cursor--activo {
	width: 46px; height: 46px; margin: -23px 0 0 -23px;
	background: rgb(255 61 20 / .14); border-color: rgb(255 61 20 / .9);
}
.dk-cursor--etiqueta {
	width: 92px; height: 92px; margin: -46px 0 0 -46px;
	background: var(--flama); border-color: var(--flama);
}
.dk-cursor span {
	font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: #fff; text-align: center; line-height: 1.15; opacity: 0; transition: opacity .2s;
}
.dk-cursor--etiqueta span { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dk-cursor { display: none; } }

/* ------------------------------------------------ menú pantalla completa */
body.dk-menu-abierto { overflow: hidden; }

.dk-menu-full {
	position: fixed; inset: 0; z-index: 89;
	display: flex; flex-direction: column; justify-content: center;
	background: var(--tinta);
	clip-path: inset(0 0 100% 0);
	transition: clip-path .75s cubic-bezier(.76,0,.24,1);
}
.dk-menu-full--abierto { clip-path: inset(0 0 0 0); }
.dk-menu-full[hidden] { display: none; }
.dk-menu-full__nav { position: relative; width: 100%; padding-top: var(--nav-alto); }

.dk-menu-full__item {
	display: flex; align-items: baseline; gap: 20px;
	padding: clamp(.5rem, 1.6vw, 1.1rem) 0;
	border-bottom: 1px solid var(--linea);
}
@media (min-width: 768px) { .dk-menu-full__item { gap: 36px; } }
.dk-menu-full__n { width: 32px; flex: none; font-size: .66rem; color: rgb(255 61 20 / .7); }
.dk-menu-full__item .dk-linea {
	font-family: var(--display); font-weight: 800; letter-spacing: -.035em;
	font-size: clamp(1.9rem, 6.2vw, 4.6rem); line-height: .95;
	transform: translateY(110%); transition: transform .72s var(--curva), color .3s;
}
.dk-menu-full--abierto .dk-menu-full__item .dk-linea { transform: translateY(0); }
.dk-menu-full__item:hover .dk-linea { color: var(--flama); }
/* el escalonado de las líneas del menú */
.dk-menu-full--abierto .dk-menu-full__item:nth-child(1) .dk-linea { transition-delay: .22s; }
.dk-menu-full--abierto .dk-menu-full__item:nth-child(2) .dk-linea { transition-delay: .275s; }
.dk-menu-full--abierto .dk-menu-full__item:nth-child(3) .dk-linea { transition-delay: .33s; }
.dk-menu-full--abierto .dk-menu-full__item:nth-child(4) .dk-linea { transition-delay: .385s; }
.dk-menu-full--abierto .dk-menu-full__item:nth-child(5) .dk-linea { transition-delay: .44s; }

.dk-menu-full__pie {
	display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 2.2rem;
	font-size: .88rem; color: var(--ceniza);
	opacity: 0; transform: translateY(20px);
	transition: opacity .6s var(--curva) .6s, transform .6s var(--curva) .6s;
}
.dk-menu-full--abierto .dk-menu-full__pie { opacity: 1; transform: none; }
.dk-menu-full__pie a:hover { color: var(--flama); }

/* La hamburguesa se vuelve equis */
.dk-nav__hamburguesa span { transition: transform .34s var(--curva), opacity .2s; }
.dk-nav__hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.dk-nav__hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dk-nav__hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------- inclinación 3D de las tarjetas */
.dk-caso { perspective: 1200px; }
.dk-caso__link { transition: transform .3s var(--curva), border-color .5s; transform-style: preserve-3d; }

[data-magnetico] { will-change: transform; }

/* ==========================================================================
   Páginas internas
   ========================================================================== */

.dk-pagehero {
	position: relative; overflow: hidden; background: var(--tinta);
	padding: calc(var(--nav-alto) + clamp(3.5rem, 8vw, 7rem)) 0 clamp(2.5rem, 5vw, 4.5rem);
}
.dk-pagehero__halo {
	position: absolute; left: 50%; top: -33%; width: 110vw; height: 70vh;
	translate: -50% 0; opacity: .7; pointer-events: none;
	background: radial-gradient(45% 50% at 50% 50%, rgb(255 61 20 / .16) 0%, transparent 70%);
}
/* El titular de una página interna habla igual que el del home.
   Hasta el 21 de septiembre de 2026 iba en el serif Etna: la portada decía
   «Historias bien servidas.» en la sans ancha de marca y la página de al lado
   abría en serif, así que eran dos voces para lo mismo. El serif se queda donde
   siempre estuvo, en los titulares de sección. */
.dk-pagehero__titulo {
	font-family: var(--fiesta); font-weight: 900;
	line-height: .94; letter-spacing: -.02em;
	max-width: 16ch; font-size: clamp(2.4rem, 7.4vw, 6.4rem);
}
.dk-pagehero .dk-lede { margin-top: 1.6rem; }

.dk-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 1.8rem; font-size: .72rem; color: var(--ceniza); }
.dk-migas a:hover { color: var(--flama); }
.dk-migas span[aria-hidden] { opacity: .4; }
.dk-migas__actual { color: rgb(245 242 238 / .8); }

/* ------------------------------------------------------- servicios */
.dk-servicios-lista { position: relative; background: var(--tinta-2); }
	position: relative; display: grid; gap: 32px; align-items: center;
	padding: clamp(3rem, 7vw, 6rem) 0; border-bottom: 1px solid var(--linea);
}

.dk-entregables { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 10px; }
.dk-entregables li { position: relative; padding-left: 22px; font-size: .92rem; color: #cdc5bf; }
.dk-entregables li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 8px; height: 8px; border-radius: 99px; background: var(--flama);
}

/* ---------------------------------------------------------- método */
.dk-metodo { position: relative; overflow: hidden; }
.dk-metodo__lista { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.dk-metodo__lista li { display: flex; gap: 24px; align-items: flex-start; background: #111; padding: 24px; transition: background-color .4s; }
.dk-metodo__lista li:hover { background: #171313; }
.dk-metodo__letra { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 99px; background: var(--flama-honda); color: #fff; font-weight: 800; }
.dk-metodo__titulo { display: block; font-weight: 600; font-size: 1.05rem; }
.dk-metodo__desc { display: block; margin-top: 6px; max-width: 62ch; font-size: .92rem; line-height: 1.6; color: var(--ceniza); }

/* --------------------------------------------------------- impacto */
.dk-impacto__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 3rem; background: var(--linea); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
@media (min-width: 1024px) { .dk-impacto__grid { grid-template-columns: repeat(4, 1fr); } }
.dk-impacto__dato { background: #111; padding: 28px 24px; }
.dk-impacto__n { display: block; font-weight: 800; font-size: clamp(2rem, 4vw, 3.2rem); line-height: .9; color: var(--flama); }
.dk-impacto__d { display: block; margin-top: 14px; font-size: .84rem; line-height: 1.5; color: #cdc5bf; }
.dk-impacto__f { display: block; margin-top: 10px; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ceniza); }

/* -------------------------------------------------------- oficinas */
.dk-oficinas { position: relative; overflow: hidden; }
.dk-oficinas__lista { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
@media (min-width: 768px) { .dk-oficinas__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .dk-oficinas__lista { grid-template-columns: repeat(5, 1fr); } }
.dk-oficina { position: relative; background: #111; padding: 26px 22px; transition: background-color .4s; }
.dk-oficina:hover { background: #171313; }
.dk-oficina--sede { background: #151111; }
.dk-oficina__ciudad { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.35rem; }
.dk-oficina__pais { display: block; margin-top: 4px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--flama); }
.dk-oficina__dir { display: block; margin-top: 10px; font-size: .82rem; color: var(--ceniza); }
.dk-oficina__sello { position: absolute; top: 18px; right: 18px; }
.dk-oficinas__lista--contacto { margin-top: 2.2rem; }

/* La sección «dónde estamos» de /contacto/ era una tabla de ciudades suelta en
   mitad de la página, sin rótulo que dijera qué era. Ahora abre con su titular. */
.dk-contacto__donde-cab { max-width: 22ch; }
/* `.dk-seccion` es flex y centra, así que el contenedor se encogía al ancho de
   su contenido: la parrilla de ciudades medía 915px de los 1440 y quedaba
   flotando en el medio. */
.dk-contacto--donde .dk-contenedor,
.dk-oficinas .dk-contenedor { width: 100%; }

/* -------------------------------------------------------- contacto */
.dk-contacto { position: relative; overflow: hidden; }
.dk-contacto__caja { display: grid; gap: 32px; }
@media (min-width: 1024px) { .dk-contacto__caja { grid-template-columns: repeat(2, 1fr); gap: 56px; } }
.dk-contacto__via {
	position: relative; border: 1px solid var(--linea); border-radius: 18px;
	background: rgb(20 17 16 / .6); padding: clamp(1.5rem, 3vw, 2.5rem);
	transition: border-color .4s var(--curva), background-color .4s var(--curva);
}
.dk-contacto__via:hover { border-color: rgb(255 61 20 / .45); background: rgb(255 61 20 / .05); }
/* El calor entra por la esquina de arriba, del lado del sticker. Aparece con el
   puntero: en reposo la tarjeta es plana y la diferencia se nota. */
.dk-contacto__via::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	background: radial-gradient(60% 70% at 88% 0%, rgb(255 61 20 / .16), transparent 70%);
	opacity: 0; transition: opacity .45s var(--curva); pointer-events: none;
}
.dk-contacto__via:hover::after { opacity: 1; }
.dk-contacto__via > * { position: relative; z-index: 1; }
.dk-contacto__via .dk-btn { margin-top: 1.8rem; }

.dk-contacto__tel { margin-top: 2.6rem; text-align: center; }
.dk-contacto__tel-rot {
	display: block; margin-bottom: .5rem;
	font-family: var(--fiesta); font-weight: 900; font-size: .68rem;
	letter-spacing: .18em; text-transform: uppercase; color: var(--ceniza);
}
.dk-contacto__tel a { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 3rem); letter-spacing: -.03em; transition: color .3s; }
.dk-contacto__tel a:hover { color: var(--flama); }

/* --------------------------------------------------- índice formatos */
.dk-catalogo--indice { margin-top: 3rem; }
.dk-como-entra { position: relative; overflow: hidden; }
.dk-como-entra .dk-grilla-casos { margin-top: 3rem; }
.dk-estudio-intro { position: relative; overflow: hidden; }

/* ------------------------------------------------------ galería del caso */
.dk-galeria { padding-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
/* La galería del caso se sale de la pantalla en cuanto pasa de cuatro piezas.
   Va a tres columnas y con las filas topadas: lo que no cabe se ve bajando, que
   es lo normal en una galería, pero la sección arranca cabiendo. */
.dk-galeria__grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, 210px); margin-top: 1.1rem; }
.dk-galeria__pieza img { height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .dk-galeria__grid { grid-template-columns: repeat(4, 1fr); } }
.dk-galeria__pieza { margin: 0; overflow: hidden; border-radius: 14px; border: 1px solid var(--linea); background: var(--superficie); }
.dk-galeria__pieza--ancha { grid-column: span 2; }
.dk-galeria__pieza img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; transition: scale .8s var(--curva); }
.dk-galeria__pieza--ancha img { aspect-ratio: 16 / 10; }
.dk-galeria__pieza:hover img { scale: 1.05; }

.dk-otros-casos { padding-bottom: clamp(3rem, 7vw, 5rem); }
.dk-otros-casos .dk-grilla-casos { margin-top: 1.5rem; }
/* La exención de la regla es del home, no de esta página. Aquí «otros casos» es
   un pie de página, no la vitrina, así que en el teléfono va en fila deslizable. */
@media (max-width: 639px) {
	.dk-otros-casos .dk-grilla-casos {
		grid-auto-flow: column; grid-auto-columns: 78%;
		overflow-x: auto; scroll-snap-type: x proximity;
		scroll-padding-inline: 20px; scrollbar-width: none;
		margin-inline: -20px; padding-inline: 20px;
	}
	.dk-otros-casos .dk-grilla-casos::-webkit-scrollbar { display: none; }
	.dk-otros-casos .dk-caso { scroll-snap-align: start; }
	.dk-otros-casos .dk-caso__link { min-height: 300px; }
}

/* Encuadre: las portadas verticales necesitan mostrar la cara, no el centro. */
/* Encuadre de las portadas: casi todas son verticales y la cara vive en el
   tercio de arriba. Con 28% se cortaba la frente y el plano parecía un primer
   plano forzado; al 8% entra la cabeza completa y se lee como plano medio. */
.dk-caso__img { object-position: 50% 8%; }

/* ==========================================================================
   UNA SECCIÓN, UNA PANTALLA · AJUSTES DE MÓVIL

   Este bloque va AL FINAL del archivo a propósito. Estaba en mitad de la hoja y
   varias de sus reglas no hacían nada: las declaraciones base de .dk-carrusel y
   compañía vienen más abajo, tienen la misma especificidad y ganaban por orden.
   Una media query que ajusta lo anterior sólo funciona si está después.

   Regla del 17 de septiembre de 2026: ninguna sección puede obligar a hacer
   scroll para verse entera. A 390×844 la pantalla útil es la mitad que en
   escritorio, así que aquí se recorta aire y tamaño, y lo que no baja se vuelve
   carrusel. Nunca se quita contenido.
   ========================================================================== */
@media (max-width: 720px) {
	.dk-seccion { padding: clamp(1.5rem, 7vw, 2.8rem) 0; }
	.dk-h-gigante { font-size: clamp(2.1rem, 11vw, 3rem); }
	.dk-h-grande  { font-size: clamp(2rem, 10vw, 2.8rem); }
	.dk-h-medio   { font-size: clamp(1.45rem, 7vw, 2rem); }
	.dk-lede { margin-top: .8rem; }

	/* La cabecera de sección apila título y datos; el hueco entre ellos sobra. */
	.dk-cabecera { gap: 14px; }
	.dk-datos-formatos { gap: 18px; }

	/* Quiénes somos: la foto a media altura deja ver el texto sin bajar. */
	.dk-intro__caja { gap: 14px; }
	.dk-intro__foto img { max-height: 34svh; object-fit: cover; }
	.dk-sello { margin-top: 1rem; padding: 12px; gap: 14px; }
	.dk-sello p { font-size: 1.05rem; }
	.dk-sello__num > span { font-size: 2.4rem; }
	.dk-cinta-clientes { margin-top: 1.2rem; padding: 12px 0; }
	.dk-intro__pie { margin-top: .9rem; }

	/* Reconocimientos: el bloque de texto y las cuatro cifras juntos no caben. */
	.dk-reconocimientos .dk-prosa { font-size: .85rem; line-height: 1.45; }
	.dk-reconocimientos .dk-hito { font-size: .95rem; }
	.dk-reconocimientos__cta { margin-top: 1rem; }

	/* Reconocimientos: las cuatro cifras en dos filas de dos. */
	.dk-reconocimientos { gap: 20px; }
	.dk-cifra-grande { padding: 16px 14px; }

	/* --- la ficha de servicio: 149-164% --- */
	.dk-producto { padding-block: 1.25rem; }
	.dk-producto__titulo { font-size: 1.5rem; }
	.dk-producto__gancho { font-size: .92rem; margin-top: .25rem; }
	.dk-producto__cuerpo { gap: 1.1rem; margin-top: 1rem; }
	.dk-producto__bloque + .dk-producto__bloque { margin-top: .85rem; }
	.dk-producto__texto p { font-size: .88rem; line-height: 1.45; }
	.dk-producto__entregables li { padding: 4px 0 4px 20px; font-size: .84rem; }
	.dk-producto__entregables li::before { top: 13px; }
	/* La prueba en un teléfono: el número y el caso, sin los dos fotogramas.
	   Costaban 105px de los 770 que hay y a ese tamaño no se distingue lo que
	   sale en ellos; las mismas imágenes están completas en los pósters de
	   «Así se ve cocinado», dos bloques más abajo. Quitar antes que encoger. */
	.dk-prueba { padding: 12px 14px; }
	.dk-prueba__cifra { font-size: 2.2rem; }
	.dk-prueba__label { font-size: .84rem; }
	.dk-prueba__fotos { display: none; }
	.dk-prueba__caso { margin-top: .55rem; }

	/* El plegable: el rótulo se vuelve un botón y avisa de que hay algo debajo. */
	.dk-producto__plegable > summary {
		cursor: pointer; list-style: none;
		display: flex; align-items: center; justify-content: space-between;
		padding: 7px 0; border-block: 1px solid var(--linea);
	}
	.dk-producto__plegable > summary::-webkit-details-marker { display: none; }
	.dk-producto__plegable > summary::after {
		content: "+"; font-size: 1rem; color: var(--flama); line-height: 1;
	}
	.dk-producto__plegable[open] > summary::after { content: "–"; }
	.dk-producto__plegable[open] > summary { border-bottom-color: transparent; }
	.dk-producto__ejemplos { margin-top: .8rem; }
	.dk-panel-naranja__foto { min-height: 240px; }
	.dk-ejemplos { gap: 8px; }

	/* Los ejemplos apilados de dos en dos suman más que la ficha entera. */
	.dk-ejemplos {
		grid-auto-flow: column; grid-auto-columns: 62%;
		grid-template-columns: none;
		overflow-x: auto; scroll-snap-type: x proximity;
		scroll-padding-inline: 20px; scrollbar-width: none;
		margin-inline: -20px; padding-inline: 20px;
	}
	.dk-ejemplos::-webkit-scrollbar { display: none; }
	.dk-ejemplos .dk-poster { scroll-snap-align: start; }

	/* --- The Dirty Way: 121%. Cinco pasos de 24px de aire cada uno. --- */
	.dk-metodo__lista { margin-top: 1.2rem; }
	.dk-metodo__lista li { gap: 14px; padding: 12px 14px; }
	.dk-metodo__letra { width: 32px; height: 32px; font-size: .9rem; }
	.dk-metodo__titulo { font-size: .92rem; }
	.dk-metodo__desc { font-size: .78rem; line-height: 1.4; }

	/* --- contacto: 191%, el peor de todos --- */
	.dk-contacto__caja { gap: 16px; }
	.dk-contacto__via { padding: 16px 0; }
	.dk-contacto__via .dk-h-medio { font-size: 1.3rem; }
	.dk-contacto__via .dk-prosa { font-size: .86rem; line-height: 1.45; }
	.dk-contacto__tel { font-size: 1.1rem; }
	.dk-oficina { padding: 10px 0; }
	.dk-oficina__ciudad { font-size: .95rem; }
	.dk-oficina__dir, .dk-oficina__pais { font-size: .76rem; }

	/* --- lo que sigue tocando el hueso ---
	   Estas cuatro no bajan con aire: hay que reducir lo que ocupa sitio de
	   verdad — el póster de ejemplo, el carrusel de teléfonos y el titular. */

	/* La ficha de servicio: el póster del carrusel de ejemplos es lo más alto.
	   A 42% caben dos y asoma la tercera, que es lo que dice que hay más. */
	.dk-ejemplos { grid-auto-columns: 42%; }

	/* «Para qué sirve» también se pliega. Plegar no es esconder: el texto sigue
	   ahí, a un toque, y el buscador lo lee igual. Ocultarlo con display:none
	   sería quitar contenido, que es justo lo que la regla no permite. */
	.dk-producto__cta { margin-top: .8rem; gap: 8px 14px; }
	.dk-producto__cta .dk-btn { min-height: 44px; padding: 0 20px; font-size: .72rem; }
	.dk-producto__otro { font-size: .74rem; }
	/* Y en un teléfono la prueba va DESPUÉS del texto, no antes: primero se lee
	   qué es el servicio y después el número que lo respalda. En escritorio van
	   lado a lado y el orden no se nota. */
	.dk-producto__cuerpo { display: flex; flex-direction: column; }
	.dk-prueba { order: 2; }
	.dk-producto__texto { order: 1; }
	.dk-par__pie { display: none; }
	.dk-ejemplos .dk-poster__titulo { font-size: .8rem; -webkit-line-clamp: 1; }
	.dk-ejemplos .dk-poster__pie { padding-top: 6px; }
	.dk-ejemplos .dk-poster__sello img { height: 14px; }
	.dk-ejemplos .dk-poster__anio { display: none; }
	.dk-producto__ejemplos .dk-producto__rotulo { margin-bottom: .2rem; }

	/* Social shows no lleva ajustes aquí. La sección está EXENTA de la regla de
	   una pantalla: el carrusel 3D es la pieza, y encogerlo a 276px de alto le
	   quitaba justo lo que la hace funcionar. Conserva su alto en el teléfono. */
	.dk-datos-formatos .dk-dato__valor { font-size: 1.6rem; }

	/* The Dirty Way: cinco filas, y el lede de encima. */
	.dk-metodo__lista li { padding: 10px 12px; }
	/* La descripción de cada paso se pliega, no se esconde: `display: none` la
	   borraba del teléfono y del buscador. Ver la regla en el remate del archivo. */
	.dk-metodo__desc {
		max-height: 0; overflow: hidden; opacity: 0;
		transition: max-height .3s ease, opacity .3s ease;
	}
	.dk-metodo__lista li[aria-expanded="true"] .dk-metodo__desc,
	.dk-metodo__lista li:focus-within .dk-metodo__desc { max-height: 8rem; opacity: 1; }

	/* --- estudio: 122% y 119% --- */
	.dk-reconocimientos { gap: 18px; }
	.dk-cifra-grande { padding: 13px 12px; }
	.dk-impacto__grid { gap: 10px; }
	.dk-impacto__dato { padding: 13px; }
	.dk-sellos { gap: 12px 18px; margin-top: 1.1rem; }
	.dk-sellos img { height: 26px; }
	.dk-sobremesa { gap: 18px; padding-block: 1.6rem; }
}