/* ==========================================================================
   Dra. Lanna Gomes — sistema visual
   Direção: editorial médico. Marfim de papel, verde profundo como estrutura,
   terracota da marca como acento. Serifa com caráter + grotesca humanista.
   ========================================================================== */

/* ------------------------------------------------------------ tokens */
:root{
  /* superfícies */
  --ivory:      #FAF6F1;
  --ivory-2:    #F3ECE4;
  --paper:      #FFFDFB;
  --blush:      #F6E7DC;

  /* estrutura */
  --forest:     #22302A;
  --forest-2:   #1A2621;
  --forest-3:   #34443C;

  /* marca */
  --terra:      #BE5630;
  --terra-d:    #9C4322;
  --terra-l:    #E0A184;

  /* texto */
  --ink:        #1F1A16;
  --body:       #5A5049;
  --muted:      #8C8078;
  --line:       #E4D9CE;
  --line-dark:  rgba(250,246,241,.16);

  /* métrica */
  --wrap:       1200px;
  --wrap-text:  720px;
  --gut:        clamp(20px, 5vw, 64px);
  --sec:        clamp(84px, 12vw, 168px);
  --radius:     2px;

  /* tipos */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:    "Karla", "Segoe UI", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--body);
  font-family:var(--sans);
  font-size:clamp(17px,1.08vw,18.5px);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  margin:0; font-family:var(--display); color:var(--ink); font-weight:400;
  line-height:1.1; letter-spacing:-.012em;
  /* nenhuma palavra sozinha na última linha de um título */
  text-wrap:balance;
}
p,li,figcaption{ text-wrap:pretty; }
p{ margin:0 0 1.1em; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--terra); color:#fff; }

/* grão de papel sobre tudo */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9;
  opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- utilidades */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:var(--wrap-text); }
.section{ padding-block:var(--sec); }
.section--tight{ padding-block:clamp(52px,7vw,92px); }

.eyebrow{
  font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--terra);
  display:flex; align-items:center; gap:.75em; margin-bottom:1.4em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--terra); opacity:.7; flex:none; }
.eyebrow--center{ justify-content:center; }

.h-xl{ font-size:clamp(2.6rem,6.4vw,4.6rem); font-variation-settings:"SOFT" 18,"WONK" 1,"opsz" 40; }
.h-lg{ font-size:clamp(2rem,4.2vw,3.05rem); font-variation-settings:"SOFT" 14,"opsz" 32; }
/* títulos longos (landing pages): corpo menor evita palavra sozinha na linha */
.h-xl--long{ font-size:clamp(2.05rem,4.3vw,3.35rem); line-height:1.14; }
.h-md{ font-size:clamp(1.45rem,2.5vw,1.95rem); font-variation-settings:"SOFT" 10,"opsz" 24; }
.h-sm{ font-size:clamp(1.12rem,1.6vw,1.3rem); font-variation-settings:"opsz" 18; }

