/* =============================================================================
   AM ENGENHARIA — v2 · Identidade real da marca
   Azul profundo + gradiente, branco, laranja de acento, fotos reais.
   Mobile-first. Tokens no :root — nenhum valor fora da escala.
   ========================================================================== */

:root {
  /* ---- Cores por papel (do logo e do material da AM) ---- */
  --azul-900: #0B2F6B;   /* azul profundo — títulos, fundos                  */
  --azul-800: #12408C;
  --azul-700: #1B4B9E;   /* azul do logo — links, botão primário             */
  --azul-500: #1E7FE0;   /* azul vivo do logo — acento gráfico, ícones       */
  --azul-300: #6FB4F2;
  --azul-100: #DCEBFB;   /* superfície azul clara — cards, faixas            */
  --azul-050: #F2F8FE;
  --laranja:  #EE7014;   /* acento GRÁFICO (barras, ícones, bordas — mín. 3:1)*/
  --laranja-cta: #C2570A;/* fundo de CTA com texto branco (4,50:1)            */
  --laranja-escuro: #B24A06; /* laranja para TEXTO pequeno (4,6:1)           */
  --branco:   #FFFFFF;
  --nevoa:    #F6F9FC;
  --grafite:  #16202E;   /* texto principal                                  */
  --cinza-600:#54637A;   /* texto secundário (5,6:1 sobre branco)            */
  --cinza-300:#C9D6E4;
  --cinza-100:#E8EFF6;

  /* Gradiente-assinatura (o do material da AM) */
  --grad-marca: linear-gradient(135deg, #0B2F6B 0%, #17458F 45%, #1A61AC 100%);
  --grad-agua:  linear-gradient(135deg, #1B6BC4 0%, #3D95E8 100%);
  --grad-fogo:  linear-gradient(135deg, #EE7014 0%, #F79A4E 100%);

  /* ---- Espaçamento base 8 ---- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem;
  --s-20:5rem; --s-24:6rem;
  --secao: clamp(3.5rem, 8vw, 6.5rem);
  --secao-g: clamp(4.5rem, 11vw, 9rem);

  /* ---- Tipografia fluida (máx ≤ 2,5× o mín) ---- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-h1:    clamp(2.125rem, 1.45rem + 3.375vw, 4rem);      /* 34 → 64 */
  --fs-h2:    clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);      /* 28 → 44 */
  --fs-h3:    clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem);      /* 20 → 24 */
  --fs-lead:  clamp(1.125rem, 1.06rem + 0.31vw, 1.3125rem);  /* 18 → 21 */
  --fs-body:  clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);   /* 17 → 18 */
  --fs-sm:    clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);  /* 14 → 15 */
  --fs-xs:    0.8125rem;                                     /* 13      */
  --fs-num:   clamp(2rem, 1.4rem + 3vw, 3.5rem);             /* 32 → 56 */

  /* ---- Layout ---- */
  --max: 75rem;
  --margem: clamp(1.25rem, 5vw, 3rem);

  /* ---- Raios e elevação ---- */
  --r-s: 8px; --r-m: 16px; --r-g: 28px; --r-pill: 999px;
  --sombra-s: 0 1px 2px rgba(11,47,107,.06), 0 4px 12px -6px rgba(11,47,107,.16);
  --sombra-m: 0 2px 4px rgba(11,47,107,.05), 0 16px 32px -18px rgba(11,47,107,.28);
  --sombra-g: 0 4px 8px rgba(11,47,107,.06), 0 32px 60px -28px rgba(11,47,107,.35);
  --sombra-azul: 0 12px 32px -12px rgba(30,127,224,.45);

  /* ---- Motion tokens ---- */
  --motion-fast: 200ms;
  --motion-base: 480ms;
  --motion-slow: 800ms;
  --ease-am: cubic-bezier(.22, 1, .36, 1);
  --stagger: 70ms;
  --enter: 28px;

  --toque: 48px;
}

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

/* [hidden] precisa vencer qualquer display definido por classe (.btn é
   inline-flex, .painel-calc é grid…). Sem isto, esconder por atributo falha. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--azul-500) var(--azul-050);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--azul-050); }
::-webkit-scrollbar-thumb {
  background: var(--grad-agua); border-radius: var(--r-pill);
  border: 2px solid var(--azul-050);
}
::-webkit-scrollbar-thumb:hover { background: var(--azul-700); }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grafite);
  background: var(--branco);
  min-height: 100svh;
  overflow-x: clip;
}
::selection { background: var(--azul-500); color: #fff; }

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: max(1rem, 16px); }

h1, h2, h3, h4 { line-height: 1.18; font-weight: 700; letter-spacing: -.02em; color: var(--azul-900); }
h1 { font-size: var(--fs-h1); letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.01em; }
p { max-width: 68ch; }

a { color: var(--azul-700); text-underline-offset: .2em; text-decoration-thickness: 1px;
    transition: color var(--motion-fast) var(--ease-am), text-decoration-thickness var(--motion-fast) var(--ease-am); }
a:hover { color: var(--azul-500); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 2px; border-radius: var(--r-s); }
.fundo-azul :focus-visible, .cta-zap:focus-visible, .zap-fixo:focus-visible { outline-color: #fff; }

.num { font-variant-numeric: tabular-nums; }

/* --------------------------- UTILITÁRIOS -------------------------------- */
.container { width: min(100% - 2*var(--margem), var(--max)); margin-inline: auto; }

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

.fundo-azul { background: var(--grad-marca); color: #fff; }
.fundo-azul h1, .fundo-azul h2, .fundo-azul h3 { color: #fff; }
.fundo-azul p { color: rgba(255,255,255,.94); }
.fundo-claro { background: var(--nevoa); }

/* Curva d'água entre seções — assinatura visual da marca */
.onda { display: block; width: 100%; height: auto; }
.onda path { fill: currentColor; }

.olho {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--azul-700); margin-bottom: var(--s-4);
}
.olho::before {
  content: ""; width: 24px; height: 3px; border-radius: var(--r-pill);
  background: var(--laranja); flex-shrink: 0;
}
.fundo-azul .olho { color: #CDE6FC; }

.secao { padding-block: var(--secao); }
.secao-g { padding-block: var(--secao-g); }
.secao-header { max-width: 46rem; margin-bottom: var(--s-12); }
.secao-header p { color: var(--cinza-600); font-size: var(--fs-lead); margin-top: var(--s-4); }
.fundo-azul .secao-header p { color: rgba(255,255,255,.94); }

.realce { color: var(--azul-500); }
.realce-laranja { color: var(--laranja-escuro); }
.fundo-azul .realce-laranja { color: #FFC28A; }

/* ------------------------------ BOTÕES ---------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--toque); padding: var(--s-3) var(--s-6);
  border: 2px solid transparent; border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--fs-body); text-decoration: none;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--motion-fast) var(--ease-am),
              box-shadow var(--motion-fast) var(--ease-am),
              background-color var(--motion-fast) var(--ease-am),
              border-color var(--motion-fast) var(--ease-am);
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn::after {
  content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.18);
  transform: translateX(-101%); transition: transform var(--motion-base) var(--ease-am);
  pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(0); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primario { background: var(--azul-700); color: #fff; box-shadow: var(--sombra-azul); }
.btn-primario:hover { background: var(--azul-800); color: #fff; box-shadow: 0 16px 40px -12px rgba(30,127,224,.55); }

.cta-zap { background: var(--laranja-cta); color: #fff; box-shadow: 0 12px 28px -12px rgba(194,87,10,.55); }
.cta-zap:hover { background: #AE4D06; color: #fff; }
.cta-zap::after { background: rgba(255,255,255,.22); }

.btn-contorno { background: transparent; color: var(--azul-700); border-color: var(--cinza-300); }
.btn-contorno:hover { border-color: var(--azul-700); color: var(--azul-700); background: var(--azul-050); }
.fundo-azul .btn-contorno, .hero .btn-contorno, .pagina-topo .btn-contorno { color: #fff; border-color: rgba(255,255,255,.55); }
.fundo-azul .btn-contorno:hover, .hero .btn-contorno:hover, .pagina-topo .btn-contorno:hover { border-color: #fff; background: rgba(255,255,255,.14); color: #fff; }
.fundo-azul .btn-contorno::after, .hero .btn-contorno::after, .pagina-topo .btn-contorno::after { background: rgba(255,255,255,.16); }

.btn-sm { padding: var(--s-2) var(--s-5); font-size: var(--fs-sm); }

/* ------------------------------ HEADER ---------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: transform var(--motion-base) var(--ease-am),
              box-shadow var(--motion-base) var(--ease-am),
              border-color var(--motion-base) var(--ease-am);
}
.header.rolado { box-shadow: var(--sombra-s); border-bottom-color: var(--cinza-100); }
.header.oculto { transform: translateY(-100%); }
.header.menu-ativo.oculto { transform: translateY(0); }
/* com o menu aberto o header fica opaco: o backdrop não pode escurecer o logo */
.header.menu-ativo { background: var(--branco); box-shadow: var(--sombra-s); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 72px; padding-block: var(--s-2);
}
.logo-lockup { display: block; flex-shrink: 0; }
.logo-lockup img { height: 38px; width: auto; }
@media (min-width: 768px) { .logo-lockup img { height: 46px; } }

.nav-acoes { display: flex; align-items: center; gap: var(--s-4); }
.nav-links { display: none; }
@media (min-width: 960px) {
  .nav-links { display: flex; gap: var(--s-6); list-style: none; }
  .nav-links a {
    color: var(--grafite); text-decoration: none; font-size: var(--fs-sm);
    font-weight: 600; position: relative; padding-block: var(--s-3); display: block;
  }
  .nav-links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: var(--s-1); height: 3px;
    border-radius: var(--r-pill); background: var(--laranja);
    transform: scaleX(0); transform-origin: left; transition: transform var(--motion-fast) var(--ease-am);
  }
  .nav-links a:hover { color: var(--azul-700); }
  .nav-links a:hover::after { transform: scaleX(1); }
}
.some-no-mobile { display: none; }
@media (min-width: 560px) { .some-no-mobile { display: inline-flex; } }

/* ========================== MENU MOBILE ================================= */
.menu-btn {
  display: grid; place-content: center;
  width: var(--toque); height: var(--toque);
  border: 2px solid var(--cinza-300); border-radius: var(--r-s);
  background: var(--branco); cursor: pointer; flex-shrink: 0;
  transition: border-color var(--motion-fast) var(--ease-am), background var(--motion-fast) var(--ease-am);
}
.menu-btn:hover { border-color: var(--azul-500); background: var(--azul-050); }
@media (min-width: 960px) { .menu-btn { display: none; } }

.menu-icone { display: grid; gap: 5px; width: 22px; }
.menu-icone i {
  display: block; height: 2.5px; width: 100%;
  background: var(--azul-900); border-radius: var(--r-pill);
  transform-origin: center;
  transition: transform var(--motion-base) var(--ease-am), opacity var(--motion-fast) var(--ease-am);
}
/* hambúrguer → X */
.menu-btn[aria-expanded="true"] .menu-icone i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icone i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-btn[aria-expanded="true"] .menu-icone i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.menu-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(11,47,107,.5);
  opacity: 0; transition: opacity var(--motion-base) var(--ease-am);
}
.menu-backdrop.visivel { opacity: 1; }
@media (min-width: 960px) { .menu-backdrop { display: none; } }

.menu-mobile {
  position: fixed; inset: 72px 0 auto 0; z-index: 58;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-100);
  box-shadow: var(--sombra-g);
  padding: var(--s-4) var(--margem) var(--s-6);
  display: grid; gap: var(--s-5);
  max-height: calc(100svh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-12px); opacity: 0;
  transition: transform var(--motion-base) var(--ease-am), opacity var(--motion-base) var(--ease-am);
}
.menu-mobile.visivel { transform: translateY(0); opacity: 1; }
@media (min-width: 960px) { .menu-mobile { display: none; } }

.menu-lista { list-style: none; display: grid; }
.menu-lista a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: var(--s-2) 0;
  color: var(--azul-900); font-weight: 700; font-size: var(--fs-lead);
  text-decoration: none;
  border-bottom: 1px solid var(--cinza-100);
  transition: color var(--motion-fast) var(--ease-am), padding-left var(--motion-fast) var(--ease-am);
}
.menu-lista a::after {
  content: ""; width: 9px; height: 9px; flex-shrink: 0;
  border-right: 2.5px solid var(--azul-500); border-bottom: 2.5px solid var(--azul-500);
  transform: rotate(-45deg);
  transition: transform var(--motion-fast) var(--ease-am);
}
.menu-lista a:hover, .menu-lista a:focus-visible { color: var(--azul-700); padding-left: var(--s-2); }
.menu-lista a:hover::after { transform: rotate(-45deg) translate(2px, 2px); }
.menu-lista li:last-child a { border-bottom: 0; }

.menu-ctas { display: grid; gap: var(--s-3); }
.menu-ctas .btn { width: 100%; }

/* trava o scroll do fundo com o menu aberto */
body.menu-aberto { overflow: hidden; }

/* =============================== HERO ==================================== */
.hero {
  position: relative;
  padding-top: calc(72px + var(--s-12));
  background: var(--grad-marca);
  color: #fff; overflow: hidden; isolation: isolate;
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none;
}
.hero::before {
  width: 62vw; height: 62vw; top: -20vw; right: -16vw;
  background: radial-gradient(circle at 35% 35%, rgba(111,180,242,.42), transparent 66%);
}
.hero::after {
  width: 44vw; height: 44vw; bottom: -14vw; left: -14vw;
  background: radial-gradient(circle at 50% 50%, rgba(238,112,20,.24), transparent 68%);
}

.hero-grid { display: grid; gap: var(--s-10); align-items: center; padding-bottom: var(--s-16); }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-16); } }

.hero .olho { color: #CDE6FC; }
.hero-selo {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-pill); padding: var(--s-2) var(--s-4);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .03em;
  margin-bottom: var(--s-6);
}
.hero-selo svg { width: 16px; height: 16px; flex-shrink: 0; }
.hero h1 { color: #fff; max-width: 17ch; }
.hero h1 .destaque { color: #FFC28A; }
.hero-lead { font-size: var(--fs-lead); margin-top: var(--s-6); max-width: 48ch; color: rgba(255,255,255,.94); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-8); }
.hero-nota { margin-top: var(--s-5); font-size: var(--fs-sm); color: rgba(255,255,255,.86); }

.hero-provas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4);
  margin-top: var(--s-10); padding-top: var(--s-8);
  border-top: 1px solid rgba(255,255,255,.2);
}
.hero-prova .n { font-size: var(--fs-h3); font-weight: 800; color: #fff; display: block; font-variant-numeric: tabular-nums; }
.hero-prova .t { font-size: var(--fs-xs); color: rgba(255,255,255,.88); line-height: 1.4; }

/* Arte recortada (PNG/WebP com transparência) flutuando sobre o gradiente —
   sem moldura de foto: a sombra vai no próprio recorte, não numa caixa. */
.hero-arte { position: relative; display: grid; gap: var(--s-6); justify-items: center; }
.hero-arte picture { display: block; width: 100%; }
.hero-arte img {
  width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(4,20,48,.45));
}
.hero-card {
  width: 100%;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-radius: var(--r-m); padding: var(--s-4) var(--s-5);
  box-shadow: var(--sombra-m); display: flex; align-items: center; gap: var(--s-4);
}
.hero-card .icone {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-s);
  background: var(--azul-100); display: grid; place-content: center; color: var(--azul-700);
}
.hero-card .icone svg { width: 24px; height: 24px; }
.hero-card .txt { font-size: var(--fs-sm); color: var(--cinza-600); line-height: 1.45; }
.hero-card .txt strong { display: block; color: var(--azul-900); font-size: var(--fs-body); }

.hero-onda { color: var(--branco); margin-bottom: -1px; }

/* ============================ PROMESSAS ================================== */
.promessas-grid { display: grid; gap: var(--s-6); }
@media (min-width: 640px) { .promessas-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .promessas-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.promessa {
  background: var(--branco); border: 1px solid var(--cinza-100); border-radius: var(--r-m);
  padding: var(--s-6); display: grid; gap: var(--s-3); align-content: start;
  transition: transform var(--motion-base) var(--ease-am),
              box-shadow var(--motion-base) var(--ease-am),
              border-color var(--motion-base) var(--ease-am);
}
.promessa:hover { transform: translateY(-6px); box-shadow: var(--sombra-m); border-color: var(--azul-100); }
.promessa .icone {
  width: 56px; height: 56px; border-radius: var(--r-m);
  background: var(--grad-agua); color: #fff; display: grid; place-content: center;
  box-shadow: var(--sombra-azul);
  transition: transform var(--motion-base) var(--ease-am);
}
.promessa.quente .icone { background: var(--grad-fogo); box-shadow: 0 12px 28px -12px rgba(238,112,20,.5); }
.promessa:hover .icone { transform: scale(1.06) rotate(-4deg); }
.promessa .icone svg { width: 28px; height: 28px; }
.promessa p { font-size: var(--fs-sm); color: var(--cinza-600); }

/* ============================== SOBRE ==================================== */
.sobre-grid { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 900px) { .sobre-grid { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }
.sobre-arte { display: grid; place-items: center; padding: var(--s-4); }
.sobre-arte picture { display: block; width: 100%; }
.sobre-arte img {
  width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(11,47,107,.22));
}
.sobre-lista { list-style: none; display: grid; gap: var(--s-4); margin-top: var(--s-8); }
.sobre-lista li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-body); }
.sobre-lista .check {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-top: 3px;
  background: var(--azul-100); color: var(--azul-700); display: grid; place-content: center;
}
.sobre-lista .check svg { width: 15px; height: 15px; }
.sobre-lista strong { color: var(--azul-900); }

