/* ============================================================
   BLINGARD — Theme CSS
   Tokens y helpers globales que replican el diseño original.
   Las utilities Tailwind las inyecta el CDN; aquí viven los tokens,
   variables y clases custom referenciadas en el HTML del diseño.
   ============================================================ */

:root {
	--bl-background: #131313;
	--bl-surface: #131313;
	--bl-surface-container-lowest: #0e0e0e;
	--bl-surface-container-low: #1b1b1b;
	--bl-surface-container: #1f1f1f;
	--bl-surface-container-high: #2a2a2a;
	--bl-surface-elevation-1: #0A0A0A;
	--bl-surface-elevation-2: #141414;
	--bl-border-subtle: #27272A;
	--bl-outline-variant: #404753;
	--bl-text-primary: #FFFFFF;
	--bl-text-secondary: #A1A1AA;
	--bl-on-surface: #e2e2e2;
	--bl-on-surface-variant: #c0c7d5;
	/* Gris claro de marca (hace juego con el logo). Reemplaza al antiguo azul. */
	--bl-btn: #D5D7DB;
	--bl-btn-ink: #131313;
	--bl-primary: #D5D7DB;
	--bl-primary-container: #D5D7DB;
	--bl-on-primary-container: #131313;
	--bl-secondary-container: #bc4d00;
	--bl-error: #ffb4ab;
}

/* Dark mode global: cuando el theme Blingard está activo TODA la página es oscura.
   Aplicamos siempre sin depender de clases extra para que funcione también cuando
   el header viene de un template de Elementor Pro (que no usa nuestro header.php). */
html, body {
	background-color: #000;
	color: var(--bl-on-surface);
	-webkit-font-smoothing: antialiased;
	font-family: "Inter", sans-serif;
}

/* Forzar tipografía clara en wrappers de Hello Elementor / Elementor */
body,
body.elementor-page,
.site,
.site-main,
#content,
.elementor,
.elementor-section,
.elementor-widget,
.elementor-widget-container,
.page-content,
.entry-content,
main {
	color: var(--bl-on-surface);
}

/* Override de las variables CSS globales de tipografía de Elementor.
   El usuario había configurado Bebas Neue como fuente Primary en el kit de
   Elementor, y esos valores se guardan en el CSS generado por-página con muy
   alta especificidad. Reescribimos las variables a Metropolis para que TODOS los
   widgets de Elementor (no solo los nuestros) usen Metropolis. */
:root,
html,
body,
body[class*="elementor-kit-"],
.elementor-kit-9 {
	--e-global-typography-primary-font-family: "Metropolis", sans-serif !important;
	--e-global-typography-secondary-font-family: "Metropolis", sans-serif !important;
	--e-global-typography-text-font-family: "Inter", sans-serif !important;
	--e-global-typography-accent-font-family: "Metropolis", sans-serif !important;
}

/* Headings y texto base legibles sobre fondo oscuro.
   Usamos !important para ganarle a estilos heredados de Hello Elementor /
   Elementor (que setean colores y fonts por defecto con alta especificidad —
   Elementor Pro usa Bebas Neue como fuente global y la inyecta vía
   variables CSS y selectores .elementor-widget-heading). */
body h1, body h2, body h3, body h4, body h5, body h6 {
	color: var(--bl-text-primary) !important;
	font-family: "Metropolis", "Inter", sans-serif !important;
}

/* Títulos específicos de los widgets Blingard: blanco + Metropolis a prueba de balas */
.bl-hero__title,
.bl-tech__title,
.bl-arch__title,
.bl-level-card__title,
.bl-services__title,
.bl-stats__title,
.bl-testimonials__title,
.bl-certs__title,
.bl-finalcta__title,
.bl-footer__logo,
.bl-header__wordmark {
	color: #fff !important;
	font-family: "Metropolis", "Inter", sans-serif !important;
}

/* Override de las variables CSS globales de Elementor por si las inyecta en body */
body.elementor-default,
body.elementor-page,
.elementor-widget-heading .elementor-heading-title,
.elementor-element h1,
.elementor-element h2,
.elementor-element h3,
.elementor-element h4,
.elementor-element h5,
.elementor-element h6 {
	font-family: "Metropolis", "Inter", sans-serif !important;
}
body p,
body li,
body span,
body label,
body td,
body th,
body dd,
body dt {
	color: var(--bl-on-surface);
}
body a { color: var(--bl-primary); }
body a:hover { color: #fff; }

/* Inputs y selects legibles */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="url"],
body input[type="number"],
body input[type="search"],
body input[type="password"],
body textarea,
body select {
	background-color: var(--bl-surface-container);
	border: 1px solid var(--bl-border-subtle);
	color: var(--bl-on-surface);
}
body input::placeholder,
body textarea::placeholder { color: var(--bl-text-secondary); }

/* Iconos Material Symbols */
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	vertical-align: middle;
	font-family: 'Material Symbols Outlined';
}

/* Layers del diseño */
.tonal-layer-1 {
	background-color: var(--bl-surface-elevation-1);
	border: 1px solid var(--bl-border-subtle);
}
.tonal-layer-2 {
	background-color: var(--bl-surface-elevation-2);
	border: 1px solid var(--bl-border-subtle);
}
.blueprint-border {
	border: 1px solid var(--bl-border-subtle);
}
.glass-header {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Tipografías del diseño (sin depender de Tailwind para los widgets) */
.bl-display-lg {
	font-family: "Metropolis", sans-serif;
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 700;
}
.bl-headline-md {
	font-family: "Metropolis", sans-serif;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 600;
}
.bl-body-lg {
	font-family: "Inter", sans-serif;
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
}
.bl-body-md {
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.5;
}
.bl-label-sm {
	font-family: "Geist", sans-serif;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.05em;
	font-weight: 500;
	text-transform: uppercase;
}
.bl-mono {
	font-family: "Geist", monospace;
	font-size: 14px;
	line-height: 1.4;
}

/* Container del diseño */
.bl-container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}
.bl-section {
	padding-top: 80px;
	padding-bottom: 80px;
}

