/* ===========================================================================
   Central de Estudos — folha de estilos

   Identidade própria, não herdada do app de Chamada. A Chamada é um app de
   transação (2 min, no pátio, sob sol); este é um app de leitura (40 min, em
   casa, à noite, com a luz acesa). As decisões abaixo seguem o segundo caso.

   Direção: quadro-verde de sala de aula sob luz da manhã. Verde profundo do
   quadro escolar como marca, papel branco de verdade como superfície, âmbar de
   marca-texto como acento. A cor da marca é a cor de acertar — no app, acertar
   é o progresso.

   Tema claro é o padrão; o escuro é uma escolha explícita do leitor.
   =========================================================================== */

:root{
  /* ---- superfícies ----
     Branco puro de verdade. O calor da marca vive no verde e no âmbar, não no
     fundo — fundo creme "aconchegante" é o clichê que este app evita. */
  --bg: oklch(1 0 0);
  --superficie: oklch(0.985 0.004 138);
  --superficie-2: oklch(0.962 0.006 138);
  --linha: oklch(0.906 0.008 138);
  --linha-forte: oklch(0.836 0.012 138);

  /* ---- tinta ---- */
  --tinta: oklch(0.243 0.016 138);      /* corpo de texto */
  --tinta-2: oklch(0.438 0.013 138);    /* secundário */
  --tinta-3: oklch(0.548 0.011 138);    /* terciário, hints */

  /* ---- marca ---- */
  --marca: oklch(0.424 0.105 138);
  --marca-forte: oklch(0.336 0.098 138);
  --marca-clara: oklch(0.952 0.024 138);
  --marca-borda: oklch(0.878 0.045 138);
  --sobre-marca: oklch(1 0 0);

  /* ---- acento: marca-texto ---- */
  --acento: oklch(0.792 0.148 78);
  --acento-clara: oklch(0.964 0.048 85);
  --acento-borda: oklch(0.884 0.098 82);
  /* Âmbar escurecido: o acento puro não tem contraste suficiente como texto. */
  --acento-texto: oklch(0.472 0.118 62);

  /* ---- semântica ----
     Acerto usa o próprio verde da marca: é a mesma ideia. */
  --erro: oklch(0.512 0.176 27);
  --erro-clara: oklch(0.958 0.028 27);
  --erro-borda: oklch(0.878 0.072 27);
  --info: oklch(0.492 0.118 248);
  --info-clara: oklch(0.962 0.024 248);
  --info-borda: oklch(0.878 0.052 248);

  /* ---- tipografia ----
     Roboto (variável 400–700) na interface e Roboto Slab na prosa: mesma
     família tipográfica, com a serifa sustentando a leitura longa. Vêm do
     Google Fonts; se a rede falhar, o fallback do sistema assume sem quebrar
     o layout, porque as métricas são próximas.

     A Roboto itálica não é carregada de propósito: pesa 40 KB e não é usada —
     o <em> vive dentro da prosa, que é Roboto Slab. */
  --leitura: 'Roboto Slab', ui-serif, Georgia, serif;
  --ui: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Pesos nomeados da Roboto, para o CSS dizer o que quer em vez de números
     soltos: Regular / Medium / SemiBold / Bold. */
  --p-normal: 400;
  --p-medio: 500;
  --p-semi: 600;
  --p-bold: 700;

  /* Escala 1.125. Piso de 0.8125rem (13px): o app anterior usava 11px como
     tamanho dominante, o que é tipografia de painel de dados, não de leitura. */
  --t-micro: 0.8125rem;   /* 13px — só metadado */
  --t-menor: 0.875rem;    /* 14px */
  --t-base: 0.9375rem;    /* 15px — UI */
  --t-leitura: 1.0625rem; /* 17px — prosa */
  --t-md: 1.125rem;       /* 18px */
  --t-lg: 1.375rem;       /* 22px */
  --t-xl: 1.75rem;        /* 28px */
  --t-2xl: 2.25rem;       /* 36px */

  /* ---- forma e profundidade ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --sombra-1: 0 1px 2px oklch(0.243 0.016 138 / 0.06);
  --sombra-2: 0 2px 8px oklch(0.243 0.016 138 / 0.08);
  --sombra-3: 0 12px 32px oklch(0.243 0.016 138 / 0.16);

  /* ---- movimento ----
     150-250ms: o leitor está em fluxo, não esperando coreografia. */
  --rapido: 140ms cubic-bezier(0.22, 1, 0.36, 1);
  --normal: 220ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- camadas ---- */
  --z-cabecalho: 10;
  --z-fundo-modal: 40;
  --z-modal: 50;

  color-scheme: light;
}

/* Tema escuro: escolha explícita do leitor, nunca automática.
   Não é o claro invertido — o verde ganha luminosidade para continuar legível,
   e a superfície é neutra pura, sem tingir de verde. */
:root[data-tema="escuro"]{
  --bg: oklch(0.168 0 0);
  --superficie: oklch(0.208 0.004 138);
  --superficie-2: oklch(0.252 0.006 138);
  --linha: oklch(0.312 0.008 138);
  --linha-forte: oklch(0.392 0.012 138);

  --tinta: oklch(0.938 0.006 138);
  --tinta-2: oklch(0.782 0.010 138);
  --tinta-3: oklch(0.668 0.012 138);

  --marca: oklch(0.762 0.128 138);
  --marca-forte: oklch(0.838 0.132 138);
  --marca-clara: oklch(0.288 0.042 138);
  --marca-borda: oklch(0.372 0.058 138);
  --sobre-marca: oklch(0.168 0 0);

  --acento: oklch(0.838 0.142 82);
  /* Mais saturado que o equivalente claro: no escuro, um âmbar lavado vira
     mancha marrom e o marca-texto deixa de parecer intencional. */
  --acento-clara: oklch(0.352 0.082 78);
  --acento-borda: oklch(0.448 0.098 80);
  --acento-texto: oklch(0.838 0.142 82);

  --erro: oklch(0.732 0.148 27);
  --erro-clara: oklch(0.292 0.056 27);
  --erro-borda: oklch(0.392 0.082 27);
  --info: oklch(0.752 0.104 248);
  --info-clara: oklch(0.282 0.048 248);
  --info-borda: oklch(0.382 0.062 248);

  --sombra-1: 0 1px 2px oklch(0 0 0 / 0.4);
  --sombra-2: 0 2px 8px oklch(0 0 0 / 0.5);
  --sombra-3: 0 12px 32px oklch(0 0 0 / 0.6);

  color-scheme: dark;
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--tinta);
  font-family:var(--ui); font-size:var(--t-base); line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:2rem;
}

