/*!
 * Click Conserto — CSS Monolítico Oficial
 * --------------------------------------
 * © 2020–2026 Click Conserto
 *
 * Este arquivo faz parte da identidade visual e técnica
 * da plataforma Click Conserto.
 *
 * Uso, cópia, modificação ou redistribuição
 * são PROIBIDOS sem autorização expressa
 * do titular dos direitos.
 *
 * Projeto iniciado em 2020
 * Núcleo visual reestruturado a partir de 2024
 *
 * Entre em contato comigo para trocar informações:
 * https://www.facebook.com/clickconserto
 * https://www.instagram.com/clickconserto.com.br/
 * Estou atento nessas duas formas de contato.
 *
 * Arquivo: clickconserto.css
 */

/* ==================================================================
   1. TOKENS VISUAIS E VARIÁVEIS GLOBAIS
   ------------------------------------------------------------------
   Decisões visuais centrais da Click Conserto.
   Nenhuma variável existe sem uso real.
================================================================== */

:root {
	
  /* =====================================================
     FUNDOS — DARK THEME (ESTRUTURA)
     ===================================================== */

  --cc-bg-root: #0d1117;        /* Fundo global */
  --cc-bg-hero: #0b0f14;        /* Destaque inicial */
  --cc-bg-section: #111827;     /* Seções intermediárias */
  --cc-bg-surface: #161b22;     /* Cards, modais, caixas */
  --cc-bg-surface-dark: #0f0f0f;/* Superfície mais profunda */

  /* Superfícies sutis */
  --cc-bg-soft: rgba(255,255,255,0.04);

  /* =====================================================
     TEXTO — LEITURA EM FUNDO ESCURO
     ===================================================== */

  --cc-text-primary: #e6edf3;   /* Texto principal */
  --cc-text-secondary: #c9d1d9; /* Texto de apoio */
  --cc-text-muted: #9ba3af;     /* Texto auxiliar */
  --cc-text-disabled: #8b949e;  /* Desabilitado */
  --cc-text-inverse: #0d1117;   /* Texto em fundo claro */

  /* =====================================================
     FEEDBACK / STATUS
     ===================================================== */

  --cc-success: #22c55e;        /* Sucesso */
  --cc-success-bg: rgba(34,197,94,0.15);

  --cc-danger: #f85149;         /* Erro */
  --cc-danger-bg: rgba(248,81,73,0.15);

  --cc-warning: #d29922;        /* Atenção */
  --cc-warning-bg: rgba(210,153,34,0.15);

  --cc-info: #58a6ff;           /* Informação */
  --cc-info-bg: rgba(88,166,255,0.15);

  /* =====================================================
     BORDAS / DIVISORES
     ===================================================== */

  --cc-border-soft: rgba(255,255,255,0.08);
  --cc-border-hover: rgba(255,255,255,0.12);

  /* =====================================================
     SOMBRAS / BACKDROP
     ===================================================== */

  --cc-shadow-soft: rgba(0,0,0,0.25);
  --cc-shadow-medium: rgba(0,0,0,0.35);
  --cc-shadow-strong: rgba(0,0,0,0.5);

  /* =====================================================
     IDENTIDADE / BRANDING
     ===================================================== */

  --cc-brand-primary: #00008B;  /* Azul institucional */
  --cc-brand-accent: #58a6ff;   /* Azul ativo */

  /* Gradiente oficial */
  --cc-gradient-main: linear-gradient(
    270deg,
    #05070a,
    #00008B,
    #0d1117,
    #0b0f14
  );

    
    /* --------------------------------------------------------------
       Escala de espaçamento — base estrutural
    -------------------------------------------------------------- */
  --cc-space-0: 0;
  --cc-space-0-2: 0.10rem;
  --cc-space-0-5: 0.25rem;
  --cc-space-1: 0.5rem;
  --cc-space-1-5: 0.75rem;
  --cc-space-2: 1rem;
  --cc-space-2-5: 1.25rem;
  --cc-space-3: 1.5rem;
  --cc-space-4: 2rem;
  --cc-space-5: 2.5rem;
  --cc-space-5-9: 2.8rem;
  --cc-space-6: 3rem;
  --cc-space-7: 3.5rem;
  --cc-space-8: 4rem;
  --cc-space-9: 4.5rem;
  --cc-space-10: 5rem;
  --cc-space-11: 5.5rem;
  --cc-space-12: 6rem;
  --cc-space-13: 6.5rem;
  --cc-space-14: 7rem;
  --cc-space-15: 7.5rem;
  --cc-space-16: 8rem;
  
/* =====================================================
   TIPOGRAFIA — ESCALA DE FONTES
   ===================================================== */

/* Textos pequenos / auxiliares */
--cc-font-xs: 0.7rem;    /* badges, micro textos */
--cc-font-sm: 0.85rem;   /* texto pequeno */
--cc-font-md-sm: 0.9rem; /* navegação, inputs */
--cc-font-md: 0.95rem;   /* listas, breadcrumbs */

/* Texto base */
--cc-font-base: 1rem;    /* corpo padrão */
--cc-font-lead: 1.1rem; /* introduções */

/* Títulos */
--cc-font-title-sm: 1.15rem;
--cc-font-title-md: 1.25rem;
--cc-font-title-lg: 1.75rem;

/* Títulos grandes / hero */
--cc-font-title-xl: 2rem;
--cc-font-title-2xl: 2.5rem;
--cc-font-title-3xl: 2.75rem;
--cc-font-title-hero: 3.5rem;

/* Destaques numéricos */
--cc-font-score: 2rem;

    /* --------------------------------------------------------------
       Raios e formas
    -------------------------------------------------------------- */
    --cc-radius-sm: 8px;
    --cc-radius-md: 14px;
    --cc-radius-lg: 20px;

    /* --------------------------------------------------------------
       Transições base (usadas depois em animações)
    -------------------------------------------------------------- */

    --cc-transition-fast: 0.15s ease;
    --cc-transition-base: 0.25s ease;
    --cc-transition-slow: 0.4s ease;
    
    --cc-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --cc-ease-fast: cubic-bezier(0.4, 0, 0.2, 1);

    --cc-duration-fast: 180ms;
    --cc-duration-base: 280ms;
    --cc-duration-slow: 420ms;
    
    /* =====================================================
   NAVEGAÇÃO / DROPDOWN — TOKENS ESPECÍFICOS
   ===================================================== */

/* Espaçamentos internos do dropdown */
--cc-nav-item-padding-y: 0.6rem;
--cc-nav-item-padding-x: 1rem;
--cc-nav-item-gap: 0.75rem;

/* Tipografia do menu */
--cc-nav-font-size: 0.9rem;

/* Aparência visual */
--cc-nav-bg-hover: rgba(255,255,255,0.06);
--cc-nav-radius: 10px;

/* Motion específico */
--cc-nav-transition: var(--cc-duration-fast) var(--cc-ease-soft);
    
}

/* ==================================================================
   2. FUNDAÇÕES VISUAIS CLICK CONSERTO
   ------------------------------------------------------------------
   Classes base e variações conceituais que definem comportamentos
   visuais distintos para elementos semelhantes.
================================================================== */

/* ---------------------------------------------------------------
   Superfícies e fundos — Tema Dark (padrão absoluto)
---------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Superfícies e fundos — Tema Dark (padrão absoluto)
---------------------------------------------------------------- */

/* Fundo base da página de apresentação
   Uso: raiz visual da página */
.cc-apresentacao-bg {
    background-color: var(--cc-bg-root);
    color: var(--cc-text-primary);
}


/* Seção principal da apresentação (hero)
   Uso: primeiro impacto visual */
.cc-apresentacao-hero {
    background-color: var(--cc-bg-hero);
    padding: var(--cc-space-8) var(--cc-space-3);
}


/* Seção intermediária da apresentação
   Uso: contraste suave sem quebrar o dark theme */
.cc-apresentacao-section {
    background-color: var(--cc-bg-section);
    padding: var(--cc-space-6) var(--cc-space-3);
}


/* Superfície elevada (cards, blocos visuais destacados)
   Uso: profundidade sem uso de fundo claro */
.cc-surface-elevated {
    background-color: var(--cc-bg-surface);
    border-radius: var(--cc-radius-md);
}

/* ---------------------------------------------------------------
   Estrutura raiz da página de apresentação
---------------------------------------------------------------- */

/* Wrapper global da apresentação
   Uso: envolve TODO o conteúdo da página */
.cc-apresentacao {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* Container centralizado com largura controlada
   Uso: limitar conteúdo sem depender de bootstrap */
.cc-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* Container de leitura confortável
   Uso: textos longos e blocos informativos */
.cc-container-readable {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}


/* ---------------------------------------------------------------
   Espaçamentos estruturais
---------------------------------------------------------------- */

/* Espaçamento vertical padrão entre seções */
.cc-section-spacing {
    padding-top: var(--cc-space-8);
    padding-bottom: var(--cc-space-8);
}


/* Espaçamento compacto
   Uso: seções secundárias */
.cc-section-spacing-sm {
    padding-top: var(--cc-space-5);
    padding-bottom: var(--cc-space-5);
}


/* Espaçamento amplo
   Uso: seções de destaque visual */
.cc-section-spacing-lg {
    padding-top: var(--cc-space-12);
    padding-bottom: var(--cc-space-12);
}

/* ---------------------------------------------------------------
   Alinhamentos conceituais
---------------------------------------------------------------- */

/* Conteúdo centralizado horizontalmente */
.cc-align-center {
    display: flex;
    justify-content: center;
}


/* Conteúdo centralizado em ambos os eixos
   Uso: hero, chamadas principais */
.cc-align-center-both {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ---------------------------------------------------------------
   Hierarquia visual — Títulos
---------------------------------------------------------------- */

/* Título principal da página
   Uso: hero, headline central */
.cc-title-primary {
    display: block;
    line-height: 1.2;
    color: var(--cc-text-primary);
}


/* Subtítulo direto do título principal
   Uso: reforço sem competir */
.cc-title-secondary {
    display: block;
    margin-top: var(--cc-space-1-5);
    line-height: 1.3;
    color: var(--cc-text-secondary);
}


/* Título de seção
   Uso: início de blocos importantes */
.cc-title-section {
    display: block;
    margin-bottom: var(--cc-space-3);
    line-height: 1.3;
    color: var(--cc-text-primary);
}

/* ---------------------------------------------------------------
   Hierarquia visual — Textos
---------------------------------------------------------------- */

/* Texto de apoio principal
   Uso: descrição direta da proposta */
.cc-text-lead {
    line-height: 1.6;
    margin-top: var(--cc-space-2);
    color: var(--cc-text-secondary);
}


/* Texto padrão de leitura
   Uso: explicações, conteúdo contínuo */
.cc-text-body {
    line-height: 1.7;
    color: var(--cc-text-primary);
}

/* Texto padrão de leitura
   Uso: explicações, conteúdo contínuo */
.cc-text-body ul li {
    list-style-type: disc; /* bolinha padrão */
}

/* Texto padrão de leitura
   Uso: explicações, conteúdo contínuo */
.cc-text-body ol li {
    list-style-type: decimal; /* números */
}

.cc-text-body li { 
	margin-bottom: var(--cc-space-2);
    color: var(--cc-text-muted);
	}
	
/* Estilo para <b> dentro de <li> */
.cc-text-body li b {
    font-weight: 900;          /* mais pesado que o normal */
}

/* Texto auxiliar
   Uso: observações, notas, complementos */
.cc-text-muted {
    line-height: 1.6;
    color: var(--cc-text-muted);
}

/* ---------------------------------------------------------------
   Fundamento de tema escuro
---------------------------------------------------------------- */

.cc-dark-surface {
    background-color: var(--cc-bg-surface-dark);
    color: var(--cc-text-primary);
}

/* ==================================================================
   3. RESET E NORMALIZAÇÃO BASE
   ------------------------------------------------------------------
   Neutraliza estilos imprevisíveis de navegadores
   e cria uma base sólida para todo o projeto.
================================================================== */

/* ---------------------------------------------------------------
   Box model consistente
---------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------
   Reset estrutural básico
---------------------------------------------------------------- */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

/* ---------------------------------------------------------------
   Corpo do documento
---------------------------------------------------------------- */
body {
    background-color: var(--cc-bg-root);
    color: var(--cc-text-primary);

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial,
                 sans-serif;

    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------
   Remoção de margens padrão perigosas
---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote {
    margin: 0;
}

/* ---------------------------------------------------------------
   Listas sem estilo implícito
---------------------------------------------------------------- */
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------------------------------------------------------------
   Imagens e SVGs previsíveis
---------------------------------------------------------------- */
img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------
   Links sem comportamento visual surpresa
---------------------------------------------------------------- */
a {
    color: inherit;
    text-decoration: none;
}

/* ---------------------------------------------------------------
   Botões e inputs normalizados
---------------------------------------------------------------- */
button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

/* ---------------------------------------------------------------
   Botões clicáveis explícitos
---------------------------------------------------------------- */
button {
    cursor: pointer;
}

/* ---------------------------------------------------------------
   Elementos ocultos semanticamente
---------------------------------------------------------------- */
[hidden] {
    display: none !important;
}
 
 
/* ==================================================================
   4. TIPOGRAFIA E TEXTO
   ------------------------------------------------------------------
   Define hierarquia tipográfica clara, previsível
   e totalmente desacoplada das tags HTML.
================================================================== */

/* ---------------------------------------------------------------
   Base tipográfica global
---------------------------------------------------------------- */
.cc-text {
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------
   Títulos — Hierarquia principal
---------------------------------------------------------------- */

/* Título máximo (hero principal) */
.cc-title-xl {
        font-size: clamp(
        var(--cc-font-title-2xl),
        5vw,
        var(--cc-font-title-hero)
    );
    font-weight: 700;
    line-height: 1.15;
}

/* Título primário */
.cc-title-lg {
    font-size: clamp(
        var(--cc-font-title-xl),
        4vw,
        var(--cc-font-title-3xl)
    );
    font-weight: 600;
    line-height: 1.2;
}

/* Título de seção */
.cc-title-md {
    font-size: var(--cc-font-title-lg);
    font-weight: 600;
    line-height: 1.25;
}

/* ---------------------------------------------------------------
   Textos corridos
---------------------------------------------------------------- */

/* Texto principal de leitura */
.cc-text-body {
    font-size: var(--cc-font-base);
    line-height: 1.7;
    color: var(--cc-text-secondary);
}

/* Texto de introdução / destaque */
.cc-text-lead {
    font-size: var(--cc-font-lead);
    line-height: 1.65;
    color: var(--cc-text-primary);
}

/* Texto auxiliar / observação */
.cc-text-muted {
    font-size: var(--cc-font-md);
    line-height: 1.6;
    color: var(--cc-text-disabled);
}

/* Texto pequeno */
.cc-text-sm {
    font-size: var(--cc-font-sm);
    line-height: 1.5;
}

/* ---------------------------------------------------------------
   Ênfase e variações semânticas
---------------------------------------------------------------- */

/* Texto forte */
.cc-text-strong {
    font-weight: 600;
}

/* Texto destacado */
.cc-text-highlight {
    color: var(--cc-info);
}

/* Texto de sucesso */
.cc-text-success {
    color: var(--cc-success);
}

/* Texto de alerta */
.cc-text-warning {
    color: var(--cc-warning);
}

/* Texto de erro */
.cc-text-danger {
    color: var(--cc-danger);
}
/* ---------------------------------------------------------------
   Alinhamento de texto
---------------------------------------------------------------- */

.cc-text-center {
    text-align: center;
}

.cc-text-left {
    text-align: left;
}

.cc-text-right {
    text-align: right;
}

/* ---------------------------------------------------------------
   Espaçamento tipográfico controlado
---------------------------------------------------------------- */

/* Correção global para ícones ao lado de texto */
.cc-title-sm, .cc-title-md, .cc-breadcrumb li, .cc-icon-label {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* No caso de centralizado */
    gap: var(--cc-space-1); /* Espaço controlado entre ícone e texto */
}

/* Garante que o ícone SVG dentro desses títulos não "pule" */
.cc-title-sm svg, .cc-title-md svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
/* Classe para link estilizado */
.cc-link-bonito {
    display: inline-block;
    padding: var(--cc-space-2) var(--cc-space-4);
    font-size: 1rem;
    font-weight: 700;

    color: var(--cc-text-primary);
    text-decoration: none;

    border-radius: var(--cc-radius-md);
    background: var(--cc-gradient-main);
    background-size: 300% 300%;

    transition: all var(--cc-transition-slow);
    animation: cc-gradient-move 5s var(--cc-ease-soft) infinite;

    box-shadow: 0 4px 15px var(--cc-shadow-soft);
}

/* Efeito ao passar o mouse */
.cc-link-bonito:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px var(--cc-shadow-medium);
}
/* ==================================================================
   5. LAYOUT E ESTRUTURA
================================================================== */
/* =====================================================
   UTILITÁRIOS – MARGIN
===================================================== */

/* margin geral */
.cc-m-0 { margin: var(--cc-space-0); }
.cc-m-1 { margin: var(--cc-space-1); }
.cc-m-2 { margin: var(--cc-space-2); }
.cc-m-3 { margin: var(--cc-space-3); }
.cc-m-4 { margin: var(--cc-space-4); }
.cc-m-5 { margin: var(--cc-space-5); }
.cc-m-6 { margin: var(--cc-space-6); }

/* margin-top */
.cc-mt-0 { margin-top: var(--cc-space-0); }
.cc-mt-1 { margin-top: var(--cc-space-1); }
.cc-mt-2 { margin-top: var(--cc-space-2); }
.cc-mt-3 { margin-top: var(--cc-space-3); }
.cc-mt-4 { margin-top: var(--cc-space-4); }
.cc-mt-5 { margin-top: var(--cc-space-5); }
.cc-mt-6 { margin-top: var(--cc-space-6); }

/* margin-bottom */
.cc-mb-0 { margin-bottom: var(--cc-space-0); }
.cc-mb-1 { margin-bottom: var(--cc-space-1); }
.cc-mb-2 { margin-bottom: var(--cc-space-2); }
.cc-mb-3 { margin-bottom: var(--cc-space-3); }
.cc-mb-4 { margin-bottom: var(--cc-space-4); }
.cc-mb-5 { margin-bottom: var(--cc-space-5); }
.cc-mb-6 { margin-bottom: var(--cc-space-6); }

/* margin-left */
.cc-ml-0 { margin-left: var(--cc-space-0); }
.cc-ml-1 { margin-left: var(--cc-space-1); }
.cc-ml-2 { margin-left: var(--cc-space-2); }
.cc-ml-3 { margin-left: var(--cc-space-3); }
.cc-ml-4 { margin-left: var(--cc-space-4); }
.cc-ml-5 { margin-left: var(--cc-space-5); }
.cc-ml-6 { margin-left: var(--cc-space-6); }

/* margin-right */
.cc-mr-0 { margin-right: var(--cc-space-0); }
.cc-mr-1 { margin-right: var(--cc-space-1); }
.cc-mr-2 { margin-right: var(--cc-space-2); }
.cc-mr-3 { margin-right: var(--cc-space-3); }
.cc-mr-4 { margin-right: var(--cc-space-4); }
.cc-mr-5 { margin-right: var(--cc-space-5); }
.cc-mr-6 { margin-right: var(--cc-space-6); }

/* =====================================================
   UTILITÁRIOS – PADDING
===================================================== */

/* padding geral */
.cc-p-0 { padding: var(--cc-space-0); }
.cc-p-1 { padding: var(--cc-space-1); }
.cc-p-2 { padding: var(--cc-space-2); }
.cc-p-3 { padding: var(--cc-space-3); }
.cc-p-4 { padding: var(--cc-space-4); }
.cc-p-5 { padding: var(--cc-space-5); }
.cc-p-6 { padding: var(--cc-space-6); }

/* padding-top */
.cc-pt-0 { padding-top: var(--cc-space-0); }
.cc-pt-1 { padding-top: var(--cc-space-1); }
.cc-pt-2 { padding-top: var(--cc-space-2); }
.cc-pt-3 { padding-top: var(--cc-space-3); }
.cc-pt-4 { padding-top: var(--cc-space-4); }
.cc-pt-5 { padding-top: var(--cc-space-5); }
.cc-pt-6 { padding-top: var(--cc-space-6); }

/* padding-bottom */
.cc-pb-0 { padding-bottom: var(--cc-space-0); }
.cc-pb-1 { padding-bottom: var(--cc-space-1); }
.cc-pb-2 { padding-bottom: var(--cc-space-2); }
.cc-pb-3 { padding-bottom: var(--cc-space-3); }
.cc-pb-4 { padding-bottom: var(--cc-space-4); }
.cc-pb-5 { padding-bottom: var(--cc-space-5); }
.cc-pb-6 { padding-bottom: var(--cc-space-6); }

/* padding-left */
.cc-pl-0 { padding-left: var(--cc-space-0); }
.cc-pl-1 { padding-left: var(--cc-space-1); }
.cc-pl-2 { padding-left: var(--cc-space-2); }
.cc-pl-3 { padding-left: var(--cc-space-3); }
.cc-pl-4 { padding-left: var(--cc-space-4); }
.cc-pl-5 { padding-left: var(--cc-space-5); }
.cc-pl-6 { padding-left: var(--cc-space-6); }

/* padding-right */
.cc-pr-0 { padding-right: var(--cc-space-0); }
.cc-pr-1 { padding-right: var(--cc-space-1); }
.cc-pr-2 { padding-right: var(--cc-space-2); }
.cc-pr-3 { padding-right: var(--cc-space-3); }
.cc-pr-4 { padding-right: var(--cc-space-4); }
.cc-pr-5 { padding-right: var(--cc-space-5); }
.cc-pr-6 { padding-right: var(--cc-space-6); }

/* =====================================================
   RESULTADOS DE PROVAS – LAYOUT
   ===================================================== */

.cc-results {
    display: flex;
    flex-direction: column;
    gap: var(--cc-space-4);
}

/* Cabeçalho da página */
.cc-page-header {
    max-width: 900px;
    margin: 0 auto;
}

/* Container fluido
   Uso: seções que ocupam toda a largura */
.cc-container-fluid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Container estreito
   Uso: formulários, textos concentrados */
.cc-container-narrow {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
/* Layout em coluna
   Uso: empilhamento vertical padrão */
.cc-layout-column {
    display: flex;
    flex-direction: column;
}

/* Layout em coluna com espaçamento interno */
.cc-layout-column-gap {
    display: flex;
    flex-direction: column;
    gap: var(--cc-space-3);
}
/* Layout em linha
   Uso: grupos horizontais */
.cc-layout-row {
    display: flex;
    flex-direction: row;
}

/* Layout em linha com espaçamento */
.cc-layout-row-gap {
    display: flex;
    flex-direction: row;
    gap: var(--cc-space-3);
}
/* Distribuição à esquerda */
.cc-justify-start {
    justify-content: flex-start;
}

/* Distribuição central */
.cc-justify-center {
    justify-content: center;
}

/* Distribuição à direita */
.cc-justify-end {
    justify-content: flex-end;
}

/* Distribuição com espaço entre */
.cc-justify-between {
    justify-content: space-between;
}

/* Alinhamento no topo */
.cc-align-start {
    align-items: flex-start;
}

/* Alinhamento central vertical */
.cc-align-middle {
    align-items: center;
}

/* Alinhamento inferior */
.cc-align-end {
    align-items: flex-end;
}

/* Wrapper para scroll horizontal */ 
.cc-table { 
	width: 100%; 
	overflow-x: auto; /* ativa scroll horizontal */ 
}

.cc-table-custom {
  width: 100%;
  font-size: var(--cc-font-md-sm);
  border: 3px solid var(--cc-border-soft);
  border-radius: var(--cc-radius-lg);
  background-color: var(--cc-bg-surface);
  overflow-x: auto; /* Responsividade sempre ativa */
  white-space: nowrap; /* impede quebra das células */
}

/* Cabeçalho e células */
.cc-table-custom th,
.cc-table-custom td {
  width: auto;
  border: 1px solid var(--cc-border-soft);
  border-radius: var(--cc-radius-md);
  padding: var(--cc-space-1);
  text-align: center;
  color: var(--cc-text-primary);
}

/* Cabeçalho */
.cc-table-custom thead {
  background-color: var(--cc-bg-section);
  color: var(--cc-text-primary);
  font-weight: 600;
}

/* Linhas alternadas */
.cc-table-custom tbody tr:nth-child(even) {
  background-color: var(--cc-bg-soft);
}

/* Hover e foco */
.cc-table-custom tbody tr:hover,
.cc-table-custom tbody tr:focus {
  background-color: var(--cc-brand-primary);
  transition: background-color var(--cc-transition-base);
}

/* Estados especiais */
.cc-table-custom td.success {
  background-color: var(--cc-success-bg);
  color: var(--cc-success);
}

.cc-table-custom td.danger {
  background-color: var(--cc-danger-bg);
  color: var(--cc-danger);
}

.cc-table-custom td.warning {
  background-color: var(--cc-warning-bg);
  color: var(--cc-warning);
}

.cc-table-custom td.info {
  background-color: var(--cc-info-bg);
  color: var(--cc-info);
}


/* ==================================================================
   6. COMPONENTES BASE
================================================================== */
 /* ---------------------------------------------------------------
   Card base
   Uso: contêiner visual padrão do projeto
---------------------------------------------------------------- */
.cc-card {
background-color: var(--cc-bg-surface);
border-radius: var(--cc-radius-md);
padding: var(--cc-space-4);
}
/* Card compacto
   Uso: listas, informações rápidas */
.cc-card-sm {
padding: var(--cc-space-2-5);

}
/* Card de destaque
   Uso: chamadas importantes */
.cc-card-highlight {
    border: 1px solid var(--cc-info-bg);
}

/* Componentes da tela de Configurações de senha - trouxe para cá porque tem "card" */
.cc-security-wrapper {
    display: flex;
    justify-content: center;
    padding: var(--cc-space-4) var(--cc-space-2);
}

.cc-security-card {
    width: 100%;
    max-width: 420px;
}

.cc-security-header {
    text-align: center;
    margin-bottom: var(--cc-space-4);
}

.cc-security-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--cc-space-2);
    border-radius: 50%;
    background: var(--cc-info-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-security-icon i {
    width: 30px;
    height: 30px;
    color: var(--cc-info);
}
/* =====================================================
   CARD – RESULTADO DE PROVA
   ===================================================== */

.cc-result-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header */
.cc-result-card .cc-card-header {
    border-bottom: 1px solid var(--cc-border-soft);
    padding-bottom: var(--cc-space-1-5);
}

/* Nota */
.cc-result-score {
    display: flex;
    flex-direction: column;
    gap: var(--cc-space-0-5);
    margin-bottom: var(--cc-space-2);
}

.cc-score {
    font-size: var(--cc-font-score);
    font-weight: 700;
}

.cc-score-success {
    color: var(--cc-success);
}

.cc-score-danger {
    color: var(--cc-danger);
}
/* =====================================================
   STATUS DO RESULTADO
   ===================================================== */

.cc-result-status {
    padding: var(--cc-space-1-5);
	border-radius: var(--cc-radius-sm);
	margin-bottom: var(--cc-space-2);
    background: var(--cc-bg-soft);
    border: 1px solid transparent;
}

.cc-result-status p {
    margin-bottom: var(--cc-space-1);
    font-weight: 500;
}

/* Variações */
.cc-result-status.cc-success {
    border-color: color-mix(in srgb, var(--cc-success) 40%, transparent);
    color: var(--cc-success);
}

.cc-result-status.cc-info {
    border-color: color-mix(in srgb, var(--cc-info) 40%, transparent);
    color: var(--cc-info);
}

.cc-result-status.cc-warning {
    border-color: color-mix(in srgb, var(--cc-warning) 40%, transparent);
    color: var(--cc-warning);
}

.cc-result-status.cc-danger {
    border-color: color-mix(in srgb, var(--cc-danger) 40%, transparent);
    color: var(--cc-danger);
}
/* =====================================================
   RESPOSTAS DO ALUNO
   ===================================================== */

.cc-result-details summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: var(--cc-space-1);
}

.cc-answer-list {
    margin-top: var(--cc-space-1-5);
    padding-left: var(--cc-space-2-5);
    display: flex;
    flex-direction: column;
    gap: var(--cc-space-0-5);
}

.cc-answer-list li {
    font-size: var(--cc-font-md-sm);
    opacity: 0.85;
    line-height: 1.4;
}

/* ---------------------------------------------------------------
   Botão base
---------------------------------------------------------------- */
.cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cc-space-1);
	border-radius: var(--cc-radius-md);

    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: 
        background-color var(--cc-duration-base) var(--cc-ease-soft),
        transform 0.2s ease,
        filter var(--cc-duration-base) var(--cc-ease-soft),
        box-shadow var(--cc-duration-base) var(--cc-ease-soft);
    cursor: pointer;
    text-decoration: none;
    border: none;
}

/* 2. Efeito de clarear ao passar o mouse */
.cc-btn:hover {
    /* Aumenta a claridade em 15% de forma uniforme, 
       funciona tanto no azul (primary) quanto no cinza (secondary) */
    filter: brightness(1.15);
    
    /* Um leve deslocamento para cima dá sensação de interatividade (opcional) */
    transform: translateY(-1px);
    
    /* Sombra suave para destacar que o botão está "ativo" sob o mouse */
    box-shadow: 0 4px 12px var(--cc-shadow-soft);
}
/* 3. Efeito visual ao clicar (Feedback tátil) */
.cc-btn:active {
    transform: translateY(0);
    filter: brightness(0.95); /* Escurece levemente ao clicar */
}
/* Botão primário */
.cc-btn-primary {
    background-color: var(--cc-success);
	color: var(--cc-text-inverse);
	padding: var(--cc-space-1-5) var(--cc-space-2-5);
}

/* Botão secundário */
.cc-btn-secondary {
	background-color: var(--cc-bg-surface);
	color: var(--cc-text-primary);
    padding: var(--cc-space-1-5) var(--cc-space-0-2);
}

/* Botão de alerta */
.cc-btn-danger {
    background-color: var(--cc-danger);
	color: var(--cc-text-inverse);
	padding: var(--cc-space-1-5) var(--cc-space-2-5);
}
.cc-btn-outline {
	padding: var(--cc-space-1-5) var(--cc-space-2-5);
	border-radius: var(--cc-radius-lg);
	
}
/* opção selecionada mantém o visual do hover */
.cc-btn-outline.is-selected {
    background: var(--cc-gradient-main);
    background-size: 300% 300%;
    animation: cc-gradient-move 5s var(--cc-ease-soft) infinite;
    filter: brightness(1.15);
}
.cc-btn-outline:hover {
	background: var(--cc-gradient-main);
    background-size: 300% 300%;
    transition: all var(--cc-transition-slow);
    animation: cc-gradient-move 5s var(--cc-ease-soft) infinite;
    transform: translateY(-4px);
    box-shadow: 0 4px 12px var(--cc-shadow-strong);
    filter: brightness(1.55);
}

.cc-btn.is-locked {
    cursor: not-allowed;

    background-color: color-mix(
        in srgb,
        var(--cc-bg-surface) 80%,
        black
    );

    border: 1px solid var(--cc-border-soft);
    color: var(--cc-text-disabled);
}

/* ---------------------------------------------------------------
   Ícone base Feather
   Uso: todos os SVGs de ícone do projeto
---------------------------------------------------------------- */
.cc-icon {
    width: 1.25em;
    height: 1.25em;
    stroke-width: 2;
    flex-shrink: 0;
    stroke: currentColor;
}

/* Ícone pequeno */
.cc-icon-sm {
    width: 1em;
    height: 1em;
}

/* Ícone médio (padrão) */
.cc-icon-md {
    width: 1.25em;
    height: 1.25em;
}

/* Ícone grande */
.cc-icon-lg {
    width: 1.75em;
    height: 1.75em;
}

/* ---------------------------------------------------------------
   Variações semânticas de cor
---------------------------------------------------------------- */

/* Ícone neutro */
.cc-icon-muted {
    color: var(--cc-text-muted);
}

/* Ícone informativo */
.cc-icon-info {
    color: var(--cc-info);
}

/* Ícone de sucesso */
.cc-icon-success {
    color: var(--cc-success);
}

/* Ícone de alerta */
.cc-icon-warning {
    color: var(--cc-warning);
}

/* Ícone de erro */
.cc-icon-danger {
    color: var(--cc-danger);
}

/* ---------------------------------------------------------------
   Composição ícone + texto
---------------------------------------------------------------- */
.cc-icon-label {
    display: inline-flex;
    align-items: center;
    gap: var(--cc-space-1);
}

/* Ícone dentro de botão */
.cc-btn .cc-icon {
    width: 1em;
    height: 1em;
}

/* Ícone destacado em cards */
.cc-card-icon {
    width: var(--cc-space-4);
    height: var(--cc-space-4);
    color: var(--cc-info);
}
 
/* ==================================================================
   7. NAVEGAÇÃO, MENUS E CABEÇALHOS
================================================================== */

/* ---------------------------------------------------------------
   Cabeçalho principal do site
   Uso: topo fixo em páginas públicas e privadas
---------------------------------------------------------------- */
.cc-header {
    background-color: var(--cc-bg-hero);
    border-bottom: 1px solid var(--cc-border-soft);
    width: 100%;
    position: relative;
    z-index: 1000;
}

/* Container interno do header
   Uso: controla largura e alinhamento */
.cc-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    max-width: 1200px;
    margin: 0 auto;
    padding: var(--cc-space-2) var(--cc-space-3);
}

