/* poppins-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 200;
  src: url("./fonts/poppins-v23-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/poppins-v23-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/poppins-v23-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* Primary */
  --red: hsl(0, 78%, 62%);
  --cyan: hsl(180, 62%, 55%);
  --orange: hsl(34, 97%, 64%);
  --blue: hsl(212, 86%, 64%);

  /* Neutral */
  --grey500: hsl(234, 12%, 34%);
  --grey400: hsl(212, 6%, 44%);
  --white: hsl(0, 0%, 100%);

  --font-family: "Poppins", Arial, Helvetica, sans-serif;
  --font-weight-200: 200;
  --font-weight-regular: 400;
  --font-weight-600: 600;
  --font-size-15: 0.9375rem;

  --box-shadow: 0 0.625rem 2.1875rem rgba(84, 158, 242, 0.19),
    0 0.375rem 0.9375rem rgba(0, 0, 0, 0.15);

  --border-size-5px: 0.3125rem; /* 5px */
  --m-24px: 1.5rem; /* 24px */
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  background-color: var(--white);
}

h1,
h2,
p {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 90.625rem; /* 1450px */
  margin: 0 auto;
  padding: 0 1rem;
}

.header {
  padding: 3.875rem 2rem;
}

.header__title {
  font-size: 2rem;
  font-weight: var(--font-weight-200);
  color: var(--grey400);
  text-align: center;
  margin-bottom: var(--m-24px);

  @media (min-width: 48rem) {
    max-width: 31.25rem; /* 500px */
    padding: 0 2.5rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.header__title--span {
  font-weight: var(--font-weight-600);
  color: var(--grey500);
}

.header__text {
  font-size: var(--font-size-15);
  text-align: center;
  color: var(--grey400);

  @media (min-width: 48rem) {
    max-width: 31.875rem; /* 510px */
    margin-left: auto;
    margin-right: auto;
  }
}

.main {
  display: grid;
  gap: 2rem;
  padding: 0 2rem 2rem 5rem;
  width: 100%;

  @media (min-width: 68.75rem) {
    grid-template-columns: repeat(3, minmax(10rem, 1fr));
  }
}

.card {
  padding: 2rem;
  border-radius: 0.75rem;
  background-color: var(--white);
  box-shadow: var(--box-shadow);
  width: 100%;
}

.card__title {
  font-size: 1.25rem;
  font-weight: var(--font-weight-600);
  color: var(--grey500);
  margin-bottom: 1rem;
}
.card__text {
  font-size: var(--font-size-15);
  color: var(--grey400);
  margin-bottom: 2.25rem;
}

.card__image {
  width: 4.6875rem; /* 75px */
  height: 4.6875rem; /* 75px */
  display: block;
  margin-left: auto;
  margin-bottom: 2rem;
}

.supervisor {
  border-top: var(--border-size-5px) solid var(--cyan);

  @media (min-width: 68.75rem) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    align-self: center;
  }
}
.builder {
  border-top: var(--border-size-5px) solid var(--red);

  @media (min-width: 68.75rem) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
}
.karma {
  border-top: var(--border-size-5px) solid var(--orange);

  @media (min-width: 68.75rem) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
}
.calculator {
  border-top: var(--border-size-5px) solid var(--blue);

  @media (min-width: 68.75rem) {
    grid-column: 3 / 4;
    grid-row: 1 / 3; /* Ocupa dos filas para alinearse como en la imagen */
    align-self: center;
  }
}