:root {
  --primary: #0B5D4E;
  --primary-2: #17A883;
  --primary-dark: #073D32;
  --laranja: #FF7A29;
  --laranja-dark: #E8681C;
  --ink-green: #0D241F;
  --bg: #FFFFFF;
  --bg-alt: #F5F9F8;
  --line: #E3ECE8;
  --text-muted: #55625E;
  --radius-lg: 24px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  color: var(--primary);
  background: var(--bg);
  line-height: 1.55;
}

img { max-width: 100%; display: block; }
svg { display: block; }
a { color: inherit; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Header */
header {
  background: var(--primary);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(255,122,41,.4);
}

header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 16px;
}

/* .logo-mark can hold one img (solid-header pages, e.g. mobile menu) or
   two stacked imgs — a light/white mark and a dark/green mark — for the
   mobile fixed transparent header (see body.header-on-light below, driven
   by js/header-theme.js). The light mark is the default, in-flow image;
   the dark mark is absolutely positioned on top of it and crossfades in
   via opacity, so the logo never resizes or reflows on theme change. */
.logo-mark { position: relative; display: inline-flex; }
.logo-mark img { height: 76px; width: auto; display: block; transition: opacity .25s ease; }
.logo-mark img.logo-mark-dark { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

header nav {
  display: none;
  gap: 26px;
  font-size: 14px;
  color: #cfe9e1;
}

header nav a { position: relative; padding: 4px 0; text-decoration: none; }
header nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--laranja);
  transition: right .2s ease;
}
header nav a:hover { color: #fff; }
header nav a:hover::after { right: 0; }

.header-cta { display: none; align-items: center; gap: 12px; }

.header-phone {
  display: none;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

/* Mobile menu toggle (hamburger) — sits where the phone/CTA lives on desktop */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .2s ease, opacity .2s ease, background-color .25s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Off-canvas mobile menu */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,61,50,.55);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.mobile-menu-overlay.is-open { opacity: 1; pointer-events: auto; }

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 84vw);
  background: var(--primary);
  color: #fff;
  z-index: 71;
  transform: translateX(100%);
  transition: transform .28s ease;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  overflow-y: auto;
  box-shadow: -8px 0 24px rgba(0,0,0,.2);
}
.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.mobile-menu-top .logo-mark img { height: 44px; width: auto; }

.menu-close {
  position: relative;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.menu-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}
.menu-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.menu-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-menu-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.mobile-menu-links a {
  display: block;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 650;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-menu-links a:active { background: rgba(255,255,255,.08); }

.mobile-menu-legal {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding: 12px 20px 24px;
}
.mobile-menu-legal a {
  display: block;
  padding: 8px 0;
  font-size: 13px;
  color: #cfe9e1;
  text-decoration: none;
}
.mobile-menu-legal a:active { color: #fff; }

body.menu-open { overflow: hidden; }

@media (min-width: 720px) {
  .menu-toggle,
  .mobile-menu-overlay,
  .mobile-menu {
    display: none;
  }
}

/* Ticker */
.ticker {
  background: var(--primary-dark);
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,122,41,.3);
}
.ticker-track {
  display: inline-flex;
  animation: ticker-scroll 28s linear infinite;
  will-change: transform;
}
.ticker-group { display: inline-flex; flex-shrink: 0; }
.ticker-group span {
  display: inline-flex;
  align-items: center;
  padding: 9px 0;
  margin-right: 28px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #cfe9e1;
}
.ticker-group span::after { content: "•"; margin-left: 28px; color: var(--laranja); }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

.btn {
  background: var(--laranja);
  color: #fff;
  border: none;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 8px 18px -6px rgba(255,122,41,.6);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.btn svg { width: 16px; height: 16px; stroke: #fff; flex-shrink: 0; }
.btn:hover { background: var(--laranja-dark); transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(255,122,41,.7); }
.btn:active { transform: scale(.97); transition: transform .1s ease-out; box-shadow: 0 4px 10px -4px rgba(255,122,41,.6); }

.btn-outline {
  border: 2px solid var(--primary);
  color: var(--primary);
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  transition: background .15s ease, transform .15s ease;
}
.btn-outline:hover { background: var(--bg-alt); }
.btn-outline:active { transform: scale(.97); background: var(--bg-alt); transition: transform .1s ease-out; }

/* Badge / kicker */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(11,93,78,.15);
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  color: var(--primary);
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(11,93,78,.08);
  margin-bottom: 18px;
}
.badge .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--laranja);
  position: relative;
  flex-shrink: 0;
}
.badge .pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--laranja);
  opacity: .5;
  animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(.6); opacity: .6; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Eyebrow / editorial section label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--laranja-dark);
  margin-bottom: 10px;
}
.eyebrow::before {
  display: none;
}

/* Rotating seal badge */
.spin-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 92px;
  height: 92px;
  z-index: 2;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 26px -8px rgba(11,93,78,.4);
}
.spin-badge svg.spin-ring {
  width: 100%;
  height: 100%;
  animation: spin 14s linear infinite;
}
.spin-badge svg.spin-ring text {
  font-family: 'Inter', sans-serif;
  font-size: 8.4px;
  font-weight: 700;
  letter-spacing: 1.5px;
  fill: var(--primary);
}
.spin-badge-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spin-badge-center svg { width: 24px; height: 24px; stroke: var(--laranja); }
/* Text-only variant — no disc, just the rotating letters over whatever sits behind them */
.spin-badge.spin-badge--text-only {
  background: none;
  box-shadow: none;
}
.spin-badge.spin-badge--text-only svg.spin-ring {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px rgba(255,255,255,.8));
}
.spin-badge.spin-badge--text-only svg.spin-ring text {
  fill: var(--primary);
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spin-badge svg.spin-ring { animation: none; }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .16s; }
.reveal:nth-child(4) { transition-delay: .24s; }
.reveal:nth-child(n+5) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 64px;
  background: linear-gradient(180deg, #F5F9F8 0%, #EDF5F1 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(11,93,78,.10) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 80% 20%, black, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 60% at 80% 20%, black, transparent 70%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column-reverse;
  gap: 36px;
}

.hero-text { max-width: 620px; }

.hero-text h1 {
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 16px;
  color: var(--primary);
}

.hero-text p {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 22px;
  max-width: 52ch;
}

.hero-area {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.hero-area strong { color: var(--primary); }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
}
.hero-cta .btn { font-size: 16px; padding: 16px 26px; }

.stat-row { display: flex; flex-wrap: wrap; gap: 10px; }
.stat-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}
.stat-chip svg { width: 14px; height: 14px; stroke: var(--primary-2); flex-shrink: 0; }

/* Home hero — full-bleed photo (2026-09-04: home had no image at all,
   flat gradient background read as broken/unfinished). Reuses the same
   .hero--photo architecture as the service pages instead of a bespoke
   layout, so it inherits the proven photo/scrim/white-text treatment.
   Centering is home-specific (service-page heroes are left-aligned on
   desktop), scoped to body.home-dark so it never leaks. */
body.home-dark .hero-photo-content {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
body.home-dark .hero-photo-content .hero-cta,
body.home-dark .hero-photo-content .stat-row { justify-content: center; }
/* 2026-09-06 (Walace, "reparação de vinte e quatro horas, ele está mais
   para a esquerda"): text-align:center on the parent only centers inline
   content — h1 is a block whose own box (shrunk by max-width:14ch below)
   was hugging the left edge instead of centering, which read as the
   title leaning left even though its text was centered inside that box. */
body.home-dark .hero-photo-content h1 {
  margin-left: auto;
  margin-right: auto;
}

/* 2026-09-06 (Walace, 3ª rodada): "retire essa barra... ela está duplicando
   a informação que já tem nos cards abaixo... conforme já não temos nas
   outras páginas" — every hero-v2 service page already hides .ticker (see
   the body.hero-v2 rule further down); the home was the only .hero--photo
   page still showing it, duplicating Deslocação imediata/Equipa
   especializada/Orçamento antes de iniciar, which already appear as
   .stat-chip cards inside the hero itself. All breakpoints, matching the
   hero-v2 pattern (not just mobile). */
body.home-dark .ticker {
  display: none;
}

@media (max-width: 719px) {
  /* 2026-09-06 (Walace, 4ª rodada, correção de erro real): rodadas 1-2
     reduziram min-height (88vh base → 74svh → 62svh) achando que isso era
     um jeito válido de "subir" o badge/título. Estava errado: min-height
     não só reposiciona conteúdo, encolhe a CAIXA que a foto de fundo
     preenche via object-fit:cover, então a cada rodada a foto ficava mais
     cortada/dando zoom. Ele reclamou explicitamente ("nunca pedir para
     você diminuir a imagem... volte do tamanho que era anteriormente")
     e pediu revert SEM mexer no resto (centralização/espaçamento da
     rodada 3 continuam de propósito). Fix: remover o override — a home
     volta a herdar min-height:88vh da regra base .hero--photo (a mesma
     usada pelas páginas hero-v2), restaurando o tamanho original da
     imagem. Lição: min-height é alavanca de TAMANHO DA IMAGEM, nunca
     usar para "subir" conteúdo — padding/margin (abaixo) são a alavanca
     certa para posição do conteúdo, sem afetar o crop da foto. */
  /* 2026-09-06 (Walace, 6ª rodada, corrige a 5ª): a 5ª rodada centrou o
     bloco INTEIRO (badge+h1+p+cta+area+chips) como um grupo só via
     align-self:center — ele rejeitou esse resultado ("não quero tudo
     centralizado, quero distribuído"): pediu o badge quase colado no
     header, o título+texto um pouco mais abaixo (também "no meio", mas
     como zona própria, separada do badge), o botão centralizado
     especificamente no vão entre o título e a linha "Atendemos...", e
     a linha "Atendemos"+os 3 selos SEM MEXER (mesma posição de hoje).
     Troca a técnica: em vez de centrar o bloco como uma unidade, o
     conteúdo vira um flex column esticado à altura total da caixa
     (align-self:stretch, não mais center), e cada vão vira controlável
     via margin:auto em pontos específicos — badge fica colado no topo
     (só o padding-top do container o separa do header), h1 ganha
     margin-top:auto (abre um vão flexível badge→h1), e o botão ganha
     margin-top:auto + margin-bottom:auto (o mesmo vão flexível dos dois
     lados = ele fica matematicamente centralizado entre o fim do
     texto/h1 e o início do .hero-area, sem precisar calcular pixels).
     Como os 3 vãos flexíveis (badge→h1, texto→cta, cta→area) são todos
     margin:auto dentro do MESMO flex container, o CSS reparte o espaço
     sobrando em partes iguais entre eles — resultado "distribuído", sem
     nenhum aglomerado só em cima ou só embaixo. .hero-area e .stat-row
     não ganham nenhuma regra nova (mantidos exatamente como estavam). */
  body.home-dark .hero-photo-content {
    align-self: stretch;
  }
  /* .badge é display:inline-flex (shrink-to-content) — dentro de um flex
     column ele herdaria align-items:stretch do pai por padrão e viraria
     uma barra esticada ocupando 100% da largura, perdendo a forma de
     pílula. align-self:center aqui restaura o comportamento de sempre
     (tamanho pelo próprio conteúdo, centralizado no eixo cruzado) — é
     também exatamente o que ele pediu ("centralizado") para o badge. */
  body.home-dark .hero-photo-content .badge {
    align-self: center;
    margin-bottom: 0;
  }
  body.home-dark .hero-photo-content h1 {
    margin-top: auto;
    margin-bottom: 12px;
  }
  body.home-dark .hero-photo-content p {
    margin-bottom: 0;
  }
  body.home-dark .hero-photo-content .hero-cta {
    margin-top: auto;
    margin-bottom: auto;
  }
  /* .container.hero-photo-content (not just .hero-photo-content): the
     base rule at ".hero--photo .container.hero-photo-content" (padding +
     display:block) has 3 class-selectors, which beats a plain 2-class +
     body override on specificity alone — a lower-specificity override
     here was silently ignored — confirmed live via getComputedStyle
     before this fix (padding-top stayed 96px, display stayed block no
     matter what was written on the 2-class selector above). display:flex
     + flex-direction:column (the actual mechanism for the margin:auto
     distribution above) has to live on this same 3-class selector too. */
  body.home-dark .container.hero-photo-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 40px 24px calc(env(safe-area-inset-bottom, 0px) + 40px);
  }
  /* 2026-09-06 (Walace, 7ª rodada, última correção): "o h1 e o texto têm
     que ficar próximos, não com os mesmos espaçamentos pra tudo" — a seção
     tem DUAS classes no HTML (<section class="hero hero--photo">), e a
     regra antiga ".hero .container" (não ".hero--photo", uma seção
     genérica de outro contexto) também bate no mesmo elemento e define
     gap:36px + flex-direction:column-reverse. Minha regra acima já
     ganhava no display/flex-direction (especificidade maior), mas nunca
     tinha declarado "gap" — cascata é por propriedade, não por regra
     inteira, então esse gap:36px de menor especificidade continuava
     valendo e somava 36px extras IGUAIS entre TODO par de filhos
     (badge→h1, h1→p, p→cta, cta→area), disfarçando os meus valores
     deliberadamente diferentes (margin-bottom:12px no h1 vs margin:auto
     no cta) como se fossem todos iguais. gap:0 acima neutraliza isso —
     agora só o CSS explícito de cada elemento controla o espaço: h1↔p
     fica só com o margin-bottom:12px do h1 (próximos, de propósito),
     enquanto badge→h1 e texto→cta→area continuam com margin:auto
     (distribuídos, maiores, sem relação com o valor fixo do h1/p). */
  /* .hero-area mantém a regra da 3ª rodada (16px) intocada por pedido
     explícito dele nesta rodada — não é alavanca desta correção. */
  body.home-dark .hero-photo-content .hero-area {
    margin-bottom: 16px;
  }
}

/* Home hero chips — translucent pill over the photo (matches .hero-chip's
   "generous rounding" standard, see 2026-09-04 note below) instead of the
   opaque white/10px-radius card the chips used against the old flat
   gradient background. */
