/* =================================================================
   El Triunfo · Header: SOLO lo que Blocksy (versión gratuita) no ofrece como opción.
   Todo lo demás (colores, fondos con textura, desenfoque, sombra, tamaños, tipografía,
   separadores del menú móvil, icono de WhatsApp en móvil) se edita en
   Apariencia → Personalizar → Header. El footer ya no usa CSS.
================================================================= */

:root {
	--et-wa-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111111' d='M12 2a10 10 0 0 0-8.7 14.9L2 22l5.2-1.3A10 10 0 1 0 12 2Zm5.3 14c-.2.6-1.3 1.2-1.8 1.2-.5 0-1.2 0-2.3-.5-1.8-.8-3.6-2.6-4.6-4.4-.5-1-.6-1.8-.5-2.4.1-.5.7-1.5 1.3-1.7.3-.1.7 0 .9.3l1 1.7c.1.3.1.5 0 .7l-.5.7c-.1.2-.1.4 0 .6.4.7 1.4 1.7 2.2 2.1.2.1.4.1.6-.1l.6-.6c.2-.2.4-.2.7-.1l1.8.9c.3.1.5.5.4.8Z'/%3E%3C/svg%3E");
	--et-wa-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M12 2a10 10 0 0 0-8.7 14.9L2 22l5.2-1.3A10 10 0 1 0 12 2Zm5.3 14c-.2.6-1.3 1.2-1.8 1.2-.5 0-1.2 0-2.3-.5-1.8-.8-3.6-2.6-4.6-4.4-.5-1-.6-1.8-.5-2.4.1-.5.7-1.5 1.3-1.7.3-.1.7 0 .9.3l1 1.7c.1.3.1.5 0 .7l-.5.7c-.1.2-.1.4 0 .6.4.7 1.4 1.7 2.2 2.1.2.1.4.1.6-.1l.6-.6c.2-.2.4-.2.7-.1l1.8.9c.3.1.5.5.4.8Z'/%3E%3C/svg%3E");
}

/* 1. Borde completo de la barra de cristal (Blocksy solo tiene borde superior e inferior) */
#header [data-row*="middle"] > .ct-container {
	border: 1px solid rgba(255, 255, 255, 0.18);
}

/* 2. Página activa en negrita (Blocksy solo cambia su color) */
#header [data-id="menu"] .menu > .current-menu-item > .ct-menu-link,
#header [data-id="menu"] .menu > .current_page_item > .ct-menu-link {
	font-weight: 700;
}

/* 3. Inicio (intro dividida): sin menú, solo logo y WhatsApp (Blocksy gratis no tiene headers por página) */
body.home #header [data-device="desktop"] [data-id="menu"] {
	display: none;
}

/* 4. Icono de WhatsApp dentro del botón (el botón de Blocksy gratis no admite icono).
   Blocksy usa .ct-button::before para un brillo al pasar el cursor, por eso se anulan esas propiedades. */
#header .ct-header-cta .ct-button {
	gap: 12px;
}

#header .ct-header-cta .ct-button::before {
	content: "";
	display: block;
	position: static;
	inset: auto;
	z-index: auto;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	opacity: 1;
	filter: none;
	transition: none;
	background: rgba(17, 17, 17, 0.10) var(--et-wa-dark) center / 17px 17px no-repeat;
}

#header .ct-header-cta .ct-button:hover::before,
#header .ct-header-cta .ct-button:focus-visible::before {
	opacity: 1;
	background-image: var(--et-wa-light);
}

/* 5. Borde fino del botón de menú (el diseño "solid" de Blocksy no tiene borde) */
#header .ct-header-trigger[data-design="solid"] {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* 6. Etiquetas "Por mayor" / "Showroom" en el menú móvil (se activan con la clase CSS del elemento en Apariencia → Menús) */
#offcanvas .mobile-menu .et-tag-b2b > .ct-menu-link,
#offcanvas .mobile-menu .et-tag-hogar > .ct-menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

#offcanvas .mobile-menu .et-tag-b2b > .ct-menu-link::after,
#offcanvas .mobile-menu .et-tag-hogar > .ct-menu-link::after {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: #9BE3C4;
	opacity: 0.8;
}

#offcanvas .mobile-menu .et-tag-b2b > .ct-menu-link::after { content: "Por mayor"; }
#offcanvas .mobile-menu .et-tag-hogar > .ct-menu-link::after { content: "Showroom"; }

/* 7. Enlace de WhatsApp del panel móvil como botón verde (el elemento Texto de Blocksy no tiene estilos de botón) */
#offcanvas [data-id="text"] a[href*="wa.me"] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 24px;
	border-radius: 12px;
	background-color: #00693F;
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: none;
}

#offcanvas [data-id="text"] a[href*="wa.me"]::before {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--et-wa-light) center / contain no-repeat;
}

#offcanvas [data-id="text"] a[href*="wa.me"]:hover,
#offcanvas [data-id="text"] a[href*="wa.me"]:focus-visible {
	background-color: #00945E;
	color: #FFFFFF;
}