/* ---------------------------------------------------------------
   Área de marca / logo
---------------------------------------------------------------- */

/* Wrapper da marca */
.cc-header-brand {
    display: flex;
    align-items: center;
    gap: var(--cc-space-1-5);
}

/* Logo SVG ou imagem */
.cc-header-logo {
    display: block;
    width: auto;
    height: 36px; /* altura visual fixa é aceitável aqui */
}

/* Nome textual da marca */
.cc-header-title {
    font-size: var(--cc-font-lead);
    font-weight: 600;
    color: var(--cc-text-primary);
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   Navegação principal
---------------------------------------------------------------- */

/* Wrapper da navegação */
.cc-nav {
    display: flex;
    align-items: center;
}

/* Lista de links */
.cc-nav-list {
    display: flex;
    align-items: center;
    gap: var(--cc-space-2-5);

    list-style: none;
    margin: 0;
    padding: 0;
}

/* Item individual */
.cc-nav-item {
    display: flex;
    align-items: center;
}

/* Link de navegação */
.cc-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--cc-space-0-5);

    color: var(--cc-text-secondary);
    text-decoration: none;
    font-weight: 500;

    padding: var(--cc-space-0-5) var(--cc-space-0-5);
    border-radius: var(--cc-radius-sm);

    transition:
        color var(--cc-duration-fast) var(--cc-ease-fast),
        background-color var(--cc-duration-fast) var(--cc-ease-fast);
}

