/* =========================================================
   Dra. Ariane Varela — Fisioterapeuta Esteta
   Paleta e tipografia extraídas do Instagram @dra.arianevarela
   ========================================================= */

/* ---------- fontes locais ----------
   Subconjunto latino baixado do Google Fonts (SIL Open Font License 1.1).
   O latino cobre todo acento do português. A Montserrat é variável: um
   arquivo só cobre os pesos 300 a 500 — os três que o site usa. */
@font-face{
  font-family:"Italiana";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/italiana-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url("assets/fonts/montserrat-latin-var.woff2") format("woff2");
}

:root{
  --taupe:      #62584C;
  --taupe-deep: #3A342C;
  --cream:      #EEE9E3;
  --cream-hi:   #F7F4F0;
  --nude:       #BF9B81;
  --blush:      #ECD3CF;
  --ink:        #241F1A;
  --ink-soft:   #5A5147;

  /* primos saturados do nude — para o que precisa chamar atenção */
  --vivo:       #C8804F;
  --vivo-forte: #A95E30;

  --linha: rgba(98,88,76,.16);
  --linha-clara: rgba(238,233,227,.22);

  --display: "Italiana", "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1180px;
  --navh: 4.9rem;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--vivo); outline-offset:3px; border-radius:2px; }
section[id]{ scroll-margin-top:calc(var(--navh) + 1rem); }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.ico{
  width:20px; height:20px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico--md{ width:32px; height:32px; stroke-width:1.2; }
.ico--flip{ transform:scaleX(-1); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--taupe-deep); color:var(--cream);
  padding:.75rem 1.25rem; font-size:.85rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ---------- tipografia ---------- */

.eyebrow{
  font-size:.7rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 1.25rem;
}
.eyebrow--light{ color:var(--nude); }

.h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,1.3rem + 3.4vw,3.9rem);
  line-height:1.04; letter-spacing:.01em;
  margin:0 0 1.1rem; color:var(--ink);
}
.h2--light{ color:var(--cream); }
.lead{ max-width:56ch; color:var(--ink-soft); margin:0; }
.lead--light{ color:rgba(238,233,227,.82); }

/* ---------- botões ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.9rem;
  font-size:.78rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.btn--sm{ padding:.62rem 1.25rem; font-size:.68rem; letter-spacing:.14em; }
.btn--nude{ background:var(--nude); color:var(--taupe-deep); }
.btn--nude:hover{ background:var(--cream); }
.btn--ghost{ border-color:var(--linha-clara); color:var(--cream); }
.btn--ghost:hover{ border-color:var(--cream); background:rgba(238,233,227,.08); }
.btn--outline{ border-color:var(--nude); color:var(--nude); }
.btn--outline:hover{ background:var(--nude); color:var(--taupe-deep); }
.btn--escuro{ background:var(--taupe-deep); color:var(--cream); }
.btn--escuro:hover{ background:var(--taupe); }
.btn--zap{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--vivo),var(--vivo-forte));
  color:#fff; box-shadow:0 10px 26px rgba(169,94,48,.28);
}
/* lampejo que atravessa o botão de tempos em tempos */
.btn--zap::before{
  content:""; position:absolute; top:0; bottom:0; width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);
  animation:lampejo 4.5s var(--ease) infinite;
}
@keyframes lampejo{
  0%       { left:-60%; }
  55%,100% { left:130%; }
}
.btn--zap:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(169,94,48,.36); }
.btn--zap .ico{ transition:transform .3s var(--ease); }
.btn--zap:hover .ico{ transform:translateX(4px); }

.circ{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid var(--linha); color:var(--ink-soft);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.circ:hover{ background:var(--vivo); border-color:var(--vivo); color:#fff; }
.circ[disabled]{ opacity:.3; cursor:default; }
.circ[disabled]:hover{ background:none; border-color:var(--linha); color:var(--ink-soft); }
.circ--claro{ border-color:var(--linha-clara); color:rgba(238,233,227,.8); }
.circ--claro[disabled]:hover{ border-color:var(--linha-clara); color:rgba(238,233,227,.8); background:none; }

/* ---------- molduras ---------- */

.moldura{ overflow:hidden; position:relative; background:rgba(238,233,227,.06); }
.moldura--retrato{ aspect-ratio:3/4; border:1px solid var(--linha-clara); }
.moldura--video{ aspect-ratio:16/10; border:1px solid var(--linha-clara); }
.moldura img,
.moldura video{ width:100%; height:100%; object-fit:cover; display:block; }

.video__play{
  position:absolute; inset:0; margin:auto;
  width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(238,233,227,.9); border:0; color:var(--taupe-deep);
  transition:transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.video__play svg{ width:30px; height:30px; fill:currentColor; margin-left:3px; }
.video__play:hover{ transform:scale(1.08); background:var(--cream); }
.moldura--video.tocando .video__play{ opacity:0; pointer-events:none; }

/* ---------- nav ---------- */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:.85rem var(--pad);
  background:var(--taupe);
  transition:background .4s var(--ease);
}
.nav.is-stuck{ background:var(--taupe-deep); }
.nav__mark{ text-decoration:none; line-height:1.1; margin-right:auto; }
.nav__name{
  display:block; font-family:var(--display);
  font-size:1.28rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream); white-space:nowrap;
}
.nav__role{
  display:block; font-size:.53rem; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--nude); margin-top:.2rem;
}
.nav__menu{ display:flex; gap:1.6rem; }
.nav__menu a{
  font-size:.72rem; letter-spacing:.1em; text-decoration:none;
  color:rgba(238,233,227,.82); padding-bottom:.2rem;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.nav__menu a:hover{ color:var(--cream); border-bottom-color:var(--vivo); }
.nav__fim{ display:flex; align-items:center; gap:.75rem; }
.nav__toggle{
  display:none; width:40px; height:40px;
  background:none; border:1px solid var(--linha-clara); color:var(--cream);
  place-items:center; cursor:pointer;
}

/* ---------- hero ---------- */

.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--taupe) 0%,#544B41 55%,var(--taupe-deep) 100%);
  color:var(--cream);
  padding:calc(var(--navh) + clamp(3rem,7vw,6rem)) var(--pad) clamp(3.5rem,7vw,6rem);
}
.hero__lines{
  position:absolute; inset:0; width:100%; height:100%;
  fill:none; stroke:var(--nude); stroke-width:1; opacity:.28;
}
.hero__lines path{
  stroke-dasharray:2600; stroke-dashoffset:2600;
  animation:traco 2.6s var(--ease) forwards;
}
.hero__lines path:nth-child(2){ animation-delay:.15s; }
.hero__lines path:nth-child(3){ animation-delay:.3s; }
@keyframes traco{ to{ stroke-dashoffset:0; } }

.hero__inner{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;
}
.hero__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.9rem,1.6rem + 5.2vw,5.4rem);
  line-height:1; margin:0 0 1.5rem; color:var(--cream);
}
.hero__lead{ max-width:46ch; margin:0 0 2.4rem; color:rgba(238,233,227,.82); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }
.hero__reg{
  margin:2.8rem 0 0; font-size:.66rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(191,155,129,.85);
}
.hero__foto{ position:relative; width:100%; max-width:470px; justify-self:end; }

/* moldura em duas camadas: um fio externo deslocado e um vinco interno */
.hero__foto::before{
  content:""; position:absolute; inset:-.85rem;
  border:1px solid rgba(200,128,79,.55); z-index:-1;
  clip-path:inset(0 100% 0 0);
  animation:moldura 1.1s var(--ease) .95s forwards;
}
.hero__foto::after{
  content:""; position:absolute; inset:1.75rem -2.1rem -2.1rem 1.75rem;
  border:1px solid rgba(238,233,227,.18); z-index:-2;
  clip-path:inset(100% 0 0 0);
  animation:moldura2 1.1s var(--ease) 1.2s forwards;
}
@keyframes moldura{ to{ clip-path:inset(0 0 0 0); } }
@keyframes moldura2{ to{ clip-path:inset(0 0 0 0); } }

/* cantos marcados, que dão acabamento de moldura de verdade */
.hero__foto .canto{
  position:absolute; width:26px; height:26px; z-index:2;
  border:0 solid var(--vivo); opacity:0;
  animation:aparece .5s var(--ease) 1.6s forwards;
}
.hero__foto .canto--te{ top:-.85rem; left:-.85rem; border-top-width:2px; border-left-width:2px; }
.hero__foto .canto--td{ top:-.85rem; right:-.85rem; border-top-width:2px; border-right-width:2px; }
.hero__foto .canto--be{ bottom:-.85rem; left:-.85rem; border-bottom-width:2px; border-left-width:2px; }
.hero__foto .canto--bd{ bottom:-.85rem; right:-.85rem; border-bottom-width:2px; border-right-width:2px; }
@keyframes aparece{ to{ opacity:1; } }

/* ---------- partículas do hero ---------- */

