/*
 * Landing de pré-lançamento do Wingway, no formato de página de vendas:
 * formulário num card logo no topo, a explicação do app em quatro passos ao
 * lado de um celular com a tela inicial, e uma faixa final com um convite
 * que volta ao formulário. Títulos em Inter 700, como pede a biblioteca da
 * marca; fundo claro e verde das telas do app (Theme.swift).
 * Usa os tokens e componentes de docs/brand/ (copiados para brand/ no build).
 *
 * Ajustes de acessibilidade sobre a biblioteca:
 * - Foco: contorno sólido oliva (7,9:1 sobre papel) além do anel da marca,
 *   que sozinho fica abaixo de 3:1. Na faixa verde, o contorno é creme.
 * - Borda de campo: --landing-campo-borda (#9C8F86, 3,1:1 sobre papel);
 *   a borda quente da marca (#D8CDC5) tem 1,5:1 e não identifica o campo.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

:root {
  --landing-fundo: #FBF8F2;
  --landing-campo-borda: #9C8F86;
  --landing-linha: #EDE5DC;
  --landing-oliva-claro: #E9EAD6;
  --landing-verde: #3B4531;
  /* Com viewport-fit=cover, o celular deitado precisa respeitar o notch. */
  --landing-margem: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
}

html {
  scroll-padding-top: 1rem;
}

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

body {
  margin: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Mais específico que .ww-page (components.css), que pinta o fundo de papel. */
body.ww-page {
  background: var(--landing-fundo);
}

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

a {
  color: var(--ww-color-text-strong);
  text-underline-offset: 0.2em;
}

/* Mesma especificidade de .ww-button:focus-visible em components.css (que
 * zera o outline) e declarado depois, para o contorno sólido prevalecer. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
.ww-button:focus-visible,
.ww-field:focus-visible {
  outline: 3px solid var(--ww-color-brand-olive);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Símbolos dos ícones, usados com <use>. Fora da tela em vez de display:none,
 * que em alguns navegadores apaga o que o <use> referencia. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Estrutura. As formas orgânicas do fundo ficam presas à largura da página,
 * sem rolagem lateral. */

.pagina {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  overflow-x: clip;
}

.pagina::before,
.pagina::after {
  position: absolute;
  z-index: -1;
  content: "";
}

.pagina::before {
  top: -8.5rem;
  left: -9rem;
  width: 16rem;
  height: 15rem;
  border-radius: 42% 58% 62% 38% / 45% 40% 60% 55%;
  background: var(--ww-color-brand-olive);
}

.pagina::after {
  top: 24rem;
  right: -10rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: rgb(212 184 163 / 26%);
}

.topo {
  display: flex;
  justify-content: center;
  padding-top: max(1rem, env(safe-area-inset-top));
}

/* Lockup a partir de 132 px, como pede a marca. */
.topo__logo {
  width: 132px;
  height: auto;
}

/* Card de abertura: título e formulário. */

.abertura {
  width: min(100% - 2 * var(--landing-margem), 58rem);
  margin: 1rem auto 0;
  padding: 1.375rem 1.25rem 0.375rem;
  border: var(--ww-border-width) solid var(--landing-linha);
  border-radius: 1.75rem;
  background: var(--ww-color-brand-paper);
  box-shadow: 0 1.25rem 3rem -1rem rgb(31 17 6 / 14%);
}

/* Selo acima do título, só no desktop, onde a coluna do texto tem espaço. */
.abertura__selo {
  display: none;
  align-items: center;
  gap: var(--ww-space-2);
  margin: 0 0 var(--ww-space-4);
  color: var(--ww-color-brand-olive);
  font-size: var(--ww-font-size-xs);
  font-weight: var(--ww-font-weight-bold);
  letter-spacing: var(--ww-letter-spacing-label);
  text-transform: uppercase;
}

.abertura__selo::before {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--ww-color-brand-olive);
  box-shadow: 0 0 0 0.25rem rgb(76 84 33 / 16%);
  content: "";
}

