/* Andreucci Advogados — página provisória
   Fontes hospedadas no próprio site (sem Google Fonts = sem envio de dados a terceiros) */
@font-face{font-family:"Anton";src:url("fonts/anton-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Oswald";src:url("fonts/oswald-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Oswald";src:url("fonts/oswald-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --navy:#10104F;
  --navy-deep:#0A0942;
  --navy-light:#1C1C62;
  --red:#8A1D19;
  --red-deep:#6E1512;
  --red-light:#962A24;
  --cream:#FCF2ED;
  --cream-dim:rgba(252,242,237,.78);
  --line:rgba(205,205,235,.55);
  --paper:#F7F1EC;
  --ink:#1A1846;
  --ink-soft:#4A4870;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--navy-deep);
  color:var(--cream);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 20px}

/* ---------- tipografia ---------- */
h1,h2{
  font-family:"Anton",Impact,"Arial Narrow",sans-serif;
  font-weight:400;
  line-height:1.05;
  letter-spacing:.005em;
  margin:0;
}
h1{font-size:clamp(2.6rem,7.4vw,4.6rem)}
h2{font-size:clamp(2.3rem,6.4vw,4rem)}
h3{
  font-family:"Oswald","Arial Narrow",sans-serif;
  font-weight:600;
  font-size:1.3rem;
  line-height:1.2;
  margin:0 0 .45rem;
  letter-spacing:.01em;
}
.eyebrow{
  font-family:"Oswald","Arial Narrow",sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.9rem;
  margin:0 0 1rem;
  color:var(--cream-dim);
}
.eyebrow--dark{color:var(--red)}

/* ---------- botões ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:2rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.8rem 1.6rem;
  border-radius:999px;
  font-weight:600;font-size:1rem;letter-spacing:.01em;
  text-decoration:none;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
.btn--cream{background:var(--cream);color:var(--navy);box-shadow:0 10px 28px -12px rgba(0,0,0,.6)}
.btn--cream:hover{transform:translateY(-1px);background:#fff}
.btn--onred{color:var(--red-deep)}
.btn--ghost{border:1.5px solid var(--line);color:var(--cream)}
.btn--ghost:hover{background:rgba(252,242,237,.08)}
.ico{width:22px;height:22px;flex:none}

/* ---------- hero (azul-marinho, como os posts) ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 38%, var(--navy-light) 0%, var(--navy) 45%, var(--navy-deep) 100%);
  text-align:center;
  padding:56px 0 96px;
}
.hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.logo{width:min(320px,74vw);margin-bottom:64px}
.hero h1{max-width:13ch;color:var(--cream)}
.lead{
  font-family:"Oswald","Arial Narrow",sans-serif;font-weight:500;
  font-size:clamp(1.15rem,2.6vw,1.45rem);line-height:1.4;
  max-width:36ch;margin:1.4rem 0 0;color:var(--cream);
}

/* arcos decorativos (mesmo traço dos posts) */
.arc{position:absolute;border-radius:50%;border:3px solid var(--line);pointer-events:none}
.arc--tl{width:300px;height:300px;top:-170px;left:-150px;border-color:transparent var(--line) var(--line) transparent;transform:rotate(10deg)}
.arc--br{width:340px;height:340px;bottom:-200px;right:-170px;border-color:var(--line) transparent transparent var(--line);transform:rotate(-8deg)}

/* ---------- faixa cuidadores (vermelho) ---------- */
.ci{
  position:relative;overflow:hidden;
  background:
    linear-gradient(115deg, var(--red-light) 0%, var(--red-deep) 30%, var(--red) 55%, var(--red-deep) 78%, var(--red-light) 100%);
  text-align:center;
  padding:88px 0;
}
.ring{
  position:absolute;left:50%;top:50%;
  width:min(640px,120vw);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:3px solid rgba(252,242,237,.35);
  box-shadow:0 0 0 10px transparent, inset 0 0 0 9px transparent;
  pointer-events:none;
}
.ring::after{
  content:"";position:absolute;inset:14px;border-radius:50%;
  border:1.5px solid rgba(252,242,237,.22);
}
.ci__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.ci h2{color:var(--cream)}
.ci__quote{
  font-family:"Oswald","Arial Narrow",sans-serif;font-weight:500;
  font-size:clamp(1.2rem,2.8vw,1.5rem);line-height:1.35;
  margin:1.2rem 0 0;max-width:30ch;
}
.ci__text{max-width:56ch;margin:1.1rem 0 2rem;color:var(--cream-dim)}

/* ---------- áreas (fundo claro) ---------- */
.areas{background:var(--paper);color:var(--ink);padding:84px 0}
.areas h2{color:var(--navy);margin-bottom:2.2rem}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
.card{
  background:#fff;border:1px solid #E7DED6;border-radius:14px;
  padding:22px 22px 20px;
  border-top:4px solid var(--navy);
}
.card p{margin:0;color:var(--ink-soft);font-size:.96rem}
.card h3{color:var(--navy)}
.card--featured{border-top-color:var(--red)}
.card--featured h3{color:var(--red)}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}.card--featured{grid-column:1/-1}}
@media (min-width:920px){.grid{grid-template-columns:repeat(3,1fr)}.card--featured{grid-column:span 2}}

/* ---------- rodapé ---------- */
.footer{background:var(--navy-deep);color:var(--cream-dim);text-align:center;padding:56px 0 48px;font-size:.92rem}
.footer__inner p{margin:.35rem 0}
.footer__logo{width:180px;margin:0 auto 1.4rem;opacity:.95}
.footer__id{color:var(--cream)}
.footer a{text-decoration:none;border-bottom:1px solid rgba(252,242,237,.35)}
.footer a:hover{border-bottom-color:var(--cream)}
.footer__note{font-size:.8rem;opacity:.75;max-width:52ch;margin-left:auto!important;margin-right:auto!important}
.footer__note:first-of-type{margin-top:1.2rem!important}

@media (prefers-reduced-motion:reduce){.btn{transition:none}}
.hero--full{min-height:100vh;display:flex;align-items:center}