/* =========================================================================
   PAGINA DE UM CURSO  —  /cursos/{titulo-em-slug}-{id}
   =========================================================================
   Medida no InternasPage-Cursos.pdf (1440 x 5056,9), em 26/08/2026.
   Artboard de 1440 => 1pt do arquivo = 1px aqui.

   🔴 A FAIXA ESCURA NAO TEM ALTURA FIXA, e isso e deliberado.

   No PDF ela mede 365,4 — mas essa e a altura de um titulo de DUAS linhas. Os
   titulos reais vao de 1 a 4 (o curso #520 tem 4). Fixar a altura cortaria
   titulo longo, e o defeito so apareceria no curso errado, meses depois. E a
   mesma armadilha registrada na nota 10 §8 sobre as noticias.

   O que se preserva do desenho nao e a altura: e o TRANSBORDO. A arte sobe 68px
   para dentro da faixa (518,1 da faixa − 449,8 do topo da arte = 68,3), e essa
   relacao vale com titulo de qualquer tamanho.

   ⚠️ `site.css` e `internas.css` ja vem carregados pelo layout das internas —
   as variaveis de cor, a `--largura-conteudo` e o `.botao` sao de la.
   ========================================================================= */

.cd {
    /* 780 (arte) + 39 (vao) + 351 (preco) = 1170, a coluna da casa */
    /**
     * 🔴 27px, e nao 39 — MEDIDO, e nao escolhido.
     *
     * No PDF a arte vai de x=134,3 a 914,3 (780) e a caixa de preco de x=942 a
     * 1305 (363). O vao entre elas e 27,7. Com 39 a conta ainda fechava na
     * borda direita (1305), entao nada parecia errado: o que acontecia e que a
     * caixa encolhia 12px para o vao caber. A diferenca so aparece medindo os
     * pixels das duas.
     *
     *   135 + 780 = 915 · 915 + 27 = 942 · 942 + 363 = 1305 ✓
     */
    --cd-vao: 27px;

    /* quanto a arte sobe para dentro da faixa escura */
    --cd-transbordo: 68px;

    color: var(--verde-escuro);
}

/* -------------------------------------------------------------------------
   A COLUNA
   ------------------------------------------------------------------------- */

.cd__interno {
    width: min(var(--largura-conteudo), 100% - 2.5rem);
    margin-inline: auto;
}

/* -------------------------------------------------------------------------
   TOPO — a faixa escura
   ------------------------------------------------------------------------- */

.cd__faixa {
    background: var(--verde-escuro);

    /**
     * 46 no topo: a base do titulo esta em 234,3 no PDF e a faixa comeca em
     * 152,7. Descontando a subida da caixa sobre a linha de base (~0,75 do
     * corpo, mais a meia-entrelinha) sobram ~46.
     *
     * 🪤 Linha de base ≠ topo da caixa. Confundir os dois custou TRES erros
     * num dia só na landing (nota 08). O PDF da a base; o CSS quer o topo.
     *
     * 93 embaixo = 25 de respiro ate a arte + os 68 que ela transborda.
     */
    padding-block: 46px 93px;
}

.cd__titulo {
    margin: 0;
    color: var(--faixa-clara);
    font-size: 42px;
    line-height: 1.2;          /* 50,4 / 42, medido entre as duas bases */
    font-weight: 700;
    letter-spacing: -.01em;

    /* titulo de 2 linhas nao fica com uma palavra sozinha embaixo */
    text-wrap: balance;
}

.cd__titulo--erro { color: var(--verde-escuro); }

/* os dados do topo: periodo e horario */
/**
 * 🔴 A DATA E O HORARIO MORAM NUMA CAIXA, e o local em outra.
 *
 * Ate 27/08 os dois eram texto solto sobre a faixa. O desenho poe cada um num
 * bloco de fundo proprio — e o `site.css` ja tinha a cor certa reservada:
 * `--verde-quase-preto`, com o comentario "bloco da data no banner". A variavel
 * existia; o bloco e que nao.
 *
 * ⚠️ `inline-flex`, e nao `flex`. Em `flex` a lista ocuparia a linha INTEIRA e
 * a caixa iria de ponta a ponta do conteudo, atras de um vazio enorme a
 * direita. `inline-flex` faz a caixa medir o que ela contem.
 *
 * ⚠️ E `width: fit-content` na `<ul>` nao bastaria: a lista e filha de um bloco,
 * entao ela precisa deixar de ser bloco ela mesma.
 */
.cd__dados {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    margin: 34px 0 0;
    padding: 7px 16px;
    background: var(--verde-quase-preto);
    border-radius: 6px;
    list-style: none;
}

