/* ============================================================
   Casa do Impermeabilizante · landing de conversão (Google Ads)
   Paleta tirada da loja: marinho da parede, azul da gota da logo,
   laranja do tijolo. Verde só no botão do WhatsApp.
   ============================================================ */

:root {
  --marinho: #0b2f57;
  --marinho-2: #0f3d70;
  --noite: #061a33;
  --gota: #1797e0;
  --gota-claro: #7cc8f2;
  --tijolo: #ee6a1a;
  --tijolo-texto: #bd4f0b;
  --amarelo: #f7c21b;
  --papel: #f3f6fa;
  --linha: #dbe4ee;
  --tinta: #0d1f33;
  --tinta-2: #4b5f74;
  --wa: #1fae55;
  --wa-h: #168f45;
  --suave: cubic-bezier(.22, .8, .24, 1);
  --corte: cubic-bezier(.77, 0, .18, 1);
  --fonte: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --topo: 64px;
  --card: 146px;
  --palco: 158px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo) + 12px); -webkit-text-size-adjust: 100%; }
body {
  font: 400 16px/1.6 var(--fonte);
  color: var(--tinta);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--gota); outline-offset: 3px; }

h2 {
  font-weight: 850;
  font-stretch: 70%;
  text-transform: uppercase;
  font-size: clamp(36px, 9.4vw, 62px);
  line-height: .95;
  letter-spacing: -.004em;
  color: var(--marinho);
}
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tijolo-texto);
  margin-bottom: 14px;
}
.rotulo::before { content: ''; width: 22px; height: 2px; background: currentColor; }

/* ---------- botões ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 999px;
  font: 700 16px/1.1 var(--fonte);
  text-decoration: none;
  transition: transform .25s var(--suave), background-color .25s, box-shadow .25s;
  -webkit-tap-highlight-color: transparent;
}
.btn .ic { width: 22px; height: 22px; fill: currentColor; flex: none; }
.btn:active { transform: scale(.97); }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 12px 26px -12px rgba(31, 174, 85, .8); }
.btn-wa:hover { background: var(--wa-h); transform: translateY(-2px); }
.btn-wa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
}
.btn-wa:hover::after { transform: translateX(130%); transition: transform .75s var(--suave); }
.btn-lg { min-height: 58px; padding: 16px 28px; font-size: 17px; }
.btn-xl { min-height: 64px; padding: 18px 34px; font-size: 18px; }
.btn-sm { min-height: 42px; padding: 10px 16px; font-size: 15px; }
.btn-sm .ic { width: 20px; height: 20px; }
.btn-link { color: #fff; padding-inline: 10px; min-height: 48px; }
.btn-link span { border-bottom: 1.5px solid rgba(255, 255, 255, .35); padding-bottom: 2px; transition: border-color .25s; }
.btn-link:hover span { border-color: #fff; }
.btn-escuro { background: var(--marinho); color: #fff; }
.btn-escuro:hover { background: var(--marinho-2); transform: translateY(-2px); }

/* ---------- barra de progresso ---------- */
.progresso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; pointer-events: none; }
.progresso span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gota), var(--tijolo));
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

/* ---------- topo ---------- */
.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--topo);
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s;
}
.topo.rolou { border-color: var(--linha); box-shadow: 0 10px 28px -20px rgba(6, 26, 51, .55); }
.topo-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topo-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.topo-logo img { width: 29px; height: auto; flex: none; }
.topo-marca { display: grid; line-height: .92; text-transform: uppercase; color: var(--marinho); font-stretch: 66%; }
.topo-marca b:first-child { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.topo-marca b:last-child { font-size: 17px; font-weight: 850; letter-spacing: .005em; }
.topo-nav { display: none; }
.topo-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.topo-tel {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--marinho);
  border: 1.5px solid var(--linha);
  text-decoration: none;
}
.topo-tel svg { width: 19px; height: 19px; fill: currentColor; }
.topo-tel span { display: none; }
@media (max-width: 419px) {
  .topo-tel { display: none; }
}
@media (max-width: 359px) {
  .topo-marca b:last-child { font-size: 15px; }
}
.so-largo { display: none; }

