/* =============================================================================
   pagina.css: Kronos Gestão (12/11/2026)
   -----------------------------------------------------------------------------
   Tema claro ("estética branca") do visual do Estúdio Kronos e as classes desta
   página. Carrega depois de nucleo.css, que é cópia idêntica à do modelo do kit:
   aqui só entram os tokens em :root e classes próprias (cookbook/15).
   Vale para index.html, privacidade.html e 404.html.

   Cada elemento vem de um componente do 21st.dev, portado para CSS e JS puro.
   O crédito de cada porte está no bloco em que ele é usado; a lista completa,
   com links, está em COMPONENTES.md. Ícones: Lucide (licença ISC).
   ========================================================================== */

/* ---------- Fontes servidas pelo próprio site (OFL; origem em assets/fonts/ORIGEM.txt) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

/* ---------- Tema: papel, tinta, laranja e ouro ---------- */
:root {
  color-scheme: light;
  --fundo: #FFFFFF;
  --cartao: #FFFFFF;
  --cartao-2: #F6F3EE;
  --tinta: #1E1915;
  --tinta-rgb: 30, 25, 21;
  --tinta-2: #3A322C;
  --suave: #5A5149;
  --linha: rgba(30, 25, 21, 0.12);
  --linha-forte: rgba(30, 25, 21, 0.2);
  --acento: #FF6A2B;
  --acento-rgb: 255, 106, 43;
  --acento-claro: #B23A0A;
  --ouro: #C9A36A;
  --ouro-rgb: 201, 163, 106;
  --destaque: #B23A0A;
  --particula-1: #FF8A55;
  --particula-2: #C9A36A;
  /* Papel da v5 (painel claro) e as cores de texto com contraste medido sobre branco e papel. */
  --papel: #F6F3EE;
  --papel-2: #EFEAE2;
  --papel-tinta: #1E1915;
  --papel-tinta-2: #5A5149;
  --laranja-texto: #B23A0A;
  --ouro-texto: #7A5C28;
  --mola: cubic-bezier(0.34, 1.36, 0.5, 1);
}

/* ---------- Base ---------- */
html { scroll-padding-top: 96px; }
::selection { background: rgba(var(--acento-rgb), 0.24); }
:focus-visible { outline: 2px solid var(--laranja-texto); outline-offset: 3px; }
.pular { color: #fff; }
p { text-wrap: pretty; }
.rotulo { color: var(--ouro-texto); font-weight: 500; }
.secao--papel { background: var(--papel); }
.cabeca-secao > p:last-child { color: var(--suave); }
.texto a, .nota a, .controles a, .pe a, .cartao p a { color: var(--laranja-texto); text-underline-offset: 3px; }
.mono { font-family: var(--f-mono); font-weight: 500; }
.so-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Movimento: ligado por padrão, mesmo quando o sistema pede menos (regra do dono, 06/11/2026).
   Quem quer menos movimento usa o botão do menu, que põe a classe "calmo" no html (nucleo.js). */

/* ---------- Vidro claro (Liquid Glass do Mindloop, Mohammad Shehadeh, MIT): a versão do núcleo em papel ---------- */
.vidro { background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(var(--tinta-rgb), 0.07), 0 16px 34px -24px rgba(var(--tinta-rgb), 0.4); }
.vidro::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.3) 22%, rgba(255, 255, 255, 0) 40%, rgba(var(--tinta-rgb), 0) 60%, rgba(var(--tinta-rgb), 0.05) 82%, rgba(var(--tinta-rgb), 0.13) 100%); }

/* ---------- Botões. Ímã: Magnetic Button (Mohammad Shehadeh, Hirael, MIT), porte em pagina.js ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease); }
.botao--cheio { background: var(--tinta); color: #fff; box-shadow: 0 14px 30px -16px rgba(var(--tinta-rgb), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.botao--cheio:hover { box-shadow: 0 18px 34px -14px rgba(var(--acento-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.botao--vazado { color: var(--tinta); background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.botao--vazado:hover { background: rgba(var(--tinta-rgb), 0.05); }
.botao svg { width: 16px; height: 16px; flex: none; transition: transform 0.25s var(--ease); }
.botao:hover svg { transform: translateX(3px); }

/* =============================================================================
   Menu cápsula: Morphing Scroll Navbar (laziekiki) + Border Beam (dillionverma), do núcleo.
   Nesta página a barra tem a geometria da cápsula desde o início e a mudança é feita só com
   transform e opacity: nada no menu desloca o layout.
   ========================================================================== */
