/* Paula Melo Advocacia — protótipo de prospecção.
   Identidade clara e quente (creme + azul-marinho + dourado). Tema travado no
   claro de propósito: a marca é inequivocamente clara, então nada de
   prefers-color-scheme dark (o prospect vê o que foi aprovado). */

:root{
  --navy:#152741;
  --navy-deep:#0f1d31;
  --navy-ink:#1c2b44;
  --cream:#f5ecdc;
  --cream-2:#efe3cf;
  --paper:#fbf6ec;
  --gold:#a9833f;
  --gold-soft:#c6a461;
  --gold-bright:#d8b876;
  --text:#2c2f38;
  --text-soft:#5c5f68;
  --text-faint:#726d5f;
  --on-navy:#e9e0cf;
  --on-navy-soft:#b3b7c2;
  --line:rgba(21,39,65,.14);
  --line-navy:rgba(233,224,207,.16);
  --white:#fff;

  --display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --body:'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --script:'Parisienne', 'Playfair Display', cursive;

  --ease:cubic-bezier(0.4, 0, 0.2, 1);
  --wrap:1140px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; color:var(--navy); line-height:1.15; margin:0 }
h1,h2,h3{ text-wrap:balance }
p{ margin:0 }
a{ color:inherit }
ul{ margin:0; padding:0; list-style:none }

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

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.2rem, 0.6rem + 3vw, 2.4rem) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:var(--on-navy); padding:.7rem 1.1rem; border-radius:0 0 8px 0;
}
.skip:focus{ left:0 }

/* ---------- barra de protótipo ---------- */
.demo-bar{
  background:var(--navy-deep); color:var(--on-navy-soft);
  font-size:.76rem; line-height:1.4; text-align:center; padding:9px 1.5rem;
  letter-spacing:.01em;
}
.demo-bar strong{ color:var(--gold-bright); font-weight:700 }

/* ---------- botões ---------- */
.btn{
  --btn-bg:var(--navy);
  --btn-fg:var(--on-navy);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--body); font-weight:700; font-size:.98rem; letter-spacing:.01em;
  text-decoration:none; border:0; border-radius:999px;
  padding:.95rem 1.7rem; cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  box-shadow:0 14px 30px -16px rgba(21,39,65,.55);
}
.btn::after{
  content:""; position:absolute; top:-50%; left:-60%; width:20%; height:200%;
  background:rgba(255,255,255,.16); transform:rotate(30deg); pointer-events:none;
  transition:transform .7s var(--ease);
}
.btn:hover{ transform:translateY(-2px) scale(1.015) }
.btn:hover::after{ transform:translate(600%,0) rotate(30deg) }
.btn:active{ transform:translateY(0) scale(.99) }
.btn--sm{ padding:.62rem 1.15rem; font-size:.86rem; box-shadow:none }
.btn--lg{ padding:1.05rem 2.1rem; font-size:1.03rem }
.btn--gold{ --btn-bg:var(--gold); --btn-fg:#241a09; box-shadow:0 16px 34px -16px rgba(169,131,63,.6) }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(245,236,220,.86);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.nav__in{ display:flex; align-items:center; gap:1.5rem; padding-block:1rem; transition:padding-block .4s var(--ease) }
.nav.is-scrolled{ background:rgba(245,236,220,.96); box-shadow:0 12px 30px -24px rgba(21,39,65,.7); border-color:var(--line) }
.nav.is-scrolled .nav__in{ padding-block:.55rem }
.nav__logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto }
.nav__logo img{ width:44px; height:44px; transform-origin:left center; transition:transform .4s var(--ease) }
.nav.is-scrolled .nav__logo img{ transform:scale(.86) }
.nav__name{
  font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--navy);
  line-height:1; display:flex; flex-direction:column;
}
.nav__name small{ font-family:var(--body); font-weight:600; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-top:.2rem }
.nav__links{ display:flex; gap:1.7rem }
.nav__links a{ position:relative; text-decoration:none; font-weight:600; font-size:.9rem; color:var(--text-soft) }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1.5px;
  background:var(--gold); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--navy) }
.nav__links a:hover::after{ width:100% }
@media (max-width:820px){ .nav__links{ display:none } }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(3.2rem, 2rem + 7vw, 6.5rem);
  background:
    radial-gradient(120% 80% at 88% -10%, rgba(169,131,63,.16), transparent 60%),
    radial-gradient(90% 70% at -10% 110%, rgba(21,39,65,.07), transparent 55%),
    var(--cream);
}
.hero::before{
  content:""; position:absolute; right:-14%; top:8%; width:min(560px,52vw); aspect-ratio:1;
  border:1px solid rgba(169,131,63,.4); border-radius:999px;
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 63%);
          mask:radial-gradient(circle, transparent 62%, #000 63%);
  pointer-events:none;
}
.hero__in{
  position:relative;
  display:grid; grid-template-columns:1.35fr .9fr; gap:clamp(2rem, 1rem + 5vw, 4.5rem);
  align-items:center;
}
.flourish{
  font-family:var(--script); font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);
  color:var(--gold); line-height:1; margin-bottom:.5rem;
}
.flourish--light{ color:var(--gold-bright) }
.hero h1{
  font-size:clamp(2.15rem, 1.4rem + 3.6vw, 3.55rem);
  letter-spacing:-0.015em; margin-bottom:1.2rem;
  max-width:18ch; text-wrap:balance;
}
.hero h1 em{ font-style:italic; color:var(--gold) }
.hero__sub{
  font-size:clamp(1rem, 0.95rem + 0.4vw, 1.12rem); color:var(--text-soft);
  max-width:46ch; margin-bottom:1.8rem;
}
.hero__proof{
  display:flex; flex-wrap:wrap; gap:.55rem 1.4rem; margin-top:1.5rem;
  font-size:.85rem; color:var(--text-faint);
}
.hero__proof li{ position:relative; padding-left:1.1rem }
.hero__proof li::before{
  content:""; position:absolute; left:0; top:.55em; width:6px; height:6px;
  border-radius:999px; background:var(--gold);
}

/* cartão da advogada */
.card{
  background:var(--navy);
  color:var(--on-navy);
  border-radius:14px;
  padding:2.2rem 2rem 1.8rem;
  text-align:center;
  box-shadow:0 40px 80px -40px rgba(21,39,65,.6);
  position:relative;
}
.card::before{
  content:""; position:absolute; inset:10px; border:1px solid rgba(198,164,97,.35); border-radius:9px; pointer-events:none;
}
.card__mark{ display:flex; align-items:center; justify-content:center }
.card__mark img{ width:132px; height:132px; border-radius:999px }
.card__rule{ border:0; border-top:1px solid var(--line-navy); margin:1.4rem 0 1.2rem }
.card__label{ font-family:var(--body); font-weight:700; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:.9rem }
.card__areas{ display:grid; gap:.55rem; font-size:.95rem; color:var(--on-navy) }
.card__foot{ margin-top:1.5rem; font-size:.74rem; line-height:1.55; color:var(--on-navy-soft) }

@media (max-width:900px){
  .hero__in{ grid-template-columns:1fr; gap:2.6rem }
  .hero::before{ display:none }
  .card{ max-width:420px; margin-inline:auto }
}

/* ---------- cabeçalho de seção ---------- */
.sec-head{ max-width:56ch; margin-bottom:clamp(2rem, 1rem + 4vw, 3.4rem) }
.sec-head h2{ font-size:clamp(1.65rem, 1.2rem + 2vw, 2.5rem); letter-spacing:-0.01em }
.sec-head__lead{ margin-top:1rem; color:var(--text-soft); font-size:1.03rem }

/* ---------- situações ---------- */
.areas{ padding-block:clamp(3.5rem, 2rem + 7vw, 6.5rem) }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem }
@media (max-width:760px){ .grid-2{ grid-template-columns:1fr } }
.tile{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:2rem 1.9rem;
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.tile.hover-lift:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 50px -22px rgba(21,39,65,.28);
  border-color:rgba(169,131,63,.45);
}
.tile__icon{
  width:38px; height:38px; margin-bottom:1.1rem;
  fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.tile h3{ font-size:1.3rem; margin-bottom:.6rem }
.tile p{ color:var(--text-soft); font-size:.98rem }

/* ---------- método (navy) ---------- */
.method{
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(198,164,97,.12), transparent 55%),
    var(--navy);
  color:var(--on-navy);
  padding-block:clamp(3.8rem, 2rem + 8vw, 7rem);
}
.method h2,.method h3{ color:var(--white) }
.method__in{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem, 1rem + 5vw, 4.5rem); align-items:start }
.method__head{ position:sticky; top:100px }
.method__head h2{ font-size:clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem) }
.method__lead{ margin-top:1.1rem; color:var(--on-navy-soft) }
.steps{ display:grid; gap:1.6rem }
.steps li{
  position:relative; padding-left:1.8rem; padding-bottom:1.6rem;
  border-bottom:1px solid var(--line-navy);
}
.steps li:last-child{ border-bottom:0; padding-bottom:0 }
.steps li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:.7rem; height:.7rem; border-radius:999px;
  background:var(--gold-soft); box-shadow:0 0 0 4px rgba(198,164,97,.16);
}
.steps h3{ font-size:1.15rem; margin-bottom:.35rem }
.steps p{ color:var(--on-navy-soft); font-size:.96rem }
@media (max-width:860px){
  .method__in{ grid-template-columns:1fr; gap:2.4rem }
  .method__head{ position:static }
}

/* ---------- por que ---------- */
.why{ padding-block:clamp(3.5rem, 2rem + 7vw, 6.5rem) }
.reasons{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem 2.4rem }
@media (max-width:760px){ .reasons{ grid-template-columns:1fr } }
.reasons li{
  position:relative; padding-left:2.1rem; font-size:1.02rem; color:var(--text-soft);
  padding-block:.4rem;
}
.reasons li::before{
  content:""; position:absolute; left:0; top:.35em;
  width:1.5rem; height:1.5rem; border-radius:999px;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fbf6ec' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/62% no-repeat;
  box-shadow:0 0 0 4px rgba(169,131,63,.14);
}

