/* ==========================================================================
   Menú desplegado (04_Componentes_nav.pdf)

   Pantalla completa sobre la foto del edificio en azul. Izquierda: páginas
   principales. Derecha: secciones de la página elegida (o sus subpáginas en
   pestañas). Medidas del diseño a 1440 px.

   Animación: la pantalla baja como una cortina, la foto se acerca, y luego
   entran en cascada las páginas, las pestañas y las filas. Al
   cerrar, todo sale rápido y la cortina sube.
   ========================================================================== */

/* ---------- Botón de los tres puntos en el header ---------- */

.ppo-header-kebab {
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ppo-crema);
	cursor: pointer;
	pointer-events: auto;
}
.ppo-header-kebab svg {
	display: block;
	overflow: visible;
}
.ppo-header-kebab circle {
	transition: transform .35s cubic-bezier(.4, 0, .2, 1), fill .3s ease;
	transform-box: fill-box;
	transform-origin: center;
}
.ppo-header-kebab:hover,
.ppo-header-kebab:focus-visible {
	color: var(--ppo-cielo);
}
.ppo-header-kebab:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
}

/* ES | EN, a la izquierda de los tres puntos; letra igual al menú del header.
   Doble clase: Divi le pone padding a todos los ul del contenido. */
.ppo-header-langs.ppo-header-langs {
	position: absolute;
	right: 72px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 15px;
	letter-spacing: .08em;
	line-height: 1;
	color: var(--ppo-crema);
}
.ppo-header-langs li {
	display: flex;
	align-items: center;
	padding: 0;
}
.ppo-header-langs li + li::before {
	content: "|";
	margin: 0 8px;
	opacity: .6;
}
.ppo-header-langs a {
	display: block;
	padding: 8px 2px;
	color: inherit;
	font-weight: 500;
	transition: color .3s ease;
}
.ppo-header-langs a.is-current {
	font-weight: 600;
}
.ppo-header-langs a:hover,
.ppo-header-langs a:focus-visible {
	color: var(--ppo-cielo);
}
/* El menú del header deja lugar a los idiomas y a los tres puntos. Se aplica
   en dos contenedores anidados, así que el espacio real es el doble. */
@media (min-width: 981px) {
	.ppo-header-section .ppo-header-menu .et_pb_menu_inner_container,
	.ppo-header-section .ppo-header-menu .et_pb_menu__wrap {
		padding-right: 77px !important;
	}
}
@media (min-width: 981px) and (max-width: 1279px) {
	.ppo-header-langs {
		font-size: 13px;
		letter-spacing: .06em;
	}
}

/* En tablet y teléfono reemplaza al menú hamburguesa de Divi */
@media (max-width: 980px) {
	.ppo-header-section .ppo-header-kebab {
		display: flex;
	}
	.ppo-header-menu .et_mobile_nav_menu {
		display: none !important;
	}
}

/* ---------- Contenedor ---------- */

html.ppo-nav-lock,
html.ppo-nav-lock body {
	overflow: hidden;
}

.ppo-nav {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	color: var(--ppo-crema);
	background: var(--ppo-navy);
	font-family: 'Barlow', sans-serif;
	overflow: hidden;
	clip-path: inset(0 0 100% 0);
	transition: clip-path .75s cubic-bezier(.76, 0, .24, 1);
	-webkit-font-smoothing: antialiased;
}
.ppo-nav[hidden] {
	display: none;
}
.ppo-nav.is-open {
	clip-path: inset(0 0 0 0);
}
.ppo-nav.is-closing {
	clip-path: inset(0 0 100% 0);
	transition-duration: .6s;
	transition-delay: .15s;
}

.ppo-nav__bg {
	position: absolute;
	inset: 0;
	background: var(--ppo-navy) url("nav-bg.jpg") 62% center / cover no-repeat;
	transform: scale(1.12);
	transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
}
.ppo-nav.is-open .ppo-nav__bg {
	transform: scale(1);
}

.ppo-nav a {
	color: inherit;
	text-decoration: none;
}
.ppo-nav :focus-visible {
	outline: 1px solid var(--ppo-cielo);
	outline-offset: 4px;
}

/* ---------- Barra superior (calca el header para que logo y X no salten) ---------- */

