/* Kaê Estética e Saúde Integrativa — protótipo de prospecção (Ryan Schmidt).
   Identidade puxada dos posts públicos da @kaeclinica: azul-petróleo + creme,
   serifa expressiva (Fraunces) para as falas, sans limpa (Manrope) para o resto.
   Botão flat com preenchimento que desliza no hover. FAQ com cruz que gira. */

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
img,svg,iframe{ display:block; max-width:100% }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit; text-decoration:none }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }
}

/* ---------- tokens ---------- */
:root{
  --marca:#4E7887;
  --marca-fundo:#37535C;
  --marca-clara:#6E93A0;
  --creme:#EFEBE2;
  --creme-2:#E6E1D5;
  --branco:#F8F6F1;
  --dourado:#A98F68;
  --tinta:#26383D;
  --tinta-suave:#5B6B6E;
  --linha:rgba(38,56,61,0.14);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --container:1140px;
  --ease:cubic-bezier(.4,0,.2,1);
}

body{
  font-family:var(--sans);
  color:var(--tinta);
  background:var(--creme);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- tipografia ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.12; letter-spacing:-.012em; color:var(--tinta); text-wrap:balance }
p{ text-wrap:pretty }
h1{ font-size:clamp(2.1rem,5.2vw,3.35rem) }
h2{ font-size:clamp(1.7rem,3.6vw,2.5rem) }
h3{ font-size:1.16rem; line-height:1.3 }
h1 em,h2 em,h3 em{ font-style:italic; font-weight:500; color:var(--marca) }
p{ max-width:66ch }

.eyebrow{
  font-family:var(--sans);
  font-size:.76rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--marca-fundo);
  margin-bottom:1.1rem;
}

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:1.5rem }
.estreito{ max-width:720px }
.secao{ padding-block:clamp(3.75rem,8vw,6.5rem) }
.secao--creme2{ background:var(--creme-2) }
.secao--petroleo{ background:var(--marca-fundo); color:#DDE7E9 }
.secao--petroleo h2,.secao--petroleo h3{ color:#F2F5F5 }
.secao--petroleo h2 em{ color:#B7CDD1 }
.secao--petroleo .eyebrow{ color:#9FBEC2 }
.sec-cab{ max-width:640px; margin-bottom:2.75rem }
.sec-cab p{ color:var(--tinta-suave); margin-top:.85rem }
.secao--petroleo .sec-cab p{ color:#B9C9CB }

/* ---------- botões: flat + preenchimento que desliza ---------- */
.btn{
  --fill:var(--marca-fundo);
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.7rem; border-radius:8px;
  font-weight:700; font-size:.94rem; letter-spacing:.01em;
  background:var(--marca); color:var(--branco);
  border:1px solid var(--marca);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--fill);
  transform:translateX(-101%);
  transition:transform .45s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateX(0) }
.btn:hover,.btn:focus-visible{ border-color:var(--fill) }
.btn:focus-visible{ outline:2px solid var(--marca-fundo); outline-offset:3px }

.btn--ghost{
  background:transparent; color:var(--marca); border-color:currentColor;
  --fill:var(--marca);
}
.btn--ghost:hover,.btn--ghost:focus-visible{ color:var(--branco) }

.btn--claro{
  background:var(--branco); color:var(--marca-fundo); border-color:var(--branco);
  --fill:var(--dourado);
}
.btn--claro:hover,.btn--claro:focus-visible{ color:var(--branco) }

.btn--lg{ padding:1.1rem 2.1rem; font-size:1rem }

/* link com sublinhado que cresce */
.link-sub{
  color:var(--marca); font-weight:600;
  background-image:linear-gradient(var(--marca),var(--marca));
  background-size:0% 1.5px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .3s var(--ease);
  padding-bottom:2px;
}
.link-sub:hover{ background-size:100% 1.5px }

/* ---------- barra de protótipo ---------- */
.demo-bar{
  background:var(--marca-fundo); color:#D7E1E2;
  font-size:.76rem; line-height:1.45; text-align:center;
  padding:9px 1.5rem;
}
.demo-bar strong{ color:#fff; font-weight:700 }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(239,235,226,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:padding .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.nav__in{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:1.15rem;
}
.nav.is-scrolled{
  background:rgba(239,235,226,0.94);
  border-bottom-color:var(--linha);
}
.nav.is-scrolled .nav__in{ padding-block:.7rem }
.nav__logo{ display:flex; align-items:center; gap:.6rem }
.nav__logo img{ width:34px; height:34px }
.nav__logo b{ font-family:var(--serif); font-weight:600; font-size:1.22rem; letter-spacing:.01em }
.nav__logo-txt span{ display:block; font-size:.58rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--tinta-suave); margin-top:1px }
.nav__links{ display:flex; align-items:center; gap:2rem }
.nav__links a{ font-size:.9rem; font-weight:600; color:var(--tinta-suave); transition:color .2s }
.nav__links a:hover{ color:var(--marca) }
@media (max-width:900px){ .nav__links{ display:none } }

/* ---------- hero ---------- */
.hero{
  padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5rem);
  background:
    radial-gradient(680px 460px at 88% -10%, rgba(78,120,135,0.14), transparent 62%),
    radial-gradient(520px 380px at 6% 110%, rgba(169,143,104,0.12), transparent 60%);
}
.hero__grid{
  display:grid; grid-template-columns:1.03fr .97fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.hero__eyebrow{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem }
.hero__eyebrow .eyebrow{ margin:0 }
.hero p.lead{
  font-size:1.1rem; color:var(--tinta-suave); margin-top:1.4rem; max-width:52ch;
}
.hero__acoes{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem }
.hero__prova{
  display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2.25rem;
  padding-top:1.6rem; border-top:1px solid var(--linha);
}
.hero__prova-item{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:var(--tinta-suave) }
.hero__prova-item strong{ font-family:var(--serif); font-size:1.15rem; color:var(--tinta); font-weight:600 }
.hero__prova-item svg{ width:18px; height:18px; color:var(--dourado); flex:none }

.hero__foto{ position:relative }
.hero__foto .moldura{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 30px 70px -30px rgba(38,56,61,0.4);
}
.hero__foto img{ width:100%; height:100%; object-fit:cover; object-position:center }
@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; gap:2.5rem }
  .hero__foto{ order:-1; max-width:420px }
}

/* ---------- problema (editorial) ---------- */
.problema h2{ margin-bottom:1.5rem }
.problema p{ font-size:1.05rem; color:var(--tinta-suave); margin-bottom:1.1rem }
.problema .realce{
  font-family:var(--serif); font-style:italic; font-size:1.4rem;
  color:var(--marca); max-width:none; margin-top:1.75rem;
}

/* ---------- mecanismo: 3 camadas ---------- */
.mecanismo__grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.mecanismo__foto{ border-radius:14px; overflow:hidden; aspect-ratio:3/4 }
.mecanismo__foto img{ width:100%; height:100%; object-fit:cover; object-position:center 40% }
.camadas{ display:flex; flex-direction:column; gap:0 }
.camada{ padding:1.4rem 0; border-top:1px solid var(--linha) }
.camada:last-child{ border-bottom:1px solid var(--linha) }
.camada h3{ margin-bottom:.35rem }
.camada h3 span{ font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--marca-fundo); display:block; margin-bottom:.4rem }
.camada p{ color:var(--tinta-suave); font-size:.97rem }
.mecanismo__nome{
  margin-top:2rem; font-size:.92rem; color:var(--tinta-suave);
}
.mecanismo__nome b{ color:var(--tinta); font-weight:700 }
@media (max-width:820px){ .mecanismo__grid{ grid-template-columns:1fr } .mecanismo__foto{ max-width:360px; order:-1 } }

/* ---------- serviços ---------- */
.servicos__lista{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 3rem }
.servico{ padding:1.7rem 0; border-top:1px solid var(--linha) }
.servico h3{ margin-bottom:.5rem; color:var(--marca-fundo) }
.servico p{ color:var(--tinta-suave); font-size:.95rem }
@media (max-width:720px){ .servicos__lista{ grid-template-columns:1fr; gap:0 } }

