/* ============================================================
   TOKENS — herdados do /marca (degrau 2 da escada da preguiça)
   ============================================================ */
:root {
  --cor:        #5E98CA;   /* acento — azul Muse */
  --cor-hover:  #89B2D1;
  --navy-deep:  #01070F;
  --navy-dark:  #02121F;
  --navy-mid:   #041B33;
  --navy-light: #072B5B;   /* marinho oficial */
  --white:      #FCFCFC;
  --text-light: #A7BFD8;
  --text-muted: #6B7F96;
  --linha:      rgba(167,191,216,.16);
  --ui:     'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display:'Playfair Display', 'Big Caslon', Georgia, serif;
}

/* ============================================================
   RESET + BASE (espelho fiel do /marca)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--text-light);
  font-family: var(--ui);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px,5vw,36px) }

/* ============================================================
   TOPO FIXO (reusado integralmente do /marca)
   ============================================================ */
.topo {
  position: sticky; top: 0; z-index: 30;
  background: rgba(1,7,15,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo .wrap {
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding-block: 14px;
}
.topo-logo { width: 34px }
.nav { display: flex; align-items: center; gap: 24px; font-size: 13px; font-weight: 500; letter-spacing: .02em }
.nav a { color: var(--text-muted); text-decoration: none; transition: color .2s }
.nav a:hover, .nav a:focus-visible { color: var(--cor) }
.nav-cta {
  padding: 8px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  background: var(--cor); color: var(--navy-deep);
  text-decoration: none;
  transition: background .22s, box-shadow .22s;
}
.nav-cta:hover, .nav-cta:focus-visible {
  background: var(--cor-hover);
  box-shadow: 0 4px 18px rgba(94,152,202,.35);
}
@media (max-width: 780px) { .nav { display: none } }

/* ============================================================
   ELEMENTOS TIPOGRÁFICOS (reusados do /marca)
   ============================================================ */
.kicker {
  display: inline-block;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--cor); margin-bottom: 20px;
}
h2 {
  font-family: var(--display); font-weight: 500; color: var(--white);
  font-size: clamp(28px,4.4vw,46px); line-height: 1.14;
  margin: 0 0 16px; letter-spacing: -.01em;
}
h2::after {
  content: ""; display: block;
  width: 56px; height: 2px;
  background: var(--cor); margin-top: 20px;
  box-shadow: 0 0 14px rgba(94,152,202,.55);
}

/* ============================================================
   SEÇÕES
   ============================================================ */
section {
  padding: clamp(64px,9vw,110px) 0;
  border-bottom: 1px solid var(--linha);
  scroll-margin-top: 72px;
}
section:last-of-type { border-bottom: none }
.cabeca { max-width: 64ch; margin-bottom: clamp(34px,4.4vw,52px) }
.cabeca p { margin: 0; color: var(--text-muted) }

/* ============================================================
   CTA PÍLULA COM GLOW (reusado do /marca)
   ============================================================ */
.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; border-radius: 999px;
  text-decoration: none; font-weight: 600;
  font-size: 14.5px; letter-spacing: .02em;
  background: var(--cor); color: var(--navy-deep);
  box-shadow: 0 0 0 rgba(94,152,202,0);
  transition: background .22s, box-shadow .22s, transform .22s;
  border: none; cursor: pointer;
}
.btn:hover, .btn:focus-visible {
  background: var(--cor-hover);
  box-shadow: 0 8px 34px rgba(94,152,202,.42);
  transform: translateY(-2px);
}
.btn.vazado {
  background: transparent; color: var(--cor);
  border: 1.5px solid rgba(94,152,202,.42);
}
.btn.vazado:hover, .btn.vazado:focus-visible {
  background: rgba(94,152,202,.1); color: var(--cor-hover);
  box-shadow: none;
}

/* ============================================================
   GLASS PANEL (glass-effect2)
   ============================================================ */
.glass-panel {
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-top:    1px solid rgba(255,255,255,.15);
  border-left:   1px solid rgba(255,255,255,.08);
  border-right:  1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
  border-radius: 16px;
}

/* ============================================================
   KEYFRAMES (glass-effect2)
   ============================================================ */
