/* ==========================================================================
   Home Fijo (Panal) — hoja de estilos
   Cárgala SOLO en la plantilla "Home Fijo" (ver functions-snippet.php).
   ========================================================================== */

/* Quicksand (variable, peso 300-700), usada en el nav "Trabajos / Contacto" */
@font-face {
	font-family: "Quicksand";
	src: url("../fonts/quicksand-variable.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Dorado tomado del diseño (diseño_home.pdf) */
	--panal-color-acento: #C4810B;
	--panal-color-header-bg: #ffffff;
	/* Fondo del panel de video mientras carga */
	--panal-color-media-bg: #111111;
	--panal-fuente: "Helvetica Neue", Arial, sans-serif;
}

/* Reset mínimo para esta página específica */
html.home-fijo,
body.home-fijo {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden; /* sin scroll: el home es una sola pantalla */
	background: var(--panal-color-header-bg);
	font-family: var(--panal-fuente);
}

.home-shell {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	height: 100dvh; /* corrige la barra de direcciones en móviles */
	overflow: hidden;
}

/* ---- Header ---- */
.home-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center; /* los tres comparten un mismo eje horizontal entre sí */
	align-content: start; /* pero ese eje queda pegado arriba, no en la mitad de los 300px */
	column-gap: clamp(12px, 3vw, 32px);
	padding: 20px clamp(20px, 4vw, 56px) 0;
	background: var(--panal-color-header-bg);

	/* El header ocupa 1/3 de la pantalla y el video (.home-media)
	   los otros 2/3, ya que juntos suman el 100% de .home-shell. */
	flex: 0 0 auto;
	height: 33.3334vh;
	height: 33.3334dvh;
}

.home-header__logo {
	justify-self: start;
}

.home-header__wordmark {
	display: block;
	width: 120px;
	max-width: 45vw; /* resguardo para pantallas muy angostas */
	height: auto;
}

/* ---- Ícono de la abeja/panal (Lottie) ----
   Se anima una vez al cargar y queda estático en el header. */
.home-header__mark {
	justify-self: center;
	width: 190px;
	max-width: 47.5vw; /* resguardo para pantallas muy angostas */
	aspect-ratio: 5 / 3; /* el Lottie del ícono mide 500x300 px */
	height: auto;
	color: var(--panal-color-acento); /* por si el SVG usa currentColor */
}

.home-header__mark svg,
.home-header__mark-fallback {
	display: block;
	/* !important: lottie-web le pone su propio tamaño fijo al <svg>
	   que genera (basado en las medidas originales del archivo);
	   esto obliga a que siempre respete el tamaño del contenedor. */
	width: 100% !important;
	height: 100% !important;
}

.home-header__mark-fallback {
	object-fit: contain;
}

/* ---- Nav ---- */
.home-header__nav {
	justify-self: end;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(4px, 1vw, 8px);
}

.home-header__nav a {
	color: var(--panal-color-acento);
	text-decoration: none;
	font-family: "Quicksand", var(--panal-fuente);
	font-size: 16px; /* 12pt */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500; /* Quicksand Medium en reposo */
	white-space: nowrap;
	transition: font-weight 0.2s ease;
}

.home-header__nav a:hover,
.home-header__nav a:focus-visible {
	font-weight: 700; /* Quicksand Bold al pasar el mouse */
}

/* ---- Panel de video ---- */
.home-media {
	position: relative;
	flex: 1 1 auto;
	min-height: 0; /* imprescindible para que flex respete el alto restante */
	overflow: hidden;
	background: var(--panal-color-media-bg);
}

.home-media__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Vector sobre el video ----
   Centrado horizontalmente y pegado al borde superior del panel de video. */
.home-media__overlay {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(720px, 80vw);
	height: auto;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	animation: panal-overlay-fade-in 1.2s ease forwards;
}
@keyframes panal-overlay-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---- Responsivo ---- */

/* Móviles angostos: si el nav no cabe junto al logo, lo apilamos
   verticalmente alineado a la derecha para no achicar demasiado el texto. */
@media (max-width: 420px) {
	.home-header {
		padding: 0 20px;
	}
}

/* Modo horizontal en teléfonos: reduce el header para dejar más
   espacio al video */
@media (max-height: 480px) and (orientation: landscape) {
	.home-header {
		padding: 0 clamp(16px, 4vw, 32px);
	}
	.home-header__mark {
		width: clamp(40px, 6vw, 60px);
	}
}

/* Pantallas muy grandes: evita que el header quede desproporcionado */
@media (min-width: 1800px) {
	.home-header {
		padding: 40px 64px;
	}
}