/* =====================================================================
   Sorria Passos — site institucional
   Mesma identidade da LP de implantes: Bebas Neue + Mona Sans + Instrument
   Serif, fundo escuro + laranja da marca. CSS compartilhado pelas 3 paginas.
   ===================================================================== */
:root{
  --bg:#0A0A0A;
  --panel:#0E0E0F;
  --card:#141416;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --ink:#FFFFFF;
  --head:#F4F4F5;
  --body:#B7B7BC;
  --muted:#85858B;
  --brand:#F2601C;
  --brand-2:#FF8A3D;
  --brand-soft:rgba(242,96,28,.13);
  --zap:#25D366;
  --cream:#F4F1EA;
  --ink-dark:#141210;
  --r-lg:26px;
  --r-md:18px;
  --r-sm:13px;
  --s-1:8px; --s-2:14px; --s-3:20px; --s-4:36px; --s-5:56px;
  --font-dp:"Bebas Neue", Impact, sans-serif;
  --font:"Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ac:"Instrument Serif", Georgia, serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--font); font-size:16.5px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (min-width:760px){ body{font-size:17.5px; line-height:1.62} }
img{max-width:100%}

/* ---------- Tipografia ---------- */
h1,h2{
  font-family:var(--font-dp); font-weight:400; color:var(--ink); margin:0 0 .5em;
  text-transform:uppercase; letter-spacing:.012em; line-height:.98;
}
h3{
  font-family:var(--font); font-size:1.1rem; font-weight:700;
  letter-spacing:-.01em; line-height:1.3; text-transform:none; color:var(--ink); margin:0 0 .5em;
}
.ac{
  font-family:var(--font-ac); font-style:italic; font-weight:400; text-transform:lowercase;
  color:var(--brand-2); letter-spacing:0; font-size:1.08em; line-height:1;
}
a{color:inherit}

.wrap{max-width:1180px; margin:0 auto; padding:0 22px}
.section{padding:clamp(56px,9vw,110px) 0; position:relative}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:.72rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brand-2); margin-bottom:var(--s-2);
}
.eyebrow::before{content:""; width:24px; height:1.5px; background:var(--brand)}
.head{text-align:center}
.head .eyebrow{justify-content:center}
.head .lede{margin-inline:auto}
.head h2{font-size:clamp(2.4rem,8.4vw,4.4rem); max-width:none; margin-bottom:0}
@media (min-width:760px){ .head h2{max-width:15em; margin-inline:auto} }
.head .lede{margin-top:var(--s-3)}
.lede{font-size:1.06rem; color:var(--body); max-width:52ch}
.head + *, .center + *{margin-top:var(--s-4)}
.center{text-align:center}
.center .eyebrow{justify-content:center}

/* Traçado — curvas de nível no laranja da marca */
.traced{overflow:hidden}
.traced::before{
  content:""; position:absolute; inset:-10% -5%; z-index:0; pointer-events:none;
  background:url("assets/tracado.svg") center/cover no-repeat; opacity:.26;
}
.traced > .wrap{position:relative; z-index:1}

/* ---------- Botões ---------- */
.pill{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none; cursor:pointer;
  font:inherit; font-weight:700; font-size:.95rem; line-height:1; border:0;
  padding:7px 7px 7px 21px; border-radius:999px; transition:transform .14s ease, filter .14s ease;
}
.pill:hover{transform:translateY(-1px); filter:brightness(1.06)}
.pill--solid{background:#fff; color:#111}
.pill--ghost{background:transparent; color:#fff; border:1px solid var(--line-2); padding:13px 24px}
.pill--zap{background:var(--zap); color:#06371B; padding:13px 24px}
.pill .chip{
  width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; flex:none;
}
.btn-zap{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:11px;
  background:var(--zap); color:#06371B; border-radius:14px; padding:16px 20px;
  font:inherit; font-weight:700; font-size:1.02rem; cursor:pointer; border:0; text-decoration:none;
  transition:filter .14s ease;
}
.btn-zap:hover{filter:brightness(1.05)}

/* ---------- NAV (multipágina) ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; gap:16px; padding:14px clamp(18px,4vw,40px);
  transition:background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.nav.on{background:rgba(10,10,10,.9); backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.brand img{height:32px; width:auto; display:block}
.nav-links{display:flex; gap:clamp(12px,2.4vw,26px); margin-left:auto; align-items:center}
.nav-links a{
  text-decoration:none; color:var(--head); font-size:.92rem; font-weight:600;
  letter-spacing:.01em; transition:color .14s ease; white-space:nowrap;
}
.nav-links a:hover{color:var(--brand-2)}
.nav-links a.atual{color:var(--brand-2)}
.nav .pill{margin-left:6px}
@media (max-width:640px){
  .nav{gap:10px; padding:12px 16px}
  .nav-links{gap:14px}
  .nav-links a.only-wide{display:none}      /* em telas mínimas some o link menos essencial */
  .nav .pill{padding:7px 7px 7px 16px; font-size:.88rem}
  .nav .pill .chip{width:30px; height:30px}
}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:92svh; display:flex; align-items:flex-end;
  padding:120px clamp(20px,4vw,40px) clamp(40px,5vw,64px); overflow:hidden;
}
.hero--curto{min-height:64svh; align-items:center}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-fallback{
  position:absolute; inset:0;
  background:radial-gradient(120% 100% at 78% 8%, #FFB06A 0%, #F2601C 16%, #A83B0C 46%, #3D1605 72%, #140702 100%);
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(6,6,7,.95) 0%, rgba(6,6,7,.72) 28%, rgba(6,6,7,.30) 62%, rgba(6,6,7,.5) 100%),
    linear-gradient(to right, rgba(6,6,7,.78) 0%, rgba(6,6,7,.2) 56%, rgba(6,6,7,0) 100%);
}
.hero-inner{position:relative; z-index:2; width:100%; max-width:1180px; margin:0 auto}
.hero-copy{text-align:center}
.hero-copy .eyebrow{justify-content:center}
.hero-sub, .cues{margin-inline:auto}
.cues{justify-content:center}
@media (min-width:900px){
  .hero-copy{text-align:left; max-width:none}
  .hero-copy .eyebrow{justify-content:flex-start}
  .hero-sub{margin-inline:0}
  .cues{justify-content:flex-start}
}
.hero h1{
  color:#fff; font-size:clamp(2.6rem,7vw,5.2rem); font-weight:400;
  line-height:.98; letter-spacing:.012em; margin:0 0 18px; max-width:none;
}
@media (min-width:900px){ .hero h1{max-width:15em} }
.hero-sub{color:#E4E4E7; font-size:1.06rem; max-width:52ch; margin:0 0 24px}
.hero-sub strong{color:#fff; font-weight:700}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
@media (min-width:900px){ .hero-cta{justify-content:flex-start} }
.cues{list-style:none; display:flex; flex-wrap:wrap; gap:8px 20px; padding:0; margin:22px 0 0}
.cues li{display:flex; align-items:center; gap:8px; color:#fff; font-size:.92rem; font-weight:600}
.dot{width:6px; height:6px; border-radius:50%; background:var(--brand); flex:none}

/* ---------- Sobre / texto + números ---------- */
.two{display:grid; gap:34px; align-items:center}
@media (min-width:900px){ .two{grid-template-columns:1.05fr .95fr; gap:56px} }
.two p{font-size:1.06rem; margin:0 0 16px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 16px; text-align:center}
.stat b{display:block; font-family:var(--font-dp); font-weight:400; font-size:2.4rem; color:var(--brand-2); line-height:1}
.stat span{display:block; margin-top:6px; font-size:.82rem; color:var(--muted); line-height:1.35}
.media-frame{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/5}
.media-frame img{width:100%; height:100%; object-fit:cover; display:block}

/* ---------- Grade de tratamentos ---------- */
.trats{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:640px){ .trats{grid-template-columns:repeat(2,1fr); gap:14px} }
@media (min-width:980px){ .trats{grid-template-columns:repeat(3,1fr)} }
.trat{
  display:flex; flex-direction:column; gap:9px; text-decoration:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:24px 22px; transition:border-color .16s ease, transform .16s ease;
}
.trat:hover{border-color:var(--line-2); transform:translateY(-2px)}
.trat .ico{
  width:44px; height:44px; border-radius:12px; background:var(--brand-soft);
  display:grid; place-items:center; color:var(--brand-2); margin-bottom:4px;
}
.trat h3{margin:0; font-size:1.12rem}
.trat p{margin:0; font-size:.95rem; color:var(--body); line-height:1.5}
.trat .mais{margin-top:auto; padding-top:8px; font-size:.82rem; font-weight:700; color:var(--brand-2); letter-spacing:.04em; text-transform:uppercase}

/* Versão detalhada (página Tratamentos): item largo com número */
.trat-det{
  display:grid; gap:6px; grid-template-columns:auto 1fr; align-items:start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 24px; margin-bottom:14px;
}
.trat-det .n{
  grid-row:1/3; margin-right:20px; font-family:var(--font-dp); font-weight:400; font-size:2.6rem;
  color:var(--brand); line-height:.8; font-variant-numeric:tabular-nums;
}
.trat-det h3{margin:0 0 4px; font-size:1.24rem}
.trat-det p{margin:0; font-size:1rem; color:var(--body); line-height:1.55}

/* ---------- Processo (etapas) ---------- */
.steps{display:grid; gap:0; border-top:1px solid var(--line)}
@media (min-width:900px){ .steps{grid-template-columns:repeat(3,1fr); border-top:0} }
.step{padding:26px 0; border-bottom:1px solid var(--line)}
@media (min-width:900px){
  .step{border-bottom:0; border-top:1px solid var(--line); padding:30px 30px 30px 0}
  .step:last-child{padding-right:0}
}
.step .n{display:block; font-size:.78rem; font-weight:800; color:var(--brand-2); letter-spacing:.16em; margin-bottom:14px; font-variant-numeric:tabular-nums}
.step h3{margin:0 0 7px; font-size:1.16rem}
.step p{margin:0; font-size:.96rem}

/* ---------- Equipe ---------- */
.duo{display:grid; gap:12px; grid-template-columns:1fr}
.doc{margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; display:grid; grid-template-columns:36% 1fr; align-items:center}
.doc-ph{position:relative; height:100%}
.doc-ph::after{content:""; position:absolute; inset:0 -1px 0 auto; width:40%; background:linear-gradient(to left, #141416 8%, rgba(20,20,22,0))}
.doc img{display:block; width:100%; height:100%; object-fit:cover; object-position:center 12%}
.doc figcaption{padding:17px 19px}
.doc b{display:block; color:var(--ink); font-size:1.06rem; font-weight:800; letter-spacing:-.015em}
.doc .cro{display:block; margin-top:4px; font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-2); font-variant-numeric:tabular-nums}
.doc figcaption p{margin:9px 0 0; font-size:.92rem; color:var(--body); line-height:1.5}
@media (min-width:760px){
  .duo{grid-template-columns:repeat(2,1fr); gap:22px}
  .doc{display:block}
  .doc-ph{height:auto}
  .doc-ph::after{inset:auto 0 -1px 0; width:auto; height:44%; background:linear-gradient(to top, #141416 12%, rgba(20,20,22,0))}
  .doc img{height:auto; aspect-ratio:4/5}
  .doc figcaption{padding:4px 24px 26px}
}

/* ---------- Galeria da clínica ---------- */
.galeria{display:grid; gap:10px; grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){ .galeria{grid-template-columns:repeat(4,1fr); gap:12px} }
.galeria figure{margin:0; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); aspect-ratio:1/1}
.galeria figure.tall{aspect-ratio:1/1}
@media (min-width:760px){ .galeria figure.wide{grid-column:span 2; aspect-ratio:2/1} }
.galeria img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.galeria figure:hover img{transform:scale(1.04)}

/* ---------- Seção clara (inversão) ---------- */
.invert{background:var(--cream); color:#5A554C; border-top-left-radius:100% 44px; border-top-right-radius:100% 44px}
.invert h2,.invert h3,.invert summary{color:var(--ink-dark)}
.invert .lede,.invert p{color:#5A554C}
.invert .eyebrow{color:var(--brand)}
.invert .eyebrow::before{background:var(--brand)}
.invert .ac{color:var(--brand)}
.invert::before{opacity:.45}
.invert details{background:#EAE6DC; border-color:rgba(20,18,16,.10)}
.invert summary::after{background:rgba(20,18,16,.06); color:var(--ink-dark)}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin-inline:auto}
details{background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:9px; overflow:hidden}
summary{cursor:pointer; list-style:none; padding:19px 54px 19px 22px; position:relative; font-weight:700; color:var(--ink); font-size:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.06); display:grid; place-items:center; font-weight:700; color:var(--brand-2); font-size:1rem}
details[open] summary::after{content:"–"}
details p{margin:0; padding:0 22px 20px; font-size:.96rem}

/* ---------- Contato ---------- */
.contato-grid{display:grid; gap:22px; grid-template-columns:1fr}
@media (min-width:900px){ .contato-grid{grid-template-columns:1fr 1fr; gap:34px; align-items:start} }
.info-list{display:grid; gap:14px}
.info{display:flex; gap:15px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:20px}
.info .ico{flex:none; width:40px; height:40px; border-radius:11px; background:var(--brand-soft); color:var(--brand-2); display:grid; place-items:center}
.info b{display:block; color:var(--ink); font-size:1rem; margin-bottom:3px}
.info p, .info a{margin:0; font-size:.96rem; color:var(--body); line-height:1.5; text-decoration:none}
.info a:hover{color:var(--brand-2)}
.mapa{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); min-height:340px; height:100%}
.mapa iframe{width:100%; height:100%; min-height:340px; border:0; display:block; filter:grayscale(.2) contrast(1.05)}

/* Formulário compacto */
.form-card{background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:26px 22px 24px}
.form-card h2{font-family:var(--font); font-weight:800; font-size:1.35rem; text-transform:none; letter-spacing:-.02em; line-height:1.2; margin:0 0 5px; color:var(--ink)}
.form-card .sub{font-size:.92rem; color:var(--muted); margin:0 0 18px}
.field{margin-bottom:13px; min-width:0}
.field label{display:block; font-size:.82rem; font-weight:600; color:var(--head); margin-bottom:6px}
.field input, .field select, .field textarea{
  width:100%; min-width:0; max-width:100%; background:#0A0A0B; border:1px solid var(--line-2); color:#fff;
  border-radius:12px; padding:13px 15px; font:inherit; font-size:.98rem; outline:none; transition:border-color .15s ease;
}
.field textarea{min-height:96px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--brand)}
.field input::placeholder, .field textarea::placeholder{color:#6A6A70}
.consent{display:flex; gap:10px; align-items:flex-start; margin:14px 0 16px; font-size:.82rem; color:var(--muted); line-height:1.45}
.consent input{margin-top:2px; accent-color:var(--brand); flex:none; width:17px; height:17px}
.fineprint{font-size:.76rem; color:var(--muted); text-align:center; margin:12px 0 0}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* ---------- Painel final ---------- */
.final{position:relative; overflow:hidden; border-radius:var(--r-lg); text-align:center; padding:clamp(44px,8vw,86px) 24px; background:radial-gradient(130% 140% at 50% -20%, #FF9A4D 0%, #F2601C 32%, #B8410C 60%, #3D1605 100%)}
.final h2{color:#fff; margin-bottom:14px; font-size:clamp(2.3rem,6.4vw,3.8rem); max-width:20ch; margin-inline:auto}
.final .ac{color:#fff}
.final p{color:rgba(255,255,255,.92); max-width:46ch; margin:0 auto 24px}
.final .pill--solid{background:#fff; color:#111}
.final-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}

/* ---------- Rodapé ---------- */
footer{background:var(--brand); padding:12px 12px 18px; border-top-left-radius:100% 38px; border-top-right-radius:100% 38px}
footer > .wrap{background:#0C0C0D; border-radius:24px; padding:40px 24px 26px; position:relative; overflow:hidden}
footer > .wrap::before{content:""; position:absolute; inset:-20% -10%; pointer-events:none; background:url("assets/tracado.svg") center/cover no-repeat; opacity:.2}
footer > .wrap > *{position:relative; z-index:1}
.cols{display:grid; gap:26px}
@media (min-width:760px){ .cols{grid-template-columns:1.5fr 1fr 1fr} }
footer b{color:#fff; display:block; margin-bottom:10px; font-size:.94rem; font-weight:700}
footer p{color:var(--body); font-size:.92rem; margin:0 0 6px}
footer a{color:var(--body); text-decoration:none}
footer a:hover{color:var(--brand-2)}
.foot-brand img{height:44px; width:auto; margin-bottom:12px}
.foot-links{display:flex; flex-direction:column; gap:6px}
.legal{border-top:1px solid var(--line); margin-top:32px; padding-top:20px; font-size:.8rem; color:var(--muted); line-height:1.55}

/* ---------- Barra fixa (mobile) ---------- */
.sticky{position:fixed; inset:auto 0 0 0; z-index:75; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(10,10,10,.93); backdrop-filter:blur(10px); border-top:1px solid var(--line)}
@media (min-width:980px){ .sticky{display:none} }
@media (max-width:979px){ body{padding-bottom:82px} }

/* ---------- Entrada das dobras ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay:var(--atraso,0ms); will-change:opacity,transform}
.reveal.dentro{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto} *{transition:none !important}
  .hero-bg{display:none}
  .reveal{opacity:1 !important; transform:none !important}
}