/* guia.css: componentes do "Guia de direitos" (L1, 24/10/2026).
   Só var(--ra-*) de ra-tokens.css; nenhum hex. Mobile primeiro (quebra em 768px).
   Carregado pelo head.html só em página com `guia: true` ou layout artigo/hub.
   Componentes: faq, como-funciona, tese-lei, quando-procurar, revisao-fontes, breadcrumb,
   situacoes, area-cards, artigo-card. (O video-guia traz o próprio CSS, só quando há vídeo.) */

/* Tipografia de leitura: vale só dentro de .ra-guia (não muda LPs nem formulários) */
.ra-guia { font-size: var(--ra-texto-guia); line-height: var(--ra-entrelinha-guia); color: var(--ra-gray-800); }
.ra-guia p, .ra-guia li { font-size: inherit; line-height: inherit; }

.ra-faq, .ra-como, .ra-lei, .ra-quando, .ra-revisao { margin: 2rem 0; }
.ra-faq__titulo, .ra-como__titulo, .ra-lei__titulo, .ra-quando__titulo {
  color: var(--ra-azul); font-size: 1.375rem; line-height: 1.3; font-weight: 700; margin: 0 0 1rem;
}
.ra-lei a, .ra-revisao a, .ra-quando a, .ra-artigo-card a { color: var(--ra-azul-2); text-decoration: underline; text-underline-offset: 2px; }
.ra-lei a:hover, .ra-revisao a:hover, .ra-artigo-card a:hover { color: var(--ra-azul); }

/* FAQ em <details> */
.ra-faq__item { border: 1px solid var(--ra-gray-200); border-radius: var(--ra-raio-card); background: var(--ra-superficie); margin: 0 0 .75rem; }
.ra-faq__pergunta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; padding: .75rem 1rem; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ra-azul); border-radius: var(--ra-raio-card);
}
.ra-faq__pergunta::-webkit-details-marker { display: none; }
.ra-faq__pergunta::after {
  content: ""; flex: 0 0 auto; width: .6rem; height: .6rem; margin-right: .25rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.ra-faq__item[open] > .ra-faq__pergunta::after { transform: rotate(-135deg); }
.ra-faq__pergunta:focus-visible { outline: 3px solid var(--ra-azul-2); outline-offset: 2px; }
.ra-faq__pergunta:hover { background: var(--ra-tinta-azul); }
.ra-faq__resposta { padding: 0 1rem 1rem; color: var(--ra-gray-700); }
.ra-faq__resposta > :first-child { margin-top: 0; }
.ra-faq__resposta > :last-child { margin-bottom: 0; }

/* Como funciona */
.ra-como__passos { list-style: none; counter-reset: ra-passo; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ra-como__passo {
  counter-increment: ra-passo; position: relative; padding: 1rem 1rem 1rem 3.75rem;
  background: var(--ra-superficie); border: 1px solid var(--ra-gray-200); border-radius: var(--ra-raio-card);
}
.ra-como__passo::before {
  content: counter(ra-passo); position: absolute; left: 1rem; top: 1rem;
  width: 2rem; height: 2rem; border-radius: var(--ra-raio-pilula);
  background: var(--ra-azul); color: var(--ra-dourado-claro);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem;
}
.ra-como__passo-titulo { margin: 0 0 .25rem; font-size: 1.0625rem; line-height: 1.35; color: var(--ra-azul); font-weight: 700; }
.ra-como__passo p { margin: 0; color: var(--ra-gray-700); }
.ra-como__bloco { margin-top: 1.5rem; }
.ra-como__bloco h3, .ra-como__bloco h4 { color: var(--ra-azul); font-size: 1.125rem; margin: 0 0 .5rem; }
.ra-como__bloco p { margin: 0; color: var(--ra-gray-700); }
.ra-como__bloco--aviso { background: var(--ra-dourado-claro); border-left: 4px solid var(--ra-dourado); border-radius: var(--ra-raio-botao); padding: 1rem; }
.ra-como__bloco--aviso ul { margin: 0; padding-left: 1.25rem; color: var(--ra-gray-800); }
.ra-como--compacto { list-style: none; counter-reset: ra-compacto; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .9375rem; color: var(--ra-gray-700); }
.ra-como--compacto li { counter-increment: ra-compacto; }
.ra-como--compacto li::before { content: counter(ra-compacto) ". "; font-weight: 700; color: var(--ra-azul); }

/* O que diz a lei */
.ra-lei__resumo > :first-child { margin-top: 0; }
.ra-lei__normas { margin: 1rem 0 0; padding-left: 1.25rem; }
.ra-lei__normas li { margin: .25rem 0; }
.ra-lei__normas a, .ra-revisao__fontes a { display: inline-block; min-height: 44px; padding: .625rem 0; }
.ra-lei__consulta, .ra-revisao__consulta { color: var(--ra-gray-600); font-size: .875rem; }

/* Quando procurar um advogado */
.ra-quando { background: var(--ra-tinta-azul-2); border-radius: var(--ra-raio-card); padding: 1.25rem 1rem; }
.ra-quando > p:first-of-type { margin-top: 0; }
.ra-quando__lista { margin: .5rem 0 1rem; padding-left: 1.25rem; }
.ra-quando__lista li { margin: .25rem 0; }
.ra-quando__alternativas { margin: 0; color: var(--ra-gray-700); }

/* Atualizado em · revisão · fontes */
.ra-revisao { border-top: 1px solid var(--ra-gray-200); padding-top: 1rem; font-size: .9375rem; color: var(--ra-gray-700); }
.ra-revisao p { margin: 0 0 .5rem; }
.ra-revisao__titulo { font-size: 1rem; color: var(--ra-azul); margin: 1rem 0 .25rem; }
.ra-revisao__fontes { margin: 0 0 .75rem; padding-left: 1.25rem; }
.ra-revisao__aviso { font-weight: 600; color: var(--ra-gray-800); }

/* Trilha de navegação: itens em pílula, casa no primeiro, página atual em destaque */
.ra-trilha ol { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .125rem; font-size: .875rem; }
.ra-trilha li { display: inline-flex; align-items: center; }
.ra-trilha li + li::before {
  content: ""; flex: none; width: .5rem; height: .5rem; margin: 0 .25rem;
  border-top: 1.5px solid var(--ra-dourado); border-right: 1.5px solid var(--ra-dourado);
  transform: rotate(45deg) scale(.8);
}
.ra-trilha a {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; min-width: 44px; padding: 0 .625rem;
  border-radius: var(--ra-raio-pilula); color: var(--ra-azul-2); font-weight: 500; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.ra-trilha a:hover { background: var(--ra-tinta-azul-2); color: var(--ra-azul); }
.ra-trilha li:first-child a::before {
  content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ra-trilha [aria-current] {
  display: inline-flex; align-items: center; padding: .375rem .75rem; border-radius: var(--ra-raio-pilula);
  background: var(--ra-gray-100); color: var(--ra-azul); font-weight: 600;
}
@media (prefers-reduced-motion: reduce) { .ra-trilha a { transition: none; } }

/* Botões de situação */
.ra-situacoes { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .75rem; }
.ra-situacao {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 56px; padding: .75rem 1rem; background: var(--ra-superficie);
  border: 1px solid var(--ra-gray-200); border-radius: var(--ra-raio-card);
  color: var(--ra-azul); font-weight: 600; text-decoration: none; line-height: 1.35;
}
.ra-situacao::after, .ra-area::after {
  content: ""; flex: 0 0 auto; width: .55rem; height: .55rem;
  border-top: 2px solid var(--ra-dourado-escuro); border-right: 2px solid var(--ra-dourado-escuro); transform: rotate(45deg);
}
.ra-situacao:hover, .ra-area:hover { border-color: var(--ra-azul-2); background: var(--ra-tinta-azul); }

/* Cartões de área */
.ra-areas { list-style: none; margin: 1rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; }
.ra-area {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 56px; height: 100%; padding: .75rem 1rem; background: var(--ra-superficie);
  border: 1px solid var(--ra-gray-200); border-radius: var(--ra-raio-card);
  color: var(--ra-azul); font-weight: 600; text-decoration: none;
}
.ra-area__texto { flex: 1 1 auto; min-width: 0; }
.ra-area__nome, .ra-area__intro { display: block; }
.ra-area__intro { margin-top: .25rem; font-weight: 400; font-size: .9375rem; color: var(--ra-gray-700); }

/* Cartão de artigo */
.ra-artigo-card { padding: 1rem 0; border-bottom: 1px solid var(--ra-gray-200); }
.ra-artigo-card__titulo { margin: 0 0 .25rem; font-size: 1.125rem; line-height: 1.35; }
.ra-artigo-card__titulo a { display: inline-block; padding: .5rem 0; min-height: 44px; }
.ra-artigo-card__meta { margin: 0; font-size: .875rem; color: var(--ra-gray-600); }

@media (min-width: 768px) {
  .ra-faq__titulo, .ra-como__titulo, .ra-lei__titulo, .ra-quando__titulo { font-size: 1.625rem; }
  .ra-situacoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ra-como__passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ra-quando { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ra-faq__pergunta::after { transition: none; }
}