/* 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;
}
.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;
	font-weight: 400;
	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;
	}
}

/* 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;
}
.ppo-header-row .et_pb_image,
.ppo-header-row .et_pb_image .et_pb_image_wrap,
.ppo-header-row .et_pb_image img {
	width: 140px !important;
	max-width: 140px !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: 150px !important;
		max-width: 150px !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: 110px !important;
		max-width: 110px !important;
	}
}