/* Fontes locais (sem CDN, para caber na CSP do front). Cada arquivo é a fonte VARIÁVEL do
   subconjunto latino da Google Fonts — cobre todo o texto em pt-BR (inclui ã, ç, é etc, todos em
   U+00E0-00FF). Licença OFL 1.1 dos dois em `assets/fontes/OFL-*.txt`. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fontes/schibsted-grotesk-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fontes/hanken-grotesk-latin.woff2') format('woff2');
}

:root {
  --chao: #0A090F;
  --superficie: #14131C;
  --linha: rgba(239, 239, 229, .09);
  --texto: #EFEFE5;
  --apagado: #93948F;
  --acento: #8FD4AC;
  --acento-forte: #3FAE74;
  --bolha: #1C1B24;
  --eu: #1F4D36;
  --display: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --corpo: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--chao); color: var(--texto); font: 400 16px/1.5 var(--corpo); overflow: hidden; -webkit-font-smoothing: antialiased; }
h1, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }

/* Fundo: grade fina + brilho, sem canvas. */
.fundo { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.fundo::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%);
}
.orbe {
  position: absolute; width: 70vmax; height: 70vmax; right: -20vmax; top: -10vmax; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(143, 212, 172, .30), transparent 45%),
    radial-gradient(circle at 60% 60%, rgba(63, 174, 116, .20), transparent 55%),
    radial-gradient(circle, rgba(120, 110, 220, .10), transparent 65%);
  filter: blur(40px);
}

.tela {
  position: relative; height: 100%; max-width: 1440px; margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 48px);
  display: grid; grid-template-rows: auto 1fr auto;
}
header, footer { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--apagado); }
.marca { display: flex; align-items: center; gap: 10px; color: var(--texto); font: 800 1.5rem/1 var(--display); letter-spacing: -.04em; text-decoration: none; }
.marca i { width: 10px; height: 10px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 14px var(--acento); }

main {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 6vw, 96px); min-height: 0;
}
h1 { font: 700 clamp(2.4rem, 3.6vw + .4rem, 4.4rem)/1.02 var(--display); letter-spacing: -.045em; max-width: 14ch; }
h1 span { display: block; }
h1 .l2 {
  background: linear-gradient(100deg, var(--acento) 10%, var(--texto) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { margin-top: 20px; color: var(--apagado); max-width: 34ch; font-size: clamp(1rem, .4vw + .95rem, 1.2rem); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px;
  font: 600 1rem/1 var(--corpo); text-decoration: none; padding: 1rem 1.6rem;
  background: var(--texto); color: var(--chao);
  box-shadow: 0 8px 30px rgba(143, 212, 172, .18); transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 40px rgba(143, 212, 172, .32); }
.alt { color: var(--apagado); font-size: .95rem; text-underline-offset: 3px; }
.alt:hover { color: var(--texto); }

/* Palco: as mensagens do dia giram, convergem no N e voltam em ordem. */
.palco { position: relative; height: 100%; min-height: 0; width: min(460px, 100%); justify-self: end; }
.palco::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(143, 212, 172, .14), transparent 70%); filter: blur(20px);
}
.orbita { position: absolute; inset: 0; }
.bb { position: absolute; left: 50%; top: 50%; display: none; }
.bc {
  display: block; width: max-content; max-width: 200px; padding: 8px 12px; border-radius: 16px;
  background: var(--bolha); border: 1px solid var(--linha); font-size: .88rem; line-height: 1.35;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .8);
}
.bc.me { background: var(--eu); border-color: transparent; }
.c2 .bc { font-size: .78rem; opacity: .8; }
.c3 .bc { font-size: .7rem; opacity: .5; }
.bc.pinned { position: relative; outline: 2px solid var(--acento); outline-offset: 2px; }
.bc.pinned::after { content: "📌"; position: absolute; top: -16px; right: -10px; font-size: 20px; }
.chip { display: inline-grid; place-items: center; min-width: 30px; height: 18px; padding: 0 5px; margin-right: 6px; border-radius: 5px; background: var(--acento); color: var(--chao); font: 700 .6rem/1 var(--corpo); vertical-align: middle; }
.onda { display: inline-block; width: 60px; height: 12px; margin: 0 6px; vertical-align: middle; background: repeating-linear-gradient(90deg, var(--apagado) 0 2px, transparent 2px 5px); opacity: .7; }
.nucleo {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  display: none; place-items: center; background: radial-gradient(circle at 35% 35%, var(--acento), var(--acento-forte));
  color: var(--chao); font: 800 2.2rem/1 var(--display); letter-spacing: -.04em;
  box-shadow: 0 0 50px rgba(143, 212, 172, .45);
}
.nucleo::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1.5px solid rgba(143, 212, 172, .4); }

/* O dia em ordem. Sem movimento, é só isto que a página mostra. */
.cartao {
  position: absolute; left: 50%; top: 50%; width: min(400px, 100%); transform: translate(-50%, -50%);
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 18px; padding: 16px 18px 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(143, 212, 172, .08);
  font-size: 1rem; line-height: 1.45; z-index: 2;
}
.quem { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.quem i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--chao); font: 800 .9rem/1 var(--display); font-style: normal; }
.cartao p { margin-top: 10px; }
.dia { margin: 8px 0 0; padding: 0; list-style: none; }
.dia li { display: grid; grid-template-columns: 52px 1fr; padding: 5px 0; }
.dia li + li { border-top: 1px dashed var(--linha); }
.dia b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dia .quente { color: var(--acento); font-weight: 600; }
.tom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: .78rem; color: var(--apagado); }
.chave { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: var(--chao); border: 1px solid var(--linha); }
.chave::before { content: ""; position: absolute; inset: 3px auto 3px 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--texto); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.chave[data-modo="gingado"]::before { transform: translateX(100%); }
.chave button { position: relative; z-index: 1; border: 0; background: none; font: 600 .78rem/1 var(--corpo); color: var(--apagado); padding: .5rem .8rem; border-radius: 999px; cursor: pointer; transition: color .3s; }
.chave button[aria-pressed="true"] { color: var(--chao); }
[data-fala] { transition: opacity .22s; }
[data-fala].troca { opacity: 0; }

/* Modo com movimento (GSAP carregado e movimento permitido). */
.fx .bb { display: block; }
.fx .nucleo { display: grid; }

@media (max-width: 900px) {
  body { overflow-x: clip; overflow-y: auto; }
  .tela { height: auto; min-height: 100%; padding: 16px; }
  main { grid-template-columns: 1fr; gap: 4px; padding-block: 20px 0; }
  h1 { font-size: clamp(2rem, 9vw, 2.8rem); max-width: none; }
  .lede { margin-top: 12px; font-size: 1rem; }
  .cta { margin-top: 18px; }
  .btn { padding: .9rem 1.4rem; }
  .palco { height: 390px; width: 100%; justify-self: center; }
  .cartao { width: min(340px, 100%); padding: 14px 14px 12px; font-size: .88rem; }
  .dia li { grid-template-columns: 46px 1fr; padding: 4px 0; }
  .bc { max-width: 150px; font-size: .8rem; }
  .fx .c3 .bb { display: none; }
  footer { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }