/* Tema da página do curso (Método HTF): "alternativo, mas premium".
   Paleta pedida pelo Dr. Javorsky: preto, cinza escuro, vermelho bordô e gelo (branco avermelhado).
   Só a página do curso carrega este arquivo (base/_cabeca.html); o site da clínica continua dourado.
   Vem antes do <style> da Aparência do painel, então o que for escolhido lá continua valendo mais. */

:root {
    --preto: #0d0c0f;
    --grafite: #1a181c;
    --gelo: #f3ebe7;
    --rosa-fosco: #c9a0a8;
    --bordo: #5a1d2a;
    --bordo-borda: #8b3a4b;
    --ouro: #b5495d;          /* destaques sobre o escuro (ícones, negritos, preço) */
    --laranja: #6b1f2e;
    --ouro-texto: #7a2433;    /* destaques sobre o gelo */
    --degrade-ouro: linear-gradient(135deg, #7a2433 0%, #4f1621 100%);
    --texto: #1c1517;
    --texto-suave: #5e5052;
}

/* Áreas escuras: preto com um brilho bordô discreto; áreas claras: gelo avermelhado. */
.pagina-curso .secao--escura {
    background:
        radial-gradient(circle at 12% 20%, rgba(122, 36, 51, .22), transparent 42%),
        radial-gradient(circle at 88% 78%, rgba(122, 36, 51, .14), transparent 46%),
        var(--preto);
}
.pagina-curso .secao--clara {
    background:
        radial-gradient(circle at 10% 15%, rgba(122, 36, 51, .10), transparent 40%),
        radial-gradient(circle at 92% 85%, rgba(122, 36, 51, .07), transparent 42%),
        linear-gradient(180deg, #f8f1ef 0%, #efe3e0 100%);
}
.pagina-curso .rodape { background: var(--preto); }

/* Etiquetas (ex.: "Curso online para cirurgiões-dentistas"): rosa fosco, como no modelo. */
.pagina-curso .etiqueta {
    border-color: rgba(139, 58, 75, .55);
    background: rgba(122, 36, 51, .10);
    color: var(--ouro-texto);
}
.pagina-curso .secao--escura .etiqueta, .pagina-curso .secao--fundo .etiqueta, .pagina-curso .promessa .etiqueta {
    color: var(--rosa-fosco);
    background: rgba(122, 36, 51, .16);
}

/* Botões de compra (os amarelos): bordô, letra gelo em maiúsculas e duas presas finas e rosadas ao lado,
   copiadas do modelo que o Dr. Javorsky aprovou (triângulos estreitos com a borda de dentro reta). */
.pagina-curso .botao--ouro {
    gap: 14px;
    border: 1px solid var(--bordo-borda);
    border-radius: 6px;
    background: var(--bordo);
    color: var(--gelo);
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    box-shadow: 0 14px 30px rgba(60, 12, 22, .45);
}
.pagina-curso .botao--ouro:hover { background: #6b2333; color: #fff; filter: none; }
.pagina-curso .botao--ouro > i { display: none; }
.pagina-curso .botao--ouro::after {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 12px;
    background: linear-gradient(90deg, #f4dde2 0%, #cf8f9c 22%, #f4dde2 78%, #cf8f9c 100%); /* brilho em cada presa */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath d='M0 0h6l-.5 20zM27 0h-6l.5 20z'/%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 27 20'%3E%3Cpath d='M0 0h6l-.5 20zM27 0h-6l.5 20z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pagina-curso .botao--ouro.botao--pequeno { font-size: .76rem; letter-spacing: .12em; }

/* O que era dourado com texto preto (ícones, números das etapas, selo de garantia) vira bordô com texto gelo. */
.pagina-curso .icone-ouro, .pagina-curso .etapa__numero, .pagina-curso .selo-garantia {
    color: var(--gelo);
    box-shadow: 0 8px 20px rgba(60, 12, 22, .35);
}
.pagina-curso .selo-garantia { box-shadow: 0 0 0 10px rgba(122, 36, 51, .16), 0 24px 50px rgba(60, 12, 22, .4); }
.pagina-curso .preco {
    border-color: rgba(139, 58, 75, .6);
    box-shadow: 0 30px 70px rgba(122, 36, 51, .18), var(--sombra-escura);
}
.pagina-curso :focus-visible { outline-color: var(--bordo-borda); }

/* ===== Curso desligado: página "em construção" (curso/em_construcao.html) ===== */
.construcao {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: var(--gelo);
}
.construcao__cartao { max-width: 620px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.construcao__logo { width: 64px; height: 64px; border-radius: 50%; opacity: .9; }
.construcao h1 { font-size: clamp(2rem, 6vw + .5rem, 3.4rem); color: var(--gelo); }
.construcao__texto { color: rgba(243, 235, 231, .78); font-size: 1.08rem; }
.construcao__texto strong { color: var(--rosa-fosco); }
.construcao__clinica { color: rgba(243, 235, 231, .6); font-size: .92rem; text-decoration: none; }
.construcao__clinica:hover { color: var(--gelo); }

/* As duas presas do modelo, grandes, e uma gota que pinga de uma delas de vez em quando. */
.construcao__presas { position: relative; display: flex; gap: 46px; height: 92px; margin: 8px 0 14px; }
.construcao__presa {
    width: 26px;
    height: 92px;
    background: linear-gradient(90deg, #f4dde2, #cf8f9c);
    clip-path: polygon(0 0, 100% 0, 92% 100%);
}
.construcao__presa + .construcao__presa { clip-path: polygon(0 0, 100% 0, 8% 100%); }
.construcao__gota {
    position: absolute;
    left: 22px;
    top: 88px;
    width: 9px;
    height: 13px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: #9c2238;
    opacity: 0;
    animation: pingar 3.2s ease-in 1.2s infinite;
}
@keyframes pingar {
    0% { transform: translateY(0) scale(.3); opacity: 0; }
    15% { transform: translateY(0) scale(1); opacity: 1; }
    55% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(70px) scale(.9); opacity: 0; }
}