/* ============================================================
   ELEGANCIA COMPANY — tema claro "crema + tinta + oro"
   Paleta e identidad tomadas de la marca (@eleganciacompanyarg):
   crema #F7EFE4, tinta #1C1A17, oro #856819, y el monograma de 5 puntas.
   El sitio NO usa modo oscuro: la plataforma ya es clara, aca va solo la marca.
   Display: Jost. Texto: Poppins. Las dos se registran en head.php
   ($google_fonts_por_proyecto => "elegancia"), si no, no cargan.
   ============================================================ */
:root{
	--eg-crema:      #F7EFE4;
	--eg-crema-alt:  #FBF6EF;
	--eg-papel:      #FFFFFF;
	--eg-tinta:      #1C1A17;
	--eg-tinta-soft: #4A433A;
	--eg-tenue:      #756B5F;
	--eg-oro:        #856819;
	--eg-oro-claro:  #B8963E;
	--eg-borde:      #E3D8C7;
	/* El buscador (barra del menu Y modal de la lupa) se configura con esta
	   familia de tokens. Por default toda la paleta esta pensada para una caja
	   OSCURA: fondo --color-secundario y texto blanco. Cambiar solo el fondo
	   dejaba el input con letra blanca sobre blanco: se escribia y no se veia
	   nada, y el modal parecia una barra vacia. Van los seis juntos. */
	--buscador-fondo: #FFFFFF;
	--buscador-borde: rgba(28,26,23,.12);
	--buscador-texto: #1C1A17;
	--buscador-texto-suave: rgba(28,26,23,.62);
	--buscador-superficie: rgba(28,26,23,.05);
	--buscador-superficie-hover: rgba(28,26,23,.10);
}

/* ---------- Tipografia ----------
   Se pisa la familia del tema sin tocar las fuentes de iconos: los selectores
   apuntan a elementos concretos, nunca a .uil / .material-symbols / .fa*. */
:root{
	--bs-font-sans-serif: "Poppins", system-ui, -apple-system, sans-serif;
	--bs-body-font-family: "Poppins", system-ui, -apple-system, sans-serif;
}
body,
p, li, td, th, label, small,
input, textarea, select, button,
.form-control, .btn, .nav-link, .dropdown-item{
	font-family: "Poppins", system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand, .widget-title, .post-title, .price, .amount{
	font-family: "Jost", "Poppins", system-ui, sans-serif;
	letter-spacing: .012em;
}
h1, h2, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6{
	font-weight: 300;
	letter-spacing: .02em;
	color: var(--eg-tinta);
}
h3, h4, h5, h6{ font-weight: 400; color: var(--eg-tinta); }

/* Las portadas escriben su fuente en un <style> propio con pco_fuente, que no
   conoce Jost. Se pisa por id + !important (ver skill crear-tenant-demo). */
#swiperPortadasHorizontal [class*="cls-componente-"],
#swiperPortadasVertical   [class*="cls-componente-"]{
	font-family: "Jost", sans-serif !important;
	letter-spacing: .035em;
}

/* ---------- Superficies ---------- */
body{ background-color: var(--eg-crema); color: var(--eg-tinta-soft); }
.bg-light, .bg-soft-light, section.wrapper.bg-light{ background-color: var(--eg-crema-alt) !important; }
.bg-white, section.wrapper.bg-white{ background-color: var(--eg-papel) !important; }
.bg-gray, .bg-soft-gray, section.wrapper.bg-gray{ background-color: var(--eg-crema) !important; }
hr, .footer-hr{ border-color: var(--eg-borde); opacity: 1; }

.card{
	background-color: var(--eg-papel);
	border: 1px solid var(--eg-borde);
	border-radius: 10px;
}

/* ---------- Links ---------- */
a{ color: var(--eg-oro); }
a:hover{ color: var(--eg-tinta); }
.link-dark, .link-body{ color: var(--eg-tinta) !important; }
.link-dark:hover, .link-body:hover{ color: var(--eg-oro) !important; }
.text-muted{ color: var(--eg-tenue) !important; }

/* ---------- Botones ----------
   Primario = tinta solida con letra crema (el oro queda para los detalles).
   Es el contraste que usa la marca en sus piezas. */
.btn-primary, .btn.btn-primary, .btn-secundario{
	background-color: var(--eg-tinta) !important;
	border-color: var(--eg-tinta) !important;
	color: var(--eg-crema) !important;
	border-radius: 6px;
	font-family: "Jost", sans-serif;
	font-weight: 400;
	letter-spacing: .085em;
	text-transform: uppercase;
	font-size: .82rem;
	box-shadow: none;
}
.btn-primary:hover, .btn.btn-primary:hover, .btn-secundario:hover,
.btn-primary:focus, .btn.btn-primary:focus,
.btn-primary:active, .btn.btn-primary:active{
	background-color: var(--eg-oro) !important;
	border-color: var(--eg-oro) !important;
	color: #FFF !important;
}
.btn-primary i, .btn.btn-primary i,
.btn-primary .btn-inner-icon, .btn-primary .btn-inner-text{ color: inherit !important; }
.btn-outline-primary{
	border: 1px solid var(--eg-tinta);
	color: var(--eg-tinta);
	border-radius: 6px;
	letter-spacing: .085em;
	text-transform: uppercase;
}
.btn-outline-primary:hover{ background: var(--eg-tinta); color: var(--eg-crema); }
.btn .btn-inner-icon, .btn i{ color: inherit; }

/* ---------- Inputs ---------- */
.form-control, .form-select{
	background-color: var(--eg-papel);
	border: 1px solid var(--eg-borde);
	border-radius: 6px;
	color: var(--eg-tinta);
}
.form-control:focus, .form-select:focus{
	border-color: var(--eg-oro);
	box-shadow: 0 0 0 .12rem rgba(133,104,25,.14);
}

/* ============================================================
   HEADER — la barra del menu va crema, no tinta.
   navbar-bg-color-secundario pinta el <nav>, pero la franja que se ve en
   desktop es el .navbar-collapse de adentro: hay que pintar los tres.
   ============================================================ */
.navbar.navbar-bg-color-secundario,
.navbar.navbar-bg-color-secundario .navbar-collapse,
.navbar.navbar-bg-color-secundario .offcanvas-body,
.navbar.navbar-bg-color-secundario .offcanvas-header{
	background-color: var(--eg-crema) !important;
}
/* Sin filete bajo la cabecera: el hero ya funde con ella. */
.header-nav{ border-bottom: 0; }
.navbar.navbar-dark .nav-link,
.navbar .navbar-nav .nav-link{
	color: var(--eg-tinta) !important;
	font-family: "Jost", sans-serif;
	font-weight: 400;
	letter-spacing: .075em;
	text-transform: uppercase;
	font-size: .75rem;
}
@media (min-width: 992px){
	/* El tema le clava 1.7rem arriba y abajo a cada opcion (mas de 40 px de
	   aire) con este selector largo: hay que repetirlo para ganarle. */
	.navbar-expand-lg[class*="navbar-bg-"]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link{
		padding-top: .85rem !important;
		padding-bottom: .85rem !important;
	}
	/* Todas las opciones sobre la misma linea base: el dropdown-toggle de
	   Perfumes trae alto propio por el chevron y quedaba corrido. */
	.navbar-nav > .nav-item > .nav-link{
		display: flex;
		align-items: center;
		line-height: 1.2;
	}
	.navbar-nav > .nav-item{
		display: flex;
		align-items: stretch;
	}
}
/* El subrayado va solo en las opciones del menu, nunca en los iconos de
   usuario / favoritos / carrito, que viven en el mismo .navbar-nav. */
.navbar .navbar-nav:not(.navbar-other) .nav-link:hover,
.navbar .navbar-nav:not(.navbar-other) .nav-link.active{
	color: var(--eg-oro) !important;
	text-decoration: underline;
	text-underline-offset: 7px;
	text-decoration-thickness: 1px;
}
.navbar .navbar-other .nav-link:hover,
.navbar .navbar-other .nav-link{
	text-decoration: none !important;
}
/* La flecha del desplegable es un ::after del enlace. Al quedar dentro del
   flujo, el subrayado del hover se le dibuja como a un segundo trozo de texto
   y, por su tamano, mas abajo que a la palabra: se veian dos rayas a distinta
   altura. Sacandola del flujo (position: absolute) deja de heredar la
   decoracion, y centrada con translateY queda a la par del texto. */
@media (min-width: 992px){
	.navbar-nav > .nav-item > .nav-link.dropdown-toggle{
		position: relative;
		padding-right: 1.45rem !important;
	}
	.navbar-nav > .nav-item > .nav-link.dropdown-toggle::after{
		position: absolute !important;
		right: .35rem !important;
		top: 50% !important;
		transform: translateY(-50%);
		margin: 0 !important;
		padding: 0 !important;
		font-size: .85rem;
		line-height: 1;
	}
}
.navbar-other .nav-link, .navbar-other a, .navbar-other i{ color: var(--eg-tinta) !important; }
.navbar-other .nav-link:hover, .navbar-other a:hover{ color: var(--eg-oro) !important; }
.navbar .dropdown-menu{
	background-color: var(--eg-papel);
	border: 1px solid var(--eg-borde);
	border-radius: 6px;
}
.navbar .dropdown-item{ color: var(--eg-tinta); }
.navbar .dropdown-item:hover{ background-color: var(--eg-crema); color: var(--eg-oro); }

/* Buscador del header */
.div-buscar-header .form-control,
.div-buscar-header input{
	background-color: var(--eg-papel) !important;
	border: 1px solid var(--eg-borde) !important;
	color: var(--eg-tinta) !important;
	border-radius: 6px;
}
.div-buscar-header .link-dark{ color: var(--eg-tinta) !important; }

/* Barra superior de anuncios: es la unica franja tinta del encabezado */
.barra-superior, .div-anuncios{ letter-spacing: .04em; }

