@import url("fonts.css");

/* =========================================================================
   Mariana Fleck — Advocacia e Consultoria · Direito Previdenciário
   Protótipo de prospecção · Ryan Schmidt
   Identidade: charcoal quente (espresso) + dourado, herdada da identidade
   pública (monograma MF, wordmark serifado, criativos escuros e quentes).
   Tema escuro assumido de propósito (marca é dark): sem prefers-color-scheme.
   ========================================================================= */

:root{
  --ink-900:#0c0a08;
  --ink-850:#151110;
  --ink-800:#211a15;
  --ink-750:#2a211a;
  --ink-700:#352a20;

  --gold-500:#c9a568;
  --gold-400:#e4c893;
  --gold-700:#94764a;

  --cream:#f2ebe0;
  --muted:#b2a592;
  --faint:#7c6e5d;

  --line:rgba(201,165,104,.22);
  --line-soft:rgba(255,255,255,.06);

  --display:"Marcellus", Georgia, "Times New Roman", serif;
  --body:"Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shell:1180px;
  --pad:clamp(1.25rem, 0.9rem + 1.8vw, 2.25rem);
  --sec-y:clamp(3.5rem, 2.4rem + 4.6vw, 6rem);
  --radius:18px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  font-family:var(--body);
  background:var(--ink-850);
  color:var(--cream);
  line-height:1.65;
  font-size:1.02rem;
  overflow-x:hidden;
  -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{ display:block; max-width:100% }

a{ color:inherit; text-decoration:none }

h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.12; letter-spacing:-.01em }

::selection{ background:var(--gold-500); color:var(--ink-900) }

:focus-visible{ outline:2px solid var(--gold-400); outline-offset:3px; border-radius:4px }

/* ---------- estruturas ---------- */
.shell{ width:min(100% - 2*var(--pad), var(--shell)); margin-inline:auto }

.section{ padding-block:var(--sec-y); position:relative }
.section--tint{
  background:var(--ink-900);
  border-block:1px solid var(--line-soft);
}
.section--tint::before{
  content:"";
  position:absolute;
  top:-1px; left:0;
  width:64px; height:2px;
  background:var(--gold-500);
}

.eyebrow{
  font-family:var(--body);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-500);
  display:inline-flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold-700) }

.section__head{ max-width:46rem; margin-bottom:clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem) }
.section__head h2{ font-size:clamp(1.85rem, 1.3rem + 2.4vw, 2.9rem); margin-top:1rem }
.section__head p{ color:var(--muted); margin-top:1rem; font-size:1.05rem }

/* ---------- botões ---------- */
.btn{
  --_bg:var(--gold-500);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.95rem 1.6rem;
  font-family:var(--body);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.02em;
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  transition:transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.btn--primary{
  background:var(--_bg);
  color:var(--ink-900);
  box-shadow:0 12px 30px -14px rgba(201,165,104,.7);
}
.btn--primary:hover{ transform:translateY(-2px); background:var(--gold-400); box-shadow:0 18px 40px -14px rgba(201,165,104,.8) }
.btn--ghost{
  background:transparent;
  color:var(--cream);
  border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--gold-500); color:var(--gold-400); transform:translateY(-2px) }
.btn svg{ width:1.05em; height:1.05em; flex:none }

/* ========================================================================= */
/* demo bar                                                                   */
/* ========================================================================= */
.demo-bar{
  background:var(--ink-900);
  color:var(--muted);
  font-size:.76rem;
  line-height:1.45;
  text-align:center;
  padding:9px var(--pad);
  border-bottom:1px solid var(--line-soft);
}
.demo-bar strong{ color:var(--gold-400); font-weight:500 }

/* ========================================================================= */
/* nav                                                                        */
/* ========================================================================= */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(12,10,8,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:padding .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:1.15rem;
}
.nav.is-scrolled{
  background:rgba(12,10,8,.94);
  border-bottom-color:var(--line);
}
.nav.is-scrolled .nav__inner{ padding-block:.7rem }

