/* ============================================================
   layout.css — Estructura: cabecera, menú, slider, footer
   ============================================================ */

/* ---------- Cabecera con logo (fondo.jpg trae el logo horneado) ---------- */
.site-header {
	display: flex;
	align-items: center;            /* centra el contenido verticalmente con el logo */
	min-height: var(--header-h);
	background-image:
		linear-gradient(180deg, rgba(15,27,34,0) 70%, rgba(15,27,34,.06) 100%),
		url('../img/fondo.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* Barra de idioma sobre la cabecera */
.lang-bar {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	width: 100%;
	max-width: var(--w-grid);
	margin: 0 auto;
	padding: var(--sp-3) 4%;
	padding-left: clamp(150px, 19%, 250px);  /* reserva el sitio del logo del fondo */
}

.lang-bar__slogan {
	flex: 1 1 auto;                 /* crece y centra el eslogan en el espacio libre */
	margin: 0;
	text-align: center;
	color: #fff;
	font-family: var(--font-script);
	font-size: clamp(1.2rem, .9rem + 1vw, 1.7rem);
	text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.lang-bar__langs { flex: 0 0 auto; }

.lang-bar__title {
	display: block;
	margin-bottom: var(--sp-2);
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.85);
}
.lang-bar__title u { text-decoration: none; }

.lang-bar__list {
	display: flex;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lang-bar__list li { text-align: center; font-size: 12px; color: rgba(255,255,255,.9); }

.lang-bar__list a {
	display: block;
	border-radius: var(--radius-pill);
	padding: 3px;
	background: rgba(255,255,255,.18);
	backdrop-filter: blur(4px);
	transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.lang-bar__list a:hover { transform: translateY(-2px); background: rgba(255,255,255,.32); }

.lang-bar__list img {
	display: block;
	width: 38px; height: 38px;
	margin: 0 auto;
	border-radius: var(--radius-pill);
	object-fit: cover;
}

.lang-bar__list a[aria-current="true"] {
	background: #fff;
	box-shadow: 0 0 0 2px var(--c-accent), var(--shadow-sm);
}

/* ---------- Menú principal (sticky + cristal) ---------- */
.main-nav {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(8, 32, 17, .72);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
	border-bottom: 1px solid rgba(255,255,255,.08);
	box-shadow: 0 6px 24px rgba(8,28,15,.18);
}

.main-nav__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: var(--w-grid);
	margin: 0 auto;
	padding: 0 4%;
}

.main-nav__menu {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
}

.main-nav__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Marca / logotipo textual (enlace a inicio) — solo visible en móvil */
.main-nav__brand { display: none; }
.main-nav__brand {
	align-items: center;
	color: #fff;
	text-decoration: none;
	font-family: var(--font-nav);
	font-weight: 800;
	font-size: 21px;
	letter-spacing: .01em;
	white-space: nowrap;
}
.main-nav__brand strong { color: var(--c-accent); font-weight: 800; margin-left: .12em; }

/* Botón para plegar/desplegar submenús — solo visible en móvil */
.main-nav__expand { display: none; }

/* ---- Botón hamburguesa (solo móvil/tablet) ---- */
.nav-toggle {
	display: none;
	align-items: center;
	gap: var(--sp-3);
	margin: 0;
	padding: var(--sp-2) var(--sp-3);
	border: 0;
	background: transparent;
	color: #fff;
	font-family: var(--font-nav);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
}
.nav-toggle__text { line-height: 1; }
.nav-toggle__box {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 26px;
	height: 22px;
}
.nav-toggle__line {
	display: block;
	height: 2.5px;
	width: 100%;
	background: #fff;
	border-radius: 2px;
	transition: transform var(--t), opacity var(--t-fast);
}
.main-nav.is-open .nav-toggle__line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.main-nav.is-open .nav-toggle__line:nth-child(2) { opacity: 0; }
.main-nav.is-open .nav-toggle__line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Selector de idioma dentro de la barra sticky (a la derecha).
   Oculto al inicio (el header ya tiene su selector); aparece solo
   cuando el header sale de pantalla y la barra queda fija. */
.nav-langs {
	position: absolute;
	right: max(12px, 3%);
	top: 50%;
	transform: translate(8px, -50%);
	display: flex;
	align-items: center;
	gap: 6px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.main-nav.is-stuck .nav-langs {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(0, -50%);
}
.nav-langs__btn {
	display: block;
	line-height: 0;
	padding: 2px;
	border-radius: 50%;
	background: rgba(255,255,255,.14);
	transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.nav-langs__btn:hover { transform: translateY(-1px) scale(1.07); background: rgba(255,255,255,.3); }
.nav-langs__btn img {
	display: block;
	width: 26px; height: 26px;
	border-radius: 50%;
	object-fit: cover;
}
.nav-langs__btn[aria-current="true"] {
	background: #fff;
	box-shadow: 0 0 0 2px var(--c-accent);
}

.main-nav__list a {
	position: relative;
	display: block;
	padding: var(--sp-4) var(--sp-4);
	color: rgba(255,255,255,.92);
	font-family: var(--font-nav);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--t-fast), background var(--t-fast);
}

.main-nav__item { position: relative; }

/* Subrayado animado de acento */
.main-nav__list > .main-nav__item > a::after,
.main-nav__list > .main-nav__item > .main-nav__row > a::after {
	content: "";
	position: absolute;
	left: var(--sp-4); right: var(--sp-4);
	bottom: 9px;
	height: 2.5px;
	background: var(--c-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t);
}
.main-nav__item:hover > a,
.main-nav__item:focus-within > a,
.main-nav__item:hover > .main-nav__row > a,
.main-nav__item:focus-within > .main-nav__row > a { color: #fff; }
.main-nav__list > .main-nav__item:hover > a::after,
.main-nav__list > .main-nav__item:focus-within > a::after,
.main-nav__list > .main-nav__item:hover > .main-nav__row > a::after,
.main-nav__list > .main-nav__item:focus-within > .main-nav__row > a::after { transform: scaleX(1); }

/* Submenús */
.main-nav__sub {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 240px;
	margin: 0;
	padding: var(--sp-2);
	list-style: none;
	background: rgba(8, 32, 17, .92);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--t), transform var(--t), visibility var(--t);
	z-index: 1000;
}

.main-nav__item:hover > .main-nav__sub,
.main-nav__item:focus-within > .main-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-nav__sub a {
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: 400;
	border-radius: var(--radius-sm);
}
.main-nav__sub a::after { display: none; }
.main-nav__sub a:hover { background: var(--c-primary); color: #fff; }

/* ---------- Menú responsive (hamburguesa) ---------- */
@media (max-width: 880px) {
	/* La cabecera azul con logo + idiomas se oculta: el navbar la reemplaza */
	.site-header { display: none; }

	.main-nav__bar { justify-content: space-between; min-height: 60px; padding: 0 5%; }
	.main-nav__brand { display: inline-flex; }
	.nav-toggle { display: inline-flex; }

	/* IMPORTANTE: sin backdrop-filter en móvil. Un ancestro con
	   backdrop-filter se vuelve el bloque contenedor de los hijos
	   position:fixed, lo que dejaba el overlay atrapado en los 60px de la
	   barra (se veía cortado). Sin él, el overlay se ancla al viewport. */
	.main-nav {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(8, 32, 17, .96);
	}
	.main-nav.is-open {
		position: fixed;
		top: 0; left: 0; right: 0;
		z-index: 1000;
		border-bottom: 1px solid rgba(255,255,255,.10);
	}

	/* Menú: colapsado por defecto */
	.main-nav__menu {
		position: absolute;
		left: 0; right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--t), visibility var(--t);
	}
	/* Menú abierto: panel fijo desde el borde inferior de la barra hasta abajo */
	.main-nav.is-open .main-nav__menu {
		position: fixed;
		top: 60px;
		left: 0; right: 0;
		height: calc(100vh - 60px);       /* fallback */
		height: calc(100dvh - 60px);      /* altura real del viewport móvil */
		max-height: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		overflow-anchor: none;   /* evita el salto de scroll al plegar/desplegar */
		background: rgba(8, 32, 17, .98);
		-webkit-backdrop-filter: blur(18px) saturate(150%);
		backdrop-filter: blur(18px) saturate(150%);
		opacity: 1;
		visibility: visible;
		padding: var(--sp-4) 6% var(--sp-8);
	}

	.main-nav__list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
	.main-nav__item { border-bottom: 1px solid rgba(255,255,255,.08); }

	/* Fila del rótulo (enlace + botón de desplegar) */
	.main-nav__row { display: flex; align-items: center; }
	.main-nav__item > a,
	.main-nav__row > a {
		flex: 1 1 auto;
		padding: var(--sp-4) var(--sp-2);
		font-size: clamp(1.35rem, 1.1rem + 1.8vw, 1.8rem);
		font-weight: 800;
		letter-spacing: .01em;
	}
	.main-nav__list a:hover,
	.main-nav__list a:focus-visible { color: var(--c-accent); }
	.main-nav__item > a::after { display: none; }

	/* Al desplegar, el rótulo queda fijo arriba mientras recorres sus opciones */
	.main-nav__item.is-expanded > .main-nav__row {
		position: sticky;
		top: 0;
		z-index: 2;
		background: rgba(8, 32, 17, .98);
		border-bottom: 1px solid rgba(255,255,255,.12);
	}

	/* Botón para plegar/desplegar submenús */
	.main-nav__expand {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 48px; height: 48px;
		margin: 0;
		border: 0;
		background: transparent;
		color: rgba(255,255,255,.85);
		cursor: pointer;
	}
	.main-nav__expand svg { width: 26px; height: 26px; transition: transform var(--t); }
	.main-nav__item.is-expanded .main-nav__expand svg { transform: rotate(180deg); }
	.main-nav__item.is-expanded .main-nav__expand { color: var(--c-accent); }

	/* Entrada en cascada: solo opacidad (sin transform, para no romper el
	   sticky del rótulo). */
	.main-nav.is-open .main-nav__item {
		opacity: 0;
		animation: nav-item-in .45s ease forwards;
	}
	.main-nav.is-open .main-nav__item:nth-child(1) { animation-delay: .06s; }
	.main-nav.is-open .main-nav__item:nth-child(2) { animation-delay: .12s; }
	.main-nav.is-open .main-nav__item:nth-child(3) { animation-delay: .18s; }
	.main-nav.is-open .main-nav__item:nth-child(4) { animation-delay: .24s; }
	.main-nav.is-open .main-nav__item:nth-child(5) { animation-delay: .30s; }
	.main-nav.is-open .main-nav__item:nth-child(6) { animation-delay: .36s; }

	/* Submenús: acordeón plegable (cerrado por defecto) */
	.main-nav__sub {
		position: static;
		flex-basis: 100%;
		min-width: 0;
		margin: 0;
		padding: 0 0 0 var(--sp-4);
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 0;
		box-shadow: none;
		transform: none;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: max-height var(--t), opacity var(--t), visibility var(--t);
	}
	.main-nav__item.is-expanded > .main-nav__sub {
		max-height: 1200px;
		opacity: 1;
		visibility: visible;
		margin-bottom: var(--sp-3);
	}
	.main-nav__sub a { padding: var(--sp-3) var(--sp-2); font-size: 15px; color: rgba(255,255,255,.78); }

	/* Idiomas: un solo set, centrados al final del menú desplegable */
	.nav-langs {
		position: static;
		justify-content: center;
		gap: var(--sp-4);
		margin: var(--sp-5) 0 0;
		padding-top: var(--sp-5);
		border-top: 1px solid rgba(255,255,255,.10);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}
	.main-nav.is-stuck .nav-langs { transform: none; }
	.nav-langs__btn img { width: 40px; height: 40px; }
}

@keyframes nav-item-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.main-nav.is-open .main-nav__item { opacity: 1; animation: none; }
}

/* Bloquea el scroll del fondo cuando el menú móvil está abierto */
body.nav-open { overflow: hidden; }

/* ---------- Slider (banner hero — Swiper) ---------- */
.slider {
	--swiper-theme-color: var(--c-accent);
	--swiper-navigation-size: 26px;
	width: 100%;
	height: clamp(300px, 44vw, 600px);   /* marco consistente para todas las fotos */
	margin: 0 0 var(--sp-6);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.slider .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;   /* llena el marco de forma inmersiva */
	object-position: center;
}

/* Paginación con la marca verde */
.slider .swiper-pagination-bullet { background: #fff; opacity: .55; }
.slider .swiper-pagination-bullet-active { background: var(--c-accent); opacity: 1; }

/* Flechas: pastilla translúcida para que se vean sobre cualquier foto */
.slider .swiper-button-prev,
.slider .swiper-button-next {
	width: 46px; height: 46px;
	border-radius: 50%;
	background: rgba(12, 47, 23, .45);
	color: #fff;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background var(--t-fast);
}
.slider .swiper-button-prev:hover,
.slider .swiper-button-next:hover { background: var(--c-accent); }
.slider .swiper-button-prev::after,
.slider .swiper-button-next::after { font-size: 18px; font-weight: 700; }

/* Fallback si Swiper (JS/CDN) no cargó: muestra la primera imagen sin romper */
.slider:not(.swiper-initialized) .swiper-wrapper { display: block; }
.slider:not(.swiper-initialized) .swiper-slide { display: none; }
.slider:not(.swiper-initialized) .swiper-slide:first-child { display: block; height: 100%; }

/* ---------- Footer ---------- */
.site-footer {
	margin-top: var(--sp-8);
	color: rgba(255,255,255,.85);
	font-size: 15px;
	background: var(--c-footer-bg);
}

.site-footer__block {
	max-width: var(--w-wide);
	margin: 0 auto;
	text-align: center;
	padding: var(--sp-6) var(--sp-4);
}
.site-footer__block + .site-footer__block { border-top: 1px solid rgba(255,255,255,.08); }

.site-footer__block p { margin: var(--sp-2) 0; }
.site-footer__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-lg);
	color: #fff;
	letter-spacing: .01em;
}
.site-footer__pay { max-width: 760px; margin: var(--sp-2) auto; color: rgba(255,255,255,.7); }
.site-footer a { color: var(--c-accent); }
.site-footer a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
	.lang-bar { flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) 4%; }
	.lang-bar__slogan { flex-basis: auto; }
}