/* Modelo KRIA — gráfica e copiadora · "O quadro bem montado" (taste: dense-tiles)
   A página é uma imposição: peças encaixadas lado a lado, como os trabalhos numa folha antes do corte.
   Escrito para 360 px e ampliado em 560, 900, 1080 e 1280 px. Uma família (Hanken Grotesk), cinco
   tamanhos, raio zero em tudo, nenhuma linha fina: as peças se separam por tom e por espaço.
   Cores: papel, preto de impressão, magenta só nas ações, ciano e amarelo nos campos de cor. Mudam
   pelo "cores" do site.json. */

/* Fonte servida pelo próprio site (subconjunto latino do Google Fonts, licença SIL OFL, variável 400–500) */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../fonts/hanken-grotesk.woff2') format('woff2'); }

:root {
  --c-papel: #F6F7F7;
  --c-superficie: #E8ECEC;
  --c-superficie-2: #DDE2E2;
  --c-tinta: #16191C;
  --c-tinta-suave: #565E66;
  --c-acao: #D6006F;
  --c-acao-texto: #FFFFFF;
  --c-ciano: #0096D6;
  --c-amarelo: #FFE14D;
  --c-amarelo-2: #FFEB8A;
  --c-papel-suave: rgba(246, 247, 247, 0.78);
  /* etapas: do tom mais escuro ao mais claro do ciano */
  --c-etapa-1: #0B3A4F;
  --c-etapa-2: #0D5D7E;
  --c-etapa-3: #086E99;
  --c-etapa-4: #49ADD9;
  --c-etapa-5: #9FD5EE;

  --f: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  /* os cinco tamanhos da página */
  --t-pequeno: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --t-corpo: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-destaque: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --t-titulo: clamp(2rem, 1.3rem + 3.2vw, 4.25rem);
  --t-gigante: clamp(2.25rem, 0.6rem + 6.6vw, 7.25rem);

  --topo: 60px;
  --margem: 16px;
  --vao: 8px;
  --largura: 1416px;
  --secao: clamp(72px, 12vw, 200px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --c-superficie-2: color-mix(in srgb, var(--c-superficie) 93%, var(--c-tinta));
    --c-amarelo-2: color-mix(in srgb, var(--c-amarelo) 60%, var(--c-papel));
    --c-papel-suave: color-mix(in srgb, var(--c-papel) 78%, transparent);
    --c-etapa-1: color-mix(in srgb, var(--c-ciano) 30%, var(--c-tinta));
    --c-etapa-2: color-mix(in srgb, var(--c-ciano) 52%, var(--c-tinta));
    --c-etapa-3: color-mix(in srgb, var(--c-ciano) 72%, var(--c-tinta));
    --c-etapa-4: color-mix(in srgb, var(--c-ciano) 70%, var(--c-papel));
    --c-etapa-5: color-mix(in srgb, var(--c-ciano) 38%, var(--c-papel));
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + 16px);
  /* o WhatsApp flutuante não cobre o item que recebe o foco perto da borda de baixo */
  scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
body {
  margin: 0;
  background: var(--c-papel);
  color: var(--c-tinta);
  font: 400 var(--t-corpo)/1.45 var(--f);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
a, button { touch-action: manipulation; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
h2 { font-size: var(--t-titulo); line-height: 0.95; letter-spacing: -0.04em; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
/* Foco em anel duplo (escuro por fora, claro por dentro): visível em qualquer fundo */
:focus-visible { outline: 3px solid var(--c-tinta); outline-offset: 2px; box-shadow: 0 0 0 2px var(--c-papel); } /* taste-skill-ignore: anel de foco (acessibilidade, regra da casa) */
.faixa-demo :focus-visible, .painel :focus-visible, .rodape :focus-visible, .peca--tinta :focus-visible,
.etapa--escura :focus-visible, .duvidas__abertura :focus-visible, .chamada__centro :focus-visible {
  outline-color: var(--c-papel); box-shadow: 0 0 0 2px var(--c-tinta); /* taste-skill-ignore: anel de foco (acessibilidade, regra da casa) */
}
[tabindex="-1"]:focus { outline: none; box-shadow: none; } /* taste-skill-ignore: anel de foco (acessibilidade, regra da casa) */
::selection { background: var(--c-amarelo); color: var(--c-tinta); }
input, select, textarea { caret-color: var(--c-acao); }

.container { width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* taste-skill-ignore: texto só para leitor de tela, não é linha */
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  padding: 12px 18px; background: var(--c-tinta); color: var(--c-papel); text-decoration: none;
}
.pular:focus { top: 12px; }

/* ---------- peças comuns ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 2px solid transparent; border-radius: 0;
  font: 500 var(--t-corpo)/1.2 var(--f); letter-spacing: -0.01em;
  text-decoration: none; text-align: center;
  transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  user-select: none; -webkit-user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn--acao { background: var(--c-acao); color: var(--c-acao-texto); }
.btn--tinta { background: var(--c-tinta); color: var(--c-papel); }
.btn--papel { background: var(--c-papel); color: var(--c-tinta); }
.btn--contorno { border-color: var(--c-tinta); color: var(--c-tinta); }
.btn--grande { min-height: 56px; padding: 0 28px; }
.btn--pequeno { min-height: 44px; padding: 0 16px; font-size: var(--t-pequeno); }
.icone { width: 22px; height: 22px; fill: currentColor; flex: none; }

.link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.25em;
}
.link--claro { color: var(--c-papel); }
.nota { margin-top: 32px; max-width: 60ch; color: var(--c-tinta-suave); }

/* ---------- faixa do modelo de demonstração ---------- */
.faixa-demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px;
  padding: 2px var(--margem);
  background: var(--c-tinta); color: var(--c-papel-suave);
  font-size: var(--t-pequeno);
}
.faixa-demo span { padding-block: 10px; }
.faixa-demo a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-papel); font-weight: 500; text-underline-offset: 4px; }

/* ---------- topo: barra simples (nome, links, uma ação) ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  height: var(--topo);
  background: var(--c-papel);
  transition: background-color 240ms ease;
}
.topo--rolado { background: var(--c-superficie); }
.topo__inner { display: flex; align-items: center; gap: 8px; height: 100%; }
.marca {
  display: flex; align-items: center; min-height: 44px; min-width: 0;
  margin-right: auto;
  color: var(--c-tinta); text-decoration: none;
}
.marca img { height: 40px; width: auto; max-width: 46vw; object-fit: contain; object-position: left center; }
.marca__nome { font-size: var(--t-destaque); font-weight: 500; letter-spacing: -0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu a { text-decoration: none; }

.menu-btn {
  order: 2; flex: none;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  background: none; border: 0; color: var(--c-tinta); cursor: pointer;
  font: 500 var(--t-pequeno)/1 var(--f);
  text-decoration: underline; text-underline-offset: 4px;
  user-select: none; -webkit-user-select: none;
}
.topo__acao { order: 1; }

/* Sem JavaScript: o menu vira uma linha de links logo abaixo do nome */
html:not(.js) .topo { height: auto; position: relative; }
html:not(.js) .topo__inner { flex-wrap: wrap; padding-block: 8px; }
html:not(.js) .menu { order: 3; width: 100%; }
html:not(.js) .menu ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
html:not(.js) .menu a { display: inline-flex; align-items: center; min-height: 44px; }
html:not(.js) .menu-btn, html:not(.js) .menu__acao { display: none; }

/* Com JavaScript, até 1079 px: gaveta de tela cheia por baixo do topo */
@media (max-width: 1079px) {
  .js .menu {
    position: fixed; inset: 0; z-index: 45;
    display: flex; flex-direction: column;
    padding: calc(var(--topo-fim, var(--topo)) + 16px) var(--margem) calc(24px + env(safe-area-inset-bottom));
    background: var(--c-papel);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity 240ms var(--ease-out), visibility 0s 240ms;
  }
  .js.menu-aberto .menu { visibility: visible; opacity: 1; transition: opacity 240ms var(--ease-out); }
  .js .menu ul { display: grid; gap: var(--vao); }
  .js .menu li a {
    display: flex; align-items: flex-end; min-height: 72px; padding: 12px 16px;
    background: var(--c-superficie); color: var(--c-tinta);
    font-size: var(--t-destaque); font-weight: 500; letter-spacing: -0.03em;
  }
  .js .menu li, .js .menu__acao { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
  .js.menu-aberto .menu li, .js.menu-aberto .menu__acao { opacity: 1; transform: none; }
  .js.menu-aberto .menu li:nth-child(2) { transition-delay: 40ms; }
  .js.menu-aberto .menu li:nth-child(3) { transition-delay: 80ms; }
  .js.menu-aberto .menu li:nth-child(4) { transition-delay: 120ms; }
  .js.menu-aberto .menu li:nth-child(5) { transition-delay: 160ms; }
  .js.menu-aberto .menu li:nth-child(6) { transition-delay: 200ms; }
  .js.menu-aberto .menu__acao { transition-delay: 240ms; }
  .menu__acao { margin-top: 16px; min-height: 56px; width: 100%; }
  .js .marca, .js .topo__acao, .js .menu-btn { position: relative; z-index: 46; }
  .menu-aberto, .menu-aberto body { overflow: hidden; }
  .menu-aberto .flutuante { opacity: 0; pointer-events: none; visibility: hidden; }
}

/* ---------- início: painel + folha de trabalhos ---------- */
.inicio { padding: var(--vao) var(--margem) 0; }
.painel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 24px 20px 12px;
  background: var(--c-tinta); color: var(--c-papel);
}
.painel__titulo { font-size: var(--t-destaque); line-height: 1.08; letter-spacing: -0.03em; color: var(--c-papel); max-width: 22ch; }
.painel__corpo, .painel__acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.painel__acoes { gap: 10px; }
.painel__sub { max-width: 46ch; color: var(--c-papel-suave); }
.painel__acao { width: 100%; }
.painel__hoje { font-weight: 500; }
.painel__hoje span:first-child { color: var(--c-papel-suave); font-weight: 400; margin-right: 4px; }
.painel__links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: auto; }
.painel__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-papel); text-underline-offset: 0.25em; text-decoration-thickness: 0.07em; }

/* Folha no celular: duas colunas (a da direita começa mais alta), recortada embaixo */
.folha {
  margin-top: var(--vao);
  columns: 2; column-gap: var(--vao);
  max-height: 62svh; overflow: hidden;
}
.folha::before { content: ""; display: block; height: 56px; }
.folha__col, .folha__miolo, .folha__metade, .folha__topo, .folha__base { display: contents; }
.folha__vao { display: none; }
.quadro { break-inside: avoid; margin: 0 0 var(--vao); }
.quadro--so-tela { display: none; }
.quadro__img { aspect-ratio: 1 / var(--p); overflow: hidden; background: var(--c-superficie); }
.quadro__img img { width: 100%; height: 100%; object-fit: cover; }
.quadro__peca {
  aspect-ratio: 1 / var(--p);
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  padding: 12px 14px;
  overflow: hidden;
}
.quadro__nome { font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.quadro__detalhe { font-size: var(--t-pequeno); }
.quadro__faixa {
  height: 28px; padding: 0 10px;
  font-size: var(--t-pequeno); line-height: 28px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quadro--s .quadro__peca, .quadro__faixa--s { background: var(--c-superficie); color: var(--c-tinta); }
.quadro--c .quadro__peca, .quadro__faixa--c { background: var(--c-ciano); color: var(--c-tinta); }
.quadro--y .quadro__peca, .quadro__faixa--y { background: var(--c-amarelo); color: var(--c-tinta); }
.quadro--k .quadro__peca, .quadro__faixa--k { background: var(--c-tinta); color: var(--c-papel); }

/* ---------- seções ---------- */
.secao { padding-block: var(--secao); }

/* produtos e preços (cardápio) + pedido montado */
.produtos__grade { display: grid; gap: 40px; }
.produtos__titulo { max-width: 9ch; }
.cardapio__grupo + .cardapio__grupo { margin-top: 40px; }
.cardapio__grupo-nome { font-size: var(--t-destaque); letter-spacing: -0.025em; margin-bottom: 18px; }
.item + .item { margin-top: 22px; }
.item__linha { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-weight: 500; }
.item__nome { min-width: 0; }
.item__preco { flex: none; font-variant-numeric: tabular-nums; }
.item__desc { margin-top: 4px; max-width: 40ch; color: var(--c-tinta-suave); }

.pedido { padding: 24px 20px; background: var(--c-superficie); align-self: start; }
.pedido__titulo { font-size: var(--t-destaque); letter-spacing: -0.025em; }
.pedido__texto { margin-top: 8px; }
.pedido__form { display: grid; gap: 18px; margin-top: 22px; }
.pedido__form[hidden] { display: none; }
.pedido__link { margin-top: 22px; width: 100%; }
.js .pedido__link { display: none; }
.campo { display: grid; gap: 6px; }
.campo label, .campo legend { font-weight: 500; }
.campo select, .campo input[type="number"] {
  width: 100%; min-height: 52px; padding: 0 14px;
  font: 400 max(16px, var(--t-corpo))/1.2 var(--f); color: var(--c-tinta);
  background: var(--c-papel); border: 2px solid var(--c-tinta); border-radius: 0;
  appearance: none; -webkit-appearance: none;
}
.campo select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 9l5 6 5-6z' fill='%2316191C'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 22px;
}
.campo--opcoes { border: 0; padding: 0; margin: 0; }
/* o campo cobre o rótulo inteiro (alvo de toque de 44 px ou mais); a bolinha é desenhada ao lado */
.opcao { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcao__marca { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--c-tinta); border-radius: 50%; background: var(--c-papel); }
.opcao__marca::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c-tinta); opacity: 0; transform: scale(0.6); transition: transform 140ms var(--ease-out), opacity 140ms ease; }
.opcao input:checked + .opcao__marca::after { opacity: 1; transform: none; }
.opcao input:focus-visible + .opcao__marca { outline: 3px solid var(--c-tinta); outline-offset: 3px; }
.pedido__referencia { min-height: 1.45em; }
.pedido__referencia strong { font-weight: 500; }
.pedido__form .btn { width: 100%; }

/* como funciona: etapas (acordeão) + cena 3D */
.processo__intro { display: grid; gap: 20px; margin-bottom: 40px; }
.processo__titulo { max-width: 12ch; }
.processo__texto { max-width: 44ch; }
.etapas { position: relative; display: grid; }
.etapas__cena { display: none; }
.etapa { padding: 18px 20px; background: var(--c-etapa-1); color: var(--c-papel); }
/* conta só as etapas (a cena 3D muda de lugar entre elas) */
.etapa:nth-child(5n + 2 of .etapa) { background: var(--c-etapa-2); }
.etapa:nth-child(5n + 3 of .etapa) { background: var(--c-etapa-3); }
.etapa:nth-child(5n + 4 of .etapa) { background: var(--c-etapa-4); color: var(--c-tinta); }
.etapa:nth-child(5n + 5 of .etapa) { background: var(--c-etapa-5); color: var(--c-tinta); }
.etapa__nome { font-size: var(--t-destaque); letter-spacing: -0.025em; }
.etapa__texto { margin-top: 8px; max-width: 40ch; }
/* com JavaScript: barras que abrem (no celular, uma de cada vez; a primeira começa aberta) */
.etapas--acordeao .etapa { padding: 0; }
.etapa__botao {
  display: flex; align-items: center; width: 100%; min-height: 64px; padding: 0 20px;
  background: none; border: 0; color: inherit; cursor: pointer; text-align: left;
  font: inherit; letter-spacing: inherit;
}
.etapas--acordeao .etapa__corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-out); }
.etapas--acordeao .etapa__corpo > p { overflow: hidden; margin: 0; padding: 0 20px; }
.etapas--acordeao .etapa--aberta .etapa__corpo { grid-template-rows: 1fr; }
.etapas--acordeao .etapa:not(.etapa--aberta) .etapa__corpo { visibility: hidden; transition: grid-template-rows 320ms var(--ease-out), visibility 0s 320ms; }
.etapas--acordeao .etapa--aberta .etapa__texto { padding-bottom: 22px; }
.etapas--3d .etapas__cena {
  display: block; position: relative; aspect-ratio: 4 / 3;
  background: var(--c-etapa-1); overflow: hidden; touch-action: pan-y;
}
.etapas__cena canvas, .etapas__cena img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.etapas__cena img { object-fit: cover; }

.prazos { margin-top: 56px; }
.prazos__titulo { font-size: var(--t-destaque); letter-spacing: -0.025em; margin-bottom: 18px; }
.prazos__lista { display: grid; gap: var(--vao); }
.prazo { padding: 20px; background: var(--c-superficie); }
.prazo:first-child { background: var(--c-amarelo); }
.prazo dt { font-size: var(--t-destaque); font-weight: 500; letter-spacing: -0.025em; }
.prazo dd { margin-top: 6px; }

