:root {
	--ss-first-color: #c10049;
	--ss-second-color: #1a2b6d;
	--primary-color: 165,24,92 /* RGB */;
}

/* General */
.text-primary { 
	color: var(--ss-first-color) !important; 
}
.bg-body-tertiary {
	background-color: rgba(244,244,246,1) !important;
}
.text-bg-danger {
	background-color: var(--ss-first-color) !important;
}
main .btn {
	min-width: 12rem;
}
main .btn-danger {
	background-color: var(--ss-first-color) !important;
}
.rounded-left {
	border-top-left-radius: 30px !important;
	border-bottom-left-radius: 30px !important;
}
.rounded-right {
	border-top-right-radius: 30px !important;
	border-bottom-right-radius: 30px !important;
}

/* Header */
#aviso-programado {
	padding: 0.5rem;
	background-color: var(--ss-first-color);
	color: white;
	text-align: center;
}
#aviso-programado p {
	margin-bottom: 0px;
}
header { 
	background: rgba(255, 255, 225, 1);
	background: linear-gradient(180deg, rgba(248, 249, 250, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#header-logo { 
	width: 200px; 
}
#menu-principal a {
	color: rgb(33, 37, 41);
	font-weight: 500;
	transition: all 0.2s;
}
#menu-principal a:hover {
	color: rgb(var(--primary-color));
	padding-bottom: 10px;
	padding-top: 6px;
}

/* Buscador */
#inputString {
	min-width:300px;
}
.suggestionsBox {
	border: 1px solid #eee;
	color: #333;
	z-index: 999;
	position: absolute;
	background: white;
	top: 40px;
}
.suggestionList {
	padding: 8px;
}
.suggestionList li {
	list-style: none;
	margin: 0px 0px 3px 0px;
	padding: 3px;
}
.suggestionList li a {
	cursor: pointer;
	color: #c10049;
	text-decoration: none;
}

/* Slideshow */
#slider {
	margin-bottom: 5rem;
}
#slider .carousel-indicators {
	margin-bottom: 0 !important;
	bottom: -40px !important;
}
#slider .carousel-indicators [data-bs-target] {
	background-color: rgb(var(--primary-color)) !important;
	width: 6px !important;
	height: 6px !important;
	border-top: none !important;
	border-bottom: none !important;
	border-radius: 3px !important;
	margin-right: 5px !important;
	margin-left: 5px !important;
	transition: width 1s;
}
#slider .carousel-indicators .active {
	width: 30px !important;
	border-radius: 3px !important;
}

/* Home: destacados */
	/* Categorías */
	#home-grid-cards .card-wrapper:hover .card-background {
		background-size: 115%;
	}
	#home-grid-cards .card-background {
		background-position: center;
		background-repeat: no-repeat;
		background-size: 110%;
		overflow: hidden;
		transition: background-size 0.5s;
	}
	#home-grid-cards span.card-title {
		position: absolute;
		top: 20px;
		left: 25px;
		text-shadow: 0px 0px 10px rgba(150, 150, 150, 0.5);
		transition: all ease-in-out 0.3s;
	}
	#home-grid-cards span.plus-icon {
		position: absolute;
		bottom: 10px;
		right: 10px;
		color: white;
		font-size: 1.5rem;
		transition: all ease-in-out 0.3s;
	}
	#home-grid-cards .card-wrapper:hover span.card-title {
		padding-left: 0.2rem;
	}
	#home-grid-cards .card-wrapper:hover span.plus-icon {
		font-size: 2rem;
	}
	/* Citas musicales */
	#home-grid-cards .cita_musical-wrapper {
		position: relative;
		height: 100%;
		background-color: white;
		padding: 1.5rem;
	}
	#home-grid-cards .cita_musical-wrapper .cita-texto {
		display: inline-block;
		color: #000;
		background: #fff;
		/* mix-blend-mode: multiply; */
		position: relative;
		line-height: normal;
	}
	#home-grid-cards .cita_musical-wrapper .cita-texto::before {
		content: "";
		display: block;
		width: 100%;
		height: 120%;
		background: linear-gradient(to right, #e20049 8%, #1a2b6d 96%);
		mix-blend-mode: screen;
		position: absolute;
		top: 0;
		left: 0;
	}
	#home-grid-cards .cita_musical-wrapper .cita-autor {
		position: absolute;
		bottom: 20px;
		right: 25px;
	}
	/* Home: home cards */
	#home-sections-cards .card-wrapper:hover .card-background {
		background-size: 105%;
	}
	#home-sections-cards .card-background {
		background-position: center;
		background-repeat: no-repeat;
		background-position: bottom;
		background-size: 100%;
		overflow: hidden;
		transition: background-size 0.5s;
	}
	#home-sections-cards span.card-title {
		color: white;
		font-size: 3.5rem;
		font-weight: bolder;
		justify-self: anchor-center;
		text-shadow: 0px 0px 10px rgba(150, 150, 150, 0.5);
		transition: all ease-in-out 0.3s;
	}
	#home-sections-cards .card-wrapper:hover span.card-title {
		padding-bottom: 10px;
	}
	#home-sections-cards span.plus-icon {
		position: absolute;
		bottom: 10px;
		right: 10px;
		color: white;
		font-size: 1.5rem;
		transition: all ease-in-out 0.3s;
	}
	#home-sections-cards .card-wrapper:hover span.plus-icon {
		font-size: 2rem;
	}
	/* Home: secciones */
	#wrapper-secciones img {
		height: 70px;
	}



