/**
 * Lomito Inversionista - La barra de arriba.
 *
 * Una pastilla de vidrio que flota sobre el contenido y se queda pegada al
 * bajar. Se monta sobre el markup del tema, asi que casi todo el trabajo es
 * apagar lo que el tema ya trae puesto.
 */

:root {
	/* Alto de la barra. Lo usan el hero y el desplazamiento a las anclas. */
	--lmt-barra-alto: 76px;
}

/* =========================================================================
 * 1. La franja que se queda pegada
 * ====================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
}

/* La franja es solo aire: el color vive en la pastilla.
 *
 * La lista de selectores es larga a proposito. El fondo blanco viene de tres
 * lados: el tema, el bloque de WordPress y una regla nuestra de lomito.css que
 * forzaba el color del header para arreglar el modo claro. Esa ultima usa
 * !important y dos atributos, asi que hay que igualarla para poder ganarle.
 */
.wp-site-blocks > header,
.wp-site-blocks > header .hostinger-ai-menu,
html[data-lomito-theme="light"] .wp-site-blocks > header,
html[data-lomito-theme="light"] .wp-site-blocks > header .hostinger-ai-menu,
html[data-lomito-theme="dark"] .wp-site-blocks > header,
html[data-lomito-theme="dark"] .wp-site-blocks > header .hostinger-ai-menu,
.hostinger-ai-menu.has-background {
	background-color: transparent !important;
	background-image: none !important;
}

.hostinger-ai-menu {
	padding-top: 10px;
	padding-bottom: 10px;
	transition: padding .22s ease;
}

.site-header.esta-pegada .hostinger-ai-menu {
	padding-top: 6px;
	padding-bottom: 6px;
}

/* =========================================================================
 * 2. La pastilla
 * ====================================================================== */
.hostinger-ai-menu-wrapper {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 12px 10px 16px !important;
	border: 1px solid var(--lmt-border);
	border-radius: 18px;
	background: color-mix(in srgb, var(--lmt-surface) 72%, transparent);
	box-shadow: 0 1px 2px rgba(11, 27, 43, .04);
	transition: background .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* El desenfoque va aparte por dos razones.
 *
 * La primera: si el navegador no lo soporta, la pastilla se queda translucida
 * sin mas y el texto se sigue leyendo.
 *
 * La segunda es la importante y costo encontrarla. backdrop-filter convierte al
 * elemento que lo lleva en el bloque contenedor de sus descendientes con
 * position: fixed. El menu de hamburguesa de WordPress se abre justamente con
 * position: fixed e inset: 0 para taparlo todo, asi que al ponerle el vidrio al
 * envoltorio, ese inset: 0 dejaba de referirse a la pantalla y pasaba a
 * referirse a la pastilla: el menu se abria encerrado dentro de la barra, de
 * 341 por 52 pixeles, y solo asomaba la primera opcion. En movil parecia que el
 * boton no servia.
 *
 * Poniendolo en un pseudoelemento el efecto se ve igual, pero el bloque
 * contenedor lo crea el pseudoelemento, que no tiene descendientes, y el menu
 * vuelve a medirse contra la pantalla. NO devuelvas el backdrop-filter al
 * envoltorio. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.hostinger-ai-menu-wrapper::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		pointer-events: none;
		-webkit-backdrop-filter: blur(16px) saturate(170%);
		backdrop-filter: blur(16px) saturate(170%);
	}
}

/* Al bajar, el vidrio se cierra un poco y aparece la sombra: es lo que separa
   la barra del texto que le pasa por debajo. */
.site-header.esta-pegada .hostinger-ai-menu-wrapper {
	background: color-mix(in srgb, var(--lmt-surface) 88%, transparent);
	box-shadow: 0 10px 30px -12px rgba(11, 27, 43, .28);
}

html[data-lomito-theme="dark"] .hostinger-ai-menu-wrapper {
	box-shadow: none;
}

html[data-lomito-theme="dark"] .site-header.esta-pegada .hostinger-ai-menu-wrapper {
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
}

