/* ══════════════════════════════════════════════════════════════════════
   OSS YOGA · DESIGN SYSTEM PÚBLICO — camada de complemento
   Fase visual 3, 26/08/2026. Piloto: /formacoes.
   ══════════════════════════════════════════════════════════════════════

   ── O QUE ESTA FOLHA É ────────────────────────────────────────────────
   Uma camada FINA que entra DEPOIS do <style> da página e corrige três
   coisas: contraste, cor de Formação e família de botão. Ela não é um
   sistema paralelo — é o começo da migração do site público para o que
   já existe em assets/ds/oss-tokens.css (hoje só as telas internas usam).

   ── O QUE ELA DELIBERADAMENTE NÃO FAZ ─────────────────────────────────
   Não traz reset. Não redeclara :root inteiro. Não redefine tipografia,
   grade, espaçamento nem cor institucional — tudo isso já está no
   assets/css/tokens.css e no <style> de cada página, e duplicar seria
   criar a segunda arquitetura que estamos justamente desmontando.

   Georgia FICA. Os títulos com palavra grande, pequena, itálica e
   colorida FICAM. O sistema organiza; não amansa.

   ── A HIERARQUIA DE IDENTIDADE ────────────────────────────────────────
       LOGO      identidade   → assets/logos/svg/oss-*.svg
       COR       contexto     → os tokens temáticos abaixo
       GRAFISMO  atmosfera    → derivado do DNA do logo, nunca ícone novo
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── A LEI DA PALETA ─────────────────────────────────────────────────
     Contraste medido (WCAG 2.1), não estimado. Toda cor de acento
     funciona num fundo e falha no outro — por isso cada Formação tem
     DUAS formas, e o componente escolhe pelo palco:

        --x-ac   ACENTO  sobre floresta #0D1A10   ≥ 5,0:1
        --x-ti   TINTA   ≥ 5,0:1 sobre o FUNDO REAL do bloco, que não é
                         a névoa limpa: é névoa + véu do tema + o grafismo
                         derivado a 7% por trás do texto. Medir contra a
                         névoa sozinha deixava a etiqueta em 4,3:1 —
                         reprovada por causa das duas camadas que o
                         próprio sistema acrescentou. Sobre névoa limpa
                         estas tintas dão ~6,0:1, de sobra.
        --x      BASE    preenchimento e fio; não carrega texto
        --x-veu  VÉU     tinge o fundo da seção; nunca carrega texto  */

  --torii-ac:#D66740;  --torii-ti:#8A3A1E;  --torii-veu:rgba(196,82,42,.08);
  --indigo-ac:#7487B5; --indigo-ti:#41527B; --indigo-veu:rgba(74,93,140,.08);
  --bambu-ac:#7A9175;  --bambu-ti:#495847;  --bambu-veu:rgba(122,145,117,.10);
  --cobre-ac:#AA8049;  --cobre-ti:#6A4F2E;  --cobre-veu:rgba(160,120,69,.08);

  /* O YINspiradores não tinha token: era o hex solto #5a7ca8, e no cartão
     da /formacoes ele usava OURO — que é a cor da escola, não de uma
     Formação. Agora tem nome e as duas formas. */
  --ar:#5A7CA8; --ar-ac:#6B8AB1; --ar-ti:#3E5574; --ar-veu:rgba(90,124,168,.08);

  /* O dourado LEGÍVEL. O --ouro puro dá 2,01:1 sobre pergaminho: ele é
     fio, moldura e foco — nunca palavra em fundo claro. */
  --ouro-tinta:#735C1E;

  /* O piso da tinta clara sobre escuro. Abaixo de .55 não existe token,
     e é isso que impede o rgba(...,.4) de 3,52:1 de voltar. */
  --tinta-clara-2:rgba(245,241,232,.72);   /*  8,7:1 */
  --tinta-clara-3:rgba(245,241,232,.55);   /*  5,5:1 */

  /* A tinta de apoio DENTRO do bloco de Formação. O `--text-escuro-mid`
     (#5a6a5e) da página dava 4,55:1 sobre névoa limpa e passava. Mas o
     bloco não é névoa limpa: tem o véu do tema por cima e o grafismo
     derivado por trás do texto. Somados, o fundo escurece e o mesmo
     cinza cai para 3,73:1 — abaixo do piso.
     Medido no PIOR caso (véu do Yin + grafismo a 7% = #D1D0CF): 5,01:1.
     Sobre névoa limpa, 6,08:1. */
  --tinta-card:#49564D;
}

/* ── OS CINCO TEMAS ───────────────────────────────────────────────────
   Uma classe por Formação. Ela define as quatro formas de uma vez, e
   mantém --c-accent apontando para a base para não quebrar as regras
   que a página já tem (o fio de 3px, o ponto do módulo). */
.tema-vinyasa { --c-accent:var(--torii);  --c-ac:var(--torii-ac);  --c-ti:var(--torii-ti);  --c-veu:var(--torii-veu) }
.tema-yin     { --c-accent:var(--indigo); --c-ac:var(--indigo-ac); --c-ti:var(--indigo-ti); --c-veu:var(--indigo-veu) }
.tema-method  { --c-accent:var(--bambu);  --c-ac:var(--bambu-ac);  --c-ti:var(--bambu-ti);  --c-veu:var(--bambu-veu) }
.tema-hands   { --c-accent:var(--cobre);  --c-ac:var(--cobre-ac);  --c-ti:var(--cobre-ti);  --c-veu:var(--cobre-veu) }
.tema-ar      { --c-accent:var(--ar);     --c-ac:var(--ar-ac);     --c-ti:var(--ar-ti);     --c-veu:var(--ar-veu) }
.tema-oss     { --c-accent:var(--ouro);   --c-ac:var(--ouro);      --c-ti:var(--ouro-tinta);--c-veu:rgba(201,169,79,.08) }


/* ══ FOCO ═════════════════════════════════════════════════════════════
   Um anel, o mesmo em tudo que recebe teclado. Não se remove outline
   sem pôr este no lugar — por isso ele mora aqui e não em cada botão. */
.ds-b:focus-visible,
a:focus-visible, button:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--ouro,#C9A94F);
  outline-offset:3px;
  border-radius:1px;
}


/* ══ BOTÕES · uma família, três níveis, dois palcos ═══════════════════
   Substitui as famílias locais que cada bloco tinha. A cor da Formação
   entra na borda, no hover e no link — nunca vira um preenchimento
   diferente por cartão, senão cada bloco vira um sistema. */