/* ---------- Footer (tinta) ---------- */
footer, .footer{ color: #D8CFC2; }
footer a, .footer a, footer .link-body{ color: #D8CFC2 !important; }
footer a:hover, .footer a:hover{ color: var(--eg-oro-claro) !important; }
footer .widget-title, footer .footer-titulo{
	color: #FFF !important;
	font-family: "Jost", sans-serif;
	font-weight: 400;
	letter-spacing: .09em;
	text-transform: uppercase;
	font-size: .8rem;
}
footer .footer-hr{ border-color: rgba(255,255,255,.12); }

/* ---------- Titulos de bloque ---------- */
section.wrapper .row.text-center h2,
section.wrapper .row.text-center .display-4,
section.wrapper .row.text-center .display-5{
	font-family: "Jost", sans-serif;
	font-weight: 300;
	letter-spacing: .03em;
	color: var(--eg-tinta);
}
/* Volanta: sentence case con una linea corta adelante, nunca uppercase chiquito. */
section.wrapper .row.text-center h2 + p,
.post-category, .meta{ color: var(--eg-tenue); }

/* ---------- Fichas de producto ----------
   Las fotos vienen recortadas sobre blanco: la figura va blanca aunque el
   bloque sea crema. Ojo: apuntar a .project figure y excluir las .d-non,
   que son las imagenes que la tarjeta deja ocultas. */
.project figure,
.project figure.card-img-top{
	background: var(--eg-papel);
	border-radius: 8px;
}
.project figure img:not(.d-non){ mix-blend-mode: normal; }
.project .card, .item .card{ box-shadow: none; }
.project .card:hover{ border-color: var(--eg-oro-claro); }
.post .card figure{ border-radius: 8px; }

.price, .amount, .price ins{ color: var(--eg-tinta) !important; font-weight: 500; }
.price ins{ text-decoration: none; }
del, .price del{ color: var(--eg-tenue); }
/* El % de descuento es label.amount.text-danger: si .amount se pinta de marca,
   el descuento se pierde. Va como badge solido. */
.amount.text-danger, label.amount.text-danger{
	background: #9B2C2C;
	color: #FFF !important;
	border-radius: 6px;
	padding: .12rem .4rem;
	font-size: .72rem;
	font-weight: 500;
}
.badge, .badge-sm{ border-radius: 6px; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Categorias: el nombre va encima de la imagen ---------- */
#divBloqueCategorias .project.item,
#divBloqueCategorias .swiper-slide{ position: relative; }
#divBloqueCategorias figure,
#divBloqueCategorias figure.card-img-top{ border-radius: 8px; overflow: hidden; }
#divBloqueCategorias h4,
#divBloqueCategorias .h4{
	position: absolute;
	left: 0; right: 0; bottom: 0;
	margin: 0;
	padding: 1.5rem .9rem 1.15rem;
	z-index: 2;
	text-align: center;
	font-family: "Jost", sans-serif;
	font-weight: 400;
	letter-spacing: .13em;
	text-transform: uppercase;
	font-size: 1rem;
	color: var(--eg-tinta);
	background: linear-gradient(to top, rgba(247,239,228,.97) 42%, rgba(247,239,228,0));
}
#divBloqueCategorias h4 a, #divBloqueCategorias h4 .link-dark{ color: var(--eg-tinta) !important; }

/* ---------- Marcas ---------- */
#divBloqueMarcas, .bloque-marcas{ background-color: var(--eg-crema-alt) !important; }
#divBloqueMarcas img{ opacity: .78; transition: opacity .25s ease; }
#divBloqueMarcas img:hover{ opacity: 1; }

/* ---------- Banners de beneficios ---------- */
#divBanners, #divBloqueBanners{ background-color: var(--eg-crema-alt) !important; }
#divBanners i, #divBloqueBanners i,
.banner-icono i{ color: var(--eg-oro); }

/* ---------- Hero ---------- */
/* Los dos swipers son independientes: siempre targetear los dos, y por id,
   que no depende de si la barra superior esta prendida o apagada. */
#swiperPortadasHorizontal .btn-primary,
#swiperPortadasVertical   .btn-primary{
	background-color: var(--eg-tinta) !important;
	border-color: var(--eg-tinta) !important;
	color: var(--eg-crema) !important;
}
#swiperPortadasHorizontal .btn-primary:hover,
#swiperPortadasVertical   .btn-primary:hover{
	background-color: var(--eg-oro) !important;
	border-color: var(--eg-oro) !important;
	color: #FFF !important;
}
/* El titular no puede cruzarse con los frascos de la pieza. */
/* El tema centra la columna del titular (.col-12.mx-auto.text-center) sobre todo
   el slide y se cruza con los frascos de la pieza. Se corre a la mitad izquierda. */
@media (min-width: 992px){
	#swiperPortadasHorizontal .swiper-content > .row > [class*="col-"]{
		max-width: 52%;
		margin-left: 0 !important;
		margin-right: auto !important;
		text-align: left !important;
	}
}
@media (min-width: 576px) and (max-width: 991.98px){
	#swiperPortadasHorizontal .swiper-content > .row > [class*="col-"]{
		max-width: 62%;
		margin-left: 0 !important;
		margin-right: auto !important;
	}
}
/* En el vertical los frascos estan abajo: el texto se apoya arriba.
   El .container del slide se pasa del ancho del telefono (497px sobre 414) y
   corta el titular a la derecha: hay que topearlo al viewport. */
#swiperPortadasVertical .swiper-content{
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 1.35rem;
	padding-right: 1.35rem;
}
#swiperPortadasVertical .swiper-content > .row{
	align-items: flex-start !important;
	padding-top: 8vh;
}
#swiperPortadasVertical .swiper-content > .row > [class*="col-"]{
	align-self: flex-start !important;
	padding-top: 0;
}
#swiperPortadasVertical .portada-texto-grande{ font-size: 2.15rem !important; }
#swiperPortadasVertical .portada-texto-normal{ font-size: 1rem !important; }
/* 100vh en mobile incluye el chrome del navegador: con svh el hero no se pasa. */
@media (max-width: 575.98px){
	.swiper-hero-vertical-con-barra,
	.swiper-hero-vertical-con-barra .swiper-slide,
	.swiper-hero-vertical-sin-barra,
	.swiper-hero-vertical-sin-barra .swiper-slide{
		height: calc(100svh - 110px) !important;
	}
}

/* ---------- Newsletter / testimonios / FAQ ---------- */
/* El .newsletter-wrapper es el recuadro del formulario. Va transparente: la
   tarjeta del bloque ya es tinta y un panel blanco encima dejaba la etiqueta
   flotante gris clara sobre blanco (2.07). */
.newsletter-wrapper{ background: transparent; border: 0; }
.accordion-item{ background: var(--eg-papel); border: 1px solid var(--eg-borde); border-radius: 8px; }
.accordion-wrapper{ border: 0; background: transparent; }
.accordion-button{ background: transparent; color: var(--eg-tinta); font-family: "Jost", sans-serif; }
.accordion-button:not(.collapsed){ color: var(--eg-oro); background: transparent; box-shadow: none; }

/* ---------- Panel de filtros del listado ---------- */
.categorias-nav{
	background: var(--eg-papel);
	border: 1px solid var(--eg-borde);
	border-radius: 8px;
}
.categorias-nav .link-body{ color: var(--eg-tinta-soft) !important; }
.categorias-nav .link-body.active,
.categorias-nav .link-body:hover{ color: var(--eg-oro) !important; }
.categorias-nav .count{ color: var(--eg-tenue); }

/* Pickers de variante: el fondo lo pinta el <label>, no el <span>. */
.picker label[for*="radVariante"],
.picker.picker-botones label:not([for*="radColor"]){
	background: var(--eg-papel);
	border: 1px solid var(--eg-borde);
	color: var(--eg-tinta);
	border-radius: 6px;
}
.picker label[for*="radVariante"]:has(input:checked),
.picker.picker-botones label:not([for*="radColor"]):has(input:checked){
	background: var(--eg-tinta);
	border-color: var(--eg-tinta);
	color: var(--eg-crema);
}

/* ---------- Paginacion ---------- */
.page-link{ color: var(--eg-tinta); border-color: var(--eg-borde); border-radius: 6px; }
.page-item.active .page-link{ background: var(--eg-tinta); border-color: var(--eg-tinta); color: var(--eg-crema); }

/* ---------- Ficha de producto ---------- */
.fp-badge-info{ background: var(--eg-tinta); color: var(--eg-crema); }
#divBarraCompraProducto{
	background: rgba(247,239,228,.92);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--eg-borde);
}

/* ---------- Carrito (offcanvas) ---------- */
#carritoMenu{ background: var(--eg-crema); }
#carritoMenu .offcanvas-footer{ background: var(--eg-crema-alt) !important; }
#carritoMenu .btn-secundario{ background: var(--eg-tinta) !important; color: var(--eg-crema) !important; }

/* ---------- Tablas ---------- */
.table > :not(caption) > * > *{ background-color: transparent; color: var(--eg-tinta-soft); }
.table thead th{ color: var(--eg-tinta); font-family: "Jost", sans-serif; letter-spacing: .06em; }

/* ---------- Hero: sin sombra en el titular ----------
   El tema le pone text-shadow a los componentes de portada porque asume una
   foto de fondo. Sobre la pieza crema queda sucio. */
#swiperPortadasHorizontal .portada-texto-grande,
#swiperPortadasHorizontal .portada-texto-normal,
#swiperPortadasVertical   .portada-texto-grande,
#swiperPortadasVertical   .portada-texto-normal{
	text-shadow: none !important;
}
#swiperPortadasHorizontal .portada-texto-grande,
#swiperPortadasVertical   .portada-texto-grande{
	font-weight: 300;
	letter-spacing: .03em;
	line-height: 1.06;
}

/* ---------- Nube de acordes ----------
   Los colores salen de productos_acordes (convencion de la rueda olfativa) y
   son utiles: no se pisan, se bajan de saturacion para que convivan con la
   paleta crema sin perder el codigo de color. */
#divBloqueAcordes .bloque-acorde{
	filter: saturate(.52) brightness(.97);
	border-radius: 6px;
	font-family: "Jost", sans-serif;
	letter-spacing: .04em;
}
#divBloqueAcordes .bloque-acorde:hover{ filter: saturate(.85); }

/* ---------- Estrellas de testimonios ---------- */
.testimonial-stars i, .testimonio-estrellas i{ color: var(--eg-oro-claro); }

/* ---------- Contacto: bloque de Atencion al cliente ----------
   El boton de WhatsApp es un .icon.btn (circulo fijo): con texto adentro se
   desborda y queda descolorido. Se pasa a pildora con los colores de la marca. */
#divAtencionCliente .btn-whatsapp-contacto,
.btn-whatsapp-contacto{
	width: auto !important;
	height: auto !important;
	border-radius: 999px !important;
	padding: .7rem 1.5rem !important;
	background-color: var(--eg-tinta) !important;
	border-color: var(--eg-tinta) !important;
	color: var(--eg-crema) !important;
	font-family: "Jost", sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .82rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.btn-whatsapp-contacto:hover{
	background-color: var(--eg-oro) !important;
	border-color: var(--eg-oro) !important;
	color: #FFF !important;
}
.btn-whatsapp-contacto i, .btn-whatsapp-contacto svg{ color: inherit !important; }
/* Los badges Disponible / No disponible los muestra el JS de seccion.php segun
   el horario del local: se los deja legibles, no se los oculta. */
#divAtencionCliente .badge, .div-atencion-cliente .badge{
	border-radius: 999px;
	font-weight: 400;
	letter-spacing: .05em;
}

/* ---------- Guias (blog) ----------
   blog.php imprime un <h1> con ucfirst(BLOG_URL_CUSTOM): el slug crudo, sin
   tilde, que ademas repite el titulo de la seccion. Se oculta. */
#divBloqueGuias .container > h1.display-6,
.blog-listado > .container > h1.display-6,
section.wrapper .container > h1.display-6:first-child{ display: none; }

/* ---------- Logo del encabezado ----------
   El lockup es horizontal (monograma + palabra), asi que a la altura que le da
   el tema por defecto la palabra queda ilegible. MENU_LOGO_TAMANO solo afecta
   al panel, no a la cabecera publica: el alto del front se fija aca. */
.navbar-brand img{ height: 75px !important; width: auto !important; max-width: none; }
@media (max-width: 991.98px){
	.navbar-brand img{ height: 52px !important; }
}


/* ============================================================
   CONTRASTE — correcciones medidas con ratio WCAG sobre el fondo real.
   Minimos: 4.5 texto normal, 3.0 texto grande.
   ============================================================ */

/* ---------- Newsletter ----------
   La tarjeta va BLANCA. El markup del bloque trae .text-white quemado (el tema
   lo piensa sobre una foto oscura), asi que hay que darlo vuelta entero: texto,
   campo, etiqueta flotante y boton. */
