style.css

/* Variables e Inicializaciones */

:root {
	/* Colores */
	--bitcoin-orange: #f7931a;
	--soft-orange: #ffe9d5;
	--orange: #ff9536;
	--secondary-blue: #1a9af7;
	--soft-blue: #e7f5ff;
	--warm-black-1: #201e1c;
	--warm-black-2: #282623;
	--grey-1: #bababa;
	--grey-2: #757575;
	--grey-3: #b5b0ac;
	--grey-4: #808080;
	--off-white: #faf8f7;
	--just-white: #fff;
}

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

html {
	font-size: 62.5%;
	font-family: "DM Sans", sans-serif;
	scroll-behavior: smooth;
}

/* Header */

.header {
	position: relative;
	text-align: center;
	width: 100%;
	padding-top: 40px;
	padding-bottom: 60px;
	background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}

.header__logo {
	height: 24px;
	margin-bottom: 30px;
}

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

.main-text-container__title {
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 26px;
}

.main-text-container__subtitle {
	margin-top: 24px;
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 18px;
}

.main-text-container__title--just-white-color {
	color: var(--just-white);
}

.main-text-container__subtitle--soft-orange-color {
	color: var(--soft-orange);
}

.dropdown-button {
	padding: 15px;
	width: 229px;
	height: 48px;
	border: none;
	border-radius: 4px;
	box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
	background-color: var(--off-white);
	
	font-style: normal;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 18px;
	color: var(--warm-black-1);
	text-decoration: none;
}

.dropdown-button--pos-in-header {
	position: absolute;
	bottom: -24px;
	left: calc(50% - 115px);	
}

.dropdown-button__icon {
	display: inline-block;
	width: 13px;
	height: 8px;
	margin-left: 10px;
	background-image: url("./assets/icons/black-arrow.svg");
}

/* Main */

.main {
	width: 100%;
	height: auto;
}

.main-section {
	width: 100%;
	height: auto;
	text-align: center;
}

.main-section--padding-60-65 {
	padding-top: 60px;
	padding-bottom: 65px;
}

/* Sección de Intercambio */

.main-section--off-white-color {
	background-color: var(--off-white);
}

