/* Tema por ferramenta. So tokens (cores, fontes, raio) + detalhes de identidade.
   Escopo: [data-curso="claude|chatgpt|gemini"] (no <body> das paginas de curso e em cada bloco da vitrine).
   Os componentes sao os mesmos de site.css; aqui so mudam os valores. Veja DESIGN-POR-CURSO.md. */

/* ---------- CLAUDE: marfim, terracota, serifa editorial ---------- */
[data-curso="claude"]{
  --papel:#FAF9F5; --card:#FFFFFF; --suave:#F0EEE6; --risco:#E3DDCF;
  --tinta:#29261B; --cinza:#645F52; --marinho:#141413; --marinho-2:#262624;
  --azul:#C15F3C; --azul-luz:#D97757; --gelo:#F0EEE6; --acc:#B4532F; --acc-luz:#E08A67;
  --on-brand:#fff; --on-deep-hi:#FAF9F5; --on-deep-2:#D8D2C3; --on-deep-3:#A8A292;
  --dbtn-bg:#D97757; --dbtn-fg:#141413;
  --grad:linear-gradient(90deg,#C15F3C,#D97757,#E9A27F);
  --glow:radial-gradient(circle,color-mix(in srgb,#D97757 28%,transparent),transparent 65%);
  --f-h:'Source Serif 4',Georgia,serif; --f-b:'DM Sans',system-ui,sans-serif; --f-k:'DM Sans',system-ui,sans-serif;
  --r:16px; --rb:10px; --rpill:10px;
  --sombra:0 1px 2px rgba(41,38,27,.06),0 8px 24px rgba(41,38,27,.07);
  --marca:#D97757; --marca-d:#D97757; --top-bg:#141413;
}
/* ---------- CHATGPT: branco e quase preto, neutros, pilula ---------- */
[data-curso="chatgpt"]{
  --papel:#FFFFFF; --card:#FFFFFF; --suave:#F7F7F8; --risco:#E5E5E5;
  --tinta:#0D0D0D; --cinza:#5D5D5D; --marinho:#171717; --marinho-2:#212121;
  --azul:#0D0D0D; --azul-luz:#10A37F; --gelo:#ECECEC; --acc:#0B8A6B; --acc-luz:#2BC49B;
  --on-brand:#fff; --on-deep-hi:#fff; --on-deep-2:#C9C9C9; --on-deep-3:#9B9B9B;
  --dbtn-bg:#FFFFFF; --dbtn-fg:#0D0D0D;
  --grad:linear-gradient(90deg,#0B8A6B,#10A37F);
  --glow:radial-gradient(circle,color-mix(in srgb,#10A37F 16%,transparent),transparent 65%);
  --f-h:'Inter',system-ui,sans-serif; --f-b:'Inter',system-ui,sans-serif; --f-k:'Inter',system-ui,sans-serif;
  --r:20px; --rb:16px; --rpill:999px;
  --sombra:0 1px 2px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.06);
  --marca:#0D0D0D; --marca-d:#FFFFFF; --top-bg:#0D0D0D;
}
/* ---------- GEMINI: superficies suaves, gradiente azul-roxo-rosa, Outfit ---------- */
[data-curso="gemini"]{
  --papel:#FFFFFF; --card:#FFFFFF; --suave:#F0F4F9; --risco:#DAE1EA;
  --tinta:#1F1F1F; --cinza:#575B61; --marinho:#131314; --marinho-2:#1E1F20;
  --azul:#0B57D0; --azul-luz:#A8C7FA; --gelo:#D3E3FD; --acc:#0B57D0; --acc-luz:#A8C7FA;
  --on-brand:#fff; --on-deep-hi:#fff; --on-deep-2:#C4C7C5; --on-deep-3:#9AA0A6;
  --dbtn-bg:#A8C7FA; --dbtn-fg:#062E6F;
  --grad:linear-gradient(90deg,#4285F4,#9B72CB,#D96570);
  --glow:radial-gradient(circle at 30% 40%,color-mix(in srgb,#4285F4 34%,transparent),transparent 55%),radial-gradient(circle at 70% 60%,color-mix(in srgb,#D96570 26%,transparent),transparent 55%);
  --f-h:'Outfit','Google Sans',system-ui,sans-serif; --f-b:'Outfit','Google Sans',system-ui,sans-serif; --f-k:'Outfit',system-ui,sans-serif;
  --r:24px; --rb:18px; --rpill:999px;
  --sombra:0 1px 2px rgba(31,31,31,.05),0 8px 28px rgba(66,133,244,.10);
  --marca:#4285F4; --marca-d:#A8C7FA; --top-bg:#131314;
}

/* ---------- detalhes de tipografia por tema ---------- */
[data-curso] .kicker{font-size:12px;letter-spacing:.14em;font-weight:600}
[data-curso="claude"] h1,[data-curso="claude"] h2,[data-curso="claude"] h3{font-weight:500;letter-spacing:-.015em}
[data-curso="claude"] h1 em,[data-curso="claude"] h2 em{font-style:italic}
[data-curso="claude"] .score,[data-curso="claude"] .stat b{font-family:var(--f-h);font-weight:500}
[data-curso="chatgpt"] h1,[data-curso="chatgpt"] h2,[data-curso="chatgpt"] h3{letter-spacing:-.025em}
[data-curso="chatgpt"] .kicker{letter-spacing:.08em}
[data-curso="gemini"] h1,[data-curso="gemini"] h2{letter-spacing:-.02em;font-weight:500}
[data-curso="gemini"] h1 em,[data-curso="gemini"] h2 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
[data-curso="gemini"] .score{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[data-curso="gemini"] .stat b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- componentes que respondem aos tokens ---------- */
.dark .btn-p,.faixa .btn-p,.bonus .btn-p{background:var(--dbtn-bg);color:var(--dbtn-fg);box-shadow:none}
.dark .btn-p:hover,.bonus .btn-p:hover{background:var(--dbtn-bg);filter:brightness(1.08)}
.copiar{background:var(--dbtn-bg);color:var(--dbtn-fg)}
.copiar:hover{background:var(--dbtn-bg);filter:brightness(1.08)}
.tabs button[aria-selected=true]{background:var(--dbtn-bg);border-color:var(--dbtn-bg);color:var(--dbtn-fg)}
.tabs button{border-radius:var(--rpill)}
.btn-p:hover{box-shadow:0 8px 20px color-mix(in srgb,var(--azul) 28%,transparent)}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--azul) 35%,transparent)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--azul) 0%,transparent)}}
.opt{border-radius:var(--rb)}
.nome-form input{border-radius:var(--rb)}
.icone{border-radius:calc(var(--r) - 6px);background:var(--marinho)}
.cartao,.bloco,.stat,.fig,.miniquiz,.qf-card,.lista-aulas a,.lista-vitrine li,.garantia,.bonus,.faixa,.prompt,.exercicio,.cert{border-radius:var(--r)}
.exercicio{border-radius:0 var(--r) var(--r) 0}
.garantia{border-left-color:var(--azul)}
.exercicio{border-left-color:var(--azul)}
.curso-top{background:var(--top-bg);border-bottom:0;position:sticky}
.curso-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--grad)}
[data-curso="chatgpt"] .curso-top::after{background:var(--risco);height:1px}
.side{background:var(--papel)}
.side a.on{background:var(--suave);box-shadow:inset 3px 0 0 var(--azul)}
.side a .n,.lista-aulas .n,.lista-vitrine .n{color:var(--acc)}
.side a.feita .ok{background:var(--acc);border-color:var(--acc)}
.lista-aulas a.feita .ok{background:var(--acc);border-color:var(--acc)}
.side a.on .n{color:var(--acc)}
.opt.certa{background:var(--azul);border-color:var(--azul);color:var(--on-brand)}
.opt.certa .l{background:var(--on-brand);color:var(--azul)}
[data-curso="chatgpt"] .opt.certa{background:#0B8A6B;border-color:#0B8A6B}
[data-curso="chatgpt"] .opt.certa .l{color:#0B8A6B}
.fb{background:var(--suave)}
.tag{background:var(--suave);color:var(--acc);border:1px solid var(--risco)}
.tag.escuro{background:var(--marinho);color:var(--gelo);border-color:transparent}
.faixa .tag.escuro,.bonus .tag.escuro{border:1px solid color-mix(in srgb,var(--gelo) 24%,transparent)}
.prevbar{background:var(--suave);border-bottom:1px solid var(--risco)}
.check input{accent-color:var(--azul)}
[data-curso="chatgpt"] .check input{accent-color:#0B8A6B}
.score{color:var(--acc)}
.stat b{color:var(--acc)}
.qf-bar i{background:var(--grad)}
.ring .fg{stroke:var(--acc-luz)}
.cert{border-color:color-mix(in srgb,var(--azul-luz) 50%,transparent)}
[data-curso="gemini"] .cert{border:6px solid transparent;background:linear-gradient(var(--marinho),var(--marinho)) padding-box,var(--grad) border-box}
[data-curso="chatgpt"] .cert{border:1px solid #3a3a3a}
.cert .t1,.cert .curso em{color:var(--acc-luz)}
[data-curso="gemini"] .cert .curso em{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.badge-breve{background:var(--gelo)}
summary::after{color:var(--acc)}

/* ---------- marca (logo) da ferramenta ---------- */
.marca{display:inline-grid;place-items:center;flex:none;color:var(--marca)}
.marca svg{width:100%;height:100%;display:block}
.marca-d{color:var(--marca-d)}
.curso-top .marca{width:28px;height:28px;color:var(--marca-d)}
.curso-top .sep-v{width:1px;height:22px;background:color-mix(in srgb,var(--gelo) 28%,transparent);flex:none}
.curso-top .nome{display:flex;align-items:center;gap:10px}
.side .quem{display:flex;gap:12px;align-items:center;padding:6px 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--risco)}
.side .quem .marca{width:34px;height:34px}
.side .quem b{display:block;font-family:var(--f-h);font-size:17px;color:var(--marinho);line-height:1.15}
.side .quem small{color:var(--cinza);font-size:13px}

/* heroi do curso: marca grande + identidade */
.intro-hero{position:relative;border-radius:calc(var(--r) + 6px);padding:30px 22px 34px}
.intro-hero .quem{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.intro-hero .quem .marca{width:52px;height:52px;color:var(--marca-d)}
.intro-hero .quem span{font-family:var(--f-h);font-size:20px;font-weight:600;color:var(--on-deep-hi);letter-spacing:-.01em}
.intro-hero .quem small{display:block;font-family:var(--f-b);font-size:13px;font-weight:400;color:var(--on-deep-3);letter-spacing:0}
.intro-hero .mark-fundo{position:absolute;right:-28px;bottom:-34px;width:min(240px,52%);aspect-ratio:1;color:var(--marca-d);opacity:.13;pointer-events:none}
.intro-hero .mark-fundo svg{width:100%;height:100%}
[data-curso="gemini"] .intro-hero .mark-fundo{opacity:.22}
.intro-hero .acoes,.intro-hero h1,.intro-hero .lead,.intro-hero .kicker{position:relative;z-index:1}
@media(min-width:720px){.intro-hero{padding:44px 40px 48px}.intro-hero .mark-fundo{right:24px;bottom:auto;top:50%;margin-top:-130px;width:260px}}
@media(prefers-reduced-motion:no-preference){
  [data-curso="claude"] .mark-fundo{animation:gira 90s linear infinite}
  [data-curso="chatgpt"] .mark-fundo{animation:gira 120s linear infinite}
  [data-curso="gemini"] .mark-fundo{animation:respira 6s ease-in-out infinite}
}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* aviso de marcas */
.aviso-marcas{border-top:1px solid var(--risco);padding:20px 16px;text-align:center;font-size:13px;line-height:1.5;color:var(--cinza);background:var(--papel)}
.aviso-marcas p{max-width:62ch;margin-inline:auto}
@media print{.aviso-marcas{display:none}}
.side a,.lista-aulas a,.lista-vitrine li,.stat span,.stat b{font-family:var(--f-b)}
.side a{align-items:flex-start;padding-block:10px}
.side a .n,.side a .ok{margin-top:2px}
.side a .ok{margin-top:1px}