.particulas{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.p{
  position:absolute; left:var(--x); bottom:-8%;
  transform:scale(var(--s,1));
  animation:deriva var(--d,30s) linear var(--a,0s) infinite;
  opacity:0;
}
.p--gota{
  width:10px; height:10px; border-radius:50% 50% 50% 0;
  background:rgba(236,211,207,.5); rotate:45deg;
}
.p--faisca{
  width:5px; height:5px; border-radius:50%;
  background:var(--vivo); box-shadow:0 0 10px 2px rgba(200,128,79,.45);
}
.p--petala{
  width:16px; height:10px; border-radius:60% 40% 60% 40%;
  background:rgba(191,155,129,.42);
}
@keyframes deriva{
  0%   { transform:translate(0,0) rotate(0) scale(var(--s,1)); opacity:0; }
  10%  { opacity:.9; }
  50%  { transform:translate(38px,-52vh) rotate(180deg) scale(var(--s,1)); }
  85%  { opacity:.7; }
  100% { transform:translate(-26px,-108vh) rotate(360deg) scale(var(--s,1)); opacity:0; }
}

/* a foto sobe revelando de baixo para cima, com um respiro de escala */
.hero__foto img{
  clip-path:inset(100% 0 0 0);
  transform:scale(1.12);
  animation:revelar 1.5s var(--ease) .25s forwards;
}
@keyframes revelar{
  to{ clip-path:inset(0 0 0 0); transform:scale(1); }
}
/* O texto do hero entra em cascata — deslizando, sem esmaecer.
   O fade custava caro: começando em opacity:0, o Chrome só conta o título
   como conteúdo pintado quando a transição acaba. Medido no ar, no celular:
   LCP de 2.270ms com o fade contra 957ms sem ele. Deslizar mantém a entrada
   e o texto já nasce legível. */
.hero__texto > *{ animation:entra .55s var(--ease) backwards; }
.hero__texto > *:nth-child(1){ animation-delay:.1s; }
.hero__texto > *:nth-child(2){ animation-delay:.22s; }
.hero__texto > *:nth-child(3){ animation-delay:.34s; }
.hero__texto > *:nth-child(4){ animation-delay:.46s; }
.hero__texto > *:nth-child(5){ animation-delay:.58s; }
@keyframes entra{ from{ transform:translateY(18px); } }

/* ---------- procedimentos: mapa + lista ---------- */

.proc{ background:var(--cream); padding:clamp(4.5rem,9vw,8rem) var(--pad); }
.proc__head{ max-width:var(--maxw); margin:0 auto 3.5rem; }
.proc__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;
}

.proc__mapa{
  background:var(--cream-hi); border:1px solid var(--linha);
  padding:1.5rem; position:sticky; top:6.5rem;
}
.rosto{ display:block; width:100%; height:auto; }
.rosto__silhueta path{ fill:rgba(98,88,76,.1); stroke:none; }
.rosto__traco path{
  fill:none; stroke:rgba(98,88,76,.42); stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.rosto__olhar circle{ fill:rgba(98,88,76,.5); }
.zona{
  fill:var(--vivo); fill-opacity:0; stroke:none;
  transition:fill-opacity .45s var(--ease);
}
.zona.is-on{ fill-opacity:.24; }
.zona.is-on + .zona.is-on{ fill-opacity:.24; }
.rosto__rotulo{
  font-family:var(--sans); font-size:13px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  fill:var(--vivo-forte); opacity:0;
  transition:opacity .4s var(--ease);
}
.rosto__rotulo.is-on{ opacity:1; }

.procs{ list-style:none; margin:0 0 2rem; padding:0; }
.procs li + li{ border-top:1px solid var(--linha); }
.proc-item{
  width:100%; display:flex; align-items:center; gap:1rem;
  background:none; border:0; border-left:2px solid transparent;
  padding:1.05rem 0 1.05rem 1.25rem;
  font-family:inherit; font-size:1.06rem; font-weight:400; color:var(--ink-soft);
  text-align:left; cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease), padding-left .3s var(--ease);
}
.proc-item .ico{ color:var(--nude); transition:color .3s var(--ease); }
.proc-item:hover{ color:var(--ink); }
.proc-item.is-on{ color:var(--ink); border-left-color:var(--vivo); padding-left:1.6rem; }
.proc-item.is-on .ico{ color:var(--vivo); }
.proc-item__reg{
  margin-left:auto; flex:0 0 auto;
  font-size:.66rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); opacity:.6;
}

.proc__detalhe{
  background:var(--cream-hi); border-left:2px solid var(--vivo);
  padding:1.8rem clamp(1.25rem,3vw,2.2rem);
}
.proc__detalhe h3{
  font-family:var(--display); font-weight:400; font-size:1.8rem;
  line-height:1.15; margin:0 0 .7rem;
}
.proc__detalhe p{ margin:0 0 1.1rem; color:var(--ink-soft); }
.proc__detalhe p:last-child{ margin-bottom:0; }
.proc__detalhe .nota{
  padding-top:1.1rem; border-top:1px solid var(--linha);
  font-size:.88rem; font-style:italic;
}
.proc__detalhe.trocando{ animation:fade .45s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(10px); } }

/* ---------- resultados ---------- */

.result{
  background:var(--taupe); color:var(--cream);
  padding:clamp(4.5rem,9vw,8rem) var(--pad);
}
.result__head{
  max-width:64ch; margin:0 auto 3rem; text-align:center;
}
.result__head .lead{ margin-inline:auto; }

/* grade centralizada: tudo à vista, sem rolagem */
.result__grade{
  list-style:none; margin:0 auto; padding:0;
  max-width:var(--maxw);
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(4,1fr);
}
.result__item{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/5; background:rgba(238,233,227,.06);
  border:1px solid var(--linha-clara); text-decoration:none;
}
.result__item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.result__item:hover img{ transform:scale(1.04); }
.result__marca{
  position:absolute; inset:auto 0 0 0;
  display:flex; align-items:center; gap:.5rem;
  padding:2.5rem 1.1rem 1.1rem;
  background:linear-gradient(transparent,rgba(36,31,26,.78));
  font-size:.66rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream);
  opacity:0; transform:translateY(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.result__item:hover .result__marca,
.result__item:focus-visible .result__marca{ opacity:1; transform:none; }
.result__marca .ico{ width:16px; height:16px; }
.result__item.sem-foto img{ display:none; }
.result__item.sem-foto{ display:grid; place-items:center; }
.result__item.sem-foto .result__marca{
  position:static; opacity:1; transform:none; background:none;
  justify-content:center; padding:1.1rem; color:var(--nude);
}
.result__rodape{
  max-width:var(--maxw); margin:2.5rem auto 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding-top:1.75rem;
  border-top:1px solid var(--linha-clara);
}
.result__nota{ margin:0; max-width:70ch; font-size:.78rem; line-height:1.6; color:rgba(238,233,227,.55); }
.result__nota a{ color:var(--nude); text-underline-offset:3px; }

/* ---------- depoimentos: carrossel infinito ---------- */

.vozes{ background:var(--blush); padding:clamp(4.5rem,9vw,8rem) 0; overflow:hidden; }
.vozes__head{
  max-width:var(--maxw); margin:0 auto 2.75rem;
  padding-inline:var(--pad);
}
.vozes .eyebrow{ color:#8A6F63; }
.vozes .h2{ color:#3D302A; margin:0; }
.vozes__rodape{
  max-width:var(--maxw); margin:2.75rem auto 0;
  padding:1.75rem var(--pad) 0;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  border-top:1px solid rgba(61,48,42,.14);
}
.vozes__fonte{
  margin:0; max-width:70ch;
  font-size:.78rem; line-height:1.6; color:var(--ink-soft);
}
.vozes__fonte a{ color:var(--vivo-forte); text-underline-offset:3px; }
.vozes__rodape .btn{ flex:0 0 auto; }

.marquee{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee + .marquee{ margin-top:1.25rem; }
.marquee__pista{
  display:flex; gap:1.25rem; width:max-content;
  animation:correr var(--duracao,60s) linear infinite;
}
.marquee--inverso .marquee__pista{ animation-direction:reverse; }
.marquee:hover .marquee__pista,
.marquee:focus-within .marquee__pista{ animation-play-state:paused; }
@keyframes correr{ to{ transform:translateX(-50%); } }

/* O depoimento aparece como mensagem porque é de onde veio: WhatsApp e Direct.
   O balão é montado em CSS, com o texto de verdade dentro, em vez de usar o
   print recortado. Print não reflui — no celular o texto encolhe junto com a
   imagem —, não é lido pelo Google nem pelas IAs, e pesa. Os prints originais
   ficam fora do site, guardados como prova, não como layout. */
.voz{
  flex:0 0 clamp(280px,78vw,420px);
  margin:0; background:var(--cream-hi);
  border:1px solid rgba(61,48,42,.1);
  padding:1.1rem 1.1rem 1.3rem;
  display:flex; flex-direction:column; justify-content:space-between;
}
.voz__tela{
  /* cresce para ocupar o cartão: a mensagem fica no topo de uma tela de
     conversa, em vez de deixar um buraco nos depoimentos curtos */
  flex:1; margin-bottom:1.1rem; padding:1.1rem .9rem; border-radius:12px;
  display:flex; align-items:center;
  background:
    radial-gradient(circle at 18% 14%, rgba(191,155,129,.30), transparent 46%),
    radial-gradient(circle at 82% 74%, rgba(236,211,207,.40), transparent 50%),
    #E9E0D8;
}
.voz__balao{
  width:100%; margin:0; padding:.8rem .95rem .55rem;
  /* quase branco, para destacar da tela atrás */
  background:#FFFCF9;
  /* canto de baixo à esquerda quadrado: a mesma bolha da prévia do formulário */
  border-radius:14px 14px 14px 3px;
  box-shadow:0 4px 14px rgba(36,31,26,.13);
}
.voz__balao p{
  margin:0;
  font-family:var(--sans); font-weight:300;
  font-size:.95rem; line-height:1.65; color:#3D302A;
}
.voz__hora{
  display:block; text-align:right; margin-top:.35rem;
  font-size:.62rem; letter-spacing:.06em; color:var(--ink-soft); opacity:.55;
}
.voz figcaption{
  display:flex; flex-direction:column; gap:.4rem;
  padding-top:1.1rem; border-top:1px solid rgba(61,48,42,.12);
}
.voz__proc{
  display:flex; align-items:center; gap:.6rem;
  font-size:.66rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:#8A6F63;
}
/* diz que o texto foi transcrito, para ninguém achar que o balão é um print */
.voz__origem{ font-size:.72rem; line-height:1.4; color:var(--ink-soft); opacity:.7; }
.voz figcaption .ico{ width:16px; height:16px; color:var(--vivo); }
.vozes__nota{
  max-width:52ch; margin:1rem 0 0;
  font-size:.88rem; line-height:1.6; color:var(--ink-soft);
}

/* ---------- quem vai te atender ---------- */

.sobre{
  background:var(--taupe); color:var(--cream);
  padding:clamp(4.5rem,9vw,8rem) var(--pad);
  overflow:hidden;
}
.sobre__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  align-items:center;
}

/* recorte vertical: 16:9 ao lado de texto deixava a coluna baixa demais
   e as duas metades não fechavam */
.sobre__filme{
  position:relative; margin:0;
  aspect-ratio:4/5; overflow:hidden;
  background:var(--taupe-deep);
  box-shadow:0 26px 60px rgba(36,31,26,.34);
}
.sobre__filme::after{
  content:""; position:absolute; inset:0;
  border:1px solid rgba(238,233,227,.2); pointer-events:none;
}
.sobre__filme video{
  width:100%; height:100%; object-fit:cover; display:block;
  object-position:48% center;
}

.sobre__legenda{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:.7rem;
  padding:2.75rem 1.1rem .95rem;
  background:linear-gradient(transparent,rgba(36,31,26,.7));
  font-size:.64rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(238,233,227,.9);
}
/* barrinhas que pulsam, indicando que a imagem está viva */
.sobre__onda{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sobre__onda i{
  width:2px; background:var(--vivo); display:block;
  animation:pulsa 1.15s var(--ease) infinite;
}
.sobre__onda i:nth-child(1){ height:40%; animation-delay:0s; }
.sobre__onda i:nth-child(2){ height:80%; animation-delay:.18s; }
.sobre__onda i:nth-child(3){ height:55%; animation-delay:.36s; }
.sobre__onda i:nth-child(4){ height:95%; animation-delay:.54s; }
@keyframes pulsa{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
.sobre__filme.pausado .sobre__onda i{ animation-play-state:paused; }

.sobre__pausa{
  position:absolute; top:.9rem; right:.9rem;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(36,31,26,.5); border:1px solid rgba(238,233,227,.28);
  color:var(--cream); opacity:0;
  transition:opacity .3s var(--ease), background .3s var(--ease);
}
.sobre__pausa svg{ width:15px; height:15px; fill:currentColor; }
.sobre__filme:hover .sobre__pausa,
.sobre__pausa:focus-visible{ opacity:1; }
.sobre__pausa:hover{ background:var(--vivo); }
.sobre__filme.pausado .sobre__pausa{ opacity:1; }
.sobre__filme.pausado .sobre__pausa svg{ clip-path:polygon(25% 0,25% 100%,100% 50%); }

.sobre__texto p{ color:rgba(238,233,227,.86); max-width:52ch; }
.sobre__reg{
  margin-top:2rem; font-size:.66rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--nude);
}

/* ---------- como funciona: trilha ---------- */

.jornada{ background:var(--cream); padding:clamp(4.5rem,9vw,8rem) var(--pad); }
.jornada__head{ max-width:var(--maxw); margin:0 auto 4rem; }

.trilha__caixa{ position:relative; max-width:var(--maxw); margin-inline:auto; }

/* trilho alinhado ao centro dos pontos (--topo-etapa) */
.trilha__linha{
  position:absolute; left:0; right:0; top:var(--topo-etapa,12px);
  height:2px; background:var(--linha); overflow:hidden;
}
.trilha__cheia{
  display:block; height:100%;
  width:calc(var(--avanco,0) * 1%);
  background:linear-gradient(90deg,var(--vivo),var(--vivo-forte));
  transition:width 1s var(--ease);
  position:relative;
}
/* onda de luz correndo da esquerda para a direita sobre o trecho preenchido */
.trilha__cheia::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.75) 45%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.75) 55%, transparent 100%);
  background-size:38% 100%; background-repeat:no-repeat;
  animation:onda 2.6s linear infinite;
}
@keyframes onda{
  from{ background-position:-40% 0; }
  to  { background-position:140% 0; }
}

.trilha{
  list-style:none; margin:0; padding:0;
  display:grid; gap:2rem; grid-template-columns:repeat(4,1fr);
  position:relative;
}

.etapa{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.etapa.is-vista{ opacity:1; transform:none; }
.etapa:nth-child(2){ transition-delay:.1s; }
.etapa:nth-child(3){ transition-delay:.2s; }
.etapa:nth-child(4){ transition-delay:.3s; }

/* altura fixa: é ela que ancora o trilho no centro dos pontos */
.etapa__topo{
  display:flex; align-items:center; gap:.9rem;
  height:24px; margin-bottom:1.6rem;
}
.etapa__ponto{
  width:12px; height:12px; border-radius:50%; flex:0 0 auto;
  background:var(--cream); border:2px solid var(--linha);
  transition:background .5s var(--ease), border-color .5s var(--ease),
             transform .5s var(--ease), box-shadow .5s var(--ease);
}
.etapa.is-vista .etapa__ponto{ box-shadow:0 0 0 5px rgba(200,128,79,.16); }
.etapa.is-vista .etapa__ponto{ background:var(--vivo); border-color:var(--vivo); transform:scale(1.25); }
.etapa__n{
  font-size:.7rem; font-weight:500; letter-spacing:.22em; color:var(--ink-soft);
  transition:color .5s var(--ease);
}
.etapa.is-vista .etapa__n{ color:var(--vivo-forte); }

.etapa .ico--md{ color:var(--nude); margin-bottom:1.1rem; }
.etapa.is-vista .ico--md{ color:var(--vivo); transition:color .6s var(--ease) .2s; }
.etapa__t{ font-size:1.05rem; font-weight:500; margin:0 0 .6rem; color:var(--ink); }
.etapa__d{ margin:0; font-size:.92rem; color:var(--ink-soft); }

/* ---------- onde atendo ---------- */

.local{ background:var(--cream-hi); padding:clamp(4.5rem,9vw,8rem) var(--pad); }
.local__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center;
}
.local .lead{ margin-bottom:1.8rem; }
.local__nota{
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 2rem; font-size:.94rem; color:var(--ink-soft);
}
.local__nota .ico{ color:var(--vivo); }
.local__mapa{
  aspect-ratio:4/3; border:1px solid var(--linha);
  background:var(--cream); z-index:0;
}
.local__mapa .leaflet-container{ background:var(--cream); font-family:var(--sans); }
.local__mapa .leaflet-tile-pane{ filter:grayscale(.55) sepia(.28) brightness(1.04); }
.local__mapa .leaflet-control-attribution{
  background:rgba(247,244,240,.85); font-size:9px; color:var(--ink-soft);
}

/* ---------- faq ---------- */

.faq{ background:var(--cream); padding:clamp(4.5rem,9vw,8rem) var(--pad); }
.faq__head{ max-width:var(--maxw); margin:0 auto 2.5rem; }
.faq__list{ max-width:840px; margin-inline:auto; border-top:1px solid rgba(98,88,76,.2); }
.faq__item{ border-bottom:1px solid var(--linha); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; background:none; border:0; padding:1.5rem 0;
  font-family:inherit; font-size:1.05rem; color:var(--ink);
  text-align:left; cursor:pointer;
}
.faq__q:hover{ color:var(--vivo-forte); }
.faq__sinal{ flex:0 0 auto; width:16px; height:16px; position:relative; }
.faq__sinal::before,.faq__sinal::after{
  content:""; position:absolute; background:var(--vivo);
  transition:transform .3s var(--ease);
}
.faq__sinal::before{ left:0; top:7.5px; width:16px; height:1px; }
.faq__sinal::after{ left:7.5px; top:0; width:1px; height:16px; }
.faq__q[aria-expanded="true"] .faq__sinal::after{ transform:scaleY(0); }
.faq__a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq__a p{ margin:0; padding:0 0 1.6rem; max-width:64ch; color:var(--ink-soft); font-size:.97rem; }

/* ---------- formulário ---------- */

.contato{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--taupe); color:var(--cream);
  padding:clamp(4.5rem,9vw,8rem) var(--pad);
}
/* brilho quente que respira atrás do conteúdo */
.contato__brilho{
  position:absolute; z-index:-2; width:min(70vw,720px); aspect-ratio:1;
  right:-12%; top:-18%; border-radius:50%;
  background:radial-gradient(circle,rgba(200,128,79,.5),transparent 68%);
  filter:blur(28px); animation:respira 9s var(--ease) infinite;
}
@keyframes respira{
  0%,100%{ transform:scale(1) translateY(0); opacity:.75; }
  50%    { transform:scale(1.14) translateY(-18px); opacity:1; }
}
.contato__lines{
  position:absolute; inset:0; z-index:-1; width:100%; height:100%;
  fill:none; stroke:var(--vivo); stroke-width:1; opacity:.22;
}

.contato__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.contato__texto p{ color:rgba(238,233,227,.86); max-width:48ch; }

/* prévia da mensagem, no formato de balão de conversa */
.previa{ margin:2.2rem 0 0; max-width:30rem; }
.previa__rotulo{
  margin:0 0 .6rem !important;
  font-size:.64rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--nude) !important;
}
.previa__balao{
  position:relative; padding:.95rem 1.1rem .7rem;
  background:rgba(238,233,227,.95); color:var(--ink);
  border-radius:14px 14px 14px 3px;
  box-shadow:0 10px 26px rgba(36,31,26,.22);
}
.previa__balao p{
  margin:0 !important; color:var(--ink) !important;
  font-size:.92rem; line-height:1.6; max-width:none !important;
}
.previa__balao p .vazio{ color:var(--vivo-forte); border-bottom:1px dashed currentColor; }
.previa__hora{
  display:block; text-align:right; margin-top:.3rem;
  font-size:.62rem; letter-spacing:.08em; color:var(--ink-soft); opacity:.6;
}
.contato__reg{
  margin-top:2rem; font-size:.66rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--nude);
}

.form{
  position:relative;
  background:var(--cream-hi);
  border-top:2px solid var(--vivo);
  padding:clamp(1.75rem,4vw,2.75rem);
  box-shadow:0 22px 60px rgba(36,31,26,.26);
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), box-shadow .5s var(--ease);
}
.form.is-vista{ opacity:1; transform:none; }
.form:hover{ box-shadow:0 26px 70px rgba(36,31,26,.32); }
/* os campos entram em cascata quando o cartão aparece */
.form.is-vista .campo,
.form.is-vista .form__enviar{ animation:sobe .6s var(--ease) backwards; }
.form.is-vista .campo:nth-of-type(1){ animation-delay:.15s; }
.form.is-vista .campo:nth-of-type(2){ animation-delay:.25s; }
.form.is-vista .campo:nth-of-type(3){ animation-delay:.35s; }
.form.is-vista .form__enviar{ animation-delay:.45s; }
@keyframes sobe{ from{ opacity:0; transform:translateY(14px); } }

.campo{ position:relative; margin-bottom:2.2rem; }
.campo input,
.campo select{
  width:100%; padding:.85rem 0 .6rem;
  font-family:inherit; font-size:1rem; font-weight:300; color:var(--ink);
  background:none; border:0; border-radius:0;
  appearance:none;
}
.campo select{
  cursor:pointer; padding-right:1.75rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--vivo) 50%),
                   linear-gradient(135deg,var(--vivo) 50%,transparent 50%);
  background-position:calc(100% - 13px) calc(50% + 2px), calc(100% - 7px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.campo input:focus,
.campo select:focus{ outline:none; }

.campo label{
  position:absolute; left:0; top:.85rem;
  font-size:1rem; font-weight:300; color:var(--ink-soft);
  pointer-events:none; transform-origin:left top;
  transition:transform .3s var(--ease), color .3s var(--ease);
}
/* o rótulo sobe quando o campo tem foco ou conteúdo */
.campo input:focus + label,
.campo input:not(:placeholder-shown) + label,
.campo select:focus + label,
.campo select:valid + label,
.campo .campo__label--fixo{
  transform:translateY(-1.35rem) scale(.68);
  letter-spacing:.16em; text-transform:uppercase; color:var(--vivo-forte);
}

.campo__linha{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--linha);
}
.campo__linha::after{
  content:""; position:absolute; inset:0; transform:scaleX(0);
  transform-origin:left; background:var(--vivo);
  transition:transform .4s var(--ease);
}
.campo input:focus ~ .campo__linha::after,
.campo select:focus ~ .campo__linha::after{ transform:scaleX(1); }
.campo.tem-erro .campo__linha{ background:#A8443C; }

.form__erro{
  margin:0 0 1.25rem; padding:.8rem 1rem;
  background:rgba(168,68,60,.08); border-left:2px solid #A8443C;
  font-size:.86rem; color:#7E332D;
}
.form__enviar{ width:100%; }
.form__nota{ margin:1.1rem 0 0; font-size:.76rem; line-height:1.55; color:var(--ink-soft); opacity:.75; }

/* ---------- rodapé ---------- */

.rodape{
  background:var(--taupe-deep); color:rgba(238,233,227,.8);
  padding:clamp(3.5rem,7vw,6rem) var(--pad) 2.5rem;
  border-top:1px solid rgba(238,233,227,.1);
}
.rodape__grid{
  max-width:var(--maxw); margin:0 auto 3rem;
  display:grid; gap:2.5rem 2rem;
  /* a marca precisa de largura pra não quebrar o nome nem o número do
     CREFITO; a coluna de procedimentos precisa pelos nomes longos */
  grid-template-columns:1.25fr 1.4fr .85fr .85fr;
}
.rodape__nome{
  font-family:var(--display); font-size:1.85rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream); margin:0 0 .4rem;
}
.rodape__role{
  margin:0; font-size:.64rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--nude);
}
.rodape__t{
  font-size:.66rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--nude); margin:0 0 1rem;
}
.rodape__col p{ margin:0 0 .6rem; font-size:.94rem; }
.rodape__col a{ text-decoration-color:var(--vivo); text-underline-offset:4px; }
.rodape__col a:hover{ color:var(--vivo); }
.rodape__lista{ list-style:none; margin:0; padding:0; }
.nao-quebra{ white-space:nowrap; }
.rodape__lista li{ margin:0 0 .55rem; }
.rodape__lista a{ font-size:.88rem; line-height:1.35; display:inline-block; }
.rodape__legal{
  max-width:var(--maxw); margin:0 auto 1.5rem;
  padding-top:2rem; border-top:1px solid rgba(238,233,227,.12);
  font-size:.78rem; line-height:1.6; color:rgba(238,233,227,.55);
}
.rodape__cc{
  max-width:var(--maxw); margin:0 auto;
  font-size:.72rem; letter-spacing:.06em; color:rgba(238,233,227,.4);
}

/* ---------- botão flutuante ---------- */

.flutuante{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:60;
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--vivo),var(--vivo-forte));
  color:#fff; box-shadow:0 10px 30px rgba(169,94,48,.42);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.flutuante svg{ width:30px; height:30px; fill:currentColor; position:relative; z-index:1; }
.flutuante:hover{ transform:scale(1.08); box-shadow:0 14px 38px rgba(169,94,48,.52); }
.flutuante__halo{
  position:absolute; inset:0; border-radius:50%;
  background:var(--vivo); opacity:.55;
  animation:pulso 2.6s var(--ease) infinite;
}
@keyframes pulso{
  0%   { transform:scale(1);   opacity:.5; }
  70%  { transform:scale(1.7); opacity:0; }
  100% { transform:scale(1.7); opacity:0; }
}

/* ---------- responsivo ---------- */

@media (max-width:1080px){
  .nav__menu{ gap:1.1rem; }
  .nav__menu a{ font-size:.68rem; }
  .trilha{ grid-template-columns:repeat(2,1fr); gap:2.5rem 2rem; }
  .trilha::before,.trilha::after{ display:none; }
}

@media (max-width:900px){
  :root{ --navh:7.2rem; }
  .nav{ flex-wrap:wrap; }
  .nav__toggle{ display:grid; }
  .nav__menu{
    display:none; order:3; width:100%; flex-direction:column; gap:0;
    border-top:1px solid var(--linha-clara); margin-top:.85rem;
  }
  .nav__menu.is-aberto{ display:flex; }
  .nav__menu a{
    padding:.95rem 0; font-size:.8rem; letter-spacing:.06em;
    border-bottom:1px solid rgba(238,233,227,.08);
  }
  .nav__menu a:hover{ border-bottom-color:rgba(238,233,227,.08); }

  .hero__inner{ grid-template-columns:1fr; }
  /* o título vem primeiro: com a foto em cima, ela tomava a tela inteira
     e a proposta ficava abaixo da dobra */
  .hero__foto{ max-width:300px; margin-inline:auto; }
  .hero__texto{ order:-1; }
  .hero__foto::after{ inset:1rem -1.2rem -1.2rem 1rem; }

  .proc__grid{ grid-template-columns:1fr; }
  .proc__mapa{ position:static; max-width:360px; margin-inline:auto; }

  .sobre__grid,
  .local__grid,
  .contato__grid{ grid-template-columns:1fr; }

  .result__grade{ grid-template-columns:repeat(2,1fr); }
  .result__rodape{ flex-direction:column; align-items:flex-start; gap:1.5rem; }
  .vozes__rodape{ flex-direction:column; align-items:flex-start; gap:1.5rem; }
  .rodape__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:620px){
  .nav__role{ display:none; }
  .nav__name{ font-size:.95rem; letter-spacing:.1em; }
  .nav__fim{ margin-left:auto; }
  .btn--sm{ padding:.55rem 1rem; font-size:.62rem; }
  .hero__actions .btn{ width:100%; }
  .trilha{ grid-template-columns:1fr; }
  .rodape__grid{ grid-template-columns:1fr; }
  .proc-item__reg{ display:none; }
  .result__grade{ grid-template-columns:1fr; gap:1rem; }
  .hero__foto::after{ display:none; }
  .particulas{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__lines path{ stroke-dashoffset:0; }
  .marquee__pista{ animation:none; }
  .etapa{ opacity:1; transform:none; }
  .form{ opacity:1; transform:none; }
  .p{ animation:none; opacity:0; }
  .hero__foto img{ clip-path:none; transform:none; animation:none; }
  .hero__foto::before,.hero__foto::after,.hero__foto .canto{ clip-path:none; opacity:1; animation:none; }
  .hero__texto > *{ animation:none; }
}

/* =========================================================
   Correções de toque e leitura em telas pequenas
   (achadas em bateria a 320, 375 e 812×375)
   ========================================================= */

/* 1. Em tela de toque não existe hover. Tudo que só aparecia no hover
      ficava invisível para sempre: o rótulo do Instagram e a pausa do vídeo. */
@media (hover:none){
  .result__marca{ opacity:1; transform:none; }
  .sobre__pausa{ opacity:1; }
  /* sem hover não dá para pausar o carrossel de depoimentos lendo — anda mais devagar */
  .marquee{ --duracao:96s; }
}

@media (max-width:900px){
  /* 2. Alvos de toque abaixo de 44px */
  .nav__toggle{ width:44px; height:44px; }
  .btn--sm{ min-height:44px; padding-block:.7rem; }
  .sobre__pausa{ width:44px; height:44px; }
  .campo input,
  .campo select{ padding-block:1rem .7rem; }
  .rodape__col a,
  .result__nota a{ display:inline-block; padding-block:.55rem; }
  /* a lista de procedimentos tem fonte menor; sem folga extra o alvo de
     toque ficava em 37px, abaixo dos 44 que o dedo pede */
  .rodape__lista a{ padding-block:.78rem; }
  .nav__mark{ padding-block:.6rem; }
  .circ{ width:48px; height:48px; }

  /* 3. Textos que ficavam entre 8 e 10.5px — pequenos demais para ler no celular */
  .btn--sm{ font-size:.7rem; }
  .hero__reg,
  .sobre__reg,
  .result__marca,
  .proc-item__reg,
  .voz__proc,
  .rodape__role,
  .rodape__t,
  .previa__rotulo,
  .contato__reg,
  .previa__hora{ font-size:.72rem; }
  .sobre__legenda{ font-size:.7rem; }
  .rodape__legal{ font-size:.82rem; }

  /* 4. Menu aberto tomava 57% da tela */
  .nav__menu a{ padding-block:.72rem; }
}