style-batabit.css

:root{
    --primary-color: #f7931a;
    --soft-primary-color: #ffe9d5;
    --secondary-color: #1a9af7;
    --soft-secondary-color: #e7f5ff;
    --dark-color: #282623;
    --warm-dark-color: #201e1c;
    --background-color: rgb(250, 248, 247);
    --light-color: rgb(255, 255, 255);
    --primary-family-font: 'DM Sans', sans-serif;
    --secondary-family-font: 'Inter', sans-serif;
}

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


html{
    font-size: 62.5%;
    font-family: var(--primary-family-font);
}

/* **************HEADER*********************** */
header{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    background: linear-gradient(208.83deg, var(--warm-dark-color) 16.69%, var(--primary-color) 100%);
}

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

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

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

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

.header--title-container .header--button{
    position: absolute;
    left: calc(50% - 118px);
    top: calc(50% -48px/2);
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: 229px;
    height: 48px;
    background: var(--background-color);
    box-shadow: 0px 4px 0px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--warm-dark-color);
}
.header--title-container .header--button span{
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url("assets/icons/down-arrow.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* **************MAIN*********************** */
main{
    width: 100%;
    height: auto;
    background-color: var(--background-color);
}
.main-exchange-container{
    width: 100%;
    height: auto;
    padding: 80px 0 30px 0;
    text-align: center;
}

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

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

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

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

/*---------------Contenedor padre---------------*/
.main-tables-container{
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-behavior: smooth;
}

.main-tables-container::-webkit-scrollbar{
    background-color: var(--soft-primary-color);
    height: 4px;
}

.main-tables-container::-webkit-scrollbar-thumb{
    border: solid var(--primary-color);
    border-radius: 1.5rem;
}




/*---------------Contenedores (currency y commissions)---------------*/
.main-currency-table, .main-commissions-table {
    width: auto; 
    min-width: 320px; 
    max-width: 500px;
    height: 355px;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
}

/*---------------Titulo monedas---------------*/ 
.main-currency-table .currency-table__title{ 
    width: 70%;
    margin: 0 auto;
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--primary-color);
    text-align: start;
    padding-left: 12px;
    font-family: var(--primary-family-font);
    font-weight: bold;
}
/*---------------Titulo comisiones---------------*/
.main-commissions-table .commissions-table__title{
    width: 70%;
    margin: 0 auto;
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secondary-color);
    text-align: start;
    padding-left: 12px;
    font-family: var(--primary-family-font);
    font-weight: bold;
}

/*---------------Contenedor de la tabla (currency y commissions)---------------*/
.currency-table__container, .commissions-table__container{
    width: 70%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
    border-radius: 15px;
    /* nuevo cambio (position no estaba)*/ 
    position: relative; 
    
}

/*---------------Tabla (currency y commissions)---------------*/
.currency-table__container table, .commissions-table__container table{
    width: 100%;
    height: 100%;    

}

/*---------------Todos los elementos (currency y commissions)---------------*/
.currency-table__container td, .commissions-table__container td{
    width: 50%;
    height: 39px;
    padding: 10px 12px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: #B5B0AC;
    text-align: start;
    background-color: var(--light-color);
    /* background-color: red; */
}

/*---------------Elementos de la segunda columna (currency y commissions)---------------*/
.currency-table__container .table__right, .commissions-table__container .table__right{
    padding: 11px 12px;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7rem;
    color: #757575;
}

/*---------------Bordes---------------*/
.currency-table__container .table__top--left,
.commissions-table__container .table__top--left {
  border-radius: 15px 0 0 0;
}
.currency-table__container .table__top--right,
.commissions-table__container .table__top--right {
  border-radius: 0 15px 0 0;
}
.currency-table__container .table__bottom-left,
.commissions-table__container .table__bottom-left {
  border-radius: 0 0 0 15px;
}
.currency-table__container .table__bottom-right,
.commissions-table__container .table__bottom-right {
  border-radius: 0 0 15px 0;
}

/*---------------span (currency y commissions)---------------*/
.currency-table__container td span, .commissions-table__container td span{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
}
.currency-table__container span.down, .commissions-table__container span.down{
    background-image: url("assets/icons/trending-down.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.currency-table__container span.up, .commissions-table__container span.up{
    background-image: url("assets/icons/trending-up.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.currency-table__date{
    width: 190px;
    height: 31px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-primary-color);
    border-radius: 8px;
    text-align: center;
    
    font-weight: bold;
    
}
.commissions-table__date{
    width: 190px;
    height: 31px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-secondary-color);
    border-radius: 8px;
    text-align: center;
    
    font-weight: bold;
    color: var(--dark-color);
}

.currency-table__date p, .commissions-table__date p{
    margin: 7px;
    font-size: 1.2rem;
    line-height: 1.5px;
    color: var(--dark-color);
}