/* criação de arte: mosaico de peças diferentes */
.mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.peca { padding: 20px; background: var(--c-superficie); min-width: 0; }
.peca--titulo, .peca--foto, .peca--frase, .peca--acao { grid-column: 1 / -1; }
.peca--titulo { padding-bottom: 48px; }
.peca--foto { padding: 0; aspect-ratio: 4 / 3; overflow: hidden; margin: 0; background: var(--c-amarelo); }
.peca--foto img { width: 100%; height: 100%; object-fit: cover; }
.peca--numero { background: var(--c-amarelo); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; aspect-ratio: 1; }
.peca__numero { font-size: var(--t-titulo); font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; }
.peca__legenda { font-size: var(--t-pequeno); }
.peca--lista { background: var(--c-ciano); aspect-ratio: 1; }
.peca--lista li + li { margin-top: 4px; }
.peca--frase { font-size: var(--t-destaque); letter-spacing: -0.025em; line-height: 1.2; }
.peca--frase:nth-of-type(2n) { background: var(--c-tinta); color: var(--c-papel); }
.peca--acao { padding: 0; background: none; }
.peca--acao .btn { width: 100%; min-height: 56px; }

/* trabalhos: mural de formatos e fotos */
.mural { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.celula { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--c-superficie); }
.celula--titulo { display: flex; align-items: flex-end; padding: 16px; background: var(--c-papel); }
.celula--titulo h2 { font-size: var(--t-titulo); }
.celula--c { background: var(--c-ciano); }
.celula--y { background: var(--c-amarelo); }
.celula--k { background: var(--c-tinta); color: var(--c-papel); }
.celula--s { background: var(--c-superficie); }
/* a caixa da palavra fica só do tamanho dela, no meio da célula (sem encostar na legenda de cima) */
.celula__palavra {
  position: absolute; left: 50%; top: calc(50% - 14px); transform: translate(-50%, -50%);
  font-size: var(--t-gigante); font-weight: 500; letter-spacing: -0.04em; line-height: 0.9;
  font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap;
}
.celula__unidade { font-size: var(--t-pequeno); letter-spacing: 0; font-weight: 400; }
.celula__legenda { position: absolute; left: 0; right: 0; bottom: 16px; padding: 0 12px; text-align: center; font-size: var(--t-pequeno); }
.celula--foto figure { height: 100%; }
.celula--foto img { width: 100%; height: 100%; object-fit: cover; }
/* a legenda da foto fica no alto: no pé, ela pareceria o rótulo da palavra da linha de baixo */
.celula--foto figcaption {
  position: absolute; left: 0; top: 0; height: 28px; padding: 0 10px; max-width: 100%;
  background: var(--c-tinta); color: var(--c-papel);
  font-size: var(--t-pequeno); line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trabalhos__mais { margin-top: 24px; }

/* empresas: abas por tipo de negócio + faixas alternadas */
.empresas__topo { display: grid; gap: 24px; margin-bottom: 40px; }
.empresas__topo .btn { width: 100%; }
.empresas__titulo { max-width: 11ch; }
.empresas__linha1 { display: block; color: var(--c-tinta-suave); }
.segmento + .segmento { margin-top: 32px; }
.segmento__nome { font-size: var(--t-destaque); letter-spacing: -0.025em; margin-bottom: 12px; }
.segmento__itens { display: grid; gap: 4px; }
.banda {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "prazo qtd" "nome nome";
  gap: 4px 16px; padding: 16px;
  background: var(--c-superficie);
}
.banda:nth-child(even) { background: var(--c-superficie-2); }
.banda__prazo { grid-area: prazo; font-size: var(--t-destaque); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.banda__nome { grid-area: nome; font-weight: 500; }
.banda__nota { display: block; font-weight: 400; color: var(--c-tinta-suave); }
.banda__qtd { grid-area: qtd; justify-self: end; align-self: center; color: var(--c-tinta-suave); }
.empresas__aviso { margin-top: 24px; max-width: 52ch; }
/* com JavaScript: abas */
.abas__lista { display: flex; gap: var(--vao); overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; position: sticky; top: var(--topo); z-index: 5; background: var(--c-papel); padding-block: 8px; }
.abas__lista::-webkit-scrollbar { display: none; }
.aba {
  flex: 1 0 auto; min-height: 56px; padding: 0 16px;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--c-superficie); color: var(--c-tinta);
  font: 500 var(--t-corpo)/1.1 var(--f); text-align: left;
  transition: background-color 180ms ease, color 180ms ease;
  user-select: none; -webkit-user-select: none;
}
.aba[aria-selected="true"] { background: var(--c-tinta); color: var(--c-papel); }
.segmentos--abas .segmento + .segmento { margin-top: 0; }
.segmentos--abas .segmento[hidden] { display: none; }
.segmentos--abas .segmento__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* depoimentos: tiras de papel recém-impressas */
.depoimentos { background: var(--c-ciano); overflow: hidden; padding-bottom: 0; }
.depoimentos__titulo { max-width: 12ch; margin-bottom: 40px; }
.tiras { display: grid; padding-bottom: 40px; }
.tira {
  --rot: -2.5deg;
  width: 80%; padding: 32px 40px 40px;
  background: var(--c-papel); color: var(--c-tinta);
  transform: rotate(var(--rot));
  clip-path: polygon(0 8px, 4% 0, 8% 8px, 12% 0, 16% 8px, 20% 0, 24% 8px, 28% 0, 32% 8px, 36% 0, 40% 8px, 44% 0, 48% 8px, 52% 0, 56% 8px, 60% 0, 64% 8px, 68% 0, 72% 8px, 76% 0, 80% 8px, 84% 0, 88% 8px, 92% 0, 96% 8px, 100% 0, 100% calc(100% - 8px), 96% 100%, 92% calc(100% - 8px), 88% 100%, 84% calc(100% - 8px), 80% 100%, 76% calc(100% - 8px), 72% 100%, 68% calc(100% - 8px), 64% 100%, 60% calc(100% - 8px), 56% 100%, 52% calc(100% - 8px), 48% 100%, 44% calc(100% - 8px), 40% 100%, 36% calc(100% - 8px), 32% 100%, 28% calc(100% - 8px), 24% 100%, 20% calc(100% - 8px), 16% 100%, 12% calc(100% - 8px), 8% 100%, 4% calc(100% - 8px), 0 100%);
}
.tira:nth-child(even) { --rot: 2.5deg; justify-self: end; }
.tira + .tira { margin-top: -24px; }
.tira figcaption { text-align: center; }
.tira__autor { display: block; font-weight: 500; }
.tira__detalhe { display: block; color: var(--c-tinta-suave); }
.tira blockquote { margin-top: 18px; }
.tira__aviso { margin-bottom: 14px; text-align: center; font-size: var(--t-pequeno); color: var(--c-tinta-suave); }
.tira--exemplo blockquote p { color: var(--c-tinta-suave); }

/* onde estamos: endereço em linhas grandes */
.onde { padding-top: var(--secao); }
.linhas { display: grid; }
.linha {
  display: flex; align-items: flex-end; min-height: 84px;
  padding: 16px var(--margem) 14px;
  background: var(--c-amarelo);
  font-size: var(--t-gigante); font-weight: 400; letter-spacing: -0.04em; line-height: 1;
  overflow-wrap: anywhere;
}
.linha:nth-child(even) { background: var(--c-amarelo-2); }
.linha a:not(.botao-seta) { display: inline-flex; align-items: flex-end; min-height: 44px; text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.12em; }
.linha--horarios { font-size: var(--t-titulo); }
.horarios { display: grid; gap: 4px 0.6em; }
.horarios li { display: flex; flex-wrap: wrap; column-gap: 0.3em; }
.horarios__hora { color: var(--c-tinta-suave); }
.horarios li.hoje .horarios__hora { color: var(--c-tinta); }
/* (duas classes: vence a cor alternada das linhas pares) */
.linha.linha--ate { justify-content: space-between; align-items: center; background: var(--c-acao); color: var(--c-acao-texto); }
.botao-seta {
  display: grid; place-items: center; flex: none;
  width: 56px; height: 56px;
  background: var(--c-acao-texto); color: var(--c-acao);
  transition: transform 140ms var(--ease-out);
}
.botao-seta:active { transform: scale(0.95); }
.botao-seta svg { width: 55%; height: 55%; fill: currentColor; }
.linha--ate :focus-visible { outline-color: var(--c-papel); box-shadow: 0 0 0 2px var(--c-tinta); } /* taste-skill-ignore: anel de foco (acessibilidade, regra da casa) */
.mapa { display: grid; gap: var(--vao); margin-top: var(--vao); }
.mapa__quadro { position: relative; aspect-ratio: 4 / 3; background: var(--c-superficie); overflow: hidden; }
.mapa__quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.7) contrast(1.05); }
.mapa__quadro--reservado { display: grid; place-content: center; padding: 24px; text-align: center; color: var(--c-tinta-suave); font-size: var(--t-pequeno); }
.mapa__acoes { display: grid; gap: var(--vao); }
.mapa__acoes .btn { width: 100%; }

