/* ============================================================
   DNV REPUESTOS (Distribuidora Denver SRL) - tema del tenant
   ------------------------------------------------------------
   Identidad: la del sitio actual de DNV, azul y blanco.
   - Azul rey #1E40AF: el color de marca (botones, enlaces, badges de oferta).
   - Azul barra #1C3DA6: fondo del header (menú) y del pie.
   - Azul marino #0B1A3F: textos y paneles oscuros. Noche #071330: anuncios y megamenú.
   - Blancos y grises fríos para fondos (#F4F6FA) y bordes (#E2E8F0).
   Sólo azules, blancos y grises fríos, nada en diagonal: botones rectangulares con las puntas apenas redondeadas,
   títulos rectos en sentence case.
   Tipografía: Geist para títulos y texto. Registrada en head.php
   ($google_fonts_por_proyecto["dnvrepuestos"]).

   Todo cuelga de los ids de los bloques (#divBloque<Nombre>): los nombres de los bloques son parte
   del diseño. La home se reconoce por body#paginaInicio, nunca por la presencia de un bloque.
   ============================================================ */

:root {
	--dnv-azul: #1E40AF;
	--dnv-azul-hover: #1A3796;
	--dnv-azul-tinte: #EAF0FC;
	--dnv-azul-luz: #9DB8F2;
	--dnv-marino: #0B1A3F;
	--dnv-noche: #071330;
	--dnv-barra: #1C3DA6;
	--dnv-tinta: #0F172A;
	--dnv-texto: #475569;
	--dnv-gris: #64748B;
	--dnv-fondo: #F4F6FA;
	--dnv-borde: #E2E8F0;
	--dnv-radio: 12px;
	--dnv-radio-boton: 8px;
	--dnv-fuente: "Geist", "Inter", system-ui, sans-serif;

	--bs-font-sans-serif: "Geist", "Inter", system-ui, sans-serif;
	--bs-body-font-family: "Geist", "Inter", system-ui, sans-serif;
	--bs-body-color: #475569;

	/* buscador del header: barra blanca sobre el azul del header */
	--buscador-fondo: var(--dnv-barra);
	--buscador-radio: 8px;
}

/* ---------- Tipografía: Geist para todo ---------- */

html body,
html body :is(h1, h2, h3, h4, h5, h6, p, a, li, span, div, button, input, textarea, select, label, small, strong, em, blockquote, td, th, figcaption, .btn, .nav-link, .dropdown-item):not([class*="material-symbols"]):not([class*="uil"]):not([class*="fa-"]) {
	font-family: var(--dnv-fuente) !important;
}

body {
	background-color: var(--dnv-fondo);
	color: var(--dnv-texto);
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	color: var(--dnv-marino);
	font-style: normal !important;
	text-transform: none !important;
	letter-spacing: -0.02em;
}

.display-1, .display-2, .display-3, .display-4, .display-5 {
	font-weight: 700 !important;
	line-height: 1.08;
}

a { color: var(--dnv-azul); }
a:hover { color: var(--dnv-azul-hover); }

.text-primary { color: var(--dnv-azul) !important; }

/* Título de bloque: Geist 700, recto, alineado a la izquierda */
:is(#divBloqueCategorias, #divBloqueRubrosNosotros) h2.display-4,
#divBloqueDestacados h2.display-4,
#divBloqueNovedades h2.display-4,
:is(#divBloqueMarcas, #divBloqueMarcasNosotros) h2.display-4,
#divBloquePasosMayorista h3.display-4,
#divBloquePasosMinorista h3.display-4 {
	font-size: clamp(28px, 2.6vw, 38px) !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em;
	color: var(--dnv-marino) !important;
	text-align: left;
	padding: 0 !important;
	margin-bottom: 24px !important;
}

/* las filas de título vienen centradas (col-md-10 mx-auto text-center): se llevan a la izquierda */
:is(#divBloqueCategorias, #divBloqueRubrosNosotros) .row > [class*="col-md-10"],
:is(#divBloqueMarcas, #divBloqueMarcasNosotros) .row > [class*="col-md-10"] {
	margin-left: 0 !important;
	justify-content: flex-start !important;
	text-align: left !important;
	flex: 0 0 100%;
	max-width: 100%;
}

/* ---------- Botones: rectángulos con las puntas apenas redondeadas ---------- */

.btn:not(.btn-close):not(.btn-circle) {
	font-weight: 600 !important;
	letter-spacing: 0;
	text-transform: none !important;
	border-radius: var(--dnv-radio-boton) !important;
	transform: none !important;
}

.btn-primary,
.btn-primary:focus {
	background: var(--dnv-azul) !important;
	border-color: var(--dnv-azul) !important;
	color: #fff !important;
	box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:active {
	background: var(--dnv-azul-hover) !important;
	border-color: var(--dnv-azul-hover) !important;
	color: #fff !important;
}

.btn-primary i, .btn-primary label, .btn-primary span { color: inherit !important; }

.btn-outline-primary {
	color: var(--dnv-azul) !important;
	border: 1px solid var(--dnv-azul) !important;
	background: #fff !important;
}

.btn-outline-primary:hover {
	background: var(--dnv-azul) !important;
	color: #fff !important;
}

/* El badge del usuario y del carrito: marino con número blanco */
.navbar .badge.bg-primary,
.navbar .badge-cart,
.navbar .badge-login {
	background: var(--dnv-marino) !important;
	color: #fff !important;
	font-weight: 700;
}

/* ============================================================
   HEADER
   ============================================================ */

/* Barra de anuncios: noche, mensajes separados sólo por espacio (sin separador dibujado) */
header [id^="divAnuncio_"] {
	min-height: 34px;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

header .adbar-message {
	font-size: 13.5px !important;
	font-weight: 500;
	color: #DCE5F8 !important;
	display: inline-flex;
	align-items: center;
	padding: 0 24px;
}

/* La franja del menú NO es solo el <nav>: el .navbar-collapse de adentro también se pinta */
header.wrapper.bg-color-secundario,
.navbar.navbar-bg-color-secundario,
.navbar.navbar-bg-color-secundario .navbar-collapse {
	background-color: var(--dnv-barra) !important;
}

/* Logo: el oficial en blanco, más presente que el tamaño mediano del theme */
.navbar.header-nav .navbar-brand img {
	height: 50px !important;
	width: auto !important;
	max-height: none !important;
	padding: 0 !important;
}

/* Enlaces del menú sobre el marino: texto blanco azulado; al pasar, con foco o en la página actual,
   blanco con subrayado blanco. Nunca azul sobre azul. */
@media (min-width: 992px) {
	.navbar.header-nav .navbar-collapse {
		border-top: 1px solid rgba(255, 255, 255, .08);
	}

	.navbar.header-nav .navbar-nav > .nav-item > .nav-link {
		font-size: 15px !important;
		font-weight: 500 !important;
		color: #DCE5F8 !important;
		padding-top: .95rem !important;
		padding-bottom: .95rem !important;
		display: flex;
		align-items: center;
		text-decoration: none;
	}
}

/* Menú principal (escritorio): el subrayado es una barra que se llena de izquierda a derecha. Se dibuja
   con un fondo sobre la caja de contenido, así abarca el texto y la flecha de Productos al mismo nivel
   (con text-decoration la flecha quedaba subrayada más abajo que el texto). */
@media (min-width: 992px) {
	#mobileMenu .navbar-nav > .nav-item > .nav-link {
		text-decoration: none !important;
		background-color: transparent !important;
		background-image: linear-gradient(#fff, #fff) !important;
		background-repeat: no-repeat !important;
		background-origin: content-box !important;
		background-position: 0 calc(100% + 7px) !important;
		background-size: 0% 2px !important;
		transition: background-size .3s ease, color .2s ease !important;
	}

	#mobileMenu .navbar-nav > .nav-item > .nav-link:hover,
	#mobileMenu .navbar-nav > .nav-item > .nav-link:focus-visible,
	#mobileMenu .navbar-nav > .nav-item > .nav-link.active,
	#mobileMenu .navbar-nav > .nav-item > .nav-link[aria-current],
	#mobileMenu .navbar-nav > .nav-item.show > .nav-link,
	#mobileMenu .navbar-nav > .nav-item.active > .nav-link,
	#mobileMenu .navbar-nav > .nav-item.dropdown:hover > .nav-link,
	#mobileMenu .navbar-nav > .nav-item.dropdown:focus-within > .nav-link {
		color: #fff !important;
		text-decoration: none !important;
		background-size: 100% 2px !important;
	}

	#mobileMenu .navbar-nav > .nav-item > .nav-link:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
		border-radius: 4px;
	}
}

/* Íconos de cuenta y carrito: sin subrayado; al pasar, azul oscuro */
.navbar.header-nav .navbar-other .nav-link,
.navbar.header-nav .navbar-other .nav-link i {
	color: #fff !important;
	text-decoration: none !important;
	transition: color .2s ease;
}

.navbar.header-nav .navbar-other .nav-link:is(:hover, :focus-visible),
.navbar.header-nav .navbar-other .nav-link:is(:hover, :focus-visible) i {
	color: var(--dnv-marino) !important;
	text-decoration: none !important;
}

.navbar.header-nav .navbar-other .nav-link i {
	font-size: 23px !important;
}

/* Buscador: barra blanca, botón azul de marca */
.buscador-barra-fila .buscador-barra {
	background: #fff !important;
	border: 0 !important;
	border-radius: var(--dnv-radio-boton) !important;
	box-shadow: 0 6px 20px rgba(3, 9, 30, .22);
	overflow: hidden;
}

.buscador-barra-fila .buscador-barra-input {
	color: var(--dnv-tinta) !important;
	font-size: 15px !important;
	font-weight: 400;
}

.buscador-barra-fila .buscador-barra-input::placeholder {
	color: #7A8699 !important;
}

.buscador-barra-fila .buscador-barra-boton {
	background: var(--dnv-azul) !important;
	color: #fff !important;
	border-radius: 6px !important;
	/* 38px: pedido de Rodri, no cambiar */
	min-width: 38px;
}

.buscador-barra-fila .buscador-barra-boton:hover {
	background: var(--dnv-azul-hover) !important;
}

.buscador-barra-fila .buscador-barra-boton i {
	color: #fff !important;
	font-size: 20px !important;
}

/* ---------- Megamenú de Productos (panel oscuro nativo) ---------- */

.megamenu-panel.megamenu-oscuro {
	background: var(--dnv-noche) !important;
	border: 1px solid rgba(157, 184, 242, .14) !important;
	border-top: 0 solid var(--dnv-azul) !important;
	border-radius: 0 0 var(--dnv-radio) var(--dnv-radio) !important;
	box-shadow: 0 24px 50px rgba(3, 9, 30, .45) !important;
}

/* Títulos de columna (Rubros, Iluminación LED, Detailing, Marcas): blancos en todos los estados */
.megamenu-panel .megamenu-col-titulo,
.megamenu-panel .megamenu-col-titulo a,
.megamenu-panel a.megamenu-col-titulo {
	font-weight: 600 !important;
	font-size: 16px !important;
	color: #fff !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	background: transparent !important;
}

/* El theme pinta del primario, con !important, el título cuya columna (.dropdown-submenu) está
   bajo el mouse: se le gana con más especificidad */
html body .navbar .navbar-nav .megamenu-panel :is(.dropdown-submenu:hover > a.megamenu-col-titulo, .dropdown-submenu:focus-within > a.megamenu-col-titulo, a.megamenu-col-titulo:hover, a.megamenu-col-titulo:focus, a.megamenu-col-titulo.active),
.megamenu-panel .megamenu-col-titulo a:is(:hover, :focus-visible, .active) {
	color: #fff !important;
	text-decoration: none !important;
}

/* Ítems del panel (rubros, subrubros y marcas) */
.megamenu-panel .megamenu-items .dropdown-item,
.megamenu-panel .megamenu-items a {
	color: #B7C6E6 !important;
	font-size: 15px !important;
	font-weight: 400;
	background: transparent !important;
}

/* Al pasar, el ítem sólo se aclara a blanco: el megamenú no subraya nada */
html body .navbar .navbar-nav .megamenu-panel .megamenu-items :is(.dropdown-item, a):is(:hover, :focus, :focus-visible, :active, .active) {
	color: #fff !important;
	background: transparent !important;
	text-decoration: none !important;
}

.megamenu-panel a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Rubros (10) y Marcas (10) en dos columnas, para que no estiren el panel */
@media (min-width: 992px) {
	.megamenu-panel .megamenu-col-4 .megamenu-items {
		column-count: 2;
		column-gap: 28px;
	}

	.megamenu-panel .megamenu-col-4 .megamenu-items > li {
		break-inside: avoid;
	}
}

/* ---------- Celular: cajón lateral y barra ---------- */
@media (max-width: 991.98px) {
	.navbar.header-nav .navbar-brand img {
		height: 40px !important;
		padding: 0 !important;
	}

	/* El cajón entero en el azul del header: los paneles (.mobile-menu-panel) los pinta la plataforma con
	   el color secundario (marino) */
	#mobileMenu,
	#mobileMenu .offcanvas-body,
	#mobileMenu .mobile-menu-panel {
		background: var(--dnv-barra) !important;
	}

	#mobileMenu .nav-link,
	#mobileMenu .dropdown-item,
	#mobileMenu .dropdown-menu a {
		color: #DCE5F8 !important;
		font-weight: 500 !important;
		font-size: 17px !important;
		background: transparent !important;
	}

	#mobileMenu .dropdown-menu {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	/* Cabecera de los paneles del cajón ("‹ Productos", "‹ Rubros") y flechas: blancas */
	#mobileMenu .mobile-menu-header {
		background: rgba(255, 255, 255, .06) !important;
	}

	#mobileMenu :is(.mobile-menu-header, .mobile-menu-back, .mobile-menu-back i, .mobile-menu-title, .mobile-menu-arrow) {
		color: #fff !important;
	}

	/* Al pasar o tocar, las opciones sólo se aclaran a blanco: sin subrayado (ni en el texto ni en la flecha) */
	#mobileMenu .mobile-menu-back:is(:hover, :focus-visible) .mobile-menu-title {
		text-decoration: none !important;
	}

	#mobileMenu :is(.nav-link, .dropdown-item, .dropdown-menu a):is(:hover, :focus, :focus-visible, :active, .active, .show, [aria-current]),
	#mobileMenu :is(.nav-link, .dropdown-item, .dropdown-menu a):is(:hover, :focus, :focus-visible, :active, .active, .show, [aria-current]) * {
		color: #fff !important;
		background: transparent !important;
		text-decoration: none !important;
	}

	.navbar.header-nav .hamburger span,
	.navbar.header-nav .hamburger span::before,
	.navbar.header-nav .hamburger span::after {
		background: #fff !important;
	}
}

/* ============================================================
   PORTADAS (home e internas). Los dos swipers son independientes: siempre los dos ids.
   Nada cuelga de swiper-hero-{con|sin}-barra (cambia con BARRA_MOSTRAR).
   ============================================================ */

#swiperPortadasHorizontal,
#swiperPortadasHorizontal .swiper,
#swiperPortadasHorizontal .swiper-slide {
	height: clamp(520px, 74vh, 700px) !important;
}

#swiperPortadasHorizontal .swiper-slide,
#swiperPortadasVertical .swiper-slide {
	background-color: var(--dnv-noche) !important;
}

/* El velo ya viene quemado en la foto: el overlay del theme se apaga */
#swiperPortadasHorizontal .swiper-overlay,
#swiperPortadasVertical .swiper-overlay {
	display: none !important;
}

#swiperPortadasHorizontal .swiper-content .row > [class*="col-"],
#swiperPortadasVertical .swiper-content .row > [class*="col-"] {
	text-align: left !important;
}

@media (min-width: 992px) {
	#swiperPortadasHorizontal .swiper-content .row > [class*="col-"] {
		max-width: 50%;
		margin-left: 0 !important;
	}
}

/* Todos los textos de la portada en Geist (pco_fuente no la tiene en su lista) */
#swiperPortadasHorizontal [class*="cls-componente-"],
#swiperPortadasVertical [class*="cls-componente-"] {
	font-family: var(--dnv-fuente) !important;
	font-style: normal !important;
}

/* Titular: Geist 700 recto, en sentence case tal como está cargado */
#swiperPortadasHorizontal .portada-texto-grande,
#swiperPortadasVertical .portada-texto-grande {
	font-weight: 700 !important;
	text-transform: none !important;
	font-size: clamp(40px, 4.3vw, 66px) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.035em;
	color: #fff !important;
	margin-bottom: 18px !important;
}

body:not(#paginaInicio) #swiperPortadasHorizontal .portada-texto-grande {
	font-size: clamp(36px, 3.6vw, 54px) !important;
}

#swiperPortadasHorizontal .portada-texto-normal,
#swiperPortadasVertical .portada-texto-normal {
	font-size: 18px !important;
	line-height: 1.55 !important;
	font-weight: 400;
	color: #D3DEF5 !important;
	max-width: 540px;
	margin-bottom: 10px !important;
}

/* Botones de la portada: el primero, azul de marca; el segundo, contorno blanco */
#swiperPortadasHorizontal .swiper-content a.btn,
#swiperPortadasVertical .swiper-content a.btn {
	background: var(--dnv-azul) !important;
	border: 1px solid var(--dnv-azul) !important;
	padding: 14px 26px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #fff !important;
	margin-right: 10px;
	margin-top: 22px !important;
}

#swiperPortadasHorizontal .swiper-content a.btn:hover,
#swiperPortadasVertical .swiper-content a.btn:hover {
	background: var(--dnv-azul-hover) !important;
	border-color: var(--dnv-azul-hover) !important;
}

#swiperPortadasHorizontal .swiper-content a.btn + a.btn,
#swiperPortadasVertical .swiper-content a.btn + a.btn {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, .7) !important;
	color: #fff !important;
}

#swiperPortadasHorizontal .swiper-content a.btn + a.btn:hover,
#swiperPortadasVertical .swiper-content a.btn + a.btn:hover {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--dnv-marino) !important;
}

/* Paginación del hero: barras rectas */
#swiperPortadasHorizontal .swiper-pagination-bullet,
#swiperPortadasVertical .swiper-pagination-bullet {
	background: rgba(255, 255, 255, .45) !important;
	opacity: 1;
	width: 24px !important;
	height: 4px !important;
	border-radius: 2px !important;
}

#swiperPortadasHorizontal .swiper-pagination-bullet-active,
#swiperPortadasVertical .swiper-pagination-bullet-active {
	background: #fff !important;
	width: 40px !important;
}

/* Celular: el texto va abajo, donde la foto tiene el velo */
@media (max-width: 575.98px) {
	#swiperPortadasVertical,
	#swiperPortadasVertical .swiper,
	#swiperPortadasVertical .swiper-slide {
		height: calc(100svh - 190px) !important;
		min-height: 520px;
	}

	body:not(#paginaInicio) #swiperPortadasVertical,
	body:not(#paginaInicio) #swiperPortadasVertical .swiper,
	body:not(#paginaInicio) #swiperPortadasVertical .swiper-slide {
		height: 330px !important;
		min-height: 0;
	}

	#swiperPortadasVertical .swiper-content .row {
		align-items: flex-end !important;
	}

	#swiperPortadasVertical .swiper-content .row > [class*="col-"] {
		align-self: flex-end !important;
		padding-bottom: 54px;
		padding-left: 20px;
		padding-right: 20px;
	}

	#swiperPortadasVertical .portada-texto-grande {
		font-size: 36px !important;
	}

	body:not(#paginaInicio) #swiperPortadasVertical .portada-texto-grande {
		font-size: 31px !important;
	}

	#swiperPortadasVertical .portada-texto-normal {
		font-size: 16px !important;
	}

	#swiperPortadasVertical .swiper-content a.btn {
		padding: 12px 20px !important;
		font-size: 15px !important;
		margin-top: 14px !important;
	}
}

/* ============================================================
   BENEFICIOS (Sitio > Banners): franja fija de cuatro, no carrusel
   ============================================================ */

#divBloqueBeneficios {
	background: #fff !important;
	border-bottom: 1px solid var(--dnv-borde);
}

#divBloqueBeneficios > .container {
	padding-top: 26px !important;
	padding-bottom: 26px !important;
}

#divBloqueBeneficios .swiper-wrapper {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	transform: none !important;
	gap: 0;
}

#divBloqueBeneficios .swiper-slide {
	width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	/* arriba, no al centro: cuando la bajada ocupa dos renglones el ícono quedaba más abajo que el resto */
	align-items: flex-start;
	gap: 16px;
	text-align: left !important;
	padding: 4px 22px;
	border-left: 1px solid var(--dnv-borde);
}

#divBloqueBeneficios .swiper-slide:first-child {
	border-left: 0;
	padding-left: 0;
}

#divBloqueBeneficios .banner-icon,
#divBanners .banner-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 !important;
	font-size: 23px !important;
	color: var(--dnv-azul) !important;
	background: var(--dnv-azul-tinte);
	border-radius: 10px;
}

#divBloqueBeneficios h4 {
	font-weight: 600 !important;
	font-size: 16.5px !important;
	letter-spacing: -0.01em;
	color: var(--dnv-marino) !important;
	margin-bottom: 2px !important;
}

#divBloqueBeneficios p {
	font-size: 14px !important;
	color: var(--dnv-gris) !important;
	line-height: 1.4;
}

#divBloqueBeneficios .swiper-pagination { display: none !important; }

@media (max-width: 991.98px) {
	#divBloqueBeneficios .swiper-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 18px;
	}

	#divBloqueBeneficios .swiper-slide:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}
}

@media (max-width: 575.98px) {
	#divBloqueBeneficios .swiper-slide {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 0 0 0 14px;
	}

	#divBloqueBeneficios .banner-icon {
		width: 42px;
		height: 42px;
		font-size: 20px !important;
	}

	#divBloqueBeneficios h4 { font-size: 15.5px !important; }
	#divBloqueBeneficios p { font-size: 13px !important; }
}

/* ============================================================
   CATEGORÍAS: collage de 5 x 2 con las composiciones de producto y el nombre encima
   ============================================================ */

:is(#divBloqueCategorias, #divBloqueRubrosNosotros) {
	background: var(--dnv-fondo) !important;
}

:is(#divBloqueCategorias, #divBloqueRubrosNosotros) > .container {
	padding-top: 72px !important;
	padding-bottom: 24px !important;
}

:is(#divBloqueCategorias, #divBloqueRubrosNosotros) .categorias-collage {
	grid-auto-rows: 300px;
	gap: 16px;
}

:is(#divBloqueCategorias, #divBloqueRubrosNosotros) .categoria-tile {
	border-radius: var(--dnv-radio) !important;
	background: var(--dnv-marino);
	box-shadow: 0 8px 22px rgba(11, 26, 63, .12);
	transition: transform .25s ease, box-shadow .25s ease;
}

:is(#divBloqueCategorias, #divBloqueRubrosNosotros) .categoria-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(11, 26, 63, .2);
}

/* El nombre abajo a la izquierda, en blanco, sobre un velo suave para que se lea en cualquier foto */
:is(#divBloqueCategorias, #divBloqueRubrosNosotros) .categoria-tile .categoria-tile-texto {
	bottom: 0;
	left: 0;
	right: 0;
	top: auto !important;
	text-align: left !important;
	padding: 48px 20px 18px !important;
	background: linear-gradient(to top, rgba(7, 19, 48, .82) 0%, rgba(7, 19, 48, .45) 55%, rgba(7, 19, 48, 0) 100%);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35) !important;
	align-items: flex-start;
}

