/* You Contabilidade · tokens da identidade
   ÚNICO lugar onde cor, fonte, raio, espaço, sombra e movimento são definidos. Cor solta fora daqui é defeito.
   Dono: You · Vitrine. Quem precisar de token novo pede ao Maestro, que repassa.
   Fonte da verdade: BRIEFING.md §7 (cor) e §9 (forma), decisões de 14/10/2026.
   Paleta = a ATUAL do site; só mudou o degradê (Brasa) e os 3 pares que reprovavam WCAG (AUDITORIA-DS.md §2.2).
   Contraste calculado pela fórmula WCAG 2.x em 14/10/2026: números na ordem branco / fundo #F7F7F8 / laranja-50. */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&display=swap");
/* r5 PROPOSTA: as 3 fontes à mão do livro-caixa (22). Todas OFL, com latin-ext (Ç, Ã, É, Õ). Depois da escolha, fica só a escolhida */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Kalam:wght@400;700&family=Patrick+Hand&display=swap");
@font-face{font-family:"Clash Display";font-weight:500;font-display:swap;src:url("fonts/ClashDisplay-Medium.woff2") format("woff2")}
@font-face{font-family:"Clash Display";font-weight:600;font-display:swap;src:url("fonts/ClashDisplay-Semibold.woff2") format("woff2")}
@font-face{font-family:"Clash Display";font-weight:700;font-display:swap;src:url("fonts/ClashDisplay-Bold.woff2") format("woff2")}

