/* ==========================================================================
   BASE — reset, rem fluido, tipografia, utilitários por atributo
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   O REM FLUIDO — coração do layout.
   Tudo no site é em rem, então a página inteira escala com a viewport.
   16px @1440 · trava em 18.667px acima de 1680 · trava em 16px abaixo de 991.
   -------------------------------------------------------------------------- */
html {
  font-size: 1.1111111111111112vw;
  scrollbar-width: none;
}
@media screen and (min-width: 1680px) {
  html { font-size: 18.666666666666668px; }
  .perspective__item { font-size: 18.666666666666668px; }
}
@media screen and (max-width: 991px) {
  html { font-size: 16px; }
}

body {
  margin: 0;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--swatch--neutral-xxdark);
  color: var(--swatch--neutral-light);
  font-family: var(--body--font-family);
  font-size: var(--body--font-size);
  font-weight: var(--body--font-weight);
  line-height: var(--body--line-height);
  -ms-overflow-style: none;
}
body::-webkit-scrollbar { display: none; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { border: 0; }
img::selection { background: transparent; }

button {
  background-color: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-underline-position: under;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.05em;
}

section, header, footer { position: relative; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--heading--font-family);
  font-weight: var(--heading--font-weight);
  letter-spacing: var(--heading--letter-spacing);
  line-height: var(--heading--line-height);
}
h1 { font-size: var(--heading-3xl--font-size); }
h2 { font-size: var(--heading-2xl--font-size); }
h3 { font-size: var(--heading-xl--font-size); }
h4 { font-size: var(--heading-lg--font-size); }
h5 { font-size: var(--heading-md--font-size); }
h6 { font-size: var(--heading-sm--font-size); }

p { margin: 0 0 var(--size--16px); }
p:last-child { margin-bottom: 0; }

.heading { font-weight: 500; }

/* <em> em títulos = destaque na cor da marca, sem itálico */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em, .heading em {
  font-style: normal;
  color: var(--swatch--primary-accent);
}
:is([background-color="light"], [background-color="cream"]) .heading em { color: var(--swatch--neutral-dark); }

/* respiro entre título e texto dentro dos blocos de copy */
.copy-block .heading + p,
.copy-block .heading + .bullet_wrapper { margin-top: var(--size--16px); }
.copy-block .text-label + .heading { margin-top: 0; }

/* Escala tipográfica aplicável a qualquer tag.
   Carrega a tipografia inteira (família, peso, entrelinha, tracking), não só
   o corpo — assim funciona também em elementos que não são h1..h6, como as
   etiquetas do image flip. */
[heading] {
  font-family: var(--heading--font-family);
  font-weight: var(--heading--font-weight);
  line-height: var(--heading--line-height);
  letter-spacing: var(--heading--letter-spacing);
}
[heading="display"] { font-size: var(--heading-display--font-size); }
[heading="4xl"]     { font-size: var(--heading-4xl--font-size); }
[heading="3xl"]     { font-size: var(--heading-3xl--font-size); }
[heading="2xl"]     { font-size: var(--heading-2xl--font-size); }
[heading="xl"]      { font-size: var(--heading-xl--font-size); }
[heading="lg"]      { font-size: var(--heading-lg--font-size); }
[heading="md"]      { font-size: var(--heading-md--font-size); }
[heading="sm"]      { font-size: var(--heading-sm--font-size); }
[heading="xs"]      { font-size: var(--heading-xs--font-size); }

[paragraph="lg"] { font-size: var(--paragraph-lg--font-size); }
[paragraph="md"] { font-size: var(--paragraph-md--font-size); }
[paragraph="sm"] { font-size: var(--paragraph-sm--font-size); }
[paragraph="xs"] { font-size: var(--paragraph-xs--font-size); }

/* --------------------------------------------------------------------------
   Utilitários por atributo — o HTML inteiro depende deles
   -------------------------------------------------------------------------- */

