/* ==========================================================================
   DGL Serviços e Reparos — chamaodgl.com.br
   Folha de estilo única. Sem dependências externas: as fontes (Schibsted
   Grotesk nos títulos, Figtree no texto, ambas OFL) são servidas do próprio
   domínio, como pede a Content Security Policy.
   ========================================================================== */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-latin-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin-wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --tinta: #0E1B2E;          /* títulos, estrutura e o texto sobre o laranja */
  --marca: #0A174E;          /* azul do logotipo oficial */
  --texto: #2B3647;
  --suave: #556073;
  /* Filetes translúcidos: assentam igual sobre branco, cinza e foto. */
  --linha: rgb(14 27 46 / 0.10);
  --linha-forte: rgb(14 27 46 / 0.20);
  --fundo: #FFFFFF;
  --superficie: #FFFFFF;     /* cartões que flutuam sobre a página */
  --fundo-2: #F4F6F9;
  --fundo-3: #E8ECF1;

  --laranja: #F27A1A;        /* a ação principal, e só ela */
  --laranja-forte: #E26A0B;
  --laranja-suave: #FEF1E6;
  --laranja-texto: #BF5409;  /* laranja legível como texto sobre branco (4,7:1) */
  --sobre-laranja: #0E1B2E;

  --zap: #25D366;            /* só nos controles que abrem o WhatsApp */
  --zap-forte: #1DBF5B;
  --sobre-zap: #072A15;

  --faixa: #0E1B2E;          /* bloco escuro do fim da página */
  --sobre-faixa: #FFFFFF;
  --sobre-faixa-suave: #B9C3D3;

  --ok: #12804A;
  --ok-suave: #E8F6EE;
  --erro: #C42B1C;
  --erro-suave: #FDEEEC;

  /* Espaçamento numa escala de 4/8 px. */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Sombras sempre com deslocamento e desfoque: profundidade, não brilho. */
  --sombra-sm: 0 1px 1px rgb(14 27 46 / 0.04), 0 2px 6px -2px rgb(14 27 46 / 0.08);
  --sombra: 0 1px 2px rgb(14 27 46 / 0.04), 0 8px 16px -6px rgb(14 27 46 / 0.08), 0 24px 40px -16px rgb(14 27 46 / 0.12);
  --sombra-lg: 0 1px 2px rgb(14 27 46 / 0.04), 0 12px 24px -10px rgb(14 27 46 / 0.10), 0 48px 96px -32px rgb(14 27 46 / 0.24);
  /* Borda das fotos: um filete por dentro, para foto clara não se dissolver no branco. */
  --aro-foto: inset 0 0 0 1px rgb(14 27 46 / 0.08);

  --largura: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --secao-y: clamp(4.5rem, 10vw, 9rem);

  --curva: cubic-bezier(.16, 1, .3, 1);   /* saída exponencial */
  --rapido: 160ms var(--curva);
  --medio: 280ms var(--curva);
  --cor: 160ms ease;                      /* cor, fundo e borda: sem salto */

  --fonte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-titulo: "Schibsted Grotesk", var(--fonte);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tinta: #EEF2F7;
    --marca: #EEF2F7;
    --texto: #C7CFDB;
    --suave: #9AA6B8;
    --linha: rgb(238 242 247 / 0.09);
    --linha-forte: rgb(238 242 247 / 0.17);
    --fundo: #0B1220;
    --superficie: #111A2B;
    --fundo-2: #111A2B;
    --fundo-3: #18233A;

    --laranja: #FF8A33;
    --laranja-forte: #FF9B4F;
    --laranja-suave: #2A1B0F;
    --laranja-texto: #FFAA6B;

    --faixa: #16213A;
    --sobre-faixa-suave: #A9B5C8;

    --ok: #4CD08B;
    --ok-suave: #10261B;
    --erro: #FF8A7E;
    --erro-suave: #2C1616;

    --sombra-sm: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 1px 2px rgb(0 0 0 / 0.4);
    --sombra: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 4px 12px -2px rgb(0 0 0 / 0.45), 0 12px 28px -8px rgb(0 0 0 / 0.5);
    --sombra-lg: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 10px 24px -6px rgb(0 0 0 / 0.5), 0 28px 60px -20px rgb(0 0 0 / 0.7);
    --aro-foto: inset 0 0 0 1px rgb(255 255 255 / 0.07);

    color-scheme: dark;
  }
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;   /* o toque responde com :active, não com um flash */
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  scrollbar-gutter: stable;                   /* a página não pula ao travar a rolagem */
}

body {
  font-family: var(--fonte);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

a {
  color: var(--tinta);
  text-decoration-color: var(--laranja);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
h1, h2, h3, h4 {
  color: var(--tinta);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* Os títulos falam em Schibsted Grotesk: grotesca editorial, firme, menos
   pesada e maior que antes. Todo o resto continua em Figtree. */
h1, h2 { font-family: var(--fonte-titulo); letter-spacing: -0.035em; }
p, li, figcaption, small { text-wrap: pretty; }

::selection { background: var(--laranja); color: var(--sobre-laranja); }
input, textarea { caret-color: var(--laranja); }

/* Anel de foco no laranja de texto: 4,7:1 sobre branco (o laranja da ação
   ficava em 2,8:1, abaixo do mínimo para contorno). */
:focus-visible {
  outline: 3px solid var(--laranja-texto);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

html { scrollbar-color: var(--linha-forte) transparent; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Utilitários ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Itens de grid e flex têm min-width:auto: um filho largo (um <select> com
   opção comprida) estica a coluna e faz a página rolar de lado no celular. */
.hero__grade > *, .frentes > *, .pedido > *, .campos > *, .rodape__grade > *,
.galeria > *, .passos > *, .compromissos > * { min-width: 0; }

.secao { padding-block: var(--secao-y); }
.secao--suave { background: var(--fundo-2); }
.secao--sem-topo { padding-top: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.pular-para-conteudo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--tinta);
  color: var(--fundo);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 650;
  text-decoration: none;
  transition: transform var(--medio);
}
.pular-para-conteudo:focus { transform: translate(-50%, 0); color: var(--fundo); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cabecalho-secao { max-width: 44rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.cabecalho-secao h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.02; max-width: 18ch; }
.cabecalho-secao p {
  margin-top: var(--e5);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--suave);
  max-width: 34rem;
}
.cabecalho-secao--linha {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--e4) var(--e6);
}
.cabecalho-secao--linha > div { max-width: 40rem; }

/* Controles: tocar e segurar não seleciona o rótulo nem abre o menu do
   link, e o toque não espera o duplo toque. Texto que se copia (telefone,
   protocolo) fica de fora. */
.botao, .zap-flutuante, .chip, .filtro, .menu-alternar, .nav__link, .lightbox__botao,
.galeria-botao, .protocolo__copiar, .faq summary, .mais-detalhes summary {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* --- Botões --------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.375rem;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  background-clip: padding-box;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--cor), border-color var(--cor),
              color var(--cor), box-shadow var(--medio), transform 160ms var(--curva);
}
.botao svg { width: 1.2em; height: 1.2em; flex: none; }
/* Ícone à frente pesa mais: um pouco menos de folga daquele lado. */
.botao:has(> svg:first-child) { padding-inline-start: 1.125rem; }
/* Apertar responde: o botão cede um pouco. Os largos cedem menos. */
.botao:active { transform: scale(.97); }
.botao--bloco:active { transform: scale(.985); }

/* Botões cheios com material: luz em cima, sombra tingida da própria cor. */
.botao--primario {
  background: var(--laranja);
  color: var(--sobre-laranja);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -1px 0 rgb(14 27 46 / .14),
              0 1px 2px rgb(14 27 46 / .10), 0 8px 16px -8px rgb(226 106 11 / .45);
}
.botao--zap {
  background: var(--zap);
  color: var(--sobre-zap);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -1px 0 rgb(7 42 21 / .14),
              0 1px 2px rgb(14 27 46 / .10), 0 8px 16px -8px rgb(29 191 91 / .45);
}
.botao--secundario { background: var(--fundo); color: var(--tinta); border-color: var(--linha-forte); }

.botao--grande { min-height: 56px; padding-inline: 1.75rem; font-size: 1.0625rem; }
.botao--grande:has(> svg:first-child) { padding-inline-start: 1.5rem; }
.botao--bloco { width: 100%; white-space: normal; text-align: center; }

.botao[disabled], .botao[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

/* Link com seta, para chamadas secundárias dentro do texto. */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  min-height: 44px;
}
.link-seta svg { width: 1.1em; height: 1.1em; transition: transform var(--medio); }



/* --- Cabeçalho ------------------------------------------------------------ */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fundo);
  /* Ao rolar, um filete e uma sombra num só traço (sem borda dobrada). */
  transition: box-shadow var(--medio), background-color var(--medio);
  padding-top: env(safe-area-inset-top, 0px);
}
.cabecalho[data-rolado="sim"] { box-shadow: 0 1px 0 var(--linha), var(--sombra-sm); }
/* No computador o cabeçalho deixa a página passar por baixo, desfocada. */
@media (min-width: 56.0625rem) {
  @supports (backdrop-filter: blur(1px)) {
    .cabecalho[data-rolado="sim"] {
      background: color-mix(in srgb, var(--fundo) 84%, transparent);
      backdrop-filter: saturate(1.6) blur(14px);
    }
  }
}