:root{
  /* ===== Marca ===== */
  --laranja:#FE4901;        /* a cor da You: bloco, botão primário, número grande. Tinta em cima 5,40. Como texto só >= 24px (3,40 no branco) */
  --laranja-claro:#FF6A2B;  /* passar o mouse no primário (tinta 6,43) */
  --laranja-fundo:#E84300;  /* primário apertado (tinta 4,58) */
  --laranja-texto:#BD3700;  /* texto, link e ícone laranja no claro: 5,66 / 5,29 / 5,20. Era #D43D00 (reprovava: 4,39 no fundo) */
  --laranja-50:#FFF3EC;     /* fundo tingido, chip laranja claro, foco do campo */
  --laranja-100:#FFE3D2;    /* borda do chip laranja, chip apertado (laranja-texto em cima 4,63) */
  --ambar:#FF9200;          /* a fatia: acento e fim do degradê alternativo. NUNCA carrega texto (no branco 2,2) */

  /* ===== Degradês ===== */
  --brasa-ini:#E03A00;      /* começo da Brasa (laranja mais fundo). Tinta em cima 4,18: só título grande */
  --mel:#FFA92D;            /* ponta clara da Brasa. Também número e selo pequeno em cima do preto (9,60) */
  --grad-marca:linear-gradient(135deg in oklab,var(--brasa-ini) 0%,var(--laranja) 38%,var(--mel) 100%); /* Brasa: fundo de bloco grande (capa de post, faixa, card de destaque). Tinta em cima: 4,18 no início (só título grande), 5,40 no meio, 9,60 no fim */
  --grad-marca-alt:linear-gradient(90deg,var(--laranja),var(--ambar)); /* o de antes, guardado: só preenchimento pequeno (barra, selo, fio), nunca texto */
  --escuro-ini:#1F1F23;     /* topo do escuro original */
  --escuro-fim:#0C0C0E;     /* pé do escuro original; também o secundário apertado */
  --grad-escuro:linear-gradient(165deg,var(--escuro-ini) 0%,var(--escuro-fim) 100%); /* fundo escuro ORIGINAL do site */

  /* ===== Logo (SÓ dentro dos arquivos de identidade/logo/; a página usa a logo por arquivo) =====
     As cores do arquivo original da logo, medidas no PNG. Quase iguais ao laranja e ao âmbar da paleta; a logo FICA como é. */
  --logo-laranja:#FF4800;
  --logo-ambar:#FFAA00;

  /* ===== Claros (dominam) ===== */
  --branco:#FFFFFF;         /* SÓ peça por cima do cinza: card, menu, campo, botão de contorno, janela pequena. Nunca fundo de bloco ou área grande (fb12) */
  --fundo:#F7F7F8;          /* REGRA (fb12, 14/10/2026): fundo da página E de todo bloco ou área grande (topo, faixa, painel, tabela, área do site). Destaca melhor que o branco; o branco fica para o que vai por cima. Texto em cima: tinta 17,17 · corpo 8,20 · apoio 4,93 · laranja-texto 5,29 · laranja só número grande 3,18 */
  --fundo-2:#F1F1F3;        /* seção alternada, chip preto claro */
  --linha:#E6E6EA;          /* divisor e borda de card (decorativa) */
  --linha-forte:#D7D7DC;    /* divisor forte (decorativa) */
  --borda-campo:#8A8A92;    /* borda de campo e caixa de seleção: 3,43 / 3,20 (mínimo 3). Era #D7D7DC (1,43, reprovava) */

  /* ===== Tinta (preto só em ponto-chave) ===== */
  --tinta:#141417;          /* texto principal 18,39 / 17,17 / 16,88; botão secundário; marca-texto do destaque */
  --tinta-2:#1C1C1F;        /* superfície escura secundária */
  --tinta-3:#2A2A2F;        /* passar o mouse no secundário (branco 14,28) */

  /* ===== Texto ===== */
  --texto:#141417;          /* = tinta */
  --texto-2:#4A4A52;        /* corpo: 8,78 / 8,20 / 8,06 */
  --texto-3:#6B6B73;        /* legenda e apoio: 5,28 / 4,93 / 4,85. Era #77777F (reprovava: 4,15 no fundo) */
  --texto-no-laranja:#141417; /* texto em cima do laranja é ESCURO (5,40). Branco só em título grande (3,40) */
  --texto-no-escuro:#F1F1F3;  /* 14,56 no #1F1F23 */
  --texto-no-escuro-2:#B5B5B5;/* 8,01 no #1F1F23 */
  --laranja-no-escuro:#FE4901;/* 4,82 no #1F1F23, 5,74 no #0C0C0E */

  /* ===== Estados de formulário (só função) ===== */
  --ok:#166534; --ok-fundo:#DCEFE1;
  --erro:#B91C1C; --erro-fundo:#FEE2E0;
  --aviso:#92620A; --aviso-fundo:#FEF3C7;
  --desat-fundo:#ECECEE; --desat-texto:#67676F; /* 4,75 no --desat-fundo e 5,61 no branco (era #71717A, 4,10: reprovava) */

  /* ===== Tipografia ===== */
  --f-titulo:"Clash Display","Geist",system-ui,sans-serif; /* títulos e números, 600/700 */
  --f-texto:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; /* texto, rótulo, botão, 400 a 600 */
  --fs-display:clamp(2.5rem,6vw,4.5rem);
  --fs-h1:clamp(2.1rem,4.6vw,3.4rem);
  --fs-h2:clamp(1.6rem,3vw,2.35rem);
  --fs-h3:clamp(1.2rem,2vw,1.5rem);
  --fs-numero:clamp(2.5rem,6vw,4.5rem);
  --fs-corpo-g:1.125rem; --fs-corpo:1rem; --fs-peq:.875rem; --fs-micro:.75rem;
  --lh-titulo:1.05; --lh-corpo:1.6;
  --ls-titulo:-0.01em;
  --ws-titulo:.12em;        /* Clash junta as palavras em título: abre o espaço entre elas */
  --ls-rotulo:.14em;        /* rótulo em caixa alta */

  /* ===== Espaço (base 4/8) ===== */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --container:1180px; --medida:680px;
  --ctrl-p:40px; --ctrl-m:48px; --ctrl-g:56px; /* alturas de botão e campo */

  /* ===== Forma: escada de raio A (mesma curvatura visual em todo tamanho). Nada em pílula. ===== */
  --r-chip:6px;    /* chip, selo, etiqueta, caixa de seleção, ícone pequeno */
  --r-btn:8px;     /* botão, aba, campo */
  --r-card:10px;   /* card, caixa, coluna */
  --r-janela:12px; /* janela, menu, painel, post */
  --r-redondo:50%; /* SÓ avatar, bolinha de status e botão de ícone redondo */

  /* ===== Sombra (neutra; nunca brilho laranja) ===== */
  --sombra-p:0 1px 2px rgba(20,20,23,.06);
  --sombra-m:0 8px 24px rgba(20,20,23,.08);
  --sombra-g:0 20px 48px rgba(20,20,23,.12);

  /* ===== Movimento (só cor muda; sem subir, sem afundar, sem pulo) ===== */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-rapida:140ms; --dur:160ms; --dur-lenta:240ms;
  --giro:600ms;             /* 05 o giro da fatia: uma volta e encaixa no lugar da logo, uma vez só */
  --giro-loop:1100ms;       /* 05 no carregando: a ÚNICA vez em que a fatia gira sem parar */

  /* ===== Ponto único (fechado em 14/10/2026, BRIEFING §14: 02 03 04 05 06 07 08 10 12) =====
     Geometria do "o" da logo, medida no arquivo you-symbol-trim.png. Número puro: a página lê por script e desenha o SVG.
     0 = meio-dia, sentido horário. A fatia SEMPRE começa e termina no ângulo da logo (salvo no donut-gráfico, que mede a parte). */
  --fatia-ini:-12.5;        /* graus: começo da fatia âmbar */
  --fatia-fim:65.2;         /* graus: fim da fatia na logo (77,7°, cerca de 1/5 do anel) */
  --donut-furo:.474;        /* furo = 47,4% do diâmetro */
  --anel-retrato:6;         /* 03 espessura do anel em volta da foto, em % do diâmetro (anel fino) */
  --vao-regua:2px;          /* 04 e 10: vão reto entre os pedaços da régua fatiada */
  --r-regua-fator:.3;       /* 04: canto da régua = 30% da altura, até o --r-chip (régua fina não vira pílula) */
  --traco-chamada:1.5px;    /* 07: traço reto da chamada, uma dobra só, nunca seta */
  --ponto-chamada:6.5px;    /* 07: o ponto em cima da fatia */

  /* ===== Elementos novos, rodada 3 (15/10/2026, elementos-r3.html). PROPOSTA: só valem se o Natham aprovar o elemento ===== */
  /* r4 (fb25 e item 18 da leva): 18 luz DESCARTADA e livro-caixa só no claro. As 6 linhas abaixo ficam só para a elementos-r3.html (registro) continuar abrindo; apagar quando a ID fechar */
  --luz-claro:var(--laranja-100);                                  /* 18 luz da fatia no claro (quase some) */
  --luz-brasa:color-mix(in oklab,var(--mel) 75%,transparent);      /* 18 luz da fatia na Brasa */
  --luz-escuro-r3:color-mix(in oklab,var(--laranja) 30%,transparent); /* 18 luz da fatia no escuro (r3, descartada; o nome --luz-escuro passou a ser a luz do Grão na r6) */
  --livro-brasa:color-mix(in oklab,var(--tinta) 14%,transparent);  /* 22 livro-caixa: pauta na Brasa */
  --livro-brasa-m:color-mix(in oklab,var(--tinta) 30%,transparent);/* 22 livro-caixa: margem dupla na Brasa */
  --livro-escuro-m:color-mix(in oklab,var(--laranja) 45%,transparent); /* 22 livro-caixa: margem dupla no escuro */

  /* ===== Rodada 4 (15/10/2026, elementos-r4.html). PROPOSTA: só valem se o Natham aprovar a variação ===== */
  --opac-sutil:.12;         /* 17 donut gigante sutil: a logo inteira a 12% por cima do fundo */
  --opac-medio:.24;         /* 17 donut gigante médio */
  --livro-papel:var(--branco);   /* 22 livro-caixa: a folha (sempre clara, por cima do fundo) */
  --livro-pauta:var(--linha-forte); /* 22 livro-caixa: linhas da pauta (decorativa) */
  --livro-margem:color-mix(in oklab,var(--laranja) 50%,transparent); /* 22 livro-caixa: margem dupla, o vermelho do caderno trocado pelo laranja */
  /* ===== Rodada 5 (17/10/2026, elementos-r5.html). PROPOSTA: só valem se o Natham aprovar ===== */
  /* 22 livro-caixa realista: letra de caneta (fb39). Três candidatas, todas OFL no Google Fonts; --f-mao aponta para a recomendada */
  --f-mao-a:"Caveat","Segoe Print",cursive;        /* A: caneta corrida, a mais natural (recomendada) */
  --f-mao-b:"Kalam","Segoe Print",cursive;         /* B: caneta firme, letra de forma inclinada */
  --f-mao-c:"Patrick Hand","Segoe Print",cursive;  /* C: letra de forma caprichada, a mais legível pequena */
  --f-mao:var(--f-mao-a);
  --caneta:var(--tinta-2);  /* letra à mão da folha: grafite de caneta preta (17,5 no papel). Anotação de correção vai em --laranja-texto, como caneta de outra cor */
  --papel:#FFFDF9;          /* a folha: branco quente de papel, um passo acima do branco puro (nunca creme nem kraft) */
  --papel-pauta:color-mix(in oklab,var(--linha-forte) 75%,var(--laranja-100)); /* linha da pauta (decorativa): cinza puxado para o quente, casa com o laranja da margem */
  --papel-sombra:0 1px 1px rgba(20,20,23,.06),0 3px 6px rgba(20,20,23,.06),0 18px 36px -12px rgba(20,20,23,.22); /* folha solta sobre a mesa: borda próxima e sombra longa, sem brilho */
  --papel-fibra:.34;         /* opacidade da textura de fibra do papel */
  --brasa-escuro:var(--tom-900); /* o escuro DENTRO da Brasa: pedaço da régua, fatia e etiqueta. Substitui o preto na Brasa (Maestro 17/10, achados 3 e 4 da paletas-r2). Branco em cima 12,45; sobre o laranja 3,66 (forma) */
  --texto-min-post:2.9cqw;  /* menor texto numa peça 1080x1350 (31px no arquivo): legenda, rodapé */
  --texto-min-story:3.4cqw; /* menor texto num story 1080x1920 (37px no arquivo): o story é visto mais longe e mais rápido */
  /* Paleta de APOIO (pedido da Matiz, paletas-r2.html, item 20 da leva). Base aprovada intacta; --laranja-50 e --laranja-100 são os passos 50/100 da escala "tom" */
  --tom-200:#FFD6C1;        /* fundo e régua tom sobre tom */
  --tom-300:#FFBD98;        /* fundo e régua tom sobre tom */
  --tom-400:#FF9764;        /* só forma */
  --tom-800:#8F300E;        /* texto e forma escura quente (branco em cima 8,09) */
  --tom-900:#5D2108;        /* etiqueta e pedaço escuro na Brasa no lugar do preto (branco 12,45; sobre laranja 3,66: só forma) */
  --tom-950:#30160C;        /* escuro quente de ponto-chave, opcional (mel em cima 8,80) */
  --mel-50:#FFF7EA;         /* fundo mel claro (tinta 13,78 a 17) */
  --mel-100:#FFECD0;        /* fundo mel claro */
  --mel-200:#FFD9A7;        /* fundo mel claro */
  --pedra-100:#F0ECE9;      /* neutro quente: papel, linha em fundo tingido */
  --pedra-200:#E5DED9;      /* neutro quente */
  --pedra-600:#655851;      /* texto de apoio quente (6,29 no laranja-50) */

  /* ===== Rodada 6 (17/10/2026, elementos-r6.html). PROPOSTA: só valem se o Natham aprovar =====
     Profundidade (leva r6 itens 5, 7 a 9): a sombra da You é QUENTE, feita do tostado (tom 950, rgb 48 22 12) e do próprio laranja; nunca cinza frio.
     Nível 1 = card apoiado no fundo (o padrão). Nível 2 = card em destaque, que sai da peça. Nó = o "o" (nó, marcador) apoiado no card. */
  --sombra-quente:48 22 12; /* tom 950 em RGB: a cor de toda sombra da You */
  --sombra-card-1:0 1px 2px rgb(var(--sombra-quente) / .06),0 6px 16px -4px rgb(var(--sombra-quente) / .12);
  --sombra-card-2:0 2px 4px rgb(var(--sombra-quente) / .06),0 10px 20px -8px rgb(var(--sombra-quente) / .14),0 26px 48px -18px rgb(var(--sombra-quente) / .26);
  --sombra-no:drop-shadow(0 1px 1px rgb(var(--sombra-quente) / .22)) drop-shadow(0 3px 5px rgb(254 73 1 / .30)); /* filtro para SVG (nó, marcador, donut sobre card): sombra curta com calor do laranja */
  --sombra-no-box:0 1px 2px rgb(var(--sombra-quente) / .22),0 4px 10px -2px rgb(254 73 1 / .32); /* a mesma, para elemento HTML redondo */
  --sombra-foto:0 2px 6px rgb(var(--sombra-quente) / .12),0 24px 44px -18px rgb(var(--sombra-quente) / .34); /* foto real em card ou retrato */
  --sombra-na-brasa:0 2px 4px rgb(93 33 8 / .18),0 22px 44px -16px rgb(93 33 8 / .42); /* card branco sobre a Brasa: sombra no tom 900, nunca preta */
  --sombra-no-escuro:0 2px 4px rgb(0 0 0 / .30),0 22px 44px -16px rgb(0 0 0 / .55); /* card claro sobre o escuro de ponto-chave (R6) */
  /* ===== Rodada 6 (17/10/2026), valores do You · Grão (passo 0). PROPOSTA: só valem se o Natham aprovar ===== */
  /* degradê da Brasa LEVE (item 7): mesma direção da Brasa, começa no laranja e abre para o tom 400 e o mel 200. Tinta em cima: 5,40 no começo, 8,63 no meio, 13,78 no fim (texto normal passa em toda a área). Branco só na logo e título grande: 3,40 no começo */
  --brasa-leve:linear-gradient(135deg in oklab,var(--laranja) 0%,var(--tom-400) 55%,var(--mel-200) 100%);
  /* luz de fundo da You (item 7): nasce do donut. --luz-x/--luz-y = onde está o donut gigante (padrão: canto de baixo à direita). --luz-k = intensidade: .6 leve, 1 média (padrão), 1.4 forte */
  --luz-k:1;
  --sombra-donut-fundo:drop-shadow(0 1.8cqw 3.6cqw color-mix(in oklab,var(--tom-800) 30%,transparent));  /* item 8: o donut gigante deixa sombra quente no fundo (filtro no svg do donut) */ /* DESCARTADO (17/10, leva r6 item 30): donut decorativo sempre chapado; não usar */
  /* grão fino (itens 11 e 22): pontinho menor e mais espalhado que o G da r5. Intensidade padrão 5% no claro, 6% no escuro */
  --grao-fino:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.95'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.078%200%200%200%200%200.078%200%200%200%200%200.090%200%200%200%202.2%20-1'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");
  --grao-fino-escuro:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.95'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.945%200%200%200%200%200.945%200%200%200%200%200.953%200%200%200%202.2%20-1'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");
  --grao-fino-op:.05;
  --grao-fino-op-escuro:.06;
  /* T2 pauta (item 12, uso pontual): linhas cheias, margem de UMA linha laranja. Intensidade 12% */
  --textura-pauta:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201080%201920'%3E%3Cpath%20d='M0%20240H1080M0%20312H1080M0%20384H1080M0%20456H1080M0%20528H1080M0%20600H1080M0%20672H1080M0%20744H1080M0%20816H1080M0%20888H1080M0%20960H1080M0%201032H1080M0%201104H1080M0%201176H1080M0%201248H1080M0%201320H1080M0%201392H1080M0%201464H1080M0%201536H1080M0%201608H1080M0%201680H1080M0%201752H1080M0%201824H1080M0%201896H1080M0%20160H1080'%20stroke='%238F300E'%20stroke-width='2.4'%20opacity='.7'/%3E%3Cpath%20d='M792%20240V1920'%20stroke='%238F300E'%20stroke-width='2.4'%20opacity='.5'/%3E%3Cpath%20d='M136%200V1920'%20stroke='%23FE4901'%20stroke-width='3'/%3E%3C/svg%3E");
  --textura-pauta-op:.12;
  /* T3 anéis (item 13): traço mais fino (1,6) e fatia âmbar mais estreita; presença baixa: 10% (era 18%) */
  --textura-aneis:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201080%201920'%3E%3Cg%20fill='none'%20stroke='%23FE4901'%20stroke-width='1.6'%3E%3Ccircle%20cx='86'%20cy='1651'%20r='80'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='123'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='167'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='213'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='260'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='310'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='360'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='413'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='467'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='524'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='582'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='642'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='705'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='770'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='837'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='906'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='978'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='1052'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='1129'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='1208'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='1290'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='1376'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='1464'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='1555'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='1649'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='1747'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='1848'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='1953'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='2061'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='2173'/%3E%3Ccircle%20cx='86'%20cy='1651'%20r='2289'/%3E%3C/g%3E%3Cpath%20d='M69%201573A80%2080%200%200%201%20159%201618M60%201531A123%20123%200%200%201%20198%201600M50%201488A167%20167%200%200%201%20238%201581M40%201443A213%20213%200%200%201%20280%201562M30%201397A260%20260%200%200%201%20323%201542M19%201349A310%20310%200%200%201%20367%201521M8%201299A360%20360%200%200%201%20414%201500M-3%201248A413%20413%200%200%201%20461%201478M-15%201195A467%20467%200%200%201%20511%201455M-27%201140A524%20524%200%200%201%20562%201432M-40%201083A582%20582%200%200%201%20615%201407M-53%201024A642%20642%200%200%201%20670%201382M-66%20963A705%20705%200%200%201%20726%201356M-80%20900A770%20770%200%200%201%20785%201328M-95%20834A837%20837%200%200%201%20846%201300M-110%20767A906%20906%200%200%201%20909%201271M-125%20697A978%20978%200%200%201%20974%201241M-141%20624A1052%201052%200%200%201%201041%201210M-158%20549A1129%201129%200%200%201%201111%201178M-175%20472A1208%201208%200%200%201%201183%201144M-193%20391A1290%201290%200%200%201%201258%201110M-211%20308A1376%201376%200%200%201%201335%201074M-230%20222A1464%201464%200%200%201%201415%201037M-250%20133A1555%201555%200%200%201%201498%20999M-271%2041A1649%201649%200%200%201%201584%20959M-292%20-54A1747%201747%200%200%201%201672%20918M-314%20-153A1848%201848%200%200%201%201764%20876M-336%20-255A1953%201953%200%200%201%201859%20832M-360%20-361A2061%202061%200%200%201%201958%20787M-384%20-471A2173%202173%200%200%201%202059%20740M-409%20-584A2289%202289%200%200%201%202165%20691'%20fill='none'%20stroke='%23FF9200'%20stroke-width='4'/%3E%3C/svg%3E");
  --textura-aneis-op:.10;
  --brasa-leve-meio:var(--tom-400); /* Vitrine: a cor do meio da Brasa leve, para o fundo do ponto vazio (nó, anel que falta) */

  /* ===== Rodada 7 (17/10/2026, leva r7 itens 1, 3, 7, 10). APROVADO pelo Natham (fb87, fb89) =====
     SOMBRA: só o CARD BRANCO tem sombra, no nível do P3 (o card em destaque). Donut, nó, marcador, número, título e texto ficam CHAPADOS.
     Outro elemento só ganha sombra se o Natham pedir. --sombra-no, --sombra-no-box e --sombra-foto ficam fora de uso a partir daqui. */
  --sombra-card:var(--sombra-card-2);                    /* P3: o card branco sobre o fundo claro, laranja claro, mel e tom sobre tom */
  --sombra-card-f:drop-shadow(0 2px 2px rgb(var(--sombra-quente) / .06)) drop-shadow(0 10px 12px rgb(var(--sombra-quente) / .12)) drop-shadow(0 22px 22px rgb(var(--sombra-quente) / .16)); /* a mesma sombra em filtro: para o card branco que tem o recorte do "o" encaixado (box-shadow não acompanha o recorte) */
  --sombra-card-brasa:var(--sombra-na-brasa);            /* card branco sobre a Brasa leve */
  --sombra-card-brasa-f:drop-shadow(0 2px 2px rgb(93 33 8 / .18)) drop-shadow(0 14px 18px rgb(93 33 8 / .30)); /* a mesma, em filtro, para o card recortado */
  /* "O" ENCAIXADO: o "o" da logo nunca muda (chapado, sem anel branco, sem sombra). Quem muda é o vizinho (card, foto, quadrado, botão):
     ganha um recorte em arco em volta do "o", e o fundo aparece no vão. A folga é proporcional ao "o": a mesma leitura em qualquer tamanho. */
  --o-folga:.14;                                         /* vão entre o "o" e o recorte do vizinho, em fração do diâmetro do "o" (2,6em de "o" = vão de 0,36em) */
}
/* luz de fundo (Grão, r6): declarada também em .luz/.luzf para cada peça recalcular com o --luz-x, --luz-y e --luz-k dela (token só no :root é calculado uma vez) */
:root,.luz,.luzf{ /* --luz-halo e --luz-escuro acendem o furo do donut gigante: pela regra de 17/10 (donut chapado) só entram em peça SEM donut decorativo */
  --luz-escuro:radial-gradient(circle at var(--luz-x,86%) var(--luz-y,88%),color-mix(in oklab,var(--laranja) calc(22% * var(--luz-k)),transparent) 0 14%,transparent 56%);              /* no escuro (R6): brasa morna saindo do donut */
  --luz-halo:radial-gradient(circle at var(--luz-x,86%) var(--luz-y,88%),color-mix(in oklab,var(--laranja) calc(13% * var(--luz-k)),transparent) 0,transparent 58%);          /* luz quente que sai do donut gigante (fica atrás dele); no claro, laranja claro, mel e tom sobre tom */
  --luz-topo:radial-gradient(ellipse 95% 60% at 10% 0%,color-mix(in oklab,var(--branco) calc(70% * var(--luz-k)),transparent),transparent 72%);                                     /* luz de cima, do lado oposto ao donut: o fundo abre mais claro (no fundo tingido; no cinza claro quase não aparece) */
  --sombra-fundo:linear-gradient(180deg,transparent 52%,color-mix(in oklab,var(--tom-800) calc(9% * var(--luz-k)),transparent) 100%);                                                 /* sombra de chão: o pé da peça escurece de leve, dá profundidade ao card */
}
@media (prefers-reduced-motion:reduce){:root{--dur-rapida:0ms;--dur:0ms;--dur-lenta:0ms;--giro:0ms}}
/* ===== Rodada 8 (17/10/2026, leva r8 itens 1, 3, 6). APROVADO pelo Natham (fb105, fb106, fb111, fb101) =====
   SOMBRA CURTA E CONCENTRADA em todos os níveis (fb105: "a sombra não pode ser tão dispersa; mais concentrada perto dos elementos. Serve pra todas"):
   pouco deslocamento (1 a 3px), pouco desfoque (até 6px), quase nada de alcance. Os valores da r7 ficam com o final -r7 só para o antes e depois. */
