/* =====================================================================
   Redrau Acqua Filtros — Landing Page
   CSS residual: variáveis, componentes, animações e estados controlados
   por JavaScript. O restante do layout é feito com Tailwind (CDN).
   ===================================================================== */

:root{
  --acqua-50:#EFFAFB;
  --acqua-100:#D7F1F4;
  --acqua-200:#ABE3E8;
  --acqua-300:#5CC6D0;   /* ciano do símbolo e da palavra FILTROS no logo */
  --acqua-400:#38B0D8;
  --acqua-500:#047AAC;   /* azul do logotipo "redrau acqua" */
  --acqua-600:#036A97;
  --acqua-700:#03567B;
  --acqua-800:#023F5C;
  --acqua-900:#00254F;   /* navy institucional Redrau */
  --acqua-950:#001A38;
  --ink:#212121;
  --ink-soft:#4E4B66;
  --ink-mute:#8A93A0;
  --sand:#F4F8FB;
  --shadow-card:0 4px 16px rgba(0,37,79,.08);
  --shadow-card-hover:0 12px 32px rgba(0,37,79,.15);
  --header-h:84px;
}

/* ---------------------------------------------- base */
*{ -webkit-tap-highlight-color: transparent; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body{ overflow-x: hidden; }

::selection{ background: var(--acqua-500); color:#fff; }

:focus-visible{
  outline: 3px solid var(--acqua-400);
  outline-offset: 3px;
  border-radius: 6px;
}

img, svg{ max-width:100%; }

/* ---------------------------------------------- tipografia utilitária */
.eyebrow{
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acqua-500);
}
.eyebrow--light{ color: var(--acqua-300); }

.h2{
  font-family:"Work Sans", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(1.85rem, 1.1rem + 2.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--acqua-900);
}
.h2--light{ color:#fff; }

.lead{
  font-size: 1.075rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.lead strong{ color: var(--acqua-800); font-weight:700; }

/* ---------------------------------------------- marca / logo
   Logo oficial em PNG com transparência (1503 x 342 px).
   No header há duas versões sobrepostas: a branca aparece sobre o hero
   e a colorida entra junto com o fundo branco do header ao rolar. */
.brand{
  position:relative;
  display:block;
  height:34px;
  flex:0 0 auto;
  transition: transform .3s ease;
}
.brand:hover{ transform: translateY(-2px); }
@media (min-width:768px){ .brand{ height:40px; } }

.brand-logo{
  display:block;
  height:100%;
  width:auto;
  transition: opacity .3s ease;
}
.brand-logo--dark{
  position:absolute;
  left:0; top:0;
  opacity:0;
}
#header.is-scrolled .brand-logo--light{ opacity:0; }
#header.is-scrolled .brand-logo--dark{ opacity:1; }

.brand-logo--footer{
  height:44px;
  width:auto;
}

/* ---------------------------------------------- header */
#header{ background: transparent; }

#header .nav-link{
  position:relative;
  font-size:.95rem;
  font-weight:600;
  color: rgba(255,255,255,.88);
  transition: color .25s ease;
}
#header .nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-7px;
  width:100%; height:2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
#header .nav-link:hover::after,
#header .nav-link.is-active::after{ transform: scaleX(1); }
#header .nav-link:hover,
#header .nav-link.is-active{ color:#fff; }

#header .btn-cta{
  border-color: rgba(255,255,255,.7);
  color:#fff;
}
#header .btn-cta:hover{
  background:#fff;
  color: var(--acqua-900);
  border-color:#fff;
}

/* estado com scroll */
#header.is-scrolled{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 18px rgba(0,37,79,.10);
}
#header.is-scrolled .nav-link{ color: var(--acqua-800); }
#header.is-scrolled .nav-link:hover,
#header.is-scrolled .nav-link.is-active{ color: var(--acqua-500); }
#header.is-scrolled .btn-cta{
  border-color: var(--acqua-500);
  color: var(--acqua-500);
}
#header.is-scrolled .btn-cta:hover{
  background: var(--acqua-500);
  color:#fff;
}
#header.is-scrolled .nav-burger span{ background: var(--acqua-900); }

