/* Mulky & Costa — protótipo de prospecção
   Identidade pública do escritório: azul-marinho profundo + dourado, wordmark
   em serifa romana. Site claro (marfim) com herói, CTA e rodapé em marinho.
   Tema travado no claro de propósito (identidade inequívoca), sem @media dark. */

:root{
  --navy:#141d33;
  --navy-900:#0e1626;
  --navy-800:#1c2746;
  --navy-line:#2b3a63;

  --gold:#c6a15b;
  --gold-lt:#e2c793;
  --gold-dk:#8a6a2e;      /* dourado escuro: só sobre o fundo claro, para texto */

  --bg:#f5f4ee;
  --bg-2:#eceadf;
  --line:#ded8c6;

  --ink:#1a2333;
  --ink-soft:#4c5568;
  --on-navy:#f3efe2;
  --on-navy-soft:#b7bfd2;

  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r-sm:8px;
  --r-md:14px;
  --r-lg:16px;
  --r-full:999px;

  --wrap:1140px;
  --gut:clamp(1.25rem, 5vw, 2.75rem);
  --sec:clamp(4.5rem, 9vw, 8rem);

  --shadow:0 10px 22px -16px rgba(20, 29, 51, .30);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(151, 116, 52, .16)}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0;
  text-wrap:balance;
}
h1 em,h2 em,h3 em{font-style:italic;font-weight:500;color:var(--gold-dk)}
p{margin:0}

:where(a,button,summary):focus-visible{
  outline:2px solid var(--gold-dk);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:var(--on-navy);
  padding:12px 18px;border-radius:0 0 var(--r-md) 0;font-size:.85rem;
}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap.estreito{max-width:760px}
.secao{padding-block:var(--sec)}
[id]{scroll-margin-top:96px}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 1.1rem;
}
.eyebrow--gold{color:var(--gold-dk)}

.lead{
  font-size:clamp(1.05rem, 1rem + 0.5vw, 1.25rem);
  font-weight:400;line-height:1.6;color:var(--ink-soft);
}

/* ---------- botões ---------- */
.btn{
  display:inline-block;
  background:var(--navy);color:var(--on-navy);
  font-family:var(--sans);
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 30px;border-radius:var(--r-full);
  text-decoration:none;
  border:1px solid var(--navy);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn:hover{background:var(--navy-800);border-color:var(--navy-800);transform:translateY(-2px)}
.btn-sm{padding:11px 20px;font-size:.68rem;white-space:nowrap}
.btn-lg{padding:19px 40px;font-size:.82rem}

.btn-ghost{
  display:inline-block;
  color:var(--ink);border:1px solid var(--ink);
  font-family:var(--sans);
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 28px;border-radius:var(--r-full);
  text-decoration:none;
  transition:background .25s ease, color .25s ease;
}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(245, 244, 238, .88);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s cubic-bezier(.4, 0, .2, 1);
}
.nav-in{display:flex;align-items:center;gap:1.25rem;min-height:82px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto;padding-block:.35rem}
.brand-mark{width:44px;height:44px;border-radius:var(--r-sm);flex:none}
.brand-wm{display:flex;flex-direction:column;line-height:1.05}
.brand-name{
  font-family:var(--display);font-weight:600;font-size:1.4rem;
  letter-spacing:.02em;color:var(--navy);
}
.brand-sub{
  font-family:var(--sans);font-size:.56rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dk);margin-top:2px;
}
.nav-links{display:none;gap:1.7rem;white-space:nowrap}
.nav-links a{
  position:relative;
  font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;
  transition:color .2s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;
  background:var(--gold);transition:width .35s cubic-bezier(.4, 0, .2, 1);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
/* Em telas estreitas o botão espremia o wordmark: some abaixo de 560px,
   o herói e o botão flutuante já cobrem a ação. */
.nav .btn-sm{display:none}
@media (min-width:560px){ .nav .btn-sm{display:inline-block} }
.nav.is-scrolled{box-shadow:0 14px 34px -30px rgba(20, 29, 51, .6)}
.nav.is-scrolled .nav-in{min-height:66px}
.nav-in{transition:min-height .4s cubic-bezier(.4, 0, .2, 1)}

/* ---------- hero ---------- */
.hero{
  background:var(--navy);color:var(--on-navy);
  padding-block:clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
  overflow:hidden;
  position:relative;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 82% 8%, rgba(198, 161, 91, .14), transparent 60%);
}
/* Monograma da marca como marca d'água discreta, preenche o vazio à direita. */
.hero::after{
  content:"";position:absolute;pointer-events:none;
  right:clamp(-3rem, -2vw, 0rem);bottom:-8%;
  width:min(42%, 28rem);aspect-ratio:400 / 281;
  background:url("img/monograma.png") right bottom / contain no-repeat;
  opacity:.07;
}
@media (max-width:760px){ .hero::after{display:none} }
.hero-in{position:relative;display:grid;gap:clamp(2.5rem, 6vw, 4rem);align-items:center}
.hero .eyebrow{color:var(--gold-lt)}
.hero h1{
  font-size:clamp(2.3rem, 6vw, 4rem);
  color:var(--on-navy);
  margin-bottom:1.5rem;
  letter-spacing:-.015em;line-height:1.06;
}
.hero .lead{max-width:52ch;color:var(--on-navy-soft);margin-bottom:2.25rem}
.hero-acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.75rem}
.hero .btn{background:var(--gold);border-color:var(--gold);color:var(--navy-900)}
.hero .btn:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.hero .btn-ghost{color:var(--on-navy);border-color:rgba(243, 239, 226, .4)}
.hero .btn-ghost:hover{background:var(--on-navy);color:var(--navy)}

.hero-fatos{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1.1rem;
  border-top:1px solid var(--navy-line);padding-top:1.6rem;
}
.hero-fatos li{display:flex;flex-direction:column;gap:.25rem}
.hero-fatos strong{
  font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);
}
.hero-fatos span{font-size:.92rem;color:var(--on-navy-soft);line-height:1.5}

.hero-cita{
  position:relative;
  margin:0;
  padding:1.75rem 0 0;
  max-width:38ch;justify-self:start;
}
.hero-cita-mark{
  font-family:var(--display);font-size:5rem;color:var(--gold);
  display:block;line-height:.6;margin-bottom:.4rem;
}
.hero-cita blockquote{
  margin:0;
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.55rem, 3.4vw, 2.35rem);line-height:1.34;color:var(--on-navy);
}
.hero-cita figcaption{
  margin-top:1.2rem;padding-top:1.1rem;
  border-top:1px solid var(--navy-line);
  font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);
}

/* ---------- onde começa ---------- */
.origem h2{
  font-size:clamp(2rem, 5vw, 3.1rem);
  color:var(--navy);margin-bottom:1.6rem;line-height:1.1;
}
.origem p{margin-bottom:1.4rem;color:var(--ink-soft);font-size:1.08rem;line-height:1.78}
.origem .grande{
  font-size:clamp(1.25rem, 2.6vw, 1.55rem);
  color:var(--ink);font-weight:400;line-height:1.55;
  font-family:var(--display);
}
.origem .destaque{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.5rem, 3.6vw, 2.15rem);line-height:1.36;
  color:var(--navy);margin-top:2.75rem;margin-bottom:0;
  padding-top:1.75rem;border-top:1px solid var(--line);
}

/* ---------- o medo / perguntas ---------- */
.medo{background:var(--navy);color:var(--on-navy)}
.medo-in{display:grid;gap:clamp(2.25rem, 5vw, 3.25rem)}
.medo-cab{max-width:640px}
.medo .eyebrow{color:var(--gold-lt)}
.medo h2{font-size:clamp(1.9rem, 4.6vw, 2.9rem);color:var(--on-navy);line-height:1.12;margin-bottom:1.1rem}
.medo h2 em{color:var(--gold-lt)}
.medo .lead{color:var(--on-navy-soft);max-width:52ch}

.perguntas{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.perguntas li{
  position:relative;
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.2rem, 2.8vw, 1.6rem);line-height:1.4;
  color:var(--on-navy);
  background:var(--navy-800);
  border:1px solid var(--navy-line);
  border-radius:var(--r-md);
  padding:1.35rem 1.5rem 1.35rem 3.1rem;
}
.perguntas li::before{
  content:"\201C";
  position:absolute;left:.9rem;top:.5rem;
  font-family:var(--display);font-size:2.2rem;line-height:1;color:var(--gold);
}
@media (max-width:600px){
  .perguntas li{padding:1.2rem 1.25rem 1.2rem 2.5rem}
  .perguntas li::before{left:.8rem}
}
.medo-fecho{
  font-size:1.08rem;line-height:1.7;color:var(--on-navy-soft);
  max-width:60ch;margin:0;
}

/* ---------- o que fazemos ---------- */
.sec-cab{max-width:660px;margin-bottom:clamp(2.5rem, 5vw, 3.5rem)}
.sec-cab h2{font-size:clamp(2rem, 5vw, 3.1rem);color:var(--navy);line-height:1.1}
.sec-cab .lead{margin-top:1.1rem}