.hero-photo-content .stat-chip {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(8px) saturate(160%);
  color: #fff;
  border-radius: 999px;
}
.hero-photo-content .stat-chip svg { stroke: #fff; }

.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}
.hero-brand-logo {
  width: clamp(140px, 34vw, 200px);
  height: auto;
}
.hero-brand-label {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Over the photo hero (home), the grey/green brand mark loses contrast
   against the dark scrim — white matches the rest of the photo-hero text. */
body.home-dark .hero-brand-label { color: rgba(255,255,255,.86); }

/* "Ligar Agora" — same flat pill CTA standard as every service-page hero
   (border-radius: 999px, see the hero-v2 rule below), applied here too
   since the home hero now shares the same photo background (2026-09-04:
   the button used to sit on a plain light gradient with a 10px radius,
   noticeably less rounded than the rest of the site). */
body.home-dark .hero-photo-content .hero-cta .btn {
  border-radius: 999px;
  box-shadow: none;
  padding: 16px 30px;
}
body.home-dark .hero-photo-content .hero-cta .btn:hover {
  box-shadow: none;
  background: var(--laranja-dark);
}
body.home-dark .hero-photo-content .hero-cta .btn:active {
  box-shadow: none;
}

/* Hero — full-bleed photo (service pages) */
.hero--photo {
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  /* No max-height on mobile: pages with longer copy (5-line h1, longer
     lead paragraph) need more than 720px to show all hero content without
     the top (badge) being clipped by align-items:flex-end + overflow:hidden.
     Letting the box grow to fit content here is safe — .hero-photo-bg is
     absolutely inset:0 and covers whatever height the box ends up with, so
     the photo never looks cropped wrong. max-height is reintroduced at the
     720px+ breakpoint below, where content is narrower (max-width:640px)
     and reliably fits within it. */
  display: flex;
  align-items: flex-end;
  padding: 0;
  background: var(--primary-dark);
}
.hero--photo::before { display: none; }
.hero-photo-bg { position: absolute; inset: 0; z-index: 0; }
.hero-photo-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Per-page focal-point override — desktop crop keeps the wall/showerhead
   centered; on narrow mobile viewports (tall, narrow crop box) the same
   image needs a different focal point to avoid centering on empty tile
   wall. Scoped to this one hero photo, not a global pattern. */
.hero-img-banheira { object-position: 62% 30%; }
@media (max-width: 719px) {
  .hero-img-banheira { object-position: 72% 12%; }
}

/* Chaveiro hero (abertura-de-portas) — square source photo, so desktop's
   wide/short crop keeps full width (centered vertically on the lock plate
   and key); mobile's narrow/tall crop needs to shift right to keep the key
   in frame instead of centering on empty door/window on the left. */
.hero-img-chaveiro { object-position: 50% 46%; }
@media (max-width: 719px) {
  .hero-img-chaveiro { object-position: 72% 44%; }
}

/* The real sticky header (logo + hamburger menu) stays visible on every
   .hero--photo page, so this standalone floating logo overlay is redundant
   with it. Also fixes a layout bug: .hero--photo is display:flex (row) and
   .hero-photo-bg is absolutely positioned (out of flow), so with this node
   left visible .hero-photo-content became a second flex-row item competing
   for width against the logo's unconstrained native <img> size — squeezing
   the text column down to a sliver on any page that hadn't opted into
   body.hero-v2's own (redundant) hide rule below. Hidden globally so every
   .hero--photo page gets the fix, not just hero-v2 ones. */
.hero-top-logo { display: none; }

/* Hero photo tile — honest fallback used where a page doesn't have its own
   real photo yet (keeps identical hero--photo architecture/behavior, incl.
   call-bar.js which targets .hero--photo, without pretending a stock/AI
   image is a real jobsite photo). Swap for a real <img> once photography
   for that service exists. */
.hero-photo-bg--tile {
  background: radial-gradient(140% 100% at 50% 0%, #0f4a3d 0%, #073D32 42%, #051f1a 78%, #03110d 100%);
}
.hero-photo-bg--tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}
.hero-photo-bg--tile .hero-tile-icon {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(150px, 32vw, 260px);
  height: clamp(150px, 32vw, 260px);
  stroke: var(--laranja);
  opacity: .3;
}
.hero-photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(7,61,50,.78) 0%,
    rgba(7,61,50,.35) 26%,
    rgba(7,61,50,.55) 62%,
    rgba(3,15,12,.92) 100%);
}
.hero--photo .container.hero-photo-content {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  padding: 96px 24px 36px;
  color: #fff;
  box-sizing: border-box;
}
.hero-photo-content .badge { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(10px) saturate(160%); border: 1px solid rgba(255,255,255,.22); }
.hero-photo-content .badge .pulse { background: var(--primary-2); }
.hero-photo-content .badge .pulse::after { border-color: var(--primary-2); opacity: .4; }
/* 2026-09-06 (Walace): on the home the badge sits over the dark green
   photo scrim, where the teal dot above barely reads — he asked for the
   pulse back to orange specifically here for contrast. Scoped to
   body.home-dark so hero-v2 service pages keep the teal dot untouched. */
