/* ----------------------------------------------------
   CONTENEDORES RESPONSIVE
---------------------------------------------------- */
@media (min-width: 768px)  { .container-700 { max-width: 700px; } }
@media (min-width: 992px)  { .container-900 { max-width: 900px; } }
@media (min-width: 1200px) { .container-1100 { max-width: 1100px; } }


/* ----------------------------------------------------
   BLOQUES GENERALES / BANNERS
---------------------------------------------------- */
.bl {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	text-decoration: none;
	color: white;
}

.bl img {
	width: 100%;
	display: block;
}

.bl .texto {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	padding: 20px 30px;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	transition: background-color 0.3s ease;
	box-sizing: border-box;
}

.bl:hover .texto {
	background-color: rgba(0, 0, 0, 0);
}

.bl .texto.av-1 { align-items: flex-start; }
.bl .texto.av-2 { align-items: center; }
.bl .texto.av-3 { align-items: flex-end; }

.bl .texto.ah-1 { justify-content: flex-start; }
.bl .texto.ah-2 { justify-content: center; text-align: center; }
.bl .texto.ah-3 { justify-content: flex-end; text-align: right; }

.bl .titulo  { font-size: 2.5em; margin-bottom: 5px; font-weight: bold; }
.bl .eslogan { font-size: 1.4em; }

.blog-mini { margin-bottom: 30px; }


/* ----------------------------------------------------
   CATEGORÍAS DESTACADAS
---------------------------------------------------- */
.cat-dest {
	height: 400px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

.cat-dest a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.2;
	transition: opacity 0.2s ease;
}

.cat-dest a:hover { opacity: 0; }

@media (max-width: 767px) {
	.cat-dest { height: 200px; }
}


/* ----------------------------------------------------
   LOGOS / ANIMACIONES
---------------------------------------------------- */
.fabs {
	animation: slidein 30s linear infinite;
	white-space: nowrap;
}

.fabs .logos {
	min-width: 100%;
	display: inline;
	text-align: center;
}