.cd__dado {
    /**
     * ⚠️ NAO e `display: flex` no elemento que contem texto corrido.
     *
     * Em flex, CADA filho vira item — inclusive texto solto —, e o `gap` entra
     * entre eles. Foi assim que "Escrito por  ABMES" ganhou dois espacos na
     * interna de noticia (nota 10 §9). Aqui o icone e um `::before` e o texto
     * fica inteiro, num fluxo normal.
     */
    position: relative;
    padding-left: 34px;
    color: var(--lima);
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
}

/**
 * 🔴 O DIVISOR ENTRE A DATA E O HORARIO — `x=469 y=329,7 w=2 h=32` no PDF,
 * em #E1E9D4. Faltava aqui: os dois dados apareciam soltos, separados so pelo
 * vao.
 *
 * ⚠️ `:not(:last-child)` e o que impede o traco de sobrar sozinho a direita
 * quando o curso nao tem horario — 61 dos cursos tem `no_hora_curso` vazia, e
 * nesses a data e o unico item da lista.
 */
.cd__dado--data:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -15px;                    /* no meio do vao de 28px */
    top: 50%;
    width: 2px;
    height: 32px;
    margin-top: -16px;
    background: #E1E9D4;
}

.cd__dado::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    background: currentColor;
    -webkit-mask: var(--cd-icone) center / contain no-repeat;
            mask: var(--cd-icone) center / contain no-repeat;
}

.cd__dado--data {
    --cd-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
}

