/* ===== Modo oscuro =====
   Las reglas viven una sola vez en assets/css/modo-oscuro.css. Acá va sólo la paleta de este sitio.
   Para cambiar un color del esquema oscuro se toca esta lista y nada más. ===== */
html.sitio-oscuro {
	--oscuro-fondo: #0D0D0D;
	--oscuro-panel: #161616;
	--oscuro-panel-2: #1D1D1D;
	--oscuro-borde: #2A2A2A;
	--oscuro-borde-acento: rgba(206, 179, 110, .28);
	--oscuro-acento: #CEB36E;
	--oscuro-acento-claro: #E5D3A0;
	--oscuro-acento-oscuro: #8C7434;
	--oscuro-texto: #F2F0EA;
	--oscuro-texto-suave: #9A9A9A;
	--oscuro-texto-inverso: var(--oscuro-fondo);
	--oscuro-fondo-inverso: var(--oscuro-texto);
}

/* ============================================================
   BODY ADVANCE — Suplementos deportivos
   "Incansable determinación"

   Tema base: NEGRO + DORADO (replica la identidad del sitio actual).
     Negro   #0D0D0D (fondo)        Panel   #161616
     Panel 2 #1D1D1D (apoyos)       Borde   #2A2A2A
     Dorado  #CEB36E (acento/CTA)   Dorado cl. #E5D3A0
     Dorado o.#8C7434               Marfil  #F2F0EA (texto)
     Humo    #9A9A9A (secundario)

   Tipografías: Oswald (titulares, itálica en mayúsculas) · Poppins (cuerpo).
   Registradas en head.php → $google_fonts_por_proyecto["bodyadvance"].

   El sistema inyecta --color-primario (#CEB36E) y --color-secundario (#8C7434).

   Portado del tema oscuro de Emantoni: conserva todos los arreglos de
   contraste ya resueltos (navbar, buscador, ficha premium, pickers,
   carrito/offcanvas, categorías, blog, paginación).
   ============================================================ */

:root {
	--ba-noche: #0D0D0D;
	--ba-panel: #161616;
	--ba-panel-2: #1D1D1D;
	--ba-borde: #2A2A2A;
	--ba-borde-oro: rgba(206, 179, 110, .28);
	--ba-oro: #CEB36E;
	--ba-oro-claro: #E5D3A0;
	--ba-oro-oscuro: #8C7434;
	--ba-marfil: #F2F0EA;
	--ba-humo: #9A9A9A;

	--ba-font-titulos: "Oswald", "Arial Narrow", sans-serif;
	--ba-font-texto: "Poppins", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Tipografía ---------- */

:root {
	--bs-font-sans-serif: "Poppins", sans-serif;
	--bs-body-font-family: "Poppins", sans-serif;
}

body, p, a, span, li, label, small, strong, em, blockquote, figcaption,
input, textarea, select, button, .btn, .nav-link, .lead, .form-control,
.dropdown-item, td, th {
	font-family: var(--ba-font-texto) !important;
}

/* NO se tocan las fuentes de íconos: los selectores apuntan a elementos y
   clases concretas, nunca a <i> ni .uil / .material-symbols-* / .fa*. */

h1, h2, h3, h4, h5, h6, .display-4 {
	font-family: var(--ba-font-titulos) !important;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--ba-marfil);
}

.display-1, .display-2, .display-3, .display-5, .display-6 {
	font-family: var(--ba-font-titulos) !important;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.lead { font-weight: 300; }

/* ---------- Cuerpo / superficies oscuras ---------- */

.bg-light, .bg-white, .bg-gray {
	background-color: var(--ba-noche) !important;
}

section, .wrapper {
	background-color: var(--ba-noche);
}

.text-dark {
	color: var(--ba-marfil) !important;
}

.text-muted { color: var(--ba-humo) !important; }
p { color: var(--ba-marfil); }

/* Cards → paneles grafito con filete fino */

.card {
	background-color: var(--ba-panel);
	border: 1px solid var(--ba-borde);
	border-radius: 4px;
}

.card .text-muted { color: var(--ba-humo) !important; }

/* Divisores SVG: el "papel" es noche, no blanco */

/* ---------- Links ---------- */

a { color: var(--ba-marfil); text-decoration: none; }

/* ---------- Botones ---------- */

/* Primario = oro sólido, texto noche */

.btn-primary {
	border: 1px solid var(--ba-oro);
	border-radius: 2px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 11px 26px !important;
}

.btn-outline-primary, .btn-secundario, .btn-secondary {
	background: transparent;
	border: 1px solid var(--ba-oro);
	border-radius: 2px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 11px 26px !important;
}

/* El ícono hereda el color del texto del botón */
.btn-primary i, .btn-outline-primary i, .btn-secundario i, .btn-secondary i {
	color: inherit !important;
}

/* ---------- Inputs ---------- */

.form-control, .form-select, .input-group-text {
	border: 1px solid var(--ba-borde);
	border-radius: 2px;
}

.form-control:focus, .form-select:focus {
	box-shadow: none;
}

/* ---------- Navbar / logo ---------- */
@media (max-width: 991.98px) {
	.navbar-brand img { padding: 12px 10px 12px 0 !important; }
}

/* El tema pinta la barra con --color-secundario (bronce): sobre ese fondo el
   logo dorado no contrasta. Va todo en noche.
   Ojo: la franja del menú NO es el <nav> sino el .navbar-collapse /
   .offcanvas-body de adentro, así que hay que pintar los tres. */

.navbar-bg-color-secundario, .navbar-bg-color-secundario .navbar-collapse {
	background-color: var(--ba-noche) !important;
}

.navbar-bg-color-secundario .navbar-collapse {
	border-bottom: 1px solid rgba(206, 179, 110, .16);
}

.navbar .nav-link {
	color: var(--ba-marfil) !important;
	letter-spacing: 0.09em;
	font-size: 12.5px;
	font-weight: 400;
}

/* Dropdown del menú (Tienda → categorías) */

.navbar .dropdown-menu {
	border: 1px solid var(--ba-borde);
	border-radius: 3px;
}

.navbar .dropdown-menu .dropdown-item {
	color: var(--ba-marfil);
	font-size: 13px;
	letter-spacing: .03em;
}

/* Íconos del header (carrito, favoritos, cuenta, buscar) */

/* ---------- Footer ---------- */

footer {
	background-color: var(--ba-noche) !important;
	color: var(--ba-humo);
}

/* ---------- Títulos de bloques con degradé oro ---------- */

[id^="divBloque"] .display-4,
[id^="divBloque"] .display-5,
[id^="divBloque"] .display-6 {
	line-height: 1.3;
	background-image: linear-gradient(to right, var(--ba-oro-claro) 10%, var(--ba-oro-oscuro) 82%);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

/* Antetítulo (uppercase chico) en oro */

.text-line, .post-category, .badge-oro {
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* ---------- Fichas de producto ---------- */

/* Las fotos de frasco vienen recortadas sobre blanco, así que la figura del
   producto lleva fondo blanco. Se apunta a .project (que es lo que marca una
   tarjeta de producto) y NO a .item a secas: el blog usa .item sin .project, y
   ahí el blanco asomaba por las esquinas de la imagen. */

.project figure, .swiper-slide.project figure {
	border-radius: 4px;
}

#divBloqueCategorias .project figure,
#divBloqueCategorias .swiper-slide figure,
#divBloqueMarcas .project figure,
#divBloqueMarcas .swiper-slide figure,
#divBloquePromociones .project figure,
#divBloquePromociones .swiper-slide figure,
#divBloqueNotas .project figure,
#divBloqueNotas .swiper-slide figure,
#swiperPortadasHorizontal figure,
#swiperPortadasVertical figure {
	background-color: transparent !important;
}

/* Las tarjetas del blog: imagen sin fondo y con el mismo radio que el contenedor,
   así no queda el borde claro asomando en las esquinas (ni al hacer zoom). */
.widget .image-list figure,
.blog .item figure,
.blog figure.hover-scale,
figure.hover-scale.rounded {
	background-color: transparent !important;
	overflow: hidden;
}
/* OJO con el :not(.d-non): la tarjeta de producto imprime un <img> por cada
   imagen del producto y oculta las que no corresponden con la clase .d-non
   (que es del sistema, no un typo de .d-none). Este selector tiene mas
   especificidad que .d-non, asi que sin la exclusion las vuelve a mostrar y
   quedan todas apiladas dentro de la tarjeta. */
.widget .image-list figure img:not(.d-non),
.blog .item figure img:not(.d-non),
figure.hover-scale.rounded img:not(.d-non) {
	border-radius: inherit;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project.item .post-header h2 a, .swiper-slide.project .post-header h2 a, .project.item .post-header h3 a {
	font-family: var(--ba-font-texto) !important;
	letter-spacing: .02em;
}

.amount {
	color: var(--ba-oro) !important;
}

.price del, del.amount {
	color: var(--ba-humo) !important;
}

/* El % de descuento viene como .amount.text-danger: la regla de arriba lo
   pinta de oro y se pierde contra el precio. Se lo devuelve a badge sólido. */

[id^="txtDescuento_"] {
	color: var(--ba-noche) !important;
	border-radius: 2px;
	padding: .12rem .4rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.item figure .item-cart, .swiper-slide figure .item-cart { padding: .4rem; }

.borde-encabezado-listado-productos { border-bottom: 1px solid var(--ba-borde-oro); }

/* Badges de novedad / oferta */

.badge.bg-primary, .badge.bg-secondary {
	letter-spacing: .08em;
	font-weight: 500;
}

/* ---------- Newsletter (card oscura con filete oro) ---------- */

#divBloqueNewsletter .card {
	background-image: none !important;
	background-color: var(--ba-panel) !important;
	border: 1px solid var(--ba-borde-oro);
}
#divBloqueNewsletter .card :is(h1, h2, h3, h4),
#divBloqueNewsletter .card .text-white { color: var(--ba-marfil) !important; }
#divBloqueNewsletter .card p { color: var(--ba-humo); }
#divBloqueNewsletter p { text-align: center; font-size: .9rem !important; }

/* ---------- Bloque de marcas: fondo oscuro, logos oro ---------- */

/* ---------- Hero ---------- */

#swiperPortadasHorizontal, #swiperPortadasHorizontal .swiper-slide {
	height: calc(100vw / 2.65);
}

/* Bug de 100vh en Chrome/Safari mobile: usar svh para que el hero no se pase
   del viewport visible (el chrome del browser no cuenta). */
@media (max-width: 575.98px) {
	#swiperPortadasVertical,
	#swiperPortadasVertical .swiper-slide {
		height: calc(100svh - 110px) !important;
	}
}

/* Velo para que el texto se lea sobre cualquier foto */
#swiperPortadasHorizontal .swiper-slide figure::after,
#swiperPortadasVertical .swiper-slide figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(11,11,16,.82) 0%, rgba(11,11,16,.45) 45%, rgba(11,11,16,.15) 100%);
	pointer-events: none;
}
@media (max-width: 575.98px) {
	#swiperPortadasVertical .swiper-slide figure::after {
		background: linear-gradient(180deg, rgba(11,11,16,.35) 0%, rgba(11,11,16,.75) 65%, rgba(11,11,16,.92) 100%);
	}
}