/* Hover do link */
.cc-nav-link:hover {
    color: #ffffff;
    background-color: var(--cc-bg-soft);
}

/* Link ativo */
.cc-nav-link-active {
    color: var(--cc-info);
}

/* Nome do usuário */
.cc-user-name {
    color: var(--cc-text-primary);
    font-size: var(--cc-font-md-sm);
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   Área de ações do cabeçalho
---------------------------------------------------------------- */

/* Wrapper de ações (login, usuário, botões) */
.cc-header-actions {
    display: flex;
    align-items: center;
    gap: var(--cc-space-1-5);
}

/* ---------------------------------------------------------------
   Dropdown — base e estado fechado
---------------------------------------------------------------- */
.cc-dropdown {
    position: relative;
    z-index: 1100;
}

.cc-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--cc-space-1));
    right: 0;

    min-width: 220px;
    padding: var(--cc-space-1) 0;
    list-style: none;

    background-color: var(--cc-bg-surface);
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-radius-md);

    opacity: 0;
    transform: translateY(var(--cc-space-2));
    pointer-events: none;

    transition:
        opacity var(--cc-duration-slow) var(--cc-ease-soft),
        transform var(--cc-duration-slow) var(--cc-ease-soft);

    z-index: 1100;
}

/* Dropdown aberto */
.cc-dropdown.is-open .cc-dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ---------------------------------------------------------------
   Itens do dropdown — estado base
---------------------------------------------------------------- */
.cc-dropdown-menu li {
    opacity: 0;
    transform: translateY(var(--cc-space-1));

    transition:
        opacity var(--cc-duration-base) var(--cc-ease-soft),
        transform var(--cc-duration-base) var(--cc-ease-soft);
}

