/*
  SDD-identidade-pelo-chat F-IC0 (ADR-IC3) — o PISO NEUTRO.

  So o `layouts._generico` carrega esta folha: e' o layout de um tema que
  nasceu pela tela e ainda nao tem pasta neste repositorio. Ate aqui ele
  carregava `base.css` + a folha da celula, e o resultado era HTML cru
  (achado com o modelo Games, 12/11/26): o menu do celular aberto por cima de
  tudo, botao com cara de link, formulario do navegador, Times New Roman.
  O acabamento das pecas comuns (menu, rodape, botao, campo) morava inteiro na
  folha de cada tema, e um tema sem folha ficava sem nada.

  Isto NAO e' um tema. E' o "feio, nunca quebrado" da prova destrutiva do
  SDD do DaVinci, escrito de proposito: largura de leitura, respiro entre
  secoes, uma pilha de fonte do sistema e uma paleta cinza que passa em
  contraste. Quem desenhar o tema de verdade substitui tudo isto.

  DUAS REGRAS QUE SUSTENTAM A FOLHA.

  1. Toda regra e' `:where(...)`, especificidade zero. A folha da celula, o
     `<style>` do tema e o que a pessoa grava na gaveta vencem sempre, sem
     disputa de ordem. O piso nunca briga com quem esta' por cima dele.

  2. Toda leitura de papel tem reserva (`var(--p-x, var(--n-x))`). O tema
     nascido pela tela pode declarar `--p-x: var(--token)` com o token ainda
     indefinido; a indirecao computa para invalido, e a reserva e' o que segura
     (ver a memoria da variavel de papel). As cores literais moram so' no
     `:root`, nos `--n-*`.

  Os papeis de cor que as SECOES COMPOSTAS do catalogo leem sem reserva
  (`--p-apoio`, `--p-fundo-alt`, `--p-escuro`...) ganham valor aqui tambem: o
  tema da tela nao os emite, e sem valor a regra inteira cai para o inicial.
  O `<style>` do tema vem depois no documento, entao qualquer papel que ele
  declarar vence este.
*/

:root{
  --n-fundo:#FFFFFF;
  --n-fundo-alt:#F4F4F2;
  --n-tinta:#1C1C1C;
  --n-tinta-fraca:#5C5C5C;
  --n-destaque:#2B2B2B;
  --n-sobre-destaque:#FFFFFF;
  --n-escuro:#1C1C1C;
  --n-escuro-2:#2E2E2E;
  --n-claro-sobre-escuro:#F4F4F2;
  --n-linha:#DDDDDA;
  --n-fonte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --p-fundo:var(--n-fundo);
  --p-fundo-alt:var(--n-fundo-alt);
  --p-tinta:var(--n-tinta);
  --p-tinta-fraca:var(--n-tinta-fraca);
  --p-destaque:var(--n-destaque);
  --p-destaque-texto:var(--n-destaque);
  --p-destaque-claro:var(--n-claro-sobre-escuro);
  --p-sobre-destaque:var(--n-sobre-destaque);
  --p-apoio:var(--n-tinta-fraca);
  --p-escuro:var(--n-escuro);
  --p-escuro-2:var(--n-escuro-2);
  --p-secundaria:var(--n-tinta-fraca);
  --p-fonte-identidade:var(--n-fonte);

  --largura-max:1180px;
  --pad:clamp(20px,5vw,56px);
  --ritmo:clamp(56px,9vw,112px);
}

:where(body){
  background:var(--p-fundo, var(--n-fundo));
  color:var(--p-tinta, var(--n-tinta));
  font-family:var(--p-fonte, var(--n-fonte));
  line-height:1.6;
}

:where(h1,h2,h3,h4){font-family:var(--p-fonte-identidade, var(--n-fonte));line-height:1.15;font-weight:700}
:where(h1){font-size:clamp(2.2rem,5vw,3.6rem)}
:where(h2){font-size:clamp(1.7rem,3.4vw,2.5rem)}
:where(h3){font-size:1.25rem}
:where(p){margin:0 0 1em}

/* O miolo: largura de leitura centrada, com o mesmo respiro lateral em tudo. */
:where(.wrap){max-width:var(--largura-max);margin-inline:auto;padding-inline:var(--pad)}

/*
  A secao composta SEM casca. O `CompositionRenderer` a emite como
  `<section class="mmc-{bloco}-{doc}">` com a raiz logo dentro; com casca ela
  ganha as classes da celula e este seletor deixa de ser o unico a falar.
  O respiro vai no `<section>` (e' ele que pinta de ponta a ponta) e a
  largura vai na raiz — o mesmo contrato de duas caixas da F-R6-1.
*/
:where(section[class^="mmc-"]){padding-block:var(--ritmo)}
:where(section[class^="mmc-"] > div:first-of-type){max-width:var(--largura-max);margin-inline:auto;padding-inline:var(--pad)}

/* ---- O menu (`MenuDoSite`, modelo original-topo) ---- */
:where(header){position:sticky;top:0;z-index:50;background:var(--p-menu-fundo, var(--p-fundo, var(--n-fundo)));border-bottom:1px solid var(--n-linha);padding-block:14px}
:where(.bar){display:flex;align-items:center;justify-content:space-between;gap:24px}
:where(.brand){display:flex;align-items:center;gap:12px;font-weight:700}
:where(.brand .wm b){font-family:var(--p-fonte-identidade, var(--n-fonte));font-size:1.2rem}
:where(header nav){display:flex;align-items:center;gap:22px}
:where(header nav .link){color:var(--p-menu-texto, var(--p-tinta, var(--n-tinta)));font-size:.95rem}
:where(header nav .link:hover){text-decoration:underline;text-underline-offset:4px}
:where(.menu-toggle){display:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--p-tinta, var(--n-tinta))}
:where(.mobile-nav){display:none}

