@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* =========================================================
   STRYVEFIT — HOME / HERO
   ========================================================= */

:root {
  --bg: #08090a;

  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.88);
  --text-muted: rgba(255, 255, 255, 0.68);

  --orange: #ff7a1a;
  --orange-strong: #ff6800;
  --orange-light: #ff9b32;

  --orange-soft: rgba(255, 122, 26, 0.15);

  --stroke: rgba(255, 255, 255, 0.13);
  --glass: rgba(17, 17, 18, 0.42);

  --shadow-orange:
    0 14px 34px rgba(255, 106, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.28);

  --radius-pill: 999px;

  --transition: 0.22s ease;
}


/* =========================================================
   RESET
   ========================================================= */

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

html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;

  font-family: 'Inter', sans-serif;

  background: var(--bg);
  color: var(--text);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  font: inherit;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;

  width: 100%;

  /* fallback */
  min-height: 100vh;

  /* melhor para navegadores mobile */
  min-height: 100svh;
  height: 100svh;

  display: flex;
  align-items: stretch;
  justify-content: center;

  overflow: hidden;

  background-image:
    url("./Img/Primeira_pagina-dosite.png");

  background-size: cover;
  background-repeat: no-repeat;

  /*
    Ajuste principal da posição da pessoa/foto.
    Se precisar mover depois, alteramos apenas aqui.
  */
  background-position: center center;
}


/* =========================================================
   SOMBREAMENTO DA IMAGEM
   ========================================================= */

.hero-overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(255, 122, 26, 0.07) 0%,
      transparent 35%
    ),

    linear-gradient(
      to bottom,

      rgba(0, 0, 0, 0.05) 0%,
      rgba(0, 0, 0, 0.10) 18%,
      rgba(0, 0, 0, 0.22) 38%,
      rgba(0, 0, 0, 0.48) 58%,
      rgba(0, 0, 0, 0.78) 76%,
      rgba(0, 0, 0, 0.96) 100%
    );
}


/* =========================================================
   CONTEÚDO
   ========================================================= */

.overlay {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 480px;

  min-height: 100%;

  display: flex;
  flex-direction: column;

  justify-content: flex-end;
  align-items: center;

  text-align: center;

  margin: 0 auto;

  padding:
    max(20px, env(safe-area-inset-top))
    18px
    max(30px, env(safe-area-inset-bottom));
}


/* =========================================================
   LOGO STRYVEFIT
   ========================================================= */

.stryvefit-logo {
  display: block;

  width: clamp(145px, 42vw, 205px);
  max-height: 70px;

  object-fit: contain;

  margin: 0 auto 17px;

  filter:
    drop-shadow(0 5px 14px rgba(0, 0, 0, 0.45));
}


/* =========================================================
   BADGE
   ========================================================= */

.top-badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 16px;

  padding: 8px 15px;

  border-radius: var(--radius-pill);

  border: 1px solid rgba(255, 255, 255, 0.16);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.11),
      rgba(255, 255, 255, 0.055)
    );

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.22);

  font-family: 'Montserrat', sans-serif;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1.05px;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.94);
}


/* =========================================================
   TÍTULO
   ========================================================= */

.titulo {
  width: 100%;
  max-width: 410px;

  margin-bottom: 14px;

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(32px, 9vw, 44px);

  font-weight: 900;

  line-height: 0.99;

  letter-spacing: -1.5px;

  color: var(--text);

  text-wrap: balance;

  text-shadow:
    0 3px 10px rgba(0, 0, 0, 0.40),
    0 12px 32px rgba(0, 0, 0, 0.40);
}

.titulo span {
  color: var(--orange);

  text-shadow:
    0 5px 20px rgba(255, 106, 0, 0.20);
}


/* =========================================================
   SUBTÍTULO
   ========================================================= */

.subtitulo {
  width: 100%;
  max-width: 345px;

  margin-bottom: 10px;

  font-size: 14.5px;
  font-weight: 400;

  line-height: 1.55;

  color: var(--text-soft);

  text-wrap: balance;

  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.55);
}


/* =========================================================
   TEMPO
   ========================================================= */

.tempo {
  margin-bottom: 22px;

  font-family: 'Montserrat', sans-serif;

  font-size: 12.5px;
  font-weight: 700;

  letter-spacing: 0.15px;

  color: #ffb77f;
}


/* =========================================================
   BOTÃO PRINCIPAL
   ========================================================= */

.botao {
  position: relative;

  width: 100%;
  max-width: 325px;

  min-height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 24px;

  border: 0;

  border-radius: var(--radius-pill);

  cursor: pointer;

  background:
    linear-gradient(
      135deg,
      var(--orange-strong) 0%,
      var(--orange) 52%,
      var(--orange-light) 100%
    );

  color: #ffffff;

  font-family: 'Montserrat', sans-serif;

  font-size: 17px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.25px;

  box-shadow:
    var(--shadow-orange),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);

  transition:
    transform var(--transition),
    filter var(--transition),
    box-shadow var(--transition);
}

.botao::before {
  content: "";

  position: absolute;
  inset: 1px;

  border-radius: inherit;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12),
      transparent 45%
    );
}


/* Desktop hover */
@media (hover: hover) {

  .botao:hover {
    transform: translateY(-2px);

    filter: brightness(1.04);

    box-shadow:
      0 18px 42px rgba(255, 106, 0, 0.34),
      0 7px 18px rgba(0, 0, 0, 0.30);
  }
}

.botao:active {
  transform: scale(0.98);
}

.botao:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 4px;
}


/* =========================================================
   CELULARES MÉDIOS
   ========================================================= */

@media (max-width: 480px) {

  .hero {
    background-position: center center;
  }

  .overlay {
    max-width: 430px;

    padding-left: 16px;
    padding-right: 16px;

    padding-bottom:
      max(27px, env(safe-area-inset-bottom));
  }

  .stryvefit-logo {
    width: clamp(140px, 42vw, 185px);
    margin-bottom: 14px;
  }

  .top-badge {
    margin-bottom: 14px;

    padding: 7px 13px;

    font-size: 9.5px;
  }

  .titulo {
    max-width: 360px;

    font-size: clamp(31px, 9.2vw, 39px);

    line-height: 1.01;

    margin-bottom: 13px;
  }

  .subtitulo {
    max-width: 325px;

    font-size: 13.5px;

    line-height: 1.5;
  }

  .tempo {
    margin-bottom: 20px;

    font-size: 12px;
  }

  .botao {
    max-width: 315px;

    min-height: 58px;

    font-size: 16.5px;
  }
}


/* =========================================================
   CELULARES PEQUENOS
   ========================================================= */

@media (max-width: 390px) {

  .overlay {
    padding-left: 14px;
    padding-right: 14px;

    padding-bottom:
      max(24px, env(safe-area-inset-bottom));
  }

  .stryvefit-logo {
    width: 150px;

    margin-bottom: 12px;
  }

  .top-badge {
    margin-bottom: 12px;

    font-size: 9px;

    padding: 7px 12px;
  }

  .titulo {
    max-width: 325px;

    font-size: 32px;

    line-height: 1.02;

    letter-spacing: -1.1px;

    margin-bottom: 12px;
  }

  .subtitulo {
    max-width: 295px;

    font-size: 13px;
  }

  .tempo {
    margin-bottom: 18px;

    font-size: 11.5px;
  }

  .botao {
    max-width: 290px;

    min-height: 55px;

    font-size: 15.5px;
  }
}


/* =========================================================
   CELULARES MUITO PEQUENOS
   ========================================================= */

@media (max-width: 350px) {

  .stryvefit-logo {
    width: 135px;
  }

  .titulo {
    font-size: 29px;

    max-width: 290px;
  }

  .subtitulo {
    font-size: 12.5px;

    max-width: 270px;
  }

  .botao {
    min-height: 53px;

    font-size: 15px;
  }
}


/* =========================================================
   TELAS BAIXAS
   IMPORTANTE PARA LDPLAYER / CELULARES
   ========================================================= */

@media (max-height: 720px) {

  .overlay {
    padding-bottom:
      max(20px, env(safe-area-inset-bottom));
  }

  .stryvefit-logo {
    width: 135px;

    margin-bottom: 10px;
  }

  .top-badge {
    margin-bottom: 10px;

    padding-top: 6px;
    padding-bottom: 6px;
  }

  .titulo {
    font-size: clamp(28px, 8vw, 34px);

    margin-bottom: 9px;
  }

  .subtitulo {
    font-size: 12.5px;

    line-height: 1.4;

    margin-bottom: 7px;
  }

  .tempo {
    margin-bottom: 14px;

    font-size: 11px;
  }

  .botao {
    min-height: 52px;

    font-size: 15px;
  }
}


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 768px) {

  .hero {
    background-position: center 30%;
  }

  .overlay {
    max-width: 580px;

    padding-bottom: 48px;
  }

  .stryvefit-logo {
    width: 200px;

    margin-bottom: 20px;
  }

  .top-badge {
    font-size: 11px;

    margin-bottom: 18px;
  }

  .titulo {
    font-size: 53px;

    max-width: 520px;

    line-height: 1;
  }

  .subtitulo {
    max-width: 420px;

    font-size: 16px;
  }

  .tempo {
    font-size: 13px;

    margin-bottom: 25px;
  }

  .botao {
    max-width: 345px;

    min-height: 62px;

    font-size: 18px;
  }
}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}