/* Arquivo "pinado" (ver docs/ATIVOS_PINADOS_SSO_FERRAMENTAS.md) — carregado
   por caminho absoluto pelas telas de login das ferramentas externas. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  height: var(--topbar-height);
  padding: 12px 24px;
  background: rgba(10, 10, 10, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 14px 40px rgba(10, 10, 10, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  contain: layout paint;
  transform: translateZ(0);
  will-change: height, padding, background-color, box-shadow;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease,
    padding 0.25s ease, height 0.25s ease;
}

/* Estado "encolhido": menos altura/respiro, e os filhos (logo, busca)
   também diminuem — cada um lê o próprio tamanho reduzido lá embaixo. */
.topbar.scrolled {
  height: calc(var(--topbar-height) - 18px);
  padding: 8px 24px;
  background: rgba(10, 10, 10, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 28px rgba(10, 10, 10, 0.2);
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  color: var(--white);
  text-decoration: none;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  object-fit: contain;
  transition: width 0.25s ease, height 0.25s ease;
}

.topbar.scrolled .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 12px;
}

.brand-copy {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  transition: font-size 0.25s ease;
}

.topbar.scrolled .brand-copy {
  font-size: 14px;
}

.top-actions {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(410px, 100%);
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  color: var(--green-700);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, height 0.25s ease,
    padding 0.25s ease, width 0.28s ease;
}

.topbar.scrolled .search {
  height: 40px;
  padding: 0 14px;
}

.search:focus-within {
  border-color: rgba(38, 38, 38, 0.45);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
}

.search svg {
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.topbar.scrolled .search svg {
  transform: scale(0.88);
}

.search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.search input::placeholder {
  color: #81918b;
  opacity: 1;
}

.search input::-webkit-search-cancel-button {
  cursor: pointer;
}

/* Sair só dentro do "Meu perfil" (13/10/2026): o da barra do topo fica escondido. */
.top-actions .logout-button[hidden] { display: none; }

.logout-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, height 0.25s ease, padding 0.25s ease;
}

.logout-button:hover,
.logout-button:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
}

.logout-button .material-symbols-rounded {
  font-size: 18px;
}

.topbar.scrolled .logout-button {
  height: 40px;
  padding: 0 14px;
}

/* Atalho pro painel do admin — só aparece pra sessão admin (body.is-admin). */
.admin-link {
  display: none;
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, height 0.25s ease, width 0.25s ease;
}

body.is-admin .admin-link {
  display: inline-flex;
}

/* Bolinha vermelha piscando na engrenagem: há aviso do sistema pendente (QA V.186). */
.admin-link-bolinha {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e53935;
  border: 2px solid var(--white);
  animation: admin-bolinha-pisca 1.1s ease-in-out infinite;
}
@keyframes admin-bolinha-pisca {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) { .admin-link-bolinha { animation: none; } }

.admin-link:hover,
.admin-link:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
}

.admin-link .material-symbols-rounded {
  font-size: 20px;
}

.topbar.scrolled .admin-link {
  width: 40px;
  height: 40px;
}

/* Avatar reaproveitado (topbar, modal de perfil). Sem foto: iniciais numa
   bolinha colorida (cor decidida pelo nome, sempre a mesma pra cada pessoa). */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--green-700);
  background-size: cover;
  background-position: center;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  user-select: none;
  flex: 0 0 auto;
}
.avatar-sm { width: 30px; height: 30px; font-size: 11px; }
.avatar-lg { width: 88px; height: 88px; font-size: 28px; }

