/* Landing de pré-lançamento (lista de espera), vinda do site do Claude Design
   no Netlify em 01/10/2026. Gerada por montagem a partir da página publicada:
   para mudar o desenho, edite este arquivo e public/site.html. */

/* Cores da marca com os mesmos nomes e valores do app (public/css/app.css), desde 12/10/2026:
   site e app são o mesmo produto. O fundo e a fonte continuam os de cada um. */
:root {
  --teal: #17708F; --teal-claro: #6EC1DB;
  --rosa: #E0559A; --rosa-acao: #CA4284; --rosa-escuro: #AC346E;
}
:root, [data-theme="light"] { --ink: #14303C; --ink-rgb: 20,48,60; --bg: #F3F7F9; --bg-rgb: 243,247,249; --accent2: var(--teal); --pink-texto: var(--rosa-escuro); }
  [data-theme="dark"] { --ink: #F4F1EA; --ink-rgb: 244,241,234; --bg: #0A1218; --bg-rgb: 10,18,24; --accent2: var(--teal-claro); --pink-texto: var(--rosa); }
  /* --pink-texto (12/10/2026): rosa para texto pequeno; no claro, o rosa de marca dava 3,2:1 sobre o creme. */
  html { scroll-behavior: smooth; scroll-padding-top: 148px; }
  nav::-webkit-scrollbar { display: none; }
  body { margin: 0; background: var(--bg); color: var(--ink); transition: background 0.4s ease, color 0.4s ease; font-family: 'Space Grotesk', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: var(--accent2); }
  a:hover { color: var(--rosa); }
  ::selection { background: var(--rosa); color: #fff; }
  img { max-width: 100%; }
  @keyframes ncMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes ncPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
  [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
  [data-reveal].nc-in { opacity: 1; transform: translateY(0); }
  details summary::-webkit-details-marker { display: none; }
  #madrugada [data-mad-video] { position: relative !important; inset: auto !important; display: block; width: 100% !important; height: auto !important; aspect-ratio: 21 / 9; max-height: 78vh; opacity: 1 !important; object-fit: cover; object-position: 60% center; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  #madrugada [data-mad-overlay] { display: none; }
  #madrugada > div:last-child { padding-top: clamp(8px, 3vw, 48px) !important; }
  @media (max-width: 760px) {
    #madrugada [data-mad-video] { aspect-ratio: 4 / 3; max-height: none; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
  }

/* Efeitos de passar o mouse (no Claude Design eram atributos style-hover). */
.scp0:hover { border-color: var(--rosa) !important; color: var(--ink) !important; }
.scp1:hover { background: var(--rosa-acao) !important; color: rgb(255, 255, 255) !important; }
.scp2:hover { color: var(--ink) !important; }
.scp3:hover { background: var(--ink) !important; color: var(--bg) !important; }
.scp4:hover { background: rgba(var(--ink-rgb),0.04) !important; padding-left: 22px !important; }
.scp5:hover { transform: rotate(0deg) translateY(-10px) scale(1.03) !important; }
.scp6:hover { filter: grayscale(0) !important; transform: scale(1.04) !important; }
.scp7:hover { transform: rotate(-4deg) translateY(-8px) scale(1.04) !important; }

/* Barra fixa do celular, que aparece depois do topo. */
#nc-barra[hidden] { display: none !important; }

/* Quem pede menos movimento vê tudo parado. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  #nc-device { transform: none !important; }
}

/* Abertura (pedido do fundador em 06/10/2026): enquanto a página carrega, o
   logo cresce devagar no centro de uma tela branca e a tela some. Uma vez por
   aba (classe sem-abertura, posta no head). Quem a tira é o js/site.js, no
   load, com pelo menos 1,1 s de logo; se o script falhar, some sozinha aos
   3,2 s. Com movimento reduzido não aparece. */
.abertura {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: #FFFFFF;
  animation: abertura-sair .42s ease 3.2s forwards;
}
.abertura.saindo { animation: abertura-sair .42s ease forwards; }
.sem-abertura .abertura { display: none; }
.abertura-marca {
  display: flex; flex-direction: column; align-items: center;
  width: min(220px, 56vw);
  animation: abertura-crescer 1.6s cubic-bezier(.22, .61, .36, 1) both;
}
.abertura-marca img { display: block; width: 100%; height: auto; }
.abertura-kids {
  margin-top: 2px; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 30px; line-height: 1;
  color: var(--rosa); animation: abertura-kids .5s ease .45s both;
}
.abertura.saindo .abertura-marca { animation: abertura-crescer-fim .42s ease forwards; }
@keyframes abertura-crescer { from { opacity: 0; transform: scale(.88); } 30% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
@keyframes abertura-crescer-fim { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes abertura-kids { from { opacity: 0; transform: translateY(4px); } }
@keyframes abertura-sair { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .abertura { display: none; } }

/* Menu do celular (10/10/2026): a faixa rola para o lado, e o último item ficava
   cortado na borda sem nenhum sinal de que havia mais. O esmaecido na ponta
   mostra que continua; o último link ganha folga para não sumir no fim. */
@media (max-width: 760px) {
  header nav {
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
    scroll-padding-inline: 22px;
  }
  header nav a:last-child { padding-right: 44px; }
}

/* Celular estreito (10/10/2026): com "Abrir o app" ou "Entrar" no cabeçalho, a
   linha de botões passava da tela e cortava o "Lista de espera". O botão do
   tema fica só com a bolinha (o nome segue no aria-label). */
@media (max-width: 420px) {
  #nc-tema { padding: 0 12px !important; }
  #nc-tema [data-tema-rotulo] { display: none; }
}

/* Áreas de toque de 44 px no cabeçalho e no rodapé (revisão de 12/10/2026; HIG): os links do
   menu tinham 15 px de altura, o rodapé 17 e os botões do topo 36. min-height vence o
   height inline do botão de tema. */
header .scp0, header .scp1, header .scp2, footer .scp2 { min-height: 44px; box-sizing: border-box; }
header .scp0 { min-width: 44px; justify-content: center; }
/* Os links do menu já trazem o respiro dentro dos 44 px: sai o espaço extra entre as linhas e embaixo. */
header > div { row-gap: 0 !important; padding-bottom: 0 !important; }
header nav { padding: 0 !important; }
header .scp1, header .scp2, footer .scp2 { display: inline-flex; align-items: center; }


/* Aurora atrás da hero (12/10/2026, pedido do fundador; recriação em CSS puro do
   componente "Aurora Background" do Aceternity UI, que é React + Tailwind). Duas
   camadas de faixas a 100°: a do fundo, parada, e a ::after, em mistura
   "difference", que desliza em 60 s. Desfoque de 10 px, opacidade de 0,5 e uma
   máscara radial que acende o canto de cima à direita e apaga o resto. No claro
   a camada é invertida (o truque do original); no escuro, não. Fica fora da
   seção #topo, que tem 1360 px no máximo, para ir de uma borda à outra. */
.aurora {
  position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: max(100lvh, var(--nc-tela, 0px)); min-height: 620px;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.aurora-luz {
  --aurora-fundo: #FFFFFF;
  --aurora: repeating-linear-gradient(100deg, #3B82F6 10%, #A5B4FC 15%, #93C5FD 20%, #DDD6FE 25%, #60A5FA 30%);
  --aurora-faixas: repeating-linear-gradient(100deg, var(--aurora-fundo) 0%, var(--aurora-fundo) 7%, transparent 10%, transparent 12%, var(--aurora-fundo) 16%);
  position: absolute; inset: -10px; opacity: .5; will-change: transform;
  background-image: var(--aurora-faixas), var(--aurora);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(10px) invert(1);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
}
.aurora-luz::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--aurora-faixas), var(--aurora);
  background-size: 200%, 100%;
  background-attachment: fixed;
  mix-blend-mode: difference;
  animation: aurora 60s linear infinite;
}
[data-theme="dark"] .aurora-luz { --aurora-fundo: #000000; filter: blur(10px); }
@keyframes aurora {
  from { background-position: 50% 50%, 50% 50%; }
  to { background-position: 350% 50%, 350% 50%; }
}
/* O conteúdo da hero vem por cima da aurora. */
#topo { z-index: 1; }
/* Hero da altura da tela inteira (20/10/2026, pedido do fundador): no celular de verdade,
   100vh ficava curto quando a barra do navegador some ou flutua sobre a página, e a seção
   de baixo aparecia no pé da tela. Vale a maior altura visível (lvh) ou, em tela de toque,
   a da tela física (--nc-tela, medida no <head> do site.html); a aurora acompanha. O texto
   continua centrado na menor área visível (svh, com as barras abertas): a sobra vai para o pé
   da hero, e o botão não desce para trás da barra do navegador. */
#topo { min-height: 100vh; padding-bottom: 56px; }
@supports (height: 100svh) {
  #topo { min-height: max(100lvh, var(--nc-tela, 0px)); padding-bottom: calc(56px + max(100lvh, var(--nc-tela, 0px)) - 100svh); }
}
/* No claro, a aurora clareia o fundo atrás do texto pequeno da hero: o azul
   da marca (#17708F) ficaria em 4,1:1. Ali ele vira o azul-escuro (#115A73),
   5,2:1 ou mais em qualquer ponto da aurora. */
:root:not([data-theme="dark"]) #topo { --accent2: #115A73; }
@media (prefers-reduced-motion: reduce) {
  .aurora-luz::after { animation: none; }
}

/* Assinatura da marca (12/10/2026): a mesma pílula do topo do app — o barco e
   "NaviCare Kids", "Kids" em rosa — na fonte do site. Branca nos dois temas,
   como no cabeçalho escuro do app, então o barco teal aparece também no escuro. */
.nc-assinatura {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; box-sizing: border-box;
  padding: 5px 16px 5px 7px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 48, 60, .08);
  font-weight: 700; font-size: 16.5px; letter-spacing: -0.015em; line-height: 1;
  color: #14303C; text-decoration: none; white-space: nowrap;
}
.nc-assinatura img { width: 30px; height: 30px; display: block; flex: none; }
.nc-assinatura .kids { color: #C23B7C; } /* como nos Termos e no app: 4,99:1 sobre o branco */

/* Revelação radial nos convites da lista de espera (12/10/2026, pedido do fundador;
   recriação do "Radial Reveal Button" do Originkit, site.js). A camada de cima tem as
   cores do hover antigo e aparece num círculo que cresce do ponto do cursor (0,45 s,
   aceleração suave nas duas pontas). O :hover antigo, que trocava a cor de uma vez,
   passa a repetir as cores do próprio botão. */
a.nc-revelar { position: relative; overflow: hidden; isolation: isolate; }
a.nc-revelar:hover, a.nc-revelar.scp1:hover, a.nc-revelar.scp3:hover {
  background: var(--nc-base-fundo) !important; color: var(--nc-base-texto) !important;
}
.nc-revelar-camada {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  white-space: nowrap; pointer-events: none; border-radius: inherit;
  background: var(--nc-revelar-fundo); color: var(--nc-revelar-texto);
  clip-path: circle(0% at 100% 100%);
  transition: clip-path .45s cubic-bezier(.42, 0, .58, 1);
}
/* Botões escuros revelam o rosa de ação; os rosas, a tinta (as cores do hover antigo). */
a.nc-revelar.scp1 { --nc-revelar-fundo: var(--rosa-acao); --nc-revelar-texto: #fff; }
a.nc-revelar:not(.scp1) { --nc-revelar-fundo: var(--ink); --nc-revelar-texto: var(--bg); }
@media (prefers-reduced-motion: reduce) { .nc-revelar-camada { transition: none; } }

/* ============================================================================
   Site com o visual e as telas do app de hoje (13/10/2026, pedido do fundador).
   Fundo claro no branco gelo do app (#F3F7F9). Movimento todo pelo GSAP
   (js/site-movimento.js): rolagem suave, hero fixada, títulos e textos que
   entram com a rolagem. Sem GSAP ou com movimento reduzido, tudo aparece parado.
   ============================================================================ */
html.nc-gsap { scroll-behavior: auto; }
.nc-gsap [data-reveal] { transition: none; }
.nc-hero { position: relative; }
/* O SplitText recorta cada linha (a caixa .nc-linha-mask) para as palavras subirem de dentro dela.
   Com a entrelinha justa dos títulos, o recorte cortava a perna das letras que descem — o "g" de
   "navega" em Instrument Serif itálico perdia a ponta (13/10/2026, pedido do fundador). O recorte
   desce .26em, devolvidos na margem, e a linha de dentro não recorta mais nada. */
.nc-linha-mask { padding-bottom: .26em; margin-bottom: -.26em; }
[data-split] .nc-linha, [data-hero-titulo] .nc-linha { overflow: visible; }

/* Cabeçalho das seções novas, igual ao das antigas (número rosa + título com um destaque em itálico). */
.nc-cab { display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px; }
.nc-num { font-size: 13px; letter-spacing: 0.2em; color: var(--pink-texto); }
.nc-h2 { margin: 0; font-weight: 500; font-size: clamp(30px, 4.6vw, 56px); letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.nc-h2 em, .nc-sono h2 em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; color: var(--accent2); }
.nc-intro { margin: 0 0 clamp(28px, 4vw, 44px); padding-left: clamp(0px, 3vw, 49px); max-width: 58ch; font-size: 16.5px; line-height: 1.7; color: rgba(var(--ink-rgb), 0.78); }

/* Provas: fatos que dá para conferir, no lugar de avaliações que o produto ainda não tem. */
.nc-provas { max-width: 1360px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) 22px 0; box-sizing: border-box; }
.nc-provas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); border-top: 1px solid rgba(var(--ink-rgb), 0.14); border-bottom: 1px solid rgba(var(--ink-rgb), 0.14); }
.nc-prova { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 28px 0; }
.nc-prova + .nc-prova { padding-left: 24px; border-left: 1px solid rgba(var(--ink-rgb), 0.14); }
.nc-prova strong { font-weight: 500; font-size: clamp(44px, 5vw, 68px); line-height: 1; letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.nc-prova > span { font-size: clamp(16px, 1.25vw, 17px); line-height: 1.55; color: rgba(var(--ink-rgb), 0.85); max-width: 32ch; }
.nc-fontes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 20px 0 0; font-size: 14.5px; color: rgba(var(--ink-rgb), 0.78); }
.nc-fontes span { padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(var(--ink-rgb), 0.2); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink); }
@media (max-width: 620px) {
  .nc-prova + .nc-prova { padding-left: 0; border-left: 0; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
}

/* iPhone: moldura, Dynamic Island e barra de status por cima da captura do app (393 x 852 pt + 54 pt de status). */
.nc-iphone {
  --fone-w: 250px; position: relative; flex: none; box-sizing: border-box; width: var(--fone-w); aspect-ratio: 393 / 906; margin: 0;
  padding: calc(var(--fone-w) * 0.034); border-radius: calc(var(--fone-w) * 0.175); background: #0B1418;
  box-shadow: inset 0 0 0 1.5px #2E3E46, 0 0 0 1px rgba(255, 255, 255, 0.06), 0 34px 70px -28px rgba(8, 18, 24, 0.6);
}
.nc-iphone-tela { position: relative; height: 100%; border-radius: calc(var(--fone-w) * 0.14); overflow: hidden; background: var(--barra, #14303C); display: flex; flex-direction: column; }
.nc-iphone-tela > img { display: block; width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: top; }
.nc-status { flex: 0 0 5.96%; display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 12%; color: #fff; font: 600 calc(var(--fone-w) * 0.046) / 1 "Space Grotesk", system-ui, sans-serif; }
.nc-bateria { width: 2.1em; height: 1em; border-radius: 0.32em; border: 1.5px solid rgba(255, 255, 255, 0.85); box-sizing: border-box; background: linear-gradient(90deg, #fff 70%, transparent 70%) content-box; padding: 1px; }
.nc-ilha { position: absolute; z-index: 3; top: 2.5%; left: 50%; width: 30%; height: 3.9%; transform: translateX(-50%); border-radius: 999px; background: #000; }

/* Galeria das ferramentas (o "expanding gallery" pedido pelo fundador): colunas que se abrem num iPhone com a
   descrição ao lado. Passar o mouse abre; tocar ou clicar fixa. No celular, vira uma lista que abre para baixo. */
.nc-ferr { max-width: 1360px; margin: 0 auto; padding: clamp(72px, 11vw, 130px) 22px clamp(48px, 8vw, 90px); box-sizing: border-box; }
.nc-galeria { display: flex; gap: 10px; height: 640px; }
.nc-col { --fone-w: 252px; position: relative; flex: 1 1 0; min-width: 0; border-radius: 28px; overflow: hidden; isolation: isolate; background: var(--tom); color: #fff; }
.nc-col-faixa { position: absolute; inset: 0; z-index: 0; }
.nc-col-faixa img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;; transform: scale(1.55); transform-origin: 50% 46%; }
.nc-col-faixa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tom) 25%, transparent) 0%, color-mix(in srgb, var(--tom) 92%, #000) 78%); }
.nc-col-nome { position: absolute; inset: 0; z-index: 2; margin: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px; }
.nc-col-botao {
  appearance: none; border: 0; background: none; color: #fff; cursor: pointer; padding: 6px 0; min-width: 44px; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; font: 600 17px / 1.15 "Space Grotesk", sans-serif; letter-spacing: 0.01em;
}
.nc-col-botao::after { content: ""; position: absolute; inset: 0; border-radius: 28px; }
.nc-col-botao:focus-visible { outline: none; }
.nc-col-botao:focus-visible::after { outline: 3px solid #fff; outline-offset: -6px; }
.nc-col-rotulo { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.nc-col-botao small { order: -1; padding: 5px 9px; border-radius: 999px; background: #fff; color: #5A3FA8; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.nc-col .nc-iphone, .nc-col .nc-col-texto { display: none; }

.nc-col.aberta { display: grid; grid-template-columns: var(--fone-w) minmax(270px, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(24px, 3vw, 40px); padding: 0 clamp(24px, 3vw, 40px); align-items: center; }
.nc-col.aberta .nc-col-faixa { opacity: 0; visibility: hidden; }
.nc-col.aberta .nc-col-nome { position: static; grid-column: 2; grid-row: 2; display: block; padding: 0; }
.nc-col.aberta .nc-col-botao { flex-direction: column; align-items: flex-start; cursor: default; padding: 0; min-height: 0; font-size: clamp(28px, 2.6vw, 38px); font-weight: 500; letter-spacing: -0.02em; text-align: left; }
.nc-col.aberta .nc-col-botao::after { display: none; }
.nc-col.aberta .nc-col-rotulo { writing-mode: horizontal-tb; transform: none; white-space: normal; }
.nc-col.aberta .nc-iphone { display: block; grid-column: 1; grid-row: 1 / -1; align-self: center; }
.nc-col.aberta .nc-col-texto { display: block; grid-column: 2; grid-row: 3; align-self: start; padding-top: 14px; max-width: 40ch; }
.nc-col-frase { margin: 0 0 10px; font-family: "Instrument Serif", serif; font-style: italic; font-size: clamp(22px, 2vw, 27px); line-height: 1.2; }
.nc-col-texto p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; }
.nc-col-texto ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.nc-col-texto li { position: relative; padding-left: 20px; }
.nc-col-texto li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0.85; }
@media (max-width: 1100px) and (min-width: 760px) {
  .nc-galeria { height: 560px; }
  .nc-col { --fone-w: 214px; }
}
@media (max-width: 759px) {
  .nc-galeria { flex-direction: column; height: auto; gap: 8px; }
  .nc-col { flex: none !important; min-height: 76px; border-radius: 22px; }
  .nc-col-botao::after { border-radius: 22px; }
  .nc-col:not(.aberta) .nc-col-nome { align-items: center; justify-content: flex-start; padding: 0 0 0 22px; }
  .nc-col:not(.aberta) .nc-col-botao { flex-direction: row; font-size: 18px; }
  .nc-col-rotulo { writing-mode: horizontal-tb; transform: none; }
  .nc-col-faixa img { object-position: 50% 30%; }
  .nc-col-faixa::after { background: linear-gradient(90deg, color-mix(in srgb, var(--tom) 94%, #000) 40%, color-mix(in srgb, var(--tom) 40%, transparent)); }
  .nc-col.aberta { --fone-w: min(236px, 62vw); grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 18px; padding: 24px 20px 28px; justify-items: start; }
  .nc-col.aberta .nc-col-nome { grid-column: 1; grid-row: 1; }
  .nc-col.aberta .nc-iphone { grid-column: 1; grid-row: 2; justify-self: center; }
  .nc-col.aberta .nc-col-texto { grid-column: 1; grid-row: 3; padding-top: 0; }
}

/* Rotina de sono, em destaque: a paleta ameixa e lavanda da tela do app, nos dois temas. */
.nc-sono { position: relative; overflow: hidden; background: #141226; color: #F1EDFF; }
.nc-sono-ceu { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 45% at 85% 8%, rgba(196, 181, 253, 0.18), transparent 70%), radial-gradient(45% 40% at 5% 95%, rgba(224, 85, 154, 0.12), transparent 70%); }
.nc-lua { position: absolute; top: 7%; right: 7%; width: clamp(70px, 9vw, 130px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #FBF9FF, #D9D0FF 58%, #AFA0F2); box-shadow: 0 0 70px 20px rgba(196, 181, 253, 0.32); }
.nc-estrela { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0.55; }
.nc-sono-pin { position: relative; max-width: 1240px; min-height: 100vh; margin: 0 auto; padding: clamp(84px, 9vw, 110px) 22px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.nc-sono-cab { display: flex; align-items: baseline; gap: 14px; margin: 0; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: #C4B5FD; }
.nc-sono-cab .nc-num { color: #F2A6CB; }
.nc-sono h2 { margin: 16px 0 18px; font-weight: 500; font-size: clamp(36px, 4.8vw, 64px); line-height: 1.06; letter-spacing: -0.025em; color: #F1EDFF; text-wrap: balance; }
.nc-sono h2 em { color: #C4B5FD; }
.nc-sono-lede { margin: 0 0 26px; max-width: 50ch; font-size: 17px; line-height: 1.65; color: #C9C2E8; }
.nc-sono-passos { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: grid; gap: 6px; }
.nc-sono-passos li { counter-increment: passo; position: relative; }
.nc-passo {
  appearance: none; width: 100%; text-align: left; cursor: pointer; display: block; padding: 15px 18px 15px 60px; border-radius: 18px;
  border: 1px solid transparent; background: transparent; color: rgba(241, 237, 255, 0.68); font: 400 15.5px / 1.55 "Space Grotesk", sans-serif;
}
.nc-passo strong { display: block; margin-bottom: 2px; color: #F1EDFF; font-size: 17.5px; font-weight: 600; }
.nc-sono-passos li::before { content: counter(passo); position: absolute; left: 18px; top: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #141226; background: rgba(196, 181, 253, 0.45); pointer-events: none; }
.nc-sono-passos li.ativo .nc-passo { background: rgba(196, 181, 253, 0.1); border-color: rgba(196, 181, 253, 0.24); color: #E4DEF9; }
.nc-sono-passos li.ativo::before { background: #C4B5FD; }
.nc-passo:focus-visible { outline: 3px solid #C4B5FD; outline-offset: 2px; }
.nc-sono-tela { display: flex; justify-content: center; }
.nc-iphone.grande { --fone-w: min(clamp(250px, 23vw, 318px), calc((100vh - 170px) * 0.434)); box-shadow: inset 0 0 0 1.5px #3A3360, 0 0 0 1px rgba(255, 255, 255, 0.07), 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 0 120px -20px rgba(196, 181, 253, 0.35); }
.nc-iphone.grande .nc-iphone-tela > img { position: absolute; left: 0; right: 0; bottom: 0; top: 5.96%; height: 94.04%; opacity: 0; }
.nc-iphone.grande .nc-iphone-tela > img.ativa { opacity: 1; }
.nc-sono-extra { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 22px clamp(84px, 10vw, 120px); box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.nc-sono-aula { margin: 0; display: grid; gap: 14px; }
.nc-sono-aula img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.nc-sono-aula figcaption, .nc-aulas figcaption { font-size: 15px; line-height: 1.55; color: #C9C2E8; }
.nc-sono-aula strong { display: block; margin-bottom: 2px; color: #F1EDFF; font-weight: 600; }
.nc-sono-pdf { position: relative; height: clamp(300px, 32vw, 430px); }
.nc-folha { position: absolute; width: 58%; height: auto; border-radius: 10px; box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.85); }
.nc-folha.um { left: 2%; top: 4%; transform: rotate(-6deg); }
.nc-folha.dois { right: 2%; bottom: 0; transform: rotate(5deg); }
.nc-sono-fontes { grid-column: 1 / -1; margin: 0; max-width: 90ch; font-size: 14px; line-height: 1.65; color: rgba(241, 237, 255, 0.74); border-top: 1px solid rgba(241, 237, 255, 0.14); padding-top: 22px; }
@media (max-width: 899px) {
  .nc-sono-pin { grid-template-columns: 1fr; min-height: 0; padding-bottom: 48px; }
  .nc-sono-tela { order: -1; }
  .nc-iphone.grande { --fone-w: min(250px, 66vw); }
  .nc-sono-extra { grid-template-columns: 1fr; }
}

/* Aulas gravadas (quadros das aulas mais recentes, com o nome e o registro de quem ensina em azul e rosa). */
.nc-aulas { max-width: 1180px; margin: clamp(64px, 10vw, 110px) auto 0; padding: 0 22px; box-sizing: border-box; }
.nc-aulas-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; margin-bottom: 26px; }
.nc-aulas-cab h3 { margin: 0; font-weight: 500; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.015em; color: var(--ink); }
.nc-aulas-cab p { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.78); }
.nc-aulas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 22px; }
.nc-aulas figure { margin: 0; display: grid; gap: 12px; }
.nc-aulas img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 24px 50px -28px rgba(20, 48, 60, 0.55); }
.nc-aulas figcaption { color: rgba(var(--ink-rgb), 0.76); font-size: 14.5px; }
.nc-aulas figcaption strong { display: block; color: var(--ink); font-size: 16px; font-weight: 600; margin-bottom: 2px; }
/* No celular, as 4 aulas viram uma fila para deslizar (20/10/2026): a próxima aparece pela
   borda e convida o dedo, no lugar de 4 vídeos empilhados. */
@media (max-width: 759px) {
  .nc-aulas-grade { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -22px; padding: 0 22px 10px; scroll-padding-inline: 22px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .nc-aulas-grade::-webkit-scrollbar { display: none; }
  .nc-aulas-grade > figure { flex: 0 0 84%; scroll-snap-align: start; }
}

/* Equipe (20/10/2026): uma linha curta à vista e a formação completa num toque (alvo de 44 px). */
.nc-eq-papel { font-size: 15px; line-height: 1.45; color: rgba(var(--ink-rgb), 0.85); }
.nc-eq-bio summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--accent2); }
.nc-eq-bio summary::-webkit-details-marker { display: none; }
.nc-eq-bio summary::after { content: '+'; font-size: 19px; font-weight: 400; line-height: 1; transition: transform .25s ease; }
.nc-eq-bio[open] summary::after { transform: rotate(45deg); }
.nc-eq-bio summary:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; border-radius: 6px; }
.nc-eq-bio p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.8); }
@media (prefers-reduced-motion: reduce) { .nc-eq-bio summary::after { transition: none; } }

/* 06 Comunidade (13/10/2026, pedido do fundador): uma conversa de exemplo, com nomes fictícios, em
   cada um de dois canais (Alimentação e Pré-natal), desenhada com o layout do canal no app — trilha,
   cabeçalho do canal, a pergunta com o @, a resposta da equipe em destaque e os comentários — dentro
   do iPhone. As medidas do app (pontos de uma tela de 393) viram px pelo --u, para caber em qualquer
   largura do aparelho. O GSAP faz as respostas entrarem uma a uma e a tela rolar até o "Eu também"
   (js/site-movimento.js, ligarComunidade). A fonte é a do site: a regra é uma família por tela. */
.nc-com { max-width: 1360px; margin: 0 auto; padding: clamp(64px, 10vw, 120px) 22px clamp(48px, 8vw, 90px); box-sizing: border-box; }
.nc-com-grade { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 88px); align-items: center; }
.nc-com-texto { min-width: 0; }
.nc-com-abas { display: flex; flex-wrap: wrap; gap: 10px; padding-left: clamp(0px, 3vw, 49px); margin-bottom: 26px; }
.nc-com-aba {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px 6px 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(var(--ink-rgb), 0.16); background: transparent; color: var(--ink); font: 500 15px/1.2 "Space Grotesk", sans-serif;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.nc-com-aba img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.nc-com-aba[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.nc-com-aba:focus-visible { outline: 3px solid var(--accent2); outline-offset: 3px; }
@media (hover: hover) { .nc-com-aba[aria-selected="false"]:hover { border-color: rgba(var(--ink-rgb), 0.4); } }
.nc-com-lista { list-style: none; margin: 0 0 18px; padding: 0 0 0 clamp(0px, 3vw, 49px); display: grid; gap: 10px; font-size: 15px; color: rgba(var(--ink-rgb), 0.74); }
.nc-com-lista li::before { content: "— "; }
.nc-com-aviso { margin: 0; padding-left: clamp(0px, 3vw, 49px); font-size: 13px; color: rgba(var(--ink-rgb), 0.66); }

.nc-com-fone { --fone-w: clamp(300px, 26vw, 360px); --u: calc(var(--fone-w) / 393); }
.nc-com-app { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: #F3F7F9; color: #14303C; font-family: "Space Grotesk", system-ui, sans-serif; }
.nc-com-topo { flex: none; display: flex; align-items: center; padding: calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * 12); background: #14303C; border-radius: 0 0 calc(var(--u) * 22) calc(var(--u) * 22); }
.nc-com-marca { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 5) calc(var(--u) * 12) calc(var(--u) * 5) calc(var(--u) * 6); border-radius: 999px; background: #fff; font-size: calc(var(--u) * 15); color: #14303C; }
.nc-com-marca img { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.nc-com-marca b { font-weight: 700; }
.nc-com-marca i { font-style: normal; font-weight: 700; color: #C23B7C; }
.nc-com-painel { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.nc-com-painel[hidden] { display: none; }
.nc-com-rolagem { padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 40); will-change: transform; }
.nc-com-caminho { margin: 0 0 calc(var(--u) * 10); font-size: calc(var(--u) * 13); color: #4A5B63; }
.nc-com-canal { display: flex; align-items: center; gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 12); }
.nc-com-canal img { width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: calc(var(--u) * 14); object-fit: cover; box-shadow: 0 0 0 calc(var(--u) * 2) #6EC1DB; }
.nc-com-canal strong { display: block; font-size: calc(var(--u) * 19); font-weight: 700; letter-spacing: -0.01em; }
.nc-com-canal span { font-size: calc(var(--u) * 12); color: #17708F; font-weight: 600; }
.nc-com-post { background: #fff; border: 1px solid rgba(20, 48, 60, .09); border-radius: calc(var(--u) * 20); padding: calc(var(--u) * 16); box-shadow: 0 1px 2px rgba(20, 48, 60, .05), 0 10px 22px -20px rgba(20, 48, 60, .45); }
.nc-com-cabeca { display: flex; align-items: center; gap: calc(var(--u) * 9); margin-bottom: calc(var(--u) * 9); }
.nc-com-avatar { flex: none; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; object-fit: cover; background: #EAF4F8; }
.nc-com-quem { font-size: calc(var(--u) * 12); color: #4A5B63; line-height: 1.35; min-width: 0; }
.nc-com-quem strong { display: block; font-size: calc(var(--u) * 13.5); }
.nc-com-arroba { color: #17708F; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.nc-com-selo { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: 999px; background: rgba(23, 112, 143, .08); color: #17708F; font-size: calc(var(--u) * 10.5); font-weight: 700; white-space: nowrap; }
.nc-com-post h3 { margin: 0 0 calc(var(--u) * 6); font-size: calc(var(--u) * 16.5); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.nc-com-corpo { margin: 0; font-size: calc(var(--u) * 13.5); line-height: 1.55; color: #4A5B63; }
.nc-com-resposta { margin-top: calc(var(--u) * 12); padding: calc(var(--u) * 10) 0 calc(var(--u) * 10) calc(var(--u) * 12); border-left: calc(var(--u) * 3) solid rgba(20, 48, 60, .09); }
.nc-com-resposta.medica { border-left-color: #17708F; background: rgba(23, 112, 143, .08); border-radius: 0 calc(var(--u) * 14) calc(var(--u) * 14) 0; padding-right: calc(var(--u) * 12); }
.nc-com-rquem { display: flex; align-items: center; gap: calc(var(--u) * 7); margin-bottom: calc(var(--u) * 5); font-size: calc(var(--u) * 12.5); font-weight: 700; }
.nc-com-rquem .nc-com-avatar { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.nc-com-resposta.medica .nc-com-avatar { background: #fff; padding: calc(var(--u) * 2); box-sizing: border-box; }
.nc-com-resposta p { margin: 0; font-size: calc(var(--u) * 13); line-height: 1.55; color: #4A5B63; }
.nc-com-acoes { display: flex; align-items: center; gap: calc(var(--u) * 10); flex-wrap: wrap; margin-top: calc(var(--u) * 14); }
.nc-com-eu { display: inline-flex; align-items: center; padding: calc(var(--u) * 6) calc(var(--u) * 12); border-radius: 999px; border: 1.5px solid rgba(20, 48, 60, .12); font-size: calc(var(--u) * 12.5); font-weight: 700; }
.nc-com-total { font-size: calc(var(--u) * 12); color: #4A5B63; }
.nc-com-total b { color: #14303C; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .nc-com-grade { grid-template-columns: minmax(0, 1fr); }
  .nc-com-fone { --fone-w: min(330px, 84vw); justify-self: center; }
}
/* Sem a animação (sem GSAP ou com movimento reduzido), a conversa inteira fica à vista e rola dentro do celular. */
.nc-com:not(.nc-com-animada) .nc-com-painel { overflow-y: auto; overscroll-behavior: contain; }

/* Provas (14/10/2026): ">50 materiais". O sinal fica menor que o número; quem usa leitor de tela ouve
   "Mais de 50 materiais…" (o número animado fica escondido dele). */
.nc-prova-sinal { font-size: 0.62em; margin-right: 0.04em; vertical-align: 0.18em; color: var(--accent2); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* "+50 materiais": a atualização semanal em destaque, numa pílula (14/10/2026, pedido do fundador). */
.nc-prova-selo {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 7px 14px; border-radius: 999px;
  background: rgba(224, 85, 154, 0.12); border: 1px solid rgba(224, 85, 154, 0.35); color: var(--pink-texto);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em;
}
.nc-prova-selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 0 4px rgba(224, 85, 154, 0.18); }

/* Balão do Navi na seção da lista de espera (21/10/2026, pedido do fundador): no lugar
   do nome solto ao lado do mascote, ele se apresenta. A pontinha aponta para a cabeça dele. */
.nc-balao {
  position: relative; align-self: flex-start; margin-top: clamp(14px, 3vw, 38px); max-width: 13em;
  padding: 12px 18px 13px; border-radius: 18px; background: #fff; border: 1px solid rgba(var(--ink-rgb), 0.12);
  box-shadow: 0 8px 22px rgba(20, 48, 60, 0.1);
  font-family: "Instrument Serif", serif; font-style: italic; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.15; color: var(--accent2);
}
.nc-balao::before {
  content: ""; position: absolute; left: -8px; top: 22px; width: 14px; height: 14px;
  background: inherit; border-left: 1px solid rgba(var(--ink-rgb), 0.12); border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
  transform: rotate(45deg); border-bottom-left-radius: 3px;
}
[data-theme="dark"] .nc-balao { background: #17303C; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }