/* =====================================================================
   AS TRES PORTAS - 25/09/2026
   Complemento do artigo.css para as paginas "Quero entender",
   "Preciso de ajuda" e "Estudo ou trabalho com isso".
   Usa as mesmas variaveis (--sec, --line, --plate...) do artigo.css.
   ===================================================================== */

.porta main.artigo .wrap{ max-width:880px; }

.bloco{ margin:56px 0; }
.bloco > h2{ margin-bottom:8px; }
.bloco > .sub{ color:var(--muted); margin:0 0 22px; font-size:16px; }

/* abas de navegacao dentro da pagina */
.atalhos{ display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; }
.atalhos a{ font-size:14px; padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  color:var(--text); text-decoration:none; background:var(--plate); }
.atalhos a:hover{ border-color:var(--sec); color:var(--sec); }

/* grade de cartoes */
.cartoes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.cartao{ display:block; background:var(--plate); border:1px solid var(--line); border-radius:14px;
  padding:18px; color:var(--text); text-decoration:none; transition:border-color .2s, transform .2s; }
.cartao:hover{ border-color:var(--sec); transform:translateY(-2px); }
.cartao b{ display:block; font-size:17px; margin-bottom:6px; color:var(--text); }
.cartao span{ display:block; color:var(--muted); font-size:14.5px; line-height:1.55; }
.cartao .tag{ display:inline-block; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sec); margin-bottom:8px; }

/* leituras rapidas (carrosseis ja publicados) */
.leitura{ background:var(--plate); border:1px solid var(--line); border-radius:16px; margin:0 0 18px; overflow:hidden; }
.leitura .fita{ display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; padding:14px 14px 6px;
  -webkit-overflow-scrolling:touch; }
.leitura .fita img{ flex:0 0 78%; max-width:78%; scroll-snap-align:start; border-radius:10px; display:block;
  aspect-ratio:4/5; object-fit:cover; background:var(--bg-2); }
.leitura .dica{ font-size:12.5px; color:var(--muted); padding:0 16px 8px; }
.leitura details{ padding:0 16px 14px; }
.leitura summary{ cursor:pointer; color:var(--sec); font-size:14.5px; list-style:none; }
.leitura summary::-webkit-details-marker{ display:none; }
.leitura .txt{ white-space:pre-line; color:var(--text); font-size:15.5px; line-height:1.7; margin-top:10px; }
@media (min-width:760px){ .leitura .fita img{ flex-basis:44%; max-width:44%; } }

/* chips (temas / o que pesa hoje) */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font:inherit; font-size:15px; padding:10px 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--plate); color:var(--text); }
.chip:hover{ border-color:var(--sec); }
.chip.on{ background:var(--sec); border-color:var(--sec); color:#0a0d11; font-weight:600; }

.painel{ margin-top:18px; background:var(--plate); border:1px solid var(--line); border-left:3px solid var(--sec);
  border-radius:12px; padding:18px 20px; }
.painel ul{ margin:10px 0 0 18px; }
.painel li{ margin:6px 0; line-height:1.55; }
.painel .acoes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

.btn-linha{ display:inline-block; padding:11px 18px; border-radius:10px; border:1px solid var(--sec);
  color:var(--sec); text-decoration:none; font-weight:600; font-size:15px; }
.btn-linha:hover{ background:var(--secGlow); }

/* perguntas (duvidas) e glossario */
.perguntas details{ border-bottom:1px solid var(--line); padding:14px 2px; }
.perguntas summary{ cursor:pointer; font-weight:600; font-size:16.5px; list-style:none; position:relative; padding-right:26px; }
.perguntas summary::-webkit-details-marker{ display:none; }
.perguntas summary::after{ content:'+'; position:absolute; right:4px; top:0; color:var(--sec); font-size:20px; }
.perguntas details[open] summary::after{ content:'\2212'; }
.perguntas details p{ margin:10px 0 0; color:var(--text); line-height:1.7; }

.glossario{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.glossario div{ background:var(--plate); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.glossario b{ color:var(--sec); display:block; margin-bottom:4px; }
.glossario span{ color:var(--muted); font-size:14.5px; line-height:1.55; }

/* passos (como funciona) */
.passos{ counter-reset:p; display:grid; gap:12px; }
.passos div{ counter-increment:p; background:var(--plate); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px 16px 58px; position:relative; }
.passos div::before{ content:counter(p); position:absolute; left:16px; top:14px; width:28px; height:28px;
  border-radius:50%; background:var(--sec); color:#0a0d11; font-weight:700; display:grid; place-items:center; }
.passos b{ display:block; margin-bottom:4px; }
.passos span{ color:var(--muted); line-height:1.6; }

/* assuntos do consultorio (temas do Estudio) */
.assunto{ border:1px solid var(--line); border-radius:12px; margin:0 0 10px; background:var(--plate); }
.assunto summary{ cursor:pointer; padding:14px 18px; font-weight:600; list-style:none; }
.assunto summary::-webkit-details-marker{ display:none; }
.assunto summary small{ display:block; font-weight:400; color:var(--muted); margin-top:4px; font-size:14px; }
.assunto ul{ margin:0 18px 16px 36px; columns:2 260px; column-gap:28px; }
.assunto li{ margin:5px 0; break-inside:avoid; line-height:1.5; color:var(--text); }

.carregando{ color:var(--muted); font-size:14.5px; }
.aviso-cvv{ border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:var(--plate); }

/* ajustes de 25/09 depois do primeiro print */
.porta .artigo-topo .eyebrow{ display:table; margin:0 auto 18px; }
.porta main.artigo p a, .porta .painel a:not(.btn):not(.btn-linha){ color:var(--sec); text-decoration:underline; text-underline-offset:3px; }
.cartoes.dois{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }