@font-face { font-family: "DM Sans"; src: url("fontes/dm-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fontes/dm-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fontes/dm-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fontes/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* Paleta da marca (Maré + Grafite) */
:root {
  --b0: #0a0a0a;
  --b1: #111111;
  --b2: #161616;
  --b3: #222222;
  --bd: #262626;
  --tx: #ededed;
  --t2: #8a8a8a;
  --ac: #c6ff3d;
  --at: #121a00;
  --ac-suave: #26300f;
  --oliva: #1c240a;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--b0);
  color: var(--tx);
  font: 400 16px/1.6 "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.15; }
p { margin: 0; }
.mono { font-family: var(--mono); }
.oculto { position: absolute; width: 0; height: 0; overflow: hidden; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--ac); color: var(--at); padding: 8px 14px; border-radius: 999px; z-index: 50; }
.pular:focus { left: 16px; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 8px; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 24px; border-radius: 999px; border: 0;
  background: var(--ac); color: var(--at); font: 500 15px "DM Sans", sans-serif; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); background: #d3ff66; }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; }
.btn-grande { height: 54px; padding: 0 28px; font-size: 16px; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }
.btn-ghost { background: transparent; color: var(--ac); border: 1px solid #3a4a14; }
.btn-ghost:hover { background: var(--ac-suave); }
.btn.embreve { background: var(--ac-suave); color: var(--ac); border: 1px solid #3a4a14; }
.btn.embreve:hover { background: #2f3b12; }

/* Barra do topo */
.topo { position: sticky; top: 0; z-index: 20; transition: background .2s ease, border-color .2s ease; border-bottom: 1px solid transparent; }
.topo.rolou { background: rgba(10, 10, 10, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--bd); }
.topo-in { max-width: 1120px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; }
.marca { display: inline-flex; align-items: center; gap: 9px; }
.marca-icone { width: 28px; height: 28px; color: var(--ac); }
.marca-nome { font-weight: 700; font-size: 19px; letter-spacing: -.2px; }
.marca-nome span { color: var(--ac); }
.links { display: flex; gap: 26px; margin-left: auto; font-size: 14px; color: var(--t2); }
.links a { transition: color .15s ease; }
.links a:hover { color: var(--tx); }

/* Topo (balão gigante) */
.heroi {
  max-width: 1120px; margin: 0 auto; padding: 56px 24px 88px;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center;
  position: relative;
}
.heroi::before {
  content: ""; position: absolute; inset: -120px -200px auto auto; width: 620px; height: 620px; z-index: -1;
  background: radial-gradient(circle, rgba(198, 255, 61, .11) 0%, rgba(198, 255, 61, 0) 65%);
  pointer-events: none;
}
.rotulo { font: 400 12px var(--mono); color: var(--ac); letter-spacing: .4px; margin-bottom: 16px; }
.heroi h1 { font-size: clamp(34px, 4.2vw, 54px); letter-spacing: -1.1px; }
.destaque { color: var(--ac); }
.heroi-sub { color: var(--t2); font-size: 18px; max-width: 470px; margin: 20px 0 30px; }
.heroi-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.versao { font-size: 12px; color: var(--t2); }
.aviso-baixar { margin-top: 14px; font-size: 14px; color: var(--ac); }

.heroi-mascote { position: relative; display: grid; place-items: center; min-height: 360px; }
.mascote-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 40px; }
.mascote-grande { width: min(360px, 78vw); height: auto; display: block; animation: flutuar 5s ease-in-out infinite; overflow: visible; }
.mascote-btn:hover .mascote-grande { animation-play-state: paused; }
#rosto { transition: transform .18s ease-out; }
#olho-barra { transform-box: fill-box; transform-origin: center; }
#olho-barra.piscando { animation: piscar .22s ease-in-out; }
.mascote-grande.falando #olho-barra { animation: barra .32s ease-in-out infinite alternate; }
.mascote-grande.falando #boca { animation: boca .26s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center top; }
@keyframes flutuar { 50% { transform: translateY(-12px) rotate(-1.5deg); } }
@keyframes piscar { 50% { transform: scaleY(.12); } }
@keyframes barra { from { transform: scaleY(.45); } to { transform: scaleY(1.15); } }
@keyframes boca { from { transform: scaleY(.7); } to { transform: scaleY(1.25); } }

/* Balão de fala do Mascote (modelo A): grafite, com a ponta saindo do Mascote */
.fala {
  position: absolute; top: 0; left: 0; z-index: 2; max-width: 230px;
  background: var(--b2); border: 1px solid #2c3810; border-radius: 14px;
  padding: 11px 15px; font: 400 13.5px/1.45 var(--mono); color: var(--tx);
  opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 85% 100%;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.fala.on { opacity: 1; transform: none; }
.fala-ponta { position: absolute; top: calc(100% - 1px); right: 4px; width: 40px; height: 34px; }

/* O Mascote não ganha a borda de foco ao ser clicado com o mouse; no teclado, ganha um brilho verde */
.mascote-btn:focus-visible { outline: none; }
.mascote-btn:focus-visible .mascote-grande { filter: drop-shadow(0 0 10px rgba(198, 255, 61, .55)); }

/* Seções */
.secao { max-width: 1120px; margin: 0 auto; padding: 72px 24px; }
.secao h2 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.6px; margin-bottom: 36px; max-width: 640px; }

/* Cards de recursos */
.grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card {
  background: var(--b1); border: 1px solid var(--bd); border-radius: 16px; padding: 24px;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: #3a4a14; transform: translateY(-3px); }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { color: var(--t2); font-size: 15px; }
.card-largo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.card-largo h3 { font-size: 24px; }
.icone-card { width: 44px; height: 44px; border-radius: 12px; background: var(--ac-suave); display: grid; place-items: center; margin-bottom: 18px; }
.icone-card svg { width: 22px; height: 22px; fill: none; stroke: var(--ac); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Sala de voz de exemplo */
.sala { background: var(--b0); border: 1px solid var(--bd); border-radius: 14px; padding: 16px 18px 18px; }
.sala-topo { font-size: 12px; color: var(--ac); display: flex; align-items: center; gap: 8px; background: linear-gradient(90deg, var(--oliva) 0%, #131708 50%, transparent 100%); border-radius: 10px; padding: 6px 10px; }
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); }
.sala-pessoas { display: flex; justify-content: space-around; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.pessoa { margin: 0; text-align: center; font-size: 13px; color: var(--t2); }
.anel { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; margin-bottom: 6px; }
.anel svg { width: 54px; height: 54px; }
.anel.falando { animation: falar 1.3s ease-in-out infinite; }
.anel.atraso { animation-delay: .65s; }
@keyframes falar { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 40%, 60% { box-shadow: 0 0 0 3px var(--ac); } }

.cor-lima { color: #c6ff3d; } .cor-ciano { color: #3dd6ff; } .cor-rosa { color: #ff6bc1; }
.cor-laranja { color: #ff9f3d; } .cor-roxo { color: #a98bff; } .cor-amarelo { color: #ffe03d; }

/* Frynde que troca de cor */
.frynde-demo { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.frynde-grande { width: 72px; height: 72px; transition: color .25s ease, transform .25s ease; }
.frynde-grande.pulo { transform: scale(1.12) rotate(-6deg); }
.cores { display: grid; grid-template-columns: repeat(3, 20px); gap: 8px; }
.cores button { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--b3); cursor: pointer; padding: 0; transition: transform .15s ease; }
.cores button:hover { transform: scale(1.15); }
.cores button[aria-pressed="true"] { border-color: var(--tx); }

/* Linha do tempo */
.linha { list-style: none; margin: 0; padding: 0; max-width: 720px; position: relative; }
.linha::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--bd); }
.linha li { position: relative; display: flex; gap: 20px; padding: 0 0 26px; }
.marco { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--b3); background: var(--b0); position: relative; z-index: 1; margin-top: 2px; }
.feito .marco { background: var(--ac); border-color: var(--ac); }
.linha strong { font-weight: 500; font-size: 17px; }
.linha p { color: var(--t2); font-size: 15px; margin-top: 4px; }
.chip { display: inline-block; margin-left: 10px; font: 400 11px var(--mono); padding: 2px 9px; border-radius: 999px; background: var(--ac-suave); color: var(--ac); vertical-align: 2px; }
.chip-vem { background: var(--b3); color: var(--t2); }

/* Passos */
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: passo; }
.passo { background: var(--b1); border: 1px solid var(--bd); border-radius: 16px; padding: 24px; }
.passo .num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ac); color: var(--at); font-size: 14px; margin-bottom: 16px; }
.passo h3 { font-size: 18px; margin-bottom: 8px; }
.passo p { color: var(--t2); font-size: 15px; }
.passo strong { color: var(--tx); font-weight: 500; }

/* Perguntas */
.perguntas { max-width: 760px; display: grid; gap: 10px; }
details { background: var(--b1); border: 1px solid var(--bd); border-radius: 14px; padding: 0 20px; transition: border-color .2s ease; }
details[open] { border-color: #3a4a14; }
summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 20px var(--mono); color: var(--ac); transition: transform .2s ease; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--t2); padding: 0 0 18px; font-size: 15px; }

/* Rodapé */
.rodape { border-top: 1px solid var(--bd); margin-top: 40px; }
.rodape-in { max-width: 1120px; margin: 0 auto; padding: 28px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rodape-txt { font-size: 12px; color: var(--t2); }

/* Entrada suave ao rolar */
.js .revelar { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.js .revelar.visto { opacity: 1; transform: none; }

/* Telas menores */
@media (max-width: 900px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-largo { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .passos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .links { display: none; }
  .topo-in { justify-content: space-between; padding: 12px 16px; }
  .heroi { grid-template-columns: minmax(0, 1fr); padding: 28px 16px 56px; gap: 8px; text-align: center; }
  .heroi-sub { margin-left: auto; margin-right: auto; }
  .heroi-acoes { justify-content: center; }
  .heroi-mascote { order: -1; min-height: 0; padding-top: 34px; }
  .mascote-grande { width: min(220px, 60vw); }
  .fala { top: 0; left: 50%; transform: translate(-50%, 8px) scale(.96); white-space: nowrap; max-width: none; font-size: 12.5px; }
  .fala.on { transform: translate(-50%, 0); }
  .fala-ponta { right: auto; left: 50%; width: 30px; height: 26px; }
  .secao { padding: 52px 16px; }
  .grade { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 20px; }
  .sala { padding: 14px 12px 16px; }
  .sala-pessoas { flex-wrap: nowrap; gap: 4px; }
  .anel { width: 54px; height: 54px; border-radius: 17px; }
  .anel svg { width: 44px; height: 44px; }
  .rodape-in { padding: 24px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar { opacity: 1; transform: none; }
}