/* ==========================================================================
   Império dos Vidros — folha de estilo
   Vermelho do brasão em versão saturada como cor de estrutura;
   dourado do escudo como acento. Neutros de base quente.
   ========================================================================== */

:root {
  /* Marca */
  --vermelho: #cc2027;       /* principal — botões, títulos de apoio, ícones */
  --vermelho-vivo: #e5343b;  /* hover */
  --vermelho-escuro: #8e1219; /* barra do topo, bordas de seção */
  --vermelho-fundo: #4d060b;  /* fundos escuros (hero, faixas) */

  --ouro: #f2c53f;
  --ouro-vivo: #ffd75e;
  --ouro-fundo: #9a6f0a; /* dourado com contraste sobre branco */

  /* Neutros de base quente */
  --branco: #ffffff;
  --creme: #fbf7f4;
  --creme-2: #f2e7e2;
  --grafite: #1f1516;
  --texto: #2a1f20;
  --texto-2: #6e5f5f;
  --linha: #e8dbd6;

  --sombra: 0 1px 2px rgba(45, 20, 22, .06), 0 8px 24px rgba(45, 20, 22, .08);
  --sombra-f: 0 6px 14px rgba(45, 20, 22, .1), 0 20px 48px rgba(45, 20, 22, .16);

  /* Escala de raio — três degraus e nada além disso.
     Antes convíviam 4px, 8px, 100px, 999px e 50% sem critério. */
  --raio: 6px;        /* botões, cards, fotos */
  --raio-g: 12px;     /* blocos grandes: mapa, cartão sobre o mapa */
  --raio-pill: 999px; /* chips, filtros, pílulas */

  /* Micro-tipografia: piso único para os rótulos em caixa alta.
     Abaixo disso (havia coisa em 9px) o texto vira textura ilegível. */
  --micro: .72rem;

  --wrap: 1200px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--grafite);
}
h1 { font-size: clamp(2.1rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1rem; }

::selection { background: var(--vermelho); color: #fff; }

:focus-visible {
  outline: 3px solid var(--vermelho);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Sobre fundo vinho o contorno vermelho dá ~2:1 e some (reprova WCAG 1.4.11).
   Nas seções escuras o foco passa a ser dourado. */
.hero :focus-visible,
.faixa-vermelha :focus-visible,
.rodape :focus-visible,
.lightbox :focus-visible,
.barra-acao .acao--zap:focus-visible {
  outline-color: var(--ouro);
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* âncoras não podem parar embaixo do cabeçalho fixo */
section[id], main[id] { scroll-margin-top: 92px; }

.pular {
  position: absolute; left: -9999px;
  background: var(--vermelho); color: #fff; padding: .8rem 1.2rem; z-index: 200;
}
.pular:focus { left: 1rem; top: 1rem; }

.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn .ic, .flutuante svg { fill: currentColor; stroke: none; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1.5rem;
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  letter-spacing: .01em; border: 2px solid transparent; border-radius: var(--raio);
  cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease),
    border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--g { padding: 1.05rem 2rem; font-size: 1.02rem; }
.btn--bloco { width: 100%; max-width: 26rem; }

.btn--ouro { background: var(--ouro); color: #3a2a00; border-color: var(--ouro); box-shadow: 0 4px 16px rgba(184, 134, 15, .28); }
.btn--ouro:hover { background: var(--ouro-vivo); border-color: var(--ouro-vivo); box-shadow: 0 8px 24px rgba(184, 134, 15, .38); }

.btn--vermelho { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.btn--vermelho:hover { background: var(--vermelho-vivo); border-color: var(--vermelho-vivo); }

.btn--linha { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--linha:hover { background: #fff; color: var(--vermelho); border-color: #fff; }

/* ---------- Barra superior ---------- */
.topo { background: var(--vermelho-escuro); color: rgba(255, 255, 255, .92); font-size: .84rem; }
.topo__linha { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; align-items: center; min-height: 40px; padding-block: .45rem; }
.topo__item { display: inline-flex; align-items: center; gap: .45rem; }
.topo__item .ic { color: var(--ouro); }
.topo__item--link:hover { color: var(--ouro-vivo); }

/* "Aberto agora / Fechado" — o dado já existia em CONFIG.horarioEstruturado
   e só alimentava o JSON-LD. Aqui ele decide se a pessoa chama agora. */
.topo__estado { font-weight: 600; }
.topo__bolinha {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #9aa0a6; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}
.topo__estado.is-aberto { color: #b9f6c3; }
.topo__estado.is-aberto .topo__bolinha { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .22); }
.topo__estado.is-fechado { color: rgba(255, 255, 255, .8); }

/* ---------- Cabeçalho ---------- */
.cab {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--linha);
  transition: box-shadow .3s var(--ease);
}
.cab.is-rolado { box-shadow: var(--sombra); }
.cab__linha { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }

.marca { display: inline-flex; align-items: center; gap: .7rem; }
.marca__img { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; }
.rodape .marca__img { width: 46px; height: 46px; }
.marca__txt { display: flex; flex-direction: column; line-height: 1; }
.marca__txt strong {
  font-family: var(--serif); font-size: 1.42rem; font-weight: 700;
  color: var(--vermelho); letter-spacing: .01em;
}
.marca__txt em {
  font-style: normal; font-size: .68rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--texto-2); margin-top: .3rem;
}
.marca__txt strong::after {
  content: ""; display: block; width: 100%; height: 2px;
  background: var(--ouro); margin-top: .28rem;
}

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav > a:not(.btn) { font-size: .93rem; font-weight: 500; color: var(--texto); position: relative; padding-block: .3rem; }
.nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--vermelho); transition: width .3s var(--ease);
}
.nav > a:not(.btn):hover { color: var(--vermelho); }
.nav > a:not(.btn):hover::after { width: 100%; }
.nav__cta { padding: .7rem 1.25rem; }

.hamb { display: none; width: 46px; height: 44px; background: none; border: 0; cursor: pointer; padding: 8px 6px; }
.hamb span { display: block; height: 2px; background: var(--grafite); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.hamb span + span { margin-top: 6px; }
.hamb[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   TOPO — a obra executada é o protagonista.
   Nada de moldura, cantoneira ou chamada sobre a foto: só o gradiente que
   garante contraste para o texto, o título e o carimbo de rodapé.
   As cotas saíram: inventar medida sobre obra real seria mentira.
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: clamp(30rem, 76vh, 44rem);
  display: grid; align-items: stretch;
  background: var(--vermelho-fundo); overflow: hidden;
}
.hero__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  /* enquadra o pano de vidro, não o céu nem a calçada */
  object-position: 58% 42%;
}
/* Vinheta: firme à esquerda para o texto respirar, quase limpa à direita
   para o vidro continuar sendo vidro. */
.hero__vinheta {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* firme só onde o texto pousa; some antes da metade para o céu
       refletido no vidro continuar azul */
    linear-gradient(100deg,
      rgba(28, 3, 6, .93) 0%, rgba(28, 3, 6, .84) 20%,
      rgba(28, 3, 6, .52) 40%, rgba(28, 3, 6, .14) 62%, rgba(28, 3, 6, 0) 82%),
    /* base, para o carimbo se destacar */
    linear-gradient(to top, rgba(18, 2, 4, .74) 0%, rgba(18, 2, 4, .16) 26%, transparent 44%),
    /* topo, para separar do cabeçalho branco */
    linear-gradient(to bottom, rgba(18, 2, 4, .42) 0%, transparent 16%);
}

/* ---- conteúdo ---- */
.hero__grade {
  position: relative; z-index: 4;
  display: grid; align-content: space-between; gap: clamp(2.5rem, 6vw, 4.5rem);
  padding: clamp(3.25rem, 7vw, 5rem) 0 clamp(2rem, 3.5vw, 2.75rem);
}
.hero__conteudo { max-width: 42rem; }

.tag {
  display: inline-flex; align-items: center; gap: .75rem; margin: 0 0 1.4rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--micro); letter-spacing: .18em; text-transform: uppercase; color: var(--ouro);
}
.tag::before { content: ""; width: 28px; height: 1px; background: var(--ouro); }

.hero h1 {
  color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08;
  margin-bottom: 1.15rem; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(20, 2, 4, .5);
}
.hero__texto {
  font-size: clamp(1rem, 1.35vw, 1.1rem); color: rgba(255, 255, 255, .9);
  max-width: 42ch; margin-bottom: 2rem;
  text-shadow: 0 1px 12px rgba(20, 2, 4, .5);
}
.hero__texto b { color: var(--ouro); font-weight: 600; }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.7rem; }
.hero__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .93rem; font-weight: 600; color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.hero__link:hover { color: var(--ouro); border-color: var(--ouro); }

/* ---- carimbo ---- */
.carimbo {
  margin: 0; justify-self: start; display: grid; grid-auto-flow: column;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--raio);
  background: rgba(24, 2, 5, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
.carimbo > div { padding: .7rem 1.2rem; border-left: 1px solid rgba(255, 255, 255, .18); }
.carimbo > div:first-child { border-left: 0; }
.carimbo dt {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--micro); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.carimbo dd { margin: .28rem 0 0; font-size: .92rem; font-weight: 600; color: #fff; }

/* ---------- Seções ---------- */
.secao { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.secao--creme2 { background: var(--creme-2); }
.secao--creme { background: var(--creme); }

.rotulo {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--vermelho); margin: 0 0 .85rem;
}
.rotulo::before { content: ""; width: 26px; height: 2px; background: var(--ouro-fundo); }
.rotulo--claro { color: var(--ouro); }
.rotulo--claro::before { background: var(--ouro); }

.cabecalho-secao { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.cabecalho-secao--centro { margin-inline: auto; text-align: center; }
.cabecalho-secao--centro .rotulo { justify-content: center; }
.cabecalho-secao .sub { color: var(--texto-2); font-size: 1.03rem; margin: .9rem 0 0; }

/* ==========================================================================
   DEPOIMENTOS — fita contínua que atravessa a tela e volta ao começo.

   Como o laço funciona: a fita tem DUAS listas idênticas lado a lado. A
   animação arrasta a fita exatamente o tamanho de uma lista (metade da fita
   mais metade do vão entre as duas) e recomeça — como a segunda lista está
   no lugar exato onde a primeira estava, o corte é invisível.

   A fita anda com `transform`, então não engasga o scroll da página, e não
   para nunca — nem no hover. Quem pediu menos movimento no sistema
   (`prefers-reduced-motion`) recebe uma faixa parada, que rola com o dedo.
   ========================================================================== */
.depo {
  --depo-vao: 1.5rem;
  position: relative; overflow: hidden;
  padding: .5rem 0 1rem;
  /* as pontas somem no creme da seção, em vez de cortarem seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.depo__fita {
  display: flex; gap: var(--depo-vao); width: max-content;
  animation: depo-correr var(--depo-tempo, 96s) linear infinite;
  will-change: transform;
}

/* WCAG 2.2.2 — dá para parar a fita de três jeitos: passando o mouse,
   chegando nela pelo teclado, ou pelo botão (o único que serve no toque). */
.depo:hover .depo__fita,
.depo:focus-within .depo__fita,
.depo.is-parada .depo__fita { animation-play-state: paused; }

@keyframes depo-correr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - (var(--depo-vao) / 2)), 0, 0); }
}

.depo__trilho {
  display: flex; gap: var(--depo-vao);
  margin: 0; padding: 0; list-style: none;
}

/* ---- cartão ---- */
.depo__card {
  flex: 0 0 auto; width: clamp(17.5rem, 26vw, 23rem);
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 1.9rem 1.9rem 1.5rem;
  position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(42, 31, 32, .04), 0 12px 28px -18px rgba(42, 31, 32, .3);
}
/* fio dourado no topo: liga o cartão à marca sem pesar */
.depo__card::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--vermelho), var(--ouro));
}
.depo__estrelas { display: flex; gap: .18rem; color: var(--ouro-fundo); }
.depo__estrelas svg { width: 17px; height: 17px; fill: currentColor; }
.depo__estrelas .vazia { opacity: .22; }

