/* ==========================================================================
   Hidráulica Poços de Caldas — folha única
   Paleta derivada do logotipo real (verde medido: #008C3D).
   Guia: clientes/hidraulica-pocos/identidade/design-guide.md
   Proporção 60/30/10 — 60% neutro claro, 30% escuro, 10% verde institucional.
   ========================================================================== */

:root{
  /* Verde da marca — pixel medido no logotipo. NÃO alterar: é decisão de identidade
     registrada em identidade/design-guide.md. Usar em preenchimento, ícone e borda. */
  --verde:#008C3D;
  /* Mesma família, um passo mais escuro, só para TEXTO. O verde da marca dá 4,36:1
     sobre branco e 4,08:1 sobre #F5F8F6 — abaixo do mínimo de 4,5:1 da WCAG AA.
     Este dá 4,93:1 e 4,61:1. Diferença imperceptível a olho, mas legível para quem
     precisa. Vale também para o texto branco sobre botão verde. */
  --verde-texto:#00823D;
  --verde-fundo:#05351E;
  --verde-medio:#0A5C33;
  --verde-lavagem:#E6F2EA;
  --branco:#FFFFFF;
  --neutro:#F5F8F6;
  --grafite:#16211C;
  --cinza:#5A6B62;
  --aco:#E2E7E4;
  --wrap:1140px;
  --r:10px;
  --sombra-menu:0 18px 40px rgba(5,53,30,.18);
  --topbar-h:36px;
  /* Altura própria do cartão da navbar (padding + cartão + padding) — some das
     contas de `body{padding-top}` logo abaixo. Existe como variável porque muda
     de valor no mobile (cartão mais baixo), num breakpoint diferente do da
     topbar (860px, não 640px). */
  --navbar-h:120px;
}
@media (max-width:860px){:root{--navbar-h:104px;}}
@media (max-width:640px){:root{--topbar-h:32px;}}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;background:var(--branco);color:var(--grafite);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Topbar e navbar são as duas `position:fixed` (não `sticky`): com
     `overflow-x:hidden` aqui no body (precisa ficar, evita barra de rolagem
     horizontal de seção full-bleed), o body vira um scroll container próprio
     por baixo do capô, e `position:sticky` parava de grudar corretamente —
     é a causa real do espaço grande que sobrava entre a topbar e o cartão da
     navbar. `fixed` não depende de scroll container nenhum, sempre relativo à
     janela, e resolve de vez. */
  padding-top:calc(var(--topbar-h) + var(--navbar-h));
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* Foco de teclado próprio. O contorno padrão do navegador some sobre os fundos
   verdes e é fino demais sobre foto. Este usa duas camadas (halo branco por fora
   do traço verde) pra ficar visível tanto no claro quanto no escuro. `:focus-visible`
   só aparece pra quem navega por teclado — o clique de mouse não acende nada. */
:where(a,button,summary,[tabindex],input,select,textarea):focus-visible{
  outline:3px solid var(--verde-texto);
  outline-offset:2px;
  border-radius:4px;
  box-shadow:0 0 0 5px rgba(255,255,255,.85);
}
.sec--escuro :where(a,button,summary,[tabindex]):focus-visible,
.hero :where(a,button,summary,[tabindex]):focus-visible,
.banner-slide :where(a,button,summary,[tabindex]):focus-visible,
.rodape :where(a,button,summary,[tabindex]):focus-visible{
  outline-color:#7FCF9F;
  box-shadow:0 0 0 5px rgba(5,53,30,.85);
}

/* Pular para o conteúdo. Antes dele, quem navega por teclado atravessava a
   topbar em esteira (6 links) mais a navbar inteira em TODA página antes de
   chegar no primeiro conteúdo. Fica fora da tela até receber foco; ao receber,
   aparece ancorado abaixo das duas barras fixas (por isso `fixed` e não
   `absolute`: o body tem `overflow-x:hidden` e vira scroll container próprio,
   o mesmo motivo que fez a topbar deixar de ser `sticky`). */
.pular-conteudo{position:fixed;left:-9999px;top:0;z-index:120;
  background:var(--branco);color:var(--verde-texto);font-weight:700;font-size:15px;
  padding:12px 18px;border-radius:0 0 8px 0;text-decoration:none;
  box-shadow:0 6px 18px rgba(5,53,30,.28);}
.pular-conteudo:focus{left:0;top:calc(var(--topbar-h) + var(--navbar-h));}
/* O alvo do pulo (e qualquer âncora interna) precisa de folga do tamanho das
   barras fixas, senão o navegador rola até o topo do elemento e as barras
   cobrem justamente o começo do que a pessoa foi ver. */
#conteudo,[id]{scroll-margin-top:calc(var(--topbar-h) + var(--navbar-h) + 12px);}
main:focus{outline:none;}

h1,h2,h3,h4{font-family:'Archivo',Impact,sans-serif;font-weight:800;line-height:1.1;
  letter-spacing:-.02em;margin:0;}
h1{font-size:clamp(31px,5.2vw,54px);}
h2{font-size:clamp(25px,3.6vw,38px);}
h3{font-size:19px;letter-spacing:-.01em;}
p{margin:0;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;}
.sec{padding:74px 0;}
.sec--neutro{background:var(--neutro);}
/* Degradê em camadas em vez de verde chapado — o corte duro pro branco vizinho
   era o problema apontado. Duas manchas radiais suaves + um degradê linear de base
   dão profundidade sem esfriar o bloco. */