/* Foco visível e consistente em tudo que recebe teclado. */
:focus-visible{
  outline:2px solid var(--marca);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

a{color:var(--marca); text-underline-offset:2px;}

/* ---------- cabeçalho ---------- */
header{
  background:var(--bg);
  border-bottom:1px solid var(--linha);
  position:sticky; top:0; z-index:var(--z-cabecalho);
  padding:calc(0.75rem + env(safe-area-inset-top)) 1rem 0;
}
.titlebar{display:flex; align-items:baseline; gap:0.625rem; margin-bottom:0.125rem;}
h1{
  font-size:var(--t-md); margin:0; font-weight:var(--p-semi);
  letter-spacing:-0.011em; color:var(--tinta);
}
.subtitulo{font-size:var(--t-micro); color:var(--tinta-3); margin-bottom:0.5rem;}

.btn-tema{
  margin-left:auto; flex-shrink:0;
  /* 44px: mínimo de alvo de toque confortável no celular. */
  width:2.75rem; height:2.75rem; border-radius:var(--r-sm);
  border:1px solid var(--linha); background:var(--bg); color:var(--tinta-2);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background var(--rapido), color var(--rapido);
  align-self:center;
}
.btn-tema:hover{background:var(--superficie-2); color:var(--tinta);}
.btn-tema svg{width:1.125rem; height:1.125rem;}

/* Navegação: rola na horizontal no celular em vez de espremer os itens. */
nav{display:flex; gap:0.25rem; overflow-x:auto; scrollbar-width:none;}
nav::-webkit-scrollbar{display:none;}
nav a{
  flex-shrink:0; padding:0.625rem 0.75rem;
  font-size:var(--t-menor); font-weight:var(--p-medio);
  color:var(--tinta-3); text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color var(--rapido), border-color var(--rapido);
}
nav a:hover{color:var(--tinta);}
nav a.ativo{color:var(--marca); border-bottom-color:var(--marca); font-weight:var(--p-semi);}

/* ---------- estrutura ---------- */
main{padding:1.25rem 1rem; max-width:52rem; margin:0 auto;}

h2.secao{
  font-size:var(--t-menor); font-weight:var(--p-semi); color:var(--tinta-2);
  margin:1.75rem 0 0.625rem; letter-spacing:-0.005em;
}
h2.secao:first-child{margin-top:0;}

.card{
  background:var(--bg); border:1px solid var(--linha); border-radius:var(--r-md);
  padding:1rem; margin-bottom:0.625rem;
}
.card-link{
  display:block; text-decoration:none; color:inherit;
  transition:border-color var(--rapido), box-shadow var(--rapido), transform var(--rapido);
}
.card-link:hover{border-color:var(--linha-forte); box-shadow:var(--sombra-2);}
.card-link:active{transform:translateY(1px);}

/* ---------- contagem regressiva ----------
   Sem segundos: contar segundos até uma prova daqui a semanas gera pressão sem
   informar nada, e obrigava a reescrever o bloco inteiro uma vez por segundo. */
.countdown{
  background:var(--marca); color:var(--sobre-marca);
  border-radius:var(--r-lg); padding:1.25rem 1.125rem;
  margin-bottom:1.25rem;
  display:flex; align-items:baseline; gap:0.875rem; flex-wrap:wrap;
}
.countdown-dias{
  font-family:var(--leitura); font-size:var(--t-2xl); font-weight:var(--p-bold);
  line-height:1; letter-spacing:-0.02em;
}
.countdown-texto{flex:1; min-width:9rem;}
.countdown-titulo{font-size:var(--t-base); font-weight:var(--p-semi);}
.countdown-data{font-size:var(--t-micro); opacity:0.82; margin-top:0.125rem;}

/* ---------- números ---------- */
.stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:0.5rem; margin-bottom:1.25rem;}
.stat{
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-md); padding:0.875rem 0.625rem;
}
.stat-num{
  font-size:var(--t-lg); font-weight:var(--p-semi); line-height:1.15;
  letter-spacing:-0.015em; color:var(--tinta);
}
.stat-lbl{font-size:var(--t-micro); color:var(--tinta-3); margin-top:0.125rem;}

/* ---------- progresso ---------- */
.barra{
  height:0.5rem; background:var(--superficie-2); border-radius:999px;
  overflow:hidden; margin-top:0.5rem;
}
/* Anima por transform: não recalcula layout a cada quadro. */
.barra-fill{
  height:100%; background:var(--marca); border-radius:999px;
  transform-origin:left center; transform:scaleX(var(--preenchido, 0));
  transition:transform var(--normal);
}
.barra-topo{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:var(--t-menor); color:var(--tinta-2);
}
.barra-topo b{color:var(--tinta); font-weight:var(--p-semi); font-variant-numeric:tabular-nums;}

/* ---------- material ---------- */
.mat-topo{display:flex; align-items:flex-start; gap:0.625rem;}
.mat-titulo{
  font-weight:var(--p-semi); font-size:var(--t-base); flex:1;
  line-height:1.35; letter-spacing:-0.006em; color:var(--tinta);
}
/* Metadado como texto corrido, não como fileira de etiquetas. Os chips do app
   de Chamada existiam para varrer 40 linhas com o olho; aqui só faziam ruído. */
.mat-meta{
  font-size:var(--t-micro); color:var(--tinta-3); margin-top:0.375rem;
  display:flex; align-items:center; gap:0.375rem; flex-wrap:wrap;
}
.mat-meta .sep{opacity:0.45;}

