/* ===== BLOG =====
   Estilos so do blog. Na integracao, este arquivo inteiro entra no fim do
   style.css do site, como o bloco "BLOG", e as variaveis abaixo sobem para
   os blocos de tema do topo. Tudo o mais (menu, botoes, chat, rodape,
   cores) ja vem do style.css. */

html[data-theme="light"]{
  --pend-bg:rgba(255,190,40,.13); --pend-line:rgba(196,138,0,.55);
  --capa-a:rgba(34,236,255,.30); --capa-b:rgba(148,61,255,.26);
  --holofote:rgba(123,44,240,.45);
}
html[data-theme="dark"]{
  --pend-bg:rgba(255,200,70,.08); --pend-line:rgba(255,200,70,.42);
  --capa-a:rgba(34,236,255,.24); --capa-b:rgba(148,61,255,.34);
  --holofote:rgba(55,184,252,.55);
}

/* menu: Blog e a pagina atual */
.nav-links a[aria-current="page"]{color:var(--tx)}
.nav-links a[aria-current="page"]::after{width:100%}
.mobile-menu a[aria-current="page"]{color:var(--accent)}
/* com o sexto item o logo podia ser espremido em telas estreitas: ele nunca
   encolhe. O blog nao tem o botao "Conversa AI" no topo (o chat fica no fim
   da lista), entao os links empurram o tema para a direita */
.nav-in>a:first-child{flex:none}
.pg-blog .nav-links,.pg-materia .nav-links{margin-left:auto}

/* falas com link dentro (guia e mini chats) */
.cb-msg a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* falas que ainda vao aparecer: guardam o lugar (a pagina nao pula) e o
   "digitando" aparece dentro delas, com o V ao lado */
.cb-msg.oculta,.papo-ops.oculta{visibility:hidden;animation:none}
.cb-msg.oculta.digitando::before{visibility:visible}
.typing.dentro{visibility:visible;position:absolute;left:0;top:0}
.cb-msg .typing.dentro{margin-left:0}

/* ---- TOPO DA LISTA ---- */
/* o topo nao corta o que passa da borda (a lista da busca desce por cima da
   secao seguinte); quem fica preso e o brilho do fundo, no b-topo-fundo */
.b-topo{position:relative;padding:calc(79px + clamp(26px,5vh,60px)) 0 clamp(10px,2vh,24px)}
.b-topo-fundo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.b-topo .mesh{height:820px}
.b-topo>.wrap{z-index:5}
.b-topo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:center}
/* titulo em duas frases curtas, uma por linha, como as frases do trailer.
   A linha mais longa ("Mais inteligência!") mede cerca de 7 vezes o tamanho
   da fonte: cada faixa de tela tem um tamanho que cabe na coluna sem quebrar
   (medido de 320 a 1920 px). Se uma tela fugir da conta, a frase quebra em
   duas linhas, sem sair da tela */
.b-topo h1{font-size:clamp(40px,4.8vw,70px);line-height:1.02}
.b-topo h1 .h-linha{display:block;width:fit-content;max-width:100%}
.b-topo .lead{margin-top:20px}

.busca-caixa{position:relative;max-width:520px;margin-top:28px}
.busca{display:flex;align-items:center;gap:10px;height:54px;padding:0 8px 0 18px;
  border:1px solid var(--line-2);border-radius:999px;background:var(--surface);box-shadow:var(--shadow-s);
  color:var(--tx-3);transition:border-color .2s,box-shadow .2s}
.busca:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.busca svg{flex:none}
.busca input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;font-size:15.5px;color:var(--tx);outline:0}
.busca input::placeholder{color:var(--tx-3)}
.busca kbd{font:600 12px/1 ui-monospace,Consolas,monospace;color:var(--tx-3);border:1px solid var(--line-2);
  border-radius:7px;padding:5px 8px;margin-right:8px;transition:opacity .2s}
.busca:focus-within kbd{opacity:0}

/* etiqueta do assunto escolhido, dentro da barra */
.busca-tema{display:inline-flex;align-items:center;gap:5px;flex:none;max-width:52%;padding:4px 4px 4px 12px;border-radius:999px;
  background:var(--grad-btn);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;animation:cbEntra .2s ease-out}
.busca-tema[hidden]{display:none}
.busca-tema>span{overflow:hidden;text-overflow:ellipsis}
.busca-tema button{flex:none;width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.22);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.busca-tema button:hover{background:rgba(255,255,255,.36)}
.busca-tema button:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* lista que abre na busca: assuntos e, digitando, as materias que batem */
.busca-lista{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;padding:6px;
  border:1px solid var(--line-2);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-l);
  max-height:min(380px,58vh);overflow-y:auto;overscroll-behavior:contain;animation:blAbre .18s ease-out}
.busca-lista[hidden]{display:none}
@keyframes blAbre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.bl-rot{padding:8px 10px 4px;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--tx-3)}
.bl-item{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border:0;border-radius:12px;background:none;
  font:inherit;font-size:14.5px;line-height:1.3;color:var(--tx);text-align:left;cursor:pointer;transition:background .15s}
.bl-item:hover,.bl-item[aria-selected="true"]{background:var(--surface-2)}
.bl-item[aria-selected="true"]{box-shadow:inset 0 0 0 1px var(--line-2)}
.bl-ico{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;color:var(--accent);background:var(--accent-soft)}
.bl-t{flex:1;min-width:0}
.bl-t mark{background:none;color:var(--accent);font-weight:700}
.bl-mat .bl-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-item.atual .bl-t{font-weight:700;color:var(--accent)}
.bl-n{flex:none;font-size:12px;color:var(--tx-3);white-space:nowrap}
.bl-vazio{padding:14px 12px;font-size:14px;line-height:1.45;color:var(--tx-2)}

/* o guia no topo: o robo a esquerda (posto pelo blog.js em cima do slot) e
   a conversa a direita. Sem sobreposicao: o quadro do robo e transparente,
   mas recebe clique, e cobriria os botoes da conversa */
/* a conversa tem largura minima (os nomes dos assuntos cabem numa linha) e o
   robo fica com o que sobra ao lado, sem invadir os botoes */
.b-topo-guia{--chat-w:max(62%,340px);position:relative;display:flex;justify-content:flex-end;align-items:center;min-height:clamp(380px,50vh,470px)}
.guia-slot{position:absolute;left:-10%;top:50%;transform:translateY(-50%);width:calc(100% - var(--chat-w) + 8%);height:min(400px,86%);pointer-events:none}
.g-chat{position:relative;z-index:3;width:var(--chat-w);display:flex;flex-direction:column;border:1px solid var(--line-2);
  border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-l);overflow:hidden}