.sec--escuro{
  background:
    radial-gradient(820px 420px at 88% -10%, rgba(0,140,61,.30), transparent 62%),
    radial-gradient(600px 380px at 6% 110%, rgba(10,92,51,.35), transparent 60%),
    linear-gradient(165deg,#06412A 0%,var(--verde-fundo) 55%,#042A18 100%);
  color:var(--branco);position:relative;}
.sec--escuro .rotulo{color:#7FCF9F;}
.sec--escuro .apoio,.sec--escuro .lead{color:#B9D3C4;}

/* Variante com foto real da loja atrás do degradê — mesma composição do
   banner-slide--foto (foto + degradê verde em camadas por cima pra manter o
   texto legível), usada no bloco de abertura de produtos.html. */
.sec--escuro--foto{background-image:var(--foto-hero);background-size:cover;
  background-position:center;}
.sec--escuro--foto::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(820px 420px at 88% -10%, rgba(0,140,61,.30), transparent 62%),
    linear-gradient(100deg,#042A18 0%,rgba(6,65,42,.88) 38%,rgba(6,65,42,.35) 68%,transparent 92%),
    linear-gradient(0deg,#042A18 0%,transparent 45%);}
.sec--escuro--foto .wrap{position:relative;z-index:1;}

/* Faixas de foto entre blocos — respiro visual usando as fotos reais de
   produto/loja em vez de espaço vazio ou repetir a foto de capa da categoria
   (essas ficam reservadas pra capa, pedido do Léo em 05/08). */
.divisor-foto{aspect-ratio:21/6;overflow:hidden;}
.divisor-foto img{width:100%;height:100%;object-fit:cover;display:block;object-position:center;}
@media (max-width:860px){.divisor-foto{aspect-ratio:16/10;}}
/* Variante mais alta — pedido do Léo pra mostrar as torneiras mais inteiras em
   vez do corte apertado do padrão 21/6. */
.divisor-foto--alto{aspect-ratio:16/7;}
@media (max-width:860px){.divisor-foto--alto{aspect-ratio:4/3;}}
/* A peça (tê roscável) fica um pouco abaixo do centro da foto original — sem
   isso o recorte 21/6 cortava a base da peça. */
.divisor-foto--pos-baixo img{object-position:center 72%;}

.rotulo{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--verde-texto);margin-bottom:14px;}
.rotulo::before{content:"";width:26px;height:2px;background:currentColor;}
.lead{font-size:19px;color:var(--cinza);max-width:64ch;margin-top:16px;}
.apoio{color:var(--cinza);}
.tabular{font-variant-numeric:tabular-nums;}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 22px;border-radius:8px;font-weight:600;font-size:16px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;}
.btn--zap{background:var(--verde-texto);color:#fff;}
.btn--zap:hover{background:var(--verde-medio);}
/* Contorno de 1 px em #E2E7E4 sobre fundo #F5F8F6 praticamente some: o botão lia
   como legenda. Agora tem fundo branco sólido, borda de 1,5 px na família do verde
   e o rótulo no verde de texto — continua secundário em relação ao botão cheio,
   mas se reconhece como clicável. */
.btn--linha{background:#fff;color:var(--verde-texto);font-weight:700;
  border:1.5px solid rgba(0,140,61,.42);box-shadow:0 1px 2px rgba(5,53,30,.06);}
.btn--linha:hover{border-color:var(--verde);background:var(--verde-lavagem);}
/* O hero também é fundo escuro, mas não usa .sec--escuro. Sem esta linha o botão
   de contorno sai grafite sobre verde escuro e fica ilegível.
   `background:transparent` é obrigatório aqui: o botão claro agora tem fundo
   branco, e sem esta linha sairia branco sobre branco no fundo escuro. */
.sec--escuro .btn--linha,.hero .btn--linha,.faixa .btn--linha,
.faixa-cartao .btn--linha,.banner-slide .btn--linha{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.45);
  box-shadow:none;}
.sec--escuro .btn--linha:hover,.hero .btn--linha:hover,.faixa .btn--linha:hover,
.faixa-cartao .btn--linha:hover,.banner-slide .btn--linha:hover{
  border-color:#fff;color:#fff;background:rgba(255,255,255,.12);}
.btn svg{width:18px;height:18px;flex:none;}

/* ---------- Cabeçalho ---------- */
/* Topbar em esteira infinita — mesmo padrão da Poços Acabamentos e Piscinas
   (protótipo Lovable): um `@keyframes` puro andando sobre uma trilha com o
   conteúdo duplicado uma vez (o JS clona o conjunto em hidraulica.js), então
   ao chegar em -50% a trilha volta pro início sem soluço. Sem seta, sem
   pausa no hover/toque — pedido explícito, é persistente e nunca para.
   `position:fixed` pra ficar visível em qualquer altura de rolagem; o body
   ganha `padding-top:var(--topbar-h)` (regra lá em cima) pra abrir o espaço,
   e o header sticky (.topo) gruda logo abaixo dela, nunca por baixo. */
.barra{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--topbar-h);
  background:var(--verde-fundo);color:#fff;font-size:13.5px;overflow:hidden;}
.barra__trilho{display:flex;height:100%;width:max-content;
  animation:esteira-barra 32s linear infinite;}
.barra__set{display:flex;align-items:center;white-space:nowrap;flex:none;}
@keyframes esteira-barra{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.barra__item{display:inline-flex;align-items:center;gap:7px;padding:0 20px;
  font-weight:600;color:#fff;text-decoration:none;}
.barra__item svg{width:15px;height:15px;flex:none;color:#7FCF9F;}
a.barra__item{transition:opacity .16s ease;}
a.barra__item:hover{opacity:.8;}
.barra__item .estrela{color:#FFC94D;letter-spacing:1px;}
.barra__sep{color:rgba(255,255,255,.22);flex:none;font-size:12px;}
@media (prefers-reduced-motion:reduce){
  .barra__trilho{animation:none;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}
@media (max-width:640px){
  .barra__trilho{animation-duration:22s;}
  .barra__item{font-size:12.5px;padding:0 14px;gap:6px;}
  .barra__item svg{width:13px;height:13px;}
}

/* Navbar flutuante — referência visual da Poços Acabamentos e Piscinas (cartão
   arredondado com sombra, em vez da barra reta colada na borda), mas SEM o
   formato de pílula/cápsula que o site da Poços usa: aqui o raio é discreto
   (14px), o cartão respira sobre o fundo branco da página, e a estrutura de
   páginas/menu continua sendo a da Hidráulica — só a moldura mudou. O logo
   (`.marca img`, 68px) e a altura do cabeçalho não mudam: é o mesmo texto e
   tamanho de sempre, só com cartão e sombra por baixo.
   Espaçamento: pouco ar entre a topbar e o cartão (8px), mais ar embaixo do
   cartão (24px) antes do banner — o inverso da 1ª versão, que tinha os dois
   iguais (14px/14px) e por isso lia como "muito longe da topbar" (o espaço de
   cima incomodava) e "cobrindo o banner" (a sombra do cartão, com blur de
   34px, vazava pros 14px de baixo e pintava o topo do banner). */
.topo{position:fixed;top:var(--topbar-h);left:0;right:0;z-index:50;background:transparent;
  padding:8px 0 24px;}
/* Logo | menu (centralizado) | CTA do WhatsApp — mesma composição de 3 blocos
   da referência da Poços, só sem o formato de pílula. Grid em vez de flex
   porque o menu precisa ficar centralizado na largura toda do cartão, não
   "empurrado" pro meio do espaço que sobra do lado do logo. */
.topo .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  min-height:88px;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-radius:14px;box-shadow:0 10px 24px -14px rgba(5,53,30,.28);
  border:1px solid var(--aco);padding:0 26px;}
.marca img{height:68px;width:auto;}
.nav{display:flex;align-items:center;justify-content:center;gap:30px;grid-column:2;}
.nav a{text-decoration:none;font-weight:500;font-size:16px;color:var(--grafite);
  padding:6px 0;border-bottom:2px solid transparent;}
.nav a:hover{color:var(--verde-texto);}
.nav a[aria-current="page"]{border-bottom-color:var(--verde);color:var(--verde-texto);font-weight:600;}
.topo-cta{grid-column:3;}
.topo-cta .btn{padding:12px 20px;font-size:15px;white-space:nowrap;}
.hamb{display:none;background:none;border:1px solid var(--aco);border-radius:8px;
  width:46px;height:44px;cursor:pointer;align-items:center;justify-content:center;}
.hamb span{display:block;width:20px;height:2px;background:var(--grafite);position:relative;}
.hamb span::before,.hamb span::after{content:"";position:absolute;left:0;width:20px;
  height:2px;background:var(--grafite);}
.hamb span::before{top:-6px;} .hamb span::after{top:6px;}

/* ---------- Hero ---------- */
/* Sem foto full-bleed — as únicas fotos reais que existem da loja são pequenas
   (486×473 e 401×615 px) e esticadas em tela cheia perdem definição. Aqui o
   degradê em camadas dá profundidade, e a foto real entra pequena, emoldurada,
   no tamanho dela — não como fundo. */
.hero{
  background:
    radial-gradient(900px 480px at 88% 6%,rgba(0,140,61,.34),transparent 62%),
    radial-gradient(560px 360px at -4% 96%,rgba(10,92,51,.4),transparent 58%),
    linear-gradient(160deg,#06412A 0%,var(--verde-fundo) 52%,#042A18 100%);
  color:#fff;position:relative;overflow:hidden;}
.hero .wrap{position:relative;z-index:2;padding-top:82px;padding-bottom:82px;
  display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center;}
.hero__miolo{grid-column:1;}
.hero h1{max-width:19ch;}
.hero h1 em{font-style:normal;color:#5FC589;}
.hero__sub{margin-top:22px;font-size:19px;color:#B9D3C4;max-width:58ch;}
.hero__acoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}
.hero__selos{display:flex;gap:28px;flex-wrap:wrap;margin-top:48px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14);}
.hero__selo{display:flex;align-items:flex-start;gap:10px;}
.hero__selo svg{width:22px;height:22px;flex:none;margin-top:2px;color:#5FC589;}
.hero__selo b{display:block;font-family:'Archivo',sans-serif;font-size:22px;color:#fff;}
.hero__selo span{font-size:13.5px;color:#B9D3C4;}
.hero__foto{grid-column:2;width:220px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 44px rgba(0,0,0,.35);
  transform:rotate(1.5deg);}
.hero__foto img{width:100%;display:block;}
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero__foto{grid-column:1;grid-row:1;width:160px;justify-self:end;margin-bottom:-20px;}
}

/* ---------- Carrossel de ofertas ---------- */
/* A loja troca promoção com frequência — em vez de uma seção sólida full-width
   (o "bloco verde chapado" apontado como problema), a oferta agora é um cartão
   arredondado com gradiente, flutuando sobre fundo claro. Suporta mais de um
   cartão porque o carrossel desliza entre eles. */
.oferta-gradiente{background:linear-gradient(120deg,var(--verde) 0%,var(--verde-medio) 100%);
  color:#fff;border-radius:18px;padding:38px 34px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  min-height:200px;}
.oferta-gradiente::after{content:"";position:absolute;right:-40px;bottom:-60px;width:220px;
  height:220px;border-radius:50%;background:rgba(255,255,255,.08);}
.oferta-gradiente__texto{position:relative;z-index:1;max-width:520px;}
.oferta-gradiente__tag{display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.16);border-radius:999px;padding:6px 14px;font-size:12.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.07em;}
.oferta-gradiente__tag svg{width:14px;height:14px;}
.oferta-gradiente h2{color:#fff;margin-top:14px;font-size:clamp(21px,3vw,28px);}
.oferta-gradiente p{color:rgba(255,255,255,.92);margin-top:10px;font-size:16px;}
.oferta-gradiente__acao{position:relative;z-index:1;flex:none;}
.oferta-gradiente .btn--zap{background:#fff;color:var(--verde-fundo);}
.oferta-gradiente .btn--zap:hover{background:var(--verde-fundo);color:#fff;}

/* Etiqueta de slot — mesmo princípio do protótipo da Poços Piscinas: marca o que
   entra ali de verdade. Some quando o texto for trocado pelo definitivo. */
.slot-etiqueta{position:absolute;left:16px;top:16px;z-index:2;
  background:rgba(5,53,30,.82);color:#DDEFE3;
  border:1px dashed rgba(221,239,227,.55);border-radius:6px;
  padding:5px 9px;max-width:78%;font-size:10.5px;line-height:1.35;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;}

.carrossel__trilho{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:2px;}
.carrossel__trilho::-webkit-scrollbar{display:none;}
/* A máscara de desbotar as pontas dos trilhos de marcas e depoimentos mora
   agora junto da regra de cada esteira (mais abaixo), no wrapper .carrossel —
   viraram esteira infinita, não têm mais "fim" pra máscara acompanhar. */
@media (prefers-reduced-motion:reduce){.carrossel__trilho{scroll-behavior:auto;}}
.oferta-slide{flex:0 0 100%;scroll-snap-align:start;min-width:0;}
.oferta-slide .oferta-gradiente{padding-top:64px;}
/* Sem etiqueta de slot (slides já com conteúdo real, como as linhas de
   produto), não precisa da folga extra no topo. */
.oferta-slide .oferta-gradiente:not(:has(.slot-etiqueta)){padding-top:38px;}
.carrossel__nav{display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:22px;}
.carrossel__seta{width:42px;height:42px;border-radius:50%;
  border:1.5px solid rgba(0,140,61,.4);
  background:var(--branco);display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex:none;color:var(--verde-texto);
  box-shadow:0 2px 6px rgba(5,53,30,.08);
  transition:border-color .16s ease,color .16s ease,background .16s ease;}
.carrossel__seta:hover{border-color:var(--verde);background:var(--verde-lavagem);}
.carrossel__seta svg{width:18px;height:18px;stroke-width:2.4;}
/* Seta desabilitada nas pontas do carrossel de linhas (sem loop, sem pontos):
   apagada e sem cursor de clique, pra ficar claro que ali é o fim da lista —
   não escondida, pra não mexer no centro do `.carrossel__nav` a cada clique. */
.carrossel__seta:disabled{opacity:.35;cursor:default;box-shadow:none;}
.carrossel__seta:disabled:hover{border-color:rgba(0,140,61,.4);background:var(--branco);}
.carrossel__pontos{display:flex;gap:9px;align-items:center;}
/* Os pontos inativos eram #E2E7E4 sobre fundo quase branco: quem nao estava
   no ponto ativo nao via que havia mais slides, nem que dava pra clicar. */
/* #A9BDB1 dava só 1,98:1 sobre o branco — abaixo dos 3:1 que a WCAG 1.4.11
   pede pra COMPONENTE de interface (o ponto é botão, não texto decorativo).
   #7A8E83 dá 3,49:1 sobre branco, 3,26:1 sobre --neutro e 3,03:1 sobre
   --verde-lavagem: passa nos três fundos onde o carrossel aparece, e continua
   claramente mais apagado que o ponto ativo (verde da marca, cheio e 1,4×). */
.carrossel__ponto{width:9px;height:9px;border-radius:50%;background:#7A8E83;
  border:0;padding:0;cursor:pointer;transition:background .16s ease,transform .16s ease;}
.carrossel__ponto[aria-current="true"]{background:var(--verde);transform:scale(1.4);}

/* ---------- Carrossel de vídeos (Reels do Instagram) ---------------------
   Um vídeo por vez, tela cheia do trilho — texto à esquerda (título,
   descrição e um aprofundamento curto), vídeo à direita, convertido de
   vertical (9:16, formato Reels original) pra horizontal com fundo
   desfocado, senão não encaixa no layout 2 colunas. Primeira reprodução é
   automática (silenciosa — autoplay só funciona mudo) quando o vídeo entra
   em foco no carrossel; pra ver de novo, é só clicar em play. Setas e
   pontos funcionam porque agora cada vídeo ocupa 100% do trilho (antes os
   5 apareciam juntos, então "avançar" não tinha efeito visual). */
.video-trilho{gap:0;padding:6px 2px 14px;}
.video-slide{flex:0 0 100%;scroll-snap-align:start;display:grid;
  grid-template-columns:minmax(240px,1fr) 1.4fr;gap:44px;align-items:center;padding:8px 6px;}
.video-slide__texto{max-width:44ch;padding:26px 24px;background:var(--neutro);
  border-radius:14px;border:1px solid var(--aco);}
.video-slide__texto h3{font-size:clamp(19px,2.4vw,25px);margin-top:10px;}
.video-slide__texto p{margin-top:12px;color:var(--cinza);font-size:15px;line-height:1.55;}
.video-slide__tag{display:inline-block;background:var(--verde-lavagem);color:var(--verde-fundo);
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border-radius:999px;padding:5px 12px;}
.video-slide__video{position:relative;border-radius:14px;overflow:hidden;
  background:#000;aspect-ratio:16/9;box-shadow:0 18px 40px rgba(5,53,30,.18);}
.video-slide__video video{width:100%;height:100%;display:block;object-fit:contain;background:#000;}
.video-slide__play{position:absolute;inset:0;width:100%;height:100%;display:flex;
  align-items:center;justify-content:center;background:rgba(5,53,30,.28);border:none;
  cursor:pointer;opacity:0;pointer-events:none;transition:opacity .18s ease;}
.video-slide__play svg{width:64px;height:64px;fill:#fff;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));}
.video-slide__video.esta-pausado .video-slide__play{opacity:1;pointer-events:auto;}
@media (max-width:860px){
  .video-slide{grid-template-columns:1fr;gap:18px;}
  .video-slide__video{order:-1;}
  /* Os arquivos são 1280×720 com o Reels vertical original (405×720) nítido no
     centro e fundo desfocado dos dois lados. No desktop isso preenche bem; no
     celular sobrava ~60% de borrão e o vídeo de verdade virava uma tira fina.
     Num quadro 9/16 com `cover`, a janela visível dá justamente os 405 px do
     centro: a tarja some e aparece só o vídeo original, sem gerar arquivo novo. */
  .video-slide__video{aspect-ratio:9/16;max-height:74vh;margin:0 auto;width:100%;}
  .video-slide__video video{object-fit:cover;}
}

/* ---------- Banner-hero e banner secundário (estrutura tipo Potenza) ----
   Carrossel de imagem cheia no topo, no lugar do hero de texto + cards de
   gradiente. Enquanto não chegam as fotos/artes reais, cada slide mostra um
   fundo em degradê (paleta da marca) com um ícone de "imagem pendente" ao
   fundo e o texto/CTA por cima — a etiqueta de slot diz exatamente o
   arquivo esperado e o padrão de composição (A/B/C, ver análise em
   saidas/2026-08-02-analise-estrutura-hidraulica-potenza.md). Reaproveita
   .carrossel/.carrossel__trilho/.carrossel__nav já existentes. -------------- */
/* O slot segue a proporção da ARTE, e não o contrário: peça com texto embutido
   não pode ser cortada, e "encaixar sem cortar" numa proporção diferente deixa
   faixa verde sobrando. Por isso a proporção é uma variável — hoje as artes são
   1088×608 (1,79). Quando chegar a leva definitiva em 1920×720, é só trocar
   --slot-proporcao pra 16/6 aqui e o carrossel inteiro se ajusta sozinho.
   E o hero deixa de ser full-bleed: em tela larga, 1,79 na largura toda daria
   um banner de 800 px de altura, que come a página inteira. */
/* O carrossel era full-bleed sobre verde-escuro: qualquer sobra de proporção virava
   faixa verde em volta da arte, e a peça lia como "encaixada à força". Agora é um
   CARTÃO ARREDONDADO sobre fundo claro — o que sobra passa a ser respiro da página,
   não borda de preenchimento. Largura reduzida de 1180 pra 1080, pedido do Léo. */
.banner-hero{background:var(--neutro);--slot-proporcao:1088/608;padding:20px 0 2px;}
.banner-hero .carrossel{max-width:1080px;margin:0 auto;padding:0 20px;}
/* O arredondamento vai no SLIDE, não no trilho: o trilho precisa de overflow-x:auto
   pra rolar, e `overflow:hidden` ali mataria o arrasto. */
.banner-hero .carrossel__trilho{gap:0;}
.banner-hero .banner-slide{border-radius:20px;}
/* Arte pronta não precisa do degradê verde por baixo: sem ele, a sobra de proporção
   (só o banner 5, que é 2,14 em vez de 1,79) some no fundo claro da seção em vez de
   virar uma faixa verde. */
.banner-hero .banner-slide--imagem-completa{background:none;}
.banner-hero .carrossel__nav{margin:14px 0 0;}
/* Faixa de oferta: virou banner estático só da cuba gourmet + CTA fixo em 17/08 —
   era carrossel de 4 slides (oferta, caixa d'água, torneiras), simplificado porque
   só a oferta da cuba tinha arte de verdade, o resto era texto genérico repetindo
   o que já existe em outros blocos da home. 16:5 no desktop, mesma arte de
   1920×600 px; 4:3 no celular via <picture><source>, mesmo padrão do banner-hero. */
.banner-secundario{background:var(--neutro);padding:30px 0 44px;}
.banner-oferta-wrap{max-width:1080px;margin:0 auto;padding:0 20px;text-align:center;}
.banner-oferta{display:block;aspect-ratio:16/5;border-radius:20px;overflow:hidden;}
.banner-oferta img{width:100%;height:100%;object-fit:cover;display:block;}
.banner-oferta__cta{margin-top:22px;}
@media (max-width:860px){.banner-oferta{aspect-ratio:4/3;}}

.banner-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;min-width:0;
  aspect-ratio:var(--slot-proporcao,16/6);overflow:hidden;display:flex;align-items:flex-end;
  background:
    radial-gradient(700px 380px at 85% 0%,rgba(0,140,61,.35),transparent 60%),
    linear-gradient(120deg,var(--verde-fundo) 0%,var(--verde-medio) 100%);}
/* Cartão de oferta. Enquanto não há arte de oferta, ele vive só do degradê e do
   texto — por isso não usa mais o ícone de "imagem pendente", que aparecia como
   um símbolo de imagem quebrada no meio de um bloco verde de 630 px. Sem imagem,
   o bloco não precisa ser alto: 16/5 dá um cartão-faixa que parece proposital.
   Quando entrar a arte, é só voltar pra 16/7 e pôr a imagem de fundo. */
.banner-slide--secundario{border-radius:16px;align-items:center;}
.banner-slide--secundario .banner-slide__conteudo{padding:26px 32px;}
/* Slide com foto real: a foto entra via background-image inline (style, no HTML),
   o degradê de contraste vem de um ::before por cima — evita depender de custom
   property dentro de background-image em camadas, que não empilhou de forma
   confiável. Duas camadas (embaixo e à esquerda, onde o texto fica ancorado por
   causa do align-items:flex-end) garantem contraste em qualquer tamanho de tela. */
/* 07/08 (3ª versão): a foto agora é uma peça pronta com o título já embutido
   (texto/cores da referência do Léo, pintado direto na imagem com Python/PIL,
   fonte Archivo Black — mesma família do site). 1672×941 (1,776) é quase
   idêntico ao slot do desktop (1088/608 = 1,789), então o `cover` mal precisa
   cortar — `center center` já mostra a peça quase inteira. Sem degradê: o
   painel verde-escuro já vem pintado na própria arte, não precisa de camada
   extra pra dar contraste. */
.banner-slide--foto{background-image:url('../img/banners/banner-01-fachada-loja-texto.jpg');
  background-size:cover;background-position:center center;}
/* sr-only: título real continua no DOM (h1, bom pra SEO e leitor de tela),
   mas invisível — quem enxerga já lê o mesmo texto pintado na foto. Padrão
   clássico de "visually hidden", não usado em nenhum outro lugar do site
   ainda por isso mora aqui perto de quem criou a necessidade. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Slide com peça gráfica pronta (texto e CTA já embutidos na imagem, feita fora
   do site): não empilha o degradê nem o bloco __conteudo por cima, só encaixa a
   imagem inteira sem cortar nada — o container é mais largo/baixo (16/6, e 4/5 no
   celular) do que a peça (16/9), então "contain" com o fundo verde do carrossel
   ao redor evita cortar título ou o rodapé de ícones em qualquer tamanho de tela. */
.banner-slide--imagem-completa{display:flex;align-items:center;justify-content:center;}
.banner-slide--imagem-completa > a{display:flex;width:100%;height:100%;}
.banner-slide--imagem-completa > a img{width:100%;height:100%;object-fit:contain;}
.banner-slide--imagem-completa > a picture{display:contents;}
/* Modificador pra peça que não preenche a largura toda do container (16/6) —
   em vez de deixar a sobra virar um bloco vazio de um lado só (o que ficou
   estranho quando tentamos "esticar" o fundo da peça pra cobrir), a imagem
   fica encostada num lado e o espaço que sobra do outro vira um bloco de
   texto de verdade, com um degradê suave na costura pra não cortar seco.
   Só a peça 2 (tubos e conexões) usa isso por ora — as próximas peças que o
   Léo mandar podem usar `--imagem-completa` sozinho se já vierem na largura
   certa. */
.banner-slide--imagem-direita{justify-content:space-between;}
.banner-slide--imagem-direita::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--verde-fundo) 0%,rgba(5,53,30,.5) 30%,transparent 46%);
  pointer-events:none;}
.banner-slide__texto-lateral{position:relative;z-index:2;flex:0 1 34%;min-width:190px;
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:22px 18px 22px 26px;color:#fff;}
.banner-slide__texto-lateral .rotulo{color:#7FCF9F;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;}
.banner-slide__texto-lateral h3{font-size:clamp(17px,2vw,21px);line-height:1.28;}
.banner-slide__texto-lateral p{font-size:13px;color:rgba(255,255,255,.82);line-height:1.4;}
.banner-slide__texto-lateral .btn{margin-top:6px;align-self:flex-start;}
@media (max-width:860px){
  .banner-slide--imagem-direita{justify-content:center;}
  .banner-slide--imagem-direita::before{display:none;}
  .banner-slide__texto-lateral{display:none;}
}
.banner-slide__pendente{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;opacity:.14;pointer-events:none;}
.banner-slide__pendente svg{width:30%;height:30%;max-width:180px;max-height:180px;}
.banner-slide__conteudo{position:relative;z-index:2;padding:28px 36px;color:#fff;
  max-width:620px;}
/* O slide 1 usa h1 (é o título da página); os demais, h2. Mesmo tamanho nos dois. */
.banner-slide__conteudo h1,
.banner-slide__conteudo h2{color:#fff;font-size:clamp(20px,2.8vw,30px);}
.banner-slide__conteudo p{color:rgba(255,255,255,.88);margin-top:9px;font-size:15px;
  max-width:52ch;}
.banner-slide__conteudo .btn{margin-top:16px;}
@media (max-width:860px){
  /* 07/08: o slot era 1/1, mas a foto nova da fachada é 1275×941 (1,355) — bem
     mais larga que um quadrado. Cobrir um quadrado com essa foto cortava ~18%
     de cada lado (o boia rosa sumia inteiro à esquerda). `4/3` (1,333) é quase
     a proporção exata da foto — o corte lateral cai pra quase zero — e de
     quebra ajuda os outros 4 banners (16/9, ajustados por `contain`): a caixa
     mais larga significa menos tarja verde vazia em cima/embaixo deles também.
     Quando chegar a arte de celular própria (4:5), reavaliar este valor. */
  .banner-hero{--slot-proporcao:4/3;}
  .banner-slide--secundario{aspect-ratio:auto;min-height:0;}
  .banner-slide__conteudo{padding:22px 20px 26px;max-width:none;}
  /* 07/08 (4ª versão): o Léo mandou uma arte SÓ pro celular, já em 4:3 —
     mesma proporção do slot (`--slot-proporcao:4/3` duas linhas acima) — não
     tem excesso nenhum pra `cover` cortar, em nenhum eixo. Resolve de vez o
     que as rodadas anteriores tentavam contornar só com `background-position`
     (foto desktop, 1,776, forçada num slot 1,333, sempre cortava alguma
     coisa). `center center` porque não há mais corte que precise de lado
     preferencial. */
  .banner-slide--foto{background-image:url('../img/banners/banner-01-fachada-loja-texto-mobile.jpg');
    background-size:cover;background-position:center center;}

  /* Os banners prontos (peça 16/9 com texto e telefone embutidos na arte)
     eram ajustados pela ALTURA. Num slide 4/5 de 390 px isso deixava a imagem
     com 872 px de largura, e o `overflow:hidden` cortava as pontas: sobrava só
     o miolo, uns 45%. "COMBATE A INCÊNDIO" virava "ATE A / NDIO" e o telefone
     e o e-mail ficavam cortados. No celular o ajuste passa a ser pela LARGURA:
     a peça aparece inteira e legível, centralizada na vertical.
     Definitivo mesmo é uma arte própria de celular em 4:5 — 16:9 num telefone
     de 390 px deixa o telefone da loja pequeno demais pra ler. */
}

/* ---------- Grade de categorias (14, taxonomia do catálogo) ---------- */
/* São 14 categorias. Em 6 colunas fecha 6+6+2 e a última fileira fica órfã;
   em 7 fecha 7+7, certinho. Abaixo de ~1180 px o auto-fit assume de novo. */
.grade-categorias{display:grid;gap:16px;margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
@media (min-width:1000px){
  .grade-categorias{grid-template-columns:repeat(7,1fr);gap:14px;}
}
.categoria-card{background:var(--branco);border:1px solid var(--aco);border-radius:var(--r);
  padding:18px 14px 20px;text-align:center;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  transition:border-color .16s ease,transform .16s ease;}
.categoria-card:hover{border-color:var(--verde);transform:translateY(-2px);}
.categoria-card__foto{width:100%;aspect-ratio:1/1;background:var(--neutro);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;}
.categoria-card__foto img{width:76%;height:76%;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(5,53,30,.08));}
.categoria-card__foto--pendente{background:var(--neutro);}
.categoria-card__pendente{display:flex;flex-direction:column;align-items:center;
  gap:6px;color:#9AAAA1;font-size:10.5px;text-align:center;padding:10px;line-height:1.3;
  text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.categoria-card__pendente svg{width:24px;height:24px;stroke:#B6C4BC;}
.categoria-card h3{font-size:14px;}

/* ---------- Carrossel de marcas parceiras ---------- */
/* Esteira infinita, mesmo padrão da Poços Acabamentos e Piscinas: `width:max-
   content` + `@keyframes` andando até -50%, com o conjunto duplicado pelo JS
   (hidraulica.js clona o trilho uma vez). Continua em grade — são quase 50
   marcas, uma fileira só ficaria comprida demais — mas 2 fileiras por coluna
   em vez de 3 (pedido do Léo: a versão de 3 deixava a esteira alta e apertada).
   display:grid sobrescreve o display:flex da regra genérica .carrossel__trilho
   porque essa classe vem depois no arquivo; overflow/scroll-snap saem porque
   quem move o trilho agora é a animação, não o dedo do visitante. */
.carrossel:has(.carrossel__trilho--marcas){overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.carrossel__trilho--marcas{display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(2,1fr);grid-auto-columns:150px;
  gap:18px 24px;padding:6px 2px 14px;overflow:visible;
  width:max-content;animation:esteira-marcas 50s linear infinite;}
@keyframes esteira-marcas{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marca-card{width:150px;height:88px;
  border:1px solid var(--aco);border-radius:var(--r);background:var(--branco);
  display:flex;align-items:center;justify-content:center;padding:14px 18px;}
.marca-card img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);
  opacity:.75;transition:filter .16s ease,opacity .16s ease;}
.marca-card:hover img{filter:none;opacity:1;}
@media (prefers-reduced-motion:reduce){.carrossel__trilho--marcas{animation:none;}}
@media (max-width:640px){
  .carrossel__trilho--marcas{grid-auto-columns:128px;animation-duration:36s;}
  .marca-card{width:128px;height:76px;}
}
@media (max-width:640px){
  .oferta-gradiente{padding:28px 22px;flex-direction:column;align-items:flex-start;}
  .oferta-slide .oferta-gradiente{padding-top:58px;}
  .oferta-slide .oferta-gradiente:not(:has(.slot-etiqueta)){padding-top:28px;}
  .oferta-gradiente__acao .btn{width:100%;}
}

/* ---------- Grades e cartões ---------- */
.grade{display:grid;gap:20px;margin-top:38px;}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}

.cartao{background:var(--branco);border:1px solid var(--aco);border-radius:var(--r);
  padding:24px;}
.cartao h3{margin-bottom:8px;}
.cartao p{color:var(--cinza);font-size:15.5px;}
/* Cartão que é link (linhas de tubo/conexão na home) — abre o catálogo já filtrado. */
.cartao--linha{display:block;color:inherit;text-decoration:none;cursor:pointer;
  position:relative;padding-right:44px;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
/* Sem nenhuma marca, o cartão-link tinha a mesma cara de um cartão estático. A
   seta no canto é o sinal de que ali se clica — e ela anda no hover. */
.cartao--linha::after{content:"";position:absolute;top:26px;right:20px;
  width:9px;height:9px;border-right:2.2px solid var(--verde-texto);
  border-top:2.2px solid var(--verde-texto);transform:rotate(45deg);
  transition:transform .2s ease;}
.cartao--linha:hover::after{transform:rotate(45deg) translate(3px,-3px);}
.cartao--linha:hover{border-color:var(--verde);box-shadow:0 10px 26px rgba(5,53,30,.10);}
/* Variante com foto: mesma peça já usada como capa da linha em "Nossas
   categorias" (ou o item do catálogo, pras linhas sem card de departamento
   próprio — PEAD/PEBD/PBA). Mesmo padrão do .linha-prod--foto: foto sangra
   até a borda do cartão, o corpo de texto ganha o padding que era do cartão
   inteiro. A seta de "isso é clicável" sai do canto do cartão (ficaria em
   cima da foto) e passa a ancorar no corpo de texto, perto do título. */
.cartao--linha-foto{padding:0;overflow:hidden;}
.cartao--linha-foto::after{display:none;}
.cartao-linha__foto{aspect-ratio:16/10;background:var(--neutro);display:flex;
  align-items:center;justify-content:center;border-bottom:1px solid var(--aco);}
.cartao-linha__foto img{width:88%;height:88%;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(5,53,30,.08));}
.cartao-linha__corpo{position:relative;display:block;padding:20px 44px 22px 22px;}
.cartao-linha__corpo::after{content:"";position:absolute;top:22px;right:20px;
  width:9px;height:9px;border-right:2.2px solid var(--verde-texto);
  border-top:2.2px solid var(--verde-texto);transform:rotate(45deg);
  transition:transform .2s ease;}
.cartao--linha-foto:hover .cartao-linha__corpo::after{transform:rotate(45deg) translate(3px,-3px);}
/* "Cada peça, com as medidas" virou carrossel de 1 fileira em 17/08 — era
   grade de 2 fileiras (.grade.g2), ficava alta demais com 7 linhas depois
   que a roscável voltou. Cartão mais estreito que o da grade original
   (era minmax(290px,1fr)) pra caber mais de um por tela sem estourar a
   largura do wrap. */
.carrossel__trilho--linhas{gap:16px;}
.carrossel__trilho--linhas > .cartao{flex:0 0 230px;width:230px;scroll-snap-align:start;}
.carrossel__trilho--linhas .cartao-linha__corpo{padding:16px 36px 18px 18px;}
.carrossel__trilho--linhas .cartao-linha__corpo h3{font-size:16.5px;}
.carrossel__trilho--linhas .cartao-linha__corpo p{font-size:14px;}
@media (max-width:640px){.carrossel__trilho--linhas > .cartao{flex-basis:78vw;width:78vw;}}
.sec--escuro .cartao{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}
.sec--escuro .cartao p{color:#B9D3C4;}

.linha-prod{background:var(--branco);border:1px solid var(--aco);border-radius:var(--r);
  padding:22px;text-decoration:none;display:block;
  transition:border-color .16s ease,transform .16s ease;}
.linha-prod:hover{border-color:var(--verde);transform:translateY(-2px);}
.linha-prod__ico{width:44px;height:44px;border-radius:9px;background:var(--verde-lavagem);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.linha-prod__ico svg{width:23px;height:23px;stroke:var(--verde-fundo);}
.linha-prod h3{font-size:17.5px;}
.linha-prod p{color:var(--cinza);font-size:14.5px;margin-top:6px;}
.linha-prod--foto{padding:0;overflow:hidden;}
.linha-prod__foto{aspect-ratio:1/1;background:var(--branco);display:flex;
  align-items:center;justify-content:center;border-bottom:1px solid var(--aco);}
.linha-prod__foto img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(5,53,30,.08));}
.linha-prod__corpo{display:block;}
.linha-prod--foto .linha-prod__corpo{display:block;padding:18px 20px 22px;}

/* ---------- Catálogo de tubos e conexões ---------- */
.cat__filtros{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px;}
.chip{background:var(--branco);border:1px solid var(--aco);border-radius:999px;
  padding:10px 18px;font-size:14.5px;font-weight:500;font-family:inherit;color:var(--grafite);
  cursor:pointer;transition:all .16s ease;}
.chip:hover{border-color:var(--verde);color:var(--verde-texto);}
.chip[aria-pressed="true"]{background:var(--verde-fundo);border-color:var(--verde-fundo);
  color:#fff;}

/* align-items:start — cada cartão tem a própria altura. Sem isso, abrir a lista
   de medidas de um item esticava a linha inteira e inflava as fotos vizinhas. */
/* `align-items:start` deixava cada card com a altura do próprio texto (335, 396 e
   416 px lado a lado), e a base da fileira ficava serrilhada. Com `stretch` os
   cards da mesma fileira fecham na mesma altura; o link "Ver as medidas" é
   empurrado pro rodapé do card em `.item__corpo`, então todos alinham embaixo. */
.cat__grade{display:grid;gap:16px;margin-top:26px;align-items:stretch;
  grid-template-columns:repeat(auto-fill,minmax(212px,1fr));}
.item{background:var(--branco);border:1px solid var(--aco);border-radius:var(--r);
  overflow:hidden;text-align:left;font-family:inherit;padding:0;cursor:pointer;
  display:flex;flex-direction:column;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;}
.item:hover{border-color:var(--verde);box-shadow:0 6px 18px rgba(5,53,30,.07);}
.item__foto{background:var(--neutro);aspect-ratio:4/3;flex:none;display:flex;
  align-items:center;justify-content:center;border-bottom:1px solid var(--aco);}
.item__foto img{width:100%;height:100%;object-fit:contain;padding:14px;}
.item__vazio{display:flex;flex-direction:column;align-items:center;gap:7px;
  color:#9AAAA1;font-size:11.5px;text-align:center;padding:14px;line-height:1.35;}
.item__vazio svg{width:26px;height:26px;stroke:#B6C4BC;}
.item__corpo{display:flex;flex-direction:column;flex:1;padding:15px 16px 17px;}
/* Empurra o "Ver as medidas" pro rodapé do card, pra que todos fiquem na mesma
   linha mesmo quando o nome do produto ocupa uma ou duas linhas. */
.item__corpo .item__abrir{margin-top:auto;}
.item__nome{display:block;font-weight:600;font-size:15.5px;line-height:1.3;}
.item__faixa{display:inline-block;margin-top:9px;background:var(--verde-lavagem);
  color:var(--verde-fundo);border-radius:6px;padding:5px 10px;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;}
.item__marca{display:block;margin-top:9px;font-size:12.5px;color:var(--cinza);}
.item__abrir{display:block;margin-top:11px;font-size:13px;font-weight:600;color:var(--verde-texto);}
.item__medidas{display:block;margin-top:12px;padding-top:12px;border-top:1px dashed var(--aco);}
.item__medidas[hidden]{display:none;}
.item__medidas p{font-size:12px;color:var(--cinza);text-transform:uppercase;
  letter-spacing:.07em;font-weight:600;margin-bottom:8px;}
.bitolas{display:flex;flex-wrap:wrap;gap:6px;}
.bitola{border:1px solid var(--aco);border-radius:5px;padding:4px 8px;font-size:12.5px;
  font-variant-numeric:tabular-nums;color:var(--grafite);background:var(--neutro);}
.cat__nota{margin-top:22px;font-size:14px;color:var(--cinza);}

/* ---------- Aviso de protótipo / dado provisório ---------- */
.provisorio{background:#FFF8E6;border:1px solid #F0DFAE;border-radius:var(--r);
  padding:16px 18px;font-size:14.5px;color:#6B5510;margin-top:26px;}
.provisorio b{color:#4A3A08;}

/* ---------- Categorias expansíveis (departamentos da loja) ---------------
   Card de categoria fechado mostra foto + nome + descrição (a descrição já
   cita as subcategorias, pra dar contexto antes de abrir). Clique expande
   a grade de subcategorias logo abaixo, dentro do próprio card — sanfona,
   só uma categoria aberta por vez. Clique na subcategoria abre foto maior
   e o botão de ação (WhatsApp ou link pro catálogo de bitolas).
   -------------------------------------------------------------------- */
.categorias-grade{display:grid;gap:16px;margin-top:26px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.categoria{background:var(--branco);border:1px solid var(--aco);border-radius:var(--r);
  overflow:hidden;grid-column:span 1;transition:border-color .16s ease;}
.categoria:has(.categoria__subs:not([hidden])){grid-column:1/-1;border-color:var(--verde);}
.categoria__topo{display:flex;align-items:center;gap:16px;width:100%;padding:14px;
  background:none;border:none;font-family:inherit;text-align:left;cursor:pointer;}
.categoria__topo:hover .categoria__nome{color:var(--verde-texto);}
.categoria__foto{flex:none;width:76px;height:76px;border-radius:8px;overflow:hidden;
  background:var(--neutro);border:1px solid var(--aco);display:flex;align-items:center;justify-content:center;}
.categoria__foto img{width:100%;height:100%;object-fit:cover;}
.categoria__corpo{flex:1;min-width:0;}
.categoria__nome{display:block;font-weight:700;font-size:16.5px;transition:color .14s ease;}
.categoria__descricao{display:block;margin-top:4px;font-size:13.5px;color:var(--cinza);line-height:1.4;}
.categoria__seta{width:20px;height:20px;flex:none;stroke:var(--cinza);transition:transform .18s ease;}
.categoria__topo[aria-expanded="true"] .categoria__seta{transform:rotate(180deg);stroke:var(--verde);}
.categoria__subs{padding:4px 18px 22px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-items:start;}
.categoria__subs[hidden]{display:none;}
.categoria__em-breve{grid-column:1/-1;font-size:14px;color:var(--cinza);
  background:var(--neutro);border-radius:8px;padding:14px 16px;}

.subcategoria{background:var(--neutro);border:1px solid var(--aco);border-radius:8px;
  overflow:hidden;text-align:left;font-family:inherit;padding:0;cursor:pointer;
  display:flex;flex-direction:column;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;}
.subcategoria:hover{border-color:var(--verde);}
.subcategoria__foto{background:var(--branco);aspect-ratio:4/3;flex:none;display:flex;
  align-items:center;justify-content:center;border-bottom:1px solid var(--aco);}
.subcategoria__foto img{width:100%;height:100%;object-fit:contain;padding:10px;}
.item__vazio--pequeno{padding:10px;font-size:10.5px;}
.item__vazio--pequeno svg{width:20px;height:20px;}
.subcategoria__corpo{padding:12px 14px 14px;}
.subcategoria__nome{display:block;font-weight:600;font-size:14px;line-height:1.3;}
.subcategoria__descricao{display:block;margin-top:5px;font-size:12.5px;color:var(--cinza);line-height:1.4;}
.subcategoria__detalhe{display:block;margin-top:11px;}
.subcategoria__detalhe[hidden]{display:none;}
/* Sem `display` aqui: herda o `inline-flex` + `gap:9px` do `.btn` — é o que
   separa o ícone do rótulo. Um `display:inline-block` já esteve aqui e
   sobrescrevia o `inline-flex` da regra base (mesma especificidade, ordem no
   arquivo decide) sem intenção — sem flex container o `gap` do `.btn` não
   vale nada, e como o ícone e o texto são concatenados na mesma string sem
   espaço entre eles (só a âncora que injeta o ícone via ICONE_ZAP; "Ver as
   bitolas" não tem ícone e não sofria com isso), o ícone colava direto no
   texto — "🟢Perguntar no WhatsApp". */
.subcategoria__acao{padding:9px 14px;font-size:13px;border-radius:7px;}
.subcategoria__pendente{display:inline-block;font-size:12px;font-weight:600;color:#9AAAA1;
  background:var(--branco);border:1px dashed var(--aco);border-radius:6px;padding:6px 10px;}

/* ---------- Destaque (metais) ---------- */
.destaque{background:linear-gradient(180deg,var(--neutro),var(--branco));
  border:1px solid var(--aco);border-radius:14px;padding:32px;margin-top:38px;}
.destaque .grade{margin-top:26px;}

/* ---------- Depoimentos ---------- */
.dep{background:var(--branco);border:1px solid var(--aco);border-radius:var(--r);padding:22px 24px;}
/* Numa fileira flex, TODO cartão da esteira — mesmo os que estão fora da tela
   naquele instante — conta pra altura da fileira, porque é o mais alto entre
   os ~60 que manda. Um depoimento de 5 linhas em algum lugar da esteira dava
   uma fileira alta, e o cartão de 1 linha visível na tela sobrava vazio lá
   embaixo até fechar essa altura — lia como "espaço em branco enorme" na
   seção inteira. Cortar a citação em 3 linhas tira esse cartão-fantasma alto
   da conta: agora nenhum cartão passa de ~190px, a fileira toda fica compacta
   e o vazio some. */
.dep p{font-size:15.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;}
.dep footer{margin-top:16px;font-size:14px;color:var(--cinza);font-weight:600;}
.dep__estrelas{color:var(--verde-texto);letter-spacing:2px;margin-bottom:10px;font-size:14px;}
/* Variante com foto real do avaliador (recorte do próprio Perfil da Empresa no
   Google) — nome, foto e nota são o print de verdade; só o texto da avaliação é
   reescrito à mão corrigindo erro de digitação, pedido do Léo em 05/08, pra não
   publicar erro de português do cliente em nome dele. */
.dep__autor{display:flex;align-items:center;gap:10px;margin-top:14px;}
.dep__autor img{width:36px;height:36px;border-radius:50%;object-fit:cover;
  border:1px solid var(--aco);}
.dep__autor-nome{font-weight:600;font-size:13.5px;color:var(--grafite);}
/* Esteira infinita, mesmo padrão da Poços Acabamentos e Piscinas — uma fileira
   só, `width:max-content` + `@keyframes` até -50%, conjunto duplicado pelo JS.
   Virou carrossel em 05/08 quando foram quase 30 avaliações; virou esteira em
   15/08 porque o `grid-template-rows:1fr` antigo ESTICAVA todo cartão da linha
   até a altura do mais alto — um "Atendimento top!" de uma linha ficava com o
   mesmo tanto de vazio embaixo que um depoimento de 5 linhas ao lado. Sem
   stretch (align-items:flex-start) e sem `flex:1` no texto, cada cartão fica do
   tamanho do que ele tem pra dizer. */
.carrossel:has(.carrossel__trilho--depoimentos){overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.carrossel__trilho--depoimentos{display:flex;align-items:flex-start;
  gap:18px;padding:6px 2px 14px;overflow:visible;
  width:max-content;animation:esteira-depoimentos 130s linear infinite;}
@keyframes esteira-depoimentos{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.carrossel__trilho--depoimentos .dep{flex:0 0 300px;width:300px;}
@media (prefers-reduced-motion:reduce){.carrossel__trilho--depoimentos{animation:none;}}
@media (max-width:640px){
  .carrossel__trilho--depoimentos{animation-duration:90s;}
  .carrossel__trilho--depoimentos .dep{flex-basis:78vw;width:78vw;}
}
/* Avatar genérico — pra avaliação real (nome, nota e texto verdadeiros) cujo
   avaliador não tem foto de perfil no Google (a maioria não tem). Iniciais
   dentro de um círculo neutro, mesmo tamanho do avatar com foto, pra não
   destoar no carrossel. */
.dep__autor-generico{width:40px;height:40px;border-radius:50%;
  background:var(--neutro);border:1px solid var(--aco);color:var(--verde-texto);
  font-weight:700;font-size:15px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;}
.dep__autor-fonte{font-size:12.5px;color:var(--cinza);}

/* Nota do Google em destaque, acima do carrossel de avaliações. A prova social
   mais forte da loja (4,7 com 300+) estava dissolvida num parágrafo cinza. */
.nota-google{display:flex;align-items:center;gap:18px;margin-top:22px;
  padding:18px 22px;background:var(--neutro);border:1px solid var(--aco);
  border-radius:var(--r);width:fit-content;max-width:100%;}
.nota-google__numero{font-size:44px;line-height:1;font-weight:800;
  color:var(--verde-texto);letter-spacing:-1px;}
.nota-google__estrelas{color:var(--verde-texto);letter-spacing:2px;font-size:15px;}
.nota-google__texto{margin:4px 0 0;font-size:15px;color:var(--cinza);}
.nota-google__texto b{color:var(--grafite);}
.nota-google__texto a{color:var(--verde-texto);font-weight:600;white-space:nowrap;}
@media (max-width:520px){
  .nota-google{gap:14px;padding:16px;}
  .nota-google__numero{font-size:36px;}
  .nota-google__texto{font-size:14px;}
}

/* ---------- FAQ ---------- */
.faq{margin-top:38px;border-top:1px solid var(--aco);}
.faq details{border-bottom:1px solid var(--aco);}
.faq summary{cursor:pointer;padding:22px 44px 22px 0;font-weight:600;font-size:17.5px;
  position:relative;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:8px;top:19px;font-size:24px;
  color:var(--verde-texto);font-weight:400;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq details[open] summary{color:var(--verde-texto);}
.faq__resp{padding:0 44px 24px 0;color:var(--cinza);}

/* ---------- Contato ---------- */
.dado{display:flex;gap:14px;align-items:flex-start;padding:18px 0;
  border-bottom:1px solid var(--aco);}
.dado:last-child{border-bottom:0;}
.dado svg{width:20px;height:20px;stroke:var(--verde);flex:none;margin-top:3px;}
.dado b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--cinza);font-weight:600;}
.dado span,.dado a{font-size:17px;color:var(--grafite);text-decoration:none;}
.dado a:hover{color:var(--verde-texto);}
.mapa{border:1px solid var(--aco);border-radius:var(--r);overflow:hidden;background:var(--neutro);}
.mapa iframe{width:100%;height:100%;min-height:340px;border:0;display:block;}

/* ---------- Faixa de chamada ---------- */
/* Virou cartão flutuante com gradiente sobre fundo claro, em vez de seção
   full-width sólida — é o segundo bloco que quebrava o ritmo duro de cor. */
.faixa-cartao{background:linear-gradient(135deg,var(--verde-medio) 0%,var(--verde-fundo) 100%);
  color:#fff;text-align:center;padding:56px 40px;border-radius:20px;position:relative;
  overflow:hidden;}
.faixa-cartao::after{content:"";position:absolute;left:-60px;top:-60px;width:240px;
  height:240px;border-radius:50%;background:rgba(0,140,61,.28);}
.faixa-cartao > *{position:relative;z-index:1;}
.faixa-cartao h2{color:#fff;}
.faixa-cartao p{margin-top:14px;color:rgba(255,255,255,.9);max-width:56ch;
  margin-left:auto;margin-right:auto;}
.faixa-cartao .btn{margin-top:28px;background:#fff;color:var(--verde-fundo);}
.faixa-cartao .btn:hover{background:var(--verde-texto);color:#fff;}
@media (max-width:640px){
  .faixa-cartao{padding:40px 24px;}
}

/* ---------- Rodapé ---------- */
/* Rodapé em branco pelo mesmo motivo da barra: o verde-claro apagado escondia
   endereço, telefone e e-mail, que é justamente o que se procura ali. */
.rodape{background:var(--verde-fundo);color:#fff;padding:58px 0 30px;font-size:15px;}
/* Gap maior que o padrão de 20px: com 4 colunas de conteúdo real (não só links
   curtos), 20px deixava a 1ª coluna colada na de "Produtos" ao lado — e o
   texto de endereço/CNPJ colado embaixo do próprio logo, sem respiro nenhum
   entre uma linha e outra. */
.rodape .grade{margin-top:0;column-gap:52px;row-gap:28px;}
.rodape img{height:48px;width:auto;margin-bottom:18px;}
/* Título de coluna e link quase não se diferenciavam — os dois eram brancos
   sólidos, só o peso e o uppercase separavam um do outro, pouco visível a
   distância. Mesmo padrão da Poços Acabamentos e Piscinas (`.foot-col h5`):
   o título vira um RÓTULO discreto (menor, apagado, letter-spacing largo) e
   quem ganha destaque de verdade é o link — é ele que a pessoa vai clicar. */
.rodape h4{color:rgba(255,255,255,.5);font-size:12px;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:16px;font-family:'Inter',sans-serif;font-weight:800;}
.rodape a{color:#fff;text-decoration:none;}
.rodape a:hover{opacity:.78;}
.rodape ul{list-style:none;padding:0;margin:0;display:grid;gap:11px;}
.rodape ul a{display:inline-flex;align-items:center;gap:12px;
  color:rgba(255,255,255,.88);font-size:14.5px;font-weight:500;}
.rodape ul a:hover{color:#fff;opacity:1;}
.rodape__endereco{display:flex;gap:12px;align-items:flex-start;}
.rodape__col img{display:block;}
.rodape__col p{color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.6;max-width:32ch;}
.rodape__col p + p{margin-top:10px;}
.rodape__col p a{color:#fff;}
.rodape__col p a:hover{opacity:.8;}
/* Linha densa em palavra-chave, mesmo padrão da Poços Acabamentos e Piscinas —
   vive sozinha, entre as colunas e a linha de copyright, sem disputar
   hierarquia com o resto do rodapé. */
.rodape__descricao{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13);
  font-size:13px;color:rgba(255,255,255,.5);line-height:1.6;max-width:96ch;}
/* Ícones sociais em círculo, coluna da marca — mesmo padrão da Poços Acabamentos
   e Piscinas, no lugar da lista com badge que essa coluna tinha antes. */
.rodape__social{display:flex;gap:12px;margin-top:16px;}
.rodape__social a{width:36px;height:36px;border-radius:50%;flex:none;
  border:1px solid rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;
  color:#fff;transition:border-color .16s ease,background .16s ease;}
.rodape__social a svg{width:16px;height:16px;}
.rodape__social a:hover{border-color:#7FCF9F;background:rgba(127,207,159,.14);}

/* ---------- Badge circular de ícone ---------- */
/* É o "ícone melhor" da referência da Jingle — não tem pictograma diferente lá,
   é só o enquadramento circular. Aplicado nos mesmos SVGs já validados. */
.icone-badge{width:32px;height:32px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(127,207,159,.4);transition:border-color .16s ease,background .16s ease;}
.icone-badge svg{width:16px;height:16px;color:#7FCF9F;}
.rodape ul a:hover .icone-badge{border-color:#7FCF9F;background:rgba(127,207,159,.12);}
.rodape ul a:hover .icone-badge svg{color:#fff;}
.rodape__endereco .icone-badge{margin-top:0;}
.rodape__fim{margin-top:18px;display:flex;justify-content:space-between;gap:16px;
  flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.72);}

/* ---------- WhatsApp flutuante (desktop e celular) ---------- */
/* É o único elemento que "flutua de verdade" no site — por isso é o único com
   sombra pesada, seguindo a própria regra do guia de identidade. Fica persistente
   em qualquer altura de rolagem, em qualquer tamanho de tela (pedido do cliente). */
.zap-flutuante{display:flex;position:fixed;
  right:max(20px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));
  z-index:60;width:60px;height:60px;border-radius:50%;flex:none;
  background:var(--verde);color:#fff;
  align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(5,53,30,.4);}
.zap-flutuante svg{width:30px;height:30px;}
@media (max-width:860px){
  .zap-flutuante{right:max(16px,env(safe-area-inset-right));
    bottom:max(16px,env(safe-area-inset-bottom));
    width:56px;height:56px;}
  .zap-flutuante svg{width:28px;height:28px;}
}

/* ---------- Barra flutuante (padrão Potenza: telefone/whatsapp/orçamento/mapa) --
   Substitui o botão único .zap-flutuante (mantido no arquivo, sem uso aqui) por
   uma pilha de 4 ícones. Mesmos dados que já existem em todas as páginas —
   nenhum canal novo, só o formato de apresentação. -------------------------- */
.barra-flutuante{display:flex;flex-direction:column;gap:10px;position:fixed;
  right:max(20px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));z-index:60;}
.barra-flutuante a{width:50px;height:50px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:var(--verde-fundo);box-shadow:0 10px 26px rgba(5,53,30,.35);
  transition:transform .16s ease;}
.barra-flutuante a:hover{transform:scale(1.06);}
.barra-flutuante a svg{width:22px;height:22px;}
.barra-flutuante__zap{background:var(--verde) !important;width:60px !important;
  height:60px !important;}
.barra-flutuante__zap svg{width:28px;height:28px;}
@media (max-width:860px){
  .barra-flutuante{gap:8px;right:max(16px,env(safe-area-inset-right));
    bottom:max(16px,env(safe-area-inset-bottom));}
  .barra-flutuante a{width:44px;height:44px;}
  .barra-flutuante a svg{width:19px;height:19px;}
  .barra-flutuante__zap{width:54px !important;height:54px !important;}
  .barra-flutuante__zap svg{width:26px;height:26px;}
  /* Numa tela de 390px os 4 botões empilhados ocupavam 25% da altura e cobriam o
     texto do conteúdo. Ficam os dois que são ação de verdade: ligar e WhatsApp.
     O de orçamento aponta pro mesmo link do WhatsApp (era botão repetido) e o
     mapa já está no rodapé e no menu. */
  /* Precisa do seletor com o elemento: `.barra-flutuante a` tem especificidade
     maior que a classe sozinha e sobrescreveria o display:none. */
  .barra-flutuante a.barra-flutuante__mapa,
  .barra-flutuante a.barra-flutuante__orcamento{display:none;}
}

/* ---------- Foto circular com losangos (padrão Potenza Institucional) ---- */
.foto-circular{position:relative;width:100%;max-width:320px;margin:0 auto;}
.foto-circular::before{content:"";position:absolute;inset:-16px;
  border:1.5px dashed rgba(0,140,61,.35);border-radius:50%;transform:rotate(8deg);
  pointer-events:none;}
.foto-circular::after{content:"";position:absolute;inset:-30px;
  border:1.5px solid rgba(0,140,61,.16);border-radius:50%;transform:rotate(-6deg);
  pointer-events:none;}
.foto-circular__img{position:relative;width:100%;aspect-ratio:1/1;border-radius:50%;
  overflow:hidden;border:6px solid var(--branco);box-shadow:0 20px 44px rgba(5,53,30,.18);}
.foto-circular__img img{width:100%;height:100%;object-fit:cover;}

/* ---------- Revelar ao rolar ---------- */
.rev{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
.rev.on{opacity:1;transform:none;}
/* Cascata: cada item de uma grade revela um pouco depois do anterior, em vez de
   tudo aparecer de uma vez — usado na Sobre, onde a página estava muito estática. */
.rev-cascata > *{opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s ease;}
.rev-cascata.on > *{opacity:1;transform:none;}
.rev-cascata.on > *:nth-child(1){transition-delay:0s;}
.rev-cascata.on > *:nth-child(2){transition-delay:.09s;}
.rev-cascata.on > *:nth-child(3){transition-delay:.18s;}
.rev-cascata.on > *:nth-child(4){transition-delay:.27s;}
.rev-cascata.on > *:nth-child(5){transition-delay:.36s;}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Celular ---------- */
@media (max-width:860px){
  .hamb{display:flex;}
  .topo .wrap{min-height:72px;grid-template-columns:auto auto;}
  .marca img{height:52px;}
  .topo-cta{display:none;} /* o botão de orçamento no header some — quem cobre isso no
    celular é o botão flutuante e o CTA de largura cheia do hero */
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:8px 22px 18px;border-bottom:1px solid var(--aco);
    box-shadow:var(--sombra-menu);display:none;}
  .nav.aberto{display:flex;}
  .nav a{padding:14px 0;border-bottom:1px solid var(--aco);border-left:2px solid transparent;}
  .nav a[aria-current="page"]{border-bottom-color:var(--aco);border-left-color:var(--verde);
    padding-left:12px;}
  .sec{padding:56px 0;}
  .hero .wrap{padding-top:58px;padding-bottom:58px;}
  .hero__acoes .btn{width:100%;}
  .destaque{padding:22px;}
  .cat__grade{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));}
}


/* ---------- "Aberto agora?" — situação da loja em tempo real ---------------
   Primeira versão era um cartão de duas linhas com sombra: alto demais pro
   conteúdo, e a sombra fazia parecer um balão colado por cima da página. Agora
   é uma PÍLULA de uma linha só, sem sombra, do tamanho do texto — o destaque
   vem do preenchimento verde e do ponto pulsante, não do volume.

   O ponto colorido nunca é a única informação: o estado está escrito ao lado, e
   o bloco é `role="status" aria-live="polite"`, então leitor de tela anuncia a
   virada. Nasce com `hidden`: sem JS não aparece nada, porque dizer "aberto"
   errado é pior que não dizer. ---------------------------------------------- */
.agora{display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px 7px 13px;border-radius:999px;
  border:1px solid var(--aco);background:#fff;
  font-size:15px;line-height:1.35;white-space:nowrap;}
.agora__ponto{position:relative;width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--cinza);}
.agora__estado{font-weight:700;color:var(--grafite);}
.agora__proximo{color:var(--cinza);}
/* Sem caractere separador: quando a pílula quebra em duas linhas no celular, o
   "·" ficava sozinho abrindo a segunda linha. O espaço, mais o contraste de peso
   e de cor entre as duas partes, já separa. */
.agora__proximo{margin-left:4px;}

.agora--aberto{border-color:rgba(0,140,61,.4);background:var(--verde-lavagem);}
.agora--aberto .agora__ponto{background:var(--verde);}
.agora--aberto .agora__estado{color:var(--verde-texto);}
.agora--aberto .agora__proximo{color:#3D5B4B;}
/* Anel pulsante só no estado aberto — anima transform/opacity num ::after, que
   não força recálculo de layout. */
.agora--aberto .agora__ponto::after{content:"";position:absolute;inset:-4px;
  border-radius:50%;border:2px solid var(--verde);
  animation:agora-pulso 2.4s ease-out infinite;}
@keyframes agora-pulso{
  0%{transform:scale(.7);opacity:.85;}
  70%,100%{transform:scale(1.5);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .agora--aberto .agora__ponto::after{animation:none;opacity:.45;}
}

/* Sobre fundo escuro: bloco de endereço quando a seção é escura, faixa do hero,
   e o cartão verde de "Estamos abertos agora?" da página de Contato. */
.sec--escuro .agora,.hero .agora,.faixa-cartao .agora{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);}
.sec--escuro .agora__estado,.hero .agora__estado,.faixa-cartao .agora__estado{color:#fff;}
.sec--escuro .agora__proximo,.hero .agora__proximo,.faixa-cartao .agora__proximo{
  color:rgba(255,255,255,.76);}
.sec--escuro .agora--aberto,.hero .agora--aberto,.faixa-cartao .agora--aberto{
  background:rgba(127,207,159,.18);border-color:rgba(127,207,159,.5);}
.sec--escuro .agora--aberto .agora__ponto,.hero .agora--aberto .agora__ponto,
.faixa-cartao .agora--aberto .agora__ponto{background:#7FCF9F;}
.sec--escuro .agora--aberto .agora__ponto::after,.hero .agora--aberto .agora__ponto::after,
.faixa-cartao .agora--aberto .agora__ponto::after{border-color:#7FCF9F;}
.sec--escuro .agora--fechado .agora__ponto,.hero .agora--fechado .agora__ponto,
.faixa-cartao .agora--fechado .agora__ponto{background:#9FC0AE;}

/* Quando entra depois de um horário já escrito (linha da página de Contato,
   resposta do FAQ), a pílula confirma em vez de anunciar: vira bloco próprio
   numa linha nova, no tamanho do conteúdo, pra não colar no texto ao lado. */
.dado .agora,.faq__resp .agora{display:inline-flex;margin-top:10px;}
.dado > div{min-width:0;}

/* No celular a pílula pode não caber numa linha; então ela pode quebrar — mas só
   se precisar. A primeira versão forçava a quebra com `flex-basis:100%` e deixava
   a pílula esticada mesmo quando o texto cabia inteiro. */
@media (max-width:520px){
  .agora{white-space:normal;flex-wrap:wrap;row-gap:0;font-size:14.5px;}
}

/* ---------- Bloco "Onde estamos", versão compacta -------------------------
   Era uma lista de cartões (.dado) com rótulo em maiúscula em cima de cada
   valor: três blocos de duas linhas, alto demais pro que informa. Vira lista
   simples de ícone + texto, e ganha as duas ações que faltavam — WhatsApp e
   Google Maps —, que antes só existiam no rodapé e na barra flutuante. ------ */
.onde{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;}
.onde li{display:flex;gap:12px;align-items:flex-start;color:var(--grafite);}
.onde li svg{width:19px;height:19px;flex:none;margin-top:4px;color:var(--verde-texto);}
.onde li span{min-width:0;}
.onde li a{color:var(--verde-texto);font-weight:600;text-decoration:none;}
.onde li a:hover{text-decoration:underline;}
.onde__acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.onde__acoes .btn--linha{background:#fff;}

/* Faixa de chamada enxuta — texto e botão lado a lado em vez de empilhados e
   centralizados, que ocupava três vezes a altura pra dizer a mesma coisa. */
.faixa-cartao--enxuto{display:flex;align-items:center;justify-content:space-between;
  gap:26px;text-align:left;padding:30px 34px;}
.faixa-cartao--enxuto h2{font-size:clamp(21px,2.6vw,28px);}
.faixa-cartao--enxuto p{margin-top:8px;font-size:16px;}
.faixa-cartao--enxuto .btn{flex:none;}
@media (max-width:760px){
  .faixa-cartao--enxuto{flex-direction:column;align-items:flex-start;padding:26px 22px;}
  .faixa-cartao--enxuto .btn{width:100%;}
}
@media (max-width:620px){
  /* Dois botões de larguras diferentes empilhados leem como hierarquia acidental.
     No celular os dois ocupam a linha inteira. */
  .onde__acoes{display:grid;grid-template-columns:1fr;gap:10px;}
}
/* O arredondamento do slide não alcança a arte quando ela sobra em altura (caso do
   banner 5, 2,14 num slot 1,79): a imagem fica centralizada e seus cantos ficam
   longe da borda arredondada do slide. Por isso o raio vai também na própria peça. */
.banner-hero .banner-slide--imagem-completa img{border-radius:20px;}
@media (max-width:620px){
  .banner-hero .banner-slide,
  .banner-hero .banner-slide--imagem-completa img{border-radius:16px;}
}

/* ---------- Slide 1 do banner no celular -----------------------------------
   Histórico: título + parágrafo + botão em HTML por cima da foto ocupavam
   quase toda a altura do quadro no celular, brigando por espaço com a
   fachada. 07/08 (3ª versão): título e parágrafo saíram do DOM visível de
   vez — a foto agora já vem com o texto pintado nela (peça pronta), então
   não tem mais o que "empurrar" pro alto ou pro rodapé. Só o parágrafo da
   apresentação continua existindo como bloco à parte no celular, por dar
   contexto que a imagem sozinha não dá (anos de loja, entrega, marca).

   A correção é só de celular. O parágrafo sai do banner e vira o bloco
   `.apresentacao-mobile` logo abaixo; dentro do banner ficam só o título e o
   botão, ancorados no ALTO, sobre a parede branca. Aí a fachada, o letreiro e
   as portas aparecem inteiros na metade de baixo.

   No desktop nada muda: o parágrafo segue dentro do banner e este bloco não
   existe. --------------------------------------------------------------- */
.so-celular{display:none;}
@media (max-width:860px){
  .so-celular{display:block;}

  /* 07/08 (3ª versão): título e parágrafo saíram do DOM visível (viraram
     pixel da própria foto — ver comentário lá em cima, perto do
     `.banner-slide--foto`). Só resta o botão de WhatsApp, e ele some no
     celular como sempre: a `.apresentacao-mobile` logo abaixo já tem o
     próprio "Pedir orçamento" de largura cheia, sem precisar encaixar em
     cima da foto. */
  .banner-hero .banner-slide--foto .banner-slide__conteudo .btn{display:none;}

  .apresentacao-mobile{padding:22px 0 6px;background:var(--neutro);}
  .apresentacao-mobile p{color:var(--cinza);font-size:16.5px;line-height:1.55;}
  /* O botão de conversa voltou pra perto do topo, mas fora da foto: aqui ele
     fica sobre fundo claro, não cobre a fachada e continua acima da dobra.
     Largura cheia porque é a única ação deste bloco. */
  .apresentacao-mobile .btn{margin-top:16px;width:100%;}
}
/* Em tela de 360 px o rótulo do botão do hero quebrava em duas linhas e o ícone,
   centralizado, ficava no meio das duas — parecia desalinhado. Um ponto de fonte
   a menos mantém tudo numa linha só. */
/* Dois cortes diferentes de propósito: até 420 px a fonte do botão do hero cai
   um ponto, o que já resolve de 390 pra cima; só abaixo de 380 o complemento
   "no WhatsApp" precisa sair. */
@media (max-width:420px){
  .banner-slide__conteudo .btn{font-size:15px;padding:13px 18px;}
}
/* Em telas de 360 px pra baixo o rótulo do hero quebrava mesmo com a fonte
   menor. O complemento "no WhatsApp" sai: o ícone do WhatsApp ao lado já diz
   o canal, e o botão volta pra uma linha. */
@media (max-width:380px){
  .so-largo{display:none;}
}