/* ==========================================================================
   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, las filas y los legales. 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;
}

/* 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: 140px;
	height: auto;
}
@media (min-width: 768px) {
	.ppo-nav__logo img {
		width: 150px;
	}
}
@media (min-width: 981px) {
	.ppo-nav__logo img {
		width: 110px;
	}
}
.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: 6px 0 10px;
	font-size: clamp(32px, 3vw, 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: 12px 0 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);
}

/* ---------- Legales ---------- */

.ppo-nav__legal {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 40px !important;
}
.ppo-nav__legal a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--ppo-cafe);
	font-size: clamp(15px, 1.25vw, 18px);
	transition: color .3s ease;
}
.ppo-nav__legal .ppo-nav__chev {
	width: 7px;
	height: 13px;
}
.ppo-nav__legal a:hover,
.ppo-nav__legal a:focus-visible {
	color: var(--ppo-crema);
}
.ppo-nav__legal a:hover .ppo-nav__chev {
	transform: translateX(5px);
}

/* ---------- 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, 13vh, 160px) 24px clamp(24px, 5vh, 64px);
	}
	.ppo-nav__main {
		position: relative;
		padding-left: clamp(40px, 5.8vw, 83px);
	}
	.ppo-nav__pages {
		display: flex;
		flex-direction: column;
		gap: clamp(0px, calc(5.4vh - 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 {
		width: 273px;
		max-width: 100%;
	}
	.ppo-nav__tabs {
		gap: 8px clamp(28px, 4vw, 58px);
		margin-bottom: clamp(24px, 5vh, 52px);
	}
	.ppo-nav__panel-title {
		margin-bottom: clamp(24px, 5vh, 52px);
	}
	.is-active > .ppo-nav__panel,
	.ppo-nav__solo.is-active > .ppo-nav__panel {
		visibility: visible;
		pointer-events: auto;
	}
	.ppo-nav .ppo-nav__legal {
		padding-left: clamp(40px, 5.8vw, 83px);
	}
}

/* ==========================================================================
   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,
	.ppo-nav__legal li {
		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,
	.ppo-nav.is-open .ppo-nav__legal li {
		opacity: 1;
		transform: none;
	}
	.ppo-nav.is-open .ppo-nav__page-row {
		transition-delay: calc(.35s + var(--i, 0) * 70ms);
	}
	.ppo-nav.is-open .ppo-nav__legal li {
		transition-delay: .8s;
	}
	.ppo-nav.is-open .ppo-nav__legal li + li {
		transition-delay: .88s;
	}
	/* 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__legal li,
	.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: 80px;
}
.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;
	}
}