/* ═══ CASES · estilo da vitrine ═════════════════════════════════════════
   Estava como <style> dentro de cases/index.html. Movido para ca em 31/08:
   pagina do site nao carrega CSS inline (D-SI-GEO-05 / feedback_pagina_do_site
   _veste_o_css_do_site). Serve o indice e as 9 paginas de case. */


  /* ── CASES PAGE ────────────────────────────────────────────────────────────── */
  .cases-hero { padding: 160px 0 80px; position: relative; overflow: hidden; }
  .cases-hero .orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(224,27,138,.16), transparent 70%); top: -10%; left: -8%; }
  .cases-hero .orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(43,44,184,.18), transparent 70%); top: 20%; right: -8%; }
  .cases-hero-content { position: relative; z-index: 1; max-width: 900px; }
  .cases-hero h1 { font-family: var(--fh); font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1.05; margin-bottom: 24px; }
  .cases-hero h1 .gradient-text { display: inline; }
  .cases-hero p { font-size: 17px; color: var(--text2); line-height: 1.7; max-width: 660px; }

  .cases-list { padding: 60px 0 100px; }
  .case-block { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 80px 0; border-top: 1px solid var(--border); }
  .case-block:first-child { border-top: none; padding-top: 30px; }
  .case-block.reverse { grid-template-columns: 1fr 1fr; direction: rtl; }
  .case-block.reverse > * { direction: ltr; }

  /* ═══ CASE PREVIEW · COMPOSIÇÃO EDITORIAL RICA ═══ */
  .case-preview { aspect-ratio: 4/5; border-radius: var(--r3); position: relative; overflow: hidden; transition: transform .3s; box-shadow: 0 30px 80px rgba(0,0,0,.4); display: block; cursor: none; }
  .case-preview:hover { transform: translateY(-6px); }
  .case-preview:hover .preview-browser { transform: rotate(-3deg) translateY(-4px); }
  .case-preview:hover .preview-mascot { transform: scale(1.04) rotate(-2deg); }

  /* Camadas de fundo · orbs/glow */
  .preview-glow-1, .preview-glow-2 { position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none; }

  /* TOP ROW · selo + numeração */
  .preview-top { position: absolute; top: 28px; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 5; }
  .preview-eyebrow { font-family: var(--fb); font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; opacity: 0.9; padding: 7px 14px; border-radius: 14px; background: rgba(0,0,0,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); display: inline-flex; align-items: center; gap: 8px; }
  .preview-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
  .preview-case-num { font-family: var(--fh); font-weight: 900; font-size: 80px; line-height: 0.85; letter-spacing: -0.04em; opacity: 0.18; }

  /* WORDMARK GIGANTE em camada própria */
  .preview-wordmark { position: absolute; left: 28px; bottom: 24px; font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; z-index: 5; }
  .preview-wordmark em { font-style: italic; opacity: 0.85; }

  /* MASCOTE · centralizado, em destaque */
  .preview-mascot { position: absolute; transition: transform .35s; z-index: 4; }

  /* MINI BROWSER FLUTUANTE · simula preview do manual */
  .preview-browser { position: absolute; background: white; border-radius: 8px; box-shadow: 0 22px 50px rgba(0,0,0,.45); transition: transform .35s; overflow: hidden; z-index: 6; }
  .preview-browser-bar { padding: 6px 8px; background: #f1f5f9; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid #e6eef7; }
  .preview-browser-dot { width: 5px; height: 5px; border-radius: 50%; }
  .preview-browser-content { padding: 0; min-height: 80px; }

  /* PALETA flutuante */
  .preview-swatches { position: absolute; display: flex; gap: 4px; z-index: 6; }
  .preview-swatches > span { width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(255,255,255,.4); box-shadow: 0 4px 12px rgba(0,0,0,.2); }

  /* PÍLULAS de entregáveis flutuando */
  .preview-pills { position: absolute; display: flex; flex-wrap: wrap; gap: 6px; z-index: 6; }
  .preview-pill { font-family: var(--fb); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 5px 10px; border-radius: 14px; background: rgba(0,0,0,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.16); white-space: nowrap; }


  /* ═══ PADRÃO ÚNICO DE PREVIEW · 30/08 ═══════════════════════════════════
     Vale para todo .case-preview que NÃO tem composição própria (soulprint /
     spacepool). Antes disso cada card resolvia sozinho e o resultado era um
     mini-browser achatado boiando no vazio — a queixa do Lucas em 30/08. */
  .case-preview:not(.soulprint):not(.spacepool) {
    background: linear-gradient(158deg, #171a3a 0%, #0d0f26 55%, #08091a 100%);
  }
  .case-preview:not(.soulprint):not(.spacepool) .preview-glow-1 {
    width: 340px; height: 340px; right: -110px; top: -110px;
    background: radial-gradient(circle, rgba(224,27,138,.30) 0%, transparent 70%);
  }
  .case-preview:not(.soulprint):not(.spacepool) .preview-glow-2 {
    width: 300px; height: 300px; left: -100px; bottom: -90px;
    background: radial-gradient(circle, rgba(43,44,184,.38) 0%, transparent 70%);
  }
  /* o mini-browser deixa de ser tira: ocupa a área útil, sempre no mesmo lugar */
  .case-preview:not(.soulprint):not(.spacepool) .preview-browser {
    left: 7%; right: 7%; top: 15.5%; width: auto;
    transform: rotate(-2deg);
  }
  .case-preview:not(.soulprint):not(.spacepool) .preview-browser img {
    width: 100%; height: 300px; object-fit: cover; object-position: top center;
    display: block;
  }
  .case-preview:not(.soulprint):not(.spacepool):hover .preview-browser {
    transform: rotate(-2deg) translateY(-6px);
  }
  /* pills e wordmark no mesmo lugar em todos */
  .case-preview:not(.soulprint):not(.spacepool) .preview-pills {
    left: 28px; right: 28px; bottom: 92px;
  }
  .case-preview:not(.soulprint):not(.spacepool) .preview-wordmark {
    font-size: 58px; color: #fff;
  }
  .case-preview:not(.soulprint):not(.spacepool) .preview-wordmark em {
    color: var(--pink); opacity: 1;
  }
  @media (max-width: 900px) {
    .case-preview:not(.soulprint):not(.spacepool) .preview-browser img { height: 240px; }
    .case-preview:not(.soulprint):not(.spacepool) .preview-wordmark { font-size: 44px; }
  }

  /* CTA hover indicator */
  .preview-cta { position: absolute; right: 28px; bottom: 28px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; transition: all .3s; z-index: 7; }
  .case-preview:hover .preview-cta { background: rgba(255,255,255,.95); border-color: rgba(255,255,255,1); transform: scale(1.1) rotate(-8deg); }
  .case-preview:hover .preview-cta svg { stroke: #1A1A1A; }
  .preview-cta svg { width: 22px; height: 22px; transition: stroke .3s; }

  /* ━━━━━━━━━━ SOULPRINT ━━━━━━━━━━ */
  .case-preview.soulprint { background: linear-gradient(135deg, #FF6B35 0%, #FF4D6D 55%, #1A1A1A 100%); color: #fff; }
  .case-preview.soulprint .preview-glow-1 { width: 360px; height: 360px; right: -120px; top: -120px; background: radial-gradient(circle, rgba(255,214,10,0.32) 0%, transparent 70%); }
  .case-preview.soulprint .preview-glow-2 { width: 280px; height: 280px; left: -80px; bottom: -80px; background: radial-gradient(circle, rgba(255,77,109,0.45) 0%, transparent 70%); }
  .case-preview.soulprint .preview-wordmark { font-family: 'Bricolage Grotesque', var(--fh); font-size: 80px; }
  .case-preview.soulprint .preview-mascot { top: 22%; left: 50%; transform: translateX(-50%); }
  .case-preview.soulprint .preview-mascot-secondary { position: absolute; top: 16%; right: 14%; opacity: 0.92; transform: rotate(8deg); z-index: 3; }
  .case-preview.soulprint .preview-mascot-tertiary { position: absolute; bottom: 30%; left: 8%; opacity: 0.82; transform: rotate(-6deg); z-index: 3; }
  .case-preview.soulprint .preview-browser { right: 24px; top: 40%; width: 200px; transform: rotate(-5deg); }
  .case-preview.soulprint .preview-swatches { left: 28px; top: 32%; flex-direction: column; }
  .case-preview.soulprint .preview-pills { right: 24px; bottom: 95px; max-width: 65%; justify-content: flex-end; }

  /* ━━━━━━━━━━ SPACEPOOL ━━━━━━━━━━ */
  .case-preview.spacepool { background: linear-gradient(135deg, #00C2FF 0%, #0A4DFF 50%, #071B34 100%); color: #fff; }
  .case-preview.spacepool .preview-glow-1 { width: 360px; height: 360px; right: -120px; top: -120px; background: radial-gradient(circle, rgba(47,255,216,0.28) 0%, transparent 70%); }
  .case-preview.spacepool .preview-glow-2 { width: 280px; height: 280px; left: -80px; bottom: -80px; background: radial-gradient(circle, rgba(0,194,255,0.38) 0%, transparent 70%); }
  .case-preview.spacepool .preview-wordmark { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: 76px; letter-spacing: -0.03em; }
  .case-preview.spacepool .preview-wordmark em { color: #2FFFD8; opacity: 1; }
  .case-preview.spacepool .preview-mascot { top: 18%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; }
  .case-preview.spacepool .preview-mascot img { max-width: 240px; }
  .case-preview.spacepool .preview-browser { left: 20px; top: 38%; width: 200px; transform: rotate(-5deg); }
  .case-preview.spacepool .preview-swatches { right: 28px; top: 30%; flex-direction: column; }
  .case-preview.spacepool .preview-pills { left: 24px; bottom: 95px; max-width: 65%; }

  .case-info .case-num { font-family: var(--fh); font-weight: 900; font-size: 80px; line-height: 0.85; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0.6; margin-bottom: 16px; }
  .case-info h2 { font-family: var(--fh); font-size: clamp(32px, 3.6vw, 48px); font-weight: 800; line-height: 1.05; margin-bottom: 14px; letter-spacing: -0.02em; }
  .case-info h2 em { font-style: italic; }
  .case-info .case-tagline { font-size: 15px; color: var(--pink); font-weight: 600; letter-spacing: 0.5px; margin-bottom: 26px; }
  .case-info p { font-size: 17px; color: var(--text2); line-height: 1.75; margin-bottom: 18px; max-width: 540px; }
  .case-info p strong { color: var(--text); font-weight: 600; }

  .case-deliverables { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 28px 0 32px; }
  .case-deliverable { padding: 10px 14px; background: var(--s1); border: 1px solid var(--border); border-radius: var(--r1); font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 8px; }
  .case-deliverable::before { content: '✓'; color: var(--pink); font-weight: 700; }

  .case-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

  /* CTA FINAL */
  .cases-cta { padding: 100px 0; background: linear-gradient(180deg, var(--bg) 0%, var(--s1) 100%); border-top: 1px solid var(--border); position: relative; overflow: hidden; }
  .cases-cta::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(224,27,138,.12) 0%, rgba(43,44,184,.08) 50%, transparent 70%); pointer-events: none; filter: blur(60px); }
  .cases-cta-content { position: relative; z-index: 1; text-align: center; max-width: 800px; margin: 0 auto; }
  .cases-cta h2 { font-family: var(--fh); font-size: clamp(34px, 4.5vw, 56px); font-weight: 900; line-height: 1.05; margin-bottom: 22px; letter-spacing: -0.02em; }
  .cases-cta h2 em { font-style: italic; }
  .cases-cta p { font-size: 17px; color: var(--text2); line-height: 1.7; margin-bottom: 36px; max-width: 600px; margin-left: auto; margin-right: auto; }
  .cases-cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

  @media (max-width: 900px) {
    .case-block { grid-template-columns: 1fr; gap: 30px; padding: 50px 0; }
    .case-block.reverse { direction: ltr; }
    .case-preview { aspect-ratio: 4/5; max-width: 480px; margin: 0 auto; }
    .case-deliverables { grid-template-columns: 1fr; }
  }


/* ═══ ÍNDICE POR CATEGORIA · 31/08 ═════════════════════════════════════
   Estava inline no cases/index.html; veio para cá junto com o resto. */

.cat-sec{padding:80px 0;border-top:1px solid var(--border)}
.cat-sec:first-of-type{border-top:none}
.cat-head{margin-bottom:0}
.cat-head h2{font-family:var(--fh);font-size:clamp(32px,3.6vw,48px);font-weight:800;line-height:1.15;letter-spacing:normal;margin-bottom:16px}
.cat-head p{color:var(--text2);font-size:16px;line-height:1.75;max-width:640px;margin-bottom:48px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.cat-card{background:var(--s1);border:1px solid var(--border);border-radius:16px;overflow:hidden;
text-decoration:none;color:inherit;display:flex;flex-direction:column;
transition:border-color .25s,transform .2s}
.cat-card:hover{border-color:rgba(224,27,138,.35);transform:translateY(-4px)}
.cat-shot{height:190px;background:linear-gradient(155deg,#171a3a,#0d0f26);position:relative;overflow:hidden}
.cat-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;opacity:.92}
.cat-shot .semimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--fh);font-size:38px;font-weight:800;color:rgba(255,255,255,.22);letter-spacing:-.03em}
.cat-num{position:absolute;top:14px;right:16px;font-family:var(--fh);font-size:34px;
font-weight:900;color:rgba(255,255,255,.24);line-height:1}
.cat-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.cat-body h3{font-family:var(--fh);font-size:19px;font-weight:800}
.cat-tag{font-size:12.5px;color:var(--pink);font-weight:600}
.cat-body p{font-size:13.5px;color:var(--text2);line-height:1.6;margin:0}
.cat-mais{margin-top:auto;padding-top:10px;font-size:13px;color:var(--text3);font-weight:600}
.cat-nav{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 8px}
.cat-nav a{font-size:13px;font-weight:600;padding:9px 18px;border-radius:20px;
border:1px solid var(--border);color:var(--text2);text-decoration:none;transition:.2s}
.cat-nav a:hover{border-color:rgba(224,27,138,.45);color:var(--pink)}

/* ═══ TEXTO LONGO DA PÁGINA DE CASE · 31/08 ══════════════════════════════
   O card do índice fica curto (é vitrine); a página individual carrega o
   texto completo — contexto, desafio, entregas e cadência da operação.
   É o que dá substância de busca sem poluir a listagem. */
.case-longo{margin:26px 0 30px;max-width:640px}
.case-longo p{font-size:17px;color:var(--text2);line-height:1.75;margin-bottom:15px}
.case-longo p strong{color:var(--text);font-weight:600}
.case-longo p em{color:var(--text2);font-style:italic}
@media(max-width:900px){.case-longo{max-width:100%}}