/* ==========================================================
   botoes.module.css
   Portado de CSS Module. Prefixo: btn-
   ========================================================== */

/* BOTÃO — regra do site (v1.2)

   Pílula sempre: --raio-botao acompanha a altura, então a palavra fica
   contida no corpo do botão. Toda variante herda a forma daqui e só
   troca cor.

   Compartilhado entre páginas: a forma do botão é identidade, não
   composição de uma página. */

/* Estes tres zeram o que o agente de usuario poe num <button> de
   verdade. Ate o formulario de contato o .botao so morava em <Link>,
   que e um <a> e nao traz nada disso — no <button> entrava a
   `border: 2px outset` padrao, e era ela que desenhava o chanfro nos
   cantos da pilula. Em <a> as tres sao inofensivas. */
.btn-botao {
  appearance: none;
  border: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 52px;
  padding-inline: clamp(28px, 3.4vw, 40px);
  border-radius: var(--raio-botao);
  font-size: var(--body-s);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--t-ui) var(--e-ui),
    color var(--t-ui) var(--e-ui),
    border-color var(--t-ui) var(--e-ui),
    transform 100ms var(--e-ui);
}

.btn-botao:active {
  transform: scale(0.97);
}

/* sobre fundo escuro */
.btn-primario {
  background: var(--areia);
  color: var(--terracota);
}

.btn-primario:hover {
  background: var(--respiro);
}

.btn-secundario {
  border: 1px solid rgba(207, 184, 163, 0.55);
  color: var(--areia);
}

.btn-secundario:hover {
  border-color: var(--areia);
  background: rgba(207, 184, 163, 0.12);
}

/* sobre fundo claro */
.btn-terra {
  background: var(--terracota);
  color: var(--respiro);
}

.btn-terra:hover {
  background: var(--argila);
}

/* Linho Natural com tinta Verde Figueira. Irmão do .primario, que é
   Areia com tinta Terracota: este é o par frio da dupla, para pílula
   clara sobre fundo escuro. O verde sobre o linho dá 8,61:1. O hover
   clareia para Branco Respiro, como no .primario. */
.btn-linho {
  background: var(--linho);
  /* A tinta sai por variável para a página trocá-la sem uma segunda
     regra brigando com esta: as duas teriam a mesma especificidade e o
     resultado dependeria da ordem dos módulos no bundle. */
  color: var(--btn-linho-tinta, var(--verde));
}

.btn-linho:hover {
  background: var(--respiro);
}

/* Argila Raiz — o terracota mais claro e vivo da paleta. Usado onde o
   botão precisa se afastar do terracota da pílula fixa de Contato sem
   sair da família quente. O hover fecha para o próprio terracota: o
   movimento é de aprofundar a cor, não de trocá-la. */
.btn-argila {
  background: var(--argila);
  color: var(--respiro);
}

.btn-argila:hover {
  background: var(--terracota);
}

/* Verde institucional em vez do terracota: a pílula fixa de Contato já
   é terracota e fica na mesma tela, então duas pílulas iguais
   disputavam a mesma leitura. */
.btn-verde {
  background: var(--verde);
  color: var(--respiro);
}

/* Hover no --vital, o verde claro da paleta, com o texto seguindo em
   --respiro como no estado normal — decisão de design do cliente.
   Nesse par o contraste é de 2,7:1, abaixo dos 4,5:1 que a WCAG AA pede
   para texto deste tamanho: a palavra fica fraca sobre o verde claro.
   Trocar o texto para --n900 levaria a 5,1:1 se um dia isso precisar
   passar em auditoria de acessibilidade. */
.btn-verde:hover {
  background: var(--vital);
}


/* ==========================================================
   componentes/Cabecalho.module.css
   Portado de CSS Module. Prefixo: cab-
   ========================================================== */

/* Cabeçalho — logo fixa, menu sanduíche expandível */

.cab-cabecalho {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  background: transparent;
  border: none;
}

.cab-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  height: var(--barra-h);
  padding-inline: var(--borda-cena);
}

.cab-marca {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--areia);
  /* o lockup é currentColor, então a troca de cor é uma transição e não
     uma troca de arquivo */
  transition: color var(--t-ui) var(--e-ui);
}

/* usados nas páginas cuja abertura pede outra tinta, enquanto ela está
   na tela — ver o mapa TINTA_NA_ABERTURA em Cabecalho.tsx */
.cab-marcaEscura {
  color: var(--terracota);
}

.cab-marcaLinho {
  color: var(--linho);
}

/* No telefone, ao chegar no rodapé: o rodapé já abre com o lockup, e as
   duas marcas na tela ao mesmo tempo viram ruído.

   `visibility` junto da opacidade tira a logo do foco por teclado e da
   árvore de acessibilidade — sumir só com opacidade deixaria um link
   invisível ainda tabulável. O hambúrguer não é afetado. */
.cab-marcaOculta {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-ui) var(--e-ui),
    visibility 0s linear var(--t-ui);
}

@media (prefers-reduced-motion: reduce) {
  .cab-marcaOculta {
    transition: none;
  }
}

.cab-marca svg {
  height: var(--logo-h);
  width: auto;
}

.cab-marca:hover svg {
  opacity: 0.78;
}

.cab-menuBotao {
  position: relative;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: var(--controle-h);
  height: var(--controle-h);
  padding: 0;
  cursor: pointer;
  background: var(--terracota);
  border: 1px solid transparent;
  border-radius: var(--raio-ui);
  transition:
    background-color var(--t-ui) var(--e-ui),
    border-color var(--t-ui) var(--e-ui),
    transform 100ms var(--e-ui);
}

/* tres fios brancos empilhados, sem transparencia */
.cab-menuBotao span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #fff;
}

.cab-menuBotao svg {
  width: 20px;
  height: 20px;
  color: var(--respiro);
}

/* aberto: so o fio, sem preenchimento — o fundo ja e terracota */
.cab-menuBotaoAberto {
  background: transparent;
  border-color: rgba(241, 239, 230, 0.55);
}

.cab-menuBotaoAberto:hover {
  border-color: var(--respiro);
}

.cab-menuBotao:hover {
  background: var(--argila);
}

.cab-menuBotaoAberto:hover {
  background: transparent;
}

.cab-menuBotao:active {
  transform: scale(0.94);
}


/* Menu móvel — expansão modal */
.cab-menuMobile {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--terracota);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-block: var(--barra-h) var(--s4);
  /* mesma margem da barra: os itens do menu caem na vertical da logo
     fixa em vez de terem um recuo proprio */
  padding-inline: var(--borda-cena);
  overflow-y: auto;
  animation: slideIn 300ms var(--e-ui);
}

@keyframes slideIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* A lista sobe para onde o simbolo grande comecava: a altura da barra
   mais o mesmo respiro que ele tinha. Assim o primeiro item nao encosta
   na logo fixa do cabecalho, que agora e a unica marca na tela. */
.cab-menuLista {
  list-style: none;
  margin: 0;
  padding: var(--s4) 0 0;
}

.cab-menuMobile .cab-menuItem {
  display: block;
  /* Lato Light, nao Krisma: no corpo grande do menu a serif competia com
     os titulos da pagina. A Light deixa a navegacao silenciosa e guarda a
     Krisma para onde ela afirma algo. */
  font-size: var(--display-s);
  font-family: var(--fonte-texto), -apple-system, sans-serif;
  font-weight: 300;
  line-height: 1.3;
  color: var(--areia);
  text-decoration: none;
  /* --s3 (24px) por item somava ~100px e os sete estouravam a tela de
     800px, deixando "Contato" cortado. O respiro agora acompanha a
     altura da janela: os sete cabem sem rolagem no notebook comum. */
  padding-block: clamp(12px, 2vh, 20px);
  border-block-end: 1px solid rgba(207, 184, 163, 0.2);
  transition: opacity var(--t-ui) var(--e-ui);
}

.cab-menuMobile .cab-menuItem:hover {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .cab-barra,
  .cab-menuBotao span,
  .cab-menuMobile .cab-menuItem {
    transition: none;
  }
  .cab-menuMobile {
    animation: none;
  }
}


/* ==========================================================
   componentes/Rodape.module.css
   Portado de CSS Module. Prefixo: rod-
   ========================================================== */

/* Rodapé — bloco sangrado em Terracota Origem, lockup vertical e toda a
   tipografia em Areia Essência. O par e a assinatura principal do DNA
   (§ paleta) e da 5,5:1 de contraste, acima do minimo de AA. */

.rod-rodape {
  background: var(--terracota);
  color: var(--areia);
  /* com nome porque o mobile reusa: empilhado, o vao entre a logo e os
     blocos precisa ser o mesmo respiro que existe acima da logo */
  --respiro-topo: clamp(56px, 8vw, 96px);
  padding-block: var(--respiro-topo) var(--s4);
}

/* Logo e colunas na mesma linha — decisão de design do cliente.
   A marca cede espaço para caber os quatro blocos ao lado dela: com o
   1fr/1.4fr original as colunas de texto ficariam em 122px. Em
   0.72fr/2.28fr elas chegam a ~190px, que é o limite deste arranjo. */
.rod-topo {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 2.28fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (max-width: 900px) {
  .rod-topo {
    grid-template-columns: 1fr;
  }
}

/* O arquivo se chama "logo-vertical-areia" mas os pixels dele sao
   #e0d6c7 — Linho Natural, nao Areia Essencia. Medido no canvas.

   Em vez de pedir um PNG novo, usamos o canal alfa do proprio arquivo
   como mascara: o recorte vem da imagem, a cor vem do token. A logo
   passa a acompanhar --areia de verdade e continua acompanhando se o
   token mudar um dia. O alfa preserva o antialias das bordas. */
.rod-lockup {
  display: block;
  inline-size: clamp(140px, 16vw, 190px);
  aspect-ratio: 1600 / 2145;
  background-color: var(--areia);
  -webkit-mask: url("../img/marca/logo-vertical-areia.png") no-repeat center / contain;
  mask: url("../img/marca/logo-vertical-areia.png") no-repeat center / contain;
  /* virou link para a home: mesmo recuo de opacidade da marca do
     cabeçalho, para o cursor encontrar uma resposta */
  transition: opacity var(--t-ui) var(--e-ui);
}

.rod-lockup:hover {
  opacity: 0.78;
}

/* As duas primeiras colunas são listas curtas e cabem no próprio
   conteúdo; a terceira carrega prosa e fica com o resto. Com as três
   iguais (o auto-fit anterior) ela media 176px, e o parágrafo sobre
   Curitiba virava sete linhas espremidas — estreito demais até para o
   text-wrap: pretty resolver a viúva. */
/* Quatro blocos: as duas primeiras colunas são listas curtas e cabem no
   próprio conteúdo; as duas de texto dividem o resto em partes iguais. */
.rod-colunas {
  display: grid;
  grid-template-columns:
    minmax(0, auto) minmax(0, auto)
    minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s4) clamp(28px, 4vw, 56px);
}

