/* ==========================================================================
   Sidnei Cordeiro Advocacia — componentes
   --------------------------------------------------------------------------
   Consome os tokens de assets/tokens.css (camada compartilhada com a SCOPE).
   Nenhum valor de cor ou fonte é declarado aqui — só var(--…).

   O vocabulário de classes é deliberadamente o MESMO do site da SCOPE
   (.wrap, .eyebrow, .ementa, .section, .card/.ref/.more, .btn/.btn-primary,
   .faixa, .site-footer/.foot-nav/.foot-legal, .skip-to). É isso que faz
   "um sistema só" ser literal: a mesma folha renderiza os dois sites.

   Regras de contraste herdadas do sistema, não negociáveis:
   · --gold (#B08D4A) é decorativo, ou texto APENAS sobre navy;
   · sobre fundo claro, texto dourado usa --gold-ink (#7E5F2A, WCAG AA);
   · rótulos sobre fundo claro usam --accent-ink (#8A8174).
   ========================================================================== */

/* --- Base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--navy-700);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--navy-950);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--navy-900);outline-offset:3px}

h1,h2,h3{
  font-family:var(--font-display);font-weight:600;line-height:1.18;
  color:var(--navy-900);margin:0 0 .6em;
}
h1{font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3vw,2.05rem)}
h3{font-size:1.22rem}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding:0;list-style:none}
button{font:inherit;color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.prose{max-width:var(--max-prose)}
/* Texto só para leitor de tela (ex.: título de seção que o layout dispensa). */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-to{
  position:absolute;left:16px;top:-64px;z-index:60;
  background:var(--navy-900);color:var(--paper);
  padding:12px 16px;text-decoration:none;transition:top .15s;
}
.skip-to:focus{top:16px}

/* --- Eyebrow / rótulos ------------------------------------------------ */
/* O fio curto antes do rótulo é a assinatura do sistema. */
.eyebrow{
  font-family:var(--font-ui);
  font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-ink);
  margin:0 0 14px;
}
.eyebrow::before{
  content:"";display:inline-block;width:22px;height:1px;
  background:var(--accent-ink);vertical-align:middle;margin-right:10px;
}
/* Sobre navy: o dourado é autorizado como acento, e o texto clareia. */
.eyebrow--on-navy{color:var(--on-navy)}
.eyebrow--on-navy::before{background:var(--gold)}

/* --- Cabeçalho -------------------------------------------------------- */
.site-header{
  background:var(--navy-950);
  border-bottom:1px solid var(--rule-dark);
  position:sticky;top:0;z-index:50;
}
.site-header .wrap{display:flex;align-items:center;gap:32px;min-height:76px}

.brand{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;color:var(--paper);
}
.brand:hover{color:var(--paper)}
/* Monograma oficial em imagem (titular, 14/09/2026); altura casa com as duas
   linhas de texto ao lado (nome + OAB). */
.brand .brand-mono{display:block;flex:none;height:46px;width:auto}
.brand .brand-nome{
  font-family:var(--font-display);font-weight:600;font-size:1.18rem;
  line-height:1.1;display:block;
}
.brand .brand-oab{
  font-family:var(--font-ui);font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-navy-soft);display:block;margin-top:3px;
}

.nav{margin-left:auto;display:flex;align-items:center;gap:28px}
.nav a{
  text-decoration:none;color:var(--on-navy);font-size:.95rem;
  padding-bottom:4px;border-bottom:1px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--gold)}
.nav .cta{
  background:var(--gold);color:var(--navy-950);font-weight:500;
  padding:11px 20px;border-bottom:0;
}
.nav .cta:hover{background:var(--stone);color:var(--navy-950);border-bottom:0}

.nav-toggle{
  margin-left:auto;display:none;cursor:pointer;
  background:transparent;color:var(--paper);
  border:1px solid rgba(201,193,182,.44);padding:8px 14px;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}

/* --- Ementa (herói das páginas internas) ------------------------------ */
.ementa{background:var(--navy-900);color:var(--paper);padding:88px 0}
.ementa h1{color:var(--paper);max-width:20em}
.ementa .ementa-sumula{
  max-width:var(--max-prose);font-size:1.15rem;line-height:1.6;
  color:var(--on-navy);margin:0;
}

/* --- Botões ----------------------------------------------------------- */
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn{
  display:inline-block;text-decoration:none;
  font-family:var(--font-ui);font-size:.95rem;font-weight:500;
  padding:14px 26px;border:1px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--gold);color:var(--navy-950)}