/* Itens visíveis quando aberto */
.cc-dropdown.is-open .cc-dropdown-menu li {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------------------------------------
   Delay progressivo (abertura)
   Mantido literal por ser comportamento, não design token
---------------------------------------------------------------- */
.cc-dropdown.is-open .cc-dropdown-menu li:nth-child(1) { transition-delay: 40ms; }
.cc-dropdown.is-open .cc-dropdown-menu li:nth-child(2) { transition-delay: 80ms; }
.cc-dropdown.is-open .cc-dropdown-menu li:nth-child(3) { transition-delay: 120ms; }
.cc-dropdown.is-open .cc-dropdown-menu li:nth-child(4) { transition-delay: 160ms; }
.cc-dropdown.is-open .cc-dropdown-menu li:nth-child(5) { transition-delay: 200ms; }
.cc-dropdown.is-open .cc-dropdown-menu li:nth-child(6) { transition-delay: 240ms; }
.cc-dropdown.is-open .cc-dropdown-menu li:nth-child(7) { transition-delay: 280ms; }
.cc-dropdown.is-open .cc-dropdown-menu li:nth-child(8) { transition-delay: 320ms; }

/* --------------------------------------------------------------
   ANIMAÇÃO DA ENGRENAGEM (SETTINGS)
   -------------------------------------------------------------- */

/* 1. Transição suave para o ícone voltar ao estado original */
.cc-dropdown-toggle .feather-settings {
    transition: transform 0.5s var(--cc-ease-soft);
}

/* 2. Animação de rotação contínua quando o dropdown está aberto */
.cc-dropdown.is-open .cc-dropdown-toggle .feather-settings {
    animation: cc-rotate-gear 4s linear infinite;
    color: var(--cc-info); /* Opcional: muda a cor para destacar */
}

/* 3. Definição do Keyframe */
@keyframes cc-rotate-gear {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 4. Efeito de "pulsar" no botão quando o mouse passa (opcional) */
.cc-dropdown-toggle:hover .feather-settings {
    transform: scale(1.1);
}

/* ---------------------------------------------------------------
   Backdrop overlay para dropdown
---------------------------------------------------------------- */
.cc-backdrop {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);

    opacity: 0;
    pointer-events: none;

    transition: opacity var(--cc-duration-base) var(--cc-ease-soft);
    z-index: 900;
}

/* Backdrop ativo */
.cc-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
}


.cc-dropdown-link {
    display: flex;
    align-items: center;
    gap: var(--cc-nav-item-gap);

    padding: 
        var(--cc-nav-item-padding-y)
        var(--cc-nav-item-padding-x);

    font-size: var(--cc-nav-font-size);
    font-weight: 500;

    color: var(--cc-text-secondary);
    text-decoration: none;

    border-radius: var(--cc-nav-radius);

    transition:
        background-color var(--cc-nav-transition),
        color var(--cc-nav-transition);
}

.cc-dropdown-link:hover {
    background-color: var(--cc-nav-bg-hover);
    color: var(--cc-text-primary);
}


/* ---------------------------------------------------------------
   Responsividade básica do header
---------------------------------------------------------------- */

@media (max-width: 720px) {
  .cc-header-inner {
    flex-direction: row;          /* mantém em linha */
    justify-content: space-between; /* logo à esquerda, engrenagem à direita */
    align-items: center;
  }

  /* garante que a marca não empurre a engrenagem */
  .cc-header-brand {
    flex: 0 1 auto;
  }

  /* força a engrenagem a ficar colada à direita */
  .cc-header-actions {
    margin-left: auto;
  }
}

 
/* ==================================================================
   8. MODAIS (Sistema Autoral Click Conserto)
================================================================== */

/* ---------------------------------------------------------------
   Estrutura principal
---------------------------------------------------------------- */
.cc-modal {
    position: fixed;
    inset: 0;

    display: none; /* controlado via JS */
    align-items: center;
    justify-content: center;

    padding: var(--cc-space-3);
    z-index: 1000;
}

.cc-modal.is-active {
    display: flex;
}

/* ---------------------------------------------------------------
   Overlay do modal (exclusivo)
---------------------------------------------------------------- */
.cc-modal-overlay {
    position: absolute;
    inset: 0;

    background-color: rgba(13, 17, 23, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ---------------------------------------------------------------
   Caixa do modal
---------------------------------------------------------------- */
.cc-modal-box {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 100%;

    background-color: var(--cc-bg-surface);
    border-radius: 24px;

    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);

    overflow: hidden;
}

/* ---------------------------------------------------------------
   Cabeçalho
---------------------------------------------------------------- */
.cc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: var(--cc-space-3) var(--cc-space-4);

    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--cc-info) 8%, transparent),
        transparent
    );
}

.cc-modal-icon-title {
    display: flex;
    align-items: center;
    gap: var(--cc-space-2);
}

.cc-modal-close-btn {
    background: transparent;
    border: none;
    cursor: pointer;

    color: var(--cc-text-muted);
    transition: color var(--cc-duration-fast) var(--cc-ease-fast);
}

.cc-modal-close-btn:hover {
    color: var(--cc-danger);
}

/* ---------------------------------------------------------------
   Corpo
---------------------------------------------------------------- */
.cc-modal-body {
    padding: var(--cc-space-4);
    color: var(--cc-text-primary);
    max-height: 70vh; 
    overflow-y: auto;
}

/*alterna entre as cores dos paragrafos para facilitar a leitura*/
.cc-modal-body p:nth-of-type(odd) {
  color: var(--cc-text-primary); /* 1º, 3º, 5º... */
}

.cc-modal-body p:nth-of-type(even) {
  color: var(--cc-text-muted);   /* 2º, 4º, 6º... */
}

/* Texto padrão de leitura
   Uso: explicações, conteúdo contínuo */
.cc-modal-body ul li {
    list-style-type: disc; /* bolinha padrão */
}
/* Texto padrão de leitura
   Uso: explicações, conteúdo contínuo */
.cc-modal-body ul {
    margin: var(--cc-space-4); /* bolinha padrão */
}
.cc-modal-body ol {
    margin: var(--cc-space-4); /* bolinha padrão */
}
/* Texto padrão de leitura
   Uso: explicações, conteúdo contínuo */
.cc-modal-body ol li {
    list-style-type: decimal; /* números */
}

.cc-modal-body li { 
	margin-bottom: var(--cc-space-2);
    color: var(--cc-text-muted);
	}
	
/* Estilo para <b> dentro de <li> */
.cc-modal-body li b {
    font-weight: 900;          /* mais pesado que o normal */
}

/* Alerta informativo */
.cc-alert-info {
    display: flex;
    align-items: center;
    gap: var(--cc-space-2);

    padding: var(--cc-space-2);
    margin-bottom: var(--cc-space-3);

    background-color: var(--cc-info-bg);
    border-left: 4px solid var(--cc-info);
    border-radius: var(--cc-radius-sm);
}

/* ---------------------------------------------------------------
   Lista interna
---------------------------------------------------------------- */
.cc-modal-list {
    list-style: none;
    padding: 0;
    margin-top: var(--cc-space-3);
}

.cc-modal-list li {
    display: flex;
    align-items: center;
    gap: var(--cc-space-1-5);

    margin-bottom: var(--cc-space-1-5);
    font-size: var(--cc-font-md);
}

.cc-modal-list li i {
    color: var(--cc-success);
}

/* ---------------------------------------------------------------
   Rodapé
---------------------------------------------------------------- */
.cc-modal-footer {
    display: flex;
    justify-content: flex-end;

    padding: var(--cc-space-2-5) var(--cc-space-4);

    background-color: color-mix(
        in srgb,
        var(--cc-bg-surface) 80%,
        transparent
    );

    border-top: 1px solid rgba(255,255,255,0.05);
}


/* ---------------------------------------------------------------
   8.3. FÁBRICA DE ANIMAÇÕES (Opção 1 de 20)
---------------------------------------------------------------- */