:root{
  --sombra-card-1-r7:0 1px 2px rgb(var(--sombra-quente) / .06),0 6px 16px -4px rgb(var(--sombra-quente) / .12);
  --sombra-card-2-r7:0 2px 4px rgb(var(--sombra-quente) / .06),0 10px 20px -8px rgb(var(--sombra-quente) / .14),0 26px 48px -18px rgb(var(--sombra-quente) / .26);
  --sombra-p:0 1px 2px rgba(20,20,23,.06);
  --sombra-m:0 1px 2px rgba(20,20,23,.12),0 3px 6px -2px rgba(20,20,23,.18);
  --sombra-g:0 1px 2px rgba(20,20,23,.14),0 4px 8px -3px rgba(20,20,23,.24);
  --sombra-card-1:0 1px 1px rgb(var(--sombra-quente) / .12),0 2px 4px -1px rgb(var(--sombra-quente) / .20);
  /* ADENDO 4 (fb119): 3 doses mais concentradas que a r7, cada uma mais curta e mais junto do elemento. r9 ADENDO 1 (fb155): APROVADA a S1, que é o padrão (P3); S2 e S3 saíram. ADENDO 12 (item 28): todos os níveis UM DEGRAU MAIS ESCUROS (mais opacidade, mesmo alcance curto) */
  --sombra-s1:0 1px 2px rgb(var(--sombra-quente) / .16),0 5px 10px -3px rgb(var(--sombra-quente) / .26);
  --sombra-card-2:var(--sombra-s1);  /* P3, o card branco: S1 APROVADA (r9 ADENDO 1, item 12, fb155) */
  --sombra-card:var(--sombra-card-2);
  --sombra-card-f:drop-shadow(0 1px 1px rgb(var(--sombra-quente) / .16)) drop-shadow(0 3px 5px rgb(var(--sombra-quente) / .24)); /* S1 em filtro */
  --sombra-na-brasa:0 1px 2px rgb(93 33 8 / .30),0 5px 10px -3px rgb(93 33 8 / .42); /* S1 no tom 900 */
  --sombra-card-brasa:var(--sombra-na-brasa);
  --sombra-card-brasa-f:drop-shadow(0 1px 1px rgb(93 33 8 / .30)) drop-shadow(0 3px 5px rgb(93 33 8 / .36));
  --sombra-no-escuro:0 1px 2px rgb(0 0 0 / .48),0 5px 10px -3px rgb(0 0 0 / .60);
  --papel-sombra:0 1px 1px rgb(70 45 22 / .16),0 2px 4px -1px rgb(70 45 22 / .22);
  /* item 6 (fb111): a sombra pode ir também na TRILHA (a barra fatiada de baixo do post) e em outro elemento de FORA do card; nunca no que está dentro do card */
  --sombra-trilha:0 1px 1px rgb(var(--sombra-quente) / .16),0 3px 5px -2px rgb(var(--sombra-quente) / .30);
  --sombra-trilha-brasa:0 1px 1px rgb(93 33 8 / .30),0 3px 5px -2px rgb(93 33 8 / .42);
  --sombra-trilha-f:drop-shadow(0 1px 1px rgb(var(--sombra-quente) / .20)) drop-shadow(0 2px 2px rgb(var(--sombra-quente) / .26)); /* ADENDO 5 (item 16): o anel da etapa atual da D1, em filtro (segue o círculo) */
  --sombra-trilha-brasa-f:drop-shadow(0 1px 1px rgb(93 33 8 / .32)) drop-shadow(0 2px 2px rgb(93 33 8 / .34));
  --sombra-emenda:3px 0 3px -1px rgb(var(--sombra-quente) / .30),7px 0 8px -4px rgb(var(--sombra-quente) / .34); /* V2·A, E1 APROVADO (fb134) na força que o Natham viu: a foto projeta uma sombra curta para a DIREITA, sobre o texto (valor da Matiz) */
  /* item 1 (fb101): CADERNO, a partir do caderno do Natham feito no GPT. Folha creme com textura fina, pauta cinza, margem laranja fina, logo entre duas pautas, 3 folhas tortas, sombra curta */
  --caderno-papel:#F7F5EF;                                 /* papel creme (tinta em cima 17,3) */
  --caderno-pauta:rgb(113 115 113 / .36);                  /* pauta cinza, decorativa */
  --caderno-margem:#FF7C35;                                /* margem laranja fina, decorativa (só linha de 1px; nunca texto) */
  --caderno-sombra:1px 3px 5px rgb(70 45 22 / .12);        /* folhas de baixo */
  --caderno-sombra-topo:2px 5px 9px rgb(65 43 23 / .16),inset 1px 0 3px rgb(255 255 255 / .8),inset -2px -3px 5px rgb(105 83 54 / .055); /* folha de cima: curta, com a borda iluminada do papel */
  --textura-papel:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='p'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.44%200%200%200%200%20.33%200%200%200%200%20.2%200%200%200%20.09%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23p)'/%3E%3C/svg%3E"); /* fibra fina de papel, marrom muito transparente */
}
/* ===== Rodada 9 (17/10/2026, leva r9 item 10, fb154): FUNDO COM PROFUNDIDADE =====
   "Faltou as sombras no fundo... não nos elementos, mas no plano de fundo." Luz e sombra suaves NO FUNDO da peça (não contam como textura).
   Desenho da You: palco, o centro da peça acende e as bordas fecham em sombra quente. ADENDO 4 da r9 (fb163): a F3 PALCO foi a aprovada (substitui a F2), mais forte; F1 e F2 saíram. Liga e desliga por peça (o-encaixado.css). */
