/* Vitrine "Soluções na Prática": galeria, cartões, demos. Carregado só em /solucoes e /solucoes/*.
   Usa os mesmos tokens do site.css (cores e fontes). */
:root{--ok:#3ddc97;--warn:#f2b84b;--risk:#ff6b6b}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- selo de dados fictícios (aparece em todo cartão e em toda demo) ---- */
.badge-ficticio{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--warn);border:1px solid rgba(242,184,75,.45);background:rgba(242,184,75,.1);
  border-radius:999px;padding:4px 10px;line-height:1.2}
.badge-ficticio::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--warn)}
.hero-badge{margin-top:22px;color:var(--muted);font-size:.9rem;display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}

/* ---- filtros e galeria ---- */
.sol-filter{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.sol-filter[hidden]{display:none}
.chip-btn{font:inherit;font-weight:600;font-size:.9rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;transition:border-color .2s,color .2s,background .2s}
.chip-btn span{font-family:var(--font-mono);font-size:.72rem;opacity:.8}
.chip-btn:hover{border-color:var(--accent);color:var(--fg)}
.chip-btn[aria-pressed="true"],.chip-btn[aria-selected="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--fg)}
.sol-grid{display:grid;gap:18px;margin-top:34px;grid-template-columns:repeat(3,1fr)}
.sol-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .2s,transform .2s,background .2s}
.sol-card:hover,.sol-card:focus-within{border-color:var(--accent);background:var(--surface-2);transform:translateY(-3px)}
.sol-card[hidden]{display:none}
.sol-prev{position:relative;aspect-ratio:16/10;background:var(--bg-2);border-bottom:1px solid var(--line)}
.sol-prev svg,.sol-prev img{display:block;width:100%;height:100%}
.sol-prev img{object-fit:cover;object-position:left top}
.sol-prev:has(img) .badge-ficticio{top:auto;bottom:10px}
.sol-prev .badge-ficticio{position:absolute;left:10px;top:10px;font-size:.6rem;padding:3px 8px;background:rgba(6,7,8,.82)}
.sol-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.sol-body .tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.sol-body h3{font-size:1.1rem;line-height:1.2;margin-top:8px;font-weight:700;letter-spacing:-.01em}
.sol-body h3 a::after{content:"";position:absolute;inset:0}
.sol-body p:not(.tag){color:var(--muted);font-size:.93rem;margin-top:10px}
.sol-body .card-link{margin-top:auto;padding-top:14px}
.sol-all{margin-top:26px}

.demo-note{color:var(--muted);font-size:.85rem;padding:12px 4px 0;margin:0}

/* ---- abas "o que podemos automatizar" ---- */
.dept-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.dept-tabs[hidden]{display:none}
.dept{margin-top:26px}
.dept[hidden]{display:none}
.dept h3{font-size:1.2rem}
.dept-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.dept-list li{position:relative;padding:16px 18px 16px 44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  color:var(--muted);font-size:.95rem}
.dept-list li::before{content:"";position:absolute;left:18px;top:21px;width:12px;height:12px;border-radius:50%;border:2px solid var(--accent-2)}
.dept-list strong{color:var(--fg);font-weight:600}
.dept-note{color:var(--muted);font-size:.85rem;margin-top:16px;max-width:70ch}

/* ---- páginas com aplicação (layout: app) ---- */
.hero-app{padding-bottom:30px}
.demo-stage{padding-block:0 56px}
.wrap-wide{max-width:1240px}
.demo-lead{color:var(--muted);max-width:70ch;margin:0 0 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.sit{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;gap:12px;align-content:start}
.sit-q{font-family:var(--font-display);font-weight:800;font-size:1.08rem;line-height:1.3;margin:0}
.sit-a,.sit-d{color:var(--muted);font-size:.95rem;margin:0}.sit-a b,.sit-d b{color:var(--fg);font-weight:600}
.sit-d{border-top:1px solid var(--line);padding-top:12px}
.passos{list-style:none;counter-reset:s;margin:30px 0 0;padding:0;display:grid;gap:12px;max-width:820px}
.passos li{counter-increment:s;position:relative;padding:16px 18px 16px 62px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;gap:2px}
.passos li::before{content:counter(s);position:absolute;left:18px;top:16px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:600;font-size:.85rem;color:var(--accent-2);border:1px solid var(--accent)}
.passos b{font-weight:650}.passos span{color:var(--muted);font-size:.93rem}
.rotina{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:30px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.rotina-i{padding:20px;border-left:1px solid var(--line)}.rotina-i:first-child{border-left:0}
.rotina-i span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.rotina-i p{margin:8px 0 0;color:var(--muted);font-size:.93rem}.rotina-i b{color:var(--fg);font-weight:600}
.demo-app{margin-top:6px}
.app-fallback{color:var(--muted);font-size:.85rem}
.app-fallback img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}

/* ---- galeria: destaque principal, secundários e demais ---- */
.sol-board{display:grid;gap:18px;margin-top:34px;grid-template-columns:repeat(6,1fr)}
.sol-board .sol-card{grid-column:span 2}.sol-board .sol-card.medio{grid-column:span 3}.sol-board .sol-card.principal{grid-column:1/-1;flex-direction:row}
.sol-card.principal .sol-prev{flex:1.55;aspect-ratio:auto;min-height:360px;border-bottom:0;border-right:1px solid var(--line)}
.sol-card.principal .sol-body{flex:1;padding:34px;justify-content:center}
.sol-card.principal h3{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1}.sol-card.principal .sol-body p:not(.tag){font-size:1.02rem}
.sol-pontos{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.sol-pontos li{position:relative;padding-left:24px;color:var(--fg);font-size:.95rem}
.sol-pontos li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:50%;border:2px solid var(--accent-2)}
.sol-card.principal .card-link{margin-top:22px;padding-top:0}
.sol-card.medio h3{font-size:1.25rem}

/* ---- blocos das páginas de solução ---- */
.sit-4{grid-template-columns:repeat(4,1fr)}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.vs{border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--surface)}
.vs h3{font-size:1.1rem;margin-bottom:12px}.vs ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--muted);font-size:.95rem}
.vs li{position:relative;padding-left:22px}.vs li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%}
.vs-antes{border-color:rgba(255,107,107,.35)}.vs-antes li::before{background:var(--risk)}
.vs-depois{border-color:rgba(61,220,151,.35)}.vs-depois li::before{background:var(--ok)}
.papeis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.papeis>div{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--surface);display:grid;gap:6px;align-content:start}
.papeis b{font-family:var(--font-display);font-weight:800}.papeis span{color:var(--muted);font-size:.92rem}
.duvidas{display:grid;gap:10px;margin-top:26px;max-width:820px}
.duvidas details{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px 18px}
.duvidas summary{cursor:pointer;font-weight:600}.duvidas p{margin:10px 0 0;color:var(--muted)}
.rotina-5{grid-template-columns:repeat(5,1fr)}

@media(max-width:860px){
  .sol-board{grid-template-columns:1fr 1fr}.sol-board .sol-card,.sol-board .sol-card.medio{grid-column:span 1}
  .sol-board .sol-card.principal{grid-column:1/-1;flex-direction:column}.sol-card.principal .sol-prev{min-height:0;aspect-ratio:16/10;border-right:0;border-bottom:1px solid var(--line)}
  .sol-card.principal .sol-body{padding:22px}
  .sit-4,.papeis{grid-template-columns:1fr 1fr}.vs-grid{grid-template-columns:1fr}.rotina-5{grid-template-columns:1fr 1fr}.rotina-5 .rotina-i:nth-child(odd){border-left:0}.rotina-5 .rotina-i:nth-child(n+3){border-top:1px solid var(--line)}
  .sit-grid{grid-template-columns:1fr}
  .rotina{grid-template-columns:1fr 1fr}.rotina-i:nth-child(3){border-left:0}.rotina-i:nth-child(n+3){border-top:1px solid var(--line)}
  .sol-grid{grid-template-columns:1fr 1fr}
  .dept-list{grid-template-columns:1fr}
}
@media(max-width:560px){
  .sol-board{grid-template-columns:1fr}.sit-4,.papeis,.rotina-5{grid-template-columns:1fr}.rotina-5 .rotina-i{border-left:0}.rotina-5 .rotina-i+.rotina-i{border-top:1px solid var(--line)}
  .rotina{grid-template-columns:1fr}.rotina-i{border-left:0!important;border-top:1px solid var(--line)}.rotina-i:first-child{border-top:0}
  .sol-grid{grid-template-columns:1fr}
  .demo-body{padding:14px}
}