/* Graça Notes, landing v5. Base: fonte local, tokens, tipografia, botões, topo, barra fixa, revelações.
   Identidade: preto, branco e UM acento (Brasa). Imagem só em gradiente. Animações só com transform e opacity. */
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --ink: #0a0a0b; --ink2: #141416; --ink3: #232327; --g1: #5c5c63; --g2: #8e8e95; --g3: #cfcfd3;
  --paper: #f6f4f1; --white: #fff;
  --ember: #f25c2a; --ember-l: #ff9f72; --ember-d: #d9461a; --ember-ink: #b8380f; --ember-t: #fff0e8;
  --peach1: #ffece0; --peach2: #fdc4a2; --line: #e7e3dd;
  --f: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.16, 1, .3, 1);

  /* Degradês em CSS puro (resolução infinita, sem foto e sem granulado). Mesma família do app: brasa, fluxo, pêssego, rosa, céu. */
  --g-brasa: radial-gradient(70% 55% at 6% 0%, rgba(242,92,42,.62), rgba(242,92,42,0) 70%), radial-gradient(60% 50% at 100% 100%, rgba(150,38,14,.5), rgba(150,38,14,0) 72%), linear-gradient(180deg, #1b0a06, #0a0a0b);
  --g-brasa-suave: radial-gradient(70% 45% at 10% 0%, rgba(242,92,42,.34), rgba(242,92,42,0) 72%), radial-gradient(60% 40% at 100% 100%, rgba(150,38,14,.3), rgba(150,38,14,0) 72%), linear-gradient(180deg, #120807, #0a0a0b);
  --g-fluxo: radial-gradient(90% 70% at 18% 0%, rgba(255,176,138,.9), rgba(255,176,138,0) 62%), radial-gradient(90% 80% at 100% 100%, rgba(198,60,16,.85), rgba(198,60,16,0) 70%), linear-gradient(155deg, #ff7a4a, #f25c2a 55%, #d9461a);
  --g-pessego: radial-gradient(80% 60% at 85% 8%, rgba(255,240,230,.95), rgba(255,240,230,0) 70%), radial-gradient(80% 70% at 8% 95%, rgba(253,196,162,.9), rgba(253,196,162,0) 72%), linear-gradient(180deg, #ffece0, #ffd9c6);
  --g-rosa: radial-gradient(80% 60% at 15% 5%, rgba(255,205,190,.9), rgba(255,205,190,0) 70%), radial-gradient(80% 70% at 100% 100%, rgba(242,92,42,.55), rgba(242,92,42,0) 72%), linear-gradient(160deg, #ffc9b3, #ff9f72);
  --g-ceu: radial-gradient(60% 45% at 50% 100%, rgba(255,230,205,.75), rgba(255,230,205,0) 75%), radial-gradient(120% 70% at 50% 100%, rgba(242,92,42,.85), rgba(242,92,42,0) 72%), linear-gradient(180deg, #ffc58f, #f6955a 55%, #f2733a);
  --gut: 20px;
  --w: 1160px;
}
@media (min-width: 768px) { :root { --gut: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--ink); color: var(--ink); font-family: var(--f); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ember-l); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--w) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 500; text-decoration: none; transition: transform .3s var(--out); }
.skip:focus { transform: translateY(72px); }

/* marca */
.mark { flex: none; }
.lock { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.word { font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-size: 24px; }
.word i { font-style: normal; font-weight: 300; letter-spacing: -0.04em; }

/* tipografia */
h1, h2, h3, p { margin: 0; }
.h1, h1 { font-weight: 300; letter-spacing: -0.055em; line-height: .98; font-size: clamp(42px, 8.6vw, 92px); text-wrap: balance; }
.h1 b, h1 b, h2 b { font-weight: 600; }
h2 { font-weight: 300; letter-spacing: -0.05em; line-height: 1.02; font-size: clamp(34px, 5.6vw, 60px); text-wrap: balance; }
h3 { font-weight: 500; letter-spacing: -0.035em; line-height: 1.12; font-size: clamp(21px, 2.6vw, 26px); }
.lede { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; letter-spacing: -0.015em; text-wrap: pretty; }
.kick { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ember-ink); display: inline-flex; align-items: center; gap: 9px; }
.kick::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); flex: none; }
.dark .kick, .on-dark .kick { color: var(--ember-l); }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }

/* botões: mola curta no hover e no clique */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 30px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font: 500 17px/1 var(--f); letter-spacing: -0.02em; background: var(--ember); color: var(--ink); box-shadow: 0 12px 28px rgba(242,92,42,.3);
  transition: transform .3s var(--out); will-change: transform; white-space: nowrap; }