.status{
  font-size:var(--t-micro); font-weight:var(--p-semi); padding:0.1875rem 0.5rem;
  border-radius:999px; white-space:nowrap; border:1px solid transparent;
}
.status-pronto{background:var(--marca-clara); color:var(--marca-forte); border-color:var(--marca-borda);}
.status-processando{background:var(--acento-clara); color:var(--acento-texto); border-color:var(--acento-borda);}
.status-erro{background:var(--erro-clara); color:var(--erro); border-color:var(--erro-borda);}
:root[data-tema="escuro"] .status-processando{color:var(--acento);}

/* ---------- abas ---------- */
.abas{
  display:flex; gap:0.25rem; border-bottom:1px solid var(--linha);
  margin-bottom:1.25rem;
}
.aba{
  flex:1; padding:0.8125rem 0.5rem; min-height:2.75rem; background:none; border:none;
  border-bottom:2px solid transparent; color:var(--tinta-3);
  font-size:var(--t-menor); font-weight:var(--p-medio); font-family:inherit; cursor:pointer;
  transition:color var(--rapido), border-color var(--rapido);
}
.aba:hover{color:var(--tinta);}
.aba[aria-selected="true"]{color:var(--marca); border-bottom-color:var(--marca); font-weight:var(--p-semi);}
.painel[hidden]{display:none;}

/* ---------- prosa ----------
   O ponto do app. Serifada, 17px, medida travada em 68ch. */
.resumo{
  font-family:var(--leitura);
  font-size:var(--t-leitura);
  line-height:1.7;
  color:var(--tinta);
  max-width:68ch;
  text-wrap:pretty;
}
.resumo h2{
  font-family:var(--ui);
  font-size:var(--t-md); font-weight:var(--p-semi); line-height:1.3;
  margin:2rem 0 0.625rem; color:var(--tinta);
  letter-spacing:-0.011em; text-wrap:balance;
}
.resumo h2:first-child{margin-top:0;}
.resumo h3{
  font-family:var(--ui);
  font-size:var(--t-base); font-weight:var(--p-semi); line-height:1.35;
  margin:1.5rem 0 0.375rem; color:var(--tinta-2);
  text-wrap:balance;
}
.resumo p{margin:0 0 1rem;}
.resumo ul, .resumo ol{margin:0 0 1rem; padding-left:1.375rem;}
.resumo li{margin-bottom:0.375rem;}
.resumo li::marker{color:var(--tinta-3);}
/* Conceito-chave marcado como marca-texto, não como cor de fonte. */
.resumo strong{
  font-weight:var(--p-bold); color:var(--tinta);
  background:linear-gradient(to top, var(--acento-clara) 0.55em, transparent 0.55em);
  padding:0 0.0625rem;
}
.resumo em{font-style:italic;}
.resumo code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:0.9em; background:var(--superficie-2);
  padding:0.0625rem 0.25rem; border-radius:var(--r-sm);
}

/* ---------- mapa mental ---------- */
.mapa-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:0.5rem;}
.mapa-scroll svg{display:block;}
.mapa-raiz{fill:var(--marca);}
.mapa-no{fill:var(--marca-clara); stroke:var(--marca-borda); stroke-width:1;}
.mapa-filho{fill:var(--superficie); stroke:var(--linha); stroke-width:1;}
.mapa-txt{fill:var(--tinta); font-size:11.5px; font-family:var(--ui);}
.mapa-txt-raiz{fill:var(--sobre-marca); font-size:12.5px; font-weight:var(--p-semi); font-family:var(--ui);}
.mapa-linha{stroke:var(--linha-forte); stroke-width:1.5; fill:none;}

/* ---------- questões ---------- */
.questao{
  background:var(--bg); border:1px solid var(--linha);
  border-radius:var(--r-md); padding:1rem; margin-bottom:0.625rem;
}
.questao-num{
  font-size:var(--t-micro); color:var(--tinta-3); margin-bottom:0.5rem;
  font-variant-numeric:tabular-nums;
}
.questao-enunciado{
  font-family:var(--leitura); font-size:var(--t-leitura);
  line-height:1.6; max-width:68ch; color:var(--tinta);
}
.questao-comentario{
  margin-top:0.875rem; padding-top:0.875rem; border-top:1px solid var(--linha);
  font-size:var(--t-menor); color:var(--tinta-2); line-height:1.55; max-width:68ch;
}
.gabarito{font-weight:var(--p-bold); font-size:var(--t-micro);}
.gabarito-c{color:var(--marca-forte);}
.gabarito-e{color:var(--erro);}
:root[data-tema="escuro"] .gabarito-c{color:var(--marca);}

