@charset "UTF-8";
/* =============================================================================
   WORPEN — Site institucional
   -----------------------------------------------------------------------------
   Arquivo único: uma requisição, um cache. Dividir em quatro folhas custaria
   três conexões a mais para economizar nada — o arquivo inteiro tem menos de
   30 KB comprimido.

   Zero dependência: nenhum framework, nenhuma fonte remota, nenhum ícone
   externo. As fontes são variáveis e servidas daqui mesmo.

   Ordem das seções:
     1. Variáveis           8. Cabeçalho e rodapé
     2. Fontes              9. Hero e provas
     3. Reset              10. Seções de conteúdo
     4. Tipografia         11. Catálogo e curso
     5. Layout             12. Preços e FAQ
     6. Utilitários        13. Blog e texto longo
     7. Componentes        14. Formulários
                           15. Responsivo
                           16. Ciclo de cobrança (mensal/anual)
                           17. Micro-interações
                           18. Movimento reduzido
   ========================================================================== */

/* =============================================================================
   1. VARIÁVEIS
   Tudo que se repete mora aqui. Trocar a marca é trocar este bloco.
   ========================================================================== */
:root {
    /* ---- superfícies (papel quente) ---- */
    --canvas:        #FAF8F4;
    --surface:       #FFFFFF;
    --surface-2:     #F4F1EA;
    --surface-3:     #EFEBE2;
    --line:          #E6E1D7;
    --line-soft:     #EFEBE2;
    --line-strong:   #D5CFC3;

    /* ---- tinta (derivada do navy da marca) ---- */
    --ink:           #0C1921;
    --ink-2:         #42525A;
    --ink-3:         #6B767D;
    --ink-4:         #9BA4A9;
    --ink-on-dark:   #FAF8F4;
    --ink-on-dark-2: rgba(250, 248, 244, .70);
    --ink-on-dark-3: rgba(250, 248, 244, .52);

    /* ---- marca ----
       --brand é a cor de superfície (botão, barra); --brand-ink é a versão
       para texto, escurecida até 4,6:1 sobre o papel. Usar o laranja puro em
       texto pequeno dá 3,1:1 e reprova na WCAG AA. */
    --brand:         #EC4E12;
    --brand-ink:     #B23A0C;
    --brand-bg:      #FDEDE6;
    --brand-line:    #F8D4C4;

    /* ---- semântica ----
       O vermelho de risco é propositalmente mais escuro que o laranja da
       marca, para que os dois nunca se confundam num gráfico. */
    --pos:           #3C6B4C;  --pos-ink:  #2B5039;  --pos-bg:  #ECF3EE;  --pos-line:  #D2E1D7;
    --warn:          #B07B14;  --warn-ink: #855A0A;  --warn-bg: #FBF3E1;  --warn-line: #EEDEBA;
    --neg:           #A32118;  --neg-ink:  #851810;  --neg-bg:  #FBEBE8;  --neg-line:  #F1D2CB;

    /* ---- tipografia ---- */
    --font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
    --font-ui:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --fvs-display:   "opsz" 48, "SOFT" 0, "WONK" 0, "wght" 480;
    --fvs-metric:    "opsz" 96, "SOFT" 0, "WONK" 0, "wght" 460;
    --ls-display:    -.018em;
    --ls-heading:    -.014em;

    /* Tipo fluido: cresce com a viewport entre 20rem e 90rem, sem media query.
       O clamp evita tanto o título gigante no celular quanto o minúsculo no
       monitor grande. */
    --fs-hero:       clamp(2.375rem, 1.5rem + 4vw, 4rem);
    --fs-h1:         clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
    --fs-h2:         clamp(1.5rem, 1.15rem + 1.7vw, 2.25rem);
    --fs-h3:         clamp(1.125rem, 1rem + .55vw, 1.375rem);
    --fs-body-lg:    clamp(1rem, .95rem + .3vw, 1.1875rem);
    --fs-body:       1rem;
    --fs-sm:         .875rem;
    --fs-xs:         .8125rem;
    --fs-label:      .75rem;

    /* ---- espaço ----
       Escala de 4 px. Nomes por tamanho, não por uso, para não amarrar o
       espaçamento a um componente específico. */
    --e-1:  .25rem;   --e-2:  .5rem;    --e-3:  .75rem;   --e-4:  1rem;
    --e-5:  1.5rem;   --e-6:  2rem;     --e-7:  2.5rem;   --e-8:  3rem;
    --e-9:  4rem;     --e-10: 5rem;     --e-11: 6rem;

    --secao-y:       clamp(3.5rem, 2rem + 6vw, 7rem);
    --gutter:        clamp(1.25rem, .5rem + 2.5vw, 2.5rem);
    --largura:       75rem;      /* 1200 px */
    --largura-texto: 42rem;      /* medida de leitura confortável */

    /* ---- forma ---- */
    --r-sm:   5px;
    --r-md:   8px;
    --r-lg:   14px;
    --r-full: 999px;

    --sombra-card:  0 1px 2px rgba(12, 25, 33, .04);
    --sombra-alta:  0 24px 48px -24px rgba(12, 25, 33, .28);
    --sombra-shot:  0 32px 64px -28px rgba(12, 25, 33, .38);

    /* ---- movimento ---- */
    --transicao:  .18s cubic-bezier(.4, 0, .2, 1);

    /* ---- foco visível ---- */
    --foco: 0 0 0 2px var(--canvas), 0 0 0 4px var(--brand);
}

/* =============================================================================
   2. FONTES
   Variáveis, subconjunto latino, servidas do próprio domínio. `swap` mostra a
   fonte de sistema enquanto a nossa carrega — o texto nunca fica invisível.
   ========================================================================== */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-full-normal.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
    font-weight: 100 800;
    font-display: swap;
    font-style: normal;
}

/* =============================================================================
   3. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;     /* o cabeçalho fixo não cobre a âncora */
}

body {
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
svg { flex: none; }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 0; box-shadow: var(--foco); border-radius: var(--r-sm); }

::selection { background: var(--brand-bg); color: var(--ink); }

/* =============================================================================
   4. TIPOGRAFIA
   ========================================================================== */
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 600; line-height: 1.15; }

.t-hero,
h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-variation-settings: var(--fvs-display);
    font-weight: 400;
    letter-spacing: var(--ls-display);
    line-height: 1.06;
}
.t-hero { font-size: var(--fs-hero); }