/* Respaldo para navegadores sin color-mix. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.hostinger-ai-menu-wrapper { background: var(--lmt-surface); }
}

/* =========================================================================
 * 3. Marca
 * ====================================================================== */
.hostinger-ai-menu-wrapper > .wp-block-group:first-child {
	gap: 10px !important;
	min-width: 0;
}

.hostinger-ai-menu .wp-block-site-logo img {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	transition: width .22s ease, height .22s ease;
}

.site-header.esta-pegada .wp-block-site-logo img {
	width: 32px;
	height: 32px;
}

/* El tema esconde el nombre del sitio en cuanto detecta que hay logo. Se le
   devuelve con su mismo selector, que es la unica forma de igualar el peso del
   :has() sin recurrir a !important. */
.hostinger-ai-menu .wp-block-group:has(> .wp-block-site-logo img) .hostinger-ai-site-title {
	display: block;
}

.hostinger-ai-site-title {
	margin: 0;
	font-family: var(--lmt-font-display);
	font-size: 1.05rem !important;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.hostinger-ai-site-title a {
	color: var(--lmt-text) !important;
	text-decoration: none;
}

/* =========================================================================
 * 4. Enlaces, boton e interruptor
 * ====================================================================== */
.hostinger-ai-site-navigation-wrapper {
	gap: 10px !important;
	align-items: center;
}

.hostinger-ai-site-navigation .wp-block-navigation__container {
	gap: 4px;
}

.hostinger-ai-site-navigation .wp-block-navigation-item__content {
	padding: 8px 11px;
	border-radius: 10px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--lmt-text-muted);
	text-decoration: none;
	transition: background .16s ease, color .16s ease;
}

.hostinger-ai-site-navigation .wp-block-navigation-item__content:hover,
.hostinger-ai-site-navigation .current-menu-item > .wp-block-navigation-item__content {
	background: var(--lmt-surface-2);
	color: var(--lmt-text);
}

/* El boton del test: lo unico de la barra que grita, y a proposito. */
.lmt-barra-cta {
	display: inline-flex;
	align-items: center;
	flex: none;
	padding: 9px 15px;
	border-radius: 999px;
	background: var(--lmt-accent);
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1;
	color: #fff !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: transform .16s ease, filter .16s ease;
}

.lmt-barra-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.lmt-barra-cta:active { transform: none; }

html[data-lomito-theme="dark"] .lmt-barra-cta { color: #06251a !important; }

.lmt-barra-cta__corto { display: none; }

/* El interruptor de tema, al tamaño de los demas controles. */
.hostinger-ai-menu .lmt-theme-slot { display: inline-flex; flex: none; }

.hostinger-ai-menu .lmt-theme-toggle {
	width: 36px;
	height: 36px;
	border-radius: 999px;
}

/* La hamburguesa del tema, que solo sale en movil. */
.hostinger-ai-site-navigation .wp-block-navigation__responsive-container-open {
	padding: 6px;
	border-radius: 10px;
	color: var(--lmt-text);
}

.hostinger-ai-site-navigation .wp-block-navigation__responsive-container-open:hover {
	background: var(--lmt-surface-2);
}

/* =========================================================================
 * 5. El menu abierto en movil
 * ====================================================================== */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--lmt-bg) !important;
	padding: 20px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.15rem;
	color: var(--lmt-text);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--lmt-text);
}

/* =========================================================================
 * 6. El hero se mete debajo de la barra
 *
 * Solo en las portadas con hero de color: ahi la pastilla queda montada sobre
 * el fondo, como en la referencia. En las demas paginas la barra simplemente
 * flota sobre el contenido y no hay nada que corregir.
 * ====================================================================== */
.lmt-hero,
.lmt-sec-hero {
	margin-top: calc(-1 * var(--lmt-barra-alto));
	padding-top: calc(var(--lmt-barra-alto) + clamp(26px, 5vw, 48px));
}

