/* Fontes locais: a página funciona sem serviços externos de fontes. */
@font-face {
  font-family: "Changa One";
  src: url("assets/changa-one.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("assets/barlow-black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("assets/barlow-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("assets/roboto-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --black: #000000;
  --white: #ffffff;
  --purple: #9200ff;
  --yellow: #fff000;
  --whatsapp: #51b94c;
  --scroll-thumb: #77717f;
  --scroll-hover: #ada4b6;
  --scroll-active: #ffffff;
  --scroll-track: #151219;
  /* A referência mede 800 × 450. A unidade escala sua composição. */
  --u: min(0.125vw, 2px);
  font-family: "Roboto", Arial, sans-serif;
  background: var(--black);
  color: var(--white);
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: thin;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

h1, h2, p { margin: 0; }

.welcome {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(392 * var(--u));
  padding: calc(29 * var(--u)) 24px calc(24 * var(--u));
  background-image: url("assets/academia-fundo.png");
  background-size: cover;
  background-position: center top;
}

/* Escurecimento leve para manter o contraste do texto sobre a fotografia. */
.welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 16%);
}

.welcome__content { width: 100%; text-align: center; }

.brand { display: flex; justify-content: center; }

.brand__logo {
  display: block;
  width: calc(228 * var(--u));
  height: calc(64 * var(--u));
  object-fit: cover;
  object-position: center 40%;
  mix-blend-mode: screen;
}

.greeting { margin-top: calc(25 * var(--u)); }

.greeting__title {
  font-family: "Changa One", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: calc(92 * var(--u));
  line-height: calc(84 * var(--u));
  letter-spacing: calc(0.2 * var(--u));
}

.greeting__subtitle {
  margin-top: calc(3 * var(--u));
  font-family: "Barlow", Arial, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: calc(22 * var(--u));
  letter-spacing: calc(2.5 * var(--u));
}

.greeting__subtitle > span { display: block; }

.notice {
  position: relative;
  width: min(100%, calc(584 * var(--u)));
  min-height: calc(72 * var(--u));
  margin: calc(47 * var(--u)) auto 0;
  padding: calc(19 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u));
  border: calc(2 * var(--u)) solid var(--purple);
  border-radius: calc(22 * var(--u));
}

.notice__title {
  position: absolute;
  top: calc(-19 * var(--u));
  left: 50%;
  display: grid;
  place-items: center;
  min-width: calc(184 * var(--u));
  height: calc(34 * var(--u));
  padding-inline: calc(17 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--purple);
  transform: translateX(-50%) skewX(27deg);
  font-family: "Barlow", "Arial Black", sans-serif;
  font-size: calc(22 * var(--u));
  font-weight: 900;
  line-height: 1;
  letter-spacing: calc(2.3 * var(--u));
}

.notice__title > span { transform: skewX(-27deg); }

.notice__message {
  font-size: calc(16 * var(--u));
  line-height: calc(18 * var(--u));
  font-weight: 400;
}

.notice__message > span { display: block; }

.support {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(58 * var(--u));
  padding: calc(5 * var(--u)) 16px calc(9 * var(--u));
  background: var(--black);
}

.support__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  min-height: 44px;
  border-radius: 8px;
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease;
}

.support__text {
  font-family: "Changa One", "Arial Black", sans-serif;
  font-size: calc(21.4 * var(--u));
  font-weight: 400;
  line-height: calc(22 * var(--u));
  text-align: right;
}

.support__text > span { display: block; }

.support__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 50%;
  background: var(--whatsapp);
  transition: background-color 160ms ease, transform 160ms ease;
}

.support__icon img {
  display: block;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  filter: brightness(0) invert(1);
}

.support__link:hover { color: var(--yellow); }
.support__link:hover .support__icon { background: #3fa53a; transform: scale(1.05); }
.support__link:active .support__icon { transform: scale(0.96); }
.support__link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 6px; }

/* Celular: reorganiza os blocos sem encolher a legibilidade da página. */
@media (max-width: 650px) {
  :root { --u: 1px; }

  .welcome {
    min-height: 570px;
    padding: 40px 22px 44px;
    background-position: 53% center;
  }

  .welcome::before { background: rgb(0 0 0 / 35%); }
  .brand__logo { width: 228px; max-width: 75%; }
  .greeting { margin-top: 40px; }

  .greeting__title {
    font-size: clamp(42px, 11vw, 70px);
    line-height: 1.05;
    letter-spacing: 0;
  }

  .greeting__subtitle {
    max-width: 410px;
    margin: 14px auto 0;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 1.6px;
    text-wrap: balance;
  }

  .notice {
    max-width: 460px;
    margin-top: 48px;
    padding: 30px 18px 22px;
    border-radius: 22px;
  }

  .notice__title { font-size: 20px; }
  .notice__message { font-size: 16px; line-height: 1.5; text-wrap: pretty; }
  .notice__message > span { display: inline; }
  .support { min-height: 100px; padding: 18px 20px; }
  .support__link { gap: 14px; }
  .support__text { font-size: clamp(14px, 4vw, 19px); line-height: 1.25; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--scroll-track); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }
::-webkit-scrollbar-thumb:active { background: var(--scroll-active); }

@media (prefers-reduced-motion: reduce) {
  .support__link, .support__icon { transition: none; }
}

@media (forced-colors: active) {
  :root { scrollbar-color: auto; }
  .notice, .support__icon { border-color: CanvasText; }
  .support__link:focus-visible { outline-color: Highlight; }
}