#divBloqueNewsletter .card.image-wrapper{
	background-color: var(--eg-papel) !important;
	border: 1px solid var(--eg-borde);
}
#divBloqueNewsletter .card.image-wrapper .text-white,
#divBloqueNewsletter .card.image-wrapper h2{ color: var(--eg-tinta) !important; }
#divBloqueNewsletter .card.image-wrapper p,
#divBloqueNewsletter .card.image-wrapper .lead{ color: var(--eg-tinta-soft) !important; }

/* El .newsletter-wrapper es el recuadro que envuelve al formulario: va
   transparente para no meter una caja dentro de otra. */
#divBloqueNewsletter .newsletter-wrapper{ background: transparent !important; border: 0 !important; }

/* El campo se distingue por su relleno, no solo por el borde. */
#divBloqueNewsletter .form-control,
#divBloqueNewsletter input[type="email"]{
	background-color: #ffffff !important;
	border: 1px solid rgba(28,26,23,.22) !important;
	color: var(--eg-tinta) !important;
	box-shadow: none !important;
}
#divBloqueNewsletter .form-control:focus{
	border-color: var(--eg-oro) !important;
	box-shadow: 0 0 0 .12rem rgba(133,104,25,.16) !important;
}
#divBloqueNewsletter label,
#divBloqueNewsletter .form-floating label{ color: var(--eg-tenue) !important; }
#divBloqueNewsletter .btn-primary{
	background-color: var(--eg-tinta) !important;
	border-color: var(--eg-tinta) !important;
	color: var(--eg-crema) !important;
}
#divBloqueNewsletter .btn-primary:hover{
	background-color: var(--eg-oro) !important;
	border-color: var(--eg-oro) !important;
	color: #FFF !important;
}

/* ---------- Nube de acordes ----------
   Los colores salen de la rueda olfativa (dato del modulo, no se tocan) pero el
   tema decide el color del texto por luminancia y con umbral flojo: habia
   chips en 2.0. Se lava el color a un tinte pastel con una capa crema encima
   del background inline y el texto pasa a tinta: se conserva el codigo de
   color y todos los chips quedan arriba de 10:1.
   Va con !important porque el color llega en un style inline (background). */
#divBloqueAcordes .bloque-acorde,
#divBloqueAcordes .bloque-acorde-claro{
	background-image: linear-gradient(rgba(251,246,239,.82), rgba(251,246,239,.82)) !important;
	color: var(--eg-tinta) !important;
	border: 1px solid rgba(28,26,23,.10);
	filter: none;
}
#divBloqueAcordes .bloque-acorde:hover,
#divBloqueAcordes .bloque-acorde-claro:hover{
	background-image: linear-gradient(rgba(251,246,239,.62), rgba(251,246,239,.62)) !important;
	border-color: rgba(28,26,23,.22);
}
#divBloqueAcordes .bloque-acorde-nombre{ color: var(--eg-tinta) !important; }
#divBloqueAcordes .bloque-acorde-cant{
	background: rgba(28,26,23,.09) !important;
	color: var(--eg-tinta-soft) !important;
}

/* ---------- Slide del hero ----------
   El slide lleva .bg-color-secundario (tinta) debajo de la imagen: si la pieza
   tarda o falla, el titular tinta queda sobre tinta. El respaldo va crema. */
#swiperPortadasHorizontal .swiper-slide.bg-color-secundario,
#swiperPortadasVertical   .swiper-slide.bg-color-secundario{
	background-color: var(--eg-crema) !important;
}

#divBloqueNewsletter .newsletter-wrapper{ background: transparent !important; border: 0 !important; }
#divBloqueNewsletter .form-control{ box-shadow: none !important; }

/* ---------- Megamenu ----------
   Venia con el tema oscuro nativo (men_mega_tema = 2): un panel negro colgando
   de una cabecera crema, y encima los .dropdown-item de este custom.css lo
   pintaban de tinta sobre tinta (ratio 1.04, ilegible). Se pasa a la variante
   clara desde el modulo (men_mega_tema = 1) y se afinan sus tokens --mm-* a la
   paleta del tenant, que es lo que el panel expone para esto. */
.megamenu-panel{
	--mm-fondo: var(--eg-crema-alt);
	--mm-fondo-alt: rgba(28,26,23,.045);
	--mm-texto: var(--eg-tinta);
	--mm-texto-suave: rgba(28,26,23,.62);
	--mm-borde: var(--eg-borde);
	--mm-primario: var(--eg-oro);
}
.megamenu-panel .dropdown-item,
.megamenu-panel .megamenu-item-titulo,
.megamenu-panel .megamenu-col-titulo{ color: var(--eg-tinta) !important; }
.megamenu-panel .megamenu-item-texto small,
.megamenu-panel .megamenu-item-bajada{ color: rgba(28,26,23,.62) !important; }
/* El fondo del hover lo pinta el item entero (mas abajo). Aca va SOLO el
   color: si el titulo interno tambien recibe fondo, se suma al del item y
   queda un recuadro de otro tono justo detras del texto. */
.megamenu-panel .megamenu-item:hover .megamenu-item-titulo{
	color: var(--eg-oro) !important;
	background: none !important;
}
.megamenu-panel .megamenu-ver-todo{ color: var(--eg-oro) !important; }

/* ---------- Color heredado de la barra ----------
   El nav viene con navbar-dark, asi que todo lo que no tenga regla propia
   hereda blanco y sobre el crema desaparece. La herencia va a tinta. */
.navbar.navbar-bg-color-secundario,
.navbar.navbar-bg-color-secundario .navbar-collapse,
.navbar.navbar-bg-color-secundario .offcanvas-body,
.navbar.navbar-bg-color-secundario .offcanvas-header,
.navbar.navbar-bg-color-secundario .navbar-nav{
	color: var(--eg-tinta);
}

