/* nanoh.app — v3. Tokens = os do app (app/lib/design/{cores,tokens,tema}.dart): paleta "Lua" (claro "Manhã" é o
   padrão, como no app; escuro "Noite suave" #1A2233 pelo seletor de tema ou pelo sistema), Figtree na UI, Bricolage
   Grotesque nos números grandes, raios 10/16/22/28, alvos ≥ 48 px. Sem estilo inline (CSP style-src 'self').
   O tema: <html data-tema="claro|escuro|sistema"> (assets/js/tema.js); sem JS = claro. */

@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("../fonts/Bricolage-num.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  color-scheme: light;
  --fundo: #F4F8FF; --fundo-2: #E8F0FD; --cartao: #FFFFFF; --cartao-2: #EEF4FF; --borda: #DCE6F6;
  --tinta: #22314D; --tinta-suave: #5A6A88; --tinta-fraca: #9AA8C2;
  --acao: #3A6CC4; --sobre-acao: #FFFFFF; --realce: #E3EDFC;
  --lua: #5B8FE0; --lua-t: #2F65C4; --gota: #D4A04F; --gota-t: #8F5E14; --folha: #3FAE8B; --folha-t: #1F7A5E;
  --lilas: #9A86E0; --lilas-t: #6A54B8; --rosa: #D08FAE; --rosa-t: #9A4F72; --pessego: #D08A5C; --pessego-t: #8F4F2A;
  --petroleo: #4F9AA6; --petroleo-t: #2C6F7A; --indigo: #7A83D6; --indigo-t: #4A53A8; --salvia: #86A874; --salvia-t: #4F6B3E;
  --m-rosa: #AD4166; --m-azul: #23708F; --m-oliva: #6F6224; --sobre-m: #FFFFFF;
  --n-fundo: #1A2233; --n-cartao: #232D42; --n-cartao-2: #2A3550; --n-borda: #33405C; --n-tinta: #E8EEFB; --n-suave: #A9B6CF;
  --n-lua: #9DBCF0; --n-gota: #E3C58F;
  --pro-1: #3A6CC4; --pro-2: #6A54B8;
  --r-s: 10px; --r-m: 16px; --r-l: 22px; --r-xl: 28px;
  --sombra-1: 0 1px 2px rgba(34, 49, 77, .06), 0 4px 14px rgba(34, 49, 77, .06);
  --sombra-2: 0 2px 6px rgba(34, 49, 77, .06), 0 24px 60px -18px rgba(34, 49, 77, .22);
  --sombra-fone: 0 50px 100px -30px rgba(26, 34, 51, .45), 0 30px 60px -40px rgba(58, 108, 196, .35);
  --largura: 1160px;
  --gutter: 16px;
  --fonte: "Figtree", "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --num: "Bricolage", "Figtree", system-ui, sans-serif;
}
/* escuro: escolhido no seletor, ou "do sistema" com o sistema escuro (mesmos valores nos dois blocos) */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #1A2233; --fundo-2: #1E2739; --cartao: #232D42; --cartao-2: #2A3550; --borda: #33405C;
  --tinta: #E8EEFB; --tinta-suave: #A9B6CF; --tinta-fraca: #6F7D99;
  --acao: #9DBCF0; --sobre-acao: #1A2233; --realce: #2E3D5C;
  --lua: #9DBCF0; --lua-t: #9DBCF0; --gota: #E3C58F; --gota-t: #E3C58F; --folha: #8FD0B5; --folha-t: #8FD0B5;
  --lilas: #BFB0EC; --lilas-t: #BFB0EC; --rosa: #E2B3C8; --rosa-t: #E2B3C8; --pessego: #E6B89A; --pessego-t: #E6B89A;
  --petroleo: #97CDD5; --petroleo-t: #97CDD5; --indigo: #B4B9EC; --indigo-t: #B4B9EC; --salvia: #B6CFA4; --salvia-t: #B6CFA4;
  --m-rosa: #F0A3B8; --m-azul: #8FCBE2; --m-oliva: #D9C879; --sobre-m: #1A2233;
  --n-fundo: #141B2A; --n-cartao: #1E2739;
  --pro-1: #9DBCF0; --pro-2: #BFB0EC;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .18);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, .25), 0 24px 60px -18px rgba(0, 0, 0, .55);
  --sombra-fone: 0 50px 100px -30px rgba(0, 0, 0, .7), 0 30px 60px -40px rgba(157, 188, 240, .25);
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"] {
    color-scheme: dark;
    --fundo: #1A2233; --fundo-2: #1E2739; --cartao: #232D42; --cartao-2: #2A3550; --borda: #33405C;
    --tinta: #E8EEFB; --tinta-suave: #A9B6CF; --tinta-fraca: #6F7D99;
    --acao: #9DBCF0; --sobre-acao: #1A2233; --realce: #2E3D5C;
    --lua: #9DBCF0; --lua-t: #9DBCF0; --gota: #E3C58F; --gota-t: #E3C58F; --folha: #8FD0B5; --folha-t: #8FD0B5;
    --lilas: #BFB0EC; --lilas-t: #BFB0EC; --rosa: #E2B3C8; --rosa-t: #E2B3C8; --pessego: #E6B89A; --pessego-t: #E6B89A;
    --petroleo: #97CDD5; --petroleo-t: #97CDD5; --indigo: #B4B9EC; --indigo-t: #B4B9EC; --salvia: #B6CFA4; --salvia-t: #B6CFA4;
    --m-rosa: #F0A3B8; --m-azul: #8FCBE2; --m-oliva: #D9C879; --sobre-m: #1A2233;
    --n-fundo: #141B2A; --n-cartao: #1E2739;
    --pro-1: #9DBCF0; --pro-2: #BFB0EC;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .18);
    --sombra-2: 0 2px 6px rgba(0, 0, 0, .25), 0 24px 60px -18px rgba(0, 0, 0, .55);
    --sombra-fone: 0 50px 100px -30px rgba(0, 0, 0, .7), 0 30px 60px -40px rgba(157, 188, 240, .25);
  }
}
/* imagens por tema (o print claro ou o escuro do app) */
.so-escuro { display: none !important; }
:root[data-tema="escuro"] .so-escuro { display: block !important; }
:root[data-tema="escuro"] .so-claro { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"] .so-escuro { display: block !important; }
  :root[data-tema="sistema"] .so-claro { display: none !important; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: var(--fonte); font-size: 17px; line-height: 1.55; color: var(--tinta); background: var(--fundo); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--acao); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--acao); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.08; margin: 0; letter-spacing: -0.025em; font-weight: 800; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--largura)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--acao); color: var(--sobre-acao); padding: 10px 16px; border-radius: var(--r-s); }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- topo ---------- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--fundo) 84%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--borda) 70%, transparent); }
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; color: var(--tinta); text-decoration: none; }
.marca img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px var(--borda); }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { color: var(--tinta-suave); text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 12px; border-radius: 99px; }
.nav a:hover { color: var(--tinta); background: var(--realce); }
.nav a.nav-pro { color: var(--lilas-t); }
.top .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.tema { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--tinta-suave); cursor: pointer; font-size: 22px; padding: 0; }
.tema:hover { background: var(--realce); color: var(--tinta); }
.tema[hidden] { display: none; }
.tema .i { display: none; }
:root:not([data-tema]) .tema .t-claro, :root[data-tema="claro"] .tema .t-claro, :root[data-tema="escuro"] .tema .t-escuro, :root[data-tema="sistema"] .tema .t-sistema { display: block; }
@media (max-width: 900px) { .nav { display: none; } .top .tema { margin-left: auto; } }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: var(--r-m); border: 0; font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn .i { font-size: 22px; }
.btn-acao { background: var(--acao); color: var(--sobre-acao); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -10px color-mix(in srgb, var(--acao) 80%, transparent); }
.btn-acao:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 16px 30px -12px color-mix(in srgb, var(--acao) 85%, transparent); }
.btn-claro { background: var(--cartao); color: var(--tinta); box-shadow: 0 0 0 1px var(--borda) inset; }
.btn-claro:hover { background: var(--cartao-2); }
.btn-pro { background: linear-gradient(120deg, var(--pro-1), var(--pro-2)); color: var(--sobre-acao); box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--pro-2) 80%, transparent); }
.btn-pro:hover { transform: translateY(-1px); }
.btn-primary { background: var(--acao); color: var(--sobre-acao); }

.lojas { display: flex; flex-wrap: wrap; gap: 10px; }
.loja { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 14px 5px 10px; border-radius: 14px; background: var(--cartao); box-shadow: 0 0 0 1px var(--borda) inset; color: var(--tinta); }
.loja .i { font-size: 24px; color: var(--tinta-suave); }
.loja small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); line-height: 1.2; }
.loja b { display: block; font-size: 15px; line-height: 1.2; }

/* ---------- etiquetas ---------- */
.olho { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--lua-t); background: var(--realce); padding: 7px 14px 7px 10px; border-radius: 99px; }
.olho .i { font-size: 18px; }
.rotulo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.rotulo .i { font-size: 18px; }
.pro { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: #fff; background: linear-gradient(120deg, #3A6CC4, #6A54B8); padding: 3px 9px; border-radius: 99px; vertical-align: middle; text-transform: uppercase; }
.gratis { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--folha-t); background: color-mix(in srgb, var(--folha) 15%, var(--cartao)); padding: 3px 9px; border-radius: 99px; vertical-align: middle; text-transform: uppercase; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 64px 0 0; isolation: isolate; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -68px 0 0; z-index: -1; background:
  radial-gradient(55% 55% at 80% 35%, color-mix(in srgb, var(--lua) 22%, transparent), transparent 70%),
  radial-gradient(36% 40% at 95% 85%, color-mix(in srgb, var(--gota) 18%, transparent), transparent 70%),
  radial-gradient(50% 50% at 5% 0%, color-mix(in srgb, var(--lilas) 12%, transparent), transparent 70%),
  linear-gradient(180deg, var(--fundo) 0%, var(--fundo-2) 100%); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.hero-txt { padding-bottom: 72px; }
.hero h1 { font-size: clamp(42px, 6vw, 76px); letter-spacing: -0.04em; margin: 22px 0; }
.hero h1 em { font-style: normal; color: var(--lua-t); }
.hero .sub { font-size: clamp(18px, 1.6vw, 21px); color: var(--tinta-suave); max-width: 32em; }
.hero .lojas { margin-top: 22px; }
.hero-palco { position: relative; display: flex; justify-content: center; height: 640px; }
.hero-palco .fone { width: 420px; flex: none; }
.hero-palco .fone { -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--palco) - 140px), transparent var(--palco)); mask-image: linear-gradient(to bottom, #000 calc(var(--palco) - 140px), transparent var(--palco)); }
.hero-palco { --palco: 640px; }
.flutua { position: absolute; z-index: 2; background: color-mix(in srgb, var(--cartao) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--borda); border-radius: var(--r-l); box-shadow: var(--sombra-2); padding: 12px 16px 12px 12px; display: flex; gap: 12px; align-items: center; font-size: 14.5px; line-height: 1.3; }
.flutua b { display: block; font-size: 15px; font-weight: 800; }
.flutua > span > span { color: var(--tinta-suave); }
.flutua-1 { left: -64px; top: 96px; animation: boia 7s ease-in-out infinite; }
.flutua-2 { right: -30px; top: 470px; animation: boia 8s ease-in-out -2s infinite; }
@keyframes boia { 50% { transform: translateY(-8px); } }
@media (max-width: 960px) {
  .hero { padding-top: 36px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 8px; }
  .hero-txt { padding-bottom: 24px; }
  .hero-palco { height: 520px; --palco: 520px; }
  .hero-palco .fone { width: 340px; }
  .flutua-1 { left: 0; top: 60px; }
}
@media (max-width: 520px) {
  .hero-palco { height: 440px; --palco: 440px; }
  .hero-palco .fone { width: 300px; }
  .flutua { font-size: 13px; padding: 9px 12px 9px 9px; gap: 9px; border-radius: var(--r-m); }
  .flutua b { font-size: 13.5px; }
  .flutua-1 { left: -6px; top: 40px; }
  .top .btn { display: none; }
}

/* ---------- formulário da lista de espera ---------- */
.lista-form { margin-top: 30px; max-width: 520px; }
.campo-linha { display: flex; gap: 10px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: 14px; font-weight: 700; color: var(--tinta); }
.campo small { font-weight: 500; color: var(--tinta-suave); }
input[type="email"], input[type="text"], select {
  width: 100%; min-height: 56px; padding: 0 16px; border-radius: var(--r-m); border: 1.5px solid var(--borda);
  background: var(--cartao); color: var(--tinta); font: inherit; font-size: 17px; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%), linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input::placeholder { color: var(--tinta-fraca); }
input:focus, select:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acao) 22%, transparent); }
.campo-linha input { flex: 1; min-width: 0; }
.campo-linha .btn { flex: none; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; color: var(--tinta-suave); line-height: 1.45; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--acao); flex: none; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.micro { margin-top: 12px; font-size: 14px; color: var(--tinta-suave); display: flex; gap: 8px; align-items: center; }
.micro .i { color: var(--folha-t); font-size: 18px; }
.aviso-erro { display: none; margin: 0 0 18px; padding: 14px 16px; border-radius: var(--r-m); background: color-mix(in srgb, var(--rosa) 16%, var(--cartao)); color: var(--tinta); font-weight: 600; font-size: 15px; border: 1px solid color-mix(in srgb, var(--rosa) 40%, var(--borda)); }
.aviso-erro.on { display: block; }
@media (max-width: 520px) { .campo-linha { flex-direction: column; } .campo-linha .btn { width: 100%; } }

