/*
 * Social Cabin · páginas de caso (pré-visualização, 12-Out-2026)
 * Base: _shared/site.css. Cada caso tem uma sub-paleta tirada do mundo do cliente,
 * definida no <body class="caso-..."> e usada só nos painéis do caso (arte, direção, maquetes).
 * O resto da página fica no registo loja da sc-marca.
 * Contraste (WCAG) de cada par de texto verificado: ver comentários por caso.
 */

/* ---------- Sub-paletas ---------- */
/* congelados: papel de embrulho, verde de toldo, vermelho de letreiro. tinta/papel 14.5, verde/papel 8.4, vermelho/papel 6.2 */
.caso-congelados { --k-bg: #F3EBDD; --k-ink: #1E1B18; --k-accent: #A3271F; --k-deep: #1F4A3C; --k-on-deep: #F3EBDD; --k-deco: #C8902E; --k-soft: #5E5A52; }
/* dor crónica: bege dos cartões antigos, linha fina castanha, ferrugem. castanho/bege 11.2, ferrugem/bege 6.1 */
.caso-dor { --k-bg: #EFE7DF; --k-ink: #3B2A22; --k-accent: #8A3F22; --k-deep: #3B2A22; --k-on-deep: #EFE7DF; --k-deco: #B98A6E; --k-soft: #6B5A50; }
/* osteopata: linho, ameixa da farda, rosa barro e lavanda. ameixa/linho 10.0, ameixa/rosa 6.5, ameixa/lavanda 7.8 */
.caso-osteopata { --k-bg: #F2ECE4; --k-ink: #46304F; --k-accent: #46304F; --k-deep: #46304F; --k-on-deep: #F2ECE4; --k-deco: #DDB9A9; --k-deco-2: #D9D0E3; --k-soft: #6B5A50; }
/* produto digital: azul noite com âmbar claro. creme/noite 15.0, âmbar claro/noite 9.0 */
.caso-produto { --k-bg: #111A2E; --k-ink: #F2EEE6; --k-accent: #D9B48A; --k-deep: #111A2E; --k-on-deep: #F2EEE6; --k-deco: #2A3654; --k-soft: #AEB6C8; }

/* ---------- Topo do caso ---------- */
.case-hero .wrap { align-items: center; }
.case-hero .back { display: flex; width: max-content; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 22px; }
.case-hero .back svg { width: 16px; height: 16px; transform: rotate(180deg); }
.case-hero .back:hover { color: var(--forest); }
.case-hero .facts { margin-bottom: 0; }
.case-art { position: relative; border-radius: var(--radius-media); background: var(--k-bg); color: var(--k-ink); padding: clamp(18px, 3vw, 32px); box-shadow: var(--shadow-media); overflow: hidden; min-width: 0; }
.case-art img { border-radius: 12px; }
.case-art:has(.tag) { padding-bottom: 60px; }
.case-art .tag { position: absolute; left: 14px; bottom: 14px; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: rgba(26,26,23,.78); color: #F2EEE6; }

/* ---------- Faixa da direção ---------- */
.direcao { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-card); background: var(--k-bg); color: var(--k-ink); }
.direcao h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; color: var(--k-ink); }
.direcao h2 em { color: var(--k-accent); }
.direcao .kicker { color: var(--k-accent); }
.direcao .kicker .num { color: var(--k-ink); }
.direcao p { color: var(--k-ink); margin-top: 12px; max-width: 46ch; font-size: 16.5px; }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.swatch { border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.35); }
.swatch i { display: block; height: 76px; }
.swatch span { display: block; padding: 8px 10px 10px; font-size: 13px; line-height: 1.35; color: var(--k-ink); }
.swatch b { display: block; font-size: 13.5px; }
.caso-produto .swatch { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }

/* ---------- Capítulos do processo ---------- */
.process-nav { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 26px; }
.process-nav a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--paper); border: 1px solid rgba(201,193,176,.7); font-size: 14.5px; font-weight: 700; color: var(--forest); transition: transform .5s var(--spring); }
.process-nav a:hover { transform: translateY(-2px); }
.process-nav a b { font: italic 500 15px/1 var(--serif); color: var(--amber-deep); }
.chap { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: start; padding: 72px 0; border-top: 1px solid var(--line); }
.chap:first-of-type { border-top: 0; padding-top: 0; }
.chap.flip > :first-child { order: 2; }
.chap h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.03; letter-spacing: -.025em; }
.chap .txt > p { color: var(--ink-soft); margin-top: 16px; max-width: 52ch; }
.done { list-style: none; display: grid; gap: 10px; margin-top: 22px; }
.done li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); font-size: 16px; }
.done li svg { flex: none; width: 20px; height: 20px; color: var(--amber-deep); margin-top: 2px; }
.done li b { color: var(--forest); }
.vis { min-width: 0; display: grid; gap: 14px; }
.vis figcaption, .cap { font-size: 13.5px; color: var(--muted); }
.panel { border-radius: var(--radius-media); background: var(--k-bg); color: var(--k-ink); padding: clamp(18px, 3vw, 28px); box-shadow: var(--shadow-media); min-width: 0; }
.panel h3 { color: var(--k-ink); font-size: 22px; }
.panel p, .panel li { color: var(--k-ink); }
.panel .soft { color: var(--k-soft); }
.panel.deep { background: var(--k-deep); color: var(--k-on-deep); }
.panel.deep h3, .panel.deep p, .panel.deep li { color: var(--k-on-deep); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.two > * { min-width: 0; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.three > *, .four > * { min-width: 0; }
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shot { border-radius: 14px; box-shadow: var(--shadow-media); width: 100%; height: auto; }

/* Listas dentro dos painéis */
.klist { list-style: none; display: grid; gap: 8px; margin-top: 12px; font-size: 15px; }
.klist li { display: flex; gap: 10px; align-items: flex-start; }
.klist li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--k-accent); margin-top: 8px; }
.panel.deep .klist li::before { background: var(--k-deco); }
.klist.no li::before { background: transparent; border: 1.5px solid var(--k-soft); }