/* ---------- Contadores de los filtros ----------
   El badge trae su propio rgba(0,0,0,.05) sobre el panel blanco y el tema le
   pone un gris #6B7280: quedaba en 4.33. */
.categorias-nav .count,
.filtro-catalogo .count,
span.count{
	color: var(--eg-tinta-soft) !important;
	background: rgba(28,26,23,.06);
}

/* ---------- Acordes en la ficha ----------
   Mismo caso que la nube de la home, pero con las clases de ficha-premium:
   texto blanco sobre el color crudo del acorde (habia uno en 2.03). Se lava el
   color y el texto pasa a tinta. */
.fp-perfumeria-acorde,
.fp-perfumeria-acorde-claro{
	background-image: linear-gradient(rgba(251,246,239,.82), rgba(251,246,239,.82)) !important;
	color: var(--eg-tinta) !important;
	border: 1px solid rgba(28,26,23,.10);
}
.fp-perfumeria-acorde:hover{
	background-image: linear-gradient(rgba(251,246,239,.62), rgba(251,246,239,.62)) !important;
	border-color: rgba(28,26,23,.22);
}
.fp-perfumeria-acorde-nombre{ color: var(--eg-tinta) !important; }
.fp-perfumeria-acorde-cant{ background: rgba(28,26,23,.09) !important; color: var(--eg-tinta-soft) !important; }

/* ---------- Etiquetas de formulario ----------
   El tema usa #959CA9 para las floating labels: 2.42 sobre crema, 2.76 sobre
   blanco. Va el gris del tenant, que llega a 4.6 sobre crema y 5.3 sobre blanco. */
.form-floating > label,
.form-floating > .form-label,
label.form-label{
	color: var(--eg-tenue) !important;
}
/* Ojo: en .form-floating la etiqueta ES el placeholder. Si ademas se le da
   color al ::placeholder del input se ven los dos textos encimados.
   Nada de :not(.form-floating .form-control): esa forma toma la especificidad
   de su argumento mas especifico (dos clases) y termina ganandole a la regla
   que lo apaga. Va de menor a mayor especificidad, que es lo que corresponde. */
.form-control::placeholder,
.form-select::placeholder{
	color: var(--eg-tenue) !important;
}
.form-floating > .form-control::placeholder,
.form-floating > .form-select::placeholder{
	color: transparent !important;
}

/* ---------- Fecha de las notas del blog ----------
   El tema la pinta blanca porque la piensa sobre una foto; sobre el crema
   quedaba en 1.08, o sea invisible. */
.post-meta .post-date,
.post-meta .post-date span,
.post-meta li,
.post-meta li span,
.post-meta a{
	color: var(--eg-tenue) !important;
}

/* ---------- Pasos del checkout todavia no abiertos ----------
   El acordeon cerrado venia en #ADADAD (2.24): se lee como roto, no como
   pendiente. Se deja atenuado pero legible. */
.accordion-button.collapsed,
.accordion-button.collapsed .accordion-titulo{
	color: var(--eg-tenue) !important;
}
.accordion-button:not(.collapsed){ color: var(--eg-tinta) !important; }

/* El contador de la categoria seleccionada va sobre el oro (lo pinta el tema
   con --color-primario), asi que ahi el texto tiene que ser claro, no tinta. */
.categorias-nav .active .count,
.categorias-nav .link-body.active .count,
.filtro-catalogo .active .count{
	background: var(--eg-oro) !important;
	color: var(--eg-crema) !important;
}

/* ---------- Menu del celular (drill-down) ----------
   style.css pinta #mobileMenu .mobile-menu-panel con var(--color-secundario),
   que en este tenant es tinta: sobre ese fondo los enlaces, que este custom.css
   pone en tinta, quedaban en ratio 1. El panel va crema como el resto de la
   cabecera. Se repite el id para ganarle a la regla del tema. */
#mobileMenu .mobile-menu-panel{
	background: var(--eg-crema);
}
#mobileMenu .mobile-menu-panel .nav-link,
#mobileMenu .mobile-menu-panel .dropdown-item,
#mobileMenu .mobile-menu-panel a{
	color: var(--eg-tinta) !important;
}
#mobileMenu .mobile-menu-panel .nav-link:hover,
#mobileMenu .mobile-menu-panel .nav-link:focus,
#mobileMenu .mobile-menu-panel a:hover{
	color: var(--eg-oro) !important;
	background-color: rgba(28,26,23,.045);
}
#mobileMenu .mobile-menu-panel .mobile-menu-volver,
#mobileMenu .mobile-menu-panel .mobile-menu-titulo{
	color: var(--eg-tinta-soft) !important;
	border-bottom: 1px solid var(--eg-borde);
}
#mobileMenu .mobile-menu-panel::-webkit-scrollbar-thumb{ background: rgba(28,26,23,.22); }
#mobileMenu .mobile-menu-panel::-webkit-scrollbar-track{ background: var(--eg-crema-alt); }
#mobileMenu .btn-close{ color: var(--eg-tinta) !important; }

/* ---------- Boton de cerrar ----------
   El .btn-close del tema no es el de Bootstrap: es un icono Unicons dentro de
   un circulo que ::before pinta con rgba(0,0,0,.4). Sobre crema queda un disco
   gris pesado y la X en tinta apenas llega a 4.4. Circulo tenue y X en tinta. */
#mobileMenu .btn-close::before,
#carritoMenu .btn-close::before,
.offcanvas .btn-close::before,
.modal .btn-close::before{
	background: rgba(28,26,23,.08) !important;
}
#mobileMenu .btn-close,
#carritoMenu .btn-close,
.offcanvas .btn-close,
.modal .btn-close{ color: var(--eg-tinta) !important; opacity: 1; }
#mobileMenu .btn-close:hover::before,
#carritoMenu .btn-close:hover::before,
.offcanvas .btn-close:hover::before{ background: rgba(28,26,23,.16) !important; }

