/* Reset enxuto + o palco onde tudo acontece */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Coluna flexível para o rodapé grudar no fim da janela quando a página é
   curta. Sem isto,  deixa o rodapé no meio da tela com um
   vazio embaixo dele. Cabeçalho, preloader, cursor e toasts são posicionados
   fora do fluxo, então quem participa da coluna é só o conteúdo e o rodapé. */
body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  font-family: var(--fonte-corpo);
  font-size: var(--texto-base);
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--normal), color var(--normal);
}

/* Enquanto o menu do celular está aberto, o fundo não rola. */
body.menu-aberto {
  overflow: hidden;
}

/* Camada 1, focos de luz coloridos, a "iluminação de estúdio" da marca. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(46rem 32rem at 8% -6%, rgb(249 115 22 / 0.3), transparent 62%),
    radial-gradient(40rem 30rem at 96% 2%, rgb(139 92 246 / 0.28), transparent 64%),
    radial-gradient(52rem 34rem at 50% 104%, rgb(236 72 153 / 0.16), transparent 62%),
    radial-gradient(34rem 24rem at 78% 52%, rgb(59 130 246 / 0.12), transparent 66%);
}

/* Camada 2, "parede de pôsteres": a colagem discreta que aparece atrás da
   arte de divulgação. Rola junto com a página (absolute, não fixed) e a
   dissolvida vem do próprio SVG, em stroke-opacity decrescente. Já foi um
   elemento `fixed` com `mask-image`: bonito no papel, mas mask sobre camada
   fixa força o compositor a refazer a máscara a cada quadro de scroll. */
body::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  /*  em vez de altura fixa: um absoluto mais alto que a página
     estenderia a área de rolagem e criaria um vazio embaixo do rodapé. O
      mantém a colagem restrita ao topo em páginas longas. */
  bottom: 0;
  max-height: 1400px;
  z-index: -2;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300'%3E%3Cg fill='none' stroke='%23ffffff'%3E%3Crect x='12' y='18' width='58' height='86' rx='6' stroke-opacity='.07'/%3E%3Crect x='84' y='6' width='58' height='86' rx='6' stroke-opacity='.06'/%3E%3Crect x='156' y='24' width='58' height='86' rx='6' stroke-opacity='.07'/%3E%3Crect x='228' y='10' width='58' height='86' rx='6' stroke-opacity='.05'/%3E%3Crect x='300' y='28' width='58' height='86' rx='6' stroke-opacity='.06'/%3E%3Crect x='48' y='128' width='58' height='86' rx='6' stroke-opacity='.045'/%3E%3Crect x='120' y='140' width='58' height='86' rx='6' stroke-opacity='.035'/%3E%3Crect x='192' y='124' width='58' height='86' rx='6' stroke-opacity='.04'/%3E%3Crect x='264' y='146' width='58' height='86' rx='6' stroke-opacity='.03'/%3E%3Crect x='336' y='130' width='58' height='86' rx='6' stroke-opacity='.035'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 420px 300px;
}

/* No tema claro os focos de luz precisam ser bem mais discretos, e a colagem
   de fundo é desenhada em branco, então inverte para virar traço escuro. */
:root[data-tema='claro'] body::before {
  opacity: 0.5;
}

:root[data-tema='claro'] body::after {
  filter: invert(1);
  opacity: 0.35;
}

:root[data-tema='claro'] .grao {
  opacity: 0.025;
}

/* Grão de filme, para o preto não ficar plástico. Também rola com a página:
   uma camada fixa a mais só somaria trabalho ao compositor. */
.grao {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 100%;
  z-index: -1;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

img {
  display: block;
  max-width: 100%;
  /* Os SVGs da marca trazem width/height próprios; sem isto o CSS estica a
     altura fixa do atributo e a arte desanda. */
  height: auto;
}

svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: var(--marca-laranja-claro);
  text-decoration: none;
}
@media (hover: hover) {
  a:hover {
    text-decoration: underline;
  }
}


h1,
h2,
h3,
h4 {
  font-family: var(--fonte-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--marca-laranja-claro);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection {
  background: rgb(249 115 22 / 0.4);
}

/* Scrollbar discreta */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--borda-forte) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--borda-forte);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* ── Utilitários ─────────────────────────────────────────────────────────── */

.oculto {
  display: none !important;
}

/* Qualquer `display` declarado depois vence o `[hidden]` do navegador, e é
   o que acontece com os detalhes da revisão, que são `display: grid`. */
[hidden] {
  display: none !important;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--e4);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--e6);
  }
}

/* Título com extrusão 3D, a assinatura tipográfica da marca.
 *
 * A ordem das camadas importa: `background-clip: text` pinta na camada de
 * background do elemento, que o navegador desenha ANTES de qualquer
 * pseudo-elemento, mesmo com z-index negativo. Por isso o contorno grosso e a
 * extrusão ficam no elemento base, e o preenchimento em gradiente vem no
 * ::after, por cima. O contrário deixaria o texto todo escuro. */
.titulo3d {
  position: relative;
  display: inline-block;
  font-family: var(--fonte-display);
  transform: skewX(-7deg);
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--marca-laranja-tinta);
  -webkit-text-stroke: 0.11em var(--marca-laranja-tinta);
  text-shadow:
    0 0.022em 0 #7c2d12,
    0 0.045em 0 #6b2410,
    0 0.068em 0 #571d0c,
    0 0.09em 0 #45170a,
    0 0.115em 0.05em rgb(0 0 0 / 0.75);
  filter: drop-shadow(0 8px 26px rgb(249 115 22 / 0.4));
}

.titulo3d::after {
  content: attr(data-texto);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 0;
  text-shadow: none;
  background: linear-gradient(
    180deg,
    #fff6d8 4%,
    var(--marca-laranja-brilho) 24%,
    var(--marca-laranja-claro) 46%,
    var(--marca-laranja) 70%,
    var(--marca-laranja-escuro) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}

/* Em tela estreita o padrão da colagem fica quase 1:1 com a largura e os
   retângulos viram grade evidente. Aumentar a escala e baixar a opacidade
   devolve a ele o papel de textura. */
@media (max-width: 720px) {
  body::after {
    opacity: 0.3;
    background-size: 300px 214px;
  }

  body::before {
    opacity: 0.75;
  }
}