/* Layout do case-catering. 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-card2: oklch(96% 0.01 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: 100vh;
        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%);
        background-attachment: fixed;
        color: var(--text);
        font-family: var(--font-ui);
        -webkit-font-smoothing: antialiased;
      }

      a { color: inherit; }
      ::selection { background: var(--accent-glow); color: var(--text); }

      code, .num { font-variant-numeric: tabular-nums; }

      /* ---------- progress + nav ---------- */
      .progress-track {
        position: fixed;
        inset: 0 0 auto 0;
        height: 2px;
        background: var(--border);
        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 / rhythm ---------- */
      .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 56px; }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
        color: var(--accent);
        font-size: var(--fs-label);
        font-weight: 700;
        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: 40px;
      }

      .meta-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
        padding-top: 28px;
        border-top: 1px solid var(--border);
      }
      .meta-item { display: flex; flex-direction: column; gap: 4px; }
      .meta-item--tags { flex: 1 1 100%; }
      .meta-item .k { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); }
      .meta-item .v { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
      .meta-item .v.accent { color: var(--accent); }
      .meta-item .case-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
      .case-tag-pill {
        font-size: var(--fs-label);
        font-weight: 700;
        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); }
      .case-tag-pill--amber { color: var(--amber); border-color: oklch(78% 0.18 65 / 0.35); background: oklch(78% 0.18 65 / 0.08); }

      /* ---------- stat strip (breakout) ---------- */
      .stat-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        margin: 8px 0 64px;
        background: var(--bg-card);
      }
      .stat { padding: 28px 24px; 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; }

      /* ---------- narrative sections ---------- */
      section.chapter { padding: 64px 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: 700;
        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.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; }

      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;
      }

      ul.bottleneck-list { list-style: none; display: flex; flex-direction: column; }
      ul.bottleneck-list li {
        display: grid;
        grid-template-columns: 22px 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-item); line-height: var(--lh-body); }
      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); }

      /* stack list — mesmo padrão do Content Operations */
      .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); }

      .module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0; }
      .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); }

      .shot {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        background: var(--bg-card);
        margin: 40px 0 12px;
      }
      .shot img { width: 100%; height: auto; display: block; }
      .shot-caption { font-size: var(--fs-meta); color: var(--text-subtle); margin-bottom: 32px; }

      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; }

      .closer { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); text-align: left; }
      .closer .tagline {
        color: var(--text-subtle);
        font-size: var(--fs-label);
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-top: 18px;
      }

      .footer-cta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-top: 64px;
        padding: 28px clamp(20px, 4vw, 32px);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
      }
      .footer-cta p { font-size: var(--fs-body); color: var(--text-muted); }
      .btn-outline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 22px;
        border: 1.5px solid var(--border);
        border-radius: 999px;
        color: var(--text);
        font-size: var(--fs-body);
        font-weight: 600;
        text-decoration: none;
        transition: border-color 0.2s, transform 0.2s;
      }
      .btn-outline:hover { border-color: var(--accent); transform: translateY(-2px); }

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

#root { display: contents; }