/* ============================================================
   EMANTONI — Fragancias Árabes
   "Perfumes intensos, de larga duración"

   Tema base: NOCHE + ORO (perfumería de nicho).
     Noche   #0B0B10 (fondo)        Panel   #14141C
     Panel 2 #191922 (apoyos)       Borde   #262633
     Oro     #C9A24D (acento/CTA)   Oro cl. #E3C77E
     Oro osc.#8C6B2F                Marfil  #F1ECE3 (texto)
     Humo    #9C96A6 (secundario)

   Tipografías: Cinzel (titulares, monograma) · Jost (funcional/cuerpo).
   Registradas en head.php → $google_fonts_por_proyecto["emantoni"].

   El sistema inyecta --color-primario (#C9A24D) y --color-secundario (#8C6B2F).
   ============================================================ */

:root {
	--em-noche: #0B0B10;
	--em-panel: #14141C;
	--em-panel-2: #191922;
	--em-borde: #262633;
	--em-borde-oro: rgba(201, 162, 77, .28);
	--em-oro: #C9A24D;
	--em-oro-claro: #E3C77E;
	--em-oro-oscuro: #8C6B2F;
	--em-marfil: #F1ECE3;
	--em-humo: #9C96A6;

	--em-font-titulos: "Cinzel", "Georgia", serif;
	--em-font-texto: "Jost", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

:root {
	--bs-font-sans-serif: "Jost", sans-serif;
	--bs-body-font-family: "Jost", 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(--em-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-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	font-family: var(--em-font-titulos) !important;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--em-marfil);
}

.lead { font-weight: 300; }

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

body {
	background-color: var(--em-noche);
	color: var(--em-marfil);
}

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

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

.text-dark, .link-dark { color: var(--em-marfil) !important; }
.text-muted { color: var(--em-humo) !important; }
p { color: var(--em-marfil); }

/* Cards → paneles grafito con filete fino */
.card {
	background-color: var(--em-panel);
	border: 1px solid var(--em-borde);
	color: var(--em-marfil);
	border-radius: 4px;
}
.card .text-muted { color: var(--em-humo) !important; }

/* Divisores SVG: el "papel" es noche, no blanco */
.divider .text-white, .divider path,
.divider .text-light, .divider .text-gray { color: var(--em-noche) !important; }

hr, .footer-hr { border-color: var(--em-borde); }

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

a { color: var(--em-marfil); text-decoration: none; }
a:hover { color: var(--em-oro); }
.follow-link:hover { color: var(--em-oro); }

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

/* Primario = oro sólido, texto noche */
.btn-primary {
	background: var(--em-oro);
	border: 1px solid var(--em-oro);
	border-radius: 2px;
	color: var(--em-noche) !important;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 11px 26px !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background: var(--em-oro-claro);
	border-color: var(--em-oro-claro);
	color: var(--em-noche) !important;
}

.btn-outline-primary, .btn-secundario, .btn-secondary {
	background: transparent;
	border: 1px solid var(--em-oro);
	border-radius: 2px;
	color: var(--em-oro) !important;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 11px 26px !important;
}
.btn-outline-primary:hover, .btn-secundario:hover, .btn-secondary:hover {
	background: var(--em-oro);
	border-color: var(--em-oro);
	color: var(--em-noche) !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 {
	background-color: var(--em-panel);
	border: 1px solid var(--em-borde);
	color: var(--em-marfil);
	border-radius: 2px;
}
.form-control:focus, .form-select:focus {
	background-color: var(--em-panel);
	border-color: var(--em-oro);
	color: var(--em-marfil);
	box-shadow: none;
}
.form-control::placeholder { color: var(--em-humo); }
.form-label, .form-check-label { color: var(--em-marfil); }

/* ---------- Navbar / logo ---------- */

.navbar-brand img { width: 165px; }
.logo-menu-mobile { width: 150px; }
@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-stick,
.navbar-bg-color-secundario .navbar-collapse,
.navbar-bg-color-secundario .offcanvas-body,
.navbar-bg-color-secundario .offcanvas-header,
#divBarraSuperior {
	background-color: var(--em-noche) !important;
}
.navbar-bg-color-secundario .navbar-collapse {
	border-bottom: 1px solid rgba(201, 162, 77, .16);
}

.navbar .nav-link {
	color: var(--em-marfil) !important;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 12.5px;
	font-weight: 400;
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--em-oro) !important; }