/* ---------------------------------------------- hambúrguer */
.nav-burger{
  width:44px; height:44px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:5px;
  border-radius:12px;
}
.nav-burger span{
  display:block;
  width:24px; height:2.5px;
  border-radius:2px;
  background:#fff;
  transition: transform .3s ease, opacity .25s ease, background .3s ease;
}
body.nav-open .nav-burger span{ background:#fff !important; }
body.nav-open .nav-burger span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2){ opacity:0; }
body.nav-open .nav-burger span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* com o menu mobile aberto o header volta a ser transparente,
   para o "X" branco e a marca continuarem legíveis sobre o overlay */
body.nav-open #header{
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
body.nav-open #header .brand-logo--light{ opacity:1; }
body.nav-open #header .brand-logo--dark{ opacity:0; }

/* ---------------------------------------------- nav mobile */
.nav-mobile{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(160deg, var(--acqua-900) 0%, var(--acqua-700) 60%, var(--acqua-600) 100%);
  opacity:0;
  visibility:hidden;
  transform: translateY(-12px);
  transition: opacity .32s ease, transform .32s ease, visibility .32s;
}
.nav-mobile.is-open{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
.nav-mobile-link{
  font-family:"Work Sans", Arial, sans-serif;
  font-size:1.55rem;
  font-weight:700;
  color:#fff;
  transition: color .25s ease, transform .25s ease;
}
.nav-mobile-link:hover,
.nav-mobile-link.is-active{ color: var(--acqua-300); transform: translateY(-2px); }
body.nav-open{ overflow:hidden; }

/* ---------------------------------------------- botões */
.btn-cta{ transition: all .3s ease; }
.btn-cta:hover{ transform: scale(1.03); }

.btn-solid{
  background:#fff;
  color: var(--acqua-900);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.45);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.btn-solid:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -12px rgba(0,0,0,.5);
  background: var(--acqua-50);
}

.btn-ghost{
  border:3px solid rgba(255,255,255,.6);
  color:#fff;
  transition: all .3s ease;
}
.btn-ghost:hover{
  background: rgba(255,255,255,.12);
  border-color:#fff;
  transform: translateY(-3px);
}

.btn-primary{
  background: var(--acqua-500);
  color:#fff;
  border:3px solid var(--acqua-500);
  transition: all .3s ease;
}
.btn-primary:hover{
  background: var(--acqua-700);
  border-color: var(--acqua-700);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -14px rgba(4,122,172,.75);
}

.btn-outline{
  border:3px solid var(--acqua-500);
  color: var(--acqua-500);
  transition: all .3s ease;
}
.btn-outline:hover{
  background: var(--acqua-500);
  color:#fff;
  transform: translateY(-3px);
}

/* ---------------------------------------------- hero */
.hero-shell{
  min-height: min(100svh, 860px);
  display:flex;
  background:
    radial-gradient(1100px 620px at 78% 18%, rgba(4,122,172,.55) 0%, rgba(4,122,172,0) 62%),
    linear-gradient(155deg, var(--acqua-950) 0%, var(--acqua-900) 42%, var(--acqua-700) 100%);
}
@media (max-width:1023px){
  .hero-shell{ min-height:auto; }
}

.hero-deco{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-deco::before{
  content:"";
  position:absolute;
  width:760px; height:760px;
  right:-220px; top:-260px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(92,198,208,.22) 0%, rgba(92,198,208,0) 68%);
  animation: glowRotate 26s linear infinite;
}
.hero-deco::after{
  content:"";
  position:absolute;
  left:-180px; bottom:-200px;
  width:540px; height:540px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(4,122,172,.35) 0%, rgba(4,122,172,0) 70%);
}

.bubble{
  position:absolute;
  bottom:-60px;
  border-radius:50%;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  animation: floatUp linear infinite;
}
.bubble.b1{ left:8%;  width:14px; height:14px; animation-duration:15s; animation-delay:0s; }
.bubble.b2{ left:22%; width:9px;  height:9px;  animation-duration:19s; animation-delay:3s; }
.bubble.b3{ left:41%; width:20px; height:20px; animation-duration:23s; animation-delay:6s; }
.bubble.b4{ left:63%; width:11px; height:11px; animation-duration:17s; animation-delay:2s; }
.bubble.b5{ left:78%; width:16px; height:16px; animation-duration:21s; animation-delay:8s; }
.bubble.b6{ left:91%; width:8px;  height:8px;  animation-duration:14s; animation-delay:5s; }

/* recorte de produto (PNG/WebP com alpha) — flutua direto sobre o gradiente,
   sem moldura, porque cutout dentro de card fica com cara de adesivo colado */
.hero-product{
  width:min(376px, 92%);
  filter: drop-shadow(0 28px 42px rgba(0,26,56,.65));
  animation: floatSoft 7s ease-in-out infinite;
}
.hero-product img{
  width:100%;
  height:auto;
  display:block;
}

/* moldura de foto — mantida caso o hero volte a usar fotografia */
.hero-photo{
  position:relative;
  width:min(370px, 90%);
  aspect-ratio:4/5;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 34px 64px -24px rgba(0,26,56,.85);
  animation: floatSoft 7s ease-in-out infinite;
}
.hero-photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}

.hero-wave{
  position:absolute;
  left:0; bottom:-1px;
  width:100%;
  height:70px;
  display:block;
}
@media (min-width:768px){ .hero-wave{ height:110px; } }

/* ---------------------------------------------- blocos de foto
   Todas as fotos são do acervo do cliente, convertidas para .webp.
   O recorte é feito por CSS (aspect-ratio + object-fit) para se adaptar
   a qualquer largura sem gerar versões extras de cada imagem. */

/* faixa larga, ocupa a largura do container */
.photo-band{
  position:relative;
  display:block;
  border-radius:28px;
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow: var(--shadow-card-hover);
}
@media (min-width:768px){ .photo-band{ aspect-ratio:21/9; } }
.photo-band img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.photo-band figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:2.6rem 1.4rem 1.1rem;
  font-size:.84rem;
  font-weight:600;
  line-height:1.5;
  color:#fff;
  background: linear-gradient(to top, rgba(0,26,56,.88) 0%, rgba(0,26,56,.55) 45%, rgba(0,26,56,0) 100%);
}
@media (min-width:768px){
  .photo-band figcaption{ padding:3rem 2rem 1.4rem; font-size:.92rem; }
}

/* retrato, usado dentro de colunas escuras */
.photo-frame{
  position:relative;
  display:block;
  width:100%;
  max-width:440px;
  aspect-ratio:3/4;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 28px 56px -26px rgba(0,26,56,.9);
}
.photo-frame img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 38%;
  display:block;
}

/* foto lateral, meia largura */
.photo-side{
  position:relative;
  display:block;
  border-radius:26px;
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow: var(--shadow-card-hover);
}
.photo-side img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* ---------------------------------------------- lista de beneficios (sobre) */
.benefit-list{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  background:#fff;
  border:1px solid var(--acqua-100);
  border-radius:26px;
  padding:1.8rem 1.5rem;
  box-shadow: var(--shadow-card);
}
@media (min-width:768px){ .benefit-list{ padding:2.2rem 2rem; gap:1.1rem; } }

.benefit-list li{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  font-size:1.02rem;
  line-height:1.55;
  font-weight:600;
  color: var(--acqua-900);
}
@media (min-width:768px){ .benefit-list li{ font-size:1.1rem; } }

.benefit-check{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:30px; height:30px;
  margin-top:.1rem;
  border-radius:50%;
  background: var(--acqua-50);
  color: var(--acqua-500);
}
.benefit-check svg{ width:16px; height:16px; }

