/* ==========================================================================
   Componentes reutilizaveis — botoes, pilulas, logotipo, chips
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botao
   -------------------------------------------------------------------------- */
.btn {
  --btn-fg: var(--ink);
  --btn-bg: transparent;
  --btn-border: transparent;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  isolation: isolate;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.btn__label {
  display: inline-block;
}

.btn__icon {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn__icon path {
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn:hover .btn__icon {
  transform: translateX(3px);
}

/* Seta de link externo (para fora do site): sobe na diagonal, nao para o lado. */
.btn:hover .btn__icon--ext {
  transform: translate(2px, -2px);
}

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

/* Primario — o unico bloco solido de vermelho da pagina. */
.btn--primary {
  --btn-fg: #fff;
  --btn-bg: var(--brand-strong);
  box-shadow: var(--shadow-brand);
}

.btn--primary:hover {
  --btn-bg: var(--brand-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(199, 33, 28, 0.58);
}

/* Escuro — CTA persistente do header. */
.btn--dark {
  --btn-fg: #fff;
  --btn-bg: var(--ink);
}

.btn--dark:hover {
  --btn-bg: #000;
}

/* Fantasma — acao secundaria. */
.btn--ghost {
  --btn-fg: var(--ink);
  --btn-bg: var(--surface);
  --btn-border: var(--line-strong);
  box-shadow: var(--shadow-xs);
}

.btn--ghost:hover {
  --btn-border: var(--ink-30);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn--sm {
  padding: 0.688rem 1.125rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.005em;
}

.btn--block {
  width: 100%;
}

/* Em telas de toque o alvo minimo e 44px, independente da densidade
   escolhida para o desktop. */
@media (pointer: coarse) {
  .btn {
    min-height: 2.75rem;
  }
}

/* --------------------------------------------------------------------------
   Pilula flutuante — o container do header
   -------------------------------------------------------------------------- */
.pill {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.3125rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    backdrop-filter var(--dur-base) var(--ease-out);
}

/* --------------------------------------------------------------------------
   Logotipo
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  padding-inline: 0.5rem 0.625rem;
}

.logo__img {
  height: clamp(1.5rem, 1.28rem + 0.9vw, 1.875rem);
  width: auto;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.logo:hover .logo__img {
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   Chip de status — ponto pulsante + rotulo
   -------------------------------------------------------------------------- */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-70);
}

.status-chip__dot {
  position: relative;
  width: 0.375rem;
  height: 0.375rem;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
}

.status-chip__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}

/* --------------------------------------------------------------------------
   Marca de check desenhada por stroke
   -------------------------------------------------------------------------- */
.check {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.check svg {
  width: 0.625rem;
  height: 0.625rem;
}

.check path {
  stroke: var(--ink-30);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition:
    stroke-dashoffset var(--dur-slow) var(--ease-out),
    stroke var(--dur-base) var(--ease-out);
}

/* Dois gatilhos, o mesmo check: o JavaScript marca a linha (.is-checked,
   o painel da hero) ou a revelacao por rolagem marca a lista inteira
   (.check--reveal dentro de um [data-reveal], a secao Empresa). */
.is-checked .check,
[data-reveal].is-revealed .check--reveal {
  background: var(--ink);
  border-color: var(--ink);
}

.is-checked .check path,
[data-reveal].is-revealed .check--reveal path {
  stroke: #fff;
  stroke-dashoffset: 0;
}

/* Pela revelacao, cada check e desenhado logo depois que o proprio item
   termina de subir, na cadencia da lista (--i e --reveal-stagger). */
[data-reveal].is-revealed .check--reveal,
[data-reveal].is-revealed .check--reveal path {
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger) + var(--dur-reveal-scroll) * 0.5);
}

/* --------------------------------------------------------------------------
   Mascara de linha — o recurso tipografico da referencia, agora generico.
   Cada linha vive dentro da propria janela e sobe de dentro dela.
   Depende de um ancestral [data-reveal] para disparar.
   -------------------------------------------------------------------------- */
.mask-line {
  display: block;
  overflow: hidden;
  /* Folga vertical para acentos e descidas nao serem cortados pela mascara. */
  padding-block: 0.06em 0.18em;
  margin-block: -0.06em -0.18em;
}

.mask-line__inner {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform var(--dur-reveal) var(--ease-out);
}

[data-reveal].is-revealed .mask-line__inner {
  transform: translate3d(0, 0, 0);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* --------------------------------------------------------------------------
   Texto que se acende na rolagem (js/components/lit-text.js).
   A frase nasce no tom apagado dos titulos (--ink-30) e fica preta da
   primeira a ultima palavra conforme a pagina desce: uma leitura guiada.
   O JavaScript so escreve o progresso (--lit-p, de 0 a 1); o resto e um
   degrade recortado no proprio texto.

   Um no de texto so, sem uma <span> por palavra: leitor de tela e buscador
   leem a frase inteira, como qualquer titulo. O .lit__text e inline, e o
   fundo de um elemento inline corre como se as linhas estivessem emendadas
   lado a lado (box-decoration-break: slice): o degrade atravessa a frase na
   ordem de leitura, linha por linha.

   --lit-p nasce 1: sem JavaScript, com movimento reduzido ou antes de o
   modulo carregar, a frase e simplesmente preta. O tom apagado (--ink-30)
   passa AA para texto grande, entao a frase e legivel em qualquer ponto.
   -------------------------------------------------------------------------- */
.lit {
  --lit-p: 1;
  /* Borda macia entre o aceso e o apagado, em fracao da frase inteira. */
  --lit-edge: 12%;
  --lit-stop: calc(var(--lit-p) * (100% + var(--lit-edge)));
}

.lit__text {
  color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--ink) calc(var(--lit-stop) - var(--lit-edge)),
    var(--ink-30) var(--lit-stop)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}

/* Alto contraste do sistema: sem recorte, na cor de texto do sistema. */
@media (forced-colors: active) {
  .lit__text {
    color: CanvasText;
    background: none;
  }
}

/* --------------------------------------------------------------------------
   Casca de secao — o cartao branco sobre o palco cinza.
   Base de composicao para toda secao a partir daqui.
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  /* Contexto proprio para o fundo vivo (.backdrop) ficar atras do cartao e
     nunca atras do header ou de outra secao. */
  isolation: isolate;
  padding-inline: var(--shell-pad);
  padding-block: 0 var(--shell-pad);
  /* Compensa o header fixo quando a secao e alvo de ancora (#empresa). */
  scroll-margin-top: calc(var(--header-h) + 2 * var(--shell-pad));
}