/* Dropdown del menú (Tienda → categorías) */
.navbar .dropdown-menu {
	background-color: var(--em-panel);
	border: 1px solid var(--em-borde);
	border-radius: 3px;
}
.navbar .dropdown-menu .dropdown-item {
	color: var(--em-marfil);
	font-size: 13px;
	letter-spacing: .03em;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
	background-color: var(--em-panel-2);
	color: var(--em-oro);
}

/* Íconos del header (carrito, favoritos, cuenta, buscar) */
.navbar .navbar-other .nav-link i,
.navbar .navbar-other .list-inline-item a { color: var(--em-marfil) !important; }
.navbar .navbar-other .nav-link i:hover { color: var(--em-oro) !important; }

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

.pie-pagina, footer {
	background-color: var(--em-noche) !important;
	color: var(--em-humo);
}
.pie-pagina a { color: var(--em-humo); }
.pie-pagina a:hover { color: var(--em-oro); }
.pie-pagina h4, .pie-pagina h5, .pie-pagina .widget-title { color: var(--em-marfil) !important; }

/* ---------- 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(--em-oro-claro) 10%, var(--em-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 {
	color: var(--em-oro) !important;
	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 {
	background-color: #ffffff;
	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;
}
.widget .image-list figure img,
.blog .item figure img,
figure.hover-scale.rounded img {
	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 {
	color: var(--em-marfil) !important;
	font-family: var(--em-font-texto) !important;
	letter-spacing: .02em;
}
.project.item .post-header h2 a:hover,
.swiper-slide.project .post-header h2 a:hover { color: var(--em-oro) !important; }

.price, .price ins, .amount { color: var(--em-oro) !important; }
.price del, .price del span, del.amount { color: var(--em-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_"] {
	background-color: var(--em-oro);
	color: var(--em-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(--em-borde-oro); }

/* Badges de novedad / oferta */
.badge.bg-primary, .badge.bg-secondary {
	background-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
	letter-spacing: .08em;
	font-weight: 500;
}

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

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

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

#divBloqueMarcas, #divBloqueMarcas .container { background-color: var(--em-noche) !important; }

/* ---------- 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 */
#swiperPortadasHorizontal .btn-primary,
#swiperPortadasVertical .btn-primary {
	background: var(--em-oro);
	border-color: var(--em-oro);
	color: var(--em-noche) !important;
}
#swiperPortadasHorizontal h1, #swiperPortadasHorizontal h2,
#swiperPortadasVertical h1, #swiperPortadasVertical h2 {
	color: var(--em-marfil) !important;
}

/* ---------- 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, #divBloqueCategorias h4 a {
	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;
}

/* ---------- Banners de beneficios ---------- */

#divBloqueBeneficios i, #divBloqueBanners i { color: var(--em-oro) !important; }
#divBloqueBeneficios h4, #divBloqueBanners h4 {
	font-family: var(--em-font-texto) !important;
	font-size: .95rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

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

#divBloqueTestimonios .card { background-color: var(--em-panel); border: 1px solid var(--em-borde); }
#divBloqueTestimonios .text-warning { color: var(--em-oro) !important; }

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

.accordion-item { background-color: var(--em-panel); border: 1px solid var(--em-borde); }
.accordion-button { background-color: var(--em-panel); color: var(--em-marfil); }
.accordion-button:not(.collapsed) { background-color: var(--em-panel-2); color: var(--em-oro); box-shadow: none; }
.accordion-body { color: var(--em-humo); }

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

.table { color: var(--em-marfil); }
.table > :not(caption) > * > * { background-color: transparent; border-color: var(--em-borde); }

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

.modal-content, .offcanvas { background-color: var(--em-panel); color: var(--em-marfil); }
.modal-header, .modal-footer, .offcanvas-header { border-color: var(--em-borde); }