.lede{ font-size:clamp(1.13rem,1.6vw,1.34rem); line-height:1.6; color:var(--body); }
.muted{ color:var(--muted); }
.serif-quote{ font-family:var(--display); font-style:italic; font-variation-settings:"SOFT" 20,"opsz" 20; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ------------------------------------------------------------- botões */
.btn{
  --bg:var(--terra); --fg:#fff;
  display:inline-flex; align-items:center; gap:.7em;
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:1rem; font-weight:700; letter-spacing:.01em;
  padding:1.02em 1.7em; border:1px solid var(--bg); border-radius:100px;
  text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.btn svg{ flex:none; transition:transform .35s var(--ease); }
.btn:hover{ background:var(--terra-d); border-color:var(--terra-d); transform:translateY(-2px); }
.btn:hover svg{ transform:translateX(3px); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--ivory); }
.btn--light{ --bg:var(--ivory); --fg:var(--forest); }
.btn--light:hover{ background:#fff; border-color:#fff; color:var(--forest); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:700; font-size:.95rem; letter-spacing:.02em;
  color:var(--terra); text-decoration:none; padding-bottom:.25em;
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow:hover{ border-color:var(--terra); gap:.85em; }

/* --------------------------------------------------------------- topo */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(250,246,241,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease);
}
.topbar.is-stuck{ box-shadow:0 1px 24px rgba(34,48,42,.07); }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:clamp(66px,7vw,84px); }
.brand{ display:flex; align-items:baseline; gap:.6rem; text-decoration:none; line-height:1; }
.brand__name{ font-family:var(--display); font-size:clamp(1.06rem,1.5vw,1.24rem); color:var(--ink); font-variation-settings:"SOFT" 14,"opsz" 20; letter-spacing:-.01em; white-space:nowrap; }
.brand__tag{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:700; white-space:nowrap; }
@media (max-width:1300px){ .brand__tag{ display:none; } }
.nav{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.1rem); }
.nav__links{ display:flex; align-items:center; gap:clamp(.9rem,1.8vw,1.7rem); }
.nav a{
  font-size:.87rem; font-weight:600; letter-spacing:.01em; color:var(--body);
  text-decoration:none; padding:.3em 0; position:relative; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--terra); transition:right .38s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ right:0; }
.nav a[aria-current="page"]{ color:var(--ink); }
/* `.nav a` é mais específico que `.btn` e estava pintando o CTA do topo com a
   cor de link, além de herdar o sublinhado animado das abas. */
.topbar .btn{ padding:.8em 1.4em; font-size:.88rem; color:var(--fg); }
.topbar .btn::after{ content:none; }
.navtoggle{ display:none; background:none; border:0; padding:.62rem; cursor:pointer; color:var(--ink); }

@media (max-width:900px){
  .nav__links{
    position:fixed; inset:auto 0 0 0; top:var(--topbar-h,74px);
    background:var(--ivory); border-top:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:.5rem var(--gut) 2rem;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
    display:flex; height:auto;
  }
  .nav__links.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav__links a{ width:100%; padding:1.05rem 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .navtoggle{ display:block; }
  .topbar .btn--nav{ display:none; }
}

/* --------------------------------------------------------------- hero */
.hero{ position:relative; padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,110px); overflow:hidden; }
.hero::before{
  content:""; position:absolute; z-index:0; top:-14%; right:-16%;
  width:min(760px,72vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(224,161,132,.30), rgba(224,161,132,0) 62%);
  pointer-events:none;
}
.hero__in{ position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,76px); align-items:center; }
.hero__kicker{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--forest-3); margin-bottom:1.7rem; display:flex; align-items:center; gap:.7em; flex-wrap:wrap;
}
.hero__kicker span{ color:var(--terra); }
.hero h1{ margin-bottom:1.1rem; }
.hero__sub{ max-width:37em; margin-bottom:2.1rem; }
.hero__actions{ display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; margin-bottom:1.9rem; }
.hero__place{
  display:flex; align-items:center; gap:.6em; flex-wrap:wrap;
  font-size:.9rem; letter-spacing:.05em; color:var(--muted);
  padding-top:1.35rem; border-top:1px solid var(--line);
}
.hero__place strong{ color:var(--ink); font-weight:700; letter-spacing:.02em; }
.hero__place .dot{ color:var(--terra-l); }

/* retrato em arco */
.portrait{ position:relative; }
.portrait__frame{
  position:relative; border-radius:210px 210px 8px 8px; overflow:hidden;
  aspect-ratio:4/5; background:var(--ivory-2);
  box-shadow:0 30px 70px -34px rgba(34,48,42,.5);
}
.portrait__frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.portrait::after{
  content:""; position:absolute; inset:26px -22px -22px 26px;
  border:1px solid var(--terra-l); opacity:.5;
  border-radius:190px 190px 6px 6px; z-index:-1; pointer-events:none;
}
.portrait__badge{
  position:absolute; left:-14px; bottom:34px; z-index:2;
  background:var(--paper); border:1px solid var(--line);
  padding:.85rem 1.15rem; border-radius:3px;
  box-shadow:0 16px 34px -20px rgba(34,48,42,.4);
}
.portrait__badge b{ display:block; font-family:var(--display); font-size:1.5rem; color:var(--terra); line-height:1; font-variation-settings:"SOFT" 20; }
.portrait__badge span{ display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-top:.35em; }

/* variante retangular, para retratos secundários */
.portrait--plain .portrait__frame{ border-radius:4px; }
.portrait--plain::after{ border-radius:4px; inset:26px -22px -22px 26px; }

@media (max-width:880px){
  .hero__in{ grid-template-columns:1fr; gap:40px; }
  .portrait{ max-width:420px; margin-inline:auto; width:100%; }
  .portrait__frame{ border-radius:170px 170px 8px 8px; }
}

/* --------------------------------------------------- faixa credencial */
.credbar{ background:var(--forest); color:rgba(250,246,241,.9); }
.credbar ul{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.65rem clamp(1rem,2.6vw,2.2rem);
  padding-block:1.15rem;
  font-size:.86rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600;
}
.credbar li{ display:flex; align-items:center; gap:clamp(1rem,2.6vw,2.2rem); }
.credbar li+li::before{ content:""; width:3px; height:3px; border-radius:50%; background:var(--terra-l); opacity:.75; }
.credbar strong{ color:#fff; font-weight:700; }

/* ------------------------------------------------------------- blocos */
.grid-2{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,84px); align-items:start; }
.grid-2--even{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,84px); align-items:center;
}
@media (max-width:860px){ .grid-2,.grid-2--even{ grid-template-columns:1fr; gap:28px; } }

.stack-lg > * + *{ margin-top:1.15em; }

.pullquote{
  font-family:var(--display); font-size:clamp(1.3rem,2.3vw,1.75rem); line-height:1.34;
  color:var(--ink); font-variation-settings:"SOFT" 18,"WONK" 1,"opsz" 28;
  border-left:2px solid var(--terra); padding-left:clamp(18px,2.4vw,30px); margin:2.2rem 0 0;
}

/* cards das três frentes */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.7vw,22px); }
@media (max-width:900px){ .cards{ grid-template-columns:1fr; } }
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:clamp(30px,3.2vw,44px); display:flex; flex-direction:column; gap:.85rem;
  position:relative; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--terra);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -34px rgba(34,48,42,.42); border-color:var(--line); }
.card:hover::before{ transform:scaleX(1); }
.card__num{ font-family:var(--display); font-size:.82rem; letter-spacing:.2em; color:var(--terra); font-weight:700; }
.card p{ margin:0; font-size:1.05rem; }
.card .link-arrow{ margin-top:auto; padding-top:.9rem; }

/* método — numerais grandes */
.method{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(26px,3.4vw,52px); }
@media (max-width:760px){ .method{ grid-template-columns:1fr; } }
.method__item{ display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2vw,26px); align-items:start; }
.method__n{
  font-family:var(--display); font-size:clamp(2.1rem,3.4vw,2.9rem); line-height:.86;
  color:var(--terra-l); font-variation-settings:"SOFT" 20,"WONK" 1;
}
.method__item h3{ margin-bottom:.45rem; }
.method__item p{ margin:0; font-size:1.03rem; }

/* passos numerados */
.steps{ counter-reset:s; display:grid; gap:0; border-top:1px solid var(--line); }
.step{
  counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,2.6vw,40px);
  padding-block:clamp(22px,2.8vw,34px); border-bottom:1px solid var(--line); align-items:baseline;
}
.step::before{
  content:"0" counter(s); font-family:var(--display); font-size:1rem; letter-spacing:.06em;
  color:var(--terra); padding-top:.15em;
}
.step h3{ margin-bottom:.35rem; }
.step p{ margin:0; font-size:1.04rem; max-width:52em; }