.abertura__titulo {
  margin: 0;
  color: var(--ww-color-text);
  font-size: clamp(1.75rem, 7.6vw, 2.125rem);
  font-weight: var(--ww-font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}

.abertura__titulo > span {
  display: block;
}

.abertura__titulo-oliva {
  color: var(--ww-color-brand-olive);
}

/* No celular a frase de apoio sai: repetia a autorização e empurrava o
 * "Como funciona" para fora da primeira tela. Volta no desktop. */
.abertura__apoio {
  display: none;
  margin: var(--ww-space-3) 0 0;
  color: var(--ww-color-text-muted);
  font-size: var(--ww-font-size-base);
}

.inscricao {
  margin-top: 1.25rem;
}

/* Formulário */

.campo + .campo {
  margin-top: var(--ww-space-4);
}

.campo__rotulo {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--ww-color-text);
  font-size: var(--ww-font-size-xs);
  font-weight: var(--ww-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.campo__caixa {
  position: relative;
}

.campo__icone {
  position: absolute;
  top: 50%;
  left: 1rem;
  color: var(--ww-color-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
  transition: color var(--ww-motion-fast) var(--ww-ease-standard);
}

.campo__caixa:focus-within .campo__icone {
  color: var(--ww-color-brand-olive);
}

/* 16 px de fonte para o iOS não dar zoom ao focar. */
.campo__entrada.ww-field {
  min-height: 52px;
  padding-left: 2.875rem;
  border-color: var(--landing-campo-borda);
  background: var(--ww-color-brand-paper);
  font-size: var(--ww-font-size-base);
  transition: border-color var(--ww-motion-fast) var(--ww-ease-standard);
}

.campo__entrada.ww-field:hover {
  border-color: var(--ww-color-text);
}

.campo__entrada.ww-field:focus {
  border-color: var(--ww-color-brand-olive);
}

.campo__entrada.ww-field[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--ww-color-danger);
}

.campo__erro {
  display: flex;
  gap: var(--ww-space-2);
  align-items: flex-start;
  margin: var(--ww-space-2) 0 0;
  color: var(--ww-color-danger);
  font-size: var(--ww-font-size-sm);
  font-weight: var(--ww-font-weight-medium);
}

.campo__erro:empty {
  display: none;
}

.campo__erro::before {
  display: inline-grid;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.0625rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ww-color-danger);
  color: var(--ww-color-brand-paper);
  content: "!";
  font-size: 0.75rem;
  font-weight: var(--ww-font-weight-bold);
  line-height: 1;
}

.sem-quebra {
  white-space: nowrap;
}

/* Campo isca: fora da tela e fora da ordem de foco. Só robô preenche. */
.isca {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inscricao__alerta {
  margin: var(--ww-space-4) 0 0;
  padding: var(--ww-space-3) var(--ww-space-4);
  border-left: 4px solid var(--ww-color-danger);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-color-brand-cream);
  color: var(--ww-color-text-strong);
  font-size: var(--ww-font-size-sm);
}

.inscricao__alerta:empty {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Botão principal da marca: espresso com texto creme. */
.inscricao__enviar {
  width: 100%;
  min-height: 52px;
  margin-top: 1.125rem;
  background: var(--ww-color-action);
  color: var(--ww-color-action-foreground);
  font-size: var(--ww-font-size-base);
}

.inscricao__enviar:hover:not([aria-disabled="true"]) {
  background: var(--ww-color-action-hover);
}

.inscricao__enviar[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.75;
}

.inscricao__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--ww-space-4);
  margin: var(--ww-space-1) 0 0;
  padding: 0;
  font-size: 0.8125rem;
  list-style: none;
}

.inscricao__links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ww-color-text-muted);
}