.profile-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.profile-button:hover .avatar,
.profile-button:focus-visible .avatar {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

.profile-modal {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center;
}
.profile-modal[hidden] { display: none; }
.profile-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, 0.5);
}
.profile-modal-box {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: min(320px, calc(100vw - 32px));
  padding: 32px 24px 26px;
  background: var(--white, #fff);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.3);
  text-align: center;
}
.profile-modal-box h2 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink, #1c2a25);
}
.profile-modal-x {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  color: var(--muted, #5f6670);
  background: transparent; border: 0; border-radius: 50%;
  cursor: pointer;
}
.profile-modal-x:hover { background: var(--green-050); }
.profile-modal-nome { margin: 12px 0 0; font-weight: 700; font-size: 14px; color: var(--ink, #1c2a25); }
.profile-modal-email { margin: 2px 0 0; font-size: 12px; color: var(--muted, #5f6670); }
.profile-modal-acoes { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 18px; }
.profile-modal-upload,
.profile-modal-remover {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px;
  font: inherit; font-size: 13px; font-weight: 700;
  border-radius: 10px; cursor: pointer;
}
.profile-modal-upload {
  color: #fff; background: var(--green-900); border: 0;
}
.profile-modal-remover {
  color: var(--muted, #5f6670); background: transparent; border: 1px solid var(--line, #e4e4e8);
}
.profile-modal-msg {
  margin: 12px 0 0; font-size: 12.5px; font-weight: 600; color: var(--green-700);
}
.profile-modal-msg.is-error { color: #b3402f; }
.profile-modal-sair {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 14px; padding: 10px 16px;
  font: inherit; font-size: 13px; font-weight: 700;
  color: #b3402f; background: transparent; border: 1px solid #ecc9c2; border-radius: 10px; cursor: pointer;
}
.profile-modal-sair .material-symbols-rounded { font-size: 18px; }
.profile-modal-sair:hover { background: #fdf1ef; }

/* Botão "?" — reabre o tour guiado. Sempre visível (todo mundo tem tour). */
.help-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, width 0.25s ease, height 0.25s ease;
}

.help-button:hover,
.help-button:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
}

.help-button .material-symbols-rounded {
  font-size: 20px;
}

.topbar.scrolled .help-button {
  width: 40px;
  height: 40px;
}

.section {
  margin: 38px;
  padding: 34px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 58px rgba(10, 10, 10, 0.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.section-head h1 {
  margin: 0;
  color: var(--green-900);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.content-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  column-gap: 24px;
  row-gap: 24px;
  transition: grid-template-columns 0.32s ease, column-gap 0.32s ease;
}

.content-layout.detail-inactive {
  grid-template-columns: 0 minmax(0, 1fr);
  column-gap: 0;
}

.sidebar {
  position: sticky;
  top: calc(var(--topbar-height) + 18px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.24s ease 0.08s, visibility 0s linear 0s;
}

.content-layout.detail-inactive .sidebar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 12px 14px;
  color: var(--green-900);
  background: var(--green-050);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.back-button:hover,
.back-button:focus-visible {
  background: var(--green-100);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.sidebar-item:hover,
.sidebar-item:focus-visible {
  background: var(--green-050);
}

.sidebar-item.active {
  color: var(--white);
  background: var(--green-900);
  border-color: var(--green-900);
}

.sidebar-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--green-900);
  background: var(--green-100);
  border-radius: 10px;
  font-size: 15px;
}

.sidebar-item.active .sidebar-icon {
  color: var(--white);
  background: rgba(255, 255, 255, 0.18);
}

.sidebar-icon img,
.card-icon img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

/* Material Symbols Rounded — icones de verdade, um so peso/estilo. */
.material-symbols-rounded {
  font-family: "Material Symbols Rounded", sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  font-variation-settings: "opsz" 24, "wght" 400, "GRAD" 0, "FILL" 0;
  user-select: none;
}

.card-icon .material-symbols-rounded {
  font-size: 30px;
}

.sidebar-icon .material-symbols-rounded {
  font-size: 19px;
}

.content-main {
  min-width: 0;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.content-grid.is-leaving {
  opacity: 0;
  transform: translateY(4px);
}

.featured-zone,
.category-carousel-shell,
.category-carousel {
  display: contents;
}

.category-carousel-head,
.all-categories-sheet,
.quick-discovery {
  display: none;
}

.content-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 250px;
  padding: 22px;
  overflow: hidden;
  contain: paint;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 14px 32px rgba(10, 10, 10, 0.06);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  animation: card-fade-in 0.45s ease both;
  /* "top" além de "transform": os cards da home ficam dentro de um
     display:contents (.category-carousel/.featured-zone) pra virarem
     itens soltos do grid — e o Chrome tem um bug conhecido onde
     transform não tem efeito nenhum em filho direto de display:contents.
     Usamos top pra esses (funciona normalmente); transform continua
     valendo pros cards de dentro de uma categoria (subcategory-card),
     que não têm esse problema. */
  transition: top 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.content-card:focus-visible {
  outline: 3px solid rgba(38, 38, 38, 0.35);
  outline-offset: 3px;
}

.content-card.featured {
  grid-column: span 2;
  min-height: 320px;
  padding: 0;
  color: var(--white);
  background: var(--green-900);
}

.card-body,
.card-top,
.card-copy,
.card-go {
  z-index: 2;
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.card-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 62px;
  height: 62px;
  color: var(--green-900);
  background: var(--green-100);
  border-radius: 22px;
  font-size: 28px;
}

.badge-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.badge {
  padding: 8px 11px;
  color: var(--green-900);
  background: var(--green-100);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge.internal {
  background: #e9edea;
}

.badge.revendas {
  background: #dbeadf;
}

.card-copy h3 {
  margin: 26px 0 10px;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.subcategory-card .card-body .card-copy h3{
  font-size: 20px;
  /* palavra longa ("Documentações", "desenvolvimento") quebra com hífen em vez de ser cortada na borda do card (V.179) */
  overflow-wrap: break-word;
  hyphens: auto;
}

.card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Sem botao "Acessar": o card inteiro e clicavel. A setinha no canto +
   a borda/elevacao no hover deixam obvio que e um botao. */
.subcategory-card {
  min-height: 150px;
  border-color: rgba(10, 10, 10, 0.16);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.card-go {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--green-900);
  background: var(--green-100);
  border-radius: 50%;
  font-size: 20px;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.subcategory-card:hover,
.subcategory-card:focus-visible {
  border-color: var(--green-600);
  box-shadow: 0 18px 40px rgba(10, 10, 10, 0.16);
  transform: translateY(-3px);
}

.subcategory-card:hover .card-go,
.subcategory-card:focus-visible .card-go {
  color: var(--white);
  background: var(--green-900);
  transform: translate(2px, -2px);
}

.subcategory-card:active {
  transform: translateY(-1px);
  background: var(--green-050);
}

/* --- resultados de busca --- */
.search-results-head {
  grid-column: 1 / -1;
  margin: 2px 0 6px;
  color: var(--muted);
  font-size: 14px;
}

.search-results-head strong {
  color: var(--green-900);
  font-weight: 800;
}

.card-origem {
  display: block;
  margin-top: 4px;
  color: var(--green-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.card-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Prévia da categoria ao passar o mouse — ver .card-preview-img em
   render.js. São imagens de exemplo reaproveitadas (mini_book.png,
   lummia.svg) até existir uma captura de tela real por categoria. */
.card-preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.card-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.card-preview-img.is-active {
  opacity: 1;
}

.content-card.has-video::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(180deg, rgba(13, 31, 25, 0.04), rgba(13, 31, 25, 0.78));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.featured-carousel,
.featured-media,
.featured-slide,
.featured-shade {
  position: absolute;
  inset: 0;
}

.featured-carousel {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.featured-media {
  overflow: hidden;
  contain: strict;
  background: var(--green-900);
}

.featured-slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 0.8s ease, transform 4.8s ease;
}

.featured-slide.active {
  opacity: 1;
  transform: scale(1);
}

.featured-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(12, 29, 23, 0.64) 0%, rgba(12, 29, 23, 0.2) 58%, rgba(12, 29, 23, 0.08) 100%),
    linear-gradient(0deg, rgba(12, 29, 23, 0.44), transparent 52%);
  pointer-events: none;
}

.featured-caption {
  position: absolute;
  z-index: 2;
  left: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(68%, 560px);
  padding: 14px 16px;
  color: var(--white);
  background: rgba(18, 39, 31, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  pointer-events: none;
}

.featured-caption-eyebrow {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.72;
  text-transform: uppercase;
}

.featured-caption strong {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.featured-caption small {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.72;
}

.featured-dots {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 7px;
}

.featured-dot {
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  transition: width 0.3s ease, background 0.3s ease;
}

.featured-dot.active {
  width: 23px;
  background: rgba(255, 255, 255, 0.94);
}

.featured-controls {
  position: absolute;
  top: 50%;
  right: 14px;
  left: 14px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}

.featured-control {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--white);
  background: rgba(15, 35, 28, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  opacity: 0.48;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: opacity 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.featured-control svg {
  width: 18px;
  height: 18px;
}

.featured-control:hover,
.featured-control:focus-visible {
  background: rgba(15, 35, 28, 0.46);
  opacity: 0.96;
  transform: scale(1.06);
}

.featured-control:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 40px 20px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
}

.hidden {
  display: none !important;
}

/* --- "Ver como" (só admin): seta no logo + menu suspenso --- */

/* Seta ao lado do logo: só existe para sessão admin. */
.brand-caret {
  display: none;
  margin-left: 2px;
  font-size: 20px;
  opacity: 0.75;
  transition: transform 0.16s ease;
}

body.is-admin .brand-caret {
  display: inline-flex;
}

body.is-admin .brand {
  padding: 4px 8px 4px 4px;
  border-radius: 12px;
  transition: background 0.16s ease;
}

body.is-admin .brand:hover,
body.is-admin .brand[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
}

.brand[aria-expanded="true"] .brand-caret {
  transform: rotate(180deg);
}

/* Menu ancorado abaixo do topbar, perto do logo. Sempre no DOM; aparece só
   quando body tem is-admin + role-menu-open (ver events.js). */
.role-menu {
  position: fixed;
  top: calc(var(--topbar-height) - 10px);
  left: 14px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 220px;
  max-width: calc(100vw - 28px);
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 22px 48px rgba(10, 10, 10, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

body.is-admin.role-menu-open .role-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0s;
}

.role-menu-title {
  padding: 4px 8px 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.role-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  color: var(--green-900);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.role-menu button:hover,
.role-menu button:focus-visible {
  background: var(--green-050);
  border-color: rgba(10, 10, 10, 0.25);
}

.role-menu button.is-active {
  color: var(--white);
  background: var(--green-900);
  border-color: var(--green-900);
}

/* Troca de senha obrigatória no primeiro login (mustChangePassword). Reusa
   as classes de login-card/login-form/login-field/login-error/login-submit
   de login.css, só que como overlay por cima da home. */
.password-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.password-gate[hidden] {
  display: none;
}

.password-gate .login-card {
  max-width: 380px;
}

/* Conteúdos recentes (aba "Novidades" no fim da home). */
.recent {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 32px rgba(10, 10, 10, 0.06);
}

.recent-head small {
  display: block;
  margin-bottom: 4px;
  color: var(--green-600);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Padronizado 2026-09-15 com o mesmo estilo de .quick-access-head h2 /
   .circular-head h2 (eyebrow maiúsculo, Montserrat) — sem ícone, só pra
   deixar os títulos dos painéis da home consistentes entre si. */
.recent-head h2 {
  margin: 0 0 14px;
  color: var(--green-900);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* 3 itens inteiros + um pedaço do 4º visíveis (cada item ≈ 77px + 8px de
     gap), o resto rola — pedido do dono 2026-09-21: o bloco não pode crescer
     com a lista. Mesmo padrão de scrollbar fina do Circular (.circular-lista). */
  max-height: 290px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--green-600) transparent;
}
.recent-list::-webkit-scrollbar { width: 6px; }
.recent-list::-webkit-scrollbar-track { background: transparent; }
.recent-list::-webkit-scrollbar-thumb {
  background: var(--green-600);
  border-radius: 999px;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--green-050);
  border: 1px solid transparent;
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.recent-item:hover,
.recent-item:focus-visible {
  background: var(--white);
  border-color: var(--green-600);
  transform: translateY(-2px);
}

.recent-item:active {
  transform: translateY(0);
}

.recent-item-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.recent-item-main strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.recent-item-desc {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.recent-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.recent-item-cat {
  padding: 2px 8px;
  color: var(--green-900);
  background: var(--green-100);
  border-radius: 999px;
}

.recent-item-date {
  color: var(--muted);
}

.recent-item-go {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--green-900);
  background: var(--green-100);
  border-radius: 50%;
  font-size: 18px;
}

.recent-item:hover .recent-item-go,
.recent-item:focus-visible .recent-item-go {
  color: var(--white);
  background: var(--green-900);
}

/* Marcador de versao pra conferir rapido qual build esta no ar. */
.build-badge {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 90;
  padding: 4px 9px;
  color: #fff;
  background: rgba(10, 10, 10, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
}

@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Painel de detalhe no mobile: sobe de baixo pra cima. */
@keyframes sheet-slide-up {
  from {
    transform: translateY(100vh);
  }
  to {
    transform: translateY(0);
  }
}

/* So aparece no mobile (regras completas em responsive.css). */
.detail-backdrop {
  display: none;
}

@media (max-width: 700px) {
  .detail-backdrop {
    display: block;
  }
}

@media (hover: hover) and (pointer: fine) {
  .content-card:hover {
    top: -4px;
    box-shadow: 0 20px 38px rgba(10, 10, 10, 0.12);
  }

  .content-card:not(.featured):hover .card-preview {
    opacity: 0.17;
  }

  .content-card.has-video:hover .card-video,
  .content-card.has-video:hover::after {
    opacity: 1;
  }

  .content-card.has-video:hover .card-top,
  .content-card.has-video:hover .card-copy p {
    opacity: 0;
  }

  .content-card.has-video:hover .card-copy h3 {
    position: absolute;
    bottom: 8px;
    color: var(--white);
    font-size: 18px;
  }
}

/* ============================================================
   Home redesign (2026-09): categoria em destaque vira um banner
   "hero" no topo, com pergunta rápida + acesso rápido lado a lado
   logo abaixo, e a grade de categorias mais compacta na sequência.
   Só entra em cena na home de fato — nunca com busca ativa nem com
   uma categoria aberta (senão quebraria a busca/o detalhe) — e só
   a partir de 701px: no celular a home continua exatamente como já
   era (o layout mobile já é bom, não precisa mexer).
   ============================================================ */
/* Achado 2026-09-15: "pergunta rápida"/"acesso rápido" (e depois "Avisos"
   também, mesmo achado) ficavam boiando por cima do conteúdo quando uma
   categoria estava aberta — .mobile-detail-open é adicionada no <body>
   sempre que um detalhe está ativo, EM QUALQUER largura de tela (o nome é
   de mobile, mas a classe não é exclusiva de mobile) — por isso essa regra
   fica FORA do guard de largura mínima abaixo (que exige
   :not(.mobile-detail-open), ou seja, nunca rodaria nesse estado).
   #circularSection tem ID (especificidade maior que a regra base
   .circular-section:not([hidden]) em circular.css), então o display:none
   aqui já ganha sem precisar de :not([hidden]) extra. Usuário só quer ver
   pergunta/atalhos/avisos na home. */
body.mobile-detail-open .home-focus-row,
body.mobile-detail-open #circularSection {
  display: none;
}

@media (min-width: 701px) {
  body:not(.busca-ativa):not(.mobile-detail-open) #biblioteca {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0 38px 40px;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .section-head,
  body:not(.busca-ativa):not(.mobile-detail-open) #categorySidebar {
    display: none;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) #contentLayout,
  body:not(.busca-ativa):not(.mobile-detail-open) #contentMain,
  body:not(.busca-ativa):not(.mobile-detail-open) #contentGrid {
    display: contents;
  }

  /* Achado 2026-09-15: o número de categorias nem sempre é múltiplo de 4 —
     quando sobra 1 ou 2 colunas vazias na última fileira de cards, o Grid
     PREENCHE esse buraco com ".recent" (que cabe em 2 colunas) antes de
     abrir uma fileira nova, e "Avisos" (que também precisaria de 2) não
     cabe no que sobrou, então vai sozinho pra fileira seguinte — os dois
     saem grudados, não lado a lado. Esse espaçador (inserido em render.js,
     logo antes de recentContentHTML()) ocupa a fileira INTEIRA (span 1/-1)
     bem antes deles na ordem — como precisa das 4 colunas livres, nunca
     cabe num buraco parcial, e força ".recent"/"Avisos" pra uma fileira
     nova e genuinamente vazia, garantindo os dois lado a lado sempre.
     Pode sobrar espaço visual onde os cards de categoria pararam — aceito
     de propósito, é melhor que os dois painéis saírem separados. */
  body:not(.busca-ativa):not(.mobile-detail-open) .recent-row-spacer {
    grid-column: 1 / -1;
    order: 3;
  }

  /* Avisos ficam ao lado de "Conteúdos recentes" (não mais no topo),
     50/50 — mesmo "order" que .recent. Se só um dos dois existir na hora,
     ele toma a largura inteira sozinho.
     :not([hidden]) é essencial aqui: sem isso, display:flex nesta regra
     (mais específica que a regra nativa [hidden]{display:none}) mantinha
     a seção "vazia" ocupando espaço mesmo com hidden setado pelo JS
     (bug real encontrado 2026-09-15 — a seção tinha padding/borda próprios
     que apareciam como uma caixa branca vazia quando não tinha aviso). */
  body:not(.busca-ativa):not(.mobile-detail-open) #circularSection:not([hidden]) {
    grid-column: span 2;
    order: 4;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    /* zera a margem própria (26px embaixo) — o espaçamento vem só do gap
       do grid agora, senão os dois ficam com alturas desalinhadas. */
    margin: 0;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) #biblioteca:not(:has(.recent)) #circularSection:not([hidden]) {
    grid-column: 1 / -1;
  }

  /* pergunta rápida + acesso rápido lado a lado, logo abaixo do banner.
     (Agenda desativada 2026-09-15 — ver index.js — por isso este
     bloco voltou pro sistema de 2 colunas de antes; a versão de 4 colunas
     pra Agenda fica em GUIAS_OUTROS_PROJETOS/git history pra quando
     retomar, ver PROXIMOS_PASSOS.md item 4.) */
  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row {
    grid-column: 1 / -1;
    order: 2;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
    align-items: stretch;
    gap: 12px;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row:not(:has(.quiz-card-slot:not([hidden]))),
  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row:not(:has(.quick-access:not([hidden]))) {
    grid-template-columns: 1fr;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card-slot {
    margin: 0;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card {
    max-width: none;
    min-height: 280px;
    height: 100%;
    padding: 30px 36px;
    color: var(--white);
    background:
      radial-gradient(circle at 88% 40%, rgba(126, 166, 149, 0.2), transparent 24%),
      linear-gradient(135deg, #123a2f 0%, #17483a 54%, #12372e 100%);
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
  }

  /* Layout largo: pergunta à esquerda, alternativas à direita — é isso
     que dá o "tamanho" maior da pergunta na simulação aprovada, não só
     cor de fundo. Sem isso, .quiz-body cai no empilhado padrão (pequeno). */
  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-body {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(360px, 1.15fr);
    grid-template-areas: "head options" "question options" "helper options" "feedback feedback" "status status" "foot foot";
    column-gap: clamp(28px, 4vw, 70px);
    row-gap: 8px;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-head {
    grid-area: head;
    margin: 0 0 5px;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-question {
    grid-area: question;
    margin: 0;
    color: var(--white);
    font-size: clamp(27px, 2.25vw, 38px);
    line-height: 1.04;
    letter-spacing: -0.045em;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-eyebrow {
    padding: 0;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
  }

  /* Abaixo da pergunta: a barra da Jornada Persol (quem participa). O texto de ajuda que ficava aqui saiu (08/10). (origem: Persol) */
  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .jp-hud {
    grid-area: helper;
    margin: 5px 0 0;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-options {
    grid-area: options;
    align-self: center;
    min-width: 0;
    gap: 7px;
  }

  /* sem min-width:0 aqui, um texto de alternativa mais comprido força o
     item de grid a crescer além da coluna (min-content), estourando a
     largura do card em vez de quebrar linha por dentro dele. */
  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-option {
    min-width: 0;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-option-texto {
    min-width: 0;
  }

  /* Achado 2026-09-15 (via screenshot do usuário): a variante escura do
     card só ajustava o layout (grid-area) do quiz-feedback, não a cor —
     ele seguia com o fundo/texto CLAROS de quiz.css (pensados pro popup
     branco), que em cima do verde escuro do card viravam texto verde
     sobre fundo quase verde, ilegível. Dá contraste próprio aqui, no
     mesmo padrão branco-translúcido do resto do card escuro. */
  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-feedback {
    grid-area: feedback;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-feedback.is-correct {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-feedback.is-wrong {
    background: rgba(192, 57, 43, 0.22);
    border-color: rgba(192, 57, 43, 0.4);
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-feedback-veredito {
    color: var(--white);
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-feedback.is-wrong .quiz-feedback-veredito {
    color: #ffb4ac;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-feedback-texto {
    color: rgba(255, 255, 255, 0.88);
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-chamada,
  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-volta {
    color: rgba(255, 255, 255, 0.92);
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-status {
    grid-area: status;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-foot {
    grid-area: foot;
    justify-content: flex-end;
    margin-top: 4px;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-option {
    min-height: 42px;
    padding: 7px 12px;
    color: #203e35;
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-option:hover {
    background: var(--white);
    border-color: #95c3ad;
    box-shadow: 0 0 0 3px rgba(149, 195, 173, 0.2);
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-later,
  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-done {
    color: var(--white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-later:hover,
  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quiz-card .quiz-done:hover {
    color: var(--green-900);
    background: var(--white);
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quick-access {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 22px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(10, 10, 10, 0.055);
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quick-access-row {
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 218px;
    overflow-y: auto;
  }

  /* Sem a Pergunta rápida na linha (respondida, adiada, sem pergunta hoje,
     ou modo popup — ver #quizCardSlot[hidden] em quiz.js), o Acesso rápido
     toma a linha inteira sozinho: os atalhos passam de lista empilhada pra
     lado a lado (pedido do usuário 2026-09-16), com o mesmo visual de
     sempre — só a disposição muda. */
  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row:not(:has(.quiz-card-slot:not([hidden]))) .quick-access-row {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    max-height: none;
    overflow: visible;
  }
  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row:not(:has(.quiz-card-slot:not([hidden]))) .quick-access::after {
    display: none;
  }

  /* sombra suave embaixo, indicando que dá pra rolar quando tem mais itens */
  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .quick-access::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 30px;
    bottom: 22px;
    height: 28px;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--white));
    border-radius: 0 0 12px 12px;
    pointer-events: none;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .qa-open {
    min-height: 44px;
    padding: 7px 38px 7px 8px;
    background: var(--green-050);
    border: 0;
    box-shadow: none;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row .qa-icon {
    width: 34px;
    height: 34px;
  }

  /* categoria em destaque vira o banner "hero" */
  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.featured {
    grid-column: 1 / -1;
    order: 1;
    height: 270px;
    min-height: 0;
    /* cancela o padding lateral de #biblioteca (38px) — o banner vaza até
       a borda da tela em vez de ficar preso dentro do mesmo respiro dos
       outros cards, igual na simulação aprovada. */
    margin: 0 -38px 2px;
    padding: 0;
    background: #f4f2eb;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    isolation: isolate;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-hero-copy {
    position: relative;
    z-index: 8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 59%;
    height: 100%;
    padding: 22px 0 22px 44px;
    color: #142d25;
    pointer-events: none;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-hero-eyebrow {
    margin-bottom: 12px;
    color: rgba(10, 10, 10, 0.62);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-hero-title {
    margin: 0;
    color: #142d25;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(34px, 3vw, 52px);
    line-height: 0.9;
    letter-spacing: -0.05em;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-hero-description {
    margin: 12px 0 0;
    max-width: 90%;
    color: #66756f;
    font-size: clamp(13px, 1.1vw, 16px);
    line-height: 1.4;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.featured .featured-carousel {
    inset: 0 0 0 auto;
    width: 41%;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.featured .featured-carousel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 6;
    width: 44%;
    background: linear-gradient(90deg, #f4f2eb 0%, rgba(244, 242, 235, 0.96) 18%, rgba(244, 242, 235, 0.72) 45%, rgba(244, 242, 235, 0.3) 72%, rgba(244, 242, 235, 0) 100%);
    pointer-events: none;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.featured .featured-shade {
    background: linear-gradient(90deg, transparent 38%, rgba(10, 25, 20, 0.08) 58%, rgba(10, 25, 20, 0.68) 100%);
  }

  /* Fundo semi-opaco + blur (igual ao card original) em vez de texto solto
     por cima do vídeo — os vídeos reais de lançamento já têm texto/legenda
     própria embutida neles, então a legenda daqui precisa de um fundo pra
     continuar legível em cima de qualquer conteúdo, não só dos de teste. */
  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.featured .featured-caption {
    top: auto;
    right: 16px;
    bottom: 16px;
    left: auto;
    width: 180px;
    max-width: 180px;
    padding: 12px 14px;
    background: rgba(18, 39, 31, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transform: none;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.featured .featured-caption-eyebrow {
    margin-bottom: 6px;
    font-size: 9px;
    letter-spacing: 0.24em;
    opacity: 0.85;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.featured .featured-caption strong {
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.05;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.featured .featured-caption small {
    display: none;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.featured .featured-dots {
    top: 14px;
    right: 16px;
    bottom: auto;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.featured .featured-controls {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.featured:hover .featured-controls {
    opacity: 1;
  }

  /* categorias regulares: cards mais compactos abaixo do hero */
  body:not(.busca-ativa):not(.mobile-detail-open) .category-carousel > .content-card {
    order: 3;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card:not(.featured) {
    min-height: 142px;
    padding: 20px 22px;
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(10, 10, 10, 0.055);
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card:not(.featured) .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card:not(.featured) .card-icon .material-symbols-rounded {
    font-size: 25px;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card:not(.featured) .card-copy h3 {
    margin: 18px 0 6px;
    font-size: 19px;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card:not(.featured) .card-copy p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Sem isso, o box-shadow "de descanso" que a gente definiu ali em cima
     (mais específico que a regra antiga de :hover em styles.css) vencia a
     cascata e o hover parecia não fazer nada — o pulinho (transform) até
     acontecia, mas a sombra ficava sempre igual. */
  body:not(.busca-ativa):not(.mobile-detail-open) .content-card:not(.featured):hover {
    top: -4px;
    box-shadow: 0 18px 36px rgba(10, 10, 10, 0.14);
  }

  /* o banner não é um card clicável igual aos outros — sem "pulinho" nele */
  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.featured:hover {
    top: 0;
    box-shadow: none;
  }

  /* Categorias com vídeo de fundo (ex.: Material de Marketing) tinham um
     hover especial que escurecia o card e escondia o texto — tira daqui
     pra ficar padrão igual aos outros cards da home. */
  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.has-video:hover .card-video,
  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.has-video:hover::after {
    opacity: 0;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.has-video:hover .card-top,
  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.has-video:hover .card-copy p {
    opacity: 1;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .content-card.has-video:hover .card-copy h3 {
    position: static;
    color: inherit;
    font-size: inherit;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .recent {
    grid-column: span 2;
    order: 4;
    align-self: stretch;
    margin-top: 0;
  }

  body:not(.busca-ativa):not(.mobile-detail-open) #biblioteca:not(:has(#circularSection:not([hidden]))) .recent {
    grid-column: 1 / -1;
  }

  /* "Todas as categorias" não é necessário nesse layout — já dá pra ver
     tudo direto na grade abaixo. Fica escondido (mesma regra global de
     .category-carousel-head/.open-categories-button de sempre). */
}

/* Tablet (701–1100px): 2 colunas em vez de 4, foco vira uma coluna só —
   mesmo espírito do breakpoint de 1100px que já existia em responsive.css. */
@media (min-width: 701px) and (max-width: 1100px) {
  body:not(.busca-ativa):not(.mobile-detail-open) #biblioteca {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.busca-ativa):not(.mobile-detail-open) .home-focus-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* Busca: os resultados não ficam colados na seção de Avisos — mesmo espaço (24px) da tela inicial (pedido de 08/10). */
body.busca-ativa #circularSection:not([hidden]) { margin-top: 24px; }

/* Aviso de mudança na Política de Privacidade (V.253), uma vez por aparelho */
.aviso-politica {
  position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 3200;
  display: flex; align-items: center; gap: 14px; max-width: min(560px, calc(100vw - 32px)); padding: 14px 16px;
  background: var(--white); color: var(--green-900); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(23, 48, 40, 0.18); font-size: 13.5px; line-height: 1.45;
}
.aviso-politica p { margin: 0; }
.aviso-politica a { color: var(--green-700); font-weight: 700; }
.aviso-politica button { flex: 0 0 auto; min-height: 36px; padding: 0 16px; font: inherit; font-weight: 800; color: #fff; background: var(--green-700); border: 0; border-radius: 999px; cursor: pointer; }
@media (max-width: 640px) { .aviso-politica { flex-direction: column; align-items: stretch; right: 16px; } }