/* ==========================================================================
   /300words: as 300 palavras mais pronunciadas
   Só o que é desta página. Cores, fontes, botões, cabeçalho e rodapé vêm
   do brand.css.
   ========================================================================== */

.p3-mono { font-family: "JetBrains Mono", Menlo, Consolas, monospace; }

/* --- topo ---------------------------------------------------------------- */
.p3-hero { background: var(--navy); color: #dcdcf0; padding-block: clamp(44px, 6vw, 84px); }
.p3-hero h1 { color: var(--white); max-width: 18ch; margin-bottom: 16px; }
.p3-hero .lead { color: #b6b6d8; max-width: 58ch; }
.p3-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.p3-hero__botoes { margin-top: 30px; }
#desafio { scroll-margin-top: 74px; }
#lista { scroll-margin-top: 150px; }
.p3-hero__meta span { border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-pill); padding: 8px 14px; font-size: var(--t-xs); font-weight: 700; color: #c6c6e4; }

/* --- por que começar por elas: os números ------------------------------- */
.p3-porque__lead { max-width: 60ch; margin-bottom: 30px; }
.p3-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .p3-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .p3-numeros { grid-template-columns: 1fr; } }
.p3-numero { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-lg); padding: 22px 22px 18px; }
.p3-numero__grande { font-size: var(--t-2xl); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--electric); margin-bottom: 10px; }
.p3-numero__grande--palavras { font-size: var(--t-xl); padding-block: .14em; }
.p3-numero__txt { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft); flex: 1; }
.p3-numero__txt b { color: var(--navy); }
.p3-numero__fonte { margin-top: 14px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--grey-2); }
.p3-porque__fecho { margin-top: 26px; font-size: var(--t-md); font-weight: 700; color: var(--navy); max-width: 62ch; }

/* --- o desafio ----------------------------------------------------------- */
.p3-desafio__topo { max-width: 62ch; margin-bottom: 30px; }
.p3-dias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 760px) { .p3-dias { grid-template-columns: 1fr; } }
.p3-dia { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.p3-dia .video { border-radius: 0; }
.p3-dia__corpo { padding: 20px 22px 24px; }
.p3-dia__n { font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--electric); margin-bottom: 4px; }
.p3-dia__titulo { font-size: var(--t-md); font-weight: 800; color: var(--navy); margin-bottom: 14px; }
.p3-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.p3-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--line); font-size: var(--t-sm); font-weight: 700; color: var(--navy); text-decoration: none; }
.p3-chip small { font-size: .7rem; font-weight: 600; color: var(--grey-2); }
a.p3-chip:hover { border-color: var(--electric); color: var(--electric); }
.p3-trancado { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; background: var(--navy); color: #c6c6e4; border-radius: var(--r-lg); padding: 26px 28px; }
.p3-trancado__txt { flex: 1 1 320px; }
.p3-trancado__txt b { display: block; color: var(--white); font-size: var(--t-md); margin-bottom: 6px; }
.p3-trancado__dias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.p3-trancado__dias span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px dashed rgba(255, 255, 255, .3); font-size: var(--t-xs); font-weight: 700; }
.p3-trancado__dias svg { width: 13px; height: 13px; }

/* --- a explicação -------------------------------------------------------- */
.p3-licao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .p3-licao { grid-template-columns: 1fr; } }
.p3-licao__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-soft); }
.p3-licao__item b { display: block; color: var(--navy); font-size: var(--t-base); margin-bottom: 6px; }

/* --- a barra de busca, colada embaixo do cabeçalho ------------------------ */
.p3-barra { position: sticky; top: 74px; z-index: 40; background: var(--white); border-bottom: 1px solid var(--line); padding-block: 12px; }
.p3-barra__inner { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.p3-busca { flex: 1 1 220px; min-width: 0; }
.p3-busca input { width: 100%; font: inherit; font-size: var(--t-sm); padding: 11px 16px; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink); }
.p3-busca input:focus { border-color: var(--electric); outline: none; }
.p3-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.p3-filtro { font: inherit; font-size: var(--t-xs); font-weight: 800; letter-spacing: .03em; padding: 9px 14px; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink-soft); cursor: pointer; }
.p3-filtro:hover { border-color: var(--electric); color: var(--electric); }
.p3-filtro[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.p3-conta { font-size: var(--t-xs); color: var(--grey-2); margin-left: auto; white-space: nowrap; }
@media (max-width: 620px) { .p3-barra { padding-block: 10px; } .p3-filtros { overflow-x: auto; flex-wrap: nowrap; width: 100%; padding-bottom: 2px; scrollbar-width: none; } .p3-filtro { flex: none; padding: 8px 13px; } .p3-conta { display: none; } }

/* --- a lista ------------------------------------------------------------- */
.p3-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; align-items: start; }
@media (max-width: 760px) { .p3-colunas { grid-template-columns: 1fr; } .p3-colunas .p3-lista + .p3-lista { border-top: 0; } }
.p3-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.p3-item { border-bottom: 1px solid var(--line); }
.p3-linha { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 13px 4px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.p3-linha:hover { background: var(--paper); }
.p3-linha:focus-visible { outline: 2px solid var(--electric); outline-offset: -2px; border-radius: 6px; }
.p3-num { font-size: var(--t-xs); color: var(--grey-2); }
.p3-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.p3-palavra { font-size: var(--t-md); font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.p3-formas-tag { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); background: #fff0e8; color: #b03a00; white-space: nowrap; }
.p3-seta { width: 22px; height: 22px; color: var(--grey-2); transition: transform .18s ease; }
.p3-item.is-aberto .p3-seta { transform: rotate(180deg); color: var(--electric); }
.p3-item.is-aberto .p3-palavra { color: var(--electric); }

/* o topo do painel: o som da palavra, o IPA e a transcrição */
.p3-som-palavra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.p3-som-palavra .p3-ipa { font-size: var(--t-sm); color: var(--ink-soft); }
.p3-som-palavra .p3-si { font-size: var(--t-base); color: var(--royal); font-weight: 600; }
.p3-si b, .p3-forma__si b { font-weight: 800; }
.p3-rotulo-som { font-size: var(--t-xs); font-weight: 700; color: var(--ink-soft); }

/* o botão de som */
.p3-som { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; background: var(--white); color: var(--navy); cursor: pointer; padding: 0; }
.p3-som:hover { border-color: var(--electric); color: var(--electric); }
.p3-som svg { width: 16px; height: 16px; }
.p3-som.is-tocando { background: var(--electric); border-color: var(--electric); color: var(--white); }
.p3-som--p { width: 34px; height: 34px; }
.p3-som--p svg { width: 14px; height: 14px; }

/* o painel que abre */
.p3-painel { padding: 4px 4px 22px 56px; }
@media (max-width: 760px) { .p3-painel { padding-left: 4px; } }
.p3-forma { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.p3-forma + .p3-forma { margin-top: 8px; }
.p3-forma__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.p3-forma__tag { padding: 3px 10px; border-radius: var(--r-pill); font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; background: var(--navy); color: var(--white); align-self: center; }
.p3-forma__tag--fraca { background: var(--teal); color: #00382c; }
.p3-forma__tag--forte { background: var(--orange); }
.p3-forma__si { font-size: var(--t-base); font-weight: 600; color: var(--royal); }
.p3-forma__ipa { font-size: var(--t-sm); color: var(--ink-soft); }
.p3-forma__nota { grid-column: 1; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; }
.p3-forma__ex { grid-column: 1; font-size: var(--t-base); font-weight: 700; color: var(--navy); }
.p3-forma__ex mark { background: rgba(75, 75, 255, .13); color: inherit; padding: 0 .12em; border-radius: 3px; }
.p3-forma > .p3-som { grid-column: 2; grid-row: 1 / span 3; }
.p3-forma__cabeca .p3-som { align-self: center; }
.p3-dica { margin-top: 12px; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft); border-left: 3px solid var(--electric); padding: 2px 0 2px 12px; }
.p3-extra { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: var(--t-xs); color: var(--grey-2); }
.p3-mw { display: inline-flex; align-items: center; gap: 8px; }
.p3-mw b { color: var(--navy); font-size: var(--t-sm); }
.p3-mw__txt { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Lucida Grande", Arial, sans-serif; font-weight: 600; letter-spacing: .01em; }
.p3-mw__lig { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.p3-extra a { color: var(--ink-soft); font-weight: 700; }
.p3-extra a:hover { color: var(--electric); }
.p3-vazio { padding: 40px 4px; color: var(--grey-2); }

/* --- legenda ------------------------------------------------------------- */
.p3-legenda { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.p3-legenda p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-soft); }
.p3-legenda p b { display: block; color: var(--navy); }
.p3-chave { background: var(--paper-2); padding: .08em .4em; border-radius: 4px; color: var(--navy); font-weight: 600; }

/* --- rodapé: as redes (as mesmas do teste) ------------------------------- */
.site-footer .redes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer .redes__titulo { margin-top: 26px; }
.site-footer .redes a { display: inline-flex; align-items: center; gap: 8px; color: #c6c6e4; font-weight: 600; text-decoration: none; }
.site-footer .redes a:hover { color: var(--white); text-decoration: none; }
.site-footer .redes a span:not(.redes__ico) { font-weight: 400; color: #9494bd; font-size: var(--t-sm); }
.site-footer .redes__ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #c6c6e4; }
.site-footer .redes__ico svg { width: 17px; height: 17px; }
.site-footer .redes a:hover .redes__ico { background: var(--orange); border-color: var(--orange); color: var(--white); }

/* ==========================================================================
   /cognatos: o que é só desta página (o resto vem do mesmo estilo da /300words)
   ========================================================================== */
#padroes, #exercicio { scroll-margin-top: 74px; }
.p3-hero h1 { max-width: 20ch; }

/* os cartões dos padrões */
.cg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .cg-cards { grid-template-columns: 1fr; } }
.cg-card { background: var(--white); border: 1px solid var(--line); border-top: 5px solid var(--electric); border-radius: var(--r-lg); padding: 22px 22px 18px; display: flex; flex-direction: column; }
.cg-card--igual { border-top-color: var(--teal); }
.cg-card__sufixo { margin: 0 0 6px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; color: var(--electric); }
.cg-card--igual .cg-card__sufixo { color: #008f73; }
.cg-card__titulo { margin: 0 0 4px; font-size: var(--t-md); font-weight: 800; color: var(--navy); }
.cg-card__est { margin: 0 0 12px; font-size: var(--t-xs); font-weight: 700; color: var(--grey-2); }
.cg-card__est b { color: var(--navy); }
.cg-card__regra { margin: 0 0 14px; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-soft); }
.cg-card__regra b { color: var(--orange); font-weight: 800; }
.cg-card--igual .cg-card__regra b { color: #008f73; }
.cg-card__lista { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid var(--line); }
.cg-ex-linha { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cg-ex-linha:last-child { border-bottom: 0; }
.cg-ex-linha__en { display: flex; flex-direction: column; min-width: 0; }
.cg-ex-linha__palavra { font-size: var(--t-base); font-weight: 800; color: var(--navy); }
.cg-ex-linha__si { font-size: var(--t-xs); font-weight: 600; color: var(--royal); }
.cg-ex-linha__si b, .cg-linha__si b { font-weight: 800; color: var(--orange); }
.cg-ex-linha__pt { font-size: var(--t-sm); color: var(--ink-soft); text-align: right; white-space: nowrap; }
.cg-ex-linha__pt b, .cg-linha__pt b { font-weight: 800; color: var(--navy); }

/* o exercício */
/* o teste fica no meio da página: título, texto e cartão */
#exercicio .wrap { text-align: center; }
#exercicio .eyebrow { justify-content: center; }
#exercicio .lead { margin-inline: auto; }
.cg-ex { max-width: 620px; margin: 0 auto; background: var(--paper); border-radius: var(--r-lg); padding: 24px 22px 26px; text-align: center; }
.cg-ex__ouvir { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: var(--t-sm); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 14px 26px 14px 20px; border: 0; border-radius: var(--r-pill); background: var(--navy); color: var(--white); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.cg-ex__ouvir:hover { background: var(--royal); }
.cg-ex__ouvir.is-tocando { background: var(--electric); transform: scale(1.03); }
.cg-ex__ouvir-ico { display: inline-flex; } .cg-ex__ouvir-ico svg { width: 22px; height: 22px; }
/* os dois modos do teste: Treino e Desafio */
.cg-ex__modo { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); }
.cg-ex__modo button { font: inherit; font-size: var(--t-xs); font-weight: 800; letter-spacing: .04em; padding: 8px 20px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-soft); cursor: pointer; }
.cg-ex__modo button:hover { color: var(--electric); }
.cg-ex__modo button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.cg-ex__regra { margin: 12px 0 22px; font-size: var(--t-xs); color: var(--grey-2); }
/* no Desafio: os três erros (bolinhas) e a sequência */
.cg-ex__vidas { display: inline-flex; align-items: center; gap: 8px; }
.cg-ex__vidas i { width: 14px; height: 14px; border: 2px solid #c9c9dc; border-radius: 50%; }
.cg-ex__vidas i.is-x { border-color: #e5484d; background: #e5484d; }
.cg-ex__rec { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line); color: var(--grey-2); }
.cg-ex__placar, .cg-ex__vidas { white-space: nowrap; }
/* o fim do Desafio */
.cg-ex__fim { padding: 10px 0 6px; }
.cg-ex__fim-selo { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: var(--r-pill); background: #e3f8f2; color: #006b55; font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cg-ex__fim-num { margin: 0; font-size: clamp(4rem, 3rem + 6vw, 6.5rem); font-weight: 800; line-height: .95; letter-spacing: -.03em; color: var(--electric); font-variant-numeric: tabular-nums; }
.cg-ex__fim-txt { margin: 6px 0 0; font-size: var(--t-md); font-weight: 700; color: var(--navy); }
.cg-ex__fim-det { margin: 10px 0 0; font-size: var(--t-sm); color: var(--ink-soft); }
.cg-ex__fim-det b { color: var(--navy); }
.cg-ex__fim-btn { margin-top: 24px; }
.cg-ex__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 20px; font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-2); }
.cg-ex__placar { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); background: var(--paper); color: var(--ink-soft); }
.section--paper .cg-ex__placar { background: var(--paper); }
.cg-ex__placar b { font-size: var(--t-sm); color: var(--navy); }
.cg-ex__seq { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line); color: #008f73; }
.cg-ex__placar.is-pulo { animation: cg-placar .35s cubic-bezier(.34, 1.6, .5, 1); }
@keyframes cg-placar { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cg-ex__placar.is-pulo { animation: none; } }
.cg-ex__palavra { margin: 18px 0 18px; font-size: clamp(2rem, 1.5rem + 2.4vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.cg-ex__silabas { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 10px; min-height: 84px; }
.cg-ex__silabas.is-respondido .cg-silaba { transition: padding .3s cubic-bezier(.34, 1.5, .5, 1), background-color .2s ease; }
.cg-ex__silabas.is-respondido .cg-silaba.is-certa { padding-block: 26px; }
.cg-silaba { font: inherit; font-size: var(--t-md); font-weight: 700; min-width: 70px; padding: 12px 16px; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--white); color: var(--royal); cursor: pointer; transition: border-color .15s, transform .15s; }
.cg-silaba:hover:not(:disabled) { border-color: var(--electric); transform: translateY(-2px); }
.cg-silaba.is-certa { background: var(--teal); border-color: var(--teal); color: #00382c; font-weight: 800; }
.cg-silaba.is-errada { background: #ffe9e9; border-color: #e5484d; color: #a31d22; }
.cg-silaba:disabled { cursor: default; }
.cg-ex__retorno { min-height: 1.6em; margin: 18px 0 0; font-size: var(--t-base); color: var(--ink-soft); }
.cg-ex__retorno.is-ok { color: #008f73; font-weight: 700; }
.cg-ex__retorno.is-erro { color: var(--ink-soft); }
.cg-ex__retorno b { color: var(--navy); }
.cg-ex__nav { margin-top: 16px; min-height: 58px; }
/* no celular o placar vai pra baixo dos erros, pra caber a sequência e o recorde */
@media (max-width: 520px) { .cg-ex__topo { flex-wrap: wrap; justify-content: center; gap: 10px 16px; } }

/* ---- a abertura: a sílaba que pula. Cada sílaba é um bloco; a tônica é o bloco
   alto e laranja. A palavra aparece em português e vira inglês: o bloco alto
   muda de lugar. ---- */
.cg-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 44px; align-items: center; }
/* no celular e no tablet a animação sobe pra logo depois do título */
@media (max-width: 980px) {
  .cg-hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .cg-hero__txt { display: contents; }
  .cg-hero .eyebrow { order: 1; } .cg-hero h1 { order: 2; } .cg-hero .cg-pulo { order: 3; margin: 8px 0 24px; } .cg-hero .lead { order: 4; } .cg-hero .p3-hero__botoes { order: 5; }
}
.cg-pulo { padding: 22px 22px 20px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-lg); background: rgba(255, 255, 255, .05); }
.cg-pulo__lingua { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .38); }
.cg-pulo__lingua i { font-style: normal; }
.cg-pulo__lingua span { transition: color .3s ease; }
.cg-pulo:not(.is-ingles) .cg-pulo__lingua [data-l="pt"], .cg-pulo.is-ingles .cg-pulo__lingua [data-l="en"] { color: var(--white); }
.cg-pulo__blocos { display: flex; align-items: flex-end; gap: 6px; height: 138px; transition: opacity .28s ease; }
.cg-pulo.is-trocando .cg-pulo__blocos { opacity: 0; }
.cg-bloco { flex: 1 1 0; min-width: 0; height: 42%; display: flex; align-items: flex-end; justify-content: center; padding: 0 2px 11px; border-radius: 12px; background: rgba(255, 255, 255, .11); color: #dcdcf0; font-size: clamp(.82rem, .5rem + 1.05vw, 1.12rem); font-weight: 700; white-space: nowrap; overflow: hidden; transition: height .6s cubic-bezier(.34, 1.45, .5, 1), background-color .4s ease, color .4s ease, flex-grow .45s ease, opacity .3s ease, margin .45s ease, padding .45s ease; }
.cg-bloco span { transition: opacity .16s ease; }
.cg-pulo.is-texto .cg-bloco span { opacity: 0; }
.cg-bloco.is-tonica { height: 100%; background: var(--orange); color: var(--white); font-weight: 800; text-transform: uppercase; }
.cg-bloco.is-fora { flex-grow: .0001; opacity: 0; margin-left: -6px; padding-inline: 0; }
.cg-pulo__som { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font: inherit; font-size: var(--t-xs); font-weight: 800; letter-spacing: .04em; padding: 9px 16px 9px 12px; border: 2px solid rgba(255, 255, 255, .22); border-radius: var(--r-pill); background: transparent; color: var(--white); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cg-pulo__som:hover { border-color: var(--white); }
.cg-pulo__som.is-tocando { background: var(--electric); border-color: var(--electric); }
.cg-pulo__som span { display: inline-flex; } .cg-pulo__som svg { width: 16px; height: 16px; }
@media (max-width: 520px) { .cg-pulo { padding: 18px 16px 16px; } .cg-pulo__blocos { height: 116px; gap: 4px; } .cg-bloco { border-radius: 10px; font-size: .8rem; } .cg-bloco.is-fora { margin-left: -4px; } }

/* ---- os pares: a mesma palavra, português de um lado e inglês do outro ---- */
.cg-pares { max-width: 660px; margin: 20px 0 22px; }
.cg-pares__cab, .cg-par { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) 40px; align-items: center; gap: 10px; }
.cg-pares__cab { padding: 0 18px 8px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); }
.cg-par { margin-bottom: 8px; padding: 10px 14px 10px 18px; border-radius: var(--r-md); background: var(--paper); font-size: var(--t-md); line-height: 1.3; color: var(--ink-soft); }
.cg-par i { font-style: normal; text-align: center; color: var(--grey-2); }
.cg-par b { font-weight: 800; }
.cg-par__pt b { color: var(--navy); }
.cg-par__en { font-weight: 600; color: var(--royal); }
.cg-par__en b { display: inline-block; color: var(--orange); transform-origin: 50% 75%; transition: transform .2s cubic-bezier(.34, 1.6, .5, 1), margin .2s ease; }
.cg-par.is-soando .cg-par__en b { transform: scale(1.34); margin-inline: .16em; }
.cg-par__en b:first-child { transform-origin: 0 75%; }
.cg-par.is-soando .cg-par__en b:first-child { margin-inline: 0 .42em; }
.cg-par__pt, .cg-par__en { white-space: nowrap; }
/* no celular a seta sai: as duas palavras precisam caber lado a lado sem quebrar */
@media (max-width: 520px) {
  .cg-pares__cab, .cg-par { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 40px; gap: 8px; }
  .cg-pares__cab > :nth-child(2), .cg-par > i { display: none; }
  .cg-par { padding: 8px 8px 8px 12px; font-size: clamp(.78rem, 3.7vw, .95rem); }
  .cg-pares__cab { padding-inline: 12px 8px; }
}
@media (max-width: 340px) { .cg-pares__cab, .cg-par { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) 36px; gap: 6px; } .cg-par { font-size: .74rem; padding-left: 10px; } .cg-par .p3-som--p { width: 36px; height: 36px; } }

/* ---- a tônica cresce enquanto o som toca (lista e cartões) ---- */
.cg-linha__si b, .cg-ex-linha__si b { display: inline-block; transform-origin: 50% 75%; transition: transform .2s cubic-bezier(.34, 1.6, .5, 1), margin .2s ease; }
.is-soando .cg-linha__si b, .is-soando .cg-ex-linha__si b { transform: scale(1.34); margin-inline: .16em; }
.cg-linha__si b:first-child, .cg-ex-linha__si b:first-child { transform-origin: 0 75%; }
.is-soando .cg-linha__si b:first-child, .is-soando .cg-ex-linha__si b:first-child { margin-inline: 0 .42em; }
.cg-linha.is-soando { background: var(--paper); }

/* ---- os números sobem do zero e as barras enchem ---- */
.cg-sil__barra { transition: width 1.1s cubic-bezier(.2, .7, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  .cg-bloco, .cg-bloco span, .cg-pulo__blocos, .cg-sil__barra, .cg-linha__si b, .cg-ex-linha__si b, .cg-par__en b, .cg-silaba { transition: none !important; }
}

/* ---- as três páginas: /cognatos, /cognatos-lista e /cognatos-padroes ---- */
a.cg-sil__card { display: flex; color: inherit; text-decoration: none; }
a.cg-card__ver { display: inline-block; text-decoration: none; }
.cg-abre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 30px; }
.cg-abre__nota { flex-basis: 100%; margin: 0; font-size: var(--t-xs); color: var(--grey-2); text-align: center; }

/* ---- português de um lado, inglês do outro: a causa do erro ---- */
.cg-duelo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.cg-lado { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 20px; padding: 26px 30px 22px; border-radius: var(--r-lg); background: var(--paper); }
.cg-lado__lingua { grid-column: 1 / -1; margin: 0 0 6px; font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.cg-lado__num { margin: 0; font-size: clamp(3.2rem, 2rem + 4.6vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--electric); font-variant-numeric: tabular-nums; }
.cg-mini { display: flex; align-items: flex-end; gap: 5px; height: 56px; padding-bottom: 8px; }
.cg-mini i { width: 26px; height: 40%; border-radius: 6px; background: #d9d9e8; }
.cg-mini i.is-t { height: 100%; }
.cg-lado--pt .cg-mini i.is-t { background: var(--navy); }
.cg-lado--en .cg-mini i.is-t { background: var(--orange); }
.cg-lado__txt { grid-column: 1 / -1; margin: 12px 0 0; max-width: 34ch; font-size: var(--t-base); line-height: 1.5; color: var(--ink-soft); }
.cg-lado__txt b { color: var(--navy); }
.cg-lado__fonte, .cg-tam__fonte { grid-column: 1 / -1; margin: 14px 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--grey-2); }
.cg-lado__fonte a, .cg-tam__frase cite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cg-lado__fonte a:hover, .cg-tam__frase cite a:hover { color: var(--electric); }
@media (max-width: 760px) { .cg-duelo { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; } .cg-lado { padding: 22px 22px 18px; } }

/* ---- o tamanho do problema: o número grande de um lado, o gráfico do outro ---- */
.section--paper .cg-ex { background: var(--white); }
#numeros { scroll-margin-top: 60px; }
.cg-tam { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.cg-tam__num { margin: 0 0 14px; font-size: clamp(5rem, 3rem + 9vw, 9rem); font-weight: 800; line-height: .86; letter-spacing: -.04em; color: var(--electric); font-variant-numeric: tabular-nums; }
.cg-tam__txt { margin: 0; max-width: 26ch; font-size: var(--t-md); line-height: 1.45; color: var(--ink-soft); }
.cg-tam__txt b { color: var(--navy); }
.cg-tam__frase { margin: 34px 0 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--orange); }
.cg-tam__frase p { margin: 0; max-width: 30ch; font-size: var(--t-md); font-weight: 700; line-height: 1.4; color: var(--navy); }
.cg-tam__frase cite { display: block; margin-top: 8px; font-size: .72rem; font-style: normal; font-weight: 700; letter-spacing: .04em; color: var(--grey-2); }
.cg-tam__titulo { margin: 6px 0 18px; font-size: var(--t-sm); font-weight: 800; line-height: 1.35; color: var(--navy); }
.cg-tam__nota { margin: 14px 0 0; font-size: var(--t-xs); color: var(--grey-2); }
/* as barras: uma série só, uma cor só; o valor escrito ao lado, em cor de texto */
.cg-barras { display: grid; gap: 4px; }
.cg-bl { display: grid; grid-template-columns: 92px minmax(0, 1fr) 54px; align-items: center; gap: 2px 14px; padding: 10px 12px; margin-inline: -12px; border-radius: var(--r-md); color: inherit; text-decoration: none; }
.cg-bl:hover, .cg-bl:focus-visible { background: var(--paper); outline: none; }
.cg-bl__rot { font-size: var(--t-sm); font-weight: 700; color: var(--navy); white-space: nowrap; }
.cg-bl__trilho { height: 16px; border-left: 2px solid var(--navy); background: var(--paper); border-radius: 0 4px 4px 0; overflow: hidden; }
.cg-bl:hover .cg-bl__trilho, .cg-bl:focus-visible .cg-bl__trilho { background: #e9e9f3; }
.cg-bl .cg-sil__barra { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--electric); }
.cg-bl:hover .cg-sil__barra { background: var(--royal); }
.cg-bl__pct { font-size: var(--t-md); font-weight: 800; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; }
.cg-bl__det { grid-column: 2 / -1; font-size: var(--t-xs); color: var(--grey-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .cg-tam { grid-template-columns: 1fr; gap: 40px; } .cg-tam__txt, .cg-tam__frase p { max-width: 36ch; } }
@media (max-width: 520px) { .cg-bl { grid-template-columns: 74px minmax(0, 1fr) 46px; gap: 2px 10px; } .cg-bl__rot { font-size: var(--t-xs); } .cg-bl__pct { font-size: var(--t-base); } }

/* ---- como a lista foi feita e as referências, lado a lado e uma por linha ---- */
.cg-notas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 20px 56px; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.cg-nota__titulo { margin: 0 0 12px; font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.cg-nota__lista { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft); }
.cg-nota__lista li { padding: 9px 0; border-top: 1px solid var(--line); }
.cg-nota__lista li:first-child { padding-top: 0; border-top: 0; }
.cg-nota__lista b { color: var(--navy); }
.cg-nota__lista a { color: var(--royal); text-decoration: underline; text-underline-offset: 2px; }
.cg-nota__lista a:hover { color: var(--electric); }
@media (max-width: 860px) { .cg-notas { grid-template-columns: 1fr; gap: 28px; } }
.cg-notas--uma { grid-template-columns: 1fr; max-width: 860px; }
.cg-topo { padding-block: clamp(34px, 4.5vw, 58px); }
.cg-topo h1 { max-width: 22ch; font-size: var(--t-2xl); }
.cg-topo .lead { margin-bottom: 0; }
.cg-volta { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: var(--t-xs); font-weight: 800; letter-spacing: .04em; color: #b6b6d8; text-decoration: none; }
.cg-volta:hover { color: var(--white); }
.cg-fim { height: 1px; }
#lista { scroll-margin-top: 60px; }

/* ---- como ler a lista: quatro itens curtos, cada um com o sinal que aparece na tabela ---- */
.cg-ler { background: var(--paper); border-bottom: 1px solid var(--line); }
.cg-ler > summary { display: flex; align-items: center; gap: 10px; padding-block: 16px; list-style: none; cursor: pointer; font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.cg-ler > summary::-webkit-details-marker { display: none; }
.cg-ler > summary::after { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); transition: transform .2s ease; }
.cg-ler[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.cg-ler > summary:hover { color: var(--electric); }
.cg-ler__itens { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cg-ler__itens li { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
.cg-ler__itens p { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); }
.cg-ler__itens p b { display: block; margin-bottom: 2px; color: var(--navy); }
.cg-ler__tok { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--t-md); font-weight: 800; line-height: 1; }
.cg-ler__tok--tonica { color: var(--orange); }
.cg-ler__tok--fraca { color: var(--royal); font-weight: 600; }
.cg-ler__tok--ipa { color: var(--ink-soft); font-weight: 500; }
.cg-ler__nota { margin: 14px 0 0; padding-bottom: 22px; font-size: var(--t-xs); color: var(--grey-2); }
.cg-ler__nota a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 980px) { .cg-ler__itens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cg-ler__itens { grid-template-columns: 1fr; gap: 10px; } .cg-ler__itens li { flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px 16px; } .cg-ler__tok { flex: none; width: 62px; flex-wrap: wrap; } }

/* o atributo hidden tem que valer mesmo em quem tem display próprio (.btn, cartões) */
[hidden] { display: none !important; }
#por-que { scroll-margin-top: 90px; }
/* ---- a barra de filtros: busca + quais palavras em cima, os filtros com rótulo embaixo.
   No celular ela fica compacta (busca + botão Filtros) e por isso pode grudar no topo. ---- */
.cg-f { padding-block: 14px; scroll-margin-top: 74px; }
.cg-f__topo { display: flex; align-items: center; gap: 12px; }
.cg-f__topo .p3-busca { flex: 1 1 260px; max-width: 460px; }
.cg-f .p3-busca input { padding-left: 44px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8aa0' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") 16px 50% / 18px no-repeat; }
.cg-f__seg { display: inline-flex; margin-left: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); }
.cg-f__seg button { font: inherit; font-size: var(--t-xs); font-weight: 800; letter-spacing: .03em; padding: 8px 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.cg-f__seg button:hover { color: var(--electric); }
.cg-f__seg button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.cg-f__abre { display: none; }
.cg-f__mais { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 12px; }
.cg-f__grupo { display: flex; align-items: center; gap: 10px; }
.cg-f__rot { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); white-space: nowrap; }
.cg-f__fecha { display: none; }
.cg-f .p3-filtros { flex-wrap: nowrap; width: auto; overflow: visible; }
@media (max-width: 760px) {
  .cg-f { padding-block: 10px; scroll-margin-top: 75px; }
  .cg-f__topo { flex-wrap: wrap; gap: 8px; }
  .cg-f__topo .p3-busca { flex: 1 1 0; max-width: none; }
  .cg-f__abre { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--t-xs); font-weight: 800; letter-spacing: .03em; padding: 11px 16px; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--navy); cursor: pointer; }
  .cg-f__abre[aria-expanded="true"] { border-color: var(--navy); }
  .cg-f__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--electric); color: var(--white); font-size: .68rem; line-height: 20px; text-align: center; }
  .cg-f__seg { display: none; order: 3; width: 100%; margin: 4px 0 0; }
  .cg-f__seg button { flex: 1; }
  .cg-f__mais { display: none; flex-direction: column; align-items: stretch; gap: 14px; padding-bottom: 4px; }
  .cg-f.is-aberto .cg-f__seg, .cg-f.is-aberto .cg-f__mais { display: flex; }
  .cg-f__grupo { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cg-f__grupo .cg-sel, .cg-f__grupo .cg-sel select { width: 100%; }
  .cg-f__fecha { display: inline-flex; justify-content: center; width: 100%; }
}
/* o resultado: quantas palavras e os filtros ligados, cada um com o seu x */
.cg-res { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 34px; padding: 0 4px 14px; }
.cg-res__conta { margin: 0 6px 0 0; font-size: var(--t-sm); color: var(--ink-soft); }
.cg-res__conta b { color: var(--navy); font-weight: 800; }
.cg-res__ativos { display: contents; }
.cg-res__chip { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--t-xs); font-weight: 700; padding: 6px 10px 6px 13px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--navy); cursor: pointer; }
.cg-res__chip span { font-size: 1rem; line-height: 1; color: var(--grey-2); }
.cg-res__chip:hover { border-color: var(--electric); } .cg-res__chip:hover span { color: var(--electric); }
.cg-res__limpa, .cg-res__extra { font: inherit; font-size: var(--t-xs); font-weight: 800; padding: 6px 4px; border: 0; background: none; color: var(--electric); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cg-vazio { padding: 36px 4px; color: var(--ink-soft); }
.cg-vazio p { margin: 0 0 14px; }
.cg-lista-topo { padding-bottom: 18px; scroll-margin-top: 90px; }
.cg-lista-topo .lead { max-width: 62ch; margin: 0; }
/* a barra: os dois grupos de filtro e a terminação */
/* a seta do navegador ficava colada na borda arredondada (ou pra fora dela): a caixa
   desenha a própria seta e reserva o espaço dela */
.cg-sel { display: inline-flex; }
.cg-sel select { -webkit-appearance: none; -moz-appearance: none; appearance: none; font: inherit; font-size: var(--t-xs); font-weight: 800; line-height: 1.2; padding: 10px 40px 10px 16px; border: 2px solid var(--line); border-radius: var(--r-pill); color: var(--ink-soft); cursor: pointer; text-overflow: ellipsis;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23232350' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E") right 16px center / 11px auto no-repeat; }
.cg-sel select:hover { border-color: var(--electric); }
.cg-sel select::-ms-expand { display: none; }
.cg-sel select:focus { border-color: var(--electric); outline: none; }

/* a lista */
.cg-tabela { border-top: 1px solid var(--line); }
.cg-linha { display: grid; grid-template-columns: 44px minmax(110px, 1fr) minmax(150px, 1.3fr) minmax(140px, 1.2fr) minmax(130px, 1.1fr) 64px 40px; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.cg-linha:not(.cg-linha--cab) { cursor: pointer; }
@media (hover: hover) { .cg-linha:not(.cg-linha--cab):hover { background: var(--paper); } }
.cg-linha--cab { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); padding-block: 12px; }
.cg-linha__en { font-size: var(--t-base); font-weight: 800; color: var(--navy); }
.cg-linha__si { font-size: var(--t-sm); font-weight: 600; color: var(--royal); }
.cg-linha__ipa { font-size: var(--t-sm); color: var(--ink-soft); }
.cg-linha__pt { font-size: var(--t-sm); color: var(--ink-soft); }
.cg-tag { display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cg-tag--muda { background: #fff0e8; color: #b03a00; }
.cg-tag--igual { background: #e3f8f2; color: #006b55; }
.cg-mais { display: flex; justify-content: center; margin-top: 22px; }
@media (max-width: 860px) {
  .cg-col-ipa { display: none; }
  .cg-linha { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 40px; grid-template-areas: "en pt som" "si tag som"; row-gap: 2px; padding-inline: 2px; }
  .cg-linha > :nth-child(1) { display: none; }
  .cg-linha > :nth-child(2) { grid-area: en; }
  .cg-linha > :nth-child(3) { grid-area: si; }
  .cg-linha > :nth-child(5) { grid-area: pt; text-align: right; }
  .cg-linha > :nth-child(6) { grid-area: tag; text-align: right; }
  .cg-linha > :nth-child(7) { grid-area: som; }
  .cg-linha .p3-som--p { width: 40px; height: 40px; }
  .cg-linha--cab { display: none; }
}

/* as fontes, no mesmo jeito da página principal: o dado e a fonte embaixo */
/* quanto mais sílabas, mais muda: os cartões seguem o p3-numero */
.p3-numeros--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .p3-numeros--3 { grid-template-columns: 1fr; } }
.p3-numero__fonte a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.p3-numero__fonte a:hover { color: var(--electric); }
.cg-card__ver { align-self: flex-start; margin-top: 8px; font: inherit; font-size: var(--t-xs); font-weight: 800; padding: 12px 0 4px; border: 0; background: none; color: var(--electric); cursor: pointer; }
.cg-card__ver:hover { text-decoration: underline; text-underline-offset: 3px; }
.cg-card--igual .cg-card__ver { color: #008f73; }
.cg-sil__titulo { margin: 40px 0 8px; font-size: var(--t-lg); font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.cg-sil__lead { margin: 0 0 20px; font-size: var(--t-base); line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.cg-sil { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .cg-sil { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cg-sil { gap: 10px; } .cg-sil__card { padding: 16px 14px 12px; } .cg-sil__card .p3-numero__grande { font-size: var(--t-xl); } .cg-sil__ex { display: none; } }
.cg-sil__card { font: inherit; text-align: left; border: 2px solid transparent; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.cg-sil__card > span { display: block; }
.cg-sil__card:hover, .cg-sil__card:focus-visible { border-color: var(--electric); outline: none; transform: translateY(-2px); }
.cg-sil__rot { margin-bottom: 8px; font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.cg-sil__trilho { height: 8px; margin-bottom: 14px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.cg-sil__barra { display: block; height: 100%; border-radius: var(--r-pill); background: var(--electric); }
.cg-sil__card .p3-numero__fonte { color: var(--electric); }
@media (prefers-reduced-motion: reduce) { .cg-sil__card { transition: none; } .cg-sil__card:hover { transform: none; } }
.cg-fontes__titulo { margin: 36px 0 14px; font-size: var(--t-md); font-weight: 800; color: var(--navy); }
.cg-fontes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cg-fontes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cg-fonte__nome a { color: inherit; text-decoration: none; } .cg-fonte__nome a:hover { text-decoration: underline; }
@media (max-width: 1080px) { .cg-fontes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cg-fontes--3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cg-fontes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cg-fontes { grid-template-columns: 1fr; } }
.cg-fonte { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; display: flex; flex-direction: column; }
.cg-fonte__dado { margin: 0 0 12px; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft); flex: 1; }
.cg-fonte__dado b { color: var(--navy); }
.cg-fonte__nome { margin: 0; font-family: "JetBrains Mono", Menlo, Consolas, monospace; font-size: .74rem; font-weight: 700; color: var(--electric); }
.cg-fonte__nome span { margin-right: 6px; color: var(--orange); }

/* botão do treinamento no cabeçalho, no mesmo padrão do "Quero ser membro" da página de venda */
.site-header a.cg-quero { flex: none; margin-left: 8px; padding: 10px 16px; border: 2px solid var(--orange); border-radius: var(--r-sm); background: var(--orange); color: var(--white); font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .18s ease, border-color .18s ease; }
.site-header a.cg-quero:hover { background: #e04e00; border-color: #e04e00; color: var(--white); }
@media (max-width: 900px) {
  .site-header a.cg-quero { margin-left: auto; }
  .site-header a.cg-quero + .nav-toggle { margin-left: 0; }
}
@media (max-width: 620px) {
  body[data-cg-pagina] .site-header__inner { gap: 8px; }
  body[data-cg-pagina] .site-header__logo img { width: 128px; }
  .site-header a.cg-quero { padding: 8px 11px; font-size: .6875rem; }
  .site-header a.cg-quero + .nav-toggle { padding: 8px 11px; font-size: .6875rem; }
}
@media (max-width: 360px) {
  body[data-cg-pagina] .site-header__logo img { width: 108px; }
  .site-header a.cg-quero, .site-header a.cg-quero + .nav-toggle { padding-inline: 9px; letter-spacing: .03em; }
}