.depo__texto {
  margin: 0; font-family: var(--serif);
  font-size: 1.06rem; line-height: 1.5; color: var(--texto); text-wrap: pretty;
}

.depo__rodape {
  margin-top: auto; padding-top: 1.05rem; border-top: 1px solid var(--linha);
  display: flex; align-items: center; gap: .8rem;
}
.depo__avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--vermelho), var(--vermelho-escuro));
  color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.depo__quem { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.depo__autor { font-weight: 700; font-size: .95rem; color: var(--texto); }
.depo__servico {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-2);
}

/* ---- média em estrelas + controle de pausa, no cabeçalho ---- */
.depo__barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  margin-top: 1.1rem;
}
.depo__nota {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0; padding: .5rem .9rem;
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-pill);
  font-size: .88rem; color: var(--texto-2);
}
.depo__nota strong { color: var(--texto); }
.depo__nota .depo__estrelas svg { width: 15px; height: 15px; }

.depo__pausa {
  font-family: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .4rem 1rem; border-radius: var(--raio-pill);
  background: transparent; color: var(--texto-2);
  border: 1px solid var(--linha);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.depo__pausa:hover { color: var(--vermelho); border-color: var(--vermelho); }
.depo__pausa svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
/* estado normal: mostra "pausar"; pressionado: mostra "retomar" */
.depo__pausa .ic-play { display: none; }
.depo__pausa[aria-pressed="true"] .ic-pausa { display: none; }
.depo__pausa[aria-pressed="true"] .ic-play { display: block; }
.depo__pausa[aria-pressed="true"] { color: var(--vermelho); border-color: var(--vermelho); }


/* ==========================================================================
   MOSAICO — cards de serviço e galeria de obras

   Cada foto ocupa a própria proporção. Nada é cortado e nada sobra: acabaram
   a caixa quadrada, o object-fit: contain e a cópia borrada que preenchia a
   tarja. As colunas são de altura livre (multi-column), então fotos em pé e
   deitadas convivem sem buraco.

   Os atributos width/height de cada <img> vêm dos pixels reais do arquivo:
   é o que reserva o espaço certo antes de a foto carregar.
   ========================================================================== */
/* Cards de serviço: grid de verdade.
   Com `columns` o navegador preenchia coluna por coluna, então a ordem que se
   lê (1,3,5 / 2,4,6) não batia com a ordem do DOM e o pé das colunas ficava
   irregular. Aqui a foto de cada card é normalizada em 4:3 — o corte vale a
   troca, porque alinha os títulos e os botões na mesma linha de base.
   O mosaico de proporção real continua sendo o da galeria, logo abaixo. */
.cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem; align-items: stretch;
}

