/* PADRÃO "LEITURA GUIADA" do site (nasceu na página do SOS em 09/09/2026 e passou a valer para O Instituto, Nexo e REVERDE):
   barra "O que você quer ver?", "Em 30 segundos", casos de uso, blocos de leitura com progresso, zona do gestor.
   Usa os mesmos tokens e componentes do site. */
@layer componentes{

  /* ── Barra "O que você quer ver?" ── */
  .assuntos{ background:var(--cor-creme-2); border-block:var(--filete) solid var(--cor-linha); position:sticky; top:var(--h-cabecalho,72px); z-index:var(--z-indice,5); }
  .assuntos .env{ display:flex; align-items:center; gap:var(--esp-3) var(--esp-4); padding-block:var(--esp-3); flex-wrap:wrap; }
  .assuntos__t{ margin:0; font-weight:var(--p-forte); color:var(--cor-tinta); white-space:nowrap; }
  .assuntos ul{ display:flex; flex-wrap:wrap; gap:var(--esp-2); list-style:none; margin:0; padding:0; flex:1; }
  .assuntos a{ display:inline-flex; align-items:center; min-height:var(--alvo); padding-inline:var(--esp-4); border-radius:var(--raio-pill);
    background:var(--cor-branco); border:var(--filete) solid var(--cor-linha); font-weight:var(--p-forte); font-size:var(--t-nota); color:var(--cor-tinta); text-decoration:none;
    transition:border-color var(--dur-rapida) var(--curva-estado), color var(--dur-rapida) var(--curva-estado), background var(--dur-rapida) var(--curva-estado); }
  .assuntos a:hover{ border-color:var(--cor-roxo); color:var(--cor-roxo); }
  .assuntos a[aria-current="true"]{ background:var(--cor-mata); color:var(--cor-claro); border-color:var(--cor-mata); }
  .texto-maior{ display:inline-flex; align-items:center; gap:.4rem; min-height:var(--alvo); padding-inline:var(--esp-4); border-radius:var(--raio-pill);
    border:var(--filete) solid var(--cor-linha); background:var(--cor-branco); color:var(--cor-tinta); font:inherit; font-weight:var(--p-forte); font-size:var(--t-nota); cursor:pointer; }
  .texto-maior[aria-pressed="true"]{ background:var(--cor-roxo); color:#fff; border-color:var(--cor-roxo); }
  .texto-maior b{ font-size:1.25em; line-height:1; }
  html.texto-maior{ font-size:118%; }
  @media (max-width:760px){
    .assuntos{ position:static; }
    .assuntos ul{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
    .assuntos a{ white-space:nowrap; }
  }

  /* ── "Em 30 segundos" ── */
  .trinta .passo__n{ width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; background:var(--cor-creme-2); color:var(--cor-roxo); font-size:var(--t-corpo); margin-bottom:var(--esp-3); }
  .trinta .passo__t{ font-size:var(--t-h3); line-height:1.15; }
  .trinta .passo__d{ font-size:var(--t-corpo); }

  /* ── Casos de uso ── */
  .casos .card{ box-shadow:var(--sombra-2); }
  .caso__faz{ margin:var(--esp-2) 0 0; padding:0; list-style:none; display:grid; gap:var(--esp-2); color:var(--cor-tinta); font-size:var(--t-nota); }
  .caso__faz li{ position:relative; padding-left:1.6rem; }
  .caso__faz li::before{ content:""; position:absolute; left:0; top:.45em; width:.9rem; height:.9rem; border-radius:50%; background:var(--cor-roxo-claro); box-shadow:0 0 0 3px rgba(196,181,253,.35); }
  .caso__faz-t{ font-weight:var(--p-forte); color:var(--cor-roxo); font-size:var(--t-nota); text-transform:uppercase; letter-spacing:.08em; margin:var(--esp-3) 0 0; }
  .casos .card__pe{ flex-wrap:wrap; }
  .casos .card .ficha{ margin-top:var(--esp-3); }
  .casos .botao{ align-self:flex-start; }


  /* ── Quatro cartões (as frentes do Instituto): 2 × 2 em vez de 3 + 1 órfão ── */
  .casos--quatro .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  @media (max-width:700px){ .casos--quatro .cards{ grid-template-columns:1fr; } }

  /* ── Leitura guiada ── */
  .leitura__cabeca{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--esp-4); margin-bottom:var(--esp-5); }
  .leitura__progresso{ margin:0; color:var(--cor-tinta-2); font-size:var(--t-nota); }
  .progresso{ height:6px; background:var(--cor-creme-2); border-radius:3px; overflow:hidden; margin-bottom:var(--esp-5); }
  .progresso > span{ display:block; height:100%; width:11%; background:linear-gradient(90deg,#C4B5FD,#7C3AED); transition:width .45s var(--curva-saida); }
  .bloco{ border:var(--filete) solid var(--cor-linha); border-radius:var(--raio-g); background:var(--cor-branco); box-shadow:var(--sombra-1); margin-bottom:var(--esp-4); overflow:hidden; }
  .bloco > summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; gap:var(--esp-4); align-items:center; padding:var(--esp-5) var(--esp-6); min-height:var(--alvo); }
  .bloco > summary::-webkit-details-marker{ display:none; }
  .bloco > summary:hover .bloco__t{ color:var(--cor-roxo); }
  .bloco > summary:focus-visible{ outline:3px solid var(--foco-a); outline-offset:-3px; }
  .bloco__n{ width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; background:var(--cor-creme-2); color:var(--cor-roxo); font-weight:var(--p-mega); font-size:var(--t-nota); transition:background var(--dur-rapida), color var(--dur-rapida); }
  .bloco__t{ font-size:var(--t-h3); line-height:1.15; margin:0; color:var(--cor-tinta); }
  .bloco__teaser{ margin:.2rem 0 0; color:var(--cor-tinta-2); font-size:var(--t-corpo); }
  .bloco__seta{ width:1.6rem; height:1.6rem; color:var(--cor-tinta-2); transition:transform var(--dur-rapida) var(--curva-estado); }
  .bloco[open] > summary{ border-bottom:var(--filete) solid var(--cor-linha); }
  .bloco[open] .bloco__n{ background:var(--cor-roxo); color:#fff; }
  .bloco[open] .bloco__seta{ transform:rotate(180deg); }
  .bloco__corpo{ padding:var(--esp-5) var(--esp-6) var(--esp-6); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--esp-4); }
  .bloco__corpo > *{ min-width:0; }   /* tabela ou mapa largo não pode alargar o bloco e cortar o texto no celular */
  .origem .tabela-env{ overflow-x:auto; }
  @media (max-width:600px){
    .bloco > summary{ padding:var(--esp-4); gap:var(--esp-3); }
    .bloco__corpo{ padding:var(--esp-4); }
    .bloco__t{ font-size:1.25rem; }
  }
  .bloco__corpo > p, .bloco__corpo > ul{ max-width:var(--max-texto); margin:0; }
  .bloco__corpo > ul{ padding-left:1.2rem; display:grid; gap:var(--esp-2); }
  .bloco__tres{ display:grid; gap:var(--esp-4); grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); }
  .bloco__tres > div{ background:var(--cor-creme-2); border-radius:var(--raio-p); padding:var(--esp-4) var(--esp-5); }
  .bloco__tres h3{ font-size:var(--t-corpo); margin:0 0 var(--esp-2); }
  .bloco__tres p{ margin:0; color:var(--cor-tinta-2); font-size:var(--t-nota); }
  .bloco__rodape{ display:flex; flex-wrap:wrap; gap:var(--esp-3); align-items:center; margin-top:var(--esp-2); }
  .nao-faz{ list-style:none; padding:0; margin:0; display:grid; gap:var(--esp-3); max-width:var(--max-texto); }
  .nao-faz li{ position:relative; padding-left:2rem; }
  .nao-faz li::before{ content:"×"; position:absolute; left:0; top:-.1em; width:1.4rem; height:1.4rem; border-radius:50%; background:#FBE9E4; color:var(--cor-coral); font-weight:var(--p-mega); display:grid; place-items:center; line-height:1; }
  /* conteúdo original completo, dobrado dentro de cada bloco */
  .origem{ padding-block:var(--esp-3) 0; }
  .ficha__corpo .origem{ font-size:var(--t-corpo); color:var(--cor-tinta); }
  .origem .env, .origem .grelha{ padding-inline:0; max-width:none; }
  .origem .secao{ padding-block:var(--esp-5); }
  .origem h3{ font-size:var(--t-h3); }
  .origem h4{ font-size:var(--t-corpo); }

  /* ── Perguntas frequentes ── */
  .faq .ficha{ margin-top:0; border-top:0; border-bottom:var(--filete) solid var(--cor-linha); padding-block:var(--esp-2) var(--esp-3); }
  .faq .ficha > summary{ color:var(--cor-tinta); font-size:var(--t-corpo); }
  .faq .ficha__corpo{ font-size:var(--t-corpo); color:var(--cor-tinta-2); max-width:var(--max-texto); }

  /* ── Zona do gestor ── */
  .gestor__links{ display:flex; flex-wrap:wrap; gap:var(--esp-3); margin-top:var(--esp-5); }

  @media (prefers-reduced-motion:reduce){ .progresso > span, .bloco__seta, .assuntos a, .bloco__n{ transition:none; } }
}