h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-variation-settings: var(--fvs-display);
    font-weight: 400;
    letter-spacing: var(--ls-display);
    line-height: 1.12;
}

h3 {
    font-size: var(--fs-h3);
    letter-spacing: var(--ls-heading);
    line-height: 1.3;
}

h4 { font-size: 1.0625rem; letter-spacing: var(--ls-heading); }

.t-metrica {
    font-family: var(--font-display);
    font-variation-settings: var(--fvs-metric);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.1;      /* 1 cortava o topo dos algarismos em opsz alto */
    color: var(--ink);
}

.t-etiqueta {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-ink);
}

.t-lead   { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--ink-2); }
.t-sm     { font-size: var(--fs-sm); }
.t-xs     { font-size: var(--fs-xs); }
.mono     { font-family: var(--font-mono); font-size: .875em; letter-spacing: -.01em; }

.ink   { color: var(--ink); }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }
.ink-4 { color: var(--ink-4); }
.pos   { color: var(--pos-ink); }
.warn  { color: var(--warn-ink); }
.neg   { color: var(--neg-ink); }
.marca { color: var(--brand-ink); }

em.destaque { font-style: normal; color: var(--brand-ink); }

strong, b { font-weight: 600; color: var(--ink); }

/* =============================================================================
   5. LAYOUT
   ========================================================================== */
.wrap {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.wrap--estreito { max-width: 56rem; }
.wrap--largo    { max-width: 82rem; }

.secao      { padding-block: var(--secao-y); }
.secao--tom { background: var(--surface-2); }
.secao--escura {
    background: var(--ink);
    color: var(--ink-on-dark-2);
}
.secao--escura h2,
.secao--escura h3,
.secao--escura b,
.secao--escura strong { color: var(--ink-on-dark); }
/* `strong, b { color: var(--ink) }` da tipografia é mais específico que o
   herdado da seção; sem esta linha o negrito some no fundo navy. */
.secao--escura .t-etiqueta { color: #F7A98A; }

.secao__topo { max-width: 46rem; margin-bottom: var(--e-7); }
.secao__topo--centro { margin-inline: auto; text-align: center; }
.secao__topo h1,
.secao__topo h2 { margin-block: var(--e-2) var(--e-3); }
.secao__topo p  { font-size: var(--fs-body-lg); color: var(--ink-3); }
.secao--escura .secao__topo p { color: var(--ink-on-dark-2); }

.grade { display: grid; gap: var(--e-4); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* =============================================================================
   6. UTILITÁRIOS
   ========================================================================== */
.pular-para-conteudo {
    position: absolute;
    left: -100vw;
    top: 0;
    z-index: 200;
    background: var(--ink);
    color: var(--ink-on-dark);
    padding: var(--e-3) var(--e-4);
    border-radius: 0 0 var(--r-md) 0;
    font-size: var(--fs-sm);
    font-weight: 600;
}
.pular-para-conteudo:focus { left: 0; }

.so-leitor-de-tela {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.centro { text-align: center; }
.empilha { display: grid; gap: var(--e-3); }
[hidden] { display: none !important; }

/* =============================================================================
   7. COMPONENTES
   ========================================================================== */

/* ---- Botões ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    height: 2.75rem;                 /* 44 px: alvo de toque mínimo */
    padding-inline: 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: -.006em;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.btn svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2; }

.btn--principal { background: var(--ink); color: var(--ink-on-dark); }
.btn--principal:hover { background: #22333C; }

.btn--marca { background: var(--brand); color: #FFF; }
.btn--marca:hover { background: #D34410; }

.btn--contorno { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.btn--contorno:hover { border-color: var(--ink-4); }

.btn--fantasma { color: var(--ink-2); }
.btn--fantasma:hover { color: var(--ink); }

.btn--grande { height: 3.25rem; padding-inline: 1.75rem; font-size: var(--fs-body); }
.btn--bloco  { width: 100%; }

.secao--escura .btn--contorno {
    background: transparent;
    border-color: rgba(250, 248, 244, .28);
    color: var(--ink-on-dark);
}
.secao--escura .btn--contorno:hover { border-color: rgba(250, 248, 244, .55); }

/* ---- Link com seta ---- */
/* O padding não é estético: link solto precisa de 24 px de alvo (WCAG 2.2,
   critério 2.5.8). A exceção de "link dentro de frase" não vale aqui, porque
   este fica sozinho na linha. */
.link-seta {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding-block: .25rem;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--brand-ink);
}
.link-seta svg { width: .875rem; height: .875rem; stroke: currentColor; fill: none; stroke-width: 2.4; transition: transform var(--transicao); }
.link-seta:hover svg { transform: translateX(2px); }

/* ---- Selo ---- */
.selo {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: .1875rem .5rem;
    border-radius: var(--r-full);
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--ink-3);
    white-space: nowrap;
}
.selo i { width: .375rem; height: .375rem; border-radius: var(--r-full); background: currentColor; }
.selo--marca { background: var(--brand-bg); border-color: var(--brand-line); color: var(--brand-ink); }
.selo--ok    { background: var(--pos-bg);   border-color: var(--pos-line);   color: var(--pos-ink); }
.selo--warn  { background: var(--warn-bg);  border-color: var(--warn-line);  color: var(--warn-ink); }
.selo--neg   { background: var(--neg-bg);   border-color: var(--neg-line);   color: var(--neg-ink); }

/* ---- Cartão ---- */
.cartao {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--e-5);
    box-shadow: var(--sombra-card);
}
.cartao h3 { margin-bottom: var(--e-2); }
.cartao p  { font-size: var(--fs-sm); color: var(--ink-3); }

.cartao__ico {
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: var(--brand-bg);
    border: 1px solid var(--brand-line);
    color: var(--brand-ink);
    margin-bottom: var(--e-4);
}
.cartao__ico svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Cartão sobre fundo escuro: papel branco no meio do navy fica com peso
   demais e rouba a leitura do título da seção. */
.secao--escura .cartao {
    background: rgba(250, 248, 244, .05);
    border-color: rgba(250, 248, 244, .14);
    box-shadow: none;
    color: var(--ink-on-dark-2);
}
.secao--escura .cartao p { color: var(--ink-on-dark-2); }
.secao--escura .cartao a { color: #F7A98A; text-decoration: underline; text-underline-offset: 2px; }
.secao--escura .cartao__ico {
    background: rgba(236, 78, 18, .16);
    border-color: rgba(236, 78, 18, .34);
    color: #F7A98A;
}
.secao--escura .ficha dt { color: var(--ink-on-dark-3); }
.secao--escura .ficha dd { color: var(--ink-on-dark); }
.secao--escura .ficha div { border-bottom-color: rgba(250, 248, 244, .12); }

/* ---- Print do produto ---- */
.print {
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--sombra-shot);
}
.print img { width: 100%; }
.print__barra {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: .625rem .875rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.print__barra i { width: .5rem; height: .5rem; border-radius: var(--r-full); background: var(--line-strong); }
.print__url {
    margin-left: var(--e-2);
    font-family: var(--font-mono);
    font-size: .6875rem;
    color: var(--ink-4);
}

/* ---- Citação ---- */
.citacao {
    border-left: 3px solid var(--brand);
    padding-left: var(--e-5);
}
.citacao blockquote {
    font-family: var(--font-display);
    font-variation-settings: var(--fvs-display);
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
    line-height: 1.32;
    letter-spacing: var(--ls-display);
    color: var(--ink);
}
.citacao figcaption {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin-top: var(--e-4);
    font-size: var(--fs-sm);
}
.citacao figcaption b { display: block; color: var(--ink); }
.citacao figcaption span { color: var(--ink-3); font-size: var(--fs-xs); }
.secao--escura .citacao blockquote { color: var(--ink-on-dark); }
.secao--escura .citacao figcaption span { color: var(--ink-on-dark-3); }

.avatar {
    width: 2.5rem; height: 2.5rem;
    border-radius: var(--r-full);
    display: grid; place-items: center;
    background: var(--ink);
    color: var(--ink-on-dark);
    font-size: var(--fs-xs);
    font-weight: 700;
    flex: none;
}
.secao--escura .avatar { background: rgba(250, 248, 244, .14); }

/* ---- Trilha de navegação ---- */
.migalhas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--e-2);
    font-size: var(--fs-xs);
    color: var(--ink-3);
    margin-bottom: var(--e-4);
}
.migalhas svg { width: .75rem; height: .75rem; stroke: currentColor; fill: none; stroke-width: 2; }
.migalhas a { display: inline-block; padding-block: .1875rem; }
.migalhas a:hover { color: var(--ink); }
.migalhas [aria-current] { color: var(--ink-2); font-weight: 600; }

/* =============================================================================
   8. CABEÇALHO E RODAPÉ
   ========================================================================== */
.aviso-topo {
    background: var(--ink);
    color: var(--ink-on-dark-2);
    font-size: var(--fs-xs);
    text-align: center;
    padding: var(--e-2) var(--gutter);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    flex-wrap: wrap;
}
.aviso-topo b { color: var(--ink-on-dark); }
.aviso-topo .tag {
    background: var(--brand);
    color: #FFF;
    border-radius: var(--r-full);
    padding: .0625rem .4375rem;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.aviso-topo a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--e-2);
    padding-block: .1875rem;
    color: inherit;
    text-underline-offset: 2px;
}
.aviso-topo a:hover b { text-decoration: underline; }

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--canvas) 90%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transicao), background var(--transicao);
}
.cabecalho.rolou { border-bottom-color: var(--line); background: color-mix(in srgb, var(--canvas) 97%, transparent); }

