/*
1. Posicionamiento
2. Modelo de caja (Box model)
3. Tipografía
4. Visuales
5. Otros
*/

:root {
    /* Colores */
    --bitcoin-orange:#F7931A;
    --soft-orange:#FFE9D5;;
    --warm-black:#201E1C;
    --warm-black-1:#282623;
    --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: 128px;
    height: 24px;
    margin-top: 78px;
    align-self: center;
}
.header--title-container {
    margin-top: 33px;
    width: 90%;
    min-width: 28px;
    max-width: 900px;
    align-self: center;
    text-align: center;
    height: 288px;
}
.header--title-container h1 {
    font-size: 2.4rem;
    line-height: 2.6rem;
    font-weight: bold;
    color:var(--just-white);
    margin-bottom: 24px;
}
.header--title-container p {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
}
.header--title-container .header-button {
    position: absolute;
    left: calc(50% - 118px);
    top: 270px;
    display: block;
    margin-top: 32px;
    padding: 15px;
    width: 229px;
    height:48px;
    background: var(--off-white);
    /*Sombra*/
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 4px;
    
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.8rem;
    text-decoration: none;
    color: var(--warm-black);
}
.header--title-container .header-button span {
    display: inline-block;
    width: 12px;
    height: 8px;
    margin-left: 14px;
    background-image: url(../Assets/Icons/Vector.svg);
}
main {
    width: 100%;
    height: auto;
    background: var(--off-white);
}
.main-exchange-container {
    width: 100%;
    height: auto;
    padding-top: 60px;
    padding-bottom: 30px;
    text-align: center;
}
.main-exchange-container--title {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    margin: 0 auto;
    align-self: center;
    text-align: center;
}
.main-exchange-container .backgroundImg {
    width: 190px;
    height: 190px;
    margin: 0 auto;
    margin-bottom: 40px;
    background-image: url(../Assets/Images/Bitcoin.svg);
}
.main-exchange-container--title h2 {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 2.6rem;
    margin-bottom: 2.4rem;
}
.main-exchange-container--title p {
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color:#757575;
    margin-bottom: 50px;
}
.main-currency-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 {
    font-size: 1.8rem;
    line-height: 2.3rem;
    font-weight: 700;
    color:#FF9536;
}
.currency-table--container {
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
}
.currency-table--container table {
    width: 100%;
    height: 100%;
}
.currency-table--container td {
    width: 50%;
    font-size: 1.6rem;
    line-height: 1.9rem;
    font-weight: 500;
    color: #B5B0AC;
    background-color: #FFFFFF;
}
.currency-table--container .table-top-rigth {
    border-radius: 0px 8px 0px 0px;
}
.currency-table--container .table-bottom-rigth {
    border-radius: 0px 0px 0px 8px;
}
.currency-table--container .table-top-left {
    border-radius: 8px 0px 0px 0px;
}
.currency-table--container .table-bottom-left {
    border-radius: 0px 0px 8px 0px;
}
.currency-table--container .table__rigth {
    font-weight: 400;
    color: #757575;
}
.currency-table--container .low-logo {
    display: inline-block;
    width: 11px;
    height: 6px;
    margin-left: 10px;
    background-image: url(../Assets/Icons/trending-down.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.currency-table--container .high-logo {
    display: inline-block;
    width: 11px;
    height: 6px;
    margin-left: 10px;
    background-image: url(../Assets/Icons/trending-up.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main-benefits-container {
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    text-align: center;
    padding: 20px 10px;
    background-color: var(--warm-black);
}
.main-benefits-container h2 {
    font-weight: bold;
    font-size: 2.4rem;
    line-height: 2.6rem;
    color: var(--just-white);
    margin: 0 auto;
    width: 90%;
    padding-bottom: 24px;
}
.main-benefits-container p {
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: #808080;
    padding-bottom: 30px;
}
.main-benefits-container--time {
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--warm-black-1);
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);

}
.main-benefits-container--time div {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 15px;
    background-image: url(../Assets/Icons/clock.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main-benefits-container--time h2 {
    width: 103px;
    height: 18px;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.8rem;
}
.main-benefits-container--time p {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem
}
.main-benefits-container--tasa {
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--warm-black-1);
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);

}
.main-benefits-container--tasa h2 {
    width: 217px;
    height: 18px;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.8rem;
}
.main-benefits-container--tasa div {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 15px;
    background-image: url(..//Assets/Icons/eye.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main-benefits-container--tasa p {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem
}
.main-benefits-container--compare {
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--warm-black-1);
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
}
.main-benefits-container--compare h2 {
    width: 167px;
    height: 18px;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.8rem;
}
.main-benefits-container--compare div {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 15px;
    background-image: url(../Assets/Icons/dollar.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main-benefits-container--compare p {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem
}
.main-benefits-container--info {
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    padding-bottom: 70px;
    background-color: var(--warm-black-1);
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
}
.main-benefits-container--info h2 {
    width: 190px;
    height: 18px;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.8rem;
}
.main-benefits-container--info div {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 15px;
    background-image: url(../Assets/Icons/circle-check.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main-benefits-container--info p {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem
}
.main-orange-img-container {
    width: 100%;
    min-width:320px;
    height: 50vh;
    background-image: url("../Assets/Images/bitcoinbaby.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main-orange-img-container h2 {
    width: 268px;
    height: 26px;
    margin: 0px auto;
    text-align: center;
    padding-top: 65px;

    font-weight: 700;
    font-size: 2.4rem;
    line-height: 2.6;
    color: var(--just-white);
}
.plans-container--slider {
    display: flex;
    gap: 8px;
    height: 310px;
    overflow-x: scroll;
    scroll-snap-type: x proximity;
}
.main-plans-container {
    width: 100%;
    min-width:320px;
    padding-bottom: 65px;
    text-align: center;
    background-color: #e5e5e5;
}
.main-plans-container h2 {
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    padding-top: 65px;
    font-weight: bold;
    font-size: 2.4rem;
    line-height: 2.6rem;
}
.main-plans-container .p-main-container--title {
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    margin-top: 24px;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.6rem;
    color: #757575;
}
.plans-container--card {
    position: relative;
    width: 50%;
    min-width: 190px;
    max-width: 300px;
    height: 250px;
    margin: 30px auto;
    background-color: var(--just-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border-radius: 8px
}
.recomended {
    position: absolute;
    width:120px;
    height: 31px;
    padding: 8px;
    left: calc(50% - 60px);
    top: -15px;
    background-color: var(--bitcoin-orange);
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.4rem;
    color: var(--just-white);
    text-align: center;
}
.plans-container--card .plan-card--title {
    width: 73px;
    height: 18px;
    padding-top: 30px;
    margin: 0 auto;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: var(--warm-black);
}
.plans-container--card .plan-card--price {
    width: 65px;
    height: 56px;
    padding-top: 8px;
    margin: 8px auto;
    font-family: "Inter";
    font-weight: bold;
    font-size: 5.2rem;
    line-height: 6.3rem;
    letter-spacing: -0.08em;
}
.plans-container--card span {
    position: absolute;
    font-size: 1.2rem;
    font-weight: 300;
    left: calc(50% - 40px);
    top: calc(50% - 90px);
}
.plans-container--card .plan-card--saving {
    width: 90%;
    min-width: 158px;
    height: auto;
    min-height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    font-family: "Inter";
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.4rem;
    color: #757575;
}
.plan-card--ca {
    width: 90%;
    min-width: 151px;
    height: auto;
    min-height: 48px;
    margin: 0 auto;
    margin-top: 15px;
    background-color: var(--off-white);
    border: 2px solid var(--bitcoin-orange);
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1.9rem;
    color: var(--warm-black);
}
.plans-container--limit {
    position: relative;
    width: 50%;
    min-width: 190px;
    max-width: 300px;
    height: 250px;
    margin: 30px auto;
    background-color: var(--warm-black);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border-radius: 8px
}
.limited  {
    position: absolute;
    width:120px;
    height: 31px;
    padding: 8px;
    left: calc(50% - 60px);
    top: -15px;
    background-color: #757575;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.4rem;
    color: var(--just-white);
    text-align: center;
}
.plans-container--limit .plan-card--title1 {
    width: 80px;
    height: 18px;
    padding-top: 30px;
    margin: 0 auto;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: var(--just-white);
}
.plans-container--limit .plan-card--price1 {
    width: 100px;
    height: 76px;
    padding-top: 8px;
    margin: 8px auto;
    font-family: "Inter";
    font-weight: bold;
    font-size: 5.2rem;
    line-height: 6.3rem;
    letter-spacing: -0.08em;
    color: var(--just-white);
}
.plans-container--limit span {
    position: absolute;
    font-size: 1.2rem;
    font-weight: 300;
    left: calc(50% - 55px);
    top: calc(50% - 90px);
}
.plans-container--limit .plan-card--saving1 {
    width: 90%;
    min-width: 158px;
    height: auto;
    min-height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    font-family: "Inter";
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.4rem;
    color: #757575;
}
.plan-card--ca1 {
    width: 90%;
    min-width: 151px;
    height: auto;
    min-height: 48px;
    margin: 0 auto;
    margin-top: 15px;
    background-color: var(--warm-black-1);
    border: 2px solid var(--bitcoin-orange);
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1.9rem;
    color: var(--just-white);
}
.plans-container--basic {
    position: relative;
    width: 50%;
    min-width: 190px;
    max-width: 300px;
    height: 250px;
    margin: 30px auto;
    background-color: var(--just-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border-radius: 8px
}
.basic {
    position: absolute;
    width:120px;
    height: 31px;
    padding: 8px;
    left: calc(50% - 60px);
    top: -15px;
    background-color:#1A9AF7;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.4rem;
    color: var(--just-white);
    text-align: center;
}
.plans-container--basic .plan-card--title2 {
    width: 100px;
    height: 18px;
    padding-top: 30px;
    margin: 0 auto;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: var(--warm-black);
}
.plans-container--basic .plan-card--price2 {
    width: 65px;
    height: 56px;
    padding-top: 8px;
    margin: 8px auto;
    font-family: "Inter";
    font-weight: bold;
    font-size: 5.2rem;
    line-height: 6.3rem;
    letter-spacing: -0.08em;
}
.plans-container--basic span {
    position: absolute;
    font-size: 1.2rem;
    font-weight: 300;
    left: calc(50% - 40px);
    top: calc(50% - 90px);
}
.plans-container--basic .plan-card--saving2 {
    width: 90%;
    min-width: 158px;
    height: auto;
    min-height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    font-family: "Inter";
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.4rem;
    color: #757575;
}
.plan-card--ca2 {
    width: 90%;
    min-width: 151px;
    height: auto;
    min-height: 48px;
    margin: 0 auto;
    margin-top: 15px;
    background-color: var(--off-white);
    border: 2px solid var(--bitcoin-orange);
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1.9rem;
    color: var(--warm-black);
}
footer {
    display: flex;
    width: 100%;
    height: 150px;
    background-color: var(--bitcoin-orange);
}
footer section {
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: center;
}
footer .left ul {
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.8rem;
    list-style-type: none;  
}
.left li {
    margin: 10px 0px;
}
.left a {
    text-decoration: none;
    color: var(--just-white);
}