/* =============================================================================
   Minha Estácio — mockup PWA
   css/app.css — tokens, reset, safe areas, frame de desktop, tab bar, utilitários.
   Referência: .superpowers/sdd/mockup-minha-estacio/plano-correcoes.md
   Todas as medidas em px CSS para a viewport de referência 430x932 (3 px de imagem = 1 px CSS).
   ============================================================================= */

:root {
  /* ---------- Cores: azuis ---------------------------------------------- */
  --blue-splash:      #1441C1; /* Splash, botão Entrar, links das Boas-vindas, barra de progresso E safe area superior de todas as telas do app */
  --blue-primary:     #085DE6; /* headers Menu/Perfil, card Continue, botões, "Acessar todas", "Expandir", "Sair", setas dos carrosséis */
  --tab-active:       #0651C6; /* NOVO — glifo + label do item ativo da tab bar (medido: label #0651C6, glifo #0752C7) */
  --blue-pill:        #DAE8FC; /* pill 40x32 do item ativo da tab bar + quadrado 28 da estrela em Conquistas */
  --blue-100:         #DBE8FC; /* fundo SÓLIDO dos cards de disciplina (sem gradiente) */
  --blue-carreira:    #00A6FD; /* faixa azul inferior do banner Minha Carreira (78 px de altura) */
  --blue-badge:       #D9F2FE; /* fundo do badge "Continue de onde parou" (154x20) */
  --blue-badge-ink:   #004D73; /* texto do badge Continue, 13 px */
  --teal-tag:         #004E74; /* fundo das tags de modalidade nos cards de disciplina (76x20) */
  --teal-tag-ink:     #DAF3FF; /* texto das tags de modalidade, ~13 px */
  --tile-border:      #A7C7F7; /* borda 1 px dos tiles do Menu (104x82) e do card Conquistas */
  --card-border:      #A7C7F7; /* borda da carteirinha do Perfil (~3,5 px em dois anéis) */
  --ms-blue:          #005CB1; /* botão "Entrar" da tela Microsoft (108x32) */
  --ms-blue-sim:      #00519A; /* botão "Sim" de "Continuar conectado?" (108x32) */
  --ms-underline:     #17579A; /* sublinhado de 1,3 px do campo de senha */

  /* ---------- Cores: gradientes ----------------------------------------- */
  --home-gradient:  linear-gradient(95deg, #075CE3 2%, #06419A 43%, #03234E 90%); /* bloco azul da Home, y=59->512 — angulo/paradas ajustados por otimizacao numerica contra o frame 07 (dE medio 9,35 -> 1,9); as 3 cores sao as da spec */
  --card-gradient:  linear-gradient(90deg, #021F45 0%, #032656 50%, #042C68 100%);  /* carteirinha do Perfil — HORIZONTAL (medido), não vertical */

  /* ---------- Cores: tags, badges e status ------------------------------ */
  --yellow-tag:       #FEB519; /* tags Financeiro / Renovação / Documentação (PROMPT v2 l.89) */
  --yellow-tag-ink:   #1B1605; /* texto das tags amarelas */
  --gray-tag:         #CCCCCC; /* NOVO — tag "Até a conclusão do curso" (card 3 do mural) */
  --gray-tag-ink:     #0B0B0B; /* texto da tag cinza */
  --gray-badge:       #E0E0E0; /* NOVO — badges cinza de "Requisitos do curso" (24 px, raio 4) */
  --gray-badge-ink:   #474747; /* texto dos badges cinza */
  --green-badge:      #B4ECA5; /* badge "166 de 80 cumpridas" em Requisitos */
  --green-badge-ink:  #155A00; /* texto e ✓ do badge verde */
  --green-ativo:      #145804; /* badge ATIVO (52x24, raio 4) da carteirinha expandida */
  --green-ativo-ink:  #ABE3A1; /* texto do badge ATIVO — verde-claro, não branco */
  --novo-badge:       #B80046; /* NOVO — pill "Novo" (42x16) do tile "Pagamento recorrente" */
  --red:              #BD2424; /* badge contador "3" ao lado de "Mural de Avisos" (~21 px) */
  --lime:             #AADB23; /* faixa verde do banner Minha Carreira (medido no frame 14) — o avatar NAO tem borda lime */

  /* ---------- Cores: fundos, textos e traços ---------------------------- */
  --white:            #FFFFFF;
  --bg-home:          #F3F3F3; /* SO a faixa do cabeçalho "Disciplinas" (512->580) e as seções de banners/Requisitos; o bloco do Continue é branco e o Menu é branco */
  --bg-profile:       #F0F0F0; /* corpo da tela Perfil */
  --divider:          #D5D5D5; /* NOVO valor — todas as divisórias (Home 1 px, Menu 1 px, lista do Perfil 1 px inset 13, Requisitos 2 px inset 18) */
  --divider-welcome:  #DCDCDC; /* divisórias entre os links das Boas-vindas (x=25->406) */
  --tab-glyph:        #212121; /* NOVO - glifos da tab bar (PROMPT l.99 e frames 07/22b) */
  --tab-label:        #161616; /* label INATIVO da tab bar — não é a mesma cor do glifo (M-1 do review-scaffold) */
  --ink:              #1C1C1E; /* textos principais (títulos medidos #151515–#171717; lista do Perfil #212121) */
  --ink-2:            #2F2F2F; /* corpo dos cards do mural, 14 px / 20 */
  --tile-label:       #303030; /* NOVO — label dos tiles do Menu, 13 px Inter 400 */
  --search-border:    #222222; /* NOVO — borda 1 px do campo de busca do Menu (raio ~3) */
  --list-border:      #CCCCCC; /* borda do card de lista do Perfil (raio 8, sem sombra) */
  /* NÃO existe token de "peek": o card espiado do mural é `.mcard.is-peek`
     (rgba(169,163,141,.25), calibrado no frame 08). O antigo `--mural-peek: .55`
     era um chute nunca referenciado e foi removido (M-1 do fix-home-report). */

  /* ---------- Tipografia ------------------------------------------------ */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;      /* saudação, títulos de seção, títulos de card, wordmark */
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;  /* corpo, tags, botões, links, tab bar, tiles */
  --font-system:  -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;  /* telas Microsoft / Boas-vindas (aproximação do SF Pro) */

  /* ---------- Métricas / safe areas ------------------------------------- */
  --safe-top:     env(safe-area-inset-top, 0px);                 /* faixa pintada de #1441C1 nas telas do app */
  --safe-bottom:  max(34px, env(safe-area-inset-bottom, 0px));   /* 34 px: faixa branca do Splash/Perfil e parte inferior da tab bar */
  --tabbar-h:     68px;                                          /* altura útil da tab bar (sem a safe area) */
  --tabbar-total: calc(var(--tabbar-h) + var(--safe-bottom));    /* 102 px -> topo em y=830 numa viewport de 932 */
  --screen-w:     430px;
  --screen-h:     932px;
  --gutter:       16px;
  --dur-slide:    250ms;
  --slide-dim:      .949;   /* brilho da tela que sai durante o slide: 255 x .949 = 242 -> #F2F2F2 (frame 22b) */
  --dur-dim:        30ms;   /* rampa do escurecimento (a do frame 22b e praticamente instantanea) */
  --slide-parallax: -30%;   /* deslocamento da tela que sai + tab bar; a -30 % o frame 22b (progresso ~42 %) da ~-53 px */
}

/* Modo QA (?qa=1): simula a status bar do iPhone (59 px) para os screenshots baterem
   com os frames de 1290x2796, e desliga toda animação/transição. */
html.qa { --safe-top: 59px; }
html.qa *,
html.qa *::before,
html.qa *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* =============================== Reset ==================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--white);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }

/* ========================= Frame do aplicativo ============================ */
.app-frame {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--white);
  isolation: isolate;
}

/* Frame de desktop: telas largas mostram o aparelho 430x932 centralizado sobre #2B2B2B */
@media (min-width: 500px) {
  body {
    background: #2B2B2B;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .app-frame {
    position: relative;
    inset: auto;
    width: var(--screen-w);
    height: var(--screen-h);
    max-height: 100dvh;
    border-radius: 44px;
    box-shadow: 0 24px 64px rgba(0,0,0,.45);
    /* Fora do iPhone não existe env(safe-area-*): fixamos as faixas do 430x932 */
    --safe-top: 59px;
    --safe-bottom: 34px;
  }
}

/* ============================== Palco / telas ============================= */
.stage { position: absolute; inset: 0; z-index: 1; }

.screen {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--white);
}
.screen::-webkit-scrollbar { width: 0; height: 0; }

/* Transição exclusiva do Perfil: entra deslizando da direita, sai deslizando para a direita */
.screen.is-offright { transform: translate3d(100%, 0, 0); }
.screen.is-onscreen { transform: translate3d(0, 0, 0); }

/* Durante o slide a tela que entra passa POR CIMA da tab bar (que continua desenhada e
   acompanha a tela que sai, como no frame 22b): o .stage perde o stacking context e a
   tela que entra sobe para z=6, acima da barra (4). As safe areas ficam em 7. */