.ds-b {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 32px;
  border:1px solid transparent; background:none;
  font:600 .68rem/1 Helvetica,Arial,sans-serif;
  letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.ds-b--sm { min-height:44px; padding:0 22px; font-size:.62rem }

/* nível 1 — a ação principal. Reconhecível em toda a página. */
.ds-b1 { background:var(--floresta); color:var(--pergaminho); border-color:var(--floresta) }
.ds-b1:hover { background:var(--verde-oss); border-color:var(--verde-oss) }

/* nível 2 — conhecer, ver o programa. Fio neutro, hover na cor do tema. */
.ds-b2 { color:var(--floresta); border-color:rgba(13,26,16,.24) }
.ds-b2:hover { border-color:var(--c-ti,var(--verde-oss)); color:var(--c-ti,var(--verde-oss)) }

/* nível 3 — textual editorial. */
.ds-b3 {
  min-height:auto; padding:0 0 4px; border:none;
  border-bottom:1px solid currentColor;
  color:var(--c-ti,var(--ouro-tinta)); letter-spacing:.14em;
}
.ds-b3:hover { color:var(--floresta) }

/* Sobre fundo escuro os papéis se invertem: o cheio vira claro. */
.ds-escuro .ds-b1 { background:var(--pergaminho); color:var(--floresta); border-color:var(--pergaminho) }
.ds-escuro .ds-b1:hover { background:var(--ouro); border-color:var(--ouro); color:var(--floresta) }
.ds-escuro .ds-b2 { color:var(--pergaminho); border-color:rgba(245,241,232,.28) }
.ds-escuro .ds-b2:hover { border-color:var(--c-ac,var(--ouro)); color:var(--c-ac,var(--ouro)); background:none }
.ds-escuro .ds-b3 { color:var(--c-ac,var(--ouro)) }
.ds-escuro .ds-b3:hover { color:var(--pergaminho) }

.ds-b .seta { font-size:1.15em; line-height:0; transform:translateY(1px) }


/* ══ LOGO DA FORMAÇÃO ═════════════════════════════════════════════════
   O SVG é monocromático e usa currentColor: uma arte serve às quatro
   variantes (temática, clara, escura, marca d'água) trocando só `color`.
   Nada de arquivo duplicado por cor. */
.ds-logo { display:block; flex:none; color:var(--c-ti,var(--floresta)) }
.ds-logo svg, .ds-logo img { width:100%; height:auto; display:block }
.ds-escuro .ds-logo { color:var(--c-ac,var(--ouro)) }

/* O SVG é servido como MÁSCARA, não como <img>: assim ele continua sendo
   um arquivo externo (cacheado, fora do HTML) e mesmo assim obedece
   `color`. Um <img> não obedeceria, e inlinear os cinco custaria ~45 KB
   no HTML de toda visita.
   Sem suporte a mask o elemento simplesmente não pinta — o logo é apoio,
   quem carrega a identidade é o título.

   O caminho em --ds-logo-arq tem de ser ABSOLUTO (/assets/...). Um
   url() dentro de custom property é resolvido relativo à folha que o
   CONSOME, não ao documento: com caminho relativo ele virava
   /assets/ds/assets/logos/svg/... e dava 404 silencioso. */
.ds-logo--mask { background-color:transparent }
@supports ((-webkit-mask-image:url("x.svg")) or (mask-image:url("x.svg"))) {
  .ds-logo--mask {
    background-color:currentColor;
    -webkit-mask:var(--ds-logo-arq) center/contain no-repeat;
            mask:var(--ds-logo-arq) center/contain no-repeat;
  }
}

/* Os dois símbolos figurativos (Vinyasa e Hands-On) vieram de masters
   5x menores e ficaram em fidelidade ACEITÁVEL, não ALTA. Enquanto não
   houver master maior eles não passam de 120px — a regra está escrita
   aqui para ninguém ampliá-los sem saber. */
.ds-logo--fig { max-width:120px }


/* ══ CARD DE FORMAÇÃO ═════════════════════════════════════════════════
   O bloco já tinha o fio de 3px na cor e muito respiro — isso fica.
   Entram três coisas: o véu do tema, o logo oficial e o fio superior
   na TINTA (o fio antigo usava a base, que em ouro sumia no papel).
   Não entra sombra, não entra raio, não entra fundo branco flutuando:
   é o que faz um bloco parecer cartão de painel de assinatura. */
.fbloco { background:var(--c-veu,transparent) }
.fbloco:hover { background:var(--c-veu,rgba(13,26,16,.025)) }

.fbloco { overflow:hidden }   /* recorta o grafismo na borda do bloco */

.fbloco .fbloco-marca {
  position:absolute; top:30px; right:16px;
  width:52px; height:52px;
  opacity:.85;
  pointer-events:none;
}

/* O grafismo derivado do logo. Fica no rodapé do bloco, à direita, longe
   da coluna de texto e do símbolo. A 7% ele é atmosfera: percebe-se que
   o bloco tem assunto, não se lê um desenho.
   Um por bloco — e nenhum grande, porque os cinco vivem na MESMA seção,
   e a regra "um grafismo grande por seção" continua valendo. */
.fbloco .fbloco-gf {
  position:absolute; right:-26px; bottom:-30px;
  width:210px; height:210px;
  color:var(--c-ti, var(--floresta));
  opacity:.07;
  pointer-events:none; z-index:0;
}
.fbloco .fbloco-gf svg { width:100%; height:100%; display:block }
/* O conteúdo do bloco sobe acima do grafismo. A marca fica de fora: ela
   é absoluta, e trocar isso por relative a jogaria para dentro do fluxo. */
.fbloco > *:not(.fbloco-gf):not(.fbloco-marca) { position:relative; z-index:1 }
.fbloco .fbloco-marca { z-index:2 }
/* O título não pode passar por baixo do logo. */
.fbloco .fbloco-tag,
.fbloco .fbloco-titulo { padding-right:74px }

@media (max-width:760px) {
  .fbloco .fbloco-marca { width:40px; height:40px; top:26px; right:8px }
  .fbloco .fbloco-tag,
  .fbloco .fbloco-titulo { padding-right:52px }
  /* No celular a coluna de texto ocupa a largura toda: o grafismo encolhe
     e desce, para não passar por trás de parágrafo nenhum. */
  .fbloco .fbloco-gf { width:140px; height:140px; right:-34px; bottom:-38px; opacity:.055 }
}


/* ══ ORNAMENTO · o grafismo derivado ══════════════════════════════════
   Regras que impedem a página de virar ilustrada:
     · no máximo UM ornamento grande por seção;
     · sempre ATRÁS do texto, nunca ao lado dele;
     · opacidade entre 8% e 16%;
     · nunca captura o mouse.                                          */
.ds-orn {
  position:absolute; z-index:0; pointer-events:none;
  color:var(--c-ti,var(--ouro-tinta));
  opacity:.10;
}
.ds-escuro .ds-orn { color:var(--c-ac,var(--ouro)) }
.ds-orn svg { width:100%; height:100%; display:block }
.ds-orn--8  { opacity:.08 }
.ds-orn--12 { opacity:.12 }
.ds-orn--16 { opacity:.16 }

/* Os dois lugares onde há ornamento grande. Ficam aqui, e não no atributo
   style, para poderem mudar de tamanho e de canto no celular — no inline
   só se venceria com !important. */
.ds-orn--hero    { left:-90px;  top:50%; transform:translateY(-50%); width:420px; height:420px }
.ds-orn--jornada { right:-120px; top:50%; transform:translateY(-50%); width:460px; height:460px }

@media (max-width:760px) {
  /* No celular o texto ocupa a largura toda e não há canto livre: o
     ornamento sai de trás do título, desce para o pé da seção e clareia.
     A atmosfera continua; a leitura não paga por ela. */
  .ds-orn { opacity:.055 }
  .ds-orn--jornada { width:280px; height:280px; right:-146px; top:auto; bottom:-30px; transform:none }

  /* O hero do celular não tem canto livre: o título ocupa as duas linhas
     inteiras e a frase abaixo dele também. Medido, o grafismo por trás
     custava 15,89 → 14,76:1 no título — não fere leitura. Mas a regra é
     que grafismo não passa por trás de texto, e aqui não há para onde
     movê-lo. Sai no celular; a atmosfera do hero fica para o desktop, e
     a identidade continua nos cinco logos e nas cores. */
  .ds-orn--hero { display:none }
}
/* O conteúdo tem de subir acima do ornamento. */
.ds-tem-orn { position:relative; isolation:isolate }
/* A onda fica de fora: ela é absoluta e mora em z-index 3. Sem esta
   exceção a regra abaixo a tornaria relativa e a jogaria para trás —
   a onda desapareceria da seção. */
.ds-tem-orn > *:not(.ds-orn):not(.wave-bottom) { position:relative; z-index:1 }
/* Recorta o ornamento na borda da seção — é o "parcialmente cortado pela
   composição". Serve onde a seção NÃO tem onda: overflow:hidden cortaria
   o bottom:-1px dela e devolveria a linha de emenda. */
.ds-recorta { overflow:hidden }

/* Onde HÁ onda, o recorte vai numa camada só do ornamento. Sem ela um
   ornamento com right:-120px empurra a largura do documento e cria
   rolagem horizontal — foi o que aconteceu em 768 e 1600 px. */
.ds-orn-camada { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }

/* O traço do grafismo não engorda quando a marca d'água é ampliada. */
.ds-gf { fill:none; stroke:currentColor; stroke-width:1.1;
         stroke-linecap:round; stroke-linejoin:round;
         vector-effect:non-scaling-stroke }
.ds-gf-f { fill:currentColor; stroke:none }


/* ══ SEPARADORES · a gramática curta ══════════════════════════════════
   ONDA        fluxo, respiração — e SEMPRE que o fundo troca claro↔escuro
   CORTE RETO  mudança simples de assunto, entre dois claros
   ESPAÇO      transição contemplativa
   O mecanismo da onda (currentColor + a cor da seção seguinte) fica
   como está: é a melhor engenharia do site. O que muda é a escolha. */
.ds-corte { height:1px; border:0; background:rgba(13,26,16,.12); margin:0 }
.ds-espaco { height:96px }
@media (max-width:760px) { .ds-espaco { height:56px } }


/* ══ ACESSIBILIDADE · as correções medidas ════════════════════════════
   Cada regra abaixo troca um par reprovado por um aprovado. O número
   ao lado é o contraste depois da troca.                              */

/* A etiqueta do bloco usava a BASE da cor sobre pergaminho: o ouro dava
   2,01:1 e o bambu 3,04:1. Passa a usar a TINTA. */
.fbloco .fbloco-tag { color:var(--c-ti,var(--ouro-tinta)) }        /* ≥ 5,0:1 */

/* O número da parcela usava a base sobre floresta-2: o índigo dava
   2,76:1. Passa a usar o ACENTO. */
.soma .parcela .parcela-h { color:var(--c-ac,var(--ouro)) }        /* ≥ 5,0:1 */
.soma .parcela .parcela-n .base { color:var(--tinta-clara-3) }     /*   5,5:1 */

/* A etiqueta de "Uma escolha / Um percurso" tinha o mesmo problema. */
.poss .poss-tag { color:var(--c-ti,var(--ouro-tinta)) }            /* ≥ 5,0:1 */

/* O rótulo "MÓDULO" e a carga horária ficavam em cinza sobre nevoa. */
.fmod .fmod-nome .rot { color:var(--c-ti,var(--ouro-tinta)) }      /* ≥ 5,0:1 */

/* A migalha em fundo claro. O `is-clara` da mobile-nav.css pinta com
   rgba(245,241,232,.6) — semitransparente, feito para páginas de corpo
   claro. Nesta o <body> é floresta, e o resultado foi uma faixa cinza
   entre o hero claro e a seção clara: exatamente a faixa escura que
   estamos removendo. Aqui ela é sólida, e o fio de baixo separa. */
/* O `!important` não é preguiça: é defesa contra CACHE.
   O bloco `@media(max-width:980px){nav{background:… !important}}` do
   mobile-nav.css pegava a migalha porque a migalha também é um <nav>.
   Isso foi corrigido lá (`nav:not(.migalha)`), mas o mobile-nav.css é
   guardado SETE DIAS pelo netlify.toml e a sua única chave de cache é o
   `?v=`, que é baseado em data e não muda duas vezes no mesmo dia. Quem
   já visitou o site continua com a folha antiga.
   Esta folha é NOVA — nunca vem do cache. Então a garantia mora aqui:
   `.migalha.is-clara` (0,0,2,0) vence `nav` (0,0,0,1) entre importantes,
   e a migalha fica clara com folha velha ou nova. */
.migalha.is-clara { background:var(--pergaminho,#F5F1E8) !important }
.migalha.is-clara { padding:0 !important }
.migalha.is-clara .migalha-in { color:rgba(13,26,16,.66) }         /*   6,0:1 */
.migalha.is-clara a { color:rgba(13,26,16,.72) }                   /*   7,0:1 */
.migalha.is-clara [aria-current="page"] { color:var(--ouro-tinta) }/*   5,2:1 */


/* ══ EYEBROW ══════════════════════════════════════════════════════════
   O rótulo de seção é ouro puro: 7,9:1 sobre floresta e 1,78:1 sobre
   névoa. Ele fica dourado no escuro e vira ouro-tinta no claro — mesma
   família de cor, legibilidade nos dois palcos. */
.hero .eyebrow, .start .eyebrow, .fmc-faixa .eyebrow { color:var(--ouro-tinta) }   /* 5,05:1 */
.hero .eyebrow::before, .start .eyebrow::before, .fmc-faixa .eyebrow::before { background:var(--ouro-tinta) }

/* ══ RODAPÉ ═══════════════════════════════════════════════════════════
   As linhas de apoio e os links legais estavam em rgba .40 e .42 sobre
   floresta-2 — 3,47:1 e 3,68:1. Sobem para o piso do sistema. */
.footer-bottom { color:var(--tinta-clara-3) }        /* era rgba(…,.40) = 3,47:1 → 5,33:1 */
.rodape-legal  { color:var(--tinta-clara-3) }        /* era rgba(…,.42) = 3,68:1 → 5,33:1 */


/* ══ A TINTA DE APOIO DO BLOCO ════════════════════════════════════════
   Vale só dentro do bloco de Formação, que é onde há véu e grafismo.
   Fora dele o cinza da página continua valendo. */
.fbloco .fbloco-sub,
.fbloco .fbloco-fecho,
.fbloco .fmod-nome .carga,
.fbloco .fbloco-titulo .carga { color:var(--tinta-card) }        /* ≥ 5,0:1 */