/* --------------------------------------------------------------------------
   Fundo vivo — a camada de cor atras do cartao branco (partials/backdrop.php).

   Com foto: o arquivo ja vem desfocado; o blur de CSS so alisa a ampliacao
   e a escala esconde a borda clara que o desfoque cria. Sem foto: a aurora
   da marca, tres manchas (vermelho, cinza quente, branco) desenhadas em
   gradiente radial e movidas devagar — sem filter, para custar quase nada.

   O veu branco por cima da-lhe a intensidade: 'strong' na hero, 'soft' nas
   secoes internas, onde o palco cinza continua mandando e o cartao segue
   sendo o foco. As bordas voltam ao cinza do palco para uma secao emendar
   na outra sem faixa de cor.
   -------------------------------------------------------------------------- */
.backdrop {
  --veil-top: rgba(255, 255, 255, 0.45);
  --veil-mid: rgba(255, 255, 255, 0.32);
  --aurora-alpha: 0.26;

  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--stage);
}

.backdrop--strong {
  --veil-top: rgba(255, 255, 255, 0.22);
  --veil-mid: rgba(255, 255, 255, 0.1);
  --aurora-alpha: 0.34;
}

.backdrop picture,
.backdrop__img {
  display: block;
  width: 100%;
  height: 100%;
}

.backdrop__img {
  object-fit: cover;
  object-position: 50% 40%;
  filter: blur(18px) saturate(1.2);
  scale: 1.1;
  opacity: 0;
  animation: rise-in var(--dur-reveal) var(--ease-out) forwards;
}

/* Aurora: as manchas vivem num pseudo-elemento maior que a caixa, para o
   movimento nunca mostrar borda. --a1/--a2/--a3 (posicao x de cada mancha)
   vem do partial, variando por secao. */
.backdrop--aurora::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(38% 46% at var(--a1, 20%) 34%, rgba(229, 50, 45, var(--aurora-alpha)), transparent 72%),
    radial-gradient(34% 44% at var(--a2, 78%) 66%, rgba(16, 16, 18, 0.1), transparent 72%),
    radial-gradient(44% 40% at var(--a3, 52%) 18%, rgba(255, 255, 255, 0.95), transparent 72%);
  animation: aurora-drift 36s var(--ease-in-out) infinite alternate;
  will-change: transform;
}

/* Veu + emendas. Na hero so o rodape volta ao palco (o topo fica sob o
   header); nas secoes internas topo e rodape voltam ao palco. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--stage) 0%,
    var(--veil-top) 10%,
    var(--veil-mid) 50%,
    var(--veil-top) 90%,
    var(--stage) 100%
  );
}

.backdrop--strong::after {
  background: linear-gradient(180deg, var(--veil-top) 0%, var(--veil-mid) 45%, var(--stage) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .backdrop--aurora::before {
    animation: none;
  }
}

.section-card {
  position: relative;
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--card-pad);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Tons de cartao — a mesma casca em outras cores, para a pagina nao ser uma
   fila de cartoes brancos iguais. Cada tom REDEFINE os tokens dentro do
   cartao (tinta, linhas, superficies), entao todo componente que ja fala em
   token muda de cor sozinho. So o que tem cor fixa (o branco dos checks e
   dos botoes solidos) ganha ajuste aqui. Paleta do briefing: branco,
   vermelho e preto — nada fora disso.

   O tom vem de config/site.php ('tone' na secao) e entra como data-tone.
   -------------------------------------------------------------------------- */

/* Blush: branco quente, uma respiracao entre dois cartoes brancos. */
.section-card[data-tone="blush"] {
  --surface: #fbf5f4;
  --surface-sunken: #f5eceb;
  --line: rgba(120, 30, 28, 0.09);
  --line-strong: rgba(120, 30, 28, 0.16);
}

/* Ink: o bloco escuro. A tinta vira clara e as superficies "escuras" dos
   componentes (hover de tile, ficha, fechamento) invertem para branco, para
   continuarem contrastando. */
.section-card[data-tone="ink"] {
  /* Literais, e nao var(--surface-ink): os tokens "ink" sao invertidos logo
     abaixo neste MESMO bloco, e a referencia resolveria ja invertida. */
  --surface: #141416;
  --surface-sunken: #1c1c1f;
  --surface-glass: rgba(20, 20, 22, 0.6);
  --ink: #f4f4f5;
  --ink-90: #ececee;
  --ink-70: rgba(244, 244, 245, 0.8);
  --ink-50: rgba(244, 244, 245, 0.6);
  --ink-30: rgba(244, 244, 245, 0.42);
  --ink-15: rgba(244, 244, 245, 0.22);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --brand-tint: rgba(229, 50, 45, 0.18);
  --surface-ink: #ffffff;
  --surface-ink-soft: #f4f4f5;
  --on-ink: #101012;
  --on-ink-muted: rgba(16, 16, 18, 0.58);
  --line-on-ink: rgba(16, 16, 18, 0.1);

  color: var(--ink);
}

/* Brand: o bloco vermelho. Texto branco, acentos (ponto, numero da secao,
   fio) tambem brancos; o botao solido inverte para branco com texto vermelho. */
.section-card[data-tone="brand"] {
  --surface: var(--brand-strong);
  /* Superficies internas em vermelho PROFUNDO e solido, nunca branco
     translucido: sobre o vermelho o branco a 10% le como cinza sujo. */
  --surface-sunken: var(--brand-deep);
  --surface-glass: rgba(168, 20, 15, 0.7);
  /* Rampa mais aberta que a do tom escuro: sobre o vermelho, branco a 64%
     ficaria em ~3.4:1; a 78% passa de 4.5:1 (AA em texto pequeno). E o tom
     apagado do titulo fica em branco-rosado claro, nao em cinza. */
  --ink: #ffffff;
  --ink-90: rgba(255, 255, 255, 0.95);
  --ink-70: rgba(255, 255, 255, 0.88);
  --ink-50: rgba(255, 255, 255, 0.78);
  --ink-30: rgba(255, 255, 255, 0.62);
  --ink-15: rgba(255, 255, 255, 0.34);
  --line: rgba(255, 255, 255, 0.2);
  --line-strong: rgba(255, 255, 255, 0.34);
  --brand: #ffffff;
  --brand-tint: rgba(255, 255, 255, 0.12);
  --surface-ink: #ffffff;
  --surface-ink-soft: #fff4f3;
  --on-ink: var(--brand-deep);
  --on-ink-muted: rgba(168, 20, 15, 0.62);
  --line-on-ink: rgba(168, 20, 15, 0.12);

  color: var(--ink);
}

.section-card[data-tone="brand"] .btn--primary {
  --btn-bg: #ffffff;
  --btn-fg: var(--brand-deep);
  box-shadow: 0 8px 24px -10px rgba(80, 0, 0, 0.5);
}

.section-card[data-tone="brand"] .btn--primary:hover {
  --btn-bg: #fff4f3;
}

/* A segunda voz do titulo (.tone-muted) por tom. Sobre o vermelho, o cinza
   apagado lia sujo: vira preto. Sobre o preto, vira um vermelho claro, que
   conversa com o ponto vermelho do titulo. Literais de proposito: os tokens
   de tinta estao invertidos dentro destes cartoes. */
.section-card[data-tone="brand"] .tone-muted {
  color: #141416;
}

.section-card[data-tone="ink"] .tone-muted {
  color: var(--brand-light);
}

/* Sobre tinta clara, o check e a seta do acordeao (fundo = tinta) precisam
   de traco escuro, senao somem: branco em branco. */
.section-card[data-tone="ink"] .is-checked .check path,
.section-card[data-tone="ink"] [data-reveal].is-revealed .check--reveal path,
.section-card[data-tone="ink"] .qa__item.is-open .qa__mark path,
.section-card[data-tone="brand"] .is-checked .check path,
.section-card[data-tone="brand"] [data-reveal].is-revealed .check--reveal path,
.section-card[data-tone="brand"] .qa__item.is-open .qa__mark path {
  stroke: var(--surface);
}

/* O botao escuro (tinta) sobre cartao escuro vira botao claro. */
.section-card[data-tone="ink"] .btn--dark,
.section-card[data-tone="brand"] .btn--dark {
  --btn-fg: var(--surface);
}

.section-card[data-tone="ink"] .btn--dark:hover,
.section-card[data-tone="brand"] .btn--dark:hover {
  --btn-bg: var(--ink-90);
}

/* Numeracao editorial da secao — "01 · A empresa". */
.section-index {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-50);
}

.section-index__n {
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Media — moldura de imagem do projeto.
   A imagem preenche a moldura por cover e entra com um leve zoom-out,
   controlado por --img-scale para que o hover possa sobrescrever o reveal
   sem briga de especificidade (valor no proprio elemento vence a heranca).
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--surface-sunken);
}

.media picture {
  display: block;
  height: 100%;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Enquadramento de cada foto, declarado no catalogo (config/photos.php). */
  object-position: var(--focus, 50% 50%);
  transform: scale(var(--img-scale, 1.06));
  transition:
    transform var(--dur-reveal) var(--ease-out),
    filter var(--dur-base) var(--ease-out);
}

[data-reveal].is-revealed {
  --img-scale: 1;
}

.no-js .media img {
  --img-scale: 1;
}

/* --------------------------------------------------------------------------
   Livro-razao — lista numerada de linhas separadas por fio.
   Nasceu na secao Empresa ("o que vem junto") e virou componente ao ser
   reaproveitada no escopo das paginas de servico. O contexto de cada secao
   ajusta so a grade externa; a linha em si e sempre esta.

   Variante --wide: linhas sem nota, em que o rotulo ocupa a largura toda
   (o caso de uma lista de entregas).
   -------------------------------------------------------------------------- */
.ledger {
  display: grid;
  gap: clamp(0.75rem, 0.6rem + 0.7vw, 1.125rem);
  align-content: start;
  min-width: 0;
}

.ledger__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  font-weight: var(--fw-display);
  line-height: 1.2;
  letter-spacing: calc(-0.028em * var(--track-display));
}

.ledger__list {
  display: grid;
}

.ledger__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding-block: clamp(0.6875rem, 0.55rem + 0.6vw, 0.9375rem);
  border-top: 1px solid var(--line);
}

/* O fio da linha vira vermelho por cima, crescendo da esquerda. */
.ledger__row::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .ledger__row:hover::after {
    transform: scaleX(1);
  }

  .ledger__row:hover .ledger__n {
    color: var(--brand);
  }
}

.ledger__n {
  flex: none;
  width: 1.375rem;
  padding-top: 0.22em;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-30);
  transition: color var(--dur-fast) var(--ease-out);
}

.ledger__text {
  display: grid;
  gap: 0.1875rem;
  min-width: 0;
}

.ledger__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.ledger__note {
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--ink-50);
}

/* A partir do tablet a razao ganha duas colunas: a lista fica densa sem
   perder o fio que separa uma linha da outra. Uma secao pode voltar a uma
   coluna so quando o contexto pedir (a Empresa faz isso no desktop). */
@media (min-width: 48rem) {
  .ledger__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* --------------------------------------------------------------------------
   Barra de fechamento — o bloco escuro que fecha uma secao ou uma pagina
   com a chamada para acao. Usada no indice de servicos e em toda pagina
   de servico, entao vive aqui e nao em uma secao.
   -------------------------------------------------------------------------- */
.closing {
  position: relative;
  display: grid;
  gap: clamp(1.125rem, 0.9rem + 1.2vw, 1.75rem);
  padding: clamp(1.375rem, 0.9rem + 2.2vw, 2.5rem);
  border-radius: var(--radius-panel);
  background: var(--surface-ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Mesma assinatura vermelha da ficha do escritorio. */
.closing::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, rgba(229, 50, 45, 0) 62%);
}

.closing__text {
  display: grid;
  gap: 0.5rem;
  max-width: 46ch;
}

.closing__title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.85vw, 1.625rem);
  font-weight: var(--fw-display);
  line-height: 1.16;
  letter-spacing: calc(-0.032em * var(--track-display));
  text-wrap: balance;
}

.closing__note {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--on-ink-muted);
}

.closing__action {
  display: grid;
  justify-items: start;
  gap: 0.875rem;
}

.closing__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* O botao fantasma foi desenhado para fundo claro. Sobre o bloco escuro ele
   e apenas re-tintado pela API de custom properties do proprio componente —
   nao ha variante nova nem sobrescrita de regra. */
.closing .btn--ghost {
  --btn-fg: var(--on-ink);
  --btn-bg: transparent;
  --btn-border: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.closing .btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-border: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

.closing__hours {
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--on-ink-muted);
}


/* Tablet: texto e acao lado a lado. */
@media (min-width: 48rem) {
  .closing {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
  }

  .closing__action {
    justify-items: end;
    text-align: right;
  }

  .closing__buttons {
    justify-content: flex-end;
  }
}