/* 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(--em-marfil) !important;
	filter: none;
	opacity: 1;
}
.btn-close::before {
	background: rgba(255, 255, 255, .08) !important;
	color: var(--em-marfil);
}
.btn-close:hover { color: var(--em-oro) !important; }
.btn-close:hover::before { background: rgba(201, 162, 77, .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, #favoritosMenu, #filtrosMenu,
#carritoMenu.bg-white, #carritoMenu .offcanvas-footer {
	background-color: var(--em-noche) !important;
}
#carritoMenu .offcanvas-header { border-bottom: 1px solid var(--em-borde); }

#carritoMenu .text-white, #carritoMenu p, #carritoMenu .link-light { color: var(--em-marfil) !important; }
#carritoMenu i, #favoritosMenu i { color: var(--em-marfil); }
#carritoMenu .variante-light { color: var(--em-humo) !important; }
#carritoMenu del span { color: var(--em-humo) !important; }
#carritoMenu .amount, #carritoMenu ins { color: var(--em-oro) !important; }
#carritoMenu .shopping-cart .link-titulo-carrito { color: var(--em-marfil) !important; }
#carritoMenu .shopping-cart .link-titulo-carrito:hover { color: var(--em-oro) !important; }
#carritoMenu .fp-shipbar-txt, #carritoMenu .fp-shipbar-labels b { color: var(--em-marfil); }

/* Carrito vacío: el tema pinta el ícono de #1f263c (invisible sobre negro) */
#carritoMenu .div-carrito-vacio i,
#favoritosMenu .div-favorito-vacio i {
	color: var(--em-oro) !important;
	opacity: .55;
}
#carritoMenu .div-carrito-vacio p,
#favoritosMenu .div-favorito-vacio p { color: var(--em-humo) !important; }

/* Carrito CON productos: el tema fuerza #1f263c en todos los totales */
#carritoMenu .totales-carrito-menu,
#carritoMenu .totales-carrito-menu td,
#carritoMenu .totales-carrito-menu strong,
#carritoMenu .totales-carrito-menu p,
#carritoMenu .totales-carrito-menu span { color: var(--em-marfil) !important; }
#carritoMenu .totales-carrito-menu .price,
#carritoMenu .totales-carrito-menu tr:last-child strong { color: var(--em-oro) !important; }
#carritoMenu .totales-carrito-menu .text-green,
#carritoMenu .totales-carrito-menu .text-success { color: #4ADE80 !important; }
#carritoMenu .totales-carrito-menu td { border-color: var(--em-borde) !important; }

/* Íconos de acción de cada ítem (quitar, editar) */
#carritoMenu .link-dark.cursor-pointer i,
#carritoMenu .shopping-cart-item i { color: var(--em-humo) !important; }
#carritoMenu .link-dark.cursor-pointer:hover i,
#carritoMenu .shopping-cart-item i:hover { color: var(--em-oro) !important; }

/* Tarjetas de sugeridos y fila del cupón */
#carritoMenu .sugerido-carrito-item {
	background-color: var(--em-panel) !important;
	border: 1px solid var(--em-borde);
}
#carritoMenu .sugerido-carrito-item, #carritoMenu .sugerido-carrito-item * { color: var(--em-marfil); }
#carritoMenu .sugerido-carrito-item figure { background-color: #ffffff; border-radius: 3px; }
#carritoMenu #divCuponCarritoMenu .btn-primary { color: var(--em-noche) !important; }
#carritoMenu .fp-shipbar { background-color: var(--em-panel) !important; }

