/*
Theme Name: Imprime tu actitud
Theme URI: 
Author: Ramón
Author URI: ramdrn@gmail.com
Description:
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brother
Tags: brother
*/

:root{        
	--primary-font: "Figtree", sans-serif;
    --blue-color:#002AA4;  
    --blue-color2:#1547ea;    
    --gray-color:#f2f2f7;
    --gray-color2: #2e364c;
    --brown-color: #cc7d00;
}

body{
    font-family:var(--primary-font);        
    font-size: 16px;
    line-height: 133%; 
    letter-spacing: 0.32px;   
    position: relative;    
    background:var(--gray-color);
    position: relative;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1{
	font-size:30px;
	font-weight: 700;
	line-height: 133%;
}

h2{
	font-size: 25px;
	font-weight: 600;
	line-height: 100%;
}

h3{
	font-size: 16px;
	font-weight: 600;
	line-height: 120%;
}

h4{
	font-size: 30px;
	font-weight: 700;
	line-height: 100%;
}

#slider_tiendas .card{
	width:70px;
	height:100px;
	border-radius: 8px;
	border: 1px solid #EBEBEB;
	margin:8px;
}

#slider_tiendas .card a{
	max-width: 60%;
}

#slider_tiendas .slick-slide div {
    margin-left: 8px!important;
}

.card img{	
	object-fit: contain;
	max-width: 100%;
	max-height: 300px;
}

.img-170 .card img{
	max-height: 170px;
}

#slider_productos{
	display: flex;
	align-items: center;
}

#slider_productos .card{
	margin:15px;
	
}

#slider_productos .card img{
	max-width: 100%;
	margin:-50px auto;
	z-index: -1;
}

#slider_productos .slick-btn{
	flex-shrink: 0;
	width: 40px;
	height: 40px;		
	border-radius: 50%;
	border:1px #ced1d9 solid;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	cursor: pointer;
	position: absolute;
	background:white;
	color:#2e364c;
}

#slider_productos .slick-btn.slick-1{
	left:15px;	;
}

#slider_productos .slick-btn.slick-2{
	right:15px;
}

.caracteristicas .card img{
	width:100%;
	object-fit: cover;
	max-height:245px;
	border-radius: 0px 0px 8px 8px;
}

.caracteristicas .card.secundaria{
	height: 280px;
	overflow: hidden;
}

.caracteristicas .card.secundaria figure{
	max-width: 100%;
	max-height: 200px;
}

.caracteristicas .card.secundaria figure img{
	max-width: 100%;
	max-height: 200px;
	object-fit: cover;	
}


.legales .item .card-header{
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.legales .item .card-header span{
	color:var(--blue-color2);
}

.legales .item .card-body *{
	font-size:11px;
}

.legales .item .card-header.collapsed .less, .legales .item .card-header:not(.collapsed) .more, .collapsible_action.collapsed .less, .collapsible_action:not(.collapsed) .more{
	display: none;
}

.legales .item .card-body, .collapsible{	
	max-height:0px;
	opacity: 0;
	transition: all .5s ease-out;
	overflow: hidden;
}

.legales .item .card-body.show, .collapsible.show{
	opacity: 1;
	max-height:3000px;
}

.collapsible.show{
	display: flex !important;
}

.collapsible figure, .collapsible figure img{
	max-width: 88px;
	height:auto;
}

.breadgrumbs{
	list-style: none;
	padding:0px;
}

.breadgrumbs li{
	display: inline-block;
	padding-right:15px;
	position: relative;	
}

.breadgrumbs li:after{
	content:'/';
	position: absolute;
	right:4px;
	top:0px;
}

.breadgrumbs li:last-child:after{
	content:'';
}

.breadgrumbs li, .breadgrumbs li a{
	color:var(--gray-color2);	
}

a.btn{
	background: white;
	border-radius: 8px;
	border:1px var(--gray-color2) solid;
	color:var(--gray-color2);
	padding:5px 10px;
	display: inline-block;	
	font-size:15px;
}

a.btn.btn-blue{
	border-color:var(--blue-color);
	color:var(--blue-color);
}

a.btn.bg-blue{
	border-color:var(--blue-color);
}

div.legales{
	font-size: 12px;
	color:var(--gray-color2);	
}

.slider-for img{
	max-width: 100%;
	max-height: 450px;
	object-fit: contain;
}

.slider-nav{
	height:550px;
}

.slider-nav img.slick-slide{
	max-width:140px;
	max-height: 120px;
	object-fit: contain;
	cursor: pointer;
	margin-bottom:15px;
	border:1px #CED1D9 solid;
}

.slider-nav img.slick-current{
	border:1px var(--blue-color2) solid;
}

.slider-nav .slick-list{
	height:100% !important;
}

.single-productos{
	background: linear-gradient(to bottom, var(--gray-color), #ffffff);
}

#go_home{
	display: none;
}


.switch{
	display: flex;
	align-items: center;
	/* justify-content: center; */
	padding:15px 0px;	
	font-size: 16px;
	color:#10121A;
	height: 65px;
}

.switch a{
	font-size: 16px !important;
	color:#10121A !important;
	text-decoration: none;
}

.switch .radio{
	width: 32px;
  height: 32px;
  border: 2px #DCDFE5 solid;
  border-radius: 8px;
  position: relative;
	flex-shrink: 0;
}

.switch .radio:before{
	content: '';	
  width: 24px;
  height: 24px;
  border-radius: 4px;
  position: absolute;
  left: 2px;
  top: 2px;
	background: #EDEFF2;
}

.switch .radio.negro:before{
	background: #10121A;
}

.variante-group.negro .radio.negro, .variante-group.blanco .radio.blanco{
	border-color:var(--blue-color);
}

.variante-group.negro .switch > div:first-of-type{
	text-decoration: underline;
	text-decoration-thickness: 1px; /* Controla el grosor del subrayado */
  text-underline-offset: 5px; /* Controla la distancia entre el texto y el subrayado */
}

.variante-group.blanco .switch > div:last-of-type{
	text-decoration: underline;
	text-decoration-thickness: 1px; /* Controla el grosor del subrayado */
  text-underline-offset: 5px; /* Controla la distancia entre el texto y el subrayado */
}

.variante-group.negro .variante:last-child, .variante-group.blanco .variante:first-child{
	display: none;
}

.slick-slider{
	overflow: hidden !important;
}

ul.slick-dots {
    padding: 0px!important;
}

.slick-dots li button:before{
	font-size: 40px;
}

.hero-cat, .link-categoria{
	position: relative;
}

.hero-cat h2{
	position: absolute;
	bottom: 50px;
	left: 60px;
	width:50%;
	color:var(--blue-color);
	font-size: 40px;
	line-height: 53px;
	font-weight: 600;
}

.titulo-cat{
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
}

.link-categoria .info{
	position: absolute;
	bottom:0px;
	left:15px;
	width:60%;
}

.link-categoria .info h2{
	font-size: 18px;
	line-height: 20px;
	font-weight: 600;
	color:white;
	margin-bottom: 0px;
}

.link-categoria .info p{
	margin-top:0px;
	display: flex;
	align-items: center;
	color:white;
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
}

div#modalTiendas img {
  width: 120px;
  height: auto !important;
  max-width: 100% !important;
}

