/* =========================================================
   TROPA DO PABLO — design tokens
   ========================================================= */
:root{
  --verde:        #0F5132;
  --verde-escuro: #0A3823;
  --azul:         #13213E;
  --azul-2:       #1B2E52;
  --amarelo:      #F5B700;
  --amarelo-2:    #FFD447;
  --papel:        #FAF7EF;
  --papel-2:      #F1EBDA;
  --texto:        #17170F;
  --texto-suave:  #4A4A3F;
  --branco:       #FFFFFF;

  --fonte-display: 'Anton', sans-serif;
  --fonte-corpo:    'Inter', sans-serif;

  --raio: 14px;
  --sombra: 0 20px 45px -20px rgba(10, 20, 10, 0.35);
  --container: 1120px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--fonte-corpo);
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

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

a{ color: inherit; text-decoration: none; }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Foco visível para acessibilidade */
a:focus-visible, button:focus-visible, select:focus-visible{
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fonte-corpo);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  padding: 16px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.btn:active{ transform: translateY(1px) scale(0.99); }

.btn--primary{
  background: var(--amarelo);
  color: var(--azul);
  box-shadow: 0 10px 24px -8px rgba(245, 183, 0, 0.55);
}
.btn--primary:hover{ background: var(--amarelo-2); box-shadow: 0 14px 30px -8px rgba(245, 183, 0, 0.65); }
.btn--primary:disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn--ghost{
  background: transparent;
  border-color: rgba(250, 247, 239, 0.35);
  color: var(--papel);
}
.btn--ghost:hover{ border-color: var(--amarelo); color: var(--amarelo); }

.btn--small{ padding: 10px 18px; font-size: 14px; }
.btn--block{ width: 100%; }

/* Pulso suave — chama atenção sem ser agressivo */
.btn--pulsa:not(:disabled){
  animation: pulsarBotao 2.6s ease-in-out infinite;
}
.btn--pulsa:not(:disabled):hover{
  animation-play-state: paused;
}
@keyframes pulsarBotao{
  0%, 100%{
    box-shadow: 0 10px 24px -8px rgba(245, 183, 0, 0.55);
  }
  50%{
    box-shadow: 0 14px 36px -4px rgba(245, 183, 0, 0.95);
  }
}

/* =========================================================
   MARCA (reaproveitada no rodapé)
   ========================================================= */
.header__brand{
  font-family: var(--fonte-display);
  font-weight: 400;
  letter-spacing: 0.03em;
  font-size: 20px;
  color: var(--amarelo);
  text-transform: uppercase;
}
.header__brand strong{ color: var(--papel); font-weight: 400; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(5, 20, 10, 0.32) 0%, rgba(5, 20, 10, 0.5) 100%),
    url("../img/fundo-verde.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--papel);
  overflow: hidden;
  padding-top: 88px;
  padding-bottom: 64px;
}
.hero__inner{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  padding-top: 64px;
}
.hero__title{
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 78px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  margin: 0 0 34px;
  text-transform: uppercase;
}
.hero__title-linha1,
.hero__title-linha2{
  display: block;
  animation: subir .7s ease both;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.hero__title-linha1{
  color: var(--papel);
  animation-delay: .05s;
  margin-bottom: 0.22em;
}
.hero__title-linha2{
  color: var(--amarelo);
  animation-delay: .16s;
}
.hero__text .btn{ animation: subir .7s ease both .3s; }
.hero__text .btn--pulsa{
  animation: subir .7s ease both .3s, pulsarBotao 2.6s ease-in-out infinite 1s;
}
.hero__text .btn--pulsa:hover{
  animation-play-state: paused, paused;
}

@keyframes subir{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}

.hero__figure{ display: flex; justify-content: center; }
.hero__photo-frame{
  position: relative;
  width: 100%;
  max-width: 380px;
}
.hero__photo{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--raio);
  border: 6px solid var(--papel);
  box-shadow: var(--sombra);
}

/* =========================================================
   ALISTAMENTO — cartão em formato "carteirinha"
   ========================================================= */
.alistamento{
  background: var(--papel);
  padding: 0 0 96px;
}
.card-alistamento{
  position: relative;
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 48px clamp(24px, 5vw, 56px) 44px;
  margin-top: -56px;
  border: 1px solid var(--papel-2);
}
.card-alistamento__perf{
  position: absolute;
  top: -1px;
  left: 40px;
  right: 40px;
  height: 1px;
  background-image: radial-gradient(circle, var(--papel-2) 2.5px, transparent 2.6px);
  background-size: 16px 1px;
  background-repeat: repeat-x;
}
.card-alistamento__eyebrow{
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde);
  background: rgba(15, 81, 50, 0.08);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.card-alistamento__title{
  font-family: var(--fonte-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.05;
  margin: 0 0 12px;
  color: var(--azul);
}
.card-alistamento__sub{
  font-size: 16px;
  color: var(--texto-suave);
  max-width: 60ch;
  margin: 0 0 32px;
  line-height: 1.6;
}

.form-alistamento{ max-width: 480px; }
.form-alistamento__label{
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--azul);
}
.select-wrap{
  position: relative;
  margin-bottom: 18px;
}
.select-wrap::after{
  content: "▾";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--verde);
  pointer-events: none;
  font-size: 14px;
}
select{
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--fonte-corpo);
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
  background: var(--papel);
  border: 2px solid var(--papel-2);
  border-radius: 10px;
  padding: 16px 44px 16px 18px;
  cursor: pointer;
  transition: border-color .15s ease;
}
select:hover{ border-color: var(--verde); }
select:disabled{ cursor: progress; opacity: .7; }

.form-alistamento__hint{
  font-size: 13px;
  color: var(--texto-suave);
  margin: 14px 0 0;
  min-height: 18px;
}
.form-alistamento__hint[data-state="erro"]{ color: #B3261E; }
.form-alistamento__hint[data-state="ok"]{ color: var(--verde); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background: var(--azul-escuro, var(--verde-escuro)); color: var(--papel); padding: 40px 0; }
.footer__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.header__brand--footer{ font-size: 17px; }
.footer__contato{ display: flex; gap: 22px; flex-wrap: wrap; }
.footer__contato a{ font-size: 14px; opacity: .85; }
.footer__contato a:hover{ opacity: 1; color: var(--amarelo); }
.footer__copy{
  width: 100%;
  margin: 0;
  font-size: 12px;
  opacity: .55;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 16px;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 900px){
  .hero__inner{
    grid-template-columns: 1fr;
    padding-top: 40px;
    text-align: left;
  }
  .hero__figure{ order: -1; margin-bottom: 8px; }
  .hero__photo-frame{ max-width: 280px; margin: 0 auto; }
}

@media (max-width: 560px){
  .container{ padding: 0 18px; }
  .hero__title{ font-size: clamp(38px, 11vw, 52px); }
  .card-alistamento{ padding: 36px 20px 32px; margin-top: -40px; }
  .btn{ font-size: 15px; padding: 15px 22px; }
}