/* Especiales */
#wrapper-especiales .especiales-item img {
	transition: all 0.2s ease-in;
}
#wrapper-especiales .especiales-item:hover img {
	transform: scale(1.05);
	box-shadow: 0 0.125rem 0.25rem rgba(33,37,41,.075)!important;
}

/* Productos */
#filtro-marcas .item-filtro {
	cursor: pointer;
}
#filtro-marcas .marca-on {
	border: 1px solid var(--ss-first-color);
	border-radius: 12px;
}
.productos .card {
	border: none;
	text-align: center;
	color: #212529;
	/* background-color: transparent !important; */
}
.productos .card img {
	transition: transform 0.5s ease-in-out;
}
.productos .card:hover img {
	transform: scale(1.05);
}
.productos .card-img-wrapper {
	height: 200px;
	overflow: hidden;
}
.productos .card-img {
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: all 0.3s ease-in;
}
.productos .card-footer {
	background-color: transparent;
	border: 0px
}
.productos .precio-oferta, #seccion_producto .precio-oferta {
	font-weight: bold;
	color: #e20049;
}
.productos-item:hover .card-img {
	transform: scale(1.03);
}
.stiker-item {
	position: absolute;
	/*width: 40% !important;*/
	left: 0px;
	/* animation: rotar 1.2s infinite; */
	z-index: 990;
}

/* Producto */
.premios img { height: 100px; }
/* Franjas superiores del card de la ficha de producto (site-25/producto.asp): oferta / outlet /
descatalogado / audeze. En el rediseño (mode=new) SOLO se carga este CSS; las reglas
equivalentes viven en style.css (modo clásico) pero usan --heavy-red, que aquí no existe.
Usamos el color corporativo del rediseño (--ss-first-color). */
.franja-oferta,
.franja-outlet,
.franja-descuento {
	padding: 0.5rem;
	padding-left: 1.5rem !important;
	background: linear-gradient(to right, #e20049, #1a2b6d);
	color: #fff;
	font-weight: bold;
	font-style: italic;
	text-transform: uppercase;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;

	span {
		font-size: 2.2rem;
	}
}
.franja-descatalogado {
	padding: 0.5rem;
	background-color: rgb(213, 213, 213);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.franja-audeze_gold_dealer {
	text-align: center;
	padding: 0.5rem;
	background-color: #B9A256;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.documentos-item {
	background-color: rgba(248,249,250,1);
	transition: all 0.4s;
}
.documentos-item:hover { 
	margin-left: 1rem;
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; 
}
.videos-item .card-img-overlay { 
	background-color: rgba(0,0,0,.35);
	transition: all 0.2s;
}
.videos-item:hover .card-img-overlay { 
	background-color: rgba(0,0,0,.15);
}

/* Compra: progressbar */
.progress {
	height: 6px;
	background-color: #dee2e6;
}
.compra-progressbar-item {
	font-weight: 700;
	width: 2rem;
	height: 2rem;
}
.compra-progressbar-item:nth-of-type(1) {
	position: absolute;
	top: 3px;
	left: 0% !important;
}
.compra-progressbar-item:nth-of-type(2) {
	position: absolute;
	top: 3px;
	left: 25% !important;
}
.compra-progressbar-item:nth-of-type(3) {
	position: absolute;
	top: 3px;
	left: 50% !important;
}
.compra-progressbar-item:nth-of-type(4) {
	position: absolute;
	top: 3px;
	left: 75% !important;
}
.compra-progressbar-item:nth-of-type(5) {
	position: absolute;
	top: 3px;
	left: 100% !important;
}
.progress-bar {
	background-color: var(--ss-second-color);
}
.compra-step-on {
	align-items: center;
    display: flex;
    justify-content: center;
	background-color: var(--ss-second-color);
	color: white;
}
.compra-step-off {
	align-items: center;
    display: flex;
    justify-content: center;
	background-color: #dee2e6;
	color: white;
}

/* Compra: carrito */
#seccion_carrito .product-item .btn {
	min-width: inherit !important;
}

/* OWL */
.owl-carousel {
	display: flex !important;
	justify-content: center !important;
}
.owl-stage-outer {
	width: 100% !important;
}
.owl-carousel .owl-item img {
	width: auto !important;
}
.owl-nav {
	z-index: -1;
	display: none;
}
.owl-carousel .owl-nav button.owl-next span, .owl-carousel .owl-nav button.owl-prev span {
	font-size: 4rem;
	color: rgb(var(--primary-color));
}
.owl-carousel .owl-nav button.owl-prev {
	margin-left: -45px;
}
.owl-carousel .owl-nav button.owl-next {
	margin-right: -45px;
}
.owl-dots {
	text-align: center;
	margin-top: 20px;
}
.owl-dots .owl-dot.active span {
	background: rgb(var(--primary-color));
	border-radius: 30px;
	display: block;
	margin: 5px 7px;
	width: 10px;
	height: 10px;
}
.owl-dots .owl-dot span {
	width: 10px;
	height: 10px;
	margin: 5px 7px;
	background: #d6d6d6;
	display: block;
	-webkit-backface-visibility: visible;
	transition: opacity 0.2s ease;
	border-radius: 30px;
}

/* Opiniones */
ul.rating-stars li {
	color: #ccc;
}
ul.rating-stars li.star-on {
	color: orange;
}

/* Footer */
.sticky-footer {
	position: fixed;
	z-index: 998;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	bottom: 10px;
}
.sticky-footer ul {
	border: 1px solid #e5e5e5;
	border-radius: 30px;
	background: #fff;
	width: auto;
	margin-bottom: 0;
	padding: 5px 10px;
}
.sticky-footer ul a {
	color: #333;
}
.sticky-footer ul a:hover {
	color: var(--ss-first-color);
}

footer a {
	color: white;
	text-decoration: none;
}
#wrapper-ventajas .ventajas-item {
	position: relative;
	color: var(--ss-second-color);
	padding: 1rem;
	text-align: center;
}
#wrapper-ventajas img {
	width: 50px;
	margin-right: 0.5rem;
}
#wrapper-footer {
	background-image: url("/comun/img/footer-background.jpg?v=2");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #333;
}
#footer-logo { 
	width: 200px;
	filter: brightness(0) invert(1);
}
#support-logo { 
	width: 140px;
	filter: brightness(0) invert(1);
}

/* Paginación */
.page-item {
	padding: 0 5px;
}
.page-item .page-link {
	position: relative;
	width: 40px;
	height: 40px;
	border-top-right-radius: 50% !important;
	border-bottom-right-radius: 50% !important;
	border-top-left-radius: 50% !important;
	border-bottom-left-radius: 50% !important;
	border-radius: 50%;
	color: rgb(var(--primary-color));
}
.page-item .page-link i, .page-item .page-link span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.active>.page-link, .page-link.active {
	background-color: rgb(var(--primary-color));
	border-color: rgb(var(--primary-color));
	color: white;
}

/* Newsletter */
#wrapper-newsletter {
	color: #fff;
	/* background: linear-gradient(to right, #e20049 8%,#1a2b6d 96%); */
	padding: 4rem 0;
}
#wrapper-newsletter h2 {
	font-weight: bolder;
	font-size: 4rem;
	margin-top: 0px;
}
#wrapper-newsletter .checkbox {
	margin-top: 0.5rem;
}
#wrapper-newsletter a {
	color: #fff;
	text-decoration: underline;
}

/* Degradado corporativo */
.separador {
	height: 2px;
	width: 80%;
	margin: auto;
}
.degradado-bg {
	background: linear-gradient(to right, #e20049, #1a2b6d);
}
.degradado-anim {
	background: linear-gradient(270deg, #e20049, #1a2b6d);
	background-size: 400% 400%;
	-webkit-animation: AnimationName 6s ease infinite;
	-moz-animation: AnimationName 6s ease infinite;
	animation: AnimationName 6s ease infinite;
}
.degradado-txt {
	display: inline-block;
	color: #000;
	background: #fff;
	mix-blend-mode: multiply;
	position: relative;
}
.degradado-txt:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, #e20049, #1a2b6d);
	mix-blend-mode: screen;
	position: absolute;
	top: 0;
	left: 0;
}
@-webkit-keyframes AnimationName {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@-moz-keyframes AnimationName {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@keyframes AnimationName {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* ScrollToTop */
#ScrollToTop {
	position: fixed;
	bottom: 85px;
	right: 22px;
	z-index: 999;
	width: 46px;
	height: 46px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ccc;
	border-radius: 36px;
	box-shadow: rgb(0 0 0 / 20%) 2px 2px 5px 0px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#ScrollToTop span {
	color: #333;
	font-size: 20px;
	transition: 1s;
}

/* X-Small devices (portrait phones, less than 576px) */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { }

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { }