/* ==========================================================================
   CONFECAP · CSS DE CONTEÚDO  —  páginas Apresentação, Privacidade e Ajuda
   Depende de site.css (tokens + utilitários). NÃO redefine tokens de cor.
   Classes com prefixos próprios (tl-, ex-, ms-, sl-, fq-, cta-) para nunca
   colidir com home.css. Só usa var(--...) já declaradas no site.css.
   ========================================================================== */

/* --- Espaçamento de topo entre pagehead e primeira seção já vem do .section --- */

/* Introdução curta acima de um bloco (reaproveitável) */
.ct-intro{max-width:66ch; margin:0 0 clamp(2.5rem,5vw,3.5rem)}

/* ==========================================================================
   LINHA DO TEMPO  —  o "traço de luz" vira o trilho vertical, ticks dourados
   ========================================================================== */
.timeline{
  position:relative;
  margin:0;
  padding:0 0 0 clamp(1.5rem,4vw,2.25rem);
}
.timeline::before{
  content:""; position:absolute; left:0; top:.35rem; bottom:.35rem; width:2px;
  background:var(--beam); border-radius:2px;
}
.tl-item{
  position:relative;
  padding:0 0 clamp(2.2rem,4vw,2.75rem) 0;
}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{ /* tick dourado sobre o trilho */
  content:""; position:absolute;
  left:calc(-1 * clamp(1.5rem,4vw,2.25rem)); top:.55rem;
  width:11px; height:11px; margin-left:-4.5px;
  border-radius:50%;
  background:var(--gold-300);
  box-shadow:0 0 0 4px var(--navy-900), 0 0 14px -1px var(--gold-500);
}
.section--light .tl-item::before{box-shadow:0 0 0 4px var(--paper-alt), 0 0 12px -2px var(--gold-500)}
.tl-year{
  display:block;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem,1rem + 2vw,2.1rem); letter-spacing:-.02em;
  color:#fff; line-height:1; margin:0 0 .55rem;
  font-variant-numeric:tabular-nums;
}
.section--light .tl-year{color:var(--ink-900)}
.tl-item p{margin:0; max-width:56ch; color:var(--on-dark-soft)}
.section--light .tl-item p{color:#2C3A50}
.tl-item strong{color:#fff; font-weight:600}
.section--light .tl-item strong{color:var(--ink-900)}

/* ==========================================================================
   BLOCO DE MISSÃO  —  citação em destaque com fio dourado à esquerda
   ========================================================================== */
.ms-block{
  position:relative; isolation:isolate;
  border-left:2px solid transparent;
  border-image:var(--beam) 1;
  padding:.25rem 0 .25rem clamp(1.4rem,3.5vw,2.25rem);
  max-width:62ch;
}
.ms-quote{
  font-family:var(--font-read);
  font-size:var(--t-lead); line-height:1.6; color:#fff; margin:0;
}
.section--light .ms-quote{color:var(--ink-900)}
.ms-quote::before{
  content:"\201C"; display:block;
  font-family:var(--font-display); font-weight:800;
  font-size:3rem; line-height:.6; color:var(--gold-500);
  margin:0 0 .5rem;
}

/* ==========================================================================
   TRÊS EIXOS  —  cards .surface (do site.css) em grade
   ========================================================================== */
.ex-grid{
  display:grid; gap:clamp(1.1rem,2.5vw,1.5rem);
  grid-template-columns:1fr;
}
.ex-card{padding:clamp(1.5rem,3vw,2rem)}
.ex-card__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin:0 0 1.1rem;
  border:1px solid var(--hair-strong); border-radius:4px;
  font-family:var(--font-display); font-weight:800; font-size:.9rem;
  letter-spacing:.02em; color:var(--gold-300);
  font-variant-numeric:tabular-nums;
}
.section--light .ex-card__n{color:#836810; border-color:#CFD9E8}
.ex-card h3{font-size:var(--t-h3); color:#fff; margin:0 0 .6rem}
.section--light .ex-card h3{color:var(--ink-900)}
.ex-card p{margin:0; color:var(--on-dark-soft)}
.section--light .ex-card p{color:#2C3A50}

/* ==========================================================================
   VALORES  —  lista com marcadores de "tick" (herda do .prose ul quando útil)
   ========================================================================== */
.pr-list{margin:1.4rem 0 0; padding:0; display:grid; gap:.85rem}
.pr-list li{
  position:relative; padding-left:1.6rem; margin:0;
  color:var(--on-dark-soft); max-width:60ch;
}
.section--light .pr-list li{color:#2C3A50}
.pr-list li::before{
  content:""; position:absolute; left:0; top:.6em; width:8px; height:8px;
  border-right:1.5px solid var(--gold-500); border-bottom:1.5px solid var(--gold-500);
  transform:rotate(-45deg);
}
.pr-list strong{color:#fff; font-weight:600}
.section--light .pr-list strong{color:var(--ink-900)}

/* ==========================================================================
   SELO DA BASE LEGAL  —  citação institucional destacada
   ========================================================================== */
.sl-legal{
  position:relative; isolation:isolate;
  display:grid; gap:1.4rem;
  padding:clamp(1.75rem,4vw,2.5rem);
  border:1px solid var(--hair);
  border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
}
.sl-legal::before{ /* fio de luz no topo, como o .surface */
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent 6%, rgba(255,255,255,.4) 30%,
             rgba(227,199,101,.55) 62%, transparent 94%);
}
.section--light .sl-legal{background:var(--paper); border-color:var(--line)}
.sl-legal__head{
  font-family:var(--font-display); font-weight:600; font-size:var(--t-eyebrow);
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-300);
  display:flex; align-items:center; gap:.75rem; margin:0;
}
.section--light .sl-legal__head{color:#836810}
.sl-legal__head::before{content:""; width:34px; height:2px; background:var(--gold-500); border-radius:2px}
.sl-refs{margin:0; padding:0; display:grid; gap:1rem}
@media (min-width:640px){.sl-refs{grid-template-columns:repeat(3,1fr)}}
.sl-refs div{padding:0}
.sl-refs dt{
  font-family:var(--font-display); font-weight:700; font-size:.95rem; color:#fff;
  margin:0 0 .25rem; letter-spacing:-.01em;
}
.section--light .sl-refs dt{color:var(--ink-900)}
.sl-refs dd{margin:0; font-size:var(--t-small); color:var(--on-dark-soft)}
.section--light .sl-refs dd{color:#2C3A50}
.sl-cnpj{
  margin:0; padding-top:1.2rem; border-top:1px solid var(--hair);
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  letter-spacing:.02em; color:#fff;
}
.section--light .sl-cnpj{color:var(--ink-900); border-top-color:var(--line)}
.sl-cnpj b{color:var(--gold-300); font-weight:700; letter-spacing:.14em; font-size:.72rem; text-transform:uppercase}
.section--light .sl-cnpj b{color:#836810}

/* ==========================================================================
   FAIXA DE APOIO A DADO SENSÍVEL (Política de Privacidade)
   ========================================================================== */
.pr-flag{
  margin:1.4rem 0 1.6rem; padding:1.15rem 1.35rem;
  border:1px solid rgba(201,162,39,.4); border-left-width:3px;
  border-radius:4px;
  background:linear-gradient(180deg, rgba(201,162,39,.08), rgba(201,162,39,.02));
}
.pr-flag p{margin:0; color:var(--on-dark); font-size:var(--t-small); line-height:1.65}
.section--light .pr-flag{background:linear-gradient(180deg, rgba(201,162,39,.1), rgba(201,162,39,.03))}
.section--light .pr-flag p{color:#2C3A50}
.pr-flag strong{color:var(--gold-300)}
.section--light .pr-flag strong{color:#836810}

/* Índice interno da política (âncoras) */
.pr-toc{
  margin:0 0 clamp(2rem,4vw,2.75rem); padding:1.35rem 1.5rem;
  border:1px solid var(--hair); border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}
.pr-toc h2{
  font-family:var(--font-display); font-size:var(--t-eyebrow); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--on-dark-soft);
  margin:0 0 .9rem;
}
.pr-toc ol{
  margin:0; padding:0; list-style:none;
  display:grid; gap:.35rem .5rem; grid-template-columns:1fr;
  counter-reset:toc;
}
@media (min-width:640px){.pr-toc ol{grid-template-columns:1fr 1fr}}
.pr-toc li{counter-increment:toc; margin:0}
.pr-toc a{
  display:flex; gap:.6rem; align-items:baseline;
  font-family:var(--font-display); font-size:.9rem; font-weight:500;
  color:var(--on-dark-soft); text-decoration:none; padding:.2rem 0;
  transition:color var(--dur-1) ease;
}
.pr-toc a::before{
  content:counter(toc,decimal-leading-zero);
  color:var(--gold-500); font-weight:700; font-size:.78rem;
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}
.pr-toc a:hover{color:#fff}
.prose h2[id]{scroll-margin-top:calc(var(--header-h) + 24px)}

/* ==========================================================================
   FAQ  —  acordeão acessível <details>/<summary>, no padrão do drawer
   ========================================================================== */
.faq{display:grid; gap:.75rem; max-width:76ch}
.fq{
  border:1px solid var(--hair); border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  overflow:hidden;
  transition:border-color var(--dur-1) ease;
}
.section--light .fq{background:var(--paper); border-color:var(--line)}
.fq[open]{border-color:var(--hair-strong)}
.section--light .fq[open]{border-color:#C3D1E6}
.fq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem clamp(1.1rem,3vw,1.5rem);
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  color:#fff; line-height:1.35;
  transition:color var(--dur-1) ease;
}
.section--light .fq summary{color:var(--ink-900)}
.fq summary::-webkit-details-marker{display:none}
.fq summary:hover{color:var(--gold-300)}
.section--light .fq summary:hover{color:var(--navy-600)}
.fq summary::after{ /* seta padrão do site */
  content:""; flex:0 0 auto; width:9px; height:9px; margin-right:2px;
  border-right:1.5px solid var(--gold-300); border-bottom:1.5px solid var(--gold-300);
  transform:rotate(45deg); transition:transform var(--dur-1) ease;
}
.section--light .fq summary::after{border-color:var(--navy-600)}
.fq[open] summary::after{transform:rotate(225deg)}
.fq__body{
  padding:0 clamp(1.1rem,3vw,1.5rem) 1.3rem;
  border-top:1px solid var(--hair);
}
.section--light .fq__body{border-top-color:var(--line)}
.fq__body p{margin:1rem 0 0; color:var(--on-dark-soft)}
.section--light .fq__body p{color:#2C3A50}
.fq__body p:first-child{margin-top:1rem}
.fq__body strong{color:#fff; font-weight:600}
.section--light .fq__body strong{color:var(--ink-900)}
.fq__body ul{margin:.9rem 0 0; padding:0; list-style:none; display:grid; gap:.5rem}
.fq__body ul li{position:relative; padding-left:1.4rem; color:var(--on-dark-soft)}
.section--light .fq__body ul li{color:#2C3A50}
.fq__body ul li::before{
  content:""; position:absolute; left:0; top:.6em; width:7px; height:7px;
  border-right:1.5px solid var(--gold-500); border-bottom:1.5px solid var(--gold-500);
  transform:rotate(-45deg);
}
.fq__body .price{
  color:#fff; font-family:var(--font-display); font-weight:700;
  font-variant-numeric:tabular-nums;
}
.section--light .fq__body .price{color:var(--ink-900)}

/* ==========================================================================
   CTA FINAL  —  faixa de encerramento com dois botões
   ========================================================================== */
.cta-final{
  display:grid; gap:1.6rem; align-items:center;
  padding:clamp(1.9rem,4vw,2.75rem);
  border:1px solid var(--hair); border-radius:8px;
  background:
    radial-gradient(80% 140% at 92% -20%, rgba(30,111,255,.28) 0%, rgba(30,111,255,0) 60%),
    linear-gradient(120deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.cta-final::after{
  content:""; grid-column:1 / -1; display:none;
}
.cta-final h2{font-size:var(--t-h3); color:#fff; margin:0 0 .6rem}
.section--light .cta-final h2{color:var(--ink-900)}
.cta-final p{margin:0; max-width:52ch; color:var(--on-dark-soft)}
.section--light .cta-final p{color:#2C3A50}
.cta-final__actions{display:flex; flex-wrap:wrap; gap:.85rem}
@media (min-width:820px){
  .cta-final{grid-template-columns:minmax(0,1fr) auto; gap:2.5rem}
}

/* ==========================================================================
   GRADE INSTITUCIONAL COM FOTO (Apresentação)
   ========================================================================== */
.ct-split{display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:start}
@media (min-width:920px){
  .ct-split{grid-template-columns:1.05fr .95fr}
  .ct-split--rev > :first-child{order:2}
}
.ct-figure{margin:0}
.ct-figure figcaption{
  margin:.85rem 0 0; font-family:var(--font-display); font-size:.8rem;
  font-weight:600; letter-spacing:.06em; color:var(--on-dark-mute);
}
.section--light .ct-figure figcaption{color:var(--ink-400)}

/* Ajustes finos de respiro do .prose em telas largas */
.prose .lead{margin-bottom:1.4em}