body.home-dark .hero-photo-content .badge .pulse { background: var(--laranja); }
body.home-dark .hero-photo-content .badge .pulse::after { border-color: var(--laranja); opacity: .5; }
.hero-photo-content h1 {
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 16px;
  color: #fff;
  max-width: 14ch;
}
.hero-photo-content p {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 22px;
  max-width: 52ch;
  color: rgba(255,255,255,.86);
}
.hero-photo-content .hero-cta { margin-bottom: 40px; }
.hero-photo-content .hero-area {
  font-size: 13px;
  margin-bottom: 0;
  color: rgba(255,255,255,.72);
}
.hero-photo-content .hero-area strong { color: #fff; }
.hero-photo-content .hero-cta .btn-outline {
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.hero-photo-content .hero-cta .btn-outline:hover { background: rgba(255,255,255,.12); }
.hero-photo-content .hero-cta .btn-outline:active { background: rgba(255,255,255,.18); }

.hero-chip-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin: 4px -24px 0;
  padding: 4px 24px 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.hero-chip-scroll::-webkit-scrollbar { display: none; }
.hero-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(8px) saturate(160%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, transform .1s ease-out;
}
.hero-chip svg { width: 15px; height: 15px; stroke: #fff; flex-shrink: 0; }
.hero-chip:hover { background: rgba(255,255,255,.22); }
.hero-chip:active { background: rgba(255,255,255,.28); transform: scale(.96); }

@media (min-width: 720px) {
  /* 2026-09-04 (Walace): desktop hero felt cramped, content sitting too
     close to the top of the photo. Taller box + more top padding on the
     bottom-anchored content gives the badge/h1 more breathing room above
     without changing the mobile hero at all (mobile rule is separate,
     line ~534). */
  .hero--photo { min-height: 68vh; max-height: 700px; }
  .hero-photo-content { max-width: 640px; padding: 96px 24px 44px; }
}

@media (prefers-reduced-transparency: reduce) {
  .hero-photo-content .badge, .hero-chip { background: rgba(7,61,50,.85); backdrop-filter: none; }
}

/* ============================================================
   HERO-V2 — page-scoped hero redesign (servicos/eletrica.html)
   Apple-Arcade-inspired: photo-dominant, no traditional menu on
   mobile, minimal centered logo, flat pill CTA, seamless fade
   into the dark stats-band. Scoped to body.hero-v2 so it never
   leaks onto the other service pages sharing these classes.
   ============================================================ */

/* Inverted scrim (2026-09-04, Walace): the content box sits bottom-anchored
   but the h1/lead have no background panel of their own, so they need real
   scrim behind them — the old bottom-heavy gradient left the badge/h1 area
   too light (just .28-.32) and the text read poorly over the raw photo.
   The CTA button doesn't need that help (solid orange, contrasts on its
   own), so the gradient is now a literal mirror of the old one: darkest at
   the very top, tapering lighter toward the bottom where the button/chips
   sit. Was: .32→.28→.58→.90→solid (light top, dark bottom). */
/* 2026-09-04 (Walace, follow-up): the mirrored gradient above still left
   the mid/lower band too light for the white lead paragraph and locality
   line — visible over busy photos. Raised the floor site-wide (not just
   near the top) so every white text element has real contrast against the
   photo, not just the badge/h1. Shape (darker top, lighter toward the
   button) kept, just with a higher minimum everywhere. */
body.hero-v2 .hero-photo-scrim {
  background: linear-gradient(180deg,
    #051f1a 0%,
    rgba(7,61,50,.92) 16%,
    rgba(7,61,50,.72) 42%,
    rgba(7,61,50,.52) 78%,
    rgba(7,61,50,.55) 100%);
}

/* .hero-top-logo is now hidden globally (see the base .hero--photo rules
   above) — this img-sizing rule is kept as a harmless fallback in case
   display:none is ever overridden for a hero-v2 page specifically. */
body.hero-v2 .hero-top-logo img { height: clamp(58px, 16vw, 80px); width: auto; }

/* Badge entrance (2026-09-04, Walace): the "Técnico disponível agora" pill
   used to just sit there statically from first paint, easy to miss among
   everything else loading in. Popping it in ~2.4s after load — after the
   visitor has already looked at the photo/h1 — draws the eye to it instead
   of competing with the rest of the hero on arrival. */
body.hero-v2 .hero-photo-content .badge {
  opacity: 0;
  transform: translateY(-6px) scale(.92);
  animation: badge-reveal .5s cubic-bezier(.22,.8,.2,1) 2.4s forwards;
}
@keyframes badge-reveal {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body.hero-v2 .hero-photo-content .badge {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Desktop box height, hero-v2 only (2026-09-04, Walace follow-up): the
   shared .hero--photo desktop rule (68vh/700px, below) was raised in an
   earlier round for a different page's request (more breathing room around
   the content). Content here is a compact bottom-anchored stack, so on
   taller/wider desktop viewports that tall a box leaves a large dead zone
   of pure photo above the badge before any text starts. Scoped override
   shrinks the box back down for hero-v2 specifically (not the shared rule,
   so the home page's .hero--photo is untouched) — padding-top/bottom on
   .hero-photo-content stay as-is, so the CTA's position relative to the
   bottom of the box doesn't change, only the empty space above shrinks. */
@media (min-width: 720px) {
  body.hero-v2 .hero--photo { min-height: 56vh; max-height: 600px; }
}

/* Ticker (scrolling trust strip) stays hidden on every hero-v2 hub page at
   every breakpoint, not just mobile — the photo-forward hero should never
   have the ticker stacked above it, on mobile or desktop. Originally
   scoped to .page-eletrica only (2026-09-01 punch-list round); extended to
   the other 3 hub pages during the full MASTER replication (2026-09-01,
   item 25) so all 4 hero-v2 hubs match the approved Elétrica reference.
   Also extended to body.dedicated-service-page as one shared rule (instead
   of enumerating a page-<slug> class per dedicated page) so all ~22
   dedicated landing pages match the same hidden-ticker behavior. */
body.hero-v2.page-eletrica .ticker,
body.hero-v2.page-canalizacao .ticker,
body.hero-v2.page-abertura-de-portas .ticker,
body.hero-v2.page-desentupimento .ticker,
body.hero-v2.dedicated-service-page .ticker {
  display: none;
}

@media (max-width: 719px) {
  /* Ticker stays hidden on mobile for any hero-v2 page regardless of a
     page-<name> class (dedicated pages included) — unchanged pre-existing
     behavior. The 4 hubs above get the same result via the all-breakpoints
     rule above, so this is a harmless no-op duplicate for them. */
  body.hero-v2 .ticker {
    display: none;
  }

  /* Stay bottom-anchored (like the base desktop rule) instead of
     top-aligning: with a tall viewport-based min-height, top-aligning
     content leaves the rest of the box empty below it. svh replaces
     vh so iOS Safari's address bar doesn't inflate the box past what's
     actually visible. */
  body.hero-v2 .hero--photo {
    min-height: 88svh;
    align-items: flex-end;
  }
  @supports not (min-height: 1svh) {
    body.hero-v2 .hero--photo { min-height: 88vh; }
  }

  body.hero-v2 .hero-photo-content {
    text-align: center;
    padding: 40px 24px calc(env(safe-area-inset-bottom, 0px) + 56px);
  }

  body.hero-v2 .hero-photo-content .badge {
    margin: 0 auto 72px;
  }

  body.hero-v2 .hero-photo-content h1 {
    max-width: 15ch;
    margin: 0 auto 14px;
    font-size: 29px;
  }

  body.hero-v2 .hero-photo-content .hero-lead {
    max-width: 30ch;
    margin: 0 auto 64px;
    font-size: 15px;
  }

  body.hero-v2 .hero-photo-content .hero-cta {
    justify-content: center;
    margin-bottom: 64px;
  }

  /* Was display:none (removed 2026-09-04): the locality line was the
     only area-served info in the mobile first fold, and hiding it made
     dedicated service pages read as generic/placeless until the user
     scrolled past the hero. Kept visible, small and translucent so it
     doesn't compete with the h1/CTA. */
  body.hero-v2 .hero-photo-content .hero-area {
    margin-top: 8px;
  }

  /* Header stays transparent for the entire scroll on mobile hero-v2
     pages (Walace, 2026-09-01 correction: no green bar/strip is allowed
     to appear behind the logo/hamburger anymore). What changes instead
     is the logo mark and hamburger color, tracking whichever section is
     currently behind the fixed header — see body.header-on-light below,
     driven by js/header-theme.js. */
  body.hero-v2 header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Dark mark + dark hamburger whenever a light section (symptoms,
     areas, process, reviews, faq) is scrolled directly behind the fixed
     header; default (no class) keeps the light mark + white hamburger,
     correct for the dark hero/stats-band/coverflow/cta-final/footer. */
  body.hero-v2.header-on-light .logo-mark img:not(.logo-mark-dark) { opacity: 0; }
  body.hero-v2.header-on-light .logo-mark img.logo-mark-dark { opacity: 1; }
  body.hero-v2.header-on-light .menu-toggle span { background: var(--primary-dark); }
}

/* Flat pill CTA — no glow/blur/neon, generous rounding */
body.hero-v2 .hero-photo-content .hero-cta .btn {
  border-radius: 999px;
  box-shadow: none;
  padding: 16px 30px;
}
body.hero-v2 .hero-photo-content .hero-cta .btn:hover {
  box-shadow: none;
  background: var(--laranja-dark);
}
body.hero-v2 .hero-photo-content .hero-cta .btn:active {
  box-shadow: none;
}

/* Chips — single row; on mobile it becomes a continuously
   scrolling marquee (same technique as the site's .ticker),
   pushed to the bottom of the hero content block. Desktop keeps
   the original static, swipeable row. */
body.hero-v2 .hero-chip-track { display: flex; gap: 10px; }
body.hero-v2 .hero-chip-group { display: flex; flex-shrink: 0; gap: 10px; }
body.hero-v2 .hero-chip-group[aria-hidden="true"] { display: none; }

@media (max-width: 719px) {
  body.hero-v2 .hero-chip-scroll {
    display: block;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  body.hero-v2 .hero-chip-track {
    display: inline-flex;
    animation: hero-chip-marquee 16s linear infinite;
    will-change: transform;
  }
  body.hero-v2 .hero-chip-group {
    display: inline-flex;
  }
  body.hero-v2 .hero-chip-group[aria-hidden="true"] { display: inline-flex; }
  body.hero-v2 .hero-chip {
    justify-content: center;
    padding: 10px 14px;
    font-size: 12px;
  }
}
@keyframes hero-chip-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  body.hero-v2 .hero-chip-track { animation: none; }
}

/* Trust row reskin — becomes part of the dark transition instead
   of a white interruption between hero and stats-band */
body.hero-v2 .trust-row {
  background: #051f1a;
  border-top: none;
  border-bottom: none;
}
body.hero-v2 .trust-row p { color: rgba(255,255,255,.78); }
body.hero-v2 .trust-row strong { color: var(--laranja); }

/* Stats band — same dark-gradient/glow/lines treatment proven on
   the homepage (home-dark.css), scoped here instead of global */
body.hero-v2 .stats-band {
  background:
    linear-gradient(180deg, #051f1a 0%, rgba(5,31,26,0) 160px),
    radial-gradient(120% 100% at 15% 0%, #0f4a3d 0%, #073D32 38%, #051f1a 75%, #030f0c 100%);
}
body.hero-v2 .stats-band::before { display: none; }
body.hero-v2 .stats-glow { position: absolute; border-radius: 50%; filter: blur(4px); pointer-events: none; z-index: 0; }
body.hero-v2 .stats-glow-a { top: -100px; right: -80px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(23,168,131,.35) 0%, rgba(23,168,131,0) 70%); }
body.hero-v2 .stats-glow-b { bottom: -120px; left: -80px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(255,122,41,.20) 0%, rgba(255,122,41,0) 70%); }
body.hero-v2 .stats-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; z-index: 0; pointer-events: none; }

/* Sticky call bar — hidden while the hero is in view, fades in
   smoothly once the user scrolls past it (toggled by js/call-bar.js).
   The orange bar (and its safe-area padding) belongs to the sticky
   state only: while hidden it must not paint or reserve any space
   at the bottom of the mobile viewport ("O LARANJA PERTENCE À
   STICKY. NÃO PERTENCE AO VIEWPORT MOBILE." — Walace, 2026-09-01).
   visibility:hidden (on top of the pre-existing opacity/pointer-events
   guard) guarantees zero paint while hidden. Scoped to body.hero-v2;
   the homepage gets its own identical block below (body.home-dark,
   2026-09-05) now that it also loads call-bar.js and has a
   .hero--photo — any other non-hero-v2/non-home page keeps the
   original "always visible" sticky bar untouched. */
body.hero-v2 .mobile-call-bar {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
body.hero-v2 .mobile-call-bar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear;
}
body.hero-v2 .mobile-call-bar a {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  body.hero-v2 .mobile-call-bar { transition: opacity .2s ease, visibility 0s linear .2s; transform: none; }
  body.hero-v2 .mobile-call-bar.is-visible { transition: opacity .2s ease, visibility 0s linear; transform: none; }
}

/* The blanket `body { padding-bottom: 62px }` further down exists so
   page content never sits underneath the always-on sticky bar used
   by non-hero-v2 pages. On hero-v2 pages the bar is conditional, so
   that reserved clearance must be too — otherwise every hero-v2 page
   ends in a permanent 62px empty gap below the footer even while the
   bar is hidden. Restored only once .past-hero is true; the existing
   min-width:720px override further down zeroes it again on desktop. */
body.hero-v2 { padding-bottom: 0; }
body.hero-v2.past-hero { padding-bottom: 62px; }
@media (min-width: 720px) {
  body.hero-v2.past-hero { padding-bottom: 0; }
}

/* Sticky call bar (home) — same mechanism as body.hero-v2 above, now
   wired to the homepage too (2026-09-05, Walace: "o botão laranja, o
   sidebar, ele só aparece quando a gente sai da Hero. Na Hero tem que
   ficar somente um botão, que é o principal" — the inline hero CTA is
   the only call button while the hero is on screen; the orange sticky
   bar fades in only once js/call-bar.js's IntersectionObserver reports
   the hero has scrolled out of view). */
body.home-dark .mobile-call-bar {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
body.home-dark .mobile-call-bar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear;
}
body.home-dark .mobile-call-bar a {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  body.home-dark .mobile-call-bar { transition: opacity .2s ease, visibility 0s linear .2s; transform: none; }
  body.home-dark .mobile-call-bar.is-visible { transition: opacity .2s ease, visibility 0s linear; transform: none; }
}
body.home-dark { padding-bottom: 0; }
body.home-dark.past-hero { padding-bottom: 62px; }
@media (min-width: 720px) {
  body.home-dark.past-hero { padding-bottom: 0; }
}

/* Hero visual panel */
.hero-visual { position: relative; display: flex; justify-content: center; }
.hero-visual .shadow-shape {
  position: absolute;
  inset: 16px -16px -16px 16px;
  background: var(--laranja);
  border-radius: var(--radius-lg);
  opacity: .18;
  z-index: 0;
  transform: rotate(4deg);
}
.hero-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  background: var(--primary);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 24px 40px -14px rgba(11,93,78,.45);
  overflow: hidden;
  transform: rotate(-3deg);
}
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}
.hero-panel .service-icon { position: relative; z-index: 1; }
.hero-panel .service-icon svg { width: 68px; height: 68px; stroke: var(--laranja); }
.hero-panel .service-icon-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-panel .service-icon-grid .cell {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
}
.hero-panel .service-icon-grid svg { width: 26px; height: 26px; stroke: var(--laranja); }
.hero-panel img.logo-lockup { position: relative; z-index: 1; height: 28px; width: auto; }
.hero-panel .divider { position: relative; z-index: 1; width: 40px; height: 2px; background: rgba(255,122,41,.5); }

/* Hero visual — photo variant (image-forward, editorial, replaces icon panel) */
.hero-photo-wrap { position: relative; width: 100%; max-width: 300px; }
.hero-photo-wrap .shadow-shape {
  position: absolute;
  inset: 20px -18px -18px 18px;
  background: var(--laranja);
  border-radius: var(--radius-lg);
  opacity: .22;
  z-index: 0;
  transform: rotate(3deg);
}
.hero-photo-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 0 100%);
  box-shadow: 0 24px 40px -14px rgba(11,93,78,.45);
  transform: rotate(-2deg);
}
.hero-photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.08) contrast(1.08) brightness(1.03);
}
.hero-photo-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(7,61,50,.65) 0%, rgba(7,61,50,0) 32%, rgba(7,61,50,0) 78%, rgba(7,61,50,.55) 100%);
  pointer-events: none;
}
.hero-photo-tag {
  position: absolute;
  z-index: 2;
  bottom: 16px; left: 16px;
  background: #fff;
  color: var(--primary);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 8px 14px;
  border-radius: 999px;
  display: flex; align-items: center; gap: 7px;
  box-shadow: 0 10px 20px -8px rgba(0,0,0,.25);
}
.hero-photo-tag span.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--laranja); flex-shrink: 0; }