.inscricao__titulo {
  margin: 0;
  color: var(--ww-color-text);
  font-size: 1.5rem;
  font-weight: var(--ww-font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.inscricao__sucesso {
  padding-block: var(--ww-space-2) var(--ww-space-4);
}

.inscricao__sucesso p {
  margin: var(--ww-space-2) 0 0;
}

.inscricao__sucesso-icone {
  margin-bottom: var(--ww-space-4);
  color: var(--ww-color-brand-olive);
}

/* Pop-up da autorização (<dialog>). No celular, folha que sobe da borda de
 * baixo; no desktop, quadro no centro. */
.autorizacao {
  width: 100%;
  max-width: 100%;
  margin: auto 0 0;
  padding: 1.5rem max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--ww-color-brand-paper);
  box-shadow: var(--ww-shadow-raised);
  color: var(--ww-color-text);
}

.autorizacao::backdrop {
  background: rgb(31 17 6 / 45%);
}

.autorizacao__titulo {
  margin: 0;
  color: var(--ww-color-text);
  font-size: 1.375rem;
  font-weight: var(--ww-font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.autorizacao__texto {
  margin: var(--ww-space-3) 0 0;
  font-size: var(--ww-font-size-base);
  line-height: 1.5;
}

.autorizacao__acoes {
  display: grid;
  gap: var(--ww-space-3);
  margin-top: 1.5rem;
}

.autorizacao__acoes .ww-button {
  width: 100%;
  min-height: 52px;
  font-size: var(--ww-font-size-base);
}

.autorizacao__sim {
  background: var(--ww-color-action);
  color: var(--ww-color-action-foreground);
}

.autorizacao__sim:hover {
  background: var(--ww-color-action-hover);
}

.autorizacao__nao {
  border-color: var(--landing-campo-borda);
  background: transparent;
  color: var(--ww-color-text);
}

.autorizacao__nao:hover {
  background: var(--ww-color-brand-cream);
}

.autorizacao__nota {
  margin: var(--ww-space-4) 0 0;
  color: var(--ww-color-text-muted);
  font-size: var(--ww-font-size-sm);
  text-align: center;
}

.autorizacao__nota a {
  color: inherit;
}

@media (prefers-reduced-motion: no-preference) {
  .autorizacao[open] {
    animation: sobe 260ms var(--ww-ease-standard);
  }

  .autorizacao[open]::backdrop {
    animation: escurece 260ms var(--ww-ease-standard);
  }

  @keyframes sobe {
    from {
      transform: translateY(100%);
    }
  }

  @keyframes escurece {
    from {
      opacity: 0;
    }
  }
}

@media (min-width: 640px) {
  .autorizacao {
    width: min(100% - 2rem, 27rem);
    margin: auto;
    padding: 2rem;
    border-radius: 1.5rem;
  }
}

@media (min-width: 640px) and (prefers-reduced-motion: no-preference) {
  .autorizacao[open] {
    animation-name: surge;
  }

  @keyframes surge {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }
  }
}

/* Como funciona */

.como {
  position: relative;
  width: min(100% - 2 * var(--landing-margem), 64rem);
  margin: 2.25rem auto 0;
}

.como__titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ww-space-4);
  margin: 0 0 var(--ww-space-6);
  color: var(--ww-color-text);
  font-size: 0.8125rem;
  font-weight: var(--ww-font-weight-bold);
  letter-spacing: 0.24em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

.como__titulo::before,
.como__titulo::after {
  flex: 1 1 1rem;
  max-width: 6rem;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.3;
}

.passos {
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ww-space-4);
  align-items: start;
}

.passo__icone {
  display: grid;
  width: 3.75rem;
  height: 3.75rem;
  place-items: center;
  border-radius: 1.125rem;
  background: var(--landing-oliva-claro);
  color: var(--ww-color-brand-olive);
}

.passo__icone svg {
  width: 1.875rem;
  height: 1.875rem;
}

