/* ==========================================================================
   home.css — página inicial (autossuficiente, mobile-first)
   Copiado para /assets/home.css pelo build. Edite AQUI, não lá.

   Duas decisões que guiam tudo:

   1. MOBILE PRIMEIRO DE VERDADE. Os estilos-base são o celular; as media
      queries só ADICIONAM a partir de 640px. A maioria de quem procura
      "poço artesiano perto de mim" está no telefone, muitas vezes na roça
      com sinal ruim.

   2. DOIS PÚBLICOS, UMA PÁGINA. Quem quer um poço em casa decide por
      confiança; quem contrata para mineração decide por escopo e
      documentação. A dobra inicial oferece os dois caminhos lado a lado
      em vez de um botão genérico que não serve para nenhum dos dois.
   ========================================================================== */

/* ------------------------------------------------------------ tokens */
:root {
  --tinta: #0b1118;
  --tinta-2: #5a6472;
  --tinta-3: #8a93a0;
  --linha: rgba(10, 20, 35, .09);
  --fundo: #ffffff;
  --fundo-2: #f4f6fa;
  --fundo-3: #eef1f6;

  --azul: #0a63c9;
  --azul-2: #1a8ae5;
  --agua: #06b6cf;
  --ambar: #f2a01a;
  --verde: #16a34a;
  --roxo: #6d5cf0;

  --escuro: #0a121c;
  --escuro-2: #101d2c;

  --r-p: 12px;
  --r-m: 18px;
  --r-g: 26px;
  --r-gg: 32px;

  --som-1: 0 1px 2px rgba(10, 20, 35, .05), 0 4px 12px rgba(10, 20, 35, .05);
  --som-2: 0 2px 6px rgba(10, 20, 35, .06), 0 14px 34px rgba(10, 20, 35, .09);
  --som-3: 0 4px 12px rgba(10, 20, 35, .08), 0 26px 60px rgba(10, 20, 35, .14);

  --mola: cubic-bezier(.32, .72, 0, 1);
  --max: 1200px;
  --pad: 20px;
}

/* ------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.home {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text',
               'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.home.menu-aberto { overflow: hidden; }

.home img, .home picture, .home video { max-width: 100%; display: block; }
.home h1, .home h2, .home h3 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display',
               'Segoe UI', system-ui, Roboto, sans-serif;
  margin: 0;
  line-height: 1.12;
  letter-spacing: -.022em;
  font-weight: 700;
}
.home p { margin: 0; }
.home a { color: inherit; text-decoration: none; }
.home ul, .home ol { margin: 0; padding: 0; list-style: none; }
.home button { font: inherit; color: inherit; }
.home :focus-visible { outline: 2px solid var(--azul-2); outline-offset: 3px; border-radius: 6px; }

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

/* Estilo dos ícones. O seletor é explícito de propósito: uma regra genérica
   como `svg[viewBox]` também acertaria o SVG do simulador, colapsando-o para
   1em de altura e apagando os preenchimentos das camadas. */
.home .ic,
.home .cartao-ic svg,
.home .ind-ic svg,
.home .video-play svg {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
/* O play é preenchido, não traçado */
.home .video-play svg { fill: currentColor; stroke: none; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* revelação ao rolar — o estado escondido só existe sob html.anim, para que
   uma falha de JS nunca deixe a página invisível */
html.anim .rv { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s var(--mola); }
html.anim .rv.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.anim .rv { opacity: 1; transform: none; transition: none; } }

/* ------------------------------------------------------------ botões */
.home .bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 22px;
  border: none; border-radius: 999px;
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer; text-align: center;
  transition: transform .2s var(--mola), box-shadow .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.home .bt .ic { font-size: 1.15em; }
.home .bt:active { transform: scale(.97); }
@media (hover: hover) { .home .bt:hover { transform: translateY(-2px); } }

.bt-zap { background: #25c15c; color: #04250f; box-shadow: 0 8px 22px rgba(37, 193, 92, .3); }
.bt-ambar { background: linear-gradient(180deg, #ffb937, var(--ambar)); color: #3a2503; box-shadow: 0 8px 22px rgba(242, 160, 26, .3); }
.bt-azul { background: linear-gradient(180deg, var(--azul-2), var(--azul)); color: #fff; box-shadow: 0 8px 22px rgba(10, 99, 201, .28); }
.bt-claro { background: #fff; color: var(--escuro); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.bt-fantasma-claro { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(8px); }

.acoes { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
@media (min-width: 560px) { .acoes { flex-direction: row; flex-wrap: wrap; } }

/* ------------------------------------------------------------ cabeçalho */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
  padding-top: env(safe-area-inset-top);
}
.topo.rolado {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 1px 0 var(--linha);
}
.topo-in {
  max-width: var(--max); margin: 0 auto;
  padding: 12px var(--pad);
  display: flex; align-items: center; gap: 12px;
}
.marca { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca img { width: 34px; height: 34px; border-radius: 9px; }
.marca span {
  display: flex; flex-direction: column; line-height: 1.1;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; color: #fff;
  transition: color .3s ease;
}
.marca i { font-style: normal; font-size: .62rem; font-weight: 500; letter-spacing: .04em;
           text-transform: uppercase; opacity: .68; }
.topo.rolado .marca span { color: var(--tinta); }

/* Com o menu aberto o cabeçalho assume o mesmo estado sólido do "rolado".
   Sem isto, a marca e os traços do botão são brancos sobre o painel claro —
   ficam invisíveis, e a impressão é de menu quebrado, "sem fundo". */
.menu-aberto .topo {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 1px 0 var(--linha);
}
.menu-aberto .marca span { color: var(--tinta); }

.topo-cta, .menu { display: none; }

.hamburguer {
  /* Conserto do bug de fechar. O painel é posicionado e o botão não era, então
     dentro do contexto de empilhamento do cabeçalho o painel passava POR CIMA
     do botão: o clique ia para o painel e o menu não tinha como ser fechado.
     Os números são pequenos de propósito — `.topo` já isola tudo em 900 em
     relação à página, aqui só interessa a ordem entre o véu (1) e a barra (2). */
  position: relative; z-index: 2;
  margin-left: auto;
  width: 40px; height: 40px; padding: 12px 10px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 11px; cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .3s, border-color .3s;
}
.topo.rolado .hamburguer,
.menu-aberto .hamburguer { background: var(--fundo-3); border-color: transparent; }
.hamburguer span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: #fff; transition: transform .32s var(--mola), opacity .2s, background .3s;
}
.topo.rolado .hamburguer span,
.menu-aberto .hamburguer span { background: var(--tinta); }
.menu-aberto .hamburguer span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-aberto .hamburguer span:nth-child(2) { opacity: 0; }
.menu-aberto .hamburguer span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Painel de menu no celular.
   Era uma folha branca de tela inteira com oito linhas de 1,16rem — pesado
   para sete links. Agora é um cartão compacto ancorado sob o cabeçalho, e o
   <nav> em volta dele é o véu: tocar fora fecha. */
.menu {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(8, 16, 26, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: calc(66px + env(safe-area-inset-top)) var(--pad) var(--pad);
  opacity: 0; pointer-events: none;
  transition: opacity .24s ease;
}
.menu-aberto .menu { display: block; opacity: 1; pointer-events: auto; }

.menu ul {
  display: flex; flex-direction: column;
  margin-left: auto;
  width: min(300px, 100%);
  padding: 6px;
  background: #fff;
  border-radius: var(--r-m);
  box-shadow: var(--som-3);
  transform: translateY(-8px);
  transition: transform .26s var(--mola);
}
.menu-aberto .menu ul { transform: none; }
.menu li + li { border-top: 1px solid var(--linha); }
.menu a {
  display: flex; align-items: center;
  padding: 13px 12px;
  font-size: .98rem; font-weight: 600; letter-spacing: -.015em;
  color: var(--tinta);
  border-radius: 9px;
}
.menu a:active { background: var(--fundo-3); }
@media (prefers-reduced-motion: reduce) {
  .menu, .menu ul { transition: none; }
}

/* ------------------------------------------------------------ capa */
.capa {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: calc(96px + env(safe-area-inset-top)) 0 46px;
  overflow: hidden;
  background: var(--escuro);
}
.capa-foto { position: absolute; inset: 0; }
.capa-foto img { width: 100%; height: 100%; object-fit: cover; }
.capa::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 16, 26, .82) 0%, rgba(8, 16, 26, .5) 34%, rgba(8, 16, 26, .88) 74%, #0a121c 100%),
    radial-gradient(90% 60% at 20% 100%, rgba(6, 110, 190, .34), transparent 70%);
}
.capa-in { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); color: #fff; }

.capa h1 {
  font-size: clamp(2.05rem, 8.6vw, 2.9rem);
  margin-bottom: 16px;
  letter-spacing: -.034em;
}
.capa h1 span {
  background: linear-gradient(100deg, #5fd8ea, #2f9fe8 60%, #7fe0c2);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.capa-sub {
  font-size: 1.02rem; color: rgba(255, 255, 255, .8);
  max-width: 54ch; margin-bottom: 26px;
}

/* ------------------------------------------------------------ ações da capa
   Eram dois cards de vidro com ícone, subtítulo e chips. Ocupavam meia tela e,
   por parecerem cartão informativo, não comunicavam "clique aqui" — a dobra
   tem um trabalho só, que é fazer quem chegou se identificar em um toque.
   Viraram dois botões: um por público, verbo na primeira pessoa. */
.capa-acoes { display: grid; gap: 10px; margin-top: 26px; }

.bt-capa {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 20px;
  border-radius: 999px;
  font-size: 1.02rem; font-weight: 650; letter-spacing: -.022em;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s var(--mola), box-shadow .22s ease, background .22s ease;
}
.bt-capa .ic { font-size: 1.25em; }
.bt-capa span { flex: 1; }
/* A seta fica na direita e anda no toque/hover: é o sinal de que leva a algum
   lugar, e substitui o "Ver como funciona" que os cards precisavam escrever. */
.bt-capa .seta { font-size: 1.15em; opacity: .8; transition: transform .22s var(--mola); }
.bt-capa:active { transform: scale(.985); }
@media (hover: hover) {
  .bt-capa:hover { transform: translateY(-2px); }
  .bt-capa:hover .seta { transform: translateX(4px); }
}

.bt-capa-agua {
  background: linear-gradient(180deg, var(--azul-2), var(--azul));
  color: #fff;
  box-shadow: 0 10px 26px rgba(10, 99, 201, .42);
}
@media (hover: hover) { .bt-capa-agua:hover { box-shadow: 0 14px 34px rgba(10, 99, 201, .5); } }

.bt-capa-empresa {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #fff;
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.bt-capa-empresa .ic:first-child { color: var(--ambar); }
@media (hover: hover) { .bt-capa-empresa:hover { background: rgba(255, 255, 255, .2); } }

/* O seletor leva `.home` na frente porque o reset do arquivo tem
   `.home p { margin: 0 }` — com `.capa-nota` sozinho a margem não vale. */
.home .capa-nota {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 16px;
  font-size: .84rem; line-height: 1.45;
  color: rgba(255, 255, 255, .74);
}
.home .capa-nota .ic { font-size: 1.05em; color: var(--agua); margin-top: .1em; }

@media (min-width: 620px) {
  .capa-acoes { grid-auto-flow: column; justify-content: start; gap: 12px; }
  .bt-capa { padding: 16px 26px; }
}


.rolar {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 3;
  width: 38px; height: 38px; display: none; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; font-size: 18px;
  backdrop-filter: blur(10px);
  animation: flutua 2.4s ease-in-out infinite;
}
@keyframes flutua { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .rolar { animation: none; } }

/* ------------------------------------------------------------ números */
.faixa-num { background: var(--escuro); padding: 4px 0 34px; }
.faixa-num ul {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255, 255, 255, .1);
  border-radius: var(--r-m); overflow: hidden;
}
.faixa-num li { background: var(--escuro); padding: 18px 14px; text-align: center; }
.faixa-num b {
  display: block; font-size: 1.72rem; font-weight: 700; letter-spacing: -.03em;
  background: linear-gradient(180deg, #fff, #9fc4e8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.faixa-num span { font-size: .76rem; color: rgba(255, 255, 255, .58); }

/* ------------------------------------------------------------ blocos */
.bloco { padding: 56px 0; }
.bloco.alt { background: var(--fundo-2); }

.cabeca { margin-bottom: 28px; max-width: 60ch; }
.olho {
  display: inline-block; margin-bottom: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--azul);
}
.cabeca h2 { font-size: clamp(1.6rem, 6.4vw, 2.2rem); margin-bottom: 12px; }
.cabeca p { color: var(--tinta-2); font-size: 1rem; }
.sobre-escuro .olho { color: var(--agua); }
.sobre-escuro h2 { color: #fff; }
.sobre-escuro p { color: rgba(255, 255, 255, .72); }

/* ------------------------------------------------------------ cards de serviço */
.grade { display: grid; gap: 12px; }
.cartao {
  display: flex; flex-direction: column;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
  box-shadow: var(--som-1);
  transition: transform .28s var(--mola), box-shadow .28s ease, border-color .28s ease;
  -webkit-tap-highlight-color: transparent;
}
.cartao:active { transform: scale(.985); }
@media (hover: hover) {
  .cartao:hover { transform: translateY(-4px); box-shadow: var(--som-2); border-color: transparent; }
  .cartao:hover .cartao-ir .ic { transform: translateX(4px); }
}
.cartao-ic {
  width: 44px; height: 44px; margin-bottom: 14px;
  display: grid; place-items: center;
  border-radius: 14px; font-size: 22px; color: #fff;
}
.cartao-ic.azul { background: linear-gradient(160deg, #3aa9ef, #0a63c9); }
.cartao-ic.ambar { background: linear-gradient(160deg, #ffc046, #e08a06); }
.cartao-ic.verde { background: linear-gradient(160deg, #45d182, #12894a); }
.cartao-ic.ciano { background: linear-gradient(160deg, #4fd8e8, #0894ab); }
.cartao-ic.roxo { background: linear-gradient(160deg, #9b8bff, #5a46e0); }
.cartao-ic.branco { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .24); }
.cartao h3 { font-size: 1.06rem; margin-bottom: 7px; letter-spacing: -.024em; }
.cartao p { font-size: .91rem; color: var(--tinta-2); flex: 1; margin-bottom: 14px; }
.cartao-ir { display: flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--azul); }
.cartao-ir .ic { font-size: 1.15em; transition: transform .25s var(--mola); }

.cartao-todos { background: linear-gradient(155deg, #14324f, var(--escuro)); border-color: transparent; color: #fff; }
.cartao-todos h3 { color: #fff; }
.cartao-todos p { color: rgba(255, 255, 255, .72); }
.cartao-todos .cartao-ir { color: #7fd0ff; }

/* ------------------------------------------------------------ galeria e vídeo */
.galeria { display: grid; gap: 12px; }
.foto {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--r-g); background: var(--fundo-3);
  box-shadow: var(--som-1);
}
.foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .5s var(--mola); }
@media (hover: hover) { .foto:hover img { transform: scale(1.04); } }
.foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 13px;
  background: linear-gradient(transparent, rgba(6, 14, 24, .82));
  color: #fff; font-size: .84rem; font-weight: 600; letter-spacing: -.01em;
}

.video-bloco { margin-top: 14px; }
.video-moldura {
  position: relative; overflow: hidden;
  border-radius: var(--r-g); background: #000;
  box-shadow: var(--som-2);
}
.video-moldura video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(14px);
  color: #fff; font-size: 26px; cursor: pointer;
  transition: transform .25s var(--mola), background .25s;
}
.video-play svg { margin-left: 3px; }
@media (hover: hover) { .video-play:hover { transform: scale(1.08); background: rgba(255, 255, 255, .3); } }
.video-bloco.tocando .video-play { display: none; }
.video-cap { margin-top: 10px; font-size: .84rem; color: var(--tinta-3); text-align: center; }

/* ------------------------------------------------------------ industrial */
.industrial {
  padding: 56px 0;
  background:
    radial-gradient(100% 70% at 80% 0%, rgba(10, 99, 201, .38), transparent 60%),
    linear-gradient(170deg, var(--escuro-2), var(--escuro));
  color: #fff;
}
.ind-grade { display: grid; gap: 12px; }
.ind-item {
  padding: 18px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--r-m);
}
.ind-ic {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 12px;
  border-radius: 11px; font-size: 20px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--agua);
}
.ind-item b { display: block; font-size: .99rem; font-weight: 650; letter-spacing: -.02em; margin-bottom: 5px; }
.ind-item span { font-size: .87rem; color: rgba(255, 255, 255, .68); }

.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.etiquetas li {
  font-size: .78rem;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .8);
}

/* ------------------------------------------------------------ etapas */
.etapas { display: grid; gap: 8px; counter-reset: passo; }
.etapas li {
  counter-increment: passo;
  position: relative;
  padding: 18px 18px 18px 62px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--r-m);
}
.etapas li::before {
  content: counter(passo);
  position: absolute; left: 18px; top: 18px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--azul-2), var(--azul));
  color: #fff; font-size: .85rem; font-weight: 700;
}
.etapas h3 { font-size: 1rem; margin-bottom: 4px; letter-spacing: -.022em; }
.etapas p { font-size: .89rem; color: var(--tinta-2); }

/* ------------------------------------------------------------ listas de links */
.lista { display: grid; gap: 8px; }
.lista a {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 16px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--r-m);
  font-size: .94rem; font-weight: 500; letter-spacing: -.012em;
  box-shadow: var(--som-1);
  transition: transform .25s var(--mola), box-shadow .25s, border-color .25s;
  -webkit-tap-highlight-color: transparent;
}
.lista a i { font-style: normal; font-size: .76rem; color: var(--tinta-3); font-weight: 500; }
.lista a .ic { margin-left: auto; color: var(--tinta-3); font-size: 1.05rem; transition: transform .25s var(--mola), color .25s; }
.lista a:active { transform: scale(.985); }
@media (hover: hover) {
  .lista a:hover { border-color: transparent; box-shadow: var(--som-2); transform: translateY(-2px); }
  .lista a:hover .ic { transform: translateX(3px); color: var(--azul); }
}

/* ------------------------------------------------------------ globo 3D
   O canvas é decorativo: todo texto que importa vive no HTML ao lado dele.
   Se o WebGL não existir, some o canvas e a seção continua completa. */
.globo-secao {
  padding: 56px 0 60px;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(10, 99, 201, .3), transparent 62%),
    linear-gradient(180deg, var(--escuro) 0%, #0b1826 60%, var(--escuro) 100%);
  color: #fff;
  overflow: hidden;
}

.globo { display: grid; gap: 22px; }

.globo-palco {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 62vh;
  margin: 0 auto;
  width: 100%;
  max-width: 520px;
}
.globo-canvas {
  width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: pan-y;
}
.globo.arrastando .globo-canvas { cursor: grabbing; }
.globo.sem-webgl .globo-canvas { display: none; }

/* brilho por trás da esfera, para o globo não parecer recortado */
.globo-palco::before {
  content: '';
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(12, 130, 190, .28), transparent 68%);
  filter: blur(26px);
  pointer-events: none;
}

/* Esta legenda fica POR CIMA do globo, e o que passa atrás dela não é fundo
   liso: são os pontos dos poços, claros e em movimento. Com fundo a 70% e
   texto a 78% havia trecho de palavra sumindo conforme o globo girava — o
   contraste tem de ser garantido contra o pior caso, não contra o fundo médio.
   Daí a pastilha quase opaca, o texto em branco cheio e a sombra externa que
   descola a pastilha do brilho da esfera. */
.globo-selo {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  padding: 8px 16px; border-radius: 999px;
  background: rgba(6, 13, 22, .93);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  font-size: .76rem; font-weight: 500; color: #fff;
  white-space: nowrap;
}
.globo.carregando .globo-selo { animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .globo.carregando .globo-selo { animation: none } }

.globo-atalhos {
  margin-top: 14px;
  font-size: .84rem;
  color: rgba(255, 255, 255, .6);
}
.globo-atalhos a { color: var(--agua); border-bottom: 1px solid transparent; }
.globo-atalhos a:hover { border-bottom-color: currentColor; }

.globo-carregar {
  position: absolute; top: 8px; right: 8px;
  padding: 9px 15px; border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: rgba(6, 13, 22, .93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  color: #fff;
  font-size: .76rem; font-weight: 600; cursor: pointer;
  transition: background .2s, color .2s;
}
.globo-carregar:hover { background: rgba(8, 18, 30, .85); color: #fff; }
.globo-carregar { top: auto; bottom: 44px; right: 50%; transform: translateX(50%); }

.globo-info {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center; gap: 4px;
  padding: 24px;
}
.globo-info strong { font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; }
.globo-info span { color: rgba(255, 255, 255, .66); font-size: .92rem; }
.globo-info p { margin-top: 12px; font-size: .84rem; color: rgba(255, 255, 255, .5); max-width: 34ch; }

/* ---- lado da busca */
.globo-lado { position: relative; display: grid; gap: 16px; align-content: start; }

.globo-busca { display: block; }
.globo-busca-rotulo {
  display: block; margin-bottom: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--agua);
}
.globo-busca-campo {
  width: 100%; padding: 15px 18px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  color: #fff; font-size: 1rem; font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
.globo-busca-campo::placeholder { color: rgba(255, 255, 255, .38); }
.globo-busca-campo:focus {
  outline: none;
  border-color: var(--agua);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 4px rgba(6, 182, 207, .16);
}

.globo-resultados {
  display: grid; gap: 6px;
  margin-top: -8px;
  max-height: 320px; overflow-y: auto;
}
.globo-resultados a {
  display: block; padding: 12px 15px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  transition: background .2s, border-color .2s;
}
.globo-resultados a:hover { background: rgba(255, 255, 255, .12); border-color: var(--agua); }
.globo-resultados strong { display: block; font-size: .96rem; font-weight: 600; letter-spacing: -.015em; }
.globo-resultados span { display: block; font-size: .78rem; color: rgba(255, 255, 255, .58); margin-top: 2px; }
.globo-vazio {
  padding: 12px 15px; font-size: .84rem; color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .04); border-radius: 12px;
}

/* Três frases que dizem o que o visitante encontra na busca. Sem elas, o mapa
   é bonito e sem propósito para quem chegou querendo um poço. */
.globo-usos { display: grid; gap: 9px; margin: 2px 0 4px; }
.globo-usos li {
  position: relative;
  padding-left: 26px;
  font-size: .89rem;
  color: rgba(255, 255, 255, .78);
  line-height: 1.5;
}
.globo-usos li::before {
  content: '';
  position: absolute; left: 6px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--agua);
  box-shadow: 0 0 0 4px rgba(6, 182, 207, .16);
}

.globo-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.globo-numeros div {
  padding: 14px 12px; text-align: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
}
.globo-numeros b {
  display: block; font-size: 1.16rem; font-weight: 700; letter-spacing: -.025em;
  color: var(--agua);
}
.globo-numeros span { font-size: .7rem; color: rgba(255, 255, 255, .55); }

.globo-nota { font-size: .82rem; color: rgba(255, 255, 255, .55); }
.globo-nota a { color: var(--agua); text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 860px) {
  .globo { grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center; }
  .globo-palco { max-width: 100%; max-height: 70vh; }
  .globo-secao { padding: 80px 0; }
}

/* ------------------------------------------------------------ fecho */
.fecho {
  padding: 60px 0;
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(6, 182, 207, .3), transparent 65%),
    linear-gradient(160deg, #0b4b8f, var(--escuro));
  color: #fff;
}
.fecho .olho { color: var(--agua); }
.fecho h2 { font-size: clamp(1.7rem, 6.8vw, 2.4rem); margin-bottom: 12px; }
.fecho p { color: rgba(255, 255, 255, .8); max-width: 54ch; margin: 0 auto; }
.fecho .acoes { justify-content: center; }
.fecho-info {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-top: 22px; font-size: .82rem; color: rgba(255, 255, 255, .6);
}

/* ------------------------------------------------------------ rodapé */
.rodape { background: #070d15; color: rgba(255, 255, 255, .62); padding: 46px 0 calc(96px + env(safe-area-inset-bottom)); font-size: .88rem; }
.rodape-grade { display: grid; gap: 30px; }
.rodape h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: 12px; font-weight: 650; }
.rodape ul { display: grid; gap: 8px; }
.rodape a { color: rgba(255, 255, 255, .62); }
@media (hover: hover) { .rodape a:hover { color: #fff; } }
.rodape-marca img { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 12px; }
.rodape-marca b { display: block; color: #fff; font-size: 1rem; margin-bottom: 8px; letter-spacing: -.02em; }
.rodape-marca p { margin-bottom: 14px; }
.rodape address { font-style: normal; line-height: 1.9; }
.rodape address span { color: rgba(255, 255, 255, .42); }
.rodape-fim { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8rem; color: rgba(255, 255, 255, .42); }

/* ------------------------------------------------------------ barra fixa (celular) */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 880;
  display: flex; gap: 9px;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-top: 1px solid var(--linha);
}
.bf-zap {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; border-radius: 999px;
  background: #25c15c; color: #04250f;
  font-size: .97rem; font-weight: 650; letter-spacing: -.015em;
}
.bf-zap .ic { font-size: 1.2em; }
.bf-tel {
  width: 52px; display: grid; place-items: center;
  border-radius: 999px; font-size: 20px;
  background: var(--fundo-3); color: var(--tinta);
}
.menu-aberto .barra-fixa { display: none; }

/* ==========================================================================
   A PARTIR DAQUI: TELAS MAIORES
   ========================================================================== */

@media (min-width: 560px) {
  .galeria { grid-template-columns: 1fr 1fr; }
  .foto-grande { grid-column: span 2; }
  .foto-grande img { aspect-ratio: 16 / 9; }
}

@media (min-width: 700px) {
  :root { --pad: 28px; }
  .bloco, .industrial, .sim-secao { padding: 76px 0; }
  .fecho { padding: 84px 0; }
  .grade { grid-template-columns: repeat(2, 1fr); }
  .ind-grade { grid-template-columns: repeat(2, 1fr); }
  .etapas { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .lista { grid-template-columns: repeat(2, 1fr); }
  .faixa-num ul { grid-template-columns: repeat(4, 1fr); }
  .faixa-num b { font-size: 2rem; }
  .capa { align-items: center; padding-top: calc(120px + env(safe-area-inset-top)); }
  .rolar { display: grid; }
  .cabeca { margin-bottom: 36px; }
}

@media (min-width: 960px) {
  .topo-in { padding: 14px var(--pad); }
  .hamburguer { display: none; }
  .menu {
    position: static; display: block; inset: auto;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0; opacity: 1; pointer-events: auto;
    margin-left: auto;
  }
  /* Desfaz o cartão do celular: no desktop o <ul> é só uma fileira de links
     sobre a foto da capa. Sem estes resets ele vira uma caixa branca de
     300px com sombra, e os links brancos somem dentro dela. */
  .menu ul {
    flex-direction: row; gap: 4px;
    width: auto; margin-left: 0; padding: 0;
    background: none; border-radius: 0; box-shadow: none; transform: none;
  }
  .menu li + li { border: none; }
  .menu a {
    padding: 9px 14px; border-radius: 999px;
    font-size: .93rem; font-weight: 550; letter-spacing: -.012em;
    color: rgba(255, 255, 255, .82);
    transition: background .22s, color .22s;
  }
  .topo.rolado .menu a { color: var(--tinta-2); }
  .menu a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
  .topo.rolado .menu a:hover { background: var(--fundo-3); color: var(--tinta); }

  .topo-cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: 10px; padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(10px);
    color: #fff; font-size: .9rem; font-weight: 650; letter-spacing: -.015em;
    transition: background .22s, color .22s, border-color .22s;
  }
  .topo.rolado .topo-cta { background: var(--azul); border-color: transparent; color: #fff; }
  .topo-cta:hover { background: var(--azul-2); border-color: transparent; }

  .capa h1 { font-size: clamp(2.9rem, 4.6vw, 4rem); }
  .capa-sub { font-size: 1.12rem; }
  .grade { grid-template-columns: repeat(4, 1fr); }
  .ind-grade { grid-template-columns: repeat(4, 1fr); }
  .etapas { grid-template-columns: repeat(4, 1fr); }
  .lista { grid-template-columns: repeat(3, 1fr); }
  .galeria { grid-template-columns: repeat(3, 1fr); }
  .foto-grande { grid-column: span 3; }
  .sim-palco { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); align-items: start; }
  .sim-controles { grid-template-columns: 1fr auto; align-items: center; gap: 18px; }
  .rodape-grade { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
  .rodape { padding-bottom: 46px; }
  .barra-fixa { display: none; }
}

@media (min-width: 1200px) {
  .capa h1 { font-size: 4.2rem; }
}