.cabecalho__in {
    display: flex;
    align-items: center;
    gap: var(--e-6);
    height: 4.25rem;
}
.marca-link { display: flex; align-items: center; flex: none; }
.marca-link img { height: 1.625rem; width: auto; }

.menu { display: flex; align-items: center; gap: var(--e-5); }
.menu a {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-2);
    padding-block: var(--e-2);
    transition: color var(--transicao);
}
.menu a:hover { color: var(--ink); }
.menu a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.cabecalho__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--e-3); }
.cabecalho__acoes > a:not(.btn) {
    display: inline-flex;
    align-items: center;
    height: 2.75rem;               /* mesmo alvo do botão ao lado */
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-2);
}

.abrir-menu {
    display: none;
    width: 2.75rem; height: 2.75rem;
    margin-left: auto;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
}
.abrir-menu svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 2; }
.abrir-menu .fechar { display: none; }
.abrir-menu[aria-expanded="true"] .abrir { display: none; }
.abrir-menu[aria-expanded="true"] .fechar { display: block; }

/* Navegação alternativa quando o JavaScript não roda: some no desktop,
   onde o menu normal já aparece inteiro. */
.menu-sem-js { display: none; }
@media (max-width: 61.9375rem) {
    .menu-sem-js {
        display: block;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: var(--surface);
        padding-block: var(--e-2);
    }
    .menu-sem-js .wrap { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
    .menu-sem-js a { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); padding-block: var(--e-2); }
    .menu-sem-js a:hover { color: var(--ink); }
    .abrir-menu[hidden] { display: none; }
}

.rodape { background: var(--surface-2); border-top: 1px solid var(--line); padding-top: var(--e-9); }
.rodape__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--e-6);
    padding-bottom: var(--e-8);
}
.rodape__marca { grid-column: span 2; }
.rodape__marca img { height: 1.5rem; width: auto; margin-bottom: var(--e-4); }
.rodape__marca p { font-size: var(--fs-xs); color: var(--ink-3); max-width: 20rem; margin-bottom: var(--e-4); }
.rodape h2 {
    font-family: var(--font-ui);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: var(--e-3);
}
.rodape li { margin-bottom: var(--e-1); }
/* Lista de links não tem a isenção de "link dentro de frase": o alvo precisa
   dos 24 px. O padding faz isso sem afrouxar a densidade da coluna. */
.rodape li a { display: inline-block; padding-block: .25rem; font-size: var(--fs-xs); color: var(--ink-2); }
.rodape li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.rodape__barra {
    border-top: 1px solid var(--line);
    padding-block: var(--e-5);
    display: flex;
    align-items: center;
    gap: var(--e-4);
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: var(--ink-4);
}
.rodape__barra nav { margin-left: auto; display: flex; gap: var(--e-3); flex-wrap: wrap; }
.rodape__barra nav a {
    display: grid;
    place-items: center;
    width: 2.25rem; height: 2.25rem;   /* ícone de 16 px num alvo de 36 px */
    border-radius: var(--r-sm);
    color: var(--ink-3);
}
.rodape__barra nav a:hover { color: var(--ink); background: var(--surface-3); }
.rodape__barra nav svg { stroke: currentColor; fill: none; }