@media (max-width: 900px) {
  .rod-colunas {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.rod-colTitulo {
  font-size: var(--label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--areia);
  margin-block-end: var(--s2);
}

/* Lista comprimida. Antes o passo entre itens era de 36px: a caixa do
   <li> herdava 16px de corpo com entrelinha 1,6 (25,6px) enquanto o
   link mede --body-s, e sobrava chumbo invisivel dentro de cada item,
   somado a 10px de margem.

   Igualar o corpo do <li> ao do link faz a caixa abracar o texto, e ai
   a entrelinha sozinha resolve o ritmo — sem gap nenhum. Usamos a mesma
   de "Falar com a Sikkay" (--body-s / 1.7), entao as tres colunas
   descem no mesmo compasso e as linhas se alinham entre elas. */
.rod-lista {
  display: flex;
  flex-direction: column;
}

.rod-lista li {
  font-size: var(--body-s);
  line-height: 1.7;
  /* nenhum item quebra no meio: "a Figueira" e "a Sikkay" partiam em
     duas linhas quando a coluna apertava, e um item em duas linhas se
     confunde com o espacamento da lista */
  white-space: nowrap;
}

/* SIGA: caixa alta e icone a esquerda.

   flex, nao inline-flex: como caixa inline o link se alinhava pela
   linha de base e o descendente da linha somava altura, deixando o
   passo desta lista em 27px contra 24px das outras duas colunas. Fora
   do fluxo inline o passo volta a ser so a entrelinha. O fit-content
   impede que ele vire uma faixa clicavel de largura cheia. */
.rod-social {
  display: flex;
  inline-size: fit-content;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.rod-icone {
  inline-size: 16px;
  block-size: 16px;
  flex-shrink: 0;
}

/* Icone dentro de uma linha corrida, nao de um flex: o bloco de contato
   e um <p> com <br>, entao trocar para flex quebraria as quebras. Como
   elemento inline de 15px ele cabe dentro da caixa de 23,8px sem
   esticar a linha — o ritmo das tres colunas continua igual. */
.rod-iconeLinha {
  inline-size: 15px;
  block-size: 15px;
  vertical-align: -2px;
  margin-inline-end: 7px;
}

.rod-lista a,
.rod-contato a {
  font-size: var(--body-s);
  color: var(--areia);
  transition: opacity var(--t-ui) var(--e-ui);
}

/* o hover era uma troca de cor para --areia; com tudo ja em areia isso
   virou no-op, entao o realce passa a ser opacidade */
.rod-lista a:hover,
.rod-contato a:hover {
  opacity: 0.7;
}

.rod-contato p {
  font-size: var(--body-s);
  line-height: 1.7;
  color: var(--areia);
}

.rod-contato p + p {
  margin-block-start: var(--s2);
}

/* "(enviar mensagem)" é apoio do telefone, não outro dado: um degrau
   abaixo em opacidade. Vai numa linha só, logo abaixo do telefone — a
   coluna do rodapé tem ~176px e, deixado como inline, ele quebrava no
   meio ("(enviar" grudava no número e "mensagem)" caía sozinho). O
   `block` garante a linha própria; o `nowrap` impede a quebra interna. */
.rod-apoio {
  display: block;
  white-space: nowrap;
  opacity: 0.68;
}

.rod-horario {
  max-inline-size: 34ch;
}


.rod-base {
  margin-block-start: clamp(40px, 6vw, 72px);
  padding-block-start: var(--s3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--body-s);
  color: var(--areia);
}

.rod-base a:hover {
  opacity: 0.7;
}

@media (max-width: 760px) {
  .rod-topo {
    grid-template-columns: 1fr;
    /* empilhado o gap vira distancia vertical: iguala ao respiro do topo
       para a logo ficar a mesma distancia da borda e dos blocos */
    gap: var(--respiro-topo);
  }
}


/* ==========================================================
   componentes/Capa.module.css
   Portado de CSS Module. Prefixo: cpa-
   ========================================================== */

/* Capa de página interna — o nome da página sobre uma cena. */

.cpa-capa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-block-size: var(--capa-h, clamp(300px, 44vh, 420px));
  background: var(--capa-fundo, var(--verde));
  /* topo pela altura da barra fixa, para o título nunca subir por baixo
     da logo */
  /* mesmo respiro da abertura de "Conheça a SIKKAY", que é o padrão */
  padding-block: var(--barra-h) clamp(48px, 7vw, 88px);
  /* mesmo eixo do "S" do lockup que as outras aberturas usam */
  padding-inline: calc(var(--borda-cena) + var(--recuo-s) * 2)
    var(--borda-cena);
}

/* Com foto a capa é mais alta: a cena precisa de campo para existir,
   enquanto o bloco de cor só precisa segurar a palavra. */
.cpa-comFoto {
  --capa-h: clamp(420px, 62vh, 640px);
}

.cpa-foto {
  object-fit: cover;
  object-position: var(--capa-corte, center);
}

/* Véu em duas camadas: a foto não tem área de respiro própria, então ela
   é construída. O gradiente horizontal abre a zona fechada à esquerda
   onde o título entra; o vertical assenta o topo e o pé.

   A tinta sai por variável para a página poder tingir a cena com uma cor
   da paleta em vez do quase-preto esverdeado padrão. */
.cpa-veu {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* A dosagem sai por variável, e não editando cada parada do gradiente:
     assim a página escolhe o quanto o véu pesa sem duplicar as sete
     paradas e sem risco de desalinhar o desenho entre as páginas. */
  opacity: var(--capa-veu-forca, 1);
  background:
    linear-gradient(
      100deg,
      rgba(var(--capa-veu, 35, 38, 26), 0.86) 0%,
      rgba(var(--capa-veu, 35, 38, 26), 0.62) 32%,
      rgba(var(--capa-veu, 35, 38, 26), 0.24) 62%,
      rgba(var(--capa-veu, 35, 38, 26), 0.05) 86%
    ),
    linear-gradient(
      180deg,
      rgba(var(--capa-veu, 35, 38, 26), 0.5) 0%,
      rgba(var(--capa-veu, 35, 38, 26), 0.08) 34%,
      rgba(var(--capa-veu, 35, 38, 26), 0.44) 100%
    );
}

/* Base do topo e do pé — separadas do véu de propósito.
 *
 * O véu tinge a cena inteira; esta camada escurece só o rodapé da capa,
 * que é onde o título mora. Serve para o caso em que a página quer a foto
 * quase sem filtro mas a cena é clara justamente sob o título: em vez de
 * subir o véu (e devolver o filtro que se queria tirar), escurece-se
 * apenas a faixa onde o texto entra, e os 55% de cima ficam limpos.
 *
 * A mesma camada serve o topo: ali quem precisa de fundo é a logo fixa,
 * que numa cena clara e manchada (folhas escuras furadas por céu) some.
 * O trecho de cima mantém a dosagem cheia até 18%, que é onde o lockup
 * acaba, e some em 42%.
 *
 * Fica fora de .veu porque .veu carrega opacity: var(--capa-veu-forca),
 * e um filho herdaria essa dosagem — o ponto aqui é justamente ser
 * independente dela. As duas pontas valem 0 por padrão, então nenhuma
 * outra capa muda. */
.cpa-capa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(var(--capa-veu, 35, 38, 26), var(--capa-topo, 0)) 0%,
    rgba(var(--capa-veu, 35, 38, 26), var(--capa-topo, 0)) 18%,
    transparent 42%,
    transparent 55%,
    rgba(var(--capa-veu, 35, 38, 26), var(--capa-base, 0)) 78%,
    rgba(var(--capa-veu, 35, 38, 26), var(--capa-base, 0)) 100%
  );
}