/* El titular del hero se comía media pantalla y quedaba encima de los frascos.
   Se le pone tope de ancho y un cuerpo acorde. */
@media (min-width: 992px) {
	/* El texto se alinea con el container del sitio (máx. 1320px centrado),
	   no con el borde de la pantalla. */
	#swiperPortadasHorizontal .swiper-content {
		max-width: min(46%, 620px);
		margin-left: 0;
		margin-right: auto;
		padding-left: max(1.5rem, calc((100vw - 1320px) / 2)) !important;
	}
	#swiperPortadasHorizontal .swiper-content h1,
	#swiperPortadasHorizontal .swiper-content h2,
	#swiperPortadasHorizontal .swiper-content .display-4 {
		font-size: clamp(1.9rem, 2.7vw, 3rem) !important;
		line-height: 1.15;
	}
	#swiperPortadasHorizontal .swiper-content p {
		font-size: .98rem;
	}
}

/* Los dos swipers del hero son independientes: siempre targetear ambos */

/* ---------- Categorías: nombre superpuesto sobre la imagen ---------- */

#divBloqueCategorias .project.item,
#divBloqueCategorias .swiper-slide { position: relative; }

#divBloqueCategorias figure.card-img-top::after,
#divBloqueCategorias figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 45%, transparent 70%);
	pointer-events: none;
	border-radius: 4px;
}

#divBloqueCategorias h4 {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 1rem;
	margin: 0;
	color: #ffffff !important;
	text-align: center;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 1rem;
}

#divBloqueCategorias h4 a {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 1rem;
	margin: 0;
	text-align: center;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 1rem;
}

/* ---------- Banners de beneficios ---------- */
#divBloqueBeneficios h4, #divBloqueBanners h4 {
	font-family: var(--ba-font-texto) !important;
	font-size: .95rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ---------- Testimonios ---------- */

#divBloqueTestimonios .card {
	border: 1px solid var(--ba-borde);
}

#divBloqueTestimonios .text-warning { color: var(--ba-oro) !important; }

/* ---------- Preguntas frecuentes (accordion) ---------- */

.accordion-item { background-color: var(--ba-panel); border: 1px solid var(--ba-borde); }

.accordion-button:not(.collapsed) {
	box-shadow: none;
}

/* ---------- Tablas ---------- */

.table > :not(caption) > * > * {
	background-color: transparent;
}

/* ---------- Modales / offcanvas ---------- */

.offcanvas {
	background-color: var(--ba-panel);
}

/* El btn-close del tema NO es el de Bootstrap (SVG): es un ícono Unicons dentro
   de un círculo rgba(0,0,0,.08). Un filter:invert lo daba vuelta entero y dejaba
   un círculo gris claro con la X oscura. Se repinta a mano. */
.btn-close {
	color: var(--ba-marfil) !important;
	filter: none;
	opacity: 1;
}

.btn-close::before {
	color: var(--ba-marfil);
}

.btn-close:hover::before { background: rgba(206, 179, 110, .18) !important; }

/* ============================================================
   Contraste tema oscuro (patrón 3dproductos): carrito + buscador
   ============================================================ */

/* El panel arranca con .bg-white en el HTML y el tema le pinta el pie de blanco:
   los dos tienen que ir a noche o queda una franja clara bajo los botones. */

#carritoMenu, #carritoMenu.bg-white {
	background-color: var(--ba-noche) !important;
}

#carritoMenu .offcanvas-header { border-bottom: 1px solid var(--ba-borde); }

#carritoMenu p {
	color: var(--ba-marfil) !important;
}

#carritoMenu i {
	color: var(--ba-marfil);
}

/* Carrito vacío: el tema pinta el ícono de #1f263c (invisible sobre negro) */

