/* =========================================================
 * Header OZ-Thema-4.0 — diseño AOV
 * Alto total (desktop): 200px
 *   Fila 1 (contacto):   46px
 *   Fila 2 (principal):  100px
 *   Fila 3 (categorías): 54px
 * ========================================================= */

:root {
	--oz-blue-contact:  #014a7d;   /* barra de contacto (email/teléfono) */
	--oz-blue-main:     #014a7d;   /* fila principal (menú + buscador) */
	--oz-blue-divider:  #55809e;   /* línea entre contacto y fila principal */
	--oz-blue-cats:     #016fac;   /* barra de categorías */
	--oz-cyan:          #00a4d2;   /* botón MENÚ + buscar + iconos */
	--oz-cyan-hover:    #0090ba;
	--oz-text:          #ffffff;
	--oz-brand-w:       240px;     /* ancho del panel blanco del logo */
	--oz-h-row1:        46px;
	--oz-h-row2:        100px;
	--oz-h-row3:        54px;
	--oz-trans:         .2s ease;
	--oz-radius:        6px;
}

/* ---------- Reset puntual ---------- */
.oz-header,
.oz-header * { box-sizing: border-box; }
.oz-header ul { list-style: none; margin: 0; padding: 0; }
.oz-header a { text-decoration: none; color: inherit; }
.oz-header button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; padding: 0; }

/* ---------- Base ---------- */
.oz-header {
	position: relative;
	z-index: 100;
	box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* =========================================================
 *  Parte superior (logo + contacto + fila principal)
 * ========================================================= */
.oz-header__upper {
	display: flex;
	align-items: stretch;
}

/* Logo (panel blanco a la izquierda, abarca filas 1 y 2) */
.oz-header__brand {
	flex: 0 0 var(--oz-brand-w);
	max-width: var(--oz-brand-w);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 18px;
}
.oz-header__brand .custom-logo-link,
.oz-header__brand a { display: inline-flex; align-items: center; }
.oz-header__brand img,
.oz-header__brand .custom-logo {
	max-height: 150px;   /* logo centrado dentro del panel blanco de 200px */
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.oz-header__logo-text { font-weight: 800; font-size: 1.1rem; color: #0c5390; }

.oz-header__upper-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* ---------- Fila 1: barra de contacto ---------- */
.oz-header__contactbar {
	height: var(--oz-h-row1);
	background: var(--oz-blue-contact);
	color: var(--oz-text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 26px;
	border-bottom: 1px solid var(--oz-blue-divider);
}
.oz-header__contact-left { display: flex; align-items: center; gap: 28px; min-width: 0; }
.oz-header__contact-item,
.oz-header__contact-right {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--oz-text);
	font-size: 13.5px;
	line-height: 1;
	white-space: nowrap;
}
.oz-header__contact-item:hover { color: #cdeafa; }
.oz-header__contact-icon { color: var(--oz-cyan); flex: 0 0 auto; }
.oz-header__contact-right { font-size: 13.5px; }

/* ---------- Fila 2: MENÚ + buscador + asesoría ---------- */
.oz-header__main {
	height: var(--oz-h-row2);
	background: var(--oz-blue-main);
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 26px;
}

/* Botón MENÚ (.oz-header__main prefijo = mayor especificidad que el reset de botones) */
.oz-header__main .oz-header__menubtn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	height: 48px;
	padding: 0 22px;
	background: var(--oz-cyan);
	color: #fff;
	border: none;
	border-radius: var(--oz-radius);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.oz-header__main .oz-header__menubtn,
.oz-header__main .oz-header__menubtn svg { color: #fff; }
.oz-header__menubtn svg { flex: 0 0 auto; }

/* Buscador */
.oz-header__search { flex: 1 1 auto; min-width: 0; max-width: 760px; }

/* Asesoría en línea (botón con borde) */
.oz-header__main .oz-header__advice {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin-left: auto;
	height: 48px;
	padding: 0 20px;
	background: transparent;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: var(--oz-radius);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .02em;
	text-transform: uppercase;
	transition: background-color var(--oz-trans), border-color var(--oz-trans);
}
.oz-header__main .oz-header__advice:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.oz-header__main .oz-header__advice,
.oz-header__main .oz-header__advice svg { color: #fff; }
.oz-header__advice svg { flex: 0 0 auto; }

/* ---------- Buscador (live search .ozpls-figma) ---------- */
.oz-header__search .oz-ls,
.oz-header__search .ozpls-figma,
.oz-header__search .ozpls-figma__form { width: 100% !important; }

.oz-header__search .ozpls-figma__form {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 48px;
	margin: 0;
	background: #fff !important;
	border: none !important;
	border-radius: var(--oz-radius) !important;
	overflow: hidden !important;
}
.oz-header__search .ozpls-figma__inputWrap,
.oz-header__search .ozpls-figma__bar {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none;
	position: relative;
}
.oz-header__search .ozpls-figma__input,
.oz-header__search .ozpls-figma__input:focus,
.oz-header__search .ozpls-figma__input:hover,
.oz-header__search .ozpls-figma__input:active {
	width: 100% !important;
	height: 48px !important;
	background: #fff !important;
	border: none !important;
	color: #1a1a1a !important;
	-webkit-text-fill-color: #1a1a1a !important;
	border-radius: var(--oz-radius) 0 0 var(--oz-radius) !important;
	padding: 0 16px !important;
	font-size: 14px !important;
	box-sizing: border-box !important;
	outline: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	appearance: none !important;
}
.oz-header__search .ozpls-figma__input::placeholder {
	color: rgba(0,0,0,.45) !important;
	-webkit-text-fill-color: rgba(0,0,0,.45) !important;
}
.oz-header__search .ozpls-figma__btn {
	position: static !important;
	transform: none !important;
	height: 48px !important;
	width: 56px !important;
	background: var(--oz-cyan) !important;
	border: none !important;
	border-radius: 0 var(--oz-radius) var(--oz-radius) 0 !important;
	cursor: pointer !important;
	z-index: 2 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto;
}
.oz-header__search .ozpls-figma__btn:hover { background: var(--oz-cyan-hover) !important; }
.oz-header__search .ozpls-figma__btnText { display: none !important; }
.oz-header__search .ozpls-figma__btn svg,
.oz-header__search .ozpls-figma__btn img { display: none !important; }
.oz-header__search .ozpls-figma__btn::after {
	content: "";
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
}
.oz-header__search .oz-ls__panel {
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	border-radius: 10px;
}

/* =========================================================
 *  Fila 3: barra de categorías
 * ========================================================= */
.oz-header__catbar {
	height: var(--oz-h-row3);
	background: var(--oz-blue-cats);
	color: var(--oz-text);
	position: relative;
}
.oz-header__catbar-inner {
	height: 100%;
	padding: 0 26px;
}

.oz-catmenu {
	display: flex;
	align-items: stretch;
	height: 100%;
	flex-wrap: nowrap;
}
.oz-catmenu > li { position: relative; }
.oz-catmenu > li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 18px;
	width: 1px;
	background: rgba(255,255,255,.18);
}
.oz-catmenu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 100%;
	padding: 0 18px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color var(--oz-trans);
}
.oz-catmenu > li > a:hover,
.oz-catmenu > li.current-menu-item > a { background: rgba(255,255,255,.12); }

/* Caret en ítems con hijos */
.oz-catmenu > li.menu-item-has-children > a::after {
	content: "";
	width: 9px;
	height: 9px;
	margin-left: 2px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Dropdown de subcategorías (p.ej. Marcas) */
.oz-catmenu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #fff;
	color: #14344c;
	box-shadow: 0 14px 30px rgba(0,0,0,.18);
	border-radius: 0 0 var(--oz-radius) var(--oz-radius);
	padding: 6px 0;
	display: none;
	z-index: 300;
}
.oz-catmenu > li:hover > .sub-menu,
.oz-catmenu > li:focus-within > .sub-menu { display: block; }
.oz-catmenu .sub-menu a {
	display: block;
	padding: 9px 18px;
	color: #14344c;
	font-size: 13.5px;
	font-weight: 500;
	transition: background-color var(--oz-trans), color var(--oz-trans);
}
.oz-catmenu .sub-menu a:hover { background: #eaf4fb; color: var(--oz-cyan-hover); }

/* =========================================================
 *  DRAWER (menú móvil + libreta) — sin cambios funcionales
 * ========================================================= */
.oz-drawer { position: fixed; inset: 0; z-index: 1000; }
.oz-drawer[hidden] { display: none; }

.oz-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.5);
	opacity: 0;
	transition: opacity var(--oz-trans);
}
.oz-drawer.is-open .oz-drawer__backdrop { opacity: 1; }

.oz-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: min(360px, 92vw);
	background: #fff;
	color: #1a1a1a;
	box-shadow: 0 0 30px rgba(0,0,0,.25);
	transition: transform var(--oz-trans);
	display: flex;
	flex-direction: column;
}
.oz-drawer__panel--left  { left: 0;  transform: translateX(-100%); }
.oz-drawer__panel--right { right: 0; transform: translateX(100%); }
.oz-drawer.is-open .oz-drawer__panel { transform: translateX(0); }

.oz-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid #e5e7eb;
}
.oz-drawer__title { font-size: 16px; font-weight: 700; }
.oz-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
}
.oz-drawer__close:hover { background: #f1f3f5; }

.oz-drawer__body { padding: 16px 18px 24px; overflow-y: auto; flex: 1 1 auto; }
.oz-drawer__section + .oz-drawer__section { margin-top: 24px; }
.oz-drawer__section-title {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #64748b;
	margin: 0 0 10px;
	font-weight: 700;
}

/* Menús dentro del drawer (categorías + navegación) */
.oz-drawer__nav-list { display: flex; flex-direction: column; }
.oz-drawer__nav-list li { border-bottom: 1px solid #f1f5f9; }
.oz-drawer__nav-list a {
	display: block;
	padding: 12px 4px;
	color: #1a1a1a;
	font-weight: 500;
	font-size: 15px;
}
.oz-drawer__nav-list a:hover { color: var(--oz-cyan-hover); }
.oz-drawer__nav-list .sub-menu {
	display: block;
	margin: 4px 0 8px;
	padding-left: 12px;
	border-left: 2px solid #e5e7eb;
}
.oz-drawer__nav-list .sub-menu li { border-bottom: none; }
.oz-drawer__nav-list .sub-menu a { padding: 8px 4px; color: #475569; font-size: 14px; }

.oz-drawer__quote {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 24px;
	padding: 14px;
	background: var(--oz-cyan);
	color: #fff !important;
	border-radius: var(--oz-radius);
	font-weight: 700;
}
.oz-drawer__quote:hover { background: var(--oz-cyan-hover); }

/* =========================================================
 * Menú lateral del botón MENÚ — estilo AOV (azul marino).
 * Scopeado a #oz-mobile-drawer (drawer izquierdo) para NO
 * afectar al panel de contacto/asesoría (#oz-notebook-panel).
 * ========================================================= */
#oz-mobile-drawer .oz-drawer__panel {
	background: #0b2340;                 /* azul marino AOV */
	color: #fff;
}

/* Menú centrado verticalmente en el panel */
#oz-mobile-drawer .oz-drawer__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;   /* empieza arriba: se ven y scrollean menú + categorías */
}

/* Cabecera: separador y botón cerrar en blanco translúcido */
#oz-mobile-drawer .oz-drawer__head {
	border-bottom-color: rgba(255, 255, 255, .12);
}
#oz-mobile-drawer .oz-drawer__title { color: #fff; }
#oz-mobile-drawer .oz-drawer__close { color: #fff; }
#oz-mobile-drawer .oz-drawer__close:hover { background: rgba(255, 255, 255, .12); }

/* Lista del menú: enlaces blancos, espaciados y con sangría a la izquierda */
#oz-mobile-drawer .oz-drawer__nav-list li { border-bottom: none; }
#oz-mobile-drawer .oz-drawer__nav-list a {
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	padding: 11px 8px 11px 26px;
}
#oz-mobile-drawer .oz-drawer__nav-list a:hover,
#oz-mobile-drawer .oz-drawer__nav-list a:focus-visible {
	color: var(--oz-cyan);
}

/* Página activa en negrita y blanco (como "Tienda" en la captura) */
#oz-mobile-drawer .oz-drawer__nav-list .current-menu-item > a,
#oz-mobile-drawer .oz-drawer__nav-list .current_page_item > a,
#oz-mobile-drawer .oz-drawer__nav-list .current-menu-ancestor > a {
	color: #fff;
	font-weight: 700;
}

/* Submenús (si los hubiera) */
#oz-mobile-drawer .oz-drawer__nav-list .sub-menu {
	border-left-color: rgba(255, 255, 255, .18);
}
#oz-mobile-drawer .oz-drawer__nav-list .sub-menu a {
	color: rgba(255, 255, 255, .82);
}

/* Título de la sección "Categorías" (visible solo en móvil) */
#oz-mobile-drawer .oz-drawer__section-title {
	color: rgba(255, 255, 255, .6);
	margin-bottom: 10px;
}
/* Categorías un poco más separadas del menú principal (divisor + más aire) */
#oz-mobile-drawer .oz-drawer__section + .oz-drawer__section {
	border-top: 1px solid rgba(255, 255, 255, .18);
	margin-top: 26px;
	padding-top: 22px;
}

/* Libreta (panel de contacto / asesoría) */
.oz-notebook__empty { color: #64748b; font-size: 14px; }
.oz-notebook__item {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid #f1f5f9;
}
.oz-notebook__item:last-child { border-bottom: none; }
.oz-notebook__icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #e6f4fc;
	color: var(--oz-blue-main);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.oz-notebook__body h4 {
	margin: 0 0 4px;
	font-size: 13px;
	color: #64748b;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.oz-notebook__body p { margin: 0; font-size: 14px; color: #1a1a1a; line-height: 1.5; word-wrap: break-word; }
.oz-notebook__body a { color: var(--oz-cyan-hover); }
.oz-notebook__body a:hover { text-decoration: underline; }

body.oz-drawer-open { overflow: hidden; }

/* =========================================================
 *  RESPONSIVE
 * ========================================================= */

/* ≤ 1023px: se apila y la barra de categorías se mueve al drawer */
@media (max-width: 1023px) {
	/* Header móvil/tablet rediseñado:
	   Fila 1: logo + botón MENÚ + botón asesoría
	   Fila 2: buscador (ancho completo)
	   Se ocultan la barra de contacto (correo/teléfono/dirección) y la de categorías.
	   Usamos display:contents en los contenedores intermedios para que sus hijos
	   (MENÚ, buscador, asesoría) entren directo a la grilla de .oz-header__upper. */
	.oz-header__upper {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"logo menu advice"
			"search search search";
		align-items: center;
		column-gap: 10px;
		row-gap: 10px;
		background: var(--oz-blue-main);
		padding: 10px 14px;
	}
	.oz-header__upper-main { display: contents; }
	.oz-header__main { display: contents; }

	/* Fuera: contacto (correo/teléfono/dirección) y barra de categorías */
	.oz-header__contactbar { display: none; }
	.oz-header__catbar { display: none; }

	/* Logo: pastilla blanca a la izquierda (se mantiene como ahora) */
	.oz-header__brand {
		grid-area: logo;
		align-self: stretch;
		flex: 0 0 auto;
		width: auto;
		max-width: none;                     /* no recortar el ancho del logo */
		background: #fff;
		border-radius: 0;
		padding: 0 8px 0 0;                  /* sin padding arriba/izquierda; un poco a la derecha */
		margin: -10px 0 0 -14px;             /* pega al borde superior e izquierdo del header */
		justify-content: flex-start;
		align-items: center;
	}
	.oz-header__brand .custom-logo-link,
	.oz-header__brand a { display: inline-flex; align-items: center; height: auto; }
	/* height explícito + !important: el max-height NO agranda; esto sí fuerza el tamaño */
	.oz-header__brand img,
	.oz-header__brand .custom-logo {
		height: 60px !important;
		width: auto !important;
		max-height: none !important;
		max-width: none !important;
	}

	/* Botón MENÚ junto al logo (hamburguesa + texto "MENÚ") */
	.oz-header__main .oz-header__menubtn {
		grid-area: menu;
		justify-self: start;
		height: 42px;
		padding: 0 16px;
	}

	/* Botón asesoría a la derecha (solo icono) */
	.oz-header__main .oz-header__advice {
		grid-area: advice;
		justify-self: end;
		margin-left: 0;
		height: 42px;
		width: 42px;
		padding: 0;
		justify-content: center;
	}
	.oz-header__advice-text { display: none; }

	/* Buscador: fila de abajo, ancho completo */
	.oz-header__search {
		grid-area: search;
		width: 100%;
		max-width: none;
		min-width: 0;
	}
}

/* ≥ 1024px: el botón MENÚ muestra sólo el menú principal
   (las categorías ya están en la barra azul) */
@media (min-width: 1024px) {
	.oz-drawer__section--cats-mobile { display: none; }
}

/* ≥ 1280px: un poco más de aire */
@media (min-width: 1280px) {
	:root { --oz-brand-w: 260px; }
	.oz-header__contactbar { padding: 0 32px; }
	.oz-header__main { padding: 0 32px; }
	.oz-header__catbar-inner { padding: 0 32px; }
	.oz-catmenu > li > a { padding: 0 20px; font-size: 15px; }
}

/* Reduce-motion */
@media (prefers-reduced-motion: reduce) {
	.oz-drawer__panel,
	.oz-drawer__backdrop,
	.oz-header__menubtn,
	.oz-header__advice { transition: none !important; }
}