/* =========================================================================
   acheiii — a landing.

   Os tokens abaixo são os mesmos de `src/theme.ts` no repositório do app, que
   sai de `tokens.json` no design system. Os nomes seguem o `bundle.css` do
   design system de propósito: uma cor que mude lá muda aqui pelo mesmo nome.

   Três regras do sistema que esta folha obedece e que é fácil quebrar sem
   perceber:

   1. `brand` é a única cor de ação. Botão primário e nada mais.
   2. Texto sobre `brand` vai em `on-brand` (navy), não em branco — branco ali
      dá 2.4:1 e reprova AA. É a única troca deliberada em cima do kit.
   3. A Polly Rounded não tem 500 nem 600. Só 300, 400 e 700; pedir 600 faz o
      navegador engordar o 400 na força bruta e borra a curva da fonte.
   ========================================================================= */

/* ------------------------------------------------------------------ fontes */

/* A Smigle escreve só a palavra acheiii — logotipo, e nada além dele. O
   arquivo é o recorte do alfabeto minúsculo: ver scripts/gerar_ativos_do_site.py */
@font-face {
  font-family: "Smigle";
  src: url("fontes/Smigle-marca.woff2") format("woff2");
  font-weight: 400;
  font-display: block; /* a marca não pisca de fallback para Smigle: o desenho é outro */
}
@font-face {
  font-family: "Polly Rounded";
  src: url("fontes/PollyRounded-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Polly Rounded";
  src: url("fontes/PollyRounded-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Polly Rounded";
  src: url("fontes/PollyRounded-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */

:root {
  color-scheme: light dark;

  --surface: #ffffff;
  --surface-sunken: #fafafa;
  --surface-muted: #f6f6f6;
  --surface-brand: #2cb9b0;

  --ink: #0c0d34;
  --ink-soft: #50555c;
  --ink-faint: #979797;
  --ink-inverse: #ffffff;

  --line: #d8d8d8;
  --line-soft: #eeeeee;

  --brand: #2cb9b0;
  --brand-deep: #06818e;
  --brand-tint: #bfeaf5;
  --on-brand: #0c0d34;

  --accent-coral: #fe5e33;
  --accent-amber: #ffc641;
  --accent-rose: #ff87a2;
  --accent-violet: #442cb9;
  --danger: #d33367;
  --success-tint: #beecc4;

  --tile-sky: #d7ecff;
  --tile-ice: #bfeaf5;
  --tile-aqua: #d6faff;
  --tile-mint: #beecc4;
  --tile-butter: #fff4c5;
  --tile-peach: #fde8ca;
  --tile-blush: #ffeaed;

  /* O bloco no lugar da foto do kit da vendedora. */
  --foto-de: #ffeaed;
  --foto-meio: #fde8ca;
  --foto-para: #fff4c5;

  /* O bloco de cor da marca. Não é `surface-inverse`: aquele token vira claro
     no tema escuro, e este aqui é a cor da marca — ele fica escuro nos dois. */
  --bloco: #0c0d34;
  --bloco-ink: #ffffff;
  --bloco-ink-soft: #a9adc2;
  --bloco-brand: #3ed6cb;
  --bloco-line: rgba(255, 255, 255, 0.14);

  --font-display: "Smigle", "Arial Narrow", sans-serif;
  --font-text: "Polly Rounded", ui-rounded, "Segoe UI", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 60px;

  --radius-sm: 5px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 25px;
  --radius-2xl: 35px;
  --radius-screen: 60px;
  --radius-pill: 9999px;

  --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.08);
  --shadow-alto: 0 24px 60px -24px rgba(12, 13, 52, 0.28);

  /* `gutter` é 35px e não muda no celular; no desktop ele abre porque a
     coluna de texto para de ser a tela inteira. */
  --gutter: clamp(22px, 5vw, 64px);
  --largura: 1200px;

  /* O toque encolhe o controle em 3 a 7%, em 90ms. */
  --toque: 90ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0f1020;
    --surface-sunken: #080913;
    --surface-muted: #191b30;
    --surface-brand: #1f9d95;

    --ink: #f2f3f8;
    --ink-soft: #a9adc2;
    --ink-faint: #7a7e95;
    --ink-inverse: #0c0d34;

    --line: #2a2e52;
    --line-soft: #1d2040;

    --brand: #3ed6cb;
    --brand-deep: #2cb9b0;
    --brand-tint: #14384a;
    --on-brand: #05231f;

    --accent-coral: #ff7a56;
    --accent-amber: #ffd166;
    --accent-rose: #ff9db4;
    --accent-violet: #7a63e8;
    --danger: #ff6f9b;
    --success-tint: #17361f;

    --tile-sky: #1b2c41;
    --tile-ice: #173442;
    --tile-aqua: #14323a;
    --tile-mint: #17361f;
    --tile-butter: #3a3418;
    --tile-peach: #3a2c18;
    --tile-blush: #3a2027;

    --foto-de: #232645;
    --foto-meio: #1d3b4a;
    --foto-para: #14384a;

    --bloco: #151731;
    --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.3);
    --shadow-alto: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
  }
}

/* --------------------------------------------------------------- alicerce */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 17px/1.55 var(--font-text);
  overflow-x: hidden; /* os blocos sangram para fora da coluna de propósito */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:is(a, button, input, summary):focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Dinheiro é sempre tabular: sem isso a coluna de preço dança entre linhas. */
.dinheiro { font-variant-numeric: tabular-nums; }

.leitor-de-tela {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------- tipografia */

.marca {
  font-family: var(--font-display);
  font-weight: 400;
  /* A caixa natural da Smigle é 1,1x o corpo. Apertar abaixo disso corta o
     desenho da letra em cima e embaixo — e num container com overflow
     escondido o corte é definitivo. */
  line-height: 1.1;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.olho {
  font-weight: 700;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 1.5px;
  /* caixa alta por CSS, nunca digitada: leitor de tela soletra */
  text-transform: uppercase;
  /* `ink-soft`, e não `ink-faint`: aquele dá 2.9:1 sobre a superfície e reprova
     AA. `ink-faint` fica onde ele é de verdade — marca-d'água de campo. */
  color: var(--ink-soft);
}

.titulo {
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.subtitulo {
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.apoio {
  color: var(--ink-soft);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  text-wrap: pretty;
}

.nota {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
  /* Linha de apoio é para ser lida, então ela tem medida. Sem isto ela se
     estica nos 1072px da coluna e o olho perde o começo da linha seguinte. */
  max-width: 58ch;
}

/* O que ela digita no WhatsApp, onde quer que apareça. A Polly não tem
   monoespaçada e não precisa ter: o que marca o comando é a moldura, e um
   `code` sem estilo cairia na monoespaçada do navegador — outra fonte na
   página, que não é nenhuma das duas da marca. */
code {
  font: 700 0.92em/1 var(--font-text);
  background: var(--surface-muted);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  color: var(--ink);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- layout */

.faixa { padding: clamp(64px, 9vw, 116px) 0; }
.faixa--afundada { background: var(--surface-sunken); }

.coluna {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* A medida do título de seção. Em px e não em `ch`: `ch` aqui mediria o corpo
   de 17px do body, não os 50px do título que mora dentro — e a caixa saía com
   um terço da largura, quebrando cinco palavras em quatro linhas. */
.cabeca { max-width: 620px; }
.titulo + .apoio,
.cabeca .apoio { margin-top: var(--space-5); max-width: 48ch; }

/* ---------------------------------------------------------------- botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-7);
  border: 1px solid transparent;
  border-radius: var(--radius-pill); /* pílula é a forma da ação, e só dela */
  font: 700 16px/20px var(--font-text);
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: background var(--toque) ease, color var(--toque) ease,
              transform var(--toque) ease, border-color var(--toque) ease;
}
.botao--primario { background: var(--brand); color: var(--on-brand); }
.botao--primario:hover { background: var(--brand-deep); color: var(--ink-inverse); }
.botao--fantasma { border-color: var(--line); color: var(--ink); background: transparent; }
.botao--fantasma:hover { background: var(--surface-muted); }
.botao:active { transform: scale(0.96); }

/* --------------------------------------------------------------- o topo */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.topo.is-rolado { border-bottom-color: var(--line-soft); }

.topo__miolo {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 74px;
}
.topo .marca { font-size: 30px; color: var(--ink); margin-right: auto; }
.topo__menu { display: flex; gap: var(--space-6); }
.topo__menu a {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
  text-decoration: none;
  padding: var(--space-2) 0;
}
.topo__menu a:hover { color: var(--ink); }
.topo .botao { min-height: 46px; padding: 0 var(--space-6); }

@media (max-width: 860px) {
  .topo__menu { display: none; }
}

/* ----------------------------------------------------------------- hero */

.hero { padding: clamp(40px, 6vw, 84px) 0 0; position: relative; }

.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

.hero h1 {
  font-weight: 700;
  font-size: clamp(38px, 6.4vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.032em;
  margin-top: var(--space-3);
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--brand-deep);
}
.hero .apoio { margin-top: var(--space-6); max-width: 44ch; }

/* ------------------------------------------------------- a caixa da lista */

.lista-form {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
  max-width: 460px;
}
.lista-form input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 0 var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/1 var(--font-text);
  font-variant-numeric: tabular-nums;
  appearance: none;
}
.lista-form input::placeholder { color: var(--ink-faint); }
.lista-form input:focus { border-color: var(--brand-deep); outline: none; }
.lista-form .botao { flex: 0 0 auto; }

.lista-form.is-erro input { border-color: var(--danger); }

.lista-recado {
  margin-top: var(--space-4);
  font-size: 15px;
  line-height: 1.5;
  max-width: 44ch;
  min-height: 1lh;
}
.lista-recado:empty { margin-top: 0; min-height: 0; }
.lista-recado[data-estado="erro"] { color: var(--danger); }
.lista-recado[data-estado="pronto"] { color: var(--brand-deep); font-weight: 700; }

.hero .nota { margin-top: var(--space-4); max-width: 42ch; }

@media (max-width: 560px) {
  .lista-form { flex-direction: column; border-radius: var(--radius-2xl); }
  .lista-form input { text-align: center; }
}

/* ---------------------------------------------------------- o telefone */

.palco {
  position: relative;
  display: flex;
  justify-content: center;
}

/* O bloco de estampa atrás do telefone. Ele sangra para fora da coluna: é o
   elemento gráfico mais forte do kit e encolhê-lo para dentro da grade tira
   dele exatamente o que ele tem. */
.palco__estampa {
  position: absolute;
  z-index: 0;
  top: 6%;
  /* A borda esquerda entra por baixo do telefone, e não ao lado dele: a 12% ela
     aparecia como uma tira de dois centímetros à esquerda do aparelho, que lia
     como erro de recorte em vez de camada. */
  left: 40%;
  right: calc(var(--gutter) * -1 - 6vw);
  bottom: 12%;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.palco__estampa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.fone {
  position: relative;
  z-index: 1;
  width: min(330px, 84vw);
  border-radius: var(--radius-screen);
  background: var(--bloco);
  padding: 10px;
  box-shadow: var(--shadow-alto);
}
.fone__tela {
  border-radius: calc(var(--radius-screen) - 10px);
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-height: 560px;
}

.fone__barra {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 26px var(--space-5) var(--space-4);
  background: var(--bloco);
  color: var(--bloco-ink);
}
.fone__barra .marca { font-size: 22px; color: var(--bloco-brand); }
.fone__barra .nota { color: var(--bloco-ink-soft); font-size: 12px; margin-left: auto; }

/* A conversa. As bolhas são o produto: ele é uma conversa de WhatsApp, e
   desenhar qualquer outra coisa aqui seria desenhar outro produto. */
.conversa {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-sunken);
}
.bolha {
  max-width: 84%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 1.45;
  box-shadow: var(--shadow-card);
}
.bolha--dele {
  align-self: flex-start;
  background: var(--surface);
  border-bottom-left-radius: var(--space-1);
}
.bolha--dela {
  align-self: flex-end;
  background: var(--brand);
  color: var(--on-brand);
  border-bottom-right-radius: var(--space-1);
  font-weight: 700;
}
.bolha__marca {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: var(--space-1);
}
.bolha__peca { font-weight: 700; }
.bolha__link {
  color: var(--brand-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  word-break: break-all;
}

/* Os chips de tamanho. Esgotado mostra o estado na forma — tracejado e
   riscado —, não só na cor: cor sozinha não é informação. */
.tamanhos {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font: 700 13px/1 var(--font-text);
  color: var(--ink);
}
.chip.is-selecionado { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.chip.is-esgotado {
  color: var(--ink-faint);
  border-style: dashed;
  text-decoration: line-through;
}

@media (max-width: 900px) {
  .hero__grade { grid-template-columns: 1fr; }
  .palco { margin-top: var(--space-8); }
  .palco__estampa { left: 46%; right: calc(var(--gutter) * -1); top: 10%; bottom: 16%; }
}

/* ------------------------------------------------- a queda (dias depois) */

/* O bloco de cor de que o painel branco da seção seguinte sobe por cima. */
.queda {
  position: relative;
  margin-top: clamp(56px, 8vw, 104px);
  background: var(--bloco);
  color: var(--bloco-ink);
  padding-bottom: clamp(76px, 10vw, 128px);
  overflow: hidden;
}
/* A faixa entra como fundo, e não como `<img>` com `object-fit: cover`.
   Com `cover` a escala vem da largura da tela, então a altura da célula muda
   junto e a faixa aparece cortada no meio das formas. Em `auto 126px` a célula
   fica travada em 63px e a repetição é só na horizontal: as alturas possíveis
   passam a ser 63 e 126, que é a grade inteira nos dois casos.

   `left bottom` é o que faz a versão de uma linha mostrar uma linha cheia em
   vez da metade de duas. */
.faixa-estampa {
  height: 126px;
  background: var(--surface) url("img/estampa-faixa.svg") left bottom / auto 126px repeat-x;
}
@media (max-width: 739px) { .faixa-estampa { height: 63px; } }

.queda__miolo {
  padding-top: clamp(44px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
}
.queda .olho { color: var(--bloco-brand); }
.queda__titulo {
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: var(--space-2);
  text-wrap: balance;
}
.queda__titulo + .apoio { color: var(--bloco-ink-soft); margin-top: var(--space-5); max-width: 40ch; }

/* A mensagem que chega, do tamanho que ela tem de verdade na tela: grande.
   Ela é a prova, não um enfeite da seção. */
.recado {
  background: color-mix(in srgb, #ffffff 7%, transparent);
  border: 1px solid var(--bloco-line);
  border-radius: var(--radius-2xl);
  padding: clamp(24px, 3vw, 36px);
}
.recado__loja {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--bloco-ink-soft);
}
.recado__precos {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
}
.recado__de {
  font-size: clamp(19px, 2vw, 24px);
  color: var(--bloco-ink-soft);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.recado__para {
  font-weight: 700;
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bloco-brand);
}
.recado__desconto {
  font-weight: 700;
  font-size: 15px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--accent-coral);
  color: #0c0d34;
}
.recado__linha { margin-top: var(--space-5); font-size: 17px; }
.recado__pe {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--bloco-line);
  font-size: 14px;
  color: var(--bloco-ink-soft);
}

@media (max-width: 900px) {
  .queda__miolo { grid-template-columns: 1fr; align-items: start; }
}

/* ------------------------------------------------------- o painel branco */

/* O movimento assinatura do kit: o painel claro sobe sobre o bloco de cor,
   com margem negativa e raio só nos dois cantos de cima.

   `position: relative` é obrigatório aqui. Sem ele, um bloco de cor que tenha
   posição própria pinta por cima do painel e o canto arredondado some — o CSS
   parece certo e sai errado na tela. */
.painel {
  position: relative;
  z-index: 2;
  margin-top: clamp(-40px, -3vw, -34px);
  background: var(--surface);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  padding-top: clamp(56px, 7vw, 92px);
}

/* ------------------------------------------------------------- os passos */

.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 3.5vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
}
.passo h3 { margin-top: var(--space-4); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.passo p { margin-top: var(--space-3); color: var(--ink-soft); font-size: 16px; }

/* `p.passo__num`, e não `.passo__num`: o número é um `<p>` dentro de `.passo`,
   e `.passo p` acima tem especificidade maior que uma classe sozinha. Sem o
   elemento no seletor, o número de 62px saía com 16px em `ink-soft` — o CSS
   parecia certo e a tela mostrava outra coisa. */
p.passo__num {
  /* O 300 Light serve para número grande e decorativo acima de 40px, e é o
     único lugar em que ele tem uso. */
  margin-top: 0;
  font-weight: 300;
  font-size: 66px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- os avisos */

.avisos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-5);
  margin-top: clamp(40px, 5vw, 60px);
}
.aviso {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* As quatro cores de acento são preenchimento e ícone, nunca fundo de texto:
   elas identificam o aviso, não carregam a frase. */
.aviso__forma { width: 42px; height: 42px; flex: 0 0 auto; }
.aviso h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.aviso p { color: var(--ink-soft); font-size: 15px; }

/* ----------------------------------------------------------- os comandos */

.comandos-bloco {
  background: var(--bloco);
  color: var(--bloco-ink);
  border-radius: var(--radius-2xl);
  padding: clamp(36px, 5vw, 64px);
  margin-top: clamp(40px, 5vw, 60px);
}
.comandos-bloco .olho { color: var(--bloco-brand); }
.comandos-bloco .subtitulo { margin-top: var(--space-2); }
.comandos-bloco > .apoio { color: var(--bloco-ink-soft); margin-top: var(--space-4); max-width: 50ch; }

/* Duas colunas, não três: em três, "tamanho 38, M" e "silêncio 22 8" não caem
   na coluna do comando e empurram a explicação para fora. */
.comandos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-2) clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 44px);
}
.comando {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--bloco-line);
}
.comando b {
  flex: 0 0 auto;
  min-width: 9em;
  font-weight: 700;
  color: var(--bloco-brand);
  font-variant-numeric: tabular-nums;
}
.comando span { color: var(--bloco-ink-soft); font-size: 15px; }

/* ------------------------------------------------------------- as marcas */

.marcas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: clamp(32px, 4vw, 48px);
}
.marcas li {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.marcas li[data-pedida] {
  border-style: dashed;
  color: var(--ink-soft);
  font-weight: 400;
}

/* --------------------------------------------------------------- os nãos */

/* Quatro itens em duas colunas. Em três, o quarto fica sozinho numa fileira e
   a seção parece que perdeu um pedaço. */
.naos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: clamp(24px, 3vw, 44px) clamp(32px, 5vw, 72px);
  margin-top: clamp(40px, 5vw, 60px);
}
.nao { border-top: 2px solid var(--accent-coral); padding-top: var(--space-5); }
.nao h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.nao p { margin-top: var(--space-3); color: var(--ink-soft); font-size: 16px; }

/* ----------------------------------------------------------- a vendedora */

.vendedora {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* O kit é uma mensagem para encaminhar, então tem a largura de uma: esticado
   na coluna inteira, o bloco de cor no lugar da foto vira meio metro de
   gradiente e come a seção. */
.kit {
  width: min(100%, 370px);
  margin-left: auto;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

/* No tema escuro a seção é `surface` e o card também seria `surface`: mesma
   cor, e o card deixa de ter borda. Hierarquia se empilha trocando a
   superfície, não somando sombra — então quem troca aqui é o card. */
@media (prefers-color-scheme: dark) {
  .kit { background: var(--surface-muted); border-color: var(--line); }
}

/* O bloco de cor no lugar da foto: é o que o design system manda desenhar
   onde a imagem ainda não existe, e nenhum texto vai por cima dele.
   As paradas vêm de `--foto-*` porque os três `tile` quentes, escurecidos,
   misturam num marrom — e um bloco marrom não lê como "aqui vai a foto", lê
   como imagem que falhou. No escuro o gradiente vira frio. */
.kit__foto {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--foto-de) 0%, var(--foto-meio) 52%, var(--foto-para) 100%);
}
.kit__legenda { margin-top: var(--space-5); font-size: 15px; line-height: 1.55; }
.kit__legenda b { font-weight: 700; }
.kit__legenda span { color: var(--brand-deep); }
.kit .nota { margin-top: var(--space-4); }

@media (max-width: 900px) {
  .vendedora { grid-template-columns: 1fr; }
  .kit { margin-left: 0; }
}

/* --------------------------------------------------------------- fechar */

.fechar {
  position: relative;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-2xl);
  padding: clamp(40px, 6vw, 76px);
  overflow: hidden;
}
/* Em px: em `ch` a caixa mediria o corpo de 17px e o campo do formulário ficava
   com 300px, cortando a própria marca-d'água no meio. */
.fechar__miolo { position: relative; z-index: 1; max-width: 520px; }

/* A estampa fecha o lado direito do bloco. Sem ela, metade do retângulo de
   teal fica vazia — e vazio grande em cor cheia não lê como respiro, lê como
   conteúdo que não carregou. */
/* Encostada nas três bordas, sem raio próprio: quem arredonda é o recorte do
   bloco. Com raio nela, o canto dela e o canto do bloco não coincidiam e
   sobrava uma unha de teal aparecendo por fora do desenho. */
.fechar__estampa {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: min(40%, 400px);
  overflow: hidden;
}
.fechar__estampa img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

.fechar .titulo { color: var(--on-brand); }
.fechar .apoio { color: color-mix(in srgb, var(--on-brand) 88%, transparent); }
.fechar .lista-form { margin-top: var(--space-7); }
.fechar .lista-form input {
  background: var(--surface);
  border-color: transparent;
}
.fechar .botao--primario { background: var(--on-brand); color: var(--brand); }
.fechar .botao--primario:hover { background: #ffffff; color: var(--brand-deep); }
.fechar .nota { color: color-mix(in srgb, var(--on-brand) 82%, transparent); }

@media (max-width: 900px) {
  /* No celular não há lado direito para preencher: a estampa entraria por cima
     do formulário. */
  .fechar__estampa { display: none; }
}
.fechar .lista-recado[data-estado="pronto"] { color: var(--on-brand); }
.fechar .lista-recado[data-estado="erro"] { color: #6b0f1f; }

/* --------------------------------------------------------------- rodapé */

.rodape { background: var(--bloco); color: var(--bloco-ink); margin-top: clamp(64px, 8vw, 110px); }
/* Uma linha da grade, pela mesma razão da faixa acima — e com outra semente,
   para não ser a mesma faixa duas vezes na mesma página. */
.rodape__faixa {
  height: 126px;
  background: var(--surface) url("img/estampa-rodape.svg") left bottom / auto 126px repeat-x;
}
/* Uma linha só, no celular. Duas comem meia tela de rodapé. */
@media (max-width: 739px) { .rodape__faixa { height: 63px; } }
.rodape__miolo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) clamp(32px, 6vw, 80px);
  align-items: flex-start;
  padding: clamp(40px, 5vw, 64px) 0;
}
.rodape .marca { font-size: 40px; color: var(--bloco-ink); }
.rodape__sobre { max-width: 34ch; color: var(--bloco-ink-soft); font-size: 15px; margin-top: var(--space-3); }
.rodape__links { display: flex; flex-direction: column; gap: var(--space-3); margin-left: auto; }
.rodape__links a { color: var(--bloco-ink-soft); text-decoration: none; font-size: 15px; }
.rodape__links a:hover { color: var(--bloco-ink); }
.rodape__fim {
  border-top: 1px solid var(--bloco-line);
  padding: var(--space-5) 0 var(--space-8);
  color: var(--bloco-ink-soft);
  font-size: 13px;
}

/* ------------------------------------------------------------ movimento */

/* Três gestos e nada além deles. Aqui só há um: o conteúdo aparece subindo
   pouco, uma vez, quando entra na tela. */
.entra {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--atraso, 0ms);
}
.entra.is-dentro { opacity: 1; transform: none; }

/* Quem pediu menos movimento no sistema operacional recebe fade e nenhuma
   escala. Isso não é opcional. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra { transform: none; transition: opacity 240ms linear; }
  .botao:active { transform: none; }
}

/* Sem JavaScript o conteúdo não pode ficar invisível esperando o observador. */
.sem-js .entra { opacity: 1; transform: none; }