/* dúvidas: uma faixa por pergunta, todas abertas */
.duvidas { margin-top: var(--secao); }
.duvidas__abertura { display: flex; align-items: flex-end; min-height: 30svh; padding-bottom: 24px; background: var(--c-acao); color: var(--c-acao-texto); }
.duvidas__abertura h2 { font-size: var(--t-gigante); }
.duvida { padding-block: 32px; background: var(--c-papel); }
.duvida:nth-child(odd) { background: var(--c-superficie); }
.duvida__grade { display: grid; gap: 10px; }
.duvida__pergunta { font-size: var(--t-destaque); letter-spacing: -0.025em; line-height: 1.15; max-width: 26ch; }
.duvida__resposta { max-width: 52ch; }

/* chamada final: uma linha do quadro */
.chamada { padding-block: var(--secao); overflow-x: clip; }
.chamada__linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vao); padding-inline: var(--margem); }
.chamada__centro {
  grid-column: 1 / -1; order: -1;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  min-height: 300px; padding: 28px 22px;
  background: var(--c-acao); color: var(--c-acao-texto);
}
.chamada__centro h2 { max-width: 16ch; }
.chamada__centro p { max-width: 40ch; }
.chamada__acoes { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.chamada__lado { height: 120px; background: var(--c-ciano); overflow: hidden; }
.chamada__lado--foto { background: var(--c-amarelo); }
.chamada__lado img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- rodapé ---------- */
.rodape {
  padding: 56px 0 calc(104px + env(safe-area-inset-bottom));
  background: var(--c-tinta); color: var(--c-papel);
}
.rodape__marca {
  font-size: var(--t-gigante); font-weight: 500; letter-spacing: -0.04em; line-height: 0.9;
  overflow-wrap: anywhere; margin-bottom: 48px;
}
/* com JavaScript: o nome montado com blocos, cada letra vazada num retângulo de cor */
.rodape__marca.blocos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; min-height: 22svh; letter-spacing: 0; }
.bloco {
  display: flex; align-items: flex-end; justify-content: center;
  min-width: 0.62em; height: calc(1.3em * var(--h, 1)); padding: 0 0.06em 0.04em;
  background: var(--c-ciano); color: var(--c-tinta);
  font-size: var(--t-gigante); line-height: 0.82;
}
.bloco--y { background: var(--c-amarelo); }
.bloco--m { background: var(--c-acao); }
.bloco--p { background: var(--c-papel); }
.bloco--espaco { min-width: 0.3em; background: none; }
.rodape__grade { display: grid; gap: 32px; }
.rodape a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-papel); text-underline-offset: 0.25em; text-decoration-thickness: 0.07em; }
.rodape__links ul { columns: 2; column-gap: 24px; }
.rodape__contato p { margin-bottom: 4px; }
.rodape__horarios { margin-top: 16px; color: var(--c-papel-suave); }
.rodape__creditos { margin-top: 40px; font-size: var(--t-pequeno); color: var(--c-papel-suave); }
.rodape__creditos summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 500; color: var(--c-papel); }
.rodape__creditos li { padding-block: 3px; }
.rodape__creditos a { display: inline; min-height: 0; color: var(--c-papel-suave); }
.rodape__fim {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px;
  margin-top: 40px; font-size: var(--t-pequeno);
}
.rodape__fim .btn { color: var(--c-acao-texto); }