.vf{display:flex; gap:0.625rem; margin-top:1rem;}
.vf button{
  flex:1; padding:0.9375rem; border-radius:var(--r-md);
  border:1px solid var(--linha-forte); background:var(--bg); color:var(--tinta);
  font-size:var(--t-base); font-weight:var(--p-semi); font-family:inherit; cursor:pointer;
  min-height:3.25rem;
  transition:background var(--rapido), border-color var(--rapido);
}
.vf button:hover:not(:disabled){background:var(--superficie-2);}
.vf button:disabled{opacity:0.55; cursor:default;}
.vf button.escolhida-ok{
  background:var(--marca); border-color:var(--marca); color:var(--sobre-marca); opacity:1;
}
.vf button.escolhida-erro{
  background:var(--erro); border-color:var(--erro); color:oklch(1 0 0); opacity:1;
}
.vf kbd{
  font-family:inherit; font-size:var(--t-micro); opacity:0.6;
  margin-left:0.375rem; font-weight:var(--p-medio);
}

.feedback{
  margin-top:1rem; padding:0.875rem; border-radius:var(--r-md);
  font-size:var(--t-menor); line-height:1.55; border:1px solid;
}
.feedback-ok{background:var(--marca-clara); border-color:var(--marca-borda);}
.feedback-erro{background:var(--erro-clara); border-color:var(--erro-borda);}
.feedback b{display:block; margin-bottom:0.25rem; font-size:var(--t-micro);}

.placar{text-align:center; padding:2rem 1rem;}
.placar-num{
  font-family:var(--leitura); font-size:3rem; font-weight:var(--p-bold);
  line-height:1; letter-spacing:-0.02em; color:var(--marca);
}
.placar-txt{color:var(--tinta-2); margin-top:0.5rem; font-size:var(--t-menor);}

/* ---------- formulários ---------- */
label{
  display:block; font-size:var(--t-menor); color:var(--tinta-2);
  margin-bottom:0.3125rem; font-weight:var(--p-medio);
}
.campo{margin-bottom:1rem;}
input[type=text], input[type=file], select{
  width:100%; padding:0.6875rem 0.75rem; border-radius:var(--r-sm);
  border:1px solid var(--linha-forte); background:var(--bg); color:var(--tinta);
  font-family:inherit;
  /* 16px é obrigatório: abaixo disso o Safari do iPhone dá zoom no foco. */
  font-size:16px;
  transition:border-color var(--rapido), box-shadow var(--rapido);
}
input[type=text]:focus, select:focus{
  border-color:var(--marca);
  box-shadow:0 0 0 3px var(--marca-clara);
  outline:none;
}
input::placeholder{color:var(--tinta-3);}
input[type=file]{padding:0.5625rem;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.4375rem;
  padding:0.8125rem 1.125rem; border-radius:var(--r-sm);
  border:1px solid var(--marca); background:var(--marca); color:var(--sobre-marca);
  font-size:var(--t-base); font-weight:var(--p-semi); font-family:inherit;
  cursor:pointer; text-decoration:none; min-height:2.875rem;
  transition:background var(--rapido), border-color var(--rapido), transform var(--rapido);
}
.btn:hover:not(:disabled){background:var(--marca-forte); border-color:var(--marca-forte);}
.btn:active:not(:disabled){transform:translateY(1px);}
.btn:disabled{opacity:0.5; cursor:default;}
.btn-bloco{width:100%;}
.btn-fantasma{
  background:var(--bg); border-color:var(--linha-forte); color:var(--tinta);
}
.btn-fantasma:hover:not(:disabled){background:var(--superficie-2); border-color:var(--linha-forte);}
.btn-perigo{background:var(--bg); border-color:var(--erro-borda); color:var(--erro);}
.btn-perigo:hover:not(:disabled){background:var(--erro-clara); border-color:var(--erro);}
.btn-mini{padding:0.4375rem 0.75rem; font-size:var(--t-menor); min-height:0;}
.btn-linha{display:flex; gap:0.5rem; flex-wrap:wrap;}

