:root{
	--font-sans:'DM Sans', sans-serif;
	--font-inter:'Inter', sans-serif;
	--background:#E5E5E5;
	--linear-gradient:207.8deg, #201E1C 16.69%, #F7931A 100%;
	--bitcoin-orage:#F7931A;
	--soft-orange:#FFE9D5;
	--secondary-blue:#1A9AF7; 
	--soft-blue:#E7F5FF;
	--warm-black:#201E1C;
	--black:#282623;
	--grey:#BABABA;
	--off-white:#FAF8F7;
	--just-white:#FFFFFF;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html{
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

header{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-width: 320px;
	height: 334px;
	text-align: center;
	background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
	;
}

header img{
	width: 150px;
	height: 24px;
	margin-top: 40px;
	align-self: center;
}

.header-tittle-container{
	width: 90%;
	min-width: 288px;
	max-width: 900px;
	height: 218px;
	margin-top: 40px;
	text-align: center;
	align-self:center ;
}

.header-tittle-container h1{
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 2.6rem; /* tamaño del Salto de linea */
	color: var(--just-white);
}

.header-tittle-container p{
	margin-top: 25px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.8rem;
	color: var(--soft-orange);
}

.header-tittle-container .header-button{
	position: absolute;
	top: 270px;
	left: calc(50% - 114.5px);
	display: block;
	margin-top:35px ;
	padding: 15px;
	width: 229px;
	height: 48px;
	background-color: var(--off-white);
	box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
	border: none;
	border-radius: 5px;
	font-size: 1.4rem;
	font-weight: bold;
	text-decoration: none;
	color: var(--black);
}

.header-button span{
	display: inline-block;
	width: 13px;
	height: 8px;
	margin-left: 10px;
	background-image: url(../assets/assets/icons/down-arrow.svg);
}

main{
	width: 100%;
	min-width: 320px;
	height: auto;
	background-color: var(--off-white);
}

.main-exchange-container{
	width: 100%;
	height: auto;
	padding-top: 80px;
	padding-bottom: 30px;
	text-align: center;
}

.main-exchange-container-title{
	width: 90%;
	min-width: 288px;
	max-width: 900px;
	margin: 0 auto;
}

.main-exchange-container .backgroundImg{
	width: 220px;
	height: 220px;
	margin: 0 auto;
	margin-bottom: 50px;
	background:url(https://bitcoin.org/img/home/bitcoin-img.svg?1657703267);
	background-size: cover;
	background-position: center;
	background-repeat:no-repeat ;
}

.main-exchange-container h2{
	margin-bottom: 30px;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 26px;
	color: var(--black);

}

.main-exchange-container-tittle p{
	margin-bottom: 30px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 16px;
	color: #757575; 
}

.tables-slider{
	display: flex;
	overflow-x: scroll ;
	overscroll-behavior-x:contain ;
	scroll-snap-type: x proximity;
}

.main-tables-container{
	
	scroll-snap-align: left;
	margin: 0 50px;
	margin-top: 40px;
	width: 70%;
	min-width: 235px;
	max-width: 500px;
	font-family: var(--font-inter), sans-serif;
}

.tables-title h3{	
	font-size: 1.8rem;
	font-weight: bold;
	margin-left: 12px;
	margin-bottom: 12px;
	text-align: left;
	color: var(--bitcoin-orage);

}
.tables-title h4{	
	font-size: 1.8rem;
	font-weight: bold;
	margin-left: 12px;
	margin-bottom: 12px;
	text-align: left;
	color: var(--secondary-blue);

}
.tables-container{	
	width: 90%;
	min-width: 280px;
	max-width: 500px;
	display: grid;
	grid-template-columns:1fr 1fr;
}

.tables-container p{
	padding: 7px 16px 7px 16px;
	line-height: 1.7rem;
	border: solid 1px var(--off-white);
	background-color:var(--just-white);
	border-radius: 5px;
}


.container-left{
	font-weight: 500;
	font-size: 1.6rem;	
	color: var(--grey);
	text-align: left
}

.container-left img{
	width: 16px;
	height: 16px;
	margin-right: 10px;
	vertical-align: bottom;
}

.container-right{
	position: relative;
	font-weight: normal;
	font-size: 1.4rem;	
	color: #757575;
}


.container-right span{
	display: inline-block;
	width: 12px;
	height: 8px;
	margin-left: 13px;
	background-image: url(../assets/assets/icons/trending-down.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	margin-bottom: 2px;
	text-align: center;
	border: none;
}

.container-right .traiding-up{
	background-image: url(../assets/assets/icons/trending-up.svg);
}


.container-right img{
	width: 12px;
	height: 8px;
	position: absolute;
	top: calc(50% - 4px);
	left: calc(100% + 12px);	
	transform: rotate(-90deg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;	

}


.currency-table-date{
	width: 190px;
	height: 30px;
	margin: 0 auto;
	margin-top: 15px;
	padding: 8px;
	background-color: var(--soft-orange);
	border-radius: 8px;

}

.currency-table-date:last-child{
	background-color: var(--soft-blue);
}

.currency-table-date p{
	color: var(--warm-black);
	font-size: 1.2rem;
	line-height: 1.5rem;
}

.main-product-detail{
	position: relative;/* se utiliza este position para que el hijo con position absolute lo tome como referencia en posicion*/
	width: 100%;
	min-width: 320px;
	height: auto;
	padding: 20px 10px;
	margin-top: 30px;
	background-color: var(--warm-black);
}

.product-detail-batatalogo{
	position: absolute;/* Para que se posicione correctamente tiene que tener un padre con position relative*/
	top: calc(0% - 12.5px);
	left: calc(50% - 20px);
	width: 40px;
	height: 25px;
	background-image: url(../assets/assets/icons/batata.svg);
	background-position: center;
}

.product-detail-title{
	width: 90%;
	min-width: 288px;
	height: auto;
	margin: 0 auto;
	margin-top: 50px;
	text-align: center;

}

.product-detail-title h2{
	margin-bottom: 20px;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 2.6rem;
	color: var(--just-white);

}

.product-detail-title p{
	margin-bottom: 20px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.8rem;
	color: #808080;

}

.product-detail-card{
	width: 90%;
	min-width: 288px;
	max-width: 400px;
	min-height: 150px;
	margin: 15px auto;
	padding: 15px;
	background-color:var(--black) ;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.product-detail-card .clock{
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-bottom: 10px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}



.product-card-title{
	margin-bottom: 15px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.8rem;
	color: var(--just-white);
}

.product-card-body{
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.8rem;
	color:#808080;
}

.bitcoin-img-container{
	width: 100%;
	min-width: 320px;
	height: 50vh;
	background-image: url(../assets/assets/img/bitcoinbaby2x.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align:center;
}

.bitcoin-img-container h2{
	padding-top: 60px;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 2.6rem;
	color: var(--just-white);
}

.main-plans-container{
	width: 100%;
	min-width: 320px;
	padding-bottom:70px ;
	text-align: center;
}

.plans-title{
	width: 90%;
	min-width: 288px;
	height: auto;
	margin: 0 auto;
	margin-bottom: 50px;
	
}

.plans-title h2{
	margin-top:50px;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 2.6rem;
	color: var(--black);
}

.plans-title p{
	padding-top: 30px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.8rem;
	color:#757575;
}

.plans-container-slider{
	display: flex;
	gap:10px;
	height: 316px;
	overflow-x: scroll ;
	overscroll-behavior-x:contain ;
	scroll-snap-type: x proximity;
}

.plans-container-card{
	position: relative;
	scroll-snap-align: center;
	width: 70%;
	min-width:190px;
	max-width: 300px;
	height: 248px;
	margin: 50px 5px 0;
	padding: 0 15px;
	background-color: var(--just-white);
	border-radius: 15px;
	box-shadow: 0 4px 8px rgba(89, 73, 30, 0.16);
}

.plans-container-card:nth-child(2){
	box-shadow: 0 4px 8px 2px rgba(212, 117, 28, 0.685);
}

.recommended{
	position: absolute;
	width: 120px;
	height: 31px;
	left: calc(50% - 60px);
	top: calc(0% - 15.5px);
	background-color: var(--bitcoin-orage);
	border-radius: 8px;
	color: var(--just-white);
	padding:8px;
	font-size: 1.2rem;
	font-weight: 700;
}

.basic{
	position: absolute;
	width: 120px;
	height: 31px;
	left: calc(50% - 60px);
	top: calc(0% - 15.5px);
	background-color: rgb(6, 146, 211);
	border-radius: 8px;
	color: var(--just-white);
	padding:8px;
	font-size: 1.2rem;
	font-weight: 700;
}

.unlimited{
	position: absolute;
	width: 120px;
	height: 31px;
	left: calc(50% - 60px);
	top: calc(0% - 15.5px);
	background-color: var(--warm-black);
	border-radius: 8px;
	color: var(--just-white);
	padding:8px;
	font-size: 1.2rem;
	font-weight: 700;
}


.plan-card-title{
	padding-top: 30px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.8rem;
	color: var(--black);
}

.plan-card-price{
	
	padding: 5px 0;
	font-size: 5.2rem;
	font-weight:bold;
	line-height: 5.3rem;
	color: black;
}


.plan-card-price span{

	vertical-align: text-top;
	font-size: 1.2rem;
	font-weight:500;
	margin-right: 4px;

}

.plan-card-saving{
	font-size: 1.2rem;
	color: #757575;
}

.plan-card-car{
	width: 150px;
	height: 48px;
	margin-top: 20px;
	background-color:#FAF8F7;
	border:2px solid var(--bitcoin-orage);
	border-radius: 4px;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.8rem;
	color: var(--black);
}

.plan-card-car span{
	display: inline-block;
	position: relative;
	top: 3px;
	width: 22px;
	height: 22px;
	background-image: url(../assets/assets/icons/arrow-orange.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	vertical-align: text-bottom;
}

.plan-card-cab{
	width: 150px;
	height: 48px;
	margin-top: 20px;
	background-color:#FAF8F7;
	border:2px solid rgb(6, 146, 211);
	border-radius: 4px;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.8rem;
	color: var(--black);
}

.plan-card-cab span{
	display: inline-block;
	position: relative;
	top: 3px;
	width: 22px;
	height: 22px;
	background-image: url(../assets/assets/icons/arrow-blue.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	vertical-align: text-bottom;
}

.plan-card-cau{
	width: 150px;
	height: 48px;
	margin-top: 20px;
	background-color:#FAF8F7;
	border:2px solid var(--warm-black);
	border-radius: 4px;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.8rem;
	color: var(--black);
}

.plan-card-cau span{
	display: inline-block;
	position: relative;
	top: 3px;
	width: 22px;
	height: 22px;
	background-image: url(../assets/assets/icons/arrow-black.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	vertical-align: text-bottom;
}

footer{
	display: flex;
	width: 100%;
	height: 150px;
	background-color: var(--bitcoin-orage);
}

footer section{
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 50%;
}

footer .left ul{
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.8rem;
	list-style: none;

}

.left li{
	margin: 10px 0;

}

.left a{
	text-decoration: none;
	color: var(--just-white);
}

.left .linkedin{
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url(https://cdn-icons-png.flaticon.com/512/174/174857.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	vertical-align: bottom;
	margin-right: 10px;
}




.left .crunchbase{
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url(https://icons-for-free.com/download-icon-crunchbase-1324440143451206135_512.icns);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	vertical-align: bottom;
	margin-right: 10px;

}

.left .hackernews{
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url(https://play-lh.googleusercontent.com/S-jC2RtBE_9A29myfMZgU22AwF-eITjCBBMEf4YIqXODDiazO6fOhzw243IFCxytLDE);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	vertical-align: bottom;
	margin-right: 10px;

}


.right img{
	width: 80px;
	height: 80px;
}