#carritoMenu .div-carrito-vacio i {
	color: var(--ba-oro) !important;
	opacity: .55;
}

#favoritosMenu .div-favorito-vacio i {
	opacity: .55;
}

#carritoMenu .div-carrito-vacio p {
	color: var(--ba-humo) !important;
}

/* Carrito CON productos: el tema fuerza #1f263c en todos los totales */
#carritoMenu .totales-carrito-menu .text-green,
#carritoMenu .totales-carrito-menu .text-success { color: #4ADE80 !important; }

/* Íconos de acción de cada ítem (quitar, editar) */

/* Tarjetas de sugeridos y fila del cupón */

#carritoMenu .sugerido-carrito-item {
	border: 1px solid var(--ba-borde);
}

#carritoMenu .sugerido-carrito-item figure {
	border-radius: 3px;
}

#carritoMenu .fp-shipbar { background-color: var(--ba-panel) !important; }
.number-picker .input-group { border-radius: 2rem; }
.number-picker .btn-increment, .btn-decrement { border-radius: 2rem !important; }

.buscador-resultados .picker.picker-botones label:not([for*=radColor]), .buscador-resultados .picker.picker-botones label:not([for*=radColor]) > span {
	background-color: transparent;
}

.picker label[for*=radVariante] > input:checked ~ span {
	color: var(--ba-noche);
}

.picker label[for*=radVariante] > span { padding: .3rem; }

/* ============================================================
   Alineación de productos en grilla y sliders (patrón 3dproductos)
   ============================================================ */

.row > .project.item[class*="col-"] { display: flex; flex-direction: column; }
.row > .project.item[class*="col-"] > div { display: flex; flex-direction: column; flex: 1; }
.row > .project.item[class*="col-"] .post-header { display: flex; flex-direction: column; flex: 1; }
.row > .project.item[class*="col-"] .post-header .price { margin-top: auto; }

.swiper-slide.project.item:not(:has(> .row)) {
	display: flex;
	flex-direction: column;
	height: auto !important;
}
.swiper-container:has(.swiper-slide.project.item:not(:has(> .row))) .swiper-wrapper {
	align-items: stretch !important;
}
.swiper-slide.project.item:not(:has(> .row)) > div { display: flex; flex-direction: column; flex: 1; }
.swiper-slide.project.item:not(:has(> .row)) .post-header { display: flex; flex-direction: column; flex: 1; }
.swiper-slide.project.item:not(:has(> .row)) .post-header .price { margin-top: auto; }
.swiper-slide.project.item:not(:has(> .row)) > [id^="btnAgregarProductoCarrito_"] { margin-top: auto; }

.swiper-slide.project.item:not(:has(> .row)) .picker.picker-botones label:not([for*=radColor]),
.project.item[class*="col-"] .picker.picker-botones label:not([for*=radColor]) {
	padding: 0.15rem;
	margin-right: 0.25rem;
	margin-bottom: 0.25rem;
}
.swiper-slide.project.item:not(:has(> .row)) .picker label[for*=radVariante] > span,
.project.item[class*="col-"] .picker label[for*=radVariante] > span { font-size: .65rem; }

[id^="btnAgregarProductoCarrito_"]:not(#divAgregarProductoCarrito *):not(#divBloqueDestacados *) {
	width: 100% !important;
}

/* ---------- Navegación del swiper de anuncios (chevrons Unicons) ---------- */

[id^="divAnuncio_"] .swiper-controls .swiper-navigation .swiper-button {
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	opacity: 1 !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
[id^="divAnuncio_"] .swiper-controls .swiper-navigation .swiper-button.swiper-button-prev:after { content: "\e92f" !important; }
[id^="divAnuncio_"] .swiper-controls .swiper-navigation .swiper-button.swiper-button-next:after { content: "\e931" !important; }

/* ============================================================
   FICHA PREMIUM en tema oscuro
   ficha-premium.css está diseñada para fondo claro: define --fp-ink oscuro
   y varios paneles con background:#fff. Acá se repintan sus tokens y los
   paneles que traen el blanco hardcodeado.
   ============================================================ */

:root {
	--fp-ink: #F2F0EA;
	--fp-muted: #9A9A9A;
	--fp-border: #2A2A2A;
	--fp-border-strong: #3A3A4A;
	/* Superficie "soft" (#f6f6f4 en el original). La usan 13 paneles de la
	   ficha: distribución de reseñas, talles, antes/después, pirámide de
	   perfumería, etc. Repintar el token los cubre a todos de una; si se deja
	   claro, el texto (que sale de --fp-ink, ya en marfil) no se lee. */
	--fp-soft: #1D1D1D;
}

/* Paneles con blanco fijo → panel grafito */

/* Franja de despacho: el fondo es oro al 10%, el texto tiene que leerse */

/* Cuenta regresiva de la promoción */

/* Barra sticky de compra */
.fp-barra { border-top: 1px solid var(--ba-borde) !important; }

/* Acordeón de la ficha (Descripción, Ficha técnica) */

/* El badge de cuotas usa background:var(--fp-ink); al repintar ese token a
   marfil quedaba blanco sobre blanco. Vuelve a ser un chip oscuro. */

.fp-badge-info {
	border: 1px solid var(--ba-borde);
}

.fp-badge-envio {
	background: #1E7A4B !important;
	border-color: #1E7A4B;
}

/* Picker de variante (Tamaño). El fondo lo pinta el <label>, no el <span>:
   pintar el span dejaba un recuadro dentro de otro. */
.picker label[for*=radVariante] {
	background-color: var(--ba-panel) !important;
	border: 1px solid var(--ba-borde) !important;
	border-radius: 3px;
	padding: .1rem .25rem;
}
.picker label[for*=radVariante] > span {
	background: transparent !important;
	color: var(--ba-marfil) !important;
	border: 0 !important;
	padding: .3rem .45rem;
}
.picker label[for*=radVariante]:has(input:checked) {
	background-color: var(--ba-oro) !important;
	border-color: var(--ba-oro) !important;
}
.picker label[for*=radVariante] > input:checked ~ span {
	background: transparent !important;
	color: var(--ba-noche) !important;
	font-weight: 600;
}

/* ============================================================
   LISTADO DE PRODUCTOS — panel de categorías y pickers
   Ambos vienen del tema con blancos fijos (#fff, rgba(0,0,0,...)).
   ============================================================ */

/* Picker de tamaño en las tarjetas: el fondo lo pone el label, no el span */

.picker.picker-botones label:not([for*=radColor]) {
	background-color: var(--ba-panel) !important;
	border-color: var(--ba-borde) !important;
}

.picker.picker-botones label:not([for*=radColor]) > span { color: var(--ba-marfil) !important; }
.picker.picker-botones label:not([for*=radColor]):has(input:checked) {
	background-color: var(--ba-oro) !important;
	border-color: var(--ba-oro) !important;
}
.picker.picker-botones label:not([for*=radColor]) > input:checked ~ span {
	color: var(--ba-noche) !important;
	font-weight: 600;
}

/* Panel lateral de categorías */

.categorias-nav {
	background: var(--ba-panel) !important;
	border-color: var(--ba-borde) !important;
}

.categorias-nav-item {
	border-color: var(--ba-borde) !important;
}

.categorias-nav .widget-title {
	letter-spacing: .1em;
	text-transform: uppercase;
}

.categorias-nav .link-body { color: var(--ba-marfil) !important; }

.categorias-nav .link-body.active {
	background-color: var(--ba-panel-2) !important;
	color: var(--ba-oro) !important;
}

.categorias-nav .link-body .count {
	background-color: var(--ba-panel-2) !important;
	color: var(--ba-humo) !important;
}
.categorias-nav .link-body.active .count {
	background-color: var(--ba-oro) !important;
	color: var(--ba-noche) !important;
}

.categorias-nav .categorias-subnav {
	background-color: rgba(255, 255, 255, .02) !important;
}

/* La barra del buscador toma --buscador-fondo, que por default es
   --color-secundario (el bronce). Va en noche como el resto del header. */
:root { --buscador-fondo: #0D0D0D; }

/* ============================================================
   HEADER — aire y alineación
   Sin la barra superior de redes, el logo quedaba pegado a la barra de
   anuncios y la franja del menú tenía el padding de 1.7rem del tema
   (más de 40px de aire arriba y abajo de cada link).
   ============================================================ */

@media (min-width: 992px) {
	/* Aire entre la barra de anuncios y la fila del logo/buscador */
	.header-nav > .container {
		padding-top: .9rem;
	}

	/* El tema pone padding-top/bottom 1.7rem en los nav-link del menú */
	.navbar-expand-lg[class*="navbar-bg-"]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link {
		padding-top: .85rem !important;
		padding-bottom: .85rem !important;
	}

	/* Todos los items del menú alineados sobre la misma línea base: el
	   dropdown-toggle de Perfumes traía su propio alto por el chevron. */
	.navbar-nav > .nav-item > .nav-link {
		display: flex;
		align-items: center;
		line-height: 1.2;
	}
	.navbar-nav > .nav-item {
		display: flex;
		align-items: stretch;
	}
}

/* Barra de anuncios: sin filete inferior */
[id^="divAnuncio_"] {
	border-bottom: 0px solid;
}

/* El tema tiene reglas propias con #carritoMenu (especificidad de id) que hay
   que igualar: pinta los importes del pie de #1f263c y el botón secundario de
   blanco, pensados para un carrito de fondo claro. */

#carritoMenu .offcanvas-body > .d-flex p {
	color: var(--ba-marfil) !important;
}

/* El importe final, en oro */

#carritoMenu .btn-secundario, #carritoMenu .btn-secondary, #carritoMenu .btn-seguir-comprando {
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid var(--ba-oro) !important;
}

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