/* Que las anclas no queden escondidas detras de la barra. */
html {
	scroll-padding-top: calc(var(--lmt-barra-alto) + 12px);
}

/* =========================================================================
 * 7. Movil
 * ====================================================================== */
@media (max-width: 781px) {
	.hostinger-ai-menu-wrapper {
		padding: 8px 10px 8px 12px !important;
		border-radius: 16px;
	}

	.hostinger-ai-menu .wp-block-site-logo img { width: 34px; height: 34px; }
	.site-header.esta-pegada .wp-block-site-logo img { width: 30px; height: 30px; }

	.hostinger-ai-site-title { font-size: 0.98rem !important; }

	.hostinger-ai-site-navigation-wrapper { gap: 6px !important; }

	.lmt-barra-cta { padding: 8px 13px; font-size: 0.84rem; }
	.lmt-barra-cta__largo { display: none; }
	.lmt-barra-cta__corto { display: inline; }

	.hostinger-ai-menu .lmt-theme-toggle { width: 32px; height: 32px; }
}

/* En pantallas muy angostas el nombre estorba mas de lo que aporta: se queda
   el logo, que ya es reconocible. */
@media (max-width: 400px) {
	.hostinger-ai-menu .wp-block-group:has(> .wp-block-site-logo img) .hostinger-ai-site-title {
		display: none;
	}
}

/* =========================================================================
 * 8. El menu abierto en movil
 *
 * Cuando se abre la hamburguesa, WordPress despliega el menu a pantalla
 * completa y pone los submenus en linea. Pero las opciones siguen trayendo el
 * vestido que les pusimos para la barra de escritorio: el submenu con su
 * tarjeta, su sombra y su ancho minimo, y la pagina actual con su pastilla de
 * fondo. Dentro de una pantalla completa eso se ve como piezas sueltas.
 *
 * Aqui se les quita ese vestido. Los selectores van largos a proposito: las
 * reglas de escritorio que hay que ganar viven en lomito.css con cuatro clases,
 * asi que estas necesitan al menos las mismas para imponerse sin !important.
 * ====================================================================== */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding: 20px;
	background-color: var(--lmt-bg);
	color: var(--lmt-text);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 44px;
}

/* En la barra de escritorio, la pagina actual lleva un subrayado de un pixel
   sobre el renglon. Aqui abajo se marca de otra forma, asi que ese subrayado
   solo deja una raya negra suelta. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border: 0;
}

/* Renglones amplios: en el celular se navega con el pulgar, no con el cursor. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 4px 0;
	font-size: 1.12rem;
	font-weight: 700;
}

/* La pagina en la que estas se marca con una linea al costado, no con un
   recuadro de fondo: dentro del menu grande el recuadro parecia un error. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > a {
	background: none;
	padding-left: 12px;
	border-left: 3px solid var(--lmt-accent);
	border-radius: 0;
	color: var(--lmt-accent);
}

/* El submenu deja de ser tarjeta y pasa a ser una sangria. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0;
	margin: 2px 0 8px 3px;
	padding: 0 0 0 16px;
	border: 0;
	border-left: 1px solid var(--lmt-border);
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
	min-height: 42px;
	font-size: 1rem;
	font-weight: 500;
	color: var(--lmt-text-muted);
}

/* El interruptor de tema y la equis se ven mejor separados del borde. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 22px;
	right: 22px;
}

/* =========================================================================
 * 9. Vidrio liquido (sutil)
 *
 * Solo en la capa de navegacion: la pastilla, sus submenus, el menu movil y
 * los botones redondos. El texto que se lee vive fuera de esta capa y se queda
 * igual. Tres ingredientes, en este orden:
 *   - un vidrio que deja ver lo de abajo, desenfocado (el ::before de arriba);
 *   - un brillo en el borde superior, como luz que pega en el canto;
 *   - un reflejo muy suave de arriba hacia abajo sobre el cristal.
 * Quien pide menos transparencia en su sistema recibe superficies solidas.
 * ====================================================================== */