.nav { --abre: 0px; }
@media (min-width: 1121px) { .nav { --abre: max(0px, calc((100vw - 2 * var(--lado) - min(1080px, 100vw - 24px)) / 2 + 9px)); } }
.nav__barra, .nav.compacto .nav__barra { width: min(1080px, calc(100% - 24px)); max-width: none; margin-top: 12px; padding: 7px 8px 7px 9px; gap: 16px; border-radius: 999px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transition: none; isolation: isolate; }
.nav__barra::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px var(--linha), 0 18px 44px -24px rgba(var(--tinta-rgb), 0.35); opacity: 0; transform: scale(1.03, 1.2); transition: opacity 0.4s var(--ease), transform 0.55s var(--ease); }
.nav.compacto .nav__barra::before { opacity: 1; transform: none; }
.nav .marca { gap: 12px; transform: translateX(calc(var(--abre) * -1)); transform-origin: left center; transition: transform 0.55s var(--ease); }
.nav .nav__dir { transform: translateX(var(--abre)); transition: transform 0.55s var(--ease); }
.nav.compacto .marca, .nav.compacto .nav__dir { transform: none; }
.marca__selo, .nav.compacto .marca__selo { width: 48px; height: 48px; margin-right: 0; transform: none; }
.marca__selo svg { width: 100%; height: 100%; }
.marca__selo::before { background: radial-gradient(circle, rgba(var(--acento-rgb), 0.42), transparent 70%); }
.marca__emblema { inset: 6px; width: 36px; height: 36px; background: #14100D; box-shadow: 0 0 0 1px rgba(var(--ouro-rgb), 0.85), 0 8px 18px -8px rgba(var(--acento-rgb), 0.7); }
.marca__nome b { gap: 7px; font-size: 14px; letter-spacing: 0.3em; color: var(--tinta); transition: transform 0.5s var(--ease); }
.marca__nome b i { font-size: 21px; }
.marca__nome small { margin-top: 6px; font-size: 9.5px; color: var(--ouro-texto); transition: opacity 0.3s var(--ease); }
.nav.compacto .marca__nome small { display: block; opacity: 0; }
.nav.compacto .marca__nome b { transform: translateY(8px); }
.nav__links a[aria-current="page"] { color: var(--tinta); background: rgba(var(--tinta-rgb), 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.nav__pilula { background: rgba(var(--tinta-rgb), 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.nav__para { padding: 11px 17px; background: var(--tinta); color: #fff; font-weight: 600; box-shadow: 0 12px 26px -16px rgba(var(--tinta-rgb), 0.8); transition: box-shadow 0.25s var(--ease); }
.nav__para:hover { box-shadow: 0 14px 28px -14px rgba(var(--acento-rgb), 0.6); }
.nav__botao { cursor: pointer; }
/* As três linhas ficam a 5,5 px uma da outra, que é o quanto o núcleo as desloca para formar o X. */
.nav__menu { align-content: center; }
.nav__menu span { margin: 2px auto; }
@media (max-width: 560px) {
  .nav.compacto .marca__nome small { display: none; }
  .nav.compacto .marca__nome b { transform: none; }
  .marca__nome b { font-size: 13px; letter-spacing: 0.26em; }
}
@media (max-width: 380px) { .marca__nome b { font-size: 12px; letter-spacing: 0.2em; gap: 5px; } .marca__nome b i { font-size: 19px; } .nav .marca { gap: 9px; } }

/* Folha do celular: fora da tela ela sai da leitura e do Tab (visibility), e o núcleo cuida do aria-hidden ao abrir e fechar. */
.folha-menu { align-content: start; padding-top: 108px; background: linear-gradient(180deg, #fff 40%, var(--papel)); visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s; overscroll-behavior: contain; }
.folha-menu.aberta { visibility: visible; transition: opacity 0.3s var(--ease), visibility 0s; }
.folha-menu a { color: var(--tinta); padding: 13px 0; }
.folha-menu a .serif { color: var(--laranja-texto); }
.folha-menu a[aria-current="page"] { color: var(--laranja-texto); }
html.menu-aberto { overflow: hidden; }

/* =============================================================================
   Topo
   ========================================================================== */
.abre { position: relative; padding-top: clamp(128px, 17vh, 190px); padding-bottom: clamp(56px, 9vh, 104px); background-image: none; --s: 0; }
/* Fundo: AuroraBackground (dhileepkumargm) em claro, sem arquivo; a luz segue o cursor (--hx e --hy vêm do holofote do núcleo, Spotlight Card de jahed). */
.abre__fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transform: scale(calc(1 + var(--s) * 0.08)); opacity: calc(1 - var(--s) * 0.5); }
.abre__fundo::before { content: ''; position: absolute; right: -14%; top: -18%; width: min(78vw, 980px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 0deg, rgba(var(--acento-rgb), 0.22), rgba(var(--ouro-rgb), 0.18) 25%, rgba(var(--acento-rgb), 0.05) 50%, rgba(var(--ouro-rgb), 0.22) 75%, rgba(var(--acento-rgb), 0.22)); filter: blur(70px); animation: girar 38s linear infinite; }
.abre__fundo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(520px circle at var(--hx, 74%) var(--hy, 34%), rgba(var(--acento-rgb), 0.13), transparent 62%); }
/* Grade de traços que foge do cursor: Interactive Dot Grid Hero (nexus-ui), porte em pagina.js. */
.abre__pontos { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(90% 80% at 78% 42%, #000 20%, rgba(0, 0, 0, 0.28) 62%, transparent 100%); mask-image: radial-gradient(90% 80% at 78% 42%, #000 20%, rgba(0, 0, 0, 0.28) 62%, transparent 100%); }
.abre__grade { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.abre__texto { transform: translateY(calc(var(--s) * -64px)); opacity: calc(1 - var(--s) * 1.15); }
.abre .selo { margin: 0; font-size: 13px; color: var(--suave); }
.abre h1 { margin: 22px 0 0; max-width: none; font-size: clamp(2.45rem, 4.7vw, 4.4rem); line-height: 1.04; letter-spacing: -0.035em; }
.abre__sub { margin: 26px 0 0; max-width: 34rem; font-size: clamp(1.05rem, 1.35vw, 1.16rem); line-height: 1.6; color: var(--suave); }
.abre__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
@media (max-width: 940px) { .abre__grade { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 420px) { .abre__acoes .botao { flex: 1 1 100%; } }

/* Título: Text Reveal (Mask) (soralabs), modo "words": cada palavra sobe de dentro da própria máscara,
   0,6 s, escalonadas em 0,06 s, cubic-bezier(.19,1,.22,1). Sem JS e sem movimento o título fica inteiro. */
.revela .rv { display: inline-block; clip-path: inset(-0.14em -0.08em -0.2em -0.08em); }
.revela .rv > span { display: inline-block; animation: revela 0.6s cubic-bezier(0.19, 1, 0.22, 1) both; animation-delay: calc(0.12s + var(--i, 0) * 0.06s); }
@keyframes revela { from { transform: translateY(125%); } }
.revela > .rv:nth-child(1) { --i: 0; } .revela > .rv:nth-child(2) { --i: 1; } .revela > .rv:nth-child(3) { --i: 2; } .revela > .rv:nth-child(4) { --i: 3; }
.revela > .rv:nth-child(5) { --i: 4; } .revela > .rv:nth-child(6) { --i: 5; } .revela > .rv:nth-child(7) { --i: 6; }
.revela .serif > .rv:nth-child(1) { --i: 7; } .revela .serif > .rv:nth-child(2) { --i: 8; } .revela .serif > .rv:nth-child(3) { --i: 9; }
.revela .serif > .rv:nth-child(4) { --i: 10; } .revela .serif > .rv:nth-child(5) { --i: 11; } .revela .serif > .rv:nth-child(6) { --i: 12; }

/* Janela do aplicativo. Container Scroll Animation (manuarora700, Aceternity): a tela chega inclinada e se endireita
   com a rolagem (rotateX 20 a 0 graus, perspectiva de 1000 px); Tilt (ibelick) e Spotlight Card (jahed) pelo núcleo. */
.abre__palco { perspective: 1000px; }
.janela { --reto: min(1, calc(var(--s) / 0.55)); position: relative; border-radius: 18px; background: #fff; overflow: hidden; transform-origin: 50% 60%; transform: rotateX(calc(var(--ty, 0) * 1deg + (1 - var(--reto)) * 13deg)) rotateY(calc(var(--tx, 0) * 1deg - (1 - var(--reto)) * 11deg)) scale(calc(1.04 - var(--reto) * 0.04)); transition: transform 0.45s var(--ease); animation: flutuar 8s ease-in-out infinite alternate; box-shadow: 0 0 0 1px var(--linha), 0 9px 20px rgba(var(--tinta-rgb), 0.08), 0 37px 37px rgba(var(--tinta-rgb), 0.07), 0 84px 50px rgba(var(--tinta-rgb), 0.04), 0 30px 60px -30px rgba(var(--acento-rgb), 0.38); }
.janela::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(360px circle at var(--hx, -999px) var(--hy, -999px), rgba(var(--acento-rgb), 0.07), transparent 60%); }
.janela__barra { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--linha); background: var(--papel); }
.janela__barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--papel-2); box-shadow: inset 0 0 0 1px var(--linha); }
.janela__barra span { margin-left: 8px; font: 500 11.5px/1.2 var(--f-mono); color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.janela__barra em { margin-left: auto; font-style: normal; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ouro-texto); }
.janela__corpo { display: grid; grid-template-columns: 196px minmax(0, 1fr); min-height: 372px; }

/* Árvore de pastas: File Tree (Halaska UI, MIT). Linhas com 7 px de vão, recuo de 16 px por nível, seta de 9 px que gira
   90 graus, filhos que abrem em 0,35 s com cubic-bezier(.2,0,0,1), etiqueta em pílula. Aqui ela é parte da ilustração:
   quem abre as pastas é a conversa de exemplo, não o clique. */
.arvore { padding: 14px 8px; border-right: 1px solid var(--linha); background: #FCFBF9; }
.arvore > p { margin: 0 0 8px; padding: 0 8px; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ouro-texto); }
.arvore ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.arvore__linha { display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 4px; font: 500 12px/1.55 var(--f-mono); letter-spacing: 0.01em; color: var(--tinta-2); white-space: nowrap; }
.arvore__linha svg { width: 13px; height: 13px; flex: none; color: var(--suave); }
.arvore__linha svg.seta { width: 9px; height: 9px; color: #8A8178; }
.arvore ul ul .arvore__linha { padding-left: 28px; font-size: 11.5px; color: var(--suave); }
.arvore__pasta--abre > .arvore__linha .arvore__selo { animation: fala-entra 0.5s var(--ease) both; animation-delay: var(--quando); }
.arvore__selo { margin-left: auto; padding: 1px 6px; border-radius: 999px; font: 500 9px/1.3 var(--f-mono); color: var(--laranja-texto); background: rgba(var(--acento-rgb), 0.12); }
.arvore__pasta--abre > .arvore__linha .seta { transform: rotate(90deg); animation: seta-abre 0.25s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: var(--quando); }
.arvore__pasta--abre > ul { overflow: hidden; animation: filhos-abrem 0.35s cubic-bezier(0.2, 0, 0, 1) both; animation-delay: var(--quando); }
.arvore__pasta--abre > .arvore__linha { animation: pasta-citada 1.6s var(--ease) both; animation-delay: var(--quando); }
.arvore__pasta--abre > ul .arvore__linha { background: rgba(var(--acento-rgb), 0.1); color: var(--laranja-texto); }
.arvore__pasta--abre > ul .arvore__linha svg { color: var(--laranja-texto); }
.arvore__pasta--1 { --quando: 2.7s; }
.arvore__pasta--2 { --quando: 6.6s; }
@keyframes seta-abre { from { transform: rotate(0deg); } }
@keyframes filhos-abrem { from { max-height: 0; opacity: 0; } to { max-height: 60px; opacity: 1; } }
@keyframes pasta-citada { 0% { background: rgba(var(--acento-rgb), 0); } 25% { background: rgba(var(--acento-rgb), 0.16); } 100% { background: rgba(var(--acento-rgb), 0); } }

/* Conversa de exemplo: Message Thread (Mohammad Shehadeh, Hirael, MIT) para o desenho (balão de quem pede à direita, resposta
   sem balão, fonte em pílula numerada, três pontos de "digitando") e Chat Messages (nexus-ui) para a ordem: cada fala
   entra em 0,5 s e a resposta espera 1,4 s de "digitando". As quatro falas já ocupam o lugar desde o início: nada pula. */
.conversa { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; counter-reset: fonte; }
.msg { position: relative; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tinta); animation: fala-entra 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--quando, 0s); }
.msg--voce { align-self: flex-end; max-width: 85%; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: var(--tinta); color: #fff; }
.msg--app { align-self: stretch; padding: 2px 2px 2px 0; }
.msg--app::before { content: ''; position: absolute; left: 2px; top: 8px; width: 30px; height: 6px; border-radius: 3px; opacity: 0; background: radial-gradient(circle at 3px 3px, var(--suave) 3px, transparent 3.5px) 0 0 / 12px 6px repeat-x; animation: digitando 1.4s ease-in-out both; animation-delay: calc(var(--quando, 0s) - 1.4s); }
.fonte { counter-increment: fonte; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 8px; padding: 2px 10px 2px 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--linha); font: 500 11px/1.5 var(--f-mono); color: var(--tinta-2); }
.fonte::before { content: counter(fonte); display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--papel-2); font-size: 10px; color: var(--suave); }
.msg--app .fonte { display: flex; width: fit-content; }
.conversa .msg:nth-child(1) { --quando: 0.6s; }
.conversa .msg:nth-child(2) { --quando: 2.7s; }
.conversa .msg:nth-child(3) { --quando: 4.5s; }
.conversa .msg:nth-child(4) { --quando: 6.6s; }
@keyframes fala-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes digitando { 0% { opacity: 0; transform: translateY(0); } 12%, 82% { opacity: 1; } 30%, 70% { transform: translateY(-2px); } 50% { transform: translateY(1px); } 100% { opacity: 0; transform: translateY(0); } }
/* Campo de pedido: a máquina de escrever do núcleo (Typewriter, odysseyui). */
.compositor { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha); }
.compositor .escrita { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compositor .escrita b { font-weight: 500; color: var(--tinta-2); }
.compositor .cursor-texto { background: var(--laranja-texto); }
.compositor__envia { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #fff; }
.compositor__envia svg { width: 13px; height: 13px; }
@media (max-width: 940px) {
  .abre__palco { max-width: 620px; }
  .janela { transform: rotateX(calc((1 - var(--reto)) * 20deg)) scale(calc(0.9 + var(--reto) * 0.1)); transform-origin: 50% 100%; --reto: min(1, calc(var(--s) / 0.42)); }
}
@media (max-width: 560px) {
  .janela__corpo { grid-template-columns: 1fr; min-height: 0; }
  .arvore { padding: 10px 8px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .arvore > p { display: none; }
  .arvore > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
  .arvore ul ul { display: none; }
  .arvore__linha .seta { display: none; }
  .arvore__pasta--abre > .arvore__linha { color: var(--laranja-texto); }
  .arvore__pasta--abre > .arvore__linha svg { color: var(--laranja-texto); }
  .conversa { padding: 14px 12px 12px; }
}

/* =============================================================================
   O que faz: ícones em vidro que se encaixam (núcleo, data-entrada), quatro por linha.
   Os ícones Lucide se desenham enquanto o ladrilho encaixa: a técnica de traço (pathLength de 0 a 1)
   é a dos Animated State Icons (dev.yadhakim), aqui presa à rolagem pelo --e do núcleo.
   ========================================================================== */
.faz .grade-icones { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; }
.faz .grade-icones article:nth-child(1) { --dx: -140px; --rz: -10deg; }
.faz .grade-icones article:nth-child(2) { --dx: -60px; --rz: -5deg; }
.faz .grade-icones article:nth-child(3) { --dx: 60px; --rz: 5deg; }
.faz .grade-icones article:nth-child(4) { --dx: 140px; --rz: 10deg; }
.faz .icone { max-width: 132px; border-radius: 1.7rem; }
.faz .icone svg { width: 40%; height: 40%; color: var(--laranja-texto); }
.traco > * { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--e, 1)); }
.grade-icones h3 { margin-top: 22px; font-size: 1.08rem; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; }
.grade-icones p { font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 1000px) { .faz .grade-icones { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; } }
@media (max-width: 640px) { .faz .grade-icones { gap: 36px 14px; } .faz .icone { max-width: 104px; } .grade-icones h3 { font-size: 1rem; } .grade-icones p { font-size: 0.9rem; } }

/* A frase: Scroll word reveal (motiondotdev), do núcleo. O silêncio antes do pico. */
.frase { padding-block: clamp(40px, 7vw, 90px) clamp(110px, 13vw, 170px); }
.frase .palavras { margin-top: 0; max-width: 58rem; color: var(--tinta); }
.frase .palavras span.forte { color: var(--laranja-texto); }

/* =============================================================================
   Como funciona: a cena fixa (núcleo, data-cena e data-passo) e a assinatura da página, "a linha citada".
   A pasta: Glassmorphism Folder Cards (kedhareswer): os dois contornos (fundo com aba, frente de vidro), a dobradiça
   (0 a -24 graus com perspectiva de 760 px), as folhas que saem em leque (origem embaixo, translate + rotate por
   posição) e a folha nova que cai e faz a frente ceder. O leque aberto em fileira segue a Interactive Folder Gallery
   (alexperezcedeno). O fio: Animated Beam (dillionverma, Magic UI): curva quadrática entre dois elementos reais, trilho
   apagado e uma luz que corre com cubic-bezier(.16,1,.3,1). Tudo preso à rolagem por variáveis que pagina.js publica;
   sem JS e no modo calmo valem os valores finais escritos aqui.
   ========================================================================== */
#como { --altura: 400vh; background: var(--papel); }
.passos li { color: #6A6058; }
.passos li::before { color: #6A6058; }
.passos li h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.passos li.feito { color: var(--suave); }
.passos li.agora { color: var(--tinta); background: #fff; box-shadow: 0 0 0 1px var(--linha), 0 18px 34px -28px rgba(var(--tinta-rgb), 0.5); }
.passos li.agora::before { color: var(--laranja-texto); }
/* Os três textos ficam sempre abertos: o passo atual ganha o cartão, e nada muda de altura quando o passo troca. */
.passos li span, .passos li.agora span { max-height: none; opacity: 1; }
.passos li.agora span { color: var(--suave); }
.cena__texto > p.rotulo { margin: 0; font-size: 12px; color: var(--ouro-texto); }
.cena__texto h2 { margin-top: 18px; }

.pc {
  --abre: 1; --leque: 1; --rotulos: 1; --chat: 1; --q1: 1; --le: 1; --mostra: 1; --puxa: 0.8; --ergue: 0; --fio: 1; --r1: 1; --troca: 1; --q2: 1; --novo: 1; --r2: 1; --sai1: 0;
  position: relative; container-type: inline-size; width: min(100%, 720px, calc((100svh - 170px) * 1.2)); aspect-ratio: 720 / 600; margin-inline: auto;
  transform: perspective(1600px) rotateX(calc(var(--ty, 0) * 0.6deg)) rotateY(calc(var(--tx, 0) * 0.6deg)); transition: transform 0.6s var(--ease); background-image: none;
}
.pc__pasta { position: absolute; left: 3cqw; bottom: 6cqw; width: 46cqw; aspect-ratio: 340 / 272; }
.pc__sombra { position: absolute; left: 5%; right: 5%; bottom: -2%; height: 22%; border-radius: 40px; background: rgba(var(--tinta-rgb), 0.3); filter: blur(22px); }
/* Os cantos arredondados são a reserva para o navegador que não achar o contorno (clip-path por #id em folha externa). */
.pc__fundo { position: absolute; inset: 0; border-radius: 6.5% / 8.1%; overflow: hidden; clip-path: url(#pasta-fundo); background: linear-gradient(180deg, #F3EFE9, #E2DBD0); }
.pc__fundo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(122, 92, 40, 0.1), rgba(122, 92, 40, 0.22)); opacity: var(--abre); }
.pc__folhas { position: absolute; inset: 0; z-index: 5; clip-path: inset(-100cqw -100cqw 3% -100cqw); }
.pc__folha {
  --slot: 0; --ordem: 0; --l: var(--leque);
  position: absolute; left: 28.5%; top: 14%; width: 43.5%; aspect-ratio: 20 / 25; padding: 8% 7% 0; border-radius: 6% / 5%; overflow: hidden;
  background: linear-gradient(180deg, #fff, #F7F5F1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 0.5px rgba(var(--tinta-rgb), 0.16), 0 10px 26px -8px rgba(var(--tinta-rgb), 0.3);
  transform-origin: 50% 100%; z-index: calc(1 + var(--ordem));
  transform: translate(calc(var(--l) * var(--slot) * 11.5cqw), calc(10cqw - var(--l) * 25cqw)) rotate(calc(var(--l) * var(--slot) * 3.4deg));
  display: flex; flex-direction: column; gap: 7%;
}
.pc__folha:nth-child(1) { --slot: -1.5; --ordem: 0; --l: var(--leque-0, var(--leque)); }
.pc__folha:nth-child(2) { --slot: -0.5; --ordem: 1; --l: var(--leque-1, var(--leque)); }
.pc__folha:nth-child(3) { --slot: 0.5; --ordem: 2; --l: var(--leque-2, var(--leque)); }
.pc__folha:nth-child(4) { --slot: 1.5; --ordem: 3; --l: var(--leque-3, var(--leque)); }
/* O nome de cada folha só aparece com o leque já aberto (--rotulos): enquanto as folhas ainda deslizam umas sobre as outras, nenhuma cobre o nome da vizinha. */
.pc__folha b { font: 500 clamp(8px, 1.55cqw, 11.5px)/1.3 var(--f-mono); letter-spacing: 0.01em; color: var(--tinta-2); white-space: nowrap; opacity: var(--rotulos); }
.pc__folha i { display: block; height: 4%; min-height: 3px; border-radius: 99px; background: rgba(var(--tinta-rgb), 0.11); }
.pc__folha i:nth-of-type(1) { width: 86%; } .pc__folha i:nth-of-type(2) { width: 92%; } .pc__folha i:nth-of-type(3) { width: 64%; } .pc__folha i:nth-of-type(4) { width: 88%; } .pc__folha i:nth-of-type(5) { width: 42%; }
/* A folha lida: é puxada para cima do leque (sem trocar a ordem das folhas), cresce, e as duas linhas acendem uma depois da outra. Depois desce e fica meio puxada. */
.pc__folha--lida { transform: translate(calc(var(--l) * var(--slot) * 11.5cqw + var(--ergue) * 12cqw), calc(10cqw - var(--l) * 25cqw - var(--puxa) * 26cqw)) rotate(calc(var(--l) * var(--slot) * 3.4deg * (1 - var(--puxa)))) scale(calc(1 + var(--ergue) * 0.28)); }
/* As duas linhas da nota são traços, como nas outras folhas, enquanto a folha está no leque (a vizinha cobre a ponta delas);
   viram texto quando a folha é puxada para fora (--mostra) e ficam como texto dali em diante, já acima das outras. */
.pc__lida { --a: clamp(0, calc((var(--le) - var(--d, 0)) * 2.4), 1); display: block; margin-inline: -4%; padding: 2% 4%; border-radius: 4px; font: 500 clamp(6px, 1.22cqw, 9px)/1.35 var(--f-sans); color: color-mix(in srgb, color-mix(in srgb, var(--laranja-texto) calc(var(--a) * 100%), #7C736B) calc(var(--mostra) * 100%), transparent); background: linear-gradient(rgba(var(--acento-rgb), 0.16), rgba(var(--acento-rgb), 0.16)) no-repeat 0 0 / calc(var(--a) * 100%) 100%, linear-gradient(rgba(var(--tinta-rgb), calc(0.11 * (1 - var(--mostra)))), rgba(var(--tinta-rgb), calc(0.11 * (1 - var(--mostra))))) no-repeat 5% 50% / 86% 26%; }
.pc__lida + .pc__lida { --d: 0.5; }
/* A folha nova sai de dentro da pasta (atrás da frente de vidro) e sobe até o leque, girando até o lugar. Nunca passa pela
   coluna da conversa nem cruza o fio; parada, fica a uns 3cqw da conversa e abaixo do nome da folha "rascunhos". */
.pc__folha--nova { --slot: 1.5; --ordem: 26; left: 28.5%; transform: translate(calc(var(--slot) * 11.5cqw - 0.6cqw), calc(-6cqw + (1 - var(--novo)) * 19cqw)) rotate(calc((var(--slot) * 3.4deg + 3deg) * var(--novo))); opacity: clamp(0, calc(var(--novo) * 5), 1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(var(--acento-rgb), 0.55), 0 12px 28px -8px rgba(var(--acento-rgb), 0.45); }
.pc__folha--nova b { opacity: 1; }
.pc__folha--nova b { color: var(--laranja-texto); font-size: clamp(7px, 1.36cqw, 10px); }
.pc__folha--nova em { align-self: flex-start; padding: 1px 6px; border-radius: 999px; font: 500 clamp(7px, 1.3cqw, 9.5px)/1.4 var(--f-mono); font-style: normal; color: var(--laranja-texto); background: rgba(var(--acento-rgb), 0.14); }
.pc__frente { position: absolute; left: 0; right: 0; bottom: 0; height: 72.8%; z-index: 10; border-radius: 6.5% / 11.1%; overflow: hidden; clip-path: url(#pasta-frente); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.62) 42%, rgba(252, 250, 247, 0.95) 100%); transform-origin: 50% 100%; transform: perspective(760px) rotateX(calc(var(--abre) * -24deg)) scale(calc(1 + var(--cede, 0) * 0.018), calc(1 - var(--cede, 0) * 0.025)); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 0 8% 10%; }
.pc__frente::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at calc(50% + var(--tx, 0) * 4%) 20%, rgba(255, 255, 255, 0.75), transparent 70%); }
.pc__frente strong { position: relative; font-size: clamp(11px, 2.5cqw, 18px); font-weight: 500; letter-spacing: -0.01em; color: var(--tinta); }
.pc__frente small { position: relative; font: 500 clamp(8px, 1.65cqw, 12px)/1.4 var(--f-mono); color: var(--suave); }
.pc__aro { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72.8%; z-index: 11; overflow: visible; pointer-events: none; transform-origin: 50% 100%; transform: perspective(760px) rotateX(calc(var(--abre) * -24deg)); }
.pc__aro path { fill: none; stroke: rgba(255, 255, 255, 0.95); stroke-width: 2.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 1px rgba(var(--tinta-rgb), 0.18)); }

/* A conversa da cena e a chave da IA. */
.pc__chat { position: absolute; right: 0; top: 4cqw; width: 41cqw; z-index: 30; padding: clamp(10px, 2cqw, 16px); border-radius: clamp(14px, 2.6cqw, 20px); display: flex; flex-direction: column; gap: clamp(8px, 1.5cqw, 12px); counter-reset: fonte; opacity: var(--chat); transform: translateY(calc((1 - var(--chat)) * 5cqw)); overflow: visible; }
.pc__chave { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: rgba(var(--tinta-rgb), 0.06); box-shadow: inset 0 0 0 1px rgba(var(--tinta-rgb), 0.06); }
.pc__chave i { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--linha), 0 6px 14px -8px rgba(var(--tinta-rgb), 0.6); transform: translateX(calc(var(--troca) * 100%)); }
.pc__chave span { position: relative; z-index: 1; padding: 6px 4px; text-align: center; font-size: clamp(9.5px, 1.7cqw, 12px); font-weight: 600; white-space: nowrap; color: var(--suave); }
.pc__chave span:first-of-type { color: color-mix(in srgb, var(--suave) calc(var(--troca) * 100%), var(--tinta)); }
.pc__chave span:last-of-type { color: color-mix(in srgb, var(--tinta) calc(var(--troca) * 100%), var(--suave)); }
.pc__par { display: flex; flex-direction: column; gap: clamp(6px, 1.2cqw, 9px); }
.pc__par .msg { animation: none; font-size: clamp(10.5px, 1.82cqw, 13px); line-height: 1.45; }
.pc__par .msg--app::before { content: none; }
.pc__par .msg--voce { padding: 0.6em 1em; }
.pc__par .fonte { font-size: clamp(8.5px, 1.5cqw, 10.5px); margin-top: 0.6em; }
.pc__par--1 .msg--voce { opacity: var(--q1); transform: translateY(calc((1 - var(--q1)) * 10px)); }
.pc__par--1 .msg--app { opacity: var(--r1); transform: translateY(calc((1 - var(--r1)) * 10px)); }
.pc__par--2 .msg--voce { opacity: var(--q2); transform: translateY(calc((1 - var(--q2)) * 10px)); }
.pc__par--2 .msg--app { opacity: var(--r2); transform: translateY(calc((1 - var(--r2)) * 10px)); }
.pc__par--1 .fonte { box-shadow: inset 0 0 0 1px rgba(var(--acento-rgb), calc(0.12 + var(--fio) * 0.5)); }

@media (min-width: 901px) { .pc__chat.vidro { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .pc__chat.vidro::before { content: none; } .pc__chave { background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--linha); } .pc__chave i { background: var(--tinta); box-shadow: none; } .pc__chave span:first-of-type { color: color-mix(in srgb, var(--suave) calc(var(--troca) * 100%), #fff); } .pc__chave span:last-of-type { color: color-mix(in srgb, #fff calc(var(--troca) * 100%), var(--suave)); } }

/* O fio de luz da linha até a fonte citada. */
.pc__fio { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 28; overflow: visible; pointer-events: none; opacity: calc(var(--fio-vivo, 0) * (1 - var(--troca) * 0.55)); }
.pc__fio path { fill: none; stroke-linecap: round; }
.pc__fio .trilho { stroke: var(--laranja-texto); stroke-width: 1.6; stroke-opacity: 0.55; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--fio)); }
.pc__fio .luz { stroke: #FFB892; stroke-width: 2.6; stroke-dasharray: 0.16 1; stroke-dashoffset: 0.16; opacity: 0; }
.montada .pc__fio .luz, .pc.fio-aceso .pc__fio .luz { opacity: 1; animation: fio-corre 4.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes fio-corre { from { stroke-dashoffset: 0.16; } to { stroke-dashoffset: -1; } }
.pc__selo { position: absolute; left: 3cqw; bottom: 0; margin: 0; font: 500 11px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ouro-texto); }

@media (max-width: 900px) {
  #como .cena__palco { padding-top: 84px; padding-bottom: 14px; gap: 10px; align-content: center; }
  #como .cena__texto h2 { margin-top: 8px; font-size: 1.45rem; line-height: 1.12; }
  #como .cena__dir { margin-top: 0; }
  .passos { margin-top: 10px; }
  .passos li { padding: 9px 11px; }
  .passos li h3 { font-size: 14.5px; }
  .passos li span { font-size: 13px; line-height: 1.45; }
  /* No celular o núcleo esconde (display: none) os passos que não são o atual. Aqui os três ocupam a mesma célula e só o
     atual aparece: a altura fica reservada pelo maior (nada pula na troca) e a leitura de tela continua com os três.
     Só vale com o núcleo rodando (html.js); sem ele, os três ficam em lista. */
  .passos li:not(.agora) { display: grid; }
  html.js .passos { display: grid; }
  html.js .passos li { grid-area: 1 / 1; align-self: start; opacity: 0; transition: opacity 0.3s var(--ease), color 0.3s var(--ease); }
  html.js .passos li.agora { opacity: 1; }
  .pc { width: min(100%, 430px, calc(100svh - 318px)); aspect-ratio: 100 / 102; }
  .pc__pasta { left: 25cqw; bottom: auto; top: 31cqw; width: 50cqw; }
  .pc__folha { transform: translate(calc(var(--l) * var(--slot) * 19.5cqw), calc(11cqw - var(--l) * 29.6cqw)) rotate(calc(var(--l) * var(--slot) * 3.4deg)); left: 27%; width: 46%; aspect-ratio: 23 / 29; }
  .pc__folha b { font-size: clamp(7.5px, 2.5cqw, 10px); }
  .pc__folha--lida { transform: translate(calc(var(--l) * var(--slot) * 19.5cqw), calc(11cqw - var(--l) * 29.6cqw - var(--puxa) * 14cqw)) rotate(calc(var(--l) * var(--slot) * 3.4deg * (1 - var(--puxa)))) scale(calc(1 + var(--ergue) * 0.18)); }
  .pc__lida { font-size: 0; line-height: 0; height: 5%; min-height: 4px; padding: 0; margin-inline: 0; width: 88%; border-radius: 99px; background: linear-gradient(var(--acento), var(--acento)) no-repeat 0 0 / calc(var(--a) * 100%) 100%, rgba(var(--tinta-rgb), 0.11); }
  /* No celular a folha nova também sai de dentro da pasta. É um pouco menor que as outras, para caber entre o nome da
     folha "rascunhos" e o cartão da conversa, e só aparece quando já está acima do cartão. */
  .pc__folha--nova { left: 31.5%; width: 37%; transform: translate(calc(var(--slot) * 19.5cqw + 2.5cqw), calc(-9.6cqw + (1 - var(--novo)) * 23cqw)) rotate(calc((var(--slot) * 3.4deg + 3deg) * var(--novo))); opacity: clamp(0, calc((var(--novo) - 0.8) * 6), 1); }
  .pc__folha--nova b { font-size: 0; }
  .pc__folha--nova b::after { content: 'aviso'; font-size: clamp(7.5px, 2.5cqw, 10px); }
  .pc__folha--nova em { font-size: clamp(7px, 2.2cqw, 9px); }
  .pc__frente strong { font-size: clamp(10px, 3.1cqw, 13px); }
  .pc__frente small { font-size: clamp(7.5px, 2.3cqw, 10px); white-space: nowrap; }
  .pc__chat { left: 2cqw; right: 2cqw; top: auto; bottom: 0; width: auto; padding: 9px 10px 10px; gap: 7px; border-radius: 16px; transform: translateY(calc((1 - var(--chat)) * 8cqw)); }
  .pc__chave span { font-size: 10.5px; padding: 4px; }
  .pc__par .msg { font-size: clamp(10.5px, 3.3cqw, 12.5px); line-height: 1.4; }
  .pc__par .fonte { font-size: 9.5px; margin-top: 5px; }
  .pc__par--1 { opacity: calc(1 - var(--sai1)); }
  .pc__par--2 { position: absolute; left: 10px; right: 10px; bottom: 10px; }
  .pc__selo { display: none; }
}
/* Celular baixo (até 700 px de altura): com os textos mais longos, título e passo um ponto menores para a cena caber sem encostar no menu. */
@media (max-width: 900px) and (max-height: 700px) {
  #como .cena__palco { padding-top: 82px; padding-bottom: 6px; }
  #como .cena__texto h2 { margin-top: 4px; font-size: 1.25rem; }
  .passos { margin-top: 8px; }
  .passos li { padding: 7px 11px; }
  .passos li span { font-size: 12px; line-height: 1.38; }
}
/* Celular alto: o palco ganha altura e a conversa desce, deixando a pasta inteira à vista. */
@media (max-width: 900px) and (min-height: 760px) { .pc { aspect-ratio: 100 / 124; width: min(100%, 430px, calc((100svh - 318px) * 0.8)); } }

/* Modo calmo e sem JavaScript: a cena deixa de grudar e mostra o estado final, com os três passos abertos. */
html.calmo .cena { height: auto; }
html.calmo .cena__palco { position: relative; height: auto; overflow: visible; padding-block: clamp(110px, 13vw, 150px) clamp(70px, 9vw, 110px); }
html.calmo .passos { display: grid; }
html.calmo .passos li, html.calmo .passos li.feito, html.calmo .passos li.agora { grid-area: auto; opacity: 1; color: var(--tinta); background: none; box-shadow: none; }
html.calmo .passos li span { max-height: none; opacity: 1; color: var(--suave); }
html.calmo .passos li.agora::before { color: #6A6058; }
html.calmo .pc { width: min(100%, 720px); }
@media (max-width: 900px) {
  html.calmo .cena__texto > p { display: block; }
  html.calmo .pc { width: min(100%, 430px); aspect-ratio: auto; padding-top: 86cqw; }
  html.calmo .pc__chat { position: relative; left: auto; right: auto; bottom: auto; }
  html.calmo .pc__par--1 { opacity: 1; }
  html.calmo .pc__par--2 { position: static; }
}

/* =============================================================================
   Google Workspace: rede de integrações do núcleo (Animated Beam Integration, abushaidislam7) em papel,
   a janela de permissão (Alert Dialog, shadcn) e os cinco controles que acendem em sequência (núcleo, data-sequencia).
   ========================================================================== */
.google__topo { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.google__baixo { margin-top: clamp(48px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.google__por h3 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
.google__por > p { margin: 12px 0 0; font-size: 1.04rem; line-height: 1.6; color: var(--suave); }
@media (max-width: 940px) { .google__topo, .google__baixo { grid-template-columns: 1fr; } }

.rede { max-width: 580px; }
.rede::before { background: conic-gradient(from 0deg, transparent, rgba(var(--acento-rgb), 0.2), transparent 30%, rgba(var(--ouro-rgb), 0.22), transparent 62%); }
.rede .base { stroke: rgba(var(--tinta-rgb), 0.1); }
.rede .liga { stroke: var(--acento); stroke-opacity: 0.9; }
.rede .pulso { stroke: var(--laranja-texto); }
.rede .orbita { stroke: rgba(var(--ouro-rgb), 0.55); }
.rede .orbita-2 { stroke: rgba(var(--acento-rgb), 0.3); }
.no__caixa { background: #fff; color: var(--tinta); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--linha), 0 12px 22px -14px rgba(var(--tinta-rgb), 0.5); }
.no__caixa img { width: 46%; height: 46%; opacity: 0.86; }
.no.ligado .no__caixa { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(var(--acento-rgb), 0.7), 0 10px 24px -10px rgba(var(--acento-rgb), 0.55); }
.no b, .no small { background: rgba(255, 255, 255, 0.92); color: var(--tinta); }
.no small { color: var(--suave); }
/* O quinto ponto é o seu Claude: os dados saem do computador para ele (a luz corre no outro sentido). */
.rede .no:nth-child(7) .no__caixa { background: var(--tinta); box-shadow: 0 0 0 1px var(--tinta), 0 12px 22px -12px rgba(var(--tinta-rgb), 0.7); }
.rede .no:nth-child(7) .no__caixa img { filter: invert(1); opacity: 1; }
.rede svg g:nth-child(2) path:nth-child(15) { animation-direction: reverse; }
.nucleo { width: 24%; }
.nucleo__orbe { overflow: hidden; background: #14100D; box-shadow: 0 0 0 1px rgba(var(--ouro-rgb), 0.9), 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 0 8px var(--linha), 0 18px 40px -14px rgba(var(--acento-rgb), 0.7); }
.nucleo__orbe img { width: 100%; height: 100%; display: block; object-fit: cover; }
.nucleo::after { background: radial-gradient(circle, rgba(var(--acento-rgb), 0.26), transparent 62%); }
.nucleo__rotulo { top: calc(100% + 18px); background: rgba(255, 255, 255, 0.94); box-shadow: 0 0 0 1px var(--linha); }
.nucleo__rotulo b { color: var(--tinta); }
.nucleo__rotulo small { color: var(--ouro-texto); }

/* Janela de permissão (exemplo): Alert Dialog (shadcn): grade com 1,5 rem de respiro, título de 18 px e peso 600,
   descrição apagada, rodapé com os dois botões à direita (o de recusar em contorno, o de permitir cheio), cantos de
   8 px e entrada com zoom de 0,95 a 1 em 0,2 s. Aqui é ilustração: não abre nem bloqueia nada. */
.portao { margin-top: 30px; max-width: 380px; padding: 22px; border-radius: 14px; background: #fff; display: grid; gap: 14px; box-shadow: 0 0 0 1px var(--linha), 0 10px 15px -3px rgba(var(--tinta-rgb), 0.1), 0 30px 60px -30px rgba(var(--tinta-rgb), 0.45); }
.js [data-sobe].portao.esperando { transform: translateY(24px) scale(0.95); }
.portao__selo { margin: 0; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ouro-texto); }
.portao__titulo { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--tinta); }
.portao__titulo svg { width: 22px; height: 22px; flex: none; color: var(--laranja-texto); }
.portao dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; padding: 12px 14px; border-radius: 10px; background: var(--papel); font-size: 14px; line-height: 1.4; }
.portao dt { color: var(--suave); }
.portao dd { margin: 0; font-weight: 500; color: var(--tinta); }
.portao__botoes { display: flex; justify-content: flex-end; gap: 8px; }
.portao__botoes span { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.portao__botoes span:first-child { color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.portao__botoes span:last-child { background: var(--tinta); color: #fff; animation: pede 2.6s ease-in-out infinite; }
@keyframes pede { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--acento-rgb), 0.5); } 50% { box-shadow: 0 0 0 9px rgba(var(--acento-rgb), 0); } }
@media (max-width: 420px) { .portao__botoes { flex-direction: column-reverse; } }

.controles { list-style: none; margin: 0; padding: 0; display: grid; }
.controles li { --v: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--linha); }
.controles li:last-child { border-bottom: 1px solid var(--linha); }
.controles__icone { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; transform: scale(calc(0.7 + var(--v) * 0.3)); opacity: calc(0.35 + var(--v) * 0.65); }
.controles__icone svg { width: 21px; height: 21px; color: var(--laranja-texto); }
.controles__icone svg > * { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--v)); }
.controles li > div:last-child { opacity: calc(0.4 + var(--v) * 0.6); transform: translateX(calc((1 - var(--v)) * 14px)); }
.controles b { display: block; font-size: 1.04rem; font-weight: 600; line-height: 1.35; color: var(--tinta); }
.controles span { display: block; margin-top: 3px; font-size: 0.97rem; line-height: 1.55; color: var(--suave); }
.nota { margin: 30px 0 0; padding: 18px 20px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--linha), inset 3px 0 0 var(--acento); font-size: 0.94rem; line-height: 1.6; color: var(--suave); }

/* =============================================================================
   Fechamento: dois cartões com a luz do cursor (Spotlight Card, jahed, do núcleo).
   ========================================================================== */
.contato { background: var(--papel); border-top: 1px solid var(--linha); }
.contato__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cartao { position: relative; padding: clamp(24px, 3vw, 34px); border-radius: 22px; background-color: #fff; box-shadow: 0 0 0 1px var(--linha), 0 24px 44px -34px rgba(var(--tinta-rgb), 0.5); display: flex; flex-direction: column; align-items: flex-start; }
.cartao__icone { width: 46px; height: 46px; margin-bottom: 22px; border-radius: 14px; display: grid; place-items: center; }
.cartao__icone svg { width: 21px; height: 21px; color: var(--laranja-texto); }
.cartao h2 { margin-top: 14px; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.08; letter-spacing: -0.02em; }
.cartao > p:not(.rotulo) { margin: 14px 0 24px; max-width: 30rem; font-size: 1.04rem; line-height: 1.6; color: var(--suave); }
.cartao .botao { margin-top: auto; }
.cartao p a[href^="mailto:"], .pe a[href^="mailto:"] { white-space: nowrap; }
@media (max-width: 760px) { .contato__grade { grid-template-columns: 1fr; } }

/* =============================================================================
   Rodapé. A tipografia gigante vem do Motion Footer (jahed): texto vazado com traço de 1 px e gradiente que some,
   entrando de baixo e crescendo com a rolagem. Sem a cortina e sem a faixa: é uma página de leitura.
   ========================================================================== */
.pe { position: relative; overflow: hidden; border-top: 1px solid var(--linha); padding-block: 34px calc(40px + env(safe-area-inset-bottom, 0px)); font-size: 13.5px; line-height: 1.6; color: var(--suave); }
.pe .dentro { position: relative; z-index: 1; display: grid; gap: 10px; }
.pe p { margin: 0; }
.pe__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.pe__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pe__gigante { --e: 1; margin: 26px 0 -0.16em !important; white-space: nowrap; text-align: center; font-size: clamp(3rem, 12.6vw, 12rem); font-weight: 600; line-height: 0.86; letter-spacing: -0.05em; color: transparent; background: linear-gradient(180deg, rgba(var(--tinta-rgb), 0.16) 0%, rgba(var(--tinta-rgb), 0.03) 90%); -webkit-background-clip: text; background-clip: text; transform: translateY(calc((1 - var(--e)) * 8vh)) scale(calc(0.86 + var(--e) * 0.14)); opacity: var(--e); user-select: none; pointer-events: none; }
.pe__gigante i { font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.03em; }

/* =============================================================================
   Política de Privacidade: página de leitura. Índice: Table of Contents (Mohammad Shehadeh, Hirael): trilho de
   1 px à esquerda, cada link com a sua borda sobre o trilho; a borda do item atual acende (0,15 s) e a dos outros apaga.
   ========================================================================== */
.texto { padding-top: clamp(124px, 16vh, 168px); padding-bottom: clamp(64px, 9vh, 104px); }
.texto .dentro { max-width: 66rem; }
.texto__cabeca { max-width: 47rem; }
.texto h1 { margin: 18px 0 0; max-width: none; font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.02; }
.texto .data { margin: 16px 0 0; font-size: 15px; color: var(--suave); }
.resumo { margin-top: 34px; padding: 24px 26px; border-radius: 18px; background: var(--papel); }
.resumo p { margin: 0 0 10px; }
.resumo ul { margin-bottom: 0; }
.leitura { margin-top: 44px; display: grid; grid-template-columns: 13rem minmax(0, 47rem); gap: 0 clamp(32px, 5vw, 72px); align-items: start; }
.corpo { font-size: 17px; line-height: 1.7; color: var(--tinta); }
.texto p { margin: 0 0 14px; }
.texto ul:not(.sumario__lista) { margin: 0 0 14px; padding-left: 22px; }
.texto li { margin-bottom: 8px; }
.texto li > ul { margin: 8px 0 0; }
.resumo, .resumo li { font-size: 17px; line-height: 1.65; }
.corpo h2 { margin: 60px 0 14px; font-size: clamp(1.45rem, 2.6vw, 1.9rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.corpo > h2:first-child { margin-top: 0; }
.corpo h3 { margin: 32px 0 8px; font-size: 1.16rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.texto code { font: 500 0.86em var(--f-mono); padding: 2px 6px; border-radius: 6px; background: var(--papel); }
.rolagem { overflow-x: auto; margin: 0 0 14px; border-radius: 14px; box-shadow: 0 0 0 1px var(--linha); }
.texto table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.55; }
.texto th, .texto td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--linha); }
.texto tr:last-child td { border-bottom: 0; }
.texto th { font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; color: var(--ouro-texto); background: var(--papel); }
.texto .nota { margin: 18px 0 14px; font-size: 15px; }
.sumario { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 12px; }
.sumario__rotulo { margin: 0 !important; font: 500 10px/1.4 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave); }
.sumario__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--linha-forte); }
.sumario__lista li { margin: 0; }
.sumario a { display: block; margin-left: -1px; padding: 4px 0 4px 16px; border-left: 1px solid transparent; font-size: 14px; line-height: 1.45; color: var(--suave); text-decoration: none; transition: color 0.15s ease-out, border-color 0.15s ease-out; }
.sumario a:hover { color: var(--tinta); }
.sumario a[aria-current="true"] { border-left-color: var(--laranja-texto); color: var(--tinta); font-weight: 500; }
@media (max-width: 1000px) {
  .leitura { grid-template-columns: 1fr; }
  .sumario { position: static; margin-bottom: 44px; }
  .sumario__lista { flex-direction: row; flex-wrap: wrap; gap: 8px; border-left: 0; }
  .sumario a, .sumario a[aria-current="true"] { margin: 0; padding: 8px 14px; border: 0; border-radius: 999px; font-size: 13.5px; font-weight: 400; box-shadow: inset 0 0 0 1px var(--linha); }
  .sumario a[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--laranja-texto); }
}
@media (max-width: 560px) { .corpo, .resumo, .resumo li { font-size: 16.5px; } .resumo { padding: 20px 20px; } .texto th, .texto td { padding: 10px 12px; } }

/* =============================================================================
   404: Not Found 404 Page (Mohammad Shehadeh, Hirael): coluna estreita alinhada à esquerda, sobrelinha mono,
   título em serifa, dois botões e a lista "tente um destes" com a seta que aparece no passar do mouse.
   ========================================================================== */
.perdida { min-height: 82vh; display: flex; align-items: center; padding-block: clamp(124px, 16vh, 168px) 80px; position: relative; overflow: hidden; }
.perdida__grade { position: relative; z-index: 1; width: 100%; max-width: 66rem; display: flex; align-items: center; justify-content: space-between; gap: clamp(28px, 6vw, 88px); }
.perdida__coluna { flex: 1 1 auto; min-width: 0; max-width: 42rem; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* A pasta da página inicial, aberta e vazia. */
.pc--vazia { flex: 0 1 380px; width: auto; min-width: 240px; aspect-ratio: 1 / 1.05; margin: 0; transform: none; }
.pc--vazia .pc__pasta { left: 8cqw; bottom: 8cqw; width: 84cqw; animation: flutuar 8s ease-in-out infinite alternate; }
.pc__folha--falta { left: 30%; top: 14%; width: 40%; padding: 0; align-items: center; justify-content: center; background: none; box-shadow: none; border: 1.5px dashed rgba(var(--tinta-rgb), 0.28); transform: translate(0, -34cqw) rotate(-6deg); }
.pc__folha--falta b { font: italic 400 clamp(22px, 9cqw, 40px)/1 var(--f-serif); color: var(--laranja-texto); }
@media (max-width: 860px) { .pc--vazia { display: none; } }
.perdida__sobre { margin: 0; font: 500 11px/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ouro-texto); }
.perdida h1 { margin: 0; max-width: none; font-size: clamp(3rem, 9vw, 4.6rem); line-height: 1; letter-spacing: -0.035em; }
.perdida__texto { margin: 0; max-width: 28rem; font-size: 1.1rem; line-height: 1.6; color: var(--suave); }
.perdida__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.perdida__rotas { margin-top: 24px; width: 100%; padding-top: 24px; border-top: 1px solid var(--linha); }
.perdida__rotas ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.perdida__rotas a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; border-bottom: 1px solid var(--linha); border-radius: 8px 8px 0 0; text-decoration: none; transition: background-color 0.15s ease-out; }
.perdida__rotas li:last-child a { border-bottom: 0; }
.perdida__rotas a:hover { background: var(--papel); }
.perdida__rotas a > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.perdida__rotas a b { font: 500 14px/1.5 var(--f-mono); color: var(--tinta); }
.perdida__rotas a i { font-style: normal; font-size: 14px; line-height: 1.5; color: var(--suave); }
.perdida__rotas a svg { width: 16px; height: 16px; flex: none; color: var(--suave); opacity: 0; transition: opacity 0.15s ease-out, transform 0.15s ease-out; }
.perdida__rotas a:hover svg, .perdida__rotas a:focus-visible svg { opacity: 1; transform: translateX(2px); }
.perdida__luz { position: absolute; right: -10%; top: -20%; width: min(70vw, 760px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--acento-rgb), 0.14), rgba(var(--ouro-rgb), 0.1) 42%, transparent 68%); filter: blur(20px); pointer-events: none; }

/* ---------- Rodada 2 (12/11/2026): pontos da revisão independente ---------- */
/* Alvos de toque com 44 px (botões da barra tinham 42; links do rodapé, 22 de altura). */
.nav__botao { width: 44px; height: 44px; }
.pe__links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Títulos da política sem palavra sozinha na última linha. */
.texto h2, .texto h3 { text-wrap: balance; }
/* Cabeçalho das tabelas um ponto maior. */
.texto th { font-size: 12.5px; letter-spacing: 1.5px; }

/* ---------- Rodada 3 (12/11/2026): cena "Como funciona" em tela baixa, rótulos da rede e barra da janela no celular ---------- */
/* Os textos dos passos ficaram mais longos. Em tela baixa de computador a coluna da esquerda aperta o título e a lista
   (até 820 px de altura). Onde nem assim cabe (até 679 px de altura, ou até 759 px em janela estreita), os três passos
   ocupam a mesma célula e só o atual aparece, como no celular: nada fica cortado nem passa por baixo do menu, e a
   leitura de tela continua com os três. Só vale com o núcleo rodando e fora do modo calmo. */
@media (min-width: 901px) and (max-height: 820px) {
  #como .cena__texto h2 { margin-top: 12px; font-size: clamp(1.7rem, 3.1vw, 2.5rem); }
  #como .passos { margin-top: 18px; gap: 2px; }
  #como .passos li { padding: 8px 12px; }
  #como .passos li span { font-size: 13px; line-height: 1.45; }
}
@media (min-width: 901px) and (max-height: 679px), (min-width: 901px) and (max-width: 1199px) and (max-height: 759px) {
  html.js:not(.calmo) #como .passos { display: grid; }
  html.js:not(.calmo) #como .passos li { grid-area: 1 / 1; align-self: start; opacity: 0; transition: opacity 0.3s var(--ease), color 0.3s var(--ease); }
  html.js:not(.calmo) #como .passos li.agora { opacity: 1; }
}

/* Barra da janela do topo no celular: "Documentos / Kronos Gestão" cabia cortado com reticências até 390 px. Bolinhas
   menores, vãos mais curtos e letra um ponto menor; a etiqueta "exemplo" continua (é ela que diz que é ilustração). */
@media (max-width: 430px) {
  .janela__barra { gap: 5px; padding: 11px 12px; }
  .janela__barra i { width: 8px; height: 8px; }
  .janela__barra span { margin-left: 5px; font-size: 10.5px; }
  .janela__barra em { font-size: 10px; letter-spacing: 1.2px; }
}
@media (max-width: 345px) { .janela__barra i { display: none; } .janela__barra span { margin-left: 0; } }

/* Rede do Google: os rótulos para ler com pelo menos 12 px ("O seu computador" tinha 10,5 no celular; "a seu pedido",
   10,5; "Kronos Gestão", até 11). No celular e no tablet "a seu pedido" volta a aparecer debaixo de "O seu Claude", que
   passa a caber numa linha, e o rótulo do centro sobe um pouco para não encostar nele. O anel não muda. */
.no small { font-size: 12px; }
.nucleo__rotulo small { font-size: 12px; }
@media (max-width: 900px) {
  .nucleo__rotulo { top: calc(100% + 13px); }
  .nucleo__rotulo b { font-size: 12px; }
  .rede .no small { display: block; }
  .rede .no:nth-child(7) { width: 100px; }
}

/* Controles do Google no celular: os textos ficaram mais longos e, ao lado do ícone, viravam uma coluna estreita de até
   quinze linhas com a margem esquerda vazia. O ícone (menor) fica na linha do título e a explicação usa a largura toda. */
@media (max-width: 560px) {
  .controles li { grid-template-columns: 36px minmax(0, 1fr); gap: 6px 12px; align-items: center; }
  .controles__icone { width: 36px; height: 36px; border-radius: 11px; }
  .controles__icone svg { width: 18px; height: 18px; }
  .controles li > div:last-child { display: contents; }
  .controles b { grid-column: 2; opacity: calc(0.4 + var(--v) * 0.6); }
  .controles span { grid-column: 1 / -1; margin-top: 2px; opacity: calc(0.4 + var(--v) * 0.6); }
}