/* Modelo KRIA — gráfica e copiadora 2: "o catálogo impresso".
   A página é um impresso em poucas cores chapadas (como um trabalho em duas cores): fundo azul
   ultramar, blocos inteiros de preto, amarelo e rosa, papel branco; o verde só nas ações.
   Uma letra (STIX Two Text), cinco tamanhos, raio zero, nenhuma linha fina (as partes se separam
   por tom e espaço). Escrito para o celular primeiro; o computador vem nas media queries de largura
   mínima. Movimento só com transform, opacity e clip-path, e só sem "reduzir movimento". */

@font-face {
  font-family: 'STIX Two Text';
  src: url('../fonts/stix-two-text.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* cores (trocáveis no site final pelo campo "cores" do site.json) */
  --c-fundo: #1423B8;          /* o azul ultramar: fundo da página */
  --c-superficie: #1220A6;     /* um tom abaixo do fundo */
  --c-tinta: #FFFFFF;          /* texto sobre o azul e o preto */
  --c-tinta-suave: #B4BCF0;    /* textos secundários sobre o azul */
  --c-acao: #1FC27A;           /* só nas ações */
  --c-acao-texto: #0A0A0A;
  --c-escuro: #000000;         /* blocos pretos */
  --c-papel: #FFFFFF;          /* blocos de papel, com texto no azul */
  --c-campo-1: #F7DD47;        /* amarelo, com texto preto */
  --c-campo-2: #E9479F;        /* rosa, com texto preto */
  --c-tinta-campo: #0A0A0A;
  --c-faixa-a: var(--c-superficie);
  --c-faixa-b: color-mix(in srgb, var(--c-fundo) 90%, var(--c-papel));
  --c-tinta-papel: var(--c-fundo);
  --c-suave-papel: color-mix(in srgb, var(--c-fundo) 72%, var(--c-papel));
  --c-acao-forte: color-mix(in srgb, var(--c-acao) 84%, var(--c-escuro));
  --c-campo-1-tom: color-mix(in srgb, var(--c-campo-1) 88%, var(--c-escuro));

  /* tipo: uma família, cinco tamanhos */
  --fonte: 'STIX Two Text', Georgia, 'Times New Roman', serif;
  --t-pequeno: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --t-corpo: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-destaque: clamp(1.25rem, 1rem + 1.1vw, 2.125rem);
  --t-titulo: clamp(2rem, 1rem + 3.4vw, 4.25rem);
  --t-gigante: clamp(4rem, 1rem + 10vw, 11.5rem);

  /* espaço */
  --margem: 16px;
  --vao: 6px;              /* o vão entre ladrilhos */
  --secao: 72px;           /* respiro de seção */
  --topo-h: 72px;          /* altura do topo (o main.js mede a real) */
  --eixo: 0px;             /* a linha vertical da página (42% no computador) */

  /* movimento */
  --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);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scrollbar-color: var(--c-campo-1) var(--c-superficie);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topo-h) + 16px);
  scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--c-fundo);
  color: var(--c-tinta);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.45;
  font-weight: 400;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.026em; line-height: 1.1; text-wrap: balance; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
button, input, select { font: inherit; color: inherit; }
a, button, summary, label { touch-action: manipulation; }
button { cursor: pointer; }
table { border-collapse: separate; border-spacing: 0; }

:focus-visible { outline: 3px solid var(--c-escuro); outline-offset: 2px; box-shadow: 0 0 0 2px var(--c-papel); } /* taste-skill-ignore: anel de foco (acessibilidade, regra da casa) */
.inicio :focus-visible, .ladrilho--titulo :focus-visible, .precos__campo--resultado :focus-visible, .trabalhos :focus-visible,
.faixa-demo :focus-visible, .topo__marca:focus-visible, .catalogo .aba[aria-selected="true"]:focus-visible {
  outline-color: var(--c-papel); box-shadow: 0 0 0 2px var(--c-escuro); /* taste-skill-ignore: anel de foco (acessibilidade, regra da casa) */
}
.ladrilho--hoje :focus-visible, .ladrilho--nome :focus-visible { outline-color: var(--c-escuro); box-shadow: 0 0 0 2px var(--c-papel); } /* 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-campo-1); color: var(--c-tinta-campo); }
input, select { caret-color: var(--c-acao); }

.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: -80px; z-index: 100;
  padding: 12px 16px; background: var(--c-papel); color: var(--c-tinta-papel); font-weight: 600;
}
.pular:focus { top: 12px; }

/* ---------- botões: um formato só, verde, cantos vivos ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  background: var(--c-acao); color: var(--c-acao-texto);
  font-weight: 600; text-decoration: none; text-align: center; line-height: 1.2;
  transition: transform 140ms var(--ease-out), background-color 180ms ease;
}
.botao:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .botao:hover { background: var(--c-acao-forte); }
  a:not(.botao):hover { text-decoration-thickness: 0.12em; }
}

/* ---------- 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-escuro); color: var(--c-tinta);
  font-size: var(--t-pequeno);
}
.faixa-demo span { padding-block: 10px; }
.faixa-demo a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- topo: uma fileira de ladrilhos (marca, menu ou links, ação) ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  padding: var(--vao) var(--vao) 0;
  background: var(--c-fundo);
}
.topo__linha {
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--vao);
  height: 56px;
}
.topo__marca, .topo__menu, .topo__acao {
  display: flex; align-items: center;
  height: 100%;
  text-decoration: none;
}
.topo__marca { justify-content: center; background: var(--c-escuro); color: var(--c-campo-1); font-size: var(--t-destaque); font-weight: 600; }
.topo__marca img { max-width: 44px; max-height: 44px; width: auto; }
.topo__menu {
  justify-content: flex-start; padding: 0 16px;
  border: 0; background: var(--c-superficie); color: var(--c-tinta);
  font-weight: 500;
}
.topo__acao { padding: 0 18px; background: var(--c-acao); color: var(--c-acao-texto); font-weight: 600; transition: background-color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .topo__acao:hover { background: var(--c-acao-forte); } }
.topo__acao-longo { display: none; }
html:not(.js) .topo__menu { display: none; }
html:not(.js) .topo__linha { grid-template-columns: 56px 1fr; height: auto; }
html:not(.js) .topo__acao { grid-column: 2; min-height: 56px; }
.topo__nav { grid-column: 1 / -1; }
.topo__nav ul { display: flex; flex-wrap: wrap; gap: var(--vao); }
.topo__nav a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; background: var(--c-superficie); text-decoration: none; }

/* gaveta do celular (com JavaScript) */
.js .topo__nav {
  position: fixed; inset: var(--topo-fim, 68px) 0 0; z-index: 49;
  padding: 24px var(--margem) calc(24px + env(safe-area-inset-bottom));
  background: var(--c-escuro);
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.js .topo__nav ul { flex-direction: column; gap: 0; }
.js .topo__nav a { min-height: 64px; padding: 0; background: none; font-size: var(--t-titulo); letter-spacing: -0.026em; }
.menu-aberto .topo__nav { visibility: visible; opacity: 1; transition: opacity 200ms ease; }
.menu-aberto { overflow: hidden; }

/* ---------- início: o quadro de ladrilhos ---------- */
.inicio {
  display: grid; gap: var(--vao);
  padding: var(--vao);
}
.ladrilho { position: relative; min-width: 0; overflow: hidden; }
.ladrilho--nome {
  display: flex; align-items: flex-end;
  min-height: 30svh; padding: 20px;
  background: var(--c-papel); color: var(--c-tinta-papel);
}
.nome-grande {
  font-size: min(var(--t-gigante), calc((100vw - 52px) / (var(--n) * 0.5)));
  font-weight: 500; line-height: 0.92; letter-spacing: -0.04em;
}
.nome-grande span { display: block; width: fit-content; white-space: nowrap; }
.ladrilho--titulo {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 24px 20px;
  background: var(--c-escuro); color: var(--c-tinta);
}
.ladrilho--titulo h1 { font-size: var(--t-destaque); max-width: 22ch; line-height: 1.15; }
.inicio__sub { color: var(--c-tinta-suave); max-width: 40ch; }
.inicio__acao { margin-top: 8px; }
.ladrilho--foto { aspect-ratio: 4 / 3; background: var(--c-escuro); }
.ladrilho--foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.ladrilho--foto-b { display: none; }
.ladrilho--hoje {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px 20px;
  background: var(--c-campo-1); color: var(--c-tinta-campo);
}
.inicio__hoje { font-size: var(--t-destaque); line-height: 1.15; max-width: 18ch; }
.atalhos a { display: flex; align-items: center; min-height: 44px; }

/* ---------- preço por quantidade ---------- */
.precos__campo { display: flex; flex-direction: column; gap: 20px; padding: 48px var(--margem); }
.precos__campo--escolha { background: var(--c-campo-1); color: var(--c-tinta-campo); }
.precos__campo--escolha h2 { font-size: var(--t-titulo); max-width: 12ch; }
.precos__frase { font-size: var(--t-destaque); line-height: 1.2; max-width: 26ch; }
.calc { display: grid; gap: 10px; max-width: 460px; }
.calc[hidden] { display: none; }
.calc__rotulo { font-weight: 600; padding: 0; }
.calc__produto {
  width: 100%; min-height: 52px; padding: 0 44px 0 14px;
  border: 2px solid var(--c-tinta-campo); border-radius: 0;
  background: var(--c-papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230A0A0A' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 12px center / 20px;
  color: var(--c-tinta-campo); font-size: max(16px, var(--t-corpo));
  appearance: none;
}
.calc__qtd { margin: 10px 0 0; padding: 0; border: 0; min-width: 0; }
.calc__qtd legend { margin-bottom: 10px; }
.calc__opcoes { display: flex; flex-wrap: wrap; gap: var(--vao); }
.opcao { position: relative; display: flex; }
.opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcao span {
  display: flex; align-items: center; justify-content: center;
  min-width: 84px; min-height: 52px; padding: 0 16px;
  background: var(--c-campo-1-tom); color: var(--c-tinta-campo);
  font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out);
}
.opcao input:checked + span { background: var(--c-escuro); color: var(--c-tinta); }
.opcao input:active + span { transform: scale(0.97); }
.opcao input:focus-visible + span { outline: 3px solid var(--c-escuro); outline-offset: 3px; }
.precos__sem-js { display: flex; flex-wrap: wrap; gap: 4px 16px; font-weight: 600; }
.js .precos__sem-js { display: none; }
.precos__comparacao { margin-top: auto; max-width: 36ch; }
.precos__comparacao:empty { display: none; }

.precos__campo--resultado { background: var(--c-escuro); color: var(--c-tinta); gap: 12px; }
.precos__produto { font-size: var(--t-titulo); font-weight: 500; letter-spacing: -0.026em; line-height: 1.05; max-width: 14ch; }
.precos__detalhe { color: var(--c-tinta-suave); max-width: 36ch; }
.precos__valor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 24px; }
.precos__preco { font-size: var(--t-gigante); font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.precos__qtd { color: var(--c-tinta-suave); white-space: nowrap; }
.precos__unidade { font-size: var(--t-destaque); }
.precos__unidade:empty { display: none; }
.precos__pedir { align-self: stretch; margin-top: 16px; }

/* ---------- produtos: abas por categoria e faixas por produto ---------- */
.produtos { padding: var(--secao) var(--margem); }
.produtos__cabeca { display: flex; flex-direction: column; align-items: stretch; gap: 24px; margin-bottom: 40px; }
.produtos__cabeca h2 { font-size: var(--t-titulo); max-width: 20ch; }
.catalogo { display: grid; gap: 40px; }
.categoria__nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 16px; font-size: var(--t-destaque); }
.categoria__qtd { font-size: var(--t-pequeno); color: var(--c-tinta-suave); letter-spacing: 0; font-weight: 400; }
.faixas { display: grid; gap: 4px; }
.faixa {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nome preco" "prazo prazo";
  gap: 4px 16px; padding: 16px;
  background: var(--c-faixa-a);
}
.faixa:nth-child(even) { background: var(--c-faixa-b); }
.faixa__prazo { grid-area: prazo; color: var(--c-tinta-suave); font-size: var(--t-pequeno); }
.faixa__prazo:empty { display: none; }
.faixa__nome { grid-area: nome; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.faixa__produto { font-weight: 600; }
.faixa__nota { font-size: var(--t-pequeno); color: var(--c-tinta-suave); }
.faixa__preco { grid-area: preco; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; max-width: 11ch; }
.produtos__nota { margin-top: 24px; color: var(--c-tinta-suave); max-width: 60ch; }

/* abas (montadas pelo main.js) */
.abas__lista { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vao); }
.aba {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-height: 64px; padding: 10px 14px;
  border: 0; background: var(--c-superficie); color: var(--c-tinta); text-align: left; line-height: 1.2;
  transition: background-color 180ms ease, transform 140ms var(--ease-out);
}
.aba:active { transform: scale(0.98); }
.aba__qtd { font-size: var(--t-pequeno); color: var(--c-tinta-suave); }
.aba[aria-selected="true"] { background: var(--c-escuro); }
@media (hover: hover) and (pointer: fine) { .aba[aria-selected="false"]:hover { background: var(--c-faixa-b); } }
.catalogo--abas .categoria__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; } /* taste-skill-ignore: o nome da aba fica para o leitor de tela */
.categoria[hidden] { display: none; }

/* ---------- como mandar o arquivo ---------- */
.arquivo { padding: var(--secao) var(--margem); background: var(--c-campo-1); color: var(--c-tinta-campo); }
.arquivo__topo { display: grid; gap: 32px; }
.arquivo__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.arquivo__texto h2 { font-size: var(--t-titulo); max-width: 14ch; }
.arquivo__texto p { max-width: 40ch; }
.arquivo__nota { order: 2; }
.arquivo__nota-titulo { font-weight: 600; margin-bottom: 6px; }
.arquivo__nota ul { display: flex; flex-wrap: wrap; gap: var(--vao); }
.arquivo__nota li { padding: 6px 12px; background: var(--c-campo-1-tom); }
.arquivo__desenho { margin: 48px 0 32px; }
.diagrama { display: block; width: 100%; height: auto; }
.diagrama--largo { display: none; }
.d-a { fill: var(--c-papel); }
.d-b { fill: var(--c-campo-2); }
.d-c { fill: var(--c-escuro); }
.d-d { fill: var(--c-fundo); }
.passos { display: grid; gap: 28px; }
.passo h3 { font-size: var(--t-destaque); margin-bottom: 8px; }
.passo p { max-width: 40ch; }
.dicas { display: grid; gap: 24px; margin-top: 56px; }
.dica dt { font-weight: 600; margin-bottom: 4px; }
.dica dd { max-width: 40ch; }