/* ---------- diversos ---------- */
.vazio{
  text-align:center; padding:2.5rem 1.25rem; color:var(--tinta-2);
  font-size:var(--t-menor); line-height:1.6; max-width:34rem; margin:0 auto;
}
.vazio strong{display:block; color:var(--tinta); font-size:var(--t-base); margin-bottom:0.375rem;}

.aviso{
  padding:0.75rem 0.875rem; border-radius:var(--r-sm); border:1px solid;
  font-size:var(--t-menor); line-height:1.55; margin-bottom:0.875rem;
}
.aviso-erro{background:var(--erro-clara); border-color:var(--erro-borda); color:var(--tinta);}
.aviso-ok{background:var(--marca-clara); border-color:var(--marca-borda); color:var(--tinta);}
.aviso-info{background:var(--info-clara); border-color:var(--info-borda); color:var(--tinta);}

.check{
  display:flex; align-items:center; gap:0.75rem; padding:0.8125rem 0.875rem;
  cursor:pointer; background:var(--bg); border:1px solid var(--linha);
  border-radius:var(--r-md); margin-bottom:0.375rem;
  transition:border-color var(--rapido), background var(--rapido);
}
.check:hover{background:var(--superficie);}
.check input{width:1.25rem; height:1.25rem; accent-color:var(--marca); flex-shrink:0;}
.check-nome{flex:1; font-size:var(--t-base); font-weight:var(--p-medio);}
.check.marcada{border-color:var(--marca-borda); background:var(--marca-clara);}

.grade{display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:0.625rem;}

/* ---------- carregamento ----------
   Esqueleto no lugar de "Carregando…": o leitor vê a forma do que vem. */
.skel{
  background:linear-gradient(90deg, var(--superficie) 25%, var(--superficie-2) 50%, var(--superficie) 75%);
  background-size:200% 100%;
  animation:skel 1.4s ease-in-out infinite;
  border-radius:var(--r-sm);
}
@keyframes skel{ from{background-position:200% 0;} to{background-position:-200% 0;} }
.skel-linha{height:0.875rem; margin-bottom:0.5rem;}
.skel-card{height:5.25rem; border-radius:var(--r-md); margin-bottom:0.625rem;}

/* ---------- modal ---------- */
.modal{
  position:fixed; inset:0; background:oklch(0.243 0.016 138 / 0.55);
  z-index:var(--z-fundo-modal);
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.modal[hidden]{display:none;}
.modal-caixa{
  background:var(--bg); border:1px solid var(--linha); border-radius:var(--r-lg);
  max-width:52rem; width:100%; max-height:88vh; overflow:auto; padding:1.125rem;
  box-shadow:var(--sombra-3); z-index:var(--z-modal);
}
.modal-topo{display:flex; align-items:center; gap:0.625rem; margin-bottom:1rem;}
.modal-topo h2{margin:0; font-size:var(--t-md); font-weight:var(--p-semi); flex:1; letter-spacing:-0.011em;}

.filtros{
  display:flex; gap:0.375rem; overflow-x:auto; scrollbar-width:none;
  margin-bottom:0.875rem; padding-bottom:0.125rem;
}
.filtros::-webkit-scrollbar{display:none;}
.filtro{
  flex-shrink:0; padding:0.375rem 0.75rem; border-radius:999px;
  border:1px solid var(--linha); background:var(--bg); color:var(--tinta-2);
  font-size:var(--t-menor); font-weight:var(--p-medio); font-family:inherit; cursor:pointer;
  transition:background var(--rapido), border-color var(--rapido), color var(--rapido);
}
.filtro:hover{background:var(--superficie-2);}
.filtro[aria-pressed="true"]{
  background:var(--marca); border-color:var(--marca); color:var(--sobre-marca);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;}
}