/* ==========================================================================
   Sousa & Soares Advocacia — sistema visual do site
   Cognitio Ads · agosto de 2026
   ========================================================================== */

/* --------------------------------------------------------- fontes (auto-hospedadas) */
@font-face{font-family:'Marcellus';src:url('../fonts/marcellus-400.woff2')format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Karla';src:url('../fonts/karla-400.woff2')format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Karla';src:url('../fonts/karla-500.woff2')format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Karla';src:url('../fonts/karla-600.woff2')format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Karla';src:url('../fonts/karla-700.woff2')format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* --------------------------------------------------------- tokens */
:root{
  /* cor */
  --vinho:        #4A1014;
  --vinho-claro:  #63181D;
  --vinho-fundo:  #3A0C10;
  --tinta:        #1A1416;
  --grafite:      #2B2B2B;
  --mute:         #6B5E5A;
  --papel:        #F4EFE7;
  --creme:        #FBF8F3;
  --areia:        #DCCCB8;
  --ouro:         #B99665;
  --ouro-texto:   #86683D;   /* ouro com contraste AA sobre papel/creme */
  --ouro-claro:   #D9BE86;
  --linha:        rgba(42,26,22,.14);
  --linha-clara:  rgba(244,239,231,.20);
  --linha-forte:  rgba(42,26,22,.52);
  --linha-clara-forte: rgba(244,239,231,.38);
  --borda-campo:  rgba(42,26,22,.50);

  /* tipografia */
  --display: 'Marcellus', 'Iowan Old Style', Georgia, serif;
  --texto:   'Karla', 'Helvetica Neue', Arial, sans-serif;

  /* escala fluida — base 18px, generosa para leitor mais velho */
  --t-xs:  clamp(.82rem, .78rem + .1vw, .88rem);
  --t-sm:  clamp(.88rem, .85rem + .15vw, .95rem);
  --t-base:clamp(1.06rem, 1.0rem + .25vw, 1.19rem);
  --t-md:  clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --t-lg:  clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --t-xl:  clamp(2rem, 1.6rem + 1.8vw, 3.1rem);
  --t-2xl: clamp(2.5rem, 1.9rem + 2.9vw, 4.4rem);
  --t-3xl: clamp(3rem, 2.1rem + 4.2vw, 5.6rem);

  /* espaço */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem;
  --s6:4rem; --s7:6rem; --s8:8rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --largura: 1240px;
  --coluna: 68ch;

  --dur: .6s;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--papel); color:var(--grafite);
  font-family:var(--texto); font-size:var(--t-base); line-height:1.72;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* grão de papel — mesma textura das peças de rede */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.30; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.14'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
img,svg{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit}

h1,h2,h3,h4{
  font-family:var(--display); font-weight:400; line-height:1.12;
  letter-spacing:-.005em; color:var(--tinta); margin:0;
  text-wrap:balance;
}
h1{font-size:var(--t-2xl)}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-lg)}
p{margin:0 0 1.1em; max-width:var(--coluna); text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:600; color:var(--tinta)}

::selection{background:var(--vinho); color:var(--papel)}
:focus-visible{outline:2.5px solid var(--vinho); outline-offset:3px; border-radius:2px;
  box-shadow:0 0 0 6px var(--ouro-claro)}
.escuro :focus-visible,.rodape :focus-visible,.zap:focus-visible,.faixa :focus-visible{
  outline-color:var(--ouro-claro); box-shadow:0 0 0 6px rgba(26,20,22,.9)}

/* --------------------------------------------------------- utilitários */
.wrap{width:min(100% - var(--gutter)*2, var(--largura)); margin-inline:auto; position:relative; z-index:1}
.secao{padding-block:clamp(3.5rem, 9vw, 7.5rem)}
.secao--curta{padding-block:clamp(2.5rem, 6vw, 5rem)}
.escuro{background:var(--vinho-fundo); color:rgba(244,239,231,.86)}
.escuro h1,.escuro h2,.escuro h3{color:var(--papel)}
.escuro strong{color:var(--papel)}
.creme{background:var(--creme)}
.areia{background:var(--areia)}

.rotulo{
  display:inline-flex; align-items:center; gap:.85rem;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ouro-texto); margin:0 0 var(--s3);
}
.rotulo::before{content:''; width:2.2rem; height:2px; background:currentColor; flex:none}
.escuro .rotulo{color:var(--ouro-claro)}

.filete{width:5.5rem; height:3px; background:var(--ouro); border:0; margin:var(--s3) 0}
.lead{font-size:var(--t-md); line-height:1.6; color:var(--mute); max-width:56ch}
.escuro .lead{color:rgba(244,239,231,.74)}
.ouro{color:var(--vinho)}
.escuro .ouro{color:var(--ouro-claro)}
.miudo{font-size:var(--t-sm); color:var(--mute); line-height:1.6}

/* --------------------------------------------------------- botões */
.btn{
  display:inline-flex; align-items:center; gap:.8rem;
  padding:1.05rem 1.9rem; border:0; border-radius:2px; cursor:pointer;
  font-size:var(--t-sm); font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none;
  background:var(--vinho); color:var(--papel);
  transition:background .25s var(--ease), transform .25s var(--ease);
  position:relative; overflow:hidden;
}
.btn:hover{background:var(--vinho-claro); transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none; width:1.2em; height:1.2em; fill:currentColor}
.btn--linha{background:transparent; color:var(--vinho); box-shadow:inset 0 0 0 1.5px var(--vinho)}
.btn--linha:hover{background:var(--vinho); color:var(--papel)}
.escuro .btn--linha{color:var(--papel); box-shadow:inset 0 0 0 1.5px rgba(244,239,231,.5)}
.escuro .btn--linha:hover{background:var(--papel); color:var(--vinho)}
.btn--claro{background:var(--papel); color:var(--vinho)}
.btn--claro:hover{background:#fff}

.link-seta{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-weight:600; font-size:var(--t-sm); letter-spacing:.06em;
  color:var(--vinho); border-bottom:1.5px solid transparent;
  padding-bottom:2px; transition:border-color .25s, gap .25s;
}
.link-seta:hover{border-color:var(--vinho); gap:.95rem}
.link-seta svg{flex:none; width:1.15em; height:1.15em; stroke:currentColor; fill:none}
.link-seta--bloco{display:inline-flex}
.escuro .link-seta{color:var(--ouro-claro)}
.escuro .link-seta:hover{border-color:var(--ouro-claro)}

/* --------------------------------------------------------- cabeçalho */
.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(244,239,231,.94); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.topo.rolou{border-color:var(--linha); box-shadow:0 6px 24px rgba(42,26,22,.05)}
.topo__int{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding-block:1.15rem}
.topo__marca{display:block; flex:none}
.topo__marca img{height:52px; width:auto}
.nav{display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem)}
.nav a{
  text-decoration:none; font-size:var(--t-sm); font-weight:500; letter-spacing:.03em;
  color:var(--grafite); position:relative; padding-block:.35rem;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--vinho); transition:right .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--vinho)}
.nav a.btn{padding:.8rem 1.35rem; color:var(--papel)}
.nav a.btn:hover{color:var(--papel)}
.nav .btn::after{display:none}

.menu-btn{
  display:none; background:none; border:0; cursor:pointer; padding:.6rem;
  color:var(--vinho); line-height:0;
}
@media (max-width:900px){
  .menu-btn{display:block}
  /* backdrop-filter cria bloco contentor e quebra o painel fixo — desligado no mobile */
  .topo{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--papel)}
  .nav{
    overflow-y:auto; overscroll-behavior:contain;
    position:fixed; inset:0 0 0 auto; width:min(88vw,26rem); max-width:100vw;
    background:var(--papel); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:var(--s3); padding:var(--s6) var(--gutter);
    box-shadow:-20px 0 60px rgba(42,26,22,.14); z-index:90;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
  }
  .nav[data-aberto="true"]{opacity:1; visibility:visible; transform:none}
  .nav a{font-size:var(--t-md); font-family:var(--display)}
  .nav .btn{font-family:var(--texto); font-size:var(--t-sm)}
  .topo__marca img{height:44px}
}

