/* =============================================================================
 * 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);
	--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 {
	background: var(--esv-secundario);
	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);
}
.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-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; }

.esv-top.is-active,
.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%;
	left: 0;
	background: #fff;
	border-radius: 8px;
	padding: 10px;
	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; }
.esv-submenu--mega {
	min-width: 560px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 8px;
}
/* Evita que el mega-menú se salga por la derecha del viewport */
.esv-menu > li:last-child .esv-submenu,
.esv-submenu--mega { 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;
	font-size: 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);
}
/* Relleno — CTA principal ("Ingreso inmediato") */
.esv-btn--fill {
	background: var(--esv-secundario);
	color: #fff;
	border: 2px solid var(--esv-secundario);
}
.esv-btn--fill:hover,
.esv-btn--fill:focus-visible {
	background: var(--esv-primario);
	border-color: var(--esv-primario);
	color: #fff;
}
/* Outline — equivalente a .btn-landing del child theme */
.esv-btn--outline {
	background: #fff;
	color: var(--esv-primario);
	border: 2px solid var(--esv-primario);
}
.esv-btn--outline:hover,
.esv-btn--outline:focus-visible {
	background: var(--esv-medio);
	color: #fff;
	border-color: var(--esv-medio);
}

/* 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 — breakpoints del child theme
 * ========================================================================== */
/* Zona apretada: entre 981px y 1240px 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 { min-width: 480px; }
}

@media (max-width: 980px) {
	: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);
	--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: 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; }