/* Grafismo do modo sem foto. Sem mix-blend-mode: os arquivos são Verde
   Vital, mais claro que os fundos usados aqui, e o multiply os apagaria.
   Cada arquivo já traz a própria opacidade embutida; a variável abaixo
   só corta essa dosagem quando a página pede. */
.cpa-grafismo {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--capa-grafismo-forca, 0.375);
  background-image: var(--capa-grafismo, url("../svg/grafismo_3.svg"));
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* O título e o subtítulo viajam juntos: é o bloco que precisa ficar
   acima do véu, não cada linha separadamente. */
.cpa-texto {
  position: relative;
  z-index: 1;
}

/* Mesmo corpo e mesma medida da abertura de "Conheça a SIKKAY", que é a
   página onde o padrão foi ajustado. Antes a Capa usava --display-xl
   (76px em 1440) contra os 50px de lá: as páginas internas abriam com
   dois portes diferentes de título. */
.cpa-titulo {
  margin: 0;
  max-inline-size: 15ch;
  color: var(--capa-tinta, var(--areia));
  font-size: clamp(1.875rem, 4.6vw, 3.125rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* Krisma no subtítulo, num corpo bem menor que o título: é a mesma voz,
   dita mais baixo. A medida em ch impede que ele estique além do nome da
   página em telas largas. */
.cpa-subtitulo {
  margin: calc(var(--s3) / 2) 0 0;
  max-inline-size: 34ch;
  font-family: var(--fonte-display), Georgia, serif;
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--capa-tinta-subtitulo, var(--capa-tinta, var(--areia)));
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .cpa-capa {
    padding-inline: var(--borda-cena);
  }
}


/* ==========================================================
   componentes/Bloco.module.css
   Portado de CSS Module. Prefixo: blc-
   ========================================================== */

/* Bloco alternado — texto de um lado, foto do outro.

   Montagem herdada da referência CarmoFarm: coluna de texto estreita,
   foto ocupando a maior parte da linha, blocos trocando de lado a cada
   ocorrência para dar ritmo à leitura.

   Compartilhado entre páginas de propósito. A matemática de alinhamento
   aqui é fina — foi ajustada medindo em 1440 e 1920 — e duplicá-la por
   página seria garantir que as duas divergissem no primeiro ajuste. */

/* Medidas com nome porque três regras precisam do MESMO número: a
   coluna do grid, o teto da grade e o alinhamento entre os blocos.
   Quando só o conteúdo era travado e a coluna crescia livre, em 1920
   sobravam 257px mortos dentro dela — e era essa folga que soltava a
   borda direita do texto da borda direita da foto. */
.blc-secao {
  --medida: 418px;
  --foto: 720px;
  --vao: clamp(36px, 4.6vw, 66px);
  --recuo-esq: calc(var(--borda-cena) + var(--recuo-s) * 2);
  --recuo-dir: calc(var(--borda-cena) + clamp(28px, 3.4vw, 40px) + 60px);
}

/* Fora do .wrap de propósito, como o hero: preso na coluna de 1200px a
   foto não tinha por onde crescer na horizontal. Sangrado até a margem
   da página, o bloco ganha os ~300px que a referência dá a ele. */
.blc-grade {
  display: grid;
  /* Nenhuma coluna é 1fr: as duas têm teto próprio, então não existe
     folga para sobrar dentro delas. Com min 0 elas encolhem juntas
     quando a tela aperta, em vez de estourar. */
  grid-template-columns: minmax(0, var(--medida)) minmax(0, var(--foto));
  gap: var(--vao);
  align-items: start;
  /* teto exato da soma das partes: passando disso a grade para de
     crescer e centra, então a folga vira margem externa em vez de
     buraco entre o texto e a foto */
  max-inline-size: calc(
    var(--medida) + var(--vao) + var(--foto) + var(--recuo-esq) +
      var(--recuo-dir)
  );
  margin-inline: auto;
  /* Esquerda: dois recuos do "S" do lockup, deslocando o texto para
     dentro em vez de pendurar na borda da página.

     Direita: a foto termina no eixo vertical da pílula fixa. A pílula
     para em --borda-cena e mede duas vezes o próprio padding mais a
     largura da palavra, então metade dela é esse padding + metade da
     palavra. Escrito assim a conta acompanha o clamp da pílula sozinha,
     em vez de fixar um número que só vale em 1440.

     ATENÇÃO: os 60px são metade da largura de "ATENDIMENTO", medida na
     página (119,8px em Lato Bold 14px com 0.12em de entreletra). Se o
     texto da pílula mudar, este alinhamento sai do eixo em TODAS as
     páginas — a conta está repetida em sete lugares, porque as seções
     que não usam Bloco.module.css declaram as próprias medidas.
     Quando "CONTATO" virou "ATENDIMENTO", o valor foi de 39px para
     60px: 21px de desvio se ninguém recalculasse. */
  padding-inline: var(--recuo-esq) var(--recuo-dir);
}

/* vão entre um bloco e o seguinte, menor que o respiro externo da seção
   para os dois ainda lerem como um conjunto */
.blc-grade + .blc-grade {
  margin-block-start: clamp(72px, 9vw, 128px);
}

/* Espelho: foto à esquerda, texto à direita. Só as colunas invertem —
   as margens são as mesmas do bloco base de propósito, e é isso que dá
   o equilíbrio: a foto daqui começa na vertical onde o texto de cima
   começa, e o texto daqui termina na vertical onde a foto de cima
   termina. Duas linhas de alinhamento descendo a seção inteira. */
.blc-invertido {
  grid-template-columns: minmax(0, var(--foto)) minmax(0, var(--medida));
}

.blc-texto {
  text-align: start;
}

/* A cor sai por variável para a página poder trocá-la sem uma segunda
   regra brigando com esta — as duas teriam a mesma especificidade e
   quem venceria dependeria da ordem dos módulos no bundle. Aqui só
   existe uma declaração de color; a página alimenta o valor. */
.blc-titulo {
  max-inline-size: 16ch;
  color: var(--cor-titulo-bloco, var(--verde));
}

.blc-corpo {
  margin-block-start: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  font-size: var(--body-l);
  /* Lato Light: é a voz de texto longo do site. A 400 pesava demais ao
     lado da serif do título. */
  font-weight: 300;
  line-height: 1.65;
  color: rgba(51, 54, 38, 0.86);
}

/* sem título acima, o corpo não precisa do respiro que separava os dois */
.blc-corpoSemTitulo {
  margin-block-start: 0;
}

.blc-acao {
  margin-block-start: var(--s4);
}

/* Enquadramento da foto — passado ao ImagemZoom por className. O
   recorte e o zoom são do componente; a proporção e a largura são
   decisão da composição.

   16/9 bate quase exato com o original das fotos do acervo
   (2752x1536 = 1.79), então quase não há corte. Mais baixa que a coluna
   de texto de propósito: a folga que sobra embaixo é o respiro. */
.blc-imagem {
  aspect-ratio: var(--foto-proporcao, 16 / 9);
  max-inline-size: var(--foto-larg, var(--foto));
  margin-inline-start: auto;
}

/* Quando a foto é mais estreita que a coluna, ela precisa saber em que
   lado ancorar — e é sempre o lado de fora, o da margem da página, que
   é onde moram as duas linhas verticais da seção. No bloco base a foto
   está à direita e o `margin-inline-start: auto` acima já resolve; no
   espelhado ela está à esquerda e a âncora troca de lado. Enquanto a
   foto preenchia a coluna inteira isso não aparecia. */
.blc-invertido .blc-imagem {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

@media (max-width: 900px) {
  .blc-grade {
    grid-template-columns: 1fr;
    /* sem o recuo do "S" aqui: no desktop ele alinha o texto ao lockup,
       mas empilhado ele só joga o bloco 50px para a direita e a foto
       fica torta na tela */
    padding-inline: var(--borda-cena);
  }

  /* no telefone a foto abre o bloco. Empilhada abaixo do texto ela
     chegava depois de três parágrafos e do botão, longe demais do
     título para ainda pertencer a ele. */
  .blc-foto {
    order: -1;
  }

  .blc-imagem {
    aspect-ratio: var(--foto-proporcao-movel, 4 / 3);
  }
}


/* ==========================================================
   componentes/Depoimento.module.css
   Portado de CSS Module. Prefixo: dep-
   ========================================================== */

/* Faixa de depoimento — Linho Natural entre os blocos em Branco Respiro.
   O contraste é baixo de propósito: o depoimento é uma pausa na leitura,
   não um destaque. Quem carrega o destaque é o terracota do CTA. */

.dep-faixa {
  background: var(--linho);
  padding-block: clamp(72px, 9vw, 120px);
}

/* margin-block, nao margin: o <figure> traz margem propria do agente de
   usuario e precisa perde-la, mas um `margin: 0` aqui anularia tambem o
   `margin-inline: auto` do .wrap — e a faixa inteira encostava na
   esquerda em vez de centrar. */
.dep-bloco {
  margin-block: 0;
  text-align: center;
}

/* Lato Regular. O que separa o depoimento do texto da página aqui é o
   peso, não a família: os blocos ao redor são Lato Light (300), e o 400
   já abre essa distância no mesmo alfabeto — sem trazer a serif para
   dentro de texto corrido e sem o peso do 700, que neste corpo grande
   fechava o parágrafo inteiro.

   As aspas entram por ::before/::after para não virarem conteúdo — o
   leitor de tela já anuncia a citação pela marcação. */
.dep-citacao {
  margin: 0;
  margin-inline: auto;
  max-inline-size: 46ch;
  font-family: var(--fonte-texto), -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--terracota);
  text-wrap: pretty;
}

.dep-citacao::before {
  content: "“";
}

.dep-citacao::after {
  content: "”";
}

.dep-autor {
  margin-block-start: var(--s3);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--argila);
}