/* Stats band — full-bleed dark, bold asymmetric claim + honest numbers */
.stats-band {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: #fff;
  padding: 60px 0;
}
.stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 90% 50%, black, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 90% at 90% 50%, black, transparent 70%);
  pointer-events: none;
}
.stats-band .container { position: relative; z-index: 1; }
.stats-band .stats-copy { max-width: 460px; margin-bottom: 32px; }
.stats-band .stats-head {
  font-weight: 700;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.stats-band .stats-head span { color: var(--laranja); }
.stats-band .stats-sub { font-size: 14px; line-height: 1.5; color: #cfe9e1; }
/* 2026-09-06 (Walace, 6ª rodada): "nenhum momento disse que eu queria um
   botão" — a 5ª rodada tinha adicionado um .btn aqui por iniciativa própria
   (não pedido), revertido. .stats-copy volta a ser só título + sub-copy,
   igual ao template master hero-v2. Regra .btn removida junto com o <a> no
   HTML. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.stat-block { border-top: 2px solid rgba(255,255,255,.15); padding-top: 14px; }
.stat-block .num {
  font-weight: 700;
  font-size: 34px;
  color: var(--laranja);
  line-height: 1;
  margin-bottom: 6px;
  display: block;
}
.stat-block p { font-size: 13px; color: #cfe9e1; }

/* FAQ */
.faq { padding: 60px 0; background: var(--bg-alt); }
.faq .section-head { margin-bottom: 26px; }
.faq h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--primary);
}
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.faq-item { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px -8px rgba(0,0,0,.12); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 20px;
  font-weight: 700;
  font-size: 15px;
  color: #1d1d1f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background .1s ease-out;
}
.faq-item summary:active { background: var(--bg-alt); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: #b0b0b5;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 20px 18px; font-size: 14px; color: #86868b; max-width: 68ch; }

/* Reviews / social proof — horizontal card carousel on mobile,
   grid on desktop. Company reply sits in its own tinted box so it
   reads as a secondary note under the customer's review. */
.reviews { padding: 60px 0 64px; background: var(--bg-alt); }
.reviews .section-head { margin-bottom: 26px; }
.reviews h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 28px;
  margin-bottom: 8px;
  color: var(--ink-green);
}
.reviews p.lead { color: var(--text-muted); font-size: 15px; }