/* Animação 1: Zoom-In Suave */
@keyframes cc-modal-zoom-in {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.cc-modal.is-active .cc-anim-zoom-in {
    animation: cc-modal-zoom-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Animação 2: Slide Lateral Direito (Foco em leitura) */
@keyframes cc-modal-slide-right {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}
.cc-anim-slide-right { animation: cc-modal-slide-right 0.7s var(--cc-ease-soft) forwards; }

/* Animação 3: Revelação de Cima (Dropdown Style) */
@keyframes cc-modal-reveal-top {
    from { opacity: 0; transform: translateY(-100px); }
    to { opacity: 1; transform: translateY(0); }
}
.cc-anim-reveal-top { animation: cc-modal-reveal-top 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Animação 4: Blur & Scale (Efeito Onírico/Histórico) */
@keyframes cc-modal-blur-in {
    from { opacity: 0; filter: blur(10px); transform: scale(1.1); }
    to { opacity: 1; filter: blur(0); transform: scale(1); }
}
.cc-anim-blur-in { animation: cc-modal-blur-in 0.7s ease-out forwards; }

/* Animação 5: Flip 3D Vertical (Destaque Moderno) */
@keyframes cc-modal-flip {
    from { opacity: 0; transform: perspective(1000px) rotateX(-15deg); }
    to { opacity: 1; transform: perspective(1000px) rotateX(0deg); }
}
.cc-anim-flip { animation: cc-modal-flip 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards; }

/* Animação 9 — Girando para a esquerda (arremesso) */
@keyframes cc-course-exit-spin-left {
    to {
        opacity: 0;
        transform: translateX(-120px) rotate(-20deg) scale(0.9);
    }
}

.cc-course-exit-spin-left {
    animation: cc-course-exit-spin-left 0.7s ease-in forwards;
}

/* Animação 10 — Girando para a direita */
@keyframes cc-course-exit-spin-right {
    to {
        opacity: 0;
        transform: translateX(120px) rotate(20deg) scale(0.9);
    }
}

.cc-course-exit-spin-right {
    animation: cc-course-exit-spin-right 0.7s ease-in forwards;
}

/* Animação 11 — Jogado para cima (dramático) */
@keyframes cc-course-exit-spin-up {
    to {
        opacity: 0;
        transform: translateY(-120px) rotate(15deg) scale(0.85);
    }
}

.cc-course-exit-spin-up {
    animation: cc-course-exit-spin-up 0.7s ease-in forwards;
}

/* Animação 12 — Diagonal caótica (mais dramático) */
@keyframes cc-course-exit-diagonal {
    to {
        opacity: 0;
        transform: translate(140px, -100px) rotate(25deg) scale(0.85);
    }
}

.cc-course-exit-diagonal {
    animation: cc-course-exit-diagonal 0.7s ease-in forwards;
}

/* ANIMAÇÃO 13 — Blur + Giro Arremessado */
@keyframes cc-course-exit-blur-spin {
    to {
        opacity: 0;
        filter: blur(14px);
        transform: translateX(-140px) rotate(-25deg) scale(0.85);
    }
}

.cc-course-exit-blur-spin {
    animation: cc-course-exit-blur-spin 0.7s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ANIMAÇÃO 14 — Explosão (Nada Suave) */
@keyframes cc-course-exit-explode {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
    60% {
        opacity: 1;
        transform: scale(1.05) rotate(2deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.75) rotate(-18deg) translateY(-120px);
        filter: blur(18px);
    }
}

.cc-course-exit-explode {
    animation: cc-course-exit-explode 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

/* Animação 15: Queda para trás (Recuo cognitivo) */
@keyframes cc-course-exit-fall-back {
    from {
        opacity: 1;
        transform: perspective(1200px) translateZ(0) scale(1);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: perspective(1200px) translateZ(-200px) scale(0.92);
        filter: blur(6px);
    }
}

.cc-course-exit-fall-back {
    animation: cc-course-exit-fall-back 0.7s var(--cc-ease-soft) forwards;
}

/* Animação 16: Motion Blur lateral (Velocidade percebida) */
@keyframes cc-course-exit-motion-blur {
    from {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: translateX(-60px);
        filter: blur(10px);
    }
}

.cc-course-exit-motion-blur {
    animation: cc-course-exit-motion-blur 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ---------------------------------------------------------------
   8.4. RESPONSIVIDADE (MOTO E7 PLUS)
---------------------------------------------------------------- */
@media (max-width: 768px) {
    .cc-modal { padding: var(--cc-space-2); }
    .cc-modal-box { max-height: 90vh; overflow-y: auto; }
    .cc-modal-body { padding: var(--cc-space-3); }
    .cc-title-md { font-size: var(--cc-font-title-md); }
}

/* Impede o scroll do fundo quando o modal está aberto */
body.cc-modal-open {
    overflow: hidden;
}
 
 /* ==================================================================
   9. ANIMAÇÕES E TRANSIÇÕES
================================================================== */
/* ---------------------------------------------------------------
   Fade + slide para cima (base)
---------------------------------------------------------------- */
@keyframes cc-fade-slide-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Elemento animado ao entrar */
.cc-animate-in {
    animation: cc-fade-slide-up var(--cc-duration-base) var(--cc-ease-soft) both;
}
/* Modal animado ao abrir */
.cc-modal-overlay.is-open .cc-modal {
    animation: cc-fade-slide-up var(--cc-duration-base) var(--cc-ease-soft) both;
}
/* ---------------------------------------------------------------
   Lista animada sequencial (automática)
   Uso: menus, listas dinâmicas, navegação
---------------------------------------------------------------- */
.cc-animate-list > * {
    opacity: 0;
    animation: cc-fade-slide-up var(--cc-duration-base) var(--cc-ease-soft) both;
}

 /* ==================================================================
   10. GRÁFICOS E VISUALIZAÇÃO DE DADOS
================================================================== */

/* ==================================================================
   11. LOADERS E BARRAS DE CARREGAMENTO
================================================================== */
 /* ============================================================
   CURSOS — BARRA DE PROGRESSO
   ------------------------------------------------------------
   Progresso real de leitura por cards
============================================================ */

/* Container geral da barra */
.cc-course-progress {
    margin-bottom: var(--cc-space-4);
}

/* Cabeçalho: texto + porcentagem */
.cc-course-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: var(--cc-font-sm);
    color: var(--cc-text-muted);

    margin-bottom: var(--cc-space-1);
}

/* Trilha da barra */
.cc-course-progress-track {
    width: 100%;
    height: 10px;

    background-color: var(--cc-bg-soft);
    border-radius: var(--cc-radius-lg);
    overflow: hidden;
}

/* Barra ativa */
.cc-course-progress-bar {
    height: 100%;
    width: 0%;

    background: linear-gradient(
        90deg,
        var(--cc-info),
        color-mix(in srgb, var(--cc-info) 60%, var(--cc-success))
    );

    border-radius: var(--cc-radius-lg);
    transition: width var(--cc-duration-slow) var(--cc-ease-soft);
}
 
 
 
 
/* ==================================================================
   12. CARROSSÉIS (Versão Final Otimizada)
   ------------------------------------------------------------------
   Contém: Base, Variantes (Hero/Vertical), Cards (Normal/Split) 
   e Animações de Pulso/Entrada.
================================================================== */

/* ---------------------------------------------------------------
   12.1. BASE E ESTRUTURA
---------------------------------------------------------------- */

.cc-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
}

.cc-carousel-track {
    display: flex;
    transition: transform var(--cc-duration-slow) var(--cc-ease-soft);
    will-change: transform;
}

.cc-carousel-slide {
    flex: 0 0 100%; /* Força o slide a ter exatamente a largura/altura do pai */
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cc-space-2);
    box-sizing: border-box;
}

/* ---------------------------------------------------------------
   12.2. VARIAÇÃO VERTICAL (ELEVADOR)
---------------------------------------------------------------- */

.cc-carousel--vertical {
    height: 600px; /* Altura fixa para o PC */
}

.cc-carousel--vertical .cc-carousel-track {
    flex-direction: column;
    height: 100%;
}

.cc-carousel--vertical .cc-carousel-slide {
    height: 100%;
    padding: 0 var(--cc-space-8); /* Espaço para as setas laterais */
}

/* ---------------------------------------------------------------
   12.3. CONTROLES E INDICADORES
---------------------------------------------------------------- */

.cc-carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: color-mix(
        in srgb,
        var(--cc-bg-surface) 85%,
        transparent
    );

    border: none;
    border-radius: 50%;
    cursor: pointer;

    z-index: 10;

    transition:
        background-color var(--cc-duration-fast) var(--cc-ease-soft),
        transform var(--cc-duration-fast) var(--cc-ease-soft);
}

.cc-carousel-control:hover {
    background-color: color-mix(
        in srgb,
        var(--cc-bg-surface) 95%,
        transparent
    );
    transform: translateY(-50%) scale(1.1);
}

.cc-carousel-control--prev { left: var(--cc-space-1-5); }
.cc-carousel-control--next { right: var(--cc-space-1-5); }

.cc-carousel-control .cc-icon {
    width: 1.2em;
    height: 1.2em;
    stroke: var(--cc-text-primary);
}

/* Indicadores */
.cc-carousel-indicators {
    display: flex;
    justify-content: center;
    gap: var(--cc-space-0-5);
    margin-top: var(--cc-space-2);
}

.cc-carousel-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: color-mix(
        in srgb,
        var(--cc-bg-surface-dark) 70%,
        var(--cc-border-soft)
    );
    cursor: pointer;
}

.cc-carousel-indicator.is-active {
    background-color: var(--cc-info);
}

/* ---------------------------------------------------------------
   12.4. ESTILOS DOS CARDS (NORMAL E SPLIT)
---------------------------------------------------------------- */

.cc-carousel-slide .cc-card {
    width: 100%;
    max-width: 600px;

    background-color: color-mix(
        in srgb,
        var(--cc-bg-surface) 50%,
        transparent
    );

    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--cc-radius-lg);

    padding: var(--cc-space-5);

    display: flex;
    flex-direction: column;
    gap: var(--cc-space-3);
}

/* Card Split */
.cc-card--split {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: var(--cc-space-5);
    text-align: left;
}

.cc-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--cc-space-2);
}

/* ---------------------------------------------------------------
   12.5. IMAGENS E ANIMAÇÕES DE PULSO
---------------------------------------------------------------- */

.cc-curso-svg-listagem,
.cc-curso-svg-destaque {
    display: block;
    margin: 0 auto;
    height: auto;

    transition: transform var(--cc-duration-base) var(--cc-ease-soft);
}