/* ---------------------------------------------- cards de destaque (sobre) */
.feature-card{
  background:#fff;
  border:1px solid var(--acqua-100);
  border-radius:20px;
  padding:1.6rem 1.4rem;
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.feature-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--acqua-300);
}
.feature-icon{
  display:grid; place-items:center;
  width:48px; height:48px;
  border-radius:14px;
  background: var(--acqua-50);
  color: var(--acqua-500);
  margin-bottom:1rem;
}
.feature-icon svg{ width:26px; height:26px; }
.feature-card h3{
  font-family:"Work Sans", Arial, sans-serif;
  font-weight:700;
  font-size:1.03rem;
  color: var(--acqua-900);
}
.feature-card p{
  margin-top:.45rem;
  font-size:.92rem;
  line-height:1.6;
  color: var(--ink-soft);
}

/* ---------------------------------------------- trajeto da água */
.journey{
  display:grid;
  gap:1rem;
  align-items:stretch;
}
@media (min-width:1024px){
  .journey{
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap:.75rem;
  }
}

.journey-step{
  position:relative;
  background:#fff;
  border:1px solid var(--acqua-100);
  border-radius:22px;
  padding:1.7rem 1.4rem 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
}
.journey-step:hover{ transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }

.journey-step--highlight{
  background: linear-gradient(160deg, var(--acqua-600) 0%, var(--acqua-800) 100%);
  border-color: var(--acqua-600);
  color:#fff;
}
.journey-num{
  position:absolute;
  top:1.1rem; right:1.2rem;
  font-size:.82rem;
  font-weight:800;
  color: var(--acqua-200);
}
.journey-step--highlight .journey-num{ color: rgba(255,255,255,.55); }

.journey-icon{
  display:grid; place-items:center;
  width:52px; height:52px;
  border-radius:16px;
  background: var(--acqua-50);
  color: var(--acqua-500);
}
.journey-icon svg{ width:28px; height:28px; }
.journey-step--highlight .journey-icon{
  background: rgba(255,255,255,.16);
  color:#fff;
}

.journey-step h3{
  margin-top:1rem;
  font-family:"Work Sans", Arial, sans-serif;
  font-weight:800;
  font-size:1.08rem;
  color: var(--acqua-900);
}
.journey-step--highlight h3{ color:#fff; }
.journey-step p{
  margin-top:.4rem;
  font-size:.9rem;
  line-height:1.6;
  color: var(--ink-soft);
}
.journey-step--highlight p{ color: rgba(255,255,255,.8); }

.journey-arrow{
  display:grid;
  place-items:center;
  color: var(--acqua-300);
}
.journey-arrow svg{ width:26px; height:26px; }
@media (max-width:1023px){
  .journey-arrow svg{ transform: rotate(90deg); width:22px; height:22px; }
}

/* ---------------------------------------------- perfis de imóvel */
.profile-card{
  position:relative;
  background:#fff;
  border:1px solid #E6EEF4;
  border-radius:24px;
  padding:2rem 1.6rem;
  box-shadow: var(--shadow-card);
  overflow:hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.profile-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:4px;
  background: linear-gradient(90deg, var(--acqua-400), var(--acqua-600));
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .4s ease;
}
.profile-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--acqua-200);
}
.profile-card:hover::before{ transform: scaleX(1); }

.profile-icon{
  display:grid; place-items:center;
  width:58px; height:58px;
  border-radius:18px;
  background: linear-gradient(150deg, var(--acqua-50), var(--acqua-100));
  color: var(--acqua-600);
}
.profile-icon svg{ width:30px; height:30px; }
.profile-card h3{
  margin-top:1.2rem;
  font-family:"Work Sans", Arial, sans-serif;
  font-weight:800;
  font-size:1.18rem;
  color: var(--acqua-900);
}
.profile-card p{
  margin-top:.7rem;
  font-size:.94rem;
  line-height:1.65;
  color: var(--ink-soft);
}