span.note{
  font-size: 10px;
  margin-top: -2px;
  margin-left:2px;
  position: absolute;    
}

@keyframes slideUp {
  from {
    transform: translateY(100%);  /* El modal comienza fuera de la pantalla, hacia abajo */    
  }
  to {
    transform: translateY(0);  /* El modal se mueve hasta su posición original */    
  }
}

@media all and (min-width: 1024px){
	#slider_tiendas{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		max-width: 1020px;
		margin:15px auto;
	}

	#slider_tiendas .card{
		width:120px;
		height:120px;
		margin:17px;
	}

	.imagenes_categorias{
		display: flex;
	}	

	.contenedor-productos{
		background: none !important;
	}
}

@media all and (max-width: 1200px){

	.card a.btn{
		font-size:11px;
	}
}


@media all and (max-width: 1023px){

	#slider_productos .slick-slide{
		transition: all .5s ease-out;
	}

	#slider_productos .slick-center{
		transform: scale(1.08);
	}

	.fs-14{
		font-size: 14px;
	}

	.slider-nav{
		height: auto;
	}

	.title-mobile{
		max-width: 50%;
	}

	.imagenes_categorias{
		padding:0px;
	}	

	.card a.btn{
		font-size:12px;
	}

	.is_single header, .is_taxonomy header, .is_single .breadgrumbs, .is_taxonomy .breadgrumbs{
		display: none !important;
	}

	.is_single #go_home, .is_taxonomy #go_home{
		display: block !important;
		position: fixed;
		top:15px;
		right:15px;
		z-index: 99999;
		text-align: right;		
	}

	.modal-dialog { 
		position: absolute;  
    margin: 0px;
    bottom: 0px;
    overflow: auto;
    transition: all 2s ease-out;
    width: 100vw;
    font-size: 14px;
    border-radius: 30px 30px 0px 0px;
	}	

	.modal-dialog .modal-content{
		padding-bottom:10px;
		border-radius: 0px;
	}

	/* Aplicar la animación al modal */
	.modal.show .modal-dialog {
	  animation: slideUp 0.5s ease-out; /* Duración de 0.5 segundos */
	}

}

@media all and (max-width: 767px){
	h1{
		font-size: 25px;
	}

	.slider-for img{
		max-width: 100%;
		max-height: 400px;
		object-fit: cover;
	}

	.badge{
		font-size:15px;
	}

	.contenedor-productos{
		min-height: calc(100vh);
		width: 100% !important;
		padding: 0px !important;
		margin-top: -20px;
		border-radius: 20px;
		position: absolute;
	}

	.contenedor-productos .card{
		background: none !important;
	}

	.modal-dialog, .fs-14{
		font-size:13px;
	} 

	.card a.btn, .switch{
		font-size:14px;
	}
}

@media (max-width: 575px) {
  .no-padding-xs {
    padding: 0;
  }
}

@media all and (max-width: 390px){
	.card a.btn, .switch{
		font-size:12px;
	}
}

@media all and (max-width: 320px){
	.card a.btn{
		font-size:9px;
		padding:5px;
	}
}