:is(#divBloqueCategorias, #divBloqueRubrosNosotros) .categoria-tile .categoria-tile-titulo {
	font-weight: 600 !important;
	font-size: 18px !important;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* flecha que entra al pasar el mouse */
:is(#divBloqueCategorias, #divBloqueRubrosNosotros) .categoria-tile .categoria-tile-titulo::after {
	content: "\2192";
	font-weight: 500;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	transform: translateX(-4px);
	opacity: 0;
	transition: all .2s ease;
}

:is(#divBloqueCategorias, #divBloqueRubrosNosotros) .categoria-tile:hover .categoria-tile-titulo::after {
	transform: translateX(0);
	opacity: 1;
}

@media (max-width: 991.98px) {
	:is(#divBloqueCategorias, #divBloqueRubrosNosotros) .categorias-collage {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: 260px;
	}
}

@media (max-width: 767.98px) {
	:is(#divBloqueCategorias, #divBloqueRubrosNosotros) > .container {
		padding-top: 48px !important;
	}

	:is(#divBloqueCategorias, #divBloqueRubrosNosotros) .categorias-collage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 205px;
		gap: 12px;
	}

	:is(#divBloqueCategorias, #divBloqueRubrosNosotros) .categoria-tile .categoria-tile-texto {
		padding: 36px 14px 12px !important;
	}

	:is(#divBloqueCategorias, #divBloqueRubrosNosotros) .categoria-tile .categoria-tile-titulo {
		font-size: 15.5px !important;
	}
}

/* ============================================================
   MAYORISTAS (modelo 3, texto + foto): panel azul marino con la escala por volumen.
   El panel es el .container, así funciona igual en la home y adentro de Cómo comprar.
   ============================================================ */

/* El theme pega las secciones consecutivas con section.wrapper:not(#divPortadas) + section.wrapper
   { padding-top: 0 !important }: ese :not(#id) pesa un id, así que los rellenos de sección van con el
   id repetido (dos ids), sin depender de la página ni del bloque vecino. */
:is(#divBloqueMayoristas, #divBloqueMayoristasCompra):is(#divBloqueMayoristas, #divBloqueMayoristasCompra) {
	background: transparent !important;
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}

:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) > .container {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	padding: 56px 56px 60px !important;
	background:
		radial-gradient(ellipse at 100% 0%, rgba(30, 64, 175, .55) 0%, rgba(30, 64, 175, 0) 60%),
		var(--dnv-marino);
	box-shadow: 0 22px 54px rgba(11, 26, 63, .24);
}

:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) .row {
	margin-top: 0 !important;
	align-items: center !important;
	--bs-gutter-y: 2rem;
}

:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) .row > [class*="col-"] {
	margin-top: 0 !important;
}

:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) h3.display-5 {
	font-size: clamp(32px, 3.2vw, 46px) !important;
	letter-spacing: -0.03em;
	color: #fff !important;
	margin-bottom: 12px !important;
}

/* "Cuenta mayorista": etiqueta corta, sentence case */
:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) h4.display-7 {
	order: -1;
	display: inline-block;
	font-weight: 500 !important;
	font-size: 14px !important;
	letter-spacing: 0;
	color: #DCE5F8 !important;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 6px;
	padding: 5px 12px;
	margin-bottom: 18px !important;
}

:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) .row > [class*="col-"]:not(.order-lg-2) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) p {
	color: #C3D0EC !important;
	font-size: 16px;
	line-height: 1.65;
}

/* La escala: cada renglón es una fila con el monto a la izquierda y el % a la derecha.
   Acá el li SÍ va en flex: el texto suelto ("5 % de descuento") es la segunda columna. */
:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) ul.icon-list {
	width: 100%;
	max-width: 520px;
	padding: 0 !important;
	margin: 8px 0 22px !important;
}

:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) ul.icon-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 11px 18px !important;
	margin-bottom: 8px !important;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(157, 184, 242, .18);
	border-left: 3px solid var(--dnv-azul-luz);
	border-radius: 8px;
	font-weight: 700;
	font-size: 16px;
	color: #fff !important;
}

:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) ul.icon-list li > span:first-child { display: none !important; }

:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) ul.icon-list li strong {
	font-weight: 500;
	font-size: 15.5px;
	color: #C3D0EC;
}

:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) figure {
	position: relative;
	border-radius: 14px !important;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(3, 9, 30, .4);
}

:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) figure img {
	width: 100%;
	aspect-ratio: 6 / 5;
	object-fit: cover;
}

:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) a.btn-primary {
	padding: 14px 26px !important;
	font-size: 16px !important;
}

@media (max-width: 767.98px) {
	:is(#divBloqueMayoristas, #divBloqueMayoristasCompra):is(#divBloqueMayoristas, #divBloqueMayoristasCompra) {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) > .container {
		border-radius: 16px;
		padding: 34px 20px 36px !important;
		width: calc(100% - 24px);
	}

	:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) ul.icon-list li {
		font-size: 15px;
		padding: 10px 14px !important;
	}

	:is(#divBloqueMayoristas, #divBloqueMayoristasCompra) ul.icon-list li strong { font-size: 14.5px; }
}

/* ============================================================
   PRODUCTOS: tarjetas (Novedades, listado, relacionados) y el destacado grande
   ============================================================ */

#divBloqueNovedades,
#divBloqueDestacados {
	background: var(--dnv-fondo) !important;
}

/* Tarjeta: foto sobre blanco, borde fino, precio firme */
.project.item figure.rounded.hover-scale,
.shop .project figure.rounded {
	background: #fff;
	border: 1px solid var(--dnv-borde);
	border-radius: var(--dnv-radio) !important;
	overflow: hidden;
}

.project figure img:not(.d-non) {
	background: #fff;
}

.shop .project .post-title,
.shop .project .post-title a,
.project.item .post-title a {
	font-weight: 500 !important;
	font-size: 15.5px !important;
	line-height: 1.35;
	color: var(--dnv-tinta) !important;
}

.project.item .post-title a:hover {
	color: var(--dnv-azul) !important;
}

/* Precio: Geist 700 en azul marino, sin adornos */
.project .price ins,
.project .price ins .amount,
#divBloqueDestacados ins,
.shop .price ins {
	font-style: normal !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	letter-spacing: -0.02em;
	color: var(--dnv-marino) !important;
	text-decoration: none !important;
	background: none !important;
	padding: 0;
}

.project .price del,
.shop .price del {
	color: #8A94A6 !important;
	font-size: 14px !important;
}

/* El % de descuento es label.amount.text-danger: badge azul de marca con texto blanco */
.project .price label.text-danger,
#divBloqueDestacados label.text-danger,
[id^="txtDescuento_"] {
	background: var(--dnv-azul) !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	padding: 3px 7px !important;
	border-radius: 4px !important;
	line-height: 1.3;
}

/* Etiquetas de la tarjeta (Nuevo / Oferta / Promo) */
[id^="etiquetaProductoNuevo_"] .badge,
[id^="etiquetaProductoNuevo_"] span {
	background: var(--dnv-marino) !important;
	color: #fff !important;
}

[id^="etiquetaProductoOferta_"] .badge,
[id^="etiquetaProductoOferta_"] span,
[id^="etiquetaProductoPromo_"] .badge,
[id^="etiquetaProductoPromo_"] span {
	background: var(--dnv-azul) !important;
	color: #fff !important;
}

/* Botón de agregar al carrito de la tarjeta */
.project [id^="btnAgregarProductoCarrito_"].btn,
.project .btn-comprar {
	padding-left: 16px !important;
	padding-right: 16px !important;
}

/* Etiquetas de la tarjeta en sentence case, sin la mayúscula chica del theme */
.etiqueta-producto {
	text-transform: none !important;
	font-size: 12px !important;
	font-weight: 600;
	border-radius: 4px !important;
	width: auto !important;
	padding: 0 9px;
}

/* Pickers de variante en las tarjetas: botones compactos que bajan de renglón, nunca cortados ni
   fuera del ancho de la tarjeta (el precio y el Comprar quedan alineados igual: ver la grilla). */
.project.item .picker.picker-botones {
	flex-wrap: wrap !important;
	overflow: visible !important;
	gap: 5px;
	max-width: 100%;
}

.project.item .picker.picker-botones label {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	margin: 0 !important;
}

.project.item .picker.picker-botones label span {
	display: inline-block;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
	font-size: 12px !important;
	line-height: 1.25 !important;
	padding: 3px 8px !important;
	border-radius: 6px !important;
}

/* Los botones de variante no se estiran al alto de la línea (el último, sin margen inferior,
   quedaba más alto que el resto) */
.picker.picker-botones {
	align-items: flex-start !important;
}

.picker.picker-botones label,
.picker.picker-botones label span {
	border-radius: 6px !important;
}

/* Botones de variante: el relleno lo da el span, el label va sin padding (pedido de Rodri) */
.picker.picker-botones label:not([for*=radColor]) {
	padding: 0 !important;
}

.picker.picker-botones label:has(input:checked) span {
	background: var(--dnv-marino) !important;
	border-color: var(--dnv-marino) !important;
	color: #fff !important;
}

/* El destacado grande (un producto por vez) va en un panel blanco */
#divBloqueDestacados .swiper-slide > .row {
	background: #fff;
	border: 1px solid var(--dnv-borde);
	border-radius: 18px;
	box-shadow: 0 12px 34px rgba(11, 26, 63, .07);
	margin: 0 2px 6px !important;
	padding: 28px 28px 34px;
}

#divBloqueDestacados .swiper-slide > .row figure {
	border: 0 !important;
	margin-bottom: 0 !important;
}

#divBloqueDestacados .post-title,
#divBloqueDestacados .post-title a {
	font-weight: 700 !important;
	font-size: clamp(24px, 2.2vw, 32px) !important;
	letter-spacing: -0.025em;
	line-height: 1.12;
	color: var(--dnv-marino) !important;
}

#divBloqueDestacados ins {
	font-size: 28px !important;
}

/* Ver más de los bloques de productos, a la altura del título */
#divBloqueNovedades a.ver-mas,
#divBloqueDestacados a.ver-mas {
	color: var(--dnv-azul) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
}

#divBloqueNovedades .col-12.d-flex:has(> h2.display-4),
#divBloqueDestacados .col-12.d-flex:has(> h2.display-4) {
	align-items: center !important;
}

/* Tarjetas en grilla y en carrusel (listado, mosaico de Lanzamientos, recomendados y vistos): alturas
   parejas, con el precio y el botón Comprar alineados abajo aunque el nombre ocupe uno o tres
   renglones. En el carrusel los slides se estiran al más alto. */
.swiper-wrapper:has(> .project.item:not(:has(> .row))) {
	align-items: stretch !important;
}

.swiper-wrapper > .project.item:not(:has(> .row)) {
	height: auto !important;
}

:is(.row, .swiper-wrapper) > .project.item:not(:has(> .row)) {
	display: flex;
	flex-direction: column;
}

:is(.row, .swiper-wrapper) > .project.item:not(:has(> .row)) > div:first-child,
:is(.row, .swiper-wrapper) > .project.item:not(:has(> .row)) > div:first-child > .post-header {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

:is(.row, .swiper-wrapper) > .project.item:not(:has(> .row)) .post-header > .price {
	margin-top: auto;
}

/* "Precio sin Impuestos Nacionales $X" ocupa uno o dos renglones según el monto: siempre el alto de
   dos, así el precio queda a la misma altura en toda la fila */
:is(.row, .swiper-wrapper) > .project.item:not(:has(> .row)) .price label[id^="txtPrecioSinImpuestos_"] {
	display: block;
	line-height: 12px !important;
	min-height: 24px;
}

/* Lanzamientos en mosaico (blq_id 6): 4 x 3 en escritorio, 2 columnas en el celular. En el celular
   la fila del theme (px-3 con márgenes negativos dentro de un container px-0) se salía 9 px de la
   pantalla: se ajusta la canaleta. */
#divBloqueNovedades#divBloqueNovedades {
	padding-top: 72px !important;
	padding-bottom: 24px !important;
}

#divBloqueNovedades > .container-sm {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

#divBloqueNovedades .row.mt-4 {
	margin-top: 0 !important;
}

@media (max-width: 575.98px) {
	#divBloqueNovedades#divBloqueNovedades {
		padding-top: 48px !important;
	}

	#divBloqueNovedades .row.mt-4 {
		--bs-gutter-x: 14px;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 9px !important;
		padding-right: 9px !important;
	}

	#divBloqueNovedades .row > .project.item {
		margin-bottom: 28px !important;
	}
}

/* Paginación de los carruseles */
.swiper-pagination-bullet {
	background: #B8C2D6;
	opacity: 1;
}

.swiper-pagination-bullet-active {
	background: var(--dnv-azul) !important;
}

/* ============================================================
   MARCAS: logos monocromos en tarjetas blancas
   ============================================================ */

:is(#divBloqueMarcas, #divBloqueMarcasNosotros) {
	background: #fff !important;
	border-top: 1px solid var(--dnv-borde);
	border-bottom: 1px solid var(--dnv-borde);
}

:is(#divBloqueMarcas, #divBloqueMarcasNosotros) > .container {
	padding-top: 64px !important;
	padding-bottom: 36px !important;
}

:is(#divBloqueMarcas, #divBloqueMarcasNosotros) .swiper-slide figure {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 112px;
	padding: 14px 20px;
	background: var(--dnv-fondo);
	border: 1px solid var(--dnv-borde);
	border-radius: var(--dnv-radio) !important;
	transition: background .2s ease, border-color .2s ease;
}

:is(#divBloqueMarcas, #divBloqueMarcasNosotros) .swiper-slide figure:hover {
	background: #fff;
	border-color: var(--dnv-azul-luz);
}

:is(#divBloqueMarcas, #divBloqueMarcasNosotros) .swiper-slide figure img {
	max-height: 76px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

:is(#divBloqueMarcas, #divBloqueMarcasNosotros) .titulo-marca { display: none; }

@media (max-width: 767.98px) {
	:is(#divBloqueMarcas, #divBloqueMarcasNosotros) > .container { padding-top: 44px !important; }
	:is(#divBloqueMarcas, #divBloqueMarcasNosotros) .swiper-slide figure { height: 92px; }
}

/* ============================================================
   CIERRE (modelo 5): foto de fondo del bloque con un velo azul, titular y los dos contactos
   ============================================================ */

:is(#divBloqueCierre, #divBloqueCierreCompra):is(#divBloqueCierre, #divBloqueCierreCompra) {
	position: relative;
	overflow: hidden;
	padding-top: 96px !important;
	padding-bottom: 100px !important;
	background-size: cover !important;
	background-position: center center !important;
}

:is(#divBloqueCierre, #divBloqueCierreCompra)::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(7, 19, 48, .94) 0%, rgba(11, 26, 63, .84) 50%, rgba(30, 64, 175, .62) 100%);
	pointer-events: none;
}

:is(#divBloqueCierre, #divBloqueCierreCompra) > .container {
	position: relative;
	z-index: 1;
}

:is(#divBloqueCierre, #divBloqueCierreCompra) h3.display-4 {
	font-size: clamp(34px, 3.8vw, 54px) !important;
	letter-spacing: -0.035em;
	color: #fff !important;
	margin-bottom: 18px !important;
}

:is(#divBloqueCierre, #divBloqueCierreCompra) p {
	color: #D3DEF5 !important;
	font-size: 18px;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

:is(#divBloqueCierre, #divBloqueCierreCompra) p .btn {
	padding: 14px 26px !important;
	font-size: 16px !important;
	margin: 18px 6px 0;
}

:is(#divBloqueCierre, #divBloqueCierreCompra) p .btn-outline-primary {
	background: transparent !important;
	border-color: rgba(255, 255, 255, .7) !important;
	color: #fff !important;
}

:is(#divBloqueCierre, #divBloqueCierreCompra) p .btn-outline-primary:hover {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--dnv-marino) !important;
}

/* Panel redondeado con el ancho del contenedor, en la home y en Cómo comprar, separado del pie */
body:not(#paginaInicio) :is(#divBloqueCierre, #divBloqueCierreCompra) {
	border-radius: 20px;
	margin: 40px 0 64px;
}

/* En la home la sección es de ancho completo: se angosta al ancho del contenedor de cada
   breakpoint (el mismo de Cómo comprar: el del .container menos sus 15px de cada lado) */
body#paginaInicio #divBloqueCierre {
	border-radius: 20px;
	width: calc(100% - 30px);
	margin: 40px auto 64px;
}

@media (min-width: 576px) { body#paginaInicio #divBloqueCierre { max-width: 510px; } }
@media (min-width: 768px) { body#paginaInicio #divBloqueCierre { max-width: 690px; } }
@media (min-width: 992px) { body#paginaInicio #divBloqueCierre { max-width: 930px; } }
@media (min-width: 1200px) { body#paginaInicio #divBloqueCierre { max-width: 1110px; } }
@media (min-width: 1400px) { body#paginaInicio #divBloqueCierre { max-width: 1290px; } }

@media (max-width: 575.98px) {
	body:not(#paginaInicio) :is(#divBloqueCierre, #divBloqueCierreCompra),
	body#paginaInicio #divBloqueCierre {
		margin-bottom: 40px;
	}
}

@media (max-width: 575.98px) {
	:is(#divBloqueCierre, #divBloqueCierreCompra):is(#divBloqueCierre, #divBloqueCierreCompra) {
		padding-top: 64px !important;
		padding-bottom: 68px !important;
	}

	:is(#divBloqueCierre, #divBloqueCierreCompra) p { font-size: 16px; }

	:is(#divBloqueCierre, #divBloqueCierreCompra) p .btn {
		display: block;
		width: 100%;
		margin: 12px 0 0;
		font-size: 15px !important;
		overflow-wrap: anywhere;
	}
}

/* ============================================================
   INTERNAS: Nosotros, Contacto, Cómo comprar, Preguntas frecuentes y legales
   ============================================================ */

body:not(#paginaInicio) #divContenido {
	background: var(--dnv-fondo) !important;
}

#divContenido .div-texto-seccion p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--dnv-texto);
}

#divContenido .div-texto-seccion p.lead {
	font-size: 20px;
	line-height: 1.55;
	font-weight: 500;
	color: var(--dnv-marino);
}

#divContenido .div-texto-seccion h4 {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin-top: 30px;
	margin-bottom: 8px;
}

/* legales: texto en una columna legible */
.seccion-políticadeprivacidad .div-texto-seccion,
.seccion-políticadeenvío .div-texto-seccion,
.seccion-cambiosydevoluciones .div-texto-seccion,
.seccion-términosdelservicio .div-texto-seccion {
	max-width: 820px;
}

/* Nosotros: las tres cifras debajo del texto */
.nosotros-cifras > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-left: 3px solid var(--dnv-azul);
	padding-left: 14px !important;
}

.nosotros-cifras strong {
	font-weight: 700;
	font-size: 34px;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--dnv-marino);
}

.nosotros-cifras span {
	font-size: 14px;
	color: var(--dnv-gris);
	line-height: 1.3;
}

.seccion-nosotros img.img-mask-nosotros,
.seccion-nosotros .col-md-6 img.rounded {
	border-radius: 16px !important;
	box-shadow: 0 20px 44px rgba(11, 26, 63, .18);
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

/* Los bloques reusados en Nosotros y Cómo comprar viven dentro del contenedor de la sección:
   sin fondo propio ni doble margen lateral */
body:not(#paginaInicio) #divContenido #divBloqueBeneficios,
body:not(#paginaInicio) #divContenido :is(#divBloqueCategorias, #divBloqueRubrosNosotros),
body:not(#paginaInicio) #divContenido :is(#divBloqueMarcas, #divBloqueMarcasNosotros) {
	background: transparent !important;
	border: 0;
}

body:not(#paginaInicio) #divContenido #divBloqueBeneficios {
	background: #fff !important;
	border-radius: var(--dnv-radio);
	margin-top: 36px;
}

body:not(#paginaInicio) #divContenido #divBloqueBeneficios > .container {
	padding-left: 24px !important;
	padding-right: 24px !important;
}

/* Pasos de Cómo comprar (modelo 5): el número grande, el ícono y el texto */
#divBloquePasosMayorista#divBloquePasosMayorista,
#divBloquePasosMinorista#divBloquePasosMinorista {
	background: transparent !important;
	padding-top: 40px !important;
	padding-bottom: 16px !important;
}

#divBloquePasosMayorista .row.text-center,
#divBloquePasosMinorista .row.text-center {
	text-align: left !important;
}

#divBloquePasosMayorista .row.text-center p,
#divBloquePasosMinorista .row.text-center p {
	font-size: 17px;
	max-width: 760px;
	color: var(--dnv-texto);
}

#divBloquePasosMayorista h3.display-4,
#divBloquePasosMinorista h3.display-4 {
	margin-bottom: 10px !important;
}

#divBloquePasosMayorista .pricing-wrapper > .row > [class*="col-"],
#divBloquePasosMinorista .pricing-wrapper > .row > [class*="col-"] {
	display: flex;
	flex-direction: column;
	background-clip: content-box;
}

#divBloquePasosMayorista .pricing-wrapper > .row > [class*="col-"] > *,
#divBloquePasosMinorista .pricing-wrapper > .row > [class*="col-"] > * {
	position: relative;
}

#divBloquePasosMayorista .bloque-item-icono,
#divBloquePasosMinorista .bloque-item-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 14px;
	background: var(--dnv-azul-tinte);
	border-radius: 10px;
}

#divBloquePasosMayorista .bloque-item-icono i,
#divBloquePasosMinorista .bloque-item-icono i {
	font-size: 22px;
	color: var(--dnv-azul);
}

#divBloquePasosMayorista h4,
#divBloquePasosMinorista h4 {
	font-size: 19px !important;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin-top: 0 !important;
}

/* El número del paso (blc_subtitulo) arriba de todo, grande y tenue */
#divBloquePasosMayorista .meta,
#divBloquePasosMinorista .meta {
	order: -1;
	font-weight: 700;
	font-size: 40px !important;
	letter-spacing: -0.04em;
	line-height: 1;
	color: rgba(30, 64, 175, .2) !important;
	margin: 0 0 6px !important;
}

#divBloquePasosMayorista .pricing-wrapper p,
#divBloquePasosMinorista .pricing-wrapper p {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--dnv-texto);
	margin-top: 6px;
}

/* Preguntas frecuentes (la sección Preguntas frecuentes y el bloque de la home, blq 21, que usa el
   mismo id) */
#divBloquePreguntas {
	background: transparent !important;
}

/* En la home: el encabezado como el de los otros bloques (a la izquierda, marino) y aire con Marcas
   arriba y con el Cierre abajo */
body#paginaInicio #divBloquePreguntas > .container {
	padding-top: 72px !important;
	padding-bottom: 72px !important;
}

#divBloquePreguntas .row > [class*="col-md-9"]:has(> h2) {
	flex: 0 0 100%;
	max-width: 100%;
	margin-left: 0 !important;
	align-items: flex-start !important;
	text-align: left !important;
}

#divBloquePreguntas h2.display-4 {
	font-size: clamp(28px, 2.6vw, 38px) !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em;
	color: var(--dnv-marino) !important;
	text-align: left;
	margin-bottom: 8px !important;
}

#divBloquePreguntas p.lead {
	font-size: 17px !important;
	color: var(--dnv-gris) !important;
	text-align: left;
	padding: 0 !important;
	margin-bottom: 28px !important;
}

@media (max-width: 767.98px) {
	body#paginaInicio #divBloquePreguntas > .container {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	#divBloquePreguntas p.lead {
		font-size: 16px !important;
		margin-bottom: 20px !important;
	}
}

#divBloquePreguntas .accordion-item,
#divBloquePreguntas .card {
	background: #fff;
	border: 1px solid var(--dnv-borde) !important;
	border-radius: 12px !important;
	margin-bottom: 12px;
	box-shadow: none;
}

#divBloquePreguntas .accordion-button,
#divBloquePreguntas .card-header button {
	font-weight: 600 !important;
	font-size: 17px !important;
	color: var(--dnv-marino) !important;
}

#divBloquePreguntas .accordion-button::before,
#divBloquePreguntas .card-header button::before {
	color: var(--dnv-azul) !important;
}

#divBloquePreguntas .card-body p {
	font-size: 16px;
	line-height: 1.6;
}

/* Contacto: tarjeta de atención con el botón de WhatsApp en el azul de marca */
.seccion-contacto .titulo-formulario-contacto {
	font-size: 32px !important;
	color: var(--dnv-marino) !important;
}

.seccion-contacto #divAtencionCliente .card {
	border: 1px solid var(--dnv-borde);
	border-radius: var(--dnv-radio) !important;
	box-shadow: 0 14px 34px rgba(11, 26, 63, .08);
}

.seccion-contacto .btn-whatsapp-contacto {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: var(--dnv-azul) !important;
	border-color: var(--dnv-azul) !important;
	color: #fff !important;
	border-radius: var(--dnv-radio-boton) !important;
	width: auto !important;
	height: auto !important;
	padding: 12px 22px !important;
}

.seccion-contacto .btn-whatsapp-contacto i,
.seccion-contacto .btn-whatsapp-contacto p {
	color: #fff !important;
	font-weight: 600;
}

.seccion-contacto .btn-disponible,
.seccion-contacto .btn-no-disponible {
	color: var(--dnv-azul) !important;
	border-color: rgba(30, 64, 175, .35) !important;
	background: rgba(30, 64, 175, .06) !important;
	font-weight: 600;
}

.seccion-contacto #divAtencionCliente li i {
	color: var(--dnv-azul) !important;
}

.seccion-contacto .form-control,
.seccion-contacto .form-select {
	border-radius: 8px;
	border-color: var(--dnv-borde);
	background: #fff;
}

/* ============================================================
   PIE: azul barra, logo | depósito con mapa | categorías | marcas | la empresa | legales
   ============================================================ */

footer.text-inverse {
	background: var(--dnv-barra) !important;
	border-top: 1px solid rgba(255, 255, 255, .06);
}

footer.text-inverse .footer-titulo,
footer.text-inverse .widget-title {
	font-weight: 600 !important;
	font-size: 16px !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	color: #fff !important;
	margin-bottom: 14px !important;
}

footer.text-inverse a,
footer.text-inverse p,
footer.text-inverse li,
footer.text-inverse span {
	color: #D3DCF2;
	font-size: 15px;
}

/* Enlaces del pie: al pasar se aclaran a blanco y una línea se llena de izquierda a derecha, como en el
   menú. En los de contacto (ícono + texto) la línea va sólo bajo el texto. Pasar sólo a blanco no se
   notaba: el texto del pie ya es casi blanco. */
footer.text-inverse a:not(:has(img, svg, i)):not(.social a),
footer.text-inverse a:has(> i) > span {
	text-decoration: none !important;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	padding-bottom: 2px;
	transition: background-size .3s ease, color .2s ease;
}

footer.text-inverse a:not(:has(img, svg, i)):not(.social a):is(:hover, :focus-visible),
footer.text-inverse a:has(> i):is(:hover, :focus-visible) > span {
	color: #fff !important;
	background-size: 100% 1px;
}

footer.text-inverse a:has(> i) i {
	transition: color .2s ease;
}

footer.text-inverse a:has(> i):is(:hover, :focus-visible) i {
	color: #fff !important;
}

footer.text-inverse .footer-logo {
	height: 64px !important;
	width: auto !important;
}

footer.text-inverse .footer-hr {
	border-color: rgba(255, 255, 255, .12) !important;
	opacity: 1;
}

@media (min-width: 768px) {
	footer.text-inverse .footer-desktop {
		display: grid !important;
		grid-template-columns: .9fr 1.55fr repeat(4, .85fr);
		grid-column-gap: 40px;
		align-items: start;
	}

	footer.text-inverse .footer-desktop > div {
		width: auto !important;
		max-width: none !important;
		flex: none !important;
		padding: 0 !important;
	}

	/* el depósito: los datos y, abajo, el mapa a lo ancho de la columna */
	footer.text-inverse .footer-desktop > .col-auto {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	footer.text-inverse .footer-desktop > .col-12,
	footer.text-inverse .footer-desktop > .d-flex,
	footer.text-inverse .footer-desktop > .pie-pagina {
		grid-column: 1 / -1;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	footer.text-inverse .footer-desktop {
		grid-template-columns: 1fr 1fr 1fr;
		grid-row-gap: 36px;
	}

	footer.text-inverse .footer-desktop > .col-auto {
		grid-column: 2 / -1;
	}
}

footer.text-inverse .puntos-venta-footer-mapa {
	margin: 0 !important;
	width: 100% !important;
	min-width: 0;
	height: 170px !important;
}

footer.text-inverse .puntos-venta-footer-mapa .gmap_canvas {
	width: 100% !important;
	height: 100% !important;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .14);
}

footer.text-inverse .puntos-venta-footer-mapa iframe {
	display: block;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

footer.text-inverse .footer-mobile .puntos-venta-footer-mapa {
	margin: 12px 0 24px !important;
	height: 180px !important;
}

footer.text-inverse ul.puntos-venta-footer {
	list-style: none;
	padding: 0;
	margin: 0;
}

footer.text-inverse ul.puntos-venta-footer li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 8px 0 !important;
	padding: 0;
	line-height: 1.45;
}

/* el theme (.icon-list) hace absolutos los íconos y se pisan con el texto */
footer.text-inverse ul.puntos-venta-footer li i {
	position: static !important;
	color: var(--dnv-azul-luz) !important;
	font-size: 17px !important;
	line-height: 1.35;
	flex: 0 0 auto;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	background: none !important;
}

footer.text-inverse ul.puntos-venta-footer li > a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

footer.text-inverse ul.puntos-venta-footer li span,
footer.text-inverse ul.puntos-venta-footer li a,
footer.text-inverse ul.puntos-venta-footer li strong {
	font-size: 14.5px !important;
	font-weight: 400 !important;
	color: #C3D0EC;
}

footer.text-inverse .img-punto-venta {
	display: none !important;
}

/* Redes: círculo de línea. Al pasar (o con foco) el fondo toma el color del borde, el borde no cambia
   nunca, y la transición se ve al entrar y al salir. */
footer.text-inverse .social a {
	--dnv-redes-borde: rgba(255, 255, 255, .22);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--dnv-redes-borde) !important;
	border-radius: 50%;
	background-color: transparent !important;
	color: #fff !important;
	transition: background-color .3s ease !important;
}

footer.text-inverse .social a:is(:hover, :focus-visible) {
	background-color: var(--dnv-redes-borde) !important;
	border-color: var(--dnv-redes-borde) !important;
}

footer.text-inverse .social a i {
	color: inherit !important;
	font-size: 18px;
}

footer.text-inverse .core-devs,
footer.text-inverse .core-devs a,
footer.text-inverse .pie-pagina p {
	font-size: 13.5px !important;
	color: #8D9BBA !important;
}

/* La "/" que separa "ingresá acá" del botón de arrepentimiento (footer.php) pasa a ser un punto */
footer.text-inverse span.core-devs.ms-1.me-1 {
	display: inline-flex;
	align-items: center;
	font-size: 0 !important;
	margin: 0 8px !important;
}

footer.text-inverse span.core-devs.ms-1.me-1::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #8D9BBA;
}

/* Botón flotante de WhatsApp en el azul de marca */
.whatsapp-float,
.btn-whatsapp-flotante {
	box-shadow: 0 10px 24px rgba(11, 26, 63, .32) !important;
}

/* Al pasar por el pie (mismo azul) el círculo se perdía: anillo blanco alrededor del ícono */
.btn-whatsapp > a > svg,
.btn-atencion-cliente > a > svg {
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff, 0 8px 20px rgba(11, 26, 63, .28);
}

/* ============================================================
   LISTADO Y FICHA
   ============================================================ */

/* Títulos display-6 (título del listado y nombre del producto en la ficha) */
.display-6 {
	font-weight: 700 !important;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--dnv-marino) !important;
}

