/*
Theme Name:   X Life
Description:  Tema hijo de Hello Elementor para X Life. Contiene solo detalles de estilo que Elementor no resuelve solo; el diseño se hace en Elementor.
Template:     hello-elementor
Version:      1.0.7
Text Domain:  hello-xlife
*/

/*
 * Clases de ayuda. Se aplican en Elementor: widget → Avanzado → Clases CSS.
 * Los colores usan los globales de Elementor (Tinta, Verde, Medio, Lima) con respaldo.
 */
:root {
	--xl-tinta: var(--e-global-color-primary, #23231F);
	--xl-verde: var(--e-global-color-secondary, #3B5B10);
	--xl-medio: var(--e-global-color-text, #4A4A42);
	--xl-lima: var(--e-global-color-accent, #A4CE39);
	--xl-lima-tx: #4F6B0E;
	--xl-bosque: #1C2A07;
	--xl-suave: #6B6B63;
	--xl-linea: #E3E3DB;
	--xl-panel: #F4F5F0;
	--xl-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/* Título grande en mayúsculas del hero: widget Título → clase xl-mayus */
.xl-mayus .elementor-heading-title {
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 0.98;
}

/* Antetítulo pequeño en verde: widget Título o Texto → clase xl-ey */
.xl-ey .elementor-heading-title,
.xl-ey .elementor-widget-container {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	color: var(--xl-lima-tx);
}

/* Datos (códigos, mg, precios): clase xl-mono */
.xl-mono,
.xl-mono .elementor-heading-title,
.xl-mono .elementor-widget-container {
	font-family: var(--xl-mono);
}

/* Variantes de botón: widget Botón → clase xl-btn-lima / xl-btn-verde / xl-btn-contorno */
.xl-btn-lima .elementor-button { background-color: var(--xl-lima); color: #23310A; }
.xl-btn-verde .elementor-button { background-color: var(--xl-verde); color: #fff; }
.xl-btn-contorno .elementor-button {
	background-color: transparent;
	color: var(--xl-tinta);
	box-shadow: inset 0 0 0 2px var(--xl-tinta);
}
.xl-btn-lima .elementor-button:hover,
.xl-btn-verde .elementor-button:hover,
.xl-btn-contorno .elementor-button:hover { filter: brightness(0.95); }

/* ---------- Cabecera y pie (plantillas X Life) ---------- */

/* Logo de texto provisional (se cambia por el SVG cuando llegue) */
.xl-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	line-height: 1;
	color: var(--xl-tinta);
	text-decoration: none;
}
.xl-logo:hover { color: var(--xl-tinta); }
.xl-logo .x { color: var(--xl-lima-tx); font-size: 36px; letter-spacing: -0.07em; }
.xl-logo .l { color: var(--xl-tinta); font-size: 20px; letter-spacing: 0.05em; }
.xl-logo-claro .x { color: var(--xl-lima); }
.xl-logo-claro .l { color: #fff; }
@media (max-width: 767px) {
	.xl-logo .x { font-size: 32px; }
	.xl-logo .l { font-size: 18px; }
}

/* Franja superior */
.xl-usa {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--xl-lima-tx);
	white-space: nowrap;
}
@media (max-width: 767px) { .xl-usa { white-space: normal; align-items: flex-start; } .xl-usa svg { margin-top: 1px; flex-shrink: 0; } }

/* Buscador de la cabecera */
.xl-hsearch { position: relative; width: 230px; margin: 0; }
.xl-hsearch input[type="search"] {
	width: 100%;
	height: 44px;
	border: 1.5px solid var(--xl-linea);
	border-radius: 10px;
	background: var(--xl-panel);
	padding: 0 14px 0 40px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--xl-tinta);
	box-shadow: none;
}
.xl-hsearch input[type="search"]:focus { outline: none; border-color: var(--xl-lima-tx); }
.xl-hsearch svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); stroke: var(--xl-suave); pointer-events: none; }

/* Botón de ícono con marco (cuenta): widget Ícono → clase xl-ibtn */
.xl-ibtn .elementor-icon {
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--xl-linea);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

/* Botón Partners con punto lima: widget Botón → clase xl-pbtn */
.xl-pbtn .elementor-button-text::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--xl-lima);
	vertical-align: 1px;
}

/* Carrito del menú: solo el ícono, con el mismo marco, y el globito solo si hay productos */
.xl-cart .elementor-menu-cart__toggle .elementor-button {
	width: 44px;
	min-height: 44px;
	padding: 0;
	justify-content: center;
	border: 1.5px solid var(--xl-linea);
	border-radius: 10px;
	background: #fff;
	color: var(--xl-suave);
}
.xl-cart .elementor-menu-cart__toggle .elementor-button-text { display: none; }
.xl-cart .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter="0"] { display: none !important; }
.xl-cart .elementor-button-icon-qty { background: var(--xl-lima-tx); }