/* Galeria: mosaico de verdade. As colunas do multi-column deixavam buraco no
   fim (não sabem antecipar a altura das fotos verticais), então aqui é grid
   com linhas de 8px e cada foto ocupando o número de linhas da sua proporção.
   Quem calcula o span é ajustarMosaico(), em main.js, a partir de w/h. */
.galeria {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem; grid-auto-rows: 8px; align-items: start;
}
.obra { grid-row-end: span var(--span, 30); min-width: 0; }

/* ---------- Cards de serviço ---------- */
.card {
  display: flex; flex-direction: column;
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sombra-f); border-color: transparent; }
.card__foto {
  position: relative; overflow: hidden; background: var(--creme-2);
  aspect-ratio: 4 / 3;
}
.card__foto img {
  display: block; width: 100%; height: 100%;
  /* o enquadramento de cada serviço vem do campo `foco` em js/main.js */
  object-fit: cover; object-position: var(--foco, center);
  transition: transform .6s var(--ease);
}
.card:hover .card__foto img { transform: scale(1.03); }
.card__corpo {
  padding: 1.2rem 1.4rem 1.25rem; display: flex; flex-direction: column; flex: 1;
  gap: .4rem;
}
.card__corpo h3 { margin: 0; }
.card__corpo p { color: var(--texto-2); font-size: .93rem; margin: 0 0 .8rem; }
/* o card inteiro é o link; isto aqui é só a afordância visual */
.card__acao {
  margin-top: auto; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; font-size: .82rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--vermelho);
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.card__acao::after {
  content: ""; width: 22px; height: 2px; background: var(--ouro);
  transition: width .3s var(--ease);
}
.card:hover .card__acao { color: var(--vermelho-vivo); gap: .75rem; }
.card:hover .card__acao::after { width: 32px; }

.servicos-extra {
  margin: 1.75rem 0 0;
  display: grid; gap: .7rem; justify-items: start;
  font-size: .95rem; color: var(--texto-2);
  padding-left: 1.1rem; border-left: 2px solid var(--ouro);
}
.servicos-extra strong {
  color: var(--texto); font-weight: 700;
  font-size: var(--micro); letter-spacing: .16em; text-transform: uppercase;
}
.servicos-extra__lista { display: flex; flex-wrap: wrap; gap: .4rem; }
.servicos-extra__lista span {
  display: inline-flex; align-items: center;
  padding: .3rem .8rem; border-radius: var(--raio-pill);
  background: var(--branco); border: 1px solid var(--linha);
  font-size: .85rem; color: var(--texto);
}
.servicos-extra__nota { font-size: .9rem; max-width: 52ch; }

