/* =============================================================================
   SemearIA: base (fontes, tokens, reset, tipografia, acessibilidade).
   Porte de Myths' Valley (public/css/vale.css), com os tokens da Mata Atlântica:
   laca verde-floresta, ouro de mel, creme e papel; Cinzel nas ações e Cormorant no texto.
   ============================================================================= */

@font-face { font-family: Cinzel; src: url("../fonts/Cinzel-Variavel.0fccedca88d3.woff2") format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: Cormorant; src: url("../fonts/CormorantGaramond-Variavel.a1eaa3f6020f.woff2") format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: Cormorant; src: url("../fonts/CormorantGaramond-Italico-Variavel.1781b7abbea6.woff2") format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
    --tinta: #08140f; --laca: #0f2219; --laca-2: #163023; --laca-3: #1f4130;
    --ouro: #ebbd5c; --ouro-claro: #f6d98f; --ouro-escuro: #93641f;
    --ouro-linha: rgba(235, 189, 92, .3); --ouro-tenue: rgba(235, 189, 92, .1);
    --creme: #f6ead0; --texto: #ece2c8; --texto-suave: #c3b99f;
    /* suave e ouro do papel um passo mais escuros que no plano (#52604d, #7a5316): no canto escuro do
       papel (#e2d2b1) e no .aviso eles ficavam abaixo de 4,5:1 (tools/contraste.py) */
    --papel: #efe6cf; --papel-2: #e4d8b8; --papel-tinta: #1b3124; --papel-suave: #4a5845;
    --papel-ouro: #6f4a10; --papel-linha: rgba(122, 83, 22, .3);
    --mar: #5fb3ad; --mar-papel: #1f615d;
    --broto: #9fd89a; --broto-papel: #2f6b3a;
    --terra: #6a4526;
    --fundo-cartao: rgba(255, 255, 255, .025); --sombra: 0 18px 50px rgba(0, 0, 0, .45);
    --header-h: 68px; --pager-h: 54px; --gutter: clamp(18px, 4.2vw, 72px); --conteudo: 1260px;
    --fs-corpo: clamp(16px, .28vw + .4vh + 10px, 18px); --fs-lead: clamp(17px, .4vw + .65vh + 6px, 21px);
    --fs-h1: clamp(29px, 1.4vw + 2.2vh, 58px); --fs-h2: clamp(25px, 1.05vw + 1.8vh, 46px);
    --fs-h3: clamp(18px, .4vw + .85vh + 5px, 25px); --fs-mini: clamp(10px, .15vw + .3vh + 7.5px, 12.5px);
    --fs-placa: clamp(10.5px, .2vw + .3vh + 7.5px, 13px);
    /* losango de pixel 7 × 7: a assinatura do site (olho, filete, linha do tempo, pontos do paginador) */
    --losango: polygon(42.86% 0, 57.14% 0, 57.14% 14.29%, 71.43% 14.29%, 71.43% 28.57%, 85.71% 28.57%, 85.71% 42.86%, 100% 42.86%, 100% 57.14%, 85.71% 57.14%, 85.71% 71.43%, 71.43% 71.43%, 71.43% 85.71%, 57.14% 85.71%, 57.14% 100%, 42.86% 100%, 42.86% 85.71%, 28.57% 85.71%, 28.57% 71.43%, 14.29% 71.43%, 14.29% 57.14%, 0 57.14%, 0 42.86%, 14.29% 42.86%, 14.29% 28.57%, 28.57% 28.57%, 28.57% 14.29%, 42.86% 14.29%);
    color-scheme: dark;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    overflow: hidden;
    background: var(--tinta);
    color: var(--texto);
    font: 400 var(--fs-corpo)/1.55 Cormorant, Georgia, 'Times New Roman', serif;
    /* algarismos alinhados: nos antigos da Cormorant, "0" e "1" viram "o" e "ı" ("0 finais, 11 provisórios");
       o site mostra dado em toda parte. Só o lema do cabeçalho mantém os antigos (layout.css). */
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
p { margin: 0 0 .85em; }
b, strong { font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ---------- tipografia ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 450; line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.18; }
h4 { font: 600 var(--fs-placa)/1.3 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); }
h1 em, h2 em, h3 em { color: var(--ouro); font-weight: 450; }
.suave { color: var(--texto-suave); }
.destaque { color: var(--ouro); font-weight: 600; }
.italico { font-style: italic; }
.versalete { font: 500 var(--fs-placa)/1.4 Cinzel, serif; letter-spacing: .18em; text-transform: uppercase; }
kbd { display: inline-block; min-width: 1.9em; padding: 4px 7px; text-align: center; font: 600 .78em/1 Cinzel, serif; letter-spacing: .04em; color: var(--texto); background: var(--fundo-cartao); border: 1px solid var(--ouro-linha); border-bottom-width: 3px; }

/* ---------- acessibilidade ---------- */
::selection { background: var(--ouro); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--laca); padding: 10px 16px; border: 1px solid var(--ouro); color: var(--ouro-claro); font: 600 var(--fs-placa)/1.2 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.pular:focus { top: 12px; }

/* ---------- movimento reduzido (o .revelar volta em componentes.css) ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}