/*
 * Identidade visual Cadu
 * Fonte: brief da campanha "Cadu no Siará Tech Summit 2026"
 *
 * Breakpoints: 640px (sm), 1024px (lg). O formulário usa container query
 * a partir de 28rem para pôr os campos em duas colunas.
 */

@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-navy: #003b6a; /* hero e rodapé */
  --color-blue: #0b4e85; /* azul de apoio */
  --color-logo-blue: #27609d; /* texto da logo */
  --color-coral: #f77453; /* destaques */
  --color-coral-light: #ff8b69; /* destaques (hover/realce) */
  --color-button: #c9482b; /* botão principal */
  --color-button-hover: #b33d22;
  --color-bg: #fafafa; /* fundo claro */
  --color-text: #16181d; /* texto principal */
  --color-text-secondary: #4e535c; /* texto secundário */
  --color-border: #e4e7ec; /* bordas */

  /* Tons de apoio vindos do mockup desktop (Landing — desktop) */
  --color-cream: #f3f1ea; /* texto sobre o navy */
  --color-steel: #3e6c94; /* borda do selo / hover de links */
  --color-mist: #c9d0db; /* texto secundário sobre o navy */
  --color-muted: #5a5f69; /* eyebrows e textos de apoio */
  --color-input-border: #868d98; /* 3,35:1 no branco (WCAG 1.4.11) */
  --color-divider: #dde1e7;
  --color-placeholder: #f0f2f5; /* fundo da foto do produto */
  --color-ink: #0a0a0a; /* texto sobre o coral */
  --color-error: #b42318;

  --font-sans: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  height: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

ol {
  list-style: none;
}

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

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

button {
  cursor: pointer;
  background: none;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--color-steel);
}

/*
 * Foco visível consistente em toda a página. O coral não chega a 3:1 no
 * branco, então o anel é navy nas superfícies claras e coral sobre o navy.
 * Cada bloco declara sua superfície com data-surface; vale o ancestral mais próximo.
 */
[data-surface="dark"] {
  --focus-ring: var(--color-coral-light);
}
[data-surface="light"] {
  --focus-ring: var(--color-navy);
}
:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-navy));
  outline-offset: 2px;
}
/* tabindex="-1" só recebe foco por código (ex.: título da confirmação, para o
   leitor de tela anunciar): não é interativo, então não ganha anel. */
[tabindex="-1"]:focus-visible {
  outline: none;
}

/* ---------- Hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px 20px 64px;
  background: var(--color-navy);
  color: var(--color-cream);
}

.hero-topo,
.hero-grid {
  width: 100%;
  max-width: 1248px;
  margin-inline: auto;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 40px;
}

.hero-texto {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.selo {
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px solid var(--color-steel);
  border-radius: 9999px;
  color: var(--color-coral-light);
  font-size: 14px;
  line-height: 20px;
}

.hero h1 {
  font-size: 44px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero-sub {
  color: var(--color-mist);
  font-size: 18px;
  line-height: 1.55;
}

.cartao-form {
  scroll-margin-top: 24px;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  color: var(--color-text);
}

/* ---------- Formulário ---------- */