/* ---------- Passos ---------- */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; position: relative; }
.passos::before {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 27px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--linha) 0 8px, transparent 8px 16px);
}
.passos li { position: relative; text-align: center; }
.passos__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-bottom: 1.1rem;
  border-radius: 50%; background: var(--branco);
  border: 2px solid var(--vermelho); color: var(--vermelho);
  font-family: var(--serif); font-size: 1.4rem; font-weight: 700;
  position: relative; z-index: 2; transition: background .3s var(--ease), color .3s var(--ease);
}
.passos li:hover .passos__n { background: var(--vermelho); color: var(--ouro); }
.passos h3 { margin-bottom: .35rem; }
.passos p { color: var(--texto-2); font-size: .92rem; margin: 0; }

/* ---------- Galeria ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.75rem; }
.filtro {
  font-family: inherit; font-size: .86rem; font-weight: 600;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .4rem 1.15rem; border-radius: var(--raio-pill); cursor: pointer;
  background: var(--branco); color: var(--texto-2); border: 1px solid var(--linha);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.filtro:hover { border-color: var(--vermelho); color: var(--vermelho); }
.filtro.is-on { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }

.obra {
  position: relative; overflow: hidden; border-radius: var(--raio); cursor: zoom-in;
  background: var(--creme-2); border: 0; padding: 0; display: block;
}
.obra img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.obra:hover img, .obra:focus-visible img { transform: scale(1.04); }

/* legenda: sempre legível no toque, revelada no hover do mouse */
.obra__legenda {
  position: absolute; inset: auto 0 0 0; padding: 2.2rem .95rem .85rem;
  background: linear-gradient(to top, rgba(26, 12, 14, .92), rgba(26, 12, 14, .55) 55%, transparent);
  color: #fff; text-align: left; display: grid; gap: .15rem;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.obra__legenda strong { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.obra__lupa {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ouro);
}
/* onde existe mouse a legenda descansa escondida; no toque ela fica sempre */
@media (hover: hover) {
  .obra__legenda { opacity: 0; transform: translateY(10px); }
  .obra:hover .obra__legenda, .obra:focus-visible .obra__legenda { opacity: 1; transform: none; }
}
.obra.is-fora, .obra.is-alem { display: none; }

.galeria__mais { display: flex; justify-content: center; margin-top: .5rem; }
.btn--contorno {
  background: transparent; color: var(--vermelho); border-color: var(--linha);
}
.btn--contorno:hover { border-color: var(--vermelho); background: var(--vermelho); color: #fff; }

/* estado vazio do filtro — nunca deixar a área em branco sem explicação */
.galeria__vazio {
  grid-column: 1 / -1; display: grid; justify-items: center; gap: .4rem;
  padding: 3rem 1.5rem; text-align: center;
  border: 1px dashed var(--linha); border-radius: var(--raio); background: var(--branco);
}
.galeria__vazio strong { font-size: 1rem; color: var(--texto); }
.galeria__vazio span { font-size: .9rem; color: var(--texto-2); }

/* ---------- Faixa vinho ---------- */
.faixa-vermelha {
  background: var(--vermelho-fundo); color: #fff;
  background-image: linear-gradient(135deg, var(--vermelho-escuro), var(--vermelho-fundo) 60%);
  padding: clamp(3rem, 7vw, 5rem) 0;
}
.faixa-vermelha__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.faixa-vermelha h2 { color: #fff; margin-bottom: 1rem; }
.faixa-vermelha p { color: rgba(255, 255, 255, .88); margin: 0; max-width: 32rem; }
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2.5rem; margin: 0; }
/* com menos de 3 dados preenchidos os itens se agrupam em vez de esticar */
.numeros--poucos { grid-template-columns: repeat(2, max-content); }
.numeros > div { border-left: 3px solid var(--ouro); padding-left: 1.1rem; }
.numeros dt { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); order: 2; }
.numeros dd { margin: 0 0 .2rem; font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; color: var(--ouro); line-height: 1; }
.numeros dd.e-texto { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.25; }
.numeros > div { display: flex; flex-direction: column; }

/* ==========================================================================
   PERGUNTAS FREQUENTES
   Cada item é um <details> nativo: abre sem JS, o Ctrl+F acha o texto mesmo
   fechado e o leitor de tela anuncia o estado sozinho.
   ========================================================================== */
.faq__grade {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.faq__grade .cabecalho-secao { margin-bottom: 0; position: sticky; top: 110px; }
.faq__cta { margin-top: 1.6rem; }

.faq__lista { border-top: 1px solid var(--linha); }
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.12rem; font-weight: 700;
  color: var(--grafite); line-height: 1.3;
  transition: color .25s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--vermelho); }
.faq__item summary:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 2px; }
/* sinal de + que vira − quando abre: dois traços, um deles gira */
.faq__item summary::after {
  content: ""; flex: none; width: 18px; height: 18px; position: relative;
  background:
    linear-gradient(var(--vermelho), var(--vermelho)) center / 100% 2px no-repeat,
    linear-gradient(var(--vermelho), var(--vermelho)) center / 2px 100% no-repeat;
  transition: transform .3s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(135deg); }
.faq__item[open] summary { color: var(--vermelho); }
.faq__resposta { padding: 0 3rem .3rem 0; }
.faq__resposta p { margin: 0 0 1.15rem; color: var(--texto-2); }

