/* ═══════════════════════════════════════════════════════════
   DRA. SARAH FERREIRA — "a geometria do sorriso"
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant-italic.woff2') format('woff2');
  font-weight: 300 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost.woff2') format('woff2');
  font-weight: 300 600; font-display: swap;
}

:root {
  --marinho: #121a36;
  --marinho-2: #1c2547;
  --rose: #e8a4a4;
  --rose-claro: #f6dede;
  --perola: #f7f4f1;
  --perola-2: #efe9e4;
  --nude: #e7ddd4;
  --grafite: #5a5462;
  --texto: #3d3947;
  --branco: #fff;
  --wa: #25d366;
  --display: 'Cormorant', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
  --borda: 1px solid rgba(90,84,98,.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--perola);
  color: var(--texto);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.travado { overflow: hidden; }
main { overflow-x: clip; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--rose); color: var(--marinho); }

/* ── tipos base ── */
.kicker {
  font-family: var(--sans); font-weight: 400;
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--grafite); display: flex; align-items: center; gap: 14px;
}
.kicker::before {
  content: ''; width: 42px; height: 1px; background: var(--rose);
  transform-origin: left; display: inline-block;
}
.sec-h2 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
  line-height: 1.06; color: var(--marinho); letter-spacing: -.01em;
  margin: 18px 0 0;
}
.sec-h2 em { font-style: italic; color: var(--rose); }
.sec-sub { max-width: 52ch; margin-top: 20px; color: var(--texto); }

.btn {
  display: inline-block; font-family: var(--sans); font-weight: 400;
  font-size: .84rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--perola); background: var(--marinho);
  padding: 17px 34px; border-radius: 100px; text-decoration: none;
  position: relative; overflow: hidden; transition: color .3s;
}
.btn::after {
  content: ''; position: absolute; inset: 0; background: var(--rose);
  transform: translateY(101%); transition: transform .4s cubic-bezier(.4,0,.2,1); z-index: -1;
}
.btn { z-index: 0; }
.btn:hover { color: var(--marinho); }
.btn:hover::after { transform: translateY(0); }

.btn-linha {
  display: inline-block; font-family: var(--sans); font-weight: 400;
  font-size: .84rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--marinho); text-decoration: none; padding: 17px 4px;
  border-bottom: 1px solid rgba(18,26,54,.35);
  transition: border-color .3s, color .3s;
}
.btn-linha:hover { color: var(--rose); border-color: var(--rose); }

/* ═══════════ PRELOADER ═══════════ */
#preloader {
  position: fixed; inset: 0; z-index: 300; background: var(--perola);
  display: flex; align-items: center; justify-content: center;
}
.pre-in { text-align: center; }
.pre-simbolo { margin: 0 auto; width: 118px; height: auto; }
.pre-nome {
  font-family: var(--sans); font-weight: 300; font-size: .76rem;
  letter-spacing: .48em; color: var(--grafite); margin: 26px 0 0 .48em;
}
.pre-barra { width: 148px; height: 1px; background: rgba(90,84,98,.2); margin: 20px auto 0; }
.pre-barra span { display: block; height: 100%; width: 0; background: var(--rose); }

/* ═══════════ CURSOR ═══════════ */
/* mix-blend-mode: difference → o cursor se inverte sozinho conforme o fundo,
   então nunca some (nem no rodapé escuro, nem no fundo claro) */
#cursor {
  position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none; display: none;
  mix-blend-mode: difference;
}
@media (pointer: fine) {
  #cursor { display: block; }
  body.tem-cursor, body.tem-cursor a, body.tem-cursor button, body.tem-cursor summary { cursor: none; }
}
.cur-ponto, .cur-anel { position: absolute; border-radius: 50%; transform: translate(-50%,-50%); }
.cur-ponto { width: 7px; height: 7px; background: #fff; }
.cur-anel {
  width: 34px; height: 34px; border: 1.5px solid rgba(255,255,255,.85);
  transition: width .28s, height .28s, background .28s, border-color .28s;
}
#cursor.ativo .cur-anel { width: 64px; height: 64px; background: rgba(255,255,255,.28); border-color: transparent; }
#cursor.ativo .cur-ponto { opacity: 0; }

/* ═══════════ TOPO ═══════════ */
/* z-index acima do #menu-overlay (140): sem isso o botão de fechar
   fica preso no contexto de empilhamento do topo e não recebe clique */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 160;
  display: flex; align-items: center; gap: 30px;
  padding: 18px clamp(18px, 4vw, 56px);
  transition: background .4s, padding .4s, box-shadow .4s;
}
#topbar.solido {
  background: rgba(247,244,241,.9); backdrop-filter: blur(14px);
  padding-block: 12px; box-shadow: 0 1px 0 rgba(90,84,98,.12);
}
.tb-logo img { width: clamp(210px, 23vw, 320px); height: auto; }
.tb-nav { display: flex; gap: clamp(18px, 2vw, 30px); margin-left: auto; }
.tb-nav a {
  font-size: .8rem; letter-spacing: .06em; text-decoration: none; color: var(--marinho);
  position: relative; padding-bottom: 3px;
}
.tb-nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--rose); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.tb-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.tb-cta {
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--marinho); border: 1px solid rgba(18,26,54,.3);
  padding: 11px 22px; border-radius: 100px; transition: background .3s, color .3s, border-color .3s;
}
.tb-cta:hover { background: var(--marinho); color: var(--perola); border-color: var(--marinho); }
#menu-btn { display: none; }

#menu-overlay {
  position: fixed; inset: 0; z-index: 140; background: var(--marinho);
  display: flex; align-items: center; justify-content: center;
  clip-path: circle(0% at calc(100% - 46px) 42px);
  transition: clip-path .7s cubic-bezier(.76,0,.24,1);
}
#menu-overlay.aberto { clip-path: circle(150% at calc(100% - 46px) 42px); }
#menu-overlay nav { display: flex; flex-direction: column; gap: 4px; padding: 20px; width: 100%; max-width: 460px; }
#menu-overlay nav a {
  font-family: var(--display); font-weight: 300; font-size: clamp(1.9rem, 8vw, 2.6rem);
  color: var(--perola); text-decoration: none; padding: 8px 0;
  display: flex; align-items: baseline; gap: 16px; opacity: 0;
  border-bottom: 1px solid rgba(247,244,241,.12);
}
#menu-overlay nav a em {
  font-family: var(--sans); font-style: normal; font-size: .62rem;
  letter-spacing: .2em; color: var(--rose);
}
#menu-overlay .mo-cta {
  font-family: var(--sans); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--rose); color: var(--marinho); justify-content: center;
  padding: 16px; border-radius: 100px; margin-top: 24px; border: 0;
}

/* ═══════════ HERO ═══════════ */
#hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 140px clamp(18px, 4vw, 56px) 60px;
  overflow: hidden;
}
.hero-fundo { position: absolute; inset: 0; pointer-events: none; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.hero-glow.g1 { width: 46vw; height: 46vw; background: var(--rose-claro); right: 6%; top: 4%; }
.hero-glow.g2 { width: 36vw; height: 36vw; background: var(--nude); left: -6%; bottom: 2%; opacity: .6; }
.hero-linhas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-linhas .hl { fill: none; stroke: rgba(90,84,98,.22); stroke-width: 1; }
.hero-linhas .hc { fill: none; stroke: rgba(232,164,164,.4); stroke-width: 1; }

.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  gap: clamp(20px, 4vw, 60px); max-width: 1320px; margin: 0 auto; width: 100%;
}
.hero-h1 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2.9rem, 7.2vw, 6.2rem); line-height: 1.02;
  color: var(--marinho); letter-spacing: -.02em; margin: 22px 0 0;
}
.hero-h1 .l { display: block; overflow: hidden; }
.hero-h1 .l > * , .hero-h1 .l { will-change: transform; }
.hero-h1 em { font-style: italic; color: var(--rose); }
.hero-sub { max-width: 46ch; margin-top: 26px; font-size: 1.05rem; }
.hero-btns { display: flex; align-items: center; gap: 26px; margin-top: 38px; flex-wrap: wrap; }
.hero-cro {
  margin-top: 34px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grafite);
}

