/* ============================================================
   Academia Desinflame — CAPA no topo do dashboard   ·  2026-08-14
   ------------------------------------------------------------
   Substitui a nuvem de partículas (x8-hero-particles.*) por uma
   foto de capa. Trocar de volta é trocar o <link>/<script> no
   index.html — os arquivos das partículas continuam no lugar.

   POR QUE NÃO TEM JS AQUI
   A nuvem precisava de <canvas> + three.js (~1.3MB) montados por
   um módulo. Uma foto é um ::before no shell: sem script, sem
   motor, e o dashboard deixa de baixar o three (a orb do
   /consultor-ia ainda usa, então o vendor segue no projeto).

   AS REGRAS DO CARD DE BOAS-VINDAS vêm junto (eram do CSS das
   partículas): o card perde fundo/borda e o texto vira tinta
   escura, senão ele volta a ser um bloco navy por cima da foto.

   PESO: o PNG original tinha 1.753 KB. Serve-se WebP de 91 KB
   (JPEG de 140 KB como reserva), redimensionado pra 840x1120 —
   o dobro do tamanho de tela, que cobre DPR 2.
   ============================================================ */

/* ---- o card de boas-vindas deixa de ser card ---- */
section.dashboard-simple-welcome{
  background: none !important; border: none !important;
  box-shadow: none !important; backdrop-filter: none !important;
  transition: none !important;   /* senão a transição segura a sombra antiga */
}
/* texto solto no fundo claro -> tinta escura (tokens do sistema) */
section.dashboard-simple-welcome .dashboard-simple-welcome-date{ color: var(--via-text-muted, #5C6677) !important; }
section.dashboard-simple-welcome .dashboard-simple-welcome-name{ color: var(--via-text-body, #344054) !important; }
section.dashboard-simple-welcome .dashboard-simple-welcome-title{ color: var(--via-text-primary, #0A1F3B) !important; }
section.dashboard-simple-welcome .dashboard-simple-welcome-copy{ color: var(--via-text-body, #344054) !important; opacity: .85; }

/* ---- ancoragem: a capa vive no shell, atrás dos cards ---- */
.dashboard-simple-shell{ position: relative; }
.dashboard-simple-top, .dashboard-simple-areas-head, .dashboard-simple-areas-grid{
  position: relative; z-index: 1;
}

/* ---- a capa ----
   Ocupa o miolo do hero e passa POR TRÁS do card "Agenda da semana" e dos
   cards de áreas — os dois têm fundo branco e z-index 1, então recortam a
   foto sozinhos. É daí que vem a sensação de profundidade.

   A foto não tem alpha — o fundo dela é branco chapado, igual ao
   .dashboard-simple-root. Funde sozinha nas laterais; a máscara existe pra
   base, que sem ela apareceria nos VÃOS entre os cards de área.

   O texto de boas-vindas fica por cima (z-index 1) e a foto alcança o fim
   dele: nessa faixa a imagem é asa translúcida sobre branco, então a tinta
   navy do texto continua legível. Se a foto for trocada por uma de fundo
   escuro à esquerda, esse encaixe precisa ser revisto. */
/* A capa tem DOIS pontos de montagem, e só um vale por vez.

   ⚠ NÃO pendure a capa no ::before do card de agenda nem do bloco de
   boas-vindas: os dois JÁ USAM o próprio ::before (o vidro e o brilho do
   card), e os dois têm `overflow:hidden` + `isolation:isolate` — roubar o
   pseudo-elemento apaga o efeito deles, e o overflow recortaria a foto.
   Sobram o shell e o .dashboard-simple-top, ambos com overflow visível. */
.dashboard-simple-shell::before,
.dashboard-simple-top::before{
  content: "";
  aspect-ratio: 1080 / 1440;
  pointer-events: none;
  background-image: url(/capa-dashboard.jpg);            /* reserva */
  background-image: image-set(
      url(/capa-dashboard.webp) type("image/webp"),
      url(/capa-dashboard.jpg)  type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  /* A foto não tem alpha: o fundo dela é #FCFCFC e o da página é #FFF. São
     3 níveis de diferença — invisíveis num pixel, mas o olho pega a ARESTA
     RETA do retângulo. Duas máscaras cruzadas dissolvem os quatro lados; a
     vertical ainda derruba a base bem antes do fim, que é o que deixa a
     imagem passar por trás dos cards sem cortar. */
  -webkit-mask-image:
      linear-gradient(180deg, transparent 0, #000 6%, #000 58%, transparent 93%),
      linear-gradient(90deg,  transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:
      linear-gradient(180deg, transparent 0, #000 6%, #000 58%, transparent 93%),
      linear-gradient(90deg,  transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* ---- DESKTOP: solta no shell, atrás dos cards ---- */
.dashboard-simple-top::before{ content: none; }          /* o do mobile fica fora */
.dashboard-simple-shell::before{
  position: absolute;
  top: -56px;
  right: 20%;
  width: min(660px, 52%);
  z-index: 0;
}

/* ---- telas médias: encolhe junto pra não engolir o texto ---- */
@media (max-width: 1180px){
  .dashboard-simple-shell::before{ right: 17%; width: min(540px, 50%); }
}

/* ---- MOBILE: a capa vira ITEM DO GRID ----
   O .dashboard-simple-top empilha em 1 coluna (boas-vindas, card). Aqui a
   capa entra como uma LINHA PRÓPRIA entre os dois, em vez de flutuar por
   cima com posição absoluta. O grid é quem abre o espaço, então ela nunca
   colide com o texto — que era o problema: o bloco de boas-vindas muda de
   altura com o nome e a largura da tela, e qualquer `top` fixo errava. */
@media (max-width: 900px){
  .dashboard-simple-shell::before{ content: none; }      /* o do desktop sai */

  .dashboard-simple-top{ row-gap: 4px !important; }
  .dashboard-simple-top::before{
    content: "";
    position: static;                 /* item de grid, não absoluto */
    grid-row: 2;
    justify-self: center;
    width: min(300px, 76vw);
    /* a máscara já apaga a base; a margem negativa cola o card logo em
       seguida, sem o vazio que a parte transparente deixaria */
    margin-bottom: -14%;
  }
  .dashboard-simple-top > section{ grid-row: 1; }
  .dashboard-simple-top > aside{ grid-row: 3; align-self: start; }
}

/* quem pediu menos movimento não perde nada: a capa é estática. */