.cabecalho__barra {
  display: flex;
  align-items: center;
  gap: var(--e5);
  min-height: 4.75rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-right: auto;
  color: var(--tinta);
  text-decoration: none;
  min-height: 44px;
}

/* Logotipo oficial: a casa com as ferramentas, em vetor, na cor da marca
   no claro e clara no escuro (currentColor). */
.marca__simbolo { width: 2.75rem; height: auto; aspect-ratio: 578 / 450; flex: none; color: var(--marca); }
.marca__texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca__nome { font-family: var(--fonte-titulo); font-weight: 750; font-size: 1.25rem; letter-spacing: -0.03em; }
.marca__sub { font-size: .8125rem; font-weight: 500; color: var(--suave); white-space: nowrap; }

.nav { display: flex; align-items: center; gap: var(--e1); }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .85rem;
  border-radius: var(--r-full);
  color: var(--texto);
  font-weight: 500;
  font-size: .9688rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--cor), background-color var(--cor);
}

.nav__extras { display: none; }

.cabecalho__acoes { display: flex; align-items: center; gap: var(--e3); }
/* No cabeçalho o pedido de orçamento é menor: o da abertura é que manda. */
.cabecalho__acoes .botao--primario { min-height: 44px; padding: .6rem 1.125rem; font-size: .9375rem; }
.cabecalho__telefone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font-weight: 600;
  font-size: .9688rem;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cabecalho__telefone svg { width: 1.15rem; height: 1.15rem; color: var(--laranja-texto); }

.menu-alternar:active, .cabecalho__telefone:active, .redes a:active, .protocolo__copiar:active { background: var(--fundo-2); }
.menu-alternar {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  border: 1px solid var(--linha-forte);
  align-items: center; justify-content: center;
  color: var(--tinta);
}
.menu-alternar svg { width: 1.3rem; height: 1.3rem; }
.menu-alternar .icone-fechar { display: none; }
.menu-alternar[aria-expanded="true"] .icone-abrir { display: none; }
.menu-alternar[aria-expanded="true"] .icone-fechar { display: block; }

@media (max-width: 66rem) {
  .cabecalho__telefone span { display: none; }
  .cabecalho__telefone {
    width: 44px; justify-content: center;
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-full);
  }
}

@media (max-width: 56rem) {
  .menu-alternar { display: inline-flex; }
  .cabecalho__acoes .botao--primario { display: none; }
  .nav {
    position: fixed;
    inset: 4.75rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--e3) var(--gutter) var(--e5);
    background: var(--fundo);
    border-bottom: 1px solid var(--linha);
    box-shadow: var(--sombra-lg);
    top: calc(4.75rem + env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - 4.75rem - env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 180ms var(--curva), transform 180ms var(--curva), visibility 0s linear 180ms;
  }
  .nav[data-aberto="sim"] {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--medio), transform var(--medio), visibility 0s;
  }
  .nav__link {
    min-height: 52px;
    padding: 0 var(--e1);
    border-radius: 0;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--linha);
  }
  .nav__extras { display: grid; gap: var(--e3); margin-top: var(--e5); }
}

@media (max-width: 24rem) {
  .cabecalho__barra { gap: var(--e3); }
  .marca__sub { display: none; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-block: clamp(1.75rem, 4vw, 3.5rem) clamp(3.5rem, 7vw, 6rem); }

/* A abertura é uma grade só: o título atravessa a largura toda e, abaixo
   dele, o texto e o pedido de um lado e o trabalho real do outro. A coluna
   de texto vira "display: contents" para os filhos entrarem na grade. No
   celular, o trabalho aparece antes do formulário. Tudo em CSS, sem JS. */
.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas:
    "titulo titulo"
    "lead   fotos"
    "selo   fotos"
    "pedido fotos";
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.hero__texto { display: contents; }
.hero h1 { grid-area: titulo; }
.hero__lead { grid-area: lead; }
.hero .selo-google { grid-area: selo; }
.hero .pedido-rapido { grid-area: pedido; }
.hero__fotos { grid-area: fotos; align-self: stretch; margin-top: var(--e5); }
/* As fotos não dão altura à abertura: ocupam a altura que o texto e o pedido
   já têm, e os dois lados terminam na mesma linha. Sem buraco sob o cartão. */
@media (min-width: 60.01rem) {
  .hero__fotos { contain: size; }
}

.hero h1 {
  font-size: clamp(2.375rem, 1.2rem + 3.6vw, 4rem);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -0.04em;
  max-width: 22ch;
}
.hero h1 span { color: var(--laranja-texto); font-weight: 450; }
/* O nome que as pessoas buscam abre o título, numa linha pequena acima dele. */
.hero h1 .hero__chapeu {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: var(--e4);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
.hero h1 .hero__chapeu::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--laranja);
}

.hero__lead {
  margin-top: var(--e5);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  line-height: 1.45;
  color: var(--texto);
  max-width: 32rem;
}
.hero__lead strong { color: var(--tinta); font-weight: 600; }

/* Nota do Google logo abaixo da abertura. A linha fica reservada mesmo vazia,
   para a página não pular quando a nota chega da API. */
.selo-google {
  min-height: 2.75rem;
  margin-top: var(--e5);
  display: flex;
  align-items: center;
}
.selo-google a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .65rem;
  padding: .45rem 1rem .45rem .8rem;
  border-radius: var(--r-full);
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  box-shadow: var(--sombra-sm);
  color: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}

.selo-google strong { color: var(--tinta); font-size: 1.1875rem; font-weight: 800; }
.selo-google .estrelas svg { width: 1.35rem; height: 1.35rem; }
.selo-google[hidden] { display: none; }
/* Sem JavaScript não há nota: nada de linha reservada. */
@media (scripting: none) { .selo-google { display: none; } }
/* No celular, a mesma pílula numa linha só, menor, para o pedido rápido
   caber na primeira tela; empilhada só nas telas mais estreitas. */
@media (max-width: 30rem) {
  .selo-google { margin-top: var(--e4); }
  .selo-google a { font-size: .9375rem; gap: .3rem .5rem; padding: .4rem .85rem .4rem .7rem; }
  .selo-google strong { font-size: 1.0625rem; }
  .selo-google .estrelas svg { width: 1.05rem; height: 1.05rem; }
}
@media (max-width: 22rem) {
  .selo-google { min-height: 4.25rem; }
  .selo-google a { flex-direction: column; align-items: flex-start; gap: .15rem; border-radius: var(--r-lg); }
}
.selo-google a:focus-visible .selo-google__texto { text-decoration: underline; text-underline-offset: .2em; }
@media (prefers-reduced-motion: no-preference) {
  .selo-google a { animation: selo-entra 420ms var(--curva) both; }
}
@keyframes selo-entra { from { opacity: 0; } to { opacity: 1; } }
.cabecalho-secao .selo-google { margin-top: var(--e3); }

/* Pedido rápido: a ação de verdade, já na primeira tela. */
/* Cartão de pedido: um filete colado sobre uma sombra em camadas. */
.pedido-rapido {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r-xl);
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--linha), var(--sombra-lg);
}
.pedido-rapido fieldset { border: 0; padding: 0; min-width: 0; }
.pedido-rapido legend,
.pedido-rapido__rotulo {
  font-weight: 600;
  font-size: 1rem;
  color: var(--tinta);
  padding: 0;
  margin-bottom: var(--e3);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--e2); }
.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: var(--r-full);
  border: 1px solid var(--linha-forte);
  background: var(--fundo);
  background-clip: padding-box;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--texto);
  transition: background-color var(--cor), border-color var(--cor), color var(--cor), transform 160ms var(--curva);
  pointer-events: none;
}

.chip input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); }
.chip input:focus-visible + span { outline: 3px solid var(--laranja-texto); outline-offset: 3px; }
.chip input:active + span { transform: scale(.97); }

.pedido-rapido__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e3);
  align-items: end;
  margin-top: var(--e5);
}
.pedido-rapido__campo { display: grid; gap: var(--e2); }
/* Nas páginas de serviço o serviço já vem escolhido: sem chips acima, sem vão. */
.pedido-rapido input[type="hidden"] + .pedido-rapido__linha { margin-top: 0; }
.pedido-rapido__campo label { font-weight: 600; font-size: 1rem; color: var(--tinta); }
/* Campo e botão da mesma altura: as bordas de cima se alinham. */
.pedido-rapido__linha input[type="text"] { min-height: 56px; }
.pedido-rapido__nota {
  margin-top: var(--e4);
  font-size: .9375rem;
  color: var(--suave);
}
.pedido-rapido__nota a { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pedido-rapido[data-previa="sim"] .so-sem-previa { display: none; }
.botao__rotulo { white-space: nowrap; }

/* A frase que vai para o WhatsApp, escrita junto com a pessoa. O trecho que
   acabou de entrar acende no laranja da ação e apaga devagar. */
.pedido-rapido__previa { margin-top: var(--e4); display: grid; gap: var(--e2); }
.pedido-rapido__previa[hidden] { display: none; }
.pedido-rapido__previa-rotulo { font-size: .875rem; font-weight: 700; color: var(--suave); }
.bolha {
  justify-self: start;
  max-width: 100%;
  padding: .7rem .95rem;
  border-radius: var(--r-md) var(--r-md) 6px var(--r-md);
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  color: var(--tinta);
  font-size: 1rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.bolha .trecho { border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .bolha .trecho.novo { animation: trecho-acende 1200ms var(--curva); }
}
@keyframes trecho-acende {
  from { background-color: var(--laranja-suave); box-shadow: 0 0 0 3px var(--laranja-suave); }
  to { background-color: transparent; box-shadow: 0 0 0 3px transparent; }
}

/* Se agora é horário de atendimento, pelo relógio de Brasília. */
.agora {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin-top: var(--e4);
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--texto);
}
.agora[hidden] { display: none; }
.agora strong { color: var(--tinta); font-weight: 700; }
.agora::before {
  content: "";
  flex: none;
  width: .55rem;
  height: .55rem;
  border-radius: var(--r-full);
  background: var(--suave);
  transform: translateY(-.05rem);
}
.agora[data-estado="aberto"]::before { background: var(--ok); }

@media (max-width: 34rem) {
  .pedido-rapido__linha { grid-template-columns: 1fr; }
  /* No celular os chips ficam mais compactos e quebram na largura natural:
     cada rótulo numa linha só, sem pílula deformada. */
  .chips { gap: 6px; }
  .chip span { padding: 0 .8rem; font-size: .875rem; }
}

/* Fotos do hero: uma grande e duas menores, sempre trabalho real. */
.hero__fotos {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--e3);
  min-height: 30rem;
}
.foto {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--fundo-3);
}
/* Fotos de celular, de casas diferentes: um tom só, levemente mais firme,
   para virarem um portfólio. Só cor; a foto continua a mesma. */
.foto img, .foto__video, .galeria-botao img, .frente__foto img {
  filter: saturate(.9) contrast(1.05);
}
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 100%;
}
/* Filete por dentro e um degradê no pé, onde a legenda assenta. */
.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--aro-foto);
  background: linear-gradient(to top, rgb(14 27 46 / .55), rgb(14 27 46 / 0) 34%);
}
.foto--principal { grid-row: 1 / span 2; }
.foto { isolation: isolate; }
.foto__antiga { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05); }

/* Vídeo real da foto principal: sobe junto com as fotos, no mesmo gesto, toca
   uma vez e se dissolve na foto que está por baixo. A legenda fica o tempo todo. */
.foto__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
}
.foto figcaption { z-index: 2; }
.foto[data-video-estado="tocando"] .foto__video { opacity: 1; animation: foto-entra 760ms var(--curva) both; }
.foto[data-video-estado="fim"] .foto__video { opacity: 0; transition: opacity 600ms cubic-bezier(.45, 0, .55, 1); }
.foto figcaption {
  position: absolute;
  left: var(--e4);
  bottom: .875rem;
  max-width: calc(100% - var(--e6));
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgb(14 27 46 / .4);
}

/* O momento de movimento da página: as fotos reais sobem de baixo para cima.
   Escolher um serviço repete o gesto na foto principal (main.js, Web
   Animations, com a foto antiga por baixo). */
@keyframes foto-entra {
  from { clip-path: inset(100% 0 0 0 round var(--r-lg)); transform: scale(1.06); }
  to   { clip-path: inset(0 0 0 0 round var(--r-lg)); transform: none; }
}

@media (max-width: 60rem) {
  .hero__grade {
    grid-template-columns: 1fr;
    grid-template-areas: "titulo" "lead" "fotos" "selo" "pedido";
    grid-template-rows: none;
  }
  /* No celular as três fotos viram uma faixa que se arrasta de lado, antes
     do formulário: o trabalho real aparece já na primeira tela. */
  .hero__fotos {
    display: flex;
    gap: var(--e3);
    min-height: 0;
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .hero__fotos::-webkit-scrollbar { display: none; }
  .hero__fotos .foto { flex: 0 0 min(42%, 11rem); aspect-ratio: 3 / 4; scroll-snap-align: start; }
}

/* Os quatro combinados — ditos uma vez só, aqui. */
/* Os quatro combinados como uma ficha técnica: colunas separadas por
   filete, título na fonte dos títulos, sem ícones. */
.compromissos {
  list-style: none;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--linha-forte);
  gap: var(--e5) 0;
}
.compromissos li { padding-inline: var(--e5); border-left: 1px solid var(--linha); }
.compromissos li:first-child { padding-left: 0; border-left: 0; }
.compromissos strong {
  display: block;
  color: var(--tinta);
  font-family: var(--fonte-titulo);
  font-size: clamp(1.1875rem, 1.05rem + .4vw, 1.375rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.compromissos span { display: block; color: var(--suave); font-size: .9375rem; line-height: 1.5; margin-top: var(--e2); max-width: 17rem; }
@media (max-width: 62rem) {
  .compromissos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--e6); }
  .compromissos li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 22rem) {
  .compromissos { grid-template-columns: 1fr; }
  .compromissos li { padding-left: 0; border-left: 0; }
}

/* --- Serviços: duas frentes ----------------------------------------------- */
.frentes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: stretch;
}
/* Cada frente abre com um trabalho real dela em tamanho de verdade, num
   canto concêntrico ao do cartão; abaixo, só tipografia. */
.frente {
  background: var(--superficie);
  border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px var(--linha), var(--sombra-sm);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.frente__topo { display: flex; flex-direction: column; }
.frente__topo > div:first-child { padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem) var(--e4); }
.frente__topo h2, .frente__topo h3 { font-family: var(--fonte-titulo); font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); letter-spacing: -0.03em; }
.frente__topo p { margin-top: var(--e2); color: var(--suave); font-size: 1rem; }
.frente__foto {
  position: relative;
  order: -1;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 17rem;
  border-radius: calc(var(--r-xl) - 6px);
  overflow: hidden;
  background: var(--fundo-3);
}
.frente__foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--aro-foto); pointer-events: none; }
.frente__foto img { width: 100%; height: 100%; object-fit: cover; }

.lista-servicos { list-style: none; padding: 0 clamp(1.25rem, 3vw, 1.75rem) var(--e3); }
/* A linha inteira é o link (o ::before do <a> cobre a linha) e termina numa seta. */
.lista-servicos li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.1rem;
  gap: var(--e4);
  align-items: center;
  padding-block: 1.125rem;
  border-top: 1px solid var(--linha);
}
.lista-servicos li::after {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  background: var(--suave);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--medio), background-color var(--cor);
}
.lista-servicos h3,
.lista-servicos h4 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
/* O nome do serviço leva à página dele: link com cara de título, sublinhado só ao passar. */
.lista-servicos h3 a,
.lista-servicos h4 a { color: var(--tinta); text-decoration: none; }
.lista-servicos h3 a::before,
.lista-servicos h4 a::before { content: ""; position: absolute; inset: 0; }

.servicos-todos { margin-top: var(--e5); }
.lista-servicos p { font-size: .9688rem; color: var(--suave); line-height: 1.5; margin-top: 2px; }
.lista-servicos .destaque {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .55rem;
  border-radius: var(--r-full);
  /* Neutro: o laranja é só da ação principal. */
  background: var(--fundo-3);
  color: var(--tinta);
  font-size: .75rem;
  font-weight: 600;
  vertical-align: .15em;
  letter-spacing: 0;
}

.servicos-rodape {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4) var(--e6);
  padding: var(--e5) clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--fundo-2);
}
.servicos-rodape p { max-width: 40rem; }
.servicos-rodape strong { color: var(--tinta); }

@media (max-width: 58rem) { .frentes { grid-template-columns: 1fr; } }
@media (max-width: 26rem) { .frente__foto { aspect-ratio: 16 / 11; } }

/* --- Como funciona -------------------------------------------------------- */
.passos {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: passo;
}
/* A sequência é a informação: numerais grandes e leves sobre um filete. */
.passo { padding-top: var(--e5); border-top: 1px solid var(--linha-forte); counter-increment: passo; }
.passo::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  margin-bottom: var(--e5);
  color: var(--suave);
  font-family: var(--fonte-titulo);
  font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.passo h3 { font-size: 1.375rem; }
.passo p { margin-top: var(--e3); color: var(--suave); }
@media (max-width: 52rem) { .passos { grid-template-columns: 1fr; gap: var(--e7); } }

/* --- Galeria -------------------------------------------------------------- */
.galeria-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e6);
}
.filtro {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.05rem;
  border-radius: var(--r-full);
  border: 1px solid var(--linha-forte);
  background: var(--fundo);
  background-clip: padding-box;
  color: var(--texto);
  font-size: .9375rem;
  font-weight: 500;
  transition: background-color var(--cor), color var(--cor), border-color var(--cor), transform 160ms var(--curva);
}
.filtro:active { transform: scale(.97); }

.filtro[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); }

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--e4);
}
.galeria--previa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 52rem) { .galeria--previa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Na home: uma foto alta (o retrato inteiro do celular) e quatro ao lado. */
#galeria .galeria--previa { grid-template-columns: 1.25fr 1fr 1fr; }
#galeria .galeria--previa .galeria-item:first-child { grid-row: span 2; display: flex; flex-direction: column; }
#galeria .galeria--previa .galeria-item:first-child .galeria-botao { flex: 1; }
#galeria .galeria--previa .galeria-item:first-child img { aspect-ratio: auto; height: 100%; }
@media (max-width: 52rem) {
  #galeria .galeria--previa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #galeria .galeria--previa .galeria-item:first-child { grid-column: 1 / -1; grid-row: auto; }
  #galeria .galeria--previa .galeria-item:first-child img { aspect-ratio: 4 / 5; height: auto; }
}
/* Nas páginas de serviço o título já diz o serviço: sem legenda repetida. */
#trabalhos-servico .galeria-item figcaption { display: none; }
@media (max-width: 52rem) { .galeria { gap: var(--e3); } }
@media (max-width: 30rem) { .galeria:not(.galeria--previa) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.galeria-item { margin: 0; }
.galeria-item[hidden] { display: none; }

.galeria-botao {
  display: block;
  width: 100%;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--fundo-3);
}
.galeria-botao img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 300ms var(--curva);
}
.galeria-botao::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--aro-foto); pointer-events: none; }
.galeria-botao { transition: transform 160ms var(--curva); }
.galeria-botao:active { transform: scale(.985); }

.galeria-lupa {
  position: absolute;
  right: var(--e3); top: var(--e3);
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-full);
  background: var(--fundo);
  color: var(--tinta);
  display: grid; place-items: center;
  box-shadow: var(--sombra-sm);
  opacity: 0;
  transition: opacity var(--medio);
}
.galeria-lupa svg { width: 1.1rem; height: 1.1rem; }
.galeria-botao:focus-visible .galeria-lupa { opacity: 1; }

.galeria-item figcaption { padding: var(--e3) var(--e1) 0; }
.galeria-titulo { display: block; font-weight: 600; color: var(--tinta); font-size: .9688rem; line-height: 1.35; }
.galeria-meta { display: block; font-size: .8125rem; font-weight: 500; color: var(--texto); }

.galeria-rodape { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
.galeria-rodape .botao { max-width: 100%; white-space: normal; text-align: center; }

.galeria-vazia {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3.5rem 1.5rem;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r-lg);
  color: var(--suave);
}

/* Topo das páginas internas. */
.secao--topo { padding-block: clamp(2rem, 5vw, 3.5rem) var(--secao-y); }
.secao--topo h1 { font-size: clamp(2.375rem, 1.4rem + 3.2vw, 3.75rem); font-weight: 650; line-height: 1; letter-spacing: -0.04em; }
.migalhas {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: .9375rem;
  color: var(--suave);
  margin-bottom: var(--e5);
}
.migalhas a { color: var(--suave); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }


/* --- Lightbox ------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(.75rem, 3vw, 2.5rem);
  background: rgb(6 11 20 / .94);
  overscroll-behavior: contain;
  touch-action: pinch-zoom;
}
.lightbox[data-aberto="sim"] { display: flex; animation: lb-entra 220ms var(--curva); }
@keyframes lb-entra { from { opacity: 0 } to { opacity: 1 } }

.lightbox__figura {
  margin: 0;
  max-width: min(64rem, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.lightbox__figura img {
  max-height: min(78dvh, 52rem);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--r-md);
  object-fit: contain;
  background: #111A2B;
}
.lightbox__legenda { text-align: center; color: #D5DCE6; font-size: .9375rem; }
.lightbox__legenda strong { display: block; color: #fff; font-size: 1.0625rem; font-weight: 700; }
.lightbox__contador { color: #9AA6B8; font-size: .875rem; margin-top: .3rem; display: block; font-variant-numeric: tabular-nums; }

.lightbox__botao {
  position: absolute;
  width: 3rem; height: 3rem;
  border-radius: var(--r-full);
  background: rgb(255 255 255 / .12);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  display: grid; place-items: center;
  transition: background-color var(--cor), transform 160ms var(--curva);
}
.lightbox__botao:active { background: rgb(255 255 255 / .28); }
.lightbox__ant:active, .lightbox__prox:active { transform: translateY(-50%) scale(.94); }

.lightbox__botao svg { width: 1.35rem; height: 1.35rem; }
.lightbox__fechar { top: calc(clamp(.75rem, 2vw, 1.5rem) + env(safe-area-inset-top, 0px)); right: calc(clamp(.75rem, 2vw, 1.5rem) + env(safe-area-inset-right, 0px)); }
.lightbox__ant { left: calc(clamp(.5rem, 2vw, 1.75rem) + env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.lightbox__prox { right: calc(clamp(.5rem, 2vw, 1.75rem) + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }

/* --- Avaliações do Google -------------------------------------------------
   A seção só aparece quando /api/avaliacoes devolve avaliações reais. */
/* Colunas de alturas livres: qualquer quantidade de avaliações fecha sem buraco. */
.avaliacoes { columns: 3 18rem; column-gap: var(--e4); }
.avaliacao {
  break-inside: avoid;
  margin-bottom: var(--e4);
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--linha), var(--sombra-sm);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}
.avaliacao__texto { color: var(--tinta); font-size: 1.0625rem; line-height: 1.55; }
/* Cinco avaliações: a mais longa em destaque, em letra de título, e as
   outras quatro em 2x2 ao lado. O bloco fecha sem buraco. */
.avaliacoes--destaque {
  columns: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e4);
}
.avaliacoes--destaque .avaliacao { margin-bottom: 0; }
.avaliacao--destaque { grid-row: span 2; justify-content: space-between; }
.avaliacao--destaque .avaliacao__texto {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
@media (max-width: 62rem) {
  .avaliacoes--destaque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avaliacao--destaque { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 36rem) { .avaliacoes--destaque { grid-template-columns: 1fr; } }
.avaliacao__autor { margin-top: auto; display: flex; flex-wrap: wrap; gap: .15rem .6rem; align-items: baseline; }
.avaliacao__autor strong { color: var(--tinta); font-size: .9688rem; font-weight: 600; }
.avaliacao__autor span { color: var(--suave); font-size: .875rem; }

.estrelas { display: inline-flex; gap: .15rem; color: #E8A33D; }
.estrelas svg { width: 1.1rem; height: 1.1rem; }
.estrelas .estrela--vazia { color: var(--linha-forte); }

.avaliacoes__resumo {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .7rem;
  align-items: center;
  margin-top: var(--e4);
  color: var(--suave);
  font-size: 1.0625rem;
}
.avaliacoes__rodape {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e5);
}
.avaliacoes__fonte { font-size: .875rem; color: var(--suave); }

/* --- Pedido de orçamento (formulário completo) ---------------------------- */
.pedido {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 58rem) { .pedido { grid-template-columns: 1fr; } }

.pedido__info h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.02; }
.pedido__info > p { margin-top: var(--e4); color: var(--suave); font-size: 1.0625rem; max-width: 30rem; }

.contato-lista { list-style: none; padding: 0; margin-top: var(--e6); display: grid; gap: var(--e2); }
.contato-lista > li > a,
.contato-lista > li > span {
  display: flex;
  gap: var(--e4);
  align-items: center;
  min-height: 56px;
  padding: var(--e3) var(--e4);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--texto);
}
.contato-lista > li > a { background: var(--fundo); border: 1px solid var(--linha); transition: border-color var(--cor), transform 160ms var(--curva); }
.contato-lista > li > a:active { transform: scale(.985); }

.contato-lista svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--tinta); }
.contato-lista strong { display: block; color: var(--tinta); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.contato-lista small { display: block; color: var(--suave); font-size: .875rem; font-variant-numeric: tabular-nums; }

/* A página termina num chão azul-marinho; o formulário é a folha branca que
   flutua sobre ele, e o laranja do envio fica com toda a atenção. */
.secao--tinta { background: var(--faixa); color: var(--sobre-faixa-suave); }
.secao--tinta .pedido__info h2 { color: var(--sobre-faixa); }
.secao--tinta .pedido__info > p { color: var(--sobre-faixa-suave); }
.secao--tinta .contato-lista > li > a { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .12); color: var(--sobre-faixa); }
.secao--tinta .contato-lista > li > span { color: var(--sobre-faixa); }
.secao--tinta .contato-lista strong, .secao--tinta .contato-lista svg { color: var(--sobre-faixa); }
.secao--tinta .contato-lista small { color: var(--sobre-faixa-suave); }
.secao--tinta .agora { color: var(--sobre-faixa-suave); }
.secao--tinta .agora strong { color: var(--sobre-faixa); }
.secao--tinta .agora:not([data-estado="aberto"])::before { background: var(--sobre-faixa-suave); }

.formulario {
  background: var(--superficie);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  box-shadow: 0 0 0 1px var(--linha), var(--sombra-lg);
}
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5) var(--e4); }
.campo { display: flex; flex-direction: column; gap: var(--e2); }
.campo--largo { grid-column: 1 / -1; }
@media (max-width: 34rem) { .campos { grid-template-columns: 1fr; } .campo { grid-column: 1 / -1; } }

/* Detalhes opcionais do pedido: fechados por padrão, abrem com o mesmo
   gesto das perguntas frequentes. */
.mais-detalhes { grid-column: 1 / -1; border-top: 1px solid var(--linha); }
.mais-detalhes summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: 3.25rem;
  padding-top: var(--e3);
  color: var(--tinta);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.mais-detalhes summary::-webkit-details-marker { display: none; }
.mais-detalhes summary > span { flex: 1; }
.mais-detalhes summary::after {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  background:
    linear-gradient(var(--tinta), var(--tinta)) center / .75rem 2px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) center / 2px .75rem no-repeat,
    var(--fundo-3);
  transition: transform var(--medio);
}
.mais-detalhes[open] summary::after { transform: rotate(45deg); }

.mais-detalhes__corpo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e5) var(--e4);
  padding-top: var(--e4);
}
.mais-detalhes__corpo > * { min-width: 0; }
@media (max-width: 34rem) { .mais-detalhes__corpo { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .mais-detalhes::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size var(--medio), content-visibility var(--medio) allow-discrete;
  }
  .mais-detalhes[open]::details-content { block-size: auto; }
  /* Fechar é mais rápido do que abrir. */
  .mais-detalhes:not([open])::details-content { transition-duration: 200ms; }
}

.campo label { font-size: .9688rem; font-weight: 600; color: var(--tinta); }
.campo .opcional { font-weight: 500; color: var(--suave); }
.campo .dica { font-size: .875rem; color: var(--suave); }

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="date"],
.campo select,
.campo textarea,
.pedido-rapido input[type="text"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 52px;
  padding: .75rem 1rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-md);
  background: var(--fundo);
  background-clip: padding-box;
  color: var(--tinta);
  font-size: 1.0625rem;
  transition: border-color var(--cor), box-shadow var(--cor);
}
/* Todo controle de uma linha tem exatamente a mesma altura. */
.campo input[type="text"], .campo input[type="tel"], .campo input[type="date"], .campo select { height: 52px; }
/* Enquanto nada foi escolhido, a lista fala em cinza, como um placeholder. */
.campo select:required:invalid { color: var(--suave); }
.campo select option { color: var(--tinta); }
.campo input::placeholder, .campo textarea::placeholder, .pedido-rapido input::placeholder { color: var(--suave); opacity: 1; }
.campo textarea { min-height: 7.5rem; resize: vertical; line-height: 1.55; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23556073' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 1.15rem;
  padding-right: 2.75rem;
}
.campo input[type="date"]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .campo input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
}


.campo input:focus, .campo select:focus, .campo textarea:focus, .pedido-rapido input:focus {
  outline: none;
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--laranja) 45%, transparent);
}
.campo[data-erro="sim"] input,
.campo[data-erro="sim"] select,
.campo[data-erro="sim"] textarea { border-color: var(--erro); }

.mensagem-erro {
  display: none;
  align-items: center;
  gap: .35rem;
  font-size: .875rem;
  color: var(--erro);
  font-weight: 600;
}
.mensagem-erro svg { width: 1rem; height: 1rem; flex: none; }
[data-erro="sim"] > .mensagem-erro,
[data-erro="sim"] .mensagem-erro { display: flex; }


/* Honeypot: invisível para humanos, preenchido por robôs. */
.pote-de-mel {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.formulario__rodape { margin-top: var(--e5); display: grid; gap: var(--e3); }
.formulario__nota { font-size: .875rem; color: var(--suave); text-align: center; }

.aviso {
  display: none;
  gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--r-md);
  font-size: .9688rem;
  font-weight: 600;
  background: var(--erro-suave);
  color: var(--erro);
}
.aviso[data-visivel="sim"] { display: flex; }
.aviso > svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .1rem; }

.sucesso {
  display: none;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(.5rem, 3vw, 2rem);
}
.sucesso[data-visivel="sim"] { display: block; animation: sucesso-entra 420ms var(--curva); }
@keyframes sucesso-entra { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.sucesso__icone {
  width: 4rem; height: 4rem;
  margin: 0 auto var(--e5);
  border-radius: var(--r-full);
  background: var(--ok-suave);
  color: var(--ok);
  display: grid; place-items: center;
}
.sucesso__icone svg { width: 2rem; height: 2rem; }
/* O sinal de confirmado se desenha: primeiro o círculo, depois o traço. */
.sucesso__icone circle, .sucesso__icone path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sucesso[data-visivel="sim"] .sucesso__icone circle { animation: traco 620ms var(--curva) 140ms both; }
  .sucesso[data-visivel="sim"] .sucesso__icone path { animation: traco 380ms var(--curva) 560ms both; }
}
@keyframes traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sucesso h3 { font-size: 1.5rem; }
.sucesso p { margin-top: var(--e3); color: var(--suave); }
.protocolo-linha {
  margin-top: var(--e5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--e2);
}
.protocolo__copiar {
  min-height: 44px;
  padding: .5rem 1rem;
  border-radius: var(--r-full);
  border: 1px solid var(--linha-forte);
  background: var(--fundo);
  color: var(--tinta);
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--rapido), color var(--rapido);
}

.protocolo__codigo { white-space: nowrap; }
.protocolo__copiar[data-copiado="sim"] { color: var(--ok); border-color: var(--ok); }
.protocolo {
  display: inline-block;
  padding: .6rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--fundo-2);
  color: var(--tinta);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.sucesso__acoes { margin-top: var(--e6); display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: center; }

/* --- FAQ ------------------------------------------------------------------ */
.faq-grade {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 58rem) { .faq-grade { grid-template-columns: 1fr; } }
.faq-grade .cabecalho-secao { margin-bottom: 0; }
@media (min-width: 58.0625rem) { .faq-grade .cabecalho-secao { position: sticky; top: 6.5rem; } }

.faq { border-top: 1px solid var(--linha-forte); }
.faq details { border-bottom: 1px solid var(--linha-forte); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e4);
  min-height: 64px;
  padding-block: var(--e4);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--tinta);
  transition: color var(--cor);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 1.25rem; height: 1.25rem;
  background:
    linear-gradient(var(--tinta), var(--tinta)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) center / 1.5px 14px no-repeat;
  transition: transform var(--medio);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq__corpo { padding: 0 3rem var(--e5) 0; color: var(--texto); max-width: 44rem; }

/* --- Chamada final -------------------------------------------------------- */
.faixa {
  background: var(--faixa);
  color: var(--sobre-faixa);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: var(--e6);
  align-items: center;
}
.faixa h2 { color: var(--sobre-faixa); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.02; }
.faixa__fone { color: var(--sobre-faixa); font-weight: 600; font-variant-numeric: tabular-nums; }
.faixa p { color: var(--sobre-faixa-suave); margin-top: var(--e4); max-width: 36rem; }
.faixa__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); }
.faixa__fone { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: rgb(255 255 255 / .4); }
@media (max-width: 52rem) {
  .faixa { grid-template-columns: 1fr; }
}

/* --- Rodapé --------------------------------------------------------------- */
.rodape {
  background: var(--fundo-2);
  border-top: 1px solid var(--linha);
  /* Folga de baixo grande de propósito: o botão flutuante do WhatsApp fica
     preso no canto e cobriria a última linha do rodapé sem ela. */
  padding-block: clamp(3rem, 6vw, 4.5rem) calc(clamp(6.5rem, 8vw, 7rem) + env(safe-area-inset-bottom, 0px));
}
.rodape__grade {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 60rem) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .rodape__grade { grid-template-columns: 1fr; } }

.rodape h2 {
  font-family: var(--fonte);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinta);
  margin-bottom: var(--e3);
}
.rodape ul { list-style: none; padding: 0; display: grid; }
.rodape li { font-size: .9688rem; color: var(--suave); }
.rodape li a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--texto);
  text-decoration: none;
  font-size: .9688rem;
}

.rodape li span { display: inline-flex; min-height: 40px; align-items: center; }
.rodape__sobre p { font-size: .9688rem; color: var(--suave); margin-top: var(--e4); max-width: 24rem; }
.rodape .marca { margin-right: 0; }

.redes { display: flex; gap: var(--e2); margin-top: var(--e5); }
.redes a {
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  border: 1px solid var(--linha-forte);
  background: var(--fundo);
  display: grid; place-items: center;
  color: var(--tinta);
  transition: border-color var(--rapido), color var(--rapido);
}

.redes svg { width: 1.2rem; height: 1.2rem; }

/* Todas as regiões do DF, escritas por extenso: é o que a busca local lê. */
.rodape__regioes {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--e5);
  border-top: 1px solid var(--linha);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--e2) clamp(2rem, 4vw, 3rem);
}
.rodape__regioes > * { min-width: 0; }
.rodape__regioes h2 { margin-bottom: 0; }
.rodape__regioes p { grid-column: 2 / -1; font-size: .875rem; line-height: 1.7; color: var(--suave); max-width: 60rem; }
@media (max-width: 60rem) {
  .rodape__regioes { grid-template-columns: 1fr; }
  .rodape__regioes p { grid-column: auto; }
}

.rodape__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--e5);
  border-top: 1px solid var(--linha);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e6);
  justify-content: space-between;
  align-items: center;
  font-size: .875rem;
  color: var(--suave);
}
/* Páginas internas só têm a linha de base: sem filete nem vão em cima. */
.rodape__base:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rodape__base a { color: var(--texto); display: inline-flex; min-height: 44px; align-items: center; }
.rodape__fim { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e5); }
.credito a { font-weight: 700; }

/* --- Botão flutuante do WhatsApp ------------------------------------------ */
.zap-flutuante {
  position: fixed;
  /* Círculo só com o ícone, preso na margem lateral em telas largas para
     não cobrir o conteúdo da coluna. */
  right: max(calc(1rem + env(safe-area-inset-right, 0px)), calc((100vw - var(--largura)) / 2 - 72px));
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  justify-content: center;
  width: 56px;
  min-height: 56px;
  border-radius: var(--r-full);
  background: var(--zap);
  color: var(--sobre-zap);
  font-weight: 750;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 6px 14px -4px rgb(7 42 21 / .35), 0 16px 32px -12px rgb(7 42 21 / .35);
  transition: transform var(--medio), background-color var(--cor), opacity var(--medio), visibility var(--medio);
}
.zap-flutuante:active { transform: scale(.94); }
.zap-flutuante svg { width: 1.6rem; height: 1.6rem; }

/* Some enquanto um formulário de pedido está na tela (main.js). */
.zap-flutuante[data-escondido="sim"] { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; transition-duration: 160ms; }
.zap-flutuante span { display: none; }

/* --- Página de serviço ------------------------------------------------------
   Gerada por scripts/servicos.mjs: topo com o pedido rápido já no serviço,
   perguntas com a resposta na primeira frase e o pedido sempre ao lado. */
.servico-topo { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem); }
.servico-topo .migalhas { margin-bottom: var(--e4); }
.servico-topo__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.servico-topo h1 {
  font-size: clamp(2.25rem, 1.3rem + 3vw, 3.5rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.04em;
}
.servico-topo__foto { aspect-ratio: 3 / 4; max-height: 34rem; }
@media (max-width: 52rem) {
  .servico-topo__grade { grid-template-columns: 1fr; }
  /* Largura cheia da coluna, alinhada com o cartão de pedido acima dela. */
  .servico-topo__foto { width: 100%; max-height: none; aspect-ratio: 1 / 1; }
}

.incluido ul { list-style: none; padding: 0; display: grid; gap: var(--e3); margin-top: var(--e4); }
.incluido li { display: flex; gap: var(--e3); align-items: flex-start; color: var(--texto); }
.incluido svg { width: 1.3rem; height: 1.3rem; flex: none; color: var(--ok); margin-top: .15rem; }
.incluido h2, .incluido h3 { font-size: 1.25rem; }
.incluido { margin-bottom: var(--e7); }
/* Sem foto do serviço, a lista ocupa o lugar dela no topo. */
.incluido--destaque {
  margin-bottom: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--fundo-2);
}

.qa-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 58rem) { .qa-grade { grid-template-columns: 1fr; } }

.qa-lista { border-top: 1px solid var(--linha-forte); }
.qa { padding-block: var(--e5); border-bottom: 1px solid var(--linha-forte); }
.qa h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.02em; }
.qa p { margin-top: var(--e2); color: var(--texto); max-width: 40rem; }

.qa-aside {
  display: grid;
  gap: var(--e3);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--r-xl);
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--linha), var(--sombra);
}
.qa-aside h2 { font-size: 1.375rem; line-height: 1.2; }
.qa-aside p { color: var(--suave); font-size: 1rem; margin-bottom: var(--e2); }

/* Páginas de serviço: cenas em que o leitor se reconhece, e ao lado o que
   mandar para o orçamento sair sem ida e volta. */
.quando {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 58rem) { .quando { grid-template-columns: 1fr; } }
.quando h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; }
.situacoes { list-style: none; padding: 0; margin-top: var(--e5); border-top: 1px solid var(--linha-forte); }
.situacoes li {
  padding-block: var(--e4);
  border-bottom: 1px solid var(--linha-forte);
  color: var(--tinta);
  font-size: 1.125rem;
  line-height: 1.45;
  font-weight: 500;
}
.quando__fecho { margin-top: var(--e5); color: var(--texto); max-width: 34rem; }

.adianta {
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--fundo-2);
}
.adianta h2 { font-size: 1.375rem; }
.adianta > p { margin-top: var(--e2); color: var(--texto); }
.adianta ol { list-style: none; padding: 0; margin-top: var(--e4); display: grid; gap: var(--e3); counter-reset: adianta; }
.adianta li { counter-increment: adianta; display: flex; gap: var(--e3); align-items: flex-start; color: var(--texto); }
.adianta li::before {
  content: counter(adianta);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  color: var(--tinta);
  font-size: .875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.adianta__aviso {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--linha-forte);
  color: var(--tinta);
  font-weight: 500;
}
.adianta__aviso svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .15rem; color: var(--erro); }
@media (min-width: 58.0625rem) { .qa-aside { position: sticky; top: 6.5rem; } }

/* Serviços relacionados: as mesmas linhas com filete da lista de serviços,
   não uma grade de cartões. */
.relacionados {
  list-style: none;
  padding: 0;
  max-width: 48rem;
  border-top: 1px solid var(--linha-forte);
}
.relacionados li { border-bottom: 1px solid var(--linha-forte); }
.relacionados a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) 1.25rem;
  gap: var(--e4);
  align-items: center;
  padding-block: var(--e4);
  color: var(--texto);
  text-decoration: none;
}


/* Ícone solto, em tom de apoio: sem a caixinha cinza de kit de componentes. */
.relacionados .icone { width: 1.5rem; height: 1.5rem; color: var(--suave); display: grid; place-items: center; }
.relacionados .icone svg { width: 1.375rem; height: 1.375rem; }
.relacionados strong { display: block; color: var(--tinta); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.relacionados small { display: block; margin-top: 2px; color: var(--suave); font-size: .9375rem; line-height: 1.5; }
.relacionados__seta { width: 1.1rem; height: 1.1rem; color: var(--suave); transition: transform var(--medio); }


/* Topo da página de trabalhos: uma coluna só, texto e depois os filtros numa
   linha inteira, para a primeira fileira de fotos aparecer na primeira tela. */
.trabalhos-topo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e5);
  margin-bottom: var(--e6);
}
.trabalhos-topo .cabecalho-secao { margin-bottom: 0; }
.trabalhos-topo .galeria-filtros { margin-bottom: 0; }

/* Frase sobre a autorização das fotos, na página de trabalhos. */
.nota-fotos {
  margin-top: var(--e4);
  font-size: 1rem;
  color: var(--texto);
}

/* --- Páginas internas ----------------------------------------------------- */
.pagina-simples { padding-block: clamp(3rem, 7vw, 5.5rem); }
.pagina-simples .conteudo { max-width: 44rem; margin-inline: auto; }
.pagina-simples h1 { font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.5rem); font-weight: 650; line-height: 1.02; letter-spacing: -0.04em; }
.pagina-simples h2 { font-size: 1.375rem; margin-top: var(--e7); margin-bottom: var(--e3); }
.pagina-simples p, .pagina-simples li { margin-top: var(--e3); }
.pagina-simples ul { padding-left: 1.25rem; }
.pagina-simples li::marker { color: var(--laranja-texto); }
.pagina-simples .atualizado { color: var(--suave); font-size: .9375rem; margin-top: var(--e3); }
.pagina-simples .voltar { margin-top: var(--e7); }
.pagina-simples .voltar .botao { max-width: 100%; white-space: normal; text-align: center; }

.centralizado { text-align: center; max-width: 34rem; margin-inline: auto; }
.acoes-centro { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: center; margin-top: var(--e6); }
.centralizado .codigo {
  font-family: var(--fonte-titulo);
  font-size: clamp(4.5rem, 14vw, 7.5rem);
  font-weight: 700;
  color: var(--laranja-texto);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--e4);
  font-variant-numeric: tabular-nums;
}
.centralizado p { color: var(--suave); margin-top: var(--e4); }

/* --- Capítulos de rolagem (scroll-craft) ------------------------------------
   O motor (assets/scroll/scrollcraft.js e .css, sem alterações) é carregado
   só na home, antes desta folha: estas regras vencem as globais dele. */
:root {
  --sc-canvas: var(--fundo);
  --sc-surface: var(--superficie);
  --sc-ink: var(--tinta);
  --sc-ink-soft: var(--suave);
  --sc-accent: var(--laranja);
  --sc-accent-ink: var(--sobre-laranja);
  --sc-font-display: var(--fonte-titulo);
  --sc-font-text: var(--fonte);
}
/* O motor deixa invisível o que vai entrar. Sem JavaScript (ou se o motor não
   carregar), nada pode ficar escondido: só depois de html.sc-ready é que a
   entrada fica a cargo dele. */
html:not(.sc-ready) [data-sc-in],
html:not(.sc-ready) [data-sc-stagger] > *,
html:not(.sc-ready) [data-sc-cue] { opacity: 1; transform: none; }
html:not(.sc-ready) [data-sc-reveal] { clip-path: none; }

/* --- A porta: o pico ---------------------------------------------------------
   Chão azul-escuro, texto e teclado de um lado, o vídeo real na sua coluna,
   com legenda. O palco fica preso enquanto a rolagem avança o vídeo. */
.porta {
  --palco: #0A1222;
  background: var(--palco);
  color: #C9D3E2;
}
.porta__palco {
  display: flex;
  align-items: center;
  /* O cabeçalho fixo cobre o topo do palco: o conteúdo começa abaixo dele. */
  padding-block: calc(4.75rem + env(safe-area-inset-top, 0px) + var(--e5)) var(--e6);
}
.porta__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.porta__titulo {
  color: #fff;
  font-size: clamp(2.25rem, 1.3rem + 3vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  max-width: 13ch;
}
.porta__lead { margin-top: var(--e5); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); max-width: 30rem; color: #C9D3E2; }

/* O teclado da fechadura: as teclas da senha acendem com a rolagem.
   --sc-p é o progresso do capítulo (0 a 1), publicado pelo motor. */
.teclado {
  --p: var(--sc-p, 0);
  display: grid;
  grid-template-columns: repeat(3, 3.25rem);
  gap: .5rem .75rem;
  width: max-content;
  margin-top: var(--e6);
  padding: 1.125rem 1.375rem;
  border-radius: 22px;
  background: #05080F;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 0 0 1px rgb(255 255 255 / .08), 0 18px 40px -18px rgb(0 0 0 / .7);
}
.tecla {
  --liga: 2;                                           /* tecla fora da senha: nunca acende */
  --luz: clamp(0, (var(--p) - var(--liga)) * 28, 1);
  display: grid;
  place-items: center;
  height: 2.75rem;
  border-radius: 12px;
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: calc(.26 + .74 * var(--luz));
  background: rgb(255 255 255 / calc(.1 * var(--luz)));
}
.tecla--1 { --liga: .06; }
.tecla--2 { --liga: .14; }
.tecla--3 { --liga: .22; }
.tecla--4 { --liga: .30; }
.tecla--ok { --liga: .42; }
.tecla--ok svg { width: 1.25rem; height: 1.25rem; }
/* O LED da fechadura: apagado até a senha entrar, depois verde. */
.tecla--led { --liga: .58; opacity: 1; background: none; }
.tecla--led i {
  width: .625rem; height: .625rem;
  border-radius: 50%;
  background: color-mix(in srgb, #2BD47D calc(var(--luz) * 100%), #2A3344);
}
.porta__estado {
  margin-top: var(--e5);
  max-width: 26rem;
  color: #C9D3E2;
  opacity: clamp(0, (var(--sc-p, 0) - .6) * 12, 1);
}
.porta__estado strong { color: #fff; font-weight: 600; }
.porta__link { margin-top: var(--e4); color: #fff; }

.porta__midia {
  position: relative;
  margin: 0;
  justify-self: end;
  width: min(100%, 26rem, calc((100svh - 12rem) * .75));
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* O vídeo vira uma camada própria e escapa do canto arredondado no
     Chromium: o recorte explícito segura os cantos. */
  clip-path: inset(0 round var(--r-lg));
  background: #111A2B;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 70px -30px rgb(0 0 0 / .8);
}
.porta__midia .porta__poster,
.porta__midia video,
.porta__final { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05); border-radius: inherit; }
/* A porta aberta fica sempre por baixo (carrega como as outras fotos) e só
   vem para a frente sem JavaScript ou com menos movimento. */
.porta__final { z-index: -1; }
.porta__midia figcaption {
  position: absolute;
  left: var(--e4); right: var(--e4); bottom: .875rem;
  z-index: 2;
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgb(0 0 0 / .45);
}
.porta__midia::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06);
  background: linear-gradient(to top, rgb(5 8 15 / .6), rgb(5 8 15 / 0) 30%);
}

/* Sem JavaScript ou com menos movimento: a porta já aberta e a senha acesa. */
@media (scripting: none) {
  .porta .teclado, .porta__estado { --sc-p: 1; }
  .porta__final { z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .porta__final { z-index: 1; }
  .porta__midia video, .porta__poster { display: none; }
}

/* Celular: o vídeo no alto, o título e o teclado embaixo, tudo numa tela. */
@media (max-width: 60rem) {
  .porta__palco { align-items: stretch; padding-bottom: var(--e5); }
  .porta__grade { grid-template-columns: 1fr; gap: var(--e5); align-content: start; }
  .porta__midia { order: -1; justify-self: start; width: min(100%, calc((100svh - 22rem) * .75)); }
  .porta__titulo { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem); max-width: 16ch; }
  .porta__lead, .porta__link { display: none; }
  .porta__texto { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e5); align-items: center; }
  .porta__titulo { grid-column: 1 / -1; }
  .teclado { grid-template-columns: repeat(3, 2.25rem); gap: .3rem .45rem; padding: .7rem .8rem; border-radius: 16px; margin-top: var(--e4); }
  .tecla { height: 2rem; font-size: 1rem; border-radius: 9px; }
  .porta__estado { margin-top: var(--e4); font-size: .9375rem; }
}

/* --- Passar o mouse ------------------------------------------------------
   Só em aparelhos com mouse: no celular o estado de "passar por cima"
   ficava preso depois do toque (foto ampliada, pergunta laranja, botão
   flutuante levantado). No toque, quem responde é o :active. */
@media (hover: hover) and (pointer: fine) {
  .link-seta:hover { color: var(--laranja-texto); }
  .link-seta:hover svg { transform: translateX(3px); }
  .marca:hover { color: var(--tinta); }
  .nav__link:hover { color: var(--tinta); background: var(--fundo-2); }
  .selo-google a:hover { border-color: var(--tinta); box-shadow: var(--sombra); }
  .selo-google a:hover .selo-google__texto { text-decoration: underline; text-underline-offset: .2em; }
  .chip input:not(:checked):hover + span { border-color: var(--tinta); color: var(--tinta); }
  .lista-servicos h3 a:hover,
  .lista-servicos h4 a:hover { text-decoration: underline; text-decoration-color: var(--laranja); }
  .filtro:not([aria-pressed="true"]):hover { border-color: var(--tinta); color: var(--tinta); }
  .galeria-botao:hover img { transform: scale(1.035); }
  .galeria-botao:hover .galeria-lupa { opacity: 1; }
  .migalhas a:hover { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--laranja); }
  .lightbox__botao:hover { background: rgb(255 255 255 / .24); }
  .contato-lista > li > a:hover { border-color: var(--tinta); color: var(--texto); }
  .mais-detalhes summary:hover { color: var(--laranja-texto); }
  .campo input:hover,
  .campo select:hover,
  .campo textarea:hover,
  .pedido-rapido input:hover { border-color: var(--suave); }
  .protocolo__copiar:hover { border-color: var(--tinta); }
  .faq summary:hover { color: var(--laranja-texto); }
  .rodape li a:hover { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--laranja); }
  .redes a:hover { border-color: var(--tinta); color: var(--laranja-texto); }
  .zap-flutuante:hover { background: var(--zap-forte); color: var(--sobre-zap); transform: translateY(-2px); }
  .relacionados a:hover { color: var(--texto); }
  .relacionados a:hover strong { text-decoration: underline; text-decoration-color: var(--laranja); }
  .relacionados a:hover .relacionados__seta { transform: translateX(3px); color: var(--tinta); }
  a:hover { color: var(--laranja-texto); }
  .botao--primario:hover { background: var(--laranja-forte); color: var(--sobre-laranja); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -1px 0 rgb(14 27 46 / .14), var(--sombra); }
  .botao--zap:hover { background: var(--zap-forte); color: var(--sobre-zap); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -1px 0 rgb(7 42 21 / .14), var(--sombra); }
  .botao--secundario:hover { border-color: var(--tinta); color: var(--tinta); }
  .lista-servicos li:hover::after { transform: translateX(3px); background: var(--tinta); }
  .lista-servicos li:hover h3 a, .lista-servicos li:hover h4 a { text-decoration: underline; text-decoration-color: var(--laranja); }
  .galeria-botao:hover img { transition-duration: 600ms; }
  .secao--tinta .contato-lista > li > a:hover { border-color: rgb(255 255 255 / .35); color: var(--sobre-faixa); }
  .faixa__fone:hover { color: var(--sobre-faixa); text-decoration-color: var(--laranja); }
}

/* --- Movimento ---------------------------------------------------------------
   Um momento autoral e o resto é continuidade:
   1. O trabalho aparece. As fotos reais do topo sobem de baixo para cima, em
      sequência, com o mesmo gesto da troca de foto ao escolher um serviço.
   2. Entre páginas, o cabeçalho fica parado e só o conteúdo troca.
   3. Na galeria, filtrar reorganiza as fotos e tocar numa foto faz ela crescer
      até o visualizador (main.js, View Transitions).
   4. As respostas das dúvidas abrem deslizando.
   Quem pede menos movimento no sistema fica só com cor e opacidade. */

/* A entrada só começa quando a foto chegou: até lá ela espera escondida e o
   main.js põe .revela no evento load, em sequência. Assim, no 4G, a revelação
   nunca roda sobre um quadro vazio. Sem JavaScript a foto aparece normal; se o
   main.js não carregar, a rede de segurança abaixo mostra a foto em 3 s. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero__fotos .foto img:not(.revela),
  .servico-topo__foto img:not(.revela) {
    clip-path: inset(100% 0 0 0 round var(--r-lg));
    animation: foto-seguranca 1ms linear 3s forwards;
  }
  .hero__fotos .foto img:not(.revela) + figcaption,
  .servico-topo__foto img:not(.revela) + figcaption {
    opacity: 0;
    animation: legenda-seguranca 1ms linear 3s forwards;
  }
  .foto img.revela { animation: foto-entra 760ms var(--curva) both; }
  .foto img.revela + figcaption { animation: legenda-entra 420ms var(--curva) 480ms both; }
  /* Foto que chegou depois da rede de segurança: a legenda já está à mostra,
     então não some e volta. */
  .foto img.revela.tarde + figcaption { animation: none; opacity: 1; }
}
@keyframes foto-seguranca { to { clip-path: inset(0 0 0 0 round var(--r-lg)); } }
@keyframes legenda-seguranca { to { opacity: 1; } }
@keyframes legenda-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Navegação entre páginas do próprio site. */
@view-transition { navigation: auto; }
.cabecalho { view-transition-name: cabecalho; }
::view-transition-old(root) { animation: 140ms ease-out both vt-sai; }
::view-transition-new(root) { animation: 360ms var(--curva) both vt-entra; }
/* Transições dentro da própria página (filtrar a galeria, abrir uma foto):
   só o que mudou se mexe; o resto da página só troca, sem subir. */
html.vt-local::view-transition-old(root) { animation: 160ms ease-out both vt-sai; }
html.vt-local::view-transition-new(root) { animation: 220ms var(--curva) both lb-entra; }
@keyframes vt-sai { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(12px); } }

/* Foto da galeria crescendo até o visualizador (nome dado pelo main.js). */
::view-transition-group(foto-aberta) { animation-duration: 420ms; animation-timing-function: var(--curva); overflow: clip; border-radius: var(--r-md); }
/* A miniatura 3:4 e a foto inteira têm formatos diferentes: as duas imagens
   cobrem o grupo em vez de esticar. Fechar é mais rápido do que abrir. */
::view-transition-old(foto-aberta),
::view-transition-new(foto-aberta) { height: 100%; object-fit: cover; }
html.vt-fecha::view-transition-group(foto-aberta) { animation-duration: 300ms; }
::view-transition-group(*) { animation-timing-function: var(--curva); }
/* Fotos que entram ou saem do filtro: crescem um pouco ao entrar e somem rápido. */
::view-transition-new(*):only-child { animation: 260ms var(--curva) both tile-entra; }
::view-transition-old(*):only-child { animation: 150ms ease-out both vt-sai; }
@keyframes tile-entra { from { opacity: 0; transform: scale(.96); } }

/* Respostas que abrem deslizando, onde o navegador sabe animar até "auto". */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
}
@supports (interpolate-size: allow-keywords) {
  .faq details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--medio), content-visibility var(--medio) allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
  .faq details:not([open])::details-content { transition-duration: 200ms; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .faq details::details-content { transition: none; }
  .zap-flutuante, .zap-flutuante[data-escondido="sim"] { transform: none; }
  /* Nada se desloca: só cor e opacidade. Os estados mudam na hora. */
  .galeria-botao img, .link-seta svg, .relacionados__seta, .faq summary::after,
  .mais-detalhes summary::after, .lista-servicos li::after, .pular-para-conteudo { transition: none; }
  .botao, .chip span, .filtro, .galeria-botao, .contato-lista > li > a, .lightbox__botao { transition-property: color, background-color, border-color, box-shadow; }
  .nav, .nav[data-aberto="sim"] { transform: none; transition-property: opacity, visibility; }
  .galeria-botao:hover img, .link-seta:hover svg, .relacionados a:hover .relacionados__seta,
  .lista-servicos li:hover::after,
  .botao:active, .botao--bloco:active, .chip input:active + span, .filtro:active, .galeria-botao:active,
  .contato-lista > li > a:active, .zap-flutuante:active, .zap-flutuante:hover { transform: none; }
  .lightbox__ant:active, .lightbox__prox:active { transform: translateY(-50%); }
  .sucesso[data-visivel="sim"] { animation: lb-entra 220ms var(--curva); }
}

/* --- Impressão ------------------------------------------------------------ */
@media print {
  .cabecalho, .zap-flutuante, .galeria-filtros, .lightbox, .formulario, .pedido-rapido { display: none !important; }
  body { color: #000; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}