.hero-foto { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.hf-arco {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 460px); height: 88%;
  background: linear-gradient(170deg, var(--branco), var(--nude));
  border-radius: 300px 300px 32px 32px;
  box-shadow: 0 40px 80px rgba(18,26,54,.1);
}
/* só a foto dela — o símbolo é outro img dentro do mesmo bloco */
.hero-foto .hf-dra {
  position: relative; z-index: 2;
  height: clamp(420px, 72vh, 760px); width: auto; object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(18,26,54,.22));
}
.hf-flut {
  position: absolute; z-index: 3; border-radius: 50%;
  backdrop-filter: blur(3px);
}
.hf-flut.f1 {
  width: 116px; height: 116px; left: -2%; top: 22%;
  background: rgba(232,164,164,.32); border: 1px solid rgba(232,164,164,.5);
}
.hf-flut.f2 {
  width: 66px; height: 66px; right: 2%; bottom: 22%;
  background: rgba(18,26,54,.07); border: 1px solid rgba(18,26,54,.14);
}
.hf-simb { position: absolute; z-index: 4; right: 4%; top: 6%; width: 92px; height: auto; opacity: .85; }

.hero-rolar {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: .66rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--grafite); text-decoration: none; display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
.hero-rolar span {
  width: 1px; height: 46px; background: linear-gradient(var(--rose), transparent);
  animation: desce 2s ease-in-out infinite;
}
@keyframes desce { 0%,100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }

/* ═══════════ CREDENCIAIS ═══════════ */
#credenciais {
  background: var(--marinho); color: var(--perola);
  padding: 22px 0; overflow: hidden;
}
.cred-track { display: flex; white-space: nowrap; width: max-content; animation: corre 34s linear infinite; }
.cred-track span {
  font-family: var(--display); font-size: clamp(1.05rem, 2vw, 1.5rem); font-style: italic;
  font-weight: 300; padding: 0 22px;
}
.cred-track i { color: var(--rose); font-style: normal; align-self: center; }
@keyframes corre { to { transform: translateX(-50%); } }

/* ═══════════ ONDAS EM CAMADAS (estilo enameldentistry) ═══════════ */
.onda { line-height: 0; position: relative; }
.onda svg { width: 100%; height: clamp(110px, 13vw, 210px); display: block; }
.onda .o-tracos path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; }

/* de cima (escuro) para baixo (pérola) */
.onda-escura { background: var(--marinho); }
.onda-escura .o-tras { fill: #ded6d0; }
.onda-escura .o-frente { fill: var(--perola); }
.onda-escura .o-tracos path { stroke: rgba(255,255,255,.95); }

/* pérola → pérola-2 */
.onda-clara { background: var(--perola); }
.onda-clara .o-tras { fill: var(--nude); }
.onda-clara .o-frente { fill: var(--perola-2); }
.onda-clara .o-tracos path { stroke: rgba(255,255,255,.9); }

/* pérola → rosé claro (antes da galeria) */
.onda-rose { background: var(--perola); }
.onda-rose .o-tras { fill: var(--rose-claro); }
.onda-rose .o-frente { fill: var(--perola); }
.onda-rose .o-tracos path { stroke: rgba(255,255,255,.95); }

/* ═══════════ SEÇÕES ═══════════ */
section { padding: clamp(80px, 11vw, 160px) clamp(18px, 4vw, 56px); }
#credenciais, #ambiente { padding-inline: 0; }
.sec-head { max-width: 1320px; margin: 0 auto clamp(40px, 6vw, 76px); }

/* ── TRATAMENTOS ── */
#tratamentos { background: var(--perola); }
.trat-grid {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(90,84,98,.16);
  border: var(--borda); max-width: 1320px; margin: 0 auto;
}
.trat {
  background: var(--perola); padding: clamp(26px, 3vw, 42px) clamp(20px, 2.4vw, 34px) clamp(30px, 3.4vw, 46px);
  position: relative; transition: background .45s;
  min-height: 300px; display: flex; flex-direction: column;
}
.trat:hover { background: var(--branco); }
.trat-num {
  font-size: .68rem; letter-spacing: .2em; color: var(--rose);
}
.trat-ic { width: 54px; height: 54px; margin: 22px 0 20px; }
.trat-ic .d { stroke: var(--marinho); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trat h3 {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.32rem, 2vw, 1.62rem);
  color: var(--marinho); line-height: 1.16; margin-bottom: 12px;
}
.trat p { font-size: .95rem; color: var(--texto); opacity: .9; }
.trat-selo {
  display: inline-block; margin-top: 16px; align-self: flex-start;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--marinho); background: var(--rose-claro);
  border-radius: 100px; padding: 7px 14px;
}
.trat-cta {
  background: var(--marinho); color: var(--perola);
  align-items: flex-start; justify-content: center; gap: 20px;
}
.trat-cta p { font-family: var(--display); font-size: 1.5rem; color: var(--perola); font-style: italic; }
.trat-cta .btn { background: var(--rose); color: var(--marinho); }
.trat-cta .btn::after { background: var(--perola); }

/* ── TECNOLOGIA ── */
#tecnologia { background: var(--perola-2); }
.tec-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 84px);
  align-items: center; max-width: 1320px; margin: 0 auto;
}
.tec-foto { border-radius: 400px 400px 24px 24px; overflow: hidden; }
.tec-foto img { width: 100%; height: clamp(420px, 60vh, 660px); object-fit: cover; }
.tec-lista { list-style: none; margin-top: 40px; }
.tec-lista li {
  display: grid; grid-template-columns: 190px 1fr; gap: 20px;
  padding: 18px 0; border-top: var(--borda); align-items: baseline;
}
.tec-lista li:last-child { border-bottom: var(--borda); }
.tec-lista b { font-family: var(--display); font-weight: 500; font-size: 1.22rem; color: var(--marinho); }
.tec-lista span { font-size: .93rem; opacity: .88; }

/* ── SOBRE ── */
#sobre { background: var(--perola-2); }
.sobre-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px);
  align-items: center; max-width: 1320px; margin: 0 auto;
}
.sobre-txt p { margin-top: 22px; max-width: 50ch; }
.sobre-txt b { font-weight: 500; color: var(--marinho); }
.sobre-nums { display: flex; gap: clamp(24px, 4vw, 54px); margin-top: 44px; flex-wrap: wrap; }
.sobre-nums div { display: flex; flex-direction: column; }
.sobre-nums b {
  font-family: var(--display); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--rose); line-height: 1;
}
.sobre-nums span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grafite); margin-top: 6px; }
.sobre-fotos { position: relative; padding-bottom: 60px; }
.sobre-fotos figure { overflow: hidden; }
.sf-1 { border-radius: 260px 260px 20px 20px; }
.sf-1 img { width: 100%; height: clamp(420px, 62vh, 680px); object-fit: cover; }
.sf-2 {
  position: absolute; right: -4%; bottom: 0; width: 46%;
  border-radius: 18px; box-shadow: 0 26px 50px rgba(18,26,54,.18);
  border: 6px solid var(--perola-2);
}
.sf-2 img { width: 100%; height: 220px; object-fit: cover; }

/* ── CONVÊNIOS ── */
#convenios { background: var(--perola); text-align: center; }
.conv-in { max-width: 1000px; margin: 0 auto; }
#convenios .kicker { justify-content: center; }
.conv-lista {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; margin-top: 44px;
}
.conv-lista li {
  border: var(--borda); border-radius: 100px; padding: 13px 28px;
  font-size: .92rem; color: var(--marinho); background: var(--branco);
  transition: transform .3s, border-color .3s, color .3s;
}
.conv-lista li:hover { transform: translateY(-4px); border-color: var(--rose); color: var(--rose); }
.conv-obs { margin-top: 26px; font-size: .86rem; color: var(--grafite); }

/* ── AMBIENTE ── */
#ambiente { background: var(--perola); padding-block: clamp(20px, 4vw, 40px); }
.amb-faixa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.amb-faixa figure { overflow: hidden; border-radius: 12px; }
.amb-faixa img {
  width: 100%; height: clamp(220px, 34vh, 400px); object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.amb-faixa figure:hover img { transform: scale(1.06); }

/* ── DÚVIDAS ── */
#duvidas { background: var(--perola-2); }
.duv-grid {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 80px);
  max-width: 1320px; margin: 0 auto; align-items: start;
}
.duv-lista details {
  border-top: var(--borda); padding: 4px 0;
}
.duv-lista details:last-child { border-bottom: var(--borda); }
.duv-lista summary {
  list-style: none; cursor: pointer; padding: 24px 40px 24px 0; position: relative;
  font-family: var(--display); font-size: clamp(1.18rem, 2vw, 1.5rem);
  font-weight: 400; color: var(--marinho); line-height: 1.3;
}
.duv-lista summary::-webkit-details-marker { display: none; }
.duv-lista summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px;
  background:
    linear-gradient(var(--rose),var(--rose)) center/14px 1px no-repeat,
    linear-gradient(var(--rose),var(--rose)) center/1px 14px no-repeat;
  transform: translateY(-50%); transition: transform .35s;
}
.duv-lista details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.duv-lista details p { padding: 0 40px 26px 0; max-width: 62ch; }

/* ── CONTATO ── */
#contato { background: var(--perola); }
.cont-grid {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 76px);
  max-width: 1320px; margin: 0 auto; align-items: center;
}
.cont-txt address {
  font-style: normal; font-family: var(--display); font-size: 1.45rem;
  color: var(--marinho); line-height: 1.5; margin-top: 26px;
}
.cont-dados { margin-top: 32px; }
.cont-dados div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 13px 0; border-top: var(--borda); }
.cont-dados div:last-child { border-bottom: var(--borda); }
.cont-dados dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grafite); padding-top: 4px; }
.cont-dados dd a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.cont-dados dd a:hover { color: var(--rose); border-color: var(--rose); }
.cont-btns { display: flex; align-items: center; gap: 24px; margin-top: 34px; flex-wrap: wrap; }
.cont-mapa { border-radius: 20px; overflow: hidden; box-shadow: 0 26px 60px rgba(18,26,54,.14); }
.cont-mapa iframe { width: 100%; height: clamp(340px, 52vh, 540px); border: 0; display: block; filter: saturate(.75) contrast(1.02); }

/* ═══════════ RODAPÉ ═══════════ */
#rodape { background: var(--marinho); color: var(--perola); padding: clamp(60px, 8vw, 100px) clamp(18px, 4vw, 56px) 30px; }
.rd-top {
  max-width: 1320px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 30px; flex-wrap: wrap;
  padding-bottom: 40px; border-bottom: 1px solid rgba(247,244,241,.14);
}
.rd-logo { width: 260px; filter: brightness(0) invert(1) opacity(.9); }
.rd-frase { font-family: var(--display); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--rose); }
.rd-cols {
  max-width: 1320px; margin: 44px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.rd-tit { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rose); margin-bottom: 12px; }
.rd-cols p { font-size: .92rem; opacity: .85; line-height: 1.9; }
.rd-cols a { text-decoration: none; border-bottom: 1px solid rgba(247,244,241,.25); }
.rd-cols a:hover { color: var(--rose); border-color: var(--rose); }
.rd-cols b { font-weight: 500; color: var(--perola); }
.rd-fim {
  max-width: 1320px; margin: 50px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(247,244,241,.14);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .82rem; opacity: .8;
}
.rd-fim a { text-decoration: none; }
.rd-fim a:hover { color: var(--rose); }
.rd-credito a { border-bottom: 1px solid rgba(247,244,241,.3); }

/* ═══════════ FLUTUANTES ═══════════ */
#wa-flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 110;
  display: flex; align-items: center; gap: 10px;
  background: var(--wa); color: #fff; text-decoration: none;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 20px; border-radius: 100px;
  box-shadow: 0 12px 30px rgba(18,26,54,.22);
  transition: transform .3s;
}
#wa-flutuante:hover { transform: translateY(-3px) scale(1.02); }
#topo-btn {
  position: fixed; right: 20px; bottom: 82px; z-index: 110;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--branco); color: var(--marinho); border: var(--borda);
  cursor: pointer; font-size: 1rem;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .3s, transform .3s, background .3s, color .3s;
}
#topo-btn.visivel { opacity: 1; pointer-events: auto; transform: none; }
#topo-btn:hover { background: var(--marinho); color: var(--perola); }

/* animações base (só com JS) */
html.js [data-anim] { opacity: 0; }
html.js [data-mascara] { clip-path: inset(0 0 100% 0); }
html.js .trat { opacity: 0; }
html.js.rm [data-anim], html.js.rm .trat { opacity: 1; }
html.js.rm [data-mascara] { clip-path: none; }

/* ═══════════ MOBILE ═══════════ */
@media (max-width: 1000px) {
  .trat-grid { grid-template-columns: repeat(2, 1fr); }
  .tec-grid, .sobre-grid, .duv-grid, .cont-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .tb-nav, .tb-cta { display: none; }
  #menu-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    margin-left: auto; width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
    position: relative; z-index: 150;
  }
  #menu-btn span { display: block; width: 26px; height: 1.5px; background: var(--marinho); transition: transform .3s, background .3s, opacity .3s; }
  /* com o menu aberto, o logo do topo precisa aparecer sobre o fundo escuro */
  #topbar.menu-aberto { background: transparent; box-shadow: none; }
  #topbar.menu-aberto .tb-logo img { filter: brightness(0) invert(1); }
  #menu-btn.aberto span { background: var(--perola); }
  #menu-btn.aberto span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
  #menu-btn.aberto span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

  #hero { padding-top: 110px; min-height: auto; }
  .hero-grid { gap: 18px; }
  .hero-foto { order: 2; margin-top: 10px; }
  .hero-foto .hf-dra { height: clamp(340px, 52vh, 480px); }
  .hf-arco { width: min(88%, 340px); }
  .hf-flut.f1 { width: 76px; height: 76px; }
  .hf-flut.f2 { width: 46px; height: 46px; }
  .hf-simb { width: 58px; }
  .hero-rolar { display: none; }
  /* em coluna, o link sublinhado não pode esticar até a borda */
  .hero-btns, .cont-btns { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero-btns .btn, .cont-btns .btn { width: 100%; text-align: center; }

  .trat-grid { grid-template-columns: 1fr; }
  .trat { min-height: 0; }
  .tec-foto { border-radius: 240px 240px 18px 18px; }
  .tec-foto img { height: clamp(320px, 46vh, 460px); }
  .tec-lista li { grid-template-columns: 1fr; gap: 4px; }
  .sobre-fotos { padding-bottom: 40px; }
  .sf-2 { width: 54%; right: 0; }
  .sf-2 img { height: 150px; }
  .amb-faixa { grid-template-columns: repeat(2, 1fr); }
  .rd-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  #wa-flutuante span { display: none; }
  #wa-flutuante { padding: 15px; }
}
@media (max-width: 520px) {
  .rd-cols { grid-template-columns: 1fr; }
  .amb-faixa { grid-template-columns: 1fr 1fr; gap: 6px; }
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .cred-track { animation: none; }
  .hero-rolar span { animation: none; }
  html { scroll-behavior: auto; }
}