/* ============================================================
   AJUSTES PEDIDOS POR RODRI (23/09/2026)
   ============================================================ */

/* ---------- Megamenu: hover de encabezados y opciones ----------
   Se sigue el patron de emantoni. El fondo del hover se pintaba a todo el
   ancho de la columna y, en el encabezado, el tema deja 18 px de padding SOLO
   abajo (padding: 0 0 .9rem): el recuadro se estiraba y el texto quedaba
   pegado arriba. Ese aire pasa a margen (que no se pinta) y el padding
   vertical queda parejo; el horizontal se compensa con margin negativo para
   que el texto siga alineado con la columna. */
.megamenu-panel .megamenu-col-titulo{
	padding-left: .7rem;
	padding-right: .7rem;
	padding-top: .35rem;
	padding-bottom: .35rem;
	margin-left: -.7rem;
	margin-bottom: .25rem;
	border-radius: 6px;
}
.megamenu-panel .megamenu-item{
	padding-left: .7rem;
	padding-right: .7rem;
	margin-left: -.7rem;
	border-radius: 6px;
}
.megamenu-panel .dropdown-item:hover,
.megamenu-panel .megamenu-item:hover,
.megamenu-panel .megamenu-item:focus,
.megamenu-panel a.megamenu-col-titulo[href]:hover,
.megamenu-panel a.megamenu-col-titulo[href]:focus{
	background-color: rgba(28,26,23,.05) !important;
	color: var(--eg-oro) !important;
}
/* El encabezado que NO es enlace no se pinta al pasar por encima. */
.megamenu-panel .megamenu-col-titulo:not([href]):hover{
	background-color: transparent !important;
	color: var(--eg-tinta) !important;
}

/* ---------- Acordes: sin sombras ----------
   El tema les pone box-shadow y text-shadow porque los piensa en blanco sobre
   un color saturado. Con el chip lavado y el texto en tinta, las dos ensucian. */
#divBloqueAcordes .bloque-acorde,
#divBloqueAcordes .bloque-acorde-nombre,
#divBloqueAcordes .bloque-acorde-cant,
.fp-perfumeria-acorde,
.fp-perfumeria-acorde-nombre,
.fp-perfumeria-acorde-cant{
	box-shadow: none !important;
	text-shadow: none !important;
}
#divBloqueAcordes .bloque-acorde,
.fp-perfumeria-acorde{ border-radius: 6px; }
#divBloqueAcordes .bloque-acorde-cant,
.fp-perfumeria-acorde-cant{ border-radius: 4px; }

/* ---------- Boton "Ver todas" ----------
   Le llega un width fijo y, con box-sizing: border-box, el padding se come
   hacia adentro: el texto terminaba tocando los bordes. */
.btn-ver-mas{
	width: auto !important;
	min-width: 0;
	padding-left: 1.6rem !important;
	padding-right: 1.6rem !important;
}

/* ---------- Logo del pie ---------- */
.footer-logo{ width: 175px; height: auto; }

/* ---------- Pie: mapa a la izquierda de los datos ----------
   Igual que en dumar. La columna del punto de venta pasa a dos columnas con el
   mapa primero (order: -1). */
@media (min-width: 992px){
	/* La fila del pie pasa a grid con columnas explicitas: el .col-auto del
	   punto de venta crece con el mapa adentro y, en flex, empujaba la columna
	   de las casas a una linea nueva. */
	footer .footer-desktop{
		display: grid !important;
		grid-template-columns: 175px minmax(0, 1fr) minmax(250px, 285px);
		column-gap: 44px;
		align-items: start;
	}
	footer .footer-desktop > *{ width: auto; max-width: none; flex: none; }
	/* El punto de venta: mapa a la izquierda, datos a la derecha. */
	footer .footer-desktop > .col-auto{
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		grid-column-gap: 24px;
		align-items: start;
	}
	footer .footer-desktop > .col-auto > .puntos-venta-footer{ grid-column: 2; }
	footer .puntos-venta-footer-mapa{
		order: -1;
		grid-column: 1;
		grid-row: 1;
		margin: 0 !important;
		width: 100% !important;
		height: 185px !important;
	}
	/* Medios, separador y copyright ocupan el ancho completo, cada uno en su fila. */
	footer .footer-desktop > .col-12,
	footer .footer-desktop > .pie-pagina,
	footer .footer-desktop > .d-flex{ grid-column: 1 / -1; }
}
footer .puntos-venta-footer-mapa,
footer .puntos-venta-footer-mapa .gmap_canvas{
	width: 100%;
	max-width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 10px;
}
footer .puntos-venta-footer-mapa iframe{
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
	filter: grayscale(.3) contrast(.95);
}

/* ---------- Pie: los iconos de cada linea de contacto ----------
   El tema los maqueta con .icon-list, que los hace position:absolute y los deja
   en 0x0 detras del texto: no se veia ninguno. Se vuelven parte del flujo y
   cada linea pasa a ser una fila con su icono adelante. */
footer ul.puntos-venta-footer{ list-style: none; padding: 0; margin: 0; }
footer ul.puntos-venta-footer li{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 9px 0 !important;
	padding-left: 0 !important;
	line-height: 1.5;
}
footer ul.puntos-venta-footer li i{
	position: static !important;
	color: var(--eg-oro-claro) !important;
	font-size: 17px !important;
	line-height: 1.45;
	flex: 0 0 auto;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	background: none !important;
}
footer ul.puntos-venta-footer li > a{ display: flex; align-items: flex-start; gap: 10px; }
footer ul.puntos-venta-footer li > span:only-child{ padding-left: 27px; }
footer ul.puntos-venta-footer .footer-titulo{ margin-bottom: 14px !important; }

