/*variables*/
:root{
	--texto-rosado: #B7156D;
	--banner-gris: #F2F2F2;
	--texto-gris: #545555;
	--texto-blanco: #FFFFFF;
	--texto-negro: #000000;
	--sucursal: #8A8A8A;
}
/*fonts*/
@font-face {
	font-family: Univia Pro;
	src: url('../../public/fonts/UniviaProRegular.otf');
}
/*reglas generales*/
*{
	box-sizing: border-box;
	font-family: Univia Pro;
}
/*ficha del producto*/
.contenedor-ficha-informativa{
	width: 80%;
	height: auto;
	margin: auto;
	/*background: lightblue;*/
	display: flex;
	flex-direction: row;
	padding: 5em 0;
}
.carrusel-ficha-producto{
	width: 55%;
	height: auto;
	/*background: red;*/
	display: flex;
	flex-direction: row;
}
.carrusel-imgg{
	width: 80%;
	height: auto;
	/*background: purple;*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.imagen-principal img{
	width: 100%;
	height: 100%;
}
.thumbnails {
	/*background: blue;*/
	display: flex;
	flex-direction: column;
	margin: 0 auto 0;
	padding: 0;
	justify-content: center;
}
.thumbnail {
	width: 8em;
	height: 8em;
	overflow: hidden;
	list-style: none;
	margin: 0 0.2rem;
	cursor: pointer;
}
.thumbnail img {
	width: 100%;
	height: auto;
}
.thumbnail {
	opacity: 0.3;
}
.thumbnail.is-active {
	opacity: 1;
}
.ficha-informacion{
	position: relative;
	width: 45%;
	height: auto;
	display: flex;
	/*background: lightpink;*/
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 2em;
}
.referencia{
	font-size: 1rem;
	color: var(--sucursal);
	letter-spacing: 2px;
	margin-bottom: 0;
}
.c-referencia{
	margin-top: 0;
	margin-bottom: 1em;
	font-size: 1rem;
	color: var(--texto-negro);
	letter-spacing: 2px;
}
.nombre-fproducto{
	font-size: 2rem;
	color: var(--texto-rosado);
	letter-spacing: 2px;
	margin-bottom: 0;
}
.sucursal-producto{
	font-size: 1.2rem;
	color: var(--sucursal);
	letter-spacing: 2px;
	margin-top: 0.5em;
	margin-bottom: 1em;
}
.precio-aprox{
	font-size: 1.5rem;
	color: var(--texto-gris);
	letter-spacing: 2px;
}
.detalles{
	font-size: 1.2rem;
	color: var(--texto-negro);
	letter-spacing: 2px;
	margin-bottom: 0.5em;
} 
.kilotaje,
.peso,
.largo{
	font-size: 1.2rem;
	color: var(--texto-negro);
	letter-spacing: 2px;
	margin: 0;
}
.t-descripcion{
	font-size: 1.2rem;
	color: var(--texto-negro);
	letter-spacing: 2px;
	margin-bottom: 0;
}
.descripcion{
	margin-top: 0.5em;
	margin-bottom: 0;
	font-size: 1.2rem;
	color: var(--sucursal);
	letter-spacing: 2px;
}
/*nota producto*/
.nota-producto{
	width: 100%;
	height: auto;
	background: var(--banner-gris);
	padding: 2em 10%;
	margin-bottom: 5em;
}
.nota-producto p{
	text-align: center;
	font-size: 1.5em;
	color: var(--texto-negro);
	letter-spacing: 2px;
	margin: 0;
}
/*responsive*/
@media screen and (max-width: 1024px){
	.contenedor-ficha-informativa{	
		display: flex;
		flex-direction: column;
	}
	.carrusel-ficha-producto{
		display: flex;
		flex-direction: column;
		order: 2;
	}
	.ficha-informacion{
		width: 100%;	
		order: 1;
	}
	.carrusel-imgg{
		width: 100%;
	}
	.thumbnails {
		width: 100%;
		display: flex;
		flex-direction: row;
	}
	/*prueba*/
	.carrusel-ficha-producto{
		position: absolute;
		top: 38em;
		z-index: 2;	
		width: 80%;
	}
	.referencia{
		align-self: flex-end;
		display: flex;
	}
	.c-referencia{
		align-self: flex-end;
		display: flex;
	}
	
	.precio-aprox{
		align-self: flex-end;
		display: flex;
		margin-bottom: 43em;
	}
}
@media screen and (max-width: 1000px){
	.precio-aprox{
		margin-bottom: 41em;
	}
}
@media screen and (max-width: 950px){
	.precio-aprox{
		margin-bottom: 39em;
	}
}
@media screen and (max-width: 890px){
	.precio-aprox{
		margin-bottom: 37em;
	}
}
@media screen and (max-width: 840px){
	.precio-aprox{
		margin-bottom: 35em;
	}
}
@media screen and (max-width: 780px){
	.precio-aprox{
		margin-bottom: 33em;
	}
}
@media screen and (max-width: 730px){
	.precio-aprox{
		margin-bottom: 31em;
	}
}
@media screen and (max-width: 725px){
	.carrusel-ficha-producto {
		top: 40em;
	}
}
@media screen and (max-width: 680px){
	.precio-aprox{
		margin-bottom: 28em;
	}
}
@media screen and (max-width: 580px){
	.precio-aprox{
		margin-bottom: 26em;
	}
}
@media screen and (max-width: 540px){
	.carrusel-ficha-producto {
		top: 38em;
	}
	.nombre-fproducto{
		font-size: 1.8rem;
	}
	.sucursal-producto{
		font-size: 1rem;
	}
	.precio-aprox{
		font-size: 1.2rem;
		margin-bottom: 30em;
	}
	.detalles{
		font-size: 1rem;
	} 
	.kilotaje,
	.peso,
	.largo{
		font-size: 1rem;
	}
	.t-descripcion{
		font-size: 1rem;
	}
	.descripcion{
		font-size: 1rem;
	}
	/*nota producto*/
	.nota-producto{
		padding: 1em 10%;
	}
	.nota-producto p{
		font-size: 1.2em;
	}
}
@media screen and (max-width: 480px){
	.precio-aprox{
		margin-bottom: 27em;
	}
}
@media screen and (max-width: 420px){
	.carrusel-ficha-producto {
		top: 37em;
	}
	.nombre-fproducto{
		font-size: 1.5rem;
	}
	.precio-aprox{
		margin-bottom: 24em;
	}
}
@media screen and (max-width: 360px){
	.carrusel-ficha-producto {
		top: 39em;
	}
	.precio-aprox{
		margin-bottom: 22em;
	}
}
@media screen and (max-width: 345px){
	.carrusel-ficha-producto {
		top: 40em;
	}
	.precio-aprox{
		margin-bottom: 20em;
	}
}