.form-wrap {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-titulo {
  font-size: 26px;
  font-weight: 700;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo > label,
.simnao legend {
  color: var(--color-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.form-duas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 24px;
}

.input {
  width: 100%;
  height: 48px;
  padding-inline: 14px;
  border: 1px solid var(--color-input-border);
  border-radius: 10px;
  background: #fff;
  color: var(--color-text);
  font-size: 16px;
  transition: border-color 150ms, background-color 150ms;
}
.input::placeholder {
  color: rgb(90 95 105 / 0.7);
}
.input:hover {
  border-color: var(--color-steel);
}
.input:focus-visible {
  border-color: var(--color-navy);
}
.input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.select-wrap {
  position: relative;
}
.select {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.select:invalid {
  color: rgb(90 95 105 / 0.7);
}
.select option {
  color: var(--color-text);
}
.select-seta {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
}

.simnao {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.simnao legend {
  margin-bottom: 6px;
}
.simnao-opcoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.opcao:has(:checked) {
  border-color: var(--color-navy);
  background: rgb(0 59 106 / 0.05);
}
.com-erro .opcao {
  border-color: var(--color-error);
}
.opcao input,
.checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--color-navy);
}

@container (min-width: 28rem) {
  .form-duas {
    grid-template-columns: 1fr 1fr;
  }
  /* Em duas colunas, reserva duas linhas: as perguntas têm tamanhos
     diferentes e os botões de Sim/Não ficam alinhados lado a lado. */
  .simnao legend {
    min-height: 2lh;
  }
}

.erro {
  color: var(--color-error);
  font-size: 13px;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

.aceite {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aceite-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.45;
}
.checkbox {
  margin-top: 1px;
}
.aceite .erro {
  padding-left: 30px;
}

.alerta {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgb(180 35 24 / 0.1);
  color: var(--color-error);
  font-size: 14px;
}

.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  border-radius: 12px;
  background: var(--color-button);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms;
}
.botao:hover {
  background: var(--color-button-hover);
  color: #fff;
}
.botao-enviar {
  margin-top: 8px;
}
.botao:disabled {
  cursor: wait;
  opacity: 0.8;
}
.spinner {
  width: 20px;
  height: 20px;
  animation: girar 1s linear infinite;
}
@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Seções claras (só com sorteio autorizado) ---------- */

/* O ritmo vertical das seções vem daqui (80px / 112px), não do padding de cada seção. */
.secoes-claras {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: 80px;
}

.secao {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 20px;
}

.secao-cabeca {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}

.eyebrow {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.secao-titulo {
  font-size: 36px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.secao-sub {
  max-width: 65ch;
  color: var(--color-text-secondary);
  font-size: 18px;
  line-height: 1.6;
}

.botao-cta {
  width: 100%;
  margin-top: 12px;
  padding-inline: 32px;
}

.passos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.passo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: #fff;
}
.passo-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: var(--color-coral-light);
  color: var(--color-navy);
  font-size: 24px;
  font-weight: 700;
}
.passo-texto {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.passo-texto h3 {
  color: var(--color-text);
  font-size: 22px;
  font-weight: 700;
}
.passo-texto p {
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- Prêmios ---------- */

.metas {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.meta {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.meta-cabeca {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-divider);
}
.meta-cabeca h3 {
  color: var(--color-text);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* No celular, carrossel com rolagem horizontal que vai até a borda da tela e
   deixa o próximo card à mostra; do sm em diante, grade. */
.premios-lista {
  display: flex;
  gap: 16px;
  margin-inline: -20px;
  padding-inline: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
}
.premios-lista::-webkit-scrollbar {
  display: none;
}
.premio-slot {
  display: flex;
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: start;
}
.premio-slot-parcial {
  width: 82%;
}
.premio {
  width: 100%;
}
.premio-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
}
.premio-midia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 220px;
  overflow: hidden;
  background: #fff;
}
.premio-midia.sem-foto {
  background: var(--color-placeholder);
}
.premio-midia img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 24px;
  object-fit: contain;
}
.premio-midia img.preencher {
  padding: 0;
  object-fit: cover;
  object-position: center 70%;
}
.premio-icone {
  width: 56px;
  height: 56px;
  color: var(--color-navy);
}
.premio-placeholder {
  color: var(--color-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.premio-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}
.premio-info h4 {
  color: var(--color-text);
  font-size: 21px;
  font-weight: 700;
}
.premio-info p {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}

/*
 * Vitrine dos prêmios. Ao entrar na tela, um sinal coral corre a régua da meta
 * (como um contador enchendo) e some; em seguida uma luz passa uma vez pela
 * foto de cada prêmio, escalonada pelo --ordem do card. Com movimento
 * reduzido, data-revela não existe e nada disso acontece.
 */
.meta-sinal {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-coral);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
[data-revela="visivel"] > .meta-sinal {
  animation: meta-sinal 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes meta-sinal {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
  60% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

.premio-midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.75) 50%, transparent 65%);
  transform: translateX(-110%);
  pointer-events: none;
}
[data-revela="visivel"] .premio-midia::after {
  animation: vitrine 1200ms cubic-bezier(0.45, 0, 0.2, 1) calc(400ms + var(--ordem, 0) * 90ms) both;
}
@keyframes vitrine {
  to {
    transform: translateX(110%);
  }
}

/* Com mouse: a luz passa de novo e a foto chega um pouco mais perto. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .premio-midia > :is(img, svg) {
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .premio:hover .premio-midia > :is(img, svg) {
    transform: scale(1.04);
  }
  .premio:hover .premio-midia::after {
    animation: vitrine-hover 900ms cubic-bezier(0.45, 0, 0.2, 1) both;
  }
}
@keyframes vitrine-hover {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(110%);
  }
}

/* ---------- Rodapé ---------- */

/* Segue o rodapé do site institucional (cadumed.com.br): logo no topo, régua
   fina e, embaixo, copyright à esquerda e links legais à direita. */
.rodape {
  margin-top: auto;
  background: var(--color-navy);
  color: rgb(255 255 255 / 0.75);
  font-size: 15px;
  line-height: 1.6;
}
.rodape-conteudo {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 48px 20px 0;
}
.rodape-logo {
  padding-bottom: 48px;
}
.rodape-base {
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
  padding-block: 32px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
/* Mesmo tratamento dos links do rodapé de cadumed.com.br: branco a 75%, branco cheio no hover. */
.rodape a {
  color: rgb(255 255 255 / 0.75);
  text-decoration: none;
  transition: color 150ms;
}
.rodape a:hover {
  color: #fff;
}

/* ---------- Confirmação do cadastro ---------- */

.sucesso {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sucesso-topo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sucesso-selo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: var(--color-coral-light);
  color: var(--color-navy);
}
.sucesso-selo svg {
  width: 32px;
  height: 32px;
}
.sucesso-onda {
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-coral-light);
  border-radius: 9999px;
}
.sucesso-cabeca {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sucesso-titulo {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  outline: none;
}
.sucesso-sub {
  color: var(--color-text-secondary);
  font-size: 17px;
  line-height: 1.55;
}

.trilha {
  display: flex;
  flex-direction: column;
}
.trilha-passo {
  position: relative;
  display: flex;
  gap: 16px;
  padding-bottom: 20px;
}
.trilha-passo:last-child {
  padding-bottom: 0;
}
/* Trilho entre os marcadores: preenchido até onde a pessoa chegou. */
.trilha-linha {
  position: absolute;
  top: 36px;
  bottom: 4px;
  left: 15px;
  width: 2px;
  border-radius: 9999px;
  background: var(--color-divider);
  transition: background-color 500ms;
}
[data-estado="feito"] > .trilha-linha {
  background: var(--color-navy);
}
.trilha-marca {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  transition: background-color 500ms, color 500ms, border-color 500ms;
}
[data-estado="feito"] .trilha-marca {
  background: var(--color-navy);
  color: var(--color-cream);
}
[data-estado="atual"] .trilha-marca {
  background: var(--color-coral-light);
  color: var(--color-navy);
}
[data-estado="proximo"] .trilha-marca {
  border: 1px solid var(--color-input-border);
  background: #fff;
  color: var(--color-muted);
}
.passo-pulso {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--color-coral-light);
}
.trilha-check,
.trilha-num {
  position: relative;
}
.trilha-check {
  width: 16px;
  height: 16px;
}
.trilha-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}
.trilha-titulo {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
}
[data-estado="proximo"] .trilha-titulo {
  color: var(--color-muted);
}
.trilha-desc {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}

.botao-instagram {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding-inline: 20px;
  border-radius: 14px;
  background: var(--color-button);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 200ms, transform 200ms;
}
.botao-instagram:hover {
  background: var(--color-button-hover);
  color: #fff;
}
.botao-instagram:active {
  transform: scale(0.98);
}
.botao-instagram-rotulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.botao-instagram-seta {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 200ms;
}
.botao-instagram:hover .botao-instagram-seta {
  transform: translate(2px, -2px);
}

/*
 * O selo entra com um leve quique, o check se desenha e uma onda coral sai
 * dele uma vez; depois título, passos e botões sobem em sequência (--i). O
 * passo atual pulsa algumas vezes chamando para o Instagram. Com movimento
 * reduzido, tudo aparece pronto e parado.
 */
.sucesso-onda,
.passo-pulso {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .sucesso-selo {
    animation: sucesso-selo 560ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .sucesso-check {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: sucesso-check 420ms cubic-bezier(0.65, 0, 0.35, 1) 280ms forwards;
  }
  .sucesso-onda {
    animation: sucesso-onda 1100ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both;
  }
  .sucesso-entra {
    animation: sucesso-entra 600ms cubic-bezier(0.16, 1, 0.3, 1) calc(200ms + var(--i, 0) * 90ms) both;
  }
  .passo-pulso {
    animation: passo-pulso 1800ms cubic-bezier(0, 0, 0.2, 1) 900ms 4;
  }
}
@keyframes sucesso-selo {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes sucesso-check {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes sucesso-onda {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(1.9);
    opacity: 0;
  }
}
@keyframes sucesso-entra {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes passo-pulso {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* ---------- sm (≥ 640px) ---------- */

@media (min-width: 640px) {
  .hero {
    padding-inline: 40px;
  }
  .hero h1 {
    font-size: 60px;
  }
  .cartao-form {
    padding: 32px;
  }
  .form-titulo {
    font-size: 30px;
    line-height: 1.2;
  }
  .secao {
    padding-inline: 40px;
  }
  .botao-cta {
    width: fit-content;
  }
  .premios-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .premio-slot,
  .premio-slot-parcial {
    width: auto;
  }
  .rodape-conteudo {
    padding-inline: 40px;
  }
  .rodape-base {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .sucesso-titulo {
    font-size: 34px;
  }
}

/* ---------- lg (≥ 1024px) ---------- */

@media (min-width: 1024px) {
  .hero {
    gap: 64px;
    padding: 40px 96px 96px;
  }
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 72px;
  }
  .hero-texto {
    gap: 28px;
    padding-top: 24px;
  }
  .hero h1 {
    font-size: 76px;
  }
  .hero-sub {
    font-size: 20px;
  }
  .secoes-claras {
    gap: 112px;
    padding-block: 112px;
  }
  .secao {
    gap: 48px;
    padding-inline: 96px;
  }
  .secao-titulo {
    font-size: 56px;
  }
  .passos {
    grid-template-columns: repeat(3, 1fr);
  }
  .passo {
    padding: 32px;
  }
  .passo-texto h3 {
    font-size: 26px;
  }
  .metas {
    gap: 72px;
  }
  .meta-cabeca h3 {
    font-size: 40px;
  }
  /* Colunas pela quantidade de produtos da meta, para não sobrar buraco na
     grade: 3 produtos ocupam 3 colunas e um produto sozinho fica com meia largura. */
  .premios-lista.colunas-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .premios-lista.colunas-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .rodape-conteudo {
    padding: 52px 96px 0;
  }
}