* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

* {
  scroll-behavior: smooth;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
  text-decoration: none;
}

:root {
  --color-primario: #09a6df;
  --color-secundario: #122a4b;
  --color-black: #1a141f;
  --color-hint-text: #4b3a5a;
  --color-border: #aba7af;
  --color-disabled: #d4d2d5;
  --color-spacer: #d9d1e0;
  --color-spacer-light: #e5e0eb;
  --color-bg-light-grey: #f5f3f7;
  --color-white: #ffffff;
}

body {
  width: 100%;
  min-height: 100vh;
  background: var(--color-bg-light-grey);
}

#root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

h1 {
  font: 500 2.75rem / 1.28 'Poppins';
  color: var(--color-black);
}

h2 {
  font: 500 1.875rem / 1.2 'Poppins';
  color: var(--color-secundario);
}

h3 {
  font: 600 1.375rem / 1.24 'Poppins';
  color: var(--texto-principal);
}

h4 {
  font: 700 1.125rem / 1.32 'Poppins';
  color: var(--texto-secundario);
}

p {
  font: 400 1.375rem / 1.44 'Poppins';
  color: var(--texto-principal);
}

span,
label {
  font: 300 1.125rem / 1.32 'Poppins';
  color: var(--texto-secundario);
}

input,
textarea {
  font: 600 1rem / 1.32 'Poppins';
  color: var(--borde-medio);
}

*::-webkit-scrollbar {
  width: 4px;
  -webkit-appearance: none;
}

*::-webkit-scrollbar-thumb {
  background-color: #7979799e;
  border-radius: 50px;
  border: 0px solid var(--color-spacer-light);
}

@media (max-width: 1200px) {
  h1 {
    font: 500 2rem / 1.24 'Poppins';
  }

  h2 {
    font: 500 1.5rem / 1.28 'Poppins';
  }

  h3 {
    font: 600 1.375rem / 1.24 'Poppins';
  }

  h4 {
    font: 700 1.125rem / 1.32 'Poppins';
  }
}

@media (max-width: 992px) {
  h1 {
    font: 600 1.8125rem / 1.24 'Poppins';
  }

  h2 {
    font: 600 1.375rem / 1.28 'Poppins';
  }

  h3 {
    font: 700 1.1875rem / 1.28 'Poppins';
  }

  h4 {
    font: 700 1rem / 1.28 'Poppins';
  }
}

@media (max-width: 768px) {
  h1 {
    font: 600 1.625rem / 1.24 'Poppins';
  }

  h2 {
    font: 600 1.25rem / 1.28 'Poppins';
  }

  h3 {
    font: 700 1.1875rem / 1.28 'Poppins';
  }

  h4 {
    font: 700 1rem / 1.28 'Poppins';
  }
}

@media (max-width: 576px) {
  h1 {
    font: 600 1.5rem / 1.24 'Poppins';
  }

  h2 {
    font: 600 1.25rem / 1.28 'Poppins';
  }

  h3 {
    font: 700 1rem / 1.28 'Poppins';
  }

  h4 {
    font: 700 0.875rem / 1.28 'Poppins';
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primario: #09a6df;
    --color-secundario: #122a4b;
    --color-black: #1a141f;
    --color-hint-text: #4b3a5a;
    --color-border: #aba7af;
    --color-disabled: #d4d2d5;
    --color-spacer: #d9d1e0;
    --color-spacer-light: #e5e0eb;
    --color-bg-light-grey: #f5f3f7;
    --color-white: #ffffff;
  }
}

.fi {
  line-height: 0 !important;
}

.suspended-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    linear-gradient(135deg, rgba(9, 166, 223, 0.12), rgba(18, 42, 75, 0.08)),
    var(--color-bg-light-grey);
}

.suspended-notice {
  width: min(100%, 680px);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--color-white);
  border-top: 8px solid var(--color-primario);
  border-radius: 10px;
  box-shadow: rgba(18, 42, 75, 0.16) 0 16px 40px;
}

.suspended-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--color-primario);
  border-radius: 999px;
}

.suspended-brand > img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.suspended-brand > span {
  font: 700 1.375rem / 1.2 'Poppins', sans-serif;
  color: var(--color-white);
}

.suspended-notice > h1 {
  max-width: 560px;
  font: 700 2.25rem / 1.2 'Poppins', sans-serif;
  color: var(--color-secundario);
}

@media (max-width: 576px) {
  .suspended-notice {
    min-height: 280px;
    padding: 2rem 1.25rem;
  }

  .suspended-brand {
    gap: 0.75rem;
    padding: 0.625rem 1rem;
  }

  .suspended-brand > img {
    width: 44px;
    height: 44px;
  }

  .suspended-brand > span {
    font-size: 1.125rem;
  }

  .suspended-notice > h1 {
    font-size: 1.625rem;
  }
}