/* Detalhes de água (ligados por BHV_AGUA em functions.php). Apagar a constante ou pôr false volta ao visual sem eles. */
:root { --agua: #38b6f0; --agua-d: #1683c4; --agua-soft: #e6f6fd; }

/* Ondas na borda das seções escuras: 3 camadas em velocidades diferentes, a da frente tem a cor da seção seguinte */
.ondas { position: absolute; left: 0; right: 0; bottom: -1px; height: 64px; pointer-events: none; z-index: 1; }
.ondas-topo { bottom: auto; top: -1px; transform: scaleY(-1); }
.ondas i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C150 0 450 120 600 60 C750 0 1050 120 1200 60 V120 H0Z'/%3E%3C/svg%3E") repeat-x 0 100% / 1200px 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C150 0 450 120 600 60 C750 0 1050 120 1200 60 V120 H0Z'/%3E%3C/svg%3E") repeat-x 0 100% / 1200px 100%;
  animation: bhvOndaMove 22s linear infinite; }
.ondas .o1 { background: linear-gradient(180deg, rgba(56,182,240,.28), rgba(22,131,196,.10)); height: 100%; animation-duration: 26s; -webkit-mask-size: 1400px 100%; mask-size: 1400px 100%; }
.ondas .o2 { background: linear-gradient(180deg, rgba(92,200,255,.40), rgba(56,182,240,.18)); height: 78%; animation-duration: 17s; animation-direction: reverse; -webkit-mask-size: 1000px 100%; mask-size: 1000px 100%; }
.ondas .o3 { background: var(--onda-frente, #fff); height: 52%; animation-duration: 12s; -webkit-mask-size: 1200px 100%; mask-size: 1200px 100%; }
@keyframes bhvOndaMove { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 1200px 100%; mask-position: 1200px 100%; } }
.hero .wrap { padding-bottom: 96px; }
.topo-pag .wrap { padding-bottom: 84px; }
.final { padding-top: 110px; }
@media (max-width: 600px) { .ondas { height: 40px; } .hero .wrap { padding-bottom: 72px; } .topo-pag .wrap { padding-bottom: 66px; } }

/* Ícones dos serviços "enchem de água" ao passar o mouse */
.servico .ic { position: relative; overflow: hidden; isolation: isolate; }
.servico .ic::after { content: ''; position: absolute; left: -50%; width: 200%; height: 200%; top: 100%; z-index: -1; border-radius: 42%;
  background: linear-gradient(180deg, var(--agua), var(--agua-d)); transition: top .7s cubic-bezier(.2,.8,.2,1); animation: bhvGira 6s linear infinite; }
.servico:hover .ic::after { top: 30%; }
.servico:hover .ic { color: #fff; }

/* Brilho de água passando no título das esteiras */
.est-titulo b { background: linear-gradient(90deg, #fff 0%, #fff 40%, #9fe0ff 50%, #fff 60%, #fff 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bhvBrilhoAgua 6s ease-in-out infinite; }
@keyframes bhvBrilhoAgua { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Destaques ligados a água usam o azul */
.est-dif .ic { background: rgba(56,182,240,.12); color: #7fd3ff; }
.compara .com li::before { color: var(--agua); }
.lista-check .i { color: var(--agua-d); }
.escura .lista-check .i { color: var(--agua); }

@media (prefers-reduced-motion: reduce) { .ondas i, .servico .ic::after, .est-titulo b { animation: none; } }
.esteiras { border-top: 0; }