.btn-primary:hover{background:var(--stone);color:var(--navy-950)}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(201,193,182,.44)}
.btn-ghost:hover{background:rgba(201,193,182,.12);color:var(--paper)}
.btn-navy{background:var(--navy-900);color:var(--paper)}
.btn-navy:hover{background:var(--navy-950);color:var(--paper)}

/* --- Seções ----------------------------------------------------------- */
.section{padding:80px 0}
.section.alt{background:var(--white)}
.section-head{max-width:var(--max-prose)}
.section-head p{color:var(--ink-soft)}

/* --- Pilares ---------------------------------------------------------- */
.pilares{
  display:grid;gap:32px;margin-top:48px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.pilar{border-top:1px solid var(--rule);padding-top:20px}
.pilar h3{margin-bottom:8px}
.pilar p{color:var(--ink-soft);margin:0}

/* --- Grade e cartões -------------------------------------------------- */
.grid{display:grid;gap:20px;margin-top:48px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}

.card{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--rule);
  padding:28px;text-decoration:none;color:inherit;
}
.card:hover{border-color:var(--navy-500);color:inherit}
.card .ref{
  font-family:var(--font-ui);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);
}
.card h3{margin:14px 0 10px}
.card p{color:var(--ink-soft);flex:1;margin:0}
.card .more{
  margin-top:22px;font-size:.82rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--navy-700);
}
.card--inativo{opacity:.58;pointer-events:none}
.card--inativo .more{color:var(--ink-soft)}

/* --- Prosa longa ------------------------------------------------------ */
.prosa{max-width:var(--max-prose)}
.prosa h2{margin-top:56px}
.prosa li{
  padding-left:18px;margin-bottom:10px;
  border-left:1px solid var(--rule);
}
.nota{
  background:var(--paper-deep);border-left:2px solid var(--gold);
  padding:22px 26px;margin-top:44px;
}
.nota p{color:var(--navy-700);margin:0;font-size:1rem}

/* O § como ornamento editorial. Decorativo (aria-hidden), nunca marca. */
.paragrafo-orn{
  font-family:var(--font-display);font-weight:400;font-size:3.4rem;
  line-height:1;color:var(--accent-ink);display:block;margin-bottom:24px;
}

/* --- Faixa institucional --------------------------------------------- */
.faixa{background:var(--navy-900);color:var(--paper);padding:88px 0}
.faixa h2{color:var(--paper)}
.faixa p{color:var(--on-navy);max-width:var(--max-prose)}
.faixa .contato-lista{margin:44px 0 0;display:grid;gap:22px}
.faixa .contato-lista dt{
  font-family:var(--font-ui);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.faixa .contato-lista dd{margin:6px 0 0;font-size:1.15rem;color:var(--paper)}
.faixa .contato-lista a{color:var(--paper);text-decoration-color:var(--gold)}

/* --- Rodapé ----------------------------------------------------------- */
.site-footer{
  background:var(--navy-950);color:var(--on-navy);
  padding:44px 0;border-top:1px solid var(--rule-dark);
  font-size:.92rem;
}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:baseline}
.site-footer a{color:var(--on-navy);text-decoration:none;border-bottom:1px solid var(--navy-700)}
.site-footer a:hover{color:var(--paper);border-bottom-color:var(--gold)}
/* A assinatura com a inscrição da OAB fecha a peça — nunca abre. */
.foot-brand{
  font-family:var(--font-ui);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px}
.foot-legal{color:var(--navy-500)}
.site-footer .foot-legal a{color:var(--navy-500);border-bottom-color:transparent}
.site-footer .foot-legal a:hover{color:var(--on-navy)}

/* --- 404 -------------------------------------------------------------- */
.erro{padding:96px 0}
.erro .codigo{
  font-family:var(--font-ui);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);
  margin:0 0 14px;
}

/* ==========================================================================
   PORTAL — tipo de página da home, espelhando o da SCOPE
   --------------------------------------------------------------------------
   Mesmas classes do portal de scopesg.com.br (.portal__slides / __veil /
   __tint / __scrim / __inner / __top / __center / __eyebrow / __title /
   __lead / __dots / __dot / __nav--ghost / .portal-btn / __foot), para que
   a folha siga servindo os dois sites.

   Forma copiada do style.css da SCOPE em 14/09/2026 (titular: "manter tudo
   da SCOPE"): véu em dois gradientes, botões de vidro translúcido, CTA em
   vidro dourado, texto ancorado embaixo, Ken Burns e entrada suave.

   Diferenças deliberadas em relação à SCOPE:
   · não há "Acesso do Cliente" (o escritório não tem área de cliente);
   · o motor de tonalidade adaptativa (--*-dynamic) não foi replicado: o
     acento é fixo em --gold, como de fato está nos três slides de lá;
   · os dots mantêm o desenho de 11px, mas com área de toque de 24px
     (WCAG 2.2, item 8.3 do APRENDIZADOS_SCOPE);
   · o topo quebra linha em tela estreita, porque a marca aqui é texto em
     duas linhas, mais larga que o wordmark da SCOPE;
   · anel de foco em ouro dentro do portal (o navy some sobre fundo escuro).
   ========================================================================== */
body.is-portal{background:var(--navy-950);overflow-x:hidden}

.portal{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--navy-950);
}
.portal :focus-visible{outline-color:var(--gold)}

.portal__slides{position:absolute;inset:0;z-index:0}
.portal__slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  transition:opacity 1.4s cubic-bezier(.4,0,.2,1),transform 1.4s cubic-bezier(.4,0,.2,1);
}
.portal__slide.is-active{opacity:1}
@media (prefers-reduced-motion:no-preference){
  /* Ken Burns contínuo: pausa na capa inativa e retoma de onde parou. */
  .portal__slide{animation:portalKen 20s ease-in-out infinite alternate;animation-play-state:paused}
  .portal__slide.is-active{animation-play-state:running}
  @keyframes portalKen{from{transform:scale(1)}to{transform:scale(1.05)}}
}

/* Véu: escurece topo e base (onde há texto) e o lado esquerdo (onde fica o
   título); o centro e a direita deixam a fotografia aparecer. */
.portal__veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(20,24,30,.78) 0%,rgba(20,24,30,.36) 26%,rgba(20,24,30,.30) 55%,rgba(20,24,30,.80) 100%),
    linear-gradient(90deg,rgba(20,24,30,.72) 0%,rgba(20,24,30,.28) 60%,rgba(20,24,30,.12) 100%);
}
.portal__tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(176,141,74,.07)}
/* Scrim de topo: garante a leitura da marca e do CTA. */
.portal__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,0) 50%);
}

.portal__inner{
  position:relative;z-index:2;
  flex:1;display:flex;flex-direction:column;
  max-width:1180px;width:100%;margin:0 auto;
  padding:clamp(22px,4vh,40px) clamp(24px,5vw,56px);
  color:var(--paper);
}

/* topo */
.portal__top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px}
.portal__actions{display:flex;align-items:center;gap:12px}