.cc-curso-svg-listagem {
    width: clamp(100px, 15vw, 200px);
}

.cc-curso-svg-destaque {
    width: 100%;
    max-width: 150px;
}

/* Pulso */
@keyframes cc-svg-pulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(
            0 0 0 
            color-mix(in srgb, var(--cc-info) 0%, transparent)
        );
    }

    50% {
        transform: scale(1.1);
        filter: drop-shadow(
            0 0 18px 
            color-mix(in srgb, var(--cc-info) 55%, transparent)
        );
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(
            0 0 0 
            color-mix(in srgb, var(--cc-info) 0%, transparent)
        );
    }
}


.cc-carousel-slide.is-active .cc-curso-svg-listagem,
.cc-carousel-slide.is-active .cc-curso-svg-destaque {
    animation: cc-svg-pulse 1.3s ease-in-out infinite;
}

/* Entrada dos slides */
@keyframes cc-slide-in-right {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes cc-slide-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cc-carousel--hero .cc-carousel-slide.is-active {
    animation: cc-slide-in-right 0.5s ease-out;
}

.cc-carousel--vertical .cc-carousel-slide.is-active {
    animation: cc-slide-in-up 0.5s ease-out;
}

/* ---------------------------------------------------------------
   12.6. RESPONSIVIDADE (MOBILE)
---------------------------------------------------------------- */

@media (max-width: 1024px) {

    .cc-carousel--vertical {
        height: 700px;
    }

    .cc-carousel-slide {
        padding: 0 var(--cc-space-7);
    }

    .cc-card--split {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--cc-space-2);
    }

    .cc-carousel-slide .cc-card {
        padding: var(--cc-space-3) var(--cc-space-2);
        max-width: 420px;
    }

    .cc-curso-svg-listagem,
    .cc-curso-svg-destaque {
        max-width: 100px;
    }

    .cc-title-sm {
        font-size: var(--cc-font-title-sm);
    }

    .cc-icon-label {
        font-size: var(--cc-font-sm);
        justify-content: center;
    }

    .cc-carousel-control {
        width: 36px;
        height: 36px;
    }

    .cc-carousel-control--prev { left: 5px; }
    .cc-carousel-control--next { right: 5px; }
}

/* ==================================================================
   13. AUTH (LOGIN & REGISTRO)
================================================================== */

.cc-auth-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cc-gradient-main);
    background-size: 300% 300%;
    animation: cc-gradient-move 10s ease-in-out infinite;
}

@keyframes cc-gradient-move {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.cc-auth-wrapper {
    width: 100%;
    max-width: 420px;
    padding: var(--cc-space-3);
}

.cc-auth-card {
    border: 1px solid var(--cc-border-soft);
    box-shadow: 0 15px 35px var(--cc-shadow-strong);
}

.cc-auth-header {
    text-align: center;
    margin-bottom: var(--cc-space-4);
}

/* Ícone principal */
.cc-auth-icon-box {
    width: 60px;
    height: 60px;
    background: var(--cc-info-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--cc-space-2);
}

.cc-auth-icon-box i {
    width: 30px;
    height: 30px;
    color: var(--cc-info);
}

/* ---------------------------------------------------------------
   Inputs
---------------------------------------------------------------- */
.cc-input-group {
    margin-bottom: var(--cc-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--cc-space-1);
}

.cc-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.cc-input-wrapper i {
    position: absolute;
    left: var(--cc-space-2);
    width: 18px;
    color: var(--cc-text-disabled);
}

.cc-input-wrapper input {
    width: 100%;
    padding:
        var(--cc-space-1-5)
        var(--cc-space-2)
        var(--cc-space-1-5)
        var(--cc-space-5-9);

    background-color: var(--cc-bg-root);
    border: 1px solid color-mix(in srgb, var(--cc-text-disabled) 35%, transparent);
    border-radius: var(--cc-radius-sm);
    color: var(--cc-text-primary);

    transition:
        border-color var(--cc-duration-fast) var(--cc-ease-fast),
        box-shadow var(--cc-duration-fast) var(--cc-ease-fast);
}

.cc-input-wrapper input:focus {
    border-color: var(--cc-info);
    outline: none;
    box-shadow: 0 0 0 3px var(--cc-info-bg);
}

/* Espaço extra para botões internos */
.cc-input-wrapper input {
    padding-right: var(--cc-space-6);
}

/* ---------------------------------------------------------------
   Alertas (Auth)
---------------------------------------------------------------- */
.cc-alert-danger {
    background: var(--cc-danger-bg);
    border: 1px solid color-mix(in srgb, var(--cc-danger) 40%, transparent);
    color: color-mix(in srgb, var(--cc-danger) 85%, white);
    padding: var(--cc-space-1-5);
    border-radius: var(--cc-radius-sm);
    display: flex;
    align-items: center;
    gap: var(--cc-space-1);
    margin-bottom: var(--cc-space-3);
    font-size: var(--cc-font-md-sm);
}

.cc-alert-success {
    background: var(--cc-success-bg);
    border: 1px solid color-mix(in srgb, var(--cc-success) 40%, transparent);
    color: var(--cc-success);
    padding: var(--cc-space-1-5);
    border-radius: var(--cc-radius-sm);
    display: flex;
    align-items: center;
    gap: var(--cc-space-1);
    margin-bottom: var(--cc-space-3);
    font-size: var(--cc-font-md-sm);
}

/* ---------------------------------------------------------------
   Rodapé
---------------------------------------------------------------- */
.cc-auth-footer {
    margin-top: var(--cc-space-4);
    text-align: center;
    border-top: 1px solid var(--cc-border-soft);
    padding-top: var(--cc-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--cc-space-1-5);
}

.cc-link-warning {
    color: var(--cc-warning);
    font-weight: 500;
}

.cc-link-info {
    color: var(--cc-info);
    font-weight: 500;
}

.cc-w-100 { width: 100%; }

/* ---------------------------------------------------------------
   Botões internos do input (olho / copiar)
---------------------------------------------------------------- */
.cc-input-eye,
.cc-input-copy {
    position: absolute;
    right: var(--cc-space-2);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    color: var(--cc-text-disabled);

    transition:
        transform var(--cc-duration-fast) var(--cc-ease-fast),
        color var(--cc-duration-fast) var(--cc-ease-fast);
}

/* Olho invisível por padrão */
.cc-input-eye { display: none; }

/* Olho ativo */
.cc-input-eye.is-active { display: flex; }

.cc-input-eye:hover,
.cc-input-copy:hover {
    color: var(--cc-info);
    transform: scale(1.15);
}

/* Animações */
.cc-input-eye.is-active {
    animation: cc-eye-pulse 0.35s ease;
}

@keyframes cc-eye-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.cc-input-copy.is-copied {
    color: var(--cc-success);
    animation: cc-copy-pop 0.3s ease;
}

@keyframes cc-copy-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ---------------------------------------------------------------
   Mobile
---------------------------------------------------------------- */
@media (max-width: 480px) {
    .cc-auth-wrapper { padding: var(--cc-space-2); }
    .cc-card { padding: var(--cc-space-3); }
}



/* ============================================================
   14. GRIDS E UTILITÁRIOS DE LAYOUT
   ============================================================ */

/* ============================================================
   GRID SYSTEM — CLICK CONSERTO (ÚNICO OFICIAL)
============================================================ */

/* Grid base */
.cc-grid {
    display: grid;
    gap: var(--cc-space-3);
    width: 100%;
}

/* Colunas */
.cc-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cc-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Breakpoint tablet */
@media (max-width: 1024px) {
    .cc-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Breakpoint mobile */
@media (max-width: 640px) {
    .cc-grid-2,
    .cc-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   FORMULÁRIO DE BUSCA
============================================================ */
.cc-search-form {
    display: flex;
    gap: var(--cc-space-1);
    max-width: 600px;
    margin: 0 auto;
}

.cc-search-form .cc-input-wrapper {
    flex: 1;
}

.cc-search-form input {
    width: 100%;
    padding:
        var(--cc-space-1-5)
        var(--cc-space-2)
        var(--cc-space-1-5)
        var(--cc-space-5-9);

    background-color: var(--cc-bg-surface);
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-radius-sm);
    color: var(--cc-text-primary);
}

/* ============================================================
   LINHAS DE INFORMAÇÃO (CARDS)
============================================================ */
.cc-info-row {
    display: flex;
    justify-content: space-between;
    padding: var(--cc-space-1) 0;
    border-bottom: 1px solid var(--cc-border-soft);
}

.cc-info-row:last-child {
    border-bottom: none;
}

.cc-info-row i {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
}

/* Ícones utilitários */
.cc-icon-gold {
    color: var(--cc-warning);
}

.cc-icon-success {
    color: var(--cc-success);
}

/* Separador horizontal */
.cc-separator {
    border: none;
    border-top: 1px solid var(--cc-border-soft);
}

/* ============================================================
   BREADCRUMB
============================================================ */
.cc-breadcrumb-container {
    margin-bottom: var(--cc-space-4);
}

.cc-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--cc-space-1-5);
    list-style: none;
    padding: 0;
    margin: 0;

    font-size: var(--cc-font-sm);
    color: var(--cc-text-secondary);
}

.cc-breadcrumb li {
    display: flex;
    align-items: center;
    gap: var(--cc-space-1-5);
}