.screen.is-above    { z-index: 6; }
body.is-sliding .stage { z-index: auto; }

/* Escurecimento da tela que sai: branco -> #F2F2F2 (PROMPT "Comportamentos e animações";
   frame 22b mede #F2F2F2/#F3F3F3 no corpo E na tab bar). `filter: brightness()` escurece
   o conteúdo inteiro na mesma proporção, e não só o fundo da <section>.
   GANCHO da tarefa 4 (Perfil): calibrar --slide-dim / --slide-parallax contra o frame 22b. */
.screen.is-sliding,
.screen.is-dimmed,
body.is-sliding .tabbar {
  /* volta ao normal (Perfil -> Menu): o clareamento acompanha o slide inteiro */
  transition: transform var(--dur-slide) cubic-bezier(.32,.72,0,1), filter var(--dur-slide) linear;
}
.screen.is-dimmed,
body.is-dimmed .tabbar {
  /* ida: no frame 22b a tela que sai JA esta em #F2F2F2 com a tela que entra em x=267,
     o que nesta curva acontece a ~35 ms — por isso o escurecimento e quase instantaneo. */
  transition: transform var(--dur-slide) cubic-bezier(.32,.72,0,1), filter var(--dur-dim) linear;
  filter: brightness(var(--slide-dim));
  transform: translate3d(var(--slide-parallax), 0, 0);
}

/* =============================== Safe areas =============================== */
/* Superior: pintada de #1441C1 nas telas do app; branca nas telas de webview. */
.safe-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--safe-top);
  background: var(--blue-splash);
  z-index: 7;                 /* acima da tela que desliza (6) */
  pointer-events: none;
}
/* SÓ Boas-vindas e Login: o Loading (frame 06b) mede #1441C1 na safe area, apesar
   de ser webview — ele NÃO entra nesta lista (antes entrava e dependia da ordem
   dos <link> para o `body[data-screen="loading"]` do css/login.css vencer). */
body[data-screen="welcome"] .safe-top,
body[data-screen="login"]   .safe-top { background: var(--white); }

/* Inferior: faixa branca fixa de 34 px nas telas SEM tab bar (Splash e Perfil).
   Na Home/Menu a própria tab bar já cobre a safe area. */
.safe-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--safe-bottom);
  background: var(--white);
  z-index: 7;                 /* acima da tela que desliza (6) */
  pointer-events: none;
  display: none;
}
body[data-screen="splash"]  .safe-bottom,
body[data-screen="profile"] .safe-bottom { display: block; }

/* ================================ Tab bar ================================= */
/* Topo em y=830 (932 - 102). Sem borda superior — apenas sombra difusa para cima. */
.tabbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--tabbar-total);          /* 68 + 34 = 102 */
  padding: 0 8px var(--safe-bottom);    /* 5 colunas de (430-16)/5 = 82,8 px */
  display: flex;
  align-items: flex-start;
  background: var(--white);
  box-shadow: 0 -8px 24px rgba(0,0,0,.05);
  z-index: 4;
}

.tabbar__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: var(--tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 120ms linear;
}
.tabbar__item:active { opacity: .7; }

/* Pill do item ativo: 40x32, raio 10, #DAE8FC, topo em +8 (y=838 -> 870) */
.tabbar__pill {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 40px;
  height: 32px;
  margin-left: -20px;
  border-radius: 10px;
  background: var(--blue-pill);
  opacity: 0;
}

/* Glifos: caixa de 24 px com topo em +14 (y=844) */
.tabbar__glyph {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 14px;
  color: var(--tab-glyph);   /* #212121 - o glifo e o label inativo NAO usam a mesma cor (M-1) */
}
.tabbar__glyph svg { width: 100%; height: 100%; }

/* Labels: 12 px, cap-top em +46 (y=876). A caixa do Inter começa ~2 px acima do cap-top.
   O PROMPT diz "~13 px", mas a tarefa 2 mediu os textos pequenos do app em 12 px e a 13 px
   os labels ficavam ~7 % mais largos que o frame 18 (M-3). */
