/* base: reset, grade de 12 colunas, utilitarios e comportamentos por atributo */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-cabecalho-solido) + 24px);
  background: var(--dark);
  -webkit-text-size-adjust: 100%;
}

body {
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; vertical-align: middle; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: none; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: var(--teal); color: var(--dark); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 3px; }
main { position: relative; }

/* ---------- grade ----------
   .container centraliza e respeita a margem lateral.
   .grade abre as 12 colunas. Onde cada peca comeca e termina
   mora no CSS do bloco, em grid-column. */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grade {
  display: grid;
  grid-template-columns: repeat(var(--colunas), minmax(0, 1fr));
  gap: var(--gap);
}

.secao { position: relative; padding-block: var(--pad-secao); }

/* Guia visual da grade, liga com ?grade na URL. Serve para apresentar
   ao cliente que nada esta solto e para conferir alinhamento. */
.guia-grade { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: none; }
html.ver-grade .guia-grade { display: block; }
.guia-grade .grade { height: 100%; }
.guia-grade span { display: block; height: 100%; background: rgba(226, 32, 62, .07); outline: 1px solid rgba(226, 32, 62, .12); }

/* ---------- tipografia ---------- */
.display { font-family: var(--serif); font-weight: 400; line-height: .92; letter-spacing: -.045em; }
.display em { font-style: normal; color: var(--teal); }
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  color: var(--teal); font-size: var(--t-mini);
  font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--mola) .25s;
}
.eyebrow.visivel::before, .visivel > .eyebrow::before { transform: scaleX(1); }
.section-lead { color: var(--muted); font-size: var(--t-corpo); max-width: 46ch; }

