/* Ajuda em vídeo: ícone do cabeçalho, player em tela cheia, biblioteca e FAQ. Prefixo aj-. Usa os tokens xp-*. */

/* ---- Ícone "Como funciona" (cabeçalho do painel) ---- */
.aj-pilula {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 6px 0 6px; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--xp-primary-soft, #EEF2FF); color: var(--xp-primary-soft-text, #312E81);
  font: 600 13px/1 var(--xp-font, Inter, system-ui, sans-serif);
  transition: background .15s, box-shadow .15s;
}
@media (min-width: 768px) { .aj-pilula { padding: 0 14px 0 6px; } }
.aj-pilula:hover { background: #E0E7FF; }
.aj-pilula:focus-visible { outline: 2px solid var(--xp-primary, #4F46E5); outline-offset: 2px; }
.aj-pilula__icone {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #6366F1, #4F46E5);
}
.aj-pilula__icone svg { margin-left: 2px; }
/* "Respiração" curta na chegada; desligada para quem prefere menos movimento. */
.aj-pilula__icone::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #6366F1;
  animation: aj-respira 1.8s ease-out 3; opacity: 0;
}
@keyframes aj-respira { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .aj-pilula__icone::after { animation: none; } }

/* ---- Botões ---- */
.aj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent;
  font: 600 14px/1 var(--xp-font, Inter, system-ui, sans-serif); cursor: pointer; text-decoration: none;
}
.aj-btn--prim { background: var(--xp-primary, #4F46E5); color: #fff; }
.aj-btn--prim:hover { background: var(--xp-primary-hover, #4338CA); color: #fff; }
.aj-pagina a.aj-btn--prim, .aj-pagina a.aj-btn--prim:hover { color: #fff; }   /* vence a cor de link do layout */
.aj-pagina a.aj-btn--sec, .aj-pagina a.aj-btn--sec:hover { color: var(--xp-text, #111827); }
.aj-btn--sec { background: var(--xp-surface, #fff); color: var(--xp-text, #111827); border-color: var(--xp-border-input, #D1D5DB); }
.aj-btn--sec:hover { background: var(--xp-surface-sunken, #F9FAFB); color: var(--xp-text, #111827); }
.aj-btn--texto { background: transparent; color: #C7D2FE; padding: 0 8px; text-decoration: underline; text-underline-offset: 3px; }
.aj-btn--texto:hover { color: #fff; }
.aj-btn:focus-visible { outline: 2px solid #A5B4FC; outline-offset: 2px; }

/* ---- Player em tela cheia ---- */
.aj-player {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: #0B0C16; color: #fff;
}
.aj-player[open] { display: flex; flex-direction: column; }
.aj-player::backdrop { background: #0B0C16; }
.aj-player__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.aj-player__titulo { margin: 0; font: 600 16px/1.3 var(--xp-font, Inter, system-ui, sans-serif); color: #fff; }
.aj-player__fechar {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
}
.aj-player__fechar:hover { background: rgba(255,255,255,.22); }
.aj-player__fechar:focus-visible { outline: 2px solid #A5B4FC; outline-offset: 2px; }
.aj-player__palco { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 12px; }
.aj-player__video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; background: #000; border-radius: 8px; }
.aj-player__erro { margin: 12px 0 0; color: #FCA5A5; font-size: 14px; text-align: center; }
.aj-player__rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.aj-player .aj-btn--sec { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); }
.aj-player .aj-btn--sec:hover { background: rgba(255,255,255,.2); }
/* Ao terminar o vídeo, o "Não preciso mais..." ganha destaque (só visual). */
.aj-player.is-fim .aj-btn--texto { background: var(--xp-primary, #4F46E5); color: #fff; text-decoration: none; padding: 0 16px; }
@media (max-width: 575.98px) {
  .aj-player__rodape { flex-direction: column-reverse; align-items: stretch; }
  .aj-player__rodape .aj-btn, .aj-player__dispensar { width: 100%; }
  .aj-player__dispensar .aj-btn { width: 100%; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .aj-player__topo { padding: 4px 12px; }
  .aj-player__fechar { width: 40px; height: 40px; }
  .aj-player__rodape { padding-top: 6px; padding-bottom: 6px; }
}

/* ---- Página Ajuda ---- */
.aj-pagina { font-family: var(--xp-font, Inter, system-ui, sans-serif); color: var(--xp-text, #111827); }
.aj-hero { background: #0E0F1F; color: #fff; padding: 56px 0 40px; }
.aj-hero__eyebrow { margin: 0 0 8px; font: 600 12px/1 var(--xp-font, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #A5B4FC; }
.aj-hero__titulo { margin: 0 0 8px; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; font-weight: 700; color: #fff; }
.aj-hero__sub { margin: 0 0 20px; max-width: 46rem; color: #C7C8D9; font-size: 16px; }
.aj-conteudo { padding-top: 32px; padding-bottom: 56px; }
.aj-secao { margin: 32px 0 16px; font-size: 20px; font-weight: 700; color: var(--xp-text, #111827); }
.aj-busca {
  display: flex; align-items: center; gap: 10px; max-width: 32rem; margin-bottom: 8px; padding: 0 14px;
  min-height: 48px; border-radius: 12px; background: var(--xp-surface, #fff); border: 1px solid var(--xp-border-input, #D1D5DB); color: var(--xp-text-3, #687080);
}
.aj-busca:focus-within { border-color: var(--xp-primary, #4F46E5); box-shadow: 0 0 0 3px rgba(79,70,229,.18); }
.aj-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 15px/1.2 var(--xp-font, Inter, sans-serif); color: var(--xp-text, #111827); }
.aj-aviso {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; font-size: 14px;
  background: var(--xp-warning-bg, #FEF3C7); color: var(--xp-warning-text, #92400E);
}
.aj-vazio { color: var(--xp-text-3, #687080); }

.aj-grade { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 576px) { .aj-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .aj-grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .aj-grade { grid-template-columns: repeat(4, 1fr); } }
.aj-cartao {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 14px;
  background: var(--xp-surface, #fff); border: 1px solid var(--xp-border, #E5E7EB);
}
.aj-cartao[hidden], .aj-faq__grupo[hidden] { display: none; }
.aj-cartao__poster {
  position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #312E81, #4F46E5 55%, #6366F1); overflow: hidden;
}
.aj-cartao__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aj-cartao__poster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.aj-videos { margin-bottom: 16px; }
.aj-videos .aj-secao { margin-top: 0; }
.aj-videos__intro { margin: -8px 0 16px; color: var(--xp-text-2, #374151); }
.aj-videos .aj-cartao__poster { aspect-ratio: 16 / 9; }
.aj-cartao__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
  background: rgba(14,15,31,.18); color: #fff; transition: background .15s;
}
.aj-cartao__play svg { padding: 14px; box-sizing: content-box; width: 26px; height: 26px; border-radius: 50%; background: rgba(79,70,229,.92); }
.aj-cartao__play:hover { background: rgba(14,15,31,.34); }
.aj-cartao__play:focus-visible { outline: 3px solid #A5B4FC; outline-offset: -3px; }
.aj-cartao__duracao {
  position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 3px 8px; border-radius: 6px;
  background: rgba(14,15,31,.78); color: #fff; font: 600 12px/1.2 var(--xp-font, Inter, sans-serif);
}
.aj-cartao__selo {
  position: absolute; left: 8px; top: 8px; z-index: 1; padding: 3px 8px; border-radius: 6px;
  background: var(--xp-primary-soft, #EEF2FF); color: var(--xp-primary-soft-text, #312E81); font: 700 11px/1.2 var(--xp-font, Inter, sans-serif); letter-spacing: .04em; text-transform: uppercase;
}
.aj-cartao__corpo { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.aj-cartao__titulo { margin: 0; font-size: 16px; font-weight: 700; color: var(--xp-text, #111827); }
.aj-cartao__resumo { margin: 0; font-size: 14px; line-height: 1.45; color: var(--xp-text-2, #374151); }
.aj-cartao__link { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--xp-link, #4F46E5); }

/* Vídeos agrupados pelos temas do FAQ: atalhos por tema, um bloco por grupo, cartão com capa e botão de assistir. */
.aj-videos__temas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.aj-tema {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; text-decoration: none;
  background: var(--xp-primary-soft, #EEF2FF); color: var(--xp-primary-soft-text, #312E81); font: 600 13px/1.2 var(--xp-font, Inter, sans-serif);
}
.aj-tema:hover { background: #E0E7FF; }
.aj-tema:focus-visible { outline: 2px solid var(--xp-primary, #4F46E5); outline-offset: 2px; }
.aj-tema__n { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: #fff; text-align: center; font-size: 12px; }
.aj-videos__grupo { margin-bottom: 28px; scroll-margin-top: 80px; }
.aj-videos__grupo .aj-faq__modulo { margin-bottom: 12px; }
.aj-cartao { scroll-margin-top: 80px; }
.aj-cartao--destaque { box-shadow: 0 0 0 3px var(--xp-primary, #4F46E5); }
.aj-cartao__play { background: linear-gradient(135deg, #312E81, #4F46E5 55%, #6366F1); }
.aj-cartao__play:hover { background: linear-gradient(135deg, #2B2870, #4338CA 55%, #5B5EF0); }
.aj-cartao__play[hidden] { display: none; }
.aj-faq__videos { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--xp-link, #4F46E5); }
.aj-faq__item p.aj-faq__ver { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.aj-faq__ver a { font-weight: 600; color: var(--xp-link, #4F46E5); }
.aj-faq__ver a::before { content: "\25B6\00A0"; font-size: 11px; }

.aj-faq__grupo { margin-bottom: 24px; }
.aj-faq__modulo { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--xp-primary-strong-text, #3730A3); }
.aj-faq__item { border: 1px solid var(--xp-border, #E5E7EB); border-radius: 12px; background: var(--xp-surface, #fff); margin-bottom: 8px; }
.aj-faq__item summary {
  cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--xp-text, #111827);
}
.aj-faq__item summary::-webkit-details-marker { display: none; }
.aj-faq__item summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--xp-primary, #4F46E5); }
.aj-faq__item[open] summary::after { content: "\2212"; }
.aj-faq__item p { margin: 0; padding: 0 16px 16px; font-size: 14px; line-height: 1.55; color: var(--xp-text-2, #374151); }
.aj-faq__item summary:focus-visible { outline: 2px solid var(--xp-primary, #4F46E5); outline-offset: 2px; border-radius: 12px; }

.aj-contato, .aj-reativar { margin-top: 40px; padding: 24px; border-radius: 14px; background: var(--xp-surface-sunken, #F9FAFB); border: 1px solid var(--xp-border, #E5E7EB); }
.aj-contato .aj-secao, .aj-reativar .aj-secao { margin-top: 0; }
.aj-contato__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
@media (max-width: 575.98px) { .aj-contato__links .aj-btn { width: 100%; } .aj-hero { padding: 40px 0 28px; } }

/* Tema escuro do painel (CoreUI). */
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) { color: #E5E7EB; }
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) .aj-secao,
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) .aj-cartao__titulo,
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) .aj-faq__item summary { color: #F3F4F6; }
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) .aj-cartao,
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) .aj-faq__item,
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) .aj-busca,
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) .aj-contato,
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) .aj-reativar { background: #1B1D2E; border-color: #2E3150; }
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) .aj-cartao__resumo,
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) .aj-faq__item p { color: #C7C8D9; }
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) .aj-busca input { color: #F3F4F6; }
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) .aj-faq__modulo { color: #A5B4FC; }
[data-coreui-theme="dark"] .aj-pagina:not(.aj-pagina--publica) .aj-btn--sec { background: #232640; color: #F3F4F6; border-color: #3A3E66; }
[data-coreui-theme="dark"] .aj-pilula { background: #1E1B4B; color: #E0E7FF; }
[data-coreui-theme="dark"] .aj-pilula:hover { background: #29256B; }