/* ---------- iPhone (CSS puro; o print real vai dentro, na densidade real: 393 pt = 393 px CSS) ---------- */
.fone { position: relative; container-type: inline-size; aspect-ratio: 1179 / 2556; padding: 3.2%; border-radius: 15% / 7%; background: linear-gradient(145deg, #3a4357, #12182a 40%, #2a3247); box-shadow: var(--sombra-fone), 0 0 0 1px rgba(255,255,255,.08) inset; }
.tela { position: relative; height: 100%; border-radius: 12.4% / 5.8%; overflow: hidden; background: #F4F8FF; }
.tela.escura { background: #1A2233; }
.tela img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tela::before { content: ""; position: absolute; z-index: 2; top: 1.5%; left: 50%; width: 31%; height: 4%; transform: translateX(-50%); background: #05070c; border-radius: 99px; }
.barra-status { position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 6.9%; display: flex; align-items: center; justify-content: space-between; padding: 1.4% 8.5% 0 12%; font-weight: 700; color: #22314D; font-size: 4.6cqw; }
.barra-status svg { width: 19cqw; height: 3.4cqw; fill: currentColor; }
.tela.escura .barra-status, :root[data-tema="escuro"] .tela.adapta .barra-status { color: #E8EEFB; }
:root[data-tema="escuro"] .tela.adapta { background: #1A2233; }
@media (prefers-color-scheme: dark) { :root[data-tema="sistema"] .tela.adapta { background: #1A2233; } :root[data-tema="sistema"] .tela.adapta .barra-status { color: #E8EEFB; } }

/* recorte da tela real, em tamanho real (sem encolher): moldura de tela com o fundo do app */
.recorte { position: relative; width: min(100%, 393px); margin-inline: auto; border-radius: 30px; overflow: hidden; background: #F4F8FF; box-shadow: var(--sombra-2), 0 0 0 1px var(--borda); }
.recorte.escuro { background: #1A2233; box-shadow: var(--sombra-2), 0 0 0 1px #33405C; }
.recorte img { width: 100%; }
.recorte.desvanece img { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
.recorte + .recorte { margin-top: 18px; }
.legenda-print { margin-top: 12px; text-align: center; font-size: 13px; color: var(--tinta-suave); }

/* ---------- seções ---------- */
.secao { padding: 112px 0; }
.secao.compacta { padding: 72px 0; }
.cab { max-width: 760px; margin-bottom: 56px; }
.cab.centro { margin-inline: auto; text-align: center; }
.cab h2 { font-size: clamp(32px, 4.4vw, 54px); margin-top: 14px; }
.cab p { margin-top: 18px; font-size: clamp(17px, 1.5vw, 19.5px); color: var(--tinta-suave); }
@media (max-width: 700px) { .secao { padding: 72px 0; } .secao.compacta { padding: 52px 0; } .cab { margin-bottom: 36px; } }

.confianca { padding: 26px 0; border-block: 1px solid var(--borda); background: var(--cartao); }
.confianca ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.confianca li { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: 14.5px; color: var(--tinta-suave); }
.confianca .i { font-size: 20px; color: var(--lua-t); }

/* blocos de recurso: texto + recorte, alternando lados */
.recurso { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.recurso + .recurso { margin-top: 112px; }
.recurso.inverte .rec-txt { order: 2; }
.rec-txt h3 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; margin-top: 14px; }
.rec-txt > p { margin-top: 16px; font-size: 18px; color: var(--tinta-suave); }
.rec-txt .lista-check { margin-top: 24px; }
.rec-vis { position: relative; }
.rec-vis::before { content: ""; position: absolute; inset: 8% 4%; z-index: -1; border-radius: 40px; background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--lua) 18%, transparent), transparent 70%); }
.rec-vis.gota::before { background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--gota) 20%, transparent), transparent 70%); }
.rec-vis.rosa::before { background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--rosa) 20%, transparent), transparent 70%); }
.rec-vis.lilas::before { background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--lilas) 22%, transparent), transparent 70%); }
.rec-vis.folha::before { background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--folha) 20%, transparent), transparent 70%); }
@media (max-width: 900px) { .recurso { grid-template-columns: 1fr; gap: 36px; } .recurso.inverte .rec-txt { order: 0; } .recurso + .recurso { margin-top: 80px; } }