/* ---- Botoes ---- */
:where(.btn){display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border:1px solid transparent;border-radius:6px;font-weight:600;font-size:.95rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
:where(.btn-solid){background:var(--p-botao-principal-fundo, var(--p-destaque, var(--n-destaque)));color:var(--p-botao-principal-texto, var(--p-sobre-destaque, var(--n-sobre-destaque)));border-color:var(--p-botao-principal-borda, var(--p-destaque, var(--n-destaque)))}
:where(.btn-solid:hover){filter:brightness(1.15)}
:where(.btn-ghost){background:var(--p-botao-secundario-fundo, transparent);color:var(--p-botao-secundario-texto, var(--p-tinta, var(--n-tinta)));border-color:var(--p-botao-secundario-borda, var(--p-tinta, var(--n-tinta)))}
:where(.btn-ghost:hover){background:var(--p-fundo-alt, var(--n-fundo-alt))}

/* O botao da celula Base (`.acao`, o CTA das secoes compostas): a celula da a
   forma (raio, respiro) e so' a folha do tema o pintava. Mesmas cores do
   `.btn-solid`/`.btn-ghost` (SDD-identidade-pelo-chat F-IC6). */
:where(.acao){display:inline-block;border:1px solid var(--p-botao-principal-borda, var(--p-destaque, var(--n-destaque)));background:var(--p-botao-principal-fundo, var(--p-destaque, var(--n-destaque)));color:var(--p-botao-principal-texto, var(--p-sobre-destaque, var(--n-sobre-destaque)));font-weight:600;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
:where(.acao:hover, .acao:focus-visible){background:var(--p-botao-principal-selecao-fundo, var(--p-escuro, var(--n-escuro)));color:var(--p-botao-principal-selecao-texto, var(--p-fundo, var(--n-fundo)));border-color:var(--p-botao-principal-selecao-borda, var(--p-escuro, var(--n-escuro)))}
:where(.acao--vazada){background:var(--p-botao-secundario-fundo, transparent);color:var(--p-botao-secundario-texto, var(--p-tinta, var(--n-tinta)));border-color:var(--p-botao-secundario-borda, var(--p-tinta, var(--n-tinta)))}

/* Botao que e' LINK ou BUTTON: a `base.css` diz `a{color:inherit}` e
   `button{color:inherit}`, e uma tag (0,0,1) vence o `:where()` (0).
   `:is(a, button):where(...)` tem a especificidade de uma tag so':
   vence a base pela ordem e continua perdendo para qualquer classe da celula,
   do tema ou do builder. So' a COR precisa disso. */
:is(a, button):where(.btn-solid){color:var(--p-botao-principal-texto, var(--p-sobre-destaque, var(--n-sobre-destaque)))}
:is(a, button):where(.btn-ghost){color:var(--p-botao-secundario-texto, var(--p-tinta, var(--n-tinta)))}
:is(a, button):where(.acao){color:var(--p-botao-principal-texto, var(--p-sobre-destaque, var(--n-sobre-destaque)))}
:is(a, button):where(.acao:hover, .acao:focus-visible){color:var(--p-botao-principal-selecao-texto, var(--p-fundo, var(--n-fundo)))}
:is(a, button):where(.acao--vazada){color:var(--p-botao-secundario-texto, var(--p-tinta, var(--n-tinta)))}

/* ---- Formulario ---- */
:where(.form .field, .field){display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
:where(.field label){font-size:.85rem;font-weight:600;color:var(--p-tinta-fraca, var(--n-tinta-fraca))}
:where(.field input, .field textarea, .field select){width:100%;padding:12px 14px;border:1px solid var(--n-linha);border-radius:6px;background:var(--p-fundo, var(--n-fundo))}
:where(.field textarea){min-height:120px;resize:vertical}

/* ---- Rodape ---- */
:where(footer){background:var(--p-escuro, var(--n-escuro));color:var(--p-destaque-claro, var(--n-claro-sobre-escuro));padding-block:56px 28px}
:where(.foot-top){display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:32px}
:where(.foot-brand b){font-family:var(--p-fonte-identidade, var(--n-fonte));font-size:1.3rem}
:where(.foot-col h4){font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
:where(.foot-col a, .foot-col p){display:block;margin:0 0 8px;opacity:.85;font-size:.9rem}
:where(.foot-bot){display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:24px;border-top:1px solid color-mix(in srgb, currentColor 20%, transparent);font-size:.8rem;opacity:.75}

@media (max-width:860px){
  :where(header nav .link, header nav .btn){display:none}
  :where(.menu-toggle){display:inline-flex}
  :where(.mobile-nav){position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:var(--p-escuro, var(--n-escuro));color:var(--p-destaque-claro, var(--n-claro-sobre-escuro))}
  :where(.mobile-nav.open){display:flex}
  :where(.mobile-nav a){font-size:1.6rem;font-weight:600}
  :where(.mobile-nav a.small){font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
  :where(.mobile-nav .close){position:absolute;top:20px;right:20px;background:none;border:0;color:inherit;cursor:pointer}
  :where(.foot-top){grid-template-columns:1fr}
}