@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --gz-noite: #0B0B0C;
  --gz-sombra: #16161A;
  --gz-sombra-2: #212126;
  --gz-nervura: #33343A;
  --gz-nervura-forte: #6C6D75;
  --gz-nevoa: #A2A3AA;
  --gz-cromo: #CDD0D6;
  --gz-orvalho: #F4F5F7;
  --gz-papel: #EEEDEA;
  --gz-grafite: #55565C;
  --gz-iris-sangue: #8E0F18;
  --gz-iris-violeta: #6E3BE0;
  --gz-iris-abobora: #D2611C;
  --gz-iris-petala: #F1B6D8;

  --gz-fundo: var(--gz-noite);
  --gz-superficie: var(--gz-sombra);
  --gz-superficie-2: var(--gz-sombra-2);
  --gz-linha: var(--gz-nervura);
  --gz-borda-campo: var(--gz-nervura-forte);
  --gz-texto: var(--gz-orvalho);
  --gz-texto-2: var(--gz-nevoa);
  --gz-acao: var(--gz-orvalho);
  --gz-acao-texto: var(--gz-noite);
  --gz-iris: var(--gz-iris-sangue);
  --gz-iris-texto: var(--gz-orvalho);

  --gz-fonte-titulo: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --gz-fonte-texto: Inter, "Segoe UI", system-ui, sans-serif;
  --gz-fonte-mono: "IBM Plex Mono", Consolas, ui-monospace, monospace;
  --gz-t-display: clamp(56px, 7.2vw, 112px);
  --gz-t-h1: clamp(40px, 4.6vw, 72px);
  --gz-t-h2: clamp(28px, 2.8vw, 40px);
  --gz-t-h3: clamp(22px, 1.8vw, 26px);
  --gz-t-corpo-g: 18px;
  --gz-t-corpo: 16px;
  --gz-t-pequeno: 14px;
  --gz-t-rotulo: 12px;
  --gz-t-preco: 22px;

  --gz-espaco-1: 4px;
  --gz-espaco-2: 8px;
  --gz-espaco-3: 12px;
  --gz-espaco-4: 16px;
  --gz-espaco-5: 24px;
  --gz-espaco-6: 32px;
  --gz-espaco-7: 48px;
  --gz-espaco-8: 64px;
  --gz-espaco-9: 96px;
  --gz-espaco-10: 128px;
  --gz-grade-max: 1440px;
  --gz-grade-colunas: 12;
  --gz-grade-calha: 24px;
  --gz-grade-margem: clamp(16px, 4.4vw, 64px);
  --gz-linha-max: 62ch;

  --gz-raio-1: 4px;
  --gz-raio-2: 10px;
  --gz-raio-3: 14px;
  --gz-raio-pilula: 999px;
  --gz-elevacao: 0 24px 60px rgba(0, 0, 0, .55);
  --gz-brilho: 0 0 0 1px rgba(205, 208, 214, .14), 0 0 40px rgba(205, 208, 214, .10);
  --gz-vidro: rgba(22, 22, 26, .72);
  --gz-vidro-desfoque: 14px;

  --gz-curva-abrir: cubic-bezier(0.16, 1, 0.3, 1);
  --gz-curva-pousar: cubic-bezier(0.4, 0, 0.2, 1);
  --gz-curva-brilho: cubic-bezier(0.5, 0, 0.5, 1);
  --gz-dur-1: 120ms;
  --gz-dur-2: 240ms;
  --gz-dur-3: 480ms;
  --gz-dur-4: 900ms;

  --gz-halo: radial-gradient(ellipse 46% 52% at 34% 44%, rgba(205, 208, 214, .20) 0%, rgba(205, 208, 214, .08) 38%, rgba(205, 208, 214, 0) 72%), radial-gradient(ellipse 120% 90% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%);
  --gz-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --gz-cromo-liquido: linear-gradient(160deg, #DFE1E5 0%, #CDD0D6 55%, #BEC2C9 100%);
  --gz-cromo-texto: linear-gradient(180deg, #FFFFFF 0%, #EDEFF2 45%, #C3C7CE 100%);
  --gz-cromo-borda: linear-gradient(135deg, rgba(255, 255, 255, .32) 0%, rgba(205, 208, 214, .1) 45%, rgba(255, 255, 255, .22) 100%);
  --gz-cromo-botao: linear-gradient(180deg, #FFFFFF 0%, #E9EBEE 100%);
  --gz-orvalho-perola: linear-gradient(160deg, #FAFAFB 0%, #F4F5F7 55%, #E8EAED 100%);
  --gz-cromo-holografico: linear-gradient(115deg, rgba(255, 190, 225, .22) 0%, rgba(200, 190, 255, .18) 22%, rgba(180, 225, 255, .2) 42%, rgba(210, 255, 240, .16) 60%, rgba(255, 220, 240, .22) 80%, rgba(210, 195, 255, .18) 100%), linear-gradient(176deg, #FFFFFF 0%, #C9CCD3 18%, #7B7F88 34%, #F4F5F7 48%, #5A5D65 62%, #D8DBE0 78%, #FFFFFF 100%);
  --gz-iris-sangue-material: linear-gradient(160deg, #9E1E28 0%, #8E0F18 55%, #7C0C15 100%);
  --gz-iris-sangue-luz: rgba(200, 25, 40, .08);
  --gz-iris-violeta-material: linear-gradient(160deg, #7C4DE8 0%, #6E3BE0 55%, #6132CC 100%);
  --gz-iris-violeta-luz: rgba(130, 80, 230, .08);
  --gz-iris-abobora-material: linear-gradient(160deg, #DB6F2C 0%, #D2611C 55%, #BE561A 100%);
  --gz-iris-abobora-luz: rgba(220, 110, 40, .08);
  --gz-iris-petala-material: linear-gradient(160deg, #F5C5E0 0%, #F1B6D8 55%, #E6A8CB 100%);
  --gz-iris-petala-luz: rgba(241, 182, 216, .08);
  --gz-iris-material: var(--gz-iris-sangue-material);
  --gz-iris-luz: var(--gz-iris-sangue-luz);
}

[data-tema="claro"] {
  --gz-fundo: var(--gz-papel);
  --gz-superficie: #FFFFFF;
  --gz-superficie-2: #E3E2DE;
  --gz-linha: #CFCDC8;
  --gz-borda-campo: #8A8A8F;
  --gz-texto: var(--gz-noite);
  --gz-texto-2: var(--gz-grafite);
  --gz-acao: var(--gz-noite);
  --gz-acao-texto: var(--gz-orvalho);
}

[data-colecao="sangue"] { --gz-iris: var(--gz-iris-sangue); --gz-iris-texto: var(--gz-orvalho); --gz-iris-material: var(--gz-iris-sangue-material); --gz-iris-luz: var(--gz-iris-sangue-luz); }
[data-colecao="violeta"] { --gz-iris: var(--gz-iris-violeta); --gz-iris-texto: var(--gz-orvalho); --gz-iris-material: var(--gz-iris-violeta-material); --gz-iris-luz: var(--gz-iris-violeta-luz); }
[data-colecao="abobora"] { --gz-iris: var(--gz-iris-abobora); --gz-iris-texto: var(--gz-noite); --gz-iris-material: var(--gz-iris-abobora-material); --gz-iris-luz: var(--gz-iris-abobora-luz); }
[data-colecao="petala"] { --gz-iris: var(--gz-iris-petala); --gz-iris-texto: var(--gz-noite); --gz-iris-material: var(--gz-iris-petala-material); --gz-iris-luz: var(--gz-iris-petala-luz); }

.gz-display { font-family: var(--gz-fonte-titulo); font-size: var(--gz-t-display); font-weight: 500; line-height: 0.92; letter-spacing: -0.02em; font-optical-sizing: auto; }
.gz-h1 { font-family: var(--gz-fonte-titulo); font-size: var(--gz-t-h1); font-weight: 500; line-height: 1.0; letter-spacing: -0.015em; font-optical-sizing: auto; }
.gz-h2 { font-family: var(--gz-fonte-titulo); font-size: var(--gz-t-h2); font-weight: 500; line-height: 1.1; font-style: italic; font-optical-sizing: auto; }
.gz-h3 { font-family: var(--gz-fonte-titulo); font-size: var(--gz-t-h3); font-weight: 600; line-height: 1.15; font-optical-sizing: auto; }
.gz-corpo-g { font-family: var(--gz-fonte-texto); font-size: var(--gz-t-corpo-g); font-weight: 400; line-height: 1.6; }
.gz-corpo { font-family: var(--gz-fonte-texto); font-size: var(--gz-t-corpo); font-weight: 400; line-height: 1.6; }
.gz-pequeno { font-family: var(--gz-fonte-texto); font-size: var(--gz-t-pequeno); font-weight: 400; line-height: 1.5; }
.gz-rotulo { font-family: var(--gz-fonte-mono); font-size: var(--gz-t-rotulo); font-weight: 500; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.gz-preco { font-family: var(--gz-fonte-mono); font-size: var(--gz-t-preco); font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.gz-display em, .gz-h1 em { font-weight: 400; }

.gz-ceu { position: relative; isolation: isolate; background: var(--gz-halo), var(--gz-fundo); }
.gz-ceu::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("marca/cosmos.jpg") center / cover no-repeat; }
.gz-ceu[data-ceu="prancha"]::before { background-image: url("marca/cosmos_prancha.jpg"); }
.gz-ceu::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("marca/purpurina.png") 0 0 / 420px auto repeat; opacity: 0.55; -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%); }
.gz-ceu[data-atmo="correntes"]::after { background: url("marca/corrente_borrada.png") center 40% / max(1440px, 100%) auto no-repeat; opacity: 0.38; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 40% 45%, transparent 35%, #000 80%); mask-image: radial-gradient(ellipse 60% 60% at 40% 45%, transparent 35%, #000 80%); }
.gz-texto-cromo { background: var(--gz-cromo-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gz-borda-cromo { border: 1.5px solid transparent; background: linear-gradient(var(--gz-superficie), var(--gz-superficie)) padding-box, var(--gz-cromo-borda) border-box; }
.gz-botao-cromo { display: inline-block; padding: 14px 22px; border-radius: var(--gz-raio-2); background: var(--gz-cromo-botao); color: var(--gz-noite); font-family: var(--gz-fonte-texto); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.gz-purpurina { background: url("marca/purpurina.png") 0 0 / 420px auto repeat; }
.gz-iris-material { background: var(--gz-iris-material); box-shadow: 0 0 60px var(--gz-iris-luz); }
.gz-iris-luz { box-shadow: 0 0 70px var(--gz-iris-luz); }
.gz-holografico { background: var(--gz-cromo-holografico); background-blend-mode: overlay, normal; }
.gz-fundo-grao { position: relative; isolation: isolate; background: #0A0A0B; }
.gz-fundo-grao::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("marca/granulado.png") center / cover; opacity: .16; mix-blend-mode: overlay; }
.gz-fundo-cromo { position: relative; isolation: isolate; background: linear-gradient(rgba(10, 10, 11, var(--gz-cromo-veu, .6)), rgba(10, 10, 11, var(--gz-cromo-veu, .6))), url("marca/cromo_fundo.jpg") center / cover, #0A0A0B; }
.gz-fundo-cromo[data-intensidade="forte"] { --gz-cromo-veu: .4; } .gz-fundo-cromo[data-intensidade="suave"] { --gz-cromo-veu: .8; }
.gz-fundo-cromo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("marca/granulado.png") center / cover; opacity: .14; mix-blend-mode: overlay; }
.gz-gigante { font-family: var(--gz-fonte-titulo); font-weight: 500; line-height: .8; letter-spacing: -.04em; white-space: nowrap; background: var(--gz-cromo-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gz-vidro { background: rgba(10, 10, 11, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gz-moldura { position: relative; }
.gz-moldura::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--gz-cromo-borda); pointer-events: none; z-index: 3; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

@media (prefers-reduced-motion: reduce) {
  :root { --gz-dur-1: 0ms; --gz-dur-2: 0ms; --gz-dur-3: 0ms; --gz-dur-4: 0ms; }
}