.cd__dado--hora {
    font-size: 20px;
    --cd-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/**
 * O LOCAL — a linha de baixo do topo.
 *
 * Medido: 20pt #A8E61E NotoSans-Bold em x=184,9, bases y=394,1 e 418,1. A
 * data esta em x=183,9/y=353,9, entao o local fica 40,2 abaixo dela e com o
 * MESMO recuo de icone — por isso o mesmo padding-left de 34px.
 *
 * ⚠️ O alfinete fica no TOPO da primeira linha, e nao centralizado: o
 * endereco ocupa duas linhas no PDF, e um icone centralizado verticalmente
 * flutuaria no meio do texto, longe do comeco. Com `top` fixo ele ancora
 * onde a leitura comeca, com uma ou com tres linhas.
 */
/**
 * O LOCAL — a segunda caixa, logo abaixo da de data e horario.
 *
 * ⚠️ `inline-block` pelo mesmo motivo da lista acima: em bloco, a caixa
 * atravessaria a pagina inteira com o texto so no comeco.
 *
 * ⚠️ O recuo da esquerda tem DUAS partes que nao podem ser somadas na mao: os
 * 16px de respiro da caixa (no `padding`) e os 34px que abrem espaco para o
 * alfinete (no `padding-left`, que sobrescreve o primeiro). Por isso o alfinete
 * e posicionado a partir de `left: 16px`, e nao de `left: 0`.
 */
.cd__local {
    position: relative;
    display: inline-block;
    margin: 10px 0 0;
    padding: 7px 16px 7px 50px;      /* 16 de respiro + 34 do alfinete */
    /**
     * ⚠️ 680, e nao os 780 da arte.
     *
     * No PDF o endereco vai de x=184,9 a ~797 -- 612 de texto. Com a largura
     * da arte, a quebra de linha cai depois de "Edificio" em vez de depois de
     * `Conj. "A"`, e o bloco deixa de ter a forma do desenho.
     */
    max-width: 680px;
    background: var(--verde-quase-preto);
    border-radius: 6px;
    color: var(--lima);
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}

.cd__local::before {
    content: '';
    position: absolute;
    left: 16px;                      /* o respiro da caixa — ver acima */
    top: 10px;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--cd-pino) center / contain no-repeat;
            mask: var(--cd-pino) center / contain no-repeat;
    --cd-pino: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   ARTE + PRECO — a linha que transborda a faixa
   ------------------------------------------------------------------------- */

.cd__midia {
    display: grid;
    /**
     * 🔴 `minmax(0, …)` e nao `780fr` puro.
     *
     * `1fr` na verdade e `minmax(auto, 1fr)`, e esse `auto` e a largura MINIMA
     * do conteudo — uma imagem larga ou uma palavra comprida empurra a coluna e
     * a proporcao vai embora. Foi exatamente o que deixou a terceira coluna do
     * arquivo de noticias maior que as outras duas.
     */
    /* ⚠️ `fr` NAO passa por dentro de calc() -- os numeros vao literais. */
    /* ⚠️ 363, a largura EXTERNA da caixa no PDF (x=942→1305), bordas incluidas. */
    grid-template-columns: minmax(0, 780fr) minmax(0, 363fr);
    gap: var(--cd-vao);
    align-items: start;

    /* sobe para dentro da faixa escura */
    margin-top: calc(var(--cd-transbordo) * -1);
    position: relative;   /* fica ACIMA da faixa, e nao atras dela */
    z-index: 1;
}

.cd__arte {
    margin: 0;
    aspect-ratio: 780 / 391;
    background: var(--verde-quase-preto);
    overflow: hidden;
}

.cd__arte img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**
 * 13 dos 61 cursos nao tem arte. Sem esta caixa a coluna colapsaria e a de
 * preco pularia para a esquerda — torto so nesses casos, que e o tipo de
 * defeito que ninguem ve ate um deles ir ao ar.
 */
.cd__arte--vazia { background: var(--verde-quase-preto); }

/* a faixa "INSCRIÇÕES ABERTAS", colada embaixo da arte */
.cd__estado {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;              /* 780 x 100 no PDF */
    margin: 0;
    background: #1D332D;
    color: var(--lima);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: .02em;
    text-align: center;
}

.cd__estado--fechada { color: #C7D2CC; }
.cd__estado--neutra  { color: var(--branco); }

/* -------------------------------------------------------------------------
   A CAIXA DE PRECO — as duas do layout
   -------------------------------------------------------------------------
   Desenhada contra a captura que o Jonh aprovou em 27/08: caixa escura em
   cima (nao associados) e caixa de borda lima embaixo (associados), com a
   tarja "RECOMENDADO" saindo do topo e o selo de percentual ao lado do "por".

   Os dois valores saem do bloco "Investimento" do proprio texto do curso --
   nao ha coluna de preco no banco. Ver Service\ConteudoDoCurso.
   ------------------------------------------------------------------------- */

.cd__preco {
    display: grid;
    gap: 18px;
    align-content: start;
}

/**
 * Medidas da caixa, todas do PDF:
 *   borda 4px  (x=942→946 e 1301→1305, y=449,8→453,8 e 661,8→665,8)
 *   recuo 18px (a linha divisoria interna vai de x=964 a 1283 — 355 − 2×18)
 *   altura 216 (449,8 → 665,8), que sai sozinha destes recuos e dos corpos
 */
.cd__caixa {
    position: relative;
    padding: 16px 18px 18px;
    background: var(--verde-quase-preto);
    border: 4px solid rgba(255, 255, 255, .92);
    color: var(--branco);
}

/**
 * A de associados e a que o layout empurra: borda lima e um pouco mais de
 * respiro no topo, para a tarja caber sem encostar no rotulo.
 */
.cd__caixa--destaque {
    border-color: var(--lima);
    padding-top: 30px;
}

.cd__tarja {
    position: absolute;
    /* ⚠️ -4px agora, e nao -1/-2: a borda da caixa passou de 2 para 4. */
    top: -4px;
    left: -4px;
    margin: 0;
    padding: 5px 16px 6px;
    background: var(--lima);
    color: var(--verde-escuro);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
    border-radius: 0 0 12px 0;
}

/**
 * 🔴 A LINHA SOB O ROTULO EXISTE NO PDF, e faltava aqui.
 *
 * Medida: `x=964 y=515,8 w=319 h=2` na caixa de cima e `x=964 y=773,8 w=319
 * h=2` na de baixo — 2px de #214138 ocupando exatamente a largura interna da
 * caixa (355 menos os dois recuos de 18). Ela separa "NÃO ASSOCIADOS" do
 * preco.
 *
 * ⚠️ Ela e mais CLARA que o fundo, e nao mais escura: o fundo da caixa e o
 * `--verde-quase-preto` e a linha e o `--verde-escuro`.
 */
.cd__quem {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--verde-escuro);
    font-size: 16px;                 /* 16pt no PDF, y=486,6..498 */
    font-weight: 700;
    letter-spacing: .11em;
    color: rgba(255, 255, 255, .82);
}

.cd__caixa--destaque .cd__quem { color: var(--lima); }

.cd__valor {
    margin: 0 0 16px;
    font-size: 28px;                 /* 28pt no PDF, y=557,7 e 839,6 */
    font-weight: 700;
    line-height: 1.15;
}

.cd__de {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 20px;                 /* 20pt no PDF, y=806 */
    color: rgba(255, 255, 255, .9);
}

/**
 * ⚠️ Aqui o `display: flex` E o certo, ao contrario do `.cd__dado`.
 *
 * A diferenca: ali havia texto CORRIDO, e cada palavra virava um item com
 * `gap` entre elas ("Escrito por  ABMES", nota 10 §9). Aqui os filhos sao
 * pedacos distintos de propósito -- "de", o valor riscado, "por" e o selo --
 * e o vao de 6px entre eles e exatamente o que o layout pede.
 */
.cd__de s {
    color: #E93F3F;
    text-decoration-thickness: 2px;
}

/**
 * O selo do desconto. Medido: caixa de x=1191 a 1282 (91) e de y=799,5 a
 * 838,5 (39), borda de 2px em #A8E61E, texto de 20pt.
 *
 * ⚠️ NAO e pilula. As barras de cima e de baixo vao de 1196 a 1277 e as
 * laterais de 804,5 a 833,5 — os 5px que sobram em cada canto sao o raio de
 * arredondamento. `border-radius: 999px` fazia dele uma pilula, que e outra
 * forma.
 */
.cd__selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 91px;
    min-height: 39px;
    padding: 4px 12px;
    border: 2px solid var(--lima);
    border-radius: 6px;
    color: var(--lima);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.cd__botao {
    display: flex;
    align-items: center;
    justify-content: center;
    /**
     * ⚠️ 14px entre o rotulo e a seta, e nao 8.
     *
     * No PDF o texto comeca em x=1012,6 e a seta em x=1202. Com "FAZER
     * INSCRIÇÃO" a 20px e o espacamento de .04em, sobra cerca de 14 entre o
     * fim do texto e a seta.
     */
    gap: 14px;
    width: 100%;
    min-height: 58px;                /* y≈585→643,8 no PDF */
    padding: 12px 18px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .55);
    color: var(--branco);
    font-size: 20px;                 /* 20pt no PDF, y=619 e 907,8 */
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/**
 * 🔴 A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M1.4 10.6 10.6 1.4'/%3E%3Cpath d='M1.4 1.4h9.2v9.2'/%3E%3C/svg%3E") E DESENHADA, e nao o caractere ↗ (U+2197).
 *
 * O glifo muda de forma, de peso e de alinhamento conforme a fonte que o
 * sistema tiver — no Windows ele cai numa fonte de simbolos, sai fino e
 * sobe acima da linha do texto. O PDF desenha a seta com traco de 2,5 e duas
 * pernas de 10 (`x=1202 y=604,5 w=10 h=2,5` e `x=1210,8 y=605,8 w=2,5 h=10`),
 * mais a diagonal saindo da ponta.
 *
 * Aqui ela e uma mascara: a cor vem do `currentColor`, entao ela acompanha o
 * botao no estado normal e no `:hover` sem precisar de segunda regra.
 */
.cd__botao::after {
    content: '';
    flex: none;
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M1.4 10.6 10.6 1.4'/%3E%3Cpath d='M1.4 1.4h9.2v9.2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M1.4 10.6 10.6 1.4'/%3E%3Cpath d='M1.4 1.4h9.2v9.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cd__botao:hover {
    background: var(--lima);
    border-color: var(--lima);
    color: var(--verde-escuro);
}

.cd__caixa--destaque .cd__botao { border-color: var(--lima); }

.cd__botao--volta {
    width: auto;
    margin-top: 8px;
    background: var(--lima);
    border-color: var(--lima);
    color: var(--verde-escuro);
}

.cd__botao--volta::after { content: none; }

/* -------------------------------------------------------------------------
   🔴 NAO EXISTE MAIS A FICHA BEGE — e a ausencia dela e a correcao (27/08)
   -------------------------------------------------------------------------
   Havia aqui um `.cd__ficha`: um retangulo #E1E9D4 ao pe do texto com Data,
   Horário, Modalidade e Carga horária em duas colunas.

   O PDF nao faz isso. Em y=1777..1883 ele mostra o titulo "Informações" e a
   lista logo abaixo de "Programação", dentro do texto corrido — e os
   descontos vem em seguida, em y=1951. Arrancar o bloco para uma ficha
   trocava tambem a ORDEM: os descontos subiam e a ficha caia no fim.

   Os valores continuam sendo LIDOS, para o topo da pagina (horario ao lado
   da data, local na linha de baixo). Ver ConteudoDoCurso::lerInformacoes,
   que le sem consumir.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   EDUCADORES
   -------------------------------------------------------------------------
   Retrato redondo de 150px a esquerda, nome em negrito e biografia ao lado.
   Foto e biografia saem do texto do curso (bloco "Especialistas").
   ------------------------------------------------------------------------- */

.cd__educadores { margin-top: 64px; }

/**
 * 🔴 O TITULO BASE VEM ANTES DOS MODIFICADORES, E ISSO NAO E ESTETICA.
 *
 * `.cd__secao`, `.cd__secao--icone` e `.cd__secao--claro` tem a MESMA
 * especificidade (0,1,0). Empatou, ganha o ultimo declarado. Enquanto o base
 * ficou la embaixo (na antiga secao "Outros cursos"), ele vencia o
 * `--claro` e o titulo "Módulos do Curso" saia verde-escuro sobre a faixa
 * verde-escura: invisivel, sem erro nenhum em lugar nenhum.
 *
 * Regra: base primeiro, modificadores depois. Sempre.
 */
.cd__secao {
    margin: 0 0 28px;
    font-size: 32px;                 /* 32pt no PDF, y=2210,5 */
    font-weight: 700;
    color: var(--verde-escuro);
}

.cd__secao--icone {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid #DFE6F2;   /* a regua medida no PDF, y=2237,6 */
}

.cd__secao--icone svg {
    width: 26px;
    height: 26px;
    color: var(--lima-escuro);
    flex: 0 0 auto;
}

.cd__pessoas {
    display: grid;
    gap: 34px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

/**
 * 🎯 150px, e o numero saiu do PDF, nao do olho.
 *
 * As tres artes do educador estao declaradas com 150,0 x 150,0 pt em
 * x=169,1 (y=2277,2 · 2493,8 · 2705,4). Eu tinha posto 100 porque e o tamanho
 * do ARQUIVO (o PDF diz "arquivo 100x100 px") -- mas o desenho as amplia para
 * 150. Confundir o tamanho do arquivo com o tamanho na pagina foi o erro.
 *
 * ⚠️ Ampliar 100px para 150 custa nitidez: o navegador estica 1,5x. E o que o
 * layout pede e e o unico arquivo que existe; quando vier arte maior, ela
 * entra sem mexer aqui.
 */
.cd__pessoa {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);   /* minmax(0,…) — ver .cd__midia */
    gap: 20px;                                     /* 339,2 - 169,1 - 150 = 20,1 */
    align-items: start;
}

.cd__retrato {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--faixa-clara);
}

/**
 * 🔴 ÍCONE PADRÃO, pedido do Jonh em 02/09/2026 -- ver o comentário na
 * parcial `lista-de-pessoas.phtml`. `display:flex` só nesta variante (a
 * `<img>` normal não precisa centralizar nada dentro de si mesma).
 */
.cd__retrato--vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--verde-escuro);
    opacity: .35;
    font-size: 64px;         /* ~150 * 0.43 -- ocupa o miolo do circulo sem tocar a borda */
}