.number-picker-cart .input-group input { color: #ffffff !important; }
.number-picker .input-group { border-radius: 2rem; }
.number-picker .btn-increment, .btn-decrement { border-radius: 2rem !important; }

.div-buscar-header .link-dark { color: #ffffff !important; }

#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]) {
	border-color: var(--em-borde);
	background-color: var(--em-panel);
	color: var(--em-marfil);
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):hover {
	border-color: var(--em-oro) !important;
	color: var(--em-oro) !important;
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):has(input:checked) {
	border-color: var(--em-oro) !important;
	background-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
}

.buscador-resultados .picker.picker-botones label:not([for*=radColor]),
.buscador-resultados .picker.picker-botones label:not([for*=radColor]) > span {
	border-color: var(--em-borde);
	background-color: transparent;
	color: var(--em-marfil);
}
.buscador-resultados .picker.picker-botones label:not([for*=radColor]):has(input:checked) {
	border-color: var(--em-oro) !important;
	background-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
}

.picker label[for*=radVariante] > input:checked ~ span {
	background-color: var(--em-oro);
	color: var(--em-noche);
}
.picker label[for*=radVariante] > span { padding: .3rem; }

#filtrosMenu { color: var(--em-marfil); }

/* ============================================================
   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: #F1ECE3;
	--fp-muted: #9C96A6;
	--fp-border: #262633;
	--fp-border-strong: #3A3A4A;
}

/* Paneles con blanco fijo → panel grafito */
.fp-pickup,
.fp-linkrow,
.fp-acc,
.fp-plan,
.fp-cd-box,
.fp-despacho-countdown,
.fp-garantia,
.fp-cupon,
.fp-combo,
.fp-gift,
.fp-countdown,
.fp-barra {
	background: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
	color: var(--em-marfil);
}

.fp-linkrow:hover,
.fp-plan:hover,
.fp-pickup:hover { background: var(--em-panel-2) !important; }

.fp-linkrow-title, .fp-pickup-title, .fp-plan-title,
.fp-acc-head, .fp-garantia-titulo { color: var(--em-marfil) !important; }
.fp-linkrow-sub, .fp-pickup-sub, .fp-plan-sub,
.fp-garantia-texto, .fp-pickup-item { color: var(--em-humo) !important; }
.fp-linkrow-ico, .fp-pickup-ico, .fp-garantia-ico { background: var(--em-panel-2) !important; }
.fp-linkrow-ico i, .fp-pickup-ico i, .fp-garantia-ico i,
.fp-linkrow-chev i { color: var(--em-oro) !important; }

/* Franja de despacho: el fondo es oro al 10%, el texto tiene que leerse */
.fp-despacho { border-color: var(--em-borde-oro) !important; }
.fp-despacho-txt, .fp-despacho-txt span { color: var(--em-marfil) !important; }
.fp-despacho-dia { background: var(--em-oro) !important; color: var(--em-noche) !important; }
.fp-despacho-countdown { color: var(--em-oro) !important; }

/* Cuenta regresiva de la promoción */
.fp-cd-box { color: var(--em-oro) !important; }
#divCuentaRegresivaPromocion .fp-countdown-title,
#divCuentaRegresivaPromocion span:not(.fp-cd-num):not(.fp-cd-lbl) { color: var(--em-marfil) !important; }
.fp-cd-num { color: var(--em-oro) !important; }
.fp-cd-lbl { color: var(--em-humo) !important; }

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

/* Acordeón de la ficha (Descripción, Ficha técnica) */
.fp-acc-head { background: var(--em-panel) !important; }
.fp-acc-body { background: var(--em-panel) !important; color: var(--em-marfil); }
.fp-acc-body li, .fp-acc-body p, .fp-acc-body strong { color: var(--em-marfil) !important; }

/* 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 {
	background: var(--em-panel-2) !important;
	border: 1px solid var(--em-borde);
	color: var(--em-marfil) !important;
}
.fp-badge-info::before { color: var(--em-oro); }
.fp-badge-envio { background: #1E7A4B !important; border-color: #1E7A4B; color: #ffffff !important; }
.fp-badge-envio::before { color: #ffffff; }

/* 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(--em-panel) !important;
	border: 1px solid var(--em-borde) !important;
	border-radius: 3px;
	padding: .1rem .25rem;
}
.picker label[for*=radVariante] > span {
	background: transparent !important;
	color: var(--em-marfil) !important;
	border: 0 !important;
	padding: .3rem .45rem;
}
.picker label[for*=radVariante]:hover {
	border-color: var(--em-oro) !important;
}
.picker label[for*=radVariante]:has(input:checked) {
	background-color: var(--em-oro) !important;
	border-color: var(--em-oro) !important;
}
.picker label[for*=radVariante] > input:checked ~ span {
	background: transparent !important;
	color: var(--em-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(--em-panel) !important;
	border-color: var(--em-borde) !important;
	color: var(--em-marfil);
}
.picker.picker-botones label:not([for*=radColor]) > span { color: var(--em-marfil) !important; }
.picker.picker-botones label:not([for*=radColor]):hover { border-color: var(--em-oro) !important; }
.picker.picker-botones label:not([for*=radColor]):has(input:checked) {
	background-color: var(--em-oro) !important;
	border-color: var(--em-oro) !important;
}
.picker.picker-botones label:not([for*=radColor]) > input:checked ~ span {
	color: var(--em-noche) !important;
	font-weight: 600;
}

/* Panel lateral de categorías */
.aside-categorias .widget,
.categorias-nav {
	background: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
}
.categorias-nav .widget-title,
.categorias-nav-item { border-color: var(--em-borde) !important; }
.categorias-nav .widget-title {
	color: var(--em-oro) !important;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.categorias-nav .link-body { color: var(--em-marfil) !important; }
.categorias-nav .link-body:hover {
	background-color: var(--em-panel-2) !important;
	color: var(--em-oro) !important;
}
.categorias-nav .link-body.active {
	background-color: var(--em-panel-2) !important;
	border-left-color: var(--em-oro) !important;
	color: var(--em-oro) !important;
}
.categorias-nav .link-body .count {
	background-color: var(--em-panel-2) !important;
	color: var(--em-humo) !important;
}
.categorias-nav .link-body.active .count {
	background-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
}
.categorias-nav .categorias-subnav {
	background-color: rgba(255, 255, 255, .02) !important;
	border-top-color: var(--em-borde) !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: #0B0B10; }

/* ============================================================
   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-footer span,
#carritoMenu .offcanvas-body > .d-flex p,
#carritoMenu .offcanvas-footer .h6,
#carritoMenu .offcanvas-footer strong,
#carritoMenu .offcanvas-footer label,
#carritoMenu .offcanvas-footer .text-dark {
	color: var(--em-marfil) !important;
}
/* El importe final, en oro */
#carritoMenu .offcanvas-footer .h6.text-dark,
#carritoMenu .offcanvas-footer .h5.text-dark {
	color: var(--em-oro) !important;
}

#carritoMenu .btn-secundario,
#carritoMenu .btn-secondary,
#carritoMenu .btn-seguir-comprando {
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid var(--em-oro) !important;
	color: var(--em-oro) !important;
}
#carritoMenu .btn-secundario:hover,
#carritoMenu .btn-secondary:hover,
#carritoMenu .btn-seguir-comprando:hover {
	background-color: var(--em-oro) !important;
	color: var(--em-noche) !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;
	}
}