/* ---------- abertura ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  background: radial-gradient(600px 420px at 50% 40%, #134a86, var(--marinho) 70%);
  transition: transform .85s var(--corte);
  cursor: pointer;
}
.intro.sai { transform: translateY(-101%); }
.intro.fim, html.sem-intro .intro { display: none; }
.intro-palco { position: relative; width: 170px; height: 190px; transition: opacity .45s, transform .6s var(--suave); }
.intro-pingo {
  position: absolute;
  left: 50%;
  top: 0;
  width: 20px;
  height: 28px;
  margin-left: -10px;
  fill: var(--gota-claro);
  opacity: 0;
  animation: intro-cai .56s cubic-bezier(.55, 0, 1, .45) .08s forwards;
}
@keyframes intro-cai {
  0% { opacity: 1; transform: translateY(-58vh); }
  92% { opacity: 1; transform: translateY(138px) scaleY(1.1); }
  100% { opacity: 0; transform: translateY(150px) scaleY(.3); }
}
.intro-onda {
  position: absolute;
  left: 50%;
  top: 162px;
  width: 44px;
  height: 12px;
  margin-left: -22px;
  border: 2px solid var(--gota-claro);
  border-radius: 50%;
  opacity: 0;
  animation: intro-onda 1s ease-out forwards;
}
.intro-onda.o1 { animation-delay: .6s; }
.intro-onda.o2 { animation-delay: .74s; }
.intro-onda.o3 { animation-delay: .88s; }
@keyframes intro-onda { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(4.2); } }
.intro-gota {
  position: absolute;
  left: 50%;
  top: 0;
  width: 116px;
  margin-left: -58px;
  opacity: 0;
  transform: translateY(34px) scale(.35);
  animation: intro-gota .75s cubic-bezier(.2, 1.45, .4, 1) .64s forwards;
}
@keyframes intro-gota { to { opacity: 1; transform: none; } }
.intro-nome {
  font-weight: 850;
  font-stretch: 66%;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 24px;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  animation: intro-nome .6s var(--suave) 1s forwards;
  transition: opacity .45s;
}
@keyframes intro-nome { to { opacity: 1; transform: none; } }
.intro.sai .intro-palco { opacity: 0; transform: translateY(-40px); }
.intro.sai .intro-nome { opacity: 0; }

/* ---------- hero + vitrine ---------- */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding-top: calc(var(--topo) + 18px);
  background:
    radial-gradient(900px 520px at 88% -6%, rgba(23, 151, 224, .30), transparent 62%),
    linear-gradient(180deg, var(--marinho) 0%, var(--marinho-2) 100%);
}
.hero-chuva, .final-chuva {
  position: absolute;
  inset: -40px 0 0;
  pointer-events: none;
  opacity: .55;
  transform: skewX(-9deg);
  background-image:
    linear-gradient(180deg, transparent 0 62%, rgba(124, 200, 242, .38) 100%),
    linear-gradient(180deg, transparent 0 70%, rgba(124, 200, 242, .28) 100%),
    linear-gradient(180deg, transparent 0 66%, rgba(124, 200, 242, .32) 100%),
    linear-gradient(180deg, transparent 0 74%, rgba(124, 200, 242, .24) 100%),
    linear-gradient(180deg, transparent 0 64%, rgba(124, 200, 242, .30) 100%),
    linear-gradient(180deg, transparent 0 72%, rgba(124, 200, 242, .26) 100%);
  background-size: 1px 200px;
  background-repeat: repeat-y;
  background-position: 7% 0, 21% 70px, 38% 130px, 57% 30px, 74% 160px, 91% 90px;
  animation: chuva 1.25s linear infinite;
}
@keyframes chuva {
  to { background-position: 7% 200px, 21% 270px, 38% 330px, 57% 230px, 74% 360px, 91% 290px; }
}
.hero-topo { position: relative; }
.selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #d6ebfa;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
}
.selo-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--tijolo); flex: none; box-shadow: 0 0 0 0 rgba(238, 106, 26, .7); animation: pulso 2.2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 9px rgba(238, 106, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(238, 106, 26, 0); } }
.hero-titulo {
  margin: 14px 0 14px;
  font-weight: 850;
  font-stretch: 62%;
  text-transform: uppercase;
  font-size: min(11.2vw, 62px);
  line-height: .9;
  letter-spacing: 0;
}
.hero-titulo .p { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero-titulo .p > span { display: inline-block; }
.hero-titulo em { font-style: normal; color: var(--gota-claro); }
.hero-sub { font-size: 17px; line-height: 1.5; color: #d2e2f1; max-width: 34em; }
.hero-sub strong { color: #fff; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 18px; }
.hero-cta { width: 100%; }
.hero-tel { display: none; }
.hero-cta::after { animation: brilho 5s 2.4s infinite; }
@keyframes brilho { 0%, 70% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }

/* entrada do hero (depois da abertura) */
.com-js .hero-titulo .p > span { transform: translateY(112%); transition: transform .95s var(--suave); }
.com-js .hero-titulo .p:nth-child(2) > span { transition-delay: .05s; }
.com-js .hero-titulo .p:nth-child(3) > span { transition-delay: .1s; }
.com-js .hero-titulo .p:nth-child(4) > span { transition-delay: .15s; }
.com-js .hero-titulo .p:nth-child(5) > span { transition-delay: .2s; }
.com-js .hero-titulo .p:nth-child(6) > span { transition-delay: .25s; }
.com-js .hero-titulo .p:nth-child(7) > span { transition-delay: .3s; }
.com-js .hero-titulo .p:nth-child(8) > span { transition-delay: .35s; }
html.entra .hero-titulo .p > span { transform: none; }
.com-js .hero-selo, .com-js .hero-sub, .com-js .hero-ctas, .com-js .vt-cabeca, .com-js .vt-nota {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--suave), transform .8s var(--suave);
}
.com-js .hero-sub { transition-delay: .32s; }
.com-js .hero-ctas { transition-delay: .42s; }
.com-js .vt-cabeca { transition-delay: .5s; }
.com-js .vt-nota { transition-delay: .9s; }
html.entra .hero-selo, html.entra .hero-sub, html.entra .hero-ctas, html.entra .vt-cabeca, html.entra .vt-nota { opacity: 1; transform: none; }
.com-js .vt-card { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--suave), transform .8s var(--suave); }
.com-js .vt-card:nth-child(2) { transition-delay: .06s; }
.com-js .vt-card:nth-child(3) { transition-delay: .12s; }
.com-js .vt-card:nth-child(4) { transition-delay: .18s; }
.com-js .vt-card:nth-child(5) { transition-delay: .24s; }
.com-js .vt-card:nth-child(6) { transition-delay: .3s; }
.com-js .vt-card:nth-child(7) { transition-delay: .36s; }
.com-js .vt-card:nth-child(n+8) { transition-delay: .42s; }
html.entra .vt-card { opacity: 1; transform: none; }
.com-js .vt-prateleira { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--corte) .45s; }
html.entra .vt-prateleira { transform: none; }

/* vitrine: produtos em pé na prateleira */
.vitrine { position: relative; padding: 16px 0 30px; }
.vt-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vt-rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: #b9cde2; }
.vt-selo {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marinho);
  background: var(--amarelo);
  padding: 4px 9px;
  border-radius: 6px;
}
.vt-area { position: relative; margin-top: 8px; }
.vt-area::before, .vt-area::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  z-index: 3;
  pointer-events: none;
}
.vt-area::before { left: 0; background: linear-gradient(90deg, var(--marinho-2), rgba(15, 61, 112, 0)); }
.vt-area::after { right: 0; background: linear-gradient(270deg, var(--marinho-2), rgba(15, 61, 112, 0)); }
.vt-trilho {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 12px 16px 6px;
  cursor: grab;
}
.vt-trilho::-webkit-scrollbar { display: none; }
.vt-trilho.arrastando { cursor: grabbing; }
.vt-trilho.arrastando .vt-link { pointer-events: none; }
.vt-trilho:focus-visible { outline: 3px solid var(--gota-claro); outline-offset: -3px; border-radius: 12px; }
.vt-card { flex: 0 0 var(--card); }
.vt-link { position: relative; display: grid; grid-template-rows: var(--palco) auto; text-decoration: none; color: #fff; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-drag: none; }
.vt-palco { position: relative; display: flex; align-items: flex-end; justify-content: center; height: var(--palco); padding: 0 4px 13px; }
.vt-palco::before {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 9px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 10, 25, .55), transparent);
  transition: transform .5s var(--suave), opacity .5s;
}
.vt-palco img {
  position: relative;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: 50% 100%;
  transition: transform .55s var(--suave);
  -webkit-user-drag: none;
  pointer-events: none;
}
.vt-tag { display: grid; gap: 2px; padding: 16px 2px 0; }
.vt-marca { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gota-claro); }
.vt-nome { font-size: 17px; font-weight: 800; font-stretch: 80%; line-height: 1.1; }
.vt-uso { font-size: 13px; line-height: 1.3; color: #b4c8dd; }
.vt-ir {
  position: absolute;
  top: 6px;
  right: 2px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6);
  transform: scale(.86);
  transition: transform .35s var(--suave), opacity .35s;
}
.vt-ir svg { width: 19px; height: 19px; fill: currentColor; }
@media (hover: hover) {
  .vt-ir { opacity: 0; transform: scale(.6); }
  .vt-link:hover .vt-ir, .vt-link:focus-visible .vt-ir { opacity: 1; transform: none; }
  .vt-link:hover .vt-palco img { transform: translateY(-10px) rotate(-3deg) scale(1.05); }
  .vt-link:hover .vt-palco::before { transform: scale(.8); opacity: .6; }
}
.vt-prateleira {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(12px + var(--palco) - 13px);
  height: 13px;
  z-index: 0;
  border-top: 2px solid rgba(255, 255, 255, .28);
  background: linear-gradient(180deg, #2f6cab 0%, #1b528b 40%, #0e365f 100%);
  box-shadow: 0 16px 22px -10px rgba(0, 8, 20, .7);
  pointer-events: none;
}
.vt-seta {
  position: absolute;
  top: calc(12px + var(--palco) / 2 - 24px);
  z-index: 4;
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  background: rgba(6, 26, 51, .55);
  border: 1.5px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .25s, transform .25s var(--suave);
}
.vt-seta svg { width: 22px; height: 22px; }
.vt-seta:hover { background: var(--gota); transform: scale(1.08); }
.vt-esq { left: 18px; }
.vt-esq svg { transform: rotate(180deg); }
.vt-dir { right: 18px; }
.vt-nota { margin-top: 16px; font-size: 13.5px; line-height: 1.45; color: #9fb7cf; }

/* ---------- problemas ---------- */
.problemas { background: var(--papel); padding: 72px 0 76px; }
.prob-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.prob-intro { margin-top: 14px; font-size: 17px; color: var(--tinta-2); max-width: 34em; }
.prob-casa {
  margin: 26px 0 18px;
  padding: 10px 6px 0;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #dcedfa 0%, #f5faff 62%);
  border: 1px solid var(--linha);
}
.casa { display: block; width: 100%; height: auto; overflow: visible; }
.casa .realce { fill: rgba(23, 151, 224, .1); stroke: var(--gota); stroke-width: 3; stroke-dasharray: 9 7; opacity: 0; transition: opacity .35s; }
.casa .zona.ativa .realce { opacity: 1; animation: formiga 1.1s linear infinite; }
@keyframes formiga { to { stroke-dashoffset: -32; } }
.casa .agua use { fill: var(--gota); opacity: 0; }
.casa .zona.ativa .agua use { animation: pinga 1.35s ease-in infinite; animation-delay: var(--d, 0s); }
.casa .zona.ativa .agua.sobe use { animation-name: sobe; }
@keyframes pinga { 0% { opacity: 0; transform: translateY(-8px); } 18% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(46px); } }
@keyframes sobe { 0% { opacity: 0; transform: translateY(10px); } 22% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px); } }
.casa .mancha { transition: fill-opacity .4s; }
.casa .zona.ativa .mancha { animation: mancha 1.6s ease-in-out infinite alternate; }
@keyframes mancha { to { fill-opacity: .8; } }
.casa .poca { transform-box: fill-box; transform-origin: center; }
.casa .zona.ativa .poca { animation: poca 1.4s ease-in-out infinite alternate; }
@keyframes poca { to { transform: scaleX(1.35); } }
.casa .ponto { cursor: pointer; outline: none; }
.casa .ponto circle { fill: var(--tijolo); stroke: #fff; stroke-width: 3; transition: fill .3s; }
.casa .ponto .anel { fill: none; stroke: var(--gota); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.casa .ponto text { fill: #fff; font: 800 15px var(--fonte); text-anchor: middle; pointer-events: none; }
.casa .ponto.ativo circle { fill: var(--gota); }
.casa .ponto.ativo .anel { animation: anel 1.5s ease-out infinite; }
.casa .ponto:focus-visible circle:not(.anel) { stroke: var(--marinho); }
@keyframes anel { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } }

.prob-lista { display: grid; gap: 10px; }
.prob {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 14px 15px 16px;
  background: #fff;
  border: 1.5px solid var(--linha);
  border-radius: 16px;
  text-decoration: none;
  color: var(--tinta);
  transition: border-color .25s, box-shadow .3s, transform .35s var(--suave);
  -webkit-tap-highlight-color: transparent;
}
.prob-num { font-weight: 850; font-stretch: 66%; font-size: 28px; line-height: 1; color: var(--tijolo); min-width: 30px; transition: color .25s; }
.prob-txt strong { display: block; font-size: 18px; font-weight: 800; line-height: 1.2; color: var(--marinho); }
.prob-txt span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.4; color: var(--tinta-2); }
.prob-ir { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #e7f6ec; color: var(--wa); transition: background .25s, color .25s, transform .35s var(--suave); }
.prob-ir svg { width: 22px; height: 22px; fill: currentColor; }
.prob:hover, .prob.ativo { border-color: var(--gota); box-shadow: 0 20px 36px -26px rgba(11, 47, 87, .6); }
.prob.ativo .prob-num { color: var(--gota); }
.prob:hover .prob-ir, .prob.ativo .prob-ir { background: var(--wa); color: #fff; }
@media (hover: hover) { .prob:hover { transform: translateX(6px); } .prob:hover .prob-ir { transform: rotate(-8deg) scale(1.06); } }
.prob-dica { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 15px; color: var(--tinta-2); }
.prob-dica svg { width: 24px; height: 24px; flex: none; color: var(--gota); margin-top: 1px; }

/* ---------- a loja ---------- */
.loja { padding: 76px 0 80px; background: #fff; }
.loja-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.loja-lista { display: grid; gap: 14px; margin: 22px 0 22px; }
.loja-lista li { position: relative; padding-left: 28px; font-size: 16.5px; color: var(--tinta-2); }
.loja-lista li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .42em;
  width: 12px;
  height: 12px;
  border-radius: 50% 0 50% 50%;
  background: var(--gota);
  transform: rotate(-45deg);
}
.loja-lista strong { color: var(--marinho); }
.loja-marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }
.loja-marcas span {
  padding: 6px 11px;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  font-weight: 800;
  font-stretch: 75%;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--marinho);
}
.galeria {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: -16px;
  padding: 0 16px 4px;
}
.galeria::-webkit-scrollbar { display: none; }
.g-item {
  position: relative;
  flex: 0 0 80%;
  height: 300px;
  overflow: hidden;
  border-radius: 18px;
  background: #dfe7ef;
  scroll-snap-align: center;
  cursor: zoom-in;
  --fundo: #fff;
}
.g-item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: filter .4s; }
.g-item:hover img { filter: brightness(1.05); }
.g-fachada { flex-basis: 88%; }

/* cobertura que recua (no ::after, para o elemento observado ficar inteiro) */
.com-js .rv-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--fundo, #fff);
  transform-origin: top;
  transition: transform 1.1s var(--corte);
  pointer-events: none;
}
.com-js .rv-foto.visivel::after { transform: scaleY(0); }
.com-js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--suave), transform .9s var(--suave); }
.com-js .rv.visivel { opacity: 1; transform: none; }
.com-js .prob-lista .rv:nth-child(2) { transition-delay: .06s; }
.com-js .prob-lista .rv:nth-child(3) { transition-delay: .12s; }
.com-js .prob-lista .rv:nth-child(4) { transition-delay: .18s; }
.com-js .prob-lista .rv:nth-child(5) { transition-delay: .24s; }
.com-js .prob-lista .rv:nth-child(6) { transition-delay: .3s; }
.galeria .rv-foto:nth-child(2)::after { transition-delay: .12s; }
.galeria .rv-foto:nth-child(3)::after { transition-delay: .24s; }
.galeria .rv-foto:nth-child(4)::after { transition-delay: .36s; }

/* ---------- onde fica ---------- */
.onde { padding: 76px 0 80px; background: var(--papel); }
.onde-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.onde-end { display: flex; gap: 12px; margin-top: 22px; font-style: normal; font-size: 17px; line-height: 1.45; color: var(--tinta-2); }
.onde-end strong { color: var(--marinho); font-size: 19px; }
.onde-end svg { width: 26px; height: 26px; flex: none; color: var(--tijolo); margin-top: 1px; }
.onde-tels { display: grid; gap: 4px; margin: 18px 0 24px; }
.onde-tels a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 21px; font-weight: 800; color: var(--marinho); text-decoration: none; }
.onde-tels a:hover { color: var(--gota); }
.onde-tels svg { width: 24px; height: 24px; fill: var(--marinho); }
.onde-tels a.js-wa svg { fill: var(--wa); }
.onde-tels small { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.onde-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.mapa { position: relative; min-height: 320px; border-radius: 22px; overflow: hidden; background: #dfe7ef; border: 1px solid var(--linha); --fundo: var(--papel); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- chamada final ---------- */
.final { position: relative; overflow: hidden; padding: 92px 0 100px; color: #fff; background: var(--noite); isolation: isolate; }
.final-foto img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .2;
  transform: scale(1.08);
  animation: respira 20s ease-in-out infinite alternate;
}
@keyframes respira { to { transform: scale(1.18) translateY(-2%); } }
.final::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 26, 51, .78), rgba(11, 47, 87, .82)); }
.final-chuva { z-index: 0; opacity: .7; }
.final-in { position: relative; z-index: 1; }
.final h2 { color: #fff; font-size: clamp(38px, 10vw, 76px); }
.final h2 em { font-style: normal; color: var(--gota-claro); }
.passos { display: grid; gap: 12px; margin: 28px 0 32px; counter-reset: p; }
.passos li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; color: #e3eef8; }
.passos span { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--tijolo); color: #fff; font-weight: 850; }
.final-ctas .btn { width: 100%; }
.final-alt { margin-top: 14px; color: #b9cde2; }
.final-alt a { color: var(--gota-claro); font-weight: 800; text-decoration: none; }
.final-alt a:hover { text-decoration: underline; }

/* ---------- rodapé ---------- */
.rodape { padding: 48px 0 118px; background: #04142a; color: #9fb3c8; text-align: center; font-size: 14.5px; }
.rodape-logo { width: 190px; margin: 0 auto 18px; }
.rodape-tel { color: #e3eef8; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(227, 238, 248, .3); }
.rodape-tel:hover { border-color: #e3eef8; }
.rodape-pe { margin-top: 14px; font-size: 13px; color: #7f95ad; }
.rodape-pe a { color: #cfe0f0; }

/* ---------- chamadas fixas ---------- */
.barra-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 -12px 30px -20px rgba(6, 26, 51, .7);
  transform: translateY(110%);
  transition: transform .45s var(--suave);
}
.barra-mobile.mostra { transform: none; }
.barra-mobile .btn { flex: 1; min-height: 54px; padding-inline: 14px; }
.barra-tel { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 50%; background: var(--marinho); color: #fff; }
.barra-tel svg { width: 22px; height: 22px; fill: currentColor; }
.flutuante {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 70;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  border-radius: 999px;
  background: var(--wa);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 18px 36px -14px rgba(31, 174, 85, .85);
  opacity: 0;
  transform: translateY(26px) scale(.94);
  pointer-events: none;
  transition: opacity .4s var(--suave), transform .45s var(--suave), background .25s;
}
.flutuante .ic { width: 24px; height: 24px; fill: currentColor; }
.flutuante::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(31, 174, 85, .55);
  animation: pulso-wa 2.6s infinite;
}
@keyframes pulso-wa { 70% { box-shadow: 0 0 0 16px rgba(31, 174, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 174, 85, 0); } }
.flutuante:hover { background: var(--wa-h); }
.flutuante.mostra { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- visor de fotos ---------- */
.visor { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(3, 12, 25, .95); padding: 16px; }
.visor[hidden] { display: none; }
.visor-fig { display: grid; justify-items: center; gap: 12px; max-width: 100%; }
.visor-fig img { max-width: min(1400px, 94vw); max-height: 78vh; width: auto; height: auto; border-radius: 12px; touch-action: pan-y; }
.visor-fig figcaption { color: #cfe0f0; font-size: 15px; text-align: center; }
.visor-fechar, .visor-seta {
  position: absolute;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1.5px solid rgba(255, 255, 255, .25);
}
.visor-fechar { top: 16px; right: 16px; }
.visor-fechar svg, .visor-seta svg { width: 22px; height: 22px; }
.visor-seta { bottom: 22px; }
.visor-ant { left: calc(50% - 62px); }
.visor-ant svg { transform: rotate(180deg); }
.visor-prox { right: calc(50% - 62px); }

/* ============================================================
   telas maiores
   ============================================================ */
@media (min-width: 700px) {
  :root { --card: 172px; --palco: 184px; }
  .wrap { width: min(1180px, 100% - 64px); }
  .so-largo { display: inline; }
  .hero-cta { width: auto; }
  .hero-tel { display: inline-flex; }
  .loja-marcas { gap: 8px; }
  .loja-marcas span { padding: 7px 14px; font-size: 15px; }
  .vt-trilho { padding-left: 32px; padding-right: 32px; gap: 22px; }
  .vt-area::before, .vt-area::after { width: 60px; }
  .galeria { margin-inline: -32px; padding-inline: 32px; }
  .g-item { flex-basis: 56%; height: 360px; }
  .final-ctas .btn { width: auto; }
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .passos li { flex-direction: column; align-items: flex-start; font-size: 16.5px; }
}

@media (min-width: 900px) and (hover: hover) {
  .vt-seta { display: grid; }
  .vt-trilho { padding-left: 84px; padding-right: 84px; }
}

@media (min-width: 900px) {
  .barra-mobile { display: none; }
  .flutuante { display: inline-flex; }
  .rodape { padding-bottom: 48px; }
}

@media (min-width: 1000px) {
  :root { --topo: 76px; --card: 190px; --palco: 196px; }
  .topo-logo img { width: 34px; }
  .topo-marca b:first-child { font-size: 15px; }
  .topo-marca b:last-child { font-size: 20px; }
  .topo-nav { display: flex; gap: 26px; }
  .topo-nav a { font-size: 15px; font-weight: 600; color: var(--marinho); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .25s, color .25s; }
  .topo-nav a:hover { color: var(--gota); border-color: var(--gota); }
  .topo-acoes { gap: 14px; }
  .topo-tel { width: auto; height: auto; border: 0; display: inline-flex; gap: 8px; font-weight: 700; font-size: 15px; }
  .topo-tel span { display: inline; }

  .hero { padding-top: calc(var(--topo) + 30px); }
  .hero-topo {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: end;
  }
  .hero-selo { grid-column: 1 / -1; justify-self: start; }
  .hero-titulo { grid-column: 1; margin: 18px 0 0; font-size: clamp(56px, min(5.7vw, 9.6vh), 92px); }
  .hero-lado { grid-column: 2; padding-bottom: 6px; }
  .hero-sub { font-size: 18px; }
  .vitrine { padding-top: 30px; }

  h2 { font-size: clamp(48px, 4.6vw, 66px); }
  .problemas { padding: 110px 0; }
  .prob-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas: 'casa cabeca' 'casa lista' 'casa dica';
    grid-template-rows: auto auto 1fr;
    column-gap: 64px;
  }
  .prob-cabeca { grid-area: cabeca; }
  .prob-casa { grid-area: casa; align-self: start; position: sticky; top: calc(var(--topo) + 28px); margin: 0; padding: 18px 12px 0; }
  .prob-lista { grid-area: lista; margin-top: 26px; }
  .prob-dica { grid-area: dica; align-self: start; }

  .loja { padding: 110px 0; }
  .loja-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; align-items: center; }
  .galeria {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    grid-template-rows: 330px 280px;
    gap: 14px;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .g-item { height: auto; }
  .g-fachada { grid-column: 1 / -1; }

  .onde { padding: 110px 0; }
  .onde-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
  .mapa { min-height: 430px; }

  .final { padding: 130px 0 140px; }
  .final-in { max-width: 980px; }
  .visor-seta { bottom: auto; top: 50%; margin-top: -25px; }
  .visor-ant { left: 22px; }
  .visor-prox { right: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .intro { display: none; }
  .com-js .rv, .com-js .hero-selo, .com-js .hero-sub, .com-js .hero-ctas, .com-js .vt-cabeca, .com-js .vt-nota, .com-js .vt-card { opacity: 1; transform: none; }
  .com-js .hero-titulo .p > span, .com-js .vt-prateleira { transform: none; }
  .com-js .rv-foto::after { display: none; }
  .hero-chuva, .final-chuva { display: none; }
}

/* ============================================================
   Loja (catálogo): gerado por ferramentas/catalogo.py
   ============================================================ */
.vt-cabeca .vt-todos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, .35);
  padding-bottom: 2px;
}
.vt-todos svg { width: 16px; height: 16px; }
.vt-todos:hover { border-color: #fff; }

.catalogo { padding: 70px 0 64px; background: #fff; }
.cat-intro { margin-top: 14px; font-size: 17px; color: var(--tinta-2); max-width: 36em; }
.cat-barra {
  position: sticky;
  top: var(--topo);
  z-index: 40;
  margin-top: 24px;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.cat-barra-in { display: grid; gap: 10px; padding: 12px 0; }
.cat-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: -16px;
  padding-inline: 16px;
}
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--linha);
  background: #fff;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--marinho);
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.cat-chip small { font-size: 12px; font-weight: 700; color: var(--tinta-2); }
.cat-chip:hover { border-color: var(--gota); }
.cat-chip.ativo { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.cat-chip.ativo small { color: #b9cde2; }
.cat-busca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid var(--linha);
  background: var(--papel);
}
.cat-busca:focus-within { border-color: var(--gota); background: #fff; }
.cat-busca svg { width: 20px; height: 20px; color: var(--tinta-2); flex: none; }
.cat-busca input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 16px var(--fonte); color: var(--tinta); outline: none; }

.cat-bloco { scroll-margin-top: calc(var(--topo) + 130px); }
.cat-bloco[hidden] { display: none; }
.cat-titulo {
  margin: 34px 0 14px;
  font-weight: 850;
  font-stretch: 70%;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1;
  color: var(--marinho);
}
.cat-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prod {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px;
  border: 1.5px solid var(--linha);
  border-radius: 16px;
  background: #fff;
  transition: border-color .25s, box-shadow .3s, transform .35s var(--suave);
}
.prod[hidden] { display: none; }
.prod:hover { border-color: var(--gota); box-shadow: 0 20px 36px -28px rgba(11, 47, 87, .6); }
.prod-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.prod-foto img { max-width: 92%; max-height: 92%; width: auto; height: auto; object-fit: contain; transition: transform .45s var(--suave); }
.prod:hover .prod-foto img { transform: scale(1.05); }
.prod-foto--cena img { max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; }
.prod-info { flex: 1; padding: 10px 2px 12px; }
.prod-marca { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tijolo-texto); }
.prod-nome { margin-top: 2px; font-size: 16px; font-weight: 800; line-height: 1.15; color: var(--marinho); }
.prod-uso { margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--tinta-2); }
.prod-acoes { display: grid; gap: 8px; }
.qtd {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  height: 42px;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  overflow: hidden;
}
.qtd-btn { height: 100%; font-size: 22px; font-weight: 600; line-height: 1; color: var(--marinho); transition: background .2s; }
.qtd-btn:hover { background: var(--papel); }
.qtd-btn:disabled { color: #b7c4d1; cursor: default; background: none; }
.qtd-num {
  width: 100%;
  height: 100%;
  border: 0;
  text-align: center;
  font: 800 16px var(--fonte);
  color: var(--marinho);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qtd-num::-webkit-outer-spin-button, .qtd-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qtd-num:focus { outline: none; background: var(--papel); }
.prod-pedir { width: 100%; min-height: 46px; padding: 10px 12px; font-size: 15px; }
.prod-pedir .ic { width: 20px; height: 20px; }
.qtd.mudou { animation: qtd-pulso .35s var(--suave); }
@keyframes qtd-pulso { 50% { transform: scale(1.05); border-color: var(--gota); } }
.cat-vazio { margin-top: 30px; padding: 26px 20px; border-radius: 18px; background: var(--papel); text-align: center; }
.cat-vazio[hidden] { display: none; }
.cat-vazio p { margin-bottom: 16px; color: var(--tinta-2); }
.cat-nota { margin-top: 30px; font-size: 15px; color: var(--tinta-2); }
.cat-nota a { color: var(--marinho); font-weight: 700; }

@media (min-width: 700px) {
  .cat-chips { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
  .cat-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .prod { padding: 12px; }
  .prod-foto { height: 160px; }
  .prod-nome { font-size: 17px; }
}
@media (min-width: 1000px) {
  .catalogo { padding: 110px 0 96px; }
  .cat-barra-in { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; }
  .cat-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .prod-foto { height: 180px; }
  .cat-titulo { font-size: 28px; margin-top: 44px; }
}
@media (hover: hover) { .prod:hover { transform: translateY(-4px); } }

/* preços da promoção */
.vt-preco { margin-top: 4px; font-size: 17px; font-weight: 850; font-stretch: 80%; color: var(--amarelo); }
.prod-preco { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; }
.prod-preco strong { font-size: 22px; font-weight: 850; font-stretch: 80%; line-height: 1; color: var(--marinho); }
.prod-selo { padding: 3px 8px; border-radius: 6px; background: var(--amarelo); color: var(--marinho); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.prod-preco--consulta { font-size: 13.5px; font-weight: 700; color: var(--tinta-2); }
.prod-total { margin-top: -2px; text-align: center; font-size: 14px; color: var(--tinta-2); }
.prod-total[hidden] { display: none; }
.prod-total strong { color: var(--marinho); font-weight: 800; }
.prod[data-oferta] { border-color: #f3d98a; }
.cat-chip--oferta { border-color: var(--amarelo); }
.cat-chip--oferta.ativo { background: var(--amarelo); border-color: var(--amarelo); color: var(--marinho); }
.cat-chip--oferta.ativo small { color: var(--marinho); }
@media (min-width: 1000px) { .prod-preco strong { font-size: 24px; } }