/* ---------- Pie: medios de pago y de envio ----------
   Van como una columna mas de la fila del pie, con pago arriba y envio abajo,
   que es como los apila footer.php. La columna se hace un poco mas ancha para
   que los logos de pago entren en dos filas parejas. */
@media (min-width: 992px){
	footer .footer-desktop > [class*="col-"]:has(img[src*="metodos_pago"]){
		grid-column: 3;
		grid-row: 1;
	}
}
footer .widget:has(img[src*="metodos_pago"]) > h4:nth-of-type(2){ margin-top: 1.25rem; }

/* ---------- Categorias: el velo tiene que cubrir la foto entera ----------
   El h4 se posiciona contra la columna de Bootstrap, que es 40 px mas ancha
   (el gutter) y deja 5 px de margen abajo: el degrade no llegaba al borde
   inferior de la imagen y quedaba una franja. Se lo encaja en la caja de la
   figura y se le copia el radio.
   El h4 no es hijo directo del item: viene envuelto en un <a>. */
#divBloqueCategorias .project.item h4,
#divBloqueCategorias .project.item .h4{
	left: calc(var(--bs-gutter-x, 2rem) * .5);
	right: calc(var(--bs-gutter-x, 2rem) * .5);
	bottom: 0;
	margin: 0 !important;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
/* En modo slider el slide no tiene el gutter de la columna. */
#divBloqueCategorias .swiper-slide h4,
#divBloqueCategorias .swiper-slide .h4{
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

/* ---------- Pesos tipograficos ----------
   La marca es de trazo fino: los 500/600/700 que trae el tema se sienten
   pesados sobre el crema. Se bajan los que se ven como texto corrido y se
   deja el 600 donde hace falta jerarquia (el encabezado cerrado del acordeon). */
.link-dark{ font-weight: 400; }

.accordion-wrapper .card-header button.collapsed{ font-weight: 500; }

/* Subcategorias del megamenu: el panel las trae en 600. */
.megamenu-panel .megamenu-item,
.megamenu-panel .megamenu-item-titulo,
.megamenu-panel .megamenu-ver-todo{ font-weight: 400; }

/* Enlaces y datos del pie: el markup del punto de venta envuelve cada dato en
   <strong>, que caia en 700. */
footer .footer-desktop a,
footer .footer-mobile a,
footer .link-body,
footer ul.puntos-venta-footer a,
footer ul.puntos-venta-footer strong,
footer ul.puntos-venta-footer span{ font-weight: 400; }

/* ---------- Puntos de los swipers ----------
   El tema pinta el punto inactivo con rgba(52,63,82,.25), un gris azulado que
   no es de esta paleta y sobre el crema se ve frio. Pasa a tinta con el mismo
   alfa. El activo va al color de marca. */
.swiper-container.dots-over .swiper-pagination .swiper-pagination-bullet{
	background: rgba(28, 26, 23, .25);
}
.swiper-container.dots-over .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background: var(--color-primario);
}

/* ---------- Nube de acordes: aire parejo ----------
   El bloque viene con pt-8 pb-4 en el markup, o sea la mitad de aire abajo que
   arriba, y los chips quedaban pegados al bloque siguiente. El pb-4 es un
   utilitario de Bootstrap y esos declaran !important, asi que hay que repetirlo. */
#divBloqueAcordes > .container{ padding-bottom: 2rem !important; }

/* ---------- Peso de los chips de acorde ----------
   El bloque emite sus estilos en un <style> propio dentro del HTML, que va
   DESPUES de este archivo: con la misma especificidad gana el. Por eso el
   selector lleva el id del bloque. En la ficha el nombre venia en 600: es el
   mismo elemento en otra superficie, asi que queda en 500 en las dos. */
#divBloqueAcordes .bloque-acorde,
#divBloqueAcordes .bloque-acorde-nombre,
#divBloqueAcordes .bloque-acorde-cant,
.fp-perfumeria-acorde,
.fp-perfumeria-acorde-nombre,
.fp-perfumeria-acorde-cant{
	font-weight: 500;
}

/* ---------- Ficha: bloques con fondo crema ----------
   ficha-premium.css pinta los paneles del perfil con un gris neutro
   (#F6F6F4) y las secciones de recomendados / vistos recientemente en blanco:
   ninguno es de esta paleta. Van al crema de la marca. */
.fp-perfumeria-piramide,
.fp-perfumeria-acordes,
.fp-perfumeria-grupo{
	background: var(--eg-crema) !important;
}
#divBanners.wrapper,
#divRecomendados.wrapper,
#divRecientes.wrapper{
	background-color: var(--eg-crema) !important;
}

/* ---------- Ficha: acordeon de Descripcion / Informacion adicional ----------
   Mismo arreglo que emantoni. El .card-header traia su propio borde, radio y
   sombra adentro del .accordion-item: se veia un marco dentro de otro. Y el
   .card-body tenia padding 0 a los costados, asi que el texto iba pegado al
   borde del panel. El contenedor queda transparente, cada item es un panel
   con aire entre ellos y por dentro, y el header ya no dibuja caja propia.
   Acotado a #accordionProducto: el pie mobile y el checkout usan las mismas
   clases con otro tratamiento. */
#accordionProducto.accordion-wrapper{
	background: transparent !important;
	border: 0 !important;
}
#accordionProducto .accordion-item{
	background-color: var(--eg-papel) !important;
	border: 1px solid var(--eg-borde) !important;
	border-radius: 8px !important;
	margin-bottom: .75rem;
	overflow: hidden;
}
#accordionProducto .accordion-item:last-child{ margin-bottom: 0; }
#accordionProducto .card-header{
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 1rem 1.25rem !important;
}
#accordionProducto .card-body{
	background: transparent !important;
	padding: .25rem 1.25rem 1.25rem !important;
}
#accordionProducto .card-body ul{ margin-bottom: .5rem; }