/* ==========================================================================
   Workshop (Gestao Baseada em Raciocinio) — componentes proprios da pagina.
   Tudo o que ja existia (hero, sympt, dimgrid, fill, fmtcard, differ, steps,
   faq, about) vem de components.css e verticais.css; aqui ficam so os quatro
   componentes que nascem nesta pagina: a ficha do hero, os cartoes de
   pergunta, a agenda do dia e as colunas de adequacao.
   Criado 2026-08-29.
   ========================================================================== */

/* --- Ficha do produto no hero (ocupa o lugar da foto) --- */
.wfacts{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-top:3px solid var(--reddish-brown);border-radius:var(--radius-lg);padding:var(--space-8)}
.wfacts-name{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h2);color:var(--off-white);margin:0 0 var(--space-3);line-height:var(--lh-snug)}
.wfacts-sub{font-size:var(--fs-small);color:var(--sky-blue);margin:0 0 var(--space-6);line-height:var(--lh-normal)}
.wfacts-list{margin:0;display:flex;flex-direction:column;gap:var(--space-4)}
.wfacts-list>div{border-top:1px solid rgba(255,255,255,.14);padding-top:var(--space-4)}
.wfacts-list dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-blue);margin-bottom:3px}
.wfacts-list dd{margin:0;font-size:var(--fs-small);color:var(--off-white);line-height:var(--lh-snug)}

/* --- Barra de diagnostico com o numero de mercado --- */
.diagnosis .dg-num{font-family:var(--font-serif);font-weight:600;font-size:clamp(40px,5vw,64px);line-height:1;color:var(--sky-blue);margin:0 0 var(--space-4)}
.diagnosis .dg-text{margin:0 auto;max-width:68ch;font-size:var(--fs-body);color:var(--off-white);line-height:var(--lh-normal)}
.diagnosis .dg-text b{color:var(--sky-blue)}
.diagnosis .dg-src{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--sky-blue);margin:var(--space-5) auto 0;text-align:center;max-width:none}

/* --- Agenda do dia --- */
.agenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.ag-item{display:grid;grid-template-columns:96px 1fr;gap:var(--space-6);align-items:start;background:#fff;border:1px solid var(--dust-grey);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6)}
.ag-time{font-family:var(--font-mono);font-size:var(--fs-small);font-weight:600;letter-spacing:.04em;color:var(--reddish-brown);padding-top:2px}
.ag-body h3{margin:0 0 var(--space-2);font-size:var(--fs-h3);color:var(--gunmetal)}
.ag-body p{margin:0;font-size:var(--fs-small);color:var(--dim-grey);line-height:var(--lh-snug)}
.ag-item--break{background:var(--dust-grey-light);border-style:dashed}
.ag-item--break .ag-body h3{font-size:var(--fs-small);color:var(--dim-grey);margin:0}

/* --- Para quem e / para quem nao e --- */
.fitcols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.fitcol{background:#fff;border:1px solid var(--dust-grey);border-radius:var(--radius-lg);padding:var(--space-8)}
.fitcol h3{margin:0 0 var(--space-5);font-size:var(--fs-h3)}
.fitcol ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-4)}
.fitcol li{position:relative;padding-left:26px;font-size:var(--fs-small);color:var(--gunmetal);line-height:var(--lh-snug)}
.fitcol li::before{position:absolute;left:0;top:-1px;font-weight:700}
.fitcol--yes{border-top:3px solid var(--prussian-blue)}
.fitcol--yes h3{color:var(--prussian-blue)}
.fitcol--yes li::before{content:"+";color:var(--prussian-blue);font-size:18px}
.fitcol--no{border-top:3px solid var(--dust-grey);background:var(--dust-grey-light)}
.fitcol--no h3{color:var(--dim-grey)}
.fitcol--no li{color:var(--dim-grey)}
.fitcol--no li::before{content:"\2212";color:var(--dim-grey);font-size:18px}

/* --- Formatos em tres colunas (o .formats do tema e de cinco) --- */
.wformats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.wformats .fmtcard h3{font-size:var(--fs-h3);margin-bottom:var(--space-4)}
.wformats .fmtcard p{font-size:var(--fs-small);line-height:var(--lh-normal)}

/* --- Linha de convite antes do contato alternativo --- */
.wcta-line{text-align:center;max-width:60ch;margin:var(--space-10) auto var(--space-2);font-family:var(--font-serif);font-style:italic;font-size:var(--fs-body);color:var(--sky-blue)}

/* --- Responsivo --- */
@media (max-width:980px){
	.fitcols,.wformats{grid-template-columns:1fr}
}
@media (max-width:720px){
	.ag-item{grid-template-columns:1fr;gap:var(--space-2)}
}

/* --- Agenda em duas partes (manha: os quatro apoios; tarde: as quatro
   interacoes). O cabecalho de parte separa os dois blocos e diz o criterio de
   cada um, para o leitor nao ler a manha como um fluxo sequencial. --- */
.ag-part{margin:var(--space-8) 0 var(--space-5)}
.ag-part-lbl{display:block;font-family:var(--font-mono);font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--reddish-brown);line-height:var(--lh-snug);margin-bottom:var(--space-3)}
.ag-part-note{margin:0;font-size:var(--fs-small);color:var(--dim-grey);line-height:var(--lh-normal)}
.ag-part-note b{color:var(--gunmetal)}
.ag-part--pm{margin-top:var(--space-10);padding-top:var(--space-8);border-top:1px solid var(--dust-grey)}

/* Blocos da tarde: mesma legibilidade da manha, com a faixa que os marca
   como as quatro interacoes. */
.ag-item--pm{border-left:3px solid var(--reddish-brown);background:var(--sky-tint-solid);border-color:var(--sky-blue);border-left-color:var(--reddish-brown)}
.ag-item--pm .ag-body h3{color:var(--prussian-blue)}

/* --- Os quatro apoios em uma linha (o .dimgrid do tema e 2x2, pensado para
   cartoes com mais texto; aqui eles sao curtos e cabem lado a lado). --- */

/* --- Cartoes da agenda sobre a secao tint: o branco passa a ter contraste. --- */
.section--tint .ag-item{border-color:var(--dust-grey)}

/* --- Menos ar entre a chamada da secao e a lista de sintomas: os cartoes sao
   a continuacao da frase "E ainda assim:", nao um bloco novo. --- */
.wprob .section-head{margin-bottom:var(--space-4)}

/* --- Icones dos cartoes escuros: o simbolo carrega stroke="currentColor" como
   atributo, que vence a herança do CSS, e alguns miolos usam fill="currentColor".
   Definir a cor do texto do cartao resolve os dois de uma vez. --- */

/* --- FAQ: o tema limita a caixa a 860px e o paragrafo a 70ch, o que trunca a
   linha bem antes da borda da coluna. Este arquivo so carrega na pagina do
   workshop, entao a soltura vale so aqui. --- */
.faq{max-width:none}
.faq details p{max-width:none}