/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — barra de navegación y menú del celular.
   Misma estética que la barra de la landing: blanca translúcida con desenfoque,
   se achica y muestra una línea al hacer scroll.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Barra fija arriba ──────────────────────────────────────────────────────
   Si hay una sesión iniciada, la barra negra de WordPress ocupa los primeros
   píxeles: el header se ubica debajo de ella. */
.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
@media (max-width: 600px) {
	/* En celular la barra de WordPress no queda fija, así que el header va arriba de todo. */
	.site-header { top: 0; }
}

.site-nav {
	position: relative;
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	height: 70px;
	padding: 0 var(--gutter);
	background: rgba(255,255,255,.82);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s, background .3s, height .3s;
}
.site-header.scrolled .site-nav {
	height: 62px;
	border-bottom-color: var(--line);
	background: rgba(255,255,255,.93);
}

/* ── Logo ───────────────────────────────────────────────────────────────── */
.nav-marca { flex: none; display: flex; align-items: center; }
.logo, .custom-logo-link { display: block; line-height: 0; }
.logo img, .custom-logo {
	display: block;
	width: auto; height: 44px;
	transition: height .3s var(--e-out);
}
.site-header.scrolled :is(.logo img, .custom-logo) { height: 38px; }

/* ── Menú principal (compu) ─────────────────────────────────────────────── */
.nav-links {
	display: flex; align-items: center; gap: 2.1rem;
	margin: 0; padding: 0; list-style: none;
	font-size: .9rem; font-weight: 500;
}
.nav-links li { position: relative; list-style: none; margin: 0; }
.nav-links > li { display: flex; align-items: center; gap: .15rem; }

.nav-links a {
	color: var(--ink-2);
	text-decoration: none;
	transition: color .2s;
}
.nav-links > li > a {
	position: relative;
	padding: .35rem 0;
}
/* Línea que se dibuja debajo al pasar el mouse (como en la landing). */
.nav-links > li > a::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
	background: var(--brand);
	transform: scaleX(0); transform-origin: left;
	transition: transform .28s var(--e-out);
}
.nav-links > li > a:hover,
.nav-links > li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--ink); }
.nav-links > li > a:hover::after,
.nav-links > li:is(.current-menu-item, .current-menu-ancestor) > a::after { transform: scaleX(1); }

/* Flechita para abrir submenús */
.submenu-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; padding: 0;
	border: 0; border-radius: var(--r-full);
	background: none; color: var(--ink-3); cursor: pointer;
	transition: background .2s, color .2s;
}
.submenu-toggle svg { width: 14px; height: 14px; transition: transform .25s var(--e-out); }
.submenu-toggle:hover { background: var(--mist-2); color: var(--ink); }
.abierto > .submenu-toggle svg { transform: rotate(180deg); }

/* Submenú desplegable */
.nav-links .sub-menu {
	position: absolute; top: 100%; left: -1rem; z-index: 10;
	min-width: 230px;
	margin: .6rem 0 0; padding: .5rem; list-style: none;
	background: var(--paper);
	border: 1px solid var(--line); border-radius: var(--r-md);
	box-shadow: var(--sh-lg);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .2s var(--e-soft), transform .25s var(--e-out), visibility 0s .25s;
}
/* Puente invisible entre el ítem y el submenú, para que no se cierre al bajar el mouse. */
.nav-links .sub-menu::before {
	content: ''; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem;
}
.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu,
.nav-links li.abierto > .sub-menu {
	opacity: 1; visibility: visible; transform: none;
	transition: opacity .2s var(--e-soft), transform .25s var(--e-out), visibility 0s;
}
.nav-links .sub-menu li { display: flex; align-items: center; justify-content: space-between; }
.nav-links .sub-menu a {
	flex: 1;
	display: block;
	padding: .6rem .85rem;
	border-radius: var(--r-sm);
	font-size: .9rem; font-weight: 500;
}
.nav-links .sub-menu a:hover,
.nav-links .sub-menu .current-menu-item > a { background: var(--mist); color: var(--ink); }
.nav-links .sub-menu .submenu-toggle svg { transform: rotate(-90deg); }

/* Tercer nivel (ej: Ambiental → Limpieza): se abre hacia el costado. */
.nav-links .sub-menu .sub-menu { top: -.5rem; left: 100%; margin: 0 0 0 .4rem; }
.nav-links .sub-menu .sub-menu::before { top: 0; bottom: 0; left: -.6rem; width: .6rem; height: auto; right: auto; }

/* ── Íconos de la derecha ───────────────────────────────────────────────── */
.nav-right { display: flex; align-items: center; gap: .35rem; flex: none; }
.nav-burger { display: none; }

/* ── Celular y tablet ───────────────────────────────────────────────────── */
@media (max-width: 820px) {
	.nav-links { display: none; }
	.nav-burger { display: inline-flex; }
	.logo img, .custom-logo { height: 38px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENÚ DEL CELULAR — panel que entra desde la derecha
   ═══════════════════════════════════════════════════════════════════════════ */
.menu-movil {
	position: fixed; inset: 0 0 0 auto; z-index: 210;
	width: min(340px, 88vw);
	display: flex; flex-direction: column;
	padding: 1.25rem var(--gutter) 2rem;
	overflow-y: auto;
	background: var(--paper);
	box-shadow: -10px 0 50px rgba(4,22,31,.16);
	transform: translateX(102%);
	/* Cerrado queda oculto del todo (si no, su sombra se asoma en el borde de la pantalla). */
	visibility: hidden;
	transition: transform .38s var(--e-out), visibility 0s .38s;
}
.menu-movil.abierto {
	transform: none;
	visibility: visible;
	transition: transform .38s var(--e-out), visibility 0s;
}

.menu-movil-fondo {
	position: fixed; inset: 0; z-index: 205;
	background: rgba(4,22,31,.45);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	opacity: 0; transition: opacity .3s var(--e-soft);
}
.menu-movil-fondo.visible { opacity: 1; }

.mm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mm-head :is(.logo img, .custom-logo) { height: 34px; }

.mm-links, .mm-links .sub-menu { margin: 0; padding: 0; list-style: none; }
.mm-links > li { border-bottom: 1px solid var(--line); }
.mm-links li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.mm-links a {
	flex: 1;
	padding: 1.05rem .25rem;
	font-size: 1.15rem; font-weight: 600;
	color: var(--ink); text-decoration: none;
}
.mm-links .submenu-toggle { width: 40px; height: 40px; }
.mm-links .submenu-toggle svg { width: 18px; height: 18px; }
.mm-links .sub-menu { display: none; width: 100%; padding: 0 0 .6rem .9rem; }
.mm-links li.abierto > .sub-menu { display: block; }
.mm-links .sub-menu a { padding: .6rem .25rem; font-size: 1rem; font-weight: 500; color: var(--ink-2); }
.mm-links :is(.current-menu-item, .current-menu-ancestor) > a { color: var(--brand-700); }

.mm-extra { display: flex; flex-direction: column; gap: .25rem; margin-top: 1.5rem; }
.mm-extra a {
	display: flex; align-items: center; gap: .7rem;
	padding: .75rem .25rem;
	font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.mm-extra svg { width: 20px; height: 20px; color: var(--brand-700); }
.mm-extra .mm-wa { color: var(--brand-700); }

/* Mientras el menú del celular está abierto, la página de atrás no se desplaza
   y el botón flotante de WhatsApp (Joinchat) no tapa el menú. */
body.sin-scroll { overflow: hidden; }
body.sin-scroll .joinchat { visibility: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA TECNOSOL — diseño del boceto de la Home (aprobado por Lucas, 2026-09-24).
   Todo va con .barra-tecnosol / .menu-tecnosol: la barra de Hogar (idéntica a la
   landing) usa las reglas de arriba y no se ve afectada.
   ═══════════════════════════════════════════════════════════════════════════ */
.barra-tecnosol {
	background: rgba(255,255,255,.94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color .25s, box-shadow .25s;
}
.barra-tecnosol.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(11,34,48,.06); }
.barra-tecnosol .site-nav,
.barra-tecnosol.scrolled .site-nav {
	max-width: var(--maxw); margin-inline: auto; box-sizing: content-box;
	height: 72px; gap: 2rem; justify-content: flex-start;
	background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0;
}
.barra-tecnosol :is(.logo img, .custom-logo),
.barra-tecnosol.scrolled :is(.logo img, .custom-logo) { height: 40px; }

/* "Ambiental" es un botón: los botones no heredan la letra sola (usaban Arial). */
.nav-grupo { font-family: inherit; line-height: inherit; letter-spacing: inherit; }

/* Enlaces: pastilla suave al pasar el mouse (sin la línea de abajo) */
.barra-tecnosol .nav-links { margin-left: auto; gap: .25rem; font-size: .92rem; font-weight: 600; }
.barra-tecnosol .nav-links > li > :is(a, .nav-grupo) {
	display: inline-flex; align-items: center; gap: .3rem;
	width: auto; height: auto; padding: .55rem .85rem;
	border-radius: var(--r-full);
	font-size: .92rem; font-weight: 600; color: var(--ink-2);
	transition: color .2s, background .2s;
}
.barra-tecnosol .nav-links > li > a::after { display: none; }
.barra-tecnosol .nav-links > li > :is(a, .nav-grupo):hover,
.barra-tecnosol .nav-links > li.abierto > .nav-grupo { color: var(--ink); background: var(--mist); }
.barra-tecnosol .nav-links > li:is(.current-menu-item, .current-menu-ancestor) > :is(a, .nav-grupo) { color: var(--ink); background: var(--mist); }
.barra-tecnosol .nav-grupo svg { width: 14px; height: 14px; transition: transform .2s; }
.barra-tecnosol .nav-links > li:hover > .nav-grupo svg,
.barra-tecnosol .nav-links > li.abierto > .nav-grupo svg { transform: rotate(180deg); }

/* Submenú: nombre en negrita y bajada chica */
.barra-tecnosol .nav-links .sub-menu { left: 0; min-width: 240px; }
.barra-tecnosol .nav-links .sub-menu a { display: flex; flex-direction: column; padding: .65rem .85rem; }
.sub-nombre { font-size: .9rem; font-weight: 700; color: var(--ink); }
.sub-detalle { font-size: .78rem; font-weight: 500; color: var(--ink-3); }

.barra-tecnosol .nav-right { gap: .25rem; }

/* Con "Inicio" son 6 enlaces: debajo de 1040 px pasan al menú de tres rayas. */
@media (max-width: 1040px) {
	.barra-tecnosol .nav-links { display: none; }
	.barra-tecnosol .nav-right { margin-left: auto; }
	.barra-tecnosol .nav-burger { display: inline-flex; }
}
@media (max-width: 720px) {
	.barra-tecnosol :is(.logo img, .custom-logo) { height: 34px; }
}

/* Menú del celular (Tecnosol) */
.menu-tecnosol .mm-links a,
.menu-tecnosol .mm-links .nav-grupo { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.menu-tecnosol .mm-links .nav-grupo {
	flex: 1; width: auto; height: auto; justify-content: space-between;
	padding: 1.05rem .25rem; border-radius: 0; background: none; text-align: left;
}
.menu-tecnosol .mm-links .nav-grupo:hover { background: none; }
.menu-tecnosol .mm-links .nav-grupo svg { width: 18px; height: 18px; }
.menu-tecnosol .mm-links .sub-menu a { display: flex; flex-direction: column; padding: .55rem .25rem; }
.menu-tecnosol .mm-links .sub-menu .sub-nombre { font-size: 1rem; }
.menu-tecnosol .mm-links > .current-menu-item > a,
.menu-tecnosol .mm-links .current-menu-item .sub-nombre { color: var(--brand-700); }