/* Layout do case-alice-report. Tokens de tipo vêm de /case-type.css */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg-deep: #ffffff;
    --bg-mid: oklch(97% 0.01 284);
    --bg-card: oklch(98.5% 0.005 284);
    --bg-black: oklch(96% 0.01 284);
    --accent: oklch(52% 0.24 290);
    --accent-dim: oklch(68% 0.16 290);
    --accent-glow: oklch(62% 0.26 290 / 0.12);
    --teal: oklch(48% 0.12 195);
    --amber: oklch(58% 0.16 65);
    --text: oklch(18% 0.04 284);
    --text-muted: oklch(42% 0.03 284);
    --text-subtle: oklch(55% 0.025 284);
    --border: oklch(88% 0.02 284);
    --radius: 12px;
    --radius-lg: 20px;
    --measure: 680px;
    --wide: 1000px;
    --font-display: "DM Serif Display", serif;
    --font-ui: "DM Sans", sans-serif;
    --fs-section: clamp(36px, 4vw, 56px);
    --fs-chapter: clamp(24px, 2.6vw, 32px);
    --fs-metric: 28px;
    --fs-item: 18px;
    --fs-body: 15px;
    --fs-ui: 14px;
    --fs-meta: 13px;
    --fs-label: 11px;
    --lh-body: 1.55;
  }

  html { scroll-behavior: smooth; }
  body {
    min-height: 100%;
    background: var(--bg-deep);
    background-image:
      radial-gradient(ellipse 60% 46% at 14% 0%, oklch(72% 0.10 290 / 0.14), transparent 58%),
      radial-gradient(ellipse 48% 36% at 90% 8%, oklch(78% 0.08 195 / 0.12), transparent 54%);
    color: var(--text);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  ::selection { background: var(--accent-glow); color: var(--text); }
  .num { font-variant-numeric: tabular-nums; }

  .progress-track { position: fixed; inset: 0 0 auto 0; height: 2px; background: oklch(30% 0.06 284); z-index: 50; }
  .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--teal)); }

  .reading-nav {
    --nav-border: oklch(30% 0.06 284);
    --nav-text: oklch(96% 0.01 284);
    --nav-muted: oklch(70% 0.05 284);
    --nav-active: oklch(20% 0.07 284);
    position: sticky; top: 2px; z-index: 40;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: oklch(12% 0.06 284 / 0.92);
    backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid var(--nav-border);
    color: var(--nav-text);
  }
  .reading-nav .back {
    flex: none;
    align-self: flex-start;
    margin: 0;
    padding: 12px clamp(16px, 4vw, 28px);
    border: none;
    border-bottom: 1px solid var(--nav-border);
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    color: var(--nav-muted);
    font-size: var(--fs-ui);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
  }
  .reading-nav .back:hover { color: var(--nav-text); opacity: 1; }
  .reading-nav-links {
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
    padding: 10px clamp(16px, 4vw, 28px) 12px;
  }
  .reading-nav-links::-webkit-scrollbar { display: none; }
  .reading-nav-links a {
    flex: none; padding: 6px 13px; border-radius: 999px;
    font-size: var(--fs-ui); font-weight: 600; color: var(--nav-text);
    text-decoration: none; white-space: nowrap;
    transition: color 0.2s, background 0.2s, opacity 0.2s;
  }
  .reading-nav-links a:hover { opacity: 0.85; }
  .reading-nav-links a.active { background: var(--nav-active); }
  @media (min-width: 900px) {
    .reading-nav {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 14px clamp(20px, 5vw, 56px);
      padding-left: clamp(120px, 14vw, 160px);
      padding-right: clamp(120px, 14vw, 160px);
    }
    .reading-nav .back {
      position: absolute;
      left: clamp(20px, 5vw, 56px);
      top: 50%;
      transform: translateY(-50%);
      width: auto;
      padding: 6px 13px;
      border-bottom: none;
      border-right: 1px solid var(--nav-border);
      padding-right: 16px;
      margin-right: 0;
      border-radius: 999px;
    }
    .reading-nav-links {
      overflow-x: auto;
      padding: 0;
      justify-content: center;
    }
  }
  .shell { max-width: var(--wide); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px) 120px; }
  .col { max-width: var(--measure); margin: 0 auto; }

  .hero { padding: 64px 0 40px; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
    color: var(--accent); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .eyebrow::before { content: ""; width: 16px; height: 1.5px; background: var(--accent); }

  h1.title {
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-size: var(--fs-section);
    font-weight: 400;
    letter-spacing: -1.5px;
    line-height: 1.1;
    text-wrap: pretty;
  }
  h1.title em { color: var(--accent); font-style: italic; }
  .dek { max-width: var(--measure); color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: 24px; }
  .role-line { margin: 16px 0 0; font-size: var(--fs-body); font-weight: 600; color: var(--text); }

  .case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
  .case-tag-pill {
    font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
    padding: 5px 14px; border-radius: 99px; border: 1px solid;
  }
  .case-tag-pill--accent { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-glow); }
  .case-tag-pill--teal { color: var(--teal); border-color: oklch(72% 0.18 195 / 0.35); background: oklch(72% 0.18 195 / 0.08); }

  .stat-strip {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
    background: var(--bg-card); max-width: var(--wide); margin: 32px auto 8px;
  }
  .stat { padding: 26px 22px; border-right: 1px solid var(--border); }
  .stat:last-child { border-right: none; }
  .stat .n { font-family: var(--font-ui); font-size: var(--fs-metric); font-weight: 700; letter-spacing: -0.03em; color: var(--accent); line-height: 1.15; margin-bottom: 8px; }
  .stat .l { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.4; }

  section.chapter { padding: 60px 0; border-top: 1px solid var(--border); scroll-margin-top: 120px; }
  section.chapter:first-of-type { border-top: none; }

  .chapter-label { display: block; margin-bottom: 14px; color: var(--accent); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
  h2.chapter-title {
    margin-bottom: 24px;
    font-family: var(--font-ui);
    font-size: var(--fs-chapter);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text);
    text-wrap: pretty;
  }

  p.lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); margin-bottom: 22px; }
  p.lead em { font-style: italic; color: var(--accent); }
  p.body-text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); margin-bottom: 22px; }
  p.body-text:last-child { margin-bottom: 0; }
  p.body-text strong, p.lead strong { color: var(--text); font-weight: 700; }

  blockquote.pull {
    margin: 40px 0;
    padding: 4px 0 4px 28px;
    border-left: 2px solid var(--accent);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-item);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.35;
  }

  .stack-list { display: flex; flex-direction: column; margin: 8px 0; }
  .stack-row { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); align-items: start; }
  .stack-row:last-child { border-bottom: none; }
  .stack-logo {
    width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--bg-card); display: flex; align-items: center; justify-content: center; padding: 9px;
  }
  .stack-logo img { width: 100%; height: 100%; object-fit: contain; }
  .stack-name { font-size: var(--fs-item); font-weight: 700; letter-spacing: -0.03em; color: var(--text); }
  .stack-cat { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); margin: 3px 0 6px; }
  .stack-copy { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }

  ul.bottleneck-list { list-style: none; display: flex; flex-direction: column; }
  ul.bottleneck-list li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
  ul.bottleneck-list li:last-child { border-bottom: none; padding-bottom: 0; }
  ul.bottleneck-list .mark { color: var(--amber); font-size: var(--fs-body); font-weight: 700; line-height: var(--lh-body); font-variant-numeric: tabular-nums; }
  ul.bottleneck-list strong { display: block; margin-bottom: 4px; font-size: var(--fs-item); font-weight: 700; color: var(--text); }
  ul.bottleneck-list span { color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }

  ul.trust-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 8px 0 0; }
  ul.trust-list li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }
  ul.trust-list .dot { color: var(--accent); }

  ul.checklist { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 8px 0 0; }
  ul.checklist li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
  ul.checklist .check { color: var(--teal); font-weight: 700; }

  .before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0; }
  .ba-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
  .ba-card .ba-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 10px; }
  .ba-card .ba-flow { font-size: var(--fs-body); color: var(--text); line-height: var(--lh-body); }
  .ba-card.after .ba-label { color: var(--teal); }

  .module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0; }
  .module-grid.spaced { margin-top: 32px; }
  .module { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
  .module .m-title { font-size: var(--fs-item); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 8px; color: var(--text); }
  .module .m-copy { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }

  .flow-line { margin-top: 28px; font-size: var(--fs-body); color: var(--text-subtle); }

  .shot {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    margin: 40px 0 12px;
    position: relative;
  }
  .shot img { display: block; width: 100%; height: auto; }
  .shot.shot-full {
    aspect-ratio: 989 / 875;
    background: #0b0616;
  }
  .shot.shot-full img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .shot .shot-tag {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    padding: 5px 12px; border-radius: 999px;
    background: color-mix(in oklch, var(--bg-deep) 72%, transparent);
    border: 1px solid var(--border);
    font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-subtle);
  }
  .shot-caption { font-size: var(--fs-meta); color: var(--text-subtle); margin-bottom: 32px; line-height: 1.5; }
  .shot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0 12px; }
  .shot-row .shot { margin: 0; }

  .closer { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--border); }

  @media (max-width: 720px) {
    .stat-strip, .before-after, .module-grid, .shot-row { grid-template-columns: 1fr; }
    .stat { border-right: none; border-bottom: 1px solid var(--border); }
    .stat:last-child { border-bottom: none; }
    blockquote.pull { padding-left: 18px; max-width: none; }
  }

#root { display: contents; }