/* =========================================================================
   Criador Digital — academia.css
   Tema da Academia (paleta nova) sobre a base. Usado na home, comunidade e
   serviços. Páginas de produto podem ter tema próprio.
   ========================================================================= */

:root{
  color-scheme: dark;

  /* A cor que pinta POR CIMA do fundo: preenchimento sutil, linha, ponto.
     No escuro é branco; no claro vira quase-preto. Trocar só esta variável
     reposiciona as 31 camadas translúcidas do site de uma vez. */
  --tinta: 255,255,255;

  /* Núcleo */
  --cd-bg:        #080B21;
  --cd-surface:   #0F132E;
  --cd-accent:    #FFAE00;
  --cd-warm:      #302C32;

  --cd-text:      #FFFFFF;
  --cd-quase:     #E6E8F5;  /* quase branco: selo e rótulo que não gritam */
  --cd-text-soft: #B9BDD4;
  --cd-text-mute: #7B819D;
  --cd-on-accent: #0B0A06;

  --cd-line:        rgba(var(--tinta),.09);
  --cd-line-strong: rgba(255,174,0,.32);

  --cd-cat-comunidade: #FFAE00;
  --cd-cat-produtos:   #4DA3FF;
  --cd-cat-servicos:   #66DB2B;

  --cd-r-sm:12px; --cd-r-md:16px; --cd-r-lg:24px; --cd-r-pill:999px;
  --cd-s1:8px; --cd-s2:16px; --cd-s3:24px; --cd-s4:32px; --cd-s5:40px; --cd-s6:48px;
  --cd-shadow-1:0 8px 26px rgba(0,0,0,.4);
  --cd-shadow-2:0 20px 56px rgba(0,0,0,.55);

  --cd-font-heading:"Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cd-font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cd-grad-accent:linear-gradient(180deg,#FFC24D,#FFAE00);
}

/* =========================================================================
   TEMA CLARO
   Duas portas de entrada, como manda a regra 2.9 do repo landing-pages:
     · data-tema="claro"  → o toggle do portal, por query ou postMessage
     · prefers-color-scheme → a preferência do navegador, quando ninguém
       escolheu explicitamente
   Escuro é o padrão; claro é a exceção. As duas listas abaixo são a MESMA
   paleta e precisam andar juntas: mexeu numa, mexe na outra.

   O que muda de verdade aqui não é a cor, é o papel: --cd-accent continua
   sendo o âmbar que PREENCHE, e --cd-accent-ink vira um âmbar escuro que
   ESCREVE. Âmbar cru sobre branco dá 1,86:1 e reprova em qualquer critério.
   ========================================================================= */
:root[data-tema="claro"]{
  color-scheme: light;
  --tinta: 10,13,36;

  --cd-bg:        #FFFFFF;
  --cd-surface:   #F4F5FA;
  --cd-warm:      #F8F5F2;

  --cd-text:      #0A0D24;   /* 19,2:1 no branco */
  --cd-quase:     #171B36;
  --cd-text-soft: #3C4260;   /*  9,8:1 */
  --cd-text-mute: #5A6080;   /*  6,1:1 */

  --cd-line:        rgba(var(--tinta),.14);
  --cd-line-strong: rgba(122,80,0,.34);

  --cd-cat-comunidade: #7A5000;
  --cd-cat-produtos:   #0B5FB0;
  --cd-cat-servicos:   #2E7D12;

  --tom-base:    #FFFFFF;
  --tom-surface: #F4F5FA;
  --tom-deep:    #ECEEF6;
  --tom-warm:    #F8F5F2;
  --cd-antes:    #E7E9F2;
  --cd-antes-nota: #55597A;

  --cd-shadow-1:0 8px 26px rgba(10,13,36,.10);
  --cd-shadow-2:0 20px 56px rgba(10,13,36,.16);
}

@media (prefers-color-scheme: light){
  :root:not([data-tema="escuro"]){
    color-scheme: light;
    --tinta: 10,13,36;

    --cd-bg:        #FFFFFF;
    --cd-surface:   #F4F5FA;
    --cd-warm:      #F8F5F2;

    --cd-text:      #0A0D24;
    --cd-quase:     #171B36;
    --cd-text-soft: #3C4260;
    --cd-text-mute: #5A6080;

    --cd-line:        rgba(var(--tinta),.14);
    --cd-line-strong: rgba(122,80,0,.34);

    --cd-cat-comunidade: #7A5000;
    --cd-cat-produtos:   #0B5FB0;
    --cd-cat-servicos:   #2E7D12;

    --tom-base:    #FFFFFF;
    --tom-surface: #F4F5FA;
    --tom-deep:    #ECEEF6;
    --tom-warm:    #F8F5F2;
    --cd-antes:    #E7E9F2;
    --cd-antes-nota: #55597A;

    --cd-shadow-1:0 8px 26px rgba(10,13,36,.10);
    --cd-shadow-2:0 20px 56px rgba(10,13,36,.16);
  }
}

/* ------------------------------------------------------ Fundo com vida --- */
.bg-fx{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.bg-fx canvas{ width:100%; height:100%; display:block; }
/* halo laranja que responde ao mouse (a variável é escrita pelo site.js) */
.bg-fx::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(520px 400px at var(--mx,50%) var(--my,26%), rgba(255,174,0,.10), transparent 70%);
  transition:background .2s ease;
}
body > *:not(.bg-fx){ position:relative; z-index:1; }

/* O âmbar preenche bem, mas como TINTA sobre branco dá 2,1:1 e reprova. Por
   isso preenchimento e traço são variáveis diferentes: no escuro valem a mesma
   cor, no claro o traço escurece o quanto precisar para passar.
   Declarado no `body`, e não no `:root`, porque as páginas de acento próprio
   trocam --cd-accent no body: assim a tinta acompanha a cor de cada uma. */
body{ --cd-accent-ink: var(--cd-accent); }

/* As cores de categoria chegam por atributo, vindas do catalogo.js, então não
   dá para escolher uma tinta para cada uma na mão. No claro elas são misturadas
   com a tinta escura: 40% mantém o matiz reconhecível e passa em contraste nas
   quatro (5,6 a 8,3:1). No escuro a cor continua crua. */
:root[data-tema="claro"] .prod__tag,
:root[data-tema="claro"] .prod__go{ color:color-mix(in srgb, var(--c) 40%, #0A0D24); }
@media (prefers-color-scheme: light){
  :root:not([data-tema="escuro"]) .prod__tag,
  :root:not([data-tema="escuro"]) .prod__go{ color:color-mix(in srgb, var(--c) 40%, #0A0D24); }
}

/* A tinta clara precisa ser declarada no MESMO elemento que a padrão. Posta no
   :root ela perderia, porque a declaração do body está mais perto de quem usa.
   7,1:1 no branco, AAA. O âmbar cru daria 1,86:1 e reprovaria em tudo. */
:root[data-tema="claro"] body{ --cd-accent-ink:#7A5000; }
@media (prefers-color-scheme: light){
  :root:not([data-tema="escuro"]) body{ --cd-accent-ink:#7A5000; }
}

/* ---------------------------------------------------------- Cabeçalho ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--cd-s3);
  padding-block:var(--cd-s3); border-bottom:1px solid var(--cd-line);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{ width:40px; height:40px; flex:0 0 auto; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{ font-family:var(--cd-font-heading); font-weight:700; font-size:.98rem; }
.brand__sub{ font-size:.7rem; color:var(--cd-accent-ink); font-weight:600; letter-spacing:1.6px; text-transform:uppercase; }
.topnav{ display:none; gap:var(--cd-s3); font-size:.92rem; color:var(--cd-text-soft); }
.topnav a:hover{ color:var(--cd-text); }
@media (min-width:820px){ .topnav{ display:flex; } }

/* --------------------------------------------------------------- Hero ---- */
.hero{ padding-block:clamp(48px,9vw,96px) clamp(40px,7vw,72px); text-align:center; }
.hero h1{ font-size:clamp(2rem,6.4vw,3.4rem); text-wrap:balance; max-width:20ch; margin-inline:auto; }
.hero__sub{ margin-top:var(--cd-s3); color:var(--cd-text-soft); font-size:clamp(1rem,2.6vw,1.16rem); max-width:56ch; margin-inline:auto; }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.76rem; font-weight:700; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--cd-accent-ink); background:rgba(255,174,0,.09);
  border:1px solid rgba(255,174,0,.26); padding:7px 15px; border-radius:var(--cd-r-pill);
}
.hl{ color:var(--cd-accent-ink); }

/* ------------------------------------- Cartões de escolha (3 caminhos) --- */
.paths{ display:grid; gap:var(--cd-s3); }
@media (min-width:860px){ .paths{ grid-template-columns:repeat(3,1fr); } }
.path{
  --c:var(--cd-accent);
  position:relative; display:flex; flex-direction:column; gap:14px;
  align-items:center; text-align:center;
  background:var(--cd-surface); border:1px solid var(--cd-line);
  border-radius:var(--cd-r-lg); padding:var(--cd-s4); overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.path::before{ content:""; position:absolute; inset:-1px -1px auto -1px; height:3px; background:var(--c); }
.path::after{
  content:""; position:absolute; inset:auto -30% -60% -30%; height:70%;
  background:radial-gradient(60% 100% at 50% 100%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.path:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--c) 40%, transparent); box-shadow:var(--cd-shadow-2); }
.path:hover::after{ opacity:1; }
.path--comunidade{ --c:var(--cd-cat-comunidade); }
.path--produtos{ --c:var(--cd-cat-produtos); }
.path--servicos{ --c:var(--cd-cat-servicos); }
.path__tag{
  align-self:center; font-size:.68rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 30%, transparent);
  padding:5px 11px; border-radius:var(--cd-r-pill);
}
.path__ico{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--c) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 28%, transparent); }
.path__ico svg{ width:26px; height:26px; stroke:var(--c); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.path h2{ font-size:1.32rem; }
.path p{ color:var(--cd-text-soft); font-size:.98rem; }
.path__go{ margin-top:auto; display:inline-flex; align-items:center; gap:9px; font-weight:700; color:var(--c); font-size:.98rem; }
.path:hover .path__go svg{ transform:translateX(4px); }
.path__go svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2; transition:transform .2s ease; }
.path__link{ position:absolute; inset:0; z-index:2; }

/* ----------------------------------------- Mural de produtos (capas) ----- */
.mural{ display:grid; gap:var(--cd-s3); }
@media (min-width:640px){ .mural{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .mural{ grid-template-columns:repeat(3,1fr); } }
.prod{
  --c:var(--cd-cat-produtos);
  position:relative; display:flex; flex-direction:column;
  background:var(--cd-surface); border:1px solid var(--cd-line);
  border-radius:var(--cd-r-lg); overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.prod:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--c) 42%, transparent); box-shadow:var(--cd-shadow-2); }
/* 16:9 porque as capas reais sao miniaturas de video do YouTube: em 16:10
   o corte comia o texto das laterais. */
.prod__capa{ aspect-ratio:16/9; background:#0A0D24; border-bottom:1px solid var(--cd-line); }
.prod__capa img{ width:100%; height:100%; object-fit:cover; }
.prod__body{ padding:var(--cd-s3); display:flex; flex-direction:column; gap:9px; flex:1; }
.prod__tag{
  align-self:flex-start; font-size:.66rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 28%, transparent);
  padding:4px 10px; border-radius:var(--cd-r-pill);
}
.prod h3{ font-size:1.12rem; }
.prod p{ color:var(--cd-text-soft); font-size:.93rem; }
.prod__pe{ margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--cd-line); }
.prod__preco{ font-family:var(--cd-font-heading); font-weight:700; font-size:1.02rem; }
.prod__preco small{ display:block; font-family:var(--cd-font-body); font-weight:400; font-size:.72rem; color:var(--cd-text-mute); letter-spacing:0; }
.prod__preco--breve{ font-size:.82rem; color:var(--cd-text-mute); font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
.prod__go{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.92rem; color:var(--c); }
/* Produto sem página: a ação vira aviso, e o card inteiro deixa de reagir ao cursor */
.prod__go--off{ color:var(--cd-text-mute); font-weight:600; font-size:.82rem; letter-spacing:.3px; }
.prod:not(:has(.prod__link)):hover{ transform:none; border-color:var(--cd-line); box-shadow:none; }
.prod__link{ position:absolute; inset:0; z-index:2; }
.prod__incluso{ font-size:.72rem; color:var(--cd-accent-ink); display:inline-flex; align-items:center; gap:6px; }

/* Modo duplo: preço em cima, comprar e ver embaixo. O card não é clicável
   inteiro, então quem decide qual caminho seguir é o botão. */
.prod__pe--duplo{ flex-direction:column; align-items:stretch; gap:12px; }
.prod__acoes{ display:flex; flex-wrap:wrap; gap:9px; }
.prod__acoes .btn{ flex:1 1 auto; }
.prod--duplo:hover{ transform:none; border-color:var(--cd-line); box-shadow:none; }

/* Modo vitrine: card de exibição, sem preço e sem saída. Cards do mesmo
   tamanho porque aqui eles são uma lista, não opções para comparar. */
.mural--vitrine{ align-items:stretch; }
.prod--vitrine{ cursor:default; }
.prod--vitrine .prod__body{ padding:var(--cd-s3) var(--cd-s3) calc(var(--cd-s3) + 2px); gap:8px; }
.prod--vitrine p{ font-size:.9rem; }

/* ------------------------------------------ Bloco "leve tudo" (bundle) --- */
.bundle{
  background:linear-gradient(180deg, rgba(255,174,0,.09), var(--cd-surface));
  border:1px solid var(--cd-line-strong); border-radius:var(--cd-r-lg);
  padding:clamp(24px,5vw,44px); text-align:center; position:relative; overflow:hidden;
}
.bundle::before{ content:""; position:absolute; inset:-1px -1px auto -1px; height:3px; background:var(--cd-grad-accent); }
.bundle h2{ font-size:clamp(1.5rem,4vw,2.2rem); text-wrap:balance; max-width:24ch; margin-inline:auto; }
.bundle p{ margin-top:14px; color:var(--cd-text-soft); max-width:56ch; margin-inline:auto; }
.bundle .btn{ margin-top:var(--cd-s4); }

/* ------------------------------------------------------------- Rodapé ---- */
/* O respiro antes do rodapé era margem, e margem é transparente: nas páginas
   de fundo opaco isso abria uma faixa de 48px por onde o halo do .bg-fx, que
   é fixed e fica atrás de tudo, aparecia como uma barra horizontal no fim da
   página. Virou padding do próprio rodapé: mesmo espaço, agora pintado. */
.site-footer{
  background:var(--cd-surface); border-top:1px solid var(--cd-line);
  margin-top:0; padding-top:var(--cd-s6);
}
.site-footer__in{ padding-block:36px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; }
.site-footer__links{ display:flex; gap:20px; flex-wrap:wrap; font-size:.88rem; color:var(--cd-text-mute); }
.site-footer__links a:hover{ color:var(--cd-text); }
.site-footer__legal{ font-size:.8rem; color:#5C6180; margin-top:6px; width:100%; }

@media (prefers-reduced-motion:reduce){
  .bg-fx canvas{ display:none; }
  .bg-fx::after{ transition:none; }
}

/* ------------------------------------------------- Trilhas (abas) -------- */
.tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:var(--cd-s4); }
.tab{
  font-family:var(--cd-font-body); font-weight:600; font-size:.95rem; color:var(--cd-text-soft);
  background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:var(--cd-r-pill);
  padding:11px 22px; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tab:hover{ border-color:var(--cd-line-strong); color:var(--cd-text); }
.tab.is-active{ background:var(--cd-grad-accent); color:var(--cd-on-accent); border-color:transparent; box-shadow:0 8px 22px rgba(255,174,0,.26); }
.painel[hidden]{ display:none; }
.painel{ animation:painelIn .35s ease; }
@keyframes painelIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ------------------------------------------------- Lista de checagem ----- */
.checks{ display:flex; flex-direction:column; gap:12px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; color:var(--cd-text-soft); }
.checks li svg{ width:20px; height:20px; flex:0 0 auto; margin-top:2px; stroke:var(--cd-accent-ink); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ------------------------------------------------- FAQ ------------------- */
.faq{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
.faq details{ background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:var(--cd-r-md); overflow:hidden; }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 20px; font-family:var(--cd-font-heading);
  font-weight:600; font-size:1.02rem; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ic{ flex:0 0 auto; width:22px; height:22px; position:relative; transition:transform .28s ease; }
.faq summary .ic::before,.faq summary .ic::after{ content:""; position:absolute; background:var(--cd-accent); border-radius:2px; }
.faq summary .ic::before{ top:10px; left:3px; right:3px; height:2px; }
.faq summary .ic::after{ left:10px; top:3px; bottom:3px; width:2px; transition:opacity .28s ease; }
.faq details[open] summary .ic::after{ opacity:0; }
.faq .faq__body{ padding:0 20px 20px; color:var(--cd-text-soft); font-size:.98rem; }

/* ------------------------------------------------- Preço ----------------- */
.preco{ text-align:center; }
.preco .big{ display:block; font-family:var(--cd-font-heading); font-weight:800; font-size:clamp(2.4rem,8vw,3.4rem); line-height:1; }
.preco .nota{ display:block; color:var(--cd-text-mute); font-size:.95rem; margin-top:8px; }
.preco .anchor{ color:var(--cd-text-mute); text-decoration:line-through; font-size:1rem; }
.tag-ex{ display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--cd-on-accent); background:var(--cd-accent); padding:3px 9px; border-radius:999px; }

/* =========================================================================
   TONS DE SEÇÃO (fundos estáticos, só CSS)
   Variação de ritmo usando apenas tons da paleta da Academia.
   Nada animado aqui: o canvas vive na .bg-fx, atrás de tudo. Toda página que
   declara a .bg-fx ganha as partículas; a home troca pela rede com
   [data-fundo="rede"].
   ========================================================================= */
:root{
  --tom-base:    #080B21;
  --tom-surface: #0F132E;
  --tom-deep:    #05070F;
  --tom-warm:    #14111A;   /* mistura com o neutro quente #302C32 */
  --cd-antes:    #0C0E1E;   /* o lado "como é hoje", mais fundo que o entorno */
  --cd-antes-nota: #8A8FA8; /* a nota dentro dele */
}

.sec{ position:relative; overflow:hidden; }
.sec > .wrap{ position:relative; z-index:2; }

.sec--base{ background:var(--tom-base); }
.sec--surface{ background:var(--tom-surface); }
.sec--deep{ background:var(--tom-deep); }
.sec--warm{ background:var(--tom-warm); }

/* Brilho radial estático */
.sec--glow{
  background:
    radial-gradient(900px 460px at 50% 0%, rgba(255,174,0,.10), transparent 68%),
    var(--tom-base);
}
/* Malha fina */
.sec--grid::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--tinta),.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--tinta),.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%, #000, transparent);
          mask-image:radial-gradient(80% 70% at 50% 40%, #000, transparent);
}
/* Hachura diagonal */
.sec--hatch::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(135deg, rgba(255,174,0,.05) 0 1px, transparent 1px 24px);
  -webkit-mask-image:radial-gradient(90% 80% at 50% 50%, #000, transparent);
          mask-image:radial-gradient(90% 80% at 50% 50%, #000, transparent);
}
/* Vinheta suave nas bordas */
.sec--vinheta::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%);
}
/* Filete de acento no topo da seção */
.sec--linha{ border-top:1px solid rgba(255,174,0,.18); }

