/* components.css — hero, menú, cards, claim, footer */

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero__home {
	display: block;
	cursor: pointer;
}

.hero__logo {
	width: min(320px, 64vw);
	height: auto;
}

/* ── Menú ───────────────────────────────────────────────────────────── */
.menu {
	display: flex;
	justify-content: space-between;
	gap: var(--space-l);
	overflow-x: auto;
	scrollbar-width: none;
}

.menu::-webkit-scrollbar {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.menu.menu--overflow {
		cursor: grab;
	}
}

.menu.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.menu__item {
	display: block;
	font-size: var(--fs-menu);
	font-weight: 300;
	letter-spacing: var(--ls-menu);
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--ink);
}

.menu__item b {
	display: block;
	font-weight: 700;
}

.menu__item:hover span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.menu__item.is-active {
	color: var(--red);
}

/* ── Carrusel (estilos; la lógica llega en etapas 3-4) ──────────────── */
.track {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: var(--card-gap);
	height: 100%;
	min-height: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	touch-action: pan-x;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	/* el foco por teclado aterriza ya casi centrado */
	scroll-padding-inline: calc(50% - var(--card-w) / 2);
	padding-inline: calc(50% - var(--card-w) / 2);
}

.track::-webkit-scrollbar {
	display: none;
}

/* el árbitro de snap (js/core/snap.js) es el único que toca esta clase */
.track.is-controlled {
	scroll-snap-type: none;
}

@media (hover: hover) and (pointer: fine) {
	.track {
		cursor: grab;
	}
}

.track.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.card {
	position: relative;
	scroll-snap-align: center;
	flex: 0 0 var(--card-w);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-l);
	padding: var(--space-xl);
	color: var(--inverse);
	text-transform: uppercase;
	overflow: hidden;
}

.card--texto {
	background: var(--red);
}

.card__media {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.card__media img,
.card__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* gradiente de legibilidad exacto de Figma */
.card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(46.5deg, var(--ink) 0%, rgba(10, 9, 8, 0) 46.6%);
}

.card__title {
	position: relative;
	font-size: var(--fs-heading);
	font-weight: 200;
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-heading);
}

.card__link {
	color: inherit;
	text-decoration: none;
	/* target táctil generoso pero ceñido al texto (NO stretched a toda la
	   card): el padding agranda el área clicable y el margin negativo lo
	   compensa para no desplazar el título. El hueco de línea y el resto de
	   la card quedan libres para arrastrar. */
	padding: 0.4em 0.6em;
	margin: -0.4em -0.6em;
}

/* icono de flecha de enlace: SOLO cards con href real (01-07). Las cards sin
   enlace (00, 09 y lab) se renderizan como <span class="card__link"> sin
   [href] → quedan excluidas solas. El mask no lleva fill baked, así que
   currentColor lo pinta en el color del título de cada card. NO es el
   stretched que eliminamos: es un ::after nuevo, gateado por [href]. */
.card__link[href]::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.25em;
	vertical-align: 0.15em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m2 0v2h4.5l-6.5 6.5 1.5 1.5 6.5-6.5v4.5h2v-8z' transform='translate(3 3)'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m2 0v2h4.5l-6.5 6.5 1.5 1.5 6.5-6.5v4.5h2v-8z' transform='translate(3 3)'/%3E%3C/svg%3E") no-repeat center / contain;
}

.card__link:hover span,
.card__link:focus-visible span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.card__title b {
	display: block;
	font-weight: 700;
}

.card__sub {
	position: relative;
	max-width: 20ch;
	font-size: var(--fs-body);
	font-weight: 400;
	letter-spacing: var(--ls-body);
	line-height: var(--lh-body);
}

/* Layout "prose" (card 00 y Sobre mí): el cuerpo de texto sube arriba con
   una caja grande (texto largo); el número+título quedan abajo como el resto.
   Lo comparten la card 00 (texto) y Sobre mí (imagen). */
.card--prose {
	justify-content: space-between;
}

.card--prose .card__sub {
	order: -1;             /* el cuerpo arriba; el título queda al fondo */
	max-width: none;       /* casi todo el ancho útil (dentro del padding) */
	white-space: pre-line; /* respeta los saltos de línea del texto editable */
}

/* legibilidad del texto arriba sobre la imagen: gradiente desde arriba.
   Solo aplica en Fase 1 sin GL (con GL lo hace el shader, ver cardsLayer). */
.card--prose .card__media::after {
	background: linear-gradient(180deg, var(--ink) 0%, rgba(10, 9, 8, 0) 46.6%);
}

/* ── Claim ──────────────────────────────────────────────────────────── */
.claim {
	max-width: 668px;
	text-align: center;
	font-size: clamp(16px, 1.46vw + 8px, 22px);
	font-weight: 200;
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-heading);
	text-transform: uppercase;
}

.claim b {
	font-weight: 700;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer__link {
	font-size: var(--fs-body);
	font-weight: 400;
	letter-spacing: var(--ls-body);
	line-height: var(--lh-body);
	text-transform: uppercase;
	text-decoration: none;
	align-self: center;
}

.footer__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footer__sep {
	width: var(--hairline);
	background: var(--ink);
}

/* ── Overlay de error de datos (cards.json/ahora.json rotos) ────────── */
.data-error {
	position: fixed;
	inset: auto var(--frame) var(--frame) var(--frame);
	z-index: 100;
	background: var(--ink);
	color: var(--inverse);
	border: var(--hairline) solid var(--red);
	padding: var(--space-m) var(--space-l);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
}

.data-error p:first-child {
	color: var(--red);
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: var(--space-s);
}

/* ── Preloader ──────────────────────────────────────────────────────── */
/* El marco + panel + grano son los del propio .page (no se replican): cero
   salto al fundir. Durante la carga, los strips están a opacity 0 (el
   montaje de las cards no se ve) y el logo DMK queda centrado encima.
   main.js añade .is-loaded → fade-in de los strips + fade-out del logo. */
.preloader {
	position: absolute;
	inset: 0;
	z-index: 85; /* sobre el contenido y el grano (z80); bajo overlays de error (z100) */
	display: grid;
	place-items: center;
	pointer-events: none;
	transition: opacity 320ms ease;
}

.preloader__logo {
	width: 64px;
	height: auto;
	opacity: 0.92;
}

.page .strip {
	transition: opacity 300ms ease;
}

.page:not(.is-loaded) .strip {
	opacity: 0;
}

.page.is-loaded .preloader {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.preloader,
	.page .strip {
		transition: none; /* fade instantáneo: sin animación, solo el corte */
	}
}