/* o contexto desce uma linha e perde o peso: o nome é que ancora */
.dep-contexto {
  display: block;
  margin-block-start: 6px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(51, 54, 38, 0.62);
}


/* ==========================================================
   componentes/RespiroParallax.module.css
   Portado de CSS Module. Prefixo: rsp-
   ========================================================== */

/* Faixa sangrada de imagem. A altura padrão é a da home; páginas que
   quiserem outra passam `className`, assim como fazem com o
   object-position quando o corte da foto pede outro eixo.

   A altura sai por variável, e não por uma regra `block-size` que a
   página sobrescreve: a classe da página e esta `.faixa` têm a mesma
   especificidade, então quem venceria dependeria da ordem em que os
   dois módulos entram no bundle. Com `var()` só existe uma declaração
   de block-size — a página apenas alimenta o valor. */

.rsp-faixa {
  position: relative;
  overflow: hidden;
  block-size: var(--faixa-h, clamp(480px, 84vh, 930px));
}

/* A sobra de 24% é o curso do parallax (18%) mais uma margem de
   segurança: no fim da travessia o encaixe exato dava folga zero no
   topo, e aí qualquer arredondamento de subpixel abriria um fio.
   O -12% centraliza a sobra; o zoom só acrescenta área, nunca tira. */