.btn svg { transition: transform .3s var(--out); }
.btn:hover { transform: translate3d(0, -1px, 0) scale(1.02); }
.btn:hover svg { transform: translate3d(4px, 0, 0); }
.btn:active { transform: scale(.97); transition-duration: .08s; }
.btn--ink { background: var(--ink); color: #fff; box-shadow: 0 16px 34px rgba(10,10,11,.3); }
.btn--ghost { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 15px; box-shadow: 0 8px 20px rgba(242,92,42,.3), inset 0 1px 0 rgba(255,255,255,.4); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn[aria-disabled="true"]:hover { transform: none; }
.cta-bloco { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.cta-bloco .nota { font-size: 14px; color: var(--g3); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.cta-bloco .nota span { display: inline-flex; align-items: center; gap: 7px; }
.cta-bloco .nota span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ember); }
.light .cta-bloco .nota { color: var(--g1); }
@media (max-width: 560px) { .cta-bloco .btn { width: 100%; } }

/* topo: vidro escuro, sempre visível */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 64px; display: flex; align-items: center; background: rgba(10,10,11,.5); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topo nav { display: none; gap: 26px; font-size: 15px; }
.topo nav a { text-decoration: none; color: #d9d9dd; transition: color .2s; }
.topo nav a:hover { color: #fff; }
.topo .btn { display: none; }
@media (min-width: 900px) { .topo nav { display: flex; } .topo .btn { display: inline-flex; } }

/* barra fixa no celular: o botão nunca some */
.barra { position: fixed; z-index: 60; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgba(14,14,16,.78); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 18px 40px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.1); color: #fff; }
.barra p { font-size: 13px; line-height: 1.25; color: #d9d9dd; flex: 1; min-width: 0; }
.barra p b { display: block; color: #fff; font-weight: 500; font-size: 14px; }
.barra .btn { height: 48px; padding: 0 22px; font-size: 15px; flex: none; box-shadow: none; }
@media (min-width: 900px) { .barra { display: none; } }
@media (max-width: 899px) { body.tem-barra { padding-bottom: 86px; } }

/* revelação em scroll: sem JS tudo aparece */
.js .rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--out), transform 1s var(--out); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-l { transform: translate3d(-28px, 0, 0); }
.js .rv-r { transform: translate3d(28px, 0, 0); }
.js .rv-s { transform: scale(.94); }

/* seções empilhadas: cada folha cobre a anterior com cantos arredondados */
.folha { position: relative; border-radius: 40px 40px 0 0; margin-top: -40px; padding: clamp(72px, 11vw, 132px) 0; }
.dark { background: var(--ink); color: #fff; }
.light { background: var(--paper); color: var(--ink); }
.white { background: #fff; color: var(--ink); }
.cinza { color: var(--g1); }
.dark .cinza { color: var(--g3); }

/* rodapé */
.rodape { background: var(--ink); color: #d9d9dd; padding: 56px 0 120px; font-size: 14px; }
.rodape .wrap { display: flex; flex-direction: column; gap: 28px; }
.rodape .linhas { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.rodape a { text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 1px; }
.rodape small { display: block; color: var(--g2); line-height: 1.6; max-width: 70ch; font-size: 13px; }
@media (min-width: 900px) { .rodape { padding-bottom: 56px; } }

/* aviso só em desenvolvimento */
.so-dev { display: none; }
[data-dev] .so-dev { display: block; }
.dev-aviso { font: 12.5px/1.5 var(--mono); background: #fff7f1; color: #7a2e0e; border: 1px dashed var(--ember); border-radius: 14px; padding: 10px 14px; }

/* movimento reduzido: tudo no estado final, sem laços */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .rv { opacity: 1; transform: none; }
}

[hidden] { display: none !important; }

/* aviso de cookies: curto, não bloqueia nada e não cobre o botão fixo. No celular ocupa uma faixa baixa (texto + 2 botões na mesma linha de toque). */
.cookies { position: fixed; z-index: 70; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding: 10px 10px 10px 14px; border-radius: 22px; background: rgba(20,20,22,.96); color: #e8e8ea; font-size: 12.5px; line-height: 1.35; box-shadow: 0 14px 34px rgba(0,0,0,.35); max-width: 520px; }
.cookies--barra { bottom: calc(82px + env(safe-area-inset-bottom)); }
.cookies p { margin: 0; }
.cookies div { display: flex; gap: 6px; }
.cookies button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: 500 14px var(--f); cursor: pointer; }
.cookies button[data-c="sim"] { background: #fff; color: var(--ink); border-color: #fff; }
@media (min-width: 900px) { .cookies, .cookies--barra { left: 16px; right: auto; bottom: 16px; } }
.nw { white-space: nowrap; }