/* =========================================================
   Dr. Tarcísio Andrade — Urologia | Palmas–TO
   Direção: clínico premium. Off-white + azul de marca + navy.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#0A1E3C;
  --ink-2:#0E2A50;
  --paper:#F7F9FB;
  --surface:#FFFFFF;
  --brand:#0B5FA5;
  --brand-dk:#094B83;
  --signal:#00A0D8;
  --muted:#5A6B80;
  --line:#DCE5EE;
  --line-dk:rgba(255,255,255,.14);
  --wa:#128C4A;
  --wa-dk:#0F7A40;

  --font-display:'Archivo','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter Tight','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --wrap:1200px;
  --gutter:clamp(1.15rem,4.2vw,3rem);
  --rhythm:clamp(3.5rem,8vw,7.5rem);
  --radius:18px;
  --radius-lg:26px;
  --nav-h:64px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-sm:0 1px 2px rgba(10,30,60,.05),0 4px 14px rgba(10,30,60,.05);
  --shadow-md:0 12px 34px rgba(10,30,60,.10);
  --shadow-lg:0 26px 70px rgba(10,30,60,.16);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-wrap:break-word;
}
img,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); line-height:1.08; font-weight:700; letter-spacing:-.02em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--signal); outline-offset:3px; border-radius:4px}
::selection{background:var(--signal); color:#fff}

/* ---------- 3. Layout primitives ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--rhythm); position:relative}
.section--tight{padding-block:calc(var(--rhythm) * .62)}

/* faixa branca */
.band-soft{background:var(--surface); border-block:1px solid var(--line)}
.band-soft .svc{background:var(--paper)}

/* faixas escuras */
.band-dark{background:var(--ink); color:#EAF2FA}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark .eyebrow{color:var(--signal)}
.band-dark .lede{color:#B9CBDE}

/* ---------- 4. Tipografia ---------- */
.eyebrow{
  font-family:var(--font-display); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.22em;
  font-stretch:88%; color:var(--brand);
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{content:""; width:26px; height:1px; background:currentColor; flex:none}

.h-xl{font-size:clamp(2.5rem,1.4rem + 4.6vw,4.75rem); font-stretch:108%; letter-spacing:-.032em}
.h-lg{font-size:clamp(1.95rem,1.35rem + 2.5vw,3.15rem); font-stretch:105%; letter-spacing:-.028em}
.h-md{font-size:clamp(1.2rem,1.08rem + .5vw,1.45rem); letter-spacing:-.015em}

.lede{color:var(--muted); font-size:clamp(1.05rem,1rem + .35vw,1.22rem); line-height:1.6; max-width:56ch}
.data{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em; font-variant-numeric:tabular-nums}

.section-head{max-width:60ch; margin-bottom:clamp(2.5rem,5vw,3.75rem); display:grid; gap:1.1rem}
.section-head--center{margin-inline:auto; text-align:center; justify-items:center}
.section-head--center .eyebrow{justify-content:center}

/* ---------- 5. Botões ---------- */
/* Paleta única de marca: azul institucional. Nada de verde solto fora do sistema. */
.btn{
  --bg:var(--brand); --bg-h:var(--brand-dk); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:50px; padding:.8rem 1.5rem; border-radius:999px;
  background:var(--bg); color:var(--fg); border:1.5px solid var(--bd);
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(.92rem,.89rem + .12vw,.98rem); letter-spacing:-.005em;
  line-height:1.2; text-align:center;
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{width:19px; height:19px; flex:none}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); background:var(--bg-h)}
.btn:active{transform:translateY(0)}

/* primário (era o verde do WhatsApp) — agora azul de marca */
.btn--wa{--bg:var(--brand); --bg-h:var(--brand-dk); --fg:#fff}

/* secundário: contorno */
.btn--ghost{--bg:transparent; --bg-h:var(--surface); --fg:var(--ink); --bd:var(--line); box-shadow:none}
.btn--ghost:hover{color:var(--brand); border-color:var(--brand); box-shadow:var(--shadow-sm)}

/* sobre fundo escuro: o primário inverte para branco (contraste 9:1) */
.band-dark .btn--wa,.band-dark .btn:not(.btn--ghost){--bg:#fff; --bg-h:#E4EFF8; --fg:var(--brand-dk)}
.band-dark .btn--ghost{--fg:#fff; --bg-h:rgba(255,255,255,.09); --bd:var(--line-dk)}
.band-dark .btn--ghost:hover{color:#fff; border-color:var(--signal)}

.btn--lg{min-height:58px; padding:1rem 2rem; font-size:clamp(.98rem,.94rem + .2vw,1.05rem)}
.btn--block{width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:.85rem}

/* no celular os CTAs ocupam a largura toda — alvo de toque confortável */
@media (max-width:560px){
  .btn-row{width:100%}
  .btn-row .btn{flex:1 1 100%}
}

/* ---------- 6. Navegação ---------- */
.nav{position:sticky; top:0; z-index:80; background:rgba(247,249,251,.82); backdrop-filter:blur(14px) saturate(1.6); -webkit-backdrop-filter:blur(14px) saturate(1.6); border-bottom:1px solid transparent; transition:border-color .3s var(--ease), background .3s var(--ease)}
.nav.is-stuck{border-bottom-color:var(--line); background:rgba(247,249,251,.94)}

/* três trilhas: marca | links centrados | ação. A ação fica sempre ancorada à direita. */
.nav__inner{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; min-height:var(--nav-h)}

.brand{display:flex; align-items:center; gap:.7rem; flex:none; min-width:0; min-height:44px}
.brand__mark{width:32px; height:auto; flex:none}
.brand__txt{display:grid; gap:.1rem; line-height:1; min-width:0}
.brand__name{font-family:var(--font-display); font-weight:700; font-size:clamp(.92rem,.88rem + .18vw,1.02rem); letter-spacing:-.02em; color:var(--ink); white-space:nowrap}
.brand__role{font-family:var(--font-mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); white-space:nowrap}

.nav__links{display:flex; align-items:center; justify-content:center; gap:.15rem; justify-self:center; min-width:0}
.nav__links a{padding:.5rem .7rem; border-radius:999px; font-size:clamp(.84rem,.78rem + .18vw,.93rem); font-weight:500; color:var(--muted); white-space:nowrap; transition:color .2s var(--ease), background .2s var(--ease)}
.nav__links a:hover{color:var(--ink); background:rgba(11,95,165,.07)}

.nav__cta{display:flex; align-items:center; gap:.5rem; justify-self:end}
.nav__cta .btn{min-height:44px; padding:.6rem 1.15rem; font-size:.9rem; white-space:nowrap}

/* variante só-ícone, usada no celular para o CTA nunca sumir do topo */
.nav__cta .btn--icon{display:none; min-height:44px; width:44px; padding:0; gap:0; border-radius:14px; flex:none}
.btn--icon svg{width:21px; height:21px; max-width:none}

.burger{display:none; width:44px; height:44px; border-radius:14px; border:1px solid var(--line); background:var(--surface); flex-direction:column; align-items:center; justify-content:center; flex:none}
.burger span{display:block; width:19px; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .34s var(--ease), opacity .2s var(--ease)}
.burger span + span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* painel mobile */
.menu{position:fixed; inset:0; z-index:79; background:var(--paper); padding:calc(var(--nav-h) + 1.5rem) var(--gutter) 2.5rem; display:grid; align-content:start; gap:.25rem; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; overflow-y:auto; overscroll-behavior:contain}
.menu.is-open{opacity:1; visibility:visible; transform:none}
.menu a{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.95rem .25rem; border-bottom:1px solid var(--line); font-family:var(--font-display); font-size:clamp(1.15rem,1rem + .8vw,1.4rem); font-weight:600; letter-spacing:-.02em}
.menu a span{font-family:var(--font-mono); font-size:.7rem; color:var(--brand)}
.menu__foot{margin-top:1.75rem; display:grid; gap:1rem; justify-items:stretch}
.menu__foot .btn{width:100%}
.menu__foot .data{color:var(--muted); text-align:center}
body.is-locked{overflow:hidden}

/* desktop largo: nav completa */
@media (min-width:980px){
  :root{--nav-h:74px}
  .menu{display:none}
}

/* desktop estreito: 6 links ainda cabem entre marca e CTA — compacta o espaçamento */
@media (min-width:980px) and (max-width:1119px){
  .nav__links{gap:0}
  .nav__links a{padding-inline:.5rem; font-size:.84rem}
}

/* tablet e desktop estreito: colapsa os links, mantém o CTA no topo */
@media (max-width:979px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav__inner{grid-template-columns:auto 1fr auto}
}

/* faixa intermediária: CTA com texto ainda cabe ao lado do burger */
@media (min-width:620px) and (max-width:979px){
  :root{--nav-h:70px}
}

/* celular: CTA vira ícone para não espremer a marca */
@media (max-width:619px){
  .nav__cta .btn--label{display:none}
  .nav__cta .btn--icon{display:inline-flex}
  .brand__role{display:none}
}

/* ---------- 7. Hero ---------- */
.hero{position:relative; padding-block:clamp(3rem,6vw,5.25rem) clamp(3.5rem,6vw,5.5rem); overflow:hidden}
.hero__glow{position:absolute; top:-18%; right:-8%; width:min(760px,82vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(0,160,216,.20), rgba(0,160,216,0) 66%); pointer-events:none}
.hero__grid{position:relative; display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(2rem,4vw,3.5rem); align-items:center}
.hero__copy{display:grid; gap:1.6rem; justify-items:start}
.hero h1{font-size:clamp(2.05rem,1.35rem + 2.5vw,3.5rem); font-stretch:106%; letter-spacing:-.032em; line-height:1.06; max-width:15ch}
.hero h1 em{font-style:normal; color:var(--brand); display:block}
.hero .lede{max-width:46ch}
.hero__meta{display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; color:var(--muted); padding-top:.35rem}
.hero__meta span{display:flex; align-items:center; gap:.45rem}
.hero__meta span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--signal); flex:none}

.hero__media{position:relative}
.hero__photo{position:relative; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(170deg,#fff 0%,#EAF3FA 62%,#DCEBF6 100%); box-shadow:var(--shadow-lg); aspect-ratio:4/5}
.hero__photo img{width:100%; height:100%; object-fit:contain; object-position:50% 100%}
.hero__badge{
  position:absolute; left:clamp(-14px,-1vw,0px); bottom:26px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:.7rem 1rem; box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:.75rem; max-width:min(310px,92%);
}
.hero__badge-selo{width:clamp(42px,5vw,56px); height:auto; flex:none}
.hero__badge-txt{display:grid; gap:.15rem; min-width:0}
.hero__badge b{font-family:var(--font-display); font-size:clamp(.82rem,.78rem + .14vw,.92rem); letter-spacing:-.01em; line-height:1.25}
.hero__badge-txt > span{font-family:var(--font-mono); font-size:clamp(.6rem,.57rem + .1vw,.68rem); color:var(--muted); letter-spacing:.04em; line-height:1.35}

@media (max-width:1023px){
  .hero__grid{grid-template-columns:1fr; gap:clamp(1.75rem,5vw,2.5rem)}
  .hero h1{max-width:20ch}
  .hero__copy{justify-items:start}
  .hero__media{max-width:420px; width:100%; margin-inline:auto}
  .hero__photo{aspect-ratio:4/5}
  .hero__badge{left:0}
}
@media (max-width:560px){
  .hero__meta{gap:.4rem 1rem; font-size:.72rem}
  .hero__badge{bottom:16px; padding:.6rem .8rem; gap:.6rem}
}

/* ---------- 8. Barra de credenciais ---------- */
.creds{border-block:1px solid var(--line); background:var(--surface)}
.creds__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.creds__item{background:var(--surface); padding:1.55rem 1.35rem; display:grid; gap:.3rem; align-content:center}
.creds__item b{font-family:var(--font-display); font-size:1.02rem; letter-spacing:-.015em}
.creds__item span{font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted)}
@media (max-width:900px){.creds__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.creds__item{padding:1.25rem 1.1rem}}

/* ---------- 9. Sinais (pain points) ---------- */
.signs{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
@media (max-width:980px){.signs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.signs{grid-template-columns:1fr}}
@media (max-width:560px){.sign{padding:1.45rem 1.25rem}
  .signs-note{padding:1.15rem 1.2rem; gap:.8rem}
  .signs-note p{font-size:.95rem}}
.sign{background:var(--surface); padding:1.7rem 1.5rem; display:grid; gap:.55rem; align-content:start; transition:background .25s var(--ease)}
.sign:hover{background:#FBFDFF}
.sign__ico{width:26px; height:26px; color:var(--brand)}
.sign b{font-family:var(--font-display); font-size:1.02rem; letter-spacing:-.015em}
.sign p{color:var(--muted); font-size:.95rem; line-height:1.55}
.signs-note{margin-top:1.9rem; display:flex; gap:1rem; align-items:flex-start; padding:1.3rem 1.5rem; border-radius:var(--radius); background:linear-gradient(120deg,rgba(11,95,165,.07),rgba(0,160,216,.05)); border:1px solid rgba(11,95,165,.14)}
.signs-note svg{width:22px; height:22px; color:var(--brand); flex:none; margin-top:2px}
.signs-note p{font-size:1rem; line-height:1.6}

/* ---------- 10. Serviços ---------- */
.svcs{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:1.15rem}
.svc{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.4rem,3.4vw,1.85rem) clamp(1.25rem,3vw,1.65rem); display:grid; gap:.75rem; align-content:start; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease)}
.svc::after{content:""; position:absolute; inset:0 auto auto 0; width:100%; height:3px; background:linear-gradient(90deg,var(--brand),var(--signal)); transform:scaleX(0); transform-origin:0 50%; transition:transform .4s var(--ease)}
.svc:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent}
.svc:hover::after{transform:scaleX(1)}
.svc__ico{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(150deg,rgba(11,95,165,.1),rgba(0,160,216,.13)); color:var(--brand)}
.svc__ico svg{width:24px; height:24px}
.svc h3{font-size:1.16rem; letter-spacing:-.02em}
.svc p{color:var(--muted); font-size:.96rem; line-height:1.6}

/* CTA leve dentro de card: caminho de conversão sem competir com os botões sólidos */
.card-cta{
  margin-top:.4rem; justify-self:start; min-height:44px;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600;
  font-size:.9rem; letter-spacing:-.01em; color:var(--brand);
  transition:color .25s var(--ease);
}
.card-cta span{border-bottom:1px solid transparent; transition:border-color .25s var(--ease)}
.card-cta svg{width:16px; height:16px; flex:none; transition:transform .25s var(--ease)}
.card-cta:hover{color:var(--brand-dk)}
.card-cta:hover span{border-bottom-color:currentColor}
.card-cta:hover svg{transform:translateX(3px)}

/* ---------- 11. Cirurgia robótica ---------- */
.robo__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.25rem,5vw,4.5rem); align-items:center}
.robo__copy{display:grid; gap:1.35rem}
.robo__copy p{color:#B9CBDE; font-size:1.03rem; line-height:1.68}
.robo__copy strong{color:#fff; font-weight:600}
.robo__gains{display:grid; gap:1px; background:var(--line-dk); border:1px solid var(--line-dk); border-radius:var(--radius); overflow:hidden}
.gain{background:rgba(255,255,255,.035); padding:1.5rem 1.5rem; display:grid; gap:.35rem; transition:background .25s var(--ease)}
.gain:hover{background:rgba(255,255,255,.075)}
.gain b{font-family:var(--font-display); font-size:1.06rem; color:#fff; letter-spacing:-.015em; display:flex; align-items:center; gap:.7rem}
.gain b svg{width:20px; height:20px; color:var(--signal); flex:none}
.gain p{color:#9FB6CD; font-size:.94rem; line-height:1.55; padding-left:1.9rem}
@media (max-width:980px){.robo__grid{grid-template-columns:1fr}}
@media (max-width:560px){.gain{padding:1.25rem 1.2rem}
  .gain p{padding-left:0}}

/* ---------- 12. ASSINATURA — tratar / preservar ---------- */
.tp__head{display:grid; grid-template-columns:1fr clamp(48px,7vw,104px) 1fr; gap:1.5rem; align-items:center; padding-bottom:1rem; margin-bottom:.5rem}
.tp__head span{font-family:var(--font-display); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.24em; font-stretch:88%; color:var(--muted)}
.tp__head span:last-child{text-align:right; color:var(--brand)}
.tp__head i{display:block; width:100%; height:1px; background:var(--line)}

.tp__list{display:grid; border-top:1px solid var(--line)}
.tp{display:grid; grid-template-columns:1fr clamp(48px,7vw,104px) 1fr; gap:1.5rem; align-items:center; padding-block:1.9rem; border-bottom:1px solid var(--line)}
/* linha-cabeçalho da indicação: condição à esquerda, CTA à direita — não desfaz
   a simetria tratar/preservar que é a assinatura da seção */
.tp__top{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.3rem 1.25rem; margin-bottom:-.7rem}
.tp__cond{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--brand)}
.tp__top .card-cta{margin-top:0}
.tp__side{display:grid; gap:.3rem}
.tp__side b{font-family:var(--font-display); font-size:clamp(1.08rem,1rem + .45vw,1.35rem); letter-spacing:-.02em}
.tp__side p{color:var(--muted); font-size:.94rem; line-height:1.5}
.tp__side--keep{text-align:right}
.tp__side--keep b{color:var(--brand)}

/* o calibre */
.caliper{width:100%; height:22px; flex:none; color:var(--line); overflow:visible}
.caliper line{stroke:currentColor; stroke-width:1.4; stroke-linecap:round}
.caliper .bar{stroke:var(--signal); stroke-dasharray:var(--len,90); stroke-dashoffset:var(--len,90); transition:stroke-dashoffset .9s var(--ease) .15s}
.tp.is-in .caliper .bar{stroke-dashoffset:0}

@media (max-width:760px){
  .tp__head{display:none}
  .tp{grid-template-columns:1fr; gap:.85rem; padding-block:1.6rem}
  .tp__side--keep{text-align:left; padding-left:1.15rem; border-left:2px solid var(--signal)}
  .tp__side--treat{padding-left:1.15rem; border-left:2px solid var(--line)}
  .tp__side::before{content:attr(data-lbl); font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); display:block}
  .caliper{display:none}
}

/* ---------- 13. Diferenciais ---------- */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr)); gap:1.15rem}
.pillar{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.35rem,3.2vw,1.75rem) clamp(1.2rem,2.8vw,1.5rem); display:grid; gap:.6rem; align-content:start; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.pillar:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.pillar__ico{width:42px; height:42px; color:var(--brand)}
.pillar b{font-family:var(--font-display); font-size:1.06rem; letter-spacing:-.018em}
.pillar p{color:var(--muted); font-size:.94rem; line-height:1.55}

.diff__grid{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(2rem,4.5vw,3.5rem); align-items:center}
.diff__grid .pillars{grid-template-columns:repeat(2,1fr)}
.diff__photo{border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-lg); background:linear-gradient(170deg,#fff 0%,#EAF3FA 62%,#DCEBF6 100%)}
.diff__photo img{width:100%; height:100%; object-fit:contain; object-position:50% 100%}
@media (max-width:980px){
  .diff__grid{grid-template-columns:1fr}
  .diff__photo{max-width:380px; width:100%; margin-inline:auto; order:-1}
}
@media (max-width:600px){.diff__grid .pillars{grid-template-columns:1fr}}

/* ---------- 14. Jornada ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr)); gap:clamp(1.15rem,3vw,1.5rem); counter-reset:s}
.step{position:relative; padding-top:2.4rem; display:grid; gap:.5rem; align-content:start}
.step::before{counter-increment:s; content:"0" counter(s); position:absolute; top:0; left:0; font-family:var(--font-mono); font-size:.78rem; color:var(--brand); letter-spacing:.08em}
.step::after{content:""; position:absolute; top:1.55rem; left:0; right:1.5rem; height:1px; background:var(--line)}
.step:last-child::after{right:0}
.step b{font-family:var(--font-display); font-size:clamp(1.02rem,.98rem + .2vw,1.1rem); letter-spacing:-.02em}
.step p{color:var(--muted); font-size:.94rem; line-height:1.55}
@media (min-width:600px) and (max-width:980px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2n)::after{right:0}
}

/* ---------- 15. Sobre ---------- */
.about__grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.25rem,5vw,4.5rem); align-items:center}
.about__media{position:relative}
.about__photo{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/5; background:linear-gradient(170deg,#fff 0%,#EAF3FA 62%,#DCEBF6 100%)}
.about__photo img{width:100%; height:100%; object-fit:contain; object-position:50% 100%}
.seal{position:absolute; right:clamp(-18px,-1.4vw,-6px); bottom:clamp(-20px,-1.6vw,-8px); width:clamp(88px,12vw,124px); filter:drop-shadow(0 12px 26px rgba(10,30,60,.26))}
.seal img{width:100%; height:auto}
.about__cred{
  position:absolute; z-index:2; left:clamp(12px,2vw,18px); bottom:clamp(12px,2vw,18px);
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.52rem .9rem; border-radius:999px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px) saturate(1.5); backdrop-filter:blur(10px) saturate(1.5);
  border:1px solid rgba(255,255,255,.9); box-shadow:0 6px 20px rgba(10,30,60,.14);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
.about__cred i{width:5px; height:5px; border-radius:50%; background:var(--brand); flex:none}
.about__copy{display:grid; gap:1.3rem; justify-items:start}
.about__copy p{color:var(--muted); font-size:1.04rem; line-height:1.68}
.about__copy strong{color:var(--ink); font-weight:600}
.about__tags{display:flex; flex-wrap:wrap; gap:.5rem}
.tag{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); background:rgba(11,95,165,.08); border:1px solid rgba(11,95,165,.16); padding:.42rem .8rem; border-radius:999px}
@media (max-width:980px){
  .about__grid{grid-template-columns:1fr}
  .about__media{max-width:360px; margin-inline:auto; width:100%}
  .about__copy{justify-items:start}
}

/* ---------- 16. Depoimento ---------- */
.quote{max-width:760px; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.4rem,4vw,3rem); box-shadow:var(--shadow-sm); display:grid; gap:1.35rem}
.quote__stars{display:flex; gap:.22rem; color:#F5A623}
.quote__stars svg{width:19px; height:19px}
.quote blockquote{margin:0; font-family:var(--font-display); font-size:clamp(1.12rem,1rem + .7vw,1.5rem); line-height:1.45; letter-spacing:-.02em; font-weight:500}
.quote__by{display:flex; align-items:center; gap:.85rem; padding-top:.35rem; border-top:1px solid var(--line)}
.quote__av{width:44px; height:44px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.05rem; flex:none; margin-top:1.35rem}
.quote__id{margin-top:1.35rem; display:grid; gap:.1rem}
.quote__id b{font-size:.98rem}
.quote__id span{font-family:var(--font-mono); font-size:.68rem; color:var(--muted); letter-spacing:.04em}

/* ---------- 16b. Resumo de avaliações (Google) ---------- */
.gscore{
  max-width:760px; margin:0 auto 2rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:clamp(1.4rem,3vw,2rem);
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1.25rem,3vw,2.25rem); align-items:center;
}
.gscore__num{display:grid; justify-items:center; gap:.35rem; text-align:center}
.gscore__num b{font-family:var(--font-display); font-size:clamp(2.4rem,2rem + 2vw,3.2rem); line-height:1; letter-spacing:-.03em}
.gscore__num .data{color:var(--muted); font-size:.68rem; white-space:nowrap}
.gscore__stars{display:flex; gap:.18rem; color:#F5A623}
.gscore__stars svg{width:17px; height:17px}
.gscore__bars{display:grid; gap:.3rem; min-width:0}
.gscore__bars span{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.6rem}
.gscore__bars i{font-family:var(--font-mono); font-size:.66rem; color:var(--muted); font-style:normal}
.gscore__bars u{height:6px; border-radius:999px; background:var(--line); text-decoration:none; position:relative; overflow:hidden}
.gscore__bars u::before{content:""; position:absolute; inset:0 auto 0 0; width:var(--v,0%); background:#F5A623; border-radius:999px}
@media (max-width:860px){
  .gscore{grid-template-columns:1fr; justify-items:center; text-align:center; gap:1.4rem}
  .gscore__bars{width:100%; max-width:340px}
  .gscore .btn{width:100%; max-width:340px}
}

/* ---------- 16c. Grade de depoimentos ---------- */
.tcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(288px,100%),1fr)); gap:1.15rem; margin-top:clamp(1.5rem,3.5vw,2rem)}
.tcard{
  margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.45rem; display:grid; grid-template-rows:auto 1fr auto; gap:1rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.tcard__stars{display:flex; gap:.18rem; color:#F5A623}
.tcard__stars svg{width:16px; height:16px}
.tcard blockquote{margin:0; color:var(--muted); font-size:.95rem; line-height:1.62}
.tcard__by{display:flex; align-items:center; gap:.7rem; padding-top:.9rem; border-top:1px solid var(--line)}
.tcard__av{width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff; flex:none;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.9rem}
.tcard__id{display:grid; gap:.05rem; min-width:0}
.tcard__id b{font-family:var(--font-display); font-size:.92rem; letter-spacing:-.015em}
.tcard__id span{font-family:var(--font-mono); font-size:.64rem; color:var(--muted); letter-spacing:.04em}
.tnote{margin-top:1.6rem; text-align:center; color:var(--muted); font-size:.82rem; line-height:1.6; max-width:660px; margin-inline:auto}

/* ---------- 16d. Local e horários ---------- */
.place{display:grid; grid-template-columns:1.05fr .95fr; gap:1.15rem; align-items:start}
.place__card,.hours{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.5rem,3vw,2rem); display:grid; gap:1rem; align-content:start}
.place__card h3{font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem)}
.place__card address{font-style:normal; color:var(--muted); line-height:1.7}
.place__acts{display:flex; flex-wrap:wrap; gap:.7rem; padding-top:.25rem}
.hours__list{display:grid; gap:0}
.hours__list li{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line)}
.hours__list li:last-child{border-bottom:0}
.hours__list b{font-family:var(--font-display); font-size:.96rem; font-weight:600; letter-spacing:-.015em}
.hours__list .data{color:var(--muted); font-size:.78rem; white-space:nowrap}
.hours__note{color:var(--muted); font-size:.84rem; line-height:1.6}
/* o mapa ocupa a linha inteira sob os dois cards */
.place__map{grid-column:1/-1; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); line-height:0}
.place__map iframe{width:100%; height:clamp(280px,34vw,420px); border:0; display:block; filter:saturate(.92)}
@media (max-width:980px){.place{grid-template-columns:1fr}}
@media (max-width:560px){
  .place__acts{display:grid; gap:.65rem}
  .place__acts .btn{width:100%}
  .hours__list li{flex-wrap:wrap; gap:.15rem 1rem}
}

/* ---------- 17. FAQ ---------- */
.faq{max-width:820px; margin-inline:auto; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:1.25rem .25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-family:var(--font-display); font-size:clamp(1.02rem,.98rem + .3vw,1.16rem); font-weight:600; letter-spacing:-.018em; transition:color .2s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand)}
.faq summary i{width:26px; height:26px; border-radius:50%; border:1px solid var(--line); flex:none; position:relative; transition:transform .32s var(--ease), border-color .25s var(--ease)}
.faq summary i::before,.faq summary i::after{content:""; position:absolute; inset:50% 6px auto 6px; height:1.5px; background:var(--brand); transform:translateY(-50%); border-radius:2px; transition:opacity .25s var(--ease)}
.faq summary i::after{transform:translateY(-50%) rotate(90deg)}
.faq details[open] summary i{transform:rotate(180deg); border-color:var(--brand)}
.faq details[open] summary i::after{opacity:0}
.faq__a{padding:0 clamp(.25rem,4vw,3rem) 1.5rem .25rem; color:var(--muted); line-height:1.68}
.faq details[open] .faq__a{animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0; transform:translateY(-5px)}to{opacity:1; transform:none}}

/* ---------- 18. CTA final ---------- */
.cta{position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; top:-45%; left:50%; translate:-50% 0; width:min(940px,120vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(0,160,216,.22),rgba(0,160,216,0) 64%); pointer-events:none}
.cta__inner{position:relative; display:grid; gap:clamp(1.85rem,4.5vw,2.75rem); justify-items:center; text-align:center}
.cta h2{max-width:20ch}
.cta .btn-row{justify-content:center}
.cta .lede{margin-inline:auto; text-align:center}
.cta__cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr)); gap:1px; background:var(--line-dk); border:1px solid var(--line-dk); border-radius:var(--radius); overflow:hidden; width:100%; text-align:left}
.cta__card{background:rgba(255,255,255,.04); padding:1.55rem 1.45rem; display:grid; gap:.45rem; align-content:start; transition:background .25s var(--ease)}
a.cta__card:hover{background:rgba(255,255,255,.1)}
.cta__card svg{width:22px; height:22px; color:var(--signal)}
.cta__card b{font-family:var(--font-display); font-size:.97rem; color:#fff; letter-spacing:-.01em}
.cta__card span{color:#9FB6CD; font-size:.9rem; line-height:1.5}

/* ---------- 19. Rodapé ---------- */
.foot{background:#061529; color:#8FA6BE; padding-block:3.25rem 2.25rem; font-size:.9rem}
.foot__top{display:grid; grid-template-columns:1fr auto auto; gap:2rem clamp(1.5rem,4vw,3rem); align-items:start; padding-bottom:2.25rem; border-bottom:1px solid rgba(255,255,255,.09)}
.foot .brand__name{color:#fff}
.foot .brand__role{color:#7690AC}
.foot__nav{display:flex; flex-wrap:wrap; gap:.35rem 1.6rem; max-width:34ch}
@media (max-width:900px){.foot__top{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot__top{grid-template-columns:1fr; gap:1.75rem}}
.foot address{max-width:30ch}
.foot__nav a{display:inline-flex; align-items:center; min-height:34px; transition:color .2s var(--ease)}
.foot address a{display:inline-flex; align-items:center; min-height:34px}
@media (max-width:600px){
  .foot__nav{gap:.15rem 1.4rem}
  .foot__nav a,.foot address a{min-height:44px}
}
.foot__nav a:hover{color:var(--signal)}
.foot__btm{padding-top:1.75rem; display:flex; flex-wrap:wrap; gap:.75rem 1rem; justify-content:space-between; align-items:center; font-size:.8rem}
.foot__legal{max-width:62ch; line-height:1.6; color:#6F87A2}

/* ---------- 20. WhatsApp flutuante ---------- */
.wa-float{
  position:fixed; right:clamp(16px,2.5vw,28px); bottom:clamp(16px,2.5vw,28px); z-index:70;
  width:clamp(56px,5vw,62px); aspect-ratio:1; border-radius:50%;
  background:var(--wa); color:#fff; display:grid; place-items:center;
  box-shadow:0 12px 30px rgba(18,140,74,.42);
  transition:transform .28s var(--ease), background .25s var(--ease), box-shadow .28s var(--ease);
}
.wa-float svg{width:clamp(28px,2.6vw,31px); height:auto}
.wa-float:hover{transform:scale(1.07); background:var(--wa-dk); box-shadow:0 16px 38px rgba(18,140,74,.5)}
.wa-float:active{transform:scale(1)}

/* ---------- 21. Motion ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}

/* sequência de entrada do hero */
.hero .lift{opacity:0; transform:translateY(24px); animation:lift .85s var(--ease) forwards}
.hero .lift:nth-child(1){animation-delay:.05s}
.hero .lift:nth-child(2){animation-delay:.12s}
.hero .lift:nth-child(3){animation-delay:.19s}
.hero .lift:nth-child(4){animation-delay:.26s}
.hero .lift:nth-child(5){animation-delay:.33s}
.hero__media{opacity:0; transform:translateY(28px) scale(.97); animation:lift .95s var(--ease) .18s forwards}
@keyframes lift{to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important}
  .reveal,.hero .lift,.hero__media{opacity:1 !important; transform:none !important}
  .caliper .bar{stroke-dashoffset:0 !important}
}