/* Inter (OFL), servida daqui: sem Google Fonts, o IP do visitante nao vai pra terceiro. So o subconjunto latin, que cobre o portugues. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fontes/inter-latin.woff2) format("woff2");
}

:root {
  --verde: #0d423d;
  --verde-escuro: #0a3531;
  --cinza-texto: #999999;
  --cinza-medio: #777777;
  --cinza-card: #f4f4f4;
  --cinza-campo: #eeeeee;
  --linha: #eeeeee;
  --branco: #ffffff;
  --erro: #b42318;
  --raio: 20px;
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--branco);
  color: var(--cinza-medio);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* height:auto pra o aspect-ratio vencer o atributo height (que fica so pra reservar espaco). */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 16px; }
.wrap-estreito { max-width: 770px; }
.wrap-largo { max-width: 1366px; padding: 0 20px; }
hr.divisor { border: 0; border-top: 1px solid var(--linha); margin: 60px auto; max-width: 770px; }
.wrap-largo + hr.divisor, hr.divisor.largo { max-width: none; }

.titulo {
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--verde);
  margin: 0;
}
.subtitulo { color: var(--cinza-texto); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; margin: 0; }

/* Topo */
.topo { display: flex; justify-content: center; gap: 40px; padding: 18px 16px 0; }
.topo a { color: var(--verde); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.topo a:hover { opacity: .75; }

/* Hero */
.hero { text-align: center; padding: 80px 16px 0; }
.hero .logo { width: 360px; max-width: 80%; margin: 0 auto 64px; }
.hero h1 { font-size: 48px; }
.hero h1 + p.subtitulo { font-size: 40px; }
.hero .apoio { max-width: 360px; margin: 40px auto 36px; font-size: 20px; color: var(--cinza-texto); line-height: 1.2; }
.botao-pilula {
  display: inline-block; background: var(--verde); color: var(--branco);
  font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
}
.botao-pilula:hover { background: var(--verde-escuro); }

.foto-dra { width: 100%; max-width: 730px; aspect-ratio: 730 / 600; object-fit: cover; object-position: center 20%; border-radius: 10px; margin: 0 auto; }
.descubra { text-align: center; font-size: 40px; margin-top: 40px; }

/* Recompensas */
.recompensas { text-align: center; }
.recompensas h2 { font-size: 32px; }
.recompensas h2 + p.subtitulo { font-size: 32px; }
.recompensas .apoio { margin: 32px 0 24px; font-size: 20px; color: var(--cinza-texto); }

.card {
  background: var(--cinza-card); border-radius: var(--raio); padding: 20px;
  display: flex; flex-direction: column; text-align: left;
}
.card .nivel { font-size: 14px; color: var(--cinza-medio); margin: 6px 0 14px; }
.card h3 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; color: var(--verde); margin: 0 0 18px; font-weight: 600; }
.card ul { list-style: none; padding: 0; margin: 0 0 auto; }
.card li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.4; margin-bottom: 6px; color: var(--cinza-medio); }
.card li::before {
  content: ""; position: absolute; left: 2px; top: 4px; width: 10px; height: 5px;
  border-left: 1.5px solid #8a8a8a; border-bottom: 1.5px solid #8a8a8a; transform: rotate(-45deg);
}
.card .botao {
  display: block; margin-top: 70px; background: var(--verde); color: var(--branco); text-align: center;
  font-weight: 600; font-size: 16px; padding: 13px; border-radius: 8px;
}
.card .botao:hover { background: var(--verde-escuro); }

.card-destaque { max-width: 500px; margin: 0 auto 26px; }
.card-destaque .nivel { text-align: center; font-size: 19px; margin-bottom: 30px; }
.card-destaque h3 { text-align: center; font-size: 72px; letter-spacing: -0.02em; margin-bottom: 40px; font-weight: 700; }
.card-destaque li { font-size: 27px; padding-left: 42px; margin-bottom: 10px; }
.card-destaque li::before { width: 16px; height: 8px; top: 12px; left: 4px; }
.card-destaque .botao { margin-top: 100px; }

.grade-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; max-width: 770px; margin: 0 auto; }

/* Fotos dos premios */
.galeria { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.galeria img { width: 100%; aspect-ratio: 467 / 400; object-fit: cover; border-radius: var(--raio); }
.galeria .grande { grid-column: 1 / -1; aspect-ratio: 960 / 720; object-position: center 70%; }
.legenda { text-align: center; font-size: 12px; color: var(--cinza-texto); margin: 24px 0 0; }

/* Como funciona */
.passos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.passo-texto { display: flex; flex-direction: column; justify-content: center; padding: 0 48px; }
.passo-texto h3 { font-size: 26px; margin-bottom: 14px; }
.passo-texto p { margin: 0; font-size: 20px; color: var(--cinza-texto); line-height: 1.3; max-width: 400px; }
.passo-texto.direita { align-items: flex-end; text-align: right; }
.passos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; }

/* Quem pode participar */
.familia { width: 100%; aspect-ratio: 1326 / 580; object-fit: cover; border-radius: var(--raio); }
.quem-pode h3 { color: var(--verde); font-size: 15px; font-weight: 500; margin: 32px 0 10px; }
.quem-pode p { margin: 0; font-size: 17px; max-width: 650px; line-height: 1.4; }