/* Encabezado de columna en oro, como el resto de los antetítulos del sitio.
   Mismo padding lateral que los ítems (el tema los deja en `padding: 0 0 .9rem`),
   así el título y su lista arrancan en la misma línea y el hover del título
   clickeable no queda pegado al texto. */
.megamenu-panel .megamenu-col-titulo {
	color: var(--em-oro) !important;
	letter-spacing: .12em;
	font-family: var(--em-font-titulos) !important;
	padding-left: .7rem;
	padding-right: .7rem;
	margin-left: -.7rem;
	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);
	color: var(--em-oro-claro) !important;
}
.megamenu-panel .megamenu-item:hover .megamenu-item-titulo { color: var(--em-oro); }

/* Logo del pie */
.footer-logo {
	width: 200px;
}

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

/* Columna lateral: categorías, archivo y tags venían con el gris del tema claro */
.widget .link-body,
.widget .unordered-list a,
.widget .image-list .post-content a {
	color: var(--em-marfil) !important;
}
.widget .link-body:hover,
.widget .unordered-list a:hover { color: var(--em-oro) !important; }
.widget .unordered-list.bullet-primary li::before,
.widget .unordered-list li::marker { color: var(--em-oro); }

/* Tags: el btn-soft-ash es un gris claro con texto oscuro */
.tag-list .btn-soft-ash,
.tag-list .btn {
	background-color: var(--em-panel-2) !important;
	border: 1px solid var(--em-borde) !important;
	color: var(--em-humo) !important;
	letter-spacing: .02em;
}
.tag-list .btn-soft-ash:hover, .tag-list .btn:hover {
	background-color: var(--em-oro) !important;
	border-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
}

/* Paginación: .page-link viene en blanco con texto oscuro */
.pagination { box-shadow: none; }
.page-link {
	background-color: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
	color: var(--em-marfil) !important;
}
.page-link:hover {
	background-color: var(--em-panel-2) !important;
	border-color: var(--em-oro) !important;
	color: var(--em-oro) !important;
}
.page-item.active .page-link,
.page-link.active {
	background-color: var(--em-oro) !important;
	border-color: var(--em-oro) !important;
	color: var(--em-noche) !important;
}
.page-item.disabled .page-link {
	background-color: var(--em-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; }

/* Ítems del megamenú: el tema los deja sin padding lateral, así que en el hover
   el resaltado quedaba pegado al texto. Se les da aire y se compensa con un
   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);
	color: var(--em-oro) !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(--em-panel) !important;
	border: 1px solid var(--em-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 {
	color: var(--em-marfil);
	font-weight: 500;
	letter-spacing: .02em;
}
.accordion-wrapper .card-header button:not(.collapsed) { color: var(--em-oro); }
.accordion-wrapper .card-body {
	background: transparent !important;
	color: var(--em-marfil);
	padding: .25rem 1.25rem 1.25rem !important;
}
.accordion-wrapper .card-body p,
.accordion-wrapper .card-body li,
.accordion-wrapper .card-body strong { color: var(--em-marfil) !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(--em-noche) !important;
}
#divBanners i { color: var(--em-oro) !important; }
#divBanners h4, #divBanners p { color: var(--em-marfil) !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(--em-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;
}
#divBarraCompraProducto .fp-stickybar-thumb {
	background-color: #ffffff !important;
	border-color: var(--em-borde) !important;
}
#divBarraCompraProducto,
#divBarraCompraProducto span,
#divBarraCompraProducto label { color: var(--em-marfil); }
#divBarraCompraProducto .amount, #divBarraCompraProducto ins { color: var(--em-oro) !important; }

/* Reseñas de clientes */
#listadoCalificaciones .fp-resena-card,
#listadoCalificaciones .calificacion-item,
#listadoCalificaciones .card,
.fp-resena-card {
	background-color: var(--em-panel) !important;
	border: 1px solid var(--em-borde) !important;
	color: var(--em-marfil);
}
.fp-resena-card p, .fp-resena-card span, .fp-resena-card strong,
.fp-resena-card .fp-resena-texto { color: var(--em-marfil) !important; }
.fp-resena-card .fp-resena-fecha,
.fp-resena-card small, .fp-resena-card .text-muted { color: var(--em-humo) !important; }
.fp-resena-card .fp-resena-autor, .fp-resena-card h6 { color: var(--em-marfil) !important; }
/* El avatar por defecto viene con fondo claro */
.fp-resena-card img, .fp-resena-avatar { border-radius: 50%; }
#listadoCalificaciones .text-muted, #listadoCalificaciones small { color: var(--em-humo) !important; }
#listadoCalificaciones .text-warning, .fp-resenas-resumen .text-warning { color: var(--em-oro) !important; }

.fp-resenas-dist-btn {
	background-color: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
	color: var(--em-marfil) !important;
}
.fp-resenas-dist-btn:hover,
.fp-resenas-dist-btn.activo {
	background-color: var(--em-panel-2) !important;
	border-color: var(--em-oro) !important;
	color: var(--em-oro) !important;
}
/* La barrita de proporción de cada puntaje */
.fp-resenas-dist-bar { background-color: var(--em-borde) !important; }
.fp-resenas-dist-bar > span,
.fp-resenas-dist-bar-fill { background-color: var(--em-oro) !important; }

#selectOrdenCalificaciones,
.fp-resenas-orden {
	background-color: var(--em-panel) !important;
	border-color: var(--em-borde) !important;
	color: var(--em-marfil) !important;
}
#selectOrdenCalificaciones option { background-color: var(--em-panel); color: var(--em-marfil); }

/* ============================================================
   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(--em-oro) !important;
	color: var(--em-oro) !important;
	transition: background-color .2s ease, color .2s ease;
}
.btn-whatsapp-contacto:hover {
	background: var(--em-oro) !important;
	color: var(--em-noche) !important;
}
.btn-whatsapp-contacto i { color: inherit !important; }

/* Teléfono / WhatsApp de la sección */
.titulo-whatsapp-contacto, .enlace-whatsapp-contacto {
	color: var(--em-marfil) !important;
	letter-spacing: .04em;
}
.enlace-whatsapp-contacto:hover { color: var(--em-oro) !important; }

/* 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(--em-noche) !important;
		border: 0 !important;
		border-bottom: 0px solid var(--em-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(--em-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(--em-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.bullet-bg i {
	background-color: var(--color-primario) !important;
}
.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;
}