/* =============================================================================
   9. HERO E PROVAS
   ========================================================================== */
.hero { padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) var(--secao-y); }
.hero__in {
    display: grid;
    gap: clamp(2.5rem, 1rem + 5vw, 4rem);
    align-items: center;
}
.hero h1 { margin-block: var(--e-3) var(--e-4); }
.hero__sub { font-size: var(--fs-body-lg); color: var(--ink-2); max-width: 34rem; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }
.hero__micro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-4);
    margin-top: var(--e-4);
    font-size: var(--fs-xs);
    color: var(--ink-3);
}
.hero__micro span { display: inline-flex; align-items: center; gap: var(--e-1); }
.hero__micro svg { width: .875rem; height: .875rem; stroke: var(--pos); fill: none; stroke-width: 2.6; }

.numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--e-6);
    padding-block: var(--e-8);
    border-block: 1px solid var(--line);
}
.numeros .v { font-family: var(--font-display); font-variation-settings: var(--fvs-metric); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.numeros .l { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--e-2); line-height: 1.45; }

.logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-3) var(--e-6);
    padding-block: var(--e-6);
    font-size: var(--fs-xs);
    color: var(--ink-4);
}
.logos p { font-weight: 600; color: var(--ink-3); }
.logos span { font-family: var(--font-display); font-variation-settings: "opsz" 24, "wght" 500; font-size: var(--fs-sm); color: var(--ink-3); }

/* =============================================================================
   10. SEÇÕES DE CONTEÚDO
   ========================================================================== */

/* ---- Recurso: texto de um lado, print do outro ---- */
.recurso {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: center;
}
.recurso + .recurso { margin-top: var(--secao-y); }
.recurso h2 { margin-block: var(--e-2) var(--e-3); }
.recurso p  { color: var(--ink-2); font-size: var(--fs-body-lg); }
.recurso__lista { margin-top: var(--e-5); display: grid; gap: var(--e-3); }
.recurso__lista li {
    display: flex;
    gap: var(--e-3);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    line-height: 1.5;
}
.recurso__lista svg { width: 1.125rem; height: 1.125rem; stroke: var(--pos); fill: none; stroke-width: 2.4; margin-top: .125rem; }

/* ---- Problemas numerados ---- */
.problemas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--e-4); }
.problema { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--e-5); }
.problema__n {
    font-family: var(--font-display);
    font-variation-settings: var(--fvs-metric);
    font-size: 1.75rem;
    color: var(--brand);
    line-height: 1;
    display: block;
    margin-bottom: var(--e-3);
}
.problema h3 { margin-bottom: var(--e-2); }
.problema p { font-size: var(--fs-sm); color: var(--ink-3); }

/* ---- Passos ---- */
.passos { display: grid; gap: var(--e-5); counter-reset: passo; }
.passo { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--e-4); align-items: start; }
.passo__n {
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    border-radius: var(--r-full);
    background: var(--ink);
    color: var(--ink-on-dark);
    font-size: var(--fs-sm);
    font-weight: 700;
}
.passo h3 { margin-bottom: var(--e-1); }
.passo p { font-size: var(--fs-sm); color: var(--ink-3); }

/* ---- Chamada final ---- */
.chamada { background: var(--ink); color: var(--ink-on-dark-2); padding-block: var(--secao-y); text-align: center; }
.chamada h2 { color: var(--ink-on-dark); margin-bottom: var(--e-3); }
.chamada p { max-width: 36rem; margin-inline: auto; font-size: var(--fs-body-lg); }
.chamada__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; margin-top: var(--e-6); }
.chamada .btn--marca { background: var(--brand); color: #FFF; }
.chamada .btn--contorno { background: transparent; border-color: rgba(250, 248, 244, .28); color: var(--ink-on-dark); }
.chamada .btn--contorno:hover { border-color: rgba(250, 248, 244, .55); }

/* ---- Caixa de resposta (blocos que os motores generativos citam) ---- */
.resposta {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    padding: var(--e-4) var(--e-5);
    margin-block: var(--e-5);
}
.resposta :is(h2, h3, h4) {
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    line-height: 1.35;
    margin: 0 0 var(--e-2);
}
/* O :is eleva a especificidade o bastante para vencer `.artigo p`, que é
   maior de propósito no texto corrido e ficaria desproporcional aqui. */
.resposta :is(p) { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); }
.resposta p + p { margin-top: var(--e-3); }
.artigo .resposta { margin-block: var(--e-6); }

/* ---- Tabela comparativa ---- */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.tabela { font-size: var(--fs-sm); min-width: 34rem; }
.tabela caption { text-align: left; padding: var(--e-4) var(--e-5) 0; font-size: var(--fs-xs); color: var(--ink-3); }
.tabela th, .tabela td { padding: var(--e-3) var(--e-4); text-align: left; border-bottom: 1px solid var(--line-soft); }
.tabela thead th { background: var(--surface-2); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody th { font-weight: 600; color: var(--ink); }
.tabela svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* =============================================================================
   11. CATÁLOGO E CURSO
   ========================================================================== */
.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    margin-bottom: var(--e-5);
}
.filtro {
    height: 2.25rem;
    padding-inline: .875rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-full);
    background: var(--surface);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-2);
    transition: all var(--transicao);
}
.filtro:hover { border-color: var(--ink-4); }
.filtro[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-on-dark); }
.filtros__conta { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); }

.cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--e-4); }

.curso-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--transicao), transform var(--transicao);
}
.curso-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
/* O ::after estica o link do título por cima do cartão inteiro: o alvo passa
   a ser o cartão, e não as duas linhas do <h3>. O texto continua selecionável
   e o link continua sendo um link — sem <div onclick>. */
.curso-card { position: relative; }
.curso-card__b h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.curso-card__b h3 a:focus-visible { outline: 0; }
.curso-card:has(h3 a:focus-visible) { box-shadow: var(--foco); }
.curso-card__capa {
    height: 6.5rem;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: var(--e-2);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.curso-card__capa svg {
    position: absolute;
    right: -.5rem; top: -.875rem;
    width: 6rem; height: 6rem;
    stroke: var(--ink); fill: none; stroke-width: .9;
    opacity: .10;
}
.curso-card__cat {
    position: relative;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    padding: .1875rem .5rem;
    color: var(--ink-3);
}
.curso-card__b { padding: var(--e-4); flex: 1; display: flex; flex-direction: column; }
.curso-card__b h3 { margin-bottom: var(--e-2); }
.curso-card__b p { font-size: var(--fs-xs); color: var(--ink-3); flex: 1; }
.curso-card__m {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin-top: var(--e-4);
    padding-top: var(--e-3);
    border-top: 1px solid var(--line-soft);
    font-size: var(--fs-xs);
    color: var(--ink-3);
}
.curso-card__m span { display: inline-flex; align-items: center; gap: var(--e-1); }
.curso-card__m svg { width: .875rem; height: .875rem; stroke: currentColor; fill: none; stroke-width: 1.8; }
.curso-card__m .selo { margin-left: auto; }

/* ---- Sumário do curso ---- */
.modulo { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--e-3); overflow: hidden; }
.modulo__h { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.modulo__n {
    width: 1.5rem; height: 1.5rem;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--ink); color: var(--ink-on-dark);
    font-size: .6875rem; font-weight: 700;
    flex: none;
}
.modulo__h b { font-size: var(--fs-sm); }
/* `span` sozinho pegava também o .modulo__n e empurrava o número do módulo
   para o meio da barra. O :last-child limita ao selo de duração. */
.modulo__h > span:last-child { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); }
.aula { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.aula:last-child { border-bottom: 0; }
.aula svg { width: 1rem; height: 1rem; stroke: var(--ink-4); fill: none; stroke-width: 1.8; }
.aula span:last-child { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-4); }

/* ---- Ficha lateral ---- */
.ficha { display: grid; gap: 0; }
.ficha div { display: flex; gap: var(--e-4); padding-block: var(--e-3); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.ficha div:last-child { border-bottom: 0; }
.ficha dt { color: var(--ink-3); width: 9rem; flex: none; }
.ficha dd { color: var(--ink); font-weight: 500; }

/* =============================================================================
   12. PREÇOS E FAQ
   ========================================================================== */
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--e-4); align-items: start; }
.plano {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--e-5);
    display: flex;
    flex-direction: column;
}
.plano--destaque { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--sombra-alta); }
.plano__bandeira {
    position: absolute;
    top: -.6875rem; left: var(--e-5);
    background: var(--brand); color: #FFF;
    font-size: .625rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .1875rem .5rem;
    border-radius: var(--r-full);
}
.plano h3 { font-size: var(--fs-h3); }
.plano__linha { font-size: var(--fs-xs); color: var(--ink-3); margin-block: var(--e-2) var(--e-4); min-height: 2.4em; }
.plano__preco { font-family: var(--font-display); font-variation-settings: var(--fvs-metric); font-size: 2.25rem; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); }
.plano__preco small { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink-3); font-weight: 500; letter-spacing: 0; }
.plano__ate { font-size: var(--fs-xs); color: var(--ink-4); margin-top: var(--e-2); }
.plano__lista { margin-block: var(--e-5); display: grid; gap: var(--e-2); flex: 1; }
.plano__lista li { display: flex; gap: var(--e-2); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.plano__lista svg { width: 1rem; height: 1rem; stroke: var(--pos); fill: none; stroke-width: 2.4; flex: none; margin-top: .1875rem; }
.plano__lista li.nao { opacity: .5; }
.plano__lista li.nao svg { stroke: var(--ink-4); }

.faq { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    padding-block: var(--e-4);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    min-height: 3.25rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { margin-left: auto; width: 1.125rem; height: 1.125rem; stroke: var(--ink-4); fill: none; stroke-width: 2.2; transition: transform var(--transicao); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details > div { padding-bottom: var(--e-4); }
.faq p { font-size: var(--fs-sm); color: var(--ink-2); max-width: 46rem; }
.faq p + p { margin-top: var(--e-3); }

/* =============================================================================
   13. BLOG E TEXTO LONGO
   ========================================================================== */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--e-5); }
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--transicao); }
.post-card:hover { border-color: var(--line-strong); }
.post-card { position: relative; }
.post-card__b h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.post-card__b h3 a:focus-visible { outline: 0; }
.post-card:has(h3 a:focus-visible) { box-shadow: var(--foco); }
.post-card__capa { height: 8rem; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.post-card__capa svg { position: absolute; right: -1rem; top: -1.125rem; width: 8rem; height: 8rem; stroke: var(--ink); fill: none; stroke-width: .8; opacity: .09; }
.post-card__b { padding: var(--e-4); flex: 1; display: flex; flex-direction: column; }
.post-card__k { font-size: .625rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-ink); }
.post-card__b h3 { margin-block: var(--e-2); }
.post-card__b p { font-size: var(--fs-xs); color: var(--ink-3); flex: 1; }
.post-card__m { margin-top: var(--e-4); font-size: var(--fs-xs); color: var(--ink-4); }

.artigo { max-width: var(--largura-texto); margin-inline: auto; }
.artigo > * + * { margin-top: var(--e-4); }
.artigo p, .artigo li { font-size: var(--fs-body-lg); line-height: 1.72; color: var(--ink-2); }
.artigo h2 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem); margin-top: var(--e-8); }
.artigo h3 { font-size: 1.125rem; margin-top: var(--e-6); }
.artigo ul, .artigo ol { display: grid; gap: var(--e-2); padding-left: 1.25rem; }
.artigo li { list-style: disc; }
.artigo ol li { list-style: decimal; }
.artigo blockquote {
    border-left: 3px solid var(--brand);
    padding-left: var(--e-5);
    font-family: var(--font-display);
    font-variation-settings: var(--fvs-display);
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--ink);
}
.artigo hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--e-7); }
.artigo a:not(.btn) { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }

.artigo__meta {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding-bottom: var(--e-5);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--e-6);
}
.artigo__meta time { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-4); text-align: right; }

.indice {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--e-4) var(--e-5);
}
.indice h2 { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: var(--e-3); }
.indice li { margin-bottom: var(--e-1); }
.indice a { display: inline-block; padding-block: .1875rem; font-size: var(--fs-sm); color: var(--ink-2); }
.indice a:hover { color: var(--brand-ink); }

/* =============================================================================
   14. FORMULÁRIOS
   ========================================================================== */