.rsp-moldura {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -12%;
  block-size: 124%;
  will-change: transform;
}

.rsp-moldura img {
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .rsp-faixa {
    block-size: var(--faixa-h-movel, clamp(280px, 42vh, 420px));
  }
}


/* ==========================================================
   componentes/ContatoFlutua.module.css
   Portado de CSS Module. Prefixo: ctf-
   ========================================================== */

/* ---------------------------------------------------------
   Contato fixo sobre a cena
   Espelha o hamburguer: mesma margem lateral (--borda-cena) e
   o mesmo respiro vertical que sobra dele dentro da barra
   (--respiro-controle). Os dois emolduram o hero pela direita.
   Fica abaixo do overlay do menu de proposito — com o menu
   aberto, Contato ja esta na lista.
   --------------------------------------------------------- */

.ctf-pilula {
  position: fixed;
  inset-inline-end: var(--borda-cena);
  inset-block-end: var(--trilho-base);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 52px;
  padding-inline: clamp(28px, 3.4vw, 40px);
  border-radius: var(--raio-botao);
  background: var(--terracota);
  color: var(--respiro);
  font-size: var(--body-s);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(32, 34, 26, 0.24);
  transition:
    background-color var(--t-ui) var(--e-ui),
    transform var(--t-ui) var(--e-ui);
}

