/* Marranghello Sociedade de Advogados — holding page
   Paleta oficial do escritorio (mesma da LP): navy + dourado + paper. */
:root{
  --navy:#09212C; --navy-2:#0F2E3B; --navy-3:#143B4B; --navy-deep:#061821;
  --gold:#97927D; --gold-2:#BFB79B; --gold-3:#E4DFCC;
  --paper:#F6F4EE; --muted:#93A5AD; --muted-2:#AEC0C7;
  --line:rgba(228,223,204,.14);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter","Segoe UI",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--navy);
  background-image:
    radial-gradient(120% 70% at 50% -12%,rgba(151,146,125,.16) 0%,transparent 62%),
    linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  background-attachment:fixed;
  color:var(--paper);
  min-height:100vh;
  display:flex;justify-content:center;
  padding:0 20px 52px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{width:100%;max-width:520px;text-align:center}

/* ---------- topo / marca ---------- */
.topo{padding:52px 0 34px}
.marca{width:100%;max-width:300px;height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}

.eyebrow{
  font-size:10.5px;font-weight:800;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-2);
}

h1{
  font-family:var(--serif);
  font-variation-settings:"opsz" 96,"SOFT" 20;
  font-weight:500;line-height:1.08;letter-spacing:-.02em;
  font-size:clamp(29px,7.4vw,38px);
  margin-top:16px;text-wrap:balance;
}

.rule{display:flex;align-items:center;justify-content:center;gap:13px;margin:26px 0 22px}
.rule span{height:1px;width:60px;background:linear-gradient(90deg,transparent,var(--gold))}
.rule span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.rule i{width:5px;height:5px;transform:rotate(45deg);background:var(--gold-2)}

.lede{
  font-family:var(--serif);font-variation-settings:"opsz" 30;
  font-weight:400;font-size:17px;line-height:1.58;
  color:var(--gold-3);text-wrap:balance;padding:0 6px;
}

/* ---------- rotulos de secao ---------- */
.rotulo{
  font-size:10px;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}

/* ---------- areas ---------- */
.areas{margin-top:46px}
.areas ul{list-style:none;display:flex;flex-direction:column;gap:0}
.areas li{
  font-size:14.5px;font-weight:500;color:#D8DFE2;
  padding:11px 8px;border-top:1px solid var(--line);
  line-height:1.35;
}
.areas li:last-child{border-bottom:1px solid var(--line)}

/* ---------- contato ---------- */
.contato{margin-top:46px;display:block}
.canal{
  display:flex;flex-direction:column;gap:4px;
  text-decoration:none;color:inherit;text-align:left;
  background:var(--navy-2);border:1px solid var(--line);border-radius:11px;
  padding:15px 18px;margin-bottom:10px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s,background .22s;
}
a.canal:hover,a.canal:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(191,183,155,.45);
  background:var(--navy-3);
}
.canal.destaque{border-color:rgba(191,183,155,.34);background:#0E2B37}
.canal.estatico{background:transparent}
.canal-rot{
  font-size:9.5px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
}
.canal-val{font-size:15.5px;font-weight:500;color:var(--paper);line-height:1.42;word-break:break-word}
.canal.estatico .canal-val{font-weight:400;color:var(--muted-2);font-size:14.5px}

/* ---------- redes ---------- */
.redes{
  margin-top:34px;display:flex;justify-content:center;
  gap:22px;flex-wrap:wrap;
}
.redes a{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);text-decoration:none;
  padding:6px 2px;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.redes a:hover,.redes a:focus-visible{color:var(--gold-3);border-bottom-color:var(--gold)}

/* ---------- rodape ---------- */
footer{
  margin-top:52px;padding-top:28px;border-top:1px solid var(--line);
  color:var(--muted);
}
.rodape-marca{width:88px;height:auto;opacity:.5;margin:0 auto 16px;display:block}
footer p{font-size:12px;line-height:1.6;font-weight:500;color:#8FA2AA}
footer .oab{margin-top:6px;font-size:11px;font-weight:400;color:#728690;text-wrap:balance}

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

@media (min-width:600px){
  .topo{padding:76px 0 40px}
  .areas li{font-size:15px;padding:12px 8px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}