.frentes{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;
  counter-reset:frente;
}
.frentes li{
  counter-increment:frente;
  display:grid;gap:.5rem;
  padding:1.9rem 0;
  border-top:1px solid var(--line);
  position:relative;
}
.frentes li:last-child{border-bottom:1px solid var(--line)}
.frentes li::before{
  content:counter(frente, decimal-leading-zero);
  font-family:var(--sans);font-size:.78rem;font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--gold-dk);letter-spacing:.08em;
}
.frentes h3{
  font-size:clamp(1.35rem, 2.6vw, 1.75rem);color:var(--navy);
  font-weight:600;line-height:1.2;
}
.frentes p{font-size:1.02rem;color:var(--ink-soft);line-height:1.7;max-width:60ch}

@media (min-width:820px){
  .frentes li{
    grid-template-columns:3.5rem 1fr;
    column-gap:1.5rem;align-items:baseline;
  }
  .frentes li::before{grid-row:1 / span 2;padding-top:.35rem}
}

/* ---------- o escritório ---------- */
.escritorio{background:var(--bg-2);border-block:1px solid var(--line)}
.escr-in{display:grid;gap:clamp(2.25rem, 5vw, 3.5rem);align-items:center}
.escr-copy h2{font-size:clamp(1.9rem, 4.4vw, 2.8rem);color:var(--navy);margin-bottom:1.5rem;line-height:1.1}
.escr-copy p{margin-bottom:1.2rem;color:var(--ink-soft)}
.escr-copy p strong{color:var(--ink);font-weight:600}
.escr-copy p:last-of-type{margin-bottom:0}

.escr-dados{display:grid;gap:1.3rem;margin:2.25rem 0 0}
.escr-dados > div{border-top:1px solid var(--line);padding-top:.85rem}
.escr-dados dt{
  font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-dk);margin-bottom:.3rem;
}
.escr-dados dd{margin:0;font-size:.96rem;color:var(--ink);line-height:1.5}

.escr-foto{justify-self:center;width:100%;max-width:440px}
.escr-foto img{
  width:100%;border-radius:var(--r-lg);
  border:1px solid var(--line);box-shadow:var(--shadow-hi);
}
.escr-cred{
  margin:.9rem 0 0;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);text-align:center;
}

@media (min-width:640px){
  .escr-dados{grid-template-columns:repeat(3, 1fr);gap:1.5rem}
}
@media (min-width:920px){
  .escr-in{grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem, 5vw, 4.5rem)}
  .escr-foto{justify-self:end;max-width:none}
}

/* ---------- FAQ ---------- */
.duvidas .sec-cab{margin-bottom:clamp(2rem, 4vw, 2.75rem)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:first-of-type{border-top:1px solid var(--line)}
.faq__toggle{
  width:100%;background:none;border:0;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;text-align:left;
  font-family:var(--display);font-size:clamp(1.2rem, 2.4vw, 1.5rem);font-weight:600;
  color:var(--navy);line-height:1.28;
  transition:color .2s ease;
}
.faq__toggle:hover{color:var(--gold-dk)}
.faq__ico{
  position:relative;flex:none;width:14px;height:14px;margin-top:.45rem;
}
.faq__ico::before,.faq__ico::after{
  content:"";position:absolute;background:var(--gold-dk);
  transition:transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
.faq__ico::before{left:0;top:6px;width:14px;height:2px}
.faq__ico::after{left:6px;top:0;width:2px;height:14px}
.faq__item.is-open .faq__ico::after{transform:rotate(90deg);opacity:0}
.faq__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
}
.faq__item.is-open .faq__panel{grid-template-rows:1fr}
.faq__panel-inner{overflow:hidden}
.faq__panel-inner p{
  padding-bottom:1.5rem;color:var(--ink-soft);
  font-size:1.03rem;line-height:1.72;max-width:64ch;
}

/* ---------- fechamento ---------- */
.fechamento{padding-bottom:clamp(3.5rem, 7vw, 6rem)}
.fecho-card{
  background:var(--navy);color:var(--on-navy);
  border-radius:var(--r-lg);
  padding:clamp(2.75rem, 7vw, 4.75rem) clamp(1.75rem, 5vw, 3.5rem);
  text-align:center;
  position:relative;overflow:hidden;
}
.fecho-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 50% 0%, rgba(198, 161, 91, .16), transparent 65%);
}
.fecho-card > *{position:relative}
.fecho-card .eyebrow{color:var(--gold-lt)}
.fecho-card h2{
  font-size:clamp(1.9rem, 4.6vw, 2.9rem);color:var(--on-navy);
  margin-bottom:1rem;line-height:1.14;
}
.fecho-card h2 em{color:var(--gold-lt)}
.fecho-card p{
  color:var(--on-navy-soft);max-width:52ch;
  margin-inline:auto;margin-bottom:2.25rem;
}
.fecho-card .btn{background:var(--gold);border-color:var(--gold);color:var(--navy-900)}
.fecho-card .btn:hover{background:var(--gold-lt);border-color:var(--gold-lt)}