/* ---------- botoes e links ---------- */
.pill {
  min-height: 56px; padding-inline: 28px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--t-apoio); font-weight: 600; white-space: nowrap;
  translate: var(--mag-x, 0) var(--mag-y, 0);
  transition: translate .5s var(--mola), background-color .4s var(--suave),
              color .4s var(--suave), box-shadow .4s var(--suave);
}
.pill:hover { transition-duration: .14s, .4s, .4s, .4s; }
.pill svg { transition: transform .45s var(--mola); }
.pill:hover svg { transform: translateX(5px); }
.pill-light { background: #fff; color: var(--ink); }
.pill-light:hover { background: var(--teal); }
.pill-outline { box-shadow: inset 0 0 0 1px rgba(194, 215, 213, .5); color: #fff; }
.pill-outline:hover { box-shadow: inset 0 0 0 1px var(--teal); color: var(--teal); }
.light-border { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
.light-border:hover { box-shadow: inset 0 0 0 1px #fff; color: #fff; }

.teal-link {
  color: var(--teal);
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--t-apoio); font-weight: 600;
  transition: gap .4s var(--mola);
}
.teal-link:hover { gap: 16px; }

.logo { display: block; width: 200px; }
.logo img { width: 100%; height: auto; }

/* ---------- entrada dos elementos ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(26px); filter: blur(7px);
  transition: opacity 1s var(--mola), transform 1s var(--mola), filter 1s var(--mola);
  transition-delay: var(--atraso, 0ms);
}
[data-reveal].visivel { opacity: 1; transform: none; filter: none; }

/* titulo dividido em palavras, cada uma sobe atras de uma mascara */
.palavra { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.palavra__i { display: inline-block; transform: translateY(115%); opacity: 0; transition: transform 1.1s var(--mola), opacity .9s var(--suave); }
.texto-dividido.visivel .palavra__i { transform: none; opacity: 1; }

/* imagem que entra por tras de uma cortina */
[data-cortina] { position: relative; overflow: hidden; }
[data-cortina]::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--cortina-cor, var(--dark));
  transform: scaleY(1); transform-origin: bottom;
  transition: transform 1.25s var(--mola) var(--atraso, 0ms);
}
[data-cortina].visivel::after { transform: scaleY(0); }
[data-cortina] img { transition: transform 1.8s var(--mola); transform: scale(1.14); }
[data-cortina].visivel img { transform: scale(1); }

/* traco de SVG que se desenha */
[data-desenho] path { stroke-dasharray: var(--traco); stroke-dashoffset: var(--traco); transition: stroke-dashoffset 2.6s var(--suave) var(--atraso, 0ms); }
[data-desenho].visivel path { stroke-dashoffset: 0; }

/* ---------- parallax e magnetismo ---------- */
[data-parallax] { translate: 0 var(--par-y, 0px); will-change: translate; }
[data-magnetico] { translate: var(--mag-x, 0px) var(--mag-y, 0px); }

/* ---------- luz do ponteiro, so dentro das secoes escuras ---------- */
.luz-cursor {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none; opacity: 0; mix-blend-mode: screen;
  transition: opacity 1s var(--suave);
  background: radial-gradient(480px circle at var(--cx, 50%) var(--cy, 50%), color-mix(in srgb, var(--teal) 12%, transparent), transparent 68%);
}
.luz-cursor.ligada { opacity: 1; }

/* ---------- cortina de abertura ---------- */
.abertura { position: fixed; inset: 0; z-index: 300; background: var(--dark); display: grid; place-items: center; transition: transform 1.15s var(--mola) .2s, visibility 0s 1.35s; }
.abertura__marca { width: 180px; opacity: 0; transform: translateY(16px); transition: opacity .9s var(--suave) .1s, transform 1.1s var(--mola) .1s; }
html.pronto .abertura__marca { opacity: 1; transform: none; }
html.abriu .abertura { transform: translateY(-101%); visibility: hidden; }
html.abriu .abertura__marca { opacity: 0; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  [data-cortina]::after { transform: scaleY(0); }
  .abertura { display: none; }
}

/* quando a cortina cuida da entrada, o reveal so serve de gatilho */
[data-cortina][data-reveal] { opacity: 1; transform: none; filter: none; }

/* ---------- pilula com luz ----------
   Duas camadas dentro do botao: um brilho radial que respira e um
   conic-gradient que gira. Cor e velocidade vem de --luz-cor e --luz-vel,
   entao da para calibrar direto no HTML sem tocar aqui. */
.pill--luz { position: relative; overflow: hidden; isolation: isolate; }
.pill--luz::before, .pill--luz::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pill--luz::before {
  background: radial-gradient(circle at center, var(--luz-cor, var(--teal)) 10%, transparent 62%);
  filter: blur(12px);
  opacity: .38;
  animation: luz-respira var(--luz-vel, 5s) ease-in-out infinite;
}
.pill--luz::after {
  background: conic-gradient(from 90deg at 50% 50%, transparent 0deg, var(--luz-cor, var(--teal)) 120deg, transparent 240deg);
  opacity: .16;
  animation: luz-gira var(--luz-vel, 5s) linear infinite;
}
@keyframes luz-respira {
  0%, 100% { transform: scale(1);    opacity: .30; }
  50%      { transform: scale(1.18); opacity: .62; }
}
@keyframes luz-gira { to { transform: rotate(360deg); } }

/* o botao de reduzir animacoes do painel de acessibilidade faz o mesmo que
   a preferencia do sistema, so que por escolha explicita do visitante */
html[data-movimento="reduzido"] *,
html[data-movimento="reduzido"] ::before,
html[data-movimento="reduzido"] ::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
html[data-movimento="reduzido"] { scroll-behavior: auto; }
html[data-movimento="reduzido"] [data-reveal] { opacity: 1; transform: none; filter: none; }
html[data-movimento="reduzido"] [data-cortina]::after { transform: scaleY(0); }
html[data-movimento="reduzido"] .palavra__i { transform: none; opacity: 1; }

/* ---------- acento por contexto ----------
   Guia paginas 11 e 13: a paleta principal deve ser predominante. O acento
   e vermelho sobre fundo claro e amarelo sobre fundo escuro, que e como o
   proprio guia se comporta. --teal aqui significa "cor de acento". */
.hero, .identity, .eventos, .rodape { --teal: var(--amarelo); --teal-fundo: #b89800; --teal-claro: #ffe680; }

/* Museo 900 no lugar dos titulos: peso alto e entrelinha fechada.
   Um sans pesado precisa de menos espacamento negativo que a serifada. */
.display { font-family: var(--display); font-weight: 900; line-height: .94; letter-spacing: -.03em; }
.display em { font-style: normal; color: var(--cinza-escuro); font-weight: 900; }
.hero .display em { color: var(--teal); }