/* ---------- Orçamento ---------- */
.orcamento { background: var(--creme); padding: clamp(3.5rem, 8vw, 6rem) 0; border-top: 1px solid var(--linha); }
.orcamento__grade { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.orcamento h2 span { color: var(--vermelho); }
.orcamento__texto { color: var(--texto-2); max-width: 34rem; margin: 1rem 0 1.8rem; }

.chips { margin-bottom: 1.8rem; }
.chips legend { font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); margin-bottom: .85rem; padding: 0; }
.chips__linha { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Prévia da mensagem: mostra o texto exato que vai ser enviado, para o
   clique no botão deixar de ser um salto no escuro. */
.chips__previa {
  margin: 1rem 0 0; padding: .75rem .95rem;
  background: var(--branco); border: 1px solid var(--linha);
  border-left: 3px solid var(--ouro); border-radius: var(--raio);
  font-size: .88rem; color: var(--texto-2); line-height: 1.5;
}
.chips__previa em { font-style: normal; color: var(--texto); }
.chips__previa b { font-weight: 600; color: var(--vermelho); }

/* saída para quem não usa WhatsApp — no desktop o wa.me exige QR code */
.orcamento__alternativa {
  margin: .9rem 0 0; font-size: .9rem; color: var(--texto-2);
  max-width: 26rem; text-align: center;
}
.orcamento__alternativa a {
  font-weight: 600; color: var(--vermelho);
  border-bottom: 1px solid rgba(204, 32, 39, .35);
  overflow-wrap: anywhere;
}
.orcamento__alternativa a:hover { border-color: var(--vermelho); }
/* No celular a fila vira grade de 2 colunas: 12 serviços em ~350px de altura
   em vez de ~700px empilhados um por linha. */
@media (max-width: 700px) {
  .chips__linha { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .chip {
    font-size: .82rem; padding: .35rem .8rem; min-height: 46px;
    justify-content: center; text-align: center; line-height: 1.2;
  }
}
.chip {
  font-family: inherit; font-size: .86rem; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .35rem 1.05rem; border-radius: var(--raio-pill);
  background: var(--branco); color: var(--texto); border: 1px solid var(--linha);
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.chip:hover { border-color: var(--vermelho); color: var(--vermelho); }
.chip[aria-pressed="true"] { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }

/* ==========================================================================
   ONDE ESTAMOS — versão clara.

   Era o terceiro bloco escuro seguido (faixa vinho → orçamento → onde →
   rodapé grafite): a página escurecia no fim e não voltava. Endereço, horário
   e mapa também pedem clareza, não atmosfera. O vinho fica reservado para a
   faixa de diferenciais, que é onde ele pontua.
   ========================================================================== */
.onde {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  color: var(--texto);
  background:
    radial-gradient(110% 80% at 8% 0%, rgba(204, 32, 39, .05) 0%, transparent 55%),
    var(--branco);
  border-top: 1px solid var(--linha);
}
/* malha de esquadria de alumínio, bem discreta */
.onde::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
    repeating-linear-gradient(0deg, rgba(42, 31, 32, .045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(42, 31, 32, .045) 0 1px, transparent 1px 56px);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
}
/* filete dourado separando do bloco anterior */
.onde::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--ouro) 18%, var(--ouro) 82%, transparent);
}

.onde__grade {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.25rem, 5vw, 4.5rem); align-items: center;
}
.onde h2 { color: var(--grafite); margin-bottom: 2rem; }
.onde h2 span { color: var(--vermelho); }

/* ---- lista de dados ---- */
.onde__lista { margin: 0 0 2rem; display: grid; }
.onde__item {
  display: grid; grid-template-columns: 46px 1fr; align-items: center;
  gap: 1.1rem; padding: 1rem .25rem;
  border-top: 1px solid var(--linha);
  transition: padding-left .3s var(--ease);
}
.onde__item:last-child { border-bottom: 1px solid var(--linha); }
.onde__item:hover { padding-left: .75rem; }
.onde__ic {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  color: var(--vermelho);
  background: var(--creme-2);
  border: 1px solid var(--linha);
  transition: background .3s var(--ease), color .3s var(--ease),
    border-color .3s var(--ease), transform .3s var(--ease);
}
.onde__ic svg { width: 21px; height: 21px; }
.onde__item:hover .onde__ic {
  background: var(--vermelho); color: #fff;
  border-color: var(--vermelho); transform: rotate(-6deg);
}
.onde__item dt {
  font-size: var(--micro); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texto-2);
}
.onde__item dd {
  margin: .2rem 0 0; font-size: 1.02rem; font-weight: 500; color: var(--texto);
  overflow-wrap: anywhere;
}
.onde__item dd a { border-bottom: 1px solid rgba(204, 32, 39, .35); }
.onde__item dd a:hover { color: var(--vermelho); border-color: var(--vermelho); }

.onde__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.onde__zap {
  font-weight: 700; font-size: .93rem; color: var(--vermelho);
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 2px solid var(--ouro);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.onde__zap:hover { color: var(--vermelho-vivo); border-color: var(--vermelho-vivo); }

/* ---- moldura do mapa ---- */
.onde__mapa { position: relative; }
.onde__mapa::before {
  content: ""; position: absolute; inset: auto -14px -14px auto;
  width: 62%; height: 55%; border-right: 3px solid var(--vermelho);
  border-bottom: 3px solid var(--vermelho); border-radius: 0 0 var(--raio-g) 0; opacity: .55;
}
.onde__mapa .mapa {
  position: relative; z-index: 2; margin: 0; aspect-ratio: 4 / 3;
  border: 1px solid var(--linha); border-radius: var(--raio-g);
  box-shadow: 0 14px 40px rgba(45, 20, 22, .16);
}

/* cartão flutuante sobre o mapa */
.onde__cartao {
  position: absolute; z-index: 3; left: -14px; bottom: 22px;
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1.1rem .8rem .8rem;
  background: #fff; color: var(--texto); border-radius: var(--raio-g);
  border-left: 4px solid var(--vermelho);
  box-shadow: 0 12px 30px rgba(45, 20, 22, .22);
}
.onde__cartao img { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; }
.onde__cartao span { display: flex; flex-direction: column; line-height: 1.3; }
.onde__cartao strong { font-family: var(--serif); font-size: 1.05rem; color: var(--vermelho); }
.onde__cartao em { font-style: normal; font-size: .82rem; color: var(--texto-2); }

/* ---- nota que sobrou no bloco de orçamento ---- */
.orcamento__nota {
  display: grid; gap: .9rem; justify-items: start;
  background: var(--branco); border: 1px solid var(--linha);
  border-top: 3px solid var(--vermelho); border-radius: var(--raio);
  padding: 1.75rem; box-shadow: var(--sombra);
}
.orcamento__nota-ic {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: var(--creme-2); color: var(--vermelho);
}
.orcamento__nota-ic svg { width: 22px; height: 22px; }
.orcamento__nota p { margin: 0; color: var(--texto-2); }
.orcamento__nota strong { color: var(--texto); }
.orcamento__nota a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; font-size: .9rem; color: var(--vermelho);
  border-bottom: 2px solid var(--ouro);
}

/* ---- mapa (compartilhado) ---- */
.mapa {
  position: relative; margin-top: 1.5rem; aspect-ratio: 4 / 3;
  border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden; background: var(--creme-2);
}
.mapa iframe {
  display: block; width: 100%; height: 100%; border: 0;
  opacity: 0; transition: opacity .5s var(--ease);
}
.mapa iframe.is-pronto { opacity: 1; }
.mapa__espera {
  position: absolute; inset: 0; display: grid; align-content: center;
  justify-items: center; gap: .45rem; padding: 1.25rem; text-align: center;
  background:
    linear-gradient(0deg, rgba(204, 32, 39, .05), rgba(204, 32, 39, .05)),
    repeating-linear-gradient(0deg, var(--linha) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--linha) 0 1px, transparent 1px 34px),
    var(--creme);
}
.mapa__espera svg {
  width: 30px; height: 30px; fill: none; stroke: var(--vermelho);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.mapa__espera strong { font-size: .92rem; color: var(--texto); }
.mapa__espera span { font-size: .8rem; color: var(--texto-2); max-width: 22ch; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--grafite); color: rgba(255, 255, 255, .74); padding: clamp(2.5rem, 6vw, 4rem) 0 0; font-size: .92rem; }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.rodape h4 { color: #fff; font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; }
/* no desktop o <details> é só uma coluna comum: sem seta, sem clique */
.rodape__bloco summary { list-style: none; cursor: default; }
.rodape__bloco summary::-webkit-details-marker { display: none; }
.rodape ul { display: grid; gap: .55rem; }
.rodape a:hover { color: var(--ouro); }
.rodape .marca--rodape { margin-bottom: 1rem; }
.rodape .marca__txt strong { color: #fff; }
.rodape .marca__txt em { color: rgba(255, 255, 255, .55); }
.rodape__redes { display: grid; gap: .15rem; margin: 1.25rem 0 0; justify-items: start; }
.rodape__redes a {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 38px;
  transition: color .25s var(--ease);
}
.rodape__redes svg { width: 17px; height: 17px; flex: none; opacity: .75; }
.rodape__redes a:hover svg { opacity: 1; }
.rodape__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 1.25rem; font-size: .82rem;
  color: rgba(255, 255, 255, .55);
}
.rodape__base p { margin: 0; }

/* selo do desenvolvedor — pílula discreta, acende no hover */
.selo-dev {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: var(--raio-pill);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .03);
  font-size: .82rem; line-height: 1;
  transition: border-color .25s var(--ease), background .25s var(--ease),
    transform .25s var(--ease);
}
.selo-dev span { color: rgba(255, 255, 255, .5); }
.selo-dev strong { color: rgba(255, 255, 255, .92); font-weight: 600; }
.selo-dev svg {
  width: 13px; height: 13px; color: rgba(255, 255, 255, .45);
  transition: color .25s var(--ease);
}
.selo-dev:hover {
  border-color: rgba(242, 197, 63, .5); background: rgba(242, 197, 63, .07);
  transform: translateY(-1px);
}
.selo-dev:hover strong, .selo-dev:hover svg { color: var(--ouro); }

/* ---------- Botão flutuante ---------- */
.flutuante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--vermelho); color: #fff; padding: .8rem 1.2rem;
  border-radius: var(--raio-pill); font-size: .92rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(77, 6, 11, .4);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.flutuante:hover { background: var(--vermelho-vivo); transform: translateY(-2px); }
/* no rodapé o flutuante sairia por cima do selo do desenvolvedor */
.flutuante.is-oculto {
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.flutuante svg { width: 20px; height: 20px; }

/* ---------- Voltar ao topo ---------- */
.ao-topo {
  position: fixed; right: 1.1rem; bottom: 5.2rem; z-index: 89;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--linha); border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--vermelho); cursor: pointer;
  box-shadow: var(--sombra); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.ao-topo.is-vis { opacity: 1; visibility: visible; transform: none; }
.ao-topo:hover { color: var(--vermelho-vivo); border-color: var(--vermelho); }
.ao-topo svg { width: 18px; height: 18px; }

/* ---------- Barra fixa de ação (mobile) ---------- */
.barra-acao { display: none; }

@media (max-width: 860px) {
  .flutuante { display: none; }

  .barra-acao {
    position: fixed; inset: auto 0 0 0; z-index: 95;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--branco); border-top: 1px solid var(--linha);
    box-shadow: 0 -4px 20px rgba(45, 20, 22, .14);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .barra-acao[hidden] { display: none; }
  .barra-acao a {
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 58px; font-size: .97rem; font-weight: 700;
  }
  .barra-acao a + a { border-left: 1px solid var(--linha); }
  .barra-acao svg { width: 20px; height: 20px; fill: currentColor; }
  /* vermelho sobre claro, dourado sobre escuro — a barra é branca */
  .barra-acao .acao--zap { background: var(--vermelho); color: #fff; }
  .barra-acao .acao--fone { color: var(--vermelho); }

  /* A barra mede 58px MAIS a faixa do home indicator do iPhone. Reservar só
     58px deixava a última linha do rodapé escondida atrás dela. */
  body.tem-barra { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .ao-topo { bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 8, 10, .95); padding: 1.5rem;
}
.lightbox figure { max-width: min(1100px, 92vw); }
.lightbox img { max-height: 82vh; max-width: 100%; width: auto; object-fit: contain; margin-inline: auto; border-radius: var(--raio); }
.lightbox figcaption {
  color: rgba(255, 255, 255, .82); text-align: center; margin-top: .9rem;
  display: grid; gap: .3rem; font-size: .88rem;
}
.lightbox figcaption strong { color: #fff; font-size: 1.02rem; font-weight: 600; }
.lightbox figcaption span { color: rgba(255, 255, 255, .7); }
.lightbox__conta {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--micro); letter-spacing: .12em; color: var(--ouro) !important;
}
.lightbox__x, .lightbox__nav {
  position: absolute; background: rgba(255, 255, 255, .1); color: #fff; border: 0;
  cursor: pointer; font-size: 2rem; line-height: 1; width: 48px; height: 48px;
  border-radius: 50%; display: grid; place-items: center; transition: background .2s;
}
.lightbox__x:hover, .lightbox__nav:hover { background: var(--vermelho); }
.lightbox__x { top: 1.25rem; right: 1.25rem; }
.lightbox__nav--ant { left: 1.25rem; }
.lightbox__nav--pro { right: 1.25rem; }

/* ---------- Foto ausente (nunca usamos banco de imagem) ---------- */
.sem-foto {
  background:
    linear-gradient(135deg, rgba(204, 32, 39, .06), rgba(242, 197, 63, .1)),
    var(--creme-2);
  position: relative;
}
.sem-foto::after {
  content: attr(data-pendente);
  position: absolute; inset: auto 0 0 0; padding: .5rem .7rem;
  font-size: var(--micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-2); background: rgba(255, 255, 255, .75);
}
.sem-foto img { visibility: hidden; }
/* o slot do hero é absoluto mesmo sem foto — senão empurra o título pra baixo */
.hero__foto.sem-foto { position: absolute; background: none; }
.hero__foto.sem-foto::after { content: none; }

/* ---------- Revelação ao rolar (leve, sem efeito 3D) ---------- */
.rev { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rev.is-vis { opacity: 1; transform: none; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1024px) {
  .passos { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq__grade { grid-template-columns: 1fr; }
  .faq__grade .cabecalho-secao { position: static; }
  .passos::before { display: none; }
  .faixa-vermelha__grade, .orcamento__grade,
  .onde__grade { grid-template-columns: 1fr; }
  .depo { --depo-vao: 1.15rem; }
  .depo__card { width: min(20rem, 78vw); }
  .hero { min-height: clamp(26rem, 68vh, 34rem); }
  .hero__foto { object-position: 56% 44%; }
  .onde__mapa { margin-top: .5rem; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .hamb { display: block; }
  .nav {
    position: fixed; top: var(--altura-cab, 116px); left: 0; right: 0; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--linha);
    box-shadow: var(--sombra-f); padding: .5rem 1.25rem 1.25rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav.is-aberto { opacity: 1; transform: none; pointer-events: auto; }
  .nav > a:not(.btn) { padding: .9rem 0; border-bottom: 1px solid var(--linha); }
  .nav__cta { margin-top: 1rem; }
}

@media (max-width: 640px) {
  .topo__linha { justify-content: center; text-align: center; font-size: .8rem; gap: .3rem 1rem; }
  /* três itens centralizados viravam três linhas antes do logotipo aparecer.
     O endereço sai: ele se repete inteiro em "Onde estamos" e no rodapé,
     enquanto "aberto agora" e o telefone são acionáveis aqui. */
  .topo__item[data-mostrar="endereco"] { display: none; }

  /* Topo compacto: a foto vira retrato e a vinheta fecha de baixo para cima,
     porque o texto passa a ocupar o pé da imagem.
     A altura acompanha a tela (svh desconta a barra do navegador) e o
     conteúdo ancora no pé — antes um padding fixo de 11rem sobrava num
     iPhone SE e faltava num Pro Max. */
  .hero { min-height: 76vh; min-height: 76svh; }
  /* enquadra a faixa com mais céu refletido */
  .hero__foto { object-position: 64% 38%; }
  .hero__vinheta {
    background:
      /* sobe firme só até onde o texto começa; o terço de cima fica limpo */
      linear-gradient(to top, rgba(16, 2, 4, .95) 0%, rgba(22, 3, 6, .9) 34%,
        rgba(28, 3, 6, .5) 56%, rgba(28, 3, 6, .14) 78%, rgba(28, 3, 6, .06) 100%),
      linear-gradient(to bottom, rgba(16, 2, 4, .5) 0%, transparent 14%);
  }
  .hero__grade { align-content: end; padding: 7.5rem 0 1.75rem; gap: 1.5rem; }

  .hero h1 { font-size: clamp(1.75rem, 7.6vw, 2.4rem); margin-bottom: .8rem; }
  .hero__texto { font-size: .96rem; line-height: 1.55; margin-bottom: 1.5rem; }
  .tag { margin-bottom: 1rem; font-size: .68rem; letter-spacing: .12em; gap: .5rem; }
  .tag::before { width: 20px; }
  .hero__acoes { gap: .8rem 1.2rem; width: 100%; }
  .hero__acoes .btn { width: 100%; }

  /* carimbo em 2 colunas, sem a linha "Atendimento" (a área já aparece
     em destaque dourado no parágrafo logo acima) */
  .carimbo { justify-self: stretch; grid-auto-columns: 1fr; }
  .carimbo > div { padding: .6rem .9rem; }
  .carimbo > div:last-child { display: none; }
  .carimbo dt { letter-spacing: .1em; }
  .carimbo dd { font-size: .88rem; }

  /* Serviços em 2 colunas: corta ~3.000px de rolagem sem esconder nenhum item */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .card__corpo { padding: .85rem .9rem 1rem; gap: .3rem; }
  .card__corpo h3 { font-size: 1rem; line-height: 1.25; }
  /* a frase que explica o serviço fica — cortada em 2 linhas, não apagada */
  .card__corpo p {
    font-size: .82rem; line-height: 1.4; margin: 0 0 .5rem;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .card__acao { min-height: 44px; font-size: var(--micro); letter-spacing: .02em; gap: .35rem; white-space: nowrap; }
  .card__acao::after { width: 14px; }
  /* no celular a coluna é estreita: 3:2 devolve altura ao texto */
  .card__foto { aspect-ratio: 3 / 2; }

  /* Galeria em 2 colunas */
  .obra__legenda { opacity: 1; transform: none; font-size: .8rem; padding: 1.2rem .7rem .6rem; }

  .passos { grid-template-columns: 1fr; text-align: left; }
  .passos li { display: grid; grid-template-columns: 54px 1fr; gap: .3rem 1rem; text-align: left; }
  .passos__n { grid-row: span 2; margin-bottom: 0; }
  .numeros, .numeros--poucos { grid-template-columns: 1fr 1fr; }
  /* links de lista viram alvos de toque de verdade */
  /* WCAG 2.5.8: nenhum alvo de toque abaixo de 44px */
  .rodape ul a,
  .rodape__redes a,
  .onde__item dd a { display: inline-flex; align-items: center; min-height: 44px; }
  .topo__item--link { min-height: 44px; }
  .rodape ul { gap: 0; }
  .rodape__grade { grid-template-columns: 1fr; gap: 2rem; }
  /* à esquerda, longe do botão de voltar ao topo */
  .rodape__base { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .selo-dev { font-size: .78rem; padding: .7rem .95rem; min-height: 44px; }

  /* rodapé em sanfona: os títulos viram botões e as listas ficam guardadas */
  .rodape__bloco summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; cursor: pointer; list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .rodape__bloco summary::-webkit-details-marker { display: none; }
  .rodape__bloco summary h4 { margin: 0; }
  .rodape__bloco summary::after {
    content: ""; width: 10px; height: 10px; flex: none; margin-left: 1rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .3s var(--ease); opacity: .6;
  }
  .rodape__bloco[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
  .rodape__bloco ul { padding-bottom: .6rem; }
  .rodape__grade { gap: 0; }
  .rodape__grade > div:first-child { margin-bottom: 1.5rem; }

  /* o ícone já diz que é WhatsApp; o rótulo curto cabe em uma linha */
  .so-largo { display: none; }

  .faq__item summary { font-size: 1.02rem; gap: 1rem; padding: 1rem 0; }
  .faq__resposta { padding-right: 1.5rem; }
  .faq__cta { width: 100%; }
  .depo { --depo-vao: 1rem; }
  .depo__card { width: 82vw; padding: 1.6rem 1.5rem 1.3rem; }
  .depo__texto { font-size: 1rem; }
  .btn--g { width: 100%; }
  .lightbox__nav { width: 42px; height: 42px; }

  /* Onde estamos no celular */
  .onde h2 { margin-bottom: 1.5rem; }
  .onde__item { grid-template-columns: 40px 1fr; gap: .9rem; padding: .85rem .1rem; }
  .onde__ic { width: 40px; height: 40px; }
  .onde__ic svg { width: 18px; height: 18px; }
  .onde__item dd { font-size: .96rem; }
  .onde__acoes { gap: .75rem; width: 100%; }
  .onde__acoes .btn { width: 100%; }
  .onde__mapa .mapa { aspect-ratio: 4 / 3; }
  .onde__mapa::before { inset: auto -8px -8px auto; }
  .depo__barra { gap: .6rem; }
  .depo__nota, .depo__pausa { flex: 1 1 auto; justify-content: center; }
  .onde__cartao {
    position: static; margin-top: .9rem; left: auto; bottom: auto;
    box-shadow: var(--sombra);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .rev { opacity: 1 !important; transform: none !important; }

  /* a fita para de andar sozinha e vira uma faixa rolável pelo usuário */
  .depo {
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-inline: 1.25rem;
    -webkit-mask-image: none; mask-image: none;
  }
  .depo::-webkit-scrollbar { display: none; }
  .depo__fita { animation: none !important; transform: none !important; }
  .depo__card { scroll-snap-align: center; }
  #depo-clone { display: none; }
  /* nada se move: não há o que pausar */
  .depo__pausa { display: none; }
}

@media print {
  .cab, .topo, .flutuante, .filtros, .hero__foto, .lightbox,
  .barra-acao, .ao-topo, .depo__pausa { display: none !important; }
  body { color: #000; padding-bottom: 0 !important; }
  .depo__fita { animation: none !important; transform: none !important; }
  .cards, .galeria { break-inside: auto; }
}