/* ---------- trabalhos: a fileira de fotos ---------- */
.trabalhos { padding: var(--secao) 0; background: var(--c-escuro); color: var(--c-tinta); overflow: hidden; }
.trabalhos__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 0 var(--margem); margin-bottom: 24px; }
.trabalhos__cabeca h2 { font-size: var(--t-destaque); }
.trabalhos__conta { color: var(--c-tinta-suave); }
.fileira {
  display: flex; gap: 8px;
  height: 62svh; min-height: 360px; max-height: 760px;
  padding: 0 var(--margem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--margem);
  scrollbar-width: none;
}
.fileira::-webkit-scrollbar { display: none; }
.fileira::after { content: ''; flex: 0 0 1px; }
.modulo { flex: none; scroll-snap-align: start; display: grid; gap: 8px; }
.modulo--alto { width: 72vw; }
.modulo--par { width: 64vw; grid-template-rows: 1fr 1fr; }
.modulo--largo { width: 88vw; height: 72%; align-self: center; }
.modulo__foto { overflow: hidden; background: var(--c-superficie); min-height: 0; }
.modulo__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- entrega e retirada: a comparação escrita ---------- */
.entrega { padding: var(--secao) var(--margem); }
.entrega h2 { font-size: var(--t-titulo); margin-bottom: 32px; }
.comparacao, .comparacao tbody, .comparacao tr, .comparacao th, .comparacao td { display: block; }
.comparacao thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* taste-skill-ignore: os nomes das colunas aparecem em cada célula no celular */
.comparacao tr { padding: 16px; background: var(--c-faixa-a); }
.comparacao tbody tr:nth-child(even) { background: var(--c-faixa-b); }
.comparacao th[scope="row"] { font-size: var(--t-corpo); font-weight: 600; margin-bottom: 8px; text-align: left; }
.comparacao td { padding: 6px 0; }
.comparacao td.destaque { margin-inline: -16px; padding: 10px 16px; background: var(--c-papel); color: var(--c-tinta-papel); }
.comparacao__coluna { display: block; font-size: var(--t-pequeno); font-weight: 600; color: var(--c-tinta-suave); }
.comparacao td.destaque .comparacao__coluna { color: var(--c-suave-papel); }
.entrega__acao { margin-top: 32px; }