:root {
	--lmt-vidrio-tinte: 64%;
	--lmt-vidrio-tinte-pegada: 80%;
	--lmt-vidrio-canto: rgba(255, 255, 255, .85);
	--lmt-vidrio-borde: rgba(120, 100, 70, .16);
	--lmt-vidrio-reflejo: rgba(255, 255, 255, .42);
	--lmt-vidrio-sombra: 0 8px 28px -14px rgba(60, 45, 20, .26);
	--lmt-vidrio-blur: blur(18px) saturate(180%);
}

html[data-lomito-theme="dark"] {
	--lmt-vidrio-tinte: 58%;
	--lmt-vidrio-tinte-pegada: 76%;
	--lmt-vidrio-canto: rgba(255, 255, 255, .14);
	--lmt-vidrio-borde: rgba(255, 255, 255, .09);
	--lmt-vidrio-reflejo: rgba(255, 255, 255, .06);
	--lmt-vidrio-sombra: 0 10px 30px -12px rgba(0, 0, 0, .6);
	--lmt-vidrio-blur: blur(18px) saturate(150%);
}

/* La pastilla. El reflejo va como capa de fondo para no tocar el ::before,
   que es el que hace el desenfoque (ver la nota de la seccion 2). */
.hostinger-ai-menu-wrapper {
	border-color: var(--lmt-vidrio-borde);
	background:
		linear-gradient(180deg, var(--lmt-vidrio-reflejo), transparent 58%),
		color-mix(in srgb, var(--lmt-surface) var(--lmt-vidrio-tinte), transparent);
	box-shadow:
		inset 0 1px 0 var(--lmt-vidrio-canto),
		inset 0 -1px 0 rgba(255, 255, 255, .04),
		var(--lmt-vidrio-sombra);
}

.site-header.esta-pegada .hostinger-ai-menu-wrapper,
html[data-lomito-theme="dark"] .site-header.esta-pegada .hostinger-ai-menu-wrapper {
	background:
		linear-gradient(180deg, var(--lmt-vidrio-reflejo), transparent 58%),
		color-mix(in srgb, var(--lmt-surface) var(--lmt-vidrio-tinte-pegada), transparent);
	box-shadow:
		inset 0 1px 0 var(--lmt-vidrio-canto),
		var(--lmt-vidrio-sombra);
}

html[data-lomito-theme="dark"] .hostinger-ai-menu-wrapper {
	box-shadow:
		inset 0 1px 0 var(--lmt-vidrio-canto),
		var(--lmt-vidrio-sombra);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.hostinger-ai-menu-wrapper::before {
		-webkit-backdrop-filter: var(--lmt-vidrio-blur);
		backdrop-filter: var(--lmt-vidrio-blur);
	}

	/* Los submenus de escritorio. Son absolutos y no tienen hijos fijos, asi
	   que aqui el desenfoque puede ir en el elemento mismo. */
	.hostinger-ai-site-navigation .wp-block-navigation__submenu-container {
		-webkit-backdrop-filter: var(--lmt-vidrio-blur);
		backdrop-filter: var(--lmt-vidrio-blur);
	}

	/* El menu movil a pantalla completa: vidrio espeso, casi opaco, para que
	   las opciones se lean aunque debajo haya una foto. */
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		-webkit-backdrop-filter: blur(26px) saturate(160%);
		backdrop-filter: blur(26px) saturate(160%);
	}
}

/* Submenus de escritorio: la misma familia que la pastilla. Se limita a
   pantallas anchas para no pisar la version en linea del menu movil. */
@media (min-width: 782px) {
	html[data-lomito-theme] .hostinger-ai-site-navigation .wp-block-navigation__submenu-container,
	html[data-lomito-theme] .hostinger-ai-site-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
		background-color: transparent !important;
	}

	html[data-lomito-theme] .hostinger-ai-site-navigation .wp-block-navigation__submenu-container {
		background:
			linear-gradient(180deg, var(--lmt-vidrio-reflejo), transparent 40%),
			color-mix(in srgb, var(--lmt-surface) 86%, transparent) !important;
		border: 1px solid var(--lmt-vidrio-borde) !important;
		box-shadow:
			inset 0 1px 0 var(--lmt-vidrio-canto),
			var(--lmt-vidrio-sombra) !important;
	}
}

