:root{
  --primary:    #034b87;
  --primary-dk: #023a6e;
  --primary-lt: #e8f2fb;
  --accent:     #f7941d;
  --accent-dk:  #e07d0a;
  --accent-lt:  #fff4e6;
  --bg:         #f5f7fa;
  --surface:    #ffffff;
  --surface-alt:#f0f4f8;
  --text:       #1e293b;
  --text-md:    #475569;
  --text-lt:    #94a3b8;
  --border:     #e2e8f0;
  --border-md:  #cbd5e1;
  --wa-green:   #25d366;
  --wa-green-dk:#1eba5a;
  --ok-bg:      #ecfdf5;
  --ok-border:  #a7f3d0;
  --ok-text:    #047857;
  --nav-h:      4.6rem;
}

/* ---------- Tema escuro ---------- */
:root[data-theme="dark"]{
  --primary:    #2f7fe0;
  --primary-dk: #1f63b8;
  --primary-lt: #14233a;
  --accent:     #f7941d;
  --accent-dk:  #ffab3f;
  --accent-lt:  #2e2210;
  --bg:         #0b1220;
  --surface:    #141b2d;
  --surface-alt:#1b2438;
  --text:       #e7ecf5;
  --text-md:    #a8b3c7;
  --text-lt:    #71809c;
  --border:     #26304a;
  --border-md:  #384463;
  --wa-green:   #25d366;
  --wa-green-dk:#34e079;
  --ok-bg:      rgba(16,185,129,.16);
  --ok-border:  rgba(16,185,129,.45);
  --ok-text:    #6ee7b7;
}
:root[data-theme="dark"] .hero{ background:linear-gradient(180deg,#0f1729 0%,#0b1220 100%); }
:root[data-theme="dark"] .hero::before{ background:radial-gradient(ellipse at center, rgba(47,127,224,.16) 0%, transparent 70%); }
:root[data-theme="dark"] #instagram{ background:linear-gradient(180deg,#0f1729 0%,#0b1220 100%); }
:root[data-theme="dark"] .lightbox-img{ background:#fff; }
:root[data-theme="dark"] .hero-media-badge{ background:rgba(20,27,45,.9); color:#fff; }
:root[data-theme="dark"] ::selection{ background:var(--primary); color:#fff; }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 1rem); }
body{ font:400 1rem/1.65 'DM Sans',sans-serif; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:var(--primary); text-decoration:none; }
ul{ list-style:none; }

h1{ font:700 clamp(2.4rem,5vw,4rem)/1.05 'Barlow Condensed',sans-serif; }
h2{ font:700 clamp(1.8rem,3.5vw,2.8rem)/1.1 'Barlow Condensed',sans-serif; }
h3{ font:600 clamp(1.15rem,2vw,1.45rem)/1.2 'Barlow Condensed',sans-serif; }

.container{ width:min(100%,1200px); margin:0 auto; padding:0 clamp(1rem,4vw,2.5rem); }
section{ padding:clamp(3rem,6vw,5.5rem) 0; }

.eyebrow{ display:block; color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:.82rem; margin-bottom:.7rem; }
.section-head{ text-align:center; max-width:640px; margin:0 auto clamp(2rem,4vw,3rem); }
.section-head p{ color:var(--text-md); margin-top:.8rem; }

.icon{ width:20px; height:20px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.icon-instagram{ width:28px; height:28px; flex:none; }
.icon-fill{ width:20px; height:20px; fill:currentColor; flex:none; }

/* Telefone não parte em duas linhas. O   do meio segura "(51)" no número,
   mas o hífen de "3331-9988" também é ponto de quebra e só o nowrap cobre. Não
   usar hífen não-separável (U+2011): não é ASCII e atrapalha quem copia o
   número para colar no discador. */
.tel{ white-space:nowrap; }
/* Os telefones escritos no meio do texto eram <span> comum: no celular a
   pessoa lia "ligue para..." no momento de maior intenção e não acontecia
   nada ao tocar. Agora são links. Herdam a cor do texto para não virarem um
   mar de azul dentro do parágrafo, e ganham sublinhado discreto para não
   parecerem texto morto. */
a.tel-link{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-color:var(--accent); }
a.tel-link:hover{ color:var(--accent); }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font:500 .95rem/1 'DM Sans',sans-serif; padding:.8rem 1.4rem; border-radius:9px; border:2px solid transparent; cursor:pointer; transition:all .2s ease; white-space:nowrap; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-dk); box-shadow:0 8px 20px rgba(3,75,135,.35); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-dk); box-shadow:0 8px 20px rgba(247,148,29,.4); }
.btn-outline{ background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-outline:hover{ background:var(--primary-lt); box-shadow:0 8px 20px rgba(3,75,135,.18); }
.btn-outline-light{ background:transparent; color:#fff; border-color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); box-shadow:0 8px 20px rgba(0,0,0,.2); }
.btn-phone{ background:var(--primary); color:#fff; font-size:1.05rem; font-weight:600; }
.btn-phone:hover{ background:var(--primary-dk); box-shadow:0 8px 22px rgba(3,75,135,.38); }
.btn-wa{ background:var(--wa-green); color:#fff; font-weight:600; }
.btn-wa:hover{ background:var(--wa-green-dk); box-shadow:0 8px 20px rgba(37,211,102,.4); }
.btn-lg{ padding:1.05rem 1.9rem; font-size:1.1rem; }
.btn-block{ width:100%; white-space:normal; }
@media (max-width:539px){ .btn{ white-space:normal; } }

/* ---------- Nav (fundo branco — logo original da marca) ---------- */
nav{ position:fixed; top:0; left:0; right:0; z-index:1000; background:var(--surface); border-bottom:1px solid var(--border); transition:box-shadow .25s ease; }
nav.scrolled{ box-shadow:0 6px 24px rgba(2,31,61,.12); }
.nav-inner{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.nav-logo img{ height:44px; width:auto; }
.nav-logo{ display:flex; align-items:center; }
.logo-dark{ display:none; }
:root[data-theme="dark"] .logo-dark{ display:block; }
:root[data-theme="dark"] .logo-light{ display:none; }
.nav-menu{ display:none; align-items:center; gap:1.6rem; }
.theme-toggle{ display:flex; align-items:center; justify-content:center; gap:.5rem; width:40px; height:40px; padding:0; background:var(--surface-alt); border:1px solid var(--border); border-radius:50%; color:var(--text-md); cursor:pointer; transition:all .2s ease; flex:none; }
.theme-toggle:hover{ border-color:var(--primary); color:var(--primary); }
.theme-toggle-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle-moon{ display:none; }
.theme-toggle-label{ display:none; }
.theme-toggle-drawer{ width:100%; height:auto; justify-content:flex-start; border-radius:9px; padding:.65rem .8rem; margin:.2rem 0; }
.theme-toggle-drawer .theme-toggle-label{ display:inline; font-weight:500; font-size:.95rem; }
.nav-menu a:not(.btn){ color:var(--text); font-weight:500; font-size:.95rem; transition:color .2s ease; }
.nav-menu a:not(.btn):hover{ color:var(--primary); }
.nav-cta{ background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(247,148,29,.3); }
.nav-cta:hover{ background:var(--accent-dk); box-shadow:0 8px 20px rgba(247,148,29,.4); }
.nav-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:10px; background:transparent; border:0; cursor:pointer; }
.nav-burger span{ display:block; height:2px; width:100%; background:var(--primary); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
nav.open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
nav.open .nav-burger span:nth-child(2){ opacity:0; }
nav.open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-drawer{ display:flex; flex-direction:column; gap:.25rem; background:var(--surface); padding:0 clamp(1rem,4vw,2.5rem); max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; }
nav.open .nav-drawer{ max-height:480px; padding:1rem clamp(1rem,4vw,2.5rem) 1.4rem; border-top:1px solid var(--border); }
.nav-drawer a:not(.btn){ color:var(--text); font-weight:500; padding:.65rem 0; border-bottom:1px solid var(--border); }
.nav-drawer a:not(.btn):hover{ color:var(--primary); }
.nav-drawer .btn{ margin-top:.9rem; }
.nav-drawer-group{ border-bottom:1px solid var(--border); }
.nav-drawer-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; background:transparent; border:0; cursor:pointer; color:var(--text); font:600 .95rem/1 'DM Sans',sans-serif; padding:.65rem 0; }
.nav-drawer-toggle:hover{ color:var(--primary); }
.nav-drawer-chevron{ width:18px; height:18px; transition:transform .25s ease; }
.nav-drawer-group.open .nav-drawer-chevron{ transform:rotate(180deg); }
.nav-drawer-submenu{ display:flex; flex-direction:column; max-height:0; overflow:hidden; transition:max-height .3s ease; border-left:2px solid var(--border-md); margin-left:.4rem; padding-left:1.1rem; }
.nav-drawer-group.open .nav-drawer-submenu{ max-height:400px; }
.nav-drawer .nav-drawer-submenu a{ position:relative; padding:.55rem 0 .55rem 1.1rem; font-size:.9rem; font-weight:500; color:var(--text-md); border-bottom:0; }
.nav-drawer-submenu a::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:var(--border-md); transition:background .2s ease; }
.nav-drawer-submenu a:last-child{ padding-bottom:.9rem; }
.nav-drawer-submenu a:hover{ color:var(--primary); }
.nav-drawer-submenu a:hover::before{ background:var(--primary); }

@media (min-width:1024px){
  .nav-menu{ display:flex; }
  .nav-burger{ display:none; }
  .nav-drawer{ display:none; }
}

/* ---------- Hero (comercial, 2 colunas) ---------- */
.hero{ background:linear-gradient(180deg,#f0f6ff 0%,#ffffff 100%); position:relative; overflow:hidden; padding-top:calc(var(--nav-h) + clamp(2rem,4vw,3.5rem)); padding-bottom:clamp(2.5rem,5vw,4rem); text-align:center; }
.hero::before{ content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:900px; height:500px; background:radial-gradient(ellipse at center, rgba(3,75,135,.08) 0%, transparent 70%); pointer-events:none; }
.hero .container{ position:relative; }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; margin-bottom:clamp(2rem,4vw,2.8rem); }
@media (min-width:1024px){ .hero-grid{ grid-template-columns:1.15fr 1fr; text-align:left; } }
.hero h1{ margin:0 0 .9rem; color:var(--primary-dk); }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero-hook{ color:var(--primary-dk); font-weight:700; font-size:clamp(1.05rem,2.2vw,1.3rem); line-height:1.35; max-width:560px; margin:0 auto .75rem; }
.hero-hook em{ font-style:normal; color:var(--accent); }
@media (min-width:1024px){ .hero-hook{ margin-left:0; } }
.hero-sub{ color:var(--text-md); font-size:clamp(1rem,2vw,1.15rem); max-width:560px; margin:0 auto 1.6rem; }
@media (min-width:1024px){ .hero-sub{ margin-left:0; } }
.hero-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-bottom:1.4rem; }
@media (min-width:1024px){ .hero-ctas{ justify-content:flex-start; } }
.hero-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.3rem; }
@media (min-width:1024px){ .hero-trust{ justify-content:flex-start; } }
.hero-trust span{ display:inline-flex; align-items:center; gap:.4rem; color:var(--text-md); font-size:.86rem; font-weight:500; }
.hero-trust svg{ width:15px; height:15px; stroke:var(--accent-dk); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.hero-media{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 24px 50px rgba(3,75,135,.22); aspect-ratio:4/3; max-width:560px; margin:0 auto; width:100%; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media-fallback{ display:none; position:absolute; inset:0; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dk) 100%); }
.hero-media-badge{ position:absolute; left:1rem; bottom:1rem; background:rgba(255,255,255,.94); color:var(--primary-dk); font-size:.82rem; font-weight:700; padding:.5rem .9rem; border-radius:999px; display:flex; align-items:center; gap:.45rem; box-shadow:0 6px 18px rgba(2,31,61,.18); }
.hero-media-badge svg{ width:15px; height:15px; stroke:var(--accent-dk); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); max-width:720px; margin:0 auto; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:1.2rem 0; }
.hero-stat{ padding:0 .8rem; }
.hero-stat + .hero-stat{ border-left:1px solid var(--border); }
.hero-stat strong{ display:block; font:700 clamp(1.3rem,3vw,1.9rem)/1.1 'Barlow Condensed',sans-serif; color:var(--primary); }
.hero-stat small{ color:var(--text-md); font-size:.85rem; line-height:1.35; display:block; margin-top:.2rem; }
@media (max-width:767px){ .tab-btn{ padding:.9rem 1.3rem; } }
@media (max-width:539px){
  .hero-ctas{ flex-direction:column; }
  .hero-ctas .btn{ width:100%; }
}

/* ---------- Faixa de serviços ---------- */
.services-strip{ background:var(--surface); padding:clamp(2rem,4vw,3rem) 0; }
.strip-grid{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
@media (min-width:768px){ .strip-grid{ grid-template-columns:repeat(3,1fr); } }
.strip-card{ display:flex; flex-direction:column; gap:.6rem; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.5rem; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; color:var(--text); }
.strip-card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(3,75,135,.14); border-color:var(--primary); }
.strip-icon{ width:48px; height:48px; border-radius:11px; background:var(--primary-lt); color:var(--primary); display:flex; align-items:center; justify-content:center; }
.strip-icon svg{ width:24px; height:24px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.strip-card h3{ color:var(--text); }
.strip-card p{ color:var(--text-md); font-size:.9rem; flex:1; }
.strip-link{ color:var(--primary); font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:.35rem; }
.strip-card:hover .strip-link{ color:var(--accent-dk); }

/* ---------- Como funciona (passos) ---------- */
.steps{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:.5rem; }
@media (min-width:1024px){ .assist-grid .steps{ grid-column:1 / -1; grid-template-columns:repeat(3,1fr); margin-top:2.7rem; } }
.step-item{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.2rem; }
.step-num{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font:700 1rem/1 'Barlow Condensed',sans-serif; margin-bottom:.55rem; }
.step-item strong{ display:block; font-size:.95rem; margin-bottom:.2rem; }
.step-item p{ color:var(--text-md); font-size:.85rem; }
.assist-photo{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/10; box-shadow:0 14px 32px rgba(3,75,135,.14); }
.assist-photo img{ width:100%; height:100%; object-fit:cover; }
.assist-photo-fallback{ display:none; position:absolute; inset:0; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dk) 100%); }

/* ---------- Depoimentos ---------- */
#depoimentos{ background:var(--surface-alt); }
.depo-grid{ display:grid; grid-template-columns:1fr; gap:1.3rem; margin-bottom:2rem; }
@media (min-width:768px){ .depo-grid{ grid-template-columns:repeat(2,1fr); } }
.depo-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.5rem; display:flex; flex-direction:column; gap:.7rem; transition:transform .25s ease, box-shadow .25s ease; }
.depo-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(3,75,135,.12); }
.depo-stars{ color:var(--accent); font-size:.95rem; letter-spacing:.12em; }
.depo-card p{ color:var(--text-md); font-size:.94rem; font-style:italic; flex:1; }
.depo-card cite{ font-style:normal; font-weight:700; color:var(--text); font-size:.9rem; }

/* ---------- Perguntas frequentes ---------- */
/* Atalhos de sintoma: mesmo visual dos botões de categoria dos produtos
   (.tabs/.tab-btn), mas com classe própria — o app.js liga a troca de aba
   a .tab-btn, e reaproveitar a classe faria o atalho disparar aquilo também. */
.faq-atalhos-bloco{ max-width:820px; margin:0 auto 1.4rem; text-align:center; }
.faq-atalhos{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.faq-atalho{ flex:none; min-height:44px; background:var(--surface); border:1px solid var(--border-md); color:var(--text-md); font:600 .92rem/1 'DM Sans',sans-serif; padding:.75rem 1.3rem; border-radius:999px; cursor:pointer; transition:all .2s ease; }
.faq-atalho:hover{ border-color:var(--primary); color:var(--primary); }
.faq-atalho[aria-pressed="true"]{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 6px 18px rgba(3,75,135,.3); }
.faq-atalho:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Destaque do quadro que o atalho acabou de abrir: um anel na cor de destaque
   que cresce e some. Pisca o contorno, e não o fundo, porque o fundo mudando
   atrás de uma resposta longa atrapalha justamente na hora em que o visitante
   começa a ler. O laranja é o mesmo nos dois temas, então o anel serve aos dois.
   A sombra do estado [open] é repetida em todos os quadros da animação para não
   ser apagada enquanto ela roda. Sem regra própria de prefers-reduced-motion:
   quem pediu menos movimento já cai na regra geral lá no fim do arquivo. */
@keyframes faq-destaque{
  0%  { box-shadow:0 0 0 0 rgba(247,148,29,.6), 0 10px 26px rgba(3,75,135,.10); border-color:var(--accent); }
  70% { box-shadow:0 0 0 8px rgba(247,148,29,0), 0 10px 26px rgba(3,75,135,.10); border-color:var(--accent); }
  100%{ box-shadow:0 0 0 0 rgba(247,148,29,0), 0 10px 26px rgba(3,75,135,.10); }
}
.faq-item.faq-destacado{ animation:faq-destaque 1.5s ease-out; }
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:.7rem; }
.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.faq-item[open]{ border-color:var(--border-md); box-shadow:0 10px 26px rgba(3,75,135,.10); }
.faq-item summary{ cursor:pointer; list-style:none; padding:1.05rem 3rem 1.05rem 1.3rem; font-weight:700; color:var(--primary-dk); position:relative; font-size:1rem; line-height:1.45; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:""; position:absolute; right:1.3rem; top:50%; width:10px; height:10px; margin-top:-6px; border-right:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent); transform:rotate(45deg); transition:transform .25s ease; }
.faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq-item summary:hover{ background:var(--surface-alt); }
.faq-item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.faq-answer{ padding:0 1.3rem 1.2rem; color:var(--text-md); font-size:.95rem; line-height:1.65; }
.faq-answer strong{ color:var(--text); }
.faq-answer ul{ list-style:disc; padding-left:1.25rem; margin:.7rem 0; display:flex; flex-direction:column; gap:.4rem; }
.faq-answer li::marker{ color:var(--accent); }
.faq-nota{ max-width:820px; margin:1.4rem auto 0; color:var(--text-lt); font-size:.83rem; line-height:1.6; text-align:center; }

/* ---------- Nota duchas ---------- */
.duchas-note{ color:var(--text-lt); font-size:.82rem; margin-top:1.4rem; text-align:center; }
.section-notice{ background:var(--surface-alt); border:1px solid var(--border-md); border-radius:10px; color:var(--text-md); font-size:.88rem; line-height:1.5; text-align:left; padding:.9rem 1.1rem; margin-top:1.4rem; }
.section-notice p + p{ margin-top:.6rem; padding-top:.6rem; border-top:1px dashed var(--border-md); }
.section-notice strong{ color:var(--text); }

/* ---------- Barra fixa mobile ---------- */
.mobile-bar{ display:none; }
@media (max-width:767px){
  .mobile-bar{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; position:fixed; left:0; right:0; bottom:0; z-index:998; background:var(--surface); border-top:1px solid var(--border); padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); box-shadow:0 -6px 20px rgba(2,31,61,.12); transform:translateY(100%); transition:transform .25s ease; }
  .mobile-bar.is-visible{ transform:translateY(0); }
  .mobile-bar .btn{ padding:.75rem .5rem; font-size:.92rem; }
  body{ padding-bottom:4.4rem; }
}

/* ---------- Banner de cookies ---------- */
.cookie-banner{ display:none; position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:2100; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 50px rgba(2,31,61,.3); padding:1.2rem 1.4rem; max-width:560px; margin:0 auto; }
.cookie-banner.show{ display:block; }
@media (max-width:767px){ .cookie-banner{ bottom:5rem; } }
.cookie-banner p{ color:var(--text-md); font-size:.86rem; margin-bottom:.9rem; }
.cookie-banner p a{ text-decoration:underline; cursor:pointer; }
.cookie-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.cookie-actions .btn{ padding:.6rem 1.1rem; font-size:.88rem; }

/* ---------- Brands bar ---------- */
.brands-bar{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:1.5rem 0; }
.brands-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.9rem 1.6rem; text-align:center; }
.brands-label{ color:var(--text-lt); font-size:.85rem; }
.brands-main{ font:700 1.3rem/1.2 'Barlow Condensed',sans-serif; color:var(--primary); letter-spacing:.03em; }
.brand-name{ font:700 1.4rem/1 'Barlow Condensed',sans-serif; color:var(--primary); opacity:.7; letter-spacing:.04em; }
.brands-plus{ color:var(--border-md); font-weight:700; }
.brands-auth{ color:var(--accent); font-weight:700; font-size:.9rem; }

/* ---------- Products ---------- */
#produtos{ background:var(--bg); }
.tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:2rem; }
@media (min-width:1024px){
  .tabs{ position:sticky; top:var(--nav-h); z-index:900; background:var(--bg); padding:1rem 0; margin-bottom:1rem; }
  .tabs::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:var(--vw,100vw); margin-left:calc(var(--vw,100vw) / -2); background:var(--bg); z-index:-1; transition:box-shadow .25s ease; }
  .tabs.is-stuck::before{ box-shadow:0 10px 24px rgba(2,31,61,.16); border-bottom:1px solid var(--border); }
}
.tab-btn{ flex:none; background:var(--surface); border:1px solid var(--border-md); color:var(--text-md); font:600 .92rem/1 'DM Sans',sans-serif; padding:.75rem 1.3rem; border-radius:999px; cursor:pointer; transition:all .2s ease; }
.tab-btn:hover{ border-color:var(--primary); color:var(--primary); }
.tab-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 6px 18px rgba(3,75,135,.3); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.prod-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start; }
@media (min-width:768px){ .prod-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .prod-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; }
.card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(3,75,135,.14); }
/* As fotos de produto têm fundo branco gravado no arquivo, sem transparência.
   No tema escuro isso vira um retângulo branco de canto vivo sobre o card.
   Arredondar é preciso fazer na caixa da imagem, e para isso ela tem de ter o
   tamanho exato da foto: com width/height 100% + object-fit:contain, a caixa
   ocupava a moldura inteira (341x191) enquanto o branco pintado media 199x159
   no meio dela — um border-radius ali arredondaria o vazio, não a foto.
   Com max-width/max-height a caixa encolhe até a foto, e aí o raio pega nela.

   O position:absolute não é enfeite. A altura da moldura vem de aspect-ratio, e
   com a imagem no fluxo normal o Safari do iPhone não aceitava "max-height em
   porcentagem" apoiado numa altura vinda dali — sem limite de altura, as fotos
   em pé (thermotini 706x900, clesse-bp2202ff 575x706) cresciam até o limite de
   largura e o card cortava o que passava. Fora do fluxo, a porcentagem se apoia
   na caixa da moldura, que já está medida, e os dois navegadores concordam.
   inset:0 + margin:auto é o que centraliza nos dois eixos. */
.card-media{ position:relative; aspect-ratio:16/9; background:var(--surface); border-bottom:1px solid var(--border); overflow:hidden; }
.card-media.ratio43{ aspect-ratio:4/3; }
.card-media img{ position:absolute; inset:0; margin:auto; width:auto; height:auto; max-width:calc(100% - 2rem); max-height:calc(100% - 2rem); object-fit:contain; border-radius:10px; transition:transform .3s ease; }
.card:hover .card-media img{ transform:scale(1.04); }
.card-fallback{ display:none; position:absolute; inset:0; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; background:var(--primary-lt); color:var(--primary); padding:1rem; text-align:center; }
.card-fallback svg{ width:42px; height:42px; stroke:var(--primary); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* overflow-y:hidden é obrigatório, não enfeite: pela regra do CSS, quando um
   eixo deixa de ser "visible" o outro vira "auto" sozinho. Só com overflow-x
   o navegador passava a tratar a faixa como área que rola nos dois sentidos,
   e no celular o dedo arrastava as fotos de lado e para cima ao mesmo tempo. */
.card-media-multi .card-media-track{ display:flex; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.card-media-multi .card-media-track::-webkit-scrollbar{ display:none; }
.card-media-slide{ position:relative; flex:0 0 100%; scroll-snap-align:start; }
/* Mesmo motivo do .card-media img acima: a caixa precisa encolher até a foto. */
.card-media-slide img{ position:absolute; inset:0; margin:auto; width:auto; height:auto; max-width:calc(100% - 2rem); max-height:calc(100% - 2rem); object-fit:contain; border-radius:10px; transition:transform .3s ease; }
.card:hover .card-media-slide img{ transform:scale(1.04); }
/* Os pontos ficavam a 0.6rem do fundo, e a foto branca termina a 17px dele:
   o ponto nascia em cima da borda, com 1,6px dos 8px sobre o branco e o resto
   sobre o card. Como a cor era azul-marinho translúcido, no tema escuro só se
   enxergava a fatia que calhava de estar sobre a foto. Agora eles ficam
   inteiros na faixa abaixo da foto, e a cor vem das variáveis do tema, que já
   mudam entre claro e escuro. */
.card-media-dots{ position:absolute; bottom:4px; left:0; right:0; display:flex; justify-content:center; gap:.5rem; z-index:2; }
.card-media-dots span{ width:8px; height:8px; border-radius:50%; background:var(--border-md); transition:background .2s ease, transform .2s ease; cursor:pointer; }
.card-media-dots span:hover{ transform:scale(1.25); }
.card-media-dots span.active{ background:var(--primary); }
.card-media-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:30px; height:30px; border:none; background:none; color:rgba(3,75,135,.45); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.card-media-nav svg{ width:20px; height:20px; stroke:currentColor; stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); transition:transform .2s ease; }
.card-media-nav.prev{ left:.6rem; }
.card-media-nav.next{ right:.6rem; }
.card-media-nav.prev svg{ transform:rotate(180deg); }
.card-media-nav.next:hover svg{ transform:scale(1.15); }
.card-media-nav.prev:hover svg{ transform:rotate(180deg) scale(1.15); }
.card-fallback span{ font:600 1rem/1.2 'Barlow Condensed',sans-serif; }
.card-body{ padding:1.3rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.card-title{ font:600 1.35rem/1.15 'Barlow Condensed',sans-serif; color:var(--text); }
.card-flow{ display:flex; align-items:baseline; gap:.35rem; }
.card-flow strong{ font:700 2rem/1 'Barlow Condensed',sans-serif; color:var(--primary); }
.card-flow small{ color:var(--text-md); font-size:.85rem; }
.badge-duchas{ align-self:flex-start; background:var(--accent); color:#fff; font-size:.78rem; font-weight:700; padding:.28rem .7rem; border-radius:999px; }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{ background:var(--surface-alt); border:1px solid var(--border); color:var(--text-md); font-size:.76rem; font-weight:500; padding:.24rem .6rem; border-radius:999px; }
.card-highlight{ color:var(--accent-dk); font-size:.86rem; font-weight:700; }
.card-colors{ color:var(--text-md); font-size:.86rem; }
.badge-warranty{ display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; background:var(--ok-bg); border:1px solid var(--ok-border); color:var(--ok-text); font-size:.8rem; font-weight:700; padding:.3rem .7rem; border-radius:999px; }
.badge-warranty svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Bloco de preço (opcional, por modelo) ---------- */
.price-block{ background:var(--surface-alt); border:1px solid var(--border); border-radius:10px; padding:.85rem .95rem; display:flex; flex-direction:column; gap:.5rem; }
.price-pix-row{ display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
.price-value{ font:700 1.5rem/1 'Barlow Condensed',sans-serif; color:var(--primary); }
.price-pix-badge{ display:inline-flex; align-items:center; gap:.3rem; background:var(--ok-bg); border:1px solid var(--ok-border); color:var(--ok-text); font-size:.7rem; font-weight:700; padding:.22rem .5rem; border-radius:999px; white-space:nowrap; }
.price-pix-badge svg{ width:11px; height:11px; stroke:var(--ok-text); stroke-width:2; fill:none; }
.price-card-line{ color:var(--text-md); font-size:.84rem; padding-top:.45rem; border-top:1px dashed var(--border-md); }
.price-card-line strong{ font:700 1.25rem/1.2 'Barlow Condensed',sans-serif; color:var(--text); display:block; margin-bottom:.15rem; }
.price-card-line small{ color:var(--text-lt); font-size:.76rem; }
.price-validity{ display:inline-flex; align-items:center; gap:.35rem; align-self:flex-start; background:var(--surface); border:1px solid var(--border-md); color:var(--text-md); font-size:.7rem; font-weight:600; padding:.24rem .55rem; border-radius:999px; }
.price-validity svg{ width:11px; height:11px; stroke:var(--text-lt); stroke-width:2; fill:none; }

.card-body .btn{ margin-top:auto; }
.pump-spec-label{ color:var(--text-md); font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:-.55rem; }
.pump-spec{ font:600 1.5rem/1.15 'Barlow Condensed',sans-serif; color:var(--primary); }
.pump-list{ display:flex; flex-direction:column; }
.pump-list li{ display:flex; color:var(--text-md); font-size:.88rem; padding:.45rem 0; border-bottom:1px dotted var(--border-md); }
.pump-list li:last-child{ border-bottom:0; }

.subgroup{ margin-bottom:2.6rem; }
.subgroup:last-of-type{ margin-bottom:0; }
.subgroup-title{ font:600 1.5rem/1.2 'Barlow Condensed',sans-serif; color:var(--primary); border-bottom:2px solid var(--accent); display:inline-block; padding-bottom:.35rem; margin-bottom:1.3rem; }
.intro-box{ background:var(--primary-lt); border-left:4px solid var(--primary); border-radius:0 10px 10px 0; padding:1.25rem 1.5rem; color:var(--text-md); margin-bottom:1.4rem; }

/* Boiler */
.boiler-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:clamp(1.5rem,3vw,2.5rem); display:grid; grid-template-columns:1fr; gap:2rem; max-width:920px; margin:0 auto; transition:transform .25s ease, box-shadow .25s ease; }
.boiler-card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(3,75,135,.14); }
@media (min-width:1024px){ .boiler-card{ grid-template-columns:320px 1fr; align-items:center; } }
.boiler-media{ position:relative; max-width:280px; aspect-ratio:3/4; margin:0 auto; }
.boiler-media img{ width:100%; height:100%; object-fit:contain; }
.boiler-media .card-fallback{ border-radius:10px; }
.boiler-info{ display:flex; flex-direction:column; gap:.9rem; }
.boiler-cap strong{ font:700 1.6rem/1 'Barlow Condensed',sans-serif; color:var(--accent); }
.boiler-cap small{ display:block; color:var(--text-md); margin-top:.15rem; }
.boiler-info p{ color:var(--text-md); font-size:.95rem; }
.boiler-info .btn{ align-self:flex-start; }
@media (max-width:539px){ .boiler-info .btn{ width:100%; } }

/* ---------- Assistência ---------- */
#assistencia{ background:var(--surface-alt); }
/* Os dois cards de manutenção ficam na 2ª linha da grade, um em cada coluna, para
   alinharem pelo topo sozinhos. A 1ª linha tem a foto e o card "Por que chamar", e
   a altura dela é a do mais alto dos dois — quem sobrar folga não deixa vazio acima
   dos cards: se o card for mais baixo, ele desce (align-self:end); se a foto for
   mais baixa, ela cresce (flex:1) e o object-fit:cover corta sem distorcer.
   Fora do desktop a grade é uma coluna só e a ordem do HTML já é a de leitura. */
.assist-grid{ display:grid; grid-template-columns:1fr; column-gap:2.5rem; row-gap:1.3rem; }
.assist-intro{ display:flex; flex-direction:column; }
@media (max-width:1023px){
  .assist-grid > .auth-card{ margin-top:1.2rem; }
  .assist-grid > .steps{ margin-top:1.7rem; }
}
@media (min-width:1024px){
  .assist-grid{ grid-template-columns:1fr 1.1fr; align-items:start; }
  .assist-intro{ grid-column:1; grid-row:1; align-self:stretch; }
  .assist-intro .assist-photo{ flex:1 1 auto; }
  /* align-self:stretch vence o align-items:start da grade e iguala a altura dos dois
     cards de manutenção pelo mais alto. Só vale aqui, onde eles ficam lado a lado. */
  .assist-corretiva{ grid-column:1; grid-row:2; align-self:stretch; }
  .assist-grid > .auth-card{ grid-column:2; grid-row:1; align-self:end; }
  .assist-preventiva{ grid-column:2; grid-row:2; align-self:stretch; }
}
.assist-grid .section-head-l{ margin-bottom:1.8rem; }
.assist-grid .section-head-l p{ color:var(--text-md); margin-top:.8rem; }
.service-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.5rem; display:flex; gap:1.1rem; transition:transform .25s ease, box-shadow .25s ease; }
.service-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(3,75,135,.12); }
.service-icon{ width:46px; height:46px; flex:none; border-radius:10px; background:var(--accent-lt); color:var(--accent-dk); display:flex; align-items:center; justify-content:center; }
.service-card h3{ margin-bottom:.35rem; }
.service-card p{ color:var(--text-md); font-size:.92rem; }
.auth-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:2rem; }
.auth-title{ margin-bottom:1.3rem; }
.auth-badge{ display:inline-flex; align-items:center; gap:.45rem; background:var(--accent-lt); color:var(--accent-dk); font-weight:700; font-size:.88rem; padding:.45rem 1rem; border-radius:999px; }
.diff-grid{ display:grid; grid-template-columns:1fr; gap:.9rem; margin-bottom:1.6rem; }
@media (min-width:768px){ .diff-grid{ grid-template-columns:1fr 1fr; } }
.diff-item{ display:flex; gap:.75rem; align-items:center; }
.diff-icon{ width:38px; height:38px; flex:none; border-radius:9px; background:var(--primary-lt); color:var(--primary); display:flex; align-items:center; justify-content:center; }
.diff-item strong{ display:block; font-size:.92rem; line-height:1.35; }
.auth-brands{ border-top:1px solid var(--border); padding-top:1.3rem; margin-bottom:1.5rem; text-align:center; }
.creds-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; margin-bottom:.8rem; }
.cred-item{ display:flex; flex-direction:column; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1rem 1.6rem; }
.cred-item img{ height:26px; width:auto; }
.cred-item span{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-dk); }
.auth-brands p.auth-obs{ color:var(--text-lt); font-size:.78rem; }
.auth-ctas{ display:flex; flex-direction:column; gap:.8rem; }

/* ---------- Empresa ---------- */
#empresa{ background:var(--surface); }
.empresa-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; max-width:720px; margin:0 auto; text-align:center; }
.empresa-text p{ color:var(--text-md); margin-top:1rem; text-align:left; }
.empresa-foto{ margin:0; }
.empresa-foto img{ display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--border); }
.empresa-foto figcaption{ margin-top:.7rem; font-size:.85rem; color:var(--text-md); text-align:center; }
.timeline{ position:relative; padding-left:1.6rem; }
.timeline::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:3px; background:var(--primary-lt); border-radius:3px; }
.tl-item{ position:relative; padding-bottom:1.6rem; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:''; position:absolute; left:-1.6rem; top:.35rem; width:15px; height:15px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); box-shadow:0 0 0 2px var(--accent); }
.tl-year{ font:700 1.3rem/1 'Barlow Condensed',sans-serif; color:var(--primary); }
.tl-item strong.tl-label{ display:block; font-size:.95rem; margin:.2rem 0 .15rem; }
.tl-item p{ color:var(--text-md); font-size:.9rem; }

/* ---------- Instagram ---------- */
#instagram{ background:linear-gradient(180deg,#f0f6ff 0%,#f9fbff 100%); text-align:center; }
.insta-grid:not(:empty){
  display:flex; gap:1rem; margin-bottom:.6rem;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding:0 calc(50% - 44vw) .5rem;
}
.insta-grid:not(:empty)::-webkit-scrollbar{ display:none; }
.insta-grid:not(:empty) .instagram-media{ flex:0 0 88vw; scroll-snap-align:center; max-width:100% !important; min-width:0 !important; margin:0 !important; }
.insta-hint{ display:none; align-items:center; justify-content:center; gap:.5rem; color:var(--primary); font:700 .95rem/1 'Barlow Condensed',sans-serif; letter-spacing:.03em; text-transform:uppercase; margin-bottom:1.4rem; }
.insta-hint .arrow{ display:inline-block; animation:instaHintNudgeR 1.3s ease-in-out infinite; }
.insta-hint .arrow-l{ animation-name:instaHintNudgeL; }
@keyframes instaHintNudgeR{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(4px); }
}
@keyframes instaHintNudgeL{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(-4px); }
}
.insta-grid:not(:empty) ~ .insta-hint{ display:flex; }
@media (min-width:1024px){
  .insta-grid:not(:empty){ display:grid; grid-template-columns:repeat(3,1fr); align-items:start; overflow:visible; padding:0; margin-bottom:1.4rem; }
  .insta-grid:not(:empty) .instagram-media{ flex:initial; width:100%; }
  .insta-hint{ display:none !important; }
}
.insta-banner{ position:relative; max-width:540px; aspect-ratio:16/9; margin:0 auto 1.4rem; border-radius:14px; overflow:hidden; box-shadow:0 16px 40px rgba(3,75,135,.16); }
.insta-banner img{ width:100%; height:100%; object-fit:cover; }
.insta-fallback{ display:flex; position:absolute; inset:0; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dk) 100%); color:#fff; }
.insta-fallback svg{ width:44px; height:44px; stroke:#fff; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.insta-fallback span{ font:600 1.15rem/1 'Barlow Condensed',sans-serif; }

/* ---------- Contato ---------- */
#contato{ background:var(--primary); position:relative; overflow:hidden; color:#fff; }
#contato::before{ content:''; position:absolute; top:-150px; right:-150px; width:600px; height:600px; background:radial-gradient(circle at center, rgba(247,148,29,.16) 0%, transparent 65%); pointer-events:none; }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; position:relative; }
.contact-heading{ order:1; }
.contact-cta-wrap{ order:2; }
.contact-extra{ order:3; }
.contact-cta-note{ margin-top:.9rem; }
@media (min-width:768px){
  .contact-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"heading heading" "extra cta";
    align-items:start;
  }
  .contact-heading{ grid-area:heading; order:initial; }
  .contact-extra{ grid-area:extra; order:initial; }
  .contact-cta-wrap{ grid-area:cta; order:initial; }
}
.contact-heading h2{ color:#fff; margin-bottom:.8rem; }
.contact-heading > p{ color:rgba(255,255,255,.78); margin-bottom:0; }
.info-card{ display:flex; gap:1rem; background:rgba(255,255,255,.08); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:1.2rem 1.4rem; margin-bottom:1rem; }
.info-icon{ width:42px; height:42px; flex:none; border-radius:9px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; }
.info-card strong{ display:block; margin-bottom:.15rem; }
.info-card p{ color:rgba(255,255,255,.82); font-size:.92rem; }
.contact-note{ color:rgba(255,255,255,.7); font-size:.88rem; }
.contact-cta{ background:var(--surface); color:var(--text); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.25); padding:clamp(1.6rem,3vw,2.4rem); text-align:center; }
.live-tag{ display:inline-flex; align-items:center; gap:.5rem; background:var(--ok-bg); border:1px solid var(--ok-border); color:var(--ok-text); font-size:.85rem; font-weight:700; padding:.4rem 1rem; border-radius:999px; margin-bottom:1.2rem; }
.live-dot{ width:9px; height:9px; border-radius:50%; background:var(--ok-text); animation:livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(4,120,87,.45); }
  50%{ box-shadow:0 0 0 6px rgba(4,120,87,0); }
}
.contact-phone{ font:700 clamp(2rem,5vw,2.7rem)/1.1 'Barlow Condensed',sans-serif; color:var(--primary); margin-bottom:.6rem; }
.contact-cta > p{ color:var(--text-md); font-size:.95rem; margin-bottom:1.4rem; }
.cta-divider{ display:flex; align-items:center; gap:.8rem; color:var(--text-lt); font-size:.85rem; margin:1.1rem 0; }
.cta-divider::before,.cta-divider::after{ content:''; flex:1; height:1px; background:var(--border); }
.wa-note{ color:var(--text-lt); font-size:.82rem; margin-top:.8rem; }

/* ---------- Footer ---------- */
footer{ background:#021f3d; color:rgba(255,255,255,.75); padding:clamp(2.5rem,5vw,3.5rem) 0 1.8rem; }
.footer-top{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; text-align:center; }
@media (min-width:768px){ .footer-top{ flex-direction:row; justify-content:space-between; align-items:flex-start; text-align:left; } }
.footer-brand img{ height:32px; width:auto; margin-bottom:.7rem; }
@media (max-width:767px){ .footer-brand img{ margin-left:auto; margin-right:auto; } }
.footer-brand p{ font-size:.88rem; color:rgba(255,255,255,.6); }
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.6rem; }
.footer-links a{ color:rgba(255,255,255,.75); font-size:.92rem; transition:color .2s ease; }
.footer-links a:hover{ color:var(--accent); }
.footer-divider{ height:1px; background:rgba(255,255,255,.1); margin:1.8rem 0 1.4rem; }
.footer-bottom{ text-align:center; font-size:.78rem; color:rgba(255,255,255,.45); line-height:1.7; }

/* ---------- WhatsApp float ---------- */
.wa-float{ position:fixed; bottom:1.5rem; right:1.5rem; z-index:999; width:58px; height:58px; border-radius:50%; background:var(--wa-green); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(37,211,102,.45); animation:waPulse 2.4s ease-in-out infinite; transition:transform .2s ease, background .2s ease; }
.wa-float:hover{ transform:scale(1.07); background:var(--wa-green-dk); }
.wa-float svg{ width:28px; height:28px; fill:#fff; }
@keyframes waPulse{
  0%{ box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.4); }
  70%{ box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}
.wa-float::after{ content:'Envie uma mensagem'; position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%); background:var(--text); color:#fff; font-size:.8rem; font-weight:500; padding:.4rem .8rem; border-radius:7px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.wa-float:hover::after{ opacity:1; }
@media (max-width:767px){ .wa-float{ display:none; } }

/* ---------- Modal Política de Privacidade ---------- */
.privacy-link{ color:rgba(255,255,255,.6); text-decoration:underline; cursor:pointer; }
.privacy-link:hover{ color:var(--accent); }
.modal-overlay{ display:none; position:fixed; inset:0; z-index:2000; background:rgba(2,31,61,.6); align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open{ display:flex; }
.modal-card{ background:var(--surface); color:var(--text); border-radius:14px; max-width:680px; width:100%; max-height:85vh; overflow-y:auto; padding:clamp(1.5rem,3vw,2.4rem); box-shadow:0 24px 60px rgba(0,0,0,.35); position:relative; }
.modal-card h3{ color:var(--primary); margin-bottom:1rem; font-size:1.5rem; }
.modal-card h4{ font:600 1.05rem/1.3 'Barlow Condensed',sans-serif; color:var(--primary); text-transform:uppercase; letter-spacing:.08em; margin:1.2rem 0 .4rem; }
.modal-card p, .modal-card li{ color:var(--text-md); font-size:.9rem; margin-bottom:.6rem; }
.modal-card ul{ list-style:disc; padding-left:1.2rem; }
.modal-close{ position:absolute; top:.9rem; right:.9rem; width:36px; height:36px; border:0; border-radius:50%; background:var(--surface-alt); color:var(--text-md); font-size:1.1rem; cursor:pointer; transition:all .2s ease; }
.modal-close:hover{ background:var(--border); color:var(--text); }

/* ---------- Lightbox de fotos dos produtos ---------- */
.card-media img, .boiler-media img{ cursor:zoom-in; }
.lightbox-overlay{ display:none; position:fixed; inset:0; z-index:2200; background:rgba(2,6,14,.88); align-items:center; justify-content:center; padding:1.2rem; flex-direction:column; }
.lightbox-overlay.open{ display:flex; }
.lightbox-img{ max-width:min(90vw,900px); max-height:72vh; object-fit:contain; border-radius:10px; box-shadow:0 24px 60px rgba(0,0,0,.5); background:#fff; }
.lightbox-close{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem; background:var(--surface); color:var(--text); border:0; border-radius:999px; padding:.6rem 1.3rem; font:600 .92rem/1 'DM Sans',sans-serif; cursor:pointer; transition:all .2s ease; }
.lightbox-close:hover{ background:var(--border); }
.lightbox-close svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.5; fill:none; }

/* ---------- Textos que variam conforme o horário de atendimento ---------- */
.hrs-fechado-inline{ display:none; }
body.fechado .hrs-aberto-inline{ display:none; }
body.fechado .hrs-fechado-inline{ display:inline; }
/* Elementos que só existem como "extra" dentro do horário — somem sem aviso quando fechado */
body.fechado .only-aberto{ display:none; }
/* Sem o botão de ligar, o WhatsApp ocupa a barra fixa inteira em vez de ficar
   numa coluna com metade vazia ao lado. */
body.fechado .mobile-bar{ grid-template-columns:1fr; }
/* Fora do horário e sem WhatsApp não sobra nenhum botão: a barra some junto. */
.no-wa body.fechado .mobile-bar{ display:none; }

/* ---------- WhatsApp oculto ---------- */
.no-wa .js-wa{ display:none !important; }
.no-wa .wa-float{ display:none !important; }
.no-wa .mobile-bar{ grid-template-columns:1fr; }
.no-wa .js-consult .icon-fill{ display:none; }
.js-tel-icon{ display:none; }
.no-wa .js-tel-icon{ display:inline-block; }

/* ---------- Mapa de localização ---------- */
.map-card{ background:rgba(255,255,255,.08); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14); border-radius:12px; overflow:hidden; margin-bottom:1rem; }
.map-footer{ padding:.7rem 1.2rem; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; }
.map-route-label{ color:rgba(255,255,255,.7); font-size:.85rem; }
.map-ext{ display:inline-flex; align-items:center; gap:.4rem; color:rgba(255,255,255,.7); font-size:.85rem; text-decoration:underline; }
.map-ext:hover{ color:var(--accent); }
.map-ext .icon-fill{ width:16px; height:16px; flex:none; }
.map-card iframe{ display:block; width:100%; height:260px; border:0; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

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

/* ---------- Páginas de serviço (fase 3) ----------
   Estilo do texto corrido das páginas internas — /conserto-de-aquecedor-a-gas-porto-alegre/
   e as próximas do mesmo molde. Só usa as variáveis já definidas lá em cima,
   então acompanha o tema claro/escuro sem nada a mais. */
.pg-hero{ background:var(--primary); color:#fff; padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem); margin-top:var(--nav-h); }
.pg-hero h1{ color:#fff; max-width:16ch; }
.pg-hero .eyebrow{ color:#fff; opacity:.75; }
.pg-hero-sub{ color:rgba(255,255,255,.88); font-size:1.06rem; line-height:1.7; max-width:62ch; margin-top:1rem; }
.pg-hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; margin-top:1.6rem; }
.pg-hero-cta .btn{ background:var(--accent); color:#fff; }
.pg-hero-cta .btn:hover{ background:var(--accent-dk); }
.pg-hero-hrs{ color:rgba(255,255,255,.75); font-size:.9rem; }

.artigo{ max-width:820px; margin:0 auto; }
.artigo > * + *{ margin-top:1.05rem; }
.artigo h2{ font:700 clamp(1.7rem,3.2vw,2.3rem)/1.15 'Barlow Condensed',sans-serif; color:var(--primary-dk); margin-top:2.8rem; }
.artigo h3{ font:600 1.22rem/1.35 'DM Sans',sans-serif; color:var(--text); margin-top:1.9rem; }
.artigo p{ color:var(--text-md); line-height:1.72; }
.artigo strong{ color:var(--text); }
.artigo ul{ list-style:disc; padding-left:1.3rem; display:flex; flex-direction:column; gap:.55rem; }
.artigo ul li{ color:var(--text-md); line-height:1.65; }
.artigo ul li::marker{ color:var(--accent); }
.artigo a{ text-decoration:underline; }
.artigo h2 + p, .artigo h3 + p, .artigo h3 + ul{ margin-top:.7rem; }
/* O primeiro título já vem depois do espaço da seção: sem isto sobra um vão
   grande entre o topo azul e "Testes simples que podem resolver...". */
.artigo > h2:first-child{ margin-top:0; }
/* A sanfona dos testes caseiros reaproveita o visual da FAQ; só precisa de
   respiro em cima e embaixo, já que vive no meio do texto corrido. */
.artigo .faq-list{ margin:1.4rem auto; }

/* Caixa de destaque — usada no aviso dos cheiros e no fechamento */
.destaque{ background:var(--accent-lt); border-left:4px solid var(--accent); border-radius:0 10px 10px 0; padding:1.2rem 1.4rem; }
.destaque > * + *{ margin-top:.7rem; }
.destaque p{ color:var(--text); }

/* Perguntas do cliente — os blocos abertos, não o acordeão */
.objecao{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.3rem 1.5rem; }
.objecao + .objecao{ margin-top:.9rem; }
.objecao h3{ margin-top:0; color:var(--primary-dk); font-size:1.12rem; }
.objecao > * + *{ margin-top:.7rem; }

/* Fechamento da página */
.pg-fim{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:clamp(1.6rem,4vw,2.4rem); text-align:center; max-width:820px; margin:3rem auto 0; }
.pg-fim h2{ margin-top:0; }
.pg-fim h2 + p{ margin-top:.6rem; color:var(--text-md); }
.pg-fim .btn{ margin-top:1.2rem; }
.pg-fim-hrs{ color:var(--text-lt); font-size:.9rem; margin-top:.9rem; }

@media (max-width:767px){
  .pg-hero{ padding-top:clamp(2rem,8vw,3rem); }
}