/* ==========================================================================
   La parrilla de casos — sólo se carga en el índice.

   Va aparte de app.css a propósito: son ~400 líneas que el home no usa, y el
   home es la página que tiene que pintar rápido.
   ========================================================================== */

/* El nav del sitio flota sobre la portada, así que la parrilla no deja hueco
   arriba: la imagen empieza pegada al borde, como una plataforma de verdad. */
.dk-parrilla { margin-top: calc(var(--nav-alto) * -1); }

/* ------------------------------------------------------------- la portada */
.dk-portada {
	position: relative;
	display: flex; align-items: flex-end;
	min-height: min(92svh, 860px);
	padding-block: clamp(4rem, 9vw, 7rem);
	overflow: hidden;
}
.dk-portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }

/* Dos capas y no una: el velo lateral sostiene el texto sobre cualquier foto,
   y el fundido inferior cose la portada con la primera fila para que no se lea
   como dos bloques pegados. */
.dk-portada__velo {
	position: absolute; inset: 0;
	background:
		linear-gradient(to right, rgb(11 9 8 / .94) 0%, rgb(11 9 8 / .78) 38%, rgb(11 9 8 / .12) 72%, transparent 100%),
		linear-gradient(to top, rgb(11 9 8 / .8) 0%, transparent 46%);
}
.dk-portada__fundido {
	position: absolute; inset: auto 0 0; height: 30%;
	background: linear-gradient(to top, var(--tinta) 4%, transparent 100%);
}

.dk-portada__copy { position: relative; width: 100%; max-width: var(--ancho); }
.dk-portada__logo { display: block; height: clamp(26px, 3.4vw, 40px); width: auto; margin: 1rem 0 .4rem; }
.dk-portada__marca { margin: 1rem 0 .2rem; font-family: var(--fiesta); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; color: var(--tiza); }

.dk-portada__titulo {
	margin: .3rem 0 0; max-width: 18ch;
	font-family: var(--serif); font-weight: 700;
	font-size: clamp(2.4rem, 6.4vw, 5.2rem); line-height: .98; letter-spacing: -.02em;
}
.dk-portada__meta {
	margin: .9rem 0 0;
	font-family: var(--fiesta); font-weight: 900; font-size: .78rem;
	letter-spacing: .12em; text-transform: uppercase; color: var(--ceniza);
}
.dk-portada__resumen { margin: 1rem 0 0; max-width: 54ch; font-size: clamp(.98rem, 1.3vw, 1.1rem); line-height: 1.6; color: rgb(245 242 238 / .84); }

