/* Codemeia: complementos ao Tailwind (marca, estados do hexágono, acessibilidade). */
html { scroll-behavior: smooth; background: #13110D; }
[hidden] { display: none !important; } /* senão classes como .flex do Tailwind vencem o atributo */
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
::selection { background: #F2B441; color: #13110D; }
:focus-visible { outline: 2px solid #F2B441; outline-offset: 2px; border-radius: 4px; }
.material-symbols-outlined { font-variation-settings: "wght" 300, "FILL" 0; }

.cm-skip { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: 8px;
  background: #F2B441; color: #13110D; font: 600 13px Inter, sans-serif; }
.cm-skip:focus { top: 12px; }

/* logo */
.cm-wordmark { font-family: Sora, sans-serif; font-weight: 700; letter-spacing: -0.02em; display: inline-flex;
  align-items: baseline; line-height: 1; white-space: nowrap; }
.cm-i { position: relative; display: inline-block; }
.cm-i svg { position: absolute; left: 50%; transform: translateX(-50%); top: .065em; width: .16em; height: .185em; }
.cm-lockup { display: inline-flex; align-items: center; gap: .4em; }
.cm-lockup > svg { width: 1.3em; height: 1.3em; flex: none; }

/* navegação e botões */
.cm-nav { font: 400 14px/1.5 Inter, sans-serif; color: #B8B2A5; padding: 4px 0; border-bottom: 2px solid transparent; }
.cm-nav:hover { color: #F5F1E8; }
.cm-nav.is-active { color: #F5F1E8; font-weight: 600; border-bottom-color: #F2B441; }
.cm-nav-m { display: flex; align-items: center; min-height: 44px; color: #F5F1E8; font: 500 16px Inter, sans-serif;
  border-bottom: 1px solid #312B22; }
.cm-foot { font-size: 14px; color: #B8B2A5; }
.cm-foot:hover { color: #F5F1E8; }
.cm-btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border-radius: 8px; background: #F2B441; color: #13110D; font: 600 13px/1 Inter, sans-serif; white-space: nowrap;
  transition: background .15s; }
.cm-btn-primary:hover { background: #fbbc48; }
.cm-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.cm-btn-primary.h-9 { min-height: 36px; }

/* hexágono: o estado define borda (--hs), miolo (--hf), conteúdo (--hc) e rótulo (--lc) */
[data-state="idle"] { --hf: #1C1914; --hs: #453D31; --hc: #8A8373; --lc: #B8B2A5; }
[data-state="now"]  { --hf: #402E0C; --hs: #F2B441; --hc: #F2B441; --lc: #F2B441; }
[data-state="done"] { --hf: #1C2A46; --hs: #8FB8FF; --hc: #8FB8FF; --lc: #F5F1E8; }
/* os juízes da validação são vereditos: aprovado = sálvia */
.cm-mini[data-state="done"] { --hf: #1C2C1F; --hs: #93C89E; }
[data-state="wait"] { --hf: #423824; --hs: #FFE9B8; --hc: #FFE9B8; --lc: #FFE9B8; }
[data-state] polygon { fill: var(--hf); stroke: var(--hs); transition: fill .35s, stroke .35s; }
.cm-hx { color: var(--hc); transition: color .35s; }
.cm-st-label { color: var(--lc); transition: color .35s; }
[data-state="now"] > .cm-hx, .cm-glow { animation: cm-glow 1.6s ease-in-out infinite; }
.cm-mini { display: inline-block; width: 14px; height: 16px; }
.cm-mini svg { width: 100%; height: 100%; display: block; }
@media (max-width: 639px) { .cm-mini { width: 12px; height: 14px; } }
@keyframes cm-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }

/* demonstração */
.cm-log { transition: opacity .35s, transform .35s; }
.cm-log.is-hidden { opacity: 0; transform: translateY(4px); }
#demo-pr { transition: opacity .4s, transform .4s; }
#demo-pr.is-hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }

/* formulário */
.cm-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#waitlist-msg[data-kind="ok"] { color: #93C89E; }
#waitlist-msg[data-kind="error"] { color: #E08A80; }
[aria-invalid="true"] { border-color: #E08A80 !important; }

/* índice da marca */
#brand-toc a.is-active { color: #F2B441; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}