.campos { display: grid; gap: var(--e-4); }
.campos--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.campo--largo { grid-column: 1 / -1; }

.campo label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); margin-bottom: var(--e-2); }
.campo label .opcional { font-weight: 400; color: var(--ink-4); }
.campo input, .campo select, .campo textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: .6875rem .875rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--fs-sm);
    color: var(--ink);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--ink-4); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-bg);
}
.campo input:user-invalid, .campo textarea:user-invalid { border-color: var(--neg-line); background: var(--neg-bg); }
.campo .ajuda { display: block; font-size: var(--fs-xs); color: var(--ink-4); margin-top: var(--e-2); line-height: 1.45; }
.campo .erro { display: block; font-size: var(--fs-xs); color: var(--neg-ink); margin-top: var(--e-2); font-weight: 500; }

/* A isca fica fora da tela para o humano e visível para o robô que lê o HTML. */
.isca { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }

.form-cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--e-6); }

.recado { display: flex; gap: var(--e-3); padding: var(--e-4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); }
.recado svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; margin-top: .125rem; color: var(--ink-3); }
.recado b { display: block; }
.recado a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.recado--ok a { color: var(--pos-ink); }
.recado--neg a { color: var(--neg-ink); }
.recado--ok  { background: var(--pos-bg); border-color: var(--pos-line); color: var(--pos-ink); }
.recado--neg { background: var(--neg-bg); border-color: var(--neg-line); color: var(--neg-ink); }

/* ---- Verificação de certificado ---- */
.verificador { max-width: 28rem; margin-inline: auto; }
.verificador input {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    text-align: center;
    letter-spacing: .08em;
    text-transform: uppercase;
    min-height: 3.25rem;
}

/* =============================================================================
   15. RESPONSIVO
   O layout é mobile-first: tudo acima é a versão de celular, e as consultas
   abaixo só acrescentam colunas conforme sobra largura.
   ========================================================================== */
@media (min-width: 48rem) {          /* 768 px — tablet */
    .rodape__marca { grid-column: span 2; }
    .passos { grid-template-columns: repeat(2, 1fr); gap: var(--e-6); }
}

@media (min-width: 62rem) {          /* 992 px — desktop */
    .hero__in { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); }
    .recurso  { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
    .recurso--invertido .recurso__texto { order: 2; }
    .grade--lado { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--e-6); }
    .passos { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 61.9375rem) {     /* menos de 992 px — menu vira gaveta */
    .abrir-menu { display: grid; }
    .cabecalho__in { gap: var(--e-3); }

    .menu, .cabecalho__acoes {
        position: fixed;
        left: 0; right: 0;
        top: 4.25rem;
        flex-direction: column;
        align-items: stretch;
        gap: var(--e-1);
        background: var(--canvas);
        border-bottom: 1px solid var(--line);
        padding: var(--e-4) var(--gutter);
        margin: 0;
        display: none;
    }
    .menu { padding-bottom: 0; border-bottom: 0; }
    .cabecalho__acoes { top: auto; padding-top: 0; gap: var(--e-3); }

    .cabecalho.menu-aberto .menu,
    .cabecalho.menu-aberto .cabecalho__acoes { display: flex; }
    .cabecalho.menu-aberto .menu { top: 4.25rem; }
    .cabecalho.menu-aberto .cabecalho__acoes { top: auto; position: static; }
    .cabecalho.menu-aberto { background: var(--canvas); }

    .menu a { padding-block: var(--e-3); font-size: var(--fs-body); border-bottom: 1px solid var(--line-soft); }
    .cabecalho__acoes .btn { width: 100%; }
}

@media (max-width: 30rem) {          /* 480 px — celular pequeno */
    .rodape__marca { grid-column: span 1; }
    .btn { width: 100%; }
    .hero__acoes .btn, .chamada__acoes .btn { width: 100%; }
    .filtros__conta { width: 100%; margin-left: 0; }
}

/* O movimento (revelar, cascata, preferência reduzida) está nas seções 17 e 18. */

