/* PPO Indacochea - Header (mobile-first: Phone -> Tablet 768px -> Desktop 1440px) */

.ppo-header-section.ppo-header-section {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	z-index: 999 !important;
	background-color: transparent !important;
	transition: background-color 0.3s ease;
}

/* Divi envuelve el header en un contenedor con z-index 2: cualquier elemento
   posicionado de la página con el mismo nivel (p. ej. la columna lateral de
   las fichas de área) quedaba por encima al hacer scroll y tapaba los clics. */
.et-l--header > .et_builder_inner_content {
	z-index: 1000 !important;
}

.ppo-header-section.ppo-header-section.is-scrolled {
	background-color: #003360 !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.ppo-header-menu .et_pb_menu__logo-wrap {
	display: none;
}

/* Centrado vertical del logo y el menú dentro del row del header */
.ppo-header-row.ppo-header-row {
	display: flex !important;
	align-items: center !important;
	position: relative;
}

/* Botón de los tres puntos: estilos en ppo-nav.css */
.ppo-header-row .et_pb_column {
	display: flex;
	align-items: center;
}
/* En teléfono (<480 px) Divi deja 30 px debajo de la columna del logo y el
   header crecía de más; en el header no hace falta. */
.ppo-header-row.ppo-header-row .et_pb_column {
	margin-bottom: 0 !important;
}
.ppo-header-row .et_pb_image {
	display: flex;
	align-items: center;
}
.ppo-header-menu.ppo-header-menu {
	display: flex;
	align-items: center;
	width: 100%;
}
.ppo-header-menu .et_pb_menu_inner_container {
	width: 100%;
	align-items: center !important;
}

/* Menú alineado a la derecha (desktop/tablet, nav horizontal) */
.ppo-header-menu .et_pb_menu_inner_container,
.ppo-header-menu .et_pb_menu__wrap {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	padding-right: 40px;
}

@media (max-width: 980px) {
	.ppo-header-menu .et_pb_menu_inner_container,
	.ppo-header-menu .et_pb_menu__wrap {
		padding-right: 0;
	}
}

.ppo-header-menu .et-menu > .menu-item > a {
	font-family: 'Barlow Condensed', sans-serif;
	/* Medium: con 400 la letra se perdía sobre las fotos del hero */
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FFF5E9 !important;
}

.ppo-header-menu .et-menu > .menu-item > a:hover {
	color: #00A7E2 !important;
}

/* Mobile hamburger icon */
.ppo-header-menu .et_mobile_menu_bar::before {
	color: #FFF5E9 !important;
	font-size: 28px;
}

/* Fullscreen mobile dropdown, navy background, large Cirka-style items */
.ppo-header-menu .et_mobile_menu {
	background-color: #003360 !important;
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	padding: 30vh 48px 24px;
	overflow-y: auto;
	box-sizing: border-box;
}

.ppo-header-menu .et_mobile_menu li a {
	font-family: 'Cirka', serif;
	font-weight: 400;
	font-size: 30px;
	color: #FFF5E9 !important;
	border-bottom: none !important;
	padding: 14px 0 !important;
}

.ppo-header-menu .et_mobile_menu li a:hover {
	color: #00A7E2 !important;
}

/*
 * NOTA: Divi colapsa a menú mobile (hamburguesa) por debajo de 980px de
 * forma nativa (JS + CSS internos, en múltiples capas). Nuestro breakpoint
 * de "tablet" es 768px, así que entre 768-979px Divi sigue mostrando el
 * menú mobile en vez del nav horizontal. Forzar esto vía CSS requiere
 * pelear contra varias capas ocultas de Divi y da resultados rotos —
 * pendiente de decisión con el usuario (ver conversación).
 */
@media (min-width: 768px) {
	.ppo-header-menu .et-menu > .menu-item > a {
		font-size: 14px;
	}
}

/* Escritorio angosto: con 8 elementos (desde Pro Bono) el menú no entraba en
   una línea por debajo de 1280 px; se achican el espacio y la letra. */
@media (min-width: 981px) and (max-width: 1279px) {
	.ppo-header-menu .et-menu > .menu-item {
		padding-left: 7px !important;
		padding-right: 7px !important;
	}
	.ppo-header-menu .et-menu > .menu-item > a {
		font-size: 13px;
		letter-spacing: .06em;
	}
}

/* Desktop (1440px) */
@media (min-width: 1440px) {
	.ppo-header-menu .et-menu > .menu-item > a {
		font-size: 15px;
	}
}

/* ==========================================================================
   Divi 5: las filas ya no aplican el ancho ni el tamaño de imagen que se
   configuraron en el módulo, así que se fijan aquí.
   ========================================================================== */

.et_pb_row.ppo-header-row {
	width: 100% !important;
	max-width: 1280px !important;
	padding: 16px 24px !important;
}
.et_pb_row.ppo-hero-row {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
}
/* Logo un 15 % más grande que el diseño original (pedido del cliente):
   161 / 173 / 127 px en teléfono / tablet / escritorio. */
.ppo-header-row .et_pb_image,
.ppo-header-row .et_pb_image .et_pb_image_wrap,
.ppo-header-row .et_pb_image img {
	width: 161px !important;
	max-width: 161px !important;
	height: auto;
}

@media (min-width: 768px) {
	.ppo-header-row .et_pb_image,
	.ppo-header-row .et_pb_image .et_pb_image_wrap,
	.ppo-header-row .et_pb_image img {
		width: 173px !important;
		max-width: 173px !important;
	}
}

@media (min-width: 980px) {
	.ppo-header-row .et_pb_image,
	.ppo-header-row .et_pb_image .et_pb_image_wrap,
	.ppo-header-row .et_pb_image img {
		width: 127px !important;
		max-width: 127px !important;
	}
}

/* Escritorio: la columna del logo se ajusta al logo (era 1/4 de la fila) y
   el menú toma ese espacio, que necesita para ES | EN junto a los tres puntos */
@media (min-width: 981px) {
	.ppo-header-row > .et_pb_column_1_4 {
		flex: none;
		width: auto !important;
		margin-right: 24px !important;
	}
	.ppo-header-row > .et_pb_column_3_4 {
		flex: 1;
		width: auto !important;
		min-width: 0;
	}
}

/* ---------- Sombra para leer el header sobre fotos claras ----------
   Mientras el header es transparente, el hero puede tener manchas claras
   (el bokeh de la portada) detrás del menú. Una sombra navy suave despega
   menú, idiomas y tres puntos. El logo no la lleva: su círculo cian ya lo
   despega y la sombra se notaba sobre fotos claras (Experiencia). Al pasar
   a navy (scroll o perfiles) ya no hace falta y se quita. */
.ppo-header-menu .et-menu > .menu-item > a,
.ppo-header-langs a,
.ppo-header-langs li::before {
	transition: color .3s ease, text-shadow .3s ease;
}
.ppo-header-kebab svg {
	transition: filter .3s ease;
}
body:not(.single-miembro_equipo) .ppo-header-section:not(.is-scrolled) .ppo-header-menu .et-menu > .menu-item > a,
body:not(.single-miembro_equipo) .ppo-header-section:not(.is-scrolled) .ppo-header-langs a,
body:not(.single-miembro_equipo) .ppo-header-section:not(.is-scrolled) .ppo-header-langs li::before {
	text-shadow: 0 1px 2px rgba(0, 20, 40, .55), 0 0 10px rgba(0, 20, 40, .35);
}
body:not(.single-miembro_equipo) .ppo-header-section:not(.is-scrolled) .ppo-header-kebab svg {
	filter: drop-shadow(0 1px 2px rgba(0, 20, 40, .5)) drop-shadow(0 0 8px rgba(0, 20, 40, .3));
}