@keyframes float {
  0%   { transform: translate(0,0) scale(1) }
  100% { transform: translate(30px,50px) scale(1.1) }
}
@keyframes pulse-soft {
  0%, 100% { opacity: .6 }
  50%       { opacity: 1 }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible { opacity: 1; transform: none }
.delay-1 { transition-delay: .12s }
.delay-2 { transition-delay: .24s }
.delay-3 { transition-delay: .36s }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(100px,14vw,152px) 0 clamp(80px,10vw,116px);
  text-align: center;
  background: linear-gradient(180deg, var(--navy-mid) 0%, var(--navy-deep) 100%);
}
.hero > .wrap { position: relative; z-index: 2 }

/* Blobs ambientes — float 80px blur, cor Muse + navy */
.hero-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 1 }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px);
  animation: float 14s ease-in-out infinite alternate;
}
.blob-a {
  width: clamp(300px,50vw,620px); height: clamp(180px,28vw,360px);
  background: rgba(94,152,202,.18);
  top: -100px; left: -8%;
}
.blob-b {
  width: clamp(260px,42vw,520px); height: clamp(160px,24vw,300px);
  background: rgba(7,43,91,.72);
  bottom: -80px; right: -6%;
  animation-delay: -7s; animation-duration: 18s;
}

.hero-simbolo { width: clamp(48px,7vw,68px); margin: 0 auto clamp(28px,3.6vw,40px) }

/* H1 do hero — sobrescreve o h2::after na headline */
.hero-h1 {
  font-family: var(--display); font-weight: 600; color: var(--white);
  font-size: clamp(32px,5.4vw,62px); line-height: 1.08;
  margin: 0 0 6px; letter-spacing: -.022em;
  max-width: 22ch; margin-left: auto; margin-right: auto;
}
.hero-h1-b {
  font-family: var(--display); font-weight: 400; font-style: italic;
  color: var(--cor); font-size: clamp(26px,4.2vw,50px);
  line-height: 1.12; display: block; margin-top: 2px;
}

.hero-sub {
  max-width: 56ch; margin: 28px auto 0;
  color: var(--text-muted); font-size: clamp(15px,1.8vw,17.5px);
  line-height: 1.72;
}
.hero .acoes { justify-content: center; margin-top: 40px }

/* Âncora de scroll com pulse-soft */
.scroll-anc {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 52px; text-decoration: none;
  color: var(--text-muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  animation: pulse-soft 2.4s ease-in-out infinite;
}
.scroll-anc:focus-visible { outline: 2px solid var(--cor); outline-offset: 4px; border-radius: 4px }

/* ============================================================
   BLOCO 2 — PROVA DE PROBLEMA
   ============================================================ */
.prob-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)) }
.prob-card {
  padding: 28px 26px 30px; border-radius: 16px;
  background: var(--navy-dark); border: 1px solid var(--linha);
  transition: border-color .25s, transform .25s;
}
.prob-card:hover { border-color: rgba(94,152,202,.35); transform: translateY(-3px) }
.prob-icon {
  width: 44px; height: 44px; border-radius: 10px;
  margin-bottom: 18px; display: grid; place-items: center;
  background: rgba(94,152,202,.1);
}
.prob-h { font-family: var(--display); font-weight: 500; font-size: 20px; color: var(--white); margin: 0 0 12px; letter-spacing: -.01em }
.prob-p { margin: 0; font-size: 14.5px; color: var(--text-muted); line-height: 1.7 }

/* ============================================================
   BLOCO 3 — MÉTODO (glass panels)
   ============================================================ */
.metodo-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) }
.metodo-card {
  padding: 32px 28px 36px;
  transition: transform .3s;
  position: relative;
}
.metodo-card:hover { transform: translateY(-4px) }
.metodo-ghost {
  font-family: var(--display); font-size: 64px; font-weight: 700;
  color: rgba(94,152,202,.10); line-height: 1; margin-bottom: 0;
  user-select: none; pointer-events: none;
}
.metodo-kicker {
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cor); margin-bottom: 14px; display: block; margin-top: -6px;
}
.metodo-h {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(17px,1.9vw,20px); color: var(--white);
  margin: 0 0 14px; line-height: 1.3; letter-spacing: -.01em;
}
.metodo-txt { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.72 }
.metodo-list {
  margin: 14px 0 0; padding: 0 0 0 18px;
  font-size: 13.5px; color: var(--text-muted); line-height: 1.85;
}
.metodo-list li { margin-bottom: 3px }

/* ============================================================
   BLOCO 4 — COMO FUNCIONA
   ============================================================ */
.etapas { position: relative; padding-left: 76px }
.etapas::before {
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px;
  width: 1px; background: var(--linha);
}
.etapa {
  position: relative; padding: 28px 0 28px;
  border-bottom: 1px solid var(--linha);
}
.etapa:last-child { border-bottom: none }
.etapa-num {
  position: absolute; left: -76px; top: 28px;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--navy-dark); border: 1px solid rgba(94,152,202,.28);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--cor);
  z-index: 1;
}
.etapa-h {
  font-family: var(--display); font-weight: 500; font-size: 20px;
  color: var(--white); margin: 0 0 10px; letter-spacing: -.01em;
}
.etapa-p { margin: 0; font-size: 14.5px; color: var(--text-muted); line-height: 1.72 }

/* ============================================================
   BLOCO 5 — COMPLIANCE OAB
   ============================================================ */
.comp-intro { max-width: 66ch; margin-bottom: 36px }
.comp-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) }
.comp-col { border-radius: 16px; overflow: hidden; background: var(--navy-dark); border: 1px solid var(--linha) }
.comp-col.proib { border-left: 3px solid rgba(232,100,100,.5) }
.comp-col.perm  { border-left: 3px solid rgba(105,196,141,.5) }
.comp-head {
  padding: 15px 22px; display: flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  border-bottom: 1px solid var(--linha);
}
.comp-col.proib .comp-head { color: #E88A8A }
.comp-col.perm  .comp-head { color: #69C48D }
.comp-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 22px; border-bottom: 1px solid var(--linha);
  font-size: 14px; color: var(--text-muted); line-height: 1.55;
}
.comp-item:last-child { border-bottom: none }
.comp-item svg { flex: none; margin-top: 2px }
.comp-fechamento {
  margin-top: 28px; max-width: 66ch;
  font-size: 15px; color: var(--text-muted); line-height: 1.75;
}
.comp-fechamento strong { color: var(--white); font-weight: 500 }

/* ============================================================
   BLOCO 6 — PARA QUEM É / NÃO É
   ============================================================ */
.quem-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit,minmax(290px,1fr)) }
.quem-card {
  border-radius: 16px; padding: 32px 28px;
  background: var(--navy-dark);
}
.quem-e   { border: 1px solid rgba(105,196,141,.28); border-left: 3px solid rgba(105,196,141,.55) }
.quem-nao { border: 1px solid rgba(232,100,100,.22); border-left: 3px solid rgba(232,100,100,.48) }
.quem-k {
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: 18px; display: block;
}
.quem-e   .quem-k { color: #69C48D }
.quem-nao .quem-k { color: #E88A8A }
.quem-h {
  font-family: var(--display); font-weight: 500; font-size: 17px; color: var(--white);
  margin: 0 0 20px; line-height: 1.35;
}
.quem-list { list-style: none; margin: 0; padding: 0 }
.quem-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.5px; color: var(--text-muted); line-height: 1.6;
  padding: 10px 0; border-bottom: 1px solid var(--linha);
}
.quem-list li:last-child { border-bottom: none }
.quem-list li svg { flex: none; margin-top: 3px }

/* ============================================================
   BLOCO 7 — FAQ (details/summary nativo)
   ============================================================ */
.faq-lista { max-width: 820px }
details.faq-item { border-bottom: 1px solid var(--linha) }
details.faq-item:first-child { border-top: 1px solid var(--linha) }
summary.faq-q {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 500; color: var(--white);
  transition: color .2s;
}
summary.faq-q::-webkit-details-marker { display: none }
summary.faq-q:hover { color: var(--cor) }
summary.faq-q:focus-visible { outline: 2px solid var(--cor); outline-offset: 3px; border-radius: 3px }
.faq-ico {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid rgba(94,152,202,.3); color: var(--cor);
  transition: transform .25s, background .2s;
}
details[open] .faq-ico { transform: rotate(45deg); background: rgba(94,152,202,.12) }
.faq-ans {
  padding-bottom: 24px;
  font-size: 14.5px; color: var(--text-muted); line-height: 1.78; max-width: 70ch;
}
.faq-ans p { margin: 0 }
.faq-ans p + p { margin-top: 12px }
.faq-nota {
  margin-top: 10px; font-size: 12.5px; color: var(--text-muted);
  opacity: .72; font-style: italic;
}

/* ============================================================
   BLOCO 8 — CTA FINAL
   ============================================================ */
.cta-final {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, var(--navy-dark) 0%, var(--navy-mid) 100%);
}
.cta-final-blobs { position: absolute; inset: 0; pointer-events: none }
.cta-final-blobs .blob {
  width: clamp(200px,32vw,400px); height: clamp(140px,22vw,260px);
  top: 50%; transform: translateY(-50%);
}
.cta-final-blobs .blob-a { left: -6%; animation-duration: 20s }
.cta-final-blobs .blob-b { right: -6%; animation-delay: -10s; animation-duration: 24s }
.cta-final > .wrap { position: relative; z-index: 2 }
.cta-final h2 { display: inline-block; max-width: 24ch }
.cta-final h2::after { margin: 20px auto 0 }
.cta-final-sub { max-width: 52ch; margin: 20px auto 0; color: var(--text-muted) }
.cta-final .acoes { justify-content: center }
.microcopy { margin-top: 18px; font-size: 13px; color: var(--text-muted); text-align: center }