/* Cartões de direção (as três propostas) */
.dir-card { border-radius: 16px; padding: 16px; display: grid; gap: 8px; align-content: start; border: 1px solid rgba(0,0,0,.08); min-height: 170px; }
.dir-card .l { font: 700 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.dir-card b { font: 500 20px/1.1 var(--serif); }
.dir-card p { font-size: 14px; line-height: 1.45; }
.dir-card .chosen { justify-self: start; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.08); }

/* Linha do processo (passos numerados horizontais) */
.flow { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: f; }
.flow li { counter-increment: f; background: var(--paper); border: 1px solid rgba(201,193,176,.7); border-radius: 18px; padding: 18px; position: relative; }
.flow li::before { content: counter(f); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--k-deep); color: var(--k-on-deep); font: italic 500 17px/1 var(--serif); margin-bottom: 12px; }
.flow b { display: block; color: var(--forest); font-size: 16.5px; }
.flow span { color: var(--ink-soft); font-size: 15px; }

/* Conversa (maquete) */
.chat { display: grid; gap: 10px; }
.bubble { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.bubble.me { justify-self: end; background: var(--k-accent); color: #FFFCF7; border-bottom-right-radius: 5px; }
.bubble.them { justify-self: start; background: #FFFCF7; color: var(--k-ink); border: 1.5px solid var(--k-ink); border-bottom-left-radius: 5px; }
.bubble small { display: block; font-size: 12px; opacity: .8; margin-top: 4px; }
.chat .who { font-size: 12px; color: var(--k-soft); letter-spacing: .06em; }
.chat .who.r { justify-self: end; }

/* Calendário de semanas */
.weeks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.week { aspect-ratio: 4 / 5; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; font-size: 11.5px; line-height: 1.25; min-width: 0; overflow: hidden; }
.week b { font: italic 500 15px/1 var(--serif); }
.week.texto { background: var(--k-bg); color: var(--k-ink); border: 1px solid rgba(70,48,79,.25); }
.week.foto { color: #F2ECE4; background:
  radial-gradient(60% 50% at 40% 40%, rgba(242,236,228,.35), transparent 70%),
  linear-gradient(160deg, #8C7A86, #46304F); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); margin-top: 10px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Destaques (círculos) */
.highlights { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
.highlights li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: start; }
.highlights img, .highlights .hl { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid rgba(70,48,79,.3); object-fit: cover; }
.highlights .hl { display: grid; place-items: center; background: #B9C4AE; color: #46304F; }
.highlights .hl svg { width: 24px; height: 24px; }
.highlights b { display: block; color: var(--k-ink); font-size: 15px; }
.highlights span { display: block; color: var(--k-soft); font-size: 13.5px; line-height: 1.4; }

/* Cartões tipográficos redesenhados (maquetes, sem conteúdo do cliente) */
.mock { aspect-ratio: 4 / 5; border-radius: 12px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 9%; box-shadow: var(--shadow-media); min-width: 0; }
.mock .k { font: 700 9.5px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.mock .t { margin-top: 8px; font: 500 clamp(14px, 1.3vw, 19px)/1.1 var(--serif); overflow-wrap: break-word; letter-spacing: -.01em; text-wrap: balance; }
.mock .t em { font-weight: 400; }
.mock .s { margin-top: 8px; font-size: 10.5px; line-height: 1.35; }
.mock.linha { background: var(--k-bg); color: var(--k-ink); }
.mock.linha::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--k-deco); opacity: .8; }
.mock.linha > * { position: relative; background: var(--k-bg); }
.mock.linha .t em { color: var(--k-accent); }
.mock.escuro { background: #1B1512; color: #EFE7DF; }
.mock.escuro .t em { color: #E3B79B; }
.mock.selo { background: #EFE7DF; color: var(--k-ink); padding-top: 26%; }
.mock.selo .stamp { position: absolute; right: 7%; top: 6%; width: 40px; height: 40px; border-radius: 50%; border: 1.5px dashed var(--k-accent); display: grid; place-items: center; font: 700 7.5px/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--k-accent); text-align: center; transform: rotate(-12deg); background: transparent; }
.mock-note { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.mock-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }

/* Fases (rendimento, lançamento) */
.phases { list-style: none; display: grid; gap: 10px; }
.phase { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 18px 20px; border-radius: 18px; background: var(--paper); border: 1px solid rgba(201,193,176,.7); }
.phase .when { font: italic 500 18px/1.2 var(--serif); color: var(--amber-deep); }
.phase b { display: block; color: var(--forest); font-size: 16.5px; }
.phase span { color: var(--ink-soft); font-size: 15.5px; }

/* Pipeline do lançamento */
.pipe { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pipe li { position: relative; border-radius: 14px; padding: 14px 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: var(--k-ink); min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.pipe li b { font: italic 500 22px/1 var(--serif); color: var(--k-accent); }
.pipe li span { font-size: 13.5px; line-height: 1.3; font-weight: 700; }
.pipe svg { width: 22px; height: 22px; color: var(--k-accent); }
.pipe li.on { background: rgba(217,180,138,.14); border-color: rgba(217,180,138,.5); }

/* Caixa "o que tirámos" */
.hidden-note { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.hidden-note svg { width: 28px; height: 28px; color: var(--amber-deep); }
.hidden-note h2 { font-size: 24px; }
.hidden-note p { color: var(--ink-soft); margin-top: 6px; }

/* Outros casos */
.more-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.more-cases .tile h3 { font-size: 22px; }
.case-chip { display: inline-flex; gap: 4px; align-self: flex-start; }
.case-chip i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }

@media (max-width: 980px) {
  .direcao, .chap, .more-cases { grid-template-columns: 1fr; gap: 28px; }
  .chap { padding: 56px 0; }
  .chap.flip > :first-child { order: 0; }
  .highlights { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .swatches { grid-template-columns: 1fr 1fr; }
  .two, .flow { grid-template-columns: 1fr; }
  .three { grid-template-columns: 1fr 1fr; }
  .four { grid-template-columns: 1fr 1fr; }
  .weeks { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .week { font-size: 0; padding: 6px; }
  .week b { font-size: 13px; }
  .highlights { grid-template-columns: 1fr; }
  .phase { grid-template-columns: 1fr; gap: 6px; }
  .pipe { grid-template-columns: 1fr 1fr; }
  .hidden-note { grid-template-columns: 1fr; }
}