.ctf-pilula:hover {
  background: var(--argila);
}

.ctf-pilula:active {
  transform: scale(0.97);
}


/* ==========================================================
   componentes/ImagemZoom.module.css
   Portado de CSS Module. Prefixo: imz-
   ========================================================== */

/* Mecanismo do zoom, e só ele.

   A caixa recorta; quem cresce é a moldura dentro dela. Separar os dois
   é o que permite o zoom passar por baixo do canto arredondado sem
   estourar a borda.

   Enquadramento — proporção, largura máxima, alinhamento na coluna —
   fica com a página, via `className`. São decisões de composição, não do
   componente, e mudam de um bloco para outro. */

.imz-caixa {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-foto);
}

.imz-moldura {
  position: absolute;
  inset: 0;
  will-change: transform;
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.imz-moldura img {
  object-fit: cover;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .imz-moldura {
    transition: none;
  }
}


/* ==========================================================
   Aviso de cookies
   Barra fixa. Nasce com [hidden]; o script só abre sem escolha.
   ========================================================== */

.ck-aviso {
  position: fixed;
  z-index: 35;
  inset-inline: 0;
  inset-block-end: 0;
  background: var(--verde);
  color: var(--linho);
  padding: var(--s3) var(--borda-cena) max(var(--s3), env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(32, 34, 26, 0.18);
}

.ck-miolo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s4);
  max-inline-size: var(--conteudo-max);
  margin-inline: auto;
}

.ck-texto {
  margin: 0;
  max-inline-size: 68ch;
  font-size: var(--body-s);
  font-weight: 300;
  line-height: 1.55;
  color: var(--linho);
}

.ck-texto a {
  color: var(--areia);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.ck-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  flex: none;
}

body.tem-aviso-cookies {
  padding-block-end: var(--aviso-cookies-h, 0px);
}

body.tem-aviso-cookies .ctf-pilula {
  inset-block-end: calc(var(--aviso-cookies-h, 140px) + 16px);
}

@media (max-width: 900px) {
  .ck-miolo {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================
   AJUSTES DO PORTE

   Não vêm do site original: existem porque o PHP renderiza o que o
   React renderizava sob condição.
   ========================================================== */

/* O painel do menu.

   Em React ele era `{menuAberto && <nav>}` — fora do DOM enquanto
   fechado. Aqui ele está sempre no HTML e é controlado pelo atributo
   [hidden], que o JS liga e desliga.

   O problema: `[hidden] { display: none }` vem da folha do navegador e
   perde para `.cab-menuMobile { display: flex }`, que é seletor de
   classe. Sem a regra abaixo o menu nasce ABERTO, cobrindo a página
   inteira na primeira pintura.

   `!important` aqui é deliberado e correto: [hidden] significa «não
   mostre isto», e nenhuma regra de layout deve poder contradizer. */
.cab-menuMobile[hidden],
.ck-aviso[hidden] {
  display: none !important;
}

/* Mesmo motivo, para qualquer campo de formulário escondido: o campo
   «Outro serviço» só aparece quando o serviço escolhido é «Outro». */
.form-campo[hidden] {
  display: none !important;
}

/* A confirmação do formulário nasce vazia, com [hidden]. A regra
   .form-confirmacao { display: grid } vence o display:none do navegador,
   e o bloco de linho aparecia solto abaixo de «Enviar mensagem». */
.form-confirmacao[hidden] {
  display: none !important;
}