.fabs .logo {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	box-sizing: border-box;
	padding: 0 20px;
	animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

.fabs .logo img {
	max-width: 100%;
	max-height: 100px;
}

@keyframes slidein {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}

@keyframes fade-in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

@media (max-width: 767px) {
	.fabs .logo { width: calc(100% / 2); }
	.fabs { animation: slidein 15s linear infinite; }
}

@media (min-width: 768px) and (max-width: 991px) {
	.fabs .logo { width: calc(100% / 4); }
	.fabs { animation: none; }
}

@media (min-width: 992px) {
	.fabs .logo { width: calc(100% / 6); }
	.fabs { animation: none; }
}


/* ----------------------------------------------------
   FOOTER
---------------------------------------------------- */
.footer {
	border-top: 1px solid #BBB;
}

.footer a { color: #222 !important; }
.footer ul { list-style: none; }

.footer2 {
	font-size: 14px;
	background-color: #EEE;
}

.footer2, .footer2 a { color: #333; }

@media (min-width: 768px) {
	.footer .col-border { border-left: 2px solid #EEE; }
}


/* ----------------------------------------------------
   FORMULARIOS
---------------------------------------------------- */
.form {
	padding: 15px;
	background-color: #EEE;
}

.form a      { text-decoration: underline; }
.form button { color: #FFF; }


/* ----------------------------------------------------
   UTILIDADES GENERALES
---------------------------------------------------- */
.fs-7 { font-size: 0.9rem !important; }
.hover-bg-light:hover { background-color: #f8f9fa; }

.text-shadow { text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5); }

.ratio-3x2 {
	position: relative;
	width: 100%;
	padding-bottom: calc(2 / 3 * 100%);
}

.ratio-3x2 > * {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}


/* ----------------------------------------------------
   BÚSQUEDAS
---------------------------------------------------- */
#resultadosBusqueda { max-height: 440px; overflow-y: auto; }
#busquedaMovil { animation: slideDown .2s ease-out; }

@keyframes slideDown {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px)  { #resultadosBusqueda { top: 90px; } }
@media (max-height: 600px) { #resultadosBusquedaMovil { max-height: 80vh; } }


/* ----------------------------------------------------
   ICONOS
---------------------------------------------------- */
.icono { text-align: center; }

.icono .img {
	height: 120px;
}

.icono .img img {
	max-height: 120px;
	max-width: 100%;
}

@media (max-width: 767px) {
	.icono .img { height: 90px; }
	.icono .img img { max-height: 90px; }
}


/* ----------------------------------------------------
   LABEL RADIO
---------------------------------------------------- */
.label-radio div,
.label-radio img {
	transition: outline 0.3s ease;
	outline: 2px solid transparent;
	box-sizing: border-box;
}

.label-radio input:checked + label div,
.label-radio input:checked + label img {
	outline: 2px solid #F00;
}

.label-radio.recombinar { opacity: 0.5; }


/* ----------------------------------------------------
   NAVEGACIÓN
---------------------------------------------------- */
.nav-logo  { max-width: 220px; }
.nav-iconos { max-width: 220px; }

@media (max-width: 767px) {
	.nav-logo   { min-width: 40px; }
	.nav-iconos { min-width: 80px; }
}


/* ----------------------------------------------------
   PRODUCTOS MINI / BOOTSTRAP
---------------------------------------------------- */
.pro-ficha-mini {
	cursor: pointer;
	background-color: #F5F5F5;
	padding: 10px;
}

.pro-ficha-mini .img-container {
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	overflow: hidden;
}

.pro-ficha-mini .img-container .img {
	height: 100%;
	width: 100%;
	background-color: #FFF;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top: 0; left: 0;
	object-fit: cover;
}

.pro-ficha-mini .img-container2 .img {
	transition: opacity 0.2s ease-in-out;
}

.pro-ficha-mini .img-container2 .img2 { opacity: 0; }
.pro-ficha-mini .img-container2:hover .img2 { opacity: 1; }
.pro-ficha-mini .img-container2:hover .img1 { opacity: 0; }

.pro-ficha-mini .info {
	text-align: center;
	padding-top: 15px;
}

.pro-ficha-mini .priceu {
	color: #555;
	font-style: italic;
	font-size: 0.8em;
}


/* ----------------------------------------------------
   PRODUCTO DETALLE
---------------------------------------------------- */
.producto .image-container {
	width: 100%;
	padding-top: 75%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	cursor: zoom-in;
}

.producto .image-container img {
	max-width: 100%;
	max-height: 100%;
}

.producto .thumbnails-wrapper {
	position: relative;
	display: flex;
	overflow-x: auto;
	padding: 10px 0;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.producto .thumbnails-wrapper::-webkit-scrollbar { display: none; }

.producto .thumbnails-wrapper img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	margin-right: 10px;
	cursor: pointer;
	border: 2px solid transparent;
}

.producto .thumbnails-wrapper img:last-child { margin-right: 0; }
.producto .thumbnails-wrapper img.selected { border-color: #666; }

.producto .scroll-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.1);
	border: none;
	color: white;
	padding: 10px;
	cursor: pointer;
	z-index: 1;
	border-radius: 3px;
	vertical-align: middle;
	line-height: 1em;
}

.producto .scroll-left  { left: 0; }
.producto .scroll-right { right: 0; }
.producto .scroll-btn i { font-size: 20px; }

.producto .producto-info .preciouproducto {
	color: #555;
	font-style: italic;
}


/* ----------------------------------------------------
   OFFCANVAS
---------------------------------------------------- */
.offcanvas-header { border-bottom: 2px solid #777; }
.offcanvas-body   { padding: 0; }


/* ----------------------------------------------------
   RANGO DE PRECIO PERSONALIZADO
---------------------------------------------------- */
.rangeWrap {
	position: relative;
	width: 100%;
	height: 30px;
	user-select: none;
	margin-top: 12px;
}

.rangeWrap .track {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 6px;
	transform: translateY(-50%);
	background: #ddd;
	border-radius: 3px;
}

.rangeWrap .fill {
	position: absolute;
	top: 50%;
	height: 6px;
	transform: translateY(-50%);
	border-radius: 3px;
}

.rangeWrap .thumb {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	cursor: grab;
	z-index: 2;
}

.rangeWrap .thumb:active { cursor: grabbing; }

.rangeWrap .value {
	position: absolute;
	top: calc(-50% + 2px);
	transform: translateX(-50%);
	font-size: 13px;
	color: #555;
	pointer-events: none;
	z-index: 4;
}


/* ----------------------------------------------------
   SLIDES E IMÁGENES
---------------------------------------------------- */
.slideimg {
	width: 100%;
	height: 600px;
	background-size: cover;
	background-position: center center;
}

@media screen and (max-width: 767px) {
	.bloque-gal .galfoto1,
	.bloque-gal .galfoto3,
	.bloque-gal .galfoto4 {
		display: none;
	}

	.float { display: inline-block; }
	.slideimg { height: 450px; }
}

@media screen and (min-width: 767px) {
	.w-md-50 { width: 50% !important; }
}


/* ----------------------------------------------------
   TEXTO Y TITULARES
---------------------------------------------------- */
h1 {
	font-weight: 900;
	font-size: 3.3rem;
}

.accordion h2:after,
h2.sinborde { content: none; }


/* ----------------------------------------------------
   SECCIONES Y FONDOS
---------------------------------------------------- */
.bgimagen {
	background-size: cover;
	background-position: center center;
}

.cab > div {
	background-color: rgba(150, 150, 150, 0.50);
}


/* ----------------------------------------------------
   FLOAT / BOTONES FIJOS
---------------------------------------------------- */
.float {
	display: none;
	position: fixed;
	bottom: 60px;
	right: 10px;
	z-index: 10;
}

.float .icon {
	border-radius: 5px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF;
	font-size: 25px;
	margin-bottom: 10px;
}

.float .icon.phone    { background-color: rgba(51, 102, 137, 0.8); }
.float .icon.whatsapp { background-color: rgba(73, 195, 88, 0.8); }
.float .icon.mail     { background-color: rgba(50, 50, 50, 0.8); }


/* ----------------------------------------------------
   IDIOMAS Y SECCIONES
---------------------------------------------------- */
.idiomas { padding-bottom: 2px; }

.idiomas a {
	font-size: 0.9em;
	margin-right: 5px;
	text-decoration: underline;
}

.secini h2 { position: relative; }

.secini h2:after {
	left: 0;
	transform: none;
}


/* ----------------------------------------------------
   ESPACIADOS PERSONALIZADOS
---------------------------------------------------- */
.p-6  { padding: 4rem !important; }
.pt-6 { padding-top: 4rem !important; }
.pb-6 { padding-bottom: 4rem !important; }
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.my-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.py-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }