/* Cores da marca xbeex */
:root {
  --escuro: #0B1F66;
  --azul-topo: #143BB7;
  --claro: #F7F6F1;
  --azul: #0550EB;
  --azul-apoio: #4286F5;
  --laranja-logo: #FD7101;
  --laranja: #FFA500;
  --texto: #1B2133;
  --texto-suave: #5B6275;
  --borda: #E4E2DA;
  --branco: #FFFFFF;
  --verde: #16A34A;
  --amarelo: #D97706;
  --vermelho: #DC2626;
  --raio: 16px;
  --sombra: 0 4px 20px rgba(10, 16, 40, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texto);
  background: var(--claro);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.container { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px; }

.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

a { color: var(--azul); }

/* ---------- Topo ---------- */
.topo {
  background: radial-gradient(circle at 85% 0%, rgba(66, 134, 245, 0.45), transparent 55%), var(--azul-topo);
  color: var(--branco);
  padding: 20px 0 48px;
}

.barra-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca {
  display: inline-flex; align-items: center; padding: 8px 14px;
  background: var(--branco); border-radius: 10px; line-height: 0;
}
.marca img { display: block; width: 140px; height: auto; }
.botao-voltar { padding: 10px 18px; font-size: 0.95rem; }

.chamada { max-width: 680px; margin: 40px 0 28px; }
.selo {
  display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.15); color: var(--branco);
  font-size: 0.85rem; font-weight: 600;
}
.chamada h1 { margin: 0 0 12px; font-size: clamp(1.75rem, 5vw, 2.6rem); line-height: 1.15; }
.subtitulo { margin: 0; color: #DCE4FF; font-size: 1.05rem; }

.formulario { display: flex; gap: 10px; max-width: 680px; }
.formulario input {
  flex: 1; min-width: 0; padding: 16px 18px; font-size: 1rem;
  border: 2px solid transparent; border-radius: 12px; background: var(--branco); color: var(--texto);
}
.formulario input:focus { outline: none; border-color: var(--laranja); }

.mensagem-status { min-height: 1.5em; margin: 12px 0 0; color: #DCE4FF; }
.mensagem-status.erro { color: #FFE0B2; font-weight: 600; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border: 2px solid transparent; border-radius: 12px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.botao:hover { filter: brightness(1.08); transform: translateY(-1px); }
.botao:focus-visible { outline: 3px solid var(--azul-apoio); outline-offset: 2px; }
.botao:disabled { opacity: 0.75; cursor: wait; transform: none; }

.botao-azul { background: var(--azul); color: var(--branco); white-space: nowrap; }
/* Laranja #FFA500 com texto branco, como pedido; a sombra no texto ajuda a leitura. */
.botao-laranja { background: var(--laranja); color: var(--branco); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.botao-analisar { white-space: nowrap; }
.botao-contorno-claro { background: transparent; color: var(--branco); border-color: rgba(255, 255, 255, 0.5); }
.botao-contorno { background: transparent; color: var(--texto); border-color: var(--borda); }

.spinner {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: var(--branco);
  animation: girar 0.8s linear infinite;
}
.carregando .spinner { display: inline-block; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Resultado ---------- */
.resultado { padding: 32px 0 16px; }

.cartao {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
}

.resumo { display: flex; align-items: center; gap: 28px; padding: 28px; margin-top: -64px; }
.resumo h2 { margin: 0 0 4px; font-size: 1.4rem; }
.site-analisado { margin: 0 0 8px; color: var(--texto-suave); font-size: 0.95rem; word-break: break-all; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.nota-circulo { position: relative; flex: 0 0 150px; width: 150px; height: 150px; }
.nota-circulo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nota-fundo { fill: none; stroke: #EEECE5; stroke-width: 12; }
.nota-progresso {
  fill: none; stroke: var(--cor-nota, var(--azul)); stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: 326.73; stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1s ease;
}
.nota-valor {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.nota-valor strong { font-size: 2.6rem; line-height: 1; color: var(--cor-nota, var(--texto)); }
.nota-valor span { font-size: 0.85rem; color: var(--texto-suave); }

.alerta {
  margin: 20px 0 0; padding: 14px 18px; border-radius: 12px;
  background: #FFF7E6; border: 1px solid #FFD999; color: #7A4B00;
}

.titulo-secao { margin: 36px 0 16px; font-size: 1.3rem; }

.categorias { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }

.categoria { overflow: hidden; }
.categoria summary {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center;
  padding: 18px 20px; cursor: pointer; list-style: none;
}
.categoria summary::-webkit-details-marker { display: none; }
.categoria summary:focus-visible { outline: 3px solid var(--azul-apoio); outline-offset: -3px; }
.categoria-nome { font-weight: 700; font-size: 1.05rem; }
.categoria-nome small {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: #EEF2FF; color: var(--azul); font-size: 0.72rem; font-weight: 600; vertical-align: 2px;
}
.categoria-nota { font-weight: 800; font-size: 1.1rem; color: var(--cor-nota); }
.barra { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: #EEECE5; overflow: hidden; }
.barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--cor-nota); transition: width 0.8s ease; }
.ver-detalhes { grid-column: 1 / -1; font-size: 0.85rem; color: var(--texto-suave); }
.categoria[open] .ver-detalhes::after { content: " ▲"; }
.categoria:not([open]) .ver-detalhes::after { content: " ▼"; }

.itens { list-style: none; margin: 0; padding: 0 20px 18px; border-top: 1px solid var(--borda); }
.itens li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #F0EEE7; }
.itens li:last-child { border-bottom: 0; padding-bottom: 0; }
.icone {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800; color: var(--branco);
}
.icone.ok { background: var(--verde); }
.icone.aviso { background: var(--amarelo); }
.icone.erro { background: var(--vermelho); }
.item-nome { margin: 0; font-weight: 600; }
.item-detalhe { margin: 2px 0 0; color: var(--texto-suave); font-size: 0.93rem; word-break: break-word; }

.cta-final { margin: 32px 0 0; padding: 32px 28px; text-align: center; background: var(--azul-topo); color: var(--branco); border: 0; }
.acoes-centro { justify-content: center; }
.cta-final h2 { margin: 0 0 8px; }
.cta-final p { margin: 0 auto 4px; max-width: 560px; color: #DCE4FF; }

/* ---------- Rodapé ---------- */
.rodape { padding: 32px 0 40px; color: var(--texto-suave); font-size: 0.88rem; text-align: center; }
.rodape p { max-width: 720px; margin: 0 auto 8px; }

/* ---------- Celular ---------- */
@media (max-width: 720px) {
  .formulario { flex-direction: column; }
  .botao-analisar { width: 100%; }
  .marca img { width: 110px; }
  .botao-voltar { padding: 9px 12px; font-size: 0.85rem; }
  .resumo { flex-direction: column; text-align: center; padding: 24px 20px; }
  .acoes { justify-content: center; }
  .acoes .botao { width: 100%; }
  .categorias { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: 0.01ms !important; }
}