/**
 * Vela Estructura — barra de navegación y pie de página.
 *
 * Las medidas y colores por defecto salen de la maqueta del equipo de diseño
 * (nav sólido de 98 px, franja del pie de 9 px, petróleo #0B3846). Todo llega
 * como variable CSS desde los ajustes, así que aquí no hay valores de marca
 * incrustados salvo los de reserva.
 */

/* Valores de reserva por si el plugin se usa sin el tema de Vela.
   Van dentro de una capa a propósito: el CSS sin capa siempre gana, así que
   los tokens del tema mandan sin depender del orden de carga. */
@layer vela-reserva {
	:root {
		--vela-fuente: "Montserrat", -apple-system, BlinkMacSystemFont,
			"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		--vela-fuente-titulo: "Einer Grotesk", var(--vela-fuente);
		--vela-ancho: 1772px;
		--vela-gutter: clamp(20px, 4vw, 74px);
		--vela-curva: cubic-bezier(.22, .61, .36, 1);
		--vela-duracion: .45s;
	}

	@media ( prefers-reduced-motion: reduce ) {
		:root {
			--vela-duracion: .01ms;
		}
	}
}

/* ====================================================== barra de navegación */

.vela-nav-sentinela {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.vela-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	height: var(--vela-nav-alto-top, 110px);
	background-color: var(--vela-nav-fondo-top, transparent);
	color: var(--vela-nav-texto-top, #fff);
	box-shadow: none;
	font-family: var(--vela-fuente);
	transition:
		height var(--vela-duracion) var(--vela-curva),
		background-color var(--vela-duracion) var(--vela-curva),
		color var(--vela-duracion) var(--vela-curva),
		box-shadow var(--vela-duracion) var(--vela-curva),
		transform var(--vela-duracion) var(--vela-curva);
	/* Sin «transform» a proposito: incluirlo aqui convierte a .vela-nav
	   en bloque contenedor de sus hijos position:fixed y encierra el
	   panel movil dentro de la barra. */
	will-change: height, background-color;
}

/* Estado sólido: el cambio de color, de alto y de logo ocurre a la vez. */
.vela-nav.is-scrolled {
	height: var(--vela-nav-alto-scroll, 98px);
	background-color: var(--vela-nav-fondo-scroll, #5eb0c8);
	color: var(--vela-nav-texto-scroll, #0c3846);
	box-shadow: var(--vela-nav-sombra, 0 6px 24px rgba(11, 56, 70, .18));
}

/* Sin superposición: el contenido arranca por debajo de la barra en vez de
   quedar tapado por ella. Es lo que evita que el primer título de una página
   interior se meta debajo. */
body.vela-nav-empuja {
	padding-top: var(--vela-nav-alto-scroll, 98px);
}

/* En ese modo la barra no cambia de alto, así que no hay transición que
   provoque saltos de layout. */
.vela-nav--solida {
	height: var(--vela-nav-alto-scroll, 98px);
}

/* Auto-ocultado opcional al bajar. */
.vela-nav.is-oculto {
	transform: translateY(-100%);
}

.vela-nav__interior {
	display: flex;
	align-items: center;
	gap: 32px;
	/* Sin --vela-nav-ancho hereda el contenedor global del tema, así la
	   barra queda alineada con el resto de secciones del sitio. */
	width: min(100% - (2 * var(--vela-gutter, 20px)), var(--vela-nav-ancho, var(--vela-ancho, 1772px)));
	margin-inline: auto;
}

/* --------------------------------------------------------------- la marca */

.vela-nav__marca {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
	line-height: 0;
}

.vela-nav__logo {
	display: block;
	width: auto;
	transition:
		height var(--vela-duracion) var(--vela-curva),
		opacity var(--vela-duracion) var(--vela-curva),
		transform var(--vela-duracion) var(--vela-curva);
}

/* Los dos logos se superponen y se cruzan en opacidad, para que el cambio
   no provoque salto de layout. */
.vela-nav__logo--top {
	height: var(--vela-nav-logo-top, 36px);
	opacity: 1;
	transform: translateY(0) scale(1);
}

.vela-nav__logo--scroll {
	position: absolute;
	top: 50%;
	left: 0;
	height: var(--vela-nav-logo-scroll, 30px);
	opacity: 0;
	transform: translateY(-50%) scale(.9);
}

/* Solo se usa con el panel móvil abierto. */
.vela-nav__logo--movil {
	display: none;
}

.vela-nav.is-scrolled .vela-nav__logo--top {
	opacity: 0;
	transform: translateY(-6px) scale(.94);
}

.vela-nav.is-scrolled .vela-nav__logo--scroll {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

/* Si solo hay un logo (origen «logo del sitio») no se cruza nada. */
.vela-nav__marca:not(:has(.vela-nav__logo--scroll)) .vela-nav__logo--top,
.vela-nav.is-scrolled .vela-nav__marca:not(:has(.vela-nav__logo--scroll)) .vela-nav__logo--top {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------- el menú */

.vela-nav__nav {
	margin-left: auto;
}

.vela-nav__lista {
	display: flex;
	align-items: center;
	gap: clamp(26px, 4.7vw, 90px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vela-nav__item {
	position: relative;
}

.vela-nav__enlace {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	color: inherit;
	font-family: var(--vela-fuente-titulo);
	font-size: var(--vela-txt-md, 15px);
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

/* Subrayado que crece desde el centro. */
.vela-nav__enlace span {
	position: relative;
	display: inline-block;
}

.vela-nav__enlace span::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 0;
	height: 2px;
	background: currentColor;
	transform: translateX(-50%);
	transition: width .3s var(--vela-curva);
}

.vela-nav__enlace:hover span::after,
.vela-nav__enlace:focus-visible span::after,
.current-menu-item > .vela-nav__enlace span::after {
	width: 100%;
}

.vela-nav__enlace:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 6px;
}

/* ------------------------------------------------------------- submenús */

.vela-nav__toggle {
	display: none;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.vela-nav__item--padre > .vela-nav__enlace::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .3s var(--vela-curva);
}

.vela-nav__item--padre:hover > .vela-nav__enlace::after {
	transform: rotate(225deg) translate(-1px, -1px);
}

.vela-submenu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 10;
	min-width: 230px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(11, 56, 70, .18);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px);
	transition:
		opacity .28s var(--vela-curva),
		transform .28s var(--vela-curva),
		visibility .28s;
}

.vela-nav__item--padre:hover > .vela-submenu,
.vela-nav__item--padre:focus-within > .vela-submenu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Tercer nivel: se abre al lado. */
.vela-submenu .vela-submenu {
	top: 0;
	left: 100%;
	transform: translate(10px, 0);
}

.vela-submenu .vela-nav__item--padre:hover > .vela-submenu,
.vela-submenu .vela-nav__item--padre:focus-within > .vela-submenu {
	transform: translate(0, 0);
}

.vela-submenu .vela-nav__enlace {
	display: flex;
	width: 100%;
	padding: 9px 22px;
	color: var(--vela-nav-texto-scroll, #0c3846);
	font-size: var(--vela-txt-sm, 13px);
	letter-spacing: .06em;
}

.vela-submenu .vela-nav__enlace span::after {
	display: none;
}

.vela-submenu .vela-nav__enlace:hover,
.vela-submenu .vela-nav__enlace:focus-visible {
	background: rgba(94, 176, 200, .16);
}

/* ------------------------------------------------------------- hamburguesa */

.vela-nav__hamburguesa {
	display: none;
	padding: 6px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 26px;
	line-height: 0;
	cursor: pointer;
}

.vela-nav__hamburguesa-cerrar {
	display: none;
}

.vela-nav.is-abierto .vela-nav__hamburguesa-abrir {
	display: none;
}

.vela-nav.is-abierto .vela-nav__hamburguesa-cerrar {
	display: inline-block;
}

.vela-nav__aviso {
	margin: 0;
	padding: 6px 14px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .92);
	font-size: var(--vela-txt-sm, 13px);
}

.vela-nav__aviso a {
	color: #0c3846;
}

/* --------------------------------------------------------------- móvil */

/* --------------------------------------------------------------- móvil */

@media ( max-width: 1024px ) {

	/* La marca y el botón quedan por encima del panel, para que el logo y la
	   aspa de cerrar sigan visibles con el menú abierto. */
	.vela-nav__marca,
	.vela-nav__hamburguesa {
		position: relative;
		z-index: 2;
	}

	.vela-nav__hamburguesa {
		display: block;
		margin-left: auto;
	}

	/* Con el panel abierto manda su propio logo. Sin él, la barra en estado
	   sólido mostraría el logo oscuro sobre un panel oscuro. */
	.vela-nav__logo--movil {
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		height: var(--vela-nav-logo-movil, 45px);
		opacity: 0;
		transform: translateY(-50%) scale(.94);
	}

	.vela-nav.is-abierto .vela-nav__logo--movil {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}

	.vela-nav.is-abierto .vela-nav__logo--top,
	.vela-nav.is-abierto .vela-nav__logo--scroll {
		opacity: 0;
	}

	/* Panel a pantalla completa. */
	.vela-nav__nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		height: 100vh;
		height: 100dvh;
		margin: 0;
		/* Bajo la barra queda un hueco propio para que la primera opción no
		   se pegue al logo. Configurable desde el panel. */
		padding:
			calc(var(--vela-nav-alto-scroll, 98px) + var(--vela-nav-movil-separacion, 64px))
			var(--vela-gutter, 24px)
			48px;
		overflow-y: auto;
		overscroll-behavior: contain;
		align-items: center;
		background: var(--vela-nav-movil-fondo, var(--vela-petroleo, #0c3846));
		color: var(--vela-nav-movil-texto, #fff);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-14px);
		transition:
			opacity .38s var(--vela-curva, ease),
			transform .38s var(--vela-curva, ease),
			visibility .38s;
	}

	.vela-nav.is-abierto .vela-nav__nav {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* Con el panel abierto la barra siempre es legible sobre él. */
	.vela-nav.is-abierto {
		background-color: var(--vela-nav-movil-fondo, var(--vela-petroleo, #0c3846));
		color: var(--vela-nav-movil-texto, #fff);
		box-shadow: none;
	}

	.vela-nav__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		max-width: 560px;
		/* Alineado arriba a propósito: centrarlo en vertical se peleaba con
		   la separación superior y, en pantallas bajas, dejaba las últimas
		   opciones fuera. Así el punto de partida es siempre el mismo y lo
		   que sobra se desplaza con scroll. */
		margin-block: 0;
	}

	/* Cada opción entra escalonada: da sensación de despliegue, no de salto. */
	.vela-nav__lista > .vela-nav__item {
		border-bottom: 1px solid var(--vela-nav-movil-separador, rgba(255, 255, 255, .14));
		opacity: 0;
		transform: translateY(16px);
		transition:
			opacity .4s var(--vela-curva, ease),
			transform .4s var(--vela-curva, ease);
	}

	.vela-nav.is-abierto .vela-nav__lista > .vela-nav__item {
		opacity: 1;
		transform: none;
	}

	.vela-nav.is-abierto .vela-nav__lista > .vela-nav__item:nth-child(1) { transition-delay: .10s; }
	.vela-nav.is-abierto .vela-nav__lista > .vela-nav__item:nth-child(2) { transition-delay: .16s; }
	.vela-nav.is-abierto .vela-nav__lista > .vela-nav__item:nth-child(3) { transition-delay: .22s; }
	.vela-nav.is-abierto .vela-nav__lista > .vela-nav__item:nth-child(4) { transition-delay: .28s; }
	.vela-nav.is-abierto .vela-nav__lista > .vela-nav__item:nth-child(5) { transition-delay: .34s; }
	.vela-nav.is-abierto .vela-nav__lista > .vela-nav__item:nth-child(6) { transition-delay: .40s; }
	.vela-nav.is-abierto .vela-nav__lista > .vela-nav__item:nth-child(n+7) { transition-delay: .46s; }

	.vela-nav__lista > .vela-nav__item > .vela-nav__enlace {
		padding: 20px 44px 20px 0;
		font-size: var(--vela-txt-xl, 21px);
		font-weight: 600;
		letter-spacing: .02em;
	}

	.vela-nav__enlace span::after {
		display: none;
	}

	/* En táctil el submenú se abre con el botón, no al pasar el ratón. */
	.vela-nav__item--padre > .vela-nav__enlace::after {
		display: none;
	}

	.vela-nav__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 8px;
		right: -8px;
		width: 48px;
		height: 48px;
		font-size: 24px;
		transition: transform .32s var(--vela-curva, ease);
	}

	.vela-nav__toggle[aria-expanded="true"] {
		transform: rotate(180deg);
	}

	/* Acordeón. El CSS por sí solo ya abre y cierra: el JavaScript solo
	   afina el max-height al alto real del contenido para que la transición
	   no se quede corta ni larga. Si el JS falla, el menú sigue funcionando. */
	.vela-submenu,
	.vela-submenu .vela-submenu {
		position: static;
		min-width: 0;
		max-height: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background: none;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: max-height .38s var(--vela-curva, ease);
	}

	.vela-nav__item--padre.is-abierto > .vela-submenu {
		max-height: 60vh;
	}

	/* Las reglas de escritorio para :hover y :focus-within tienen mas
	   especificidad que la base de movil, asi que hay que neutralizarlas
	   aqui: al tocar el boton, el <li> recibe :focus-within y el submenu
	   se desplazaba media anchura hacia la izquierda. */
	.vela-nav__item--padre:hover > .vela-submenu,
	.vela-nav__item--padre:focus-within > .vela-submenu,
	.vela-submenu .vela-nav__item--padre:hover > .vela-submenu,
	.vela-submenu .vela-nav__item--padre:focus-within > .vela-submenu {
		transform: none;
		opacity: 1;
		visibility: visible;
	}

	.vela-submenu .vela-nav__item {
		border: 0;
	}

	.vela-submenu .vela-nav__enlace {
		padding: 13px 0 13px 18px;
		color: var(--vela-nav-movil-submenu, #b4e0e1);
		font-size: var(--vela-txt-md, 15px);
		font-weight: 400;
		letter-spacing: .04em;
	}

	.vela-submenu .vela-nav__enlace:hover,
	.vela-submenu .vela-nav__enlace:focus-visible {
		background: none;
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	/* El último elemento respira antes del borde inferior. */
	.vela-submenu > .vela-nav__item:last-child > .vela-nav__enlace {
		padding-bottom: 18px;
	}
}

/* ============================================================ pie de página */

.vela-pie {
	background: var(--vela-pie-fondo, #0b3846);
	color: var(--vela-pie-texto, #fff);
	font-family: var(--vela-fuente);
}

.vela-pie__franja {
	height: var(--vela-pie-franja-alto, 9px);
	background: var(--vela-pie-franja, #5eafc7);
}

.vela-pie__interior {
	width: min(100% - (2 * var(--vela-gutter, 20px)), var(--vela-pie-ancho, var(--vela-ancho, 1772px)));
	margin-inline: auto;
	/* 56 px arriba y 49 px abajo: medidos en la maqueta. */
	padding: clamp(32px, 2.9vw, 56px) 0 clamp(28px, 2.55vw, 49px);
}

.vela-pie__columnas {
	display: grid;
	/* Las fracciones vienen de los ajustes: reproducen los anchos desiguales
	   de la maqueta sin dejar de ser dinámicas. El hueco va como padding de
	   cada columna, para que las pistas midan lo mismo que en el diseño. */
	grid-template-columns: var(--vela-pie-grid, repeat(4, minmax(0, 1fr)));
	gap: 0;
	align-items: start;
}

.vela-pie__columna {
	min-width: 0;
	padding-right: 24px;
}

.vela-pie__titulo {
	margin: 0 0 11px;
	color: inherit;
	font-size: var(--vela-txt-md, 15px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
}

.vela-pie__enlaces {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vela-pie__enlaces li + li {
	margin-top: 10px;
}

.vela-pie__enlaces a,
.vela-pie__texto a {
	color: inherit;
	font-size: var(--vela-txt-md, 15px);
	line-height: 1.2;
	text-decoration: none;
	transition: color .25s var(--vela-curva);
}

.vela-pie__enlaces a:hover,
.vela-pie__enlaces a:focus-visible,
.vela-pie__texto a:hover {
	color: var(--vela-pie-hover, #b4e0e1);
}

.vela-pie__texto p {
	margin: 0;
	font-size: var(--vela-txt-md, 15px);
	line-height: 1.2;
}

/* ------------------------------------------------------------------ redes */

.vela-pie__redes {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vela-pie__redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: inherit;
	font-size: 24px;
	transition:
		color .25s var(--vela-curva),
		transform .25s var(--vela-curva);
}

.vela-pie__redes a:hover,
.vela-pie__redes a:focus-visible {
	color: var(--vela-pie-hover, #b4e0e1);
	transform: translateY(-2px);
}

.vela-icono {
	display: block;
}

/* -------------------------------------------------------- línea y copyright */

.vela-pie__linea {
	height: 0;
	margin: clamp(16px, 1.15vw, 22px) 0 clamp(20px, 1.46vw, 28px);
	border: 0;
	/* Gris verdoso muestreado del diseño, no un blanco translúcido. */
	border-top: 1px solid var(--vela-pie-separador, #47534b);
}

.vela-pie__copyright {
	margin: 0;
	text-align: center;
	font-size: var(--vela-txt-xs, 11px);
	line-height: 1.3;
	color: var(--vela-pie-copyright, #859ba2);
}

.vela-pie__copyright a {
	color: inherit;
}

@media ( max-width: 900px ) {
	.vela-pie__columnas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 0;
	}
}

@media ( max-width: 560px ) {
	.vela-pie__columnas {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}

	.vela-pie__redes {
		justify-content: center;
	}
}