.ppo-nav__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px 24px;
	flex: none;
}
.ppo-nav__logo img {
	display: block;
	width: 161px;
	height: auto;
}
@media (min-width: 768px) {
	.ppo-nav__logo img {
		width: 173px;
	}
}
@media (min-width: 981px) {
	.ppo-nav__logo img {
		width: 127px;
	}
}
.ppo-nav__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ppo-crema);
	cursor: pointer;
	transition: color .3s ease;
}
.ppo-nav__close svg {
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.ppo-nav__close:hover,
.ppo-nav__close:focus-visible {
	color: var(--ppo-cielo);
}

/* ---------- Cuerpo ---------- */

.ppo-nav__body {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(24px, 6vh, 56px) 24px 32px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 245, 233, .4) transparent;
}
.ppo-nav__main {
	flex: 1;
}
.ppo-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Páginas principales */
.ppo-nav__page-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.ppo-nav__page-link {
	position: relative;
	display: inline-block;
	padding: clamp(3px, .7vh, 6px) 0 clamp(6px, 1.2vh, 10px);
	/* También según el alto: con 7 páginas tiene que entrar en 1280 × 720 */
	font-size: clamp(28px, min(3vw, 5.4vh), 43px);
	font-weight: 200;
	line-height: 1.15;
	letter-spacing: .01em;
	transition: color .3s ease, font-weight .3s ease;
}
/* Línea bajo la página activa: crece de izquierda a derecha */
.ppo-nav__page-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	opacity: .8;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.ppo-nav__page.is-active .ppo-nav__page-link,
.ppo-nav__page.is-current .ppo-nav__page-link {
	font-weight: 700;
}
.ppo-nav__page.is-active .ppo-nav__page-link::after {
	transform: scaleX(1);
}
.ppo-nav__page-link:hover,
.ppo-nav__page-link:focus-visible {
	color: var(--ppo-cielo);
}

/* Botón para abrir las secciones (solo teléfono y tablet) */
.ppo-nav__expand {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.ppo-nav__expand .ppo-nav__chev {
	width: 10px;
	height: 18px;
	transform: rotate(90deg);
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.ppo-nav__expand[aria-expanded="true"] .ppo-nav__chev {
	transform: rotate(-90deg);
}

/* ---------- Columna derecha ---------- */

.ppo-nav__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-bottom: 24px;
}
.ppo-nav__tab,
.ppo-nav__panel-title {
	position: relative;
	margin: 0;
	padding: 0 0 8px;
	border: 0;
	background: none;
	color: var(--ppo-crema);
	font-family: 'Barlow', sans-serif;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .3s ease;
}
.ppo-nav__tab::after,
.ppo-nav__panel-title::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--ppo-cielo);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}
.ppo-nav__tab:hover,
.ppo-nav__tab:focus-visible,
.ppo-nav__tab[aria-selected="true"],
.ppo-nav__panel-title {
	color: var(--ppo-cielo);
}
.ppo-nav__tab[aria-selected="true"],
.ppo-nav__panel-title {
	font-weight: 700;
}
.ppo-nav__tab[aria-selected="true"]::after,
.ppo-nav__panel-title::after {
	transform: scaleX(1);
}
.ppo-nav__panel-title {
	display: inline-block;
	margin-bottom: 24px;
	cursor: default;
}

