/* Composição exclusiva para telas grandes. Mobile permanece no layout aprovado. */
@media (min-width: 851px) {
  :root {
    --bg: #08090b;
    --panel: #111317;
    --panel-2: #1a1d22;
    --line: #2a2e34;
    --text: #f4f1e8;
    --muted: #aeb3b8;
    --gold: #c9a55e;
    --gold-2: #e3c887;
    --shadow: 0 18px 42px rgba(0,0,0,.20);
  }

  body {
    background: #08090b;
    letter-spacing: -.01em;
  }

  .app-shell {
    grid-template-columns: 284px minmax(0, 1fr);
    background: #08090b;
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px 16px 18px;
    background: #111317;
    border-right: 1px solid #2a2e34;
  }

  .sidebar .brand-logo {
    width: 190px;
    margin: 8px 12px 48px;
  }

  .sidebar::after {
    content: '';
    position: absolute;
    top: 99px;
    right: 22px;
    left: 28px;
    height: 1px;
    background: linear-gradient(90deg, #c9a55e 0 66px, #2a2e34 66px);
  }

  .nav { gap: 7px; }

  .nav-item {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #aeb3b8;
    font-size: .88rem;
  }

  .nav-item:hover {
    background: #181b20;
    border-color: #2a2e34;
    color: #f4f1e8;
  }

  .nav-item.active {
    background: rgba(201,165,94,.11);
    border-color: rgba(201,165,94,.26);
    color: #f4f1e8;
    box-shadow: inset 3px 0 0 #c9a55e;
  }

  .nav-icon { color: #c9a55e; }
  .sidebar-footer { border-color: #2a2e34; padding: 17px 12px 4px; }

  .topbar {
    height: 82px;
    padding: 0 clamp(34px, 4vw, 72px);
    background: rgba(8,9,11,.94);
    border-color: #2a2e34;
    backdrop-filter: none;
  }

  .topbar-title { font-size: .95rem; letter-spacing: .01em; }
  .breadcrumb { color: #81878e; }
  .topbar .badge { border-color: rgba(201,165,94,.30); background: rgba(201,165,94,.08); }

  .main-content {
    max-width: 1800px;
    margin: 0 auto;
    padding: 48px clamp(34px, 4vw, 72px) 72px;
  }

  .page-heading {
    gap: 32px;
    align-items: flex-end;
    margin: 0 0 34px;
    padding-bottom: 28px;
    border-bottom: 1px solid #2a2e34;
  }

  .page-heading h1 {
    max-width: 760px;
    color: #f4f1e8;
    font-size: clamp(2.15rem, 3.1vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.06em;
  }

  .page-heading p { max-width: 720px; font-size: .98rem; }
  .eyebrow { color: #d8bb78; letter-spacing: .14em; }

  .btn {
    min-height: 42px;
    border-radius: 7px;
    padding: 10px 15px;
    letter-spacing: .005em;
  }

  .btn-primary { background: #c9a55e; color: #17130b; }
  .btn-primary:hover { background: #dfc17e; }
  .btn-secondary { background: #20242a; border-color: #353a41; }
  .btn-ghost { background: transparent; border-color: #3a3f46; }

  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 38px; }
  .stat, .company-card, .project-card, .info-panel, .metric-card, .person-card, .phase-card, .swot-card {
    background: #111317;
    border-color: #2a2e34;
    border-radius: 10px;
    box-shadow: none;
  }

  .stat { min-height: 126px; padding: 22px 24px; }
  .stat span { color: #8f969e; }
  .stat strong { color: #f4f1e8; font-size: 2.35rem; }
  .company-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
  .company-card, .project-card { min-height: 182px; padding: 22px; }
  .company-card:hover { background: #171a1f; border-color: #8d6a31; transform: none; }

  .project-layout {
    grid-template-columns: minmax(270px, .78fr) minmax(0, 2.4fr);
    align-items: start;
    gap: 24px;
  }

  .phase-card { position: sticky; top: 106px; padding: 22px 14px 14px; }
  .phase-list { gap: 5px; margin-top: 16px; }
  .phase { min-height: 43px; padding: 0 11px; border: 1px solid transparent; border-radius: 7px; }
  .phase:hover { background: #181b20; }
  .phase.active { background: rgba(201,165,94,.11); border-color: rgba(201,165,94,.25); color: #f4f1e8; }

  .detail-panel { gap: 16px; }
  .info-panel { padding: 26px 28px; }
  .info-panel h2 { font-size: 1.26rem; }
  .info-panel > p { max-width: 900px; }
  .section-head { min-height: 35px; margin-bottom: 16px; }
  .section-title { font-size: 1.08rem; }

  .decision-row { min-height: 88px; padding: 18px 0; }
  .decision-row h4 { font-size: 1rem; }
  .row-copy { max-width: 820px; }
  .swot-grid { gap: 14px; }
  .swot-card { min-height: 174px; padding: 21px; }

  .metric-grid, .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .metric-card, .person-card { padding: 22px; }
  .metric-values { gap: 8px; }
  .metric-values strong { font-size: 1.08rem; }
  .reativa-summary { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .pillar-score { padding: 11px 5px; background: #16191e; border-color: #30353c; }

  .empty { background: #111317; border-color: #3a3f46; border-radius: 10px; }
  .modal { width: min(680px, calc(100vw - 48px)); padding: 30px; background: #111317; border-color: #3a3f46; border-radius: 12px; }
  .field { background: #0d0f12; border-color: #353a41; border-radius: 7px; }
  .field:focus { border-color: #c9a55e; box-shadow: 0 0 0 3px rgba(201,165,94,.12); }
}

@media (min-width: 851px) and (max-width: 1250px) {
  .app-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .sidebar .brand-logo { width: 170px; }
  .main-content { padding-inline: 32px; }
  .project-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .metric-grid, .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}