/* Botones del diseño.
   Usamos !important en color porque Elementor / Hello Elementor inyectan estilos
   en `a` con alta especificidad que pisan nuestros colores claros. */
.bl-btn-primary {
	background-color: var(--bl-btn) !important;
	color: var(--bl-btn-ink) !important;
	padding: 16px 32px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: none;
	cursor: pointer;
	font-family: "Geist", sans-serif;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
	border-radius: 2px;
	text-decoration: none;
	transition: filter .2s, transform .15s;
}
.bl-btn-primary:hover { filter: brightness(.93); color: var(--bl-btn-ink) !important; }
.bl-btn-primary:active { transform: scale(.97); }
.bl-btn-primary .material-symbols-outlined { color: var(--bl-btn-ink) !important; }

.bl-btn-outline {
	border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
	color: #ffffff !important;
	background: transparent;
	padding: 16px 32px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Geist", sans-serif;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
	border-radius: 2px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .2s, color .2s, border-color .2s;
}
.bl-btn-outline:hover {
	background-color: #fff;
	color: #131313 !important;
	border-color: #fff !important;
}

/* Pills certificación */
.bl-pill {
	display: inline-block;
	padding: 4px 12px;
	background-color: var(--bl-btn);
	color: var(--bl-btn-ink);
	font-family: "Geist", sans-serif;
	font-size: 12px;
	letter-spacing: 0.05em;
	font-weight: 500;
	text-transform: uppercase;
	border-radius: 2px;
}

/* Texto helper */
.bl-text-secondary { color: var(--bl-text-secondary); }
.bl-text-primary-accent { color: var(--bl-primary); }

/* ============================================================
   HERO
   ============================================================ */
.bl-hero {
	position: relative;
	height: 572px;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.bl-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.bl-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
}
/* Scrim: oscurece solo el lado izquierdo (donde va el texto), el auto a la derecha queda visible */
.bl-hero__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.1) 60%, transparent 80%);
	pointer-events: none;
}
.bl-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}
.bl-hero__copy { max-width: 640px; }
.bl-hero__eyebrow {
	display: block;
	margin-bottom: 16px;
	color: var(--bl-primary);
	font-family: "Geist", sans-serif;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.bl-hero__title {
	font-family: "Metropolis", sans-serif;
	font-size: 48px;
	line-height: 1;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0 0 24px;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.55);
}
.bl-hero__lead {
	font-family: "Inter", sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: var(--bl-text-secondary);
	margin: 0 0 32px;
	text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.bl-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; }

@media (max-width: 768px) {
	.bl-hero { height: auto; min-height: 528px; padding: 70px 0 53px; }
	.bl-hero__copy { max-width: 100%; }
	.bl-hero__title { font-size: 30px; }
	.bl-hero__lead { font-size: 16px; margin-bottom: 28px; }
	/* Sin overlay en móvil (solo queda la sombra de texto para legibilidad) */
	.bl-hero__media::after { display: none; }
	.bl-hero__media img { object-position: center; }
	.bl-hero__ctas { width: 100%; }
	.bl-hero__ctas > * { flex: 1 1 auto; justify-content: center; text-align: center; }
}
@media (max-width: 420px) {
	.bl-hero { min-height: 484px; }
	.bl-hero__title { font-size: 26px; }
	.bl-hero__ctas > * { flex-basis: 100%; }
}

/* ============================================================
   LEVELS / BENTO
   ============================================================ */
.bl-levels__head { margin-bottom: 48px; }
.bl-levels__head h2 {
	font-family: "Metropolis", sans-serif;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--bl-on-surface);
}
.bl-levels__rule { width: 64px; height: 4px; background-color: var(--bl-primary-container); }

.bl-levels__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 24px;
}
.bl-level-card {
	background-color: var(--bl-surface-elevation-1);
	border: 1px solid var(--bl-border-subtle);
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: border-color .3s;
}
.bl-level-card:hover { border-color: var(--bl-primary-container); }
.bl-level-card--span-4 { grid-column: span 4 / span 4; }
.bl-level-card--span-8 { grid-column: span 8 / span 8; }
.bl-level-card--span-6 { grid-column: span 6 / span 6; }
.bl-level-card--featured {
	background: linear-gradient(135deg, var(--bl-surface-elevation-1), var(--bl-background));
	border-color: var(--bl-primary);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.bl-level-card--critical { border-top: 4px solid var(--bl-btn); }

.bl-level-card__eyebrow {
	font-family: "Geist", sans-serif;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--bl-text-secondary);
	opacity: .6;
}
.bl-level-card__eyebrow--accent { color: var(--bl-primary); opacity: 1; }
.bl-level-card__title {
	font-family: "Metropolis", sans-serif;
	font-size: 24px;
	margin: 8px 0 16px;
	font-weight: 600;
	color: #fff;
}
.bl-level-card__desc {
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--bl-text-secondary);
	margin: 0 0 24px;
}
.bl-level-card__specs {
	border-top: 1px solid var(--bl-border-subtle);
	padding-top: 24px;
	display: grid;
	gap: 12px;
	font-family: "Geist", monospace;
	font-size: 14px;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.bl-level-card__specs li { display: flex; justify-content: space-between; }
.bl-level-card__specs .ok { color: var(--bl-primary); }
.bl-level-card__pills { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.bl-level-card__image {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	min-height: 260px;
	background-color: #CFD0D4;
}
.bl-level-card__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 16px;
}
/* Imagen del arma en las tarjetas no-featured (II, IV, V) */
.bl-level-card__media {
	margin-top: 24px;
	background-color: #CFD0D4;
	border: 1px solid var(--bl-border-subtle);
	border-radius: 4px;
	height: 150px;
	overflow: hidden;
}
.bl-level-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 12px;
	display: block;
}
.bl-level-card__footer {
	margin-top: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bl-level-card__avatars { display: flex; }
.bl-level-card__avatars .av {
	width: 32px; height: 32px;
	border-radius: 999px;
	border: 2px solid var(--bl-background);
	display: flex; align-items: center; justify-content: center;
	margin-left: -6px;
}
.bl-level-card__avatars .av:first-child { margin-left: 0; }
.bl-level-card__avatars .av.av--primary { background-color: var(--bl-primary-container); }
.bl-level-card__avatars .av.av--primary .material-symbols-outlined { color: var(--bl-btn-ink); }
.bl-level-card__avatars .av.av--secondary { background-color: var(--bl-secondary-container); }
.bl-level-card__avatars .av .material-symbols-outlined { font-size: 14px; }
.bl-level-card__cta {
	display: block;
	text-align: center;
	width: 100%;
	background-color: var(--bl-btn) !important;
	border: none !important;
	padding: 14px 12px;
	color: var(--bl-btn-ink) !important;
	font-family: "Geist", sans-serif;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	border-radius: 2px;
	transition: filter .2s, transform .15s;
}
.bl-level-card__cta:hover {
	filter: brightness(.93);
	color: var(--bl-btn-ink) !important;
}

@media (max-width: 900px) {
	.bl-levels__grid { grid-template-columns: 1fr; }
	.bl-level-card--span-4,
	.bl-level-card--span-6,
	.bl-level-card--span-8 { grid-column: 1 / -1; }
	.bl-level-card--featured { grid-template-columns: 1fr; }
}

/* ============================================================
   TECH SPECS
   ============================================================ */
.bl-tech {
	background-color: var(--bl-surface-container-lowest);
	padding: 80px 0;
}
.bl-tech__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.bl-tech__media { position: relative; }
.bl-tech__media img {
	width: 100%;
	height: auto;
	border: 1px solid var(--bl-border-subtle);
	filter: grayscale(1);
	opacity: .8;
}
.bl-tech__badge {
	position: absolute;
	bottom: -24px;
	right: -24px;
	background-color: var(--bl-surface-elevation-2);
	border: 1px solid var(--bl-border-subtle);
	padding: 24px;
}
.bl-tech__badge .num {
	font-family: "Metropolis", sans-serif;
	font-size: 48px;
	font-weight: 700;
	color: var(--bl-primary);
	letter-spacing: -0.02em;
	display: block;
	line-height: 1;
}
.bl-tech__badge .label {
	font-family: "Geist", sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--bl-text-secondary);
	margin-top: 8px;
	display: block;
}
.bl-tech__title {
	font-family: "Metropolis", sans-serif;
	font-size: 48px;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-weight: 700;
	color: #fff;
	margin: 0 0 32px;
}
.bl-tech__list { display: grid; gap: 24px; }
.bl-tech__item { display: flex; gap: 16px; }
.bl-tech__icon {
	flex-shrink: 0;
	width: 48px; height: 48px;
	background-color: rgba(46, 150, 255, .1);
	display: flex; align-items: center; justify-content: center;
	color: var(--bl-primary);
}
.bl-tech__item h4 {
	font-family: "Metropolis", sans-serif;
	font-size: 16px;
	color: #fff;
	font-weight: 600;
	margin: 0 0 4px;
}
.bl-tech__item p {
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--bl-text-secondary);
	margin: 0;
}

@media (max-width: 900px) {
	.bl-tech__inner { grid-template-columns: 1fr; gap: 48px; }
	.bl-tech__badge { display: none; }
	.bl-tech__title { font-size: 32px; }
}

/* ============================================================
   ARCHITECTURAL
   ============================================================ */
.bl-arch {
	background-color: var(--bl-surface-elevation-1);
	border: 1px solid var(--bl-border-subtle);
	overflow: hidden;
}
.bl-arch__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.bl-arch__copy { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.bl-arch__eyebrow {
	color: var(--bl-primary);
	font-family: "Geist", sans-serif;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 16px;
	display: block;
}
.bl-arch__title {
	font-family: "Metropolis", sans-serif;
	font-size: 48px;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-weight: 700;
	color: #fff;
	margin: 0 0 24px;
}
.bl-arch__lead {
	font-family: "Inter", sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: var(--bl-text-secondary);
	margin: 0 0 40px;
}
.bl-arch__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.bl-arch__stat {
	padding: 16px;
	border: 1px solid var(--bl-border-subtle);
}
.bl-arch__stat .label {
	font-family: "Geist", sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bl-text-secondary);
	margin-bottom: 4px;
	display: block;
}
.bl-arch__stat .value {
	font-family: "Metropolis", sans-serif;
	font-size: 24px;
	color: #fff;
	font-weight: 600;
}
.bl-arch__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bl-primary);
	font-family: "Geist", sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
}
.bl-arch__link:hover { text-decoration: underline; }
.bl-arch__media { position: relative; height: 100%; min-height: 320px; }
.bl-arch__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
	.bl-arch__grid { grid-template-columns: 1fr; }
	.bl-arch__copy { padding: 32px; }
	.bl-arch__title { font-size: 32px; }
	.bl-arch__media { min-height: 240px; }
}

/* ============================================================
   HEADER
   ============================================================ */
.bl-header {
	position: sticky;
	top: 0;
	z-index: 60;
	width: 100%;
	height: 104px;
	background-color: rgba(19, 19, 19, .9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--bl-outline-variant);
}
.bl-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	height: 100%;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.bl-header__logo img {
	height: 97px;
	width: auto;
	max-width: 308px;
	object-fit: contain;
	display: block;
}
/* Wordmark BLINGARD (matchea mockup) */
.bl-header__wordmark {
	font-family: "Metropolis", sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--bl-on-surface);
	text-decoration: none;
	line-height: 1;
}
.bl-header__wordmark:hover { color: #fff; }
.bl-header__nav {
	display: none;
	align-items: center;
	gap: 32px;
}
.bl-header__nav a {
	color: var(--bl-on-surface-variant);
	text-decoration: none;
	font-family: "Geist", sans-serif;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-variant: normal;
	font-feature-settings: normal;
	font-weight: 600;
	padding-bottom: 4px;
	transition: color .2s, border-color .2s;
	border-bottom: 2px solid transparent;
}
.bl-header__nav a:hover {
	color: var(--bl-on-surface);
}
.bl-header__nav a.is-active {
	color: var(--bl-primary);
	border-bottom-color: var(--bl-primary);
}
.bl-header__actions {
	display: none;
	align-items: center;
	gap: 16px;
}
.bl-header__btn-outline {
	display: inline-block;
	padding: 10px 22px;
	border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
	color: #ffffff !important;
	text-decoration: none;
	font-family: "Metropolis", sans-serif;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	background-color: transparent;
	transition: background-color .2s, border-color .2s, color .2s, transform .15s;
}
.bl-header__btn-outline:hover {
	background-color: #ffffff;
	border-color: #ffffff !important;
	color: #131313 !important;
}
.bl-header__btn-outline:active { transform: scale(.97); }
.bl-header__btn-primary {
	display: inline-block;
	padding: 10px 22px;
	background-color: var(--bl-btn);
	color: var(--bl-btn-ink) !important;
	text-decoration: none;
	font-family: "Metropolis", sans-serif;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: 2px;
	transition: filter .2s, transform .15s;
}
.bl-header__btn-primary:hover { filter: brightness(.93); }
.bl-header__btn-primary:active { transform: scale(.97); }
.bl-header__burger {
	background: transparent;
	border: 0;
	color: #fff;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	cursor: pointer;
}
.bl-header__burger span {
	display: block;
	width: 24px;
	height: 2px;
	background: #fff;
}

.bl-mobile-nav {
	display: flex;
	flex-direction: column;
	background-color: var(--bl-surface-elevation-1);
	border-top: 1px solid var(--bl-outline-variant);
	padding: 16px 24px;
}
.bl-mobile-nav a {
	color: var(--bl-on-surface);
	text-decoration: none;
	padding: 14px 0;
	border-bottom: 1px solid var(--bl-border-subtle);
	font-family: "Metropolis", sans-serif;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}
.bl-mobile-nav__cta {
	margin-top: 12px;
	background-color: #25D366;
	color: #fff !important;
	text-align: center;
	border-radius: 2px;
	border: 0 !important;
}

@media (min-width: 900px) {
	.bl-header__nav { display: flex; }
	.bl-header__actions { display: flex; }
	.bl-header__burger { display: none; }
	.bl-mobile-nav { display: none !important; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.bl-footer {
	background-color: var(--bl-surface-container-lowest);
	border-top: 1px solid var(--bl-outline-variant);
	color: var(--bl-on-surface);
	margin-top: 0;
}
.bl-footer__top {
	max-width: 1280px;
	margin: 0 auto;
	padding: 80px 24px 48px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px 32px;
	align-items: flex-start;
}
.bl-footer__brand {
	flex: 1 1 320px;
	min-width: 260px;
	max-width: 460px;
}
.bl-footer__col {
	flex: 1 1 170px;
	min-width: 150px;
}
.bl-footer__col--contact {
	flex: 1 1 260px;
	min-width: 240px;
}
.bl-footer__brand .bl-footer__logo {
	display: inline-block;
	margin-bottom: 24px;
	line-height: 0;
}
.bl-footer__brand .bl-footer__logo img {
	height: 97px;
	width: auto;
	max-width: 308px;
	object-fit: contain;
	display: block;
}
.bl-footer__lead {
	max-width: 480px;
	color: var(--bl-text-secondary);
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 32px;
}
.bl-footer__socials {
	display: flex;
	gap: 24px;
}
.bl-footer__socials a {
	color: var(--bl-on-surface-variant);
	text-decoration: none;
	font-family: "Geist", sans-serif;
	font-size: 14px;
	transition: color .2s;
}
.bl-footer__socials a:hover { color: var(--bl-primary); }

.bl-footer__col h4 {
	color: var(--bl-primary);
	font-family: "Geist", sans-serif !important;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-variant: normal;
	font-feature-settings: normal;
	font-weight: 500;
	margin: 0 0 24px;
}
.bl-footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.bl-footer__col li {
	margin-bottom: 16px;
}
.bl-footer__col a {
	color: var(--bl-on-surface-variant);
	text-decoration: none;
	font-family: "Geist", sans-serif;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: color .2s;
}
.bl-footer__col a:hover {
	color: var(--bl-primary);
	text-decoration: underline;
}

.bl-footer__bottom {
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px;
	border-top: 1px solid rgba(64, 71, 83, .3);
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	font-family: "Geist", sans-serif;
	font-size: 12px;
	color: var(--bl-on-surface-variant);
	letter-spacing: 0.05em;
}

@media (min-width: 768px) {
	.bl-footer__bottom { flex-direction: row; }
}
@media (max-width: 900px) {
	.bl-footer__top { grid-template-columns: 1fr; }
}

/* WhatsApp FAB */
.bl-whatsapp-fab {
	position: fixed;
	bottom: 32px;
	right: 32px;
	background-color: #25D366;
	color: #fff;
	padding: 16px;
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
	z-index: 60;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s;
}
.bl-whatsapp-fab:hover { transform: scale(1.1); }
.bl-whatsapp-fab:active { transform: scale(.95); }

/* Mobile nav abierta: bloquea scroll del body */
body.bl-nav-open { overflow: hidden; }

/* ============================================================
   FOOTER — Bloque de contacto (col 4)
   ============================================================ */
.bl-footer__col--contact ul li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 14px;
	text-transform: none;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	letter-spacing: 0;
	color: var(--bl-on-surface-variant);
	line-height: 1.5;
}
.bl-footer__col--contact ul li a {
	text-transform: none;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	letter-spacing: 0;
	color: var(--bl-on-surface-variant);
}
.bl-footer__col--contact ul li a:hover { color: var(--bl-primary); }
.bl-footer__col--contact .material-symbols-outlined {
	color: var(--bl-primary);
	font-size: 18px;
	margin-top: 2px;
	flex-shrink: 0;
}

/* El layout del footer ya es flex con wrap; no necesita media queries adicionales,
   las columnas se reacomodan solas por flex-basis y min-width. */

/* ============================================================
   COMMON — Eyebrow / labels arriba de secciones
   ============================================================ */
.bl-eyebrow {
	display: inline-block;
	color: var(--bl-primary);
	font-family: "Geist", sans-serif;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 12px;
}

/* ============================================================
   CERTIFICACIONES
   ============================================================ */
.bl-certs__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 48px;
}
.bl-certs__title {
	font-family: "Metropolis", sans-serif !important;
	font-size: 40px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0 0 16px;
	color: #fff !important;
}
.bl-certs__subtitle {
	font-family: "Inter", sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--bl-text-secondary);
	margin: 0;
}
.bl-certs__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.bl-cert-card {
	background-color: var(--bl-surface-elevation-1);
	border: 1px solid var(--bl-border-subtle);
	padding: 32px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	transition: border-color .25s, transform .25s;
}
.bl-cert-card:hover {
	border-color: var(--bl-primary-container);
	transform: translateY(-2px);
}
.bl-cert-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background-color: rgba(46, 150, 255, .08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bl-primary);
}
.bl-cert-card__icon .material-symbols-outlined {
	font-size: 32px;
	color: var(--bl-primary);
}
.bl-cert-card__label {
	font-family: "Metropolis", sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
}

@media (max-width: 900px) {
	.bl-certs__grid { grid-template-columns: repeat(2, 1fr); }
	.bl-certs__title { font-size: 32px; }
}
@media (max-width: 500px) {
	.bl-certs__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.bl-finalcta {
	padding-top: 80px;
	padding-bottom: 80px;
}
.bl-finalcta__inner {
	background: linear-gradient(135deg, var(--bl-surface-elevation-1), #000);
	border: 1px solid var(--bl-border-subtle);
	padding: 64px 48px;
	text-align: center;
	border-radius: 4px;
	max-width: 960px;
	margin: 0 auto;
}
.bl-finalcta__title {
	font-family: "Metropolis", sans-serif !important;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: #fff !important;
	margin: 0 0 16px;
}
.bl-finalcta__lead {
	font-family: "Inter", sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: var(--bl-text-secondary);
	max-width: 640px;
	margin: 0 auto 32px;
}
.bl-finalcta__ctas {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 700px) {
	.bl-finalcta__inner { padding: 40px 24px; }
	.bl-finalcta__title { font-size: 32px; }
}

/* ============================================================
   CLIENTES — Dual marquee
   ============================================================ */
.bl-clients {
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: var(--bl-surface-elevation-1);
	border-top: 1px solid var(--bl-border-subtle);
	border-bottom: 1px solid var(--bl-border-subtle);
}
.bl-clients__head {
	text-align: center;
	max-width: 820px;
	margin: 0 auto 48px;
}
.bl-clients__title {
	font-family: "Metropolis", sans-serif !important;
	font-size: 36px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0 0 12px;
	color: #fff !important;
}
.bl-clients__subtitle {
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--bl-text-secondary);
	margin: 0;
}

/* Marquee infinito.
   overflow:hidden + overflow-x:hidden con !important para que NUNCA aparezca
   scrollbar (Elementor / Hello Elementor a veces inyectan overflow:auto). */
.bl-marquee {
	overflow: hidden !important;
	overflow-x: hidden !important;
	overflow-y: hidden !important;
	width: 100%;
	mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.bl-marquee::-webkit-scrollbar { display: none; }
.bl-marquee { scrollbar-width: none; }
.bl-marquee + .bl-marquee {
	margin-top: 24px;
}
.bl-marquee__track {
	display: flex;
	gap: 56px;
	width: max-content;
	will-change: transform;
}
.bl-marquee--row1 .bl-marquee__track {
	animation: bl-marquee-left var(--bl-marquee-speed, 60s) linear infinite;
}
.bl-marquee--row2 .bl-marquee__track {
	animation: bl-marquee-right var(--bl-marquee-speed, 60s) linear infinite;
}
.bl-marquee:hover .bl-marquee__track {
	animation-play-state: paused;
}
.bl-marquee__item {
	flex-shrink: 0;
	height: var(--bl-logo-height, 56px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
}
.bl-marquee__item img {
	max-height: 100%;
	max-width: 180px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%) brightness(1.2) opacity(0.55);
	transition: filter .3s ease, transform .3s ease;
}
.bl-marquee__item:hover img {
	filter: grayscale(0%) brightness(1) opacity(1);
	transform: scale(1.05);
}

@keyframes bl-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes bl-marquee-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* prefers-reduced-motion: NO desactivamos el marquee porque es decisión de
   producto que SIEMPRE se mueva. Pero sí reducimos la velocidad para no
   marear a usuarios sensibles al movimiento. NUNCA mostramos scrollbar. */
@media (prefers-reduced-motion: reduce) {
	.bl-marquee--row1 .bl-marquee__track,
	.bl-marquee--row2 .bl-marquee__track {
		animation-duration: 240s;
	}
}

@media (max-width: 700px) {
	.bl-clients__title { font-size: 26px; }
	.bl-marquee__track { gap: 32px; }
	.bl-marquee__item { padding: 0 4px; }
	.bl-marquee__item img { max-width: 120px; }
}

/* ============================================================
   COBERTURAS DE BLINDAJE — Tabs FULL/SPARTAN/URBANO/EXPRESS
   ============================================================ */
.bl-coverage__head {
	text-align: center;
	max-width: 820px;
	margin: 0 auto 48px;
}
.bl-coverage__title {
	font-family: "Metropolis", sans-serif !important;
	font-size: 40px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0 0 12px;
	color: #fff !important;
}
.bl-coverage__subtitle {
	font-family: "Inter", sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--bl-text-secondary);
	margin: 0;
}

/* Tabs nav */
.bl-coverage__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--bl-border-subtle);
	padding-bottom: 0;
}
.bl-coverage__tab {
	background-color: #111111 !important;
	background: #111111 !important;
	border: 1px solid var(--bl-border-subtle) !important;
	border-bottom: 3px solid transparent !important;
	color: var(--bl-on-surface-variant) !important;
	font-family: "Metropolis", sans-serif !important;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 16px 24px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background-color .2s, color .2s, border-color .2s;
}
.bl-coverage__tab:hover {
	background-color: #1a1a1a !important;
	background: #1a1a1a !important;
	color: #fff !important;
}
.bl-coverage__tab.is-active {
	background-color: #1a1a1a !important;
	background: #1a1a1a !important;
	color: #fff !important;
	border-bottom-color: var(--bl-primary-container) !important;
}
.bl-coverage__tab-badge {
	font-family: "Geist", sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background-color: var(--bl-primary-container);
	color: var(--bl-btn-ink);
	padding: 3px 8px;
	border-radius: 2px;
}