/* página 404 */
.pagina-404 { display: flex; flex-direction: column; min-height: 100svh; }
.pagina-404 main { flex: 1; }
.erro { padding: var(--secao) 0; }
.erro .painel { max-width: 560px; }
.rodape--curto { padding: 8px 0 calc(24px + env(safe-area-inset-bottom)); }
.rodape--curto .rodape__fim { margin-top: 0; }

/* ---------- WhatsApp flutuante (quadrado, como os outros botões) ---------- */
.flutuante {
  position: fixed; z-index: 40;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: var(--c-acao); color: var(--c-acao-texto);
  box-shadow: 0 10px 28px rgba(22, 25, 28, 0.22); /* taste-skill-ignore: o botão flutua sobre a página */
  transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out), visibility 0s;
}
.flutuante svg { width: 26px; height: 26px; fill: currentColor; }
/* com JavaScript, nasce escondido (sem animar na carga) e aparece quando o botão do início sai da tela */
.js .flutuante:not(.flutuante--visivel) { opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden; transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out), visibility 0s 400ms; }

/* ---------- celular (até 767 px): o destaque cresce para o título do topo liderar ---------- */
@media (max-width: 767.98px) {
  :root { --t-destaque: 1.5rem; }
  /* as abas das empresas quebram em duas linhas (nenhuma fica escondida para o lado) */
  .abas__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: visible; }
}

