/* =================================================================
   Camada DESKTOP (PC, ≥1024px). NÃO altera o mobile — o mobile é a
   base; isto é só uma sobreposição em min-width. Mesma paleta (vars
   do Dossiê). Fase 1: top nav + conteúdo mais largo + grelhas.
   ================================================================= */

/* Base (mobile e tablet estreito): top nav escondida — usa-se o tabbar. */
.dtopbar { display: none; }

@media (min-width: 1024px) {

  /* ── Top navigation bar ───────────────────────────────────────── */
  .dtopbar {
    display: flex; align-items: center; gap: 30px;
    position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 55;
    padding: 0 26px;
    background: color-mix(in srgb, var(--paper) 95%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-2);
  }
  .dtb-brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
  .dtb-mark {
    width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
    background: var(--c); color: var(--c-on);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 21px; line-height: 1;
  }
  .dtb-name { font-family: var(--font-display); font-size: 20px; color: var(--ink); line-height: 1; white-space: nowrap; }
  .dtb-nav { display: flex; align-items: center; gap: 3px; flex: 1 1 auto; }
  .dtb-tab {
    padding: 8px 16px; border-radius: 10px; font-size: 14.5px; font-weight: 500;
    color: var(--ink-2); white-space: nowrap; transition: background .15s, color .15s;
  }
  .dtb-tab:hover { background: var(--paper-2); color: var(--ink); }
  .dtb-tab.on { background: var(--c-soft); color: var(--c-deep); font-weight: 600; }
  .dtb-spacer { flex: 0 0 116px; }   /* reserva p/ sino + hambúrguer */

  /* ── Esconde a barra inferior do mobile ──────────────────────── */
  .tabbar { display: none !important; }

  /* ── Conteúdo: mais largo, centrado, por baixo da top bar ─────── */
  .page {
    max-width: 860px;
    padding-top: 64px;
    padding-bottom: 52px;
    min-height: 100dvh;
  }

  /* Sino + hambúrguer: estavam ancorados ao centro (coluna 480 do mobile);
     no desktop vão para o canto superior direito REAL, dentro da top bar. */
  .notifbell { top: 14px !important; right: 24px !important; left: auto !important; z-index: 70; }
  .hbtn      { top: 14px !important; right: 72px !important; left: auto !important; z-index: 70; }
  /* Back flutuante: a top nav + o "voltar" do browser chegam. */
  .goback { display: none !important; }

  /* ── Grelhas aproveitam a largura ─────────────────────────────── */
  .exgrid  { grid-template-columns: repeat(3, 1fr); }
  .achgrid { grid-template-columns: repeat(3, 1fr); }

  /* Cartões "hero" deixam de ficar com espaço morto à direita. */
  .goal .gt { flex: 1 1 auto; }
  .cont .ct { flex: 1 1 auto; }

  /* O sino do header do Início é redundante no desktop (a top nav já o tem). */
  .ah .ah-bell { display: none !important; }

  /* Barras fixas de ecrã (rodapé do quiz) acompanham a largura e assentam no fundo (sem tabbar). */
  .qfoot { max-width: 860px; bottom: 0; }

  /* ── Feedback de hover (rato) — só desktop ─────────────────────── */
  .extile, .lrow, .cont, a.card, .fx-row, .ft-card, .ach {
    transition: transform .14s var(--snap, ease), box-shadow .14s, background .14s, border-color .14s;
  }
  .extile:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(26,29,34,.09); border-color: var(--c-line); }
  .lrow:hover, .fx-row:hover, .ft-card:hover { background: var(--paper-2); }
  .cont:hover { box-shadow: 5px 5px 0 var(--c); }
  a.card:hover, .ach:hover { border-color: var(--c-line); }
  .btn:not(.ghost):not(.soft):hover { filter: brightness(.96); }
  .btn.ghost:hover, .btn.soft:hover { background: var(--paper-2); }
  .cv-cta:hover, .dtb-brand:hover .dtb-name { color: var(--ink); }

  /* O drawer (menu lateral) abre da direita; mantém-se igual e útil
     (Comunidade, Assistente, etc., que não estão nos 5 tabs). */
}

/* Ecrãs muito largos: dá um pouco mais de respiro ao conteúdo. */
@media (min-width: 1440px) {
  .page { max-width: 920px; }
}