/* Dra. Renata Ferreira — Estética Avançada (protótipo de prospecção).
   Identidade clara e quente: dourado sobre creme. Tema claro travado,
   sem @media prefers-color-scheme (a marca dela é inequivocamente clara). */

:root{
  --cream:      #FAF6EF;
  --cream-deep: #F1E7D5;
  --surface:    #FFFFFF;
  --ink:        #33291F;
  --ink-soft:   #5C4F42;
  --ink-faint:  #786A58;
  --gold:       #B4894A;
  --gold-deep:  #8A5E24;
  --gold-wash:  #ECDDC1;
  --line:       #E4D8C2;
  --shadow-sm:  0 10px 30px -18px rgba(80,58,30,.4);
  --shadow:     0 24px 60px -30px rgba(80,58,30,.45);
  --r:          18px;
  --ease:       cubic-bezier(.4,0,.2,1);
  --wrap:       1160px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }
}

img{ max-width:100%; display:block }
h1,h2,h3{ font-family:'Marcellus', 'Marcellus', Georgia, 'Times New Roman', serif; font-weight:400; line-height:1.16; letter-spacing:.01em; margin:0 }
h1{ font-size:clamp(2.1rem, 1.5rem + 3.1vw, 3.5rem); color:var(--ink) }
h2{ font-size:clamp(1.7rem, 1.28rem + 2.05vw, 2.6rem); color:var(--ink) }
h3{ font-size:clamp(1.18rem, 1.05rem + .5vw, 1.4rem) }
p{ margin:0 0 1rem }
em{ font-style:italic; color:var(--gold-deep) }
a{ color:var(--gold-deep) }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.15rem, .6rem + 2vw, 2.5rem) }
.estreito{ max-width:760px }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 10px 0;
}
.skip:focus{ left:0 }

/* ---------- barra de protótipo ---------- */
.demo-bar{
  background:var(--ink); color:#EBDEC9;
  font-size:.76rem; line-height:1.45; text-align:center;
  padding:9px 1.4rem; letter-spacing:.01em;
}
.demo-bar strong{ color:#E7C88C; font-weight:600 }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:padding .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-in{ display:flex; align-items:center; gap:1.5rem; padding-block:1.15rem }
.nav.is-scrolled{
  background:color-mix(in srgb, var(--cream) 96%, transparent);
  border-color:var(--line);
  box-shadow:0 6px 24px -18px rgba(80,58,30,.5);
}
.nav.is-scrolled .nav-in{ padding-block:.7rem }

.nav-logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); margin-right:auto }
.nav-mark{
  width:40px; height:40px; flex:none;
  border-radius:11px; object-fit:contain; display:block;
}
.nav-nome{ display:flex; flex-direction:column; line-height:1.12 }
.nav-nome-t{ font-family:'Marcellus', Georgia, serif; font-size:1.12rem; color:var(--ink) }
.nav-nome-s{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep) }

.nav-links{ display:flex; gap:1.6rem }
.nav-links a{
  text-decoration:none; color:var(--ink-soft); font-size:.92rem;
  padding:.3rem 0; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .28s var(--ease);
}
.nav-links a:hover{ color:var(--ink) }
.nav-links a:hover::after{ right:0 }

/* ---------- botões ---------- */
.btn{
  display:inline-block; text-decoration:none; text-align:center;
  background:var(--gold-deep); color:#F7EFE1;
  padding:.95rem 1.7rem; border-radius:999px;
  font-size:.95rem; letter-spacing:.02em;
  border:1px solid var(--gold-deep);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  box-shadow:var(--shadow-sm);
}
.btn:hover{ transform:translateY(-2px); background:#734B18; box-shadow:0 18px 36px -18px rgba(80,58,30,.6) }
.btn:active{ transform:translateY(0) }
.btn-sm{ padding:.62rem 1.15rem; font-size:.86rem; box-shadow:none }
.btn-lg{ padding:1.1rem 2.3rem; font-size:1.02rem }

.btn-ghost{
  display:inline-block; text-decoration:none; color:var(--ink-soft);
  padding:.95rem 1.2rem; border-radius:999px; font-size:.95rem;
  border:1px solid var(--line);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--ink) }

.link-seta{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  font-size:.92rem; color:var(--gold-deep); margin-top:.4rem;
}
.link-seta::after{ content:"→"; transition:transform .2s var(--ease) }
.link-seta:hover::after{ transform:translateX(4px) }