.ratings-summary-toggle {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px 4px;
}
.ratings-summary-toggle::-webkit-details-marker { display: none; }
.ratings-summary-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--ink-green);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ratings-summary-title .chevron { display: inline-block; color: #b0b0b5; transition: transform .2s ease; }
.ratings-summary[open] .ratings-summary-title .chevron { transform: rotate(90deg); }
.ratings-score { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ratings-score strong { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 40px; color: var(--ink-green); line-height: 1; }
.ratings-score-side { display: flex; flex-direction: column; gap: 3px; }
.ratings-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.ratings-breakdown { display: flex; flex-direction: column; gap: 6px; padding: 0 22px 18px; }
.ratings-bar-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.ratings-bar-row .bar { flex: 1; height: 5px; background: #e5e5ea; border-radius: 3px; overflow: hidden; }
.ratings-bar-row .bar span { display: block; height: 100%; background: var(--ink-green); }
.reviews-most-helpful {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink-green);
  padding: 10px 22px 4px;
}

@media (max-width: 719px) {
  .ratings-summary[open] ~ .reviews-scroll {
    display: flex;
    flex-direction: column;
    overflow: visible;
    scroll-snap-type: none;
    padding: 6px 24px 12px;
  }
  .ratings-summary[open] ~ .reviews-scroll .review-card {
    width: 100%;
    max-width: none;
    scroll-snap-align: none;
  }
}

.reviews-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 24px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reviews-scroll::-webkit-scrollbar { display: none; }

.review-card {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 92vw;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px -8px rgba(0,0,0,.12);
}
.review-card h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink-green); }
.review-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #86868b; }
.review-stars { font-size: 13px; letter-spacing: 1px; }
.review-stars .filled { color: #1d1d1f; }
.review-stars .empty { color: #d2d2d7; }
.review-text { font-size: 14px; color: #86868b; }
.review-reply summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  color: var(--laranja-dark);
}
.review-reply summary::-webkit-details-marker { display: none; }
.review-reply summary::after {
  content: "+";
  font-size: 16px;
  font-weight: 400;
  transition: transform .2s ease;
}
.review-reply[open] summary::after { transform: rotate(45deg); }
.review-reply p {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.reviews-carousel { position: relative; }

.reviews-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-green);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(13, 36, 31, .14);
  transition: background .15s ease, box-shadow .15s ease;
}
.reviews-arrow:hover { background: var(--bg-alt); box-shadow: 0 6px 18px rgba(13, 36, 31, .2); }
.reviews-arrow--prev { left: 0; }
.reviews-arrow--next { right: 0; }

@media (min-width: 720px) {
  .reviews-carousel {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .reviews-scroll {
    gap: 22px;
    max-width: none;
    margin: 0;
    padding: 6px 0 24px;
    cursor: grab;
  }
  .reviews-scroll.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .review-card {
    flex: 0 0 31%;
    max-width: none;
    scroll-snap-align: start;
  }
  .reviews-arrow { display: flex; }
}

/* Services (homepage) + Sub-services (per-service page problem list) */
.services, .subservices { padding: 60px 0; }
.services .section-head, .subservices .section-head { margin-bottom: 30px; }
.services h2, .subservices h2 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 8px;
  color: var(--primary);
}
.services p.lead, .subservices p.lead { color: var(--text-muted); font-size: 15px; }
.subservices { background: var(--bg-alt); }

.service-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 6px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .15s ease, padding-left .15s ease;
}
.service-row:hover { background: var(--bg-alt); padding-left: 12px; }
.service-row:active { background: var(--bg-alt); transform: scale(.99); transition: transform .1s ease-out, background .1s ease-out; }
.service-row .left { display: flex; align-items: center; gap: 18px; }
.service-row .ico {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 12px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.service-row .ico svg { width: 24px; height: 24px; stroke: #fff; }
.service-row:nth-child(2n) .ico { background: var(--laranja); }
.service-row h3 { font-size: 17px; color: var(--primary); margin-bottom: 3px; }
.service-row p { font-size: 13px; color: var(--text-muted); }
.service-row .arrow {
  font-size: 20px;
  color: var(--laranja);
  transition: transform .15s ease;
  flex-shrink: 0;
}
.service-row:hover .arrow { transform: translateX(4px); }

/* Coverflow services carousel (photo-based, replaces icon list on eletrica.html) */
/* Dark, atmospheric backdrop scoped to THIS section only (via the --coverflow
   modifier) — .subservices itself stays untouched for the other pages that
   share it (eletricista-24h, canalizacao, eletricista-porto-gaia-matosinhos). */
.subservices--coverflow {
  position: relative;
  overflow: hidden;
  /* Fallback only — the real atmosphere is the blurred photo in
     .coverflow-ambience below, exactly like the 21st.dev reference (the
     ambience is the *current card's own photo*, blown up + blurred + darkened,
     not a flat tinted background). Deep P24 green, not black. */
  background: radial-gradient(140% 100% at 50% 0%, #0f4a3d 0%, #073D32 42%, #051f1a 78%, #03110d 100%);
  padding-bottom: 44px;
}
.subservices--coverflow > .container,
.subservices--coverflow > .coverflow { position: relative; z-index: 1; }

/* Ambience: the active card's photo, full-bleed behind the whole section,
   blurred and darkened into a soft glow — this is what actually reads as
   "atmosphere" in the reference, not a static color. Two stacked layers
   crossfade so switching cards never hard-cuts. */
.coverflow-ambience { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.coverflow-ambience-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.24) blur(38px);
  transform: scale(1.15);
  opacity: 0;
  transition: opacity .7s ease;
}
.coverflow-ambience-img.is-active { opacity: 1; }
.coverflow-ambience::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(7, 45, 38, .38) 0%, rgba(4, 22, 18, .96) 100%);
}

.subservices--coverflow .eyebrow { color: var(--laranja); }
.subservices--coverflow h2 { color: #fff; }
.subservices--coverflow p.lead { color: rgba(255, 255, 255, .68); }

/* Centered header composition: thin line — EYEBROW — thin line, H2 and lead
   centered beneath, so it doesn't read as a big left-aligned block competing
   with the coverflow underneath it. */
.section-head--centered { text-align: center; max-width: 640px; margin: 0 auto; }
.eyebrow--flanked { justify-content: center; width: 100%; }
.eyebrow--flanked::before,
.eyebrow--flanked::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .45;
}

/* --- Coverflow stage: absolutely-positioned 3D stack, index-driven (ported
   1:1 from the 21st.dev CoverFlowCarousel reference) — NOT a scrollable/flex
   row. JS computes transform/opacity/z-index/filter per card from its offset
   to the active index and writes them as inline styles each render. --- */
.coverflow { position: relative; }
.coverflow-stage {
  position: relative;
  height: 450px;
  perspective: 1400px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.coverflow-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(70vw, 280px);
  aspect-ratio: 32 / 45;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #0c211b;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 15px 35px rgba(0, 0, 0, .5);
  transform: translate(-50%, -50%);
  transition: transform .8s cubic-bezier(.25, 1, .5, 1), opacity .8s cubic-bezier(.25, 1, .5, 1), box-shadow .3s ease;
}
.coverflow-card.is-center {
  box-shadow: 0 25px 60px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .35);
}
.coverflow-card picture,
.coverflow-card img {
  position: absolute;
  inset: 0;
  will-change: filter;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Coverflow card tile — honest fallback for subservices without a real
   photo yet. Same green/dot-pattern/icon language as .symptoms-visual, so
   it reads as an intentional brand tile, not a broken/missing image. Swap
   for a <picture>/<img> per card once photography exists. */
.coverflow-card-tile {
  position: absolute;
  inset: 0;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.coverflow-card-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}
.coverflow-card-tile svg {
  position: relative;
  z-index: 1;
  width: 30%;
  height: 30%;
  stroke: var(--laranja);
  opacity: .55;
}
.coverflow-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .55) 66%, rgba(0, 0, 0, .94) 100%);
}
.coverflow-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease .1s;
}
/* Only the center/active card shows its content — side cards keep the photo
   visible but the text drops out so it never competes with the protagonist. */
.coverflow-card.is-center .coverflow-card-body { opacity: 1; pointer-events: auto; }
.coverflow-card-title {
  font-weight: 650;
  font-size: 17px;
  line-height: 1.2;
}
.coverflow-card-desc { font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.coverflow-card-btn.btn { margin-top: 9px; padding: 9px 16px; font-size: 12.5px; align-self: flex-start; border-radius: 999px; }
/* Clean solid button inside carousel cards — no glow/neon/luminous shadow,
   just a solid small orange button (2026-09-02 correction). Pill radius
   (999px) matches the site's standard CTA rounding (see the hero button's
   "generous rounding" rule above) — the base .btn's 10px read as noticeably
   less rounded than the rest of the page (2026-09-04 correction). */
.coverflow-card-btn.btn,
.coverflow-card-btn.btn:hover,
.coverflow-card-btn.btn:active {
  box-shadow: none;
}

.coverflow-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px);
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.coverflow-arrow:hover { background: rgba(255, 255, 255, .2); }
.coverflow-arrow--prev { left: 4px; }
.coverflow-arrow--next { right: 4px; }

.coverflow-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.coverflow-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.coverflow-dot.is-active { width: 22px; background: var(--laranja); }

@media (prefers-reduced-motion: reduce) {
  .coverflow-card { transition: opacity .3s ease !important; }
}