/* --------------------------------------------------------------------------
   Perguntas e respostas — acordeao (padrao disclosure, js/components/
   disclosure.js). Nasceu na secao de duvidas das paginas de servico e virou
   componente ao ser reaproveitado na pagina de perguntas frequentes.

   Sem JavaScript nasce tudo aberto: o recolhimento e regra `.js`, aplicada
   no <head>, entao nao existe piscada de conteudo.
   -------------------------------------------------------------------------- */
.qa {
  display: grid;
}

.qa__item {
  position: relative;
  border-top: 1px solid var(--line);
  /* Uma pergunta com id e alvo de ancora: para abaixo do header e do
     sumario fixo, como as secoes (.page-section). */
  scroll-margin-top: calc(var(--header-h) + 6rem);
}

.qa__item:last-child {
  border-bottom: 1px solid var(--line);
}

/* O fio superior vira vermelho crescendo da esquerda. */
.qa__item::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.qa__item.is-open::after {
  transform: scaleX(1);
}

.qa__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding-block: clamp(0.875rem, 0.75rem + 0.7vw, 1.25rem);
  text-align: left;
}

.qa__trigger:focus-visible {
  border-radius: var(--radius-sm);
  outline-offset: 4px;
}

.qa__q {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.5vw, 1.1875rem);
  font-weight: var(--fw-display);
  line-height: 1.28;
  letter-spacing: calc(-0.028em * var(--track-display));
  color: var(--ink);
  text-wrap: pretty;
}

.qa__mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.qa__mark svg {
  width: 0.75rem;
  height: 0.75rem;
}

.qa__mark path {
  stroke: var(--ink-50);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--dur-base) var(--ease-out);
}

.qa__item.is-open .qa__mark {
  background: var(--ink);
  border-color: var(--ink);
  transform: rotate(180deg);
}

.qa__item.is-open .qa__mark path {
  stroke: #fff;
}

@media (hover: hover) {
  .qa__item:not(.is-open):hover::after {
    transform: scaleX(1);
  }

  .qa__item:not(.is-open):hover .qa__mark {
    border-color: var(--ink-30);
    transform: scale(1.08);
  }

  .qa__item:not(.is-open):hover .qa__mark path {
    stroke: var(--ink);
  }
}

.qa__body {
  display: grid;
}

/* Animar grid-template-rows funciona em Chrome 107+, Firefox 66+ e Safari
   16+. Em navegador mais antigo a troca 0fr/1fr continua valendo, so que
   instantanea: abre e fecha do mesmo jeito, sem transicao. */
.js .qa__body {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-svc-panel) var(--ease-out);
}

.js .qa__item.is-open .qa__body {
  grid-template-rows: 1fr;
}

/* O recorte nao pode ter padding proprio: numa faixa 0fr o padding nao e
   absorvido por min-height 0 e a linha fechada vazaria a altura dele. */
.qa__panel {
  min-height: 0;
  overflow: hidden;
}

.qa__a {
  padding-bottom: clamp(0.875rem, 0.75rem + 0.7vw, 1.25rem);
  max-width: 68ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-70);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Utilitarios de entrada — para blocos acima da dobra, que nao podem
   esperar o scroll. O delay vive no atributo style (--d), a curva no token.
   -------------------------------------------------------------------------- */
.rise {
  opacity: 0;
  animation: rise-in var(--dur-slow) var(--ease-out) var(--d, 0ms) forwards;
}

/* Mascara de linha que anima na carga da pagina, e nao ao entrar em cena.
   Mesma cadencia do hero da home: uma linha atras da outra. */
.mask-line--auto .mask-line__inner {
  animation: line-rise var(--dur-reveal) var(--ease-out) forwards;
  animation-delay: calc(320ms + var(--i, 0) * 90ms);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Trilha de navegacao (breadcrumb)
   -------------------------------------------------------------------------- */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: var(--fs-micro);
  line-height: 1.4;
  color: var(--ink-30);
}

.crumbs__link {
  color: var(--ink-50);
  transition: color var(--dur-fast) var(--ease-out);
}

.crumbs__link:hover {
  color: var(--brand-strong);
}

.crumbs__sep {
  opacity: 0.6;
}

.crumbs__current {
  color: var(--ink-70);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Livro-razao no desktop — a linha vira lancamento: numero | item | nota
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .ledger__row {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 15rem) minmax(0, 1fr);
    align-items: baseline;
    column-gap: 1.5rem;
  }

  /* Rotulo e nota sobem para a grade da propria linha. */
  .ledger__text {
    display: contents;
  }

  .ledger__n {
    width: auto;
    padding-top: 0;
  }

  .ledger__note {
    padding-top: 0.1em;
  }

  /* Variante sem nota: o rotulo ocupa a linha inteira. */
  .ledger--wide .ledger__row {
    grid-template-columns: 1.5rem minmax(0, 1fr);
  }

  .ledger--wide .ledger__text {
    display: grid;
  }
}

/* --------------------------------------------------------------------------
   Sumario fixo de pagina — cola abaixo do header, na mesma pilula da
   navegacao, e marca a secao em cena (aria-current, via
   js/components/pagenav.js). No celular vira uma faixa que rola no eixo
   horizontal. Nasceu na pagina de servico e virou componente ao ser
   reaproveitado na pagina de tabelas praticas.
   -------------------------------------------------------------------------- */
.pagenav {
  position: sticky;
  top: calc(var(--header-h) + 2 * var(--shell-pad));
  /* Abaixo do header (100) e acima do conteudo. */
  z-index: 90;
  padding-inline: var(--shell-pad);
  margin-bottom: var(--shell-pad);
  /* A faixa inteira nao intercepta o ponteiro; so a pilula. */
  pointer-events: none;
}

.pagenav__pill {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.3125rem;
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}

.pagenav__label {
  flex: none;
  padding-inline: 0.5rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-30);
}

.pagenav__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}

.pagenav__list::-webkit-scrollbar {
  display: none;
}

.pagenav__item {
  flex: none;
  scroll-snap-align: center;
}

.pagenav__link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-50);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.pagenav__link:hover {
  color: var(--ink);
  background: var(--surface-sunken);
}

/* Secao em cena. O marcador vermelho e o unico ruido de cor da pilula. */
.pagenav__link[aria-current="true"] {
  color: var(--ink);
  font-weight: 700;
  background: var(--surface-sunken);
}

.pagenav__cta {
  flex: none;
}

/* --------------------------------------------------------------------------
   Casca editorial de secao interna — cabecalho numerado, manifesto (titulo
   mascarado + texto) e o link de apoio. Toda pagina com sumario fixo usa
   esta mesma gramatica, entao ela vive aqui e nao em uma pagina.
   -------------------------------------------------------------------------- */
.page-section {
  /* A ancora precisa parar abaixo do header E do sumario fixo, com uma folga
     para a secao nao nascer colada na pilula. */
  scroll-margin-top: calc(var(--header-h) + 6rem);
}

.page-block {
  display: grid;
  gap: var(--section-gap);
}

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-meta {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-30);
  font-variant-numeric: tabular-nums;
}

.page-manifesto {
  display: grid;
  gap: clamp(1.125rem, 0.8rem + 1.6vw, 2rem);
}

.page-headline {
  margin-left: -0.035em;
  font-size: clamp(1.625rem, 1rem + 2.8vw, 3.25rem);
}

.page-prose {
  display: grid;
  justify-items: start;
  gap: clamp(0.875rem, 0.7rem + 0.8vw, 1.25rem);
  max-width: 52ch;
}

.page-lead {
  font-size: var(--fs-lead-lg);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: pretty;
}

.page-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.1875rem;
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.page-link__icon {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}

.page-link__icon path {
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-link:hover {
  color: var(--brand-strong);
  border-color: var(--brand-strong);
}

.page-link:hover .page-link__icon {
  transform: translateX(3px);
}

/* Celular: a pilula carrega so as ancoras; codigo e CTA saem de cena. */
@media (max-width: 47.99rem) {
  .pagenav__label,
  .pagenav__cta {
    display: none;
  }
}

/* Desktop: titulo a esquerda, texto a direita, como na referencia. */
@media (min-width: 64rem) {
  .page-manifesto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 5rem);
  }
}

/* --------------------------------------------------------------------------
   Capa fotografica (partials/cover.php) — a assinatura da variacao
   editorial: a foto abre o cartao, sangrando ate as bordas, e o conteudo
   comeca logo abaixo. O recuo negativo desfaz o padding do .section-card.

   Movimento em duas camadas, as duas sem JavaScript:
   1. entrada: a capa se abre de cima para baixo (clip-path) enquanto a
      imagem assenta do leve zoom da moldura .media;
   2. rolagem: onde o navegador conhece animation-timeline, a foto desliza
      poucos por cento dentro da moldura (paralaxe). Onde nao conhece, fica
      parada, sem prejuizo nenhum.
   -------------------------------------------------------------------------- */
.cover {
  /* Proporcao de ~2.6:1 no desktop, e nao de faixa panoramica: as fotos
     sao 3:2, e uma faixa mais fina que isso corta a cabeca de quem esta na
     cena. Limitada pela altura da janela para nao engolir a tela. */
  --cover-h: clamp(12rem, 6rem + 30vw, min(36rem, 62vh));

  display: block;
  height: var(--cover-h);
  /* Sem margem embaixo: todo cartao de secao e uma grade com
     gap: var(--section-gap), e e esse gap que separa a capa do conteudo. */
  /* 1px alem da borda, e o cartao recorta (abaixo): duas curvas iguais
     desenhadas uma sobre a outra deixam um fio da cor do cartao no
     antisserrilhado das quinas. Com o recorte, so a curva do cartao existe. */
  margin: calc(-1 * var(--card-pad) - 1px) calc(-1 * var(--card-pad) - 1px) 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* `clip` e nao `hidden`: recorta sem virar container de rolagem, entao o
   que e sticky dentro do cartao continua funcionando. */
.section-card:has(> .cover, > .cover-group) {
  overflow: clip;
}

/* Capa em cartao que nao e grade (o corpo do artigo): o espaco ate o
   conteudo vem da propria capa. */
.cover--lead {
  margin-bottom: var(--section-gap);
}

/* Folga para a paralaxe: a imagem e so um pouco maior que a moldura,
   para o movimento nao roubar enquadramento. `scale` e nao `transform`,
   para conviver com o zoom de entrada da .media. */
.cover__img {
  scale: 1.06;
}

[data-reveal] .cover {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-reveal) var(--ease-out);
}

[data-reveal].is-revealed .cover {
  clip-path: inset(0);
}

.no-js [data-reveal] .cover {
  clip-path: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cover__img {
      animation: cover-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* --------------------------------------------------------------------------
   Botao flutuante do WhatsApp (partials/whatsapp.php). Moldura do site,
   como a pilula do topo: preto da marca, discreto no canto, so com o icone
   no celular. Aparece fora do topo da pagina e some no rodape (JS); sem
   JavaScript, fica sempre a vista.
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: max(var(--shell-pad), env(safe-area-inset-right));
  bottom: calc(var(--shell-pad) + env(safe-area-inset-bottom));
  z-index: calc(var(--z-header) - 1);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 3.25rem;
  padding: 0 1.125rem 0 0.9375rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #ffffff;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    var(--shadow-lg);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    visibility 0s linear 0s;
}

.wa-float__icon {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  fill: currentColor;
}

.wa-float:hover {
  background: var(--ink-90);
  transform: translateY(-2px);
}

.wa-float:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.js .wa-float:not(.is-visible) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem) scale(0.96);
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}

/* Celular: so o icone, num circulo (o rotulo vai para o leitor de tela). */
@media (max-width: 47.99rem) {
  .wa-float {
    justify-content: center;
    width: 3.25rem;
    padding: 0;
  }

  .wa-float__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float,
  .js .wa-float:not(.is-visible) {
    transform: none;
  }
}

@media print {
  .wa-float {
    display: none;
  }
}