.passo__titulo {
  margin: 0;
  color: var(--ww-color-text);
  font-size: 1.375rem;
  font-weight: var(--ww-font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.passo__numero {
  font-weight: var(--ww-font-weight-medium);
}

.passo p {
  margin: 0.375rem 0 0;
  color: var(--ww-color-text);
}

/* Celular com a tela inicial do app. Tudo dentro da tela é medido em cqw
 * (largura da tela), então o desenho escala junto com o aparelho. */

.celular {
  /* Nunca mais largo que a seção (texto ampliado ou zoom de página). */
  --largura: min(16.5rem, 100%);

  position: relative;
  width: var(--largura);
  margin: 3rem auto 0;
  padding: calc(var(--largura) * 0.032);
  /* Raio em rem: em percentual o canto viraria elipse (altura > largura). */
  border-radius: 2.75rem;
  background: linear-gradient(150deg, #A29E92 0%, #4D4A43 20%, #2E2C28 50%, #55524A 82%, #9A968A 100%);
  box-shadow:
    inset 0 0 0 1.5px rgb(255 255 255 / 20%),
    0 2.5rem 4rem -1.5rem rgb(31 17 6 / 42%),
    0 1rem 1.5rem -1rem rgb(31 17 6 / 30%);
  container-type: inline-size;
}

/* Botões laterais. */
.celular::before,
.celular::after {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #5E5B53;
  content: "";
}

.celular::before {
  top: 27%;
  right: -2px;
  height: 13%;
}

.celular::after {
  top: 22%;
  left: -2px;
  height: 18%;
}

.celular__tela {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  border-radius: 12.5cqw;
  background: var(--landing-fundo);
  color: var(--ww-color-text);
  font-size: 4cqw;
  line-height: 1.3;
}

/* Especificidade zero, para as margens de cada parágrafo prevalecerem. */
:where(.celular__tela p) {
  margin: 0;
}

.app__topo {
  position: relative;
  padding: 0 6cqw 26cqw;
  background: linear-gradient(170deg, #5B642C, var(--ww-color-brand-olive) 55%, #424A1C);
  color: var(--ww-color-brand-cream);
}

.app__status {
  position: relative;
  display: flex;
  height: 13cqw;
  align-items: center;
  justify-content: space-between;
  padding: 1cqw 2cqw 0 3cqw;
  font-size: 4.2cqw;
  font-weight: var(--ww-font-weight-semibold);
}

.app__ilha {
  position: absolute;
  top: 3cqw;
  left: 50%;
  width: 29cqw;
  height: 8.4cqw;
  margin-left: -14.5cqw;
  border-radius: 99px;
  background: #0B0B0A;
}

.app__sinais {
  width: 18cqw;
  height: auto;
}

.app__marca {
  width: 24cqw;
  height: auto;
  margin: 1.5cqw auto 0;
}

.app__avatar {
  position: absolute;
  top: 17cqw;
  right: 6cqw;
  width: 11.5cqw;
  height: 11.5cqw;
  border: 0.6cqw solid rgb(248 240 230 / 85%);
  border-radius: 50%;
  object-fit: cover;
}

.app__ola {
  margin-top: 4cqw;
  font-size: 7.4cqw;
  font-weight: var(--ww-font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.app__pergunta {
  margin-top: 1cqw;
  font-size: 4.2cqw;
  opacity: 0.88;
}

.app__sonho {
  position: relative;
  height: 60cqw;
  margin: -22cqw 5cqw 0;
  overflow: hidden;
  border-radius: 6cqw;
  box-shadow: 0 3cqw 6cqw -2cqw rgb(31 17 6 / 40%);
}

.app__sonho img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.app__sonho::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(21 20 11 / 80%), rgb(21 20 11 / 0%) 62%);
  content: "";
}

.app__sonho-texto {
  position: absolute;
  z-index: 1;
  right: 16cqw;
  bottom: 4.5cqw;
  left: 5cqw;
  display: flex;
  flex-direction: column;
  gap: 0.6cqw;
  color: var(--ww-color-brand-cream);
}

.app__sonho-texto span {
  font-size: 3.4cqw;
  opacity: 0.9;
}

.app__sonho-texto strong {
  font-size: 5cqw;
  font-weight: var(--ww-font-weight-bold);
  line-height: 1.15;
  text-wrap: balance;
}

.app__sonho-seta {
  position: absolute;
  z-index: 1;
  right: 4.5cqw;
  bottom: 4.5cqw;
  display: grid;
  width: 8.5cqw;
  height: 8.5cqw;
  place-items: center;
  border-radius: 50%;
  background: #A9B266;
  color: #24290F;
}

.app__sonho-seta svg {
  width: 5cqw;
  height: 5cqw;
}

.app__atalhos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5cqw;
  margin: 5cqw 5cqw 0;
}

.app__atalho,
.app__jornada {
  border-radius: 4cqw;
  background: var(--ww-color-brand-paper);
  box-shadow: 0 0.6cqw 2cqw rgb(31 17 6 / 7%), inset 0 0 0 0.3cqw #EFE8DF;
}

.app__atalho {
  display: flex;
  height: 15.5cqw;
  align-items: center;
  gap: 2.4cqw;
  padding: 0 3cqw;
  color: var(--ww-color-text);
  font-size: 3.4cqw;
  font-weight: var(--ww-font-weight-semibold);
  white-space: nowrap;
}

.app__atalho svg {
  flex: none;
  width: 6.2cqw;
  height: 6.2cqw;
  color: var(--ww-color-brand-olive);
}

.app__jornada {
  margin: 5cqw 5cqw 0;
  padding: 5cqw 4.5cqw;
}

.app__jornada-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 4.4cqw;
  font-weight: var(--ww-font-weight-bold);
}

.app__barra {
  display: block;
  height: 2.4cqw;
  margin-top: 2.6cqw;
  overflow: hidden;
  border-radius: 99px;
  background: #ECE5DA;
}

.app__barra span {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ww-color-brand-olive), #7C8838);
}

.app__faltam {
  margin-top: 2.6cqw;
  color: var(--ww-color-text-muted);
  font-size: 3.4cqw;
}

/* Barra de abas do app: Início, Cenários, o "+" elevado, Progresso, Perfil. */
.app__abas {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding: 2.4cqw 1cqw 7.5cqw;
  border-top: 0.3cqw solid #E4D9CC;
  background: var(--landing-fundo);
  color: #6B6650;
  font-size: 2.8cqw;
}

.app__abas::after {
  position: absolute;
  bottom: 2.2cqw;
  left: 50%;
  width: 34cqw;
  height: 1.3cqw;
  margin-left: -17cqw;
  border-radius: 99px;
  background: #15140B;
  content: "";
}

.app__aba {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqw;
}

.app__aba svg {
  width: 6cqw;
  height: 6cqw;
}

.app__aba--ativa {
  color: var(--landing-verde);
  font-weight: var(--ww-font-weight-semibold);
}

.app__mais {
  display: grid;
  width: 13cqw;
  height: 13cqw;
  margin-top: -9cqw;
  justify-self: center;
  place-items: center;
  border-radius: 50%;
  background: var(--landing-verde);
  box-shadow: 0 1.6cqw 3cqw rgb(21 20 11 / 28%);
  color: var(--landing-fundo);
}

.app__mais svg {
  width: 6cqw;
  height: 6cqw;
}

/* Faixa final: colinas da paisagem, a frase da marca e o convite, que leva
 * de volta ao formulário. O fundo verde garante o contraste do texto creme
 * em qualquer largura; o SVG só desenha a transição. */

.convite {
  margin-top: 4.5rem;
  background: var(--landing-verde);
  color: var(--ww-color-brand-cream);
  text-align: center;
}

.convite__paisagem {
  width: 100%;
  max-width: none;
  height: 5.5rem;
  background: var(--landing-fundo);
}

.convite__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ww-space-4) var(--landing-margem) max(3rem, env(safe-area-inset-bottom) + 2rem);
}

.convite__simbolo {
  width: 3.25rem;
  height: auto;
}

.convite__titulo {
  margin: var(--ww-space-4) 0 0;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: var(--ww-font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.convite__lema {
  margin: var(--ww-space-2) 0 0;
  font-size: clamp(1.0625rem, 3.6vw, 1.375rem);
  opacity: 0.92;
}

.convite__botao.ww-button {
  min-height: 54px;
  margin-top: 1.75rem;
  padding-inline: 1.75rem;
  background: var(--ww-color-brand-cream);
  color: var(--ww-color-brand-espresso);
}

.convite__botao.ww-button:hover {
  background: var(--ww-color-brand-paper);
}

.convite .convite__botao:focus-visible {
  outline-color: var(--ww-color-brand-cream);
}

/* Entrada suave do card, só para quem aceita movimento. */
@media (prefers-reduced-motion: no-preference) {
  .abertura {
    animation: aparece 600ms var(--ww-ease-standard) both;
  }

  @keyframes aparece {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }
  }
}

/* Desktop: card em duas colunas (texto e formulário, separados por uma
 * linha) e, abaixo, o celular à esquerda dos passos. */
@media (min-width: 860px) {
  .pagina::before {
    top: -11rem;
    left: -11rem;
    width: 26rem;
    height: 24rem;
  }

  .pagina::after {
    top: 30rem;
    right: -12rem;
    width: 26rem;
    height: 26rem;
  }

  .topo {
    padding-top: 2rem;
  }

  .topo__logo {
    width: 176px;
  }

  .abertura {
    width: min(100% - 2 * var(--landing-margem), 62rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22.5rem);
    align-items: center;
    margin-top: 1.75rem;
    padding: 2.75rem 3rem 1.75rem;
    column-gap: 3rem;
  }

  .abertura__titulo {
    font-size: clamp(1.75rem, 3.1vw, 2.5rem);
    text-wrap: wrap;
  }

  .abertura__apoio {
    display: block;
    max-width: 26rem;
    margin-top: var(--ww-space-4);
    font-size: 1.0625rem;
  }

  .abertura__selo {
    display: inline-flex;
  }

  .inscricao {
    margin-top: 0;
    padding-left: 2.5rem;
    border-left: var(--ww-border-width) solid var(--landing-linha);
  }

  .como__titulo {
    margin-bottom: 2.5rem;
  }

  .como {
    display: grid;
    grid-template-areas:
      "celular titulo"
      "celular passos";
    grid-template-columns: minmax(0, 19.5rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    margin-top: 5.5rem;
    column-gap: clamp(3rem, 7vw, 6rem);
  }

  .como::before {
    position: absolute;
    z-index: -1;
    top: 55%;
    left: -12rem;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: rgb(212 184 163 / 22%);
    content: "";
  }

  .como__titulo {
    grid-area: titulo;
    margin-bottom: 2.5rem;
  }

  .como__titulo::before,
  .como__titulo::after {
    max-width: none;
  }

  .passos {
    grid-area: passos;
    gap: 2.25rem;
  }

  .passo {
    align-items: center;
    gap: 1.75rem;
  }

  .passo__icone {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 1.5rem;
  }

  .passo__icone svg {
    width: 2.5rem;
    height: 2.5rem;
  }

  .passo__titulo {
    font-size: 1.75rem;
  }

  .passo p {
    max-width: 27rem;
    font-size: 1.0625rem;
  }

  .celular {
    --largura: min(19.5rem, 100%);

    border-radius: 3.25rem;

    grid-area: celular;
    align-self: center;
    margin: 0;
    transform: perspective(1800px) rotateY(14deg) rotateX(3deg);
  }

  .convite {
    margin-top: 6rem;
  }

  .convite__paisagem {
    height: 10rem;
  }

  .convite__conteudo {
    padding-top: var(--ww-space-6);
  }
}