/* ==========================================================================
   Coere — Área do aluno · frente (MAPA §9)

   Tokens declarados em .ca-doc com os valores do tokens.json do Design System
   (Identidade visual/Design System/tokens.json). O tema só entra com a Figtree
   (tokens/colors_and_type.css); sem ele, a fonte é a do sistema.
   Valores fora do Design System estão marcados [a aprovar] (MAPA §16).
   CSP: nada inline nos templates; o JS só escreve estilo por CSSOM.

   Temas: claro é o padrão (.ca-doc); escuro em .ca-doc[data-tema="escuro"],
   posto no <html> por area-head.js antes da primeira pintura a partir de
   localStorage['ca-tema']. Toda cor que muda com o tema é uma variável --t-
   declarada só nesses dois blocos; o resto da folha não conhece o tema.
   ========================================================================== */

/* Cores que a troca de tema anima dentro de degradês (sem suporte: trocam direto). */
@property --t-barra-topo {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

@property --t-barra-base {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

@property --t-painel-a {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

@property --t-painel-b {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

@property --t-painel-brilho {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

/* Gradiente reativo do painel de visitante (Design System, Movimento): a posição do brilho
   anima entre os pontos que o area.js grava. Sem suporte, o brilho pula direto. */
@property --ca-px {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 82%;
}

@property --ca-py {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 12%;
}

/* ---------- 0. Tokens ---------- */
.ca-doc {
  /* Marca e tints */
  --moss-green: #325A41;
  --moss-600: #2A4D37;
  --golden-yellow: #EBCD50;
  --graphite-green: #141E19;
  --petroleum-green: #1E372D;
  --mist-gray: #F0F0F0;
  --white: #FFFFFF;
  --moss-200: #A9C2B2;
  --moss-050: #E6EEE9;
  --yellow-600: #D4B43A;
  --line-on-light: #D8D9D6;

  /* Texto e interação */
  --fg1: #141E19;
  --fg2: #46554D;
  --fg3: #6E7B74;
  --fg-on-dark-1: #F0F0F0;
  --fg-on-dark-2: #B4C0B9;
  --focus-ring: #EBCD50;

  /* Campo escuro 2.0 */
  --surface-dark: #0D1F17;
  --surface-dark-deep: #081711;
  --surface-dark-mid: #10251B;
  --surface-dark-soft: #17382A;
  --glass-dark: rgba(13, 31, 23, .58);
  --glass-dark-active: rgba(17, 43, 31, .68);
  --glass-line: rgba(240, 240, 240, .16);
  --glass-line-active: rgba(240, 240, 240, .24);

  /* Sombra */
  --shadow-sm: 0 1px 2px rgba(20, 30, 25, .06);
  --shadow-md: 0 6px 20px rgba(20, 30, 25, .08);
  --shadow-lg: 0 18px 48px rgba(20, 30, 25, .12);

  /* Espaço (base 4px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Raios */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-card: 24px;                             /* cards do site (Aplicativos, tema claro); era 32px até a 1.0.9 */
  --r-pill: 999px;

  /* Movimento */
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  --ease-fluid: cubic-bezier(.16, 1, .3, 1);
  --motion-fast: 180ms;
  --motion-medium: 280ms;
  --motion-response: 540ms;
  --motion-reveal: 720ms;
  --motion-ambient: 46s;

  /* Fundos de página dos dois temas (camadas fixas; a escura entra por opacidade). */
  /* As camadas passam 12% de cada lado da tela, para a aurora (deriva + parallax) nunca
     mostrar a borda; posições e raios abaixo já descontam essa folga e pintam o mesmo
     desenho da 1.0.1 (82% 18% e 12% 88% na tela, elipses até 42% e 38%). */
  /* Claro: "Névoa com profundidade" (ds-surface--mist). O Design System usa círculos que
     acabam em 34% e 35% num componente; na página inteira, elipses até 42% e 38% [a aprovar]. */
  --ca-pagina-clara:
    radial-gradient(ellipse at 75.8% 24.2%, rgba(255, 255, 255, .94), transparent 34%),
    radial-gradient(ellipse at 19.4% 80.6%, rgba(50, 90, 65, .09), transparent 31%),
    #F0F0F0;
  /* Escuro, verde mais fechado que o campo 2.0: #050F0A e o brilho .16 [a aprovar]. */
  --ca-pagina-escura:
    radial-gradient(ellipse at 74.2% 16.1%, rgba(50, 90, 65, .16), transparent 28%),
    linear-gradient(145deg, #050F0A 0%, #081711 55%, #0D1F17 100%);

  /* ----- Tema claro (padrão): gramática clara editorial, verde nos detalhes ----- */
  --t-fundo: var(--mist-gray);
  --t-pagina-escura: 0;
  --t-logo-claro: block;
  --t-logo-escuro: none;

  --t-tx1: var(--fg1);
  --t-tx2: var(--fg2);
  --t-rotulo: var(--fg2);
  --t-link: var(--moss-green);
  --t-link-hover: var(--moss-600);
  --t-destaque: var(--moss-green);            /* trilha do topo (amarelo sobre claro: 1,38:1) */
  --t-foco: var(--graphite-green);            /* o amarelo some no claro */
  --t-erro: #9A352E;                          /* já usado no site (css/site.css) */
  --t-sucesso: var(--moss-green);
  --t-linha: var(--line-on-light);
  --t-linha-forte: var(--moss-200);

  --t-card: none;                             /* camadas de brilho do card (só no escuro) */
  --t-card-cor: var(--white);                 /* branco é privilégio de card */
  --t-card-borda: var(--line-on-light);
  --t-card-borda-hover: var(--moss-200);
  --t-card-sombra: 0 1px 2px rgba(20, 30, 25, .04), 0 10px 30px rgba(20, 30, 25, .04);   /* discreta [a aprovar] */
  --t-card-sombra-hover: 0 1px 2px rgba(20, 30, 25, .04), 0 18px 48px rgba(20, 30, 25, .10);
  --t-superficie: none;
  --t-superficie-desfoque: none;
  --t-spot: rgba(50, 90, 65, .10);            /* spotlight musgo no lugar do amarelo [a aprovar] */

  --t-icone-fundo: var(--moss-050);
  --t-icone-borda: transparent;
  --t-icone-tinta: var(--moss-green);
  --t-selo-borda: var(--moss-200);
  --t-selo-tinta: var(--moss-green);

  /* Cards de coleção no desenho da página Aplicativos (1.0.10): ícone em círculo que fica
     amarelo no hover e ícone grande ao fundo, quase apagado. */
  --t-card-icone-fundo: var(--moss-050);
  --t-card-icone-borda: transparent;
  --t-card-icone-tinta: var(--moss-green);
  --t-marca: rgba(50, 90, 65, .055);
  --t-marca-hover: rgba(50, 90, 65, .09);
  --t-suave: var(--moss-050);                 /* botão suave: "Ver materiais", "Baixar" */
  --t-suave-tinta: var(--moss-green);
  --t-suave-hover: var(--moss-green);
  --t-suave-hover-tinta: var(--mist-gray);

  /* Anéis concêntricos do topo (hero do site, em musgo no claro) [a aprovar]. */
  --t-anel: rgba(50, 90, 65, .16);
  --t-anel-forte: rgba(50, 90, 65, .24);
  --t-anel-ponto: var(--moss-green);

  --t-barra-topo: var(--white);
  --t-barra-base: var(--white);
  --t-barra-borda: var(--line-on-light);
  --t-barra-sombra: 24px 0 64px rgba(20, 30, 25, .14);   /* [a aprovar] */
  --t-item: var(--fg2);
  --t-item-hover-fundo: rgba(50, 90, 65, .08);         /* [a aprovar] */
  --t-item-hover: var(--fg1);
  --t-ativo-fundo: var(--moss-green);
  --t-ativo-tinta: var(--mist-gray);
  --t-pilula-sombra: 0 8px 24px rgba(50, 90, 65, .22); /* [a aprovar] */
  --t-inferior-ativo: var(--moss-green);
  --t-fio: var(--moss-green);

  --t-botao-cheio: var(--moss-green);                  /* .primary do Design System */
  --t-botao-cheio-tinta: var(--mist-gray);
  --t-botao-cheio-hover: var(--moss-600);
  --t-botao-cheio-sombra: none;
  --t-fantasma: var(--fg1);
  --t-fantasma-hover-fundo: var(--moss-green);
  --t-fantasma-hover-tinta: var(--mist-gray);

  --t-campo: var(--white);
  --t-campo-borda: var(--fg3);                /* moss-200 dá 1,9:1 contra o card branco; fg3 dá 4,4:1 */
  --t-campo-tinta: var(--fg1);
  --t-campo-foco: var(--moss-green);
  --t-campo-halo: 0 0 0 3px var(--moss-050);
  --t-autofill: var(--white);
  --t-caixa: var(--moss-green);

  --t-painel-a: var(--moss-green);
  --t-painel-b: var(--moss-green);
  --t-painel-brilho: rgba(240, 240, 240, .10);  /* [a aprovar] */
  --t-painel-brilho-raio: 40%;
  --t-painel-eyebrow: var(--moss-050);        /* moss-200 sobre moss dá 4,1:1 (abaixo de 4,5 em 13px) */
  --t-painel-apoio: var(--mist-gray);

  /* Ondas pulsantes (Design System, Movimento): no escuro, núcleo amarelo e ondas névoa;
     no claro, as mesmas em musgo [a aprovar]. */
  --t-nucleo-borda: var(--moss-200);
  --t-onda: rgba(50, 90, 65, .32);

  /* Página de prompts (1.0.9): caixa da fórmula grafite e fundo do prompt névoa. */
  --t-formula-fundo: var(--graphite-green);
  --t-formula-borda: transparent;
  --t-prompt-fundo: var(--mist-gray);

  color-scheme: light;
  background-color: var(--t-fundo);
  font-family: 'Figtree', system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ----- Tema escuro (opcional): verde mais fechado que o campo 2.0 ----- */
.ca-doc[data-tema="escuro"] {
  --t-fundo: #050F0A;                         /* [a aprovar] */
  --t-pagina-escura: 1;
  --t-logo-claro: none;
  --t-logo-escuro: block;

  --t-tx1: var(--fg-on-dark-1);
  --t-tx2: var(--fg-on-dark-2);
  --t-rotulo: var(--fg-on-dark-1);
  --t-link: var(--fg-on-dark-1);
  --t-link-hover: var(--fg-on-dark-1);
  --t-destaque: var(--golden-yellow);         /* o amarelo da vista */
  --t-foco: var(--focus-ring);
  --t-erro: #F0B4AA;                          /* [a aprovar] (MAPA §16, item 4) */
  --t-sucesso: var(--fg-on-dark-1);
  --t-linha: var(--glass-line);
  --t-linha-forte: var(--glass-line-active);

  /* Brilho interno mais fraco que o da 1.0.0 e base rgba(8,23,17,.72) [a aprovar]. */
  --t-card:
    radial-gradient(circle at 92% 8%, rgba(76, 117, 88, .12), transparent 34%),
    linear-gradient(148deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025) 58%, rgba(50, 90, 65, .08));
  --t-card-cor: rgba(8, 23, 17, .72);
  --t-card-borda: rgba(240, 240, 240, .12);   /* [a aprovar] */
  --t-card-borda-hover: rgba(235, 205, 80, .3);   /* hover dos cards de Aplicativos (site) */
  --t-card-sombra: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 62px rgba(0, 0, 0, .18);
  --t-card-sombra-hover: inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 72px rgba(0, 0, 0, .24);
  --t-superficie: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  --t-superficie-desfoque: blur(24px);
  --t-spot: rgba(235, 205, 80, .10);          /* intensidade [a aprovar] */

  --t-icone-fundo: transparent;
  --t-icone-borda: var(--glass-line);
  --t-icone-tinta: var(--fg-on-dark-1);
  --t-selo-borda: var(--glass-line-active);
  --t-selo-tinta: var(--fg-on-dark-1);

  /* Como no site: círculo de contorno amarelo e ícone amarelo; só nos cards de coleção. */
  --t-card-icone-fundo: rgba(235, 205, 80, .08);
  --t-card-icone-borda: rgba(235, 205, 80, .34);
  --t-card-icone-tinta: var(--golden-yellow);
  --t-marca: rgba(240, 240, 240, .045);
  --t-marca-hover: rgba(240, 240, 240, .08);
  --t-suave: rgba(240, 240, 240, .08);
  --t-suave-tinta: var(--fg-on-dark-1);
  --t-suave-hover: var(--mist-gray);
  --t-suave-hover-tinta: var(--graphite-green);

  --t-anel: rgba(240, 240, 240, .12);
  --t-anel-forte: rgba(240, 240, 240, .2);
  --t-anel-ponto: var(--golden-yellow);

  --t-barra-topo: var(--surface-dark-deep);
  --t-barra-base: #050F0A;                    /* [a aprovar] */
  --t-barra-borda: var(--glass-line);
  --t-barra-sombra: 24px 0 64px rgba(3, 11, 7, .42);   /* [a aprovar] */
  --t-item: var(--fg-on-dark-2);
  --t-item-hover-fundo: rgba(240, 240, 240, .06);
  --t-item-hover: var(--fg-on-dark-1);
  --t-ativo-fundo: var(--mist-gray);
  --t-ativo-tinta: var(--graphite-green);
  --t-pilula-sombra: 0 8px 24px rgba(3, 11, 7, .28);   /* [a aprovar] */
  --t-inferior-ativo: var(--fg-on-dark-1);
  --t-fio: var(--mist-gray);

  --t-botao-cheio: var(--mist-gray);
  --t-botao-cheio-tinta: var(--graphite-green);
  --t-botao-cheio-hover: var(--white);
  --t-botao-cheio-sombra: 0 12px 30px rgba(3, 11, 7, .18);
  --t-fantasma: var(--fg-on-dark-1);
  --t-fantasma-hover-fundo: var(--mist-gray);
  --t-fantasma-hover-tinta: var(--graphite-green);

  --t-campo: rgba(255, 255, 255, .07);
  --t-campo-borda: var(--moss-200);           /* [a aprovar] */
  --t-campo-tinta: var(--mist-gray);
  --t-campo-foco: var(--mist-gray);
  --t-campo-halo: 0 0 0 0 transparent;
  --t-autofill: var(--surface-dark-soft);
  --t-caixa: var(--moss-200);                 /* [a aprovar] */

  --t-painel-a: var(--surface-dark-deep);
  --t-painel-b: var(--surface-dark-soft);
  --t-painel-brilho: rgba(76, 117, 88, .32);
  --t-painel-brilho-raio: 36%;
  --t-painel-eyebrow: var(--fg-on-dark-2);
  --t-painel-apoio: var(--fg-on-dark-2);

  --t-nucleo-borda: rgba(235, 205, 80, .28);
  --t-onda: rgba(240, 240, 240, .2);

  --t-formula-fundo: rgba(255, 255, 255, .05);
  --t-formula-borda: var(--glass-line);
  --t-prompt-fundo: rgba(255, 255, 255, .06);

  color-scheme: dark;
}

/* ---------- 1. Base ---------- */
.ca-doc *,
.ca-doc *::before,
.ca-doc *::after {
  box-sizing: border-box;
}

.ca-app,
.ca-auth {
  margin: 0;
  min-height: 100vh;
  color: var(--t-tx1);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Fundo de página fixo e fora da rolagem: névoa embaixo, campo escuro por cima
   (opacidade 0 no claro, 1 no escuro), para a troca de tema poder cruzar os dois. */
.ca-app::before,
.ca-auth::before,
.ca-app::after,
.ca-auth::after {
  content: '';
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
}

.ca-app::before,
.ca-auth::before {
  background: var(--ca-pagina-clara);
}

.ca-app::after,
.ca-auth::after {
  background: var(--ca-pagina-escura);
  opacity: var(--t-pagina-escura);
}

/* Aurora de página (Design System, Movimento): as duas camadas derivam devagar (46 s, ida
   e volta), seguem o ponteiro (--ca-parallax-x/y, até 19 × 14 px) e descem com a rolagem
   (--ca-rolagem, até 64 px, no máximo 5vh). Os valores vêm do area.js. */
@media (prefers-reduced-motion: no-preference) {
  .ca-app::before,
  .ca-auth::before,
  .ca-app::after,
  .ca-auth::after {
    transform: translate3d(var(--ca-parallax-x, 0px), calc(var(--ca-parallax-y, 0px) + min(var(--ca-rolagem, 0px), 5vh)), 0) scale(1.04);
    animation: ca-aurora var(--motion-ambient) ease-in-out infinite alternate;
    will-change: transform;
  }
}

@keyframes ca-aurora {
  0% {
    transform: translate3d(calc(-2% + var(--ca-parallax-x, 0px)), calc(-2% + var(--ca-parallax-y, 0px) + min(var(--ca-rolagem, 0px), 5vh)), 0) scale(1.03) rotate(-1deg);
  }

  100% {
    transform: translate3d(calc(4% + var(--ca-parallax-x, 0px)), calc(3% + var(--ca-parallax-y, 0px) + min(var(--ca-rolagem, 0px), 5vh)), 0) scale(1.09) rotate(1.2deg);
  }
}

/* Quebra de linha sem palavra sozinha: títulos e leads equilibrados, parágrafos com
   pretty. Onde o navegador não tem pretty, area.js junta as duas últimas palavras. */
.ca-auth__apoio,
.ca-lead,
.ca-topo__lead,
.ca-colecao__lead,
.ca-card__titulo,
.ca-fav__titulo,
.ca-secao__titulo,
.ca-material__titulo,
.ca-bloco__titulo,
.ca-novas__titulo,
.ca-novas__apoio,
.ca-vazio p,
.ca-estado p {
  text-wrap: balance;
}

.ca-card__resumo,
.ca-material__descricao,
.ca-bloco__texto,
.ca-aviso__texto,
.ca-campo__dica,
.ca-texto p,
.ca-texto li,
.ca-auth__links p {
  text-wrap: pretty;
}

/* :where() sem peso, para as classes dos logos (altura fixa) valerem. */
:where(.ca-doc) img {
  max-width: 100%;
  height: auto;
}

/* Logo por tema: os dois vão no HTML e só o do tema aparece. */
.ca-so-claro {
  display: var(--t-logo-claro);
}

.ca-so-escuro {
  display: var(--t-logo-escuro);
}

/* Regras de elemento sem peso (:where), para as classes (.ca-botao, .ca-pular…) valerem. */
:where(.ca-doc) a {
  color: inherit;
}

:where(.ca-doc) button,
:where(.ca-doc) input {
  font: inherit;
  color: inherit;
}

.ca-doc :focus-visible {
  outline: 3px solid var(--t-foco);
  outline-offset: 2px;
}

/* Links de texto: musgo sublinhado no claro, névoa no escuro; 1px → 2px. */
.ca-texto a,
.ca-auth__links a,
.ca-caixa a,
.ca-campo__dica a,
.ca-bloco__texto a,
.ca-estado a,
.ca-liberacoes a {
  color: var(--t-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ca-texto a:hover,
.ca-auth__links a:hover,
.ca-caixa a:hover,
.ca-campo__dica a:hover,
.ca-bloco__texto a:hover,
.ca-estado a:hover,
.ca-liberacoes a:hover {
  color: var(--t-link-hover);
  text-decoration-thickness: 2px;
}

/* Só para leitor de tela (nunca display:none). */
.ca-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Campo-armadilha (impresso por ca_campos_protecao em cadastro e esqueci). */
.ca-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Pular para o conteúdo. */
.ca-pular {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 40;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background-color: var(--t-ativo-fundo);
  color: var(--t-ativo-tinta);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.ca-doc .ca-pular:focus,
.ca-doc .ca-pular:focus-visible {
  transform: none;
}

/* ---------- 2. Casca logada: barra lateral (MAPA §9.2) ---------- */
/* Mecanismo do House autorizado pelo pedido; valores [a aprovar]. */
.ca-barra {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 84px;
  padding: 22px 14px 20px;
  border-right: 1px solid var(--t-barra-borda);
  background: linear-gradient(180deg, var(--t-barra-topo), var(--t-barra-base));
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  transition:
    width var(--motion-response) var(--ease-fluid),
    box-shadow var(--motion-response) var(--ease-fluid);
}

.ca-barra::-webkit-scrollbar {
  display: none;
}

/* Marca: símbolo na compacta, logo + nome na aberta (grafite no claro, névoa no escuro). */
.ca-marca {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--t-tx2);
  text-decoration: none;
  white-space: nowrap;
}

.ca-marca__simbolo {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 28px;
  height: auto;
  transform: translateY(-50%);
  transition: opacity var(--motion-fast) var(--ease-out);
}

.ca-marca__logo {
  flex: 0 0 auto;
  width: auto;
  height: 22px;
}

.ca-marca__nome {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ca-marca__logo,
.ca-marca__nome,
.ca-item__rotulo {
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-out);
}

/* Lista */
/* Pesquisa na barra (1.0.8): campo em pílula. Recolhida (56px de conteúdo), só a lupa no centro;
   aberta (hover ou foco no campo), placeholder e texto aparecem. A aba "Pesquisar" fica só para
   o celular (barra inferior), onde o campo não cabe. */
.ca-busca {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
}

.ca-busca .ph {
  position: absolute;
  top: 50%;
  left: 18px;
  z-index: 1;
  color: var(--t-item);
  font-size: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}

.ca-busca__entrada {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 4px 0 46px; /* cabe nos 56px da barra recolhida (o recuo não pode passar da largura) */
  border: 1px solid var(--t-barra-borda);
  border-radius: var(--r-pill);
  background-color: var(--t-item-hover-fundo);
  color: transparent;
  font: inherit;
  font-size: 14px;
  cursor: text;
  transition:
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.ca-busca__entrada::placeholder {
  color: var(--t-item);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-out);
}

.ca-busca__entrada::-webkit-search-cancel-button {
  display: none;
}

.ca-busca.is-atual .ca-busca__entrada {
  border-color: var(--t-ativo-fundo);
}

.ca-barra:is(:hover, :has(:focus-visible), .ca-barra--rotulos) .ca-busca__entrada {
  color: var(--t-tx1);
}

.ca-barra:is(:hover, :has(:focus-visible), .ca-barra--rotulos) .ca-busca__entrada::placeholder {
  opacity: 1;
}

.ca-barra.is-recolhida .ca-busca__entrada {
  color: transparent;
}

.ca-barra.is-recolhida .ca-busca__entrada::placeholder {
  opacity: 0;
}

.ca-busca__entrada:focus {
  border-color: var(--t-campo-foco);
  background-color: var(--t-campo);
}

.ca-nav li:has(> .ca-item[data-chave="pesquisar"]) {
  display: none;
}

/* Busca rápida do celular: aberta pela aba Pesquisar, logo acima da barra inferior. */
.ca-busca-rapida[hidden] {
  display: none;
}

.ca-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ca-barra__pe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1);
  margin-top: auto;
}

/* Item */
.ca-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 12px 17px;
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--t-item);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out);
}

.ca-item .ph {
  flex: 0 0 auto;
  font-size: 22px;
  transition: transform var(--motion-fast) var(--ease-out);
}

.ca-item__rotulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ca-item__curto {
  display: none;
}

/* Botão de tema na barra: mesmo desenho dos links; sem JS fica escondido. */
.ca-item.ca-tema {
  width: 100%;
  margin: 0;
  border: 0;
  background-color: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ca-tema[hidden] {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .ca-item:hover {
    background-color: var(--t-item-hover-fundo);
    color: var(--t-item-hover);
  }

  .ca-item:hover .ph {
    transform: translateX(2px);
  }
}

/* Ativo em CSS puro (vale sem JS e antes do defer). */
.ca-item[aria-current] {
  background-color: var(--t-ativo-fundo);
  color: var(--t-ativo-tinta);
}

/* Indicador: pílula posicionada pelo JS (translate + height); aparece com .is-pronta. */
.ca-indicador {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: none;
  width: 56px;
  height: 48px;
  border-radius: var(--r-lg);
  background-color: var(--t-ativo-fundo);
  box-shadow: var(--t-pilula-sombra);
  pointer-events: none;
  transition:
    transform var(--motion-response) var(--ease-fluid),
    width var(--motion-response) var(--ease-fluid),
    height var(--motion-medium) var(--ease-out);
}

.ca-barra.is-pronta .ca-indicador {
  display: block;
}

.ca-barra.is-pronta .ca-item[aria-current] {
  background-color: transparent;
}

/* Barra aberta (280px por cima do conteúdo; a coluna continua 84px). */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .ca-barra:hover {
    width: 280px;
    box-shadow: var(--t-barra-sombra);
  }

  .ca-barra:hover :is(.ca-item__rotulo, .ca-marca__nome, .ca-marca__logo) {
    opacity: 1;
    transition-delay: 60ms;
  }

  .ca-barra:hover .ca-marca__simbolo {
    opacity: 0;
  }

  .ca-barra:hover .ca-indicador {
    width: calc(100% - 28px);
  }
}

@media (min-width: 761px) {
  .ca-barra:has(:focus-visible) {
    width: 280px;
    box-shadow: var(--t-barra-sombra);
  }

  .ca-barra:has(:focus-visible) :is(.ca-item__rotulo, .ca-marca__nome, .ca-marca__logo) {
    opacity: 1;
    transition-delay: 60ms;
  }

  .ca-barra:has(:focus-visible) .ca-marca__simbolo {
    opacity: 0;
  }

  .ca-barra:has(:focus-visible) .ca-indicador {
    width: calc(100% - 28px);
  }

  /* Esc: força a compacta até o ponteiro sair ou o foco deixar a barra. */
  .ca-barra.is-recolhida {
    width: 84px;
    box-shadow: none;
  }

  .ca-barra.is-recolhida :is(.ca-item__rotulo, .ca-marca__nome, .ca-marca__logo) {
    opacity: 0;
    transition-delay: 0s;
  }

  .ca-barra.is-recolhida .ca-marca__simbolo {
    opacity: 1;
  }

  .ca-barra.is-recolhida .ca-indicador {
    width: 56px;
  }

  /* Sem o tema (sem logos): rótulos sempre visíveis e barra sempre aberta. */
  .ca-barra.ca-barra--rotulos {
    width: 280px;
    box-shadow: none;
  }

  .ca-barra--rotulos :is(.ca-item__rotulo, .ca-marca__nome) {
    opacity: 1;
  }

  .ca-barra--rotulos .ca-indicador {
    width: calc(100% - 28px);
  }
}

/* ---------- 3. Casca logada: conteúdo ---------- */
.ca-main {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  margin-left: 84px;
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-8);
  /* Largura útil máxima de 1400px, centrada na coluna ao lado da barra. */
  padding-inline: max(clamp(var(--sp-4), 4vw, var(--sp-8)), calc((100% - 84px - 1400px) / 2));
}

.ca-main:focus {
  outline: none;
}

@media (min-width: 761px) {
  .ca-barra--rotulos ~ .ca-main {
    margin-left: 280px;
    padding-inline: max(clamp(var(--sp-4), 4vw, var(--sp-8)), calc((100% - 280px - 1400px) / 2));
  }
}

/* Faixa do gestor */
.ca-previa {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px dashed var(--t-linha-forte);
  border-radius: var(--r-pill);
  color: var(--t-tx2);
  font-size: 14px;
  line-height: 1.5;
}

.ca-previa .ph {
  flex: 0 0 auto;
  font-size: 18px;
}

.ca-previa p {
  margin: 0;
}

/* Avisos */
.ca-avisos {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}

.ca-auth__cartao .ca-avisos {
  margin: 0 0 var(--sp-5);
}

.ca-aviso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--t-linha-forte);
  border-radius: var(--r-lg);
  font-size: 14px;
  line-height: 1.5;
}

.ca-aviso .ph {
  margin-top: 1px;
  font-size: 20px;
}

.ca-aviso__texto {
  margin: 0;
}

.ca-aviso--ok {
  color: var(--t-sucesso);
}

.ca-aviso--erro {
  border-color: var(--t-erro);
  color: var(--t-erro);
}

/* Topo: eyebrow, título grande e subtítulo à esquerda; o chip da conta no alto, à direita
   (1.0.10: hierarquia da referência de Daniel, 21/10/2026). */
.ca-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 104px;
  margin-bottom: var(--sp-6);
  padding-top: clamp(var(--sp-4), 3vw, var(--sp-6));
  padding-bottom: var(--sp-2);
}

.ca-topo__texto {
  min-width: 0;
}

.ca-topo__trilha {
  margin: 0 0 var(--sp-3);
  color: var(--t-destaque);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ca-topo__titulo {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.ca-topo__lead {
  max-width: 52ch;
  margin: var(--sp-3) 0 0;
  color: var(--t-tx2);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.5;
}

/* Anéis concêntricos e órbita (1.0.10): o sinal do hero do site (anel tracejado, arco aberto,
   anéis finos) no canto de cima, à direita, atrás do topo. Moldura com overflow: hidden para
   nunca criar rolagem lateral; o corte de cima e o da direita são as bordas da tela.
   Giram devagar em sentidos alternados; o ponto acompanha o anel do meio. */
.ca-sinal {
  --sinal: clamp(340px, 46vw, 660px);

  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: min(100%, calc(var(--sinal) * 1.1));
  height: calc(var(--sinal) * .72);
  overflow: hidden;
  opacity: .3;                                /* 30% do desenho da 1.0.10 (pedido de Daniel, 22/10/2026) */
  pointer-events: none;
  transition: opacity var(--motion-medium) var(--ease-out);
}

.ca-sinal__anel {
  position: absolute;
  top: calc(var(--sinal) * .2);
  left: calc(100% - var(--sinal) * .55);
  aspect-ratio: 1;
  border: 1px solid var(--t-anel);
  border-radius: 50%;
  translate: -50% -50%;
}

.ca-sinal__anel--1 {
  width: var(--sinal);
  border-style: dashed;
}

.ca-sinal__anel--2 {
  width: calc(var(--sinal) * .8);
  border-style: dashed;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.ca-sinal__anel--3 {
  width: calc(var(--sinal) * .52);
  border-color: var(--t-anel-forte);
}

.ca-sinal__anel--3 i {
  position: absolute;
  top: 14.6%;
  left: 14.6%;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--t-anel-ponto);
  opacity: .7;
  translate: -50% -50%;
}

.ca-sinal__anel--4 {
  width: calc(var(--sinal) * .3);
  border-left-color: transparent;
}

.ca-sinal__anel--5 {
  width: calc(var(--sinal) * .13);
  border-color: var(--t-anel-forte);
  border-top-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .ca-sinal__anel--1 {
    animation: ca-orbita 140s linear infinite;
  }

  .ca-sinal__anel--2 {
    animation: ca-orbita-volta 96s linear infinite;
  }

  .ca-sinal__anel--3 {
    animation: ca-orbita 48s linear infinite;
  }

  .ca-sinal__anel--4 {
    animation: ca-orbita-volta 64s linear infinite;
  }

  .ca-sinal__anel--5 {
    animation: ca-orbita 22s linear infinite;
  }
}

.ca-saindo .ca-sinal {
  opacity: 0;
}

/* Celular: menores, mais no canto e mais claros, para não passar atrás do título. */
@media (max-width: 760px) {
  .ca-sinal {
    --sinal: 300px;

    opacity: .21;                             /* os mesmos 30% sobre os .7 do celular */
  }

  .ca-sinal__anel {
    top: calc(var(--sinal) * .08);
    left: calc(100% - var(--sinal) * .22);
  }
}

.ca-topo__tema {
  display: none;
}

.ca-usuario {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  max-width: 40%;
  padding: 4px var(--sp-4) 4px 4px;
  border: 1px solid var(--t-linha);
  border-radius: var(--r-pill);
}

.ca-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--moss-green);
  color: var(--mist-gray);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.ca-avatar .ph {
  font-size: 22px;
}

/* Troca de avatar em Minha conta: o do topo mostra a escolha antes de salvar. */
.ca-avatar.is-trocou {
  animation: ca-marcar var(--motion-medium) var(--ease-fluid);
}

.ca-usuario__nome {
  min-width: 0;
  max-width: 16ch;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Lead e contagens */
.ca-lead {
  max-width: 60ch;
  margin: 0 0 var(--sp-7);
  color: var(--t-tx2);
  font-size: 18px;
  line-height: 1.5;
}

.ca-contagem,
.ca-secao__contagem {
  margin: 0;
  color: var(--t-tx2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.ca-contagem {
  margin-bottom: var(--sp-5);
}

/* Seções do Início, da pesquisa e da coleção: eyebrow + título + contagem, como os tópicos
   da página Aplicativos do site; a linha fina fecha o cabeçalho. */
.ca-secao + .ca-secao {
  margin-top: clamp(var(--sp-7), 5vw, var(--sp-8));
}

.ca-secao__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--t-linha);
}

.ca-secao__cabeca--leve {
  margin-bottom: var(--sp-4);
  padding-bottom: 0;
  border-bottom: 0;
}

.ca-secao__nome {
  min-width: 0;
}

.ca-secao__rotulo {
  margin: 0 0 var(--sp-2);
  color: var(--t-destaque);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ca-secao__titulo {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.ca-secao__contagem {
  font-size: 13px;
}

/* Vazio */
.ca-vazio {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px dashed var(--t-linha-forte);
  border-radius: var(--r-card);
  color: var(--t-tx2);
}

.ca-vazio .ph {
  flex: 0 0 auto;
  font-size: 28px;
}

.ca-vazio p {
  max-width: 60ch;
  margin: 0;
}

/* Ondas pulsantes (Design System, Movimento): núcleo circular com quatro ondas defasadas
   em 1,75 s num ciclo de 7 s. No vazio e no aviso de e-mail enviado; as ondas ficam dentro
   da caixa. */
.ca-vazio,
.ca-estado--ok {
  overflow: hidden;
}

.ca-nucleo {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 58px;
  aspect-ratio: 1;
  border: 1px solid var(--t-nucleo-borda);
  border-radius: 50%;
  color: var(--t-icone-tinta);
}

.ca-vazio .ca-nucleo .ph,
.ca-estado .ca-nucleo .ph,
.ca-nucleo .ph {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 24px;
}

.ca-nucleo::before,
.ca-nucleo::after,
.ca-nucleo b {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--t-onda);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: ca-onda 7s ease-out infinite;
}

.ca-nucleo::after {
  animation-delay: -1.75s;
}

.ca-nucleo b:nth-of-type(1) {
  animation-delay: -3.5s;
}

.ca-nucleo b:nth-of-type(2) {
  animation-delay: -5.25s;
}

.ca-nucleo--pequeno {
  width: 40px;
}

.ca-estado .ca-nucleo--pequeno .ph {
  font-size: 20px;
}

@keyframes ca-onda {
  0% {
    opacity: 0;
    transform: scale(.72);
  }

  18% {
    opacity: .34;
  }

  100% {
    opacity: 0;
    transform: scale(3.5);
  }
}

/* ---------- 4. Mosaico de cards (MAPA §9.3 e §25) ---------- */
/* No ritmo da página Aplicativos do site (pedido de Daniel, 21/10/2026, que trocou a grade
   normal da 1.0.7): a cada seis cards, dois largos e quatro estreitos (ca_mosaico_largo).
   12 colunas; as larguras vêm do espaço da própria grade (container query), porque a coluna
   de conteúdo muda com a barra aberta ou fechada:
   - grade larga (≥ 1040px): largo 6, estreito 3 — o largo põe o ícone ao lado do texto;
   - grade média (620 a 1039px): largo 12 (também com o ícone ao lado), estreito 6;
   - grade estreita: todos 12, empilhados.
   Os cards de uma linha têm a mesma altura e o rodapé de todos fica na base. */
.ca-grade {
  container: ca-grade / inline-size;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  align-items: stretch;
}

.ca-grade > * {
  grid-column: span 12;
  min-width: 0;
}

@container ca-grade (min-width: 620px) {
  .ca-grade > * {
    grid-column: span 6;
  }

  .ca-grade > .ca-card--largo,
  .ca-grade > .ca-novas--t12 {
    grid-column: span 12;
  }
}

@container ca-grade (min-width: 1040px) {
  .ca-grade > .ca-card {
    grid-column: span 3;
    min-height: 340px;
  }

  .ca-grade > .ca-card--largo {
    grid-column: span 6;
    min-height: 264px;
  }

  .ca-grade > .ca-novas--d3 { grid-column: span 3; }
  .ca-grade > .ca-novas--d6 { grid-column: span 6; }
  .ca-grade > .ca-novas--d9 { grid-column: span 9; }
  .ca-grade > .ca-novas--d12 { grid-column: span 12; }
}

/* Card: ícone e estrela em cima, texto no meio, contagem e botão na base; o ícone da coleção
   repete grande e quase apagado no canto de baixo (marca d'água dos cards de Aplicativos). */
.ca-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "icone canto"
    "corpo corpo"
    "pe pe";
  gap: var(--sp-5) var(--sp-4);
  height: 100%;
  padding: clamp(var(--sp-5), 2.4vw, 32px);
  border: 1px solid var(--t-card-borda);
  border-radius: var(--r-card);
  overflow: hidden;
  background-color: var(--t-card-cor);
  background-image: var(--t-card);
  box-shadow: var(--t-card-sombra);
  transition:
    translate var(--motion-response) var(--ease-fluid),
    border-color var(--motion-response) var(--ease-fluid),
    box-shadow var(--motion-response) var(--ease-fluid);
}

/* Largo: ícone numa coluna própria, texto e rodapé ao lado, estrela no canto. */
@container ca-grade (min-width: 620px) {
  .ca-card--largo {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "icone corpo canto"
      "icone pe pe";
    gap: var(--sp-5) clamp(var(--sp-5), 2.2vw, 28px);
  }

  .ca-card--largo .ca-card__corpo {
    max-width: 48ch;
  }
}

/* Spotlight interno (musgo no claro, amarelo no escuro): posição em --spotlight-x/y (px), gravada pelo JS. */
.ca-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle 360px at var(--spotlight-x, 50%) var(--spotlight-y, 0%), var(--t-spot), transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-response) var(--ease-out);
}