.brand{ display:flex; align-items:center; gap:.75rem }
.brand__mark{
  width:42px; height:42px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold-700);
  border-radius:10px;
  background:linear-gradient(155deg, var(--ink-750), var(--ink-900));
  font-family:var(--display);
  font-size:1.05rem;
  letter-spacing:.04em;
  color:var(--gold-400);
}
.brand__text{ display:flex; flex-direction:column; line-height:1.15 }
.brand__text b{ font-family:var(--display); font-size:1.06rem; letter-spacing:.06em; font-weight:400 }
.brand__text span{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-500) }

.nav__links{ display:flex; align-items:center; gap:2rem }
.nav__links a{ font-size:.9rem; color:var(--muted); transition:color .25s var(--ease) }
.nav__links a:hover{ color:var(--gold-400) }
.nav__cta{ display:inline-flex }

@media (max-width:920px){
  .nav__links{ display:none }
}
@media (max-width:520px){
  .nav__cta .btn{ padding:.7rem 1.05rem; font-size:.82rem }
  .brand__text span{ font-size:.56rem }
}

/* ========================================================================= */
/* hero                                                                       */
/* ========================================================================= */
.hero{ position:relative; overflow:hidden }
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(680px 420px at 88% 12%, rgba(201,165,104,.15), transparent 62%),
    radial-gradient(560px 400px at 6% 90%, rgba(53,42,32,.6), transparent 60%);
  pointer-events:none;
}
.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items:center;
  padding-block:clamp(3rem, 1.6rem + 6vw, 6rem) clamp(3.5rem, 2rem + 6vw, 7rem);
}
.hero__copy{ max-width:34rem }
.hero__copy h1{
  font-size:clamp(2.1rem, 1.3rem + 3.8vw, 3.6rem);
  margin:1.4rem 0 1.3rem;
}
.hero__copy h1 em{ font-style:italic; color:var(--gold-400) }
.hero__lead{ color:var(--muted); font-size:1.08rem; max-width:34rem }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem }
.hero__trust{
  margin-top:1.9rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.82rem;
  color:var(--faint);
  letter-spacing:.02em;
}
.hero__trust svg{ width:1rem; height:1rem; color:var(--gold-500); flex:none }

.hero__media{ position:relative; isolation:isolate }
.hero__media img{
  width:100%;
  aspect-ratio:592 / 700;
  object-fit:cover;
  object-position:50% 12%;
  border-radius:var(--radius);
  border:1px solid var(--gold-700);
}
.hero__media::before{
  content:"";
  position:absolute;
  inset:-10px -10px 14px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  z-index:-1;
}
.hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  background:linear-gradient(200deg, transparent 45%, rgba(12,10,8,.55));
  box-shadow:0 44px 90px -44px rgba(0,0,0,.8);
  pointer-events:none;
}
.hero__badge{
  position:absolute;
  left:-1.1rem;
  bottom:1.6rem;
  background:var(--ink-750);
  border:1px solid var(--line);
  border-radius:14px;
  padding:.85rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.7);
}
.hero__badge b{ font-family:var(--display); font-size:1.15rem; color:var(--gold-400) }
.hero__badge span{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }

@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; gap:2.25rem }
  .hero__media{ order:-1; max-width:22rem; margin-inline:auto }
  .hero__media img{ aspect-ratio:5 / 4; object-position:50% 14% }
  .hero__media::before{ inset:-8px -8px 10px 8px }
}
@media (max-width:560px){
  .hero__badge{ display:none }
}