html[data-lomito-theme] .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background-color: color-mix(in srgb, var(--lmt-bg) 88%, transparent) !important;
}

/* Los botones redondos de la barra: gotas de vidrio. */
.hostinger-ai-menu .lmt-theme-toggle,
.hostinger-ai-menu .lmt-bus-btn {
	border-color: var(--lmt-vidrio-borde);
	background:
		linear-gradient(180deg, var(--lmt-vidrio-reflejo), transparent 70%),
		color-mix(in srgb, var(--lmt-surface) 50%, transparent);
	box-shadow: inset 0 1px 0 var(--lmt-vidrio-canto);
}

.hostinger-ai-menu .lmt-theme-toggle:hover,
.hostinger-ai-menu .lmt-bus-btn:hover {
	border-color: var(--lmt-accent);
}

/* El boton del test conserva su color; solo gana el canto de luz. */
.lmt-barra-cta {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .38),
		inset 0 -1px 0 rgba(0, 0, 0, .08);
}

/* Quien pidio menos transparencia en su sistema: superficies solidas. */
@media (prefers-reduced-transparency: reduce) {
	.hostinger-ai-menu-wrapper,
	.site-header.esta-pegada .hostinger-ai-menu-wrapper,
	html[data-lomito-theme="dark"] .site-header.esta-pegada .hostinger-ai-menu-wrapper {
		background: var(--lmt-surface);
	}

	.hostinger-ai-menu-wrapper::before,
	.hostinger-ai-site-navigation .wp-block-navigation__submenu-container,
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	html[data-lomito-theme] .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--lmt-bg) !important;
	}
}

/* Respaldo para navegadores sin color-mix. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.hostinger-ai-menu-wrapper,
	.site-header.esta-pegada .hostinger-ai-menu-wrapper { background: var(--lmt-surface); }
	html[data-lomito-theme] .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--lmt-bg) !important; }
}

/* =========================================================================
 * 10. Ajustes del modo claro
 *
 * La pastilla flota sola: la linea de lado a lado que dejaba la regla vieja
 * del encabezado claro se veia sobre las fotos de portada.
 *
 * Los botones verdes con texto blanco usan el verde oscuro en modo claro:
 * blanco sobre #059669 da 3.8:1 y no alcanza para texto de 14 px; sobre
 * #047857 da 5.5:1. En modo oscuro siguen con su verde claro y texto oscuro.
 * ====================================================================== */
html[data-lomito-theme="light"] .wp-site-blocks > header {
	border-bottom: 0 !important;
}

html[data-lomito-theme="light"] .wp-site-blocks > header a.lmt-barra-cta,
html[data-lomito-theme="light"] .lmt-tr__cta,
html[data-lomito-theme="light"] .lmt-tr__llevar {
	background: var(--lmt-emerald-700, #047857);
	color: #ffffff !important;
}

/* La linea de ancho completo bajo la barra era la sombra del grupo del tema
   (.hostinger-ai-menu, 0 1px 3px). La pastilla flotante conserva la suya. */
.wp-site-blocks > header .hostinger-ai-menu {
	box-shadow: none !important;
}

/* El texto del boton vive en dos span que heredaban el color de la barra. */
html[data-lomito-theme="light"] .wp-site-blocks > header a.lmt-barra-cta * {
	color: #ffffff !important;
}


/* Bloque 2 (2.96.0): botones de la barra a 44 px en celular. */
@media (max-width: 600px) {
	.hostinger-ai-menu .lmt-theme-toggle, .hostinger-ai-menu .lmt-bus-btn { width: 44px; height: 44px; }
	.hostinger-ai-site-navigation .wp-block-navigation__responsive-container-open { padding: 10px; min-width: 44px; min-height: 44px; }
}