/* Vidro translúcido compartilhado pelo CTA e pelos botões do menu. */
.portal__cta,.portal-btn{
  font-family:var(--font-ui);font-size:.86rem;font-weight:600;letter-spacing:.02em;
  color:#F7F2EC;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  padding:11px 22px;border-radius:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  -webkit-backdrop-filter:blur(12px) brightness(1.8) saturate(1.5);
  backdrop-filter:blur(12px) brightness(1.8) saturate(1.5);
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.portal-btn:hover{background:rgba(255,255,255,.15);box-shadow:0 4px 16px rgba(0,0,0,.20);color:#F7F2EC}
.portal-btn:active{background:rgba(255,255,255,.20);box-shadow:0 2px 8px rgba(0,0,0,.15)}
/* CTA: o mesmo vidro, em dourado, pela hierarquia. */
.portal__cta{
  background:rgba(176,141,74,.15);
  border:1px solid rgba(176,141,74,.50);
  box-shadow:0 2px 12px rgba(176,141,74,.20);
  -webkit-backdrop-filter:blur(12px) brightness(2.0) saturate(1.6);
  backdrop-filter:blur(12px) brightness(2.0) saturate(1.6);
}
.portal__cta:hover{background:rgba(176,141,74,.25);box-shadow:0 4px 20px rgba(176,141,74,.30);color:#F7F2EC}
.portal__cta:active{background:rgba(176,141,74,.32);box-shadow:0 2px 12px rgba(176,141,74,.20)}
@supports not ((-webkit-backdrop-filter:blur(12px)) or (backdrop-filter:blur(12px))){
  .portal-btn{background:rgba(30,30,30,.55)}
  .portal__cta{background:rgba(176,141,74,.42)}
}

/* centro: bloco de texto ancorado embaixo, o topo da foto fica aberto */
.portal__center{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,3vh,32px) 0}
.portal__eyebrow{
  font-family:var(--font-ui);font-size:.74rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone);margin:0 0 16px;
}
.portal__eyebrow::before{
  content:"";display:inline-block;width:26px;height:1px;
  background:var(--stone);vertical-align:middle;margin-right:12px;
}
/* A largura é limitada no título e no subtítulo, cada um pelo próprio corpo
   de letra, e não no contêiner (antes: 18em de 17px = 306px). */
.portal__title{
  font-family:var(--font-display);font-weight:600;color:#F7F2EC;
  font-size:clamp(2rem,4vw,3.3rem);line-height:1.12;letter-spacing:-.01em;margin:0;
  max-width:16em;min-height:2.24em;text-wrap:balance;
}
.portal__lead{
  font-family:var(--font-ui);color:#C9D2DA;font-size:clamp(.98rem,1.3vw,1.12rem);
  line-height:1.55;max-width:40em;margin:20px 0 0;
  min-height:3.1em;text-wrap:balance;
}
/* Titular, 14/09/2026: título e subtítulo com 2 linhas nas três telas. Os
   textos curtos trazem uma quebra fixa ("\n" no build.py), respeitada só em
   tela larga; no celular a quebra volta a ser natural. */
@media (min-width:861px){
  .portal__title,.portal__lead{white-space:pre-line}
}

/* Dots: desenho de 11px como na SCOPE; ::after amplia a área de toque. */
.portal__dots{display:flex;gap:14px;align-items:center;margin-top:26px}
.portal__dot{
  position:relative;
  width:11px;height:11px;border-radius:50%;padding:0;
  border:1px solid rgba(201,193,182,.45);
  background:transparent;cursor:pointer;
  transition:border-color .9s ease-in-out,background-color .9s ease-in-out,box-shadow .9s ease-in-out,transform .3s ease;
}
.portal__dot::after{content:"";position:absolute;inset:-7.5px;border-radius:50%}
.portal__dot:hover{border-color:rgba(201,193,182,.80);transform:scale(1.18)}
.portal__dot.is-active{
  border-color:var(--gold);background-color:var(--gold);
  box-shadow:0 0 0 4px rgba(176,141,74,.15),0 0 12px rgba(176,141,74,.45);
}

/* menu */
.portal__nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:clamp(18px,3vh,32px)}
/* nota discreta sob os botões (link da Política de Privacidade no contato) */
.portal__nota{margin:18px 0 0;font-family:var(--font-ui);font-size:.8rem;line-height:1.4}
.portal__nota{margin:12px 0 0}
/* padding vertical: área de toque de 24 px no mínimo (WCAG 2.5.8) */
.portal__nota a{display:inline-block;padding:5px 0;color:#DCE2E8;text-decoration:underline;text-underline-offset:3px}
.portal__nota a:hover{color:#FFFFFF}

/* rodapé */
.portal__foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(20px,4vh,36px);
  font-family:var(--font-ui);font-size:.82rem;color:#8FA3B5;
}
.portal__foot a{color:#C5D0DB}
.portal__foot a:hover{color:var(--white)}

/* entrada suave */
@media (prefers-reduced-motion:no-preference){
  .portal__eyebrow,.portal__title,.portal__lead,.portal__nav,.portal__foot{animation:portalRise .7s ease both}
  .portal__title{animation-delay:.08s}
  .portal__lead{animation-delay:.16s}
  .portal__nav{animation-delay:.24s}
  .portal__foot{animation-delay:.30s}
  @keyframes portalRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

@media (max-width:560px){
  body.is-portal{overflow:auto}
  .portal__nav{gap:10px}
  .portal-btn,.portal__nav .portal__cta{flex:1 1 auto}
  .portal__center{max-width:none;padding:28px 0}
  /* No celular os textos dos slides quebram em 3 ou 4 linhas; reservar 4
     evita que dots e botões pulem a cada troca de slide. */
  .portal__lead{min-height:6.2em}
}

/* Sem movimento para quem pediu sem movimento: troca quase instantânea. */
@media (prefers-reduced-motion:reduce){
  .portal__slide{transition:opacity 1ms;animation:none}
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width:860px){
  .nav{
    display:none;width:100%;flex-direction:column;align-items:flex-start;
    gap:16px;padding:20px 0 4px;
  }
  .nav.is-open{display:flex}
  .nav-toggle{display:inline-block}
  .site-header .wrap{flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
  .nav .cta{width:100%;text-align:center}
  .ementa,.faixa{padding:64px 0}
  .section{padding:56px 0}
  .site-footer .wrap{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* Impressão: navy não se imprime bem — cai para papel e tinta. */
@media print{
  body{background:#fff;color:#000}
  .site-header,.nav,.nav-toggle,.faixa,.skip-to{display:none}
  .ementa{background:#fff;padding:0}
  .ementa h1,.ementa .ementa-sumula{color:#000}
  .card{border-color:#999}
}