/* Symptoms (service pages) — two column editorial */
.symptoms { padding: 60px 0; background: var(--bg-alt); }
.symptoms .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.symptoms h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--primary);
  margin-bottom: 20px;
  letter-spacing: -.01em;
}
.symptoms ul { list-style: none; display: grid; gap: 12px; }
.symptoms li {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  color: #86868b;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px -8px rgba(0,0,0,.12);
}
.symptoms li svg { width: 16px; height: 16px; stroke: #b0b0b5; flex-shrink: 0; margin-top: 2px; }

.symptoms-visual {
  display: none;
  position: relative;
  background: var(--primary);
  border-radius: var(--radius-lg);
  min-height: 280px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.symptoms-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}
.symptoms-visual svg { position: relative; z-index: 1; width: 130px; height: 130px; stroke: var(--laranja); }

/* Symptoms visual — photo variant (eletrica.html only) */
.symptoms-visual--photo::before { content: none; }
.symptoms-visual--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Process */
.process { padding: 60px 0; }
.process h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--primary);
  margin-bottom: 36px;
  text-align: center;
}
.process .eyebrow { display: flex; justify-content: center; margin: 0 auto 12px; width: fit-content; }
.process .eyebrow::before { display: none; }
.steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 780px;
  margin: 0 auto;
}
.step { position: relative; z-index: 1; text-align: center; }
.step .num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 6px 14px -4px rgba(11,93,78,.4);
}
.step h3 { font-size: 15px; margin-bottom: 6px; color: var(--primary); }
.step p { font-size: 13px; color: var(--text-muted); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; background: var(--primary); color: #fff; padding: 44px 0; }
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 16px);
}
.cta-band .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.cta-band h3 { font-family: 'Montserrat', sans-serif; font-size: 21px; margin-bottom: 4px; }
.cta-band p { color: #cfe9e1; font-size: 14px; }

/* Trust row — social proof, sits between hero and stats-band */
.trust-row {
  padding: 16px 0;
  text-align: center;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-row p { font-size: 13px; font-weight: 600; color: var(--primary); }
.trust-row strong { color: var(--laranja); }

/* Breadcrumb */
.breadcrumb { padding: 14px 0 0; }
.breadcrumb .container { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.breadcrumb a { color: var(--primary); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }

/* City / area detail cards */
.city-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 28px;
}
.city-card {
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px -8px rgba(0,0,0,.12);
}
.city-card h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 16px; color: #1d1d1f; margin-bottom: 8px; }
.city-card p { font-size: 13px; color: #86868b; }

/* Areas served */
.areas { padding: 52px 0; text-align: center; }
.areas-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.areas h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 23px;
  color: var(--primary);
  margin-bottom: 18px;
}
.areas .eyebrow { justify-content: center; }
.areas .eyebrow::before { display: none; }
.areas .tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.areas .tags span {
  background: var(--bg-alt);
  color: var(--primary);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
}

/* Footer — deliberately a shade darker than .cta-final (var(--ink-green) vs
   var(--primary-dark)) plus a thin top seam and the site's existing subtle
   dot-pattern texture (same language as .symptoms-visual::before), so the
   CTA final → footer transition reads as two distinct zones instead of one
   continuous green block (2026-09-02 correction). */
footer {
  position: relative;
  background: var(--ink-green);
  color: #8fb8ac;
  padding: 52px 0 0;
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  pointer-events: none;
}
footer .container { position: relative; z-index: 1; }
footer a { color: #cfe9e1; text-decoration: none; }
footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand img { height: 58px; width: auto; margin-bottom: 12px; }
.footer-brand p { max-width: 36ch; line-height: 1.6; }
footer h3,
footer h4 {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 14px;
}
footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  padding: 20px 0;
  font-size: 12px;
}

/* Sticky mobile call bar */
.mobile-call-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--laranja); z-index: 60; display: flex; box-shadow: 0 -6px 18px rgba(0,0,0,.15); }
.mobile-call-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-weight: 800; font-size: 15px; padding: 16px; text-decoration: none; transition: background .1s ease-out; }
.mobile-call-bar a:active { background: rgba(0,0,0,.15); }
.mobile-call-bar svg { width: 18px; height: 18px; stroke: #fff; }

body { padding-bottom: 62px; }

/* Responsive */
@media (min-width: 720px) {
  body { padding-bottom: 0; }
  .mobile-call-bar { display: none; }

  header nav { display: flex; }
  .header-phone { display: block; }
  .header-cta { display: flex; }

  .hero .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .hero-text h1 { font-size: 50px; }
  .hero-visual { flex-shrink: 0; }
  .hero-panel { max-width: 300px; }
  .hero-photo-wrap { max-width: 340px; }

  .stats-band .container { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .stats-band .stats-copy { flex: 0 0 340px; max-width: 340px; margin-bottom: 0; }
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; flex: 1 1 auto; min-width: 0; }

  .service-list { border-top: none; }
  .services .service-list, .subservices .service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .service-row { border-top: 1px solid var(--line); }

  .coverflow-arrow { display: flex; }
  .coverflow-stage { height: 480px; }
  .coverflow-card { width: 320px; aspect-ratio: 4 / 5; }
  .coverflow-card-title { font-size: 20px; }
  .coverflow-card-desc { font-size: 13.5px; }
  .coverflow-card-btn.btn { margin-top: 12px; padding: 10px 20px; font-size: 13.5px; }

  .symptoms .grid { grid-template-columns: 1.1fr .9fr; }
  .symptoms-visual { display: flex; }

  .steps { grid-template-columns: repeat(3, 1fr); }
  .city-grid { grid-template-columns: repeat(3, 1fr); }
  .steps::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 16%;
    right: 16%;
    height: 2px;
    background-image: repeating-linear-gradient(90deg, rgba(11,93,78,.3) 0 8px, transparent 8px 18px);
    z-index: 0;
  }

  .cta-band .container { flex-direction: row; align-items: center; justify-content: space-between; }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

/* ============================================================
   VISUAL REFINEMENT — Elétrica page only (scoped to body.hero-v2,
   unique to servicos/eletrica.html). Lightens the green "wall"
   between Hero and Coverflow, opens desktop vertical rhythm, and
   unifies headings on light sections under the ink-green text
   color. Hero, Coverflow, CTA final and footer intentionally
   keep the deep-green identity moments untouched. Not replicated
   to any other page yet.
   ============================================================ */

/* Stats band: dark green wall -> light, off-white band */
body.hero-v2 .stats-band { background: var(--bg-alt); padding: 72px 0; }
body.hero-v2 .stats-glow-a,
body.hero-v2 .stats-glow-b { opacity: .5; }
body.hero-v2 .stats-lines { opacity: .16; }
body.hero-v2 .stats-band .stats-head { color: var(--ink-green); font-weight: 700; }
body.hero-v2 .stats-band .stats-sub { color: var(--text-muted); }
body.hero-v2 .stat-block { border-top-color: rgba(13,36,31,.12); }
body.hero-v2 .stat-block p { color: var(--text-muted); }

/* Headings on light sections -> ink-green, lighter weight */
body.hero-v2 .symptoms h2,
body.hero-v2 .process h2,
body.hero-v2 .areas h2,
body.hero-v2 .faq h2 { color: var(--ink-green); font-weight: 700; }
body.hero-v2 .step h3 { color: var(--ink-green); }
body.hero-v2 .city-card h3 { color: var(--ink-green); font-weight: 700; }

/* Reviews accents -> laranja (page-exclusive component, color only) */
.review-stars .filled { color: var(--laranja); }

/* Desktop breathing room on the light sections. Coverflow, Hero,
   CTA final and footer keep their current padding on purpose. */
@media (min-width: 720px) {
  body.hero-v2 .stats-band { padding: 108px 0; }
  body.hero-v2 .symptoms { padding: 100px 0; }
  body.hero-v2 .process { padding: 108px 0; }
  body.hero-v2 .areas { padding: 100px 0; }
  body.hero-v2 .reviews { padding: 100px 0 108px; }
  body.hero-v2 .faq { padding: 108px 0; }
}

/* Legal content pages (privacy/cookie policy) */
.legal-page { padding: 56px 0 80px; }
.legal-page .legal-updated { color: var(--text-muted); font-size: 14px; margin-bottom: 32px; }
.legal-content { max-width: 800px; }
.legal-content h1 { font-family: Montserrat, sans-serif; font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--primary); margin-bottom: 12px; }
.legal-content h2 { font-family: Montserrat, sans-serif; font-size: 22px; font-weight: 700; color: var(--ink-green); margin: 36px 0 12px; }
.legal-content h3 { font-size: 17px; font-weight: 700; color: var(--ink-green); margin: 20px 0 8px; }
.legal-content p { color: var(--text-muted); margin-bottom: 14px; }
.legal-content ul, .legal-content ol { color: var(--text-muted); margin: 0 0 14px 22px; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--primary-2); text-decoration: underline; }
.legal-content strong { color: var(--ink-green); }
.legal-content .confirm { background: #FFF4E8; border: 1px solid #FFD9AE; border-radius: var(--radius-sm); padding: 2px 6px; color: var(--laranja-dark); font-weight: 600; font-size: 0.95em; }
.legal-content .table-scroll {
  /* Wide comparison tables (cookie/data-processing lists) don't fit a
     390px mobile viewport without this: without a scoped scroll container
     the table's min-content width pushes past the viewport and causes a
     site-wide horizontal scrollbar. Scoping overflow to just the table
     keeps the rest of the page (and the fixed off-canvas nav) unaffected. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 18px;
}
.legal-content table { width: 100%; min-width: 480px; border-collapse: collapse; margin-bottom: 0; font-size: 14px; }
.legal-content th, .legal-content td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text-muted); }
.legal-content th { color: var(--ink-green); font-weight: 700; }

/* Cookie consent banner (see js/consent.js — inactive until a real
   analytics/ads tag is wired in, kept ready for that moment) */
.cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 74px;
  z-index: 80;
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -12px rgba(13,36,31,.28);
  padding: 20px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .25s ease, transform .25s ease;
}
.cookie-consent.is-visible { opacity: 1; transform: translateY(0); }
.cookie-consent-text { color: var(--text-muted); font-size: 13.5px; line-height: 1.5; margin-bottom: 14px; }
.cookie-consent-text a { color: var(--primary-2); text-decoration: underline; }
.cookie-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-consent-actions .btn,
.cookie-consent-actions .btn-outline { font-size: 13px; padding: 10px 16px; }

@media (min-width: 720px) {
  .cookie-consent { left: auto; right: 24px; bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent { transition: opacity .2s ease; transform: none; }
}

/* ============================================================
   Antes / Durante / Depois — real-photo progress gallery.
   Generic, reusable on any service page with a documented job.
   ============================================================ */
.ba-gallery { padding: 60px 0; background: var(--bg-alt); }
.ba-gallery .section-head { text-align: center; margin-bottom: 30px; }
.ba-gallery .section-head h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 23px;
  color: var(--primary);
}
.ba-gallery .eyebrow { justify-content: center; }
.ba-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ba-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 26px -14px rgba(13,36,31,.35);
  aspect-ratio: 4 / 5;
}
.ba-item picture, .ba-item img { width: 100%; height: 100%; object-fit: cover; }
.ba-item-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--primary);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.ba-item[data-phase="depois"] .ba-item-tag { background: var(--laranja); }
.ba-item-scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(4,22,18,.75), rgba(4,22,18,0));
  pointer-events: none;
}
.ba-item-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

@media (min-width: 720px) {
  .ba-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

/* ============================================================
   Generic human CTA — "Fale com a nossa equipa". No avatar/photo
   by design (name/photo swap-in requires explicit approval).
   Placed after FAQ, before the closing phone cta-band.
   ============================================================ */
.cta-human { padding: 50px 0; }
.cta-human-card {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px -18px rgba(13,36,31,.3);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.cta-human-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--laranja);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px -6px rgba(255,122,41,.55);
}
.cta-human-icon svg { width: 26px; height: 26px; stroke: #fff; }
.cta-human-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--primary);
}
.cta-human-card p { color: var(--text-muted); font-size: 14px; max-width: 46ch; }
.cta-human-card .btn { margin-top: 4px; }

@media (min-width: 720px) {
  .cta-human-card { flex-direction: row; text-align: left; padding: 32px 40px; gap: 24px; }
  .cta-human-card > div { flex: 1 1 auto; }
  .cta-human-card .btn { margin-top: 0; flex-shrink: 0; }
}

/* ============================================================
   DEDICATED SERVICE LANDING PAGE — breadcrumb only.
   2026-09-01 correction (Walace): dedicated pages must NOT have their
   own header/logo/past-hero behavior anymore — that divergent block
   (38px logo, solid-green past-hero header, extra hero padding) was
   the root cause of the logo-size bug and the now-rejected green-bar
   scroll behavior. Dedicated pages use body class
   "hero-v2 dedicated-service-page page-<slug>" and inherit the exact
   same header/logo/hamburger/hero rules as the hub pages (including
   servicos/eletrica.html, the sole MASTER) from the shared body.hero-v2
   rules above. dedicated-service-page now only scopes the one thing
   that is genuinely page-specific content: hiding the breadcrumb trail
   (hubs don't have a breadcrumb at all).
   2026-09-04 (Walace): hidden at ALL widths now, not just mobile —
   was mobile-only before, he asked it gone on desktop too. The
   BreadcrumbList JSON-LD is untouched, only the visible bar is hidden.
   ============================================================ */
body.dedicated-service-page .breadcrumb { display: none; }

/* ============================================================
   Vertical cross-links — dedicated service pages only. Simple
   card grid linking to sibling pages within the same vertical,
   plus one generalist card back to the hub. Deliberately NOT the
   hub's own .subservices--coverflow (different purpose/scope: the
   hub browses all its own sub-services, this cross-links siblings).
   ============================================================ */
.vertical-links { padding: 52px 0; background: var(--bg-alt); }
.vertical-links .section-head { margin-bottom: 26px; }
.vertical-links h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--ink-green);
}
.vertical-links-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.vertical-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border-radius: 18px;
  padding: 18px 20px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px -8px rgba(0,0,0,.12);
  transition: transform .1s ease-out, box-shadow .15s ease;
}
.vertical-link-card:hover { box-shadow: 0 10px 26px -10px rgba(13,36,31,.22); }
.vertical-link-card:active { transform: scale(.99); }
.vertical-link-card .ico {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.vertical-link-card .ico svg { width: 22px; height: 22px; stroke: #fff; }
.vertical-link-card--generalist .ico { background: var(--laranja); }
.vertical-link-card-body { flex: 1 1 auto; min-width: 0; }
.vertical-link-card h3 { font-size: 15.5px; color: var(--ink-green); margin-bottom: 2px; }
.vertical-link-card p { font-size: 12.5px; color: var(--text-muted); }
.vertical-link-card .arrow { font-size: 20px; color: var(--laranja); flex-shrink: 0; transition: transform .15s ease; }
.vertical-link-card:hover .arrow { transform: translateX(4px); }

@media (min-width: 720px) {
  .vertical-links-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ============================================================
   Apple-style final CTA — the circle IS the link (no card/box).
   Replaces .cta-human + .cta-band on dedicated service pages.
   Sits on the deep-green surface, matching the identity-moments
   (Hero, Coverflow, Footer) that intentionally keep the dark
   brand color per the hero-v2 refinement notes above.
   ============================================================ */
.cta-final { padding: 88px 0; background: var(--primary-dark); text-align: center; }
.cta-final .eyebrow { justify-content: center; color: var(--laranja); margin-bottom: 6px; }
.cta-final .eyebrow::before { display: none; }
.cta-final h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  max-width: 22ch;
  margin: 0 auto 16px;
}
.cta-final p { color: #cfe9e1; font-size: 14px; max-width: 42ch; margin: 0 auto 42px; }

/* Small, icon-only circle — matches the Apple pattern (heading, supporting
   text, small tap-target circle, label below). No text inside the circle;
   the accessible name is carried by aria-label on the anchor instead. */
.cta-final-circle {
  width: 64px; height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--laranja);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 16px 40px -12px rgba(255,122,41,.55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta-final-circle:hover { transform: scale(1.06); box-shadow: 0 20px 48px -12px rgba(255,122,41,.65); }
.cta-final-circle:active { transform: scale(.95); transition: transform .1s ease-out; }
.cta-final-circle svg { width: 26px; height: 26px; stroke: #fff; }

/* Label lives outside/below the circle, not inside it. */
.cta-final-label {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cta-final-label-text { font-weight: 800; font-size: 15px; color: #fff; letter-spacing: -.01em; }
.cta-final-label-number { font-weight: 600; font-size: 12.5px; color: rgba(255,255,255,.7); }

.cta-final-note { margin-top: 34px; font-size: 12.5px; color: rgba(255,255,255,.6); }

@media (min-width: 720px) {
  .cta-final { padding: 120px 0; }
  .cta-final-circle { width: 76px; height: 76px; }
  .cta-final-circle svg { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-final-circle { transition: none; }
}