/* Impressão: sobra o conteúdo. */
@media print {
    .cabecalho, .aviso-topo, .rodape, .chamada, .abrir-menu { display: none !important; }
    body { background: #FFF; color: #000; }
    .print, .cartao { box-shadow: none; border-color: #CCC; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}

/* =============================================================================
   16. CICLO DE COBRANÇA — mensal e anual
   A troca acontece em CSS puro, com `:has()`. Os dois preços estão no HTML,
   empilhados na mesma célula de grade: o buscador lê os dois, o teclado navega
   com as setas do rádio, e nada some se o JavaScript falhar.

   Sem `:has()` (navegador anterior a 2023), o seletor não aparece e fica só o
   preço mensal — degradação silenciosa, nunca os dois sobrepostos.
   ========================================================================== */
.ciclo { display: none; }
.troca > .so-anual { display: none; }

@supports selector(:has(*)) {

    .ciclo {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        padding: .3125rem;
        border: 1px solid var(--line);
        border-radius: var(--r-full);
        background: var(--surface-2);
    }
    .ciclo label {
        display: inline-flex;
        align-items: center;
        gap: var(--e-2);
        height: 2.375rem;
        padding-inline: 1.125rem;
        border-radius: var(--r-full);
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--ink-3);
        cursor: pointer;
        white-space: nowrap;
        transition: color var(--transicao), background var(--transicao), box-shadow var(--transicao);
    }
    .ciclo label:hover { color: var(--ink-2); }
    .ciclo input:checked + label {
        background: var(--surface);
        color: var(--ink);
        box-shadow: 0 1px 2px rgba(12, 25, 33, .10);
    }
    /* O foco tem de aparecer no rótulo, já que o rádio em si está fora da tela. */
    .ciclo input:focus-visible + label { box-shadow: var(--foco); }

    .ciclo__selo {
        font-size: .6875rem;
        font-weight: 700;
        letter-spacing: .02em;
        padding: .125rem .4375rem;
        border-radius: var(--r-full);
        background: var(--pos-bg);
        border: 1px solid var(--pos-line);
        color: var(--pos-ink);
        transition: transform var(--transicao);
    }
    .ciclo input:checked + label .ciclo__selo { transform: scale(1.06); }

    .ciclo__nota { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--e-3); min-height: 1.4em; }

    /* ---- A troca em si ----
       Os dois estados ocupam a MESMA célula, então a altura não muda e a
       página não pula na troca. `visibility` entra no fim da transição para
       tirar o estado escondido da árvore de acessibilidade sem cortar a
       animação no meio. */
    .troca { display: grid; }
    .troca > .so-mensal,
    .troca > .so-anual {
        grid-area: 1 / 1;
        display: block;
        transition: opacity .26s ease, transform .26s cubic-bezier(.34, 1.3, .64, 1), visibility 0s;
    }
    .troca > .so-anual { display: block; }

    .precos:has(#ciclo-mensal:checked) .so-anual,
    .precos:has(#ciclo-anual:checked)  .so-mensal {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition-delay: 0s, 0s, .26s;
    }
    .precos:has(#ciclo-mensal:checked) .so-anual  { transform: translateY(.45rem) scale(.96); }
    .precos:has(#ciclo-anual:checked)  .so-mensal { transform: translateY(-.45rem) scale(.96); }

    /* A nota do seletor não está dentro de .troca, então recebe o mesmo
       tratamento por conta própria. */
    .ciclo__nota { display: grid; }
    .ciclo__nota > span { grid-area: 1 / 1; transition: opacity .26s ease; }
}

.plano__preco--consulta { font-size: 1.875rem; }
.tabela .troca small { font-size: .8em; color: var(--ink-3); font-weight: 400; }

/* =============================================================================
   17. MICRO-INTERAÇÕES
   Regra que vale para a seção inteira: movimento a serviço da leitura, nunca
   do efeito. Toda animação daqui obedece a `prefers-reduced-motion`, e nenhuma
   esconde conteúdo em definitivo — o que anima já está na tela para quem
   bloqueou o script.
   ========================================================================== */

/* ---- Barra de progresso de leitura ----
   Presa no topo, alimentada por uma custom property que o JS atualiza. Como é
   `transform: scaleX`, o navegador compõe na GPU e não recalcula layout. */
.progresso {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 300;
    background: var(--brand);
    transform: scaleX(var(--lido, 0));
    transform-origin: 0 50%;
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.progresso.ativa { opacity: 1; }

/* ---- Revelar ao rolar, com atraso em cascata ----
   O `--i` vem do HTML e escalona os irmãos. Cascata longa demais parece lenta;
   90 ms por item, com teto de seis, é o ponto em que ainda se percebe a ordem
   sem esperar. */
.revelar {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
                transform .55s cubic-bezier(.22, .61, .36, 1);
    transition-delay: calc(min(var(--i, 0), 6) * 90ms);
}
.revelar.visivel { opacity: 1; transform: none; }
.sem-js .revelar { opacity: 1; transform: none; }

/* ---- Título que entra por linha ----
   Cada palavra fica num <span> com overflow escondido; a máscara sobe. Só o
   hero usa, porque o efeito perde a graça quando se repete. */
.entrada { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.entrada > span {
    display: inline-block;
    /* `backwards` aplica o estado inicial durante o atraso e devolve o
       elemento à posição natural no fim. Se a animação não rodar — navegador
       antigo, CSS parcial —, a palavra já está no lugar certo. Com `forwards`
       e `transform` no estado base, ela ficaria escondida para sempre. */
    animation: subir .85s cubic-bezier(.22, .61, .36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes subir { from { transform: translateY(105%); } }

/* ---- Grifo que se desenha ----
   Um gradiente de fundo que cresce da esquerda. Fica atrás da linha de base,
   como marca-texto, e não interfere no contraste do texto. */
.grifo {
    background-image: linear-gradient(var(--brand-bg), var(--brand-bg));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% .42em;
    transition: background-size .7s cubic-bezier(.22, .61, .36, 1) .25s;
    font-style: normal;
    color: var(--brand-ink);
    font-weight: 600;
}
/* Recolhido apenas enquanto o bloco espera para ser revelado. Grifo fora de um
   .revelar — ou com o script bloqueado, quando .sem-js continua no <html> —
   nasce desenhado. */
html:not(.sem-js) .revelar:not(.visivel) .grifo { background-size: 0 .42em; }

/* ---- Botões ----
   O brilho é um pseudo-elemento que atravessa o botão uma vez no hover.
   Custa uma camada de composição e nada de layout. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: skewX(-18deg);
    transition: left .55s cubic-bezier(.4, 0, .2, 1);
}
.btn:hover::after { left: 120%; }
.btn--contorno::after, .btn--fantasma::after { background: linear-gradient(100deg, transparent, rgba(12, 25, 33, .06), transparent); }
.btn:active { transform: translateY(1px); }
.btn--marca:hover, .btn--principal:hover { box-shadow: 0 6px 18px -8px rgba(12, 25, 33, .45); }

/* ---- Link com sublinhado que cresce ---- */
.link-seta { position: relative; }
.link-seta::before {
    content: '';
    position: absolute;
    left: 0; right: 1.25rem; bottom: .1875rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.link-seta:hover::before { transform: scaleX(1); }

.menu a { position: relative; }
.menu a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: .125rem;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.menu a:hover::after { transform: scaleX(.62); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }

/* ---- Cartões ---- */
.cartao {
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.cartao:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: 0 12px 28px -18px rgba(12, 25, 33, .35);
}
.cartao__ico { transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), background var(--transicao); }
.cartao:hover .cartao__ico { transform: rotate(-6deg) scale(1.08); }

.curso-card:hover { box-shadow: 0 14px 30px -20px rgba(12, 25, 33, .4); }
.curso-card__capa svg { transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity var(--transicao); }
.curso-card:hover .curso-card__capa svg { transform: rotate(-8deg) scale(1.12); opacity: .16; }
.curso-card h3 a { transition: color var(--transicao); }
.curso-card:hover h3 a { color: var(--brand-ink); }

.post-card__capa svg { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.post-card:hover .post-card__capa svg { transform: rotate(-6deg) scale(1.1); }

.problema { transition: transform var(--transicao), border-color var(--transicao); }
.problema:hover { transform: translateY(-2px); border-color: var(--brand-line); }
.problema__n { transition: transform .35s cubic-bezier(.34, 1.4, .64, 1); display: inline-block; }
.problema:hover .problema__n { transform: translateX(2px) scale(1.08); }

/* ---- Print: leve inclinação seguindo o ponteiro ----
   As duas variáveis são escritas pelo JS; sem ele, ambas valem 0 e a figura
   fica parada. O `will-change` só entra no hover para não manter uma camada
   de composição viva a página inteira. */
.print {
    transform: perspective(1100px)
               rotateX(calc(var(--ry, 0) * -1deg))
               rotateY(calc(var(--rx, 0) * 1deg));
    transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .4s;
}
.print:hover { will-change: transform; transition-duration: .12s; }

/* ---- Seção escura: foco de luz seguindo o ponteiro ---- */
.secao--escura { position: relative; overflow: hidden; }
.secao--escura::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(38rem 38rem at var(--px, 50%) var(--py, 0%),
                rgba(236, 78, 18, .13), transparent 62%);
    opacity: 0;
    transition: opacity .6s;
    pointer-events: none;
}
.secao--escura.acesa::before { opacity: 1; }
.secao--escura > * { position: relative; }

/* ---- Números e métricas ---- */
.numeros > div { transition: transform var(--transicao); }
.numeros > div:hover { transform: translateY(-2px); }
.numeros .v { transition: color var(--transicao); }
.numeros > div:hover .v { color: var(--brand-ink); }

/* ---- FAQ: abre com altura animada ----
   `interpolate-size` faz `height: auto` ser animável nos navegadores que já o
   suportam; onde não suporta, o <details> abre instantâneo, como sempre fez. */
@supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content {
        block-size: 0;
        opacity: 0;
        overflow: hidden;
        transition: content-visibility .3s allow-discrete, block-size .3s, opacity .3s;
    }
    .faq details[open]::details-content { block-size: auto; opacity: 1; }
}
.faq summary { transition: color var(--transicao), padding-left var(--transicao); }
.faq summary:hover { color: var(--brand-ink); }
.faq details[open] summary { color: var(--ink); }

/* ---- Filtros do catálogo ---- */
.filtro { position: relative; }
.filtro:active { transform: scale(.97); }
.curso-card { transition: border-color var(--transicao), transform var(--transicao),
                          box-shadow var(--transicao), opacity .3s; }
.cursos.filtrando .curso-card { animation: entrar .38s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(.5rem) scale(.985); } }

/* ---- Voltar ao topo ---- */
.ao-topo {
    position: fixed;
    right: var(--gutter); bottom: var(--gutter);
    z-index: 90;
    width: 2.875rem; height: 2.875rem;
    display: grid; place-items: center;
    border-radius: var(--r-full);
    background: var(--ink);
    color: var(--ink-on-dark);
    border: 0;
    box-shadow: 0 8px 24px -10px rgba(12, 25, 33, .5);
    opacity: 0;
    transform: translateY(.75rem) scale(.9);
    pointer-events: none;
    transition: opacity .3s, transform .3s cubic-bezier(.34, 1.4, .64, 1);
}
.ao-topo.visivel { opacity: 1; transform: none; pointer-events: auto; }
.ao-topo:hover { background: #22333C; }
.ao-topo svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* ---- Cabeçalho que encolhe ao rolar ---- */
.cabecalho__in { transition: height var(--transicao); }
.cabecalho.rolou .cabecalho__in { height: 3.75rem; }
.marca-link img { transition: transform var(--transicao); }
.marca-link:hover img { transform: scale(1.03); }

/* ---- Detalhes de acabamento ---- */
::selection { background: var(--brand-bg); color: var(--brand-ink); }
.aviso-topo .tag { animation: pulsar 3.2s ease-in-out infinite; }
@keyframes pulsar {
    0%, 82%, 100% { transform: scale(1); }
    88%           { transform: scale(1.11); }
}
.selo { transition: transform var(--transicao); }
.curso-card:hover .selo--marca { transform: scale(1.05); }
.aula, .modulo { transition: background var(--transicao); }
.modulo:hover .modulo__h { background: var(--brand-bg); }
.plano { transition: transform var(--transicao), box-shadow var(--transicao); }
.plano:hover { transform: translateY(-3px); }
.plano--destaque:hover { box-shadow: 0 0 0 1px var(--brand), 0 22px 40px -24px rgba(236, 78, 18, .5); }
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--surface-2); }
.recado { transition: border-color var(--transicao); }
.recado:hover { border-color: var(--line-strong); }
.citacao blockquote { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.citacao:hover blockquote { transform: translateX(3px); }

/* Chegou por âncora: destaca o alvo por um instante em vez de teleportar. */
:target { animation: piscar 1.6s ease-out; }
@keyframes piscar {
    0%   { background-color: var(--brand-bg); }
    100% { background-color: transparent; }
}

/* =============================================================================
   18. QUEM PEDIU MENOS MOVIMENTO RECEBE MENOS MOVIMENTO
   Esta seção precisa vir por último para vencer tudo o que está acima.
   Não é acessibilidade "extra": para quem tem transtorno vestibular,
   animação de entrada em cascata provoca enjoo de verdade.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
    .revelar { opacity: 1 !important; transform: none !important; }
    .entrada > span { transform: none !important; }
    .grifo { background-size: 100% .42em !important; }
    .print { transform: none !important; }
    .secao--escura::before { display: none; }
    .progresso { display: none; }
}

/* ---- Confirmação de envio do formulário ---- */
.enviado {
    text-align: center;
    padding-block: var(--e-6);
    animation: chegar .45s cubic-bezier(.22, .61, .36, 1) both;
}
.enviado__ico {
    width: 3.5rem; height: 3.5rem;
    display: grid; place-items: center;
    margin: 0 auto var(--e-4);
    border-radius: var(--r-full);
    background: var(--pos-bg);
    border: 1px solid var(--pos-line);
    color: var(--pos-ink);
    animation: selar .5s cubic-bezier(.34, 1.5, .64, 1) .12s both;
}
.enviado__ico svg { stroke: currentColor; fill: none; stroke-width: 2.6; }
.enviado h3 { margin-bottom: var(--e-2); }
.enviado p { font-size: var(--fs-sm); color: var(--ink-2); max-width: 26rem; margin-inline: auto; line-height: 1.6; }
.enviado a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
@keyframes chegar { from { opacity: 0; transform: translateY(.75rem); } }
@keyframes selar  { from { opacity: 0; transform: scale(.6) rotate(-14deg); } }

/* ---- Campo com foco: rótulo acompanha ---- */
.campo:focus-within label { color: var(--brand-ink); }
.campo label { transition: color var(--transicao); }
.campo .erro { animation: chegar .25s ease both; }