.cd__retrato--vazio .bi { display: block; }

.cd__pessoa__nome {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--verde-escuro);
}

.cd__pessoa__bio {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: #2E3A36;
}

/* -------------------------------------------------------------------------
   MÓDULOS — a faixa escura com o acordeão
   -------------------------------------------------------------------------
   ⚠️ `<details>`/`<summary>`, e nao acordeao de JavaScript: o navegador ja
   sabe abrir e fechar, ja anuncia o estado ao leitor de tela e ja deixa o
   Ctrl+F achar o texto mesmo fechado.
   ------------------------------------------------------------------------- */

.cd__modulos {
    margin-top: 72px;
    padding: 56px 0 64px;
    background: var(--verde-escuro);
}

.cd__pilula {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 6px 14px;
    background: rgba(168, 230, 30, .14);
    border-radius: 999px;
    color: var(--lima);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
}

.cd__pilula svg { width: 16px; height: 16px; flex: 0 0 auto; }

.cd__secao--claro { color: var(--faixa-clara); }

.cd__grade {
    display: grid;
    gap: 14px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.cd__modulo {
    background: #DCE8D2;
    border-radius: 10px;
    overflow: hidden;
}

.cd__modulo__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;                 /* Firefox */
    user-select: none;
}

/**
 * ⚠️ O triangulo padrao do `<summary>` sai por DOIS caminhos: `list-style` no
 * Firefox e este pseudo-elemento no WebKit. Faltando um, o marcador nativo
 * aparece ao lado da seta desenhada -- duas setas na mesma linha.
 */