/*---------------Flechas que te cambian de tabla---------------*/
.table-go-right{
    position: absolute;
    right: -40px;
    padding: 15px;
    top: calc(50% - 20px);
}
.table-go-left{
    position: absolute;
    left: -40px;
    padding: 15px;
    top: calc(50% - 20px);
}

.main-product-detail{
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 20px 10px;
    background-color: #201E1C;
}

.product-detail__batata-logo{
    position: absolute;
    width: 40.57px;
    height: 24.01px;
    background-image: url("assets/icons/batata.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: calc(50% - 40.57px/2);
    top: calc(0% - 24.01px/2);
}

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

.product-detail__title h2{
    font-size: 2.4rem;
    line-height: 2.6rem;
    color: var(--light-color);
}

.product-detail__title p{
    margin-top: 24px;
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: 500;
    color: #808080;
    margin-bottom: 32px;
}

.product-detail__card{
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: auto;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--dark-color);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    margin-bottom: 16px;
}

.detail-image{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.detail-image--clock{
    background-image: url("assets/icons/clock.svg");
}
.detail-image--eye{
    background-image: url("assets/icons/eye.svg");
    
}
.detail-image--dollar{
    background-image: url("assets/icons/dollar-sign.svg");
}
.detail-image--check{
    background-image: url("assets/icons/check-circle.svg");
}


.product__card--title{
    margin-bottom: 10px;
    font-size: 1.8rem;
    line-height: 1.8rem;
    color: var(--light-color);
}

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


/* **************SECCION COMODIN (IMAGEN)*********************** */
.bitcoin-img-container {
    width: 100%;
    min-width: 320px;
    height: 50vh;
    background-image: url("assets/img/bitcoinbaby2x.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
}
.bitcoin-img-container h2 {
    padding-top: 60px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--light-color);
}

/* **************SECCION COMODIN (IMAGEN)*********************** */
/* Contenedor general */
.main-plans-container{
    width: 100%;
    min-height: 320px;
    text-align: center;
    padding-bottom: 50px;
}

.plans-container__title{
    min-width: 288px;
    width: 90%;
    margin: 0 auto;
    margin-top: 64px;
}

.plans-container__title h2{
    font-size: 2.4rem;
    line-height: 2.6rem;
    color: var(--warm-dark-color);
}

.plans-container__title p{
    margin-top: 24px;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: #757575;
    font-weight: 500;
}

/*Contenedor mayor de todos los planes*/
.plans-container__slider{
    display: flex;
    height: 325px;
    overflow-x: scroll; 
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; 
}

.plans-container__slider::-webkit-scrollbar{
    background-color: var(--soft-primary-color);
    height: 4px;
}
.plans-container__slider::-webkit-scrollbar-thumb{
    border: solid var(--primary-color);
    border-radius: 1.5rem;
}


/*Contenedor de todos los planes ARTICLE*/
.plans-container__card{
    position: relative;
    scroll-snap-align: center;
    width: 70%;
    min-width: 230px;
    max-width: 300px;
    height: 258px;
    margin: 50px 40px 0;
    padding: 0 15px;
    background-color: var(--light-color);
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
}

/*Mensaje de recomendación*/
.recommended{
    position: absolute;
    width: 101px;
    height: 31px;
    top: calc(0% - 31px/2);
    left: calc(50% - 101px/2);
    padding: 8px;
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-family: var(--secondary-family-font);
    text-align: center;
    border-radius: 8px;
    background-color: var(--primary-color);
    color: white;
}

.plan-card__title{
    padding-top: 31px;
    margin-bottom: 8px;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: black;
    font-weight: 500;
}

.plan-card__price{
    padding:5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 6.3rem;
    font-family: var(--secondary-family-font);
    color:black;
    position: relative;
    left:-7px;
}

.plan-card__price span{
    vertical-align: top;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5rem;
}

.plan-card__saving{
    margin-top: 16px;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: #757575;
    font-weight: 500;
}

.plan-card__button{
    margin-top: 16px;
    margin-bottom: 24px;
    width: 151px;
    height: 48px;
    border-radius: 4px;
    background: var(--off-white);
    border: solid 2px var(--primary-color);
    color: var(--warm-dark-color);
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: bold;
    text-align: center;
}

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

.right-arrow{
    position: absolute;
    right: -40px;
    padding: 15px;
    top: calc(50% - 20px);
}
.left-arrow{
    position: absolute;
    left: -40px;
    padding: 15px;
    top: calc(50% - 20px);
}

/* **************FOOTER*********************** */
footer {
    display: flex;
    width: 100%;
    height: 150px;
    background-color: var(--primary-color);
  }
  footer section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
  }
  .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(--light-color);
  }