/* ---------- faq ---------- */
.faq{ padding-block:clamp(3.5rem, 2rem + 7vw, 6.5rem); background:var(--cream-2) }
.faq__in{ max-width:800px }
.faq__list{ margin-top:.5rem }
.faq__item{ border-bottom:1px solid var(--line) }
.faq__item:first-child{ border-top:1px solid var(--line) }
.faq__toggle{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:1.1rem; color:var(--navy);
  padding:1.35rem 3rem 1.35rem 0; position:relative;
  line-height:1.3;
}
.faq__toggle::after{
  content:""; position:absolute; right:.4rem; top:50%; width:14px; height:14px;
  margin-top:-7px;
  background:
    linear-gradient(var(--gold),var(--gold)) center/14px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) center/2px 14px no-repeat;
  transition:transform .3s var(--ease);
}
.faq__item.is-open .faq__toggle::after{ transform:rotate(45deg) }
.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{ color:var(--text-soft); font-size:.98rem; padding-bottom:1.35rem; max-width:66ch }

/* ---------- cta final ---------- */
.final{ padding-block:clamp(3.5rem, 2rem + 7vw, 6rem) }
.final__card{
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(198,164,97,.16), transparent 55%),
    var(--navy);
  color:var(--on-navy);
  border-radius:18px; padding:clamp(2.4rem, 1.5rem + 4vw, 4rem);
  text-align:center; position:relative;
  box-shadow:0 40px 80px -44px rgba(21,39,65,.6);
}
.final__card > *{ position:relative }
.final__card::before{
  content:""; position:absolute; inset:12px; border:1px solid rgba(198,164,97,.28);
  border-radius:12px; pointer-events:none;
}
.final__card h2{ color:var(--white); font-size:clamp(1.7rem, 1.2rem + 2.4vw, 2.7rem); margin-bottom:1rem }
.final__card > p{ color:var(--on-navy-soft); max-width:52ch; margin:0 auto 2rem }
.final__card .btn{ margin-inline:auto }
.final__note{ margin-top:1.3rem; font-size:.82rem; color:var(--on-navy-soft) }

/* ---------- rodapé ---------- */
.foot{ background:var(--navy-deep); color:var(--on-navy-soft); padding-block:3.2rem 2rem }
.foot__in{ display:grid; grid-template-columns:1.2fr 1fr; gap:2.5rem; padding-bottom:2.4rem; border-bottom:1px solid var(--line-navy) }
.foot__brand img{ width:64px; height:64px; border-radius:999px; margin-bottom:1rem }
.foot__brand p{ font-size:.92rem; max-width:42ch }
.foot__cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem }
.foot__cols h4{ font-family:var(--body); font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:.9rem }
.foot__cols ul{ display:grid; gap:.5rem; font-size:.9rem }
.foot__cols a{ text-decoration:none }
.foot__cols a:hover{ color:var(--gold-bright) }
.foot__base{ padding-top:1.6rem }
.foot__base p{ font-size:.74rem; line-height:1.6; color:rgba(179,183,194,.72); max-width:80ch }
.footer__note{ margin-top:.8rem; color:rgba(179,183,194,.55) }
@media (max-width:760px){
  .foot__in{ grid-template-columns:1fr; gap:2rem }
}

/* ---------- whatsapp flutuante ---------- */
.wa-float{
  position:fixed; right:28px; bottom:28px; z-index:50;
  width:80px; height:80px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--navy); color:var(--cream);
  text-decoration:none;
  box-shadow:0 18px 40px -14px rgba(21,39,65,.6);
  animation:pulse-wa 2.6s infinite var(--ease);
  transition:transform .3s var(--ease);
}
.wa-float svg{ width:40px; height:40px }
@keyframes pulse-wa{
  0%{ box-shadow:0 18px 40px -14px rgba(21,39,65,.6), 0 0 0 0 rgba(169,131,63,.5) }
  70%{ box-shadow:0 18px 40px -14px rgba(21,39,65,.6), 0 0 0 16px rgba(169,131,63,0) }
  100%{ box-shadow:0 18px 40px -14px rgba(21,39,65,.6), 0 0 0 0 rgba(169,131,63,0) }
}
.wa-float:hover{ transform:scale(1.08) }
.wa-float:active{ transform:scale(.96) }
.wa-float__tip{
  position:absolute; right:calc(100% + 14px); white-space:nowrap;
  background:var(--white); color:var(--navy); font-size:.82rem; font-weight:600;
  padding:.5rem .85rem; border-radius:10px;
  opacity:0; transform:translateX(6px); pointer-events:none;
  box-shadow:0 12px 28px -14px rgba(21,39,65,.5);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.wa-float:hover .wa-float__tip{ opacity:1; transform:translateX(0) }
@media (max-width:759px){
  .wa-float{ width:68px; height:68px; right:18px; bottom:18px }
  .wa-float svg{ width:34px; height:34px }
  .wa-float__tip{ display:none }
}