/* ---------------------------------------------- diferenciais (serviços) */
.deco-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  pointer-events:none;
}

.service-item{
  display:flex;
  gap:1.25rem;
  align-items:flex-start;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:1.5rem 1.6rem;
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.service-item:hover{
  background: rgba(255,255,255,.11);
  border-color: rgba(92,198,208,.45);
  transform: translateX(6px);
}
.service-num{
  flex:0 0 auto;
  font-family:"Work Sans", Arial, sans-serif;
  font-weight:900;
  font-size:1.35rem;
  color: var(--acqua-300);
  line-height:1;
  padding-top:.15rem;
}
.service-item h3{
  font-family:"Work Sans", Arial, sans-serif;
  font-weight:700;
  font-size:1.1rem;
  color:#fff;
}
.service-item p{
  margin-top:.4rem;
  font-size:.95rem;
  line-height:1.65;
  color: rgba(255,255,255,.75);
}

/* ---------------------------------------------- bypass */
.bypass-banner{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:2.6rem 1.6rem;
  background:
    radial-gradient(700px 380px at 88% 12%, rgba(92,198,208,.32) 0%, rgba(92,198,208,0) 65%),
    linear-gradient(140deg, var(--acqua-700) 0%, var(--acqua-900) 100%);
  box-shadow: 0 26px 60px -28px rgba(0,37,79,.65);
}
@media (min-width:768px){ .bypass-banner{ padding:3.6rem 3.2rem; } }
@media (min-width:1024px){ .bypass-banner{ padding:4rem 4rem; } }

.bypass-art{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  padding:1.2rem;
}
.bypass-flow{ animation: dashFlow 2.4s linear infinite; }

/* ---------------------------------------------- certificações */
.cert-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1rem;
  background:#fff;
  border:1px solid #E6EEF4;
  border-radius:24px;
  padding:2.2rem 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
}
.cert-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }

/* variante horizontal, usada ao lado da foto */
.cert-card--row{
  flex-direction:row;
  align-items:center;
  text-align:left;
  gap:1.2rem;
  padding:1.4rem 1.6rem;
}
.cert-card--row:hover{ transform: translateY(-4px); }
.cert-card--row .cert-icon{ width:54px; height:54px; flex:0 0 auto; }
.cert-card--row .cert-icon svg{ width:27px; height:27px; }
.cert-icon{
  display:grid; place-items:center;
  width:64px; height:64px;
  border-radius:50%;
  background: var(--acqua-50);
  color: var(--acqua-500);
}
.cert-icon svg{ width:32px; height:32px; }
.cert-card h3{
  font-family:"Work Sans", Arial, sans-serif;
  font-weight:700;
  font-size:1.05rem;
  color: var(--acqua-900);
  line-height:1.4;
}

/* ---------------------------------------------- manutenção */
.maint-card{
  position:relative;
  background:#fff;
  border:1px solid #E6EEF4;
  border-radius:26px;
  padding:2.2rem 1.8rem;
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
}
.maint-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }

.maint-card--dark{
  background: linear-gradient(150deg, var(--acqua-800) 0%, var(--acqua-950) 100%);
  border-color: var(--acqua-800);
}
.maint-tag{
  display:inline-block;
  border-radius:45px;
  padding:.35rem 1rem;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  background: var(--acqua-50);
  color: var(--acqua-600);
}
.maint-tag--light{ background: rgba(255,255,255,.14); color: var(--acqua-200); }

.maint-title{
  margin-top:1.1rem;
  font-family:"Work Sans", Arial, sans-serif;
  font-weight:800;
  font-size:1.5rem;
  color: var(--acqua-900);
}
.maint-card--dark .maint-title{ color:#fff; }
.maint-text{
  margin-top:.85rem;
  font-size:1rem;
  line-height:1.7;
  color: var(--ink-soft);
}
.maint-card--dark .maint-text{ color: rgba(255,255,255,.78); }

.maint-meta{
  margin-top:1.6rem;
  padding-top:1.2rem;
  border-top:1px solid #E6EEF4;
  display:flex;
  flex-wrap:wrap;
  gap:1.8rem;
}
.maint-card--dark .maint-meta{ border-top-color: rgba(255,255,255,.15); }
.maint-meta li{ display:flex; flex-direction:column; gap:.2rem; }
.maint-meta span{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--ink-mute);
}
.maint-meta strong{
  font-size:.98rem;
  font-weight:700;
  color: var(--acqua-800);
}
.maint-card--dark .maint-meta span{ color: rgba(255,255,255,.5); }
.maint-card--dark .maint-meta strong{ color: var(--acqua-200); }

.quartz-art{
  background: linear-gradient(150deg, var(--acqua-50), #fff);
  border:1px solid var(--acqua-100);
  border-radius:26px;
  padding:1.6rem;
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------- stats */
.stat-card{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  padding:1.9rem 1.5rem;
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.stat-card:hover{
  background: rgba(255,255,255,.1);
  border-color: rgba(92,198,208,.4);
  transform: translateY(-5px);
}
.stat-num{
  font-family:"Work Sans", Arial, sans-serif;
  font-weight:900;
  font-size:2.6rem;
  line-height:1;
  color: var(--acqua-300);
}
.stat-num--text{ font-size:1.7rem; letter-spacing:-.01em; }

/* placeholder visível — número ainda não informado pelo cliente */
.stat-pending{
  display:inline-block;
  padding:.05em .35em;
  border:2px dashed rgba(92,198,208,.6);
  border-radius:10px;
  color: rgba(215,241,244,.9);
  font-size:.85em;
}

.stat-label{
  margin-top:.8rem;
  font-family:"Work Sans", Arial, sans-serif;
  font-weight:700;
  font-size:1.02rem;
  color:#fff;
}
.stat-desc{
  margin-top:.4rem;
  font-size:.9rem;
  line-height:1.6;
  color: rgba(255,255,255,.7);
}

/* ---------------------------------------------- FAQ */
.faq-item{
  background:#fff;
  border:1px solid #E6EEF4;
  border-radius:18px;
  box-shadow: var(--shadow-card);
  overflow:hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq-item.is-open{
  border-color: var(--acqua-300);
  box-shadow: var(--shadow-card-hover);
}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  text-align:left;
  padding:1.35rem 1.5rem;
  font-family:"Work Sans", Arial, sans-serif;
  font-weight:700;
  font-size:1.03rem;
  color: var(--acqua-900);
  transition: color .25s ease, background .25s ease;
}
.faq-question:hover{ color: var(--acqua-500); background: var(--acqua-50); }
.faq-chevron{
  flex:0 0 auto;
  width:22px; height:22px;
  color: var(--acqua-500);
  transition: transform .3s ease;
}
.faq-item.is-open .faq-chevron{ transform: rotate(180deg); }

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition: max-height .38s ease;
}
.faq-answer p{
  padding:0 1.5rem 1.45rem;
  font-size:.98rem;
  line-height:1.7;
  color: var(--ink-soft);
}

/* ---------------------------------------------- contato */
.contact-line{
  display:flex;
  align-items:center;
  gap:1rem;
  transition: transform .25s ease;
}
.contact-line:hover{ transform: translateX(4px); }
.contact-ico{
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--acqua-100);
  color: var(--acqua-500);
  flex:0 0 auto;
  box-shadow: var(--shadow-card);
}
.contact-ico svg{ width:22px; height:22px; }
.contact-ico--wa{ background:#25D366; border-color:#25D366; color:#fff; }
.contact-line strong{
  display:block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--ink-mute);
}
.contact-line em{
  display:block;
  font-style:normal;
  font-weight:700;
  font-size:1.02rem;
  color: var(--acqua-900);
}

/* ---------------------------------------------- formulário */
.form-card{
  background:#fff;
  border:1px solid #E6EEF4;
  border-radius:28px;
  padding:1.8rem 1.5rem;
  box-shadow: 0 18px 46px -22px rgba(0,37,79,.35);
}
@media (min-width:768px){ .form-card{ padding:2.5rem 2.4rem; } }

.field{ display:flex; flex-direction:column; }
.field label{
  font-size:.82rem;
  font-weight:700;
  color: var(--acqua-800);
  margin-bottom:.45rem;
}
.field label span{ color: var(--acqua-500); }

.field input,
.field select,
.field textarea{
  width:100%;
  border:1.5px solid #DCE6EE;
  border-radius:14px;
  padding:.8rem 1rem;
  font-family:"Work Sans", Arial, sans-serif;
  font-size:.97rem;
  color: var(--ink);
  background:#fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field textarea{ resize:vertical; min-height:110px; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047AAC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:18px;
  padding-right:2.8rem;
}
.field input::placeholder,
.field textarea::placeholder{ color:#AEB7C2; }

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color: var(--acqua-500);
  box-shadow: 0 0 0 4px rgba(4,122,172,.14);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:#D98324;
  box-shadow: 0 0 0 4px rgba(217,131,36,.14);
}
.field-error{
  display:none;
  margin-top:.35rem;
  font-size:.78rem;
  font-weight:600;
  color:#B76B12;
}
.field.has-error .field-error{ display:block; }

#form-status.is-ok{ color: var(--acqua-600); font-weight:700; }

/* ---------------------------------------------- footer */
.footer-title{
  font-family:"Work Sans", Arial, sans-serif;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--acqua-300);
}
.footer-link{
  color: rgba(255,255,255,.7);
  transition: color .25s ease, padding-left .25s ease;
}
.footer-link:hover{ color:#fff; padding-left:4px; }

.social{
  display:grid; place-items:center;
  width:40px; height:40px;
  border-radius:12px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  transition: background .25s ease, transform .25s ease;
}
.social svg{ width:19px; height:19px; }
.social:hover{ background: var(--acqua-500); transform: translateY(-3px); }

/* ---------------------------------------------- WhatsApp flutuante */
.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:45;
  display:grid;
  place-items:center;
  width:56px; height:56px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  box-shadow: 0 12px 28px -8px rgba(37,211,102,.75);
  transition: transform .3s ease, box-shadow .3s ease;
}
.wa-float svg{ width:30px; height:30px; }
.wa-float:hover{ transform: scale(1.08); box-shadow: 0 16px 34px -8px rgba(37,211,102,.9); }
.wa-float::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(37,211,102,.6);
  animation: pulseRing 2.6s ease-out infinite;
}
@media (min-width:768px){
  .wa-float{ right:26px; bottom:26px; width:62px; height:62px; }
}

/* ---------------------------------------------- reveal on scroll */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.3s; }
.reveal-delay-4{ transition-delay:.4s; }
.reveal-delay-5{ transition-delay:.5s; }

/* ---------------------------------------------- keyframes */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(28px); }
  to{ opacity:1; transform:none; }
}

@keyframes glowRotate{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes floatUp{
  0%{ transform: translateY(0) scale(.85); opacity:0; }
  12%{ opacity:.9; }
  85%{ opacity:.5; }
  100%{ transform: translateY(-110vh) scale(1.15); opacity:0; }
}

@keyframes floatSoft{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

@keyframes dashFlow{
  to{ stroke-dashoffset:-40; }
}

@keyframes pulseRing{
  0%{ transform: scale(1); opacity:.8; }
  70%{ transform: scale(1.45); opacity:0; }
  100%{ transform: scale(1.45); opacity:0; }
}

/* ---------------------------------------------- acessibilidade */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ---------------------------------------------- impressão */
@media print{
  #header, .nav-mobile, .wa-float, .hero-deco, .hero-wave{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  body{ color:#000; }
}