/* Identidade WAMA (ver .claude/docs/identidade-visual.md): verde-escuro texturizado, dourado como acento, serifa clássica. */
@font-face {
    font-family: "WAMA Serif";
    src: url("fonts/TimesNewNormaRegular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --verde: #092B0B;
    --verde-escuro: #052106;
    --ouro: #E3B23C;
    --bronze: #733D1C;
    --marfim: #F1EAD8;
    --marfim-dim: #B9B8A2;
    --vidro: rgba(9, 43, 11, .4);
    /* Fundo limpo: verde liso com um feixe de luz dourada vindo do canto superior direito. */
    --luz-direita: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(227, 178, 60, .20), rgba(227, 178, 60, .06) 45%, transparent 70%);

    --font-display: "WAMA Serif", "Times New Roman", Georgia, serif;
    --font-body: "Archivo", system-ui, sans-serif;

    --gutter-l: max(16px, env(safe-area-inset-left, 0px));
    --gutter-r: max(16px, env(safe-area-inset-right, 0px));
    --header-h: 72px;

    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

/* A rolagem para sempre numa etapa do hero (ver .snaps em HeroScroll.razor.css). */
html { scroll-snap-type: y mandatory; }

body {
    background: var(--verde-escuro);
    color: var(--marfim);
    font: 400 16px/1.55 var(--font-body);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 12px 22px;
    font: 500 .8rem/1 var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(227, 178, 60, .7);
    background: var(--vidro);
    color: var(--ouro);
    transition: background .3s, color .3s, box-shadow .3s;
}

.pill:hover { background: rgba(227, 178, 60, .1); box-shadow: inset 0 0 18px rgba(227, 178, 60, .25); }
.pill.solid { background: var(--ouro); border-color: var(--ouro); color: var(--verde-escuro); }
.pill.solid:hover { background: #f0c45a; box-shadow: 0 0 24px rgba(227, 178, 60, .35); }

.gold-rule {
    border: 0;
    height: 1px;
    margin: 0;
    background: linear-gradient(90deg, transparent, rgba(227, 178, 60, .6), transparent);
}

/* No celular, enquanto o hero está na tela, o WhatsApp flutuante sobe para não cobrir o menu de etapas
   (a classe vem de hero3d.js). Fica aqui porque cruza dois componentes. */
html .wa-float { transition: bottom .3s ease; }

/* Na abertura da marca o header some para limpar a tela; volta a partir da etapa Elite.
   Só CSS (:has), para já valer no primeiro carregamento, sem piscar antes do JavaScript. */
html .site-header { transition: opacity .4s ease, transform .4s ease; }
html:has(.panel--brand.is-active) .site-header { opacity: 0; transform: translateY(-100%); pointer-events: none; }

@media (max-width: 900px) {
    html.hero-visible .wa-float { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    padding: 12px 16px;
    background: #7a1f1f;
    color: #fff;
    z-index: 1000;
}