/* ---------- resultados (antes/depois) ---------- */
.resultados{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.resultados figure{ margin:0 }
.resultados__foto{ aspect-ratio:4/5; border-radius:14px; overflow:hidden; background:var(--branco) }
.resultados__foto img{ width:100%; height:100%; object-fit:cover; object-position:center }
.resultados figcaption{ margin-top:.7rem; font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--tinta-suave) }
@media (max-width:720px){ .resultados{ grid-template-columns:1fr 1fr; gap:1rem } }

/* ---------- prova / avaliações ---------- */
.prova__topo{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.5rem }
.prova__nota{ display:flex; align-items:center; gap:.8rem }
.prova__nota .num{ font-family:var(--serif); font-size:3rem; font-weight:600; line-height:1; color:var(--tinta) }
.prova__estrelas{ display:flex; gap:2px; color:var(--dourado) }
.prova__estrelas svg{ width:18px; height:18px }
.prova__nota span{ font-size:.9rem; color:var(--tinta-suave) }

.dep-faixa{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) }
.dep-trilha{ display:flex; gap:1.25rem; width:max-content; animation:desliza 46s linear infinite }
.dep-faixa:hover .dep-trilha{ animation-play-state:paused }
@keyframes desliza{ to{ transform:translateX(-50%) } }
.dep{
  flex:0 0 clamp(280px,34vw,380px);
  background:var(--branco); border:1px solid var(--linha);
  border-radius:14px; padding:1.5rem;
}
.dep p{ font-size:.95rem; color:var(--tinta); margin-bottom:.9rem }
.dep footer{ font-size:.82rem; color:var(--tinta-suave); font-weight:600 }
.dep footer::before{ content:"★ "; color:var(--dourado) }
.prova__link{ margin-top:2rem }
@media (prefers-reduced-motion: reduce){
  .dep-trilha{ animation:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:auto }
  .dep-faixa{ -webkit-mask-image:none; mask-image:none; padding-inline:1.5rem }
  .dep{ flex:none }
  .dep--dup{ display:none }
}
@media (prefers-reduced-motion: reduce) and (max-width:900px){
  .dep-trilha{ grid-template-columns:1fr 1fr }
}
@media (prefers-reduced-motion: reduce) and (max-width:600px){
  .dep-trilha{ grid-template-columns:1fr }
}

/* ---------- sobre a Dra. Érica ---------- */
.sobre h2{ margin-bottom:1rem }
.sobre p{ color:var(--tinta-suave); margin-top:1rem }
.sobre__equipe{ margin-top:1.75rem; padding-top:1.4rem; border-top:1px solid var(--linha); font-size:.9rem; color:var(--tinta-suave) }
.sobre__equipe b{ color:var(--tinta) }

/* ---------- FAQ com cruz que gira ---------- */
.faq{ display:flex; flex-direction:column }
.faq__item{ border-top:1px solid var(--linha) }
.faq__item:last-child{ border-bottom:1px solid var(--linha) }
.faq__toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.35rem 0; text-align:left;
  font-family:var(--serif); font-size:1.08rem; font-weight:600; color:var(--tinta);
}
.faq__icon{ position:relative; width:16px; height:16px; flex:none; transition:transform .3s var(--ease) }
.faq__icon::before,.faq__icon::after{
  content:""; position:absolute; background:var(--marca); border-radius:2px;
}
.faq__icon::before{ top:50%; left:0; width:100%; height:2px; transform:translateY(-50%) }
.faq__icon::after{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%) }
.faq__item.is-open .faq__icon{ transform:rotate(45deg) }
.faq__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease) }
.faq__item.is-open .faq__panel{ grid-template-rows:1fr }
.faq__panel-inner{ overflow:hidden }
.faq__panel-inner p{ padding-bottom:1.35rem; color:var(--tinta-suave); font-size:.97rem }

/* ---------- onde fica ---------- */
.local{
  display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:stretch;
}
.local__info{
  background:var(--branco); border:1px solid var(--linha);
  border-radius:16px; padding:clamp(1.5rem,3vw,2.25rem);
  display:flex; flex-direction:column;
}
.local__info h2{ font-size:clamp(1.5rem,3vw,2rem) }
.local__info p{ color:var(--tinta-suave); margin-top:.85rem }
.local__dados{ display:flex; flex-direction:column; gap:.15rem; margin-block:1.5rem; font-size:.9rem; color:var(--tinta-suave) }
.local__dados b{ display:block; color:var(--tinta); font-weight:700; margin-bottom:.2rem }
.local__info .btn{ margin-top:auto; align-self:flex-start }
.local__mapa{
  display:flex;
  background:var(--marca-fundo);
  border-radius:16px;
  padding:8px;
  min-height:330px;
  box-shadow:0 22px 50px -24px rgba(38,56,61,0.5);
}
.local__mapa-inner{
  flex:1; min-height:300px;
  border-radius:10px; overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(129,164,176,0.55),
    0 0 22px 2px rgba(129,164,176,0.60),
    0 0 46px 8px rgba(129,164,176,0.32);
}
.local__mapa-inner iframe{ width:100%; height:100%; min-height:300px; border:0; display:block }
@media (max-width:820px){ .local{ grid-template-columns:1fr } }

/* ---------- CTA final ---------- */
.fechamento{ padding-bottom:clamp(4rem,9vw,7rem) }
.fecho-card{
  background:var(--marca-fundo); color:#E4EBEC;
  border-radius:20px; padding:clamp(2.25rem,5vw,3.75rem);
  text-align:center;
  background-image:radial-gradient(480px 300px at 50% -20%, rgba(169,143,104,0.22), transparent 60%);
}
.fecho-card h2{ color:#fff }
.fecho-card h2 em{ color:#C6B79C }
.fecho-card p{ max-width:44ch; margin:1rem auto 2rem; color:#B9C9CB }

/* ---------- rodapé ---------- */
.rodape{ background:var(--creme-2); border-top:1px solid var(--linha); padding-block:3rem }
.rodape__in{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem }
.rodape__marca{ display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem }
.rodape__marca img{ width:38px; height:38px }
.rodape__marca b{ font-family:var(--serif); font-size:1.2rem; font-weight:600 }
.rodape p,.rodape a{ font-size:.86rem; color:var(--tinta-suave); line-height:1.75 }
.rodape a:hover{ color:var(--marca) }
.rodape__lbl{ font-size:.72rem!important; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta)!important; margin-bottom:.5rem }
.rodape__nota{
  grid-column:1/-1; margin-top:1.5rem; padding-top:1.4rem; border-top:1px solid var(--linha);
  font-size:.74rem!important; color:var(--tinta-suave); max-width:70ch;
}
@media (max-width:720px){ .rodape__in{ grid-template-columns:1fr 1fr } .rodape__marca{ grid-column:1/-1 } }

/* ---------- WhatsApp flutuante ---------- */
.zap{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:60;
  width:80px; height:80px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--marca); color:#fff;
  box-shadow:0 12px 30px -8px rgba(38,56,61,0.55);
  transition:transform .3s var(--ease);
}
.zap::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--marca);
  animation:pulso 2.6s ease-out infinite;
}
.zap:hover{ transform:scale(1.06) }
.zap svg{ width:38px; height:38px }
@keyframes pulso{ 0%{ transform:scale(1); opacity:.7 } 70%{ transform:scale(1.5); opacity:0 } 100%{ opacity:0 } }
@media (max-width:600px){ .zap{ width:68px; height:68px; right:1rem; bottom:1rem } .zap svg{ width:32px; height:32px } }
@media (prefers-reduced-motion: reduce){ .zap::after{ animation:none; opacity:0 } }

/* ---------- reveal (estado inicial; GSAP assume quando há JS) ---------- */
.js [data-reveal],.js [data-reveal-group] > *{ opacity:0 }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal],.js [data-reveal-group] > *{ opacity:1 }
}