/* ============================= SERVIÇOS ================================== */
.servicos-grid { display: grid; gap: var(--s-6); }
@media (min-width: 700px) { .servicos-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1050px) { .servicos-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.servico {
  position: relative; overflow: hidden;
  background: var(--branco); border: 1px solid var(--cinza-100); border-radius: var(--r-m);
  padding: var(--s-8) var(--s-6) var(--s-6);
  display: grid; gap: var(--s-3); align-content: start;
  transition: transform var(--motion-base) var(--ease-am), box-shadow var(--motion-base) var(--ease-am);
}
.servico::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad-agua); transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-base) var(--ease-am);
}
.servico:hover { transform: translateY(-6px); box-shadow: var(--sombra-m); }
.servico:hover::before { transform: scaleX(1); }
.servico .n { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; color: var(--azul-700); }
.servico > p { font-size: var(--fs-sm); color: var(--cinza-600); }
.servico ul { list-style: none; display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--cinza-600); }
.servico ul li { padding-left: var(--s-5); position: relative; }
.servico ul li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--laranja);
}
.servico .assinado {
  font-size: var(--fs-xs); color: var(--cinza-600);
  border-top: 1px solid var(--cinza-100); padding-top: var(--s-3); margin-top: var(--s-2);
}
.servico.destaque { background: var(--grad-marca); border-color: transparent; color: #fff; }
.servico.destaque h3 { color: #fff; }
.servico.destaque .n { color: #CDE6FC; }
.servico.destaque > p, .servico.destaque ul { color: rgba(255,255,255,.94); }
.servico.destaque ul li::before { background: #FFC28A; }
.servico.destaque .assinado { color: rgba(255,255,255,.88); border-top-color: rgba(255,255,255,.22); }
.servico.destaque::before { background: var(--grad-fogo); }

.feed { display: grid; gap: var(--s-2); margin-block: var(--s-2); }
.feed-linha {
  display: flex; gap: var(--s-3); align-items: baseline;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-s); padding: var(--s-2) var(--s-3);
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}
.feed-linha .hora { color: rgba(255,255,255,.86); flex-shrink: 0; }
.feed-linha.alerta { background: rgba(238,112,20,.24); border-color: rgba(255,178,120,.5); }
.feed-linha.alerta .ev { color: #FFDCC2; font-weight: 700; }

/* =========================== O PROBLEMA ================================== */
.comparativo { display: grid; gap: var(--s-6); }
@media (min-width: 800px) { .comparativo { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.comp-card { border-radius: var(--r-m); padding: var(--s-8) var(--s-6); display: grid; gap: var(--s-4); align-content: start; }
.comp-card.antes { background: var(--nevoa); border: 1px solid var(--cinza-300); }
.comp-card.depois { background: var(--grad-marca); color: #fff; box-shadow: var(--sombra-g); }
.comp-card.depois h3 { color: #fff; }
.comp-card .tag {
  justify-self: start; font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
}
.comp-card.antes .tag { background: var(--cinza-300); color: var(--grafite); }
.comp-card.depois .tag { background: var(--laranja-cta); color: #fff; }
.comp-card ul { list-style: none; display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.comp-card li { display: flex; gap: var(--s-3); align-items: flex-start; }
.comp-card li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.comp-card.antes li { color: var(--cinza-600); }
.comp-card.antes li svg { color: var(--cinza-600); }
.comp-card.depois li { color: rgba(255,255,255,.94); }
.comp-card.depois li svg { color: #FFC28A; }

.grafico-rateio { margin-top: var(--s-12); }
.barras {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.5rem, 2vw, 1.25rem);
  align-items: end; height: clamp(11rem, 30vw, 17rem);
  position: relative; padding-top: var(--s-10);
}
.barra-col { display: grid; grid-template-rows: 1fr auto; height: 100%; min-width: 0; }
.barra-wrap { position: relative; display: grid; align-items: end; }
.barra {
  height: 100%; border-radius: var(--r-s) var(--r-s) 0 0;
  background: var(--grad-agua); transform: scaleY(var(--h, 1)); transform-origin: bottom;
}
.barra-col.acima .barra { background: var(--grad-fogo); }
.barra-rot { padding-top: var(--s-2); text-align: center; font-size: var(--fs-xs); }
.barra-rot .ap { display: block; color: var(--cinza-600); }
.barra-rot .v { font-weight: 700; color: var(--azul-900); font-variant-numeric: tabular-nums; }
.linha-media {
  position: absolute; left: 0; right: 0; top: 39.4%;
  border-top: 2px dashed var(--laranja);
  transform: scaleX(var(--sx, 1)); transform-origin: left;
}
.linha-media .tag {
  position: absolute; left: 0; top: -2.3rem;
  background: var(--laranja-cta); color: #fff; font-size: var(--fs-xs); font-weight: 700;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); white-space: nowrap;
}
.grafico-legenda { font-size: var(--fs-sm); color: var(--cinza-600); margin-top: var(--s-6); }

.tabela-wrap { overflow-x: auto; margin-top: var(--s-6); }
table.dados { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 34rem; }
table.dados caption { text-align: left; color: var(--cinza-600); font-size: var(--fs-sm); padding-bottom: var(--s-3); }
table.dados th, table.dados td {
  text-align: right; padding: var(--s-3); border-bottom: 1px solid var(--cinza-100);
  font-variant-numeric: tabular-nums;
}
table.dados th:first-child, table.dados td:first-child { text-align: left; }
table.dados thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--cinza-600); font-weight: 700; }

/* ============================ ESCADA TARIFÁRIA =========================== */
.escada-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
  align-items: end; margin-top: var(--s-10);
}
@media (min-width: 900px) { .escada-grid { grid-template-columns: repeat(8, 1fr); } }
.escada-cel { display: grid; gap: var(--s-1); align-content: end; text-align: center; }
.escada-cel .deg-wrap { height: clamp(5rem, 15vh, 9rem); display: grid; align-items: end; }
.escada-cel .deg {
  height: 100%; border-radius: var(--r-s) var(--r-s) 0 0;
  background: var(--grad-agua); transform: scaleY(var(--alt, 1)); transform-origin: bottom;
}
.escada-cel.minima .deg { background: linear-gradient(180deg, var(--cinza-300), var(--cinza-100)); }
.escada-cel.aqui .deg { background: var(--grad-fogo); }
.escada-cel .faixa { font-size: var(--fs-xs); color: var(--cinza-600); }
.escada-cel .preco { font-weight: 800; color: var(--azul-900); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.escada-cel.aqui .preco { color: var(--laranja-escuro); }
.escada-cel .marca {
  font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--laranja-cta);
  border-radius: var(--r-pill); padding: 2px var(--s-2); margin-bottom: var(--s-2);
}

/* ============================== NÚMEROS ================================== */
.numeros-grid { display: grid; gap: var(--s-8); }
@media (min-width: 700px) { .numeros-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.numero { text-align: center; }
.numero .v {
  font-size: var(--fs-num); font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; display: block; color: #fff;
}
.numero .t { font-size: var(--fs-sm); color: rgba(255,255,255,.92); margin-top: var(--s-2); margin-inline: auto; }
.numero.destaque .v { color: #FFC28A; }

/* ============================== ETAPAS =================================== */
.etapas { display: grid; gap: var(--s-6); margin-top: var(--s-10); counter-reset: etapa; }
@media (min-width: 800px) { .etapas { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.etapa {
  position: relative; padding: var(--s-6);
  background: var(--branco); border: 1px solid var(--cinza-100); border-radius: var(--r-m);
  display: grid; gap: var(--s-2); align-content: start;
  transition: box-shadow var(--motion-base) var(--ease-am), transform var(--motion-base) var(--ease-am);
}
.etapa:hover { box-shadow: var(--sombra-m); transform: translateY(-4px); }
.etapa .passo {
  counter-increment: etapa; width: 40px; height: 40px; border-radius: 50%;
  background: var(--grad-agua); color: #fff; display: grid; place-content: center;
  font-weight: 800; margin-bottom: var(--s-2);
}
.etapa .passo::before { content: counter(etapa, decimal-leading-zero); }
.etapa .prazo { font-size: var(--fs-xs); font-weight: 700; color: var(--azul-700); text-transform: uppercase; letter-spacing: .08em; }
.etapa .impacto {
  font-size: var(--fs-xs); background: var(--azul-050); border-radius: var(--r-s);
  padding: var(--s-3); color: var(--cinza-600);
}
.etapa .impacto strong { color: var(--azul-900); }

/* ============================== CASO REAL ================================ */
.caso-card {
  background: var(--branco); border-radius: var(--r-g); box-shadow: var(--sombra-g);
  overflow: hidden; display: grid;
}
@media (min-width: 900px) { .caso-card { grid-template-columns: 1fr 1.15fr; } }
.caso-media {
  position: relative; min-height: 16rem; background: var(--grad-marca);
  display: grid; place-items: center; padding: var(--s-8) var(--s-6) var(--s-12);
  overflow: hidden;
}
.caso-media::before {           /* brilho atrás do prédio */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(111,180,242,.35), transparent 62%);
}
.caso-media picture { display: block; width: 100%; position: relative; z-index: 1; }
.caso-media img {
  width: 100%; height: auto; object-fit: contain; max-height: 30rem;
  filter: drop-shadow(0 22px 38px rgba(3,16,40,.5));
}
.caso-selo {
  position: absolute; left: var(--s-5); bottom: var(--s-5); z-index: 2;
  background: rgba(255,255,255,.96); border-radius: var(--r-m);
  padding: var(--s-3) var(--s-4); box-shadow: var(--sombra-m);
  font-size: var(--fs-xs); color: var(--cinza-600); line-height: 1.4;
}
.caso-selo strong { display: block; font-size: var(--fs-h3); color: var(--azul-900); font-variant-numeric: tabular-nums; }
.caso-corpo { padding: var(--s-8) var(--s-6); display: grid; gap: var(--s-5); align-content: center; }
@media (min-width: 768px) { .caso-corpo { padding: var(--s-12); } }
.caso-rubricas { display: grid; gap: var(--s-1); font-size: var(--fs-sm); }
.caso-rubricas .l {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-2); border-bottom: 1px dashed var(--cinza-300);
  font-variant-numeric: tabular-nums; color: var(--cinza-600);
}
.caso-rubricas .l.total {
  border-bottom: 0; border-top: 2px solid var(--azul-900); font-weight: 800;
  color: var(--azul-900); font-size: var(--fs-body); padding-top: var(--s-3); margin-top: var(--s-2);
}
.caso-nota { font-size: var(--fs-xs); color: var(--cinza-600); }

/* ============================== EQUIPE =================================== */
.equipe-grid { display: grid; gap: var(--s-8); margin-top: var(--s-10); }
@media (min-width: 768px) { .equipe-grid { grid-template-columns: repeat(2, 1fr); } }
.socia {
  background: var(--branco); border: 1px solid var(--cinza-100); border-radius: var(--r-m);
  overflow: hidden; display: grid; align-content: start;
  transition: box-shadow var(--motion-base) var(--ease-am);
}
.socia:hover { box-shadow: var(--sombra-m); }
.socia-foto { aspect-ratio: 3 / 2; background: var(--grad-marca); position: relative; display: grid; place-content: center; }
.socia-foto img { width: 100%; height: 100%; object-fit: cover; }
.socia-foto .inicial { font-size: 4rem; font-weight: 800; color: rgba(255,255,255,.25); }
.socia-foto .todo { position: absolute; right: var(--s-3); bottom: var(--s-3); font-size: var(--fs-xs); color: rgba(255,255,255,.88); }
.socia-corpo { padding: var(--s-6); display: grid; gap: var(--s-3); }
.socia .cargo { font-size: var(--fs-sm); font-weight: 700; color: var(--azul-700); }
.socia p { font-size: var(--fs-sm); color: var(--cinza-600); }
.socia blockquote {
  font-size: var(--fs-sm); font-style: italic; color: var(--azul-900);
  border-left: 3px solid var(--laranja); padding-left: var(--s-4);
}

/* ============================ SIMULADOR ================================== */
.simulador-card {
  background: var(--branco); border-radius: var(--r-g); box-shadow: var(--sombra-g);
  padding: var(--s-8) var(--s-6); display: grid; gap: var(--s-6);
}
@media (min-width: 768px) { .simulador-card { padding: var(--s-12); } }
.sim-campos { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .sim-campos { grid-template-columns: 1fr 1fr; } }
.sim-campos .cheio { grid-column: 1 / -1; }

.sim-resultado { display: none; gap: var(--s-5); }
.sim-resultado.visivel { display: grid; }
.sim-destaque { background: var(--grad-marca); color: #fff; border-radius: var(--r-m); padding: var(--s-8) var(--s-6); text-align: center; }
.sim-destaque .rot { font-size: var(--fs-sm); color: rgba(255,255,255,.92); }
.sim-destaque .v { font-size: var(--fs-num); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; display: block; margin-block: var(--s-2); }
.sim-destaque .sub { font-size: var(--fs-sm); color: #FFC28A; font-weight: 600; }
.sim-linhas { display: grid; gap: var(--s-1); font-size: var(--fs-sm); }
.sim-linhas .l { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); border-bottom: 1px solid var(--cinza-100); font-variant-numeric: tabular-nums; color: var(--cinza-600); }
.sim-acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ------------------------------ CAMPOS ---------------------------------- */
.campo { display: grid; gap: var(--s-2); }
.campo label, .campo legend { font-size: var(--fs-sm); font-weight: 700; color: var(--azul-900); }
.campo .dica { font-size: var(--fs-xs); color: var(--cinza-600); }
.campo input[type=text], .campo input[type=email], .campo input[type=tel], .campo select, .campo textarea {
  min-height: var(--toque); padding: var(--s-3) var(--s-4);
  border: 2px solid var(--cinza-300); border-radius: var(--r-s);
  background: var(--branco); width: 100%;
  transition: border-color var(--motion-fast) var(--ease-am), box-shadow var(--motion-fast) var(--ease-am);
}
.campo input:hover, .campo select:hover { border-color: var(--azul-300); }
.campo input:focus-visible, .campo select:focus-visible {
  outline: none; border-color: var(--azul-500); box-shadow: 0 0 0 4px rgba(30,127,224,.18);
}

.stepper { display: flex; border: 2px solid var(--cinza-300); border-radius: var(--r-s); overflow: hidden; background: var(--branco); max-width: 12rem; }
.stepper button {
  width: var(--toque); min-height: var(--toque); border: 0; background: var(--azul-050);
  font-size: 1.25rem; font-weight: 700; color: var(--azul-700); cursor: pointer;
  transition: background var(--motion-fast) var(--ease-am);
}
.stepper button:hover { background: var(--azul-100); }
.stepper input { border: 0; text-align: center; width: 100%; min-width: 3ch; background: transparent; font-weight: 700; font-variant-numeric: tabular-nums; }

.radio-cards { display: grid; gap: var(--s-3); }
.radio-cards.duas { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .radio-cards.tres { grid-template-columns: repeat(3, 1fr); } }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.radio-card label {
  display: grid; gap: var(--s-1); min-height: var(--toque); padding: var(--s-3) var(--s-4);
  border: 2px solid var(--cinza-300); border-radius: var(--r-s); background: var(--branco);
  cursor: pointer; font-size: var(--fs-sm); font-weight: 600;
  transition: border-color var(--motion-fast) var(--ease-am), background var(--motion-fast) var(--ease-am), transform var(--motion-fast) var(--ease-am);
}
.radio-card label small { font-weight: 400; color: var(--cinza-600); font-size: var(--fs-xs); }
.radio-card label:hover { border-color: var(--azul-300); transform: translateY(-2px); }
.radio-card input:checked + label { border-color: var(--azul-500); background: var(--azul-050); }
.radio-card input:focus-visible + label { outline: 3px solid var(--azul-500); outline-offset: 2px; }

.slider-par { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; }
.slider-par input[type=range] { width: 100%; accent-color: var(--azul-500); min-height: var(--toque); }
.slider-par output { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; color: var(--azul-700); }

details.expandivel { border: 2px dashed var(--cinza-300); border-radius: var(--r-s); }
details.expandivel summary {
  list-style: none; cursor: pointer; padding: var(--s-3) var(--s-5);
  font-weight: 700; font-size: var(--fs-sm); color: var(--azul-700);
  min-height: var(--toque); display: flex; align-items: center; gap: var(--s-2);
}
details.expandivel summary::-webkit-details-marker { display: none; }
details.expandivel summary::before { content: "+"; font-size: 1.1rem; width: 1ch; }
details.expandivel[open] summary::before { content: "−"; }
details.expandivel .inner { padding: 0 var(--s-5) var(--s-5); display: grid; gap: var(--s-4); }

/* ================================ FAQ ==================================== */
.faq-lista { display: grid; gap: var(--s-3); margin-top: var(--s-10); }
.faq-item { background: var(--branco); border: 1px solid var(--cinza-100); border-radius: var(--r-m); overflow: hidden; transition: box-shadow var(--motion-base) var(--ease-am); }
.faq-item:hover, .faq-item[open] { box-shadow: var(--sombra-s); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-6);
  font-weight: 700; color: var(--azul-900); min-height: var(--toque);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; width: 11px; height: 11px; flex-shrink: 0;
  border-right: 2.5px solid var(--azul-500); border-bottom: 2.5px solid var(--azul-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--motion-base) var(--ease-am);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-item .resposta { padding: 0 var(--s-6) var(--s-6); color: var(--cinza-600); font-size: var(--fs-sm); }

/* ============================== CONTATO ================================== */
.contato-grid { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 900px) { .contato-grid { grid-template-columns: 1.1fr .9fr; gap: var(--s-16); } }
.contato-dados { list-style: none; display: grid; gap: var(--s-4); margin-top: var(--s-8); }
.contato-dados li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.contato-dados .ic {
  width: 40px; height: 40px; border-radius: var(--r-s); flex-shrink: 0;
  background: rgba(255,255,255,.14); color: #fff; display: grid; place-content: center;
}
.contato-dados .ic svg { width: 20px; height: 20px; }
.contato-dados strong { display: block; color: #fff; }
.contato-dados span { color: rgba(255,255,255,.92); }
.contato-cta { display: grid; gap: var(--s-4); justify-items: start; }

/* ============================== FOOTER =================================== */
.footer { background: var(--azul-900); color: rgba(255,255,255,.82); padding-block: var(--s-16) var(--s-8); }
.footer-grid { display: grid; gap: var(--s-10); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-logo { background: #fff; border-radius: var(--r-m); padding: var(--s-3) var(--s-4); display: inline-block; }
.footer-logo img { height: 38px; width: auto; }
.footer .footer-titulo { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: #fff; margin-bottom: var(--s-4); }
.footer ul { list-style: none; display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer .sobre-curto { font-size: var(--fs-sm); margin-top: var(--s-5); max-width: 44ch; }
.footer .fonte { font-size: var(--fs-xs); color: rgba(255,255,255,.62); margin-top: var(--s-4); max-width: 52ch; }
.footer-base {
  margin-top: var(--s-12); padding-top: var(--s-6);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4);
  font-size: var(--fs-xs);
}
.btn-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(255,255,255,.86); font-size: inherit;
  text-decoration: underline; text-underline-offset: .2em;
}
.btn-link:hover { color: #fff; }
.assinatura-lumiere a { position: relative; }
.assinatura-lumiere a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--laranja); transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-fast) var(--ease-am);
}
.assinatura-lumiere a:hover { text-decoration: none; color: #fff; }
.assinatura-lumiere a:hover::after { transform: scaleX(1); }

/* --------------------------- WHATSAPP FIXO ------------------------------- */
.zap-fixo {
  position: fixed; right: var(--s-5);
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  z-index: 50; width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-content: center;
  box-shadow: 0 12px 28px -8px rgba(37,211,102,.6);
  transform: translateY(calc(100% + var(--s-12))); opacity: 0;
  transition: transform var(--motion-base) var(--ease-am), opacity var(--motion-base) var(--ease-am);
}
.zap-fixo.visivel { transform: translateY(0); opacity: 1; }
.zap-fixo:hover { transform: translateY(-4px) scale(1.05); }
.zap-fixo svg { width: 32px; height: 32px; }

/* ------------------------------ COOKIES ---------------------------------- */
.cookie-banner {
  position: fixed; inset: auto var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)) var(--s-4);
  z-index: 70; max-width: 32rem; margin-inline: auto;
  /* z-index acima do WhatsApp flutuante (50), conforme regra do projeto */
  background: #fff; border-radius: var(--r-m); box-shadow: var(--sombra-g);
  padding: var(--s-6); display: none; gap: var(--s-4);
}
.cookie-banner.visivel { display: grid; }
.cookie-banner h2 { font-size: var(--fs-h3); }
.cookie-banner p { font-size: var(--fs-sm); color: var(--cinza-600); }
.cookie-acoes { display: grid; gap: var(--s-2); }
@media (min-width: 480px) { .cookie-acoes { grid-template-columns: repeat(3, 1fr); } }
.cookie-acoes .btn { font-size: var(--fs-sm); padding-inline: var(--s-3); }
.cookie-prefs { border: 0; border-radius: var(--r-m); padding: 0; max-width: 34rem; width: calc(100vw - 2*var(--s-4)); }
.cookie-prefs::backdrop { background: rgba(11,47,107,.55); }
.cookie-prefs-inner { padding: var(--s-8); display: grid; gap: var(--s-4); background: #fff; }
.cookie-cat { display: flex; justify-content: space-between; gap: var(--s-4); align-items: flex-start; border-top: 1px solid var(--cinza-100); padding-top: var(--s-4); }
.cookie-cat p { font-size: var(--fs-sm); color: var(--cinza-600); }
.cookie-cat h3 { font-size: var(--fs-body); }
.cookie-cat input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--azul-500); flex-shrink: 0; margin-top: 2px; }

/* ========================= PÁGINA /CALCULADORA =========================== */
.pagina-topo {
  background: var(--grad-marca); color: #fff;
  padding-block: calc(72px + var(--s-12)) var(--s-20);
  position: relative; overflow: hidden;
}
.pagina-topo h1 { color: #fff; }
.pagina-topo p:not(.olho) { color: rgba(255,255,255,.94); font-size: var(--fs-lead); margin-top: var(--s-4); }
.pagina-topo .olho { color: #CDE6FC; }
.pagina-topo .onda { color: var(--nevoa); position: absolute; inset: auto 0 -1px 0; }

.calc-corpo { background: var(--nevoa); padding-block: var(--s-12) var(--secao-g); }

.abas { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-8); }
.aba {
  flex: 1 1 13rem; border: 2px solid var(--cinza-300); background: #fff;
  border-radius: var(--r-pill); padding: var(--s-3) var(--s-5);
  font-size: var(--fs-sm); font-weight: 700; color: var(--cinza-600);
  cursor: pointer; min-height: var(--toque);
  transition: background var(--motion-fast) var(--ease-am), border-color var(--motion-fast) var(--ease-am),
              color var(--motion-fast) var(--ease-am), box-shadow var(--motion-fast) var(--ease-am);
}
.aba:hover { border-color: var(--azul-300); color: var(--azul-700); }
.aba[aria-selected=true] { background: var(--azul-700); border-color: var(--azul-700); color: #fff; box-shadow: var(--sombra-azul); }

.painel-calc { display: grid; gap: var(--s-8); }
.painel-calc[hidden] { display: none; }
.bloco { background: #fff; border-radius: var(--r-m); box-shadow: var(--sombra-s); padding: var(--s-6); display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .bloco { padding: var(--s-8); } }
.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .form-grid.duas { grid-template-columns: 1fr 1fr; } .form-grid .cheio { grid-column: 1/-1; } }

.res-numero { font-size: var(--fs-num); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--azul-900); }
.res-numero small { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--cinza-600); letter-spacing: 0; margin-top: var(--s-2); }
.cards-res { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .cards-res { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.card-res {
  background: var(--azul-050); border: 1px solid var(--azul-100); border-radius: var(--r-m);
  padding: var(--s-5); display: grid; gap: var(--s-1); align-content: start;
}
.card-res .rot { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--cinza-600); font-weight: 700; }
.card-res .v { font-size: var(--fs-h2); font-weight: 800; color: var(--azul-900); font-variant-numeric: tabular-nums; }
.card-res p { font-size: var(--fs-sm); color: var(--cinza-600); }
.card-res.destaque { background: var(--grad-marca); border-color: transparent; }
.card-res.destaque .rot { color: rgba(255,255,255,.92); }
.card-res.destaque .v { color: #FFC28A; }
.card-res.destaque p { color: rgba(255,255,255,.94); }

.escada-calc-grafico {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--s-2);
  align-items: end; height: clamp(9rem, 26vw, 14rem);
  position: relative; border-bottom: 2px solid var(--azul-900); padding-top: var(--s-8);
}
.escada-calc-grafico .degrau {
  height: 100%; border-radius: var(--r-s) var(--r-s) 0 0;
  background: var(--grad-agua); transform: scaleY(var(--alt, 1)); transform-origin: bottom; position: relative;
}
.escada-calc-grafico .degrau.minima { background: linear-gradient(180deg, var(--cinza-300), var(--cinza-100)); }
.escada-calc-grafico .degrau.ativo { background: var(--grad-fogo); }
.escada-calc-grafico .r {
  align-self: end; text-align: center;
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--cinza-600);
}
.marcador-predio {
  position: absolute; bottom: 0; width: 3px; border-radius: var(--r-pill);
  background: var(--laranja);
  /* SÓ transform anima — height muda instantaneamente (nunca animar layout) */
  transition: transform var(--motion-base) var(--ease-am);
}
.marcador-predio .tag {
  position: absolute; top: -2.2rem; left: 50%; transform: translateX(-50%);
  background: var(--laranja-cta); color: #fff; padding: 2px var(--s-2);
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}

.medidor {
  position: sticky; bottom: 0; z-index: 10;
  background: var(--grad-marca); color: #fff;
  border-radius: var(--r-m) var(--r-m) 0 0; padding: var(--s-4) var(--s-6);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-6);
  font-variant-numeric: tabular-nums; box-shadow: var(--sombra-g);
}
.medidor .litros { font-size: var(--fs-h3); font-weight: 800; min-width: 6ch; }
.medidor .m3 { color: rgba(255,255,255,.92); font-size: var(--fs-sm); }
.medidor-barra { flex-basis: 100%; height: 5px; background: rgba(255,255,255,.22); border-radius: var(--r-pill); overflow: hidden; }
.medidor-barra i { display: block; height: 100%; background: #FFC28A; transform-origin: left; transform: scaleX(0); border-radius: var(--r-pill); }

.barras-uso { display: grid; gap: var(--s-3); }
.barra-uso { display: grid; grid-template-columns: minmax(0,6rem) minmax(0,1fr) 3rem; gap: var(--s-3); align-items: center; font-size: var(--fs-sm); }
.barra-uso .trilho { height: 14px; background: var(--cinza-100); border-radius: var(--r-pill); overflow: hidden; }
.barra-uso .trilho i { display: block; height: 100%; background: var(--grad-agua); transform-origin: left; transform: scaleX(0); border-radius: var(--r-pill); }
.barra-uso.maior .trilho i { background: var(--grad-fogo); }
.barra-uso .pct { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

.caixas-dagua { display: grid; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); gap: 4px; max-width: 26rem; }
.caixas-dagua i { aspect-ratio: 1; background: var(--azul-500); border-radius: 3px; opacity: .85; }

.conta-honesta {
  background: var(--azul-050); border-left: 4px solid var(--laranja);
  border-radius: 0 var(--r-m) var(--r-m) 0; padding: var(--s-6); display: grid; gap: var(--s-3);
}
.conta-honesta ol { padding-left: 1.3em; display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--cinza-600); }
.conta-honesta .nao { font-weight: 700; color: var(--azul-900); font-size: var(--fs-sm); }
.selo-vigencia { font-size: var(--fs-xs); color: var(--cinza-600); display: flex; gap: var(--s-2); }
.selo-vigencia::before { content: "§"; color: var(--azul-700); font-weight: 700; }
.como-calculamos { font-size: var(--fs-sm); color: var(--cinza-600); }
.como-calculamos strong { color: var(--azul-900); }
.aviso {
  background: #FFF4E8; border: 1px solid #FFD3A8; border-radius: var(--r-s);
  padding: var(--s-4) var(--s-5); font-size: var(--fs-sm); color: var(--laranja-escuro);
}
.aviso a { color: var(--laranja-escuro); }
.fatura-mini {
  background: var(--nevoa); border: 1px solid var(--cinza-300); border-radius: var(--r-s);
  padding: var(--s-4); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; display: grid; gap: var(--s-2);
}
.fatura-mini .destaca { background: #FFE1B8; padding: 1px var(--s-2); border-radius: 3px; font-weight: 700; color: #8F3A04; }
.cena-calc { display: grid; gap: var(--s-5); padding-block: var(--s-6); border-top: 1px solid var(--cinza-100); }
.cena-calc:first-of-type { border-top: 0; padding-top: 0; }
.cena-calc .passo-n { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-700); }

/* ========================== PÁGINAS DOCUMENTO ============================ */
.doc { background: var(--nevoa); padding-block: var(--s-12) var(--secao-g); }
.doc-corpo {
  background: #fff; border-radius: var(--r-m); box-shadow: var(--sombra-s);
  padding: var(--s-8) var(--s-6); display: grid; gap: var(--s-4); max-width: 48rem; margin-inline: auto;
}
@media (min-width: 768px) { .doc-corpo { padding: var(--s-16); } }
.doc-corpo h2 { font-size: var(--fs-h3); margin-top: var(--s-6); }
.doc-corpo ul, .doc-corpo ol { padding-left: 1.4em; display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--cinza-600); }
.doc-corpo p { font-size: var(--fs-sm); color: var(--cinza-600); }
.doc-corpo .meta { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--azul-700); font-weight: 700; border-bottom: 1px solid var(--cinza-100); padding-bottom: var(--s-4); }
.doc-corpo table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.doc-corpo th, .doc-corpo td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--cinza-100); vertical-align: top; color: var(--cinza-600); }
.doc-corpo th { color: var(--azul-900); font-weight: 700; }

/* ============================== 404 ====================================== */
.pagina-404 {
  min-height: 100svh; display: grid; place-content: center; text-align: center;
  gap: var(--s-6); padding: var(--s-8); background: var(--grad-marca); color: #fff;
}
.pagina-404 .codigo { font-size: clamp(5rem, 22vw, 10rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: rgba(255,255,255,.92); }
.pagina-404 h1 { color: #fff; font-size: var(--fs-h2); }
.pagina-404 p { color: rgba(255,255,255,.94); max-width: 44ch; margin-inline: auto; }
.pagina-404 .acoes { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; margin-top: var(--s-4); }
.pagina-404 .btn-contorno { color: #fff; border-color: rgba(255,255,255,.55); }
.pagina-404 .btn-contorno:hover { border-color: #fff; background: rgba(255,255,255,.14); color: #fff; }
.pagina-404 .btn-contorno::after { background: rgba(255,255,255,.16); }

/* ============================ ANIMAÇÃO ================================== */
.js [data-anima] { opacity: 0; }
.skip-link {
  position: absolute; left: var(--s-4); top: -6rem; z-index: 100;
  background: var(--azul-900); color: #fff; padding: var(--s-3) var(--s-6);
  border-radius: var(--r-s); transition: top var(--motion-fast) var(--ease-am);
}
.skip-link:focus-visible { top: var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-anima] { opacity: 1 !important; transform: none !important; }
  .zap-fixo { transform: none; opacity: 1; }
  .menu-mobile { transform: none; }
  .menu-mobile.visivel { transform: none; }
}

@media print {
  .header, .zap-fixo, .cookie-banner { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ============ ANTI-OVERFLOW (garantia dos 320px) ======================== */
/* Filhos de grid/flex não encolhem abaixo do min-content por padrão — o que
   estoura a viewport em telas estreitas. min-width:0 corrige na raiz. */
.hero-grid > *, .sobre-grid > *, .contato-grid > *, .comparativo > *,
.promessas-grid > *, .servicos-grid > *, .etapas > *, .numeros-grid > *,
.equipe-grid > *, .cards-res > *, .sim-campos > *, .form-grid > *,
.hero-provas > *, .footer-grid > *, .painel-calc > *, .bloco > *,
.simulador-card > *, .sim-resultado > *, .caso-corpo > *, .escada-grid > *,
.escada-calc-grafico > *, .barras > *, .doc-corpo > *, .faq-lista > *,
.promessa > *, .servico > *, .etapa > *, .card-res > *, .campo > *,
.comp-card > *, .radio-cards > *, .medidor > *, .barras-uso > * { min-width: 0; }

/* Grids de 1 coluna implícita nunca podem exceder o container */
.painel-calc, .bloco, .simulador-card, .sim-resultado, .caso-corpo,
.form-grid, .cards-res, .campo, .comp-card { grid-template-columns: minmax(0, 1fr); }
.form-grid.duas, .cards-res { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .form-grid.duas { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cards-res { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.res-numero, .res-numero small, .card-res .v, .sim-destaque .v { overflow-wrap: anywhere; }

.hero .olho { color: #CDE6FC; }
.hero-selo { max-width: 100%; }
.hero-selo span, .hero .olho { color: #CDE6FC; }
.hero-selo { white-space: normal; }

@media (max-width: 479px) {
  .hero-provas { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero-prova { display: flex; align-items: baseline; gap: var(--s-3); }
  .hero-prova .n { font-size: var(--fs-body); flex-shrink: 0; }
  .radio-cards.duas { grid-template-columns: 1fr; }
  .barra-uso { grid-template-columns: minmax(0,4.5rem) minmax(0,1fr) 2.5rem; }
}


/* ==================== ALVOS DE TOQUE E CONTENÇÃO ======================== */
/* Links/botões de navegação com área de toque de 48px, mesmo com o
   conteúdo visual menor (WCAG 2.2 · alvo mínimo). */
.logo-lockup { display: flex; align-items: center; min-height: var(--toque); }
.btn-link { min-height: var(--toque); display: inline-flex; align-items: center; }
.footer ul a, .footer ul .btn-link { display: inline-flex; align-items: center; min-height: var(--toque); }
.footer ul { gap: var(--s-1); }

/* Tabelas em página de documento nunca podem estourar a viewport */
.doc-corpo table { display: block; overflow-x: auto; max-width: 100%; }
.doc-corpo table thead, .doc-corpo table tbody { display: table; width: 100%; min-width: 30rem; }
.doc-corpo code { word-break: break-word; }


/* ============== BANNER DE COOKIES NÃO PODE COBRIR CTA ================== */
/* Em telas largas o banner ancora à esquerda: o centro (onde ficam os CTAs)
   e o canto direito (WhatsApp) continuam clicáveis. WCAG 2.4.11: o elemento
   focado nunca fica atrás dele — daí o scroll-padding-bottom. */
@media (min-width: 900px) {
  .cookie-banner { right: auto; margin-inline: 0; max-width: 26rem; }
}
html:has(.cookie-banner.visivel) { scroll-padding-bottom: 20rem; }
@media (min-width: 900px) { html:has(.cookie-banner.visivel) { scroll-padding-bottom: 14rem; } }

/* No mobile o banner ocupa a base: reserva espaço no fim do documento para
   que o rodapé não fique permanentemente inacessível atrás dele. */
@media (max-width: 899px) {
  body:has(.cookie-banner.visivel) .footer { padding-bottom: 17rem; }
}

/* ==================== CAPTURA DE LEAD (não-bloqueante) ================== */
/* Aparece depois do resultado, recolhida. Abrir/fechar não afeta em nada a
   simulação — o usuário continua livre para mexer nos campos. */
.captura {
  border: 2px dashed var(--azul-300);
  border-radius: var(--r-m);
  background: var(--azul-050);
  transition: border-color var(--motion-fast) var(--ease-am), background var(--motion-fast) var(--ease-am);
}
.captura[open] { border-style: solid; border-color: var(--azul-500); background: var(--branco); }
.captura summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6); min-height: var(--toque);
}
.captura summary::-webkit-details-marker { display: none; }
.captura summary::after {
  content: ""; width: 11px; height: 11px; flex-shrink: 0;
  border-right: 2.5px solid var(--azul-700); border-bottom: 2.5px solid var(--azul-700);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform var(--motion-base) var(--ease-am);
}
.captura[open] summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.captura summary strong { display: block; color: var(--azul-900); font-size: var(--fs-body); }
.captura summary small { display: block; color: var(--cinza-600); font-size: var(--fs-sm); margin-top: var(--s-1); }
.captura summary:hover strong { color: var(--azul-700); }

.captura-form { padding: 0 var(--s-6) var(--s-6); display: grid; gap: var(--s-5); }
.captura-form .btn { justify-self: start; }
.captura-nota { font-size: var(--fs-xs); color: var(--cinza-600); }
.captura .opc { font-weight: 400; color: var(--cinza-600); }

.form-status { font-size: var(--fs-sm); font-weight: 700; }
.form-status.ok { color: #0E6B3C; }
.form-status.erro { color: var(--laranja-escuro); }

/* honeypot: fora da tela sem display:none (bots ignoram o truque assim) */
.honeypot {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* =========================================================================
   EFEITOS DAS ARTES — luz, sinal, água e parallax
   Regras: só transform/opacity (compositor), zero dependência externa,
   pausados fora da viewport e desligados em prefers-reduced-motion.
   ========================================================================= */

/* Parallax nativo: scroll-driven animation roda no compositor, custo ~zero de
   main thread (CLAUDE_V2 §5.1). Sem suporte, a arte simplesmente não translada. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes fx-parallax-forte  { from { translate: 0 26px; } to { translate: 0 -26px; } }
    @keyframes fx-parallax-medio  { from { translate: 0 20px; } to { translate: 0 -20px; } }
    @keyframes fx-parallax-suave  { from { translate: 0 16px; } to { translate: 0 -16px; } }
    [data-fx="hero"] > .hero-quadro {
      animation: fx-parallax-forte linear both;
      animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
    [data-fx="agua"] > .medidor-cena { animation: fx-flutua 7s ease-in-out infinite; }
    [data-fx="predio"] .fx-predio {
      animation: fx-parallax-suave linear both;
      animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
  }
}

/* ---------------- HERO · o módulo de telemetria vive ------------------- */
.hero-arte { position: relative; }
/* O quadro tem exatamente as dimensões da imagem — sem ele, as porcentagens
   dos efeitos se referiam ao container inteiro (que inclui o card abaixo). */
.hero-quadro { position: relative; width: 100%; line-height: 0; }

/* LED verde respirando (posição medida na arte: 85,7% / 27,1%) */
.fx-led {
  position: absolute; left: 85.7%; top: 27.1%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: #4BEB93; z-index: 2; pointer-events: none;
  box-shadow: 0 0 7px 2px rgba(75,235,147,.8), 0 0 16px 6px rgba(75,235,147,.28);
  animation: fx-respira 2.4s ease-in-out infinite;
}
@keyframes fx-respira {
  0%, 100% { opacity: .45; transform: scale(.82); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

/* Ondas de sinal saindo do módulo — a leitura remota acontecendo */
.fx-sinal {
  position: absolute; left: 87.7%; top: 41.7%;
  width: 0; height: 0; z-index: 3; pointer-events: none;
}
/* ponto de emissão pulsando no ícone */
.fx-sinal::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: rgba(225,246,255,.7);
  box-shadow: 0 0 18px 6px rgba(140,215,255,.56);
  animation: fx-emissor 3.2s ease-in-out infinite;
}
@keyframes fx-emissor {
  0%, 100% { opacity: .32; scale: .7; }
  14%      { opacity: .7;  scale: 1.25; }
}
.fx-sinal i {
  position: absolute; left: 50%; top: 50%;
  width: 73px; height: 73px; margin: -36.5px 0 0 -36.5px;
  border-radius: 50%;
  border: 3px solid rgba(214,242,255,.7);
  box-shadow: 0 0 26px rgba(140,215,255,.52);   /* halo externo, sem miolo */
  opacity: 0;
  animation: fx-onda 3.6s cubic-bezier(.18,.5,.28,1) infinite;
}
.fx-sinal i:nth-child(2) { animation-delay: .9s; }
.fx-sinal i:nth-child(3) { animation-delay: 1.8s; }
.fx-sinal i:nth-child(4) { animation-delay: 2.7s; }
@keyframes fx-onda {
  0%   { opacity: 0;   scale: .3; }
  10%  { opacity: .7; }
  60%  { opacity: .49; }
  100% { opacity: 0;   scale: 6.5; }
}

/* Bolhas subindo ao fundo do hero */
.fx-bolhas { position: absolute; inset: -6% -2% 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx-bolhas i {
  position: absolute; left: var(--x); bottom: -8%;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.75), rgba(150,205,255,.18) 62%, transparent 72%);
  border: 1px solid rgba(190,225,255,.35);
  scale: var(--s);                 /* estático: fora dos keyframes */
  translate: 0 0;
  opacity: 0;
  animation: fx-sobe var(--t) linear var(--d) infinite;
}
@keyframes fx-sobe {               /* só translate + opacity → roda no compositor */
  0%   { opacity: 0;   translate: 0 0; }
  12%  { opacity: .55; }
  80%  { opacity: .35; }
  100% { opacity: 0;   translate: 14px -560px; }
}

/* ---------------- A EMPRESA · a água ----------------------------------- */
.sobre-arte { position: relative; }
.sobre-arte > .medidor-cena { animation: fx-flutua 7s ease-in-out infinite; }
@keyframes fx-flutua {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}
.fx-gotas { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.fx-gotas i {
  position: absolute; left: var(--x); top: 8%;
  width: 7px; height: 10px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, rgba(120,190,245,.95), rgba(30,127,224,.75));
  opacity: 0;
  animation: fx-cai 4.2s cubic-bezier(.45,0,.75,.4) var(--d) infinite;
}
@keyframes fx-cai {
  0%   { opacity: 0;   translate: 0 0;     scale: 1 .7; }
  10%  { opacity: .9; }
  70%  { opacity: .8;  translate: 0 190px; scale: 1 1.5; }
  85%  { opacity: 0;   translate: 0 215px; scale: 1 .4; }
  100% { opacity: 0;   translate: 0 215px; scale: 1 .4; }
}

/* ---------------- CASO REAL · o prédio acende -------------------------- */
.fx-predio { position: relative; width: 100%; }
.fx-acende {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* revela de baixo para cima SEM deformar a imagem (scaleY esticaria) */
  clip-path: inset(100% 0 0 0);
}
.fx-acende-inner { display: block; }
.fx-acende img {
  width: 100%; height: auto;
  filter: brightness(1.5) saturate(1.25)
          drop-shadow(0 0 26px rgba(255,208,130,.55));
  mix-blend-mode: screen;
  opacity: .85;
}
[data-fx="predio"].acendeu .fx-acende {
  transition: clip-path 2.2s cubic-bezier(.3,.9,.3,1);
  clip-path: inset(0 0 0 0);
}

/* brilho quente pulsando atrás do prédio depois que ele acende */
.caso-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 58%, rgba(255,196,120,.30), transparent 58%);
  opacity: 0; transition: opacity 1.4s ease;
}
[data-fx="predio"].acendeu::after { opacity: 1; animation: fx-brilha 5.5s ease-in-out 2.2s infinite; }
@keyframes fx-brilha { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------------- Governança de performance ---------------------------- */
/* Fora da viewport, tudo congela: zero CPU/GPU com a seção fora da tela. */
[data-fx]:not(.fx-ativo) .fx-led,
[data-fx]:not(.fx-ativo) .fx-sinal i,
[data-fx]:not(.fx-ativo) .fx-sinal::before,
[data-fx]:not(.fx-ativo) .fx-bolhas i,
[data-fx]:not(.fx-ativo) .fx-gotas i,
[data-fx]:not(.fx-ativo) > picture,
[data-fx]:not(.fx-ativo) > .hero-quadro,
[data-fx]:not(.fx-ativo) > .medidor-cena,
[data-fx]:not(.fx-ativo)::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .fx-led, .fx-sinal, .fx-bolhas, .fx-gotas, .fx-acende, .caso-media::after { display: none !important; }
  .sobre-arte > picture { animation: none !important; }
  [data-fx="hero"] > .hero-quadro, [data-fx="agua"] > .medidor-cena, [data-fx="predio"] .fx-predio { translate: none !important; transform: none !important; }
}

/* ============ A EMPRESA · cena em camadas dos medidores ================
   camada-agua (atrás) e camada-contador (frente) têm o mesmo enquadramento,
   recortadas com um bbox comum — por isso empilham em registro perfeito.
   Os displays vêm VAZIOS na arte: os dígitos abaixo são HTML de verdade.
   ====================================================================== */
.medidor-cena {
  position: relative; width: 100%;
  container-type: inline-size;         /* dígitos escalam com a cena (cqw) */
  aspect-ratio: 1200 / 1056;
}
.medidor-cena .cam { position: absolute; inset: 0; display: block; line-height: 0; }
.medidor-cena .cam img { width: 100%; height: auto; }
.cam-agua { z-index: 0; filter: drop-shadow(0 12px 24px rgba(11,47,107,.18)); }
.cam-contador { z-index: 1; filter: drop-shadow(0 18px 30px rgba(11,47,107,.24)); }
.cam-agua img { pointer-events: none; }

/* --------------------------- DISPLAYS --------------------------------- */
.disp {
  position: absolute; z-index: 2; display: flex; overflow: hidden;
  font-family: var(--font); font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: .02em; line-height: 1; white-space: nowrap;
  pointer-events: none; user-select: none;
}
.dig { display: block; overflow: hidden; height: 1em; width: .62em; text-align: center; }
/* Casas maiores saltam de dígito em dígito (legíveis); a casa menor — o
   dígito vermelho — gira contínuo, como no medidor real, onde ela roda
   rápido demais para ser lida. */
.dig .rolo { display: block; animation: fx-rola var(--v, 3s) steps(10, end) infinite; }
.d-gas-a-r .rolo, .d-gas-b-r .rolo { animation-timing-function: linear; }
/* cada display corre no seu ritmo — senão os números giram em uníssono */
.d-agua   .rolo { animation-duration: 2.6s; }
.d-agua-r .rolo { animation-duration: 1.1s; }
.d-gas-a  .rolo { animation-duration: 4.1s; }
.d-gas-a-r .rolo { animation-duration: 1.7s; }
.d-gas-b  .rolo { animation-duration: 3.3s; }
.d-gas-b-r .rolo { animation-duration: 1.4s; }
.dig .rolo b { display: block; height: 1em; font-weight: 700; }
@keyframes fx-rola { to { translate: 0 -10em; } }   /* 10 dígitos de 1em cada */

/* posições detectadas por cor na própria camada (não estimadas) */
/* a cena é 1200×794 → 1% de altura = 0,662cqw                             */
.disp { align-items: center; justify-content: flex-end; }
.d-gas-a   { left: 50.0%; top: 29.0%; width: 26.8%; height: 9.5%; font-size: 5.4cqw; color: #1C2532; }
.d-gas-a-r { left: 76.8%; top: 29.0%; width:  7.2%; height: 9.5%; font-size: 5.4cqw; color: #FFF; justify-content: center; }
.d-gas-b   { left: 50.0%; top: 38.6%; width: 23.4%; height: 4.6%; font-size: 2.7cqw; color: #F0F5FA; }
.d-gas-b-r { left: 73.6%; top: 38.6%; width:  4.2%; height: 4.6%; font-size: 2.7cqw; color: #FFF; justify-content: center; }

/* ------------------- PONTEIRO DO HIDRÔMETRO ---------------------------- */
/* mostrador medido: centro 29% / 47% */
/* ------------------- REFLEXO NOS DISPLAYS ------------------------------ */
.fx-brilho { position: absolute; z-index: 4; pointer-events: none; overflow: hidden; border-radius: 2px; }
.fx-brilho::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%);
  translate: -120% 0;
  animation: fx-varre 7s ease-in-out infinite;
}
.fx-brilho-gas  { left: 50.0%; top: 29.0%; width: 34.0%; height: 14.2%; }
.fx-brilho-gas::before { animation-delay: 2.2s; }
@keyframes fx-varre {
  0%, 60% { translate: -120% 0; }
  82%     { translate: 120% 0; }
  100%    { translate: 120% 0; }
}

/* --------- parallax entre as camadas (profundidade real) --------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* a água está ATRÁS: desloca menos e ao contrário, criando profundidade */
    @keyframes fx-cam-fundo  { from { translate: 0 -16px; scale: 1.05; } to { translate: 0 16px; scale: 1.05; } }
    @keyframes fx-cam-frente { from { translate: 0 30px; } to { translate: 0 -30px; } }
    .cam-agua     { animation: fx-cam-fundo linear both;  animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .cam-contador { animation: fx-cam-frente linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}

[data-fx]:not(.fx-ativo) .dig .rolo,
[data-fx]:not(.fx-ativo) .fx-brilho::before { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .fx-brilho { display: none !important; }
  .dig .rolo { animation: none !important; }
  .cam-agua, .cam-contador { animation: none !important; translate: none !important; scale: none !important; }
}

/* ================== ÁGUA VIVA (a camada de trás respira) ================
   A arte é estática; o movimento vem de: (1) a própria camada ondulando,
   (2) um "eco" defasado e translúcido por cima que cria a sensação de
   fluxo, (3) respingos subindo. Tudo em transform/opacity.
   ====================================================================== */
.cam-agua img { animation: fx-agua-onda 11s ease-in-out infinite; transform-origin: 50% 62%; }
@keyframes fx-agua-onda {
  0%, 100% { scale: 1 1;         translate: 0 0;       opacity: 1; }
  28%      { scale: 1.035 .978;  translate: -1.1% .5%; opacity: .93; }
  55%      { scale: .982 1.03;   translate: 1.2% -.4%; opacity: 1; }
  78%      { scale: 1.02 1.005;  translate: -.4% .2%;  opacity: .96; }
}

/* respingos subindo da lâmina d'água */
.fx-respingos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fx-respingos i {
  position: absolute; left: var(--x); top: var(--y);
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.95), rgba(140,205,245,.55) 58%, transparent 72%);
  opacity: 0; translate: 0 0; scale: .5;
  animation: fx-respinga var(--t) ease-out var(--d) infinite;
}
@keyframes fx-respinga {
  0%   { opacity: 0;   translate: 0 0;      scale: .35; }
  15%  { opacity: .85; }
  60%  { opacity: .5;  translate: 3px -34px; scale: .9; }
  100% { opacity: 0;   translate: 7px -60px; scale: .5; }
}

[data-fx]:not(.fx-ativo) .cam-agua img,
[data-fx]:not(.fx-ativo) .fx-respingos i { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .fx-respingos { display: none !important; }
  .cam-agua img { animation: none !important; }
}

/* ================= MOSTRADOR DO HIDRÔMETRO (desenhado) =================
   Reconstrução do mostrador real sobre a arte: odômetro em janelas, disco
   de fluxo girando no centro e dois ponteiros de agulha (litros e décimos).
   Referência: mostrador de hidrômetro residencial padrão.
   Disco medido na arte: centro 27,8% / 49,5% · raio ≈ 16% da largura da cena.
   ====================================================================== */
.mostrador {
  position: absolute; left: 27.8%; top: 49.5%;
  width: 33%; aspect-ratio: 1; margin: -16.5% 0 0 -16.5%;
  z-index: 2; pointer-events: none;
}

/* ---- odômetro: janelas separadas, os números sobem ---- */
.odometro {
  position: absolute; left: 50%; top: 21.5%;
  transform: translateX(-50%);
  display: flex; gap: 3.2%;
  padding: 3.4% 3.6%;
  background: #14181D;
  border-radius: 1.6cqw;
  box-shadow: inset 0 .18cqw .5cqw rgba(0,0,0,.65);
}
.jan {
  display: block; overflow: hidden;
  width: 2.55cqw; height: 3.3cqw;
  background: linear-gradient(180deg, #FBFBF8 0%, #EAEAE4 46%, #FFF 54%, #E2E2DC 100%);
  border-radius: .28cqw;
  box-shadow: inset 0 .1cqw .28cqw rgba(0,0,0,.4);
}
.jan-r { background: linear-gradient(180deg, #E03A2E 0%, #C4231A 46%, #EE5347 54%, #B81C14 100%); }
.jan .rolo {
  display: block;
  font-size: 2.5cqw; line-height: 3.3cqw; text-align: center;
  font-weight: 700; font-variant-numeric: tabular-nums; color: #16202E;
  animation: fx-odo 2s steps(10, end) infinite;
  /* cascata: a casa da direita gira rápido e cada casa à esquerda 4x mais devagar */
  animation-duration: calc(1.15s * pow(4, var(--ordem, 0)));
}
.jan-r .rolo { color: #FFF; animation-timing-function: linear; }
.jan .rolo b { display: block; height: 3.3cqw; }
.jan .rolo.fixo { animation: none; }
@keyframes fx-odo { to { translate: 0 -33cqw; } }   /* 10 × 3,3cqw */

/* ---- disco de fluxo no centro (a “gota” que roda) ---- */
.disco-fluxo {
  position: absolute; left: 50%; top: 50%;
  width: 13%; aspect-ratio: 1; margin: -6.5% 0 0 -6.5%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #4A5563, #10161D 72%);
  box-shadow: inset 0 0 .4cqw rgba(0,0,0,.6), 0 .1cqw .3cqw rgba(0,0,0,.28);
  display: grid; place-items: center; overflow: hidden;
}
.disco-fluxo i {
  width: 76%; height: 76%;
  background: #F4F7FA;
  /* meia-lua: ao girar, lê-se como o disco de fluxo do medidor */
  clip-path: polygon(50% 50%, 100% 8%, 100% 92%);
  animation: fx-disco 1.6s linear infinite;
}
@keyframes fx-disco { to { rotate: 360deg; } }

/* ---- mini-mostradores com agulha (litros e décimos) ---- */
.mini {
  position: absolute; width: 15.5%; aspect-ratio: 1;
  display: grid; place-items: center;
}
.mini-litros  { left: 66%; top: 47%; margin: -7.75% 0 0 -7.75%; }   /* à direita */
.mini-decimos { left: 44%; top: 74%; margin: -7.75% 0 0 -7.75%; }   /* embaixo   */
.mini svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mini-face { fill: #FCFDFE; stroke: #2A3442; stroke-width: 3.5; }
.mini-marcas line { stroke: #2A3442; stroke-width: 3; }
.mini-nums text {
  font-size: 15px; font-weight: 700; fill: #1B2430;
  text-anchor: middle; font-family: var(--font);
}
.mini-agulha {
  position: absolute; left: 50%; top: 50%;
  width: 13%; height: 40%; margin-left: -6.5%;
  background: #D8261B;
  /* gota: base larga no eixo, ponta arredondada — como no medidor real */
  clip-path: polygon(50% 100%, 100% 46%, 78% 4%, 22% 4%, 0% 46%);
  transform-origin: 50% 100%; rotate: 0deg;
  filter: drop-shadow(0 .05cqw .12cqw rgba(90,10,5,.5));
}
.mini-litros  .mini-agulha { animation: fx-mini 14s steps(10, end) infinite; }
.mini-decimos .mini-agulha { animation: fx-mini 3.5s linear infinite; }
@keyframes fx-mini { to { rotate: 360deg; } }

[data-fx]:not(.fx-ativo) .jan .rolo,
[data-fx]:not(.fx-ativo) .disco-fluxo i,
[data-fx]:not(.fx-ativo) .mini-agulha { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .jan .rolo, .disco-fluxo i, .mini-agulha { animation: none !important; }
}

/* ============ FACE DO HIDRÔMETRO — DESENHADA POR INTEIRO ==============
   Cobre a face da arte com um mostrador construído do zero, conforme a
   especificação: contador de 6 janelas (4 pretas + 2 vermelhas), indicador
   de fluxo no centro e dois mostradores de agulha na metade inferior.
   Disco medido na arte: centro 27,8% / 49,5%.
   ====================================================================== */
.face-hidro {
  position: absolute; left: 29%; top: 48.62%;
  /* oval por alargamento: a altura continua a de antes (30% da cena) e o
     ganho de 2% vai todo para a largura. margens = metade de cada eixo. */
  width: 31.25%; aspect-ratio: 1 / .96; margin: -15% 0 0 -15.63%;
  z-index: 2; pointer-events: none;
  border-radius: 50%;
  background: none;
  container-type: inline-size;
}

/* ---- contador mecânico (visor superior) ---- */
.odo-box {
  position: absolute; left: 50%; top: 12.5%;
  transform: translateX(-50%);
  width: max-content;
  display: flex; gap: 2.16cqw;
  padding: 1.2cqw 1.44cqw;
  background: #FFF;
  border: .54cqw solid #333333;
  border-radius: 1.2cqw;
}
.jan {
  display: block; overflow: hidden;
  width: 8.28cqw; height: 12.72cqw;
  background: #FDFDFB;
  box-shadow: inset 0 0 0 .34cqw #333333;
}
.jan-r { background: #FDFDFB; }
.jan .rolo {
  display: block;
  font-size: 10.8cqw; line-height: 12.72cqw; text-align: center;
  font-weight: 400; font-variant-numeric: tabular-nums;
  font-stretch: condensed; letter-spacing: -.02em; color: #101418;
  animation: fx-odo 12s linear infinite;
  /* defasagem que põe a roda na posição correta da leitura inicial:
     atraso = -fracao(leitura / 10^(casa+1)) x duracao  (ver index.html) */
  animation-delay: var(--atraso, 0s);
}
.jan-r .rolo { color: #FFF; }
/* o peso precisa vir no proprio <b>: a folha do navegador aplica
   b { font-weight: bolder }, que sobre 400 do pai resolve para 700 */
.jan .rolo b { display: block; height: 12.72cqw; font-weight: 400; }
/* Cada roda fica parada em 90% do passo e vira nos 10% finais — exatamente
   quando a roda da direita fecha o 9→0. É o arraste de um odômetro real. */
@keyframes fx-odo {
  0%, 9% { translate: 0 -0cqw; }
  10%, 19% { translate: 0 -12.72cqw; }
  20%, 29% { translate: 0 -25.44cqw; }
  30%, 39% { translate: 0 -38.16cqw; }
  40%, 49% { translate: 0 -50.88cqw; }
  50%, 59% { translate: 0 -63.6cqw; }
  60%, 69% { translate: 0 -76.32cqw; }
  70%, 79% { translate: 0 -89.04cqw; }
  80%, 89% { translate: 0 -101.76cqw; }
  90%, 99% { translate: 0 -114.48cqw; }
  100% { translate: 0 -127.2cqw; }
}
/* a casa mais à direita gira sem parar, como o rolo mais rápido do medidor */
@keyframes fx-odo-liso { to { translate: 0 -127.2cqw; } }

/* ---- indicador de fluxo (peça central que gira) ---- */
.fluxo {
  position: absolute; left: 50%; top: 50%;
  width: 15cqw; aspect-ratio: 1; margin: -7.5cqw 0 0 -7.5cqw;
  border-radius: 50%; background: #14181C;
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 .15cqw .4cqw rgba(0,0,0,.25);
}
.fluxo i {
  width: 78%; height: 78%; background: #F7FAFC;
  /* abertura em ampulheta — ao girar, lê-se como a turbina do medidor */
  clip-path: polygon(24% 2%, 76% 2%, 56% 42%, 76% 98%, 24% 98%, 44% 58%);
  animation: fx-disco .4s linear infinite;
}
@keyframes fx-disco { to { rotate: 360deg; } }

/* ---- mostradores de agulha ---- */
.mini { position: absolute; }
.mini-esq { left: 50%; top: 79%; width: 25cqw; aspect-ratio: 1; margin: -12.5cqw 0 0 -12.5cqw; }
.mini-dir { left: 78%; top: 61%; width: 21cqw; aspect-ratio: 1; margin: -10.5cqw 0 0 -10.5cqw; }
.mini svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mini-face { fill: #FFF; stroke: #14181C; stroke-width: 2.6; }
.mini-marcas line { stroke: #14181C; stroke-width: 2.8; }
.mini-marcas line.meia { stroke-width: 1.6; }
.mini-nums text {
  font-size: 17px; font-weight: 800; fill: #101418;
  text-anchor: middle; dominant-baseline: central;
  font-family: var(--font);
}
.mini-agulha {
  z-index: 3;
  /* topo 14% + altura 36% => base em 50% = centro do mostrador = pivô */
  position: absolute; left: 50%; top: 14%; bottom: auto;
  width: 15%; height: 36%; margin-left: -7.5%;
  background: #D8261B;
  clip-path: polygon(50% 0%, 100% 56%, 76% 98%, 24% 98%, 0% 56%);
  transform-origin: 50% 100%;
}
.mini-eixo {
  position: absolute; left: 50%; top: 50%;
  width: 16%; aspect-ratio: 1; margin: -8% 0 0 -8%;
  border-radius: 50%; background: #D8261B;
}
.mini-esq .mini-agulha { animation: fx-mini 2s linear infinite; }   /* x0,01 m³ */
.mini-dir .mini-agulha { animation: fx-mini 20s linear infinite;
  animation-delay: -14s; }   /* x0,1 m³ — nasce apontando 7, coerente com ...,57 */
@keyframes fx-mini { to { rotate: 360deg; } }

[data-fx]:not(.fx-ativo) .jan .rolo,
[data-fx]:not(.fx-ativo) .fluxo i,
[data-fx]:not(.fx-ativo) .mini-agulha { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .jan .rolo, .fluxo i, .mini-agulha { animation: none !important; }
}

/* ---- display do medidor de gás (retângulo medido na arte) ---- */
.face-gas {
  position: absolute; left: 49.6%; top: 24.0%;
  width: 39%; height: 23.6%;
  z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  container-type: inline-size;
}
.odo-gas {
  /* anula por completo o posicionamento absoluto herdado de .odo-box */
  position: relative; left: auto; right: auto; top: auto; bottom: auto;
  transform: none; margin: 0;
  gap: 1.9cqw; padding: 1.4cqw 1.7cqw;
  border-width: .6cqw; border-radius: 1.1cqw;
}
.odo-gas .jan { width: 8.6cqw; height: 13.3cqw; box-shadow: inset 0 0 0 .3cqw #333333; }
.odo-gas .jan .rolo { font-size: 11.1cqw; line-height: 13.3cqw; }
.odo-gas .jan .rolo b { height: 13.3cqw; }
.odo-gas .jan .rolo { animation-name: fx-odo-gas; }
@keyframes fx-odo-gas {
  0%, 9% { translate: 0 -0cqw; }
  10%, 19% { translate: 0 -13.3cqw; }
  20%, 29% { translate: 0 -26.6cqw; }
  30%, 39% { translate: 0 -39.9cqw; }
  40%, 49% { translate: 0 -53.2cqw; }
  50%, 59% { translate: 0 -66.5cqw; }
  60%, 69% { translate: 0 -79.8cqw; }
  70%, 79% { translate: 0 -93.1cqw; }
  80%, 89% { translate: 0 -106.4cqw; }
  90%, 99% { translate: 0 -119.7cqw; }
  100% { translate: 0 -133cqw; }
}
@keyframes fx-odo-gas-liso { to { translate: 0 -133cqw; } }

/* ============== ACABAMENTO 3D DOS MOSTRADORES =========================
   Tudo em CSS: vidro curvo, tambores cilíndricos, agulhas com volume.
   Nenhuma imagem nova — custo de download zero.
   ====================================================================== */

/* --- moldura do contador com chanfro (luz em cima, sombra embaixo) --- */
.odo-box {
  background: linear-gradient(180deg, #EDF0F3 0%, #E2E7EC 55%, #D5DCE3 100%);
  border-color: #333333;   /* cinza 80% — vence a cor do atalho border acima */
  box-shadow:
    0 .12cqw .3cqw rgba(20,40,70,.16),
    inset 0 .1cqw 0 rgba(255,255,255,.85),
    inset 0 -.1cqw 0 rgba(20,40,70,.08),
    inset 0 0 0 .1cqw rgba(150,168,186,.55);
}

/* --- janelas: tambor cilíndrico de verdade --- */
.jan {
  position: relative;
  background:
    linear-gradient(180deg, #C9C9C2 0%, #F2F2EC 18%, #FFFEFA 48%, #F0F0EA 62%, #C2C2BB 88%, #A8A8A2 100%);
  box-shadow:
    inset 0 .12cqw .22cqw rgba(0,0,0,.26),
    inset 0 -.08cqw .16cqw rgba(0,0,0,.14);
  border-radius: .18cqw;
}
.jan-r { background: linear-gradient(180deg, #7D0E07 0%, #C4241A 18%, #D93528 48%, #B81F16 62%, #7A0D06 88%, #600A04 100%); }
/* curvatura: escurece topo e base de cada janela, como num rolo real */
.jan::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, transparent 24%, transparent 76%, rgba(0,0,0,.22) 100%);
}
.jan .rolo { position: relative; z-index: 1; text-shadow: 0 .02cqw .03cqw rgba(0,0,0,.14); }
.jan-r .rolo { text-shadow: 0 .05cqw .09cqw rgba(70,4,0,.5); }

/* --- indicador de fluxo com volume --- */
.fluxo {
  background: radial-gradient(circle at 34% 28%, #3E4854 0%, #171D24 62%, #0A0E12 100%);
  box-shadow: 0 .2cqw .45cqw rgba(0,0,0,.42), inset 0 0 .5cqw rgba(0,0,0,.7),
              inset 0 .1cqw .2cqw rgba(255,255,255,.18),
              0 0 0 .55cqw #FFF, 0 0 0 .95cqw #14181C;   /* aro branco + contorno */
}
.fluxo i { filter: drop-shadow(0 .08cqw .12cqw rgba(0,0,0,.5)); }

/* --- mostradores de agulha com relevo --- */
.mini-face { fill: url(#g-face); }
.mini svg { filter: drop-shadow(0 .12cqw .28cqw rgba(20,40,70,.28)); }
.mini::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: 1;
  background: radial-gradient(110% 80% at 32% 10%, rgba(255,255,255,.85) 0%, transparent 46%);
  pointer-events: none;
}
.mini-agulha {
  background: linear-gradient(90deg, #A81109 0%, #E8352A 38%, #FF6B5E 52%, #D0231A 68%, #8E0D06 100%);
  filter: drop-shadow(.06cqw .12cqw .18cqw rgba(60,5,0,.55));
}
.mini-eixo {
  background: radial-gradient(circle at 34% 30%, #FF7466 0%, #D8261B 55%, #94100A 100%);
  box-shadow: 0 .08cqw .16cqw rgba(60,5,0,.5), inset 0 -.04cqw .08cqw rgba(0,0,0,.35);
  z-index: 4;
}


/* TREM DE ENGRENAGENS — as casas continuam travadas entre si em 10×, e os
   dois ponteiros são elos reais do mesmo trem: o de baixo (x0,01 m³) dá uma
   volta por dígito do tambor vermelho, e o da direita (x0,1 m³) dá uma volta
   por giro completo dele. O que se abandona aqui é a VAZÃO: para o contador
   rolar visivelmente na tela, o desenho corre a ~18 m³/h (água) e ~15 m³/h
   (gás), muito acima do real. Foi escolha de animação, não erro de mecânica:
   a contagem que o visitante vê é internamente correta. */
.odo-box .jan:nth-child(6) .rolo { animation-name: fx-odo-liso; animation-duration: 20s; }
.odo-box .jan:nth-child(5) .rolo { animation-duration: 200s; }
.odo-box .jan:nth-child(4) .rolo { animation-duration: 2000s; }
.odo-box .jan:nth-child(3) .rolo { animation-duration: 20000s; }
.odo-box .jan:nth-child(2) .rolo { animation-duration: 200000s; }
.odo-box .jan:nth-child(1) .rolo { animation-duration: 2000000s; }
.odo-gas .jan:nth-child(6) .rolo { animation-name: fx-odo-gas-liso; animation-duration: 24s; }
.odo-gas .jan:nth-child(5) .rolo { animation-duration: 240s; }
.odo-gas .jan:nth-child(4) .rolo { animation-duration: 2400s; }
.odo-gas .jan:nth-child(3) .rolo { animation-duration: 24000s; }
.odo-gas .jan:nth-child(2) .rolo { animation-duration: 240000s; }
.odo-gas .jan:nth-child(1) .rolo { animation-duration: 2400000s; }

/* ============ VIDRO E PROFUNDIDADE DO MOSTRADOR ======================
   A face vira um copo: sombra interna no aro (a luz entra por cima) e
   uma cobertura de vidro por cima de tudo. Camadas puramente visuais,
   sempre pointer-events:none e acima dos elementos.
   ====================================================================== */

/* sombra interna do aro — dá fundo ao mostrador */
.face-hidro::after {
  content: ""; position: absolute; inset: -2%; border-radius: 50%;
  z-index: 8; pointer-events: none;
  box-shadow:
    inset 0 2.5cqw 4cqw rgba(16,42,76,.30),      /* topo mais fundo   */
    inset 0 -1.4cqw 3cqw rgba(255,255,255,.55),  /* rebatimento baixo */
    inset 0 0 2cqw rgba(16,42,76,.18),           /* vinheta do aro    */
    inset 0 0 0 .5cqw rgba(120,145,170,.28);     /* aresta do vidro   */
}

/* cobertura de vidro: reflexo curvo + brilho especular */
.face-hidro::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  z-index: 9; pointer-events: none;
  background:
    radial-gradient(78% 58% at 30% 6%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.28) 34%, transparent 62%),
    radial-gradient(52% 40% at 76% 92%, rgba(255,255,255,.34) 0%, transparent 56%),
    linear-gradient(148deg, rgba(255,255,255,.20) 0%, transparent 32%, transparent 68%, rgba(210,228,245,.22) 100%);
}

/* vidro sobre as janelas do contador (acrílico do visor) */
.odo-box { position: relative; }
.odo-box::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(163deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 26%, transparent 44%);
}

/* vidro dos mostradores de agulha */
.mini::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  z-index: 5; pointer-events: none;
  background:
    radial-gradient(70% 52% at 30% 8%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.2) 38%, transparent 64%);
  box-shadow: inset 0 .5cqw 1cqw rgba(16,42,76,.22), inset 0 -.3cqw .6cqw rgba(255,255,255,.5);
}

/* vidro do visor do gás */
.face-gas::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border-radius: .8cqw;
  background:
    linear-gradient(158deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 24%, transparent 44%),
    radial-gradient(60% 44% at 78% 94%, rgba(255,255,255,.22) 0%, transparent 58%);
  box-shadow: inset 0 .8cqw 1.6cqw rgba(16,42,76,.16), inset 0 -.5cqw 1cqw rgba(255,255,255,.42);
}


/* ============ REFLEXO NO VIDRO =========================================
   Camada de vida que não é mecânica: uma faixa de luz difusa que cruza
   o vidro devagar — é ela que faz o olho ler superfície curva.
   ====================================================================== */
.brilho {
  position: absolute; inset: 0; z-index: 10;
  border-radius: 50%; overflow: hidden; pointer-events: none;
}
.brilho::before {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 48%;
  rotate: 16deg;
  /* difusa de propósito: o vidro do mostrador é fosco por dentro, o reflexo
     nele não tem aresta. O blur é cortado pelo overflow da própria peça. */
  filter: blur(2.4cqw);
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.06) 24%, rgba(255,255,255,.34) 50%,
    rgba(255,255,255,.06) 76%, transparent 100%);
  animation: fx-reflexo 7.5s cubic-bezier(.45,0,.25,1) infinite;
}
/* o mostrador do gás é retangular e varre fora de fase, para os dois nunca
   brilharem juntos (dois reflexos simultâneos denunciam que é desenho) */
.brilho-gas { border-radius: .8cqw; }
.brilho-gas::before { animation-duration: 9.4s; animation-delay: -3.4s; }
@keyframes fx-reflexo {
  0%, 58%   { translate: 0 0; }
  86%, 100% { translate: 340% 0; }
}

[data-fx]:not(.fx-ativo) .brilho::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .brilho::before { animation: none !important; opacity: 0; }
}