/* JD THEME — Cabecera corporativa KOSMOS */
:root {
	--pz-navy: #071a3b;
	--pz-navy-2: #0b2d62;
	--pz-blue: #1658b8;
	--pz-green: #23b33f;
	--pz-green-hover: #1a9633;
	--pz-white: #ffffff;
	--pz-header-h: 118px;
	--pz-gutter: clamp(18px, 3vw, 58px);
	--pz-ease: cubic-bezier(.4,0,.2,1);
	--pz-page-bg: #ffffff;
}

html { scroll-padding-top: calc(var(--pz-header-h) + 16px); }

.pz-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1000;
	background: linear-gradient(105deg, #07162f 0%, #071a3b 48%, #0a2756 100%);
	color: #fff;
	box-shadow: 0 1px 0 rgba(255,255,255,.10), 0 8px 26px rgba(0,0,0,.14);
}
body.admin-bar .pz-header { top: 32px; }
@media screen and (max-width:782px){ body.admin-bar .pz-header { top:46px; } }

.pz-header__bar {
	max-width: 1920px;
	margin: 0 auto;
	height: var(--pz-header-h);
	padding: 0 var(--pz-gutter);
	display: grid;
	grid-template-columns: clamp(210px, 17vw, 300px) 1fr auto;
	align-items: center;
	gap: clamp(24px, 4vw, 72px);
}

.pz-header__logo-panel {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9px 18px;
}
.pz-header__logo { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#071a3b; text-decoration:none; }
.pz-header__tagline { max-width:260px; color:#18375f; font-size:11px; font-weight:650; line-height:1.25; text-align:center; }
.pz-logo { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; line-height:0; width:100%; }
.pz-logo img { display:block; width:auto; max-width:100%; height:76px; object-fit:contain; }
.pz-logo--text { color:#0b2d62; line-height:1.1; font-size:22px; font-weight:800; text-align:center; }

.pz-header__nav { min-width:0; }
.pz-menu, .pz-menu ul { display:flex; align-items:center; justify-content:center; gap:clamp(28px, 4vw, 76px); margin:0; padding:0; list-style:none; }
.pz-menu li { margin:0; }
.pz-menu a {
	position:relative; display:inline-block; padding:12px 0; color:#fff; text-decoration:none;
	font-size:clamp(13px,.9vw,16px); font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
	transition:color .2s var(--pz-ease);
}
.pz-menu a::after { content:""; position:absolute; left:50%; right:50%; bottom:4px; height:2px; background:#fff; opacity:.9; transition:left .2s,right .2s; }
.pz-menu a:hover, .pz-menu a:focus-visible, .pz-menu .current-menu-item>a, .pz-menu .current_page_item>a { color:#d8e9ff; }
.pz-menu a:hover::after, .pz-menu a:focus-visible::after, .pz-menu .current-menu-item>a::after, .pz-menu .current_page_item>a::after { left:0; right:0; }

.pz-header__actions { display:flex; align-items:center; justify-content:flex-end; }
.pz-online-btn {
	display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 20px;
	border:1px solid rgba(255,255,255,.22); border-radius:14px; background:var(--pz-green); color:#fff!important;
	font-size:clamp(12px,.85vw,15px); font-weight:800; text-transform:uppercase; text-decoration:none!important; white-space:nowrap;
	box-shadow:0 6px 18px rgba(20,145,49,.28); transition:transform .18s,background .18s,box-shadow .18s;
}
.pz-online-btn:hover, .pz-online-btn:focus-visible { background:var(--pz-green-hover); transform:translateY(-1px); box-shadow:0 8px 22px rgba(20,145,49,.35); color:#fff!important; }
.pz-online-btn svg { flex:0 0 auto; }

.pz-burger { display:none; }

/* Drawer móvil */
.pz-scrim { position:fixed; inset:0; z-index:1100; background:rgba(1,10,25,.64); }
.pz-drawer { position:fixed; z-index:1200; top:0; bottom:0; left:0; width:min(88vw,360px); padding:22px; background:#071a3b; color:#fff; transform:translateX(-105%); transition:transform .28s var(--pz-ease); box-shadow:20px 0 50px rgba(0,0,0,.25); }
.pz-drawer[aria-hidden="false"] { transform:translateX(0); }
.pz-drawer__head { display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.15); }
.pz-drawer__title { font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.pz-drawer__close { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid rgba(255,255,255,.25); border-radius:10px; background:transparent; color:#fff; }
.pz-drawer__menu { list-style:none; margin:22px 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.pz-drawer__menu a { display:block; padding:13px 8px; color:#fff; text-decoration:none; font-weight:700; border-bottom:1px solid rgba(255,255,255,.10); }
.pz-online-btn--drawer { width:100%; margin-top:10px; }

@media (max-width: 980px) {
	:root { --pz-header-h: 102px; }
	.pz-header__bar { grid-template-columns:minmax(150px,220px) 1fr auto; gap:18px; }
	.pz-header__nav { display:none; }
	.pz-header__logo-panel { grid-column:1; }
	.pz-header__actions { grid-column:2; justify-content:flex-end; }
	.pz-burger { grid-column:3; display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:10px; border:1px solid rgba(255,255,255,.3); border-radius:10px; background:transparent; }
	.pz-burger span { display:block; width:100%; height:2px; background:#fff; border-radius:2px; }
	.pz-logo img { height:62px; }
	/* Fluido con pendiente empinada: 128px en tablets anchas (980px) y cae
	   rapido a ~85px hacia los 750px, porque la barra azul mide 102px y el
	   logo necesita aire arriba y abajo, no quedar al ras del borde.
	   (a 980px: 128 · a 900px: 113 · a 800px: 94 · a 750px: 85 · piso: 80) */
	.pz-header__logo img { max-height:clamp(80px, calc(19vw - 58px), 128px); width:min(4000px, 260%); }
}
@media (max-width: 620px) {
	:root { --pz-header-h: 92px; }
	.pz-header__bar { padding:0 12px; grid-template-columns:minmax(118px,155px) 1fr 44px; gap:10px; }
	.pz-header__logo-panel { padding:8px 10px; }
	.pz-logo img { height:54px; }
	.pz-online-btn { min-height:40px; padding:0 12px; border-radius:10px; font-size:11px; }
	.pz-online-btn span { display:none; }
	.pz-online-btn--drawer span { display:inline; }
	.pz-online-btn--drawer { min-height:46px; font-size:13px; }
}

.pz-header__logo-panel {
    width: 250px;
	height: 100%;
	margin-top: -15px;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pz-header__logo img {
	width: min(4000px, 250%);
    height: auto;
	max-height: 130px;
    object-fit: contain;
}

@media (max-width:620px) {
	.pz-header__tagline { max-width:145px; font-size:8px; line-height:1.15; }
	/* Fluido: 76px en celulares anchos y se reduce con la pantalla (15vw)
	   hasta 48px en las mas angostas: el logo cede antes de superponerse. */
	.pz-header__logo img { max-height:clamp(48px, 15vw, 76px); width:min(4000px, 220%); }
	/* El bloque de ajustes de abajo fija el panel en 250px: en celular esa
	   jaula es mas ancha que su columna (118-155px) y empuja al resto. */
	.pz-header__logo-panel { width:auto; margin-top:0; }
}