@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/DM_Sans/DMSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/DM_Sans/DMSans-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/DM_Sans/DMSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/DM_Sans/DMSans-Black.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/Inter/Inter-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/Inter/Inter-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/Inter/Inter-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/Inter/Inter-Black.ttf") format("truetype");
}

:root {
  --bitcoin-orange: #f7931a;
  --soft-orange: #ffe9d5;
  --secondary-blue: #1a9af7;
  --soft-blue: #e7f5ff;
  --warm-black: #282623;
  --black: #201e1c;
  --grey: #bababa;
  --off-white: #faf8f7;
  --just-white: #fff;
  --linear-gradient: 207.8deg, #201e1c 16.69%, #f7931a 100%;

  --primary-font: "DM Sans", sans-serif;
  --secondary-font: "Inter", sans-serif;

  --font-size-title: 2.4rem;
  --line-height-title: 2.6rem;
  --font-weight-title: 700;

  --font-size-text: 1.4rem;
  --line-height-text: 1.8rem;
  --font-weight-text: 500;
}

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

html {
  font-size: 62.5%;
}

body {
  min-width: 32rem;
  font-size: 1.6rem;
  font-family: var(--primary-font);
  background-color: var(--off-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* UTILIDADES */

.title {
  text-align: center;
  margin-bottom: 2.4rem;
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-title);
  line-height: var(--line-height-title);
  color: var(--warm-black);
}

.text {
  text-align: center;
  font-size: var(--font-size-text);
  font-weight: var(--font-weight-text);
  line-height: var(--line-height-text);
  color: var(--grey);
}

.container {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* HEADER */

.header {
  position: relative;
  padding: 4rem 0 6rem;
  display: flex;
  justify-content: center;
  background: linear-gradient(var(--linear-gradient));
}

.header__container {
  max-width: 38.2rem;
}

.header__logo {
  margin-bottom: 3.6rem;
}

.header__title {
  color: var(--just-white);
}

.header__text {
  color: var(--soft-orange);
}

.header__button {
  position: absolute;
  bottom: calc(0% - 2.2rem);
  padding: 1.2rem 1.6rem;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  font-size: var(--font-size-text);
  line-height: var(--line-height-text);
  font-weight: 700;
  color: var(--warm-black);
  background-color: var(--off-white);
  box-shadow: 0 0.4rem 0.8rem 0 rgba(89, 73, 30, 0.16);
}

.header__icon {
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 0.8rem;
  display: inline-block;
  background-image: url(../icons/down-arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
}

/* STATUS */

.status {
  padding: 7rem 0;
}

.status__img {
  width: 19.5rem;
  margin: 0 auto 4.4rem;
}

.stattus__content {
  max-width: 38.2rem;
  margin-bottom: 4.8rem;
}

.status__table {
  margin-bottom: 1.6rem;
}

.status__name-table {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.3rem;
  color: #ff9536;
}

.status__td {
  padding: 1rem 1.2rem;
  background-color: white;
}

.status__td--top-left {
  border-top-left-radius: 0.8rem;
}

.status__td--top-right {
  border-top-right-radius: 0.8rem;
}

.status__td--botton-left {
  border-bottom-left-radius: 0.8rem;
}

.status__td--botton-right {
  border-bottom-right-radius: 0.8rem;
}

.stattus__currency {
  font-family: var(--secondary-font);
  font-weight: var(--font-weight-text);
  line-height: 2rem;
  color: #b5b0ac;
}

.status__price {
  font-family: var(--secondary-font);
  font-size: 1.4rem;
  line-height: 1.6rem;
  color: #757575;
}

.status__i {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 1rem;
  display: inline-block;
  background-image: url(../icons/trending-down.svg);
  background-repeat: no-repeat;
}

.status__i--up {
  background-image: url(../icons/trending-up.svg);
}

.status__button {
  padding: 0.8rem;
  border-radius: 0.8rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4rem;
  color: var(--warm-black);
  background-color: var(--soft-orange);
}

/* SERVICIOS */

.servicios {
  padding: 6.4rem 0 4.6rem;
  background-color: var(--black);
}

.servicios__content {
  max-width: 38.2rem;
  margin-bottom: 3.2rem;
}

.servicios__title {
  color: var(--just-white);
}

.servicios__text {
  color: #808080;
}

.servicios__grid {
  max-width: 60rem;
  display: grid;
  gap: 1.6rem;
}

.servicios__servicio {
  padding: 1.6rem 2rem;
  border-radius: 0.4rem;
  background-color: var(--warm-black);
  box-shadow: 0 0 0.8rem 0 rgba(0, 0, 0, 0.16);
}

.servicios__logo {
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 1rem;
}

.servicios__subtitle {
  font-size: 1.8rem;
  line-height: 1.8rem;
  font-weight: 700;
  color: var(--just-white);
  margin-bottom: 1rem;
}

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

/* COMODIN */

.comodin {
  height: 38.7rem;
  padding-top: 6.4rem;
  background-image: url("../img/bitcoinbaby.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

@supports (background-image: url("../img/bitcoinbaby.avif")) {
  .comodin {
    background-image: url("../img/bitcoinbaby.avif");
  }
}

@supports (background-image: url("../img/bitcoinbaby.webp")) {
  .comodin {
    background-image: url("../img/bitcoinbaby.webp");
  }
}

.comodin__title {
  color: var(--just-white);
}

/* PLANES */

.planes {
  padding: 6.4rem 0;
}

.planes__content {
  max-width: 38.2rem;
}

.planes__text {
  color: #757575;
}

.planes__slider {
  width: 100%;
  max-width: 50rem;
  padding: 5.4rem 0 2rem;
  display: flex;
  gap: 0.8rem;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.planes__plan {
  scroll-snap-align: center;
  position: relative;
  width: 19rem;
  padding: 3.1rem 1.6rem 2.4rem;
  border-radius: 0.8rem;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  /* border-radius: 8rem; */
  background-color: white;
  box-shadow: 0 0.4rem 0.8rem 0 rgba(89, 73, 30, 0.16);
}

.planes__titlefloat {
  position: absolute;
  top: calc(0% - 1.5rem);
  padding: 0.8rem;
  border-radius: 0.8rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4rem;
  color: var(--just-white);
  background-color: var(--bitcoin-orange);
}

.planes__titlefloat--blue {
  background-color: #21b8e9;
}

.planes__titlefloat--green {
  background-color: #2eb63b;
}

.planes__subtitle {
  margin-bottom: 0.8rem;
  color: #000;
}

.planes__price {
  margin-bottom: 1.6rem;
  font-family: var(--secondary-font);
  font-size: 5.2rem;
  line-height: 6.2rem;
  font-weight: 700;
}

.planes__icon {
  margin-top: 1rem;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4rem;
  vertical-align: text-top;
}

.planes__copy {
  margin-bottom: 1.6rem;
  font-family: var(--secondary-font);
  font-size: 1.2rem;
  line-height: 1.4rem;
  font-weight: 500;
  text-align: center;
  color: #757575;
}

.planes__buttom {
  padding: 1rem 1.2rem 1rem 1.6rem;
  border-radius: 0.4rem;
  border: 0.2rem solid var(--bitcoin-orange);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.8rem;
  color: var(--warm-black);
  background-color: var(--just-white);
}

.planes__buttom--blue {
  border: 0.2rem solid #21b8e9;
}

.planes__buttom--green {
  border: 0.2rem solid #2eb63b;
}

.planes__iconTwo {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-block;
  background-image: url(../icons/orange-right-arrow.svg);
}