/* =================================================================
   INTERPLAY — LAYOUT (cabecera, pie, botones de menú)
   -----------------------------------------------------------------
   Cabecera fija con comportamiento "sticky": arranca transparente y,
   al hacer scroll, emerge una banda translúcida y desenfocada.
   Solo el selector de idioma cambia de color según el fondo.
   ================================================================= */

/* ---------------------------------------------------------------
   CABECERA (fija arriba, sobre el contenido)
   --------------------------------------------------------------- */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	transition: background-color 0.3s ease, backdrop-filter 0.3s ease, opacity 0.3s ease;
}
/* Oculta la cabecera (p. ej. al llegar al footer de la home) */
.site-header.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Banda sticky: fondo blanco translúcido + desenfoque (al hacer scroll) */
.site-header.is-stuck {
	background-color: var(--color-sticky-bg);
	backdrop-filter: blur(var(--sticky-blur));
	-webkit-backdrop-filter: blur(var(--sticky-blur));
}

/* Con el desplegable "more" abierto, la banda frosted la aporta SOLO el
   panel (que cubre toda la zona). Anulamos el fondo del header sticky para
   no apilar dos capas y que no se vea una costura entre barra y desplegable. */
.site-header.is-more-open.is-stuck {
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Contenido de la cabecera, alineado al ancho común de la ficha */
.site-header__inner {
	position: relative;
	z-index: 2;                 /* la fila queda por encima de la banda desplegable */
	max-width: var(--content-max);
	margin-inline: auto;
	padding: var(--space-3) var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

/* ---------------------------------------------------------------
   LOGO (wordmark gris; siempre gris, no cambia con el fondo)
   --------------------------------------------------------------- */
.site-logo {
	display: inline-flex;
	align-items: center;
	color: var(--color-grey);   /* wordmark gris por defecto */
}
/* Logo en blanco sobre el overlay de projects (fondo negro) */
.site-header.is-projects-open .site-logo { color: var(--color-white); }
.site-logo .icon {
	width: auto;
	height: 48px;               /* a la altura de los botones; el ancho se ajusta por el viewBox */
}

/* ---------------------------------------------------------------
   BOTONES DE MENÚ (cajas grises, texto blanco, cuadradas)
   --------------------------------------------------------------- */
.site-nav {
	display: flex;
	align-items: center;
	gap: var(--space-3);        /* 24px entre projects, more y el selector de idioma */
}

.menu-btn {
	display: inline-block;
	background: var(--color-grey);
	color: var(--color-white);
	border: 0;
	border-radius: 0;           /* cuadrados */
	padding: 12px 24px;         /* altura 48px, igual que el logo; algo más de aire lateral */
	font: var(--font-main-button);
	letter-spacing: var(--ls-default);
	white-space: nowrap;
	transition: opacity 0.3s ease;
}
/* El punto tras el texto ("projects", "more") — guiño al punto del logo.
   Es un círculo con tamaño propio; en hover se desliza a la derecha. */
.menu-btn__dot {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	margin-left: 2px;
	vertical-align: baseline;
	transition: transform 0.3s ease;
}
.menu-btn:hover .menu-btn__dot,
.menu-btn:focus-visible .menu-btn__dot {
	transform: translateX(0.4em);
}

/* ---------------------------------------------------------------
   ITEMS CON PANEL (more / projects) y patrón de "seleccionado / atenuado"
   --------------------------------------------------------------- */
.menu-item {
	position: relative;
	display: inline-flex;
}

/* Cuando hay un panel abierto, el botón NO seleccionado se atenúa */
.site-nav.has-open .menu-btn:not([aria-expanded="true"]) {
	opacity: 0.4;
}

/* ---------------------------------------------------------------
   DESPLEGABLE "more" — banda a todo el ancho (cristal esmerilado)
   --------------------------------------------------------------- */
.more-panel {
	position: absolute;
	inset: 0 0 auto 0;          /* arriba, a todo el ancho */
	z-index: 1;                 /* por debajo de la fila del header */
	background: var(--color-sticky-bg);
	backdrop-filter: blur(var(--sticky-blur));
	-webkit-backdrop-filter: blur(var(--sticky-blur));
	padding-bottom: var(--space-7);

	/* Oculto por defecto (animable) */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s;
}
.site-header.is-more-open .more-panel {
	opacity: 1;
	visibility: visible;
}

.more-panel__inner {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Enlaces: alineados a la derecha. El padding-top (para dejar pasar la
   fila del header) y el padding-right (para coincidir con el botón
   "more/close") los calcula menu.js y los aplica como estilo en línea. */
.more-panel__nav {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-3);
}
.more-panel__link {
	font: var(--font-main-button);          /* 20px, como los botones del menú */
	letter-spacing: var(--ls-default);
	color: var(--color-black);
	transition: color 0.2s ease;
}
.more-panel__link:hover,
.more-panel__link:focus-visible {
	color: var(--color-grey);               /* #5F6269 */
}

/* ---------------------------------------------------------------
   SELECTOR DE IDIOMA (único elemento que se adapta al fondo)
   --------------------------------------------------------------- */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font: var(--font-scroll-link);
	letter-spacing: var(--ls-default);
	color: var(--color-black);                 /* por defecto: negro */
	white-space: nowrap;
}
.lang-switch__item {
	color: inherit;
	font-weight: var(--fw-light);              /* idiomas no activos: light */
}
.lang-switch__item:hover,
.lang-switch__item.is-active {
	font-weight: var(--fw-medium);             /* idioma actual (y hover): medium */
}
.lang-switch__sep { opacity: 0.5; }

/* Sobre fondo oscuro (hero de las fichas): idioma en blanco */
.site-header--on-dark .lang-switch { color: var(--color-white); }
/* Pero al emerger la banda sticky (fondo claro), vuelve a negro */
.site-header.is-stuck .lang-switch { color: var(--color-black); }

/* ---------------------------------------------------------------
   PIE (versión mínima provisional)
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   PIE (franja "back to top" + banda del wordmark + créditos)
   --------------------------------------------------------------- */
.site-footer {
	background: #121212;
	color: var(--color-white);
	display: flex;
	flex-direction: column;
}

/* Franja blanca superior con "back to top" */
.site-footer__topbar { background: var(--color-white); }
.site-footer__topbar-inner {
	max-width: var(--content-max);
	margin-inline: auto;
	padding: var(--space-4) var(--gutter);
	display: flex;
	justify-content: flex-end;
}
.site-footer__top {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	background: none;
	border: 0;
	color: var(--color-black);        /* sobre la franja blanca */
	font: var(--font-scroll-link);
	letter-spacing: var(--ls-default);
}
.site-footer__top .icon { transition: transform 0.3s ease; }
.site-footer__top:hover .icon { transform: translateY(-0.25em); }

/* Banda negra con el wordmark (SVG: placa negra con las letras caladas,
   la "l" y la "p" llegan hasta los bordes y se funden con las franjas) */
.site-footer__brand {
	flex: 1 0 auto;
	display: flex;
	justify-content: center;
	overflow: hidden;
}
.site-footer__wordmark {
	display: block;
	width: 100%;
	max-width: var(--content-max);
	height: auto;
	user-select: none;
}

/* Línea + créditos */
.site-footer__base-inner {
	max-width: var(--content-max);
	margin-inline: auto;
	padding: var(--space-3) var(--gutter) var(--space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.site-footer__legal { display: flex; gap: var(--space-5); }
.site-footer__credit,
.site-footer__legal a {
	font: var(--font-footer-credit);
	letter-spacing: var(--ls-default);
	color: var(--color-white);
}
.site-footer__legal a { text-decoration: none; }
.site-footer__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* En la home/about el footer va con su alto natural, apoyado arriba de la
   diapositiva; el resto queda en negro de forma continua (sin hueco alrededor
   del wordmark). Ver home.css / about.css para el fondo de esas diapositivas. */

@media (max-width: 720px) {
	.site-footer__base-inner { justify-content: flex-start; gap: var(--space-2) var(--space-4); }
}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 768px) {
	.site-header__inner { padding: var(--space-2) var(--gutter); }
	/* El menú móvil (hamburguesa) se monta en la fase de interacciones. */
}

/* =================================================================
   HEADER sobre el overlay de "projects" (fondo negro)
   ================================================================= */
/* Con el overlay abierto, el idioma va en blanco y el header no pone fondo */
.site-header.is-projects-open .lang-switch { color: var(--color-white); }
.site-header.is-projects-open.is-stuck {
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Bloquea el scroll del fondo cuando el overlay está abierto */
.no-scroll { overflow: hidden; }

/* =================================================================
   BOTÓN "see the project" (caja gris + flecha que se desliza)
   ================================================================= */
.btn-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-grey);
	color: var(--color-white);
	padding: 16px 20px;
	font: var(--font-main-button);
	letter-spacing: var(--ls-default);
	white-space: nowrap;
}
.btn-arrow .icon { transition: transform 0.3s ease; }
.btn-arrow:hover .icon,
.btn-arrow:focus-visible .icon { transform: translateX(0.4em); }

/* =================================================================
   OVERLAY "projects" — carrusel a pantalla completa (fondo negro)
   ================================================================= */
.projects-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;                 /* por debajo de la cabecera (100) */
	background: #121212;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s;
	overflow-y: auto;
}
.projects-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.projects-overlay__inner {
	position: relative;
	min-height: 100vh;
	max-width: var(--content-max);
	margin-inline: auto;
	padding: var(--space-9) var(--gutter) var(--space-9);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.projects-swiper { width: 100%; }

/* --- Preview de proyecto: texto (izq) + vídeo (der) --- */
.projects-overlay .project-preview {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-9);
	align-items: center;
}
.project-preview__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
	color: var(--color-white);
}
.project-preview__heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.project-preview__title {
	font: var(--font-home-title);      /* 56px */
	letter-spacing: var(--ls-default);
	color: var(--color-white);
}
.project-preview__subtitle {
	font: var(--font-home-subtitle);   /* 48px */
	letter-spacing: var(--ls-default);
	color: var(--color-white);
	margin: 0;
}
.project-preview__desc {
	font: var(--font-body);
	letter-spacing: var(--ls-default);
	color: var(--color-white);
	margin: 0;
	max-width: 42ch;                   /* ~3 líneas legibles */
}

.project-preview__media { width: 100%; }
.project-preview__video,
.project-preview__img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: #000;
}

/* --- Navegación prev / next --- */
.projects-nav {
	position: absolute;
	bottom: var(--space-7);
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	background: none;
	border: 0;
	color: var(--color-white);
	font: var(--font-scroll-link);
	letter-spacing: var(--ls-default);
}
.projects-nav--prev { left: var(--gutter); }
.projects-nav--next { right: var(--gutter); }
.projects-nav .icon { transition: transform 0.3s ease; }
.projects-nav--prev:hover .icon { transform: translateX(-0.3em); }
.projects-nav--next:hover .icon { transform: translateX(0.3em); }
.projects-nav.swiper-button-disabled { opacity: 0.35; }

/* --- Responsive del overlay --- */
@media (max-width: 900px) {
	.projects-overlay .project-preview {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}
	.project-preview__title { font-size: 40px; line-height: 1.1; }
	.project-preview__subtitle { font-size: 30px; line-height: 1.15; }
	.projects-overlay__inner { padding-top: calc(var(--space-9) + 40px); }
}

/* =================================================================
   ICONOS DEL BOTÓN "more" (hamburguesa / cierre)
   En escritorio se ocultan (se ve el texto "more/close").
   En móvil se muestran en lugar del texto.
   ================================================================= */
.menu-btn__burger,
.menu-btn__close { display: none; }

/* El enlace "home" del panel solo aparece en móvil */
.more-panel__link--home { display: none; }

/* =================================================================
   MENÚ MÓVIL  (<= 768px)
   ================================================================= */
@media (max-width: 768px) {

	/* Selector de idioma: oculto en la barra móvil (irá en el menú al
	   integrar TranslatePress). */
	.lang-switch { display: none; }

	.site-nav { gap: var(--space-2); }

	/* --- Botón "more" convertido en hamburguesa (icono, sin caja) --- */
	.menu-btn--more {
		background: transparent;
		padding: var(--space-1);
		color: var(--color-black);            /* color adaptativo (abajo) */
	}
	/* Texto y punto: ocultos visualmente pero legibles por lector de pantalla */
	.menu-btn--more .menu-btn__text,
	.menu-btn--more .menu-btn__dot {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.menu-btn--more .menu-btn__burger { display: inline-flex; font-size: 28px; }
	.menu-btn--more .menu-btn__close { display: none; }
	.site-header.is-more-open .menu-btn--more .menu-btn__burger { display: none; }
	.site-header.is-more-open .menu-btn--more .menu-btn__close { display: inline-flex; font-size: 28px; }

	/* Color adaptativo del icono de hamburguesa (como el idioma) */
	.site-header--on-dark .menu-btn--more { color: var(--color-white); }
	.site-header.is-stuck .menu-btn--more { color: var(--color-black); }
	.site-header.is-more-open .menu-btn--more,
	.site-header.is-projects-open .menu-btn--more { color: var(--color-white); }

	/* Logo en blanco cuando el menú móvil (fondo negro) está abierto */
	.site-header.is-more-open .site-logo { color: var(--color-white); }

	/* --- Panel "more" = menú a pantalla completa, fondo negro --- */
	.more-panel {
		position: fixed;
		inset: 0;
		height: 100dvh;
		background: #121212;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		padding-bottom: 0;
		overflow-y: auto;
	}
	.more-panel__inner {
		max-width: none;
		min-height: 100%;
	}
	.more-panel__nav {
		align-items: flex-start;              /* enlaces a la izquierda */
		gap: var(--space-4);
		padding-right: 0 !important;          /* anula el offset de escritorio */
	}
	.more-panel__link {
		font-size: 54px;
		line-height: 1.05;
		font-weight: var(--fw-medium);
		color: var(--color-grey);             /* gris por defecto sobre negro */
		transition: color 0.2s ease;
	}
	.more-panel__link:hover,
	.more-panel__link:focus-visible { color: var(--color-white); }
	.more-panel__link--home { display: block; }

	/* --- Overlay projects en móvil: apilado y flechas solo icono --- */
	.projects-overlay .project-preview { grid-template-columns: 1fr; gap: var(--space-5); }
	.projects-overlay__inner { padding-top: calc(var(--space-9) + 24px); }
	.projects-nav {
		top: 50%;                 /* menu.js lo ajusta al centro del vídeo */
		bottom: auto;
		transform: translateY(-50%);
		z-index: 2;
	}
	.projects-nav span { display: none; }     /* solo flechas, sin texto */
	.projects-nav .icon { font-size: 30px; }
}

/* =================================================================
   Selector de idioma dentro del desplegable "more" (solo móvil)
   ================================================================= */
.more-panel__lang { display: none; }   /* en escritorio no se muestra */

@media (max-width: 768px) {
	/* Más aire entre la cabecera y los items del menú */
	.more-panel__inner {
		display: flex;
		flex-direction: column;
		padding-bottom: var(--space-7);
	}
	.more-panel__nav { margin-top: var(--space-6); }

	/* Idioma: abajo del todo y siempre en blanco */
	.more-panel__lang {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		margin-top: auto;
		color: var(--color-white);
		font: var(--font-scroll-link);
		letter-spacing: var(--ls-default);
	}
	.more-panel__lang .lang-switch__item { color: inherit; font-weight: var(--fw-light); }
	.more-panel__lang .lang-switch__item.is-active { font-weight: var(--fw-medium); }
}