.g-log,.gp-log{display:flex;flex-direction:column;gap:9px;padding:16px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
/* tamanho fixo: a conversa e os botoes mudam a cada resposta, o cartao nao.
   A faixa de botoes nunca some (nem enquanto o guia "digita"); a conversa
   ocupa o resto e rola por dentro */
.g-chat{height:480px}
.g-log{flex:1 1 auto;min-height:0}
.g-log,.gp-log,.busca-lista{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.g-log .cb-msg,.gp-log .cb-msg{font-size:14px;max-width:92%}
/* botoes do guia em grade de duas colunas, todos do mesmo tamanho, com o
   icone do assunto e a quantidade de materias. O principal e o que sobra
   sozinho ocupam a linha inteira (o blog.js marca com "largo") */
.g-ops{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:12px 14px 14px;
  border-top:1px solid var(--line);min-height:62px;align-content:start}
.g-ops .cb-op{display:flex;align-items:center;gap:7px;width:100%;min-width:0;padding:7px 8px;border-radius:12px;
  border-color:var(--line-2);font-size:13.5px;line-height:1.25;text-align:left;text-decoration:none;
  transition:color .2s,border-color .2s,background .2s,transform .15s}
.g-ops .cb-op:hover:not(:disabled){color:var(--tx);border-color:var(--accent);background:var(--accent-soft)}
.g-ops .cb-op:active{transform:scale(.98)}
.g-ops .cb-op.largo{grid-column:1/-1;justify-content:center}
.g-ops .cb-op-pri,.g-ops .cb-op-pri:hover:not(:disabled){color:#fff;background:var(--grad-btn);border-color:transparent}
.op-ico{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;color:var(--accent);background:var(--accent-soft)}
.op-ico svg{width:15px;height:15px}
/* o nome nunca e cortado com reticencias: se faltar espaco, quebra a linha */
.op-t{min-width:0;white-space:normal;overflow-wrap:break-word}
.g-ops .cb-op:not(.largo) .op-t{flex:1}
.op-n{flex:none;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:700;text-align:center;
  color:var(--tx-3);background:var(--surface-2)}
.g-ops .cb-op.largo .op-n{margin-left:2px}

/* ---- MINI CHAT NAS DIVISOES ----
   A linha divisoria do site corta a conversa no meio; as falas ficam num
   fundo da cor da pagina, como se a linha passasse por tras delas. */
/* sem z-index: o granulado do site (body::before) passa por cima do fundo
   das falas tambem, senao elas viram um retangulo liso na pagina */
.papo{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:var(--maxw);margin:0 auto;padding:clamp(14px,2.4vw,30px) var(--gutter)}
.papo::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;transform:translateX(-50%);
  width:min(1120px,86%);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--line-2) 20%,var(--line-2) 80%,transparent)}
.papo-log{display:flex;flex-direction:column;gap:9px;width:min(100%,560px);padding:8px 18px;background:var(--bg)}
.papo-log .cb-msg{font-size:14.5px}
/* o V da Vonex ao lado de cada fala do guia, no alto da fala: assim o
   "digitando" (que aparece no alto do lugar guardado) fica junto dele */
.papo .cb-msg.bot,.g-log .cb-msg.bot,.gp-log .cb-msg.bot{position:relative;margin-left:36px}
.papo .cb-msg.bot::before,.g-log .cb-msg.bot::before,.gp-log .cb-msg.bot::before{content:"";position:absolute;left:-36px;top:0;
  width:28px;height:28px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 351'%3E%3Cpath fill='%23fff' d='M0 0H71L176 280L280 0H350L210 351H176V281H112Z'/%3E%3C/svg%3E") center/12px no-repeat,var(--grad-btn)}
.papo .typing,.g-log .typing,.gp-log .typing{margin-left:36px}
.papo-ops{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 14px;background:var(--bg);animation:cbEntra .28s ease-out}
.papo-ops .cb-op{text-decoration:none}

/* ---- CARDS ---- */
.b-sec .sec-head{margin-bottom:clamp(20px,2vw,28px)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,24px)}
.card{position:relative;perspective:1000px;min-width:0}
.card.some{display:none}
.card-a{position:relative;display:flex;flex-direction:column;height:100%;border-radius:var(--r-l);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .55s cubic-bezier(.16,.84,.3,1),box-shadow .35s,border-color .35s}
.card:hover .card-a{--ty:-4px;box-shadow:var(--shadow-l);border-color:var(--line-2)}
.card.inclina .card-a{transition:transform .12s linear,box-shadow .35s,border-color .35s}
.card-a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* luz que segue o mouse e borda em degrade so perto do cursor */
.card-a::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--mesh-a),transparent 50%)}
.card-a::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:1.5px;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--c1),var(--c3) 45%,transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.card:hover .card-a::after,.card:hover .card-a::before{opacity:1}

/* capa viva: orbitas finas como o globo do site, desenhadas pelo blog.js.
   Os pontos andam pelas orbitas so com o mouse em cima */
.card-capa{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2);border-bottom:1px solid var(--line);
  --gx:30%;--gy:30%;--hx:80%;--hy:70%}
.card-capa::before{content:"";position:absolute;inset:0;
  background:radial-gradient(40% 60% at var(--gx) var(--gy),var(--capa-a),transparent 70%),
             radial-gradient(45% 65% at var(--hx) var(--hy),var(--capa-b),transparent 70%);
  transition:transform .8s cubic-bezier(.16,.84,.3,1)}
.card-capa::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:14px 14px;
  -webkit-mask-image:radial-gradient(70% 80% at 65% 40%,#000,transparent 80%);mask-image:radial-gradient(70% 80% at 65% 40%,#000,transparent 80%)}
.card:hover .card-capa::before{transform:scale(1.12)}
.card-capa svg{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.capa-orb{fill:none;stroke:var(--line-2);stroke-width:1}
.capa-no{stroke:var(--surface);stroke-width:1.5}
.capa-no.n1{fill:var(--c1)}.capa-no.n2{fill:var(--c2)}.capa-no.n3{fill:var(--c3)}
.capa-ico-bg{fill:var(--surface);stroke:var(--line-2);stroke-width:1}
.capa-ico-anel{fill:none;stroke-width:1.6}
.capa-ico{fill:none;stroke:var(--tx);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.capa-centro{transition:transform .5s cubic-bezier(.3,1.5,.5,1);transform-box:fill-box;transform-origin:center}
.card:hover .capa-centro{transform:scale(1.08)}
.s1{stop-color:var(--c1)}.s2{stop-color:var(--c2)}.s3{stop-color:var(--c3)}

/* capa com foto: a foto nas cores originais, sem degrade por cima (pedido do
   Carlos em 22/10/2026). Com o mouse em cima ela aproxima um pouco; a luz e a
   borda que seguem o mouse sao as do card (.card-a::after e ::before) */
.card-capa.com-foto::before,.card-capa.com-foto::after{display:none}
.card-capa.com-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.16,.84,.3,1)}
.card:hover .card-capa.com-foto img{transform:scale(1.06)}
.capa-selo{position:absolute;z-index:2;left:14px;bottom:12px;width:50px;height:50px;
  filter:drop-shadow(0 6px 14px rgba(10,12,40,.28));transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.capa-selo svg{display:block;width:100%;height:100%}
.card:hover .capa-selo{transform:scale(1.08) rotate(-4deg)}

.card-corpo{display:flex;flex-direction:column;gap:10px;flex:1;padding:18px 22px 22px}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--tx-3)}
.card-meta .tempo{margin-left:auto;white-space:nowrap}
.tag{display:inline-block;font-size:12px;font-weight:600;line-height:1.4;color:var(--tx-2);border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;background:var(--bg)}
.selo{display:inline-block;font-size:11.5px;font-weight:700;line-height:1.5;color:#fff;background:var(--grad-btn);border-radius:999px;padding:3px 10px}
.selo-breve{color:var(--accent);background:var(--accent-soft)}
.card h3{font-size:clamp(18px,1.4vw,20.5px);line-height:1.22;letter-spacing:-.02em;color:var(--tx)}
.card-resumo{font-size:14.5px;line-height:1.55;color:var(--tx-2)}
.card-ir{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;font-size:14px;font-weight:600;color:var(--accent)}
.card-ir svg{transition:transform .25s}
.card:hover .card-ir svg{transform:translateX(4px)}

/* ja lido: marcado quando a pessoa chega ao fim da materia */
.card.lido .card-capa .lido-selo{display:flex}
.lido-selo{display:none;position:absolute;z-index:2;top:12px;right:12px;align-items:center;gap:5px;padding:4px 10px 4px 8px;
  border-radius:999px;background:var(--surface);box-shadow:var(--shadow-s);font-size:11.5px;font-weight:700;color:var(--tx-2)}
.lido-selo svg{color:var(--accent)}

/* destaque: duas colunas, capa ao lado do texto */
.card.destaque{grid-column:span 2}
.card.destaque .card-a{flex-direction:row}
.card.destaque .card-capa{flex:0 0 50%;aspect-ratio:auto;min-height:280px;border-bottom:0;border-right:1px solid var(--line)}
.card.destaque .card-corpo{padding:26px 28px 28px;justify-content:center}
.card.destaque h3{font-size:clamp(22px,2vw,30px);line-height:1.12}
.card.destaque .card-resumo{font-size:15.5px}

/* "Me surpreenda": o card escolhido ganha um anel que pulsa */
.card.holofote .card-a{box-shadow:0 0 0 2px var(--accent),var(--shadow-l);animation:holofote 1.2s ease-out 2}
@keyframes holofote{0%{box-shadow:0 0 0 2px var(--accent),0 0 0 0 var(--holofote)}100%{box-shadow:0 0 0 2px var(--accent),0 0 0 22px transparent}}

.vazio{margin-top:8px;padding:28px;border:1px dashed var(--line-2);border-radius:var(--r-m);text-align:center;color:var(--tx-2);font-size:15px}
.link-btn{font:inherit;color:var(--accent);font-weight:600;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* Na pratica: trilho que rola de lado */
.pratica .sec-head{align-items:flex-end}
.trilho-nav{display:flex;gap:8px}
.trilho-bt{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);
  background:var(--bg);color:var(--tx);cursor:pointer;transition:border-color .2s,color .2s,opacity .2s}
.trilho-bt:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.trilho-bt:disabled{opacity:.3;cursor:default}
.trilho-bt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.trilho{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 3.2);gap:24px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 6px 24px;margin:-8px -6px 0;scrollbar-width:none;
  /* o encaixe conta a folga de 6px da borda, senao o trilho para em 6px e
     a seta de voltar acende logo no comeco */
  scroll-padding:0 6px}
.trilho::-webkit-scrollbar{display:none}
/* as bordas somem num degrade quando ha mais cards para aquele lado */
.trilho.mais-dir{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 80px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 80px),transparent)}
.trilho.mais-esq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 80px);mask-image:linear-gradient(90deg,transparent,#000 80px)}
.trilho.mais-esq.mais-dir{-webkit-mask-image:linear-gradient(90deg,transparent,#000 80px,#000 calc(100% - 80px),transparent);mask-image:linear-gradient(90deg,transparent,#000 80px,#000 calc(100% - 80px),transparent)}
.trilho .card{scroll-snap-align:start}
.card-p .card-a{background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.card-p .card-capa{--gx:75%;--gy:25%;--hx:20%;--hy:80%}
/* selos dos tipos: noticia em tom solido, case com contorno */
.selo-noticia{color:var(--bg);background:var(--tx)}
.selo-case{color:var(--tx);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}

/* ---- NOTICIAS ----
   Como num portal: a noticia mais nova grande, com foto, titulo e subtitulo,
   e as seguintes menores. No computador as menores ficam ao lado da grande,
   com a foto em miniatura; no tablet, lado a lado embaixo dela, com a foto
   em cima; no celular, em lista embaixo dela. Quem e a grande depende da
   ordem das que estao a mostra (o filtro esconde com .some), por isso o
   ":nth-child(... of :not(.some))". */
.noticias-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.4vw,20px)}
/* sozinha, ela pega a largura toda */
.noticias-grade:not(:has(.card-n:nth-child(2 of :not(.some)))) .card-n{grid-column:1/-1}
.card-n .card-meta time{font-weight:600;color:var(--tx-2)}
.card-fonte{font-size:12.5px;line-height:1.4;color:var(--tx-3)}
.card-n .card-resumo{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* a grande: foto larga em cima, titulo e subtitulo maiores */
.card-n:nth-child(1 of :not(.some)) .card-capa{aspect-ratio:16/9}
.card-n:nth-child(1 of :not(.some)) .card-corpo{padding:22px 26px 26px;gap:12px}
.card-n:nth-child(1 of :not(.some)) h3{font-size:clamp(24px,2.3vw,34px);line-height:1.12}
.card-n:nth-child(1 of :not(.some)) .card-resumo{font-size:16px;-webkit-line-clamp:4}
/* as pequenas: a foto em miniatura ao lado do texto */
.card-n:not(:nth-child(1 of :not(.some))) .card-a{flex-direction:row}
.card-n:not(:nth-child(1 of :not(.some))) .card-capa{flex:0 0 38%;aspect-ratio:auto;min-height:118px;border-bottom:0;border-right:1px solid var(--line)}
.card-n:not(:nth-child(1 of :not(.some))) .card-corpo{padding:14px 16px 16px;gap:6px}
.card-n:not(:nth-child(1 of :not(.some))) h3{font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.25}
.card-n:not(:nth-child(1 of :not(.some))) .card-resumo{font-size:13.5px;line-height:1.45;-webkit-line-clamp:2}
.card-n:not(:nth-child(1 of :not(.some))) .card-fonte,
.card-n:not(:nth-child(1 of :not(.some))) .capa-selo,
.card-n:not(:nth-child(1 of :not(.some))) .card-meta .tempo{display:none}
/* so duas a mostra (depois do filtro): lado a lado, as duas grandes. A
   pequena sozinha ao lado da grande ficava esticada na altura dela */
@media(min-width:781px){
  .noticias-grade:has(.card-n:nth-child(2 of :not(.some))):not(:has(.card-n:nth-child(3 of :not(.some)))){grid-template-columns:repeat(2,minmax(0,1fr))}
  .noticias-grade:has(.card-n:nth-child(2 of :not(.some))):not(:has(.card-n:nth-child(3 of :not(.some)))) .card-n .card-a{flex-direction:column}
  .noticias-grade:has(.card-n:nth-child(2 of :not(.some))):not(:has(.card-n:nth-child(3 of :not(.some)))) .card-n .card-capa{flex:none;aspect-ratio:16/9;min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .noticias-grade:has(.card-n:nth-child(2 of :not(.some))):not(:has(.card-n:nth-child(3 of :not(.some)))) .card-n .card-corpo{padding:22px 26px 26px;gap:12px}
  .noticias-grade:has(.card-n:nth-child(2 of :not(.some))):not(:has(.card-n:nth-child(3 of :not(.some)))) .card-n h3{font-size:clamp(21px,1.9vw,28px);line-height:1.15}
  .noticias-grade:has(.card-n:nth-child(2 of :not(.some))):not(:has(.card-n:nth-child(3 of :not(.some)))) .card-n .card-resumo{font-size:15.5px;line-height:1.5;-webkit-line-clamp:3}
  .noticias-grade:has(.card-n:nth-child(2 of :not(.some))):not(:has(.card-n:nth-child(3 of :not(.some)))) .card-n .card-fonte,
  .noticias-grade:has(.card-n:nth-child(2 of :not(.some))):not(:has(.card-n:nth-child(3 of :not(.some)))) .card-n .card-meta .tempo{display:revert}
  /* uma so: a foto ao lado do texto, para nao virar um painel da altura da tela */
  .noticias-grade:not(:has(.card-n:nth-child(2 of :not(.some)))) .card-n .card-a{flex-direction:row}
  .noticias-grade:not(:has(.card-n:nth-child(2 of :not(.some)))) .card-n .card-capa{flex:0 0 55%;aspect-ratio:auto;min-height:340px;border-bottom:0;border-right:1px solid var(--line)}
  .noticias-grade:not(:has(.card-n:nth-child(2 of :not(.some)))) .card-n .card-corpo{justify-content:center;padding:28px 32px 32px}
}
/* computador: a grande a esquerda e as pequenas ao lado. Da quinta em
   diante, as noticias seguem em linhas de duas, no formato pequeno */
@media(min-width:1101px){
  .noticias-grade{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  .card-n{grid-column:2}
  .card-n:nth-child(1 of :not(.some)){grid-column:1;grid-row:span 3}
  .card-n:nth-child(n+5 of :not(.some)){grid-column:auto}
  /* as pequenas esticam ate a altura da grande: o texto fica no meio */
  .noticias-grade .card-n:not(:nth-child(1 of :not(.some))) .card-corpo{justify-content:center}
  /* menos de quatro a mostra: a grande ocupa so as linhas que existem ao lado */
  .noticias-grade:not(:has(.card-n:nth-child(4 of :not(.some)))) .card-n:nth-child(1 of :not(.some)){grid-row:span 2}
  .noticias-grade:not(:has(.card-n:nth-child(3 of :not(.some)))) .card-n:nth-child(1 of :not(.some)){grid-row:auto}
  /* so tres: as duas pequenas dividem a altura da grande, entao a foto vai
     para cima e cresce, no lugar de virar uma tira alta ao lado do texto */
  .noticias-grade:has(.card-n:nth-child(3 of :not(.some))):not(:has(.card-n:nth-child(4 of :not(.some)))) .card-n:not(:nth-child(1 of :not(.some))) .card-a{flex-direction:column}
  .noticias-grade:has(.card-n:nth-child(3 of :not(.some))):not(:has(.card-n:nth-child(4 of :not(.some)))) .card-n:not(:nth-child(1 of :not(.some))) .card-capa{flex:1 1 0;aspect-ratio:auto;min-height:150px;border-right:0;border-bottom:1px solid var(--line)}
  .noticias-grade:has(.card-n:nth-child(3 of :not(.some))):not(:has(.card-n:nth-child(4 of :not(.some)))) .card-n:not(:nth-child(1 of :not(.some))) .card-corpo{flex:none}
}
/* tablet: ao lado da grande as pequenas ficavam espremidas. A grande vai
   para o alto, deitada (foto ao lado do texto), e as pequenas ficam lado a
   lado embaixo dela, com a foto em cima */
@media(min-width:781px) and (max-width:1100px){
  .noticias-grade{grid-template-columns:repeat(3,minmax(0,1fr))}
  .noticias-grade:has(.card-n:nth-child(3 of :not(.some))):not(:has(.card-n:nth-child(4 of :not(.some)))){grid-template-columns:repeat(2,minmax(0,1fr))}
  .noticias-grade:has(.card-n:nth-child(3 of :not(.some))) .card-n:nth-child(1 of :not(.some)){grid-column:1/-1}
  .noticias-grade:has(.card-n:nth-child(3 of :not(.some))) .card-n:nth-child(1 of :not(.some)) .card-a{flex-direction:row}
  .noticias-grade:has(.card-n:nth-child(3 of :not(.some))) .card-n:nth-child(1 of :not(.some)) .card-capa{flex:0 0 52%;aspect-ratio:auto;min-height:300px;border-bottom:0;border-right:1px solid var(--line)}
  .noticias-grade:has(.card-n:nth-child(3 of :not(.some))) .card-n:nth-child(1 of :not(.some)) .card-corpo{justify-content:center}
  .noticias-grade .card-n:not(:nth-child(1 of :not(.some))) .card-a{flex-direction:column}
  .noticias-grade .card-n:not(:nth-child(1 of :not(.some))) .card-capa{flex:none;aspect-ratio:16/9;min-height:0;border-right:0;border-bottom:1px solid var(--line)}
}
/* fora da lista (em "Continue lendo"), a noticia e um card como os outros */
.cards-3 .card-n{grid-column:auto}
.cards-3 .card-n .card-a{flex-direction:column}
.cards-3 .card-n .card-capa{flex:none;aspect-ratio:16/9;min-height:0;border-right:0;border-bottom:1px solid var(--line)}

/* ---- NO INSTAGRAM ----
   Tres posts por vez, ate nove, e o card do perfil no fim. Sem o esmaecido
   das bordas: as setas ja dizem que ha mais */
.redes .sec-head{align-items:flex-end}
.redes .lead a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.redes-ctrl{display:flex;align-items:center;gap:14px}
.redes-trilho{grid-auto-columns:calc((100% - 48px) / 3)}
.redes-trilho.mais-dir,.redes-trilho.mais-esq{-webkit-mask-image:none;mask-image:none}
.post{display:flex;flex-direction:column;min-width:0;scroll-snap-align:start;border-radius:var(--r-l);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);color:inherit;text-decoration:none;
  transition:transform .35s cubic-bezier(.16,.84,.3,1),box-shadow .35s,border-color .35s}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-l);border-color:var(--line-2)}
.post:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.post-img{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--surface-2);border-bottom:1px solid var(--line)}
.post-img img{display:block;width:100%;height:100%;object-fit:cover}
.post-vazio{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);
  background:radial-gradient(60% 70% at 30% 30%,var(--capa-a),transparent 70%),radial-gradient(60% 70% at 75% 75%,var(--capa-b),transparent 70%)}
