/* ============================================================================
   MIGGLO — DESIGN SYSTEM / FOLHA DE ESTILO ÚNICA
   ============================================================================

   O QUE É ESTE ARQUIVO
   Este é o CSS completo e oficial do site migglo.com.br. Ele define cores,
   tipografia, header, footer, botões, cards de categoria e o layout das
   páginas de review/comparação de cursos. Use-o como fonte única de verdade
   visual — não recrie cores ou estilos "parecidos", reutilize exatamente
   estas classes.

   COMO USAR (instrução para humano OU para uma LLM gerando uma nova página)
   1. Cole este CSS inteiro dentro de uma tag <style> no <head> do HTML.
   2. Use Google Fonts: Inter (400/500/600/700) e Newsreader (500/600).
      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap" rel="stylesheet">
   3. Toda página tem 3 partes fixas: HEADER (.site-head) → CONTEÚDO → FOOTER (.site-foot).
      Copie o HTML de header/footer de uma página existente do site (ex.
      review-power-bi-expert.html) — não reescreva o nav do zero.
   4. Para uma NOVA PÁGINA DE REVIEW DE CURSO, siga a estrutura de classes
      da seção 8 (".review-head", ".verdict", ".pc", ".faq", ".cta-band").
      Isso garante que toda review do site tenha a mesma cara.
   5. Não invente cores novas. Use sempre as variáveis no topo (--brand,
      --ink, --surface etc.) para qualquer elemento novo.
   6. Mobile: o site já é responsivo (menu hambúrguer abaixo de 860px).
      Não é necessário recriar breakpoints — apenas use as classes existentes.

   ÍNDICE DESTE ARQUIVO
   1. Variáveis globais (cores, espaçamento, fontes)
   2. Reset básico e tipografia
   3. Selo / assinatura visual da marca
   4. Header / navegação (com dropdown "Cursos")
   5. Botões
   6. Hero (seção de abertura da home)
   7. Seções genéricas, grids e cards de critério/categoria
   8. Página de REVIEW de curso (veredito, prós/contras, FAQ, CTA final)
   9. Páginas institucionais (Sobre, Contato, Termos, Privacidade — "prose")
   10. Footer
   11. Responsivo (mobile)

   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. VARIÁVEIS GLOBAIS
   Toda cor do site vem daqui. Se quiser ajustar a paleta, mude só aqui.
---------------------------------------------------------------------------- */
:root{
  --ink:#1b2430;        /* texto principal (quase preto, levemente azulado) */
  --ink-soft:#56616f;    /* texto secundário / parágrafos de apoio */
  --bg:#ffffff;          /* fundo padrão da página */
  --surface:#f5f7f6;     /* fundo de seções alternadas (cinza-esverdeado clarinho) */
  --surface2:#edf2f0;    /* fundo de tags "em breve" etc. */
  --brand:#0e6e5c;       /* VERDE principal da marca — botões, links, selo */
  --brand-d:#0a5447;     /* verde escuro — hover de botões/links */
  --brand-l:#e6f2ef;     /* verde clarinho — fundos de destaque (hero, callouts) */
  --accent:#cf8a23;      /* dourado/mostarda — usado com moderação (estrelas, contras) */
  --line:#e4e8e7;        /* bordas sutis em cards e divisores */
  --dark:#11201c;        /* fundo do footer (verde-marinho bem escuro) */
  --r:14px;              /* raio de borda padrão de cards/botões grandes */
  --max:1120px;          /* largura máxima do conteúdo (.wrap) */
}

/* ----------------------------------------------------------------------------
   2. RESET BÁSICO E TIPOGRAFIA
   Fonte de texto = Inter. Fonte de títulos = Newsreader (serifada, editorial).
---------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Newsreader",Georgia,serif; /* todo título usa a serifada editorial */
  font-weight:600;
  line-height:1.15;
  color:var(--ink);
  margin:0 0 .5em;
}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-d)}
img{max-width:100%}

/* container central de toda seção — sempre envolva o conteúdo de uma <section> nisto */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* rótulo pequeno em maiúsculas usado acima de títulos (ex: "ANÁLISE DE CURSO") */
.eyebrow{
  font-family:Inter;font-size:.78rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand);
}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}


/* ----------------------------------------------------------------------------
   3. SELO / ASSINATURA VISUAL DA MARCA
   É o círculo verde com o "check" — aparece ao lado do nome "Migglo" no
   header, no footer, e como ícone decorativo nos cards de critério.
---------------------------------------------------------------------------- */
.seal{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.45em;height:1.45em;border-radius:50%;
  background:var(--brand);color:#fff;font-size:.7em;flex:none;
}
.seal svg{width:.9em;height:.9em}