/* Cor de fundo */
[background-color="accent"]   { background-color: var(--swatch--primary-accent); }
[background-color="accent-soft"] { background-color: var(--swatch--accent-soft); }
[background-color="dark"]     { background-color: var(--swatch--neutral-dark); }
[background-color="xdark"]    { background-color: var(--swatch--neutral-xdark); }
[background-color="xxdark"]   { background-color: var(--swatch--neutral-xxdark); }
[background-color="deep"]     { background-color: var(--swatch--neutral-deep); }
[background-color="xdark80"]  { background-color: var(--swatch--shade-xdark-80); }
[background-color="xdark10"]  { background-color: var(--swatch--shade-xdark-10); }
[background-color="slate"]    { background-color: var(--swatch--neutral-slate); }
[background-color="mute"]     { background-color: var(--swatch--neutral-mute); }
[background-color="light"]    { background-color: var(--swatch--neutral-light); color: var(--swatch--neutral-xdark); }
[background-color="cream"]    { background-color: var(--swatch--neutral-cream); color: var(--swatch--neutral-xdark); }

/* Cor de texto */
[color="accent"]   { color: var(--swatch--primary-accent); }
[color="accent-soft"] { color: var(--swatch--accent-soft); }
[color="dark"]     { color: var(--swatch--neutral-dark); }
[color="xdark"]    { color: var(--swatch--neutral-xdark); }
[color="slate"]    { color: var(--swatch--neutral-slate); }
[color="mute"]     { color: var(--swatch--neutral-mute); }
[color="light"]    { color: var(--swatch--neutral-light); }
[color="light25"]  { color: var(--swatch--shade-light-55); }
[color="light75"]  { color: var(--swatch--shade-light-75); }

/* Espaçamento */
[top-padding="none"] { padding-top: var(--padding-vertical--none); }
[top-padding="sm"]   { padding-top: var(--padding-vertical--sm); }
[top-padding="md"]   { padding-top: var(--padding-vertical--md); }
[top-padding="lg"]   { padding-top: var(--padding-vertical--lg); }

[bottom-padding="none"] { padding-bottom: var(--padding-vertical--none); }
[bottom-padding="sm"]   { padding-bottom: var(--padding-vertical--sm); }
[bottom-padding="md"]   { padding-bottom: var(--padding-vertical--md); }
[bottom-padding="lg"]   { padding-bottom: var(--padding-vertical--lg); }

[horizontal-padding="none"] { padding-left: var(--padding-horizontal--none); padding-right: var(--padding-horizontal--none); }
[horizontal-padding="sm"]   { padding-left: var(--padding-horizontal--sm);   padding-right: var(--padding-horizontal--sm); }
[horizontal-padding="md"]   { padding-left: var(--padding-horizontal--md);   padding-right: var(--padding-horizontal--md); }
[horizontal-padding="lg"]   { padding-left: var(--padding-horizontal--lg);   padding-right: var(--padding-horizontal--lg); }

[max-width="sm"] { max-width: var(--max-width--sm); }
[max-width="md"] { max-width: var(--max-width--md); }
[max-width="lg"] { max-width: var(--max-width--lg); }

/* Diversos */
.bm-n { margin-bottom: 0 !important; }
.m-n  { margin: 0 !important; }
.hide { display: none !important; }

/* --------------------------------------------------------------------------
   Anti-FOUC — elementos animados começam invisíveis; o GSAP libera.
   Sem JS (ou com JS quebrado), o fallback abaixo devolve a visibilidade.
   -------------------------------------------------------------------------- */
html:not(.no-js) [animate-txt],
html:not(.no-js) [animate-el] { visibility: hidden; }
html:not(.no-js) [animate-el="unmask"] { clip-path: inset(0 0 100% 0); }
.no-js [animate-txt], .no-js [animate-el] { visibility: visible !important; }

/* Sem perspective e sem transform-origin: a referência não define nenhum
   dos dois (conferido no CSS deles), então o rotationX do GSAP "desdobra"
   a palavra achatada em torno do próprio centro, com a leve inclinação do
   rotationZ. Com perspective 300px + origem na base virava um giro de
   porta em 3D — era a diferença visível no aparecer das letras. */
.word { display: inline-block; }
.line { display: block; }

/* --------------------------------------------------------------------------
   Acessibilidade — movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [animate-txt], [animate-el] { visibility: visible !important; clip-path: none !important; }
}

:focus-visible {
  outline: 2px solid var(--swatch--utility-focus);
  outline-offset: 2px;
}

/* caractere isolado para a animação letra a letra */
.char { display: inline-block; transform-origin: 50% 100%; }