/* ---------- depoimentos: bloco do nome, bloco da frase ---------- */
.depoimento { display: grid; }
.depoimento__frase { padding: 32px var(--margem) 64px; background: var(--c-campo-2); color: var(--c-tinta-campo); }
.depoimento__frase p:first-child { font-size: var(--t-destaque); line-height: 1.2; max-width: 24ch; text-indent: -0.4em; }
.depoimento__aviso { margin-top: 24px; font-size: var(--t-pequeno); max-width: 40ch; }
.depoimento__quem {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 96px; padding: 20px var(--margem);
  background: var(--c-papel); color: var(--c-tinta-papel);
}
.depoimento__nome { font-weight: 600; }
.depoimento__detalhe { color: var(--c-suave-papel); }

/* ---------- onde estamos: o mapa com o cartão ---------- */
.onde { position: relative; padding-bottom: var(--secao); }
.onde__mapa { height: 70svh; min-height: 360px; background: var(--c-superficie); }
.onde__mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.onde__reservado { display: flex; align-items: flex-start; height: 100%; padding: 24px var(--margem); }
.onde__reservado p { font-size: var(--t-titulo); line-height: 1.1; letter-spacing: -0.026em; color: var(--c-tinta-suave); max-width: 18ch; }
.onde--sem-mapa .onde__mapa { display: none; }
.cartao {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 16px;
  margin: -80px var(--margem) 0; padding: 28px 24px 0;
  background: var(--c-papel); color: var(--c-tinta-papel);
}
.onde--sem-mapa .cartao { margin-top: var(--secao); }
.cartao h2 { font-size: var(--t-destaque); }
.horarios li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-variant-numeric: tabular-nums; }
.horarios__hora { text-align: right; }
.horarios li.hoje { font-weight: 600; }
.cartao__fone a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.cartao__acoes { display: flex; flex-direction: column; gap: 8px; margin: 8px -24px 0; }
.cartao__link { display: flex; align-items: center; min-height: 44px; padding: 0 24px; }
.cartao__acoes .botao { order: 2; min-height: 56px; }

/* ---------- dúvidas: perguntas grandes, respostas ao lado ---------- */
.duvidas { padding: var(--secao) var(--margem); }
.duvida { display: grid; gap: 12px; }
.duvida + .duvida { margin-top: 56px; }
.duvida--titulo h2, .duvida__pergunta { font-size: var(--t-destaque); font-weight: 500; line-height: 1.15; }
.duvida--titulo h2 { color: var(--c-tinta-suave); }
.duvida__resposta { max-width: 40ch; }

/* ---------- chamada final: três fotos e um campo de cor ---------- */
.chamada__fotos { display: grid; grid-template-columns: 1fr 1fr; }
.chamada__foto { overflow: hidden; aspect-ratio: 4 / 3; }
.chamada__foto:first-child { grid-column: 1 / -1; }
.chamada__foto img { width: 100%; height: 100%; object-fit: cover; }
.chamada__campo { display: flex; flex-direction: column; gap: 24px; padding: 48px var(--margem) 64px; background: var(--c-campo-2); color: var(--c-tinta-campo); }
.chamada__frase { font-size: var(--t-destaque); line-height: 1.2; max-width: 30ch; }
.chamada__frase a { text-decoration-thickness: 4px; text-underline-offset: 6px; }
.chamada__miuda { max-width: 44ch; }