/* ---------- seções ---------- */
.secao{ padding-block:clamp(3.25rem, 2rem + 5vw, 5.5rem) }
.olho-secao{
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 .9rem;
}
.secao-cab{ max-width:640px; margin-bottom:clamp(2rem, 1rem + 3vw, 3.25rem) }
.secao-cab-sub{ color:var(--ink-soft); margin-top:.9rem }
.grande{ font-size:clamp(1.1rem, 1rem + .5vw, 1.32rem); color:var(--ink); line-height:1.55 }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(2.5rem, 1rem + 6vw, 5.5rem) }
.hero-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem, 1rem + 5vw, 4.5rem); align-items:center }
.eyebrow{
  font-size:.76rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 1.1rem;
}
.hero-copy h1{ margin-bottom:1.3rem }
.lead{ font-size:clamp(1.05rem, .98rem + .45vw, 1.2rem); color:var(--ink-soft); max-width:40ch }
.hero-acoes{ display:flex; flex-wrap:wrap; gap:.85rem; margin:1.8rem 0 1.6rem }
.hero-selos{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem }
.hero-selos li{
  font-size:.84rem; color:var(--ink-faint); position:relative; padding-left:1.1rem;
}
.hero-selos li::before{
  content:""; position:absolute; left:0; top:.55em; width:6px; height:6px;
  border-radius:50%; background:var(--gold);
}

.hero-foto-moldura{
  position:relative; border-radius:220px 220px var(--r) var(--r);
  overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line);
  aspect-ratio:4/5;
}
.hero-foto-moldura img{ width:100%; height:100%; object-fit:cover; object-position:50% 22% }
.hero-foto-moldura::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(51,41,31,.12));
  pointer-events:none;
}

/* ---------- credenciais ---------- */
.credenciais{ background:var(--cream-deep); border-block:1px solid var(--line) }
.cred-in{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem, .5rem + 2.5vw, 2.8rem); padding-block:clamp(2.25rem, 1.2rem + 3vw, 3rem) }
.cred{ display:flex; flex-direction:column; gap:.4rem; padding-top:1rem; border-top:2px solid var(--gold) }
.cred-t{ font-family:'Marcellus', Georgia, serif; font-size:1.15rem; color:var(--ink) }
.cred-d{ font-size:.88rem; color:var(--ink-soft); line-height:1.5; max-width:32ch }

/* ---------- identificação ---------- */
.identificacao{ padding-block:clamp(3.25rem, 2rem + 5vw, 5.5rem) }
.identificacao h2{ margin-bottom:1.2rem }
.identificacao p:last-child{ margin-bottom:0; color:var(--ink-soft) }

/* ---------- método ---------- */
.metodo{ background:var(--cream-deep); border-block:1px solid var(--line) }
.passos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem, .5rem + 2vw, 2rem); counter-reset:p }
.passo{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.9rem 1.7rem; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.passo:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.passo-fase{
  display:inline-block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); padding-bottom:.7rem; margin-bottom:.9rem;
  border-bottom:1px solid var(--gold-wash);
}
.passo h3{ margin-bottom:.55rem }
.passo p{ margin:0; font-size:.94rem; color:var(--ink-soft) }

/* ---------- procedimentos ---------- */
.proc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem, .5rem + 1.6vw, 1.6rem) }
.proc{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.7rem 1.6rem; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:.5rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.proc:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--gold-wash) }
.proc h3{ color:var(--ink) }
.proc p{ margin:0; font-size:.92rem; color:var(--ink-soft) }
.proc-cta{ background:var(--gold-wash); border-color:transparent }
.proc-cta p{ color:var(--ink-soft) }
.proc-cta .link-seta{ margin-top:auto }

/* ---------- resultados / antes e depois ---------- */
.ba-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem, .4rem + 1.4vw, 1.4rem); align-items:start }
.ba{
  margin:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ba:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.ba img{ width:100%; aspect-ratio:3/4; object-fit:contain; background:var(--cream-deep) }
.ba figcaption{
  padding:.85rem 1rem; font-size:.82rem; letter-spacing:.03em;
  color:var(--gold-deep); text-align:center; border-top:1px solid var(--line);
}

/* ---------- depoimentos ---------- */
.depoimentos{ background:var(--cream-deep); border-block:1px solid var(--line) }
.dep-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem, .5rem + 1.6vw, 1.6rem) }
.dep{
  margin:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.8rem 1.6rem; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:1rem;
}
.dep p{ margin:0; font-size:.95rem; color:var(--ink); line-height:1.6 }
.dep cite{ font-style:normal; font-size:.8rem; letter-spacing:.04em; color:var(--ink-faint); margin-top:auto }
.dep-aviso{ margin:1.6rem 0 0; font-size:.76rem; color:var(--ink-faint); line-height:1.55; max-width:60ch }

/* ---------- sobre ---------- */
.sobre-in{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem, 1rem + 4vw, 4rem); align-items:center }
.sobre-foto{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line) }
.sobre-foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 12% }
.sobre-texto h2{ margin:.4rem 0 1.1rem }
.sobre-texto p{ color:var(--ink-soft) }
.sobre-texto .btn{ margin-top:.8rem }

/* ---------- faq ---------- */
.faq-lista{ border-top:1px solid var(--line) }
.faq__item{ border-bottom:1px solid var(--line) }
.faq__toggle{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:'Marcellus', Georgia, serif; font-size:clamp(1.02rem, .98rem + .3vw, 1.18rem);
  color:var(--ink); padding:1.25rem 2.5rem 1.25rem 0; position:relative;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq__icone{
  position:absolute; right:2px; top:50%; width:14px; height:14px; flex:none;
  transform:translateY(-50%); transition:transform .3s var(--ease);
}
.faq__icone::before,.faq__icone::after{
  content:""; position:absolute; background:var(--gold-deep); border-radius:2px;
}
.faq__icone::before{ left:0; right:0; top:6px; height:2px }
.faq__icone::after{ top:0; bottom:0; left:6px; width:2px; transition:opacity .3s var(--ease) }
.faq__item.is-open .faq__icone{ transform:translateY(-50%) rotate(180deg) }
.faq__item.is-open .faq__icone::after{ opacity:0 }
.faq__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease) }
.faq__item.is-open .faq__panel{ grid-template-rows:1fr }
.faq__panel-inner{ overflow:hidden }
.faq__panel-inner p{ margin:0 0 1.3rem; color:var(--ink-soft); font-size:.95rem }

/* ---------- cta final ---------- */
.cta-final{ padding-block:clamp(3.25rem, 2rem + 5vw, 5.5rem) }
.cta-final-in{
  text-align:center; background:var(--ink); color:#F4EBDA;
  border-radius:calc(var(--r) + 6px); padding:clamp(2.5rem, 1.5rem + 5vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  box-shadow:var(--shadow);
}
.cta-final-in h2{ color:#F7EFE1; margin-bottom:1rem; max-width:18ch; margin-inline:auto }
.cta-final-in p{ color:#D8C8AE; max-width:48ch; margin-inline:auto; margin-bottom:1.9rem }
.cta-final-in .btn{ background:var(--gold); border-color:var(--gold); color:#2A211C }
.cta-final-in .btn:hover{ background:#C79A57; border-color:#C79A57 }

/* ---------- rodapé ---------- */
.rodape{ background:var(--cream-deep); border-top:1px solid var(--line); padding-block:clamp(2.5rem, 1.5rem + 3vw, 3.5rem) }
.rodape-in{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start }
.rodape-marca{ display:flex; align-items:center; gap:.7rem }
.rodape-info{ margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.6 }
.rodape-wpp{ font-size:.9rem; color:var(--gold-deep); text-decoration:none; letter-spacing:.02em }
.rodape-wpp:hover{ text-decoration:underline }
.footer__note{
  border-top:1px solid var(--line); margin:.6rem 0 0; padding-top:1.25rem;
  font-size:.74rem; line-height:1.6; color:var(--ink-faint); max-width:68ch;
}

/* ---------- botão flutuante de whatsapp ---------- */
.wpp-flut{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:80px; height:80px; border-radius:50%;
  background:var(--gold-deep); color:#F7EFE1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 34px -10px rgba(80,58,30,.6);
  transition:transform .2s var(--ease);
}
.wpp-flut svg{ width:40px; height:40px; fill:currentColor }
.wpp-flut:hover{ transform:scale(1.06) }
.wpp-flut::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--gold-deep); animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{ 0%{ transform:scale(1); opacity:.7 } 70%{ transform:scale(1.5); opacity:0 } 100%{ opacity:0 } }

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .nav-links{ display:none }
  .hero-in{ grid-template-columns:1fr; gap:2.5rem }
  .hero-foto{ order:-1 }
  .hero-foto-moldura{ max-width:420px; margin-inline:auto; border-radius:160px 160px var(--r) var(--r) }
  .lead{ max-width:none }
  .cred-in{ grid-template-columns:1fr; gap:1.4rem }
  .passos{ grid-template-columns:1fr }
  .proc-grid{ grid-template-columns:repeat(2,1fr) }
  .ba-grid{ grid-template-columns:repeat(2,1fr) }
  .dep-grid{ grid-template-columns:1fr }
  .sobre-in{ grid-template-columns:1fr; gap:2rem }
  .sobre-foto{ max-width:420px }
}
@media (max-width:560px){
  .proc-grid{ grid-template-columns:1fr }
  .ba-grid{ grid-template-columns:1fr; max-width:380px; margin-inline:auto }
  .wpp-flut{ width:68px; height:68px; right:16px; bottom:16px }
  .wpp-flut svg{ width:34px; height:34px }
  .demo-bar{ font-size:.72rem }
}