/* ============================================================
   MEGAMENÚ
   ============================================================ */

/* La columna de Marcas tiene 12 items y estiraba el panel al doble de alto
   que las otras tres. Se reparte en dos columnas de texto. */
@media (min-width: 992px) {
	.megamenu-panel .megamenu-col:nth-child(4) .megamenu-items {
		column-count: 2;
		column-gap: 1.2rem;
	}
	.megamenu-panel .megamenu-col:nth-child(4) .megamenu-items > li {
		break-inside: avoid;
	}
}

/* El encabezado de columna del megamenú, sus estados y los ítems se definen
   una sola vez, más abajo, en la sección MEGAMENÚ. Acá estaban duplicados y
   la copia de abajo los pisaba por orden, así que al ajustar arriba no
   pasaba nada. */

/* Logo del pie */

/* ============================================================
   BLOG / GUÍAS en tema oscuro
   ============================================================ */

/* Columna lateral: categorías, archivo y tags venían con el gris del tema claro */

.widget .link-body {
	color: var(--ba-marfil) !important;
}

/* Tags: el btn-soft-ash es un gris claro con texto oscuro */

.tag-list .btn-soft-ash, .tag-list .btn {
	border: 1px solid var(--ba-borde) !important;
	letter-spacing: .02em;
}

/* Paginación: .page-link viene en blanco con texto oscuro */
.pagination { box-shadow: none; }

.page-link {
	background-color: var(--ba-panel) !important;
	color: var(--ba-marfil) !important;
}

.page-item.active .page-link {
	background-color: var(--ba-oro) !important;
	color: var(--ba-noche) !important;
}

.page-item.disabled .page-link {
	background-color: var(--ba-panel) !important;
	color: rgba(156, 150, 166, .45) !important;
}

/* El teléfono de la sección queda como un ícono suelto cuando no hay número */
.enlace-telefono-seccion[href="tel:"] { display: none !important; }

/* ============================================================
   FICHA DE PRODUCTO — ajustes del modo oscuro
   ============================================================ */

/* Acordeones (Descripción / Información adicional): el contenedor y cada ítem
   traían borde propio, así que se veía un marco dentro de otro y las esquinas
   no coincidían. Ahora el contenedor es transparente y cada ítem es un panel
   separado, con aire entre ellos y por dentro. */
.card.accordion.accordion-wrapper,
.accordion-wrapper {
	background: transparent !important;
	border: 0 !important;
}
.accordion-wrapper .accordion-item {
	background-color: var(--ba-panel) !important;
	border: 1px solid var(--ba-borde) !important;
	border-radius: 4px !important;
	margin-bottom: .75rem;
	overflow: hidden;
}
.accordion-wrapper .accordion-item:last-child { margin-bottom: 0; }
.accordion-wrapper .card-header {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 1rem 1.25rem !important;
}

.accordion-wrapper .card-header button {
	font-weight: 500;
	letter-spacing: .02em;
}

.accordion-wrapper .card-body {
	background: transparent !important;
	padding: .25rem 1.25rem 1.25rem !important;
}

.accordion-wrapper .card-body ul { margin-bottom: .5rem; }

/* Franja de beneficios dentro de la ficha: viene con fondo blanco */
#divBanners,
#divBanners.wrapper,
#divBanners.bg-color-secundario {
	background-color: var(--ba-noche) !important;
}

/* Barra flotante de compra: el glass NO está en el div sino en su ::before
   (un panel blanco al 82% con brightness(1.5), definido en un <style> inline de
   la página y con z-index:-1, así que tapa cualquier fondo que se le ponga al
   elemento). Se repinta el pseudo-elemento conservando el desenfoque. */
/* La barra sticky de compra pinta su glass en un `:before` con `background-clip:
   content-box, border-box` y `backdrop-filter: brightness(1.5)`, todo declarado en un
   <style> del body. Repintar ese pseudo-elemento funciona pero queda a merced de cómo
   resuelva el navegador el clip múltiple. Se hace al revés: el fondo va en el elemento
   —que ya trae el `backdrop-filter` del glass— y el pseudo se apaga por completo. */
#divBarraCompraProducto {
	background: linear-gradient(rgba(20, 20, 28, .90) 0%, rgba(14, 14, 20, .94) 100%) !important;
	border: 1px solid var(--ba-borde-oro) !important;
	box-shadow: 0 -4px 24px rgba(0, 0, 0, .45) !important;
	-webkit-backdrop-filter: blur(20px) saturate(140%) !important;
	backdrop-filter: blur(20px) saturate(140%) !important;
}
#divBarraCompraProducto::before,
#divBarraCompraProducto:before {
	background: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
}
/* El texto del botón queda excluido: la regla de arriba se lo pintaba en
   marfil y salía blanco sobre el dorado, distinto del ícono. Hereda el color
   del botón, igual que el ícono. */
#divBarraCompraProducto .btn,
#divBarraCompraProducto .btn span,
#divBarraCompraProducto .btn label,
#divBarraCompraProducto .btn i { color: inherit !important; }
#divBarraCompraProducto .btn-primary { color: var(--ba-noche) !important; }

/* Reseñas de clientes */

#listadoCalificaciones .fp-resena-card, #listadoCalificaciones .calificacion-item, #listadoCalificaciones .card, .fp-resena-card {
	border: 1px solid var(--ba-borde) !important;
}

/* El avatar por defecto viene con fondo claro */
.fp-resena-card img, .fp-resena-avatar { border-radius: 50%; }
/* La barrita de proporción de cada puntaje */
.fp-resenas-dist-bar { background-color: var(--ba-borde) !important; }
.fp-resenas-dist-bar > span,
.fp-resenas-dist-bar-fill { background-color: var(--ba-oro) !important; }

/* ============================================================
   SECCIÓN CONTACTO
   ============================================================ */

/* El botón de WhatsApp tomaba el padding y el radio de .btn-primary y quedaba
   como un cuadrado dorado suelto arriba del formulario. Va circular. */

.btn-whatsapp-contacto {
	width: 64px;
	height: 64px;
	min-width: 64px;
	padding: 0 !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: 1px solid var(--ba-oro) !important;
	transition: background-color .2s ease, color .2s ease;
}

.btn-whatsapp-contacto i { color: inherit !important; }

/* Teléfono / WhatsApp de la sección */

.titulo-whatsapp-contacto, .enlace-whatsapp-contacto {
	letter-spacing: .04em;
}

/* Aire entre el texto de la sección y el bloque de contacto */
.div-texto-seccion { margin-bottom: 1.5rem; }

/* blog.php imprime un h1 con ucfirst(BLOG_URL_CUSTOM), o sea el slug crudo
   ("Guias", sin tilde), que además duplica el título de la sección. */
.container:has(> h1.display-6 + .row > #divBlog) > h1.display-6 { display: none; }

/* ============================================================
   PIE DE PÁGINA EN MOBILE
   El accordion (Categorías / Marcas / Legales) usa .card.plain, que en el tema
   claro no se ve; sobre fondo oscuro cada ítem quedaba como un panel con borde
   pegado al borde de la pantalla.
   ============================================================ */

@media (max-width: 991.98px) {
	footer .accordion-wrapper,
	.pie-pagina-mobile .accordion-wrapper {
		padding-left: 0;
		padding-right: 0;
	}
	footer .accordion-wrapper .card.plain.accordion-item {
		background: var(--ba-noche) !important;
		border: 0 !important;
		border-bottom: 0px solid var(--ba-borde) !important;
		border-radius: 0 !important;
		margin-bottom: 0;
	}
	footer .accordion-wrapper .card-header {
		padding: .95rem 0 !important;
	}
	footer .accordion-wrapper .card-header button {
		padding-left: 1.6rem !important;
		font-size: .95rem;
		color: var(--ba-marfil);
	}
	footer .accordion-wrapper .card-body {
		padding: 0 0 .9rem 1.6rem !important;
	}
	footer .accordion-wrapper .card-body ul { margin-bottom: 0; }
}

/* ---------- Secciones con portada propia (Nosotros, Contacto) ----------
   El contenido arrancaba a 70px de la portada y, con todo oscuro, quedaba
   pegado: no se leía dónde termina una cosa y empieza la otra. */
#divContenido.seccion-hero > .container {
	margin-top: 7rem !important;
	padding-top: 0 !important;
}
#divContenido.seccion-hero {
	padding-bottom: 1.5rem;
}
@media (max-width: 767.98px) {
	#divContenido.seccion-hero > .container {
		margin-top: 3.5rem !important;
	}
}

/* ---------- Contacto: bloque de atención al cliente ----------
   El botón de WhatsApp es un `.icon.btn` (círculo de tamaño fijo), así que el
   texto se le salía por los costados. Se lo pasa a píldora y se le baja el aire. */
#divAtencionCliente .row.mt-9 {
	margin-top: 2.25rem !important;
}
#divAtencionCliente .btn-whatsapp-contacto {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	display: inline-flex !important;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem !important;
	padding: .6rem 1.5rem !important;
	margin-bottom: 1.5rem !important;
}
#divAtencionCliente .btn-whatsapp-contacto i {
	font-size: 1.4rem !important;
	line-height: 1;
}
#divAtencionCliente .btn-whatsapp-contacto p {
	margin-left: 0 !important;
	font-size: .95rem !important;
	white-space: nowrap;
	letter-spacing: .02em;
}
/* El título y el botón venían centrados y el teléfono/horarios alineados a la
   izquierda (con la sangría del bullet). Se unifica todo al centro. */
#divAtencionCliente .icon-list {
	text-align: center;
}
#divAtencionCliente .icon-list li {
	padding-left: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
}
#divAtencionCliente .icon-list li::before,
#divAtencionCliente .icon-list li::marker {
	content: none;
}
#divAtencionCliente .icon-list li > a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
#divAtencionCliente .icon-list li i {
	position: static !important;
	flex: 0 0 auto;
}

/* ---------- Menú mobile ---------- */
@media (max-width: 991.98px) {
	#mobileMenu .mobile-menu-panel {
		background: var(--ba-noche);
	}
}

/* ---------- Bullets de las listas con ícono (todo el sitio) ----------
   El theme los dibuja al revés para un fondo oscuro: círculo gris claro con el
   ícono dorado. Se invierten —círculo dorado, ícono claro— para que el bullet
   lea como una marca de la casa y no como un parche gris. */
.icon-list.bullet-soft-primary i {
	color: #eeeeee !important;
}

/* ---------- Ficha: aire entre las reseñas y la franja de beneficios ----------
   Quedaban a 20px, pegadas. */
#divCalificacionesProducto {
	padding-bottom: 3.5rem;
}

/* ---------- Perfil de la fragancia (panel Perfumería) ----------
   ficha-premium.css lo dibuja sobre --fp-soft, que es claro. Se repintan las
   tres superficies del bloque para que acompañen al resto de la ficha. */

.fp-perfumeria-titulo {
	font-family: 'Oswald', serif;
}

.fp-perfumeria-barra-pista {
	background: rgba(241, 236, 227, .07);
}
.fp-perfumeria-estrella-vacia {
	color: #3A3A4A;
}

/* ---------- Breadcrumb: separadores en oro ----------
   El theme los deja en gris al 35%, que sobre el fondo oscuro casi no se ven. */

/* ============================================================
   FIRMA VISUAL DE BODY ADVANCE
   El sitio actual usa Oswald en ITÁLICA y MAYÚSCULAS para todos los
   titulares, con el dorado como color de acento. Se replica acá.
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	font-style: italic;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Títulos de bloque de la home en dorado, como el sitio original */
#divBloqueNovedades > .container > h2,
#divBloqueDestacados > .container > h2,
#divBloqueCategorias > .container > h2,
#divBloqueMarcas > .container > h2,
#divBloquePromociones > .container > h2,
#divBloqueTestimonios > .container > h2,
#divBloqueBlogs > .container > h2 {
	color: var(--ba-oro);
}

/* Nombre de producto en las tarjetas: Oswald itálica, como el original */
.product-title, .product-title a,
h3.post-title, .card .product-title {
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* Botones: el original usa el dorado como bloque sólido sin degradé */
/* Sin itálica: la regla global de tipografía lleva !important, así que el
   font-family de acá nunca llegaba a aplicarse y el botón terminaba en
   Poppins itálica 500, o sea finito y torcido. Queda en Poppins con peso,
   que es lo que realmente renderiza. */
.btn-primary,
#swiperPortadasHorizontal .btn-primary,
#swiperPortadasVertical .btn-primary {
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}