.dk-portada__cifras { display: flex; flex-wrap: wrap; gap: 14px 40px; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.dk-portada__cifra { display: block; font-family: var(--fiesta); font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1; color: var(--flama); }
.dk-portada__cifra-label { display: block; margin-top: 5px; max-width: 24ch; font-size: .76rem; line-height: 1.35; color: var(--ceniza); }

.dk-portada__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.dk-portada__botones .dk-btn { display: inline-flex; align-items: center; gap: 9px; }

/* ---------------------------------------------------------- las filas */
.dk-fila { position: relative; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
/* La primera fila sube sobre el fundido de la portada: así se ve que hay más
   abajo sin tener que scrollear, que es todo el truco de una parrilla. */
.dk-portada + .dk-fila { margin-top: clamp(-6rem, -7vw, -3rem); z-index: 2; }

.dk-fila__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.dk-fila__titulo {
	margin: 0; font-family: var(--serif); font-weight: 700;
	font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: -.02em;
}
.dk-fila__bajada { margin: .35rem 0 0; font-size: .86rem; color: var(--ceniza); max-width: 60ch; }
.dk-fila__nav { display: flex; gap: 8px; flex: none; }
.dk-fila__nav .dk-nav-btn { width: 38px; height: 38px; }
.dk-nav-btn[disabled] { opacity: .3; pointer-events: none; }

/* La pista se sale del contenedor a propósito y se compensa con padding: el
   último póster tiene que quedar cortado por el borde de la pantalla, no
   alineado con el texto. Es lo que dice «esto sigue». */
.dk-fila__pista {
	display: flex; gap: 16px;
	list-style: none; margin: 1.1rem 0 0;
	/* El mismo margen lateral que .dk-contenedor (20px, 36px desde 768px), para
	   que el primer póster quede a plomo con el título de la fila. */
	padding: 10px 20px 26px;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x proximity;
	/* El snap alinea con el borde del scrollport, no con el área de contenido:
	   sin esto el navegador desplazaba la pista los mismos píxeles del padding
	   para pegar el primer póster al borde, y el margen lateral se perdía. */
	scroll-padding-inline: 20px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.dk-fila__pista::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
	.dk-fila__pista {
		padding-inline: max(36px, calc((100vw - var(--ancho)) / 2 + 36px));
		scroll-padding-inline: max(36px, calc((100vw - var(--ancho)) / 2 + 36px));
	}
}

/* --------------------------------------------------------- el póster */
.dk-poster {
	position: relative; flex: none;
	width: clamp(230px, 25vw, 330px);
	scroll-snap-align: start;
	border-radius: 12px;
	transition: transform .38s var(--curva), z-index 0s;
}
.dk-poster__link { display: block; color: inherit; text-decoration: none; outline-offset: 4px; }

.dk-poster__foto {
	position: relative; display: block;
	aspect-ratio: 16 / 10; overflow: hidden;
	border-radius: 12px; border: 1px solid var(--linea);
	background: var(--superficie);
}
.dk-poster__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Permanente y no sólo en hover: sostiene el sello de marca sobre cualquier
   fotograma, incluidos los claros. Se refuerza al acercarse. */
.dk-poster__velo {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgb(11 9 8 / .78) 0%, rgb(11 9 8 / .12) 42%, transparent 62%);
	transition: background .35s;
}
.dk-poster:hover .dk-poster__velo,
.dk-poster:focus-within .dk-poster__velo {
	background: linear-gradient(to top, rgb(11 9 8 / .9) 0%, rgb(11 9 8 / .3) 52%, rgb(11 9 8 / .1) 100%);
}

/* El sello: la marca sobre la portada. */
.dk-poster__sello { position: absolute; z-index: 2; left: 14px; bottom: 12px; display: block; max-width: 62%; }
.dk-poster__sello img { display: block; height: 19px; width: auto; max-width: 100%; object-fit: contain; }
.dk-poster__sello-txt {
	font-family: var(--fiesta); font-weight: 900; font-size: .7rem;
	letter-spacing: .12em; text-transform: uppercase; color: var(--tiza);
}
.dk-poster__anio {
	position: absolute; z-index: 2; right: 12px; bottom: 12px;
	padding: 3px 8px; border-radius: 99px;
	border: 1px solid rgb(255 255 255 / .18); background: rgb(11 9 8 / .55);
	backdrop-filter: blur(4px);
	font-family: var(--fiesta); font-weight: 900; font-size: .6rem;
	letter-spacing: .1em; color: rgb(245 242 238 / .85);
}

/* El rótulo «Vista previa» sólo aparece mientras pasan los fotogramas. Sin él,
   el cambio de imagen se lee como un fallo de carga. */
.dk-poster__aire {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	padding: 4px 9px; border-radius: 99px;
	background: rgb(11 9 8 / .72); backdrop-filter: blur(6px);
	font-family: var(--fiesta); font-weight: 900; font-size: .58rem;
	letter-spacing: .14em; text-transform: uppercase; color: var(--flama);
	opacity: 0; transition: opacity .3s;
}
.dk-poster--aire .dk-poster__aire { opacity: 1; }

.dk-poster__pie { display: block; padding: 12px 4px 0; }
.dk-poster__titulo {
	display: block;
	font-weight: 700; font-size: 1rem; line-height: 1.18; letter-spacing: -.015em;
	/* Dos líneas máximo: si un título largo empuja, las tarjetas de la fila
	   dejan de tener la misma altura y la parrilla se ve descuadrada. */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dk-poster__meta { display: block; margin-top: 5px; font-size: .72rem; color: var(--ceniza); }

/* Al acercarse: crece, se ilumina y saca los botones. El `z-index` sube para
   que el que crece pase por encima de sus vecinos y no quede mordido. */
@media (hover: hover) {
	.dk-poster:hover, .dk-poster:focus-within { transform: scale(1.055); z-index: 5; }
	.dk-poster:hover .dk-poster__foto,
	.dk-poster:focus-within .dk-poster__foto { border-color: rgb(255 61 20 / .6); box-shadow: 0 18px 50px -14px rgb(0 0 0 / .8); }
	.dk-poster:hover .dk-poster__velo, .dk-poster:focus-within .dk-poster__velo { opacity: 1; }
}

.dk-poster__acciones {
	position: absolute; z-index: 6; right: 10px; top: 10px;
	display: flex; gap: 6px;
	opacity: 0; translate: 0 -4px;
	transition: opacity .3s, translate .3s;
}
.dk-poster:hover .dk-poster__acciones,
.dk-poster:focus-within .dk-poster__acciones { opacity: 1; translate: 0 0; }

.dk-poster__btn {
	display: grid; place-items: center; width: 32px; height: 32px;
	border-radius: 99px; border: 1px solid rgb(255 255 255 / .25);
	background: rgb(11 9 8 / .78); backdrop-filter: blur(6px);
	color: var(--tiza); cursor: pointer; padding: 0;
	transition: background-color .25s, border-color .25s, color .25s;
}
.dk-poster__btn:hover { background: var(--flama); border-color: var(--flama); color: #fff; }
.dk-poster__btn--ver { text-decoration: none; }

/* En táctil no hay hover: los botones sobran y las cifras tienen que verse. */
@media (hover: none) {
	.dk-poster__acciones { display: none; }
}

/* ------------------------------------------------------------ la ficha */
body.dk-sin-scroll { overflow: hidden; }

/* Flex y no grid: en un grid sin columnas declaradas, `place-items: center`
   encoge la columna implícita al contenido, y entonces el `width: min(760px, 100%)`
   de la caja resuelve ese 100% contra una columna colapsada — la ficha salía de
   217px de ancho. En flex el porcentaje se resuelve contra el contenedor. */
.dk-ficha {
	position: fixed; inset: 0; z-index: 240;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
}
/* Sin esta línea la parrilla entera queda muerta. El `hidden` del HTML vale
   `display: none` en la hoja del navegador, pero `.dk-ficha { display: grid }`
   es una regla de autor y le gana por especificidad: el modal seguía ocupando
   la pantalla completa, invisible, tragándose todos los clics de los pósters. */
.dk-ficha[hidden] { display: none; }
.dk-ficha__fondo {
	position: absolute; inset: 0; background: rgb(6 5 5 / .82); backdrop-filter: blur(4px);
	opacity: 0; transition: opacity .26s;
}
.dk-ficha--abierta .dk-ficha__fondo { opacity: 1; }

.dk-ficha__caja {
	position: relative; z-index: 1;
	width: min(760px, 100%); max-height: min(88svh, 900px); overflow-y: auto;
	border-radius: 18px; border: 1px solid var(--linea);
	background: var(--tinta-2);
	opacity: 0; translate: 0 18px; scale: .98;
	transition: opacity .26s var(--curva), translate .26s var(--curva), scale .26s var(--curva);
	outline: none;
}
.dk-ficha--abierta .dk-ficha__caja { opacity: 1; translate: 0 0; scale: 1; }

.dk-ficha__cerrar {
	position: absolute; z-index: 3; top: 14px; right: 14px;
	display: grid; place-items: center; width: 36px; height: 36px;
	border-radius: 99px; border: 1px solid rgb(255 255 255 / .22);
	background: rgb(11 9 8 / .7); backdrop-filter: blur(6px);
	color: var(--tiza); cursor: pointer; padding: 0;
	transition: background-color .25s, border-color .25s;
}
.dk-ficha__cerrar:hover { background: var(--flama); border-color: var(--flama); color: #fff; }

.dk-ficha__hero { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
/* Sólo el fotograma de fondo, que es hijo directo. Escrito como `img` a secas
   se llevaba también el logo de marca del encabezado —más específico que
   `.dk-ficha__logo`— y lo estiraba a todo el modal. Se veía con cualquier caso
   que tuviera logo. */
.dk-ficha__hero > img { width: 100%; height: 100%; object-fit: cover; }
.dk-ficha__fundido { position: absolute; inset: 0; background: linear-gradient(to top, var(--tinta-2) 2%, rgb(11 9 8 / .35) 55%, transparent 100%); }
.dk-ficha__encabezado { position: absolute; inset: auto 0 0; padding: 0 clamp(20px, 4vw, 34px) clamp(16px, 2.5vw, 22px); }
.dk-ficha__logo { display: block; height: 22px; width: auto; margin-bottom: 8px; }
.dk-ficha__titulo { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.04; letter-spacing: -.02em; }

.dk-ficha__texto { padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 34px) clamp(24px, 4vw, 34px); }
.dk-ficha__meta { margin: 0; font-family: var(--fiesta); font-weight: 900; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ceniza); }

.dk-ficha__cifras {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px 24px; list-style: none; margin: 1.5rem 0 0; padding: 1.2rem 0 0;
	border-top: 1px solid var(--linea);
}
.dk-ficha__cifra { display: block; font-family: var(--fiesta); font-weight: 900; font-size: 1.7rem; line-height: 1; color: var(--flama); }
.dk-ficha__cifra-label { display: block; margin-top: 6px; font-size: .74rem; line-height: 1.4; color: var(--ceniza); }

.dk-ficha__rotulo {
	margin: 1.6rem 0 .4rem;
	font-family: var(--fiesta); font-weight: 900; font-size: .72rem;
	letter-spacing: .14em; text-transform: uppercase; color: var(--flama);
}
.dk-ficha__texto p { margin: 0; font-size: .96rem; line-height: 1.66; color: rgb(245 242 238 / .82); }
.dk-ficha__pie { margin-top: 1.8rem !important; }

/* --------------------------------------------------------------- el pie */
.dk-parrilla__pie { margin-top: clamp(3rem, 6vw, 5rem); }
.dk-parrilla__pie .dk-lede { margin-inline: auto; }
.dk-parrilla__pie .dk-btn { margin-top: 1.6rem; }

@media (max-width: 720px) {
	/* En vertical el velo lateral no sirve: el texto ocupa todo el ancho y queda
	   encima de la foto sin nada que lo sostenga. Pasa a ser vertical y más
	   opaco, y la portada deja aire arriba para no quedar debajo de la barra. */
	/* Sin alto fijo: el copy de la portada (rótulo, logo, título, resumen, tres
	   cifras y dos botones) es más alto que 84svh en un teléfono, y con la caja
	   alineada abajo el título se salía por arriba, debajo de la barra. */
	.dk-portada {
		min-height: auto;
		padding-top: calc(var(--nav-alto) + 6rem);
		padding-bottom: 2.5rem;
	}
	.dk-portada__titulo { font-size: clamp(2rem, 9vw, 2.6rem); max-width: none; }
	.dk-portada__velo {
		background: linear-gradient(to top, rgb(11 9 8 / .96) 0%, rgb(11 9 8 / .88) 42%, rgb(11 9 8 / .5) 78%, rgb(11 9 8 / .35) 100%);
	}
	.dk-portada__resumen { font-size: .95rem; }
	.dk-portada__cifras { gap: 12px 24px; }
	.dk-portada__botones .dk-btn { flex: 1 1 auto; justify-content: center; }
	.dk-portada + .dk-fila { margin-top: 1.6rem; }
	.dk-fila__nav { display: none; }
	.dk-poster { width: 74vw; }
	.dk-ficha { padding: 0; }
	.dk-ficha__caja { max-height: 100svh; height: 100svh; border-radius: 0; border: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dk-poster, .dk-ficha__caja, .dk-ficha__fondo { transition: none; }
	.dk-poster:hover, .dk-poster:focus-within { transform: none; }
}