/* ----------------------------------------------------------------------------
   4. HEADER / NAVEGAÇÃO
   Fica fixo no topo (sticky) com leve transparência + blur.
   Inclui o dropdown "Cursos" com categorias "no ar" e "em breve".
---------------------------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:18px}
.brand{
  display:flex;align-items:center;gap:.5rem;
  font-family:"Newsreader",serif;font-size:1.4rem;font-weight:600;color:var(--ink);
}
.brand .seal{width:1.5rem;height:1.5rem;font-size:1rem}

.nav-menu{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nav-menu a, .nav-menu .nav-drop>button{
  display:inline-block;padding:10px 14px;border-radius:9px;color:var(--ink-soft);
  font-size:.97rem;font-weight:500;background:none;border:0;font-family:inherit;cursor:pointer;
}
.nav-menu a:hover,.nav-menu .nav-drop>button:hover{color:var(--ink);background:var(--surface)}
.nav-menu a[aria-current]{color:var(--brand);font-weight:600} /* marca o link da página atual */

/* dropdown "Cursos" no menu */
.nav-drop{position:relative}
.nav-drop>button::after{content:"▾";margin-left:.35em;font-size:.8em;color:var(--ink-soft)}
.dropdown{
  position:absolute;top:calc(100% + 6px);left:0;min-width:248px;background:#fff;
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px -18px rgba(20,40,35,.35);padding:8px;display:none;
}
.nav-drop.open .dropdown{display:block} /* JS adiciona/remove .open ao clicar */
.dropdown a,.dropdown span{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:8px;font-size:.95rem;color:var(--ink);
}
.dropdown a:hover{background:var(--brand-l)}
.dropdown .soon{color:var(--ink-soft);cursor:default} /* categoria ainda não publicada */

/* etiquetas "No ar" / "Em breve" usadas no dropdown e nos cards de categoria */
.tag{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.tag-soon{background:var(--surface2);color:var(--ink-soft)}
.tag-live{background:var(--brand-l);color:var(--brand-d)}

.dd-div{height:1px;background:var(--line);margin:6px 4px} /* divisor dentro do dropdown */
.dropdown .all{color:var(--brand);font-weight:600} /* link "Ver todas as categorias" */

/* botão hambúrguer (só aparece no mobile, ver seção 11) */
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:9px;padding:8px 10px;cursor:pointer}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}


/* ----------------------------------------------------------------------------
   5. BOTÕES
   .btn-primary = ação principal (verde, ex: "Ver curso na página oficial")
   .btn-ghost   = ação secundária (contorno, ex: "Ver categorias")
   .btn-light   = botão branco usado DENTRO de fundos verdes (.cta-band)
---------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;padding:13px 22px;border-radius:11px;
  font-weight:600;font-size:1rem;border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-d);color:#fff;transform:translateY(-1px)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-light{background:#fff;color:var(--brand-d)}
.btn-light:hover{background:#eef0ef;color:var(--brand-d)}


/* ----------------------------------------------------------------------------
   6. HERO (seção de abertura — usado na home)
---------------------------------------------------------------------------- */
.hero{
  padding:78px 0 64px;
  background:radial-gradient(1100px 480px at 78% -8%, var(--brand-l), transparent 60%);
}
.hero h1{font-size:clamp(2.2rem,5vw,3.5rem);max-width:16ch;margin-top:.35em}
.hero .lead{font-size:1.18rem;color:var(--ink-soft);max-width:56ch;margin:1.1em 0 1.7em}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}


/* ----------------------------------------------------------------------------
   7. SEÇÕES GENÉRICAS, GRIDS E CARDS
   .section / .section.alt  = blocos de página (alt = fundo cinza claro)
   .crit  = grid de 4 cards "como avaliamos" (usado na home/sobre)
   .cats  = grid de cards de categoria de curso
   .strip = faixa de aviso de transparência/afiliado
---------------------------------------------------------------------------- */
.section{padding:64px 0}
.section.alt{background:var(--surface)}
.section h2{font-size:clamp(1.7rem,3.5vw,2.3rem)}
.section-head{max-width:60ch;margin-bottom:36px}
.section-head p{color:var(--ink-soft);margin:.4em 0 0}

.grid{display:grid;gap:20px}