.post-vazio svg{width:44px;height:44px;opacity:.85}
.post-corpo{display:flex;flex-direction:column;gap:10px;flex:1;padding:14px 16px 16px}
.post-txt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;line-height:1.5;color:var(--tx)}
.post-pe{display:flex;align-items:center;gap:6px;margin-top:auto;font-size:12.5px;color:var(--tx-3)}
.post-pe svg{width:14px;height:14px}
.post-mais{justify-content:center;gap:12px;padding:26px;background:linear-gradient(160deg,var(--surface),var(--surface-2))}
.post-mais-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;color:#fff;background:var(--grad-btn)}
.post-mais-ico svg{width:26px;height:26px}
.post-mais b{font-size:clamp(18px,1.4vw,21px);line-height:1.2;color:var(--tx)}
.post-mais .card-ir{margin-top:0}
.post-mais:hover .card-ir svg{transform:translateX(4px)}
.redes .pendencia{margin-top:8px}

/* lugar do robo ao lado do chat de contato, como no site */
/* o lugar do guia entra no vao da grade, para a molecula ficar colada no
   formulario (a borda dela ja tem folga propria) */
.contato-slot{height:clamp(300px,30vw,400px);margin-top:clamp(12px,2vw,28px);margin-right:calc(-1 * clamp(24px,4vw,60px))}

/* ---- O GUIA (molecula, fala, botao e painel) ----
   O desenho da molecula tem tamanho fixo (470x384, o mesmo do blog.js; a
   folga dos lados e em cima e para os pulsos e pulos) e so encolhe por
   transform: no topo e no contato a partir do canto de cima a esquerda, no
   canto da tela a partir do canto de baixo a direita */
.guia{position:absolute;z-index:60;top:0;left:0;width:470px;height:384px;transform-origin:0 0;
  opacity:0;transition:opacity .8s ease;pointer-events:none}
.guia.pronto{opacity:1}
.guia[hidden]{display:none}
/* o desenho nao pega clique: a caixa tem folga transparente que passa por
   cima da beirada dos chats. O guia-molecula.js ve se o clique caiu no
   corpo da molecula */
.guia canvas{display:block;width:100%;height:100%;pointer-events:none}
/* no canto da tela ela fica por cima do texto: ali o desenho segura o
   clique (senao abriria o que esta embaixo); o guia-molecula.js repassa os
   cliques na folga transparente */
.guia.doca canvas{pointer-events:auto}
.guia.doca{position:fixed;top:auto;left:auto;right:clamp(4px,1vw,16px);bottom:clamp(2px,.8vw,12px);transform-origin:100% 100%;z-index:95}
.guia.escondido{opacity:0!important;pointer-events:none}
.guia.escondido canvas{pointer-events:none}

/* o balao fica fora do robo, para nao encolher junto; o blog.js o posiciona */
.guia-fala{position:absolute;z-index:61;top:0;left:0;width:max-content;max-width:230px;padding:10px 13px;border-radius:14px;
  border-bottom-right-radius:5px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-m);
  font-size:13.5px;line-height:1.42;color:var(--tx);opacity:0;transform:translateY(6px) scale(.95);transform-origin:right bottom;
  transition:opacity .25s,transform .25s;pointer-events:none}
.guia-fala.fixo{position:fixed;z-index:96}
.guia-fala.dir{border-bottom-right-radius:14px;border-bottom-left-radius:5px;transform-origin:left bottom}
.guia-fala.cima{border-radius:14px;transform-origin:center bottom}
.guia-fala.on{opacity:1;transform:none}

.guia-fab{position:fixed;right:16px;bottom:16px;z-index:96;width:54px;height:54px;border-radius:50%;border:0;display:grid;place-items:center;
  color:#fff;background:var(--grad-btn);box-shadow:0 12px 30px -10px rgba(148,61,255,.7);cursor:pointer;
  transform:scale(0);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.guia-fab.on{transform:none}
.guia-fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* com o robo no canto, o botao some mas continua alcancavel pelo teclado */
.guia-fab.so-teclado{opacity:0;pointer-events:none;right:60px;bottom:60px}
.guia-fab.so-teclado:focus-visible{opacity:1}

.guia-painel{position:fixed;right:clamp(8px,1.4vw,22px);bottom:172px;z-index:100;width:min(340px,calc(100vw - 24px));
  display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);
  box-shadow:var(--shadow-l);overflow:hidden;transform-origin:right bottom;animation:gpAbre .3s cubic-bezier(.2,.9,.3,1.15)}
.guia-painel[hidden]{display:none}
/* o painel tambem tem tamanho fixo, pela mesma razao do chat do topo; em
   tela baixa ele encolhe para nao passar por baixo do menu */
.guia-painel{height:430px;max-height:calc(100vh - 270px)}
.sem-robo .guia-painel{bottom:82px;max-height:calc(100vh - 180px)}
@keyframes gpAbre{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.gp-log{flex:1 1 auto;min-height:0}
.gp-x{margin-left:auto;flex:none;width:32px;height:32px;border:0;border-radius:9px;background:none;color:var(--tx-3);font-size:22px;line-height:1;cursor:pointer}
.gp-x:hover{color:var(--tx);background:var(--surface-3)}
.gp-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- MATERIA ---- */
.leitura{position:fixed;top:79px;left:0;right:0;height:3px;z-index:109;pointer-events:none}
.leitura i{display:block;width:100%;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--grad)}

.m-topo{position:relative;overflow:hidden;padding:calc(79px + clamp(22px,4vh,52px)) 0 clamp(8px,1.6vh,20px)}
.m-topo .mesh{height:680px}
.m-topo-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,64px);align-items:end}
.m-topo-guia{position:relative;height:clamp(250px,32vh,320px)}
.m-topo-guia .guia-slot{inset:0;width:auto;height:auto;transform:none}
.trilha{display:flex;align-items:center;gap:8px;margin-bottom:18px;font-size:13.5px;font-weight:600;color:var(--tx-3)}
.trilha a{transition:color .2s}
.trilha a:hover{color:var(--accent)}
.m-topo h1{font-size:clamp(32px,3.5vw,52px);line-height:1.04;max-width:20ch}
.m-topo .lead{margin-top:18px;max-width:60ch}
.m-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:22px;font-size:13.5px;color:var(--tx-3)}
.m-meta b{color:var(--tx-2);font-weight:600}
.m-meta a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.m-grid{display:grid;grid-template-columns:minmax(0,720px) minmax(220px,270px);justify-content:space-between;
  gap:clamp(32px,5vw,96px);padding-top:clamp(18px,2.4vw,30px);padding-bottom:clamp(30px,4vw,56px)}
.m-texto{font-size:clamp(16.5px,1.12vw,18px);line-height:1.72;color:var(--tx-2)}
.m-texto>p{margin:0 0 1.1em}
.m-texto h2{font-size:clamp(24px,2.2vw,32px);line-height:1.12;color:var(--tx);margin:1.9em 0 .7em;scroll-margin-top:110px}
.m-texto b{color:var(--tx);font-weight:700}

.resposta{position:relative;margin-bottom:28px;padding:20px 22px 20px 26px;border-radius:var(--r-m);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line)}
.resposta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-d)}
.resposta p{margin:0;color:var(--tx)}
.resposta .resposta-rot{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13.5px;font-weight:700;color:var(--accent)}

.tabela-rola{overflow-x:auto;margin:22px 0 30px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.tabela{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.45}
.tabela th,.tabela td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tabela tbody tr:last-child>*{border-bottom:0}
.tabela thead th{font-size:13.5px;font-weight:700;color:var(--tx);background:var(--surface-2)}
.tabela thead th:last-child{color:var(--accent)}
.tabela tbody th{font-weight:600;color:var(--tx);white-space:nowrap}
.tabela td{color:var(--tx-2)}
.tabela td:last-child{color:var(--tx);background:var(--accent-soft)}
.tabela tbody tr{transition:background .2s}
.tabela tbody tr:hover>*{background:var(--surface-2)}

.pendencia{margin:0 0 1.1em;padding:14px 16px;border:1.5px dashed var(--pend-line);border-radius:12px;background:var(--pend-bg);
  font-size:14.5px;line-height:1.55;color:var(--tx)}

.sinais{list-style:none;display:grid;gap:10px;margin:0 0 1.4em}
.sinais li{position:relative;padding:12px 16px 12px 48px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  font-size:16px;line-height:1.5;color:var(--tx);transition:border-color .3s,transform .3s}
.sinais li::before{content:"";position:absolute;left:15px;top:14px;width:20px;height:20px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/11px no-repeat,var(--grad-d)}
.sinais li:hover{border-color:var(--line-2);transform:translateX(3px)}

/* passos: o numero acende quando a pessoa passa por ele */
.passos{list-style:none;counter-reset:p;margin:22px 0 30px}
.passos li{counter-increment:p;position:relative;padding:0 0 22px 56px}
.passos li::before{content:counter(p);position:absolute;left:0;top:-3px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;font-weight:700;color:var(--accent);background:var(--surface);border:1px solid var(--line-2);
  transition:background .4s,color .4s,border-color .4s}
.passos li::after{content:"";position:absolute;left:18px;top:38px;bottom:2px;width:1px;background:var(--line-2)}
.passos li:last-child{padding-bottom:0}
.passos li:last-child::after{display:none}
.passos li b{display:block}
.passos li.feito::before{color:#fff;background:var(--grad-d);border-color:transparent}

.papo-texto{max-width:none;margin:30px 0;padding:clamp(10px,1.6vw,18px) 0}
.papo-texto::before{width:100%}
.papo-texto .papo-log{padding:8px 14px}
/* o teste cresce a cada resposta: em vez da linha no meio, um quadro */
.papo-quiz{padding:16px 10px 18px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface-2)}
.papo-quiz::before{display:none}
.papo-quiz .papo-log,.papo-quiz .papo-ops{background:transparent}
/* o teste tem altura fixa: cabe a pergunta e a resposta, e as falas antigas
   sobem e rolam por dentro, em vez de o quadro crescer a cada resposta. A
   faixa dos botoes guarda o lugar de uma fileira, mesmo vazia */
.papo-quiz .papo-log{height:210px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.papo-quiz .papo-log>*{flex-shrink:0}
.papo-quiz .papo-ops{height:44px;align-items:center}

.na-pratica{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:34px 0;padding:24px 26px;overflow:hidden;
  border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-m);
  transition:transform .3s,box-shadow .3s}
.na-pratica::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--capa-b),transparent 70%)}
.na-pratica b{font-size:clamp(19px,1.6vw,23px);line-height:1.2;letter-spacing:-.02em;color:var(--tx)}
.na-pratica>span:not(.selo):not(.card-ir){font-size:15px;line-height:1.5;color:var(--tx-2)}
.na-pratica:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)}
.na-pratica:hover .card-ir svg{transform:translateX(4px)}
.na-pratica:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.m-texto .faq{margin-top:8px}
.m-texto .q button h3{font-size:clamp(16px,1.3vw,18px)}

/* coluna do lado: indice, progresso e compartilhar */
.m-lado-in{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px}
.m-lado-rot{font-size:13px;font-weight:700;color:var(--tx)}
.indice-lista{list-style:none;display:flex;flex-direction:column;border-left:1px solid var(--line)}
.indice-lista a{display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;font-size:14px;line-height:1.35;
  color:var(--tx-3);transition:color .2s,border-color .2s}
.indice-lista a:hover{color:var(--tx)}
.indice-lista a.passou{color:var(--tx-2)}
.indice-lista a.ativo{color:var(--tx);font-weight:600;border-left-color:var(--accent)}
.progresso{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.progresso-anel{position:relative;flex:none;width:46px;height:46px}
.progresso-anel svg{width:100%;height:100%;transform:rotate(-90deg)}
.pa-fundo{fill:none;stroke:var(--surface-3);stroke-width:3.5}
.pa-cheio{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:119.4;
  stroke-dashoffset:calc(119.4px * (1 - var(--p,0)))}
.progresso-anel b{position:absolute;inset:0;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--tx)}
.progresso p{font-size:13px;line-height:1.35;color:var(--tx-2)}
.compartilha{display:flex;flex-wrap:wrap;gap:8px}
.compartilha .cb-op{font-size:13px;padding:7px 13px}

.indice-movel{display:none;margin:0 0 26px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.indice-movel summary{padding:13px 16px;font-size:15px;font-weight:700;color:var(--tx);cursor:pointer}
.indice-movel .indice-lista{margin:0 16px 14px}

.continua{border-top:1px solid var(--line);background:var(--surface-2)}
.continua .card-a{background:var(--surface)}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---- PECAS DAS MATERIAS ----
   Desenhos feitos em HTML (e nao em imagem) para o texto continuar legivel
   no celular e mudar de cor junto com o tema. */
.figura{margin:28px 0 30px}
.figura figcaption{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--tx-3)}

/* nota com data: quando a regra de terceiros foi conferida */
.nota{margin:0 0 1.1em;padding:12px 16px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;
  background:var(--accent-soft);font-size:14.5px;line-height:1.55;color:var(--tx)}

/* linha do tempo (regua de cobranca e parecidos) */
.linha-tempo{list-style:none;position:relative;display:grid;gap:12px}
/* a linha e os pontos ficam fora dos cartoes, a esquerda, para a linha
   correr inteira de cima a baixo */
.linha-tempo::before{content:"";position:absolute;left:8px;top:20px;bottom:20px;width:2px;border-radius:2px;background:var(--grad-d);opacity:.55}
.linha-tempo li{position:relative;margin-left:30px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.linha-tempo li::before{content:"";position:absolute;left:-29px;top:18px;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:3px solid var(--accent)}
.lt-quando{display:block;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--accent)}
.lt-o-que{display:block;margin-top:2px;font-size:16px;font-weight:700;line-height:1.3;color:var(--tx)}
.lt-como{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--tx-2)}
.canais{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.canal{display:inline-flex;align-items:center;font-size:12px;font-weight:700;line-height:1;padding:5px 10px;border-radius:999px;
  color:var(--accent);background:var(--accent-soft)}

/* dois lados lado a lado (multicanal x omnichannel, antes x depois) */
.comparativo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cmp-lado{padding:18px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.cmp-lado.bom{border-color:transparent;box-shadow:0 0 0 1.5px var(--accent),var(--shadow-s)}
.cmp-rot{display:block;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--tx-3)}
.cmp-lado.bom .cmp-rot{color:var(--accent)}
.cmp-lado b{display:block;margin:4px 0 10px;font-size:17px;line-height:1.3;color:var(--tx)}
.cmp-lado ul{list-style:none;display:grid;gap:7px}
.cmp-lado li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.45;color:var(--tx-2)}
.cmp-lado li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.cmp-lado.bom li::before{background:var(--accent)}

/* fluxo em etapas com seta entre elas */
.fluxo{list-style:none;counter-reset:f;display:grid;grid-template-columns:repeat(var(--colunas,4),minmax(0,1fr));gap:22px}
.fluxo li{counter-increment:f;position:relative;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.fluxo li::before{content:counter(f);display:grid;place-items:center;width:28px;height:28px;margin-bottom:10px;border-radius:50%;
  font-size:13px;font-weight:700;color:#fff;background:var(--grad-d)}
.fluxo li:not(:last-child)::after{content:"";position:absolute;right:-17px;top:50%;width:12px;height:12px;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:translateY(-50%) rotate(45deg)}
.fluxo b{display:block;font-size:15px;line-height:1.3;color:var(--tx)}
.fluxo span{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--tx-2)}

/* exemplo de mensagem RCS: so ilustracao, sem marca real nem preco */
.mock-rcs{max-width:340px;margin:0 auto;border:1px solid var(--line-2);border-radius:26px;background:var(--surface-2);padding:14px;
  box-shadow:var(--shadow-m)}
.mr-topo{display:flex;align-items:center;gap:10px;padding:4px 4px 12px;border-bottom:1px solid var(--line)}
.mr-av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--grad-d)}
.mr-topo b{display:block;font-size:14px;color:var(--tx)}
.mr-topo small{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--accent)}
.mr-card{margin-top:12px;border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.mr-img{height:120px;background:radial-gradient(60% 80% at 25% 30%,var(--capa-a),transparent 70%),radial-gradient(60% 80% at 80% 70%,var(--capa-b),transparent 70%),var(--surface-3)}
.mr-txt{padding:12px 14px;font-size:14px;line-height:1.45;color:var(--tx)}
.mr-txt b{display:block;margin-bottom:2px}
.mr-bts{display:grid;border-top:1px solid var(--line)}
.mr-bts span{padding:10px;text-align:center;font-size:13.5px;font-weight:700;color:var(--accent);border-top:1px solid var(--line)}
.mr-bts span:first-child{border-top:0}
.mr-sugestoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mr-sugestoes span{font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--line-2);color:var(--accent);background:var(--surface)}

/* guia relacionado, no fim das materias Na pratica */
.na-pratica.guia-rel .selo{color:var(--accent);background:var(--accent-soft)}

/* fontes consultadas, no fim de cada materia */
.fontes{margin-top:2.2em;padding-top:1.4em;border-top:1px solid var(--line)}
.m-texto .fontes h2{margin-top:0;font-size:clamp(20px,1.8vw,24px)}
.fontes ol{margin:0;padding-left:22px;display:grid;gap:8px}
.fontes li{font-size:14px;line-height:1.5;color:var(--tx-2)}
.fontes a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.fontes p{margin-top:12px;font-size:13px;color:var(--tx-3)}

/* compartilhar no LinkedIn: a previa imita o post no feed, com a frase em
   cima e o card da materia, como o LinkedIn mostra */
.partilha{margin-top:34px;padding:22px 24px 24px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-m)}
.partilha-tit{margin-bottom:14px;font-size:clamp(19px,1.6vw,23px);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--tx)}
.partilha-post{max-width:520px;padding:14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg)}
.partilha-frase{margin-bottom:12px;font-size:14.5px;line-height:1.5;color:var(--tx)}
.partilha-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.partilha-card img{display:block;width:100%;height:auto;aspect-ratio:1.91/1;object-fit:cover}
.partilha-card-t{padding:10px 12px 2px;font-size:14px;font-weight:700;line-height:1.3;color:var(--tx)}
.partilha-card-d{padding:0 12px 10px;font-size:12px;color:var(--tx-3)}
.partilha-ops{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.partilha-ops .cb-op{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.partilha-dica{font-size:13.5px;color:var(--tx-2)}
.partilha-dica:empty{display:none}

@media(max-width:780px){
  .comparativo{grid-template-columns:1fr}
  .fluxo{grid-template-columns:1fr;gap:20px}
  .fluxo li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-15px;transform:translateX(-50%) rotate(135deg)}
}

/* ---- MOVIMENTO REDUZIDO ---- */
@media(prefers-reduced-motion:reduce){
  .card-a,.card-capa::before,.capa-centro,.guia-fab,.guia-fala,.passos li::before,.card-capa.com-foto img,.capa-selo{transition:none}
  .card.holofote .card-a,.guia-painel,.papo-ops,.busca-lista,.busca-tema{animation:none}
  .trilho,.g-log,.gp-log{scroll-behavior:auto}
}

/* ---- TELAS ---- */
@media(max-width:1100px){
  .b-topo-grid{grid-template-columns:1fr}
  .b-topo h1{font-size:clamp(44px,6.2vw,64px)}
  .b-topo-guia{min-height:380px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trilho{grid-auto-columns:calc((100% - 24px) / 2.2)}
  .redes-trilho{grid-auto-columns:calc((100% - 24px) / 2)}
  .m-grid{grid-template-columns:minmax(0,1fr);max-width:calc(760px + 2 * var(--gutter))}
  .m-lado{display:none}
  .indice-movel{display:block}
}
@media(max-width:780px){
  .b-topo{padding-top:calc(79px + 22px)}
  /* minimo de 30 px: abaixo de 320 px de tela (ou com barra de rolagem) a
     frase ainda cabe numa linha */
  .b-topo h1{font-size:clamp(30px,10.5vw,48px)}
  .b-topo-guia{min-height:0;margin-top:4px}
  /* no celular o tema e o menu ficavam colados no logo, longe da borda */
  .theme-btn{margin-left:auto}
  .guia-slot,.contato-slot{display:none}
  .g-chat{width:100%;height:470px}
  .g-ops{padding:10px 12px 12px;gap:6px}
  .g-ops .cb-op{padding:7px 7px;gap:6px;font-size:13px}
  .op-ico{width:24px;height:24px;border-radius:7px}
  .op-ico svg{width:14px;height:14px}
  .op-n{min-width:0;padding:1px 6px;font-size:11px}
  .busca-lista{max-height:min(360px,52vh)}
  .bl-item{font-size:14px}
  .busca{height:50px}
  .busca kbd{display:none}
  .cards,.cards-3{grid-template-columns:1fr}
  .card.destaque{grid-column:auto}
  .card.destaque .card-a{flex-direction:column}
  .card.destaque .card-capa{flex:none;aspect-ratio:16/9;min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .card.destaque .card-corpo{padding:18px 22px 22px}
  .pratica .sec-head{align-items:flex-start}
  .trilho-nav{display:none}
  .trilho{grid-auto-columns:84%;gap:14px}
  /* no celular: a grande no alto e as outras em lista, com a foto ao lado */
  .card-n:nth-child(1 of :not(.some)) .card-corpo{padding:18px 20px 20px}
  .card-n:not(:nth-child(1 of :not(.some))) .card-capa{flex-basis:34%;min-height:104px}
  .card-n:not(:nth-child(1 of :not(.some))) .card-corpo{padding:12px 14px 14px}
  /* no Instagram as setas ficam tambem no celular */
  .redes .sec-head{align-items:flex-start}
  .redes-ctrl{width:100%;justify-content:flex-end}
  .redes .trilho-nav{display:flex}
  .redes-trilho{grid-auto-columns:82%}
  .partilha{padding:18px}
  .papo-log{padding:8px 0}
  .papo .cb-msg{max-width:88%}
  .m-topo-grid{grid-template-columns:1fr}
  .m-topo-guia{display:none}
  .m-texto{font-size:16.5px}
  .tabela{font-size:14px}
  .na-pratica{padding:20px}
  /* no celular as falas quebram em mais linhas: um pouco mais de altura */
  .papo-quiz .papo-log{height:240px}
}
/* telas bem estreitas (abaixo de 360 px): sai o icone, para o nome do
   assunto caber numa linha so */
@media(max-width:359px){
  .g-ops .op-ico{display:none}
  .g-ops .cb-op:not(.largo){justify-content:center;text-align:center}
}