/* Panels */
.bl-coverage__panel {
	display: none;
}
.bl-coverage__panel.is-active {
	display: block;
}
.bl-coverage__panel-tagline {
	font-family: "Inter", sans-serif;
	font-size: 18px;
	line-height: 1.5;
	color: var(--bl-on-surface);
	margin: 0 0 16px;
	text-align: center;
}
.bl-coverage__panel-note {
	background-color: rgba(46, 150, 255, .08);
	border: 1px solid rgba(46, 150, 255, .25);
	color: var(--bl-on-surface-variant);
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 1.55;
	padding: 12px 16px;
	border-radius: 4px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 32px;
}
.bl-coverage__panel-note .material-symbols-outlined {
	color: var(--bl-primary);
	font-size: 20px;
	flex-shrink: 0;
}

/* "Aplica para niveles…" (tomado tal cual del tríptico) */
.bl-coverage__applies {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 auto 28px;
	padding: 12px 20px;
	border: 1px solid var(--bl-border-subtle);
	border-radius: 2px;
	background-color: rgba(255, 255, 255, .03);
	font-family: "Geist", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
}
.bl-coverage__panel { text-align: center; }
.bl-coverage__applies .material-symbols-outlined {
	color: var(--bl-primary);
	font-size: 20px;
}
.bl-coverage__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.bl-coverage__col {
	background-color: var(--bl-surface-elevation-1);
	border: 1px solid var(--bl-border-subtle);
	padding: 32px;
	text-align: left;
}
.bl-coverage__col--single {
	max-width: 720px;
	margin: 0 auto;
}
/* Layout cobertura: video (izq) + texto (centro) + video (der).
   El modificador lo pone el widget según cuántos videos tenga la cobertura. */
.bl-coverage__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 32px;
	align-items: start;
	text-align: left;
}
/* texto | video */
.bl-coverage__layout--right {
	grid-template-columns: minmax(0, 1fr) 340px;
}
/* video | texto */
.bl-coverage__layout--left {
	grid-template-columns: 340px minmax(0, 1fr);
}
/* video | texto | video */
.bl-coverage__layout--dual {
	grid-template-columns: 300px minmax(0, 1fr) 300px;
	gap: 28px;
}
.bl-coverage__layout--dual .bl-coverage__video {
	max-width: 300px;
}
.bl-coverage__layout--novideo {
	grid-template-columns: 1fr;
	max-width: 760px;
	margin: 0 auto;
}
.bl-coverage__main { min-width: 0; }
.bl-coverage__video {
	background-color: #000;
	border: 1px solid var(--bl-border-subtle);
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 9 / 16;
	width: 100%;
	max-width: 330px;
	max-height: 620px;
	margin: 0 auto;
}
.bl-coverage__video-el {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	border: 0;
}
.bl-coverage__col-title {
	font-family: "Metropolis", sans-serif !important;
	font-size: 20px;
	font-weight: 700;
	color: #fff !important;
	margin: 0 0 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.bl-coverage__col-title .material-symbols-outlined {
	color: var(--bl-primary);
	font-size: 24px;
}
.bl-coverage__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.bl-coverage__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--bl-on-surface);
	border-bottom: 1px solid rgba(64, 71, 83, .25);
}
.bl-coverage__list li:last-child { border-bottom: 0; }
.bl-coverage__list .material-symbols-outlined {
	color: var(--bl-primary-container);
	font-size: 18px;
	margin-top: 2px;
	flex-shrink: 0;
}

.bl-coverage__footer {
	margin-top: 32px;
	background-color: rgba(255, 255, 255, .03);
	border: 1px solid var(--bl-border-subtle);
	padding: 24px 32px;
}
.bl-coverage__footer-title {
	font-family: "Metropolis", sans-serif !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bl-primary) !important;
	margin: 0 0 12px;
}
.bl-coverage__list--accent .material-symbols-outlined {
	color: var(--bl-btn);
}

/* Tablet / laptop angosto: el texto pasa arriba y los videos van debajo, lado a lado. */
@media (max-width: 1180px) {
	.bl-coverage__layout--dual {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bl-coverage__layout--dual .bl-coverage__main {
		grid-column: 1 / -1;
	}
	.bl-coverage__layout--dual .bl-coverage__video--left {
		grid-column: 1;
	}
	.bl-coverage__layout--dual .bl-coverage__video--right {
		grid-column: 2;
	}
	.bl-coverage__layout--dual .bl-coverage__main,
	.bl-coverage__layout--left .bl-coverage__main {
		order: -1;
	}
	.bl-coverage__layout--left {
		grid-template-columns: 1fr;
		max-width: 760px;
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.bl-coverage__title { font-size: 28px; }
	.bl-coverage__grid { grid-template-columns: 1fr; }
	.bl-coverage__layout,
	.bl-coverage__layout--right,
	.bl-coverage__layout--left,
	.bl-coverage__layout--dual { grid-template-columns: 1fr; }
	.bl-coverage__layout--dual .bl-coverage__video--left,
	.bl-coverage__layout--dual .bl-coverage__video--right { grid-column: 1; }
	.bl-coverage__col { padding: 24px; }
	.bl-coverage__tab { font-size: 14px; padding: 12px 16px; }
}

/* ============================================================
   HEADER — Dropdown nav (sub-menu de Vehículo)
   ============================================================ */
.bl-header__nav-item {
	position: relative;
}
.bl-header__nav-item > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.bl-header__nav-item .bl-caret {
	font-size: 14px;
	transition: transform .2s;
}
.bl-header__submenu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	background-color: var(--bl-surface-elevation-1);
	border: 1px solid var(--bl-border-subtle);
	min-width: 220px;
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, transform .2s, visibility .2s;
	z-index: 100;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.bl-header__nav-item:hover > .bl-header__submenu,
.bl-header__nav-item:focus-within > .bl-header__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.bl-header__nav-item:hover > a .bl-caret {
	transform: rotate(180deg);
}
.bl-header__submenu a {
	display: block;
	padding: 10px 14px;
	font-family: "Metropolis", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bl-on-surface-variant);
	text-decoration: none;
	transition: background-color .15s, color .15s;
	border-bottom: 0 !important;
}
.bl-header__submenu a:hover {
	background-color: var(--bl-surface-container-high);
	color: #fff;
}

/* ============================================================
   CATÁLOGO — Grid de productos (cascos, chalecos, etc.)
   ============================================================ */
.bl-catalog__head {
	text-align: center;
	max-width: 820px;
	margin: 0 auto 48px;
}
.bl-catalog__title {
	font-family: "Metropolis", sans-serif !important;
	font-size: 40px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0 0 12px;
	color: #fff !important;
}
.bl-catalog__subtitle {
	font-family: "Inter", sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--bl-text-secondary);
	margin: 0;
}
.bl-catalog__grid {
	display: grid;
	gap: 24px;
}
.bl-catalog__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bl-catalog__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bl-catalog__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Product card */
.bl-product-card {
	background-color: var(--bl-surface-elevation-1);
	border: 1px solid var(--bl-border-subtle);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .25s, transform .25s;
}
.bl-product-card:hover {
	border-color: var(--bl-primary-container);
	transform: translateY(-4px);
}
.bl-product-card__media {
	aspect-ratio: 4 / 3;
	background-color: #0a0a0a;
	overflow: hidden;
	position: relative;
}
.bl-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.bl-product-card:hover .bl-product-card__media img {
	transform: scale(1.05);
}
.bl-product-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.bl-product-card__badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.bl-product-card__badge {
	display: inline-block;
	padding: 4px 10px;
	font-family: "Geist", sans-serif;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	border-radius: 2px;
}
.bl-product-card__badge--level {
	background-color: #160054;
	color: #fff;
}
.bl-product-card__badge--material {
	background-color: rgba(255, 255, 255, .08);
	color: var(--bl-on-surface-variant);
	border: 1px solid var(--bl-border-subtle);
}
.bl-product-card__name {
	font-family: "Metropolis", sans-serif !important;
	font-size: 20px;
	font-weight: 700;
	color: #fff !important;
	margin: 0;
	line-height: 1.25;
}
.bl-product-card__desc {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bl-text-secondary);
	margin: 0;
	flex: 1;
}
.bl-product-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bl-primary) !important;
	font-family: "Metropolis", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding-top: 8px;
	margin-top: auto;
	border-top: 1px solid var(--bl-border-subtle);
	transition: gap .2s;
}
.bl-product-card__cta:hover {
	color: #fff !important;
	gap: 12px;
}
.bl-product-card__cta .material-symbols-outlined {
	font-size: 16px;
}

@media (max-width: 1024px) {
	.bl-catalog__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
	.bl-catalog__grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.bl-catalog__grid--cols-4,
	.bl-catalog__grid--cols-3,
	.bl-catalog__grid--cols-2 { grid-template-columns: 1fr; }
	.bl-catalog__title { font-size: 28px; }
}

/* ============================================================
   HEADER — Botón Ghost (Tríptico PDF)
   ============================================================ */
.bl-header__btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: transparent;
	border: 0;
	color: #ffffff !important;
	text-decoration: none;
	font-family: "Metropolis", sans-serif;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	transition: color .2s;
	cursor: pointer;
}
.bl-header__btn-ghost:hover {
	color: var(--bl-primary-container) !important;
}
.bl-header__btn-ghost .material-symbols-outlined {
	font-size: 18px;
	color: #ffffff !important;
	transition: color .2s;
}
.bl-header__btn-ghost:hover .material-symbols-outlined {
	color: var(--bl-primary-container) !important;
}

/* Footer: link tríptico destacado en columna Nosotros */
.bl-footer__triptico {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	color: var(--bl-primary) !important;
	font-weight: 600;
}
.bl-footer__triptico:hover {
	color: #fff !important;
}

/* Footer: link "Desarrollado por Polimedios" */
.bl-footer__polimedios {
	color: var(--bl-primary) !important;
	text-decoration: none;
	font-weight: 600;
	transition: color .2s;
}
.bl-footer__polimedios:hover {
	color: #fff !important;
	text-decoration: underline;
}