/* ---------- rodapé: papel e tinta trocados ---------- */
.rodape {
  display: grid; grid-template-rows: auto 1fr auto auto;
  min-height: 100svh;
  padding: 40px var(--margem) calc(24px + env(safe-area-inset-bottom));
  background: var(--c-papel); color: var(--c-tinta-papel);
}
.rodape__colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 16px; font-size: 15px; }
.rodape__primeira { font-weight: 600; margin-bottom: 6px; }
.rodape__coluna > :not(.rodape__primeira), .rodape__coluna li { color: var(--c-suave-papel); }
.rodape__coluna a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-tinta-papel); }
.rodape__marca {
  align-self: end; margin-top: 20svh;
  font-size: calc((100vw - 2 * var(--margem)) / (var(--n, 8) * 0.52));
  font-weight: 500; line-height: 0.9; letter-spacing: -0.04em; white-space: nowrap;
}
.rodape__marca-inteira { display: none; width: fit-content; }
.rodape__marca-linha { display: block; width: fit-content; }
.rodape__fim { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: 20px; font-size: var(--t-pequeno); }
.rodape__fim a, .rodape__creditos summary { display: inline-flex; align-items: center; min-height: 44px; }
.rodape__creditos summary { cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; }
.rodape__creditos[open] { flex-basis: 100%; }
.rodape__creditos ul { display: grid; gap: 8px; padding-bottom: 16px; color: var(--c-suave-papel); }
.rodape__creditos li a { display: inline; min-height: 0; color: var(--c-tinta-papel); }

/* ---------- WhatsApp flutuante ---------- */
.flutuante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: var(--c-acao); color: var(--c-acao-texto);
  transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 0s;
}
.flutuante svg { width: 28px; height: 28px; fill: currentColor; }
.js .flutuante:not(.flutuante--visivel) { visibility: hidden; opacity: 0; transform: translateY(12px); transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms; }
.menu-aberto .flutuante { visibility: hidden; }

/* ================= só no celular (o desktop fica travado) ================= */
@media (max-width: 767.98px) {
  /* o nome do topo maior, perto da largura do ladrilho (o main.js ajusta a medida exata) */
  .ladrilho--nome { --t-gigante: 24vw; }
  /* o mapa em meia tela: o cartão com endereço e rotas chega antes */
  .onde__mapa { height: 50svh; min-height: 300px; }
}

