/* Kukis — site de venda
   ==========================================================================
   Mundo do assunto: a cozinha rápida. O papel é o da bobina térmica, o fundo
   é o saco kraft da entrega, a tinta é a do carimbo. O vermelho da Kukis
   aparece como carimbo, não como pintura: um lugar por seção, no máximo.

   Tokens
   - kraft   #d6b98e   fundo das faixas (saco de entrega)
   - papel   #f6f1e6   bobina térmica
   - tinta   #17130f   impressão / texto
   - kukis   #e34b2f   marca (carimbo)
   - carimbo #b8331b   marca escurecida para texto sobre papel
   - fumaca  #6b6259   texto secundário
   - tv      #0f0c0a   só na seção do painel
*/

:root {
  --kraft: #d6b98e;
  --kraft-escuro: #c4a374;
  --papel: #f6f1e6;
  --papel-alto: #fffdf8;
  --tinta: #17130f;
  --kukis: #e34b2f;
  --carimbo: #b8331b;
  --fumaca: #6b6259;
  --fio: #cdbfa8;
  --tv: #0f0c0a;
  --display: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --corpo: "Inter", ui-sans-serif, system-ui, sans-serif;
  --coluna: min(1180px, 100% - 2 * clamp(18px, 4vw, 48px));
  --raio: 18px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* O cabeçalho é fixo: sem esta folga, ancorar numa seção esconde o título
     dela atrás da barra. Vale para todo alvo de âncora da página. */
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  color: var(--tinta);
  background: var(--kraft);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 84;
  letter-spacing: -0.03em;
  line-height: 1;
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 800;
}

h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

.pular {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--tinta);
  color: var(--papel);
}

.pular:focus {
  top: 12px;
}

/* Etiqueta: o rótulo em mono, como cabeçalho de bobina. */
.etiqueta {
  margin: 0 0 14px;
  color: var(--carimbo);
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.etiqueta--clara {
  color: #f0b8a9;
}

/* O risco curto antes do rotulo em mono e o gesto que a NXTNA usa para abrir
   toda secao: da comeco de linha ao olho e amarra os dois sites sem trazer
   nada da paleta deles. Usa `currentcolor`, entao nasce carimbo sobre o papel
   e claro sobre o painel escuro sem uma segunda regra para .etiqueta--clara.
   Inline-block, nao flex: a etiqueta do heroi tem duas linhas em tela
   estreita, e um flex jogaria o traco para o meio da altura do bloco. */
.etiqueta::before {
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-right: 10px;
  background: currentcolor;
  content: "";
  vertical-align: 0.28em;
}

/* Botões ------------------------------------------------------------------ */
.botao {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition:
    transform 160ms ease,
    background-color 160ms ease;
}

.botao:active {
  transform: translateY(1px);
}

.botao--kukis {
  background: var(--kukis);
  color: white;
}

.botao--kukis:hover {
  background: var(--carimbo);
}

.botao--tinta {
  background: var(--tinta);
  color: var(--papel);
}

.botao--linha {
  border-color: var(--tinta);
  color: var(--tinta);
}

.botao--linha:hover {
  background: rgb(23 19 15 / 6%);
}

:focus-visible {
  outline: 3px solid var(--kukis);
  outline-offset: 3px;
}

/* Topo -------------------------------------------------------------------- */
/* O topo ocupa a largura toda e alinha o miolo à coluna por padding —
   estender um pseudo-elemento além da viewport criava rolagem horizontal. */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  align-items: center;
  gap: 18px;
  padding: 14px max(clamp(18px, 4vw, 48px), calc((100% - 1180px) / 2));
  border-bottom: 1px solid rgb(23 19 15 / 12%);
  background: color-mix(in oklab, var(--kraft) 88%, transparent);
  grid-template-columns: auto 1fr auto;
  backdrop-filter: blur(10px);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
}

/* O selo: um K so para a pagina inteira. Antes era um quadrado em CSS com a
   letra K em Bricolage - parecido com o logo, mas nao o logo. Agora o selo e
   uma moldura vazia e o desenho vem do <symbol id="selo-k">, o mesmo path de
   kukis.svg (o favicon). Quadrado, raio e inclinacao ja moram no simbolo:
   repetir o rotate aqui inclinaria o K duas vezes. */