/* --------------------------------------------------------- hero */
.hero{position:relative; overflow:hidden; padding-block:clamp(3.5rem,10vw,8rem) clamp(3rem,8vw,6.5rem)}
.hero__marca{
  position:absolute; right:-8%; top:50%; translate:0 -50%;
  width:min(46vw,540px); opacity:.055; pointer-events:none; z-index:0;
}
.hero__int{position:relative; z-index:1; max-width:min(100%, 60ch)}
@media (min-width:700px){ .hero h1{max-width:17ch} }
.hero h1{margin-bottom:var(--s3)}
.hero .lead{margin-bottom:var(--s4)}
.hero__acoes{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:center}
.hero__assinatura{
  margin-top:clamp(2.5rem,6vw,4.5rem); padding-top:var(--s3);
  border-top:1px solid var(--linha);
  font-family:var(--display); font-size:var(--t-md); color:var(--vinho);
  font-style:italic;
}

/* --------------------------------------------------------- grade de cartões */
.grade{display:grid; gap:clamp(1rem,2.5vw,1.75rem)}
.grade--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grade--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}

.cartao{
  background:var(--creme); padding:clamp(1.6rem,3.2vw,2.4rem);
  border-top:3px solid var(--ouro); position:relative;
  display:flex; flex-direction:column; gap:var(--s2);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cartao:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(42,26,22,.09)}
.cartao__n{font-family:var(--display); font-size:var(--t-lg); color:var(--ouro-texto); line-height:1}
.escuro .cartao__n{color:var(--ouro-claro)}
.cartao h3{font-size:var(--t-md)}
.cartao p{font-size:var(--t-sm); color:var(--mute); margin:0}
.cartao .link-seta{margin-top:auto; padding-top:var(--s2)}
.escuro .cartao{background:rgba(244,239,231,.055); border-top-color:var(--ouro-claro)}
.escuro .cartao p{color:rgba(244,239,231,.72)}
.escuro .cartao:hover{box-shadow:0 18px 40px rgba(0,0,0,.25)}

/* --------------------------------------------------------- a primeira pergunta */
.perguntas{display:grid; gap:clamp(1.5rem,3vw,2.5rem)}
.pergunta{
  display:grid; gap:var(--s2) clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
  padding-block:clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid var(--linha);
}
@media (min-width:820px){ .pergunta{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)} }
.pergunta__q{
  margin:0;
  font-family:var(--display); font-size:var(--t-lg); line-height:1.24;
  color:var(--vinho); position:relative; padding-left:2.2rem;
}
.pergunta__q::before{
  content:'\201C'; position:absolute; left:0; top:-.34em;
  font-size:2.6em; line-height:1; color:var(--ouro); opacity:.55;
}
.pergunta__a{font-size:var(--t-base); color:var(--grafite)}
.pergunta__a p{max-width:52ch}