/* Separador "/" automático */
.cc-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--cc-border-soft);
    font-weight: 300;
}

.cc-breadcrumb a {
    color: var(--cc-text-secondary);
    display: flex;
    align-items: center;
    transition: color var(--cc-duration-fast) var(--cc-ease-fast);
}

.cc-breadcrumb a:hover {
    color: var(--cc-info);
}

.cc-breadcrumb li.is-active {
    color: var(--cc-text-primary);
    font-weight: 500;
}

.cc-breadcrumb svg {
    width: 14px;
    height: 14px;
}

/* ============================================================
   15. DASHBOARD E LISTAGEM DE CURSOS
   ============================================================ */

/* Container principal */
.cc-main-content {
    padding: var(--cc-space-4);
    max-width: 100%;
    margin: 0 auto;
}

/* ============================================================
   ALERTA DE DESTAQUE (FEATURED)
============================================================ */
.cc-alert-featured {
    background: linear-gradient(
        135deg,
        var(--cc-bg-surface),
        var(--cc-bg-root)
    );

    border: 1px solid color-mix(
        in srgb,
        var(--cc-info) 30%,
        transparent
    );

    border-radius: var(--cc-radius-md);
    padding: var(--cc-space-3);

    display: flex;
    align-items: center;
    gap: var(--cc-space-3);

    box-shadow: 0 10px 30px var(--cc-shadow-soft);
    margin-bottom: var(--cc-space-2);
}

.cc-alert-featured-icon {
    width: 60px;
    height: 60px;

    background-color: var(--cc-info-bg);
    color: var(--cc-info);

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

/* ============================================================
   ALERTA DE GARANTIA / ATENÇÃO
============================================================ */
.cc-alert-warning-box {
    background-color: var(--cc-bg-root);
    border-left: 4px solid var(--cc-warning);

    padding: var(--cc-space-2);
    border-radius: 4px var(--cc-radius-sm) var(--cc-radius-sm) 4px;

    display: flex;
    align-items: center;
    gap: var(--cc-space-2);
}

/* ============================================================
   TOOLBAR E BUSCA
============================================================ */
.cc-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--cc-space-2);
    margin-bottom: var(--cc-space-4);
}

.cc-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;

    flex: 1;
    max-width: 400px;
}

.cc-search-wrapper i {
    position: absolute;
    left: var(--cc-space-2);

    width: 18px;
    height: 18px;

    color: var(--cc-text-disabled);
    pointer-events: none;
    z-index: 2;
}

.cc-search-wrapper input {
    width: 100%;

    padding:
        0.7rem
        var(--cc-space-2)
        0.7rem
        var(--cc-space-5-9);

    background-color: var(--cc-bg-surface);
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-radius-lg);

    color: var(--cc-text-primary);
    font-size: var(--cc-font-md-sm);
}

/* ============================================================
   CARD DE CURSO
============================================================ */
.cc-curso-card {
    display: flex;
    flex-direction: column;

    padding: var(--cc-space-3);
    background-color: var(--cc-bg-surface);

    border-radius: var(--cc-radius-md);
    border: 1px solid transparent;

    transition:
        transform var(--cc-duration-slow) var(--cc-ease-soft),
        border-color var(--cc-duration-slow) var(--cc-ease-soft);
}

.cc-curso-card:hover {
    transform: translateY(-5px);
    border-color: var(--cc-info);
}
.cc-curso-card.is-disabled {
    opacity: 0.7;
    filter: grayscale(0.6);
}

/* Questão respondida */
.cc-curso-card.is-valid {
    border-left: 4px solid var(--cc-success);

    background: linear-gradient(
        90deg,
        color-mix(
            in srgb,
            var(--cc-success) 12%,
            var(--cc-bg-surface)
        ),
        transparent 40%
    );
}

.cc-curso-header {
    display: flex;
    gap: var(--cc-space-2);
    margin-bottom: var(--cc-space-2);
}

.cc-curso-thumb {
    width: 70px;
    height: 70px;

    border-radius: var(--cc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.cc-curso-thumb img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

/* ============================================================
   BADGES E BOTÕES
============================================================ */
.cc-badge {
    font-size: var(--cc-font-xs);
    padding: 0.2rem 0.6rem;

    border-radius: 10px;
    text-transform: uppercase;
    font-weight: bold;

    display: inline-block;
}

.cc-badge-success {
    background-color: var(--cc-success-bg);
    color: var(--cc-success);
}

.cc-badge-danger {
    background-color: var(--cc-danger-bg);
    color: var(--cc-danger);
}

.cc-curso-footer {
    margin-top: auto;
    padding-top: var(--cc-space-3);
}

.cc-btn-sm {
    padding: var(--cc-space-1) var(--cc-space-2);
    font-size: var(--cc-font-sm);
}

.cc-w-100 {
    width: 100%;
}

/* =====================================================
   16 CURSOS — ESTRUTURA DE LEITURA PROGRESSIVA
   ===================================================== */

/* -----------------------------------------------------
   Wrapper geral do curso
----------------------------------------------------- */
.cc-course-wrapper {
    position: relative;
    width: 100%;
    max-width: 960px; /* mantém leitura confortável */
    margin-inline: auto;

    display: flex;
    flex-direction: column;
    gap: var(--cc-space-4);
}

/* -----------------------------------------------------
   Card individual do curso (step)
----------------------------------------------------- */
.cc-course-step {
    display: none; /* apenas um card visível por vez */
    opacity: 0;
    transform: translateY(12px);

    background: var(--cc-bg-surface);
    border-radius: var(--cc-radius-lg);
    box-shadow: 0 10px 30px var(--cc-shadow-soft);
    border: 1px solid var(--cc-border-soft);

    padding: var(--cc-space-4);
    transition:
        opacity var(--cc-duration-base) var(--cc-ease-soft),
        transform var(--cc-duration-base) var(--cc-ease-soft);
}

/* Card ativo (visível) */
.cc-course-step.is-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Animações de saída */
.cc-course-exit-left {
    animation: cc-modal-slide-right 0.55s var(--cc-ease-soft) reverse forwards;
}

.cc-course-exit-top {
    animation: cc-modal-reveal-top 0.55s var(--cc-ease-soft) reverse forwards;
}

/* Animações de entrada (já existem, só reutilizar)
   cc-anim-slide-right
   cc-anim-zoom-in
   cc-anim-blur-in
   cc-anim-flip
*/
/* -----------------------------------------------------
   Conteúdo textual do curso
----------------------------------------------------- */
.cc-course-step .cc-text-body p {
    color: var(--cc-text-secondary);
    line-height: 1.65;
    font-size: var(--cc-font-base);
    margin-bottom: var(--cc-space-2);
}

/* Último parágrafo sem sobra */
.cc-course-step .cc-text-body p:last-child {
    margin-bottom: 0;
}

/* Alternância de cores em parágrafos dentro de .cc-text-body */
.cc-course-step .cc-text-body p:nth-of-type(odd) {
    color: var(--cc-text-secondary); /* mantém a cor padrão para ímpares */
}

.cc-course-step .cc-text-body p:nth-of-type(even) {
    color: var(--cc-text-muted); /* aplica cor alternada para pares */
}

/* Títulos dos cards */
.cc-course-step h3,
.cc-course-step h4 {
    color: var(--cc-text-primary);
}
/* -----------------------------------------------------
   Footer do card — navegação do curso
----------------------------------------------------- */
.cc-course-footer {
    margin-top: var(--cc-space-4);
    padding-top: var(--cc-space-3);

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--cc-space-2);

    border-top: 1px solid var(--cc-border-soft);
}

/* Quando só existir botão de avanço */
.cc-course-footer:has(.cc-course-next):not(:has(.cc-course-prev)) {
    justify-content: flex-end;
}
/* -----------------------------------------------------
   Botões de controle do curso
----------------------------------------------------- */
.cc-course-next,
.cc-course-prev,
.cc-course-finish {
    min-width: 140px;
}

/* Ênfase visual no avanço */
.cc-course-next,
.cc-course-finish {
    background: color-mix(
        in srgb,
        var(--cc-brand-accent) 70%,
        var(--cc-bg-surface)
    );
}

/* Voltar é propositalmente mais neutro */
.cc-course-prev {
    background: transparent;
    border: 1px solid var(--cc-border-soft);
    color: var(--cc-text-secondary);
}

.cc-course-prev:hover {
    border-color: var(--cc-border-hover);
}
/* -----------------------------------------------------
   Hooks para animações de transição (JS controla)
----------------------------------------------------- */
.cc-course-step.is-entering {
    opacity: 0;
    transform: translateY(16px);
}

.cc-course-step.is-leaving {
    opacity: 0;
    transform: translateY(-16px);
}

/* -----------------------------------------------------
   classe para chamar a atenção para os modais 
----------------------------------------------------- */
.cc-alert-info-couser {
    display: flex;
    align-items: center;
    gap: var(--cc-space-2);
	cursor: pointer;
    padding: var(--cc-space-2-5);
    margin-bottom: var(--cc-space-3);
    background-color: color-mix(
        in srgb,
        var(--cc-brand-primary) 15%,
        var(--cc-bg-surface)
    );
    border-left: 6px solid var(--cc-brand-primary);
    border-radius: var(--cc-radius-lg);
    color: var(--cc-text-primary);
    font-size: var(--cc-font-md-sm);
}