/* Cabecera en celular: el logo, la cuenta y el carrito no se encogen; el menú (hamburguesa) va a la derecha */
.elementor-widget.xl-ibtn,
.elementor-widget.xl-cart,
.elementor-widget.xl-pbtn,
.elementor-widget:has(> .xl-logo),
.elementor-widget:has(> .elementor-widget-container > .xl-logo) { flex-shrink: 0; }
.elementor-widget-nav-menu { min-width: 0; flex-shrink: 1; }
.elementor-widget-nav-menu .elementor-menu-toggle { margin-left: auto !important; margin-right: 0 !important; }
.xl-ibtn .elementor-icon { border-color: var(--xl-linea) !important; }

/* Párrafos de los widgets de texto sin margen extra al final */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Íconos del menú principal (como en el prototipo). Se asignan por la dirección del enlace. */
.elementor-nav-menu a[href*="/peptidos/"]::before {
	content: ""; display: inline-block; flex-shrink: 0; width: 15px; height: 15px; margin-right: 8px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v5l4 10a2 2 0 01-1.8 3H6.8A2 2 0 015 18L9 8z'/%3E%3Cpath d='M7 15h10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v5l4 10a2 2 0 01-1.8 3H6.8A2 2 0 015 18L9 8z'/%3E%3Cpath d='M7 15h10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.elementor-nav-menu a[href*="/certificados/"]::before {
	content: ""; display: inline-block; flex-shrink: 0; width: 15px; height: 15px; margin-right: 8px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.4 8.7-8 10-4.6-1.3-8-5-8-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.4 8.7-8 10-4.6-1.3-8-5-8-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.elementor-nav-menu a[href*="/tracking-de-ordenes/"]::before {
	content: ""; display: inline-block; flex-shrink: 0; width: 15px; height: 15px; margin-right: 8px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='15' height='12' rx='2'/%3E%3Cpath d='M16 10h4l3 3v5h-7'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='19' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='15' height='12' rx='2'/%3E%3Cpath d='M16 10h4l3 3v5h-7'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='19' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.elementor-nav-menu a[href*="/contacto/"]::before {
	content: ""; display: inline-block; flex-shrink: 0; width: 15px; height: 15px; margin-right: 8px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.2 9.2a3 3 0 015.6 1.3c0 2-3 2.5-3 4'/%3E%3Cpath d='M12 17.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.2 9.2a3 3 0 015.6 1.3c0 2-3 2.5-3 4'/%3E%3Cpath d='M12 17.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Elementor usa ::before para su línea de hover; lo liberamos para el ícono (la línea usa ::after) */
.elementor-nav-menu a.elementor-item[href]::before,
.elementor-nav-menu a.elementor-sub-item[href]::before {
	position: static !important; opacity: 1 !important; transform: none !important; inset: auto !important;
	width: 15px !important; height: 15px !important; margin: 0 8px 0 0 !important;
	background-color: currentColor !important; display: inline-block !important; transition: none !important;
}

/* Cabecera en pantallas de escritorio medianas (1025–1500 px): el menú y el botón no se parten en dos líneas. */
@media (min-width: 1025px) {
	header .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: nowrap; }
	header .elementor-nav-menu--main .elementor-item { white-space: nowrap; }
	header .elementor-widget-button .elementor-button { white-space: nowrap; }
	header .elementor-widget-nav-menu { flex-shrink: 0; }
}
@media (min-width: 1025px) and (max-width: 1500px) {
	header .elementor-nav-menu--main .elementor-item { padding-left: 9px !important; padding-right: 9px !important; }
	header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item[href]::before { margin-right: 6px !important; }
	header .xl-hsearch { width: 170px !important; max-width: 170px; }
	header .elementor-widget:has(> .elementor-widget-container > .xl-hsearch), header .elementor-widget:has(> .xl-hsearch) { flex: 0 1 170px; min-width: 0; }
}
@media (min-width: 1025px) and (max-width: 1340px) {
	header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item[href]::before { display: none !important; }
	header .xl-hsearch { width: 150px !important; max-width: 150px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
	header .elementor-widget:has(.xl-hsearch) { display: none; }
}