/* ============================================================
   RODAPÉ
   ============================================================ */
footer {
  padding: clamp(40px,6vw,68px) 0;
  color: var(--text-muted); font-size: 13px;
  border-top: 1px solid var(--linha);
}
footer > .wrap {
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: space-between; align-items: center;
}
.rod-logo { display: flex; align-items: center; gap: 12px }
.rod-logo img { width: 28px }
.rod-info { display: flex; flex-direction: column; gap: 3px }

/* ============================================================
   FOCO VISÍVEL + PREFERS-REDUCED-MOTION
   ============================================================ */
:focus-visible { outline: 2px solid var(--cor); outline-offset: 3px }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important }
  html { scroll-behavior: auto }
  .reveal { opacity: 1 !important; transform: none !important }
  .scroll-anc { animation: none }
}

/* ---------- formulário de diagnóstico ---------- */
.form-diag{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  max-width:760px;margin:36px auto 0;padding:30px;border-radius:18px;text-align:left;
}
.campo{display:flex;flex-direction:column;gap:7px}
.campo-largo{grid-column:1/-1}
.form-diag label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-light)}
.form-diag input,.form-diag select{
  width:100%;padding:13px 15px;border-radius:10px;
  background:rgba(1,7,15,.55);color:var(--white);
  border:1px solid rgba(167,191,216,.22);
  font-family:inherit;font-size:15px;
}
.form-diag select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cor) 50%),linear-gradient(135deg,var(--cor) 50%,transparent 50%);background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.form-diag option{background:#02121F;color:var(--white)}
.form-diag input:focus-visible,.form-diag select:focus-visible{outline:2px solid var(--cor);outline-offset:1px;border-color:transparent}
.form-diag input:invalid:not(:placeholder-shown){border-color:rgba(232,138,138,.6)}
.form-diag button{width:100%;justify-content:center;border:0;cursor:pointer;font-family:inherit}
.form-status{grid-column:1/-1;margin:0;font-size:14px;min-height:1.2em}
.form-status.erro{color:#E88A8A}
.form-status.ok{color:#69C48D}
.nota-legal{margin-top:34px;font-size:12.5px;color:var(--text-muted);line-height:1.7}


/* ============================================================
   CAMADA DE EFEITO — completa do glass-effect2
   O backdrop-filter só se manifesta com algo atrás para desfocar.
   Sem estes blobs de seção, os glass panels do miolo ficavam sobre
   marinho chapado e liam como cartão comum.
   ============================================================ */
.sec-blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sec-blobs .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.30;animation:float 26s ease-in-out infinite alternate}
.sec-blobs .b1{width:520px;height:520px;background:var(--cor);top:-14%;left:-10%}
.sec-blobs .b2{width:460px;height:460px;background:var(--navy-light);bottom:-16%;right:-8%;animation-delay:-13s;animation-duration:31s}
section{position:relative}
section > .wrap{position:relative;z-index:1}

/* vidro um pouco mais presente: .03 desaparecia sobre navy escuro */
.glass-panel{background:rgba(255,255,255,.045)}

/* --- marquee de teses (keyframe `scroll` do sistema de origem) --- */
.marquee{
  position:relative;overflow:hidden;margin-top:56px;
  border-top:1px solid rgba(167,191,216,.16);border-bottom:1px solid rgba(167,191,216,.16);
  padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;gap:0;width:max-content;animation:scroll 46s linear infinite}
.marquee-item{
  display:inline-flex;align-items:center;gap:14px;padding:0 26px;white-space:nowrap;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
}
.marquee-item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--cor);opacity:.75}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- motion banners (slide-right / slide-left do sistema de origem) --- */
@keyframes slide-right{from{transform:translateX(0)}to{transform:translateX(14px)}}
@keyframes slide-left{from{transform:translateX(0)}to{transform:translateX(-14px)}}
.motion-anim{animation:slide-right 4s ease-in-out infinite alternate}
.motion-anim-rev{animation:slide-left 5s ease-in-out infinite alternate}

@media (prefers-reduced-motion:reduce){
  .sec-blobs .blob,.marquee-track,.motion-anim,.motion-anim-rev{animation:none!important}
  .marquee-track{width:auto;flex-wrap:wrap;justify-content:center}
}


/* ============================================================
   CORREÇÕES DE LEGIBILIDADE E COMPOSIÇÃO
   ============================================================ */

/* 1. CTA do topo estava com --text-muted (#6B7F96) sobre o azul #5E98CA:
      ~1.4:1, ilegível. Texto escuro sobre o azul dá ~7:1. */
.nav-cta{
  color:var(--navy-deep) !important;
  background:var(--cor);
  font-weight:600;
}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--cor-hover);color:var(--navy-deep) !important}

/* 2. Leitura. Peso 300 sobre fundo escuro perde definição — o traço fino
      "sangra" no contraste invertido e cansa. 400 é o mínimo confortável.
      Os neutros também sobem de contraste. */
:root{
  --text-light:#C6D8E9;
  --text-muted:#8FA6BD;
}
body{font-weight:400;font-size:17px;line-height:1.72}
p{max-width:68ch}
.intro,.metodo-txt,.faq-ans p,.cta-final-sub{font-weight:400}
strong{font-weight:600}

/* 3. Composição do formulário: o botão ocupando a largura inteira lia como
      barra e desalinhava o bloco sob o título centralizado. */
.form-diag{margin-left:auto;margin-right:auto}
.form-diag .campo-largo:last-of-type{justify-items:center}
.form-diag button{max-width:360px;margin:6px auto 0}
.form-status{text-align:center}


/* 4. O h2 da seção de contato era inline-block e não centralizava dentro do
      bloco centralizado — ficava ~68px à direita do eixo, desalinhado do
      subtítulo e do formulário, que estavam corretos. Bloco + margem automática
      resolve de forma determinística. O filete decorativo acompanha. */
#contato h2{
  display:block;
  margin-left:auto;
  margin-right:auto;
}
#contato h2::after{margin-left:auto;margin-right:auto}
#contato .cta-final-sub{margin-left:auto;margin-right:auto}


/* ---------- abas de áreas atendidas ---------- */
.abas{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.aba{
  font-family:inherit;font-size:13.5px;font-weight:500;letter-spacing:.02em;
  padding:11px 20px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--text-muted);
  border:1px solid rgba(167,191,216,.22);transition:background .2s,color .2s,border-color .2s;
}
.aba:hover{color:var(--text-light);border-color:rgba(94,152,202,.5)}
.aba[aria-selected="true"]{background:var(--cor);color:var(--navy-deep);border-color:var(--cor);font-weight:600}
.painel{border-radius:16px;padding:clamp(24px,3.4vw,38px)}
.painel-meta{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid rgba(167,191,216,.16)}
.painel-meta strong{display:block;color:var(--white);font-weight:500;font-size:16px;margin-top:4px}
.rot{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cor)}
.painel-leitura{margin:0 0 24px;max-width:66ch}
.teses{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.teses li{position:relative;padding-left:22px;font-size:14.5px;color:var(--text-light)}
.teses li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--cor);opacity:.85}
.ressalva{margin-top:30px;padding:20px 24px;border-radius:12px;font-size:14.5px;
  background:var(--navy-dark);border-left:3px solid var(--cor);max-width:none}
.ressalva strong{color:var(--white)}


/* ---------- grade de áreas (substitui as abas) ---------- */
.grade-areas{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.card-area{
  display:flex;flex-direction:column;gap:9px;padding:26px;border-radius:14px;
  text-decoration:none;color:inherit;transition:transform .25s,border-color .25s;
}
.card-area:hover{transform:translateY(-3px);border-color:rgba(94,152,202,.45)}
.card-area h3{margin:0;font-family:var(--display);font-weight:500;font-size:22px;color:var(--white)}
.card-area p{margin:0;font-size:14px;color:var(--text-muted);max-width:none}
.card-area .ir{margin-top:6px;font-size:13px;font-weight:600;color:var(--cor)}
/* ---------- migalha de pão das subpáginas ---------- */
.migalha{font-size:13px;color:var(--text-muted);margin-bottom:20px}
.migalha a{color:var(--cor);text-decoration:none}
.migalha a:hover{text-decoration:underline}
.migalha span{margin:0 4px}

/* ---------- dropdown de áreas no menu ---------- */
.tem-menu{position:relative}
.abre-menu{
  font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  background:none;border:0;padding:0;cursor:pointer;color:var(--text-muted);
  display:inline-flex;align-items:center;gap:6px;transition:color .2s;
}
.abre-menu:hover,.tem-menu:hover .abre-menu,.abre-menu[aria-expanded="true"]{color:var(--cor)}
.seta{font-size:10px;transition:transform .2s}
.abre-menu[aria-expanded="true"] .seta{transform:rotate(180deg)}
.menu-areas{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:230px;padding:10px;border-radius:14px;z-index:40;
  background:rgba(2,18,31,.97);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(167,191,216,.18);
  box-shadow:0 22px 60px rgba(0,0,0,.55);
  display:grid;gap:1px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s,transform .18s,visibility .18s;
}
/* área invisível entre o botão e o painel, para o mouse não "cair" no vão */
.tem-menu::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.tem-menu:hover .menu-areas,
.tem-menu:focus-within .menu-areas,
.menu-areas.aberto{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.menu-areas a{
  display:block;padding:10px 14px;border-radius:9px;
  font-size:14px;font-weight:400;color:var(--text-light);text-decoration:none;
  transition:background .15s,color .15s;
}
.menu-areas a:hover,.menu-areas a:focus-visible{background:rgba(94,152,202,.14);color:var(--cor)}

/* ---------- áreas no rodapé: alcance no celular, onde o menu some ---------- */
.rod-areas{margin-top:26px;padding-top:22px;border-top:1px solid var(--linha);width:100%}
.rod-areas p{margin:8px 0 0;font-size:13.5px;line-height:1.9;max-width:none}
.rod-areas a{color:var(--text-muted);text-decoration:none}
.rod-areas a:hover{color:var(--cor)}

/* ---------- foto de fundo do hero das subpáginas ---------- */
.hero.com-foto{position:relative;overflow:hidden;isolation:isolate}
.hero.com-foto .foto{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center right;
}
/* Duplo gradiente: o horizontal protege o texto à esquerda, o vertical
   costura a foto com o fundo da página. Sem isso o título perde contraste
   sobre as áreas claras da imagem. */
.hero.com-foto::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg, rgba(1,7,15,.97) 0%, rgba(1,7,15,.88) 42%, rgba(1,7,15,.45) 100%),
    linear-gradient(180deg, rgba(1,7,15,.85) 0%, rgba(1,7,15,.25) 45%, rgba(1,7,15,.95) 100%);
}
.hero.com-foto .wrap{position:relative;z-index:1}
@media(max-width:760px){
  /* no celular o texto ocupa a largura toda, então o véu precisa ser parelho */
  .hero.com-foto::before{background:linear-gradient(180deg, rgba(1,7,15,.90) 0%, rgba(1,7,15,.78) 50%, rgba(1,7,15,.96) 100%)}
  .hero.com-foto .foto{background-position:center}
}