/* ================= tablet e computador ================= */
@media (min-width: 560px) {
  :root { --margem: 24px; }
  .produtos__cabeca { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .rodape__colunas { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
  :root { --vao: 8px; --secao: 120px; }
  .topo__linha { grid-template-columns: 60px 1fr auto; height: 60px; }
  .topo__acao-longo { display: inline; }
  .topo__acao-curto { display: none; }

  /* o quadro: nome | foto / título | hoje (a segunda foto entra a partir de 1280 px) */
  .inicio {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "nome a" "titulo hoje";
    height: max(600px, calc(100svh - var(--topo-h)));
    padding: var(--vao);
  }
  .ladrilho--nome { grid-area: nome; min-height: 0; padding: 24px; }
  .nome-grande { font-size: min(var(--t-gigante), calc((50vw - 60px) / (var(--n) * 0.5))); }
  .ladrilho--foto-a { grid-area: a; }
  .ladrilho--foto-b { grid-area: b; }
  .ladrilho--foto { aspect-ratio: auto; }
  .ladrilho--titulo { grid-area: titulo; padding: 24px; }
  .ladrilho--hoje { grid-area: hoje; padding: 24px; }

  .precos { display: grid; grid-template-columns: 5fr 7fr; }
  .precos__campo { padding: 56px 40px; min-height: 80svh; }
  .precos__campo--resultado {
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto auto;
    align-items: end; column-gap: 24px;
  }
  .precos__produto, .precos__detalhe { grid-column: 1 / -1; align-self: start; }
  .precos__valor { grid-column: 1 / -1; grid-row: 4; }
  .precos__unidade { grid-column: 1; grid-row: 5; }
  .precos__pedir { grid-column: 2; grid-row: 5; align-self: end; }

  .faixa { grid-template-columns: 9em minmax(0, 1fr) auto; grid-template-areas: "prazo nome preco"; align-items: baseline; min-height: 76px; padding: 20px; }
  .faixa__prazo { font-size: var(--t-corpo); color: var(--c-tinta); font-variant-numeric: tabular-nums; }
  .faixa__prazo:empty { display: block; }

  .arquivo__topo { grid-template-columns: 1fr 1.4fr; align-items: start; }
  .arquivo__nota { order: 0; padding-top: 12px; }
  .diagrama--largo { display: block; }
  .diagrama--curto { display: none; }
  .passos { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .dicas { grid-template-columns: repeat(3, 1fr); }

  .trabalhos__cabeca { padding: 0 6vw; }
  .fileira { height: 68svh; gap: 12px; padding: 0 6vw; scroll-padding-inline: 6vw; }
  .modulo { gap: 12px; }
  .modulo--alto { width: auto; aspect-ratio: 3 / 4; }
  .modulo--par { width: auto; aspect-ratio: 2 / 3; }
  .modulo--largo { width: auto; height: 100%; aspect-ratio: 16 / 10; }

  /* a tabela de verdade volta a ser tabela */
  .comparacao { display: table; width: 100%; table-layout: fixed; }
  .comparacao thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .comparacao tbody { display: table-row-group; }
  .comparacao tr { display: table-row; padding: 0; background: none; }
  .comparacao tbody tr:nth-child(even) { background: none; }
  .comparacao th, .comparacao td { display: table-cell; padding: 18px 16px; vertical-align: middle; height: 68px; }
  .comparacao__canto { width: 34%; }
  .comparacao thead th { font-size: var(--t-corpo); font-weight: 700; text-align: left; vertical-align: bottom; padding-top: 0; }
  .comparacao thead th.destaque { padding-top: 24px; background: var(--c-papel); color: var(--c-tinta-papel); }
  .comparacao tbody tr:nth-child(odd) > * { background: var(--c-faixa-a); }
  .comparacao th[scope="row"] { font-size: var(--t-corpo); font-weight: 500; margin: 0; }
  .comparacao td.destaque { margin: 0; padding: 18px 16px; }
  .comparacao tbody tr > td.destaque { background: var(--c-papel); }
  .comparacao__coluna { display: none; }

  .depoimento { grid-template-columns: 5fr 7fr; grid-template-areas: "quem frase"; min-height: 70svh; }
  .depoimento__quem { grid-area: quem; padding: 32px; }
  .depoimento__frase { grid-area: frase; padding: 48px; }

  .onde__mapa { height: 80svh; min-height: 520px; }
  .cartao { width: min(440px, calc(100% - 2 * var(--margem))); padding: 32px 32px 0; }
  .cartao__acoes { margin: 8px -32px 0; }
  .cartao__link { padding: 0 32px; }

  .duvida { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .duvida + .duvida { margin-top: 80px; }
  .duvida--titulo h2, .duvida__pergunta { grid-column: 1 / 7; }
  .duvida__resposta { grid-column: 8 / 13; }

  .chamada__fotos { grid-template-columns: repeat(var(--n, 3), 1fr); height: 40svh; min-height: 260px; }
  .chamada__foto { aspect-ratio: auto; }
  .chamada__foto:first-child { grid-column: auto; }
  .chamada__campo { min-height: 44svh; padding: 56px 40px; }

  .rodape { padding: 40px var(--margem) 24px; }
  .rodape__marca { margin-top: 0; }
  .rodape__marca-inteira { display: block; }
  .rodape__marca-linha { display: none; }
  .rodape__marca { font-size: calc((100vw - 2 * var(--margem)) / (var(--total, 14) * 0.5)); }
}

@media (min-width: 1080px) {
  :root { --margem: 32px; --eixo: calc(42vw - var(--margem)); --secao: 160px; }
  .topo__menu { display: none; }
  .js .topo__nav, .topo__nav {
    position: static; grid-column: auto; visibility: visible; opacity: 1; transition: none;
    display: flex; align-items: center;
    padding: 0 0 0 calc(50vw - 76px); background: var(--c-superficie); overflow: visible;
  }
  .topo__linha { grid-template-columns: 60px 1fr auto; }
  .js .topo__nav ul, .topo__nav ul { flex-direction: row; gap: 4px 28px; }
  .js .topo__nav a, .topo__nav a { min-height: 44px; padding: 0; background: none; font-size: var(--t-corpo); letter-spacing: 0; }
  .topo__so-gaveta { display: none; }
  .topo__acao { padding: 0 28px; }
  .menu-aberto { overflow: visible; }

  .precos { grid-template-columns: 42vw 1fr; }
  .precos__campo { padding: 64px 48px 64px var(--margem); min-height: min(90svh, 880px); }
  .precos__campo--resultado { padding-left: 48px; }
  .depoimento { grid-template-columns: 42vw 1fr; }
  .depoimento__quem { padding-left: var(--margem); }
  .comparacao__canto { width: var(--eixo); }
  .duvida { grid-template-columns: var(--eixo) 1fr; column-gap: 0; }
  .duvida--titulo h2, .duvida__pergunta { grid-column: 1; padding-right: 48px; }
  .duvida__resposta { grid-column: 2; }

  .produtos { padding-inline: var(--margem); }
  .catalogo--abas { grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: 40px; }
  .catalogo--abas .abas__lista { grid-template-columns: 1fr; }

  .arquivo__topo { grid-template-columns: var(--eixo) 1fr; gap: 0; }
  .arquivo__nota { padding-right: 48px; max-width: 34ch; }


  /* o cartão de visita no canto de cima do mapa; o aviso do mapa reservado vai para o canto oposto */
  .onde { padding-bottom: 0; }
  .onde__mapa { height: 100svh; max-height: 900px; min-height: 600px; }
  .onde__reservado { align-items: flex-end; justify-content: flex-end; padding: 60px; text-align: right; }
  .cartao { position: absolute; top: 60px; left: 60px; width: 380px; margin: 0; }
  .onde--sem-mapa .cartao { position: relative; top: 0; left: 0; margin: var(--secao) var(--margem); }
}

@media (min-width: 1280px) {
  .inicio {
    grid-template-columns: 1fr 1fr 1.25fr 0.75fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "nome nome a a" "b b titulo hoje";
  }
  .ladrilho--foto-b { display: block; }
  .nome-grande { font-size: min(var(--t-gigante), calc((50vw - 60px) / (var(--n) * 0.5))); }
}

/* página 404: o mesmo quadro, sem as fotos */
@media (min-width: 768px) {
  .inicio.inicio--404 { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "nome nome" "titulo hoje"; height: 100svh; }
}

/* ================= movimento (só sem "reduzir movimento") ================= */
@media (prefers-reduced-motion: no-preference) {
  /* início: o nome e o título só deslizam (nunca somem: são o primeiro conteúdo medido pelo Google) */
  .movimento .nome-grande span { animation: deslizar 900ms var(--ease-out) both; }
  .movimento .nome-grande span + span { animation-delay: 90ms; }
  .movimento .ladrilho--foto img { animation: assentar 1600ms var(--ease-soft) both; }
  .movimento .ladrilho--titulo h1 { animation: deslizar 800ms var(--ease-out) 120ms both; }
  .movimento .ladrilho--titulo [data-subir]:not(h1), .movimento .ladrilho--hoje [data-subir] { animation: subir 800ms var(--ease-out) var(--d, 0ms) both; }
  .inicio__sub { --d: 210ms; }
  .inicio__acao { --d: 300ms; }
  .inicio__hoje { --d: 260ms; }
  .atalhos { --d: 350ms; }

  /* o resto entra quando a seção aparece, em cascata, uma vez só */
  .movimento [data-revelar] {
    opacity: 0; transform: translateY(24px);
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .movimento [data-revelar].visto { opacity: 1; transform: none; }
  .movimento [data-revelar]:focus-within { opacity: 1; transform: none; transition: none; }

  /* movimento-assinatura: a primeira foto dos trabalhos abre como uma cortina */
  .movimento .obturador { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .movimento .obturador img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
  .movimento .obturador.visto { clip-path: inset(0); }
  .movimento .obturador.visto img { transform: none; }

  /* o preço troca subindo */
  .precos__preco.trocou, .precos__unidade.trocou { animation: subir 420ms var(--ease-out); }
}
@keyframes deslizar { from { transform: translateY(14%); } to { transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes assentar { from { transform: scale(1.08); } to { transform: none; } }