/* ---------- 560 px ---------- */
@media (min-width: 560px) {
  .folha { columns: 3; }
  .quadro--so-tela { display: block; }
  .painel__acao { width: auto; }
  .painel__titulo { font-size: var(--t-titulo); line-height: 0.96; letter-spacing: -0.04em; max-width: 19ch; }
  .mosaico, .mural { grid-template-columns: repeat(4, 1fr); }
  .peca--numero, .peca--lista { grid-column: span 2; }
  .celula--titulo { grid-column: span 2; aspect-ratio: auto; }
  .prazos__lista { grid-template-columns: 1fr 1fr; }
  .empresas__topo { grid-template-columns: 1fr auto; align-items: end; }
  .empresas__topo .btn { width: auto; }
  .banda { grid-template-columns: 7.5rem 1fr auto; grid-template-areas: "prazo nome qtd"; align-items: center; min-height: 76px; padding: 12px 20px; }
  .tira { width: min(440px, 70%); }
  .chamada__acoes { flex-direction: row; align-items: center; gap: 24px; }
  .mapa__acoes { grid-template-columns: 1fr 1fr; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}

/* ---------- 900 px: o quadro do computador ---------- */
@media (min-width: 900px) {
  :root { --topo: 64px; --margem: 12px; --vao: 8px; }
  .secao { padding-block: var(--secao); }

  /* início: quatro colunas; o painel ocupa as três do miolo, a 28% da altura (a 4ª do miolo e a
     coluna 6 só aparecem a partir de 1280 px) */
  .inicio {
    --altura: max(640px, calc(100svh - var(--topo)));
    --painel-y: calc(var(--altura) * 0.28);
    --painel-h: 380px;
    --gap: 12px;
    --cols: 4;
    --col: calc((100% - 2 * var(--margem) - (var(--cols) - 1) * var(--gap)) / var(--cols));
    position: relative; height: var(--altura); overflow: hidden;
    padding: 0 var(--margem);
  }
  .painel {
    position: absolute; z-index: 2;
    top: var(--painel-y); left: calc(var(--margem) + var(--col) + var(--gap));
    width: calc((var(--cols) - 2) * var(--col) + (var(--cols) - 3) * var(--gap)); height: var(--painel-h);
    justify-content: space-between; gap: 20px;
    padding: 44px 32px 12px;
  }
  .painel__titulo { font-size: var(--t-titulo); line-height: 0.95; letter-spacing: -0.04em; max-width: 19ch; }
  .painel__corpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end; }
  .painel__acao { width: auto; }
  .folha {
    columns: auto; margin: 0; max-height: none; overflow: visible; height: 100%;
    display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); align-items: start;
  }
  .folha::before { display: none; }
  .folha__col, .folha__metade { display: flex; flex-direction: column; gap: var(--gap); }
  .folha__miolo { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); height: 100%; grid-column: 2 / 5; grid-row: 1; }
  .folha__metade { height: 100%; }
  .folha__metade:nth-child(4) { display: none; }
  .folha__topo { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--gap); height: calc(var(--painel-y) - 32px - var(--gap)); overflow: hidden; flex: none; }
  .folha__vao { display: block; height: calc(var(--painel-h) + 52px); flex: none; }
  .folha__base { display: flex; flex-direction: column; gap: var(--gap); }
  .folha > .folha__col:first-child { grid-column: 1; grid-row: 1; }
  .folha > .folha__col:last-child { display: none; }
  .quadro, .quadro--so-tela { display: block; margin: 0; }

  .produtos__grade { grid-template-columns: repeat(12, 1fr); column-gap: var(--vao); row-gap: 40px; align-items: start; }
  .produtos__titulo { grid-column: 1 / 5; grid-row: 1; }
  .pedido { grid-column: 1 / 5; grid-row: 2; position: sticky; top: calc(var(--topo) + 24px); padding: 28px; }
  .cardapio { grid-column: 5 / 13; grid-row: 1 / 3; columns: 2; column-gap: 64px; }
  .cardapio__grupo { break-inside: avoid; }
  .cardapio__grupo + .cardapio__grupo { margin-top: 0; padding-top: 48px; }
  .cardapio__grupo:first-child, .cardapio__grupo:nth-child(3) { padding-top: 0; }
  .nota { column-span: all; margin-top: 48px; }

  .processo__intro { grid-template-columns: repeat(12, 1fr); column-gap: var(--vao); margin-bottom: 64px; align-items: start; }
  .processo__titulo { grid-column: 1 / 6; }
  .processo__texto { grid-column: 7 / 12; }
  .prazos { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--vao); margin-top: 64px; align-items: start; }
  .prazos__titulo { grid-column: 1 / 4; }
  .prazos__lista { grid-column: 4 / 13; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

  .mosaico { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 96px; grid-auto-flow: dense; gap: var(--vao); }
  .peca { padding: 24px; aspect-ratio: auto; }
  .peca--foto, .peca--acao { padding: 0; }
  .peca--titulo { grid-column: span 6; grid-row: span 3; }
  .peca--foto { grid-column: span 6; grid-row: span 5; aspect-ratio: auto; }
  .peca--numero { grid-column: span 3; grid-row: span 3; }
  .peca--lista { grid-column: span 3; grid-row: span 3; font-size: var(--t-destaque); letter-spacing: -0.02em; }
  .peca--frase { grid-column: span 6; grid-row: span 2; }
  .peca--acao { grid-column: span 6; grid-row: span 1; }
  .peca--acao .btn { height: 100%; }

  .mural { gap: var(--vao); }
  .celula--titulo { grid-column: span 1; aspect-ratio: 1; padding: 20px; }
  .celula__legenda { bottom: 18px; }

  .empresas__topo { margin-bottom: 56px; }
  .segmentos--abas { display: grid; grid-template-columns: 150px 1fr; column-gap: 40px; align-items: start; }
  .segmentos--abas .abas__lista { grid-column: 1; grid-row: 1 / 99; display: flex; flex-direction: column; gap: 6px; overflow: visible; position: sticky; top: calc(var(--topo) + 24px); padding: 0; margin: 0; }
  .segmentos--abas .segmento { grid-column: 2; }
  .aba { flex: none; width: 150px; min-height: 64px; }
  .banda { grid-template-columns: 9rem 1fr auto; padding: 14px 20px; }

  .depoimentos__titulo { margin-bottom: 64px; }
  .tiras { display: flex; justify-content: center; align-items: flex-start; padding-left: 4%; padding-bottom: 0; min-height: 560px; }
  .tira { width: 300px; flex: none; justify-self: auto; }
  .tira + .tira { margin-top: 0; margin-left: -40px; }
  .tira:nth-child(1) { --rot: -4deg; min-height: 440px; margin-top: 40px; }
  .tira:nth-child(2) { --rot: 2deg; min-height: 520px; }
  .tira:nth-child(3) { --rot: 5deg; min-height: 600px; margin-top: 24px; }

  .linha { min-height: 150px; padding: 20px 20px 22px; }
  .horarios { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), max-content)); column-gap: 1.2em; }
  .linha.linha--ate { justify-content: flex-start; gap: 24px; }
  .botao-seta { width: 0.9em; height: 0.9em; }
  .mapa { grid-template-columns: repeat(12, 1fr); }
  .mapa__quadro { grid-column: 1 / 9; aspect-ratio: auto; min-height: 440px; }
  .mapa__acoes { grid-column: 9 / 13; grid-template-columns: 1fr; align-content: start; }

  .duvidas__abertura { min-height: 40svh; padding-bottom: 32px; }
  .duvida { padding-block: 56px; }
  .duvida__grade { grid-template-columns: repeat(12, 1fr); column-gap: var(--vao); align-items: start; }
  .duvida__pergunta { grid-column: 1 / 6; }
  .duvida__resposta { grid-column: 7 / 13; }

  .chamada__linha { grid-template-columns: repeat(12, 1fr); padding-inline: 0; }
  .chamada__centro { grid-column: 3 / 11; order: 0; min-height: 360px; padding: 40px; }
  .chamada__lado { height: 360px; grid-column: span 2; }
  .chamada__lado--foto { grid-column: 1 / 3; }
  .chamada__lado--cor { grid-column: 11 / 13; }

  .rodape__marca.blocos { min-height: 34svh; }
  .rodape__grade { grid-template-columns: 2fr 1fr; }
  .rodape__links ul { columns: 3; }
}

/* ---------- 1080 px: menu em linha ---------- */
@media (min-width: 1080px) {
  .menu { display: flex; align-items: center; gap: 28px; }
  .menu ul { display: flex; gap: 4px 24px; }
  .menu li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; text-decoration-thickness: 0.07em; transition: text-decoration-color 180ms ease; }
  .menu__so-gaveta, .menu-btn, .topo__acao { display: none; }
  .menu__acao { min-height: 44px; padding: 0 18px; font-size: var(--t-pequeno); }
}