.ca-card:has(.ca-card__link:focus-visible),
.ca-fav:has(.ca-card__link:focus-visible) {
  outline: 3px solid var(--t-foco);
  outline-offset: 2px;
}

.ca-card__icone {
  grid-area: icone;
  display: inline-grid;
  align-self: start;
  place-items: center;
  width: clamp(56px, 4.6vw, 68px);
  aspect-ratio: 1;
  border: 1px solid var(--t-card-icone-borda);
  border-radius: 50%;
  background-color: var(--t-card-icone-fundo);
  color: var(--t-card-icone-tinta);
  transition:
    background-color var(--motion-medium) var(--ease-out),
    border-color var(--motion-medium) var(--ease-out),
    color var(--motion-medium) var(--ease-out),
    transform var(--motion-response) var(--ease-fluid);
}

.ca-card__icone .ph {
  font-size: clamp(24px, 2vw, 29px);
}

.ca-card__canto {
  grid-area: canto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--sp-2);
  min-width: 0;
}

.ca-card__canto .ca-favorito {
  margin: 0;
}

.ca-card__corpo {
  grid-area: corpo;
  min-width: 0;
}

.ca-card__secao {
  margin: 0 0 var(--sp-2);
  color: var(--t-tx2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ca-card__titulo {
  margin: 0;
  font-size: clamp(21px, 1.7vw, 26px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}

.ca-card--largo .ca-card__titulo {
  font-size: clamp(22px, 1.9vw, 28px);
}

.ca-card__link {
  color: inherit;
  text-decoration: none;
}

.ca-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.ca-doc .ca-card__link:focus-visible {
  outline: none;
}

/* No card, o resumo fica em até 3 linhas com reticências (pedido de Daniel, 22/10/2026: "texto
   de descrição está muito grande"); o texto inteiro continua na página da coleção. */
.ca-card__resumo {
  display: -webkit-box;
  max-width: 52ch;
  margin: var(--sp-3) 0 0;
  overflow: hidden;
  color: var(--t-tx2);
  font-size: 15px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* Rodapé sempre na base do card: contagem à esquerda, botão de acesso à direita. */
.ca-card__pe {
  grid-area: pe;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: 0;
}

.ca-card__contagem {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  color: var(--t-tx2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.ca-card__contagem .ph {
  color: var(--t-card-icone-tinta);
  font-size: 18px;
}

/* Botão de acesso (desenho; o link é o título): pílula suave com a seta. No card estreito da
   grade larga sobra pouco espaço e fica só a seta, num círculo de 44px. */
.ca-card__acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 var(--sp-4) 0 var(--sp-5);
  border-radius: var(--r-pill);
  background-color: var(--t-suave);
  color: var(--t-suave-tinta);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--motion-medium) var(--ease-out),
    color var(--motion-medium) var(--ease-out);
}

.ca-card__acao .ph {
  font-size: 17px;
  transition: transform var(--motion-medium) var(--ease-fluid);
}

@container ca-grade (min-width: 1040px) {
  .ca-card:not(.ca-card--largo) .ca-card__acao {
    padding: 0;
  }

  .ca-card:not(.ca-card--largo) .ca-card__acao-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Marca d'água: o ícone da coleção, grande, no canto de baixo. */
.ca-card__marca.ph {
  position: absolute;
  z-index: -1;
  right: -18px;
  bottom: -26px;
  color: var(--t-marca);
  font-size: clamp(120px, 11vw, 168px);
  line-height: 1;
  pointer-events: none;
  transform: rotate(-3deg);
  transition:
    color var(--motion-response) var(--ease-out),
    transform 420ms var(--ease-fluid);
}

/* No card largo, a marca fica no meio da borda direita, entre a estrela e o botão. */
@container ca-grade (min-width: 620px) {
  .ca-card--largo .ca-card__marca.ph {
    top: 50%;
    right: -22px;
    bottom: auto;
    margin-top: -.5em;
    font-size: clamp(120px, 10vw, 150px);
  }
}

/* Hover discreto: sobe 6px, borda e sombra; o ícone fica amarelo e gira um pouco, a marca
   d'água se desloca, a seta anda e o botão suave enche (cards de Aplicativos do site). */
@media (hover: hover) and (pointer: fine) {
  .ca-card:hover {
    translate: 0 -6px;
    border-color: var(--t-card-borda-hover);
    box-shadow: var(--t-card-sombra-hover);
  }

  .ca-card:hover::before {
    opacity: 1;
  }

  .ca-card:hover .ca-card__icone,
  .ca-fav:hover .ca-card__icone {
    border-color: transparent;
    background-color: var(--golden-yellow);
    color: var(--graphite-green);
    transform: rotate(-4deg) scale(1.04);
  }

  .ca-card:hover .ca-card__marca {
    color: var(--t-marca-hover);
    transform: translate(-8px, -8px) rotate(3deg) scale(1.04);
  }

  .ca-card:hover .ca-card__acao {
    background-color: var(--t-suave-hover);
    color: var(--t-suave-hover-tinta);
  }

  .ca-card:hover .ca-card__acao .ph,
  .ca-fav:hover .ca-fav__acao .ph {
    transform: translateX(3px);
  }

  .ca-botao:hover .ph-arrow-right,
  .ca-botao:hover .ph-arrow-up-right,
  .ca-botao:hover .ph-sign-in {
    transform: translate(2px, -1px);
  }

  .ca-botao:hover .ph-download-simple {
    transform: translateY(2px);
  }

  .ca-voltar:hover .ph-arrow-u-up-left {
    transform: translate(-2px, -1px);
  }
}

/* Teclado: o foco visível no título vale como hover para o ícone (a estrela focada depois do
   toque não conta, senão o ícone ficaria amarelo no celular). */
.ca-card:has(.ca-card__link:focus-visible) .ca-card__icone,
.ca-fav:has(.ca-card__link:focus-visible) .ca-card__icone {
  border-color: transparent;
  background-color: var(--golden-yellow);
  color: var(--graphite-green);
}

/* Novas coleções: card tracejado no espaço que sobra da última linha da biblioteca.
   Na linha inteira (sobra 12), fica deitado: ondas à esquerda e o texto ao lado. */
.ca-novas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-height: 200px;
  padding: clamp(var(--sp-5), 2.4vw, 32px);
  border: 1px dashed var(--t-linha-forte);
  border-radius: var(--r-card);
  overflow: hidden;
  color: var(--t-tx2);
  text-align: center;
}

.ca-novas__icone {
  width: 64px;
  border-color: transparent;
  background-color: var(--t-card-icone-fundo);
  color: var(--t-card-icone-tinta);
}

.ca-novas__titulo {
  margin: 0;
  color: var(--t-tx1);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.ca-novas__apoio {
  max-width: 40ch;
  margin: var(--sp-2) auto 0;
  font-size: 14px;
  line-height: 1.55;
}

.ca-novas--t12,
.ca-novas--d12 {
  min-height: 0;
}

@container ca-grade (min-width: 620px) {
  .ca-novas--t12 {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--sp-5);
    text-align: left;
  }

  .ca-novas--t12 .ca-novas__apoio {
    margin-left: 0;
  }
}

@container ca-grade (min-width: 1040px) {
  .ca-novas--t12:not(.ca-novas--d12) {
    flex-direction: column;
    justify-content: center;
    min-height: 200px;
    text-align: center;
  }

  .ca-novas--t12:not(.ca-novas--d12) .ca-novas__apoio {
    margin-left: auto;
  }

  .ca-novas--d12 {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--sp-5);
    text-align: left;
  }

  .ca-novas--d12 .ca-novas__apoio {
    margin-left: 0;
  }
}

/* Selos (só gestor) — [a aprovar] */
.ca-selos {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.ca-selo {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border: 1px solid var(--t-selo-borda);
  border-radius: var(--r-pill);
  color: var(--t-selo-tinta);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- Favoritos e pesquisa (1.0.7, MAPA §22) ---------- */
/* Estrela: o Design System usa um peso de ícone por superfície (Regular), então o estado
   favoritado é o círculo cheio na tinta do item ativo, com a estrela clara; aria-pressed. */
.ca-favorito {
  position: relative;
  z-index: 2; /* acima do link que cobre o card */
  margin: 0 0 0 auto;
}

.ca-favorito__botao {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--t-linha-forte);
  border-radius: 50%;
  background-color: transparent;
  color: var(--t-icone-tinta);
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.ca-favorito__botao .ph {
  font-size: 20px;
}

.ca-favorito__botao[aria-pressed="true"] {
  border-color: transparent;
  background-color: var(--t-ativo-fundo);
  color: var(--t-ativo-tinta);
}

.ca-favorito__botao[aria-busy="true"] {
  opacity: .6;
}

.ca-favorito__botao:active {
  transform: scale(.98);
}

.ca-favorito__botao.is-trocou .ph {
  animation: ca-marcar var(--motion-medium) var(--ease-fluid);
}

@media (hover: hover) and (pointer: fine) {
  .ca-favorito__botao:hover {
    border-color: var(--t-card-borda-hover);
    background-color: var(--t-icone-fundo);
  }

  .ca-favorito__botao[aria-pressed="true"]:hover {
    background-color: var(--t-ativo-fundo);
  }
}

.ca-colecao__cabeca .ca-favorito {
  margin-left: 0;
}

.ca-secao__titulo .ph {
  font-size: .85em;
  vertical-align: -.05em;
}

/* Favoritos do Início (1.0.10, MAPA §25): cards horizontais com o ícone à esquerda, a seção,
   o título e a contagem no meio e "Acessar materiais" à direita. Uma linha por coleção
   visível; as que não estão nos favoritos ficam com hidden e area.js mostra ou esconde. */
.ca-favoritos {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ca-fav {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4) clamp(var(--sp-4), 2.2vw, 28px);
  padding: clamp(var(--sp-4), 2vw, 24px) clamp(var(--sp-4), 2.4vw, 28px);
  border: 1px solid var(--t-card-borda);
  border-radius: var(--r-card);
  background-color: var(--t-card-cor);
  background-image: var(--t-card);
  box-shadow: var(--t-card-sombra);
}

.ca-fav[hidden],
.ca-favoritos__vazio[hidden] {
  display: none;
}

.ca-fav.ca-surgir {
  transition:
    opacity var(--motion-reveal) var(--ease-fluid) var(--ca-atraso, 0ms),
    transform var(--motion-reveal) var(--ease-fluid) var(--ca-atraso, 0ms),
    filter var(--motion-reveal) var(--ease-fluid) var(--ca-atraso, 0ms),
    translate var(--motion-response) var(--ease-fluid),
    border-color var(--motion-response) var(--ease-fluid),
    box-shadow var(--motion-response) var(--ease-fluid);
}

/* Saída da linha quando a estrela é desmarcada (a saída de tela, mais curta). */
.ca-fav.is-saindo,
.ca-favoritos__vazio.is-saindo {
  opacity: 0;
  transform: translateY(-12px);
  filter: blur(6px);
  transition:
    opacity var(--motion-medium) var(--ease-out),
    transform var(--motion-medium) var(--ease-out),
    filter var(--motion-medium) var(--ease-out);
}

.ca-fav .ca-card__icone {
  grid-area: auto;
  align-self: center;
}

.ca-fav__texto {
  min-width: 0;
}

.ca-fav .ca-card__secao {
  margin-bottom: 6px;
}

.ca-fav__titulo {
  margin: 0;
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}

.ca-fav .ca-card__contagem {
  margin-top: var(--sp-2);
}

.ca-fav__acao {
  min-height: 48px;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .ca-fav:hover {
    translate: 0 -4px;
    border-color: var(--t-card-borda-hover);
    box-shadow: var(--t-card-sombra-hover);
  }

  .ca-fav:hover .ca-fav__acao {
    background-color: var(--t-botao-cheio-hover);
    box-shadow: var(--t-botao-cheio-sombra);
  }
}

@media (max-width: 640px) {
  .ca-fav {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ca-fav__acao {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Sem favorito: dica discreta no lugar das linhas. */
.ca-favoritos__vazio {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--t-linha-forte);
  border-radius: var(--r-card);
  color: var(--t-tx2);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

.ca-favoritos__vazio .ph {
  flex: 0 0 auto;
  color: var(--t-card-icone-tinta);
  font-size: 20px;
}

/* Pesquisa */
.ca-pesquisa {
  display: grid;
  gap: var(--sp-2);
  max-width: 760px;
  margin: 0 0 var(--sp-7);
}

.ca-pesquisa__linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.ca-pesquisa__campo {
  position: relative;
  flex: 1 1 280px;
}

.ca-pesquisa__campo .ph {
  position: absolute;
  top: 50%;
  left: 16px;
  color: var(--t-tx2);
  font-size: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}

.ca-pesquisa__campo .ca-campo__entrada {
  padding-left: 46px;
}

.ca-pesquisa__resultado + .ca-secao {
  margin-top: 0;
}

.ca-material__colecao a {
  color: var(--t-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- Biblioteca de prompts (1.0.9, MAPA §24 e §27) ---------- */
/* Texto à esquerda, fórmula à direita, barra com a contagem, Filtrar e Montar prompt, e os cards. */
.ca-prompts__intro {
  display: grid;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}

@media (min-width: 1100px) {
  .ca-prompts__intro {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
    align-items: start;
    column-gap: clamp(32px, 4vw, 72px);
  }
}

.ca-prompts__texto > :last-child {
  margin-bottom: 0;
}

/* Caixa da fórmula: grafite no claro, vidro no escuro; o que está entre
   colchetes em amarelo e itálico. */
.ca-formula {
  margin: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  border: 1px solid var(--t-formula-borda);
  border-radius: var(--r-card);
  background-color: var(--t-formula-fundo);
  color: var(--fg-on-dark-1);
}

.ca-formula__rotulo {
  margin: 0 0 var(--sp-3);
  color: var(--fg-on-dark-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ca-formula__texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.ca-formula__var {
  color: var(--golden-yellow);
  font-style: italic;
}

.ca-prompts__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
}

.ca-prompts__total {
  margin: 0;
  font-size: 14px;
}

.ca-prompts__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.ca-prompts__acoes .ca-favorito {
  margin: 0;
}

.ca-prompts__n {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background-color: var(--t-ativo-fundo);
  color: var(--t-ativo-tinta);
  font-size: 12px;
  font-weight: 700;
}

.ca-prompts__n[hidden] {
  display: none;
}

/* Etiquetas do filtro */
.ca-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--t-card-borda);
  border-radius: var(--r-lg);
  background-color: var(--t-card-cor);
  background-image: var(--t-superficie);
  animation: ca-busca-sobe var(--motion-medium) var(--ease-fluid);
}

.ca-etiquetas[hidden] {
  display: none;
}

.ca-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin: 0;
  padding: 0 var(--sp-3);
  border: 1px solid var(--t-icone-borda);
  border-radius: var(--r-pill);
  background-color: var(--t-icone-fundo);
  color: var(--t-icone-tinta);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.ca-etiqueta__n {
  opacity: .7;
  font-size: 12px;
}

.ca-etiqueta[aria-pressed="true"] {
  border-color: transparent;
  background-color: var(--t-ativo-fundo);
  color: var(--t-ativo-tinta);
}

.ca-etiqueta--limpar {
  border-color: var(--t-linha-forte);
  background-color: transparent;
  color: var(--t-tx1);
}

.ca-etiqueta[hidden] {
  display: none;
}

/* Cards */
.ca-prompts__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ca-prompt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--t-card-borda);
  border-radius: var(--r-card);
  background-color: var(--t-card-cor);
  background-image: var(--t-card);
  scroll-margin-top: var(--sp-6);
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-response) var(--ease-fluid);
}

.ca-prompt[hidden] {
  display: none;
}

/* Vindo da pesquisa (#prompt-id): o card fica marcado. */
.ca-prompt:target {
  border-color: var(--t-ativo-fundo);
  box-shadow: 0 0 0 3px var(--t-ativo-fundo);
}

.ca-prompt__imagem {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--t-icone-fundo);
}

.ca-prompt__imagem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-response) var(--ease-fluid);
}

/* Imagem pedida de novo (area.js, 1.0.13): o espaço fica limpo, sem o ícone de imagem quebrada
   nem o texto alternativo; se não vier, o ícone de imagem no centro. */
.ca-prompt__imagem.is-tentando img,
.ca-prompt__imagem.is-sem-imagem img {
  visibility: hidden;
}

.ca-prompt__sem-imagem {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: var(--t-card-icone-tinta);
  font-size: 40px;
  opacity: .55;
}

.ca-prompt__imagem.is-sem-imagem .ca-prompt__sem-imagem {
  display: grid;
}

.ca-prompt__lupa {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(20, 30, 25, .62);
  color: var(--mist-gray);
  font-size: 18px;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .ca-prompt:hover {
    border-color: var(--t-card-borda-hover);
    box-shadow: var(--t-card-sombra-hover);
  }

  .ca-prompt__imagem:hover img {
    transform: scale(1.03);
  }

  .ca-prompt__imagem:hover .ca-prompt__lupa {
    opacity: 1;
  }
}

.ca-prompt__imagem:focus-visible .ca-prompt__lupa {
  opacity: 1;
}

.ca-prompt__corpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

.ca-prompt__titulo {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.ca-prompt__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ca-prompt__etiquetas li {
  padding: 3px 10px;
  border: 1px solid var(--t-icone-borda);
  border-radius: var(--r-pill);
  background-color: var(--t-icone-fundo);
  color: var(--t-icone-tinta);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.ca-prompt__texto {
  max-height: 132px;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  overflow: auto;
  border-radius: var(--r-md);
  background-color: var(--t-prompt-fundo);
  color: var(--t-tx2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* Copiar prompt (1.0.14, pedido de Daniel: "botão copiar prompt ficou muito grande"): botão
   suave e compacto, como o "Ver materiais" dos cards; 36px com mouse, 40px no toque. O verde
   cheio fica para o hover e para o instante do "Copiado". Com .ca-botao na frente porque as
   regras gerais do botão vêm depois no arquivo (até a 1.0.13 ele saía com 50px). */
.ca-botao.ca-prompt__copiar {
  align-self: flex-start;
  gap: 8px;
  min-height: 36px;
  margin-top: auto;
  padding: 6px 14px 6px 12px;
  font-size: 13px;
}

.ca-botao.ca-prompt__copiar .ph {
  font-size: 16px;
}

.ca-botao.ca-prompt__copiar.is-copiado {
  background-color: var(--t-suave-hover);
  color: var(--t-suave-hover-tinta);
}

@media (hover: none) and (pointer: coarse) {
  .ca-botao.ca-prompt__copiar {
    min-height: 40px;
  }
}

.ca-prompt__copiar[hidden],
[data-ca-filtrar][hidden],
[data-ca-montar][hidden] {
  display: none;
}

/* Diálogos (imagem ampliada e Montar prompt) */
.ca-dialogo {
  width: min(100% - 32px, 560px);
  max-height: calc(100dvh - 48px);
  padding: var(--sp-5);
  border: 1px solid var(--t-card-borda);
  border-radius: var(--r-card);
  background-color: var(--t-card-cor);
  background-image: var(--t-superficie);
  color: var(--t-tx1);
  box-shadow: 0 30px 80px rgba(3, 11, 7, .35);
}

.ca-dialogo--imagem {
  width: min(100% - 32px, 1200px);
  padding: var(--sp-4);
}

.ca-dialogo[open] {
  animation: ca-busca-sobe var(--motion-medium) var(--ease-fluid);
}

.ca-dialogo::backdrop {
  background-color: rgba(8, 23, 17, .62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.ca-dialogo__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.ca-dialogo__titulo {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.ca-dialogo__fechar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--t-linha);
  border-radius: 50%;
  background: transparent;
  color: var(--t-tx1);
  font-size: 20px;
  cursor: pointer;
}

.ca-dialogo__imagem {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 160px);
  object-fit: contain;
  border-radius: var(--r-lg);
}

.ca-dialogo .ca-campo {
  margin-top: var(--sp-4);
}

.ca-montar__texto {
  min-height: 120px;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.ca-dialogo__acoes {
  justify-content: flex-end;
  margin-top: var(--sp-4);
}

/* Aviso rápido (copiado) */
.ca-aviso-rapido {
  position: fixed;
  bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 40;
  max-width: min(100% - 32px, 520px);
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background-color: var(--graphite-green);
  color: var(--mist-gray);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity var(--motion-medium) var(--ease-out), transform var(--motion-medium) var(--ease-fluid);
}

.ca-aviso-rapido.is-visivel {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- 5. Página da coleção (MAPA §9.4) ---------- */
.ca-colecao__cabeca {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.ca-colecao__cabeca .ca-selos {
  justify-content: flex-start;
}

.ca-colecao__cabeca .ca-card__icone {
  width: 68px;
}

/* Resumo e introdução com papéis distintos (pedido de Daniel, 21/10/2026): o resumo é o
   .coere-lead do Design System (até 22px, tinta principal, medida curta); a introdução é
   .coere-body (16px, 1.6) na tinta secundária, com a medida de corpo de 60 a 75 caracteres. */
.ca-colecao__lead {
  max-width: 52ch;
  margin: 0 0 var(--sp-6);
  color: var(--t-tx1);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  letter-spacing: -.005em;
}

.ca-colecao__intro {
  max-width: 68ch;
  color: var(--t-tx2);
  font-size: 16px;
  line-height: 1.6;
}

.ca-colecao__intro :is(strong, b, h2, h3, h4) {
  color: var(--t-tx1);
}

.ca-colecao__materiais {
  margin-top: var(--sp-7);
}

/* Texto livre da introdução (wp_kses_post). */
.ca-texto > :first-child {
  margin-top: 0;
}

.ca-texto > :last-child {
  margin-bottom: 0;
}

.ca-texto p,
.ca-texto ul,
.ca-texto ol,
.ca-texto blockquote {
  margin: 0 0 1em;
}

.ca-texto ul,
.ca-texto ol {
  padding-left: 1.25em;
}

.ca-texto h2,
.ca-texto h3,
.ca-texto h4 {
  margin: 1.5em 0 .5em;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.ca-texto strong,
.ca-texto b {
  font-weight: 600;
}

.ca-texto blockquote {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--t-linha-forte);
  color: var(--t-tx2);
}

.ca-texto img {
  border-radius: var(--r-lg);
}

/* Alinhamento do editor clássico, que chega como classe (a CSP não deixa style="" valer). */
.ca-texto .ca-alinhar-left {
  text-align: left;
}

.ca-texto .ca-alinhar-center {
  text-align: center;
}

.ca-texto .ca-alinhar-right {
  text-align: right;
}

.ca-texto .ca-alinhar-justify {
  text-align: justify;
}

/* Lista de materiais */
.ca-materiais {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ca-material {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  padding: clamp(var(--sp-4), 2vw, 24px) clamp(var(--sp-4), 2.4vw, 28px);
  border: 1px solid var(--t-card-borda);
  border-radius: var(--r-card);
  background-color: var(--t-card-cor);
  background-image: var(--t-superficie);
  box-shadow: var(--t-card-sombra);
  transition: border-color var(--motion-response) var(--ease-fluid);
}

/* A linha não é um link (o botão é): no hover, só a borda acende e o ícone fica amarelo. */
@media (hover: hover) and (pointer: fine) {
  .ca-material:hover {
    border-color: var(--t-card-borda-hover);
  }

  .ca-material:hover .ca-material__icone {
    border-color: transparent;
    background-color: var(--golden-yellow);
    color: var(--graphite-green);
    transform: rotate(-4deg);
  }
}

.ca-material__icone {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--t-card-icone-borda);
  border-radius: 50%;
  background-color: var(--t-card-icone-fundo);
  color: var(--t-card-icone-tinta);
  transition:
    background-color var(--motion-medium) var(--ease-out),
    color var(--motion-medium) var(--ease-out),
    transform var(--motion-response) var(--ease-fluid);
}

.ca-material__icone .ph {
  font-size: 24px;
}

.ca-material__texto {
  min-width: 0;
}

.ca-material__titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
}

.ca-material__descricao {
  margin: var(--sp-1) 0 0;
  color: var(--t-tx2);
  font-size: 14px;
  line-height: 1.5;
}

.ca-material__meta {
  margin: var(--sp-1) 0 0;
  color: var(--t-tx2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

/* ---------- 6. Blocos (conta e telas simples) ---------- */
/* Grade normal como a dos cards: blocos da mesma linha com a mesma altura. */
.ca-conta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  align-items: stretch;
}

.ca-bloco {
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  border: 1px solid var(--t-card-borda);
  border-radius: var(--r-card);
  background-color: var(--t-card-cor);
  background-image: var(--t-superficie);
  box-shadow: var(--t-card-sombra);
}

.ca-bloco--estreito {
  max-width: 640px;
}

.ca-bloco__titulo {
  margin: 0 0 var(--sp-5);
  font-size: clamp(22px, 1.9vw, 26px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.02em;
}

.ca-bloco__texto {
  max-width: 60ch;
  margin: 0 0 var(--sp-5);
  color: var(--t-tx1);
}

.ca-bloco > :last-child {
  margin-bottom: 0;
}

/* Avatar: "Usar as iniciais" numa linha própria e os 30 ícones Phosphor Regular do Design
   System numa grade fechada (6 × 5; 5 × 6 no celular), sem ícone sozinho na última linha.
   Rádios nativos por cima de cada ficha (teclado: setas; foco no anel do tema). */
.ca-avatares {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
  margin: 0 0 var(--sp-5);
  padding: 0;
  border: 0;
}

.ca-avatares__grade {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-2);
}

@media (max-width: 520px) {
  .ca-avatares__grade {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.ca-avatar-opcao {
  position: relative;
  display: grid;
  place-items: center;
}

.ca-avatar-opcao--iniciais .ca-avatar-opcao__ficha {
  flex: 0 0 48px;
  width: 48px;
}

.ca-avatar-opcao--iniciais {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--sp-3);
  font-size: 14px;
  font-weight: 500;
}

.ca-avatar-opcao input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ca-avatar-opcao__ficha {
  display: grid;
  place-items: center;
  width: min(100%, 48px);
  aspect-ratio: 1;
  border: 1px solid var(--t-icone-borda);
  border-radius: 50%;
  background-color: var(--t-icone-fundo);
  color: var(--t-icone-tinta);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.ca-avatar-opcao__ficha .ph {
  font-size: 22px;
}

.ca-avatar-opcao input:checked + .ca-avatar-opcao__ficha {
  border-color: transparent;
  background-color: var(--t-ativo-fundo);
  color: var(--t-ativo-tinta);
  box-shadow: 0 0 0 2px var(--t-card-cor), 0 0 0 4px var(--t-ativo-fundo);
}

.ca-avatar-opcao input:focus-visible + .ca-avatar-opcao__ficha {
  outline: 3px solid var(--t-foco);
  outline-offset: 5px;
}

.ca-avatar-opcao input:active + .ca-avatar-opcao__ficha {
  transform: scale(.98);
}

@media (hover: hover) and (pointer: fine) {
  .ca-avatar-opcao:hover .ca-avatar-opcao__ficha {
    transform: translateY(-2px);
  }

  .ca-avatar-opcao:hover input:not(:checked) + .ca-avatar-opcao__ficha {
    box-shadow: 0 0 0 1px var(--t-card-borda-hover);
  }
}

.ca-conta__email {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--t-linha);
}

.ca-conta__valor {
  margin: 0;
  overflow-wrap: anywhere;
}

.ca-liberacoes {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ca-liberacoes__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--t-linha);
}

.ca-liberacoes__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ca-liberacoes__validade {
  color: var(--t-tx2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

/* ---------- 7. Formulários (MAPA §5.0 e §9.6) ---------- */
.ca-form {
  display: grid;
  gap: var(--sp-5);
}

.ca-campo {
  display: grid;
  gap: var(--sp-2);
}

.ca-campo__rotulo {
  margin: 0;
  color: var(--t-rotulo);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.ca-campo__entrada {
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--t-campo-borda);
  border-radius: 18px;
  background-color: var(--t-campo);
  color: var(--t-campo-tinta);
  font-size: 16px;
  line-height: 1.4;
  transition:
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out);
}

.ca-campo__entrada:focus {
  border-color: var(--t-campo-foco);
  box-shadow: var(--t-campo-halo);
}

.ca-campo__entrada[aria-invalid="true"] {
  border-color: var(--t-erro);
}

/* Preenchimento automático com o fundo do campo do tema (nada de fundo escuro no claro). */
.ca-campo__entrada:-webkit-autofill {
  -webkit-text-fill-color: var(--t-campo-tinta);
  caret-color: var(--t-campo-tinta);
  box-shadow: inset 0 0 0 100px var(--t-autofill);
}

.ca-campo__entrada:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 100px var(--t-autofill), var(--t-campo-halo);
}

.ca-campo__erro {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: var(--t-erro);
  font-size: 14px;
  line-height: 1.5;
}

.ca-campo__erro .ph {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 16px;
}

.ca-campo__dica {
  margin: 0;
  color: var(--t-tx2);
  font-size: 14px;
  line-height: 1.5;
}

/* Regras da senha nova: area.js marca cada uma (.is-ok) enquanto a pessoa digita. */
.ca-regras {
  display: grid;
  gap: 2px;
  margin-top: var(--sp-1);
  padding: 0;
  list-style: none;
}

.ca-regra {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  transition: color var(--motion-fast) var(--ease-out);
}

.ca-regra .ph {
  flex: 0 0 auto;
  font-size: 16px;
}

.ca-regra.is-ok {
  color: var(--t-sucesso);
}

.ca-regra.is-ok .ph {
  animation: ca-marcar var(--motion-medium) var(--ease-fluid);
}

@keyframes ca-marcar {
  from {
    opacity: .4;
    transform: scale(.6);
  }
}

/* Senha com o botão de olho (44×44; hidden até o JS ligar). */
.ca-senha {
  position: relative;
}

.ca-senha:has(.ca-olho:not([hidden])) .ca-campo__entrada {
  padding-right: 56px;
}

.ca-olho {
  position: absolute;
  top: 50%;
  right: 3px;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background-color: transparent;
  color: var(--t-tx2);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

.ca-olho[hidden] {
  display: none;
}

.ca-olho .ph {
  font-size: 20px;
}

.ca-olho[aria-pressed="true"] {
  color: var(--t-tx1);
}

@media (hover: hover) and (pointer: fine) {
  .ca-olho:hover {
    background-color: var(--t-item-hover-fundo);
    color: var(--t-tx1);
  }
}

/* Caixas de seleção */
.ca-caixa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2) var(--sp-3);
}

.ca-caixa input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--t-caixa);
  cursor: pointer;
}

.ca-caixa label {
  color: var(--t-tx1);
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer;
}

.ca-caixa .ca-campo__erro {
  grid-column: 1 / -1;
}

/* Botões (pill) */
.ca-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  margin: 0;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.ca-botao .ph {
  font-size: 18px;
  transition: transform var(--motion-fast) var(--ease-out);
}

.ca-botao:active {
  transform: scale(.98);
}

/* Enviando (area.js trava o segundo envio): desabilitado do Design System. */
.ca-botao[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

/* Visitante: o acento da vista é o botão primário, amarelo nos dois temas. */
.ca-botao--primario {
  width: 100%;
  min-height: 52px;
  background-color: var(--golden-yellow);
  color: var(--graphite-green);
}

/* Casca logada, sem amarelo: musgo com tinta névoa no claro (.primary do Design
   System); névoa com tinta grafite no escuro. */
.ca-botao--claro {
  background-color: var(--t-botao-cheio);
  color: var(--t-botao-cheio-tinta);
}

.ca-botao--fantasma {
  border-color: currentColor;
  background-color: transparent;
  color: var(--t-fantasma);
}

/* Suave (1.0.10): o "Ver materiais" dos cards, em botão de verdade (Baixar, Abrir). */
.ca-botao--suave {
  background-color: var(--t-suave);
  color: var(--t-suave-tinta);
}

@media (hover: hover) and (pointer: fine) {
  .ca-botao--primario:hover {
    background-color: var(--yellow-600);
  }

  .ca-botao--claro:hover {
    background-color: var(--t-botao-cheio-hover);
    box-shadow: var(--t-botao-cheio-sombra);
  }

  .ca-botao--fantasma:hover {
    border-color: var(--t-fantasma-hover-fundo);
    background-color: var(--t-fantasma-hover-fundo);
    color: var(--t-fantasma-hover-tinta);
  }

  .ca-botao--suave:hover {
    background-color: var(--t-suave-hover);
    color: var(--t-suave-hover-tinta);
  }
}

.ca-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.ca-acoes form {
  margin: 0;
}

/* Estados de tela (enviado, fechado, sem acesso) */
.ca-estado {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--t-linha-forte);
  border-radius: var(--r-lg);
  color: var(--t-tx1);
  line-height: 1.5;
}

.ca-estado .ph {
  margin-top: 1px;
  font-size: 22px;
}

.ca-estado p {
  margin: 0;
}

.ca-estado + .ca-acoes {
  margin-top: var(--sp-5);
}

/* ---------- 8. Telas de visitante (MAPA §9.6) ---------- */
.ca-auth__grade {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Painel de marca: musgo no claro, campo escuro no escuro; a tinta é névoa nos dois
   e o foco volta a ser amarelo aqui dentro (grafite some sobre o musgo). */
.ca-auth__painel {
  --t-foco: var(--focus-ring);

  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding:
    max(var(--sp-5), env(safe-area-inset-top))
    max(var(--sp-4), env(safe-area-inset-right))
    var(--sp-6)
    max(var(--sp-4), env(safe-area-inset-left));
  /* Gradiente reativo (Design System, Movimento): o brilho sai de 82% 12% e acompanha o
     ponteiro; o reflexo amarelo vai ao ponto oposto, como no "Campo que acompanha o ponteiro". */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at var(--ca-px) var(--ca-py), var(--t-painel-brilho), transparent var(--t-painel-brilho-raio)),
    radial-gradient(circle at calc(100% - var(--ca-px)) calc(100% - var(--ca-py)), rgba(235, 205, 80, .12), transparent 38%),
    linear-gradient(145deg, var(--t-painel-a), var(--t-painel-b));
  color: var(--fg-on-dark-1);
  transition:
    --ca-px var(--motion-response) var(--ease-fluid),
    --ca-py var(--motion-response) var(--ease-fluid);
}

/* Órbita automática (Design System, Movimento): anel, anel tracejado no sentido contrário,
   núcleo amarelo e um ponto que gira com o anel. Decorativa, atrás do texto, no canto
   de baixo do painel; ciclos de 72 s e 56 s, como no Design System. */
.ca-orbita {
  --orbita: clamp(320px, 44vw, 560px);

  position: absolute;
  z-index: -1;
  right: calc(var(--orbita) * -.36);
  bottom: calc(var(--orbita) * -.3);
  display: grid;
  place-items: center;
  width: var(--orbita);
  aspect-ratio: 1;
  border: 1px solid rgba(240, 240, 240, .16);
  border-radius: 50%;
  pointer-events: none;
  animation: ca-orbita 72s linear infinite;
}

.ca-orbita::before,
.ca-orbita::after {
  content: '';
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
}

.ca-orbita::before {
  width: 61%;
  border: 1px dashed rgba(240, 240, 240, .18);
  animation: ca-orbita-volta 56s linear infinite;
}

.ca-orbita::after {
  width: 26%;
  border: 1px solid rgba(235, 205, 80, .32);
  box-shadow: 0 0 28px rgba(235, 205, 80, .08);
}

.ca-orbita i {
  position: absolute;
  top: 9.5%;
  left: 50%;
  width: 10px;
  aspect-ratio: 1;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--golden-yellow);
  box-shadow: 0 0 18px rgba(235, 205, 80, .32);
}

/* Celular e tablet: o painel é curto e o texto ocupa a largura; a órbita vai para o canto
   de cima, à direita dos botões, menor, para não passar atrás do texto. */
@media (max-width: 899px) {
  .ca-orbita {
    --orbita: 240px;

    top: calc(var(--orbita) * -.32);
    right: calc(var(--orbita) * -.3);
    bottom: auto;
  }
}

@keyframes ca-orbita {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ca-busca-sobe {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes ca-orbita-volta {
  to {
    transform: rotate(-360deg);
  }
}

.ca-auth__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-start;
  gap: var(--sp-2);
}

.ca-voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  margin: 0;
  padding: 0 var(--sp-4) 0 var(--sp-3);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--fg-on-dark-1);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out);
}

.ca-voltar .ph {
  font-size: 18px;
  transition: transform var(--motion-fast) var(--ease-out);
}

/* Botão de tema das telas de visitante: pill só com o ícone (44×44). */
.ca-voltar--icone {
  justify-content: center;
  width: 44px;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

@media (hover: hover) and (pointer: fine) {
  .ca-voltar:hover {
    background-color: rgba(240, 240, 240, .06);
  }
}

.ca-auth__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ca-auth__logo {
  width: auto;
  height: 38px;
  margin-bottom: var(--sp-6);
}

.ca-auth__eyebrow {
  margin: 0 0 var(--sp-4);
  color: var(--t-painel-eyebrow);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ca-auth__titulo {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.ca-auth__apoio {
  max-width: 40ch;
  margin: var(--sp-4) 0 0;
  color: var(--t-painel-apoio);
  font-size: 18px;
  line-height: 1.5;
}

.ca-auth__main {
  display: grid;
  place-items: start center;
  padding:
    var(--sp-6)
    max(var(--sp-4), env(safe-area-inset-right))
    max(var(--sp-7), env(safe-area-inset-bottom))
    max(var(--sp-4), env(safe-area-inset-left));
}

.ca-auth__main:focus {
  outline: none;
}

/* Card do formulário: branco no claro; vidro escuro com desfoque no escuro. */
.ca-auth__cartao {
  position: relative;
  isolation: isolate;
  width: min(100%, 420px);
  padding: clamp(var(--sp-5), 4vw, var(--sp-6));
  border: 1px solid var(--t-card-borda);
  border-radius: var(--r-card);
  background-color: var(--t-card-cor);
  background-image: var(--t-superficie);
  -webkit-backdrop-filter: var(--t-superficie-desfoque);
  backdrop-filter: var(--t-superficie-desfoque);
}

/* Spotlight interno (Design System, Movimento): luz que segue o ponteiro no card e
   fica no último ponto enquanto um campo tem o foco. */
.ca-auth__cartao::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle 360px at var(--spotlight-x, 50%) var(--spotlight-y, 0%), var(--t-spot), transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-response) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .ca-auth__cartao:hover::before {
    opacity: 1;
  }
}

.ca-auth__cartao:focus-within::before {
  opacity: 1;
}

.ca-auth__links {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  color: var(--t-tx2);
  font-size: 14px;
  line-height: 1.5;
}

.ca-auth__links p {
  margin: 0;
}

.ca-auth__cartao .ca-acoes .ca-botao--primario {
  flex: 1 1 100%;
}

@media (min-width: 900px) {
  .ca-auth__grade {
    grid-template-columns: 44% minmax(0, 1fr);
  }

  .ca-auth__painel {
    min-height: 100vh;
    min-height: 100dvh;
    padding:
      max(var(--sp-6), env(safe-area-inset-top))
      clamp(var(--sp-6), 5vw, var(--sp-8))
      var(--sp-8)
      max(clamp(var(--sp-6), 5vw, var(--sp-8)), env(safe-area-inset-left));
  }

  .ca-auth__marca {
    margin-block: auto;
  }

  .ca-auth__main {
    place-items: center;
    padding: var(--sp-7) clamp(var(--sp-6), 5vw, var(--sp-8));
  }
}

/* ---------- 9. Entrada dos blocos (MAPA §9.7) ---------- */
/* Só com .ca-js e .ca-entrada no <html>, que area-head.js põe em toda página (fora o
   movimento reduzido); se o area.js não chegar em 2 s, as classes saem e nada fica escondido.
   Sobe 26px e entra em foco; sem máscara/clip-path.
   area.js põe .is-visivel com --ca-atraso (passo de 80 ms, no máximo 10 passos). */
.ca-surgir {
  transition:
    opacity var(--motion-reveal) var(--ease-fluid) var(--ca-atraso, 0ms),
    transform var(--motion-reveal) var(--ease-fluid) var(--ca-atraso, 0ms),
    filter var(--motion-reveal) var(--ease-fluid) var(--ca-atraso, 0ms);
}

.ca-card.ca-surgir {
  transition:
    opacity var(--motion-reveal) var(--ease-fluid) var(--ca-atraso, 0ms),
    transform var(--motion-reveal) var(--ease-fluid) var(--ca-atraso, 0ms),
    filter var(--motion-reveal) var(--ease-fluid) var(--ca-atraso, 0ms),
    translate var(--motion-response) var(--ease-fluid),
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-response) var(--ease-fluid);
}

.ca-js.ca-entrada .ca-surgir:not(.is-visivel) {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(8px);
}

/* Saída ao trocar de tela (pedido de Daniel em 21/10/2026; o Design System só tem a entrada):
   a entrada ao contrário e mais curta. area.js põe .ca-saindo no <html> ao clicar num link
   da área ou enviar um formulário, e navega depois de --motion-medium. A barra fica. */
.ca-js.ca-saindo .ca-surgir,
.ca-js.ca-entrada.ca-saindo .ca-surgir.is-visivel {
  opacity: 0;
  transform: translateY(-12px);
  filter: blur(6px);
  transition-duration: var(--motion-medium);
  transition-timing-function: var(--ease-out);
  transition-delay: 0ms;
}

.ca-saindo .ca-orbita {
  opacity: 0;
  transition: opacity var(--motion-medium) var(--ease-out);
}

/* Clique na barra aberta: area.js põe .is-recolhida e ela fecha com a mesma transição da
   abertura (--motion-response, --ease-fluid) enquanto a pílula desliza; a tela troca em 420 ms. */

/* ---------- 10. Barra inferior: celular e telas de toque (MAPA §9.2) ---------- */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  /* Pesquisar é aba fixa da barra também aqui (pedido de Daniel, 1.0.8). Para caber a 360 px,
     o botão Tema vai para o topo, ao lado do avatar, e as abas dividem a largura por igual. */
  .ca-barra .ca-barra__pe .ca-tema,
  .ca-barra .ca-busca {
    display: none;
  }

  .ca-nav li:has(> .ca-item[data-chave="pesquisar"]) {
    display: flex;
  }

  .ca-busca-rapida:not([hidden]) {
    position: fixed;
    right: max(var(--sp-3), env(safe-area-inset-right));
    bottom: calc(72px + env(safe-area-inset-bottom) + var(--sp-2));
    left: max(var(--sp-3), env(safe-area-inset-left));
    z-index: 32;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--t-card-borda);
    border-radius: var(--r-card);
    background-color: var(--t-card-cor);
    background-image: var(--t-superficie);
    box-shadow: var(--t-barra-sombra);
    -webkit-backdrop-filter: var(--t-superficie-desfoque);
    backdrop-filter: var(--t-superficie-desfoque);
    animation: ca-busca-sobe var(--motion-medium) var(--ease-fluid);
  }

  .ca-busca-rapida .ca-pesquisa__campo {
    flex: 1 1 auto;
  }

  .ca-busca-rapida__fechar {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--t-tx1);
    font-size: 20px;
    cursor: pointer;
  }

  .ca-topo__tema:not([hidden]) {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 1px solid var(--t-linha);
    border-radius: 50%;
    background-color: transparent;
    color: var(--t-tx1);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .ca-topo__tema .ph {
    font-size: 20px;
  }

  .ca-topo__tema + .ca-usuario {
    margin-left: calc(-1 * var(--sp-3));
  }

  /* :is() tem lista tolerante: sem suporte a :has(), só esse item cai. */
  .ca-barra,
  .ca-barra:is(:hover, :has(:focus-visible), .is-recolhida, .ca-barra--rotulos) {
    inset: auto 0 0 0;
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: auto;
    height: calc(72px + env(safe-area-inset-bottom));
    padding:
      0
      max(var(--sp-2), env(safe-area-inset-right))
      env(safe-area-inset-bottom)
      max(var(--sp-2), env(safe-area-inset-left));
    border-top: 1px solid var(--t-barra-borda);
    border-right: 0;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    transition: none;
  }

  .ca-marca,
  .ca-item--site {
    display: none;
  }

  /* Abas encostadas, dividindo a largura (48px no mínimo; rótulo curto de 11px) e Sair só com
     o ícone, 44px: Início, Pesquisar, as seções e Conta cabem em 360px. Com mais seções, a
     barra rola de lado. O Tema fica no topo (ver acima). */
  .ca-nav {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
  }

  .ca-nav li {
    display: flex;
    flex: 1 1 0;
    min-width: 48px;
  }

  .ca-nav .ca-item {
    width: 100%;
    min-width: 0;
    padding-inline: 2px;
  }

  .ca-barra__pe {
    display: flex;
    flex: 0 0 auto;
    gap: 0;
    margin: 0 0 0 auto;
  }

  .ca-item {
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-1);
    min-width: 56px;
    min-height: 56px;
    padding: 6px var(--sp-2);
    border-radius: var(--r-md);
  }

  .ca-barra__pe .ca-item,
  .ca-item.ca-tema {
    width: auto;
    min-width: 44px;
    padding-inline: 0;
  }

  .ca-item .ph {
    font-size: 22px;
  }

  /* Rótulo longo só para leitor de tela; o curto aparece. */
  .ca-item__rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 1;
  }

  .ca-item__curto {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (hover: hover) and (pointer: fine) {
    .ca-item:hover .ph {
      transform: none;
    }
  }

  /* Sem pílula: ativo com tinta própria do tema e fio 24×3 na base. */
  .ca-item[aria-current],
  .ca-barra.is-pronta .ca-item[aria-current] {
    background-color: transparent;
    color: var(--t-inferior-ativo);
  }

  .ca-item[aria-current]::after,
  .ca-indicador::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 24px;
    height: 3px;
    margin-left: -12px;
    border-radius: var(--r-pill);
    background-color: var(--t-fio);
  }

  .ca-barra.is-pronta .ca-item[aria-current]::after {
    content: none;
  }

  .ca-indicador {
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .ca-main,
  .ca-barra--rotulos ~ .ca-main {
    margin-left: 0;
    padding-top: max(var(--sp-2), env(safe-area-inset-top));
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
    padding-inline: max(clamp(var(--sp-4), 4vw, var(--sp-8)), env(safe-area-inset-left), env(safe-area-inset-right));
  }
}

@media (max-width: 760px) {
  .ca-topo {
    min-height: 0;
    padding-top: var(--sp-5);
  }

  .ca-usuario {
    padding: 4px;
    border-color: transparent;
  }

  .ca-usuario__nome {
    display: none;
  }

  .ca-material {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ca-material__acao {
    grid-column: 1 / -1;
    width: 100%;
  }

  .ca-card {
    padding: var(--sp-5);
  }

  .ca-vazio {
    padding: var(--sp-5);
  }
}

/* ---------- 11. Troca de tema ---------- */
/* area.js põe .ca-trocando-tema no <html> só durante a troca (--motion-medium) e nunca
   com movimento reduzido: as cores passam de um tema ao outro, sem máscara nem recorte.
   O fundo de página cruza as duas camadas pela opacidade; os degradês da barra e do
   painel animam pelas cores registradas em @property. */
@media (prefers-reduced-motion: no-preference) {
  .ca-trocando-tema {
    transition:
      background-color var(--motion-medium) var(--ease-out),
      --t-barra-topo var(--motion-medium) var(--ease-out),
      --t-barra-base var(--motion-medium) var(--ease-out),
      --t-painel-a var(--motion-medium) var(--ease-out),
      --t-painel-b var(--motion-medium) var(--ease-out),
      --t-painel-brilho var(--motion-medium) var(--ease-out);
  }

  .ca-trocando-tema *,
  .ca-trocando-tema *::before,
  .ca-trocando-tema *::after {
    transition-property: background-color, color, border-color, box-shadow, opacity !important;
    transition-duration: var(--motion-medium) !important;
    transition-timing-function: var(--ease-out) !important;
    transition-delay: 0s !important;
  }
}

/* ---------- 12. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .ca-barra,
  .ca-indicador,
  .ca-item,
  .ca-item .ph,
  .ca-item__rotulo,
  .ca-marca__nome,
  .ca-marca__logo,
  .ca-marca__simbolo,
  .ca-card,
  .ca-card.ca-surgir,
  .ca-fav,
  .ca-fav.ca-surgir,
  .ca-fav.is-saindo,
  .ca-favoritos__vazio.is-saindo,
  .ca-card__icone,
  .ca-card__marca.ph,
  .ca-card__acao,
  .ca-card__acao .ph,
  .ca-material,
  .ca-material__icone,
  .ca-botao,
  .ca-olho,
  .ca-voltar,
  .ca-campo__entrada,
  .ca-surgir {
    transition: none;
  }

  .ca-surgir,
  .ca-js.ca-entrada .ca-surgir:not(.is-visivel),
  .ca-js.ca-saindo .ca-surgir {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .ca-card::before,
  .ca-auth__cartao::before {
    display: none;
  }

  /* Loops e respostas espaciais neutralizados (Design System, Movimento). */
  .ca-orbita,
  .ca-orbita::before,
  .ca-nucleo::before,
  .ca-nucleo::after,
  .ca-nucleo b,
  .ca-regra.is-ok .ph {
    animation: none;
  }

  .ca-nucleo::before,
  .ca-nucleo::after,
  .ca-nucleo b {
    display: none;
  }

  .ca-auth__painel,
  .ca-avatar-opcao__ficha,
  .ca-favorito__botao,
  .ca-regra,
  .ca-botao .ph,
  .ca-voltar .ph,
  .ca-card__pe .ph {
    transition: none;
  }

  .ca-card:hover .ca-card__pe .ph,
  .ca-botao:hover .ph,
  .ca-voltar:hover .ph,
  .ca-avatar-opcao:hover .ca-avatar-opcao__ficha,
  .ca-avatar-opcao input:active + .ca-avatar-opcao__ficha {
    transform: none;
  }

  .ca-avatar.is-trocou,
  .ca-favorito__botao.is-trocou .ph,
  .ca-busca-rapida:not([hidden]),
  .ca-etiquetas,
  .ca-dialogo[open] {
    animation: none;
  }

  .ca-prompt__imagem img,
  .ca-aviso-rapido {
    transition: none;
  }

  .ca-prompt__imagem:hover img {
    transform: none;
  }

  .ca-card:hover,
  .ca-fav:hover {
    translate: none;
  }

  .ca-card:hover .ca-card__icone,
  .ca-fav:hover .ca-card__icone,
  .ca-card:hover .ca-card__marca,
  .ca-card:hover .ca-card__acao .ph,
  .ca-fav:hover .ca-fav__acao .ph,
  .ca-material:hover .ca-material__icone {
    transform: none;
  }

  .ca-item:hover .ph,
  .ca-botao:active {
    transform: none;
  }
}

/* ---------- 13. Cores forçadas ---------- */
@media (forced-colors: active) {
  .ca-item[aria-current] {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }

  .ca-indicador {
    display: none !important;
  }

  .ca-item[aria-current]::after,
  .ca-card::before,
  .ca-card__marca,
  .ca-sinal,
  .ca-auth__cartao::before,
  .ca-orbita,
  .ca-nucleo::before,
  .ca-nucleo::after,
  .ca-nucleo b {
    display: none;
  }

  .ca-card,
  .ca-fav,
  .ca-novas,
  .ca-favoritos__vazio,
  .ca-bloco,
  .ca-material,
  .ca-auth__cartao {
    border-color: CanvasText;
  }

  .ca-card__acao,
  .ca-fav__acao {
    border: 1px solid CanvasText;
  }

  .ca-avatar-opcao input:checked + .ca-avatar-opcao__ficha {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  .ca-favorito__botao[aria-pressed="true"] {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  .ca-etiqueta[aria-pressed="true"] {
    outline: 2px solid Highlight;
  }

  .ca-formula,
  .ca-prompt,
  .ca-dialogo {
    border-color: CanvasText;
  }
}

/* ---------- 14. Impressão ---------- */
@media print {
  .ca-barra,
  .ca-pular,
  .ca-voltar,
  .ca-orbita {
    display: none;
  }

  .ca-app::before,
  .ca-auth::before,
  .ca-app::after,
  .ca-auth::after {
    animation: none;
    transform: none;
  }

  .ca-main {
    margin: 0;
    padding: 0;
  }

  .ca-surgir,
  .ca-js.ca-entrada .ca-surgir:not(.is-visivel),
  .ca-js.ca-saindo .ca-surgir {
    opacity: 1;
    transform: none;
    filter: none;
  }
}