/* Franja separadora tipo "INCANSABLE DETERMINACIÓN" del sitio original */
.franja-lema {
	background: rgba(0, 0, 0, .55);
	padding: 1.6rem 0;
	text-align: center;
}
.franja-lema h2 {
	color: #fff;
	font-size: clamp(1.8rem, 5vw, 3.4rem);
	letter-spacing: 0.12em;
	margin: 0;
}

/* Sello BPM del pie: se apoya sobre negro, necesita aire */
.sello-bpm { max-width: 130px; height: auto; }

/* Hero mobile: fix del bug de 100vh en Chrome/Safari (ver runbook) */
@media (max-width: 575.98px) {
	.swiper-hero-vertical-con-barra,
	.swiper-hero-vertical-con-barra .swiper-slide {
		height: calc(100svh - 110px) !important;
	}
}

/* Titulares del hero en Oswald.
   portadas.php arma una clase .cls-componente-{id} en un <style> del propio
   bloque, con la familia que sale de fuentePortada($pco_fuente). Oswald no
   esta en ese switch (es del mapa custom de head.php), asi que se pisa desde
   aca: el id + selector de atributo gana especificidad, y el !important gana
   al <style> que viene despues en el documento. */
#swiperPortadasHorizontal [class*="cls-componente-"],
#swiperPortadasVertical [class*="cls-componente-"] {
	font-family: "Oswald", "Arial Narrow", sans-serif !important;
	letter-spacing: 0.03em;
}
#swiperPortadasHorizontal [class*="cls-componente-"].btn,
#swiperPortadasVertical [class*="cls-componente-"].btn {
	color: #0D0D0D !important;
	font-weight: 600;
}

/* El titular del hero se apoya sobre la mitad izquierda del slide: sin tope de
   ancho se estira por debajo de los envases y deja de leerse. La imagen ya
   trae un velo degradado de ese lado (ver gen_piezas.py). */
@media (min-width: 992px) {
	#swiperPortadasHorizontal .swiper-content,
	#swiperPortadasHorizontal .swiper-content .container > div {
		max-width: 46%;
	}
}
@media (min-width: 576px) and (max-width: 991.98px) {
	#swiperPortadasHorizontal .swiper-content,
	#swiperPortadasHorizontal .swiper-content .container > div {
		max-width: 62%;
	}
}

/* ============================================================
   MENÚ — opciones más grandes y con la tipografía de la marca
   El sitio original usa Oswald en el menú: acá se replica, con más
   cuerpo y peso que el default del tema.
   ============================================================ */

.navbar .navbar-collapse .nav-link,
.navbar .offcanvas-body .nav-link {
	font-family: var(--ba-font-titulos) !important;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}
@media (min-width: 992px) {
	.navbar .navbar-collapse > ul > li > .nav-link {
		padding-left: 1.05rem !important;
		padding-right: 1.05rem !important;
	}
}
/* La opción con dropdown/megamenú trae su propio alto y queda desalineada
   del resto si no se la centra. */
.navbar .navbar-collapse > ul > li > .nav-link {
	display: flex;
	align-items: center;
}

/* ============================================================
   MEGAMENÚ (patrón Emantoni, adaptado al dorado)
   ============================================================ */

.megamenu-panel .megamenu-col-titulo {
	color: var(--ba-oro) !important;
	font-family: var(--ba-font-titulos) !important;
	font-style: italic;
	letter-spacing: .12em;
	padding-left: .7rem;
	padding-right: .7rem;
	/* El theme deja 18 px de padding SOLO abajo (padding: 0 0 .9rem): el fondo
	   del hover se estiraba hacia abajo y el texto quedaba pegado arriba, o sea
	   el resaltado salía descentrado. Ese aire pasa a margen, que no se pinta, y
	   el padding vertical queda parejo. */
	padding-top: .35rem;
	padding-bottom: .35rem;
	margin-left: -.7rem;
	/* Pegado a su lista: el primer enlace ya aporta 9 px de padding propio. */
	margin-bottom: .25rem;
	border-radius: 3px;
}

.megamenu-panel a.megamenu-col-titulo[href]:hover, .megamenu-panel a.megamenu-col-titulo[href]:focus {
	background: rgba(255, 255, 255, .05);
}

/* Los ítems vienen sin padding lateral y el resaltado del hover queda pegado
   al texto; se les da aire y se compensa con margen negativo para que sigan
   alineados con el título de la columna. */
.megamenu-panel .megamenu-item {
	padding-left: .7rem;
	padding-right: .7rem;
	margin-left: -.7rem;
	border-radius: 3px;
}

.megamenu-panel .megamenu-item:hover, .megamenu-panel .megamenu-item:focus {
	background: rgba(255, 255, 255, .05);
}

/* ============================================================
   SECCIONES CON PORTADA PROPIA
   seccion.php le pone .seccion-hero a #divContenido cuando la sección tiene
   bloque de portada. Sin esto el contenido arranca a 70px de la portada y,
   con todo en negro, no se lee dónde termina una cosa y empieza la otra.
   ============================================================ */

#divContenido.seccion-hero > .container {
	margin-top: 7rem !important;
	padding-top: 0 !important;
}
#divContenido.seccion-hero {
	padding-bottom: 2rem;
}
@media (max-width: 767.98px) {
	#divContenido.seccion-hero > .container {
		margin-top: 3.5rem !important;
	}
}

/* Filete dorado al pie de la portada, para cerrar el bloque contra el fondo */
#divContenido.seccion-hero::before {
	content: "";
	display: block;
	height: 2px;
	background: linear-gradient(to right, transparent, var(--ba-borde-oro), transparent);
}

/* ============================================================
   AVISO FLOTANTE DE ENVÍO GRATIS
   ficha-premium.css le pone `background:#fff` fijo al panel, pero el texto
   sale de --fp-ink, que este tenant repinta a marfil para el modo oscuro:
   marfil sobre blanco no se lee. Se pinta el panel como el resto del tema
   en vez de devolver el texto a oscuro, para que no quede una tarjeta
   blanca suelta sobre el fondo negro del sitio.
   ============================================================ */