.tabbar__label {
  margin-top: 8px;      /* 14 + 24 + 8 = 46 -> cap-top em y=876 (alvo 876) */
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  color: var(--tab-label);
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* Estado ativo (data-active = inicio | financeiro | tacia | suporte | menu) */
.tabbar[data-active="inicio"]     [data-tab="inicio"]     .tabbar__pill,
.tabbar[data-active="financeiro"] [data-tab="financeiro"] .tabbar__pill,
.tabbar[data-active="suporte"]    [data-tab="suporte"]    .tabbar__pill,
.tabbar[data-active="menu"]       [data-tab="menu"]       .tabbar__pill { opacity: 1; }

.tabbar[data-active="inicio"]     [data-tab="inicio"]     .tabbar__glyph,
.tabbar[data-active="financeiro"] [data-tab="financeiro"] .tabbar__glyph,
.tabbar[data-active="suporte"]    [data-tab="suporte"]    .tabbar__glyph,
.tabbar[data-active="menu"]       [data-tab="menu"]       .tabbar__glyph { color: var(--tab-active); }

.tabbar[data-active="inicio"]     [data-tab="inicio"]     .tabbar__label,
.tabbar[data-active="financeiro"] [data-tab="financeiro"] .tabbar__label,
.tabbar[data-active="tacia"]      [data-tab="tacia"]      .tabbar__label,
.tabbar[data-active="suporte"]    [data-tab="suporte"]    .tabbar__label,
.tabbar[data-active="menu"]       [data-tab="menu"]       .tabbar__label { color: var(--tab-active); font-weight: 600; }

/* Avatar da Tácia: 48x48 raio 8, anel branco de 2 px, elevado 16 px acima do topo da barra (y=814->862) */
.tabbar__avatar {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  border-radius: 8px;
  background: var(--white);
  object-fit: cover;
  /* O anel branco fica POR FORA dos 48x48: com `border` + box-sizing:border-box a foto
     encolhia para 44x44 em (193,816), e o frame 18 mede 48x48 em (191,814) (I-2).
     Sem sombra: o frame nao tem nenhuma sob o avatar (M-2). */
  box-shadow: 0 0 0 2px var(--white);
}

/* ============================== Utilitários =============================== */
.hidden { display: none !important; }

/* Carrossel horizontal com scroll-snap (mural, disciplinas, banners) */
.carousel {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { flex: 0 0 auto; scroll-snap-align: start; }

/* M-2 (fix-home-report): `.card` (raio 12 / padding 18) e `.btn-primary` foram
   removidos daqui. Eram utilitários escritos ANTES das telas e nenhuma delas os
   adotou — os formatos reais divergem (o "Continue" usa padding 14; o botão do
   mural, 13 px à esquerda e 17 do lado do chevron). Grep em css/, js/ e
   index.html: zero ocorrências das duas classes. `.tag` FICA: é a base real de
   `.tag--amarela/--cinza/--modalidade`, usada pela Home. */

/* Tag / badge: caixa de 20 px, texto 13 px 500, raio 4 */
.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* ========================= Movimento reduzido ============================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .carousel { scroll-behavior: auto; }
}

/* ============================================================================
   ===== Home =====
   Medidas em px CSS para a viewport de referência 430x932 (frames 07..15).
   O documento rolável tem 1809 px de altura:
     0->59 safe | 59->512 hero | 512->580 faixa Disciplinas | 580->1001 bloco branco
     | 1001->1809 seção #F3F3F3 (banners + Requisitos)   => scrollTop máximo = 877.
   Cada bloco é `position: relative` e os filhos são posicionados em absoluto com os
   valores medidos nos frames (cap-height convertida em `top` pelas métricas da fonte).
   ============================================================================ */

.home { position: relative; }
.home__safe { height: var(--safe-top); background: var(--blue-splash); }

/* ------------------------------------------------------- bloco azul do topo */
.hero {
  position: relative;
  height: 453px;                       /* y=59 -> 512 */
  background: var(--home-gradient);
  overflow: hidden;
}

.hero__date {
  position: absolute;
  left: 16px; top: 33px;               /* cap-top medido em y=95,3 */
  font-family: var(--font-ui);
  font-size: 12px; line-height: 16px; font-weight: 400;
  color: var(--divider);
}

.hero__greet {
  position: absolute;
  left: 16px; top: 59.4px;             /* cap-top y=126,5 (cap 22,4 => 32 px) */
  font-family: var(--font-display);
  font-size: 32px; line-height: 40px; font-weight: 400;
  color: var(--white);
  white-space: nowrap;
}

.hero__mtitle {
  position: absolute;
  left: 16.3px; top: 117.2px;          /* cap-top y=180,2 (cap 12,64 => 18 px) */
  height: 22px;
  display: flex; align-items: center;
  font-family: var(--font-display);
  font-size: 18px; line-height: 22px; font-weight: 600;
  color: var(--white);
}
.hero__count {
  position: absolute;
  left: 151.7px; top: 0px;             /* círculo 21 px em (168, 176,7) */
  width: 21px; height: 21px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--red);
  font-family: var(--font-ui);
  font-size: 12.5px; line-height: 1; font-weight: 600;
  color: var(--white);
}

.hero__rule {
  position: absolute;
  left: 16px; right: 16px; top: 144px; /* y=203 */
  height: 1px;
  background: rgba(255,255,255,.28);
}

/* ------------------------------------------------------- carrossel do mural */
.mural {
  position: absolute;
  left: 16px; right: 16px; top: 165px; /* y=224 -> 424 */
  height: 200px;
}
.mural__track { height: 100%; gap: 16px; }

.mcard {
  position: relative;
  width: min(312px, calc(100% - 86px));
  height: 200px;
  border-radius: 12px;
  background: var(--white);
}
.mcard__tags {
  position: absolute;
  left: 18px; right: 18px; top: 17.2px;   /* I-5: o bloco para na margem interna do card */
  display: flex; gap: 8px;
}
/* I-5: abaixo de ~423 px de viewport o par "Documentacao" + "Ate a conclusao do curso"
   (102,7 + 8 + 158,3 = 269 px) passava da borda direita do card, que so oferece
   `largura - 36`. Nao da para quebrar em 2 linhas: o card tem altura fixa de 200 px e
   as posicoes internas sao absolutas (tags 17,2->37,2 / titulo 51,1 / corpo 80,4 /
   botao 150,7->180,7); uma 2a linha de tag entraria por cima do titulo e, empurrando
   tudo para baixo, o botao terminaria em 204,7-208,7 px, fora do card. Entao a 1a tag
   (a categoria) nunca encolhe e as seguintes truncam com reticencias.
   `display: block` e necessario porque `text-overflow` nao se aplica a um container
   flex; `line-height: 20px` (herdado de `.home .tag`) recupera a centragem vertical
   que o `align-items: center` do inline-flex dava. Em 430 nada muda: 269 < 276. */
.mcard__tags .tag {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcard__tags .tag:first-child { flex: 0 0 auto; }
.mcard__title {
  position: absolute;
  left: 18px; right: 18px; top: 51.1px;   /* cap-top y=278,6 (cap 11,24 => 16 px) */
  font-family: var(--font-display);
  font-size: 16px; line-height: 20px; font-weight: 600;
  color: #171717;
  /* O corpo do card fica em `top: 80.4px` fixo: se o titulo quebrasse em 2 linhas
     (20 -> 40 px) ele invadiria o texto. Abaixo de 414 px "Revise sua grade de
     disciplinas" quebrava e sobrepunha o corpo em 10,7 px. Na viewport de
     referencia (430) os tres titulos cabem em uma linha, entao nada muda la. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcard__body {
  position: absolute;
  left: 18px; right: 18px; top: 80.4px;   /* 1a linha cap-top y=308,5; lh 20 */
  font-family: var(--font-ui);
  font-size: 14px; line-height: 20px; font-weight: 400;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.mcard__btn {
  position: absolute;
  left: 19px; top: 150.7px;               /* y=374,7 -> 405 */
  height: 30px;
  display: inline-flex; align-items: center; gap: 15.5px;
  padding: 0 17px 0 13px;
  border-radius: 6px;
  background: var(--blue-primary);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600; line-height: 1;
  letter-spacing: -.16px;             /* casa a largura do SF Pro medida (157,7) */
  max-width: calc(100% - 38px);       /* I-3: nunca passa da margem interna de 19 px do card */
  min-width: 0;
  white-space: nowrap;
}
.mcard__btn > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mcard__btn .ico { flex: 0 0 auto; }
.mcard__btn:active { opacity: .7; }

/* I-3: abaixo de ~364 px o card do mural fica com menos de 246 px e o rotulo mais longo
   ("Acessar Alteracao de grade", 207,5 px de largura intrinseca) estoura a margem interna
   de 19 px. Aperta o respiro do botao em vez de cortar o texto. A viewport de referencia
   (430) e o frame de desktop (tela sempre com 430 px) nao sao afetados. */
@media (max-width: 374px) {
  .mcard__btn { gap: 10px; padding: 0 13px; }
}

/* Card espiado: fundo translucido cinza (calibrado: ~#2E68BC sobre o lado claro
   do gradiente e ~#2D4971 sobre o escuro), texto claro e botao branco. */
.mcard.is-peek { background: rgba(169,163,141,.25); }
.mcard.is-peek .mcard__title { color: var(--white); }
.mcard.is-peek .mcard__body  { color: #DDE1E8; }
.mcard.is-peek .mcard__btn   { background: var(--white); color: #0850C1; }

/* -------------------------------------------------------- rodapé do mural */
.hero__help {
  position: absolute;
  left: 30px; top: 390px;                 /* ícone 14 px, y=449 -> 463 */
  height: 14px;
  display: flex; align-items: center; gap: 9px;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 12px; line-height: 14px; font-weight: 500;
}
.hero__help .ico { display: block; }

/* ------------------------------------------ controles de carrossel */
.cctrl {
  position: absolute;
  height: 16px;
  display: flex; align-items: center; gap: 14.65px;
}
.cctrl__nav {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: currentColor;
}
.cctrl__nav[disabled] { cursor: default; }
.cctrl__dots { display: flex; align-items: center; gap: 4px; }
.cctrl__dot {
  width: 8px; height: 16px;
  display: grid; place-items: center;
}
.cctrl__dot::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 2px;
  background: var(--dot, #747474);
}
.cctrl__dot.is-active { width: 16px; }
.cctrl__dot.is-active::before {
  width: 16px; height: 4px;
  background: var(--dot-active, var(--blue-primary));
}

.cctrl--light { color: var(--white); --dot: rgba(255,255,255,.45); --dot-active: #FFFFFF; }
.cctrl--light .cctrl__nav[disabled] { opacity: .3; }
.cctrl--blue  { color: var(--blue-primary); --dot: #747474; --dot-active: var(--blue-primary); }
.cctrl--blue .cctrl__nav[disabled] { color: #909090; }

.hero  .cctrl { top: 389px; right: 23.35px; }   /* centro dos glifos em y=456 */
.dbody .cctrl { top: 379px; left: 0; right: 0; justify-content: center; }
.hfoot .cctrl { top: 250px; left: 0; right: 0; justify-content: center; --dot: #6E6E6E; }

/* ------------------------------------- skeleton do mural (07a / 07b) */
.hero__skel { display: none; }
.home[data-stage="carregando"] .hero__skel,
.home[data-stage="skeleton"]   .hero__skel { display: block; }
.home[data-stage="carregando"] .hero__mtitle,
.home[data-stage="skeleton"]   .hero__mtitle,
.home[data-stage="carregando"] .hero__rule,
.home[data-stage="skeleton"]   .hero__rule,
.home[data-stage="carregando"] .mural,
.home[data-stage="skeleton"]   .mural,
.home[data-stage="carregando"] .hero__help,
.home[data-stage="skeleton"]   .hero__help,
.home[data-stage="carregando"] .hero .cctrl,
.home[data-stage="skeleton"]   .hero .cctrl { display: none; }

.hero__skel .sk {
  position: absolute;
  display: block;
  border-radius: 8px;
  background: rgba(20,14,12,.43);        /* calibrado sobre o gradiente */
}
.sk--title { left: 16px; top: 116px; width: 175px; height: 30px; }  /* y=175 -> 205 */
.sk--card  { top: 166px; height: 200px; }                            /* y=225 -> 425 */
.sk--card1 { left: 16px;  width: 191px; }
.sk--card2 { left: 223px; width: 191px; }
.sk--foot  { left: 16px; right: 16px; top: 382px; height: 30px; }    /* y=441 -> 471 */

/* --------------------------------- faixa #F3F3F3 do cabeçalho Disciplinas */
.dhead {
  position: relative;
  height: 68px;                          /* y=512 -> 580 */
  background: var(--bg-home);
}
.dhead__title {
  position: absolute;
  left: 16px; top: 29.4px;               /* cap-top y=545,2 (cap 12,63 => 18 px) */
  font-family: var(--font-display);
  font-size: 18px; line-height: 22px; font-weight: 600;
  color: #151515;
}
.dhead > .ico--info { position: absolute; left: 120.7px; top: 32.7px; color: #171717; }
.dhead__all {
  position: absolute;
  right: 33.7px; top: 31.8px;            /* chevron termina em x=396,3 */
  height: 16px;
  display: flex; align-items: center; gap: 14.3px;
  font-family: var(--font-ui);
  font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--blue-primary);
}

/* ------------------------------- bloco branco: Continue + carrossel + controles */
.dbody {
  position: relative;
  height: 421px;                         /* y=580 -> 1001 */
  background: var(--white);
}

.continue {
  position: absolute;
  left: 24px; right: 24px; top: 16px;    /* y=596 -> 696 */
  height: 100px;
  border-radius: 12px;
  background: var(--blue-primary);
  text-align: left;
}
.continue:active { opacity: .85; }
.continue__badge {
  position: absolute;
  left: 14px; top: 14px;
  height: 20px; padding: 0 9px;
  border-radius: 4px;
  background: var(--blue-badge);
  color: var(--blue-badge-ink);
  font-family: var(--font-ui);
  font-size: 12px; line-height: 20px; font-weight: 500;
}
.continue__title {
  position: absolute;
  left: 14px; top: 42.9px;               /* cap-top y=303,1 (16 px) */
  font-family: var(--font-display);
  font-size: 16px; line-height: 20px; font-weight: 600;
  color: var(--white);
}
.continue__chev { position: absolute; right: 19px; top: 45.4px; color: var(--white); }
.continue__doc  { position: absolute; left: 15px; top: 69.5px; color: var(--white); }
.continue__tema {
  position: absolute;
  left: 34px; right: 14px; top: 69.7px;
  font-family: var(--font-ui);
  font-size: 12px; line-height: 14px; font-weight: 400;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dbody__rule {
  position: absolute;
  left: 24px; right: 24px; top: 132px;   /* y=712 */
  height: 1px;
  background: var(--divider);
}

.dcar {
  position: absolute;
  left: 24px; right: 0; top: 149px;      /* y=729 -> 937; o clip vai ate a borda da tela */
  height: 208px;
}
/* O scroller vai ate a borda da tela (os cards passam de x=406), mas o CONTEUDO termina
   24 px antes: no fim do carrossel o ultimo card para em x=166, como no frame 13. */
.dcar__track { height: 100%; gap: 16px; padding-right: 24px; scroll-padding-left: 26px; }

.dcard {
  position: relative;
  width: min(240px, calc(100% - 142px));
  height: 208px;
  border-radius: 12px;
  background: var(--blue-100);
}
.dcard > .tag { position: absolute; left: 18px; top: 18px; }
.dcard__title {
  position: absolute;
  left: 18px; right: 18px; top: 66.5px;  /* cap-top y=459,9 relativo ao card (16 px) */
  font-family: var(--font-display);
  font-size: 16px; line-height: 22px; font-weight: 600;
  color: #171717;
}
.dcard__prog {
  position: absolute;
  left: 19px; right: 18px; top: 128px;   /* centro da barra em +136 */
  height: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.dcard__bar {
  position: relative;
  width: 162px; height: 2px;
  border-radius: 1px;
  background: #C9D6E7;
  overflow: hidden;
}
.dcard__fill { display: block; height: 100%; border-radius: 1px; background: #0D51B8; }
.dcard__pct {
  flex: 0 0 auto;                     /* I-2: quem encolhe e a barra, nao o percentual */
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 14px; line-height: 16px; font-weight: 400;
  color: #454748;
}
.dcard__btn {
  position: absolute;
  left: 19px; right: 19px; top: 158.7px; /* y=548 -> 578, 202 px de largura */
  height: 30px;
  border-radius: 6px;
  background: var(--blue-primary);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
}
.dcard__btn:active { opacity: .7; }

/* ------------------------------------------- estágios de carregamento (07a/07b) */
.loadcard, .dskel { display: none; }

.home[data-stage="carregando"] .continue,
.home[data-stage="carregando"] .dcar,
.home[data-stage="carregando"] .dbody .cctrl,
.home[data-stage="skeleton"]   .dcar,
.home[data-stage="skeleton"]   .dbody .cctrl,
.home[data-stage="carregando"] .hfoot,
.home[data-stage="skeleton"]   .hfoot { display: none; }

.home[data-stage="carregando"] .loadcard { display: flex; }
.home[data-stage="skeleton"]   .dskel    { display: block; }

.loadcard {
  position: absolute;
  left: 24px; right: 24px; top: 15px;    /* y=595 -> 693 (borda externa medida em x=200) */
  height: 98px;
  align-items: center; justify-content: center; gap: 10px;
  border: 2px solid var(--divider);
  border-radius: 12px;
  background: var(--white);
  font-family: var(--font-ui);
  font-size: 14px; line-height: 1; font-weight: 400;
  color: #474747;
}
.home[data-stage="carregando"] .dbody__rule { top: 129px; }  /* y=709 */
.home[data-stage="skeleton"]   .dbody__rule { top: 131px; }  /* M-8: y=711 (medido no frame 07b) */

.dskel {
  position: absolute;
  left: 24px; right: 0; top: 148px;    /* M-8: topo dos cards em y=728 (medido no frame 07b) */
  height: 208px;
}
.dskel__card {
  position: absolute;
  top: 0; width: 240px; height: 208px;
  border-radius: 12px;
  /* M-8: valor MEDIDO na referencia do frame 07b. Ficou em #F0F0F0 por uma rodada
     porque o ancora `skeleton-cards` (qa/states.json) usava fundo #FFFFFF com
     thr 25 e #F3F3F3 dista so 20,8 do branco — o ancora nao enxergaria os cards.
     Com o thr baixado para 18 o valor medido volta a valer. */
  background: #F3F3F3;
}
.dskel__card:first-child { left: 0; }
.dskel__card:last-child  { left: 256px; }
.dskel__spin { position: absolute; left: 108px; top: 76px; }

/* --------------------------------- seção #F3F3F3: banners + Requisitos do curso */
.hfoot {
  position: relative;
  height: 808px;                         /* y=1001 -> 1809 */
  background: var(--bg-home);
}

.bcar {
  position: absolute;
  left: 16px; right: 16px; top: 48px;    /* y=1049 -> 1229 */
  height: 180px;
}
.bcar__track { height: 100%; gap: 16px; }
.bslide { width: 100%; height: 180px; }
.bslide__img {
  width: 100%; height: 180px;
  object-fit: cover;
  border-radius: 12px;
}
/* Os PNGs recortados dos frames tem 398x185 e 398x183 (uma moldura #F3F3F3 de 2-3 px
   em volta do banner). O `object-position` vertical alinha o conteudo com o frame:
   a estrela do banner Carreira cai em y=270 no frame 14 com estes valores. */
.bslide[data-banner="carreira"]  .bslide__img { object-position: 50% 74%; }
.bslide[data-banner="renovacao"] .bslide__img { object-position: 50% 67%; }

.req__title {
  position: absolute;
  left: 16px; top: 329.4px;              /* cap-top y=1334,2 (18 px) */
  font-family: var(--font-display);
  font-size: 18px; line-height: 22px; font-weight: 600;
  color: #151515;
}
.hfoot > .ico--info { position: absolute; left: 202.3px; top: 332.7px; color: #171717; }

.req-card {
  position: absolute;
  left: 16px; right: 16px; top: 364px;   /* y=1365 -> 1599, altura 234 */
  height: 234px;
  padding: 18px 0;
  border-radius: 12px;
  background: var(--white);
}
.req-row {
  height: 48px;
  display: flex; align-items: center;
  padding: 0 26px;
}
.req-row__ico { width: 24px; display: grid; place-items: center; color: #171717; }
.req-row__label {
  margin-left: 8px;
  font-family: var(--font-ui);
  font-size: 14px; line-height: 18px; font-weight: 400;
  color: #171717;
}
.req-sep { height: 2px; margin: 0 18px; background: var(--divider); }

.req-badge {
  margin-left: auto;
  height: 24px; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 12px; line-height: 24px; font-weight: 400;
  letter-spacing: -.17px;
  white-space: nowrap;
}
.req-badge--cinza { background: var(--gray-badge); color: var(--gray-badge-ink); }
.req-badge--verde { background: var(--green-badge); color: var(--green-badge-ink); }
.req-badge__check { display: block; color: var(--green-badge-ink); }

/* ------------------------------------------------------------------ tags */
.tag--amarela    { background: var(--yellow-tag); color: var(--yellow-tag-ink); }
.tag--cinza      { background: var(--gray-tag);   color: var(--gray-tag-ink); }
.tag--modalidade { background: var(--teal-tag);   color: var(--teal-tag-ink); }
/* M-3: escopado na Home — antes esta regra sobrescrevia o utilitario .tag global
   e vazava a metrica calibrada aqui para Menu/Perfil. */
.home .tag { font-size: 12px; line-height: 20px; letter-spacing: -.2px; }

/* -------------------------------------------------------------- spinner */
.spin { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
html.qa .spin { animation: none; }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }