/*
 * BIBLIOTECA DA VIDA — PERCURSO GUIADO "POR ONDE COMEÇAR"
 *
 * Só o que não existe em assets/style.css. Nenhuma cor e nenhuma fonte nova:
 * os valores abaixo são os mesmos já usados pelo tema atual (.card, .context,
 * .search-form button, .motion, .tag). Layout, foco e alvo de toque apenas.
 *
 * Apagar este arquivo, assets/guia.js e content/guia-perguntas.js (e desfazer
 * as duas edições em index.html e assets/app.js) devolve o site ao estado
 * anterior.
 */

.guia { display: block; }

/* ------------------------------------------------------------------ avisos */

.guia-aviso h2,
.guia-cautela-caixa h2 {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: 20px;
  margin: 0 0 10px;
}

.guia-aviso p,
.guia-aviso-fixo p,
.guia-cautela-caixa p { margin: 0 0 9px; }

.guia-aviso p:last-of-type,
.guia-aviso-fixo p:last-child,
.guia-cautela-caixa p:last-child { margin-bottom: 0; }

.guia-aviso-fixo { margin: 22px 0 26px; }

.guia-cautela-caixa { margin: 4px 0 8px; border: 1px solid #b6d3a8; }

.guia-link { text-decoration: underline; }

/* -------------------------------------------------------------- progresso */

.guia-progresso { margin: 26px 0 18px; }
.guia-progresso .eyebrow { margin: 0 0 10px; }

.guia-barra {
  height: 4px;
  border-radius: 4px;
  background: #73987848;
  overflow: hidden;
}

.guia-barra span {
  display: block;
  height: 100%;
  background: #b9d8b8;
  transition: width .3s ease;
}

/* --------------------------------------------------------------- perguntas */

.guia-passo { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }

.guia-passo legend { padding: 0; width: 100%; }

.guia-passo legend h2 {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.25;
  margin: 0 0 10px;
}

.guia-passo legend h2:focus-visible { outline: 2px solid #c5e8d2; outline-offset: 6px; }
.guia-passo legend h2:focus { outline: none; }

.guia-ajuda { font-size: 14px; color: #b0bdad; margin: 0 0 22px; max-width: 660px; }

.guia-opcoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.guia-opcao {
  display: block;
  width: 100%;
  min-height: 54px;
  text-align: left;
  font-family: 'Vida Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
  padding: 15px 20px;
  border: 1px solid #73987848;
  border-radius: 20px 20px 20px 6px;
  background: #2443358a;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}

.guia-opcao:hover { background: #375744a8; border-color: #b1dbcb55; }
.guia-opcao:active { transform: translateY(1px); }
.guia-opcao:focus-visible { outline: 2px solid #c5e8d2; outline-offset: 3px; }

/* ------------------------------------------------------------------ ações */

.guia-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 26px 0 4px;
}

.guia-botao,
.guia-secundario {
  font-family: 'Vida Sans', sans-serif;
  font-size: 15px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 26px;
  cursor: pointer;
}

.guia-botao { border: 0; background: #b9d8b8; color: #193b2b; }
.guia-botao:hover { background: #d5eaca; }

.guia-secundario { border: 1px solid #78978266; background: #29443a88; color: #c4dcca; }
.guia-secundario:hover { background: #365a47; }

.guia-botao:focus-visible,
.guia-secundario:focus-visible { outline: 2px solid #c5e8d2; outline-offset: 3px; }

.guia-acoes .back { margin-top: 0; padding: 12px 0; }

/* -------------------------------------------------------------- contatos */

.guia-contatos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }

.guia-contato {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid #73987848;
  border-radius: 22px 22px 22px 6px;
  background: #2443358a;
}

.guia-numero {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: 30px;
  min-width: 74px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b6d5a6;
  border-radius: 16px;
}

.guia-numero:focus-visible { outline: 2px solid #c5e8d2; outline-offset: 3px; }

.guia-contato strong { font-size: 16px; }
.guia-contato p { margin: 4px 0 0; font-size: 14px; color: #acbba5; }

.guia-nota { margin: 22px 0 0; font-size: 15px; color: #c0d1c1; max-width: 660px; }

/* ------------------------------------------------------- caminho sugerido */

.guia-caminho { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }

.guia-item { display: block; }

.guia-indice {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a6bf9e;
  margin: 0 0 6px;
}

.guia-motivo { font-size: 15px; color: #c0d1c1; margin: 0 0 10px; max-width: 660px; }

.guia-etiqueta {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .6px;
  padding: 6px 13px;
  margin: 0 0 10px;
  border: 1px solid #b6d3a8;
  border-radius: 30px;
  color: #d4e2c9;
}

.guia-cautela { display: block; }

/* ------------------------------------------- centro da roda como entrada */

.wheel-hub { cursor: pointer; }
.wheel-hub .wheel-center,
.wheel-hub .wheel-sub { transition: fill .25s; }
.wheel-hub:hover .wheel-center,
.wheel-hub:focus .wheel-center,
.wheel-hub:hover .wheel-sub,
.wheel-hub:focus .wheel-sub { fill: #ffffff; }
.wheel-hub:focus { outline: none; }
.wheel-hub .wheel-hub-anel { fill: transparent; stroke: transparent; stroke-width: 2; transition: stroke .25s; }
.wheel-hub:hover .wheel-hub-anel,
.wheel-hub:focus .wheel-hub-anel { stroke: #d1f2dd; }

/* ------------------------------------------------------------ responsivo */

@media (max-width: 760px) {
  .guia-opcao { font-size: 15px; padding: 14px 17px; border-radius: 18px 18px 18px 6px; }
  .guia-acoes { gap: 10px; }
  .guia-botao, .guia-secundario { width: 100%; justify-content: center; }
  .guia-acoes .back { width: 100%; }
  .guia-contato { flex-direction: row; gap: 14px; padding: 16px 18px; }
  .guia-numero { font-size: 26px; min-width: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .guia-opcao,
  .guia-barra span,
  .wheel-hub .wheel-center,
  .wheel-hub .wheel-sub,
  .wheel-hub .wheel-hub-anel { transition: none; }
  .guia-opcao:active { transform: none; }
}

/* ------------------------------------------------------------- impressão */

@media print {
  #water, header, footer, .search-shell, .guia-acoes, .guia-progresso { display: none !important; }
  .content { background: none; border: 0; backdrop-filter: none; padding: 0; }
  .guia-caminho { gap: 14px; }
  .card { break-inside: avoid; }
}