/* --------------------------------------------------------- lista com ícone */
.itens{list-style:none; margin:0; padding:0; display:grid; gap:.15rem}
.itens li{
  display:flex; gap:1.1rem; align-items:flex-start;
  padding-block:.95rem; border-bottom:1px solid var(--linha);
}
.itens li:last-child{border-bottom:0}
.escuro .itens li{border-color:var(--linha-clara)}
.itens .marca{
  flex:none; width:2.4rem; height:2.4rem; border-radius:50%;
  border:1.5px solid var(--ouro); display:grid; place-items:center; margin-top:.1rem;
}
.itens .marca svg{width:1.15rem; height:1.15rem; stroke:var(--ouro); fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.escuro .itens .marca{border-color:var(--ouro-claro)}
.escuro .itens .marca svg{stroke:var(--ouro-claro)}
.itens b{display:block; font-weight:600; color:var(--tinta); font-size:var(--t-base)}
.escuro .itens b{color:var(--papel)}
.itens span{font-size:var(--t-sm); color:var(--mute)}
.escuro .itens span{color:rgba(244,239,231,.7)}

/* --------------------------------------------------------- duas colunas editoriais */
.duo{display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:start}
@media (min-width:900px){ .duo{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} }
.duo--inv{}
@media (min-width:900px){ .duo--inv{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} }
.duo__fixo{position:sticky; top:7rem}
@media (max-width:899px){ .duo__fixo{position:static} }

/* --------------------------------------------------------- área reservada de foto */
.foto{
  position:relative; overflow:hidden; background:var(--areia);
  aspect-ratio:4/5; display:grid; place-items:center; text-align:center;
}
.foto--larga{aspect-ratio:16/10}
.foto__nota{
  font-size:var(--t-xs); letter-spacing:.24em; text-transform:uppercase;
  color:rgba(42,26,22,.72); font-weight:700; padding:var(--s3);
}
.foto__nota small{display:block; font-weight:400; letter-spacing:.1em; margin-top:.7rem; text-transform:none; font-size:.95em}
.foto::after{content:''; position:absolute; inset:1.25rem; border:1px dashed rgba(42,26,22,.28)}

/* --------------------------------------------------------- faixa de destaque */
.faixa{background:var(--vinho); position:relative; overflow:hidden}
.faixa__marca{position:absolute; left:-5%; bottom:-42%; width:min(36vw,400px); opacity:.07}

/* --------------------------------------------------------- formulário */
.form{display:grid; gap:var(--s3); max-width:38rem}
.campo{display:grid; gap:.5rem}
.campo label{font-size:var(--t-sm); font-weight:600; color:var(--tinta); letter-spacing:.02em}
.campo input,.campo select,.campo textarea{
  font:inherit; font-size:var(--t-base); padding:.95rem 1.05rem;
  background:var(--creme); color:var(--grafite);
  border:1.5px solid var(--borda-campo); border-radius:2px; width:100%;
  transition:border-color .2s, background .2s;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--vinho); background:#fff; outline:2px solid var(--vinho); outline-offset:2px;
}
.campo textarea{min-height:8rem; resize:vertical}
.campo__dica{font-size:var(--t-xs); color:var(--mute)}
.consentimento{display:flex; gap:.85rem; align-items:flex-start; font-size:var(--t-sm); color:var(--mute)}
.consentimento input{width:1.15rem; height:1.15rem; margin-top:.3rem; flex:none; accent-color:var(--vinho)}
.consentimento a{color:var(--vinho)}

/* --------------------------------------------------------- rodapé */
.rodape{background:var(--tinta); color:rgba(244,239,231,.7); padding-block:clamp(3rem,7vw,5rem) var(--s4)}
.rodape a{color:rgba(244,239,231,.82); text-decoration:none}
.rodape a:hover{color:var(--ouro-claro)}
.rodape__grade{display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.rodape__marca img{height:64px; width:auto; margin-bottom:var(--s3)}
.rodape h4{font-family:var(--texto); font-size:var(--t-xs); font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ouro-claro); margin:0 0 var(--s2)}
.rodape ul{list-style:none; margin:0; padding:0; display:grid; gap:.7rem; font-size:var(--t-sm)}
.rodape__base{
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--linha-clara-forte);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between;
  font-size:var(--t-xs); color:rgba(244,239,231,.60); line-height:1.7;
}
.rodape__aviso{max-width:74ch}

/* --------------------------------------------------------- whatsapp fixo */
.zap{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:70;
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--vinho); color:var(--papel); text-decoration:none;
  padding:.95rem 1.3rem; border-radius:999px; font-size:var(--t-sm); font-weight:700;
  letter-spacing:.06em; box-shadow:0 12px 32px rgba(42,26,22,.28);
  transition:transform .3s var(--ease), background .3s;
}
.zap:hover{background:var(--vinho-claro); transform:translateY(-3px)}
.zap svg{width:1.3rem; height:1.3rem; fill:currentColor; flex:none}
@media (max-width:600px){ .zap span{display:none} .zap{padding:1rem; border-radius:50%} }

/* --------------------------------------------------------- revelação */
.rev{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rev.visivel{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1; transform:none; transition:none}
  .btn:hover,.cartao:hover,.zap:hover{transform:none}
}

/* --------------------------------------------------------- migalhas + página interna */
.migalhas{font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); padding-top:var(--s4)}
.migalhas a{text-decoration:none; color:var(--mute)}
.migalhas a:hover{color:var(--vinho)}
.cabeca{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,5vw,3.5rem); border-bottom:1px solid var(--linha)}
.cabeca h1{margin-bottom:var(--s3)}

/* âncora com deslocamento do cabeçalho fixo */
[id]{scroll-margin-top:6.5rem}
.pular{
  position:absolute; left:-9999px; top:0; background:var(--vinho); color:var(--papel);
  padding:.9rem 1.4rem; z-index:100; text-decoration:none; font-size:var(--t-sm);
}
.pular:focus{left:.75rem; top:.75rem}

/* --------------------------------------------------------- perguntas frequentes */
.faqs{display:grid; gap:0; max-width:56rem}
.faq{border-top:1px solid var(--linha-forte)}
.faq:last-child{border-bottom:1px solid var(--linha-forte)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.35rem 3rem 1.35rem 0; position:relative;
  font-family:var(--display); font-size:var(--t-md); line-height:1.3; color:var(--tinta);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:.35rem; top:50%; width:.85rem; height:.85rem;
  border-right:2px solid var(--ouro); border-bottom:2px solid var(--ouro);
  translate:0 -70%; rotate:45deg; transition:rotate .3s var(--ease);
}
.faq[open] summary::after{rotate:225deg; translate:0 -20%}
.faq summary:hover{color:var(--vinho)}
.faq__c{padding:0 3rem 1.6rem 0}
.faq__c p{color:var(--mute); max-width:60ch; margin:0}

/* --------------------------------------------------------- erros de formulário */
.campo__erro{
  margin:.35rem 0 0; font-size:var(--t-sm); font-weight:600; color:#8E1B12;
  display:flex; align-items:flex-start; gap:.4rem;
}
.campo__erro::before{content:'!'; font-family:var(--display); flex:none;
  width:1.15em; height:1.15em; border-radius:50%; background:#8E1B12; color:#fff;
  display:grid; place-items:center; font-size:.85em; line-height:1}
.campo [aria-invalid="true"]{border-color:#8E1B12; background:#FFF6F5}

/* --------------------------------------------------------- aviso de cookies */
.aviso-cookies{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  max-height:70vh; overflow-y:auto;
  background:var(--papel); border-top:2px solid var(--vinho);
  box-shadow:0 -12px 40px rgba(42,26,22,.16); padding:var(--s3) 0;
}
.aviso-cookies__int{
  width:min(100% - 2*var(--gutter), var(--largura)); margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; justify-content:space-between;
}
.aviso-cookies__t{font-family:var(--display); font-size:var(--t-md); margin:0; color:var(--vinho)}
.aviso-cookies__int > div:first-child{flex:1 1 30rem; min-width:0}
.aviso-cookies__acoes{display:flex; gap:var(--s2); flex-wrap:wrap; flex:none}
.aviso-cookies__acoes .btn{padding:.75rem 1.4rem; font-size:var(--t-sm)}
.campo__opc{font-weight:400; color:var(--mute)}