/* "por que importa": o dado com a fonte */
.dado { margin-top: 24px; display: flex; gap: 14px; align-items: flex-start; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--r-l); padding: 16px 18px; }
.dado .num { font-family: var(--num); font-size: 34px; line-height: 1; letter-spacing: -0.03em; color: var(--lua-t); flex: none; min-width: 72px; }
.dado p { font-size: 15px; color: var(--tinta); line-height: 1.45; }
.dado cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--tinta-suave); }
.dado cite a { color: var(--tinta-suave); }

.lista-check { display: grid; gap: 14px; }
.lista-check li { display: flex; gap: 14px; align-items: flex-start; }
.lista-check .tipo { width: 38px; height: 38px; font-size: 20px; }
.lista-check li > span > b { display: block; font-size: 17px; }
.lista-check li > span > span { display: block; color: var(--tinta-suave); font-size: 15.5px; }

/* chip de tipo (o "botão redondo" da Hoje) e avatar */
.tipo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; flex: none; background: var(--realce); color: var(--lua-t); }
.tipo.lua { background: color-mix(in srgb, var(--lua) 16%, var(--cartao)); color: var(--lua-t); }
.tipo.gota { background: color-mix(in srgb, var(--gota) 18%, var(--cartao)); color: var(--gota-t); }
.tipo.folha { background: color-mix(in srgb, var(--folha) 16%, var(--cartao)); color: var(--folha-t); }
.tipo.lilas { background: color-mix(in srgb, var(--lilas) 18%, var(--cartao)); color: var(--lilas-t); }
.tipo.rosa { background: color-mix(in srgb, var(--rosa) 18%, var(--cartao)); color: var(--rosa-t); }
.tipo.pessego { background: color-mix(in srgb, var(--pessego) 18%, var(--cartao)); color: var(--pessego-t); }
.tipo.petroleo { background: color-mix(in srgb, var(--petroleo) 18%, var(--cartao)); color: var(--petroleo-t); }
.tipo.indigo { background: color-mix(in srgb, var(--indigo) 18%, var(--cartao)); color: var(--indigo-t); }
.tipo.salvia { background: color-mix(in srgb, var(--salvia) 20%, var(--cartao)); color: var(--salvia-t); }
.av { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--sobre-m); flex: none; }
.av.rosa { background: var(--m-rosa); } .av.azul { background: var(--m-azul); } .av.oliva { background: var(--m-oliva); }