/* Encabezados del panel de filtros: sentence case, sin la mayúscula chica con espaciado del theme */
.widget-title:not(.footer-titulo) {
	font-weight: 600 !important;
	font-size: 17px !important;
	text-transform: none !important;
	letter-spacing: -0.01em !important;
	color: var(--dnv-marino) !important;
}

.categorias-nav .link-body.active,
.categorias-nav .active > .link-body {
	color: var(--dnv-azul) !important;
}

/* Ficha premium: tokens de la marca. Su "verde" de éxito (envío gratis, ahorro) pasa al azul rey. */
:root {
	--fp-ink: #0B1A3F;
	--fp-green: #1E40AF;
	--fp-green-bg: rgba(30, 64, 175, .10);
	--fp-border: #E2E8F0;
	--fp-soft: #F4F6FA;
}

.fp-badge-envio {
	background: var(--dnv-azul-tinte) !important;
	color: var(--dnv-azul) !important;
}

.fp-badge-envio::before { color: var(--dnv-azul) !important; }

/* Precio de la ficha */
ins[id^="txtPrecio_"].fs-25 {
	font-style: normal !important;
	font-weight: 700 !important;
	font-size: 32px !important;
	letter-spacing: -0.03em;
	color: var(--dnv-marino) !important;
	text-decoration: none !important;
	background: none !important;
	padding: 0;
}

/* Aire entre el bloque del producto (galería y acordeones) y la franja de beneficios de abajo:
   el contenedor de la ficha (#divProducto_N.container) venía sin relleno inferior y el último
   acordeón tocaba la franja. */
div.container[id^="divProducto_"] {
	padding-bottom: 56px !important;
}

@media (max-width: 767.98px) {
	div.container[id^="divProducto_"] {
		padding-bottom: 36px !important;
	}
}

/* Selector de variantes de la ficha: botones con el valor (encastre, medida, potencia...) */
#divAtributos .picker-nombre-atributo {
	font-weight: 500;
	font-size: 14px;
	color: var(--dnv-gris);
}

/* La franja de beneficios de la ficha y del listado: la misma que la de la home */
#divBanners {
	background: #fff !important;
	border-top: 1px solid var(--dnv-borde);
	border-bottom: 1px solid var(--dnv-borde);
}

#divBanners .swiper-slide {
	display: flex !important;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
	text-align: left !important;
}

#divBanners h4 {
	font-weight: 600 !important;
	font-size: 16px !important;
	letter-spacing: -0.01em;
	color: var(--dnv-marino) !important;
}

#divBanners p {
	color: var(--dnv-gris) !important;
	font-size: 13.5px !important;
}

#divRecomendados h2,
#divRecientes h2 {
	font-size: clamp(26px, 2.4vw, 34px) !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em;
}

/* Menú pegado al hacer scroll (el clon del theme): logo más chico con aire arriba y abajo */
.navbar.navbar-clone .navbar-brand img {
	height: 38px !important;
	margin: 8px 0;
}

@media (max-width: 991.98px) {
	.navbar.navbar-clone .navbar-brand img {
		height: 32px !important;
		margin: 7px 0;
	}
}

/* Logo del cajón del celular */
#mobileMenu .logo-menu-mobile {
	height: 42px !important;
	width: auto !important;
	max-width: none !important;
}

/* Buscador (modal oscuro del sistema): las tarjetas de resultado van con texto claro */
.modal-buscador .project .post-title,
.modal-buscador .project .post-title a {
	color: #fff !important;
}

.modal-buscador .project .price ins,
.modal-buscador .project .price ins .amount {
	color: #fff !important;
	background: none !important;
}

.modal-buscador .project .price del,
.modal-buscador .project .price label:not(.text-danger),
.modal-buscador .project .price b {
	color: #AFC0E4 !important;
}

.modal-buscador .project h3.text-primary,
.modal-buscador .project .text-primary {
	color: var(--dnv-azul-luz) !important;
}

/* Resultados del buscador (panel de escritorio y modal del celular): el título se pone azul oscuro al
   pasar y el botón Comprar va en azul oscuro (en azul de marca se perdía sobre el fondo azul) */
:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .project .post-title a {
	transition: color .2s ease;
}

:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .project .post-title a:is(:hover, :focus-visible) {
	color: #B7C6E6 !important;
}

:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .project :is(.btn-comprar, [id^="btnAgregarProductoCarrito_"]).btn {
	background: var(--dnv-marino) !important;
	border-color: var(--dnv-marino) !important;
	color: #fff !important;
}

:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .project :is(.btn-comprar, [id^="btnAgregarProductoCarrito_"]).btn i {
	color: #fff !important;
}

/* Al pasar el mouse el botón no cambia de color */
:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .project :is(.btn-comprar, [id^="btnAgregarProductoCarrito_"]).btn:is(:hover, :focus, :active) {
	background: var(--dnv-marino) !important;
	border-color: var(--dnv-marino) !important;
	color: #fff !important;
}

:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .project :is(.btn-comprar, [id^="btnAgregarProductoCarrito_"]).btn:is(:hover, :focus, :active) i {
	color: #fff !important;
}

/* Sugerencias del buscador (Sitio > Buscador: búsquedas populares, categorías, destacados, tendencias y
   marcas). Las fotos del catálogo son sobre blanco: en las tarjetas la foto va entera sobre blanco arriba y
   el texto en azul marino abajo, como en las tarjetas de resultados, en vez de la foto lavada de fondo. */
:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .buscador-card {
	justify-content: flex-start;
	padding: 0;
	background-color: var(--dnv-marino);
	border-color: rgba(255, 255, 255, .14);
	border-radius: var(--dnv-radio-boton);
}

:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .buscador-card::after {
	display: none;
}

:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .buscador-card-fondo {
	position: relative;
	inset: auto;
	display: block;
	aspect-ratio: 4 / 3;
	padding: 10px;
	background-color: #fff;
	background-size: contain;
	background-repeat: no-repeat;
	background-origin: content-box;
	opacity: 1;
}

:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .buscador-card-contenido {
	height: auto;
	padding: .55rem .7rem .65rem;
}

:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .buscador-card-encabezado {
	margin-bottom: 0;
}

:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .buscador-card-titulo {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	transition: color .2s ease;
}

:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .buscador-card-descripcion {
	color: var(--dnv-azul-luz);
}

/* Al pasar, los títulos se ponen celestes como los de los resultados */
:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .buscador-card:is(:hover, :focus-visible) .buscador-card-titulo,
:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .buscador-lista-item:is(:hover, :focus-visible) .buscador-lista-titulo-texto,
:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .buscador-seccion-todos:is(:hover, :focus-visible) {
	color: #B7C6E6;
}

:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .buscador-lista-titulo-texto {
	transition: color .2s ease;
}

/* Miniaturas del listado de Tendencias: la foto entera sobre blanco */
:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .buscador-lista-avatar {
	width: 36px;
	height: 36px;
	flex-basis: 36px;
	padding: 3px;
	background-color: #fff;
}

:is(.modal-buscador, #divPanelFlotanteBuscadorBarra) .buscador-lista-avatar img {
	object-fit: contain;
}

/* En el celular el selector de categorías no le come el lugar al campo de búsqueda */
@media (max-width: 575.98px) {
	.modal-buscador .buscador-input-categorias .buscador-barra-select {
		max-width: 140px;
		text-overflow: ellipsis;
	}
}

/* Carrito: "Seguir comprando" quedaba blanco sobre blanco. Como en 3dproductos, va en el color
   secundario (marino) con texto e ícono blancos; al pasar sólo se oscurece un poco (si se aclarara
   quedaría igual a "Finalizar compra") */
#carritoMenu .btn-secundario,
#carritoMenu .btn-secondary {
	color: #fff !important;
	background-color: var(--dnv-marino) !important;
	border-color: var(--dnv-marino) !important;
	transition: background-color .2s ease, border-color .2s ease;
}

#carritoMenu .btn-secundario i,
#carritoMenu .btn-secondary i {
	color: #fff !important;
}

#carritoMenu :is(.btn-secundario, .btn-secondary):is(:hover, :focus-visible, :active) {
	color: #fff !important;
	background-color: var(--dnv-noche) !important;
	border-color: var(--dnv-noche) !important;
}