.marca__selo {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

/* As cores do simbolo entram por heranca, que atravessa o <use>: o quadrado e
   currentColor e a letra le --selo-k-letra. E o unico lugar onde o K e
   pintado; topo, fileira do Para quem e rodape so mudam o tamanho da moldura. */
.selo-k {
  --selo-k-letra: var(--papel-alto);
  display: block;
  width: 100%;
  height: 100%;
  color: var(--kukis);
}

/* O <svg> que guarda o simbolo nao desenha nada: fica fora do fluxo e sem
   tamanho para nao abrir um vao entre o <main> e o rodape. */
.simbolos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.topo__nav {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2.5vw, 30px);
  font-weight: 600;
}

.topo__nav a {
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.topo__nav a:hover {
  border-bottom-color: var(--tinta);
}

/* Herói ------------------------------------------------------------------- */
.heroi {
  display: grid;
  width: var(--coluna);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(36px, 7vw, 96px) 0 clamp(48px, 7vw, 96px);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.heroi h1 {
  font-size: clamp(2.7rem, 7vw, 5.6rem);
  font-weight: 800;
}

.heroi h1 em {
  color: var(--carimbo);
  font-style: normal;
}

.heroi h1 .linha {
  display: block;
}

@keyframes sobe-e-aparece {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .heroi h1 .linha,
  .heroi__acoes,
  .heroi__provas {
    animation: sobe-e-aparece 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(120ms + var(--i, 0) * 110ms);
  }

  .heroi__provas li {
    animation: sobe-e-aparece 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(760ms + var(--i, 0) * 90ms);
  }
}

.heroi__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Provas: três canhotos lado a lado, número grande em mono e um fio em cima,
   como o cabeçalho de uma via. */
.heroi__provas {
  display: grid;
  max-width: 620px;
  padding: 0;
  margin: 36px 0 0;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.heroi__provas li {
  display: grid;
  padding-top: 12px;
  border-top: 2px solid var(--tinta);
  gap: 6px;
  align-content: start;
}

.heroi__provas b {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.heroi__provas span {
  color: #4d443b;
  font-size: 0.92rem;
  line-height: 1.4;
}

/* A impressora e a via ---------------------------------------------------- */
.impressora {
  margin: 0;
  justify-self: center;
  width: min(360px, 100%);
}

.impressora__corpo {
  position: relative;
  z-index: 2;
  height: 64px;
  border-radius: 16px 16px 6px 6px;
  background: linear-gradient(#3a332d, #221d19);
  box-shadow: 0 18px 40px rgb(23 19 15 / 28%);
}

.impressora__luz {
  position: absolute;
  top: 18px;
  left: 22px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
}

.impressora__fenda {
  position: absolute;
  right: 24px;
  bottom: 10px;
  left: 24px;
  height: 6px;
  border-radius: 3px;
  background: #0b0908;
}

.via {
  position: relative;
  z-index: 1;
  margin: -8px 28px 0;
  padding: 26px 18px 22px;
  background: var(--papel-alto);
  box-shadow: 0 14px 30px rgb(23 19 15 / 18%);
  /* Borda de rasgo embaixo: a via foi destacada, não cortada. */
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - 8px),
    95% 100%, 90% calc(100% - 8px), 85% 100%, 80% calc(100% - 8px),
    75% 100%, 70% calc(100% - 8px), 65% 100%, 60% calc(100% - 8px),
    55% 100%, 50% calc(100% - 8px), 45% 100%, 40% calc(100% - 8px),
    35% 100%, 30% calc(100% - 8px), 25% 100%, 20% calc(100% - 8px),
    15% 100%, 10% calc(100% - 8px), 5% 100%, 0 calc(100% - 8px)
  );
  transform-origin: top center;
}

.via__texto {
  margin: 0;
  color: #2a241f;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}

@keyframes via-sai {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(-16px);
  }

  to {
    clip-path: inset(0 0 -20px 0);
    transform: translateY(0);
  }
}

@keyframes luz-pisca {
  0%,
  100% {
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80;
  }

  50% {
    background: #f59e0b;
    box-shadow: 0 0 10px #f59e0b;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* A via imprime de cima para baixo, no ritmo de uma térmica de verdade.
     O clip de rasgo entra depois, quando a animação termina (site.js). */
  .via.esta-imprimindo {
    animation: via-sai 2.4s cubic-bezier(0.2, 0.6, 0.2, 1) both;
    clip-path: none;
  }

  .impressora:has(.esta-imprimindo) .impressora__luz {
    animation: luz-pisca 360ms steps(2, end) 7;
  }

  .impressora {
    animation: sobe-e-aparece 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

/* A bobina ---------------------------------------------------------------- */
.bobina {
  overflow: hidden;
  padding: 12px 0;
  border-top: 1px solid rgb(23 19 15 / 18%);
  border-bottom: 1px solid rgb(23 19 15 / 18%);
  background: var(--papel);
  color: var(--carimbo);
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bobina__faixa {
  display: inline-flex;
  gap: 48px;
  width: max-content;
  padding-left: 48px;
}

@keyframes bobina-corre {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bobina__faixa {
    animation: bobina-corre 48s linear infinite;
  }

  .bobina:hover .bobina__faixa {
    animation-play-state: paused;
  }
}

/* Seções ------------------------------------------------------------------ */
.secao__cabeca {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.secao__cabeca h2 {
  max-width: 22ch;
}

.secao__cabeca > p:not(.etiqueta) {
  max-width: 62ch;
  margin-top: 16px;
  color: var(--fumaca);
  font-size: 1.15rem;
}

/* Caminho: a faixa de papel ----------------------------------------------- */
.caminho {
  position: relative;
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--papel);
}

.caminho > * {
  width: var(--coluna);
  margin-inline: auto;
}

.passos {
  display: grid;
  padding: 0;
  margin: 0 auto;
  gap: 0;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  counter-reset: passo;
}

.passos li {
  position: relative;
  padding: 26px 22px 30px 0;
  border-top: 2px solid var(--tinta);
}

.passos li + li {
  padding-left: 22px;
}

.passos li + li::before {
  position: absolute;
  top: -2px;
  left: 0;
  height: 100%;
  border-left: 1px dashed var(--fio);
  content: "";
}

.passos__numero {
  display: block;
  margin-bottom: 18px;
  color: var(--carimbo);
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 600;
}

.passos h3 {
  margin-bottom: 10px;
}

.passos p {
  color: var(--fumaca);
  font-size: 0.98rem;
}

/* Plataforma: os cartões --------------------------------------------------- */
.plataforma,
.planos {
  padding: clamp(48px, 7vw, 96px) 0;
}

.plataforma > *,
.planos > * {
  width: var(--coluna);
  margin-inline: auto;
}

/* Planos: dois cartões lado a lado, na mesma gramática dos da plataforma. */
.planos {
  padding-top: 0;
}

/* Duas classes de propósito: `.cartoes` (três colunas) vem depois no
   arquivo, e com o mesmo peso ganharia. */
.cartoes.cartoes--planos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cartao--plano {
  padding: 26px 26px 24px;
}

.cartao--plano:hover {
  transform: none;
}

.cartao__inclui {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cartao__inclui li {
  position: relative;
  padding-left: 22px;
  line-height: 1.45;
}

/* O visto é o carimbo da marca, não um ícone de biblioteca. */
.cartao__inclui li::before {
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 9px;
  height: 5px;
  border-bottom: 2px solid var(--kukis);
  border-left: 2px solid var(--kukis);
  content: "";
  transform: translateY(-50%) rotate(-45deg);
}

.cartao__preco {
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px dashed rgb(23 19 15 / 20%);
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cartao--marca .cartao__preco {
  border-top-color: rgb(246 241 230 / 22%);
  color: var(--papel);
}

.planos__prova {
  margin-top: 22px;
  color: var(--fumaca);
  font-size: 1.02rem;
}

.planos__prova strong {
  color: var(--tinta);
}

.planos__prova a {
  margin-left: 6px;
  color: var(--carimbo);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .cartoes.cartoes--planos {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cartoes {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cartao {
  display: grid;
  padding: 22px 22px 24px;
  border: 1px solid rgb(23 19 15 / 10%);
  border-radius: var(--raio);
  background: var(--papel);
  gap: 14px;
  align-content: start;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* Ícone e título na mesma linha: o cartão fica mais baixo e o olho lê o
   título antes do desenho. */
.cartao__topo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cartao__topo h3 {
  font-size: 1.15rem;
}

.cartao:hover {
  box-shadow: 0 18px 40px rgb(23 19 15 / 14%);
  transform: translateY(-3px);
}

.cartao--marca {
  border-color: transparent;
  background: var(--tinta);
  color: var(--papel);
}

.cartao--marca p {
  color: #cdc3b5;
}

.cartao__icone {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: rgb(23 19 15 / 6%);
  place-items: center;
}

.cartao--marca .cartao__icone {
  background: var(--kukis);
  color: white;
}

@keyframes carimba {
  from {
    opacity: 0;
    transform: scale(1.5) rotate(-8deg);
  }

  60% {
    opacity: 1;
    transform: scale(0.94) rotate(1deg);
  }

  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cartao.esta-visivel .cartao__icone {
    animation: carimba 520ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms + 120ms);
  }
}

.cartao__icone svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cartao p {
  color: var(--fumaca);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Painel (TV) ------------------------------------------------------------- */
.painel {
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--tv);
  color: var(--papel);
}

.painel > * {
  width: var(--coluna);
  margin-inline: auto;
}

.painel {
  display: grid;
  align-items: center;
  column-gap: clamp(28px, 5vw, 72px);
}

.painel > .painel__texto,
.painel > .tv {
  width: auto;
}

@supports (grid-template-columns: subgrid) {
  .painel {
    grid-template-columns:
      [borda-inicio] minmax(clamp(18px, 4vw, 48px), 1fr)
      [texto] minmax(0, 520px) [tv] minmax(0, 620px)
      [borda-fim] minmax(clamp(18px, 4vw, 48px), 1fr);
    justify-content: center;
  }

  .painel__texto {
    grid-column: texto;
  }

  .tv {
    grid-column: tv;
  }
}

.painel h2 {
  color: white;
}

.painel__texto > p:not(.etiqueta) {
  margin-top: 16px;
  color: #bdb2a4;
  font-size: 1.12rem;
}

.lista-fina {
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.lista-fina li {
  padding: 11px 0;
  border-top: 1px solid rgb(255 255 255 / 12%);
  color: #e9e1d4;
}

.tv {
  padding: 10px;
  border-radius: 20px;
  margin-top: 28px;
  background: #1f1a16;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 8%),
    0 40px 90px rgb(0 0 0 / 55%);
}

.tv__tela {
  display: grid;
  min-height: 340px;
  border-radius: 12px;
  background: #000;
  grid-template-columns: 1.55fr 1fr;
  overflow: hidden;
}

.tv__coluna {
  display: grid;
  padding: 24px;
  align-content: start;
  gap: 18px;
}

.tv__coluna--pronto {
  background: var(--kukis);
  color: white;
}

.tv__coluna--preparo ul {
  display: grid;
  padding: 0;
  margin: 0;
  gap: 10px;
  list-style: none;
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #d9d0c2;
}

.tv__rotulo {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.tv__chamada {
  display: grid;
  gap: 4px;
}

.tv__chamada b {
  font-family: var(--display);
  font-size: clamp(4.5rem, 10vw, 7rem);
  font-variation-settings: "wdth" 80;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.tv__chamada span {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
}

@keyframes chamada-aceno {
  0%,
  100% {
    transform: none;
  }

  15% {
    transform: translateX(-7px) rotate(-1.2deg);
  }

  30% {
    transform: translateX(7px) rotate(1.2deg);
  }

  45% {
    transform: translateX(-5px);
  }

  60% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-2px);
  }
}

@keyframes senha-entra {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes preparo-sobe {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tv__chamada.esta-chamando {
    animation: chamada-aceno 1.4s ease-in-out 2;
  }

  .tv__chamada.esta-chamando b,
  .tv__chamada.esta-chamando span {
    animation: senha-entra 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .tv__coluna--preparo li.entrou {
    animation: preparo-sobe 380ms ease-out both;
  }
}

/* O endereço da loja, em mono, como um link impresso na via. */
.endereco {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgb(23 19 15 / 7%);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
}

/* Sem intermediário ------------------------------------------------------- */
.sem-meio {
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--papel);
}

.sem-meio > * {
  width: var(--coluna);
  margin-inline: auto;
}

.colunas {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.colunas h3 {
  padding-top: 18px;
  border-top: 2px solid var(--tinta);
  margin-bottom: 10px;
}

.colunas p {
  color: var(--fumaca);
}

.colunas em {
  color: var(--tinta);
  font-style: italic;
}

/* Para quem --------------------------------------------------------------- */
.para-quem {
  padding: clamp(48px, 7vw, 96px) 0;
}

.para-quem > * {
  width: var(--coluna);
  margin-inline: auto;
}

/* Para quem: a fileira e a assinatura --------------------------------------
   O quadro de comandas fez de uma secao secundaria a maior da pagina (1202px,
   contra 1013px da Plataforma, que e o produto), repetiu a serrilha nove vezes
   - ela e a assinatura do site, nao um padrao - e reabriu o modo leitura no
   metro anterior ao formulario. Volta a fileira de pilulas, que e uma linha de
   texto marcada: peso de rodape, nao de capitulo.
   O que faltava nela: uma regra que impedisse o orfao, e movimento. As duas
   coisas cabem no proprio item da casa, sem um pixel a mais de altura. */

/* A cabeca encosta na fileira de proposito: a lista nao e um bloco novo, e a
   glosa da palavra "qualquer" do h2 - continuacao da frase. O respiro padrao
   de 48px a transformaria num segundo argumento. */
.para-quem .secao__cabeca {
  margin-bottom: clamp(24px, 2.6vw, 34px);
}

/* Flex com quebra, nao grade de colunas iguais: cada pilula ocupa o espaco da
   palavra que carrega. E a escala honesta da versao que funcionava - nada alem
   do nome do segmento e desenhado porque nada alem disso e a informacao.
   `margin: 0 auto`, com o `auto` escrito: esta regra tem a mesma
   especificidade de `.para-quem > * { margin-inline: auto }` e vem depois na
   cascata, entao um `margin: 0` aqui desalinharia a fileira do h2 em 130px e a
   colaria na beira da tela. O `padding: 0` mata o recuo de <ul>. */
.publico {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  gap: 10px;
  list-style: none;
}

.publico__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* A pilula e o desenho do botao secundario do heroi ("Como funciona"):
   contorno de 1,5px em tinta, raio 999px. Pertence a casa sem citar a
   serrilha. Sem `white-space: nowrap`: com `min-width: 0` acima, o item pode
   encolher e o nome quebra dentro da pilula em vez de estourar a pagina - em
   360px a coluna tem 324px e uma traducao mais longa que isso nao pode virar
   rolagem horizontal. Na pratica nenhum nome chega perto disso; a quebra e
   ultimo recurso, nao comportamento.
   O estilo mora no <span> e nao no <li>: o <li> carrega o `--i` da revelacao
   escalonada do site.js, e a marca preta nao pode herdar meio segundo de
   atraso. */
.publico__nome {
  padding: 12px 18px;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.15;
}

/* A marca: o unico ponto de tinta cheia da secao - a mesma cota de contraste
   da versao que o cliente aprovou (uma pilula preenchida), nao nove. */
.publico__item.esta-marcada .publico__nome {
  background: var(--tinta);
  color: var(--papel);
}

/* O ORFAO, POR CONSTRUCAO ---------------------------------------------------
   "Food trucks" sozinho na segunda linha nao era culpa do numero oito: era
   flex-wrap livre com itens de largura variavel. Qualquer contagem, qualquer
   largura de tela e qualquer traducao podem largar um item sozinho.
   A regra: o ULTIMO item cresce e come a sobra da linha em que cair. Como a
   casa e sempre o ultimo <li>, a ultima linha sempre chega a margem direita e
   sempre termina na assinatura - a fileira passa a ter dois apoios, um em cada
   ponta, como uma linha de colofao.
   O que cresce e o <li>, nao a pilula: a sobra chega a 1030px em 1440px, e uma
   pilula preta desse tamanho seria uma faixa preta a 200px do formulario -
   peso muito pior que o orfao. Aqui a sobra e kraft vazio (o vazio e o sinal
   desta secao) e o conteudo vai ancorado a direita, com o tamanho que tem. */
.publico__item--casa {
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* O K entra aqui porque marca o LUGAR do leitor e fecha a enumeracao: e
   assinatura, nao selo decorativo. Fora da pilula, para nao empurrar a altura
   dela acima das outras (medido: 46px todas, com o selo do lado) - e e a
   pilula preta ao lado que lhe da moldura. 30px: abaixo disso o K vira um
   ponto vermelho e nao rende nada. Moldura so - a cor e a inclinacao de -6 ja
   moram no <symbol id="selo-k">. */
.publico__selo {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

/* O MOVIMENTO --------------------------------------------------------------
   A marca preta era fixa em "Hamburguerias". Agora ela caminha: nasce onde o
   h2 nasce ("feita na rotina de uma hamburgueria"), atravessa a fileira uma
   vez e e absorvida pela casa, que ja esta preta - "serve a este, e a este... e
   a sua". Ai o K carimba: e a pontuacao do fim.
   A casa NUNCA se desmarca. E dai que sai a correcao do salto para tras: o
   repouso ja e o ultimo quadro, e o que caminha e uma SEGUNDA marca indo ao
   encontro dele, nao a mesma marca voltando ao comeco.
   `.publico--anima` e posto pelo JS: sem script, ou com movimento reduzido, o
   selo nasce visivel e a casa nasce marcada - e nada some. */
@media (prefers-reduced-motion: no-preference) {
  .publico--anima .publico__nome {
    transition:
      background-color 150ms linear,
      color 150ms linear;
  }

  .publico--anima .publico__selo {
    opacity: 0;
  }

  /* Reaproveita o @keyframes carimba do resto do site - o mesmo gesto do icone
     dos cartoes. Termina em `transform: none` e a inclinacao de -6 mora dentro
     do simbolo, entao o K nao se endireita no fim.
     O `opacity: 1` nao e redundante: `carimba` nao declara opacity no quadro
     de 100%, e o navegador completa o quadro que falta com o valor de base do
     elemento. Sem esta linha o valor de base e o 0 da regra acima, e o K
     acenderia no meio da animacao para apagar de novo no fim. */
  .publico--anima.esta-assinada .publico__selo {
    animation: carimba 520ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
    opacity: 1;
  }
}

/* Contato: a via de pedido ------------------------------------------------- */
.contato {
  padding: 12px 0 clamp(56px, 8vw, 110px);
}

/* A via de contato: papel de bobina com rasgo em cima e embaixo. O rasgo é
   desenhado por pseudo-elementos, não por clip-path — o clip levava a sombra
   junto e o cartão ficava chapado, sem borda, colado no fundo. */
.contato__via {
  position: relative;
  width: min(720px, var(--coluna));
  padding: clamp(32px, 4vw, 52px) clamp(24px, 4vw, 48px) clamp(36px, 4vw, 52px);
  margin: 10px auto;
  background: var(--papel-alto);
  box-shadow: 0 24px 60px rgb(23 19 15 / 22%);
}

.contato__via::before,
.contato__via::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 9px;
  content: "";
}

.contato__via::before {
  top: -9px;
  background: conic-gradient(from 135deg at 50% 0, var(--papel-alto) 90deg, transparent 0)
    0 0 / 18px 9px repeat-x;
}

.contato__via::after {
  bottom: -9px;
  background: conic-gradient(from -45deg at 50% 100%, var(--papel-alto) 90deg, transparent 0)
    0 0 / 18px 9px repeat-x;
}

.contato__via > p:not(.etiqueta) {
  margin-top: 14px;
  color: var(--fumaca);
  font-size: 1.1rem;
}

.formulario {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  grid-template-columns: 1fr 1fr;
}

.formulario label {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

.formulario button,
.formulario__estado {
  grid-column: 1 / -1;
}

/* Campo isca contra robôs: fora da tela, não `display: none` (alguns robôs
   ignoram campos escondidos assim). */
.formulario__isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.formulario__estado {
  min-height: 1.5em;
  margin: 0;
  color: var(--fumaca);
  font-size: 0.95rem;
}

.formulario__estado.esta-ok {
  color: #1f7a4d;
  font-weight: 600;
}

.formulario__estado.esta-erro {
  color: var(--carimbo);
  font-weight: 600;
}

.formulario input.esta-invalido {
  border-color: var(--carimbo);
}

.formulario button[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

.formulario button[aria-busy="true"] span::after {
  content: "…";
}

.formulario input {
  min-height: 50px;
  padding: 0 14px;
  border: 1.5px solid var(--fio);
  border-radius: 12px;
  background: white;
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;
}

.formulario input:focus {
  border-color: var(--kukis);
  box-shadow: 0 0 0 3px rgb(227 75 47 / 15%);
  outline: none;
}

/* Canais diretos: mesma altura do botão do formulário, em linha, e o rótulo
   em mono como divisor da via. Texto sublinhado solto lia como rodapé. */
.contato__canais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px dashed var(--fio);
  margin-top: 26px;
}

.contato__canais > span {
  margin-right: 6px;
  color: var(--carimbo);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contato__canais .botao {
  min-height: 46px;
  padding: 0 16px;
  gap: 9px;
  font-size: 0.98rem;
}

.contato__canais svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Rodape: o pe da bobina ---------------------------------------------------
   O rodape antigo era uma linha solta sobre o kraft. Agora e faixa propria de
   papel com rasgo no topo: a pagina termina como a via termina, o papel
   arrancado. Mesma serrilha da via de contato, em 18x9px. Tres faixas, na
   ordem da NXTNA: assinatura + colunas de links + cartao da holding; o fio; e
   a linha em mono. O preto continua exclusivo do painel - o rodape e papel, e
   sobre papel a fumaca passa no contraste ate em mono miudo. */
.rodape {
  position: relative;
  padding: clamp(40px, 5vw, 64px) 0 30px;
  background: var(--papel);
}

.rodape::before {
  position: absolute;
  top: -9px;
  right: 0;
  left: 0;
  height: 9px;
  background: conic-gradient(from 135deg at 50% 0, var(--papel) 90deg, transparent 0)
    0 0 / 18px 9px repeat-x;
  content: "";
}

/* Mesmo padrao de faixa das outras secoes: a faixa sangra, o conteudo mora na
   coluna. (Pseudo-elemento nao e atingido por `> *`; o rasgo fica livre.) */
.rodape > * {
  width: var(--coluna);
  margin-inline: auto;
}

.rodape__topo {
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(220px, 1.1fr) minmax(260px, 1.3fr) minmax(220px, 0.9fr);
}

/* No rodape a marca e assinatura, nao navegacao: um degrau maior que a do
   topo. `.rodape .marca` em vez de um modificador: (0,2,0) vence .marca sem
   depender de onde o bloco foi colado. */
.rodape .marca {
  font-size: 1.6rem;
}

.rodape .marca__selo {
  width: 40px;
  height: 40px;
}

.rodape__frase {
  max-width: 34ch;
  margin-top: 14px;
  color: var(--fumaca);
  font-size: 0.95rem;
}

/* Titulo de coluna em mono, nao em display: no rodape o rotulo e placa de
   corredor, nao manchete. Sobrescreve a regra global de h3 (largura 84 e
   tracking negativo nao servem a mono). */
.rodape__titulo {
  margin: 0 0 14px;
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-variation-settings: normal;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.rodape__links {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rodape__links ul {
  display: grid;
  padding: 0;
  margin: 0;
  gap: 10px;
  list-style: none;
}

.rodape__links a {
  color: var(--fumaca);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.rodape__links a:hover {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* "Kukis by NXTNA" como cartao com hairline e rotulo em mono no pe: a unica
   peca do site desenhada na gramatica da holding e justamente a que fala
   dela. Bloco proprio, nao nota de rodape - parentesco e informacao de marca,
   nao letra miuda. Flex em coluna pelo mesmo motivo dos cartoes: o pe desce
   com `margin-top: auto`. */
.rodape__nxtna {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 14px;
  border: 1px solid rgb(23 19 15 / 16%);
  border-radius: var(--raio);
  color: var(--tinta);
  gap: 8px;
  text-decoration: none;
  transition:
    border-color 220ms ease,
    background-color 220ms ease;
}

.rodape__nxtna:hover,
.rodape__nxtna:focus-visible {
  border-color: rgb(23 19 15 / 40%);
  background: rgb(23 19 15 / 3%);
}

.rodape__nxtna-rotulo {
  color: var(--fumaca);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* "Kukis" na display da casa; "by" leve e italico; NXTNA em mono maiusculo
   com o tracking de .1em que a holding usa - e citacao tipografica, nao
   transplante de fonte nem de paleta. */
.rodape__nxtna-nome {
  display: flex;
  align-items: baseline;
  font-family: var(--display);
  font-size: 1.5rem;
  font-variation-settings: "wdth" 84;
  font-weight: 800;
  gap: 0.35em;
  letter-spacing: -0.03em;
  line-height: 1;
}

.rodape__nxtna-nome em {
  font-style: italic;
  font-weight: 500;
}

.rodape__nxtna-nome b {
  position: relative;
  padding-bottom: 3px;
  font-family: var(--mono);
  font-size: 0.72em;
  font-variation-settings: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* O fio que cresce da esquerda sob NXTNA no hover: comeca, termina, e volta
   quando o mouse sai. Em tinta, nao em carimbo - o vermelho do rodape e so o
   K. */
.rodape__nxtna-nome b::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--tinta);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease;
}

.rodape__nxtna:hover .rodape__nxtna-nome b::after,
.rodape__nxtna:focus-visible .rodape__nxtna-nome b::after {
  transform: scaleX(1);
}

.rodape__nxtna-texto {
  color: var(--fumaca);
  font-size: 0.92rem;
  line-height: 1.45;
}

.rodape__nxtna-pe {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--fio);
  color: var(--fumaca);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rodape__nxtna-pe span:last-child {
  transition: translate 220ms ease;
}

.rodape__nxtna:hover .rodape__nxtna-pe span:last-child {
  translate: 2px -2px;
}

/* Terceira faixa: o fio e a linha em mono. O fio e o border desta linha - um
   div vazio so para desenhar traco nao se justifica. */
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid rgb(23 19 15 / 14%);
  color: var(--fumaca);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  gap: 10px 24px;
  text-transform: uppercase;
}

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

.rodape__base a:hover {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Revelação ao rolar: sobe 14px e aparece. Pouco, e uma vez só. */
@media (prefers-reduced-motion: no-preference) {
  .revela {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 520ms ease,
      transform 520ms ease;
  }

  .revela.esta-visivel {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 70ms);
  }
}

/* Topo ganha sombra ao rolar: sinal de que há página por cima. */
.topo.esta-rolado {
  box-shadow: 0 8px 30px rgb(23 19 15 / 14%);
}

.botao {
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.botao:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgb(23 19 15 / 14%);
}

/* Responsivo --------------------------------------------------------------- */
@media (max-width: 1000px) {
  .passos {
    grid-template-columns: 1fr 1fr;
  }

  .passos li + li {
    padding-left: 0;
  }

  .passos li + li::before {
    display: none;
  }

  .passos li:nth-child(even) {
    padding-left: 22px;
    border-left: 1px dashed var(--fio);
  }

  .cartoes {
    grid-template-columns: 1fr 1fr;
  }

  .painel {
    grid-template-columns: 1fr;
  }

  .painel > .painel__texto,
  .painel > .tv {
    width: var(--coluna);
    grid-column: auto;
  }

  .colunas {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .topo {
    grid-template-columns: auto auto;
  }

  .topo__nav {
    display: none;
  }

  .heroi {
    grid-template-columns: 1fr;
  }

  .impressora {
    width: min(340px, 100%);
    justify-self: start;
  }

  /* A via tem 32 colunas de mono: em tela estreita ela precisa de quase toda
     a largura da impressora, senão corta "B-17" e "PREPARAR". */
  .via {
    margin-inline: 14px;
    padding-inline: 14px;
  }

  .via__texto {
    font-size: 0.72rem;
  }

  .passos {
    grid-template-columns: 1fr;
  }

  .passos li:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .cartoes {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cartao {
    padding: 18px 18px 20px;
    gap: 10px;
  }

  .heroi__provas {
    gap: 0;
    grid-template-columns: 1fr;
  }

  .heroi__provas li {
    align-items: center;
    padding: 12px 0;
    border-top-width: 1px;
    gap: 14px;
    grid-template-columns: 2.4rem 1fr;
  }

  .heroi__provas li:last-child {
    border-bottom: 1px solid var(--tinta);
  }

  .heroi__provas b {
    font-size: 1.6rem;
  }

  .tv__tela {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .formulario {
    grid-template-columns: 1fr;
  }

  .contato__canais > span {
    width: 100%;
  }

  .contato__canais .botao {
    flex: 1 1 auto;
  }
}


/* Rodape em telas menores. */
@media (max-width: 1000px) {
  .rodape__topo {
    gap: 30px;
    grid-template-columns: 1fr minmax(220px, 0.9fr);
  }

  .rodape__marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .rodape__topo {
    grid-template-columns: 1fr;
  }

  .rodape__nxtna {
    max-width: 360px;
  }
}

@media (max-width: 560px) {
  /* Pilula menor: em 360px a coluna tem 324px e o corpo de 1,1rem com 18px
     de padding deixaria "Hamburguerias" quase colado na margem. */
  .publico {
    gap: 8px;
  }

  .publico__nome {
    padding: 10px 15px;
    font-size: 1rem;
  }

  .rodape__links {
    gap: 22px;
    grid-template-columns: 1fr;
  }

  .rodape__base {
    justify-content: flex-start;
  }
}

/* Lista de espera: o nome da loja ocupa a linha inteira, e a linha de
   privacidade fica colada no botão — é a resposta para "por que pedem meu
   WhatsApp?". */
.formulario__largo {
  grid-column: 1 / -1;
}

.formulario__largo small {
  color: var(--fumaca);
  font-weight: 500;
}

.formulario__privacidade {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--fumaca);
  font-size: 0.875rem;
}