.cd__modulo__topo::-webkit-details-marker { display: none; }

.cd__modulo__nome {
    font-size: 21px;
    font-weight: 700;
    color: var(--verde-escuro);
}

.cd__modulo__seta {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--verde-escuro);
    transition: transform .18s ease;
}

.cd__modulo[open] .cd__modulo__seta { transform: rotate(180deg); }

.cd__modulo__texto {
    margin: 0;
    padding: 0 22px 20px;
    font-size: 17px;
    line-height: 1.5;
    color: #2C4139;
    text-align: justify;
}

/* -------------------------------------------------------------------------
   CERTIFICADO DE CONCLUSÃO — no fim da MESMA faixa escura dos módulos
   -------------------------------------------------------------------------
   🔴 Nao e secao propria, e a medicao e que diz isso: a faixa #214138 vai de
   y=2983,4 a 4336,5 e a arte do certificado esta em y=4037,8 — dentro dela.
   O "Módulo 07" termina em y≈3990.

   A arte mede 338 x 239 pt em x=944,3; a coluna do texto ocupa o resto.
   ------------------------------------------------------------------------- */

.cd__certificado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 338px;   /* minmax(0,…) — ver .cd__midia */
    gap: 40px;
    align-items: center;
    margin-top: 56px;
    padding: 27px 32px;                            /* medida pedida pelo Jonh, 27/08 */
    background: var(--verde-quase-preto);
    border-radius: 12px;
}