.fp-progreso-flotante {
	box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

.fp-progreso-flotante .fp-shipbar-txt i,
.fp-progreso-flotante .fp-shipbar-txt b {
	color: var(--ba-oro) !important;
}
.fp-progreso-flotante .fp-shipbar-track {
	background: rgba(206, 179, 110, .18) !important;
}
.fp-progreso-flotante .fp-shipbar-labels {
	color: var(--ba-humo) !important;
}
.fp-progreso-flotante .fp-shipbar-labels b {
	color: var(--ba-marfil) !important;
}
/* Los hitos del recorrido vienen con fondo blanco fijo */
.fp-progreso-flotante .fp-shipbar-hito {
	background: var(--ba-panel-2);
}
.fp-progreso-flotante .fp-shipbar-hito.is-logrado {
	background: var(--ba-oro);
	border-color: var(--ba-oro);
}
/* Botón de cerrar: viene con fondo claro y el ícono en gris */

.fp-progreso-flotante-cerrar {
	background: rgba(255, 255, 255, .08) !important;
}

.fp-progreso-flotante-cerrar:hover {
	background: rgba(206, 179, 110, .22) !important;
	color: var(--ba-oro) !important;
}
/* Cuando se alcanza el objetivo el texto pasa a --fp-green, que sobre el
   panel oscuro queda apagado */
.fp-progreso-flotante .fp-shipbar.is-free .fp-shipbar-txt,
.fp-progreso-flotante .fp-shipbar.is-free .fp-shipbar-txt i,
.fp-progreso-flotante .fp-shipbar.is-free .fp-shipbar-txt b {
	color: #4ADE80 !important;
}

/* ============================================================
   RESEÑAS Y MODAL DE RESEÑA
   Lo que quedaba con color claro fijo, que --fp-soft no alcanza a cubrir.
   ============================================================ */

/* Distribución de calificaciones: la barra trae #e9e9ec fijo */
.fp-resenas-dist-track {
	background: rgba(255, 255, 255, .10) !important;
}
.fp-resenas-dist-cant {
	color: var(--ba-humo) !important;
}
.fp-resenas-num {
	color: var(--ba-marfil) !important;
}

/* Estrellas vacías: #e0e0e0 sobre negro queda casi tan brillante como las
   llenas y no se distingue cuál está marcada */
.fp-resenas-stars .far,
.fp-resena-stars .far,
.fp-wizard-estrella .far {
	color: rgba(255, 255, 255, .22) !important;
}
.fp-resenas-stars i,
.fp-resena-stars i {
	color: var(--ba-oro);
}

/* Botón de "calce" y selector de orden: vienen con fondo blanco */

.fp-resenas-calce-btn {
	background: var(--ba-panel-2) !important;
	color: var(--ba-marfil) !important;
	border-color: var(--ba-borde) !important;
}

.fp-resenas-orden {
	background: var(--ba-panel-2) !important;
}

.fp-resenas-calce-btn:hover,
.fp-resenas-orden:hover {
	border-color: var(--ba-oro) !important;
}

/* Encabezado del modal de reseña: .fp-modal-talles .modal-header lo fuerza a
   #fff, y el título sale de --fp-ink (marfil) -> marfil sobre blanco. El
   cuerpo del modal ya venía oscuro, así que sólo desentonaba la franja. */

.fp-modal .modal-header {
	background: var(--ba-panel) !important;
	border-bottom-color: var(--ba-borde) !important;
}

.fp-modal-talles .modal-title {
	color: var(--ba-marfil) !important;
}

.fp-modal-talles .modal-title i {
	color: var(--ba-oro) !important;
}

/* ============================================================
   PORTADO DESDE EMANTONI
   Ajustes de modo oscuro hechos en el custom.css de emantoni que aplican
   igual acá, con los tokens de este tenant. Quedan afuera a propósito:
     · todo lo de `.megamenu-estilo-4` y `.megamenu-cinta-item` (la columna
       de logos de casas; acá el megamenú es de listas de texto)
     · las reglas de `figure img`, que en este tenant ya están con
       `:not(.d-non)` y esa versión es la correcta
   ============================================================ */

/* ---------- Avisos del checkout ----------
   `.alert-custom` del theme viene con fondo #f7f7f8 y el texto en el color
   primario: dorado sobre gris claro no se lee. */

.alert.alert-custom .alert-link {
	text-decoration: underline;
}

/* ---------- Alerts de Bootstrap en el sitio ----------
   Vienen con fondo pastel y texto oscuro. Pasan a panel, con el color
   semántico en el borde y el ícono, que es lo que hay que distinguir. */
.alert.alert-info { border-color: rgba(56, 189, 248, .35) !important; }
.alert.alert-warning { border-color: rgba(206, 179, 110, .45) !important; }
.alert.alert-success { border-color: rgba(74, 222, 128, .35) !important; }
.alert.alert-danger { border-color: rgba(248, 113, 113, .35) !important; }

.alert.alert-info i { color: #7dd3fc !important; }
.alert.alert-success i { color: #86efac !important; }
.alert.alert-danger i { color: #fca5a5 !important; }

/* ---------- Resumen del pedido (checkout) ----------
   La raya que separa los productos de los totales la dibuja el <tbody>
   (border-top del theme), no las celdas: por eso pintar td/th/tr no alcanza. */

/* Tacho de quitar el producto: el ícono trae su propio gris, hay que pintar
   el <i> y no solo el <p>. */

p[onclick^="eliminarProductoCheckout"], p[onclick^="eliminarProductoCheckout"] i {
	opacity: 1;
	transition: color .18s ease;
}

p[onclick^="eliminarProductoCheckout"]:hover, p[onclick^="eliminarProductoCheckout"]:hover i {
	opacity: 1;
}

/* Selector de cantidad: el input traía borde propio y rompía la línea del
   control. El borde queda en el grupo y adentro los tres elementos al tono. */
.number-picker-checkout .input-group {
	border: 1px solid var(--ba-borde) !important;
	border-radius: 2rem;
	overflow: hidden;
	background-color: transparent;
}

.number-picker-checkout .input-group .form-control {
	border: 0 !important;
	box-shadow: none !important;
	background-color: transparent !important;
	text-align: center;
}

.number-picker-checkout .btn-increment, .number-picker-checkout .btn-decrement {
	border: 0 !important;
	background-color: transparent !important;
}

.number-picker-checkout .btn-increment:hover,
.number-picker-checkout .btn-decrement:hover {
	background-color: rgba(206, 179, 110, .12) !important;
}

/* ---------- Checkout: tipo de entrega y métodos de pago ----------
   Los botones (btn-outline-primary) vienen del theme en blanco con texto gris. */

/* Panel de Mercado Pago dentro del checkout */
.mp-checkout-pro-benefit-description,
.mp-checkout-pro-redirect-description {
	color: var(--ba-humo) !important;
}
.btn-mercadopago {
	border-radius: 2px;
}

/* ---------- Opciones desplegadas de los <select> ----------
   Las dibuja el navegador y heredaban un gris que sobre el fondo negro casi
   no se leía. */
/* El color lleva !important porque el theme clava
   `select option { color: #3c3c3b !important }` en style.css: sin eso la regla
   no gana nunca y las opciones quedan en gris oscuro sobre el panel negro. */

select option, select.form-select option {
	color: var(--ba-marfil) !important;
}

select option:disabled {
	color: var(--ba-humo) !important;
}

/* ---------- Carrito lateral ---------- */

/* Tacho de quitar: marfil en reposo, oro al pasar por encima. */

/* La cantidad venía en el gris del theme. */

/* La cinta de envío gratis comparte el fondo del carrito, sin cortes de
   color. El pie NO va transparente: es fijo sobre la lista y se le vería el
   contenido pasar por debajo al scrollear. */
#carritoMenu .fp-shipbar,
#carritoMenu .fp-shipbar-wrap {
	background-color: transparent !important;
}

/* Sin raya bajo el encabezado: separaba de más y dejaba el primer producto
   pegado. */
#carritoMenu .offcanvas-header {
	border-bottom: 0;
	padding-bottom: 1.1rem;
}

/* ---------- Ficha: detalles ---------- */

/* Alto parejo de las opciones de variante: salían con 10 px de diferencia
   pese a tener el mismo padding, borde y contenido. El ancho sigue
   dependiendo del texto. */
.picker label[for*=radVariante] {
	height: 32px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	align-items: center;
}

/* Chip de envío de la ficha, en oro como el resto de los destacados. */

.fp-badge-envio {
	background: #CEB36E !important;
	border-color: #CEB36E;
}

/* Panel de distribución de puntajes: filete además del fondo. */

.fp-resenas-dist {
	border: 1px solid var(--ba-borde);
}

/* Bullet activo de los sliders: aro en oro en vez de relleno. */

.swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	transform: scale(1);
}


/* ---------- Productos recomendados y vistos recientemente ----------
   Los títulos de las tarjetas quedaban en el gris oscuro del theme (#3c3c3b)
   sobre el fondo casi negro: ilegibles. El encabezado de cada sección ya venía
   claro, solo faltaban los de las tarjetas.
   (En emantoni esta regla apunta a --em-texto, un token que no existe en ese
   archivo, así que allá todavía no surte efecto.) */
#divRecomendados h2,
#divRecomendados h2 a,
#divRecientes h2,
#divRecientes h2 a {
	color: var(--ba-marfil) !important;
}

/* Botón "Continuar" de los pasos del checkout: va sobre el dorado, así que el
   texto tiene que ser oscuro para leerse. */

/* ----- Excepciones del modo oscuro -----
   Este sitio no pintaba estos elementos y la hoja global sí. Acá se les devuelve el color que
   tenían, para que se sigan viendo igual. ----- */
:where(html.sitio-oscuro.familia-oro) .navbar .nav-link:not(#\9) {
	color: rgb(242, 240, 234);
}

:where(html.sitio-oscuro.familia-oro) .megamenu-panel .megamenu-col-titulo:not(#\9) {
	color: rgb(206, 179, 110);
}

:where(html.sitio-oscuro.familia-oro) .picker label[for*=radVariante]:not(#\9) {
	background-color: rgb(22, 22, 22);
}

:where(html.sitio-oscuro.familia-oro) .picker.picker-botones label:not([for*=radColor]):not(#\9) {
	background-color: rgb(22, 22, 22);
	border-color: rgb(42, 42, 42);
}

:where(html.sitio-oscuro.familia-oro) .picker label[for*=radVariante]:has(input:checked):not(#\9) {
	background-color: rgb(22, 22, 22);
	border-color: rgb(42, 42, 42);
}

:where(html.sitio-oscuro.familia-oro) .picker.picker-botones label:not([for*=radColor]):has(input:checked):not(#\9) {
	background-color: rgb(22, 22, 22);
	border-color: rgb(42, 42, 42);
}

:where(html.sitio-oscuro.familia-oro) .picker label[for*=radVariante] > input:checked ~ span:not(#\9) {
	color: rgb(242, 240, 234);
}

:where(html.sitio-oscuro.familia-oro) .picker.picker-botones label:not([for*=radColor]) > input:checked ~ span:not(#\9) {
	color: rgb(242, 240, 234);
}

:where(html.sitio-oscuro.familia-oro) .picker label[for*=radVariante] > span:not(#\9) {
	color: rgb(242, 240, 234);
}

:where(html.sitio-oscuro.familia-oro) .picker.picker-botones label:not([for*=radColor]) > span:not(#\9) {
	color: rgb(242, 240, 234);
}

:where(html.sitio-oscuro.familia-oro) .categorias-nav .link-body.active:not(#\9) {
	color: rgb(206, 179, 110);
}

:where(html.sitio-oscuro.familia-oro) .categorias-nav li.categorias-nav-item > a.link-body:not(#\9) {
	color: rgb(242, 240, 234);
}

:where(html.sitio-oscuro.familia-oro) .categorias-nav li > a.link-body:not(#\9) {
	color: rgb(206, 179, 110);
}

:where(html.sitio-oscuro.familia-oro) .widget li.categorias-nav-item > a.link-body:not(#\9) {
	color: rgb(242, 240, 234);
}

:where(html.sitio-oscuro.familia-oro) .widget li > a.link-body:not(#\9) {
	color: rgb(206, 179, 110);
}

:where(html.sitio-oscuro.familia-oro) .navbar .dropdown-menu li.megamenu-col.dropdown-submenu.megamenu-col-3 > a.dropdown-item:not(#\9) {
	color: rgb(206, 179, 110);
}

/* ----- Componentes con estados propios de este sitio -----
   .navbar: este sitio los pinta con su propio criterio según el estado, y
   la hoja global no puede reproducirlo. Sus reglas originales quedan acá, tal cual estaban. ----- */
:where(html.sitio-oscuro) .navbar-brand img {
	width: 165px;
}

:where(html.sitio-oscuro) .navbar-bg-color-secundario,
:where(html.sitio-oscuro) .navbar-bg-color-secundario.navbar-stick,
:where(html.sitio-oscuro) .navbar-bg-color-secundario .navbar-collapse,
:where(html.sitio-oscuro) .navbar-bg-color-secundario .offcanvas-body,
:where(html.sitio-oscuro) .navbar-bg-color-secundario .offcanvas-header,
:where(html.sitio-oscuro) #divBarraSuperior {
	background-color: var(--ba-noche) !important;
}

:where(html.sitio-oscuro) .navbar-bg-color-secundario .navbar-collapse {
	border-bottom: 1px solid rgba(206, 179, 110, .16);
}

:where(html.sitio-oscuro) .navbar .nav-link {
	color: var(--ba-marfil) !important;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 12.5px;
	font-weight: 400;
}

:where(html.sitio-oscuro) .navbar .nav-link:hover,
:where(html.sitio-oscuro) .navbar .nav-link.active {
	color: var(--ba-oro) !important;
}

:where(html.sitio-oscuro) .navbar .dropdown-menu {
	background-color: var(--ba-panel);
	border: 1px solid var(--ba-borde);
	border-radius: 3px;
}

:where(html.sitio-oscuro) .navbar .dropdown-menu .dropdown-item {
	color: var(--ba-marfil);
	font-size: 13px;
	letter-spacing: .03em;
}

:where(html.sitio-oscuro) .navbar .dropdown-menu .dropdown-item:hover,
:where(html.sitio-oscuro) .navbar .dropdown-menu .dropdown-item:focus {
	background-color: var(--ba-panel-2);
	color: var(--ba-oro);
}

:where(html.sitio-oscuro) .navbar .navbar-other .nav-link i,
:where(html.sitio-oscuro) .navbar .navbar-other .list-inline-item a {
	color: var(--ba-marfil) !important;
}

:where(html.sitio-oscuro) .navbar .navbar-other .nav-link i:hover {
	color: var(--ba-oro) !important;
}

:where(html.sitio-oscuro) .navbar .navbar-collapse .nav-link,
:where(html.sitio-oscuro) .navbar .offcanvas-body .nav-link {
	font-family: var(--ba-font-titulos) !important;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}

:where(html.sitio-oscuro) .navbar .navbar-collapse > ul > li > .nav-link {
	display: flex;
	align-items: center;
}

/* ===== Estilos > Componentes ===== */

/* ---------- Menú ---------- */

/* menu|enlaces_mayusculas|normal|opcion|uppercase */
html body .navbar .nav-link:not(#\9):not(#\9),
html body .navbar-dark .navbar-nav .nav-link:not(#\9):not(#\9) {
	text-transform: uppercase !important;
}

/* ---------- Logos ---------- */

/* logos|menu|normal|medida|165px */
html body .navbar-brand img:not(#\9):not(#\9) {
	width: 165px !important;
}

/* logos|menu_mobile|normal|medida|150px */
html body .logo-menu-mobile:not(#\9):not(#\9) {
	width: 150px !important;
}

/* logos|pie|normal|medida|200px */
html body .footer-logo:not(#\9):not(#\9) {
	width: 200px !important;
}

/* ---------- Botones ---------- */

/* botones|cerrar_fondo|normal|otro|#ffffff14 */
html body .btn-close:not(#\9):not(#\9)::before {
	background-color: #ffffff14 !important;
	transition-property: color, background-color, border-color, -webkit-text-fill-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

/* ===== fin Estilos > Componentes ===== */