/* grupos: o cabeçalho de cada área (No dia a dia, Para a família, Saúde, Memórias) */
.grupo-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 64px; }
.grupo-cab .tipo { width: 52px; height: 52px; font-size: 26px; }
.grupo-cab h2 { font-size: clamp(30px, 3.8vw, 46px); }
.grupo-cab p { color: var(--tinta-suave); font-size: 17px; margin-top: 4px; }
.faixa-grupo { border-top: 1px solid var(--borda); }

/* mini-grade (recursos menores de um grupo) */
.mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 72px; }
.mini li { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--r-xl); padding: 24px; }
.mini .tipo { margin-bottom: 14px; }
.mini b { display: block; font-size: 18px; letter-spacing: -0.01em; }
.mini li > span:not(.tipo) { display: block; margin-top: 6px; color: var(--tinta-suave); font-size: 15.5px; }
@media (max-width: 900px) { .mini { grid-template-columns: 1fr; } }

/* live activity (réplica do widget, CoresNanoh) */
.atividade { width: min(100%, 393px); margin-inline: auto; background: #F4F8FF; border-radius: 26px; padding: 16px; box-shadow: var(--sombra-2), 0 0 0 1px var(--borda); color: #22314D; }
.atividade .cab-at { display: flex; align-items: center; gap: 12px; }
.atividade .tipo { width: 40px; height: 40px; margin: 0; background: #F3E8D3; color: #8F5E14; }
.atividade .estado, .atividade .cron { display: block; }
.atividade .estado { font-size: 13.5px; color: #5A6A88; font-weight: 600; }
.atividade .cron { font-family: var(--num); font-size: 34px; line-height: 1; letter-spacing: -0.02em; }
.atividade .meta { margin-left: auto; text-align: right; font-size: 13px; color: #5A6A88; }
.atividade .meta b { display: block; color: #22314D; }
.atividade .acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.atividade .acoes span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 99px; font-weight: 700; font-size: 15px; color: #2A1A05; }
.atividade .acoes .sec { background: #F3E8D3; }
.atividade .acoes .pri { background: #D4A04F; }

/* faixa da noite (o tema "Noite suave" do app) */
.noite { background: radial-gradient(70% 60% at 85% 20%, rgba(157, 188, 240, .16), transparent 70%), radial-gradient(40% 50% at 10% 90%, rgba(227, 197, 143, .10), transparent 70%), var(--n-fundo); color: var(--n-tinta); border-radius: 40px; margin: 0 var(--gutter); }
.noite .rotulo, .noite .rec-txt > p, .noite .lista-check li > span > span { color: var(--n-suave); }
.noite .lista-check .tipo { background: var(--n-cartao-2); color: var(--n-lua); }
.noite .lista-check .tipo.gota { color: var(--n-gota); }
.noite .dado { background: var(--n-cartao); border-color: var(--n-borda); }
.noite .dado p { color: var(--n-tinta); } .noite .dado .num { color: var(--n-lua); } .noite .dado cite, .noite .dado cite a { color: var(--n-suave); }
@media (max-width: 960px) { .noite { border-radius: 28px; margin: 0 8px; } }

/* ---------- PRO ---------- */
.pro-secao { position: relative; overflow: hidden; border-radius: 40px; margin: 0 var(--gutter); background:
  radial-gradient(60% 60% at 90% 0%, color-mix(in srgb, var(--lilas) 26%, transparent), transparent 70%),
  radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--lua) 24%, transparent), transparent 70%),
  var(--cartao-2); border: 1px solid var(--borda); }
.pro-secao .cab h2 em { font-style: normal; background: linear-gradient(120deg, var(--pro-1), var(--pro-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pro-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pro-grade li { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--sombra-1); }
.pro-grade .tipo { margin-bottom: 14px; }
.pro-grade b { display: block; font-size: 18px; letter-spacing: -0.01em; }
.pro-grade li > span:not(.tipo) { display: block; margin-top: 6px; color: var(--tinta-suave); font-size: 15.5px; }
@media (max-width: 900px) { .pro-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pro-grade { grid-template-columns: 1fr; } .pro-secao { border-radius: 28px; margin: 0 8px; } }

.precos { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-top: 56px; align-items: stretch; }
.plano { position: relative; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--r-xl); padding: 32px; box-shadow: var(--sombra-1); display: flex; flex-direction: column; }
.plano.destaque { border: 2px solid transparent; background: linear-gradient(var(--cartao), var(--cartao)) padding-box, linear-gradient(120deg, var(--pro-1), var(--pro-2)) border-box; box-shadow: var(--sombra-2); }
.plano h3 { font-size: 22px; display: flex; align-items: center; gap: 10px; }
.plano .preco { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plano .valor { font-family: var(--num); font-size: clamp(46px, 5vw, 62px); letter-spacing: -0.035em; line-height: 1; }
.plano .por { color: var(--tinta-suave); font-weight: 600; }
.plano .nota { margin-top: 10px; color: var(--tinta-suave); font-size: 15.5px; }
.selo { position: absolute; top: -15px; right: 28px; background: linear-gradient(120deg, #3A6CC4, #6A54B8); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 99px; }
.economia { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--folha-t); background: color-mix(in srgb, var(--folha) 15%, var(--cartao)); padding: 6px 12px; border-radius: 99px; font-size: 14px; margin-top: 14px; align-self: flex-start; }
.plano .lista-form { margin-top: 24px; max-width: none; }
.plano .espaco { flex: 1; min-height: 20px; }
.teste { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--tinta-suave); }
.teste .i { color: var(--folha-t); font-size: 20px; margin-top: 1px; }
@media (max-width: 820px) { .precos { grid-template-columns: 1fr; } .plano { padding: 24px; } }

.comparar { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; }
.comparar th, .comparar td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
.comparar thead th { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.comparar td:nth-child(n+2), .comparar th:nth-child(n+2) { width: 30%; }
.comparar td:last-child { font-weight: 700; color: var(--tinta); }
.comparar tr:last-child td { border-bottom: 0; }
.comparar .nao { color: var(--tinta-fraca); }
.comparar .i { display: inline-block; vertical-align: -3px; color: var(--folha-t); font-size: 18px; }

.letra-miuda { max-width: 780px; margin: 28px auto 0; text-align: center; font-size: 14px; color: var(--tinta-suave); }

/* FAQ */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--r-l); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 60px 20px 24px; font-weight: 700; font-size: 17.5px; position: relative; border-radius: var(--r-l); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2.5px solid var(--tinta-suave); border-bottom: 2.5px solid var(--tinta-suave); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details p { padding: 0 24px 22px; color: var(--tinta-suave); }

/* lista de espera (o formulário completo) */
.final { position: relative; overflow: hidden; border-radius: 40px; padding: 72px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; background:
  radial-gradient(50% 70% at 10% 0%, color-mix(in srgb, var(--lua) 28%, transparent), transparent 70%),
  radial-gradient(40% 60% at 95% 100%, color-mix(in srgb, var(--lilas) 22%, transparent), transparent 70%),
  var(--cartao-2); border: 1px solid var(--borda); }
.final img.icone { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 24px; box-shadow: var(--sombra-2); }
.final h2 { font-size: clamp(32px, 4.2vw, 52px); }
.final .txt p { margin-top: 16px; font-size: 18px; color: var(--tinta-suave); }
.final .lojas { margin-top: 22px; }
.final form { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--sombra-2); display: grid; gap: 16px; }
.final form .btn { width: 100%; }
.final form .consent { margin-top: 0; }
@media (max-width: 900px) { .final { grid-template-columns: 1fr; padding: 40px 20px; gap: 32px; border-radius: 28px; } .final form { padding: 20px; } }

/* rodapé */
.rodape { padding: 64px 0 48px; color: var(--tinta-suave); font-size: 15px; }
.rodape .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.rodape h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 14px; font-weight: 700; }
.rodape ul { display: grid; gap: 8px; }
.rodape a { color: var(--tinta); text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape .aviso { margin-top: 16px; max-width: 30em; font-size: 14px; }
.rodape .base { grid-column: 1 / -1; border-top: 1px solid var(--borda); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; }
@media (max-width: 760px) { .rodape .wrap { grid-template-columns: 1fr 1fr; } .rodape .wrap > :first-child { grid-column: 1 / -1; } }

/* ---------- páginas de texto (privacidade, termos, suporte, obrigado, 404) ---------- */
.doc-topo { padding: 64px 0 36px; background: linear-gradient(180deg, var(--fundo), var(--fundo-2)); border-bottom: 1px solid var(--borda); }
.doc-topo .wrap, .doc { max-width: 780px; }
.doc-topo h1 { font-size: clamp(36px, 5vw, 54px); margin-top: 14px; }
.doc-topo .lead { margin-top: 14px; font-size: 19px; color: var(--tinta-suave); }
.migalhas { font-size: 14.5px; color: var(--tinta-suave); }
.migalhas a { color: var(--tinta-suave); }
.rascunho { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; font-size: 14.5px; font-weight: 700; color: var(--gota-t); background: color-mix(in srgb, var(--gota) 16%, var(--cartao)); padding: 8px 14px; border-radius: 99px; }
.doc { padding: 48px 0 96px; }
.doc h2 { font-size: 27px; margin: 48px 0 14px; letter-spacing: -0.02em; }
.doc h3 { font-size: 19px; margin: 28px 0 10px; letter-spacing: -0.01em; }
.doc p + p { margin-top: 14px; }
.doc ul, .doc ol { padding-left: 22px; margin: 12px 0; display: grid; gap: 8px; }
.doc ul { list-style: disc; }
.doc ul li::marker { color: var(--lua); }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15.5px; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.doc th { font-weight: 700; color: var(--tinta-suave); font-size: 14px; }
.doc .lead { font-size: 19px; color: var(--tinta-suave); }
.note { font-size: 14.5px; color: var(--tinta-suave); }
.doc .btn { margin: 6px 0; }
.mt { margin-top: 12px; }
.table-wrap { overflow-x: auto; }
.doc-404 { min-height: 50vh; }

/* obrigado */
.obrigado { min-height: 70vh; display: grid; place-items: center; padding: 72px 0; text-align: center; }
.obrigado .cartao { max-width: 640px; margin-inline: auto; background: var(--cartao); border: 1px solid var(--borda); border-radius: 36px; padding: 48px 32px; box-shadow: var(--sombra-2); }
.obrigado .selo-ok { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 22px; display: grid; place-items: center; font-size: 40px; background: color-mix(in srgb, var(--folha) 18%, var(--cartao)); color: var(--folha-t); }
.obrigado h1 { font-size: clamp(34px, 5vw, 50px); }
.obrigado p { margin-top: 14px; font-size: 18px; color: var(--tinta-suave); }
.obrigado .ja { display: none; margin-top: 18px; font-weight: 700; color: var(--lua-t); }
.obrigado .ja.on { display: block; }
.passos-ok { margin: 32px auto 0; display: grid; gap: 12px; text-align: left; max-width: 460px; }
.passos-ok li { display: flex; gap: 14px; align-items: flex-start; background: var(--cartao-2); border-radius: var(--r-l); padding: 14px 16px; }
.passos-ok b { display: block; }
.passos-ok li > span > span { display: block; color: var(--tinta-suave); font-size: 15px; }
.obrigado .acoes { margin-top: 28px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pro-inclui { margin-top: 26px; gap: 16px; }
.pro-inclui .tipo { width: 36px; height: 36px; font-size: 19px; }
.pro-inclui li > span > b { font-size: 16px; }
.pro-inclui li > span > span { font-size: 14.5px; }
/* obrigado: ?saiu=1 (lista.js põe html.saiu) troca o bloco; sair da lista */
.bloco-saiu { display: none; }
.saiu .bloco-saiu { display: block; }
.saiu .bloco-ok, .saiu .nota-sair { display: none; }
.saiu .selo-ok { background: var(--realce); color: var(--lua-t); }
.nota-sair { margin-top: 26px !important; font-size: 15px !important; }
.form-sair { margin: 28px auto 0; max-width: 420px; display: grid; gap: 14px; text-align: left; }
.form-sair .btn { width: 100%; }
.selo-sair { background: var(--realce) !important; color: var(--lua-t) !important; }