/* =============================================================================
 * ESVIDAS HEADER — CSS
 * Todas las clases van prefijadas .esv- para no colisionar con Divi ni con el
 * child theme. Los colores/tipos se leen del child theme; los fallbacks
 * permiten que el header funcione aunque el theme no cargue.
 * ========================================================================== */

/* Tokens de altura en :root — los necesita también .esv-spacer, que vive
   fuera de .esv-header.
   Los del logo se exponen aquí a propósito: así se ajustan desde el
   style.css del tema hijo sin tocar el plugin (y sin que el zip los pise):

     :root { --esv-logo-h: 80px; --esv-logo-h-sm: 60px; }

   Si cambias --esv-logo-h, revisa --esv-bar-h: el logo debe caber. */
:root {
	--esv-bar-h:    84px;
	--esv-bar-h-sm: 62px;
	--esv-util-h:   38px;

	--esv-logo-h:       74px;  /* alto en reposo */
	--esv-logo-h-scrl:  50px;  /* alto con el header encogido */
	--esv-logo-h-sm:    55px;  /* alto en móvil */
	--esv-logo-max-w:  180px;  /* tope de ancho */
}

.esv-header {
	--esv-primario:   var(--color-primario, #07a9b1);
	--esv-secundario: var(--color-secundario, #329198);

	/* Teal para poner DEBAJO de texto blanco (barra de utilidad y CTA relleno).
	   Ni el primario de Montealto (#07a9b1) ni el de Esvidas (#16ABB2) llegan a
	   contraste con blanco encima; este par sí es usable. Se puede sobreescribir
	   desde el child theme con --color-teal-texto / --color-teal-texto-hover,
	   o por PHP con el filtro esvh_colors. */
	--esv-teal-texto:       var(--color-teal-texto, #0E8C92);
	--esv-teal-texto-hover: var(--color-teal-texto-hover, #0B7276);

	--esv-medio:      var(--color-medio, #9dcdca);
	--esv-claro:      var(--color-claro, #c0dbd4);
	--esv-fondo:      var(--color-fondo, #f7f8f6);
	--esv-blanco:     var(--color-blanco, #ffffff);
	--esv-texto:      var(--color-texto, #1a1a1a);
	--esv-subrayado:  var(--color-subrayado, #DCE9E5);

	--esv-fuente:     'Montserrat', sans-serif;
	--esv-fuente-alt: 'EB Garamond', Garamond, serif;
	--esv-text-btn:   var(--text-btn, clamp(0.9rem, 0.4vw + 0.85rem, 1rem));
	--esv-text-small: var(--text-small, clamp(0.85rem, 0.5vw, 0.95rem));

	--esv-max:      1280px; /* ancho útil del header (el resto del sitio usa 1080) */
	--esv-ease:     0.3s ease;
	/* Por encima de Divi pero por debajo de .video-modal (99999) */
	--esv-z:        99998;

	/* FIXED, no sticky. Un header que cambia de altura NO puede estar en el
	   flujo: al encoger desplaza el contenido, el scroll anchoring de Chrome
	   compensa moviendo el scrollY, eso vuelve a disparar el cambio de estado
	   y entra en bucle. Fuera del flujo + .esv-spacer de altura fija. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--esv-z);
	font-family: var(--esv-fuente);
	line-height: 1.4;
}

/* Reserva el hueco del header a tamaño completo. Altura FIJA: no cambia
   cuando el header encoge, así no hay desplazamiento ni CLS. */
.esv-spacer {
	height: calc(var(--esv-util-h) + var(--esv-bar-h));
}
.esv-spacer--no-utility {
	height: var(--esv-bar-h);
}

.esv-header *,
.esv-header *::before,
.esv-header *::after {
	box-sizing: border-box;
}

/* Con la admin bar de WP el sticky debe bajar 32px */
.admin-bar .esv-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .esv-header { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.esv-header,
	.esv-header * {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- Barra de utilidad superior ---------- */
.esv-utility {
	/* Texto blanco a 13px: hace falta el teal oscuro, no el secundario. */
	background: var(--esv-teal-texto);
	color: #fff;
	height: var(--esv-util-h);
	overflow: hidden;
	transition: height var(--esv-ease), opacity var(--esv-ease);
}
.esv-utility-inner {
	max-width: var(--esv-max);
	margin: 0 auto;
	height: var(--esv-util-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 0 26px;
	font-size: 13px;
	font-weight: 500;
}
.esv-util-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	text-decoration: none;
}
.esv-util-item:hover { color: #fff; opacity: 0.85; }
.esv-util-item svg {
	width: 16px; height: 16px;
	stroke: #fff; fill: none;
	stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.esv-util-group { display: flex; align-items: center; gap: 22px; }
.esv-header[data-state="scrolled"] .esv-utility { height: 0; opacity: 0; }

/* ---------- Barra principal ---------- */
.esv-bar {
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	transition: background var(--esv-ease), box-shadow var(--esv-ease);
}
/* Sin soporte de backdrop-filter → fondo más opaco para no perder contraste */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.esv-bar { background: rgba(255, 255, 255, 0.94); }
}
.esv-header[data-state="scrolled"] .esv-bar {
	background: #fff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.09);
	/* El fondo ya es opaco: el blur no se ve pero la GPU lo seguiría
	   calculando en cada frame de scroll. Se apaga. */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.esv-bar-inner {
	max-width: var(--esv-max);
	margin: 0 auto;
	height: var(--esv-bar-h);
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 0 26px;
	transition: height var(--esv-ease);
}
.esv-header[data-state="scrolled"] .esv-bar-inner { height: var(--esv-bar-h-sm); }

/* ---------- Logo ---------- */
.esv-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	border-radius: 4px;
	text-decoration: none;
}
/* height + width:auto = la caja se ajusta al logo. NO pongas una height
   grande con object-fit:contain: eso crea una caja alta con el logo
   letterboxeado dentro y barras vacías arriba y abajo. */
.esv-logo-img {
	height: var(--esv-logo-h);
	width: auto;
	max-width: var(--esv-logo-max-w);
	object-fit: contain;
	display: block;
	transition: height var(--esv-ease);
}
.esv-header[data-state="scrolled"] .esv-logo-img { height: var(--esv-logo-h-scrl); }

/* Placeholder mientras no haya logo real */
.esv-logo-box {
	width: 180px; height: 50px;
	border-radius: 6px;
	transition: width var(--esv-ease), height var(--esv-ease), font-size var(--esv-ease);
	background: linear-gradient(135deg, rgba(7,169,177,.14), rgba(157,205,202,.28)),
	            repeating-linear-gradient(45deg, #e6efec 0 8px, #dce9e5 8px 16px);
	border: 1px dashed rgba(50,145,152,.5);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--esv-fuente-alt);
	font-size: 15px; font-weight: 600; letter-spacing: .02em;
	color: var(--esv-secundario);
	text-align: center;
	padding: 0 8px;
}
.esv-header[data-state="scrolled"] .esv-logo-box { width: 150px; height: 42px; font-size: 13px; }

.esv-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 24px;
}

/* ---------- Menú ---------- */
.esv-menu {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* FIX: flex + nowrap. Sin esto, los items que son enlace Y tienen submenú
   (ej. "Atención a familias") parten el chevron a una segunda línea. */
.esv-menu > li {
	position: relative;
	margin: 0;
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.esv-menu > li::before { content: none; } /* mata bullets heredados de Divi */

.esv-top,
.esv-menu > li > a.esv-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 13px;
	font-family: var(--esv-fuente);
	font-size: var(--esv-text-btn);
	font-weight: 500;
	line-height: 1;
	color: var(--esv-texto);
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}
/* Cuando el item lleva chevron aparte, el enlace cede el padding derecho */
.esv-menu > li.has-children > a.esv-link { padding-right: 4px; }
.esv-top::after,
.esv-menu > li > a.esv-link::after {
	content: "";
	position: absolute;
	left: 13px; right: 13px; bottom: 4px;
	height: 2px;
	background: var(--esv-primario);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--esv-ease);
}
/* OJO con la especificidad de estos selectores. La base del subrayado es
   `.esv-menu > li > a.esv-link::after` (0,2,3); un `.esv-link.is-active::after`
   a secas se queda en (0,2,1) y PIERDE, así que el item activo con URL propia
   no se marcaba. Los `.esv-top` sí funcionaban porque su base es sólo
   `.esv-top::after` (0,1,1). El estado tiene que llevar el selector completo. */
.esv-menu > li:hover .esv-top::after,
.esv-menu > li[data-open="true"] .esv-top::after,
.esv-menu > li > a.esv-link:hover::after,
.esv-menu > li > a.esv-link:focus-visible::after,
.esv-top.is-active::after,
.esv-menu > li > a.esv-link.is-active::after { transform: scaleX(1); }

/* En items con chevron aparte el subrayado no debe morder el texto */
.esv-menu > li.has-children > a.esv-link::after { right: 0; }

/* Mismo caso: la base es `.esv-menu > li > a.esv-link` (0,2,2). */
.esv-top.is-active,
.esv-menu > li > a.esv-link.is-active { font-weight: 600; }

.esv-chev {
	width: 15px; height: 15px;
	stroke: currentColor; fill: none;
	stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
	transition: transform var(--esv-ease);
	flex-shrink: 0;
}
.esv-menu > li:hover .esv-chev,
.esv-menu > li[data-open="true"] .esv-chev { transform: rotate(180deg); }

/* Botón chevron separado (para items que son enlace Y tienen submenú) */
.esv-toggle {
	background: none; border: none; cursor: pointer;
	padding: 11px 13px 11px 0;
	color: var(--esv-texto);
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

/* Focus visible — obligatorio, bien visible sobre fondo claro */
.esv-header a:focus-visible,
.esv-header button:focus-visible,
.esv-acc > summary:focus-visible {
	outline: 3px solid var(--esv-primario);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Dropdowns ---------- */
.esv-submenu {
	position: absolute;
	top: 100%;
	/* La alineación horizontal (left/right) se decide más abajo, en un bloque
	   aparte, para tenerla toda junta. */
	background: #fff;
	border-radius: 8px;
	padding: 10px;
	/* Red de seguridad: nunca más ancho que el viewport, pase lo que pase con
	   el número de items o la longitud de las etiquetas. */
	max-width: calc(100vw - 36px);
	box-shadow: 0 14px 38px rgba(26, 26, 26, 0.14);
	border: 1px solid rgba(50, 145, 152, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity var(--esv-ease), transform var(--esv-ease), visibility var(--esv-ease);
}
/* Puente invisible para que el ratón no pierda el hover al bajar */
.esv-submenu::before {
	content: "";
	position: absolute;
	top: -12px; left: 0; right: 0;
	height: 12px;
}
.esv-menu > li:hover > .esv-submenu,
.esv-menu > li[data-open="true"] > .esv-submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}
.esv-submenu--single { min-width: 250px; }

/* Dos columnas REALES en grid, llenado por filas (1|2 / 3|4 …), que es como
   se lee. Sin número fijo de filas: 6 hijos dan 3 filas y 9 dan 5, la caja
   crece sola. --esv-mega-w se baja en los tramos estrechos más abajo. */
.esv-submenu--mega {
	--esv-mega-w: 560px;
	min-width: var(--esv-mega-w);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 8px;
	align-content: start;
}

/* Alineación del desplegable.
   Por defecto cuelga del borde IZQUIERDO de su item. Sólo los dos últimos
   items se alinean a la derecha, que son los que se saldrían del viewport.
   (Antes TODOS los mega iban a la derecha; con 7 items eso empuja el panel
   de "Centros" o "Psicología" hacia el logo.) */
.esv-submenu { left: 0; right: auto; }
.esv-menu > li:nth-last-child(-n+2) > .esv-submenu { left: auto; right: 0; }
.esv-menu > li:first-child > .esv-submenu { left: 0; right: auto; }

.esv-submenu a {
	display: block;
	padding: 11px 14px;
	border-radius: 6px;
	/* Suelo duro de 15px: --esv-text-small baja a 13.6px en viewports
	   estrechos y el público es adulto-mayor. */
	font-size: max(15px, var(--esv-text-small));
	line-height: 1.35;
	color: var(--esv-texto);
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.esv-submenu--mega a { white-space: normal; }
.esv-submenu a:hover,
.esv-submenu a:focus-visible {
	background: var(--esv-subrayado);
	color: var(--esv-secundario);
}
.esv-submenu a.is-active {
	background: var(--esv-subrayado);
	color: var(--esv-secundario);
	font-weight: 600;
}

/* ---------- Botones ---------- */
.esv-actions { display: flex; align-items: center; gap: 14px; }

.esv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border-radius: 4px;
	padding: 0.6em 1.4em;
	font-family: var(--esv-fuente);
	font-size: var(--esv-text-btn);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--esv-ease), border-color var(--esv-ease), color var(--esv-ease);
}
/* Icono opcional del CTA (esvh_get_cta()['icon']) */
.esv-btn svg {
	width: 18px; height: 18px;
	stroke: currentColor; fill: none;
	stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
	flex-shrink: 0;
}

/* Relleno — CTA principal.
   Texto blanco: va sobre --esv-teal-texto, NO sobre el primario ni el
   secundario. El hover OSCURECE (antes aclaraba al primario, que con blanco
   encima se queda en 2.8:1). */
.esv-btn--fill {
	background: var(--esv-teal-texto);
	color: #fff;
	border: 2px solid var(--esv-teal-texto);
}
.esv-btn--fill:hover,
.esv-btn--fill:focus-visible {
	background: var(--esv-teal-texto-hover);
	border-color: var(--esv-teal-texto-hover);
	color: #fff;
}
/* Outline — equivalente a .btn-landing del child theme */
.esv-btn--outline {
	background: #fff;
	color: var(--esv-teal-texto);
	border: 2px solid var(--esv-teal-texto);
}
.esv-btn--outline:hover,
.esv-btn--outline:focus-visible {
	background: var(--esv-teal-texto);
	color: #fff;
	border-color: var(--esv-teal-texto);
}

/* Punto de urgencia dentro de "Ingreso inmediato".
   Anillo hecho con box-shadow animado, NO con border + scale().
   Al escalar un borde de 2px el navegador tiene que redondear su grosor a
   píxel entero en cada frame, y a este tamaño (9px) eso se ve como una
   vibración. El spread del box-shadow crece limpio a cualquier tamaño. */
.esv-pulse { position: relative; width: 9px; height: 9px; flex-shrink: 0; }
.esv-pulse-dot {
	position: absolute; inset: 0;
	border-radius: 50%;
	background: #fff;
	z-index: 2;
}
.esv-pulse-ring {
	position: absolute; inset: 0;
	border-radius: 50%;
	animation: esv-pulso 2.2s ease-out infinite;
}
@keyframes esv-pulso {
	0%   { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0.6); }
	80%  { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0); }
}

/* ---------- Hamburguesa ---------- */
.esv-burger {
	display: none;
	width: 46px; height: 46px;
	border: none; background: none; cursor: pointer;
	align-items: center; justify-content: center;
	color: var(--esv-texto);
	border-radius: 8px;
	margin-left: auto;
}
.esv-burger svg {
	width: 26px; height: 26px;
	stroke: currentColor; fill: none;
	stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* =============================================================================
 * RESPONSIVE
 * -----------------------------------------------------------------------------
 * ⚠ EL 1024 DE AQUÍ TIENE QUE CUADRAR CON ESVH_BREAKPOINT (esvidas-header.php).
 *
 * El CSS no puede leer constantes de PHP, así que el número está en los dos
 * sitios. El PHP alimenta con esvh_breakpoint() el atributo sizes del logo y
 * el data-breakpoint que lee el JS; si un sitio usa el filtro esvh_breakpoint
 * para moverlo, esvh_breakpoint_css() emite en línea el parche de la banda
 * afectada. Aun así: si tocas 1024 aquí, tócalo también allí.
 *
 * Tramos:
 *   ≤ 1024px            hamburguesa
 *   1025px – 1199px     escritorio comprimido (menú 15px, CTA sólo icono)
 *   1200px – 1240px     escritorio con paddings recortados
 *   ≥ 1241px            escritorio holgado
 * ========================================================================== */

/* Zona apretada: el menú compite con logo + CTA. Se recorta padding y gap
   antes de saltar a hamburguesa. */
@media (max-width: 1240px) {
	.esv-bar-inner { gap: 16px; }
	.esv-right { gap: 16px; }
	.esv-top,
	.esv-menu > li > a.esv-link { padding-left: 9px; padding-right: 9px; }
	.esv-menu > li.has-children > a.esv-link { padding-right: 3px; }
	.esv-toggle { padding-right: 9px; }
	.esv-top::after,
	.esv-menu > li > a.esv-link::after { left: 9px; right: 9px; }
	.esv-menu > li.has-children > a.esv-link::after { right: 0; }
	.esv-submenu--mega { --esv-mega-w: 480px; }
}

/* -----------------------------------------------------------------------------
 * ESTADO INTERMEDIO — 1025px a 1199px (maqueta "Escritorio 1100")
 *
 * El menú cabe, pero justo. Con 7 items de primer nivel (Esvidas) este es el
 * tramo crítico; con 4 (Montealto) no llega a apretar y el CTA conserva texto
 * porque no lleva icono. La regla es genérica, no está atada a ningún sitio.
 * -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1199px) {
	/* Cuentas a 1025px (el peor caso), con 7 items:
	   ancho útil 1025 − 40 de padding = 985
	   logo 155 + 12 + menú ~732 + 12 + CTA 48 = 959  →  entra con 26px de aire.
	   Si añades un octavo item de primer nivel, rehaz esta cuenta. */
	.esv-bar-inner { gap: 12px; padding: 0 20px; }
	.esv-utility-inner { padding: 0 20px; }
	.esv-right { gap: 12px; }

	/* El logo cede ancho antes que el menú: es lo único que se puede encoger
	   sin perder legibilidad ni área táctil. */
	.esv-header { --esv-logo-max-w: 155px; }

	/* gap 0 + padding 9px = 18px entre etiquetas, como la maqueta. */
	.esv-menu { gap: 0; }
	.esv-top,
	.esv-menu > li > a.esv-link {
		padding-left: 9px;
		padding-right: 9px;
		font-size: 15px; /* SUELO. Público adulto-mayor: no baja de aquí. */
	}
	.esv-menu > li.has-children > a.esv-link { padding-right: 2px; }
	.esv-toggle { padding-left: 2px; padding-right: 7px; }
	.esv-top::after,
	.esv-menu > li > a.esv-link::after { left: 9px; right: 9px; }
	.esv-menu > li.has-children > a.esv-link::after { right: 0; }

	.esv-submenu--mega { --esv-mega-w: 460px; }

	/* CTA sólo icono. El texto NO se borra: sigue en el DOM dentro de
	   .esv-cta-label, oculto visualmente, así que el botón conserva nombre
	   accesible aunque el sitio no haya pasado 'aria'. 48×48 supera los 44px
	   de área táctil mínima. Sólo aplica si el CTA lleva icono: sin él
	   (Montealto) el botón se quedaría vacío. */
	.esv-cta.esv-cta--icon {
		position: relative;
		width: 48px;
		height: 48px;
		min-width: 48px;
		padding: 0;
		gap: 0;
		border-radius: 50%;
	}
	.esv-cta.esv-cta--icon .esv-cta-label {
		position: absolute;
		width: 1px; height: 1px;
		margin: -1px; padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
	.esv-cta.esv-cta--icon .esv-pulse { display: none; }
	.esv-cta.esv-cta--icon svg { width: 20px; height: 20px; }
}

/* Hamburguesa. Debe cuadrar con ESVH_BREAKPOINT (ver cabecera del bloque). */
@media (max-width: 1024px) {
	:root { --esv-bar-h: 68px; --esv-bar-h-sm: 58px; }
	.esv-right { display: none; }
	.esv-burger { display: inline-flex; }
	.esv-logo-img { height: var(--esv-logo-h-sm); }
	.esv-logo-box { width: 150px; height: 42px; font-size: 13px; }
	.esv-utility-inner { padding: 0 18px; font-size: 12px; }
	.esv-bar-inner { padding: 0 18px; }
}

@media (max-width: 767px) {
	.esv-util-group { display: none; }
}

/* =============================================================================
 * PANEL MÓVIL (off-canvas)
 * Va FUERA de .esv-header (ver PHP): el header es sticky con z-index y crea
 * un stacking context que atraparía al panel por debajo de los FAB.
 *
 * Mapa de z-index del sitio (medido en producción):
 *   99998  .esv-header      (debajo de .video-modal a propósito)
 *   99999  .video-modal     (child theme)
 *   99999  .fbpro-wrapper   (FAB Pro, impreso en el footer → ganaba por DOM)
 *  100000  .esv-scrim
 *  100001  .esv-mobile
 * ========================================================================== */
.esv-scrim {
	position: fixed;
	inset: 0;
	background: rgba(26, 26, 26, 0.45);
	opacity: 0;
	transition: opacity .35s ease;
	z-index: 100000;
}
.esv-scrim.is-open { opacity: 1; }

.esv-mobile {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(420px, 100%);
	background: #fff;
	transform: translateX(100%);
	transition: transform .35s ease;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	font-family: 'Montserrat', sans-serif;

	--esv-primario:   var(--color-primario, #07a9b1);
	--esv-secundario: var(--color-secundario, #329198);
	/* Mismos tokens que .esv-header: el panel vive fuera de <header>, así que
	   no hereda nada de él. */
	--esv-teal-texto:       var(--color-teal-texto, #0E8C92);
	--esv-teal-texto-hover: var(--color-teal-texto-hover, #0B7276);
	--esv-fondo:      var(--color-fondo, #f7f8f6);
	--esv-texto:      var(--color-texto, #1a1a1a);
	--esv-subrayado:  var(--color-subrayado, #DCE9E5);
	--esv-medio:      var(--color-medio, #9dcdca);
	--esv-fuente:     'Montserrat', sans-serif;
	--esv-fuente-alt: 'EB Garamond', Garamond, serif;
	--esv-text-btn:   var(--text-btn, clamp(0.9rem, 0.4vw + 0.85rem, 1rem));
	--esv-ease:       0.3s ease;
}
.esv-mobile *,
.esv-mobile *::before,
.esv-mobile *::after { box-sizing: border-box; }

/* Con la admin bar de WP el panel no debe quedar debajo */
.admin-bar .esv-mobile,
.admin-bar .esv-scrim { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .esv-mobile,
	.admin-bar .esv-scrim { top: 46px; }
}

.esv-mobile.is-open { transform: none; }
.esv-mobile[hidden],
.esv-scrim[hidden] { display: none; }

.esv-mobile-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	padding: 0 16px;
	border-bottom: 1px solid var(--esv-subrayado);
	flex-shrink: 0;
}
.esv-mobile-top .esv-logo-box { width: 130px; height: 38px; font-size: 12px; }
.esv-mobile-top .esv-logo-img { height: 38px; }
.esv-mobile-close {
	width: 46px; height: 46px;
	border: none; background: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	color: var(--esv-texto);
	border-radius: 8px;
}
.esv-mobile-close svg {
	width: 26px; height: 26px;
	stroke: currentColor; fill: none;
	stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.esv-mobile-list {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.esv-acc { border-bottom: 1px solid var(--esv-subrayado); }
.esv-acc > summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 12px 20px;
	cursor: pointer;
	font-family: var(--esv-fuente);
	font-size: 16px;
	font-weight: 500;
	color: var(--esv-texto);
}
.esv-acc > summary::-webkit-details-marker { display: none; }
.esv-acc > summary::marker { content: ""; }
.esv-acc .esv-chev { width: 20px; height: 20px; }
.esv-acc[open] > summary .esv-chev { transform: rotate(180deg); }
.esv-acc[open] > summary { color: var(--esv-secundario); }

.esv-acc-body { background: var(--esv-fondo); padding: 4px 0 10px; }
.esv-acc-body a {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 8px 20px 8px 34px;
	font-size: 15px; /* suelo del proyecto; antes 14.5px */
	line-height: 1.4;
	color: var(--esv-texto);
	text-decoration: none;
	border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.esv-acc-body a:active { background: var(--esv-subrayado); }
.esv-acc-body a.is-active {
	color: var(--esv-secundario);
	font-weight: 600;
	box-shadow: inset 4px 0 0 var(--esv-primario);
}

.esv-mlink {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 12px 20px;
	font-size: 16px;
	font-weight: 500;
	color: var(--esv-texto);
	text-decoration: none;
	border-bottom: 1px solid var(--esv-subrayado);
}
.esv-mlink.is-active {
	color: var(--esv-secundario);
	box-shadow: inset 4px 0 0 var(--esv-primario);
}

.esv-mobile-foot {
	flex-shrink: 0;
	padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--esv-subrayado);
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.esv-mobile-foot .esv-btn {
	width: 100%;
	padding: 0.85em 1.4em;
	min-height: 48px;
}
.esv-mcall {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	font-size: 13px;
	font-weight: 500;
	color: var(--esv-secundario);
	text-decoration: none;
}
.esv-mcall svg {
	width: 16px; height: 16px;
	stroke: var(--esv-secundario); fill: none;
	stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Bloqueo de scroll del body con el panel abierto */
body.esv-nav-open { overflow: hidden; }