.cd__certificado__titulo {
    margin: 0;
    color: var(--branco);
    font-size: 40px;
    line-height: 1.15;
    font-weight: 700;
}

.cd__certificado__arte {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* -------------------------------------------------------------------------
   A TARJA LIMA — "Tem alguma dúvida...?"
   -------------------------------------------------------------------------
   Medida: #A8E61E, largura total, 64 de altura, em y=4324,5 — encostada no
   fim da faixa escura (4336,5) e logo antes da bege (4388,5).
   ------------------------------------------------------------------------- */

.cd__duvida {
    background: var(--lima);
    padding: 16px 24px;

    /**
     * 🔴 O MARGIN-TOP, ACRESCENTADO EM 02/09/2026 -- achado do Jonh.
     *
     * No PDF do curso #528 a tarja encosta no fim da faixa escura de
     * módulos/certificado, sem vão nenhum -- por isso a regra nasceu sem
     * margin-top. Mas nem todo curso tem módulos: o #516 (um dos cinco
     * assíncronos) não tem, e ali a tarja vinha logo depois do `.cd__corpo`,
     * quase colada no último parágrafo. O mesmo vale para Eventos, que nem
     * sempre tem certificado. 56px repete o vão que `.cd__corpo` já usa
     * acima dele, para o ritmo vertical ficar igual em qualquer combinação
     * de seções.
     */
    margin-top: 56px;

    /**
     * 🔴 É ESTA LINHA que centraliza, e a falta dela foi o defeito.
     *
     * O filho e `inline-flex`, ou seja, um elemento EM LINHA -- e
     * `margin: 0 auto` nao centraliza elemento em linha: ele so tem efeito em
     * bloco com largura definida. O que posiciona um inline dentro do pai e o
     * `text-align` DO PAI. Sem ela a tarja ficava colada a esquerda, como o
     * Jonh apontou em 27/08.
     */
    text-align: center;
}

.cd__duvida__texto {
    /**
     * ⚠️ `inline-flex`, e nao `flex`: assim a caixa encolhe ao tamanho do
     * texto e o `text-align: center` do pai a centraliza. Com `flex` puro ela
     * ocuparia a linha inteira, e ai quem centraliza e o `justify-content` --
     * que funciona, mas perde o alinhamento do texto quando ele quebra em duas
     * linhas numa tela estreita.
     *
     * Os filhos aqui sao pedacos distintos (icone, frase, link), entao o
     * `gap` entre eles e desejado — ao contrario do `.cd__dado`.
     */
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    max-width: var(--largura-interna, 1170px);
    color: var(--verde-escuro);
    font-size: 17px;
    font-weight: 600;
    text-align: center;
}

.cd__duvida__texto svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.cd__duvida__link {
    color: var(--verde-escuro);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cd__duvida__link:hover { color: #0F2620; }

/* -------------------------------------------------------------------------
   O CONTEUDO
   ------------------------------------------------------------------------- */

.cd__corpo {
    /**
     * ⚠️ 17/26 e nao os 20/24 do PDF — desvio de proposito, e ele voltou.
     *
     * A interna de NOTICIA usa 17/24, aprovada em 25/08. Duas internas do
     * mesmo site com corpos de tamanhos diferentes leem como descuido, e 20px
     * com entrelinha 24 (fator 1,2) e apertado para texto longo — os cursos
     * vao de 906 a 11.357 caracteres.
     *
     * HISTORICO: subiu para 19px em 27/08 a pedido do Jonh e VOLTOU para 17 em
     * 27/08, tambem a pedido dele, depois de ver na tela. A entrelinha de 1,55
     * ficou: ela e o que impede o texto de apertar nos cursos mais longos.
     */
    margin: 56px 0 0;
    /* respiro a direita pedido pelo Jonh em 19/09/2026 */
    padding-right: 60px;
    font-size: 17px;
    line-height: 1.55;
    color: #2E3A36;
    text-align: left;
}

.cd__corpo > *:first-child { margin-top: 0; }
.cd__corpo p { margin: 0 0 24px; }

.cd__corpo h2,
.cd__corpo h3,
.cd__corpo strong b { color: var(--verde-escuro); }

.cd__corpo h2, .cd__corpo h3 {
    margin: 36px 0 14px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}

.cd__corpo ul, .cd__corpo ol { margin: 0 0 24px; padding-left: 22px; }
.cd__corpo li { margin-bottom: 8px; }

.cd__corpo a {
    color: var(--lima-escuro);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/**
 * 🔴 26 imagens e 21 tabelas vivem dentro do texto dos cursos, e nenhuma delas
 * sabe a largura da coluna. Sem estas tres regras, uma tabela de programacao
 * estoura a pagina inteira na horizontal — e no celular o site inteiro passa a
 * rolar de lado.
 */
.cd__corpo img { max-width: 100%; height: auto; }

/**
 * 🔴 10/09/2026 -- o `width:100%` sozinho não segura uma tabela larga (uma
 * grade de programação com muitas colunas, por exemplo): o navegador tenta
 * respeitar os 100%, mas quando o conteúdo não cabe mais encolhido, o
 * `<table>` estoura pra fora mesmo assim. A correção existia só a partir de
 * 767.98px -- ficava um vão de tablet (768 a 991,98) sem tratamento nenhum.
 * Virou incondicional (mesma receita já usada em `.nd__corpo table`, de
 * Notícias): a tabela ROLA dentro da própria caixa em qualquer largura, e em
 * telas onde ela já cabe isso não muda nada (sem tabela larga, não aparece
 * barra de rolagem nenhuma).
 */
.cd__corpo table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-size: 15px;
}

.cd__corpo th, .cd__corpo td {
    padding: 8px 10px;
    border: 1px solid #D8DFD6;
    text-align: left;
    vertical-align: top;
}

.cd__corpo th { background: var(--faixa-clara); font-weight: 700; }

/* os 6 videos do YouTube que existem no acervo */
.cd__corpo iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 0 0 24px;
    border: 0;
}

/* -------------------------------------------------------------------------
   OUTROS CURSOS
   ------------------------------------------------------------------------- */

/**
 * 🔴 AQUI HAVIA "OUTROS CURSOS", E ELA SEQUESTRAVA DUAS COISAS.
 *
 * 1. `.cd__grade` — a secao reusava o nome para os cartoes, com
 *    `grid-template-columns: repeat(3, …)`. Como vinha DEPOIS na folha, vencia
 *    a regra do acordeao, e os modulos apareciam em tres colunas.
 *
 * 2. `.cd__secao` — o BASE do titulo estava declarado aqui, depois de
 *    `.cd__secao--claro`. Mesma especificidade (0,1,0), entao ganhava o
 *    ultimo: "Módulos do Curso" saia verde-escuro sobre a faixa
 *    verde-escura, ou seja, INVISIVEL. A pagina parecia so ter a pilula
 *    "GRADE CURRICULAR" e um vao.
 *
 * ⚠️ Nos dois casos o CSS nao acusa nada: nao ha erro, nao ha aviso, e todas
 * as regras sao validas. O sintoma aparece na tela, longe da causa.
 *
 * A secao inteira saiu porque o PDF nao a tem: depois dos modulos vem o
 * certificado, a tarja lima e a faixa bege. `.cd__secao` subiu para junto dos
 * seus modificadores — ver a secao EDUCADORES.
 */

/* -------------------------------------------------------------------------
   404
   ------------------------------------------------------------------------- */

.cd__vazio { padding-block: 64px 80px; }
.cd__vazio .cd__corpo { margin-top: 20px; max-width: 620px; }

.cd__diagnostico {
    margin-top: 32px;
    padding: 12px 14px;
    background: #FDF6E3;
    border-left: 4px solid #E0B341;
    font-size: 14px;
}

/* =========================================================================
   RESPONSIVO
   =========================================================================
   Os cortes sao os da casa: 991,98 e 767,98 (nota 07).

   ⚠️ Medir captura abaixo de ~500px MENTE: o Chrome trava a largura minima da
   janela e a foto parece transbordar na horizontal. Conferir dentro de um
   iframe da largura pedida.
   ========================================================================= */

@media (max-width: 991.98px) {
    .cd__titulo { font-size: 34px; }
    .cd__dado   { font-size: 19px; }

    /**
     * Uma coluna. E o transbordo TEM de sumir junto: com a arte em largura
     * cheia, subir 68px a deixaria por cima do proprio titulo.
     */
    .cd__midia {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        margin-top: 0;
    }

    .cd__faixa { padding-block: 36px 32px; }

    .cd__estado { height: 72px; font-size: 24px; }

    /**
     * 🔴 SEM `max-width` na caixa de preco.
     *
     * Havia `max-width: 480px` aqui. Fazia sentido enquanto a caixa dividia a
     * linha com a arte; em UMA coluna ela virou um bloco de 480px encostado a
     * esquerda, com um vao de 250px vazio ao lado — visto na captura de 767px
     * em 27/08. Em coluna unica ela acompanha a largura, como a arte.
     */

    /**
     * 🔴 E AQUI HAVIA `.cd__grade { repeat(2, …) }`, sobra da secao "Outros
     * cursos" que foi removida. Como `.cd__grade` hoje e o acordeao de
     * MODULOS, a regra punha os modulos em DUAS colunas no tablet — o mesmo
     * defeito que o Jonh apontou na tela larga, escondido na parte responsiva.
     *
     * ⚠️ Ao apagar uma secao, varrer TAMBEM os @media: o nome da classe
     * sobrevive lá dentro e continua valendo, sem erro nenhum.
     */
}

@media (max-width: 767.98px) {
    .cd__titulo { font-size: 27px; }

    .cd__dados { gap: 10px 20px; margin-top: 24px; }

    /**
     * ⚠️ Sem divisor no celular. Ali a lista QUEBRA em duas linhas, e o traco
     * ficaria pendurado a direita da data, apontando para nada.
     */
    .cd__dado--data:not(:last-child)::after { content: none; }
    .cd__dado  { font-size: 17px; padding-left: 28px; }
    .cd__dado::before { width: 18px; height: 18px; margin-top: -9px; }

    .cd__estado { height: 60px; font-size: 18px; }

    .cd__valor { font-size: 24px; }
    .cd__de    { font-size: 17px; }

    /* alvo de toque de sobra — o minimo da casa e 40px */
    .cd__botao { height: 52px; font-size: 18px; }

    /**
     * ⚠️ O respiro de 60px a direita (ver `.cd__corpo`) SAI aqui. Em tela
     * estreita ele nao e respiro: e 60px comidos da largura util, e o texto
     * passa a quebrar em colunas de gibi. O afastamento lateral em telas
     * pequenas ja e do contêiner da pagina, nao deste bloco.
     */
    .cd__corpo { margin-top: 36px; padding-right: 0; }

    .cd__secao { font-size: 24px; }

    /**
     * ⚠️ `.cd__grade` fica com o padrao (uma coluna, gap 14). A regra que
     * havia aqui — `minmax(0,1fr)` com gap 28 — era dos cartoes de "Outros
     * cursos"; aplicada ao acordeao, so afastava os modulos uns dos outros.
     */
}

/* -------------------------------------------------------------------------
   RESPONSIVO dos blocos novos (preço, educadores, módulos)
   -------------------------------------------------------------------------
   ⚠️ Medir captura abaixo de ~500px MENTE: o Chrome trava a largura mínima da
   janela e a foto parece transbordar. Conferir dentro de iframe da largura.
   ------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .cd__educadores { margin-top: 48px; }

    /**
     * 120px, e nao os 84 de antes: o retrato subiu de 100 para 150 na tela
     * larga (a medida do PDF), e manter 84 aqui abriria um salto grande demais
     * na passagem de 992 para 991.
     */
    .cd__pessoa { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; }
    .cd__retrato { width: 120px; height: 120px; }
    .cd__retrato--vazio { font-size: 52px; }

    .cd__modulos { margin-top: 56px; padding: 44px 0 48px; }
    .cd__modulo__nome { font-size: 19px; }
}

@media (max-width: 767.98px) {
    .cd__valor { font-size: 26px; }
    .cd__botao { min-height: 52px; font-size: 16px; }   /* alvo de toque ≥ 40px */

    /**
     * A foto sobe para cima do nome. Mantê-la ao lado num telefone deixaria a
     * biografia numa coluna de ~200px, quebrando palavra a cada linha.
     */
    .cd__pessoa { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .cd__retrato { width: 110px; height: 110px; }   /* 150 ocuparia meia tela */
    .cd__retrato--vazio { font-size: 48px; }

    .cd__local { font-size: 17px; padding-left: 30px; }
    .cd__local::before { width: 19px; height: 19px; }

    .cd__modulo__topo { padding: 15px 16px; }
    .cd__modulo__nome { font-size: 17px; }
    .cd__modulo__texto { padding: 0 16px 16px; font-size: 16px; text-align: left; }

    /**
     * A arte do certificado desce para baixo do titulo. Ao lado, num telefone,
     * ela ficaria com ~120px de largura — ilegivel — e o titulo espremido numa
     * coluna mais estreita ainda.
     */
    .cd__certificado {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 28px 20px;
        margin-top: 40px;
    }
    .cd__certificado__titulo { font-size: 28px; }

    .cd__duvida { padding: 14px 18px; }
    .cd__duvida__texto { font-size: 15px; gap: 6px; }

    .cd__corpo { font-size: 16px; }   /* 17 aperta em tela estreita */
}