/* ============================================================
   CONTACTO — Grid de info (dirección, tel, email, etc.)
   ============================================================ */
.bl-contact__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 48px;
}
.bl-contact__title {
	font-family: "Metropolis", sans-serif !important;
	font-size: 40px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0 0 12px;
	color: #fff !important;
}
.bl-contact__subtitle {
	font-family: "Inter", sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--bl-text-secondary);
	margin: 0;
}
.bl-contact__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.bl-contact-card {
	background-color: var(--bl-surface-elevation-1);
	border: 1px solid var(--bl-border-subtle);
	padding: 24px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	text-decoration: none !important;
	color: inherit !important;
	transition: border-color .25s, transform .25s, background-color .25s;
}
.bl-contact-card--link:hover {
	border-color: var(--bl-primary-container);
	background-color: #0f0f0f;
	transform: translateY(-2px);
}
.bl-contact-card__icon {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background-color: rgba(46, 150, 255, .1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.bl-contact-card__icon .material-symbols-outlined {
	color: var(--bl-primary);
	font-size: 22px;
}
.bl-contact-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bl-contact-card__label {
	font-family: "Geist", sans-serif;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bl-text-secondary);
}
.bl-contact-card__value {
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #ffffff;
	line-height: 1.4;
}
.bl-contact-card--link:hover .bl-contact-card__value {
	color: var(--bl-primary) !important;
}

/* Formulario + mapa */
.bl-contact__bottom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 48px;
	align-items: stretch;
}
.bl-contact__bottom--single {
	grid-template-columns: 1fr;
}
.bl-contact__form-wrap {
	background-color: var(--bl-surface-elevation-1);
	border: 1px solid var(--bl-border-subtle);
	padding: 32px;
}
.bl-contact__form-title {
	font-family: "Metropolis", sans-serif !important;
	font-size: 22px;
	font-weight: 700;
	color: #fff !important;
	margin: 0 0 20px;
}
.bl-contact__notice {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	padding: 12px 16px;
	margin: 0 0 20px;
	border: 1px solid transparent;
}
.bl-contact__notice--ok {
	color: #b7f7c2;
	background-color: rgba(46, 255, 120, .08);
	border-color: rgba(46, 255, 120, .3);
}
.bl-contact__notice--err {
	color: #ffb4ab;
	background-color: rgba(255, 80, 80, .08);
	border-color: rgba(255, 80, 80, .3);
}
.bl-contact-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.bl-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.bl-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bl-contact-form__field span {
	font-family: "Geist", sans-serif;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bl-text-secondary);
}
.bl-contact-form__field input,
.bl-contact-form__field textarea {
	font-family: "Inter", sans-serif;
	font-size: 15px;
	color: #fff;
	background-color: #0f0f0f;
	border: 1px solid var(--bl-border-subtle);
	border-radius: 2px;
	padding: 12px 14px;
	width: 100%;
	transition: border-color .2s;
}
.bl-contact-form__field input:focus,
.bl-contact-form__field textarea:focus {
	outline: none;
	border-color: var(--bl-primary-container);
}
.bl-contact-form__field textarea {
	resize: vertical;
	min-height: 120px;
}
.bl-contact-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.bl-contact-form__submit,
.bl-contact .elementor-button,
.bl-contact .elementor-form .elementor-button,
.bl-contact button[type="submit"] {
	font-family: "Geist", sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--bl-btn-ink) !important;
	background-color: var(--bl-btn) !important;
	background-image: none !important;
	border: none;
	border-radius: 2px;
	padding: 14px 24px;
	cursor: pointer;
	transition: filter .2s, transform .2s;
}
.bl-contact-form__submit:hover,
.bl-contact .elementor-button:hover,
.bl-contact .elementor-form .elementor-button:hover,
.bl-contact button[type="submit"]:hover {
	background-color: var(--bl-btn) !important;
	filter: brightness(.93);
	transform: translateY(-1px);
}

/* Botón de envío de cualquier formulario de Elementor → gris de marca */
.elementor-form .elementor-button,
.elementor-form button[type="submit"],
.elementor-field-type-submit .elementor-button,
.elementor-field-type-submit button {
	background-color: var(--bl-btn) !important;
	background-image: none !important;
	color: var(--bl-btn-ink) !important;
}
.elementor-form .elementor-button:hover,
.elementor-form button[type="submit"]:hover,
.elementor-field-type-submit .elementor-button:hover,
.elementor-field-type-submit button:hover {
	background-color: var(--bl-btn) !important;
	filter: brightness(.93);
}
.bl-contact__map {
	position: relative;
	min-height: 360px;
	border: 1px solid var(--bl-border-subtle);
	overflow: hidden;
}
.bl-contact__map iframe {
	width: 100%;
	height: 100%;
	min-height: 360px;
	border: 0;
	display: block;
	filter: grayscale(0.4) invert(0.9) hue-rotate(180deg);
}
.bl-contact__map-link {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Geist", sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background-color: rgba(10, 10, 10, .9);
	border: 1px solid var(--bl-border-subtle);
	padding: 10px 16px;
	border-radius: 2px;
	transition: border-color .2s;
}
.bl-contact__map-link:hover {
	border-color: var(--bl-primary-container);
}
.bl-contact__map-link .material-symbols-outlined {
	font-size: 18px;
	color: var(--bl-primary);
}

@media (max-width: 900px) {
	.bl-contact__grid { grid-template-columns: 1fr 1fr; }
	.bl-contact__title { font-size: 28px; }
	.bl-contact__bottom { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.bl-contact__grid { grid-template-columns: 1fr; }
	.bl-contact-form__row { grid-template-columns: 1fr; }
	.bl-contact__form-wrap { padding: 24px; }
}