/* ========================================================================= */
/* trust strip                                                                */
/* ========================================================================= */
.trust{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--ink-900);
}
.trust__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
}
.trust__item{
  background:var(--ink-900);
  padding:clamp(1.5rem, 1rem + 2vw, 2.4rem) clamp(1.1rem, .8rem + 1.4vw, 1.8rem);
}
.trust__item b{
  display:block;
  font-family:var(--display);
  font-size:1.02rem;
  color:var(--gold-400);
  letter-spacing:.02em;
  margin-bottom:.35rem;
}
.trust__item span{ font-size:.86rem; color:var(--muted) }
@media (max-width:780px){ .trust__grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:430px){ .trust__grid{ grid-template-columns:1fr } }

/* ========================================================================= */
/* áreas                                                                      */
/* ========================================================================= */
.areas__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.1rem;
}
.area{
  display:flex;
  flex-direction:column;
  padding:1.8rem 1.6rem;
  background:var(--ink-800);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  transition:transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.area:hover{ transform:translateY(-4px); border-color:var(--line); background:var(--ink-750) }
.area__icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(201,165,104,.12);
  border:1px solid var(--line);
  color:var(--gold-400);
  margin-bottom:1.15rem;
}
.area__icon svg{ width:22px; height:22px }
.area h3{ font-size:1.22rem; margin-bottom:.55rem }
.area p{ font-size:.92rem; color:var(--muted); margin:0 }
@media (max-width:900px){ .areas__grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .areas__grid{ grid-template-columns:1fr } }

.areas__foot{
  margin-top:1.6rem;
  font-size:.9rem;
  color:var(--faint);
  display:flex;
  align-items:center;
  gap:.6rem;
}
.areas__foot::before{ content:""; width:22px; height:1px; background:var(--gold-700); flex:none }

/* ========================================================================= */
/* sobre                                                                      */
/* ========================================================================= */
.sobre__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items:center;
}
.sobre__media{ position:relative }
.sobre__media img{
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:var(--radius);
  border:1px solid var(--line);
}
.sobre__media::before{
  content:"";
  position:absolute;
  inset:auto -1rem -1rem auto;
  width:62%;
  height:62%;
  border:1px solid var(--line);
  border-radius:var(--radius);
  z-index:-1;
}
.sobre__body h2{ font-size:clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); margin:1rem 0 1.3rem; font-style:italic }
.sobre__body p{ color:var(--muted); margin-bottom:1rem }
.sobre__body p:first-of-type{ color:var(--cream) }
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem }
.chips li{
  list-style:none;
  font-size:.8rem;
  color:var(--muted);
  padding:.5rem .9rem;
  border:1px solid var(--line);
  border-radius:999px;
}
@media (max-width:820px){
  .sobre__grid{ grid-template-columns:1fr; gap:2.5rem }
  .sobre__media{ max-width:23rem }
}

/* ========================================================================= */
/* atendimento (passos)                                                       */
/* ========================================================================= */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.1rem;
}
.step{
  position:relative;
  padding:2rem 1.7rem 1.8rem;
  background:var(--ink-800);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
}
.step__n{
  font-family:var(--display);
  font-size:1.05rem;
  color:var(--ink-900);
  background:var(--gold-500);
  width:2.1rem;
  height:2.1rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.1rem;
}
.step h3{ font-size:1.18rem; margin-bottom:.5rem }
.step p{ font-size:.92rem; color:var(--muted); margin:0 }
@media (max-width:820px){ .steps{ grid-template-columns:1fr } }

/* ========================================================================= */
/* diferenciais                                                               */
/* ========================================================================= */
.diffs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem }
.diff{
  padding:1.9rem 1.6rem;
  background:var(--ink-800);
  border:1px solid var(--line-soft);
  border-left:3px solid var(--gold-500);
  border-radius:0 var(--radius) var(--radius) 0;
}
.diff h3{ font-size:1.14rem; margin-bottom:.55rem; color:var(--gold-400); font-style:italic }
.diff p{ font-size:.9rem; color:var(--muted); margin:0 }
@media (max-width:820px){ .diffs__grid{ grid-template-columns:1fr } }

/* ========================================================================= */
/* FAQ  (div + button — nunca <details>, ver achados da skill)                 */
/* ========================================================================= */
.faq{ max-width:48rem }
.faq__item{ border-bottom:1px solid var(--line-soft) }
.faq__item:first-child{ border-top:1px solid var(--line-soft) }
.faq__toggle{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.2rem;
  padding:1.35rem 0;
  background:none;
  border:0;
  cursor:pointer;
  text-align:left;
  font-family:var(--display);
  font-size:1.1rem;
  color:var(--cream);
  transition:color .25s var(--ease);
}
.faq__toggle:hover{ color:var(--gold-400) }
.faq__toggle svg{
  width:1.1rem;
  height:1.1rem;
  flex:none;
  margin-top:.35rem;
  color:var(--gold-500);
  transition:transform .3s var(--ease);
}
.faq__item.is-open .faq__toggle svg{ 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(--muted);
  font-size:.95rem;
  max-width:44rem;
}

/* ========================================================================= */
/* CTA final                                                                  */
/* ========================================================================= */
.cta{
  margin-block:var(--sec-y);
  padding:clamp(2.75rem, 1.8rem + 4vw, 4.75rem) var(--pad);
  background:
    radial-gradient(520px 340px at 82% 12%, rgba(201,165,104,.22), transparent 62%),
    linear-gradient(180deg, var(--ink-700), var(--ink-800));
  border:1px solid var(--gold-700);
  border-radius:calc(var(--radius) + 6px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.8);
  text-align:center;
}
.cta h2{ font-size:clamp(1.7rem, 1.2rem + 2.4vw, 2.7rem); font-style:italic }
.cta p{ color:var(--muted); max-width:36rem; margin:1.1rem auto 2rem }
.cta__note{ margin-top:1.4rem; font-size:.8rem; color:var(--faint); letter-spacing:.04em }

/* ========================================================================= */
/* footer                                                                     */
/* ========================================================================= */
.footer{ background:var(--ink-900); border-top:1px solid var(--line-soft); padding-block:clamp(3rem, 2rem + 3vw, 4.5rem) 2.5rem }
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2.5rem;
}
.footer__brand{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem }
.footer__brand .brand__mark{ width:44px; height:44px }
.footer__brand b{ font-family:var(--display); font-size:1.1rem; letter-spacing:.06em; display:block }
.footer__brand span{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-500) }
.footer__col h4{
  font-family:var(--body);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-500);
  margin-bottom:1rem;
}
.footer__col p,.footer__col a{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:.55rem }
.footer__col a:hover{ color:var(--gold-400) }
.footer__legal{
  margin-top:2.5rem;
  padding-top:1.75rem;
  border-top:1px solid var(--line-soft);
  font-size:.76rem;
  line-height:1.7;
  color:var(--faint);
  max-width:70ch;
}
.footer__note{
  margin-top:1rem;
  font-size:.74rem;
  line-height:1.6;
  color:var(--faint);
  max-width:68ch;
}
@media (max-width:820px){ .footer__grid{ grid-template-columns:1fr 1fr } .footer__brand{ grid-column:1 / -1 } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr } }

/* ========================================================================= */
/* whatsapp float                                                             */
/* ========================================================================= */
.wa-float{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:60;
  width:80px;
  height:80px;
  border-radius:50%;
  background:var(--gold-500);
  color:var(--ink-900);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.6);
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.wa-float svg{ width:38px; height:38px }
.wa-float:hover{ transform:scale(1.06); background:var(--gold-400) }
.wa-float::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--gold-500);
  animation:wa-pulse 2.4s var(--ease) infinite;
}
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:.7 }
  70%{ transform:scale(1.5); opacity:0 }
  100%{ opacity:0 }
}
@media (max-width:520px){
  .wa-float{ width:68px; height:68px; right:16px; bottom:16px }
  .wa-float svg{ width:32px; height:32px }
}
@media (prefers-reduced-motion: reduce){
  .wa-float::after{ animation:none; opacity:0 }
}