/* lista de checagem */
.checks{ display:grid; gap:1rem; }
/* traço posicionado, não célula de grid: mantém <strong> e texto no mesmo fluxo */
.checks li{ position:relative; padding-left:34px; font-size:1.07rem; }
.checks li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:16px; height:1px; background:var(--terra);
}
.checks strong{ color:var(--ink); font-weight:700; }
/* duas colunas sem fragmentar os itens (CSS columns quebraria o grid) */
.checks--2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem clamp(26px,4vw,60px); }
@media (max-width:760px){ .checks--2{ grid-template-columns:1fr; } }

/* painel destacado */
.panel{
  background:var(--blush); border-radius:4px;
  padding:clamp(30px,4.4vw,62px);
}
.panel--paper{ background:var(--paper); border:1px solid var(--line); }

/* seção escura */
.dark{ background:var(--forest); color:rgba(250,246,241,.82); }
.dark h1,.dark h2,.dark h3{ color:var(--paper); }
.dark p,.dark .lede,.dark li{ color:rgba(250,246,241,.78); }
.dark .pullquote{ color:var(--paper); border-left-color:var(--terra-l); }
.dark .eyebrow{ color:var(--terra-l); }
.dark .eyebrow::before{ background:var(--terra-l); }
.dark .rule{ background:var(--line-dark); }
.dark .checks li::before{ background:var(--terra-l); }
.dark .checks strong{ color:var(--paper); }
.dark .muted{ color:rgba(250,246,241,.55); }

/* ==========================================================================
   Avaliações do Google
   Cartões no formato reconhecível do Google, na paleta do site. No desktop a
   fita anda sozinha e para quando o mouse entra (ou quando o teclado foca um
   cartão). No toque não existe hover, então vira rolagem nativa com snap —
   e aí a duplicata dos cartões não é criada, para não repetir conteúdo.
   ========================================================================== */
.revsum{
  display:flex; align-items:center; gap:clamp(14px,2vw,22px); flex-wrap:wrap;
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,30px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:clamp(26px,3.2vw,40px);
}
.revsum__nota{
  font-family:var(--display); font-size:clamp(2.1rem,3.6vw,2.9rem); line-height:1;
  color:var(--ink); font-variation-settings:"SOFT" 14,"opsz" 40;
}
.revsum__meio{ display:flex; flex-direction:column; gap:.3rem; margin-right:auto; }
.revsum__conta{ font-size:.97rem; color:var(--body); }
.revsum__conta b{ color:var(--ink); font-weight:700; }
.revsum .btn{ font-size:.92rem; padding:.85em 1.5em; }

.stars{ display:inline-flex; gap:2px; }
.stars svg{ width:16px; height:16px; flex:none; color:#F0A73B; }
.revsum .stars svg{ width:19px; height:19px; }

.revs{ position:relative; }
/* as bordas somem em degradê nas laterais, para a fita não "cortar" no seco */
.revs::before, .revs::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(18px,3vw,46px);
  z-index:2; pointer-events:none;
}
.revs::before{ left:0; background:linear-gradient(90deg,var(--ivory),transparent); }
.revs::after{ right:0; background:linear-gradient(270deg,var(--ivory),transparent); }