.ppo-nav__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(9px, 1.4vh, 12px) 0 clamp(8px, 1.3vh, 11px);
	border-bottom: 1px solid rgba(255, 245, 233, .7);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	transition: color .3s ease;
}
.ppo-nav__list a:hover,
.ppo-nav__list a:focus-visible {
	color: var(--ppo-cielo);
}
.ppo-nav__chev {
	flex: none;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.ppo-nav__list a:hover .ppo-nav__chev,
.ppo-nav__list a:focus-visible .ppo-nav__chev {
	transform: translateX(6px);
}

/* ---------- Teléfono y tablet: acordeón ---------- */

@media (max-width: 980px) {
	.ppo-nav__pages {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	.ppo-nav__page-link::after {
		display: none;
	}
	.ppo-nav__page.is-active .ppo-nav__page-link {
		font-weight: 200;
	}
	.ppo-nav__page.is-current .ppo-nav__page-link {
		font-weight: 700;
	}
	.ppo-nav__panel {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .45s;
	}
	.ppo-nav__panel-inner {
		min-height: 0;
		overflow: hidden;
	}
	.ppo-nav__page.is-expanded .ppo-nav__panel,
	.ppo-nav__solo .ppo-nav__panel {
		grid-template-rows: 1fr;
		visibility: visible;
		transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1);
	}
	.ppo-nav__panel-inner {
		padding: 8px 0 16px;
	}
	.ppo-nav__tabs,
	.ppo-nav__panel-title {
		margin-bottom: 12px;
	}
	/* Portada: sus secciones van debajo de la lista */
	.ppo-nav__solo {
		margin-top: 28px;
	}
}

/* ---------- Escritorio: dos columnas ---------- */

@media (min-width: 981px) {
	.ppo-nav__body {
		padding: clamp(24px, 17vh - 40px, 160px) 24px clamp(16px, 4vh - 8px, 48px);
	}
	.ppo-nav__main {
		position: relative;
		padding-left: clamp(40px, 5.8vw, 83px);
	}
	.ppo-nav__pages {
		display: flex;
		flex-direction: column;
		gap: clamp(0px, calc(4.6vh - 30px), 26px);
		width: max-content;
	}
	.ppo-nav__expand {
		display: none;
	}
	/* Las columnas derechas se apilan en el mismo lugar; se ve la activa */
	.ppo-nav__panel {
		position: absolute;
		top: 2px;
		left: 58.3%;
		width: min(385px, 36%);
		visibility: hidden;
		pointer-events: none;
	}
	.ppo-nav__panel .ppo-nav__list {
		/* 273 px a 14 px de letra; crece igual que la letra (18 px) */
		width: 351px;
		max-width: 100%;
	}
	.ppo-nav__tabs {
		/* Con la letra a 15,5 px, las tres pestañas de Experiencia entran
		   en una línea solo si la separación no pasa de 30 px */
		gap: 8px clamp(20px, 1.5vw, 28px);
		margin-bottom: clamp(24px, 5vh, 52px);
	}
	.ppo-nav__panel-title {
		margin-bottom: clamp(24px, 5vh, 52px);
	}
	/* Columna derecha 4 px más grande que en teléfono: se veía muy chica */
	/* Baja un poco hasta 1024 px para que las pestañas sigan en una línea */
	.ppo-nav__tab,
	.ppo-nav__panel-title {
		font-size: clamp(13px, 1.1vw, 15.5px);
	}
	/* También según el alto: los 12 enlaces de Experiencia tienen que
	   entrar en 1280 × 720 (15 px ahí, 18 px desde 900 de alto) */
	.ppo-nav__list a {
		font-size: clamp(15px, 1.667vh + 3px, 18px);
	}
	.is-active > .ppo-nav__panel,
	.ppo-nav__solo.is-active > .ppo-nav__panel {
		visibility: visible;
		pointer-events: auto;
	}
}

/* ==========================================================================
   Movimiento (solo si la persona no pidió reducirlo)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* Tres puntos: se separan al pasar el mouse */
	.ppo-header-kebab:hover circle:first-child,
	.ppo-header-kebab:focus-visible circle:first-child {
		transform: translateY(-2px);
	}
	.ppo-header-kebab:hover circle:last-child,
	.ppo-header-kebab:focus-visible circle:last-child {
		transform: translateY(2px);
	}

	/* X: gira un cuarto de vuelta al entrar y al pasar el mouse */
	.ppo-nav__close svg {
		transform: rotate(-90deg) scale(.4);
		opacity: 0;
		transition: transform .6s cubic-bezier(.4, 0, .2, 1) .35s, opacity .4s ease .35s;
	}
	.ppo-nav.is-open .ppo-nav__close svg {
		transform: none;
		opacity: 1;
	}
	.ppo-nav.is-open .ppo-nav__close:hover svg {
		transform: rotate(90deg);
		transition-delay: 0s;
	}

	/* Se anima la fila de cada página y no el <li>: un transform en el <li>
	   lo volvería la referencia del panel derecho (posición absoluta) y el
	   panel aparecería sobre la columna izquierda durante la entrada. */
	.ppo-nav__logo,
	.ppo-nav__page-row {
		opacity: 0;
		transform: translate3d(0, 40px, 0);
		transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
	}
	.ppo-nav__logo {
		transform: none;
		transition-delay: .35s;
	}
	.ppo-nav.is-open .ppo-nav__logo,
	.ppo-nav.is-open .ppo-nav__page-row {
		opacity: 1;
		transform: none;
	}
	.ppo-nav.is-open .ppo-nav__page-row {
		transition-delay: calc(.35s + var(--i, 0) * 70ms);
	}
	/* La línea de la página activa se dibuja cuando ya entró el texto */
	.ppo-nav.is-open .ppo-nav__page.is-active .ppo-nav__page-link::after {
		transition-delay: .75s;
	}
	.ppo-nav.is-open.is-ready .ppo-nav__page.is-active .ppo-nav__page-link::after {
		transition-delay: 0s;
	}

	/* Columna derecha: pestañas y filas entran en cascada cada vez que se muestra */
	.ppo-nav__tabs,
	.ppo-nav__panel-title,
	.ppo-nav__list li {
		opacity: 0;
		transform: translate3d(0, 18px, 0);
	}
	.ppo-nav__panel.is-shown .ppo-nav__tabs,
	.ppo-nav__panel.is-shown .ppo-nav__panel-title,
	.ppo-nav__panel.is-shown .ppo-nav__list li {
		opacity: 1;
		transform: none;
		transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
	}
	.ppo-nav__panel.is-shown .ppo-nav__list li {
		transition-delay: calc(80ms + min(var(--j, 0), 11) * 35ms);
	}
	/* Primera vez, al abrir: después de las páginas */
	.ppo-nav:not(.is-ready) .ppo-nav__panel.is-shown .ppo-nav__tabs,
	.ppo-nav:not(.is-ready) .ppo-nav__panel.is-shown .ppo-nav__panel-title {
		transition-delay: .55s;
	}
	.ppo-nav:not(.is-ready) .ppo-nav__panel.is-shown .ppo-nav__list li {
		transition-delay: calc(.62s + min(var(--j, 0), 11) * 35ms);
	}

	/* Al cerrar: todo se va junto y rápido, antes de que suba la cortina */
	.ppo-nav.is-closing .ppo-nav__logo,
	.ppo-nav.is-closing .ppo-nav__page-row,
	.ppo-nav.is-closing .ppo-nav__panel.is-shown .ppo-nav__tabs,
	.ppo-nav.is-closing .ppo-nav__panel.is-shown .ppo-nav__panel-title,
	.ppo-nav.is-closing .ppo-nav__panel.is-shown .ppo-nav__list li,
	.ppo-nav.is-closing .ppo-nav__close svg {
		opacity: 0;
		transform: translate3d(0, -16px, 0);
		transition: opacity .25s ease, transform .3s ease;
		transition-delay: 0s;
	}
}

/* Al cambiar de pestaña, las filas nuevas entran en cascada */
@keyframes ppo-nav-row {
	from { opacity: 0; transform: translate3d(0, 18px, 0); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.ppo-nav__panel.is-shown .ppo-nav__list.is-swapped li {
		animation: ppo-nav-row .6s cubic-bezier(.16, 1, .3, 1) both;
		animation-delay: calc(min(var(--j, 0), 11) * 35ms);
	}
}

/* Los enlaces ancla dejan la sección debajo del header fijo */
html {
	scroll-padding-top: 100px;
}
.et_pb_section[tabindex="-1"]:focus {
	outline: none;
}

/* Movimiento reducido: sin cortina ni desplazamientos, solo fundido */
@media (prefers-reduced-motion: reduce) {
	.ppo-nav,
	.ppo-nav.is-open,
	.ppo-nav.is-closing {
		clip-path: none;
		transition: opacity .2s ease;
	}
	.ppo-nav {
		opacity: 0;
	}
	.ppo-nav.is-open {
		opacity: 1;
	}
	.ppo-nav.is-closing {
		opacity: 0;
	}
	.ppo-nav__bg {
		transform: none;
		transition: none;
	}
}