/* Página /produtos-para-piscina-joinville, v2 (29/09/2026). Só o que o style.css não cobre.
   Mesmo sistema da home: marinho, aqua, fonte do sistema. Fotos do ensaio da loja de 16/07/2026. */

/* ---------- Hero: foto da Ana com Hidroall, mesmo padrão da home ---------- */
.pv-hero .hero-photo-bleed picture{position:absolute;inset:0;display:block}
.pv-hero .hero-photo-bleed img{object-position:50% 30%}
.pv-hero .pv-sub{max-width:44ch;font-size:1.14rem}
/* Desktop: a foto ocupa a metade direita e se funde no marinho, o texto fica livre do rosto */
@media (min-width:961px){
  .pv-hero .hero-photo-bleed{left:auto;right:0;width:56%}
  .pv-hero .hero-photo-bleed::after{background:
    linear-gradient(90deg,#15294d 0%,rgba(21,41,77,.72) 16%,rgba(21,41,77,.18) 42%,transparent 60%),
    linear-gradient(180deg,rgba(8,17,33,.35) 0%,transparent 22%,transparent 78%,rgba(8,17,33,.45) 100%)}
}
@media (max-width:960px){
  .pv-hero .hero-photo-bleed picture{position:relative;inset:auto;height:100%}
  .pv-hero .hero-photo-bleed img{object-position:70% 30%}
}
/* Celular: a linha de confiança sai, para a vitrine de promoções entrar mais cedo */
@media (max-width:600px){
  .pv-hero .pv-trust{display:none}
  .pv-hero .pv-sub{font-size:1.05rem}
}

/* ---------- Problema -> produto ---------- */
.pv-prob{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:1fr}
.pv-prob-intro h2{max-width:18ch;text-wrap:balance}
.pv-prob-intro .lead{max-width:40ch}
.pv-prob-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pv-prob-lista li{border-bottom:1px solid var(--line)}
.pv-prob-lista a{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:20px 4px;min-height:44px;color:var(--navy);text-decoration:none;transition:background .2s ease,padding .2s ease}
.pv-prob-lista a:hover{background:var(--paper);padding-left:12px;text-decoration:none}
.pv-n{grid-row:span 2;font-size:.82rem;font-weight:800;letter-spacing:.08em;color:var(--aqua-600);padding-top:.35em}
.pv-q{font-size:clamp(1.12rem,2.2vw,1.38rem);font-weight:800;line-height:1.25;letter-spacing:-.01em}
.pv-a{display:block;color:var(--link);font-weight:700;font-size:.97rem}
.pv-a svg{display:inline-block;width:18px;height:18px;margin-left:6px;vertical-align:-4px;transition:transform .2s ease}
.pv-prob-lista a:hover .pv-a svg{transform:translateX(4px)}
@media (min-width:1024px){
  .pv-prob{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .pv-prob-intro{position:sticky;top:120px}
}

/* ---------- Links de texto (um WhatsApp por seção, não por card) ---------- */
.pv-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:22px}
.pv-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--link)}
.pv-link svg{width:18px;height:18px;flex:0 0 auto}
.pv-link:hover{text-decoration:underline}
.pv-link--wa{color:var(--wa-dark)}
.pv-link--wa svg{width:20px;height:20px}

/* ---------- Tratamento de água: texto + mosaico de fotos da prateleira ---------- */
.pv-trat{display:grid;gap:28px;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "bento" "lista"}
.pv-trat-head{grid-area:head}
.pv-bento{grid-area:bento}
.pv-trat-lista{grid-area:lista}
.pv-trat-head h2{max-width:16ch;text-wrap:balance}
.pv-trat-head p{color:var(--muted);max-width:52ch;margin-bottom:0}
.pv-marca-lista{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.pv-marca-lista > div{display:grid;grid-template-columns:1fr;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
.pv-marca-lista dt{font-weight:800;color:var(--navy);font-size:1.08rem;letter-spacing:-.01em}
.pv-marca-lista dd{margin:0;color:var(--muted);font-size:.98rem;line-height:1.6}
@media (min-width:600px){
  .pv-marca-lista > div{grid-template-columns:110px 1fr;gap:18px}
}
.pv-nota{margin:16px 0 0;font-size:.88rem;color:var(--muted)}

.pv-bento{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pv-foto{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--navy-900);box-shadow:var(--shadow)}
.pv-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pv-foto:hover img{transform:scale(1.03)}
.pv-foto figcaption{position:absolute;left:10px;bottom:10px;background:rgba(8,17,33,.72);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.02em;padding:.4em .75em;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pv-bento .pv-foto{aspect-ratio:1/1}
.pv-bento .pv-foto--alta{grid-column:1 / -1;aspect-ratio:4/3}
.pv-bento .pv-foto--alta img{object-position:50% 62%}
@media (min-width:1024px){
  .pv-trat{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head bento" "lista bento";column-gap:64px;row-gap:26px;align-items:start}
  .pv-bento{align-self:center}
  .pv-bento{grid-template-rows:1fr 1fr;height:600px}
  .pv-bento .pv-foto{aspect-ratio:auto}
  .pv-bento .pv-foto--alta{grid-column:1;grid-row:1 / span 2;aspect-ratio:auto}
}

/* ---------- Aquecedor ---------- */
.pv-aq{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr}
.pv-aq-foto{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
.pv-aq-foto img{width:100%;height:100%;object-fit:cover}
.pv-aq-txt h2{max-width:17ch;text-wrap:balance}
.pv-aq-txt > p{color:var(--muted)}
.pv-aq-marcas{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.pv-aq-marcas li{border-bottom:1px solid var(--line)}
.pv-aq-marcas a{display:grid;grid-template-columns:1fr 20px;gap:2px 14px;align-items:center;padding:16px 2px;min-height:44px;color:var(--ink);text-decoration:none}
.pv-aq-marcas a:hover{text-decoration:none;background:var(--paper)}
.pv-aq-marcas b{color:var(--navy);font-size:1.06rem}
.pv-aq-marcas span{grid-column:1;color:var(--muted);font-size:.95rem;line-height:1.5}
.pv-aq-marcas svg{grid-column:2;grid-row:1 / span 2;width:18px;height:18px;color:var(--link)}
.pv-cidades{margin:18px 0 0;font-size:.95rem;color:var(--muted);line-height:1.8}
.pv-cidades a{color:var(--link);font-weight:600}
@media (min-width:1024px){
  .pv-aq{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}
  .pv-aq-foto{aspect-ratio:auto;height:560px}
}

/* ---------- Também na loja: lista tipográfica, sem ícone ---------- */
.pv-tambem{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr}
.pv-linhas{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.pv-linhas li{border-bottom:1px solid var(--line)}
.pv-linhas a{display:grid;grid-template-columns:1fr 22px;gap:4px 16px;align-items:center;padding:22px 2px;min-height:44px;text-decoration:none}
.pv-linhas a:hover{text-decoration:none}
.pv-linhas b{color:var(--navy);font-size:clamp(1.18rem,2.2vw,1.45rem);font-weight:800;letter-spacing:-.015em}
.pv-linhas span{grid-column:1;color:var(--muted);font-size:.98rem;line-height:1.55}
.pv-linhas svg{grid-column:2;grid-row:1 / span 2;width:20px;height:20px;color:var(--link);transition:transform .2s ease}
.pv-linhas a:hover svg{transform:translateX(4px)}
.pv-guias{margin:20px 0 0;font-size:.95rem;color:var(--muted);line-height:1.7}
.pv-guias a{color:var(--link);font-weight:600}
.pv-tambem-foto{aspect-ratio:3/2}
@media (min-width:1024px){
  .pv-tambem{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
  .pv-tambem-foto{aspect-ratio:4/5}
}

/* ---------- Loja (faixa marinha) ---------- */
.pv-loja-grid{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr}
.pv-loja-foto{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;max-height:560px;box-shadow:var(--shadow-lg)}
.pv-loja-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pv-loja-txt h2{max-width:18ch;text-wrap:balance}
.pv-loja-txt > p{color:#b9cbe0;max-width:46ch}
.pv-info{list-style:none;margin:22px 0 26px;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.pv-info li{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.pv-info b{color:#fff;font-size:.9rem;letter-spacing:.02em}
.pv-info span{color:#c6d6ea}
.pv-info a{color:var(--aqua);font-weight:700;display:inline-block;padding:10px 0;margin:-10px 0}
@media (min-width:600px){.pv-info li{grid-template-columns:120px 1fr;gap:16px}}
@media (max-width:960px){.pv-loja-foto{aspect-ratio:1/1}}
@media (min-width:1024px){.pv-loja-grid{grid-template-columns:420px minmax(0,1fr);align-items:center}}

/* ---------- FAQ ---------- */
.pv-atualizado{text-align:center;margin:26px 0 0;font-size:.86rem;color:var(--muted)}

/* ---------- Chamada final com a Ana no balcão ---------- */
.pv-final{display:grid;grid-template-columns:minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.pv-final-foto{margin:0;aspect-ratio:16/10;overflow:hidden}
.pv-final-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pv-final-txt{padding:clamp(26px,4vw,56px)}
.pv-final-txt h2{max-width:20ch;text-wrap:balance}
.pv-final-txt p{color:var(--muted);max-width:44ch;margin-bottom:24px}
@media (max-width:600px){.pv-final-txt .btn{width:100%;justify-content:center;white-space:normal;text-align:center}}
@media (min-width:1024px){
  .pv-final{grid-template-columns:360px minmax(0,1fr);align-items:center}
  .pv-final-foto{aspect-ratio:auto;height:100%;min-height:420px}
}

/* ---------- Movimento: revelação da foto por máscara e leve parallax (só desktop) ---------- */
.pv-foto.reveal,.pv-aq-foto.reveal,.pv-loja-foto.reveal{clip-path:inset(8% 8% 8% 8% round var(--r-lg));transition:opacity .7s ease,transform .7s ease,clip-path .9s cubic-bezier(.2,.7,.2,1)}
.pv-foto.reveal.in,.pv-aq-foto.reveal.in,.pv-loja-foto.reveal.in{clip-path:inset(0 0 0 0 round var(--r-lg))}
.pv-bento.reveal .pv-foto{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.pv-bento.reveal.in .pv-foto{opacity:1;transform:none}
.pv-bento.reveal.in .pv-foto:nth-child(2){transition-delay:.12s}
.pv-bento.reveal.in .pv-foto:nth-child(3){transition-delay:.24s}
[data-parallax] img{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .pv-foto.reveal,.pv-aq-foto.reveal,.pv-loja-foto.reveal{clip-path:none}
  .pv-bento.reveal .pv-foto{opacity:1;transform:none}
  .pv-foto img,.pv-foto:hover img{transition:none;transform:none}
}

/* títulos centralizados sem palavra sozinha na última linha */
.section .center h2{text-wrap:balance}

/* balão da Ana some enquanto os botões do hero estão na tela (celular) */
.aj-float,.aj-msgs{transition:opacity .3s ease,transform .3s ease}
.pv-aj-oculto{opacity:0;transform:translateY(16px);pointer-events:none}
.pv-aj-oculto *{pointer-events:none}
@media (max-width:600px){.pv-final-txt{padding:26px 22px}}