/* =====================================================================
   BANCO · BASE
   Toda página, seção e componente do banco lê SÓ estas variáveis.
   Para vestir outro site, crie temas/<site>.css e carregue DEPOIS deste.
   ===================================================================== */
:root{
  /* tipografia */
  --fonte-texto: Poppins, Inter, system-ui, sans-serif;
  --fonte-titulo: Poppins, Inter, system-ui, sans-serif;

  /* cores padrão = paleta da página ajustada (portfólio de flyers): verde-limão neon sobre preto */
  --cor-fundo: #050605;
  --cor-texto: #ffffff;
  --cor-texto-suave: #c3c7cc;
  --cor-borda: rgba(255,255,255,.12);
  --cor-superficie: rgba(8,10,8,.55);

  /* cor de destaque: botões, palavras em degradê, luzes, faixas */
  --cor-destaque: #b6f23a;
  --cor-destaque-claro: #e6ff80;
  --cor-destaque-escuro: #66ad0e;

  /* raios */
  --raio-sm: 10px;
  --raio: 14px;
  --raio-lg: 28px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--cor-fundo)}
body{background:var(--cor-fundo);color:var(--cor-texto);font-family:var(--fonte-texto);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------------------------------------------------------------------
   SEÇÕES CLARAS E ESCURAS NA MESMA PÁGINA
   Marque a seção com data-tema="claro" ou data-tema="escuro".
   Os VALORES ficam no tema de cada site (base/temas/<site>.css), assim:
     [data-tema="claro"]{ --cor-fundo:…; --cor-texto:…; --cor-texto-suave:…;
                          --cor-borda:…; --cor-superficie:… }
     [data-tema="escuro"]{ … }
   Aqui a base só faz a seção marcada pintar o próprio fundo e o texto com
   essas variáveis; tudo dentro dela (componentes inclusive) herda os valores.
   --------------------------------------------------------------------- */
[data-tema="claro"],[data-tema="escuro"]{background-color:var(--cor-fundo);color:var(--cor-texto)}

/* entrada única (base/entrada.js): esconde antes da primeira pintura */
html.entrando [data-entrada]:not([data-gatilho="ver"]){opacity:0}
/* data-gatilho="ver": esconde até o elemento aparecer na tela (o entrada.js tira a classe se não puder animar) */
html.ao-ver [data-entrada][data-gatilho="ver"]:not(.is-visto){opacity:0}
@media (prefers-reduced-motion:reduce){html.entrando [data-entrada],html.ao-ver [data-entrada]{opacity:1}}