:root{
  --fundo-f3:radial-gradient(ellipse 70% 58% at 52% 38%,rgb(255 255 255 / .85),transparent 72%),radial-gradient(ellipse 135% 115% at 50% 42%,transparent 48%,rgb(var(--sombra-quente) / .32) 100%); /* F3 PALCO, APROVADO (r9 ADENDO 4, fb163), um pouco mais forte: o centro acende e as bordas fecham em sombra quente */
  --fundo-prof:var(--fundo-f3);
  --grad-marca-r5:linear-gradient(135deg in oklab,var(--brasa-ini) 0%,var(--laranja) 38%,var(--mel) 100%); /* a Brasa cheia antiga, só para registro */
  --caneta-laranja:#B03300; /* caneta laranja do caderno, um degrau mais escura que o --laranja-texto: no papel da folha do Natham (230 228 225, o tom mais escuro do papel) dá 4,99; o #BD3700 dava 4,46 (prova da Lupa) */
  --grad-marca:var(--brasa-leve); /* a Brasa aprovada é a LEVE (r6, fb86): todo uso de --grad-marca passa a ser a leve (pergunta do Traço, 17/10) */
  --fundo-prof-b:radial-gradient(ellipse 70% 58% at 52% 38%,rgb(255 255 255 / .30),transparent 72%),radial-gradient(ellipse 135% 115% at 50% 42%,transparent 48%,rgb(93 33 8 / .34) 100%);  /* F3 na Brasa leve */
  --fundo-prof-e:radial-gradient(ellipse 70% 58% at 52% 38%,rgb(254 73 1 / .10),transparent 72%),radial-gradient(ellipse 135% 115% at 50% 42%,transparent 48%,rgb(0 0 0 / .45) 100%);         /* F3 no escuro (só ligando à mão: no escuro carregado fica desligado) */
  /* RODADA 10 (fb167): VIDRO CLARO do menu do site. Barra solta do topo, branco quente translúcido com desfoque do que passa por baixo.
     Contraste: a tinta nos links fica acima de 4,5 mesmo com o pior pixel de foto atrás (medido no print, ver decisoes-vitrine). */
  --vidro-cor:color-mix(in oklab,var(--laranja-50) 45%,var(--branco));   /* branco quente (o laranja claro bem diluído) */
  --vidro-fundo:color-mix(in oklab,var(--vidro-cor) 78%,transparent);    /* 78% opaco: o fundo aparece borrado, a letra continua firme */
  --vidro-fundo-forte:color-mix(in oklab,var(--vidro-cor) 92%,transparent); /* painel de lista e botão pequeno de vidro: mais texto ou muito pouco vidro, o fundo atrás aparece menos (apoio 4,5 garantido) */
  --vidro-desfoque:blur(18px) saturate(1.6);
  --vidro-borda:rgb(255 255 255 / .78);                                  /* borda fina clara */
  --vidro-brilho:inset 0 1px 0 rgb(255 255 255 / .70);                   /* fio de luz na borda de cima do vidro */
  --vidro-hover:color-mix(in oklab,var(--laranja-50) 85%,transparent);   /* link com o mouse em cima */
}
/* "o" encaixado (r7): as medidas do encaixe viram px no próprio .oe e descem iguais para o "o" e para o vizinho,
   mesmo quando o vizinho tem outro tamanho de letra (ex.: botão). Registro vale também dentro do estojo da prancha. */
@property --oe{syntax:'<length>';inherits:true;initial-value:0px}
@property --oe-in{syntax:'<length>';inherits:true;initial-value:0px}
@property --oe-r{syntax:'<length>';inherits:true;initial-value:0px}