/* Formulario */
.indique { text-align: center; scroll-margin-top: 24px; }
.indique h2 { font-size: 48px; }
.indique h2 + p.subtitulo { font-size: 32px; margin-bottom: 24px; }
form.formulario { max-width: 400px; margin: 0 auto; text-align: left; }
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 18px; font-weight: 500; color: var(--cinza-texto); margin-bottom: 10px; }
.campo input, .campo textarea {
  width: 100%; border: 1px solid transparent; background: var(--cinza-campo); border-radius: 10px;
  padding: 22px 12px; font: inherit; font-size: 16px; color: #333; outline: none;
}
.campo textarea { min-height: 150px; resize: vertical; padding-top: 14px; }
.campo input::placeholder, .campo textarea::placeholder { color: #999; font-size: 14px; font-weight: 500; }
.campo input:focus, .campo textarea:focus { border-color: var(--verde); background: #f6f6f6; }
.campo.invalido input { border-color: var(--erro); }
.campo .msg-erro { display: none; color: var(--erro); font-size: 13px; margin-top: 6px; }
.campo.invalido .msg-erro { display: block; }
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lgpd { font-size: 12px; color: var(--cinza-texto); margin: 4px 0 14px; line-height: 1.4; }
.lgpd a { text-decoration: underline; }
button.enviar {
  width: 100%; border: 0; border-radius: 8px; background: var(--verde); color: var(--branco);
  font: inherit; font-weight: 600; font-size: 15px; padding: 20px; cursor: pointer;
}
button.enviar:hover { background: var(--verde-escuro); }
button.enviar:disabled { opacity: .6; cursor: wait; }
.aviso { display: none; margin-top: 14px; padding: 14px; border-radius: 10px; font-size: 15px; }
.aviso.erro { display: block; background: #fdecea; color: var(--erro); }
.sucesso { display: none; max-width: 400px; margin: 0 auto; background: var(--cinza-card); border-radius: var(--raio); padding: 32px 24px; text-align: center; }
.sucesso.visivel { display: block; }
.sucesso h3 { color: var(--verde); font-size: 26px; margin: 0 0 10px; letter-spacing: -0.02em; }
.sucesso p { margin: 0 0 18px; }
.sucesso button { background: none; border: 1px solid var(--verde); color: var(--verde); border-radius: 8px; padding: 10px 16px; font: inherit; cursor: pointer; }

/* FAQ */
.faq { max-width: 340px; margin: 0 auto; padding: 60px 0; }
.faq details { background: var(--cinza-campo); border-radius: 8px; margin-bottom: 6px; }
.faq summary {
  list-style: none; cursor: pointer; padding: 10px 12px 10px 40px; position: relative;
  color: #000; font-size: 15px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; position: absolute; left: 13px; top: 5px; font-size: 22px; color: #777; font-weight: 300; transition: transform .2s; }
.faq details[open] summary::before { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 14px 14px 40px; font-size: 14px; line-height: 1.45; }

/* Rodape */
.rodape { display: flex; justify-content: center; gap: 40px; padding: 40px 16px 90px; font-size: 15px; flex-wrap: wrap; }
.rodape h4 { margin: 0 0 6px; color: var(--verde); font-weight: 500; font-size: 15px; }
.rodape a, .rodape span { display: block; color: var(--cinza-texto); margin-bottom: 4px; line-height: 1.2; }
.rodape a:hover { color: var(--verde); }
.rodape .endereco span { max-width: 300px; }

/* Regulamento */
.regulamento { max-width: 960px; margin: 0 auto; padding: 24px 16px 80px; text-align: center; color: #555; }
.regulamento .voltar { display: inline-block; color: var(--cinza-texto); font-size: 18px; margin-bottom: 20px; }
.regulamento .voltar:hover { color: var(--verde); }
.regulamento h1 { color: var(--verde); font-size: 18px; font-weight: 600; margin: 0 0 18px; }
.regulamento p { margin: 0 0 18px; line-height: 1.6; white-space: pre-line; }
.regulamento p.secao { font-weight: 600; margin-top: 26px; }
.regulamento ul { text-align: left; max-width: 820px; margin: 0 auto; padding-left: 20px; line-height: 1.6; }
.regulamento li { margin-bottom: 10px; }

/* Responsivo */
@media (max-width: 809px) {
  .topo { gap: 22px; }
  .topo a { font-size: 18px; }
  .hero { padding-top: 48px; }
  .hero .logo { margin-bottom: 40px; }
  .hero h1 { font-size: 36px; }
  .hero h1 + p.subtitulo { font-size: 30px; }
  .descubra { font-size: 30px; }
  .recompensas h2, .recompensas h2 + p.subtitulo { font-size: 26px; }
  .recompensas .apoio { font-size: 17px; }
  .grade-cards, .galeria { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .galeria .grande { aspect-ratio: 4 / 5; }
  .card-destaque h3 { font-size: 54px; }
  .card-destaque li { font-size: 20px; padding-left: 34px; }
  .card-destaque li::before { top: 8px; }
  .card .botao, .card-destaque .botao { margin-top: 40px; }
  .passos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .passo-texto, .passo-texto.direita { padding: 36px 4px 20px; align-items: flex-start; text-align: left; }
  .passos .ordem-1 { order: 1; } .passos .ordem-2 { order: 2; } .passos .ordem-3 { order: 3; }
  .passos .ordem-4 { order: 4; } .passos .ordem-5 { order: 5; } .passos .ordem-6 { order: 6; }
  .familia { aspect-ratio: 4 / 3; }
  .indique h2 { font-size: 38px; }
  .indique h2 + p.subtitulo { font-size: 24px; }
  .rodape { justify-content: flex-start; gap: 28px; }
  hr.divisor { margin: 44px auto; }
}