.main-section__decorative-img {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	background-image: url("./assets/imgs/bitcoin.svg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin-bottom: 40px;
}

.main-text-container__title--warm-black-1-color {
	color: var(--warm-black-1);
}

.main-text-container__subtitle--grey-2-color {
	color: var(--grey-2);
}

/* Tabla */

.table-section {
	width: 70%;
	max-width: 250px;
	margin: 0 auto;
	font-family: "Inter", sans-serif;
	margin-top: 48px;
}

.table-section--mobile-margin-top {
	margin-top: 80px;
}

.table-section__title {
	font-size: 1.8rem;
	line-height: 23px;
	font-weight: 700;
	text-align: left;
	margin-left: 12px;
	margin-bottom: 12px;
}

.table-section__title--orange-color {
	color: var(--orange);
}

.table-section__title--secundary-blue-color {
	color: var(--secondary-blue);
}

.table-container {
	width: 95%;
	height: 159px;
	margin: 0 auto;
}

.table-4x2 {
	width: 100%;
	height: 100%;
}

.table-4x2__column-item {
	background-color: var(--just-white);
}

.table-4x2__left-column-item {
	width: 101px;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 19px;
	color: var(--grey-3);
	text-align: left;
	padding-left: 15px;
}

.table-4x2__right-column-item {
	width: 95px;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 17px;
	color: var(--grey-2);
}

.table-4x2__endrow-trending-icon {
	display: inline-block;
	width: 13px;
	height: 8px;
	margin-left: 10px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.table-4x2__endrow-trending-icon--up {
	background-image: url("./assets/icons/trending-up.svg");
}

.table-4x2__endrow-trending-icon--down {
	background-image: url("./assets/icons/trending-down.svg");
}

.table-4x2__column-item--top-left-border {
	border-radius: 8px 0 0 0;
}

.table-4x2__column-item--top-right-border {
	border-radius: 0 8px 0 0;
}

.table-4x2__column-item--bottom-right-border {
	border-radius: 0 0 8px 0;
}

.table-4x2__column-item--bottom-left-border {
	border-radius: 0 0 0 8px;
}

.table-section__last-update {
	width: 190px;
	height: 30px;
	margin: 0 auto;
	margin-top: 15px;
	border-radius: 8px;
	font-size: 1.2rem;
	line-height: 15px;
	padding: 8px 0;
	color: var(--warm-black-1);
}

.table-section__last-update--soft-orange-color {
	background-color: var(--soft-orange);
}

.table-section__last-update--soft-blue-color {
	background-color: var(--soft-blue);
}

/* Sección de Beneficios */

.main-section--warm-black-1-color {
	background-color: var(--warm-black-1);
}

.main-section--padding-65-45 {
	padding-top: 65px;
	padding-bottom: 45px;
}

.main-section--pos-relative {
	position: relative;
}

.main-section__transition-logo {
	width: 41px;
	height: 24px;
	display: inline-block;
	background-image: url("./assets/imgs/logo(4).svg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.main-section__transition-logo--between-sections {
	position: absolute;
	top: -12px;
	left: calc(50% - 21px);
}

.main-text-container__subtitle--grey-4-color {
	color: var(--grey-4);
}

/* Cartas */

.multiple-card-section {
	margin-top: 32px;
}

.card {
	min-width: 288px;
    width: 90%;
    max-width: 378px;
    max-height: 152px;
	margin: 0 auto;
	border-radius: 4px;
	background-color: var(--warm-black-2);
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
	text-align: left;
	padding: 14px 20px 22px 16px;
	margin-top: 16px;
}

.card__icon {
	width: 24px;
	height: 24px;
	display: inline-block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

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

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

.card__icon--dollar {
	background-image: url("./assets/icons/dollar.svg");
	position: relative;
	left: -5px;
}

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

.card__title {
	color: var(--just-white);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 18px;
	margin: 10px 0;
}

.card__subtitle {
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 18px;
	color: var(--grey-4);
}

/* Sección Comodín */

.main-section--flex-centered {
	display: flex;
	justify-content: center;
}

.main-text-container__title--centered-pos-absolute {
	position: absolute;
	top: 64px;
}

.main-section__background-img {
	width: 100%;
	height: 387px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("./assets/imgs/bitcoingirl.jpg");
}

/* Sección de Planes */

.main-section--padding-60-55 {
	padding-top: 60px;
	padding-bottom: 55px;
}

.slide-plan-cards-section {
	margin-top: 34px;
	padding-bottom: 10px;
	height: 273px;
	display: flex;
	align-items: end;
	overflow-x: scroll;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
}

.plan-card {
	width: 190px;
	height: 247px;
	background-color: var(--just-white);
	box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
	border-radius: 8px;
	margin: 0 25px;
	padding: 31px 16px 24px 16px;
	scroll-snap-align: center;
}

.plan-card--pos-relative {
	position: relative;
}

.plan-card--left-margin {
	margin-left: 75px;
}

.plan-card--right-margin {
	margin-right: 75px;
}

.plan-card__recommended {
	width: 101px;
	height: 31px;
	padding: 8px;
	border-radius: 8px;
	background-color: var(--bitcoin-orange);
	
	font-family: "Inter";
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 15px;
	color: var(--just-white);
	
	position: absolute;
	top: -15px;
    left: calc(50% - 49px);
}

.plan-card__name {
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 18px;
	color: black;
}

.plan-card__price-container {
	display: flex;
	justify-content: center;
	margin: 8px 0;
}

.plan-card__dollar-symbol {
	font-family: "Inter";
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 15px;
	color: #363636;
}

.plan-card__price {
	width: fit-content;
    margin-right: 8px;
	font-family: 'Inter';
	font-size: 5.2rem;
	font-weight: 700;
	line-height: 63px;
	color: black;
	letter-spacing: -4px;
}

.plan-card__difference {
	font-family: 'Inter';
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 15px;
	color: var(--grey-2);
	height: 30px;
	width: 158px;
}

.button {
	width: 151px;
	height: 48px;
	display: inline-block;
	background-color: var(--off-white);
	
	border: 2px solid var(--bitcoin-orange);
	border-radius: 4px;

	padding: 3px;
	margin-top: 16px;

	font-size: 1.4rem;	
	font-weight: 700;
	line-height: 18px;
	color: var(--warm-black-1);
	text-decoration: none;
}

.button__icon {
	width: 24px;
	height: 24px;
	display: inline-block;

	top: 6px;
    left: 4px;
	position: relative;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("./assets/icons/orange-arrow.svg");
}

/* Footer */

.footer {
	background-color: var(--bitcoin-orange);
	width: 100%;
	height: 150px;
	
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.footer-nav__list {
	list-style: none;
}

.footer-nav__list-item {
	margin: 8px 0;
}

.footer-nav__link {
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 18px;
	color: var(--just-white);
	text-decoration: none;
}