.revs__viewport{ overflow:hidden; }
.revs__track{
  display:flex; align-items:flex-start; gap:clamp(16px,2vw,24px); list-style:none;
  margin:0; padding:4px 0; width:max-content;
}
@keyframes revs-roll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.rev{
  width:min(23rem,82vw); flex:none;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; gap:.85rem;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.rev:hover{ border-color:var(--terra-l); box-shadow:0 20px 40px -30px rgba(34,48,42,.4); }
.rev__top{ display:flex; align-items:center; gap:.75rem; }
.rev__avatar{
  width:40px; height:40px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--av,#8C8078); color:#fff;
  font-weight:700; font-size:1.05rem; line-height:1;
}
.rev__quem{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.rev__nome{ font-size:1rem; color:var(--ink); font-weight:700; }
.rev__src{ font-size:.76rem; letter-spacing:.06em; color:var(--muted); }
.rev__g{ width:18px; height:18px; flex:none; margin-left:auto; }
.rev__texto{
  margin:0; font-size:1.01rem; line-height:1.62; color:var(--body);
  overflow-wrap:break-word;
}

@media (hover:hover){
  .revs__track.is-looping{ animation:revs-roll 64s linear infinite; }
  .revs:hover .revs__track.is-looping,
  .revs:focus-within .revs__track.is-looping{ animation-play-state:paused; }
}
@media (hover:none){
  .revs__viewport{
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
  }
  .revs__viewport::-webkit-scrollbar{ display:none; }
  .rev{ scroll-snap-align:center; }
  .revs::before, .revs::after{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .revs__track.is-looping{ animation:none; }
  .revs__viewport{ overflow-x:auto; }
}
@media (max-width:560px){
  .revsum{ flex-direction:column; align-items:flex-start; }
  .revsum .btn{ width:100%; justify-content:center; }
}

/* FAQ */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding-block:clamp(19px,2.2vw,26px);
  display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:center;
  font-family:var(--display); font-size:clamp(1.06rem,1.5vw,1.22rem); color:var(--ink);
  font-variation-settings:"opsz" 18; transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--terra); }
.faq summary::after{
  content:""; width:11px; height:11px; flex:none;
  border-right:1.5px solid var(--terra); border-bottom:1.5px solid var(--terra);
  transform:rotate(45deg) translateY(-3px); transition:transform .35s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translateY(-3px); }
.faq__a{ padding-bottom:clamp(20px,2.4vw,30px); max-width:60em; }
.faq__a p{ margin:0; }

/* CTA final */
.cta{ background:var(--forest); color:rgba(250,246,241,.84); text-align:center; position:relative; overflow:hidden; }
.cta::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:120%;
  background:radial-gradient(ellipse at 50% 0%, rgba(190,86,48,.28), transparent 60%);
}
.cta__in{ position:relative; z-index:1; max-width:640px; margin-inline:auto; }
.cta h2{ color:var(--paper); margin-bottom:1rem; }
.cta p{ margin-bottom:2rem; }
.cta__note{ font-size:.96rem; color:rgba(250,246,241,.6); margin:1.4rem 0 0; }

/* ------------------------------------------------------------- rodapé */
.footer{ background:var(--forest-2); color:rgba(250,246,241,.66); font-size:1rem; }
.footer a{ color:rgba(250,246,241,.78); text-decoration:none; transition:color .3s var(--ease); }
.footer a:hover{ color:var(--terra-l); }
.footer__grid{
  display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:clamp(28px,4vw,56px);
  padding-block:clamp(48px,6vw,76px);
}
@media (max-width:820px){ .footer__grid{ grid-template-columns:1fr; gap:34px; } }
.footer h4{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terra-l); font-weight:700; margin-bottom:1.15rem;
}
.footer ul li{ margin-bottom:.6rem; }
/* identificação CFM */
.crm{ line-height:1.75; }
.crm b{ display:block; font-family:var(--display); font-size:1.22rem; color:var(--paper); font-variation-settings:"SOFT" 14; margin-bottom:.35rem; }
.crm .role{ display:block; font-size:.73rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:rgba(250,246,241,.72); }
.footer__legal{
  border-top:1px solid var(--line-dark); padding-block:1.6rem 2.2rem;
  display:flex; justify-content:space-between; gap:1.4rem; flex-wrap:wrap;
  font-size:.84rem; color:rgba(250,246,241,.46); line-height:1.65;
}
.footer__legal p{ margin:0; max-width:70ch; }

/* WhatsApp flutuante */
.wa{
  position:fixed; right:clamp(14px,2.2vw,26px); bottom:clamp(14px,2.2vw,26px); z-index:70;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 12px 30px -10px rgba(37,211,102,.6);
  transition:transform .35s var(--ease);
}
.wa:hover{ transform:scale(1.07); }

/* ------------------------------------------------------- reveal/motion */
/* o reveal só existe quando o JS assume a página; sem JS, tudo aparece */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s; }
.reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; }
.reveal[data-d="4"]{ transition-delay:.36s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   CAMADA DE INTERAÇÃO
   Movimento com propósito: guia o olho, marca hierarquia e dá vida sem
   transformar um site médico em vitrine. Tudo desligado em reduced-motion.
   ========================================================================== */

/* --- contraste correto no bloco de CTA escuro ------------------------- */
.cta p,.cta .lede{ color:rgba(250,246,241,.8); }
.cta .eyebrow{ color:var(--terra-l); }
.cta .eyebrow::before{ background:var(--terra-l); }

/* --- barra de progresso de leitura ------------------------------------ */
.progress{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--terra),var(--terra-l));
  transform:scaleX(var(--p,0)); transform-origin:left;
  transition:transform .12s linear;
}

/* --- título revelado palavra a palavra -------------------------------- */
.js .split .w{
  display:inline-block;
  opacity:0; transform:translateY(.42em);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay:calc(var(--i,0) * 42ms);
}
.js .split.is-in .w{ opacity:1; transform:none; }

/* --- números que contam e acendem ------------------------------------- */
.counter{ font-variant-numeric:tabular-nums; }
.portrait__badge{
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.portrait__badge b{ position:relative; }
.js .portrait__badge.is-lit b{
  animation:glow 1.5s var(--ease) .15s both;
}
@keyframes glow{
  0%   { text-shadow:0 0 0 rgba(190,86,48,0); }
  35%  { text-shadow:0 0 22px rgba(190,86,48,.55); }
  100% { text-shadow:0 0 0 rgba(190,86,48,0); }
}

/* --- aurora lenta nas seções escuras ---------------------------------- */
.dark, .cta{ position:relative; isolation:isolate; }
.dark::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 52% at 18% 12%, rgba(190,86,48,.20), transparent 68%),
    radial-gradient(42% 46% at 88% 82%, rgba(224,161,132,.14), transparent 70%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-3%,2%,0) scale(1.08); }
}

/* --- holofote que segue o cursor -------------------------------------- */
.spot{ position:relative; }
.spot::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(224,161,132,.13), transparent 62%);
  opacity:0; transition:opacity .5s var(--ease);
}
.spot:hover::before{ opacity:1; }
.spot > *{ position:relative; z-index:1; }

/* --- cards: borda que se desenha + elevação --------------------------- */
.card{ transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease); }
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .45s var(--ease);
}
.card:hover::after{ box-shadow:inset 0 0 0 1px rgba(190,86,48,.22); }
.card:hover .card__num{ color:var(--terra-d); }
.card__num{ transition:color .4s var(--ease), letter-spacing .4s var(--ease); }
.card:hover .card__num{ letter-spacing:.26em; }

/* --- método: numeral que preenche no hover ---------------------------- */
.method__item{ transition:transform .45s var(--ease); }
.method__n{ transition:color .45s var(--ease), transform .45s var(--ease); display:inline-block; }
.method__item:hover .method__n{ color:var(--terra); transform:translateY(-3px); }

/* --- listas que acendem item a item ----------------------------------- */
.js .checks li{
  opacity:0; transform:translateX(-8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.js .checks.is-in li{ opacity:1; transform:none; }
.checks li::before{ transition:width .4s var(--ease), background .4s var(--ease); }
.checks li:hover::before{ width:30px; }

/* --- passos: régua que se ilumina -------------------------------------- */
.step{ position:relative; transition:background .4s var(--ease); }
.step::after{
  content:""; position:absolute; left:0; bottom:-1px; width:0; height:1px;
  background:var(--terra); transition:width .6s var(--ease);
}
.step:hover::after{ width:100%; }
.step:hover::before{ color:var(--terra-d); }

/* --- faixa de credenciais: entrada escalonada -------------------------- */
.js .credbar li{
  opacity:0; transform:translateY(6px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms);
}
.js .credbar.is-in li{ opacity:1; transform:none; }

/* --- respiro extra em telas grandes ------------------------------------ */
@media (min-width:1100px){
  .section > .wrap > .cards{ margin-top:.5rem; }
}

/* --- ajustes finos de mobile ------------------------------------------- */
@media (max-width:640px){
  :root{ --sec:clamp(64px,15vw,96px); }
  .h-xl{ font-size:clamp(2.35rem,9.2vw,3.1rem); line-height:1.06; }
  .h-lg{ font-size:clamp(1.85rem,7.4vw,2.4rem); }
  .lede{ font-size:1.18rem; }
  .hero{ padding-block:34px 52px; }
  .hero__actions{ gap:1rem; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .hero__place{ font-size:.86rem; line-height:1.7; }
  .credbar ul{ justify-content:flex-start; font-size:.92rem; letter-spacing:.02em; gap:.6rem 1rem; padding-block:1.4rem; }
  .method__item{ grid-template-columns:1fr; gap:.5rem; }
  .method__n{ font-size:1.6rem; }
  .step{ grid-template-columns:1fr; gap:.35rem; }
  .step::before{ font-size:.95rem; }
  .panel{ padding:26px 22px; }
  .pullquote{ font-size:1.18rem; margin-top:1.6rem; }
  .faq summary{ gap:1rem; }
  .wa{ width:52px; height:52px; }
  .footer__legal{ flex-direction:column; gap:.8rem; }
}


/* ==========================================================================
   Identificação profissional (Res. CFM 2.336/2023, art. 4º)
   ========================================================================== */
.idcard{ text-align:center; max-width:34rem; margin-inline:auto; }
.idcard__name{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.55rem,2.4vw,2rem); line-height:1.15;
  color:var(--ink); margin:1rem 0 .8rem;
}
.idcard__line{ margin:0 0 .35rem; font-size:1.02rem; color:var(--body); }
.idcard__line:last-child{ margin-bottom:0; }
.idcard__line .dot{ color:var(--terra); }

/* ==========================================================================
   Formulário de contato — vive dentro do bloco escuro de CTA.
   Sem JS ele não aparece (noscript no <head>): o botão do WhatsApp logo
   acima continua sendo o caminho, e nunca prometemos um envio que não ocorre.
   ========================================================================== */
.leadform{
  margin:clamp(30px,4vw,46px) auto 0;
  padding-top:clamp(26px,3.4vw,38px);
  border-top:1px solid var(--line-dark);
  text-align:left;
}
.cta .leadform__intro{
  margin:0 0 1.3rem; text-align:center;
  font-size:.98rem; color:rgba(250,246,241,.72);
}
.leadform__row{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:560px){ .leadform__row{ grid-template-columns:1fr; } }
.leadform__field{ display:block; }
.leadform__field > span{
  display:block; margin-bottom:.5rem;
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(250,246,241,.62);
}
.leadform input{
  width:100%; font:inherit; font-size:1rem; color:var(--paper);
  background:rgba(250,246,241,.06);
  border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:.9rem 1rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.leadform input::placeholder{ color:rgba(250,246,241,.34); }
.leadform input:focus{
  outline:none; border-color:var(--terra-l); background:rgba(250,246,241,.1);
}
.leadform input[aria-invalid="true"]{ border-color:var(--terra-l); }
.leadform__send{ margin-top:1.2rem; width:100%; justify-content:center; }
.leadform__send[disabled]{ opacity:.6; cursor:progress; }
.cta .leadform__msg{
  margin:1.1rem 0 0; text-align:center;
  font-size:1rem; color:var(--terra-l);
}
.leadform.is-sent .leadform__intro,
.leadform.is-sent .leadform__row,
.leadform.is-sent .leadform__send{ display:none; }
.cta .leadform.is-sent .leadform__msg{ color:rgba(250,246,241,.88); font-size:1.06rem; margin-top:0; }