/* =========================================================================
   ESTANTE DE CURSOS (no espírito do painel da Academia)
   ========================================================================= */
.estante{ display:grid; gap:18px; grid-template-columns:repeat(2,1fr); }
@media (min-width:720px){ .estante{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1040px){ .estante{ grid-template-columns:repeat(6,1fr); } }

.curso{
  position:relative; border-radius:var(--cd-r-md); overflow:hidden;
  background:var(--cd-surface); border:1px solid var(--cd-line);
  aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:flex-end;
  padding:14px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.curso::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,174,0,.16), transparent 62%),
    linear-gradient(180deg, rgba(var(--tinta),.04), transparent 40%),
    linear-gradient(180deg, #10142F, #080B21);
}
.curso::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--tinta),.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--tinta),.05) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);
          mask-image:linear-gradient(180deg,#000,transparent 60%);
}
.curso:hover{ transform:translateY(-4px); border-color:var(--cd-line-strong); box-shadow:var(--cd-shadow-2); }

/* Capa real da plataforma. Ela já traz o nome e o selo desenhados, então o
   card vira só a imagem: repetir o nome por baixo duplicaria a informação.
   Os pseudo-elementos decorativos saem quando há imagem. */
.curso:has(img){ padding:0; }
.curso:has(img)::before,
.curso:has(img)::after{ display:none; }
.curso img{ width:100%; height:100%; object-fit:cover; display:block; }
.curso__cat{
  position:relative; z-index:2; font-size:.6rem; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--cd-accent-ink); opacity:.9; margin-bottom:6px;
}
.curso__nome{
  position:relative; z-index:2; font-family:var(--cd-font-heading); font-weight:800;
  font-size:1rem; line-height:1.1; letter-spacing:-.4px;
}
.curso__selo{
  position:absolute; top:0; right:0; z-index:3;
  font-size:.56rem; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  padding:5px 10px; border-bottom-left-radius:10px;
}
.curso__selo--aberto{ background:var(--cd-accent); color:var(--cd-on-accent); }
.curso__selo--novo{ background:#FFD37A; color:var(--cd-on-accent); }
.curso__selo--breve{ background:rgba(var(--tinta),.14); color:var(--cd-quase); }

/* =========================================================================
   BLOCO TÉCNICO EM DOIS NÍVEIS
   ========================================================================= */
.tecnico{ display:grid; gap:var(--cd-s3); align-items:start; }
@media (min-width:880px){ .tecnico{ grid-template-columns:repeat(2,1fr); } }
.tec{
  background:rgba(var(--tinta),.03); border:1px solid var(--cd-line);
  border-left:3px solid var(--cd-accent); border-radius:var(--cd-r-md); padding:var(--cd-s4);
}
.tec h3{ font-size:1.16rem; margin-bottom:10px; }
.tec > p{ color:var(--cd-text-soft); font-size:.98rem; }
.tec details{ margin-top:16px; border-top:1px solid var(--cd-line); padding-top:14px; }
.tec summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:700; letter-spacing:.4px; color:var(--cd-accent-ink);
}
.tec summary::-webkit-details-marker{ display:none; }
.tec summary::after{
  content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .25s ease; margin-left:2px; margin-top:-4px;
}
.tec details[open] summary::after{ transform:rotate(-135deg); margin-top:2px; }
.tec__passos{ margin-top:14px; display:flex; flex-direction:column; gap:12px; counter-reset:tp; }
.tec__passos li{ position:relative; padding-left:34px; color:var(--cd-text-soft); font-size:.94rem; }
.tec__passos li::before{
  counter-increment:tp; content:counter(tp);
  position:absolute; left:0; top:-1px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:.7rem; font-weight:800;
  background:rgba(255,174,0,.14); color:var(--cd-accent-ink); border:1px solid rgba(255,174,0,.3);
}
.tec__nota{ margin-top:14px; font-size:.86rem; color:var(--cd-text-mute); }

/* =========================================================================
   MURAL DE PROVAS (estrutura pronta, conteúdo pendente)
   ========================================================================= */
.provas{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:720px){ .provas{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .provas{ grid-template-columns:repeat(3,1fr); } }
.prova{
  background:var(--cd-surface); border:1px solid var(--cd-line);
  border-radius:var(--cd-r-md); padding:var(--cd-s3); display:flex; flex-direction:column; gap:12px;
}
.prova--vaga{
  border-style:dashed; border-color:rgba(var(--tinta),.16); background:transparent;
  align-items:center; justify-content:center; text-align:center; min-height:190px;
}
.prova--vaga svg{ width:30px; height:30px; stroke:var(--cd-text-mute); fill:none; stroke-width:1.6; }
.prova--vaga b{ font-family:var(--cd-font-heading); font-size:.96rem; color:var(--cd-quase); }
.prova--vaga span{ font-size:.84rem; color:var(--cd-text-mute); max-width:26ch; }
.prova__quem{ display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--cd-text-mute); }
.prova__av{ width:34px; height:34px; border-radius:50%; background:var(--cd-warm); display:grid; place-items:center; color:#fff; font-weight:700; font-size:.8rem; }

/* =========================================================================
   AUTORIDADE (bloco do Rhavi)
   ========================================================================= */
.autor{ display:grid; gap:var(--cd-s4); align-items:center; }
@media (min-width:820px){ .autor{ grid-template-columns:280px 1fr; } }
.autor__foto{
  aspect-ratio:1; border-radius:var(--cd-r-lg); border:1px dashed rgba(var(--tinta),.2);
  display:grid; place-items:center; text-align:center; padding:20px; gap:8px;
  background:repeating-linear-gradient(135deg, rgba(var(--tinta),.02) 0 12px, transparent 12px 24px);
}
.autor__foto svg{ width:34px; height:34px; stroke:var(--cd-text-mute); fill:none; stroke-width:1.6; }
.autor__foto span{ font-size:.82rem; color:var(--cd-text-mute); }
.autor blockquote{ margin:0; font-family:var(--cd-font-heading); font-size:clamp(1.1rem,2.6vw,1.4rem); line-height:1.35; }
.autor__nome{ margin-top:18px; font-weight:700; }
.autor__nome small{ display:block; font-weight:400; color:var(--cd-text-mute); font-size:.9rem; margin-top:4px; }

/* =========================================================================
   CHAMADA CURTA (oferta distribuída ao longo da página)
   ========================================================================= */
.chamada{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  background:linear-gradient(180deg, rgba(255,174,0,.08), rgba(255,174,0,.02));
  border:1px solid var(--cd-line-strong); border-radius:var(--cd-r-lg);
  padding:var(--cd-s4);
}
.chamada p{ font-family:var(--cd-font-heading); font-weight:700; font-size:clamp(1.05rem,2.6vw,1.3rem); max-width:46ch; }
.chamada span{ display:block; font-family:var(--cd-font-body); font-weight:400; font-size:.92rem; color:var(--cd-text-soft); margin-top:6px; }

/* =========================================================================
   COMPARATIVO (o que você deixa de pagar)
   ========================================================================= */
.compara{ display:grid; gap:14px; max-width:760px; margin-inline:auto; }
.compara__linha{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; background:var(--cd-surface);
  border:1px solid var(--cd-line); border-radius:var(--cd-r-md);
}
.compara__linha b{ font-weight:600; font-size:.98rem; }
.compara__linha span{ color:var(--cd-text-mute); font-size:.88rem; text-align:right; }
.compara__total{
  border-color:var(--cd-line-strong);
  background:linear-gradient(180deg, rgba(255,174,0,.1), var(--cd-surface));
}
.compara__total b{ font-family:var(--cd-font-heading); font-size:1.1rem; }
.compara__total span{ color:var(--cd-accent-ink); font-weight:700; font-size:1rem; }

/* =========================================================================
   TRILHAS (ajuste fino para esta página)
   ========================================================================= */
.trilha-res{
  margin-top:var(--cd-s4); display:grid; gap:var(--cd-s3);
}
@media (min-width:820px){ .trilha-res{ grid-template-columns:repeat(3,1fr); } }
.trilha-res .card{ background:rgba(var(--tinta),.03); }

/* Painel escondido precisa vencer o display:grid/flex do proprio painel */
[data-painel][hidden]{ display:none !important; }

/* =========================================================================
   HERO DIVIDIDO (texto + vídeo)
   ========================================================================= */
.hero--split{ text-align:left; }
.hero--split .hero__inner{
  display:grid; gap:var(--cd-s5); align-items:center;
}
@media (min-width:980px){
  .hero--split .hero__inner{ grid-template-columns:1.05fr .95fr; gap:var(--cd-s6); }
}
.hero--split h1{ max-width:none; margin-inline:0; }
.hero--split .hero__sub{ margin-inline:0; max-width:52ch; }
.hero--split .hero__chips{ justify-content:flex-start; }
@media (max-width:979px){
  .hero--split{ text-align:center; }
  .hero--split h1{ margin-inline:auto; }
  .hero--split .hero__sub{ margin-inline:auto; }
  .hero--split .hero__chips{ justify-content:center; }
}

/* --------------------------------------------------- Vídeo (fachada) ---- */
/* O player do YouTube só carrega quando a pessoa clica: a página não paga
   o custo do embed de graça. */
.video{
  position:relative; border-radius:var(--cd-r-lg); overflow:hidden;
  border:1px solid var(--cd-line-strong); background:#0B0E24;
  aspect-ratio:16/9; box-shadow:var(--cd-shadow-2);
}
.video__capa{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;
}
.video__fundo{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,174,0,.18), transparent 62%),
    linear-gradient(180deg,#171B3A,#0B0E24);
}
.video__grade{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(var(--tinta),.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--tinta),.05) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent);
          mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.video__play{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background:transparent; border:0; cursor:pointer; color:inherit; width:100%;
}
.video__botao{
  width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
  background:var(--cd-grad-accent); color:var(--cd-on-accent);
  box-shadow:0 12px 34px rgba(255,174,0,.36);
  transition:transform .2s ease;
}
.video__play:hover .video__botao{ transform:scale(1.07); }
.video__botao svg{ width:26px; height:26px; margin-left:3px; }
/* A fachada é escura nos dois temas, então a legenda dela não segue o token:
   seguindo, ela viraria texto escuro sobre um painel que continuou escuro. */
.video__legenda{ font-size:.9rem; color:#B9BDD4; }
.video__legenda b{ display:block; font-family:var(--cd-font-heading); color:#fff; font-size:1.02rem; margin-bottom:3px; }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* =========================================================================
   CANVAS DE AUTOMAÇÃO (o fluxo que se monta sozinho)
   ========================================================================= */
.canvas{
  position:relative; border-radius:var(--cd-r-lg); overflow:hidden;
  border:1px solid var(--cd-line); background:linear-gradient(180deg,#0C1030,#080B21);
  padding:var(--cd-s4) var(--cd-s3);
}
.canvas::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(var(--tinta),.07) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(85% 85% at 50% 50%, #000, transparent);
          mask-image:radial-gradient(85% 85% at 50% 50%, #000, transparent);
}
.canvas__barra{
  position:relative; display:flex; align-items:center; gap:7px; margin-bottom:var(--cd-s3);
  font-size:.7rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--cd-text-mute);
}
.canvas__barra i{ width:8px; height:8px; border-radius:50%; background:rgba(var(--tinta),.18); }
.canvas svg{ position:relative; width:100%; height:auto; display:block; }

/* Nós e fios entram em sequência quando a seção aparece */
.canvas .no-fig{ opacity:0; transform:translateY(6px); transition:opacity .45s ease, transform .45s ease; }
.canvas .fio{ stroke-dasharray:120; stroke-dashoffset:120; transition:stroke-dashoffset .6s ease; }
.canvas.in .no-fig{ opacity:1; transform:none; }
.canvas.in .fio{ stroke-dashoffset:0; }
.canvas.in .no-fig:nth-of-type(1){ transition-delay:.05s; }
.canvas.in .no-fig:nth-of-type(2){ transition-delay:.5s; }
.canvas.in .no-fig:nth-of-type(3){ transition-delay:.95s; }
.canvas.in .no-fig:nth-of-type(4){ transition-delay:1.4s; }
.canvas.in .fio:nth-of-type(1){ transition-delay:.3s; }
.canvas.in .fio:nth-of-type(2){ transition-delay:.75s; }
.canvas.in .fio:nth-of-type(3){ transition-delay:1.2s; }

/* =========================================================================
   ÁREA DE MEMBROS POR DENTRO
   ========================================================================= */
/* Print real da plataforma. Substituiu o desenho em CSS que ficava aqui: por
   melhor que fosse, ele era obviamente falso, e prova falsa não prova. */
.print{ margin:0; }
.print img{
  display:block; width:100%; height:auto;
  border-radius:var(--cd-r-lg); border:1px solid var(--cd-line-strong);
  background:#0A0D26; box-shadow:var(--cd-shadow-2);
}
.print figcaption{ margin-top:12px; text-align:center; font-size:.84rem; color:var(--cd-text-mute); }

/* =========================================================================
   ANTES E DEPOIS
   ========================================================================= */
.antesdepois{ display:grid; gap:var(--cd-s3); }
@media (min-width:820px){ .antesdepois{ grid-template-columns:1fr 1fr; } }
.lado{
  border-radius:var(--cd-r-lg); border:1px solid var(--cd-line); padding:var(--cd-s4);
  position:relative; overflow:hidden;
}
.lado--antes{ background:var(--cd-antes); }
.lado--antes::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(135deg, rgba(var(--tinta),.03) 0 1px, transparent 1px 12px);
}
.lado--depois{
  background:linear-gradient(180deg, rgba(255,174,0,.08), var(--cd-surface));
  border-color:var(--cd-line-strong);
}
.lado__selo{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; margin-bottom:16px;
}
.lado--antes .lado__selo{ background:rgba(var(--tinta),.08); color:var(--cd-text-mute); }
.lado--depois .lado__selo{ background:var(--cd-accent); color:var(--cd-on-accent); }
.lado h3{ font-size:1.1rem; margin-bottom:14px; }
.passos{ display:flex; flex-direction:column; gap:10px; }
.passos li{
  position:relative; padding:11px 14px 11px 40px; border-radius:10px;
  font-size:.92rem; border:1px solid var(--cd-line);
}
.lado--antes .passos li{ color:var(--cd-text-mute); background:rgba(var(--tinta),.02); }
.lado--depois .passos li{ color:var(--cd-text-soft); background:rgba(255,174,0,.05); border-color:rgba(255,174,0,.16); }
.passos li::before{
  content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:4px;
}
.lado--antes .passos li::before{ background:rgba(var(--tinta),.14); }
.lado--depois .passos li::before{ background:var(--cd-accent); }
.lado__nota{ margin-top:16px; font-size:.86rem; }
/* Cinza que só funcionava sobre o painel escuro. Agora segue o token, que
   escurece junto com o fundo quando o tema vira claro. */
.lado--antes .lado__nota{ color:var(--cd-antes-nota); }
.lado--depois .lado__nota{ color:var(--cd-accent-ink); font-weight:600; }

@media (prefers-reduced-motion:reduce){
  .canvas .no-fig{ opacity:1; transform:none; transition:none; }
  .canvas .fio{ stroke-dashoffset:0; transition:none; }
  .video__play:hover .video__botao{ transform:none; }
}

/* Nenhum grid de cards estica os vizinhos: expandir um nao mexe nos outros.
   Fora dessa regra: .paths, onde os tres caminhos sao equivalentes e por isso
   tem a mesma altura, com a chamada de cada um na mesma linha de base. */
.tecnico,.trilha-res,.antesdepois,.provas,.planos,.mural{ align-items:start; }

/* =========================================================================
   DESTAQUE DE PRODUTO (spotlight com visual + texto)
   ========================================================================= */
.destaque{ display:grid; gap:var(--cd-s5); align-items:center; }
@media (min-width:900px){
  .destaque{ grid-template-columns:.95fr 1.05fr; gap:var(--cd-s6); }
  .destaque--inv .destaque__visual{ order:2; }
}
.destaque + .destaque{ margin-top:calc(var(--cd-s6) * 1.4); }
.destaque__selo{
  display:inline-flex; align-items:center; gap:8px; font-size:.68rem; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--cd-accent-ink);
  background:rgba(255,174,0,.1); border:1px solid rgba(255,174,0,.28);
  padding:6px 13px; border-radius:999px; margin-bottom:16px;
}
.destaque h3{ font-size:clamp(1.5rem,3.4vw,2.05rem); margin-bottom:14px; }
.destaque > div > p{ color:var(--cd-text-soft); font-size:1rem; }
.destaque__lista{ margin-top:20px; display:flex; flex-direction:column; gap:11px; }
.destaque__lista li{ display:flex; gap:11px; align-items:flex-start; color:var(--cd-text-soft); font-size:.95rem; }
.destaque__lista svg{ width:18px; height:18px; flex:0 0 auto; margin-top:3px; stroke:var(--cd-accent-ink); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.destaque__pe{ margin-top:22px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.destaque__preco{ font-family:var(--cd-font-heading); font-weight:700; }
.destaque__preco small{ display:block; font-family:var(--cd-font-body); font-weight:400; font-size:.78rem; color:var(--cd-text-mute); }

/* Selo de "já vem junto". Na página da Academia ele é o pé do destaque
   inteiro, então tem peso de botão: é a única coisa ali para se olhar. */
.destaque__incluso{
  display:inline-flex; align-items:center; gap:11px;
  padding:14px 20px; border-radius:var(--cd-r-pill);
  background:rgba(255,174,0,.1); border:1px solid var(--cd-line-strong);
  font-family:var(--cd-font-heading); font-weight:700; font-size:1.02rem; color:var(--cd-accent-ink);
}
.destaque__incluso svg{ width:19px; height:19px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.destaque__incluso small{
  font-family:var(--cd-font-body); font-weight:400; font-size:.8rem;
  color:var(--cd-text-mute); padding-left:11px; border-left:1px solid var(--cd-line-strong);
}
/* Estreito: a nota desce para a linha de baixo em vez de espremer as duas */
@media (max-width:599px){
  .destaque__incluso{ flex-wrap:wrap; padding:13px 18px; }
  .destaque__incluso small{ border-left:0; padding-left:0; margin-left:30px; }
}

/* Rede de conexões do Segundo Cérebro, versão compacta para o destaque.
   O mapa é desenhado por redeConexoes(), no site.js, que mira [data-rede] e
   não a classe: a mesma função serve esta caixa e a da página do produto sem
   precisar de alteração nenhuma. A cor do produto mora aqui dentro, porque
   estas páginas têm outro acento. */
.rede-mini{
  --a:77,163,255;
  position:relative; overflow:hidden; border-radius:var(--cd-r-lg);
  border:1px solid var(--cd-line-strong); box-shadow:var(--cd-shadow-2);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(var(--a),.12), transparent 62%),
    linear-gradient(180deg,#0C1030,#070A1C);
}
.rede-mini::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(var(--a),.10) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(80% 75% at 50% 45%, #000, transparent);
          mask-image:radial-gradient(80% 75% at 50% 45%, #000, transparent);
}
/* Mais larga que alta, como na página do produto, mas sem os 16:9: numa
   coluna estreita a rede precisa da altura para os nomes não se atropelarem. */
.rede-mini__tela{ position:relative; display:block; width:100%; aspect-ratio:4/3; touch-action:pan-y; }
.rede-mini__pe{
  position:relative; border-top:1px solid var(--cd-line);
  background:rgba(4,6,18,.55); padding:13px var(--cd-s3);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 10px;
  text-align:center;
}
.rede-mini__foco{ font-family:var(--cd-font-heading); font-weight:700; font-size:.92rem; color:#fff; }
.rede-mini__verbo{ font-size:.72rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--cd-text-mute); }
.rede-mini__liga{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.rede-mini__liga span{
  font-size:.72rem; color:rgb(var(--a)); background:rgba(var(--a),.1);
  border:1px solid rgba(var(--a),.26); padding:3px 9px; border-radius:999px;
}

/* Árvore de arquivos do Starter Kit. Mesmo desenho do painel de memória: o
   brilho é da cor do produto, e a base fecha na cor da marca. */
.kit{
  border-radius:var(--cd-r-lg); border:1px solid var(--cd-line);
  background:linear-gradient(180deg,#0C1030,#080B21); padding:var(--cd-s4); position:relative; overflow:hidden;
}
.kit::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, rgba(198,242,78,.11), transparent 62%);
}
.kit__barra{
  position:relative; display:flex; align-items:center; gap:7px; margin-bottom:15px;
  font-size:.78rem; color:var(--cd-text-mute);
}
.kit__barra i{ width:9px; height:9px; border-radius:50%; background:rgba(var(--tinta),.16); }
.kit__barra i:first-child{ background:rgba(198,242,78,.55); }
.kit__barra span{ margin-left:7px; }
.kit__corpo{ position:relative; display:flex; flex-direction:column; gap:8px; }
.kit__arq{
  display:flex; flex-direction:column; gap:2px; padding:11px 15px; border-radius:12px;
  background:rgba(var(--tinta),.03); border:1px solid var(--cd-line);
}
.kit__arq b{ font-size:.84rem; font-weight:600; color:#C6F24E; }
.kit__arq span{ font-size:.79rem; color:var(--cd-text-soft); }
.kit__base{
  position:relative; margin-top:16px; padding:14px 16px; border-radius:12px;
  background:rgba(255,174,0,.09); border:1px solid var(--cd-line-strong);
  display:flex; align-items:center; gap:11px; font-size:.86rem; color:var(--cd-accent-ink); font-weight:600;
}
.kit__base svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2; flex:0 0 auto; }

/* =========================================================================
   LINHA DO TEMPO DAS FERRAMENTAS (bloco de autonomia)
   ========================================================================= */
.ferramentas{
  border-radius:var(--cd-r-lg); border:1px solid var(--cd-line);
  background:linear-gradient(180deg,#0C1030,#080B21); padding:var(--cd-s4);
  max-width:820px; margin-inline:auto;
}
.ferramentas__topo{
  font-size:.68rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--cd-text-mute);
  margin-bottom:14px;
}
.ferramentas__chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px; }
.ferramentas__chips span{
  font-size:.8rem; padding:7px 13px; border-radius:999px;
  border:1px dashed rgba(var(--tinta),.16); color:var(--cd-text-mute);
}
.ferramentas__chips span:nth-child(1){ opacity:.4; }
.ferramentas__chips span:nth-child(2){ opacity:.55; }
.ferramentas__chips span:nth-child(3){ opacity:.7; }
.ferramentas__chips span:nth-child(4){ opacity:.85; }
.ferramentas__chips span:last-child{ opacity:1; border-style:solid; border-color:var(--cd-line-strong); color:var(--cd-accent-ink); }
.ferramentas__base{
  padding:16px 18px; border-radius:12px;
  background:linear-gradient(90deg, rgba(255,174,0,.16), rgba(255,174,0,.06));
  border:1px solid var(--cd-line-strong);
  display:flex; align-items:center; gap:12px;
}
.ferramentas__base svg{ width:20px; height:20px; stroke:var(--cd-accent-ink); fill:none; stroke-width:2.2; flex:0 0 auto; }
.ferramentas__base b{ font-family:var(--cd-font-heading); font-size:.98rem; }
.ferramentas__base span{ display:block; font-size:.86rem; color:var(--cd-text-soft); margin-top:2px; }

/* =========================================================================
   CELULAR COM CONVERSA ANIMADA
   Portado da V5 (página do Criador de Bolso), mantendo estrutura, conteúdo e
   animação. Só o acento muda: laranja da Academia no lugar do verde-lima.
   ========================================================================= */
.phone{
  position:relative; width:min(320px, 82vw); aspect-ratio:9/19.2; margin-inline:auto;
  background:#05060f; border-radius:44px;
  padding:12px; box-shadow:var(--cd-shadow-2), 0 0 0 2px rgba(255,174,0,.14);
}
.phone::before{ /* notch */
  content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:120px; height:22px; background:#05060f; border-radius:0 0 16px 16px; z-index:4;
}
.phone__screen{
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:34px; background:#0b1f18;
  display:flex; flex-direction:column;
}
/* papel de parede sutil do chat */
.phone__screen::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 15%, rgba(var(--tinta),.04) 0 2px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(var(--tinta),.03) 0 2px, transparent 2px),
    linear-gradient(180deg,#0e241c,#0b1b16);
  background-size:26px 26px, 30px 30px, 100% 100%;
  opacity:.9;
}

/* barra de topo do aplicativo */
.wa__bar{
  position:relative; z-index:2; display:flex; align-items:center; gap:10px;
  padding:16px 14px 12px; background:rgba(11,20,16,.86);
  border-bottom:1px solid rgba(var(--tinta),.06); backdrop-filter:blur(4px);
}
.wa__avatar{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  background:var(--cd-grad-accent); color:var(--cd-on-accent);
  display:grid; place-items:center; font-weight:800; font-size:.9rem;
  font-family:var(--cd-font-heading);
}
.wa__peer{ display:flex; flex-direction:column; line-height:1.15; }
.wa__peer b{ font-size:.9rem; font-weight:600; color:#fff; }
.wa__peer span{ font-size:.72rem; color:#93c9a9; }

/* corpo do chat */
.wa__chat{
  position:relative; z-index:2; flex:1 1 auto; overflow:hidden;
  padding:14px 12px 16px; display:flex; flex-direction:column; gap:9px;
  justify-content:flex-end;
}
.bubble{
  max-width:82%; padding:9px 12px; border-radius:14px;
  font-size:.86rem; line-height:1.35; color:#0f1720;
  box-shadow:0 1px 1px rgba(0,0,0,.18); position:relative;
}
.bubble .t{ display:block; }
.bubble .time{ display:block; text-align:right; font-size:.64rem; color:rgba(0,0,0,.4); margin-top:2px; }
.bubble--in{ align-self:flex-start; background:#f3f4f8; border-top-left-radius:5px; }
.bubble--out{ align-self:flex-end; background:#dbf5c9; border-top-right-radius:5px; }

/* indicador de digitando */
.typing{
  align-self:flex-start; background:#f3f4f8; border-radius:14px; border-top-left-radius:5px;
  padding:11px 14px; display:inline-flex; gap:4px;
}
.typing i{ width:7px; height:7px; border-radius:50%; background:#9aa3b2; display:inline-block; animation:blink 1.2s infinite both; }
.typing i:nth-child(2){ animation-delay:.2s; }
.typing i:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-2px); } }

/* prévia do site dentro do balão */
.site-card{
  align-self:flex-start; width:88%; background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.site-card__bar{ height:20px; background:var(--cd-bg); display:flex; align-items:center; gap:5px; padding-inline:9px; }
.site-card__bar i{ width:6px; height:6px; border-radius:50%; background:rgba(var(--tinta),.5); }
.site-card__hero{ padding:11px; background:linear-gradient(135deg,#1b1f4a,#0b0e24); }
.site-card__hero b{ display:block; color:#fff; font-family:var(--cd-font-heading); font-size:.72rem; }
.site-card__hero span{
  display:inline-block; margin-top:6px; font-size:.56rem; color:var(--cd-on-accent);
  background:var(--cd-accent); padding:3px 8px; border-radius:999px; font-weight:700;
}
.site-card__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:9px; }
.site-card__grid div{ aspect-ratio:1; border-radius:6px; background:linear-gradient(135deg,#e9ecf5,#cfd6ea); }

/* miniatura da arte gerada */
.thumb-art{
  display:block; width:120px; height:76px; margin:7px 0 2px; border-radius:8px;
  background:linear-gradient(135deg,#FFC24D,#FFAE00 55%,#5A4410); position:relative; overflow:hidden;
}
.thumb-art::after{
  content:""; position:absolute; left:10px; bottom:9px; width:24px; height:24px; border-radius:50%;
  background:rgba(var(--tinta),.9); box-shadow:32px 8px 0 -3px rgba(var(--tinta),.75);
}

/* rótulo honesto sob o aparelho */
.phone__nota{
  position:absolute; z-index:5; left:50%; bottom:-14px; transform:translateX(-50%);
  white-space:nowrap; font-size:.66rem; color:var(--cd-text-mute);
  background:var(--cd-bg); border:1px dashed var(--cd-line-strong);
  padding:5px 12px; border-radius:999px;
}

/* Estado inicial: o JS revela cada passo em sequência */
.anim .step{ opacity:0; transform:translateY(8px) scale(.98); }
.anim .step.show{ opacity:1; transform:none; transition:opacity .38s ease, transform .38s cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion:reduce){
  .anim .step{ opacity:1; transform:none; }
  .typing{ display:none !important; }
}

/* =========================================================================
   HERO DA HOME: retrato do fundador com os números da marca
   ========================================================================= */
.figura{ position:relative; }
.figura .autor__retrato{ min-height:320px; }
.figura__stats{
  position:relative; z-index:2; margin-top:-24px;
  display:flex; flex-wrap:wrap; gap:9px; justify-content:center;
}
.figura__stats .chip{ background:var(--cd-surface); border-color:var(--cd-line-strong); }
.figura__nome{
  margin-top:16px; text-align:center; font-size:.88rem; color:var(--cd-text-mute);
}
.figura__nome b{ display:block; color:#fff; font-family:var(--cd-font-heading); font-size:1rem; }

/* Ecossistema: as frentes que sustentam a marca */
.eco{ display:grid; gap:var(--cd-s3); align-items:start; }
@media (min-width:720px){ .eco{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .eco{ grid-template-columns:repeat(4,1fr); } }
.eco__item{
  padding:var(--cd-s3); border-radius:var(--cd-r-md);
  background:rgba(var(--tinta),.03); border:1px solid var(--cd-line);
  border-top:2px solid var(--cd-accent);
}
.eco__item b{ display:block; font-family:var(--cd-font-heading); font-size:1rem; margin-bottom:6px; }
.eco__item span{ font-size:.92rem; color:var(--cd-text-soft); }

/* Manifesto */
.manifesto{
  max-width:720px; margin-inline:auto; text-align:center;
}
.manifesto p{
  font-family:var(--cd-font-heading); font-weight:600;
  font-size:clamp(1.2rem,3.2vw,1.7rem); line-height:1.45; text-wrap:balance;
}
.manifesto p + p{ margin-top:18px; color:var(--cd-text-soft); font-weight:400; font-size:clamp(1rem,2.4vw,1.12rem); }
.manifesto__risco{
  width:48px; height:3px; background:var(--cd-grad-accent);
  border-radius:2px; margin:0 auto var(--cd-s4);
}

/* Números da marca */
.numeros{ display:grid; gap:var(--cd-s3); text-align:center; }
@media (min-width:640px){ .numeros{ grid-template-columns:repeat(3,1fr); } }
.numero{
  padding:var(--cd-s4) var(--cd-s3); border-radius:var(--cd-r-lg);
  background:var(--cd-surface); border:1px solid var(--cd-line);
}
.numero b{
  display:block; font-family:var(--cd-font-heading); font-weight:800;
  font-size:clamp(2rem,5.5vw,2.7rem); line-height:1;
  background:var(--cd-grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.numero span{ display:block; margin-top:10px; color:var(--cd-text-soft); font-size:.94rem; }