/* ---------- rodapé ---------- */
.rodape{
  background:var(--navy-900);color:var(--on-navy-soft);
  padding-block:3.5rem 2.5rem;
  border-top:1px solid var(--navy-line);
}
.rod-in{display:grid;gap:2.5rem}
.rod-marca{display:flex;align-items:center}
.rod-marca img{width:184px;height:auto;flex:none}
.rod-cols{display:grid;gap:1.75rem}
.rod-lbl{
  font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-lt);margin-bottom:.55rem;
}
.rod-cols p{font-size:.92rem;font-weight:400;line-height:1.7}
.rod-cols a{text-decoration:none;transition:color .2s ease;display:inline-block;padding-block:.4rem}
.rod-cols a:hover{color:var(--on-navy)}
.rod-end{
  display:inline-block;font-size:.92rem;line-height:1.6;
  color:inherit;text-decoration:none;transition:color .2s ease;
}
.rod-end:hover{color:var(--on-navy)}
.rod-ext{opacity:.6;font-size:.85em}
.rod-legal{
  border-top:1px solid var(--navy-line);padding-top:1.5rem;
  font-size:.74rem;font-weight:400;line-height:1.6;color:rgba(183, 191, 210, .7);
  max-width:70ch;
}

/* ---------- WhatsApp flutuante (80/68, dourado da marca) ---------- */
.zap{
  position:fixed;
  right:calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-right));
  bottom:calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom));
  z-index:60;
  width:80px;height:80px;border-radius:50%;
  background:var(--gold);
  display:grid;place-items:center;
  box-shadow:0 16px 34px -12px rgba(20, 29, 51, .5);
  transition:transform .25s ease;
}
.zap svg{width:42px;height:42px;fill:var(--navy-900)}
.zap:hover{transform:scale(1.06)}
@media (max-width:759px){
  .zap{width:68px;height:68px}
  .zap svg{width:37px;height:37px}
}
@keyframes pulse-zap{
  0%{box-shadow:0 0 0 0 rgba(198, 161, 91, .45)}
  70%{box-shadow:0 0 0 16px rgba(198, 161, 91, 0)}
  100%{box-shadow:0 0 0 0 rgba(198, 161, 91, 0)}
}
.zap{animation:pulse-zap 2.8s infinite cubic-bezier(.4, 0, .2, 1)}

/* ---------- respiro em telas maiores ---------- */
@media (min-width:700px){
  .hero-fatos{grid-template-columns:repeat(3, 1fr);gap:1.75rem}
  .rod-cols{grid-template-columns:repeat(3, 1fr)}
}
@media (min-width:960px){
  .nav-links{display:flex}
  .hero-in{grid-template-columns:1.15fr .85fr;gap:clamp(3rem, 5vw, 4.5rem);align-items:center}
  .hero-cita{justify-self:end}
  .medo-in{grid-template-columns:1fr;max-width:none}
  .medo .perguntas{grid-template-columns:repeat(2, 1fr);gap:1rem}
}

/* ---------- 404 ---------- */
.erro{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--gut);max-width:620px;margin-inline:auto;
}
.erro img{width:66px;height:66px;border-radius:var(--r-sm);margin-bottom:2rem}
.erro-num{
  font-family:var(--display);font-weight:600;font-size:clamp(4rem, 14vw, 6.5rem);
  line-height:1;color:var(--navy);letter-spacing:.02em;
}
.erro h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.4rem, 4vw, 2rem);color:var(--ink);
  margin:.5rem 0 1.2rem;
}
.erro .lead{margin-bottom:2.2rem;max-width:44ch}
.erro-acoes{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}

/* ---------- faixa de demo ---------- */
.demo-bar{
  background:var(--navy-900);color:var(--on-navy-soft);
  font-size:.76rem;line-height:1.4;text-align:center;
  padding:9px var(--gut);
}
.demo-bar strong{color:var(--gold-lt);font-weight:600}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .btn:hover,.zap:hover{transform:none}
  .zap{animation:none}
}