/*
1 Posicionamiento --> static, absolute, relative, fixed
2 Modelo de caja (Box model) --> margin, border, padding, content
3 Tipografía --> tipos, tamaños de fuente, etc
4 Estilos visuales --> box-shadow, border-radius, gradient, etc
5 Otros --> reglas CSS y más
*/

:root{
  /*Colores*/
  --Bitcoin-Orange:#F7931A;
  --Soft-Orange:#FFE9D5;
  --Secondary-Blue:#1A9AF7;
  --Soft-Blue:#E7F5FF;
  --Warm-Black:#201E1C;
  --Black:#282623;
  --Grey:#BABABA;
  --Off-White:#FAF8F7;
  --Just-White:#fff
}


*{
  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: 15rem;
  height: 2.4rem;
  margin-top: 6rem;
  align-self: center;
}

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

.header--title-coteiner h1{
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 2.6rem;
  color: var(--Just-White);
}

.header--title-coteiner p{
  margin-top: 25px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;
  color: var(--Soft-Orange);
}

.header--title-coteiner .header--button{
  position: absolute;
  left: calc(50% - 118px);
  top: 270px;
  display: block;
  margin-top: 35px;
  padding: 15px;
  width: 229px;
  height: 48px;
  background-color: var(--Off-White);
  /*Sombra button*/
  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/icons/down-arrow.svg");
}

main{
  width: 100%;
  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--title p{
  margin-top: 30px;
  margin-bottom: 43px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6rem;
  color: #757575;
}

.main--exchange-container .backgroundImg{
  width: 200px;
  height: 200px;
  margin: 0 auto;
  margin-bottom: 50px;
  background-image: url("../assets/img/Bitcoin.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main--exchange-container h2{
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 2.6rem;
  color: var(--black);
}


.main-currency-table,
.main-Comisiones-table{
  width: 70%;
  min-width: 235px;
  max-width: 500px;
  height: 360px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
}

.main-currency-table .currency-table--title{
  margin-bottom: 15px;
  line-height: 2.3rem;
  font-weight: bold;
  font-size: 1.8rem;
  color: var(--Bitcoin-Orange);
}

.currency-table--container ,
.Comisiones-table--container{
  width: 90%;
  min-width: 230px;
  max-width: 300px;
  height: 250px;
  margin: 0 auto;

}

.currency-table--container table,
.Comisiones-table--container table{
  width: 100%;
  height: 100%;
}

.currency-table--container td,
.Comisiones-table--container td{
  width: 50%;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9rem;
  color: var(--Grey);
  background: var(--Just-White);

}

.currency-table--container .table__top-left,
.Comisiones-table--container .table__top-left{
  border-radius: 15px 0 0 0;
}

.currency-table--container .table__top-right,
.Comisiones-table--container .table__top-right{
  border-radius: 0 15px 0 0;
}

.currency-table--container .table__botton--right,
.Comisiones-table--container .table__botton--right{
  border-radius: 0 0 15px 0;
}

.currency-table--container .table__botton-left,
.Comisiones-table--container .table__botton-left{
  border-radius: 0 0 0 15px;
}

.currency-table--container .down{
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url("../assets/icons/trending-down.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.currency-table--container .up{
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url("../assets/icons/trending-up.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.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 p{
  margin-top: 0;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5rem;
  color: var(--Warm-Black);
}

.main-Comisiones-table .Comisiones-table--title{
  width: 103px;
  height: 23px;
  border-radius: 8px;
  margin: 0 auto;
  margin-bottom:15px ;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 2.3rem;
  color: var(--Secondary-Blue);
}

.Comisiones-table--date{
  width: 173px;
  height: 31px;
  margin: 0 auto;
  border-radius: 8px;
  background-color: var(--Soft-Blue);
}

.Comisiones-table--date p{
  padding: 8px;
  font-family: "Inter" , sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5rem;
  color: var(--Warm-Black);
}

.main-product--detail{
  position: relative;
  width: 100%;
  min-width: 320px;
  height: auto;
  padding: 20px 10px;
  background-color: var(--Warm-Black);
}


.product-detail--patata-logo{
  position: absolute;
  width: 40px;
  height: 25px;
  top: -10px;
  left: calc(50% - 20px);
  background-image: url("../assets/icons/batata.svg");
}

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

.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--cards{
  width: 90%;
  min-width: 288px;
  max-width: 400px;
  height: 150px;
  margin: 15px auto;
  padding: 15px;
  background-color: var(--Black);
  border-radius: 5px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
  text-align: start;
}

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

.clock{
  background-image: url("../assets/icons/clock.svg");
}

.eye{
  background-image: url("../assets/icons/eye.svg");
}

.dolar{
  background-image: url("../assets/icons/dollar-sign.svg");
}

.check{
  background-image: url("../assets/icons/check-circle.svg");
}

.product-cards--title {
  font-size: 1.8rem;
  line-height: 1.8rem;
  color: var(--Just-White);
  margin-bottom: 10px;
}

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

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

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

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

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

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

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

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

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


.recommended{
  position: absolute;
  width: 120px;
  height: 31px;
  top: -15px;
  left: calc(50% - 60px);
  font-size: 1.2rem;
  padding: 6px;
  background-color: var(--Bitcoin-Orange);
  border-radius: 80px;
  color: var(--Just-White);
}

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

.plans-cards--price{
  padding: 5px 0;
  font-size: 5.2rem;
  font-weight: bold;
  color: var(--Black);
}

.plans-cards--price span{
  font-size: 1.2rem;
  font-weight: 300;
  position: absolute;
  left: calc(50% - 45px);
  padding: 15px 0
}

.plans-cards--price .price__ticke-sevenhundred{
  font-size: 1.2rem;
  font-weight: 300;
  position: absolute;
  left: calc(50% - 65px);
  padding: 15px 0
}


.plans-cards--saving{
  font-size: 1.2rem;
  color: #757575;
}

.call-action{
  width: 150px;
  height: 48px;
  margin-top: 20px;
  font-family: 'DM Sans', sans-serif;
  background-color: #FAF8F7;
  border: 2px solid var(--Bitcoin-Orange);
  border-radius: 4px;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.8rem;
  color: var(--Black);
}

.call-action span{
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("../assets/icons/orange-right-arrow.svg");
  vertical-align: text-bottom;
}

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

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

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

}

.left a{
  margin: 10px 0;
  text-decoration: none;
  color: var(--Just-White);
}