/* cards de critério de avaliação (ex: "Conteúdo", "Custo-benefício"...) */
.crit{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.crit .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.section.alt .crit .card{background:#fff} /* mantém o card branco mesmo em seção cinza */
.crit .card .seal{margin-bottom:14px}
.crit h3{font-size:1.2rem}
.crit p{color:var(--ink-soft);font-size:.97rem;margin:.4em 0 0}

/* cards de categoria de curso (grid na home e em cursos.html) */
.cats{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cat{
  display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:24px;position:relative;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
a.cat:hover{transform:translateY(-3px);box-shadow:0 20px 38px -22px rgba(20,40,35,.4);border-color:var(--brand)}
.cat.soon{opacity:.78} /* categoria "em breve" fica meio apagada */
.cat-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cat h3{font-size:1.28rem;margin:0}
.cat p{color:var(--ink-soft);font-size:.96rem;margin:0}
.cat .more{margin-top:6px;font-weight:600;color:var(--brand);font-size:.92rem}

/* faixa de transparência sobre links de afiliado (home e variações) */
.strip{
  background:var(--brand-l);border:1px solid #cfe6df;border-radius:var(--r);padding:22px 26px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between;
}
.strip p{margin:0;color:var(--brand-d)}


/* ----------------------------------------------------------------------------
   8. PÁGINA DE REVIEW DE CURSO
   Esta é a seção MAIS IMPORTANTE para gerar páginas novas. Toda review de
   curso no site (Power BI, Excel, futuros cursos de outras categorias)
   usa exatamente esta estrutura de classes, na ordem abaixo:

     <div class="wrap"><nav class="breadcrumb">...</nav></div>

     <section class="review-head"><div class="wrap">
        <span class="eyebrow">Análise de curso</span>
        <h1>Nome do Curso: vale a pena?</h1>
        <div class="verdict"> ... nota + resumo + botão CTA ... </div>
        <div class="feature-tags"><span>Tag 1</span><span>Tag 2</span></div>
     </div></section>

     <section class="wrap"><div class="prose">
        (introdução, "o que é", critérios em h2/h3, depois:)
        <div class="pc">
          <div class="pc-col pc-pro">  ...pontos fortes (lista)... </div>
          <div class="pc-col pc-con">  ...pontos de atenção (lista)... </div>
        </div>
        (seção "para quem é", depois:)
        <div class="faq"> <h3>Pergunta?</h3><p>Resposta.</p> ... </div>
     </div></section>

     <section class="wrap"><div class="cta-band">
        <h2>Chamada final</h2><p>...</p>
        <a class="btn btn-light" href="LINK_AFILIADO">Texto do botão →</a>
     </div></section>
---------------------------------------------------------------------------- */

/* trilha "Início › Categoria › Curso" no topo da página */
.breadcrumb{font-size:.85rem;color:var(--ink-soft);padding:22px 0 0}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb a:hover{color:var(--brand)}

.review-head{padding:10px 0 0}
.review-head h1{font-size:clamp(1.9rem,4vw,2.7rem);max-width:22ch;margin-top:.2em}

/* bloco de veredito: nota grande + resumo + CTA, logo abaixo do H1 */
.verdict{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  margin:22px 0 10px;box-shadow:0 22px 48px -30px rgba(20,40,35,.5);
}
.score{text-align:center;background:var(--brand-l);border-radius:12px;padding:16px 20px;min-width:130px}
.score .n{font-family:"Newsreader",serif;font-size:2.5rem;font-weight:600;color:var(--brand-d);line-height:1} /* nota ex: 4,7 */
.score .s{color:var(--accent);letter-spacing:2px;font-size:1.05rem;margin:4px 0} /* estrelas ★★★★★ */
.score .c{font-size:.76rem;color:var(--ink-soft)} /* "92 avaliações de alunos" */
.verdict .v-take{margin:0 0 14px;font-size:1.05rem} /* parágrafo-resumo do veredito */
.review-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* aviso pequeno de link de afiliado, junto dos botões CTA */
.disc-mini{font-size:.8rem;color:var(--ink-soft);margin:10px 0 0}
.disc-mini a{color:var(--ink-soft);text-decoration:underline}

/* etiquetas de destaque do curso (ex: "Acesso vitalício", "Certificado") */
.feature-tags{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.feature-tags span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.85rem;color:var(--ink-soft)}

/* bloco de prós (verde, .pc-pro) e contras (dourado, .pc-con) lado a lado */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0}
.pc-col{border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;background:#fff}
.pc-col h3{font-size:1.15rem;margin:0 0 .4em}
.pc-col ul{list-style:none;padding:0;margin:0}
.pc-col li{padding:7px 0 7px 24px;position:relative;color:#2c3744;font-size:.96rem}
.pc-pro li::before{content:"+";position:absolute;left:0;top:5px;color:var(--brand);font-weight:800}
.pc-con li::before{content:"\2013";position:absolute;left:0;top:5px;color:var(--accent);font-weight:800}

/* perguntas frequentes — cada pergunta é um h3, resposta é o p seguinte */
.faq h3{font-size:1.12rem;margin:1.3em 0 .15em}
.faq p{margin:.15em 0 0;color:#2c3744}

/* faixa verde de chamada final, com botão branco (.btn-light) dentro */
.cta-band{background:var(--brand);color:#fff;border-radius:var(--r);padding:32px;text-align:center;margin:34px 0}
.cta-band h2{color:#fff;margin:0 0 .3em}
.cta-band p{color:#dff0ea;margin:0 0 18px}


/* ----------------------------------------------------------------------------
   9. PÁGINAS INSTITUCIONAIS ("prose")
   Usado em Sobre, Contato, Termos de Uso, Política de Privacidade,
   Divulgação de Afiliado. Qualquer página de texto corrido/legal usa isto.
---------------------------------------------------------------------------- */
.page-hero{padding:54px 0 8px} /* cabeçalho simples com eyebrow + h1, sem imagem */
.page-hero .eyebrow{margin-bottom:.5em;display:block}
.page-hero h1{font-size:clamp(2rem,4vw,2.8rem)}

.prose{max-width:740px;padding:24px 0 72px} /* coluna de leitura confortável */
.prose .meta{color:var(--ink-soft);font-size:.9rem;margin-bottom:28px} /* "Última atualização: ..." */
.prose h2{font-size:1.5rem;margin-top:1.8em}
.prose h3{font-size:1.18rem;margin-top:1.4em}
.prose p,.prose li{color:#2c3744}
.prose ul{padding-left:1.1em}
.prose li{margin:.35em 0}
.prose a{text-decoration:underline}
.prose .lead{font-size:1.12rem;color:var(--ink-soft)} /* parágrafo de abertura, maior */

/* caixa de destaque dentro de texto corrido (ex: "Análises em publicação") */
.callout{background:var(--surface);border-left:4px solid var(--brand);border-radius:8px;padding:16px 20px;margin:24px 0}
.callout p{margin:0}

.mail-btn{margin:8px 0 4px} /* espaçamento do botão de e-mail na pág. de contato */


/* ----------------------------------------------------------------------------
   10. FOOTER
   Rodapé escuro com 3 colunas: marca/descrição, institucional, legal.
---------------------------------------------------------------------------- */
.site-foot{background:var(--dark);color:#cdd8d3;padding:56px 0 28px;margin-top:24px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.site-foot .brand{color:#fff;margin-bottom:12px}
.site-foot h4{color:#fff;font-family:Inter;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:9px 0}
.site-foot a{color:#cdd8d3}
.site-foot a:hover{color:#fff}
.foot-about{color:#9fb0aa;max-width:38ch;font-size:.95rem}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:22px;display:flex;
  gap:16px;justify-content:space-between;flex-wrap:wrap;color:#8fa19b;font-size:.85rem;
}
.foot-bottom p{margin:0;max-width:70ch} /* aviso de afiliado no rodapé, todas as páginas */


/* ----------------------------------------------------------------------------
   11. RESPONSIVO (mobile, abaixo de 860px)
   Header vira menu hambúrguer; grids de 2 colunas (ex: .pc, .verdict) caem
   para 1 coluna; rodapé empilha verticalmente.
   NOTA PARA LLMs: isto exige um pequeno JS para abrir/fechar o menu e o
   dropdown — copie o <script> da página original junto com o HTML, não
   apenas o CSS.
---------------------------------------------------------------------------- */
@media (max-width:860px){
  .menu-btn{display:block}
  .nav-menu{
    position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border-bottom:1px solid var(--line);padding:12px 16px 18px;display:none;
    box-shadow:0 18px 30px -20px rgba(0,0,0,.3);
  }
  .nav-menu.open{display:flex}
  .nav-menu a,.nav-menu .nav-drop>button{padding:12px 8px;width:100%;text-align:left}
  .nav-drop{position:static}
  .dropdown{position:static;border:0;box-shadow:none;padding:0 0 0 10px;min-width:0}
  .foot-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:680px){
  .verdict{grid-template-columns:1fr;text-align:center} /* nota fica acima do texto */
  .pc{grid-template-columns:1fr} /* prós e contras empilham */
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ============================================================================
   FIM DO ARQUIVO — migglo-design-system.css
   Dúvidas de uso: veja os comentários de cada seção acima, ou abra uma
   página existente do site (ex. review-power-bi-expert.html) para ver
   o HTML completo que usa estas classes na prática.
   ============================================================================ */