/* ---------- 1280 px: a folha inteira, em seis colunas ---------- */
@media (min-width: 1280px) {
  .inicio { --cols: 6; }
  .folha { grid-template-columns: repeat(6, 1fr); }
  .folha__miolo { grid-template-columns: repeat(4, 1fr); grid-column: 2 / 6; }
  .folha__metade:nth-child(4) { display: flex; }
  .folha > .folha__col:last-child { display: flex; grid-column: 6; grid-row: 1; transform: translateY(-90px); }
}

/* ---------- etapas no computador: acordeão horizontal (com JavaScript) ---------- */
@media (min-width: 900px) {
  .etapas--acordeao { display: flex; height: 520px; }
  .etapas--acordeao .etapa {
    position: relative; flex: 0 0 var(--fatia, 10.5%); min-width: 0; overflow: hidden;
    transition: flex-basis 450ms var(--ease-in-out);
  }
  .etapas--acordeao .etapa--aberta { flex-basis: 60%; }
  .etapas--acordeao .etapa__nome { position: absolute; inset: 0; }
  .etapas--acordeao .etapa__botao { position: absolute; inset: 0; min-height: 0; padding: 24px; align-items: flex-end; }
  /* fechada: o nome gira e lê de baixo para cima, preso ao canto de baixo à esquerda */
  .etapas--acordeao .etapa:not(.etapa--aberta) .etapa__rotulo { position: absolute; left: 24px; bottom: 24px; transform-origin: left bottom; transform: rotate(-90deg) translateY(100%); white-space: nowrap; }
  .etapas--acordeao .etapa--aberta .etapa__botao { align-items: flex-start; cursor: default; }
  .etapas--acordeao .etapa__corpo { position: absolute; left: 24px; bottom: 24px; width: calc(46% - 48px); display: block; opacity: 0; transition: opacity 240ms ease; pointer-events: none; }
  .etapas--acordeao .etapa__corpo > p { padding: 0; }
  .etapas--acordeao .etapa--aberta .etapa__corpo { opacity: 1; transition: opacity 400ms ease 200ms; pointer-events: auto; }
  .etapas--acordeao .etapa--aberta .etapa__texto { padding-bottom: 0; }
  /* a cena fica no canto direito da etapa aberta, que a recorta enquanto abre */
  .etapas--3d .etapa .etapas__cena {
    position: absolute; z-index: 1; top: 0; right: 0; height: 100%; width: var(--cena-w, 32vw); aspect-ratio: auto;
    background: transparent; pointer-events: none;
  }
}

/* ---------- interação no computador ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn--acao:hover { background: #B3005D; background: color-mix(in srgb, var(--c-acao) 84%, var(--c-tinta)); }
  .btn--tinta:hover { background: #33383D; background: color-mix(in srgb, var(--c-tinta) 84%, var(--c-papel)); }
  .btn--papel:hover { background: var(--c-superficie); }
  .btn--contorno:hover { background: var(--c-tinta); color: var(--c-papel); }
  .menu li a:hover { text-decoration-color: currentColor; }
  .link:hover { text-decoration-thickness: 0.12em; }
  .aba:not([aria-selected="true"]):hover { background: var(--c-superficie-2); }
  .botao-seta:hover { transform: translateX(4px); }
  .etapa:not(.etapa--aberta) .etapa__botao:hover .etapa__rotulo { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.06em; }
}

/* ---------- movimento (só com .movimento, que respeita "reduzir movimento") ----------
   Só opacidade e deslocamento: o conteúdo continua na ordem do Tab e para o leitor de tela
   (nunca visibility: hidden), e o main.js revela na hora o bloco que recebe o foco. */
.movimento [data-revelar],
.movimento [data-revelar-item],
.movimento [data-dividir] { opacity: 0; }
.movimento [data-obturador] { clip-path: inset(0 0 100% 0); }
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.04em 0.14em; margin: -0.06em -0.04em -0.14em; }
.palavra__in { display: inline-block; }

/* Abertura (CSS puro, sem esperar biblioteca): as colunas da folha deslizam até o lugar e o painel
   entra por partes. O título e as fotos já aparecem no primeiro quadro (o Google mede quando surgem):
   o título só desliza e a folha só se move, sem opacidade nem recorte. */
.movimento .painel__titulo { animation: deslizar 900ms var(--ease-out) both; }
.movimento .painel__sub,
.movimento .painel__acao,
.movimento .painel__hoje,
.movimento .painel__links { animation: subir 800ms var(--ease-out) both; }
.movimento .painel__sub { animation-delay: 120ms; }
.movimento .painel__acao { animation-delay: 210ms; }
.movimento .painel__hoje { animation-delay: 300ms; }
.movimento .painel__links { animation-delay: 390ms; }
.movimento .painel:focus-within > * { animation: none; }
@media (min-width: 900px) {
  .movimento .folha > * { animation: assentar-coluna 1100ms var(--ease-out) both; }
  .movimento .folha > :nth-child(2) { animation-delay: 60ms; }
  .movimento .folha > :nth-child(3) { animation-delay: 120ms; }
  .movimento .folha > :nth-child(4) { animation-delay: 180ms; }
  .movimento .folha > :nth-child(5) { animation-delay: 240ms; }
  .movimento .painel { animation: assentar-painel 1100ms var(--ease-out) both; }
}
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }
@keyframes deslizar { from { transform: translateY(16px); } }
@keyframes assentar-coluna { from { translate: 0 120px; } }
@keyframes assentar-painel { from { translate: 0 40px; } }

/* Lenis (rolagem suave só na roda do mouse) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}