/* ==========================================================================
   Inter — Componentes básicos
   Botões · Campos · Seleção · Avatares · Selos · Sobreposições · Navegação
   Todo valor vem de tokens.css. Nenhum literal de cor aqui.
   ========================================================================== */

/* ==========================================================================
   BOTÃO
   Variantes: primário · secundário · discreto · destrutivo · fantasma
   Tamanhos:  p · m · g       Modificadores: --icone (quadrado) · --bloco
   Estados:   padrão, hover, foco, ativo, selecionado, desabilitado, carregando
   ========================================================================== */
.inter-botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--inter-esp-3);
  height: var(--inter-controle-altura-m);
  padding: 0 var(--inter-esp-6);
  border-radius: var(--inter-raio-pilula);
  border: 1px solid transparent;
  font-size: var(--inter-ts-corpo);
  font-weight: var(--inter-peso-medio);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--inter-dur-rapida) var(--inter-curva),
    border-color var(--inter-dur-rapida) var(--inter-curva),
    color var(--inter-dur-rapida) var(--inter-curva),
    box-shadow var(--inter-dur-rapida) var(--inter-curva),
    transform var(--inter-dur-imediata) var(--inter-curva);
}
.inter-botao:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.975); }
.inter-botao:focus-visible { outline: none; box-shadow: var(--inter-sombra-foco); }
.inter-botao:disabled,
.inter-botao[aria-disabled="true"] { cursor: not-allowed; transform: none; }

/* Primário — ação principal, uma por contexto */
.inter-botao--primario { background: var(--inter-acao); color: var(--inter-acao-texto); }
.inter-botao--primario:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--inter-acao-hover); }
.inter-botao--primario:active:not(:disabled) { background: var(--inter-acao-ativo); }
.inter-botao--primario:disabled,
.inter-botao--primario[aria-disabled="true"] { background: var(--inter-superficie-forte); color: var(--inter-texto-desabilitado); }

/* Secundário — ação de apoio, contorno */
.inter-botao--secundario {
  background: var(--inter-superficie);
  color: var(--inter-texto);
  border-color: var(--inter-borda-forte);
}
.inter-botao--secundario:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--inter-superficie-sutil);
  border-color: var(--inter-texto-sutil);
}
.inter-botao--secundario:active:not(:disabled) { background: var(--inter-superficie-forte); }
.inter-botao--secundario:disabled,
.inter-botao--secundario[aria-disabled="true"] {
  background: transparent; color: var(--inter-texto-desabilitado); border-color: var(--inter-borda);
}
.inter-botao--secundario[aria-pressed="true"],
.inter-botao--secundario.esta-selecionado {
  background: var(--inter-selecionado);
  border-color: var(--inter-borda-marca);
  color: var(--inter-texto-marca);
}

/* Discreto — ação terciária, sem peso visual até o hover */
.inter-botao--discreto { background: transparent; color: var(--inter-texto-suave); }
.inter-botao--discreto:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--inter-superficie-sutil); color: var(--inter-texto);
}
.inter-botao--discreto:active:not(:disabled) { background: var(--inter-superficie-forte); }
.inter-botao--discreto:disabled,
.inter-botao--discreto[aria-disabled="true"] { color: var(--inter-texto-desabilitado); }
.inter-botao--discreto[aria-pressed="true"],
.inter-botao--discreto.esta-selecionado { background: var(--inter-acao-sutil); color: var(--inter-texto-marca); }

/* Destrutivo — remove, cancela, revoga */
.inter-botao--destrutivo { background: var(--inter-perigo); color: var(--inter-perigo-texto); }
.inter-botao--destrutivo:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--inter-perigo-hover); }
/* Sobre o vermelho cheio, quem marca o foco é o branco: o anel laranja se
   perde no preenchimento. Branco sobre o vermelho fecha bem acima de 3:1. */
.inter-botao--destrutivo:focus-visible {
  box-shadow: 0 0 0 2px var(--inter-superficie), 0 0 0 4px var(--inter-perigo);
}
.inter-botao--destrutivo:disabled,
.inter-botao--destrutivo[aria-disabled="true"] { background: var(--inter-superficie-forte); color: var(--inter-texto-desabilitado); }

/* Destrutivo discreto — mesma intenção, menos alarme */
.inter-botao--destrutivo-sutil { background: transparent; color: var(--inter-erro-texto); }
.inter-botao--destrutivo-sutil:hover:not(:disabled) { background: var(--inter-perigo-sutil); }

/* Fantasma sobre mídia escura */
.inter-botao--fantasma {
  background: rgba(255, 255, 255, 0.14);
  color: var(--inter-areia-0);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.22);
}
.inter-botao--fantasma:hover:not(:disabled) { background: rgba(255, 255, 255, 0.24); }

/* Tamanhos */
.inter-botao--p { height: var(--inter-controle-altura-p); padding: 0 var(--inter-esp-4); font-size: var(--inter-ts-corpo-p); gap: var(--inter-esp-2); }
.inter-botao--g { height: var(--inter-controle-altura-g); padding: 0 var(--inter-esp-7); font-size: var(--inter-ts-corpo-g); }

/* Só ícone */
.inter-botao--icone { width: var(--inter-controle-altura-m); padding: 0; }
.inter-botao--icone.inter-botao--p { width: var(--inter-controle-altura-p); }
.inter-botao--icone.inter-botao--g { width: var(--inter-controle-altura-g); }
.inter-botao--quadrado { border-radius: var(--inter-raio-m); }

.inter-botao--bloco { display: flex; width: 100%; }

/* Carregando — o rótulo some, o disco entra, a largura não muda */
.inter-botao[data-carregando="true"] { color: transparent !important; pointer-events: none; }
.inter-botao[data-carregando="true"] > * { visibility: hidden; }
.inter-botao[data-carregando="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em; height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--inter-acao-texto);
  visibility: visible;
  animation: inter-girar 640ms linear infinite;
}
.inter-botao--secundario[data-carregando="true"]::after,
.inter-botao--discreto[data-carregando="true"]::after { color: var(--inter-texto-suave); }

/* Grupo segmentado de botões */
.inter-grupo-botoes {
  display: inline-flex;
  padding: var(--inter-esp-1);
  gap: var(--inter-esp-1);
  background: var(--inter-superficie-sutil);
  border-radius: var(--inter-raio-pilula);
  border: 1px solid var(--inter-borda);
}
.inter-grupo-botoes .inter-botao { height: 32px; padding: 0 var(--inter-esp-5); font-size: var(--inter-ts-corpo-p); }

/* ==========================================================================
   CAMPO DE TEXTO · SENHA · BUSCA · ÁREA DE TEXTO
   ========================================================================== */
.inter-campo { display: flex; flex-direction: column; gap: var(--inter-esp-3); min-width: 0; }
.inter-campo__rotulo {
  font-size: var(--inter-ts-corpo-p);
  font-weight: var(--inter-peso-medio);
  color: var(--inter-texto);
  display: flex; align-items: center; gap: var(--inter-esp-2);
}
.inter-campo__obrigatorio { color: var(--inter-erro); }
.inter-campo__opcional { color: var(--inter-texto-sutil); font-weight: var(--inter-peso-normal); }

.inter-campo__caixa {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--inter-esp-3);
  min-height: var(--inter-controle-altura-m);
  padding: 0 var(--inter-esp-5);
  background: var(--inter-superficie);
  border: 1px solid var(--inter-borda-forte);
  border-radius: var(--inter-raio-m);
  color: var(--inter-texto-sutil);
  transition: border-color var(--inter-dur-rapida) var(--inter-curva),
              box-shadow var(--inter-dur-rapida) var(--inter-curva),
              background-color var(--inter-dur-rapida) var(--inter-curva);
}
.inter-campo__caixa:hover { border-color: var(--inter-texto-sutil); }
.inter-campo__caixa:focus-within {
  border-color: var(--inter-borda-marca);
  box-shadow: var(--inter-sombra-foco);
  color: var(--inter-texto-suave);
}
.inter-campo__entrada {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  padding: var(--inter-esp-3) 0;
  font-size: var(--inter-ts-corpo);
  color: var(--inter-texto);
  line-height: var(--inter-al-media);
}
.inter-campo__entrada::placeholder { color: var(--inter-texto-sutil); }
.inter-campo__entrada:focus { outline: none; }
.inter-campo__afixo { display: inline-flex; align-items: center; flex: none; }
.inter-campo__afixo--texto { font-size: var(--inter-ts-corpo-p); color: var(--inter-texto-sutil); }
.inter-campo__auxiliar { font-size: var(--inter-ts-legenda); color: var(--inter-texto-suave); }
.inter-campo__contador { font-size: var(--inter-ts-legenda); color: var(--inter-texto-sutil); font-variant-numeric: tabular-nums; }
.inter-campo__mensagem { display: flex; align-items: flex-start; gap: var(--inter-esp-2); font-size: var(--inter-ts-legenda); }

/* Estados do campo */
.inter-campo--erro .inter-campo__caixa { border-color: var(--inter-erro); }
.inter-campo--erro .inter-campo__caixa:focus-within { box-shadow: 0 0 0 3px var(--inter-erro-sutil); }
.inter-campo--erro .inter-campo__mensagem { color: var(--inter-erro-texto); }
.inter-campo--sucesso .inter-campo__caixa { border-color: var(--inter-sucesso); }
.inter-campo--sucesso .inter-campo__mensagem { color: var(--inter-sucesso-texto); }
.inter-campo--desabilitado .inter-campo__caixa {
  background: var(--inter-superficie-sutil);
  border-color: var(--inter-borda);
  cursor: not-allowed;
}
.inter-campo--desabilitado .inter-campo__rotulo,
.inter-campo--desabilitado .inter-campo__entrada { color: var(--inter-texto-desabilitado); }
.inter-campo--desabilitado .inter-campo__entrada { cursor: not-allowed; }
.inter-campo__entrada:read-only { color: var(--inter-texto-suave); }

.inter-campo--g .inter-campo__caixa { min-height: var(--inter-controle-altura-g); padding: 0 var(--inter-esp-6); }
.inter-campo--p .inter-campo__caixa { min-height: var(--inter-controle-altura-p); padding: 0 var(--inter-esp-4); }
.inter-campo--p .inter-campo__entrada { font-size: var(--inter-ts-corpo-p); }

/* Busca — pilula, ícone à esquerda, limpar à direita */
.inter-campo--busca .inter-campo__caixa { border-radius: var(--inter-raio-pilula); }

/* Área de texto */
.inter-campo__area {
  min-height: 108px;
  resize: vertical;
  padding: var(--inter-esp-4) 0;
  font-family: inherit;
}
.inter-campo--area .inter-campo__caixa { align-items: flex-start; padding: 0 var(--inter-esp-5); }

/* ==========================================================================
   SELECT
   ========================================================================== */
.inter-select { position: relative; display: flex; align-items: center; }
.inter-select__nativo {
  appearance: none;
  width: 100%;
  height: var(--inter-controle-altura-m);
  padding: 0 calc(var(--inter-esp-5) + 24px) 0 var(--inter-esp-5);
  background: var(--inter-superficie);
  border: 1px solid var(--inter-borda-forte);
  border-radius: var(--inter-raio-m);
  font-size: var(--inter-ts-corpo);
  color: var(--inter-texto);
  cursor: pointer;
  transition: border-color var(--inter-dur-rapida) var(--inter-curva), box-shadow var(--inter-dur-rapida) var(--inter-curva);
}
.inter-select__nativo:hover:not(:disabled) { border-color: var(--inter-texto-sutil); }
.inter-select__nativo:focus-visible { border-color: var(--inter-borda-marca); box-shadow: var(--inter-sombra-foco); outline: none; }
.inter-select__nativo:disabled {
  background: var(--inter-superficie-sutil); color: var(--inter-texto-desabilitado);
  border-color: var(--inter-borda); cursor: not-allowed;
}
.inter-select__seta {
  position: absolute; right: var(--inter-esp-4);
  pointer-events: none; color: var(--inter-texto-sutil);
}
.inter-select__nativo:disabled + .inter-select__seta { color: var(--inter-texto-desabilitado); }

/* ==========================================================================
   CHECKBOX · RADIO · SWITCH
   ========================================================================== */
.inter-escolha {
  display: flex;
  align-items: flex-start;
  gap: var(--inter-esp-4);
  cursor: pointer;
  min-width: 0;
}
.inter-escolha__entrada { position: absolute; opacity: 0; width: 0; height: 0; }
.inter-escolha__conteudo { display: flex; flex-direction: column; gap: var(--inter-esp-1); min-width: 0; }
.inter-escolha__titulo { font-size: var(--inter-ts-corpo); line-height: 20px; }
.inter-escolha__descricao { font-size: var(--inter-ts-legenda); color: var(--inter-texto-suave); }
.inter-escolha:has(.inter-escolha__entrada:disabled) { cursor: not-allowed; }
.inter-escolha:has(.inter-escolha__entrada:disabled) .inter-escolha__titulo,
.inter-escolha:has(.inter-escolha__entrada:disabled) .inter-escolha__descricao { color: var(--inter-texto-desabilitado); }

.inter-marca {
  flex: none;
  position: relative;
  width: 20px; height: 20px;
  margin-top: 0;
  background: var(--inter-superficie);
  border: 1.5px solid var(--inter-borda-forte);
  border-radius: 6px;
  transition: background-color var(--inter-dur-rapida) var(--inter-curva), border-color var(--inter-dur-rapida) var(--inter-curva), box-shadow var(--inter-dur-rapida) var(--inter-curva);
  display: grid; place-items: center;
  color: var(--inter-acao-texto);
}
.inter-marca--radio { border-radius: 50%; }
.inter-escolha:hover .inter-escolha__entrada:not(:disabled) + .inter-marca { border-color: var(--inter-acao); }
.inter-escolha__entrada:focus-visible + .inter-marca { box-shadow: var(--inter-sombra-foco); border-color: var(--inter-acao); }
.inter-escolha__entrada:checked + .inter-marca { background: var(--inter-acao); border-color: var(--inter-acao); }
.inter-escolha__entrada:disabled + .inter-marca { background: var(--inter-superficie-sutil); border-color: var(--inter-borda); }
.inter-escolha__entrada:disabled:checked + .inter-marca { background: var(--inter-borda-forte); border-color: var(--inter-borda-forte); }

.inter-marca__risco { width: 14px; height: 14px; opacity: 0; transform: scale(0.6); transition: opacity var(--inter-dur-rapida) var(--inter-curva), transform var(--inter-dur-rapida) var(--inter-curva); }
.inter-escolha__entrada:checked + .inter-marca .inter-marca__risco { opacity: 1; transform: none; }
.inter-marca__ponto {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  opacity: 0; transform: scale(0.4); transition: opacity var(--inter-dur-rapida) var(--inter-curva), transform var(--inter-dur-rapida) var(--inter-curva);
}
.inter-escolha__entrada:checked + .inter-marca--radio .inter-marca__ponto { opacity: 1; transform: none; }

/* Indeterminado */
.inter-escolha__entrada:indeterminate + .inter-marca { background: var(--inter-acao); border-color: var(--inter-acao); }
.inter-escolha__entrada:indeterminate + .inter-marca::after {
  content: ''; width: 10px; height: 2px; border-radius: 1px; background: currentColor;
}
.inter-escolha__entrada:indeterminate + .inter-marca .inter-marca__risco { display: none; }

/* Escolha em cartão — usada em seleção de modelo e ferramentas */
.inter-escolha--cartao {
  padding: var(--inter-esp-5);
  border: 1px solid var(--inter-borda);
  border-radius: var(--inter-raio-g);
  background: var(--inter-superficie);
  transition: background-color var(--inter-dur-rapida) var(--inter-curva), border-color var(--inter-dur-rapida) var(--inter-curva), box-shadow var(--inter-dur-rapida) var(--inter-curva);
}
.inter-escolha--cartao:hover:not(:has(:disabled)) { border-color: var(--inter-borda-forte); background: var(--inter-superficie-sutil); }
.inter-escolha--cartao:has(.inter-escolha__entrada:checked) {
  border-color: var(--inter-borda-marca); background: var(--inter-selecionado);
}

/* Switch
   Estrutura: <label class="inter-escolha"><input class="inter-escolha__entrada">
              <span class="inter-switch"><i class="inter-switch__trilha"></i><i class="inter-switch__botao"></i></span>
              <span class="inter-escolha__conteudo">…</span></label> */
.inter-switch { flex: none; position: relative; display: block; width: 44px; height: 26px; }
.inter-switch__trilha {
  display: block; width: 100%; height: 100%;
  background: var(--inter-borda-forte);
  border-radius: var(--inter-raio-pilula);
  transition: background-color var(--inter-dur-media) var(--inter-curva),
              box-shadow var(--inter-dur-rapida) var(--inter-curva);
}
.inter-switch__botao {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: var(--inter-areia-0);
  border-radius: 50%;
  box-shadow: var(--inter-sombra-1);
  transition: transform var(--inter-dur-media) var(--inter-curva);
}
.inter-escolha__entrada:checked ~ .inter-switch .inter-switch__trilha { background: var(--inter-acao); }
.inter-escolha__entrada:checked ~ .inter-switch .inter-switch__botao { transform: translateX(18px); }
.inter-escolha__entrada:focus-visible ~ .inter-switch .inter-switch__trilha { box-shadow: var(--inter-sombra-foco); }
.inter-escolha:hover .inter-escolha__entrada:not(:disabled) ~ .inter-switch .inter-switch__trilha { background: var(--inter-texto-sutil); }
.inter-escolha:hover .inter-escolha__entrada:checked:not(:disabled) ~ .inter-switch .inter-switch__trilha { background: var(--inter-acao-hover); }
.inter-escolha__entrada:disabled ~ .inter-switch .inter-switch__trilha { background: var(--inter-borda); }
.inter-escolha__entrada:disabled ~ .inter-switch .inter-switch__botao { background: var(--inter-superficie-sutil); box-shadow: none; }
.inter-switch--p { width: 36px; height: 20px; }
.inter-switch--p .inter-switch__botao { width: 14px; height: 14px; }
.inter-escolha__entrada:checked ~ .inter-switch--p .inter-switch__botao { transform: translateX(16px); }

/* ==========================================================================
   SLIDER
   ========================================================================== */
.inter-slider { display: flex; flex-direction: column; gap: var(--inter-esp-3); min-width: 0; }
.inter-slider__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--inter-esp-4); }
.inter-slider__valor { font-variant-numeric: tabular-nums; font-weight: var(--inter-peso-medio); font-size: var(--inter-ts-corpo-p); }
.inter-slider__entrada {
  appearance: none; width: 100%; height: 20px; background: none; cursor: pointer; margin: 0;
}
.inter-slider__entrada::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--inter-raio-pilula);
  background: linear-gradient(to right, var(--inter-acao) var(--inter-preenchido, 50%), var(--inter-superficie-forte) var(--inter-preenchido, 50%));
}
.inter-slider__entrada::-moz-range-track { height: 6px; border-radius: var(--inter-raio-pilula); background: var(--inter-superficie-forte); }
.inter-slider__entrada::-moz-range-progress { height: 6px; border-radius: var(--inter-raio-pilula); background: var(--inter-acao); }
.inter-slider__entrada::-webkit-slider-thumb {
  appearance: none; width: 20px; height: 20px; margin-top: -7px;
  background: var(--inter-areia-0); border: 2px solid var(--inter-acao);
  border-radius: 50%; box-shadow: var(--inter-sombra-1);
  transition: transform var(--inter-dur-rapida) var(--inter-curva), box-shadow var(--inter-dur-rapida) var(--inter-curva);
}
.inter-slider__entrada::-moz-range-thumb {
  width: 16px; height: 16px; background: var(--inter-areia-0);
  border: 2px solid var(--inter-acao); border-radius: 50%;
}
@media (hover: hover) and (pointer: fine) {
  .inter-slider__entrada:hover::-webkit-slider-thumb { transform: scale(1.12); }
}
.inter-slider__entrada:focus-visible::-webkit-slider-thumb { box-shadow: var(--inter-sombra-foco); }
.inter-slider__entrada:disabled { cursor: not-allowed; }
.inter-slider__entrada:disabled::-webkit-slider-runnable-track { background: var(--inter-superficie-forte); }
.inter-slider__entrada:disabled::-webkit-slider-thumb { border-color: var(--inter-borda-forte); }
.inter-slider__escala { display: flex; justify-content: space-between; font-size: var(--inter-ts-rotulo); color: var(--inter-texto-sutil); }

/* ==========================================================================
   AVATAR
   ========================================================================== */
.inter-avatar {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--inter-superficie-forte);
  color: var(--inter-texto-suave);
  font-size: var(--inter-ts-corpo-p);
  font-weight: var(--inter-peso-forte);
  overflow: hidden;
  user-select: none;
}
.inter-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.inter-avatar--pp { width: 24px; height: 24px; font-size: 10px; }
.inter-avatar--p  { width: 32px; height: 32px; font-size: var(--inter-ts-rotulo); }
.inter-avatar--g  { width: 48px; height: 48px; font-size: var(--inter-ts-corpo-g); }
.inter-avatar--gg { width: 64px; height: 64px; font-size: var(--inter-ts-titulo-3); }
.inter-avatar--quadrado { border-radius: var(--inter-raio-m); }
.inter-avatar--marca { background: var(--inter-acao); color: var(--inter-acao-texto); }
/* Os cinco tons de apoio da marca. Cada um já vem com a dupla fundo/texto
   pronta para os dois temas, então o avatar não precisa calcular mistura. */
.inter-avatar--azul    { background: var(--inter-acento-azul-sutil);    color: var(--inter-acento-azul-texto); }
.inter-avatar--menta   { background: var(--inter-acento-menta-sutil);   color: var(--inter-acento-menta-texto); }
.inter-avatar--rosa    { background: var(--inter-acento-rosa-sutil);    color: var(--inter-acento-rosa-texto); }
.inter-avatar--amarelo { background: var(--inter-acento-amarelo-sutil); color: var(--inter-acento-amarelo-texto); }
.inter-avatar--lilas   { background: var(--inter-acento-lilas-sutil);   color: var(--inter-acento-lilas-texto); }

.inter-avatar__presenca {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--inter-superficie);
  background: var(--inter-texto-sutil);
}
.inter-avatar__presenca--ativo { background: var(--inter-sucesso); }
.inter-avatar__presenca--ocupado { background: var(--inter-erro); }
.inter-avatar__presenca--ausente { background: var(--inter-atencao); }

.inter-avatares { display: inline-flex; align-items: center; }
.inter-avatares > .inter-avatar {
  border: 2px solid var(--inter-superficie);
  margin-left: -10px;
  transition: transform var(--inter-dur-rapida) var(--inter-curva);
}
.inter-avatares > .inter-avatar:first-child { margin-left: 0; }
@media (hover: hover) and (pointer: fine) {
  .inter-avatares > .inter-avatar:hover { transform: translateY(-2px); z-index: 1; }
}
.inter-avatares__restante {
  background: var(--inter-superficie-sutil);
  color: var(--inter-texto-suave);
  font-size: var(--inter-ts-rotulo);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SELO (badge) — categoria e status
   ========================================================================== */
.inter-selo {
  display: inline-flex;
  align-items: center;
  gap: var(--inter-esp-2);
  height: 24px;
  padding: 0 var(--inter-esp-4);
  border-radius: var(--inter-raio-pilula);
  background: var(--inter-superficie-sutil);
  color: var(--inter-texto-suave);
  font-size: var(--inter-ts-rotulo);
  font-weight: var(--inter-peso-medio);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}
.inter-selo--p { height: 20px; padding: 0 var(--inter-esp-3); font-size: 11px; }
.inter-selo--g { height: 28px; padding: 0 var(--inter-esp-5); font-size: var(--inter-ts-corpo-p); }
.inter-selo--contorno { background: transparent; border-color: var(--inter-borda-forte); }
.inter-selo--quadrado { border-radius: var(--inter-raio-p); }

.inter-selo--marca    { background: var(--inter-acao-sutil);   color: var(--inter-texto-marca); }
.inter-selo--solido   { background: var(--inter-acao);         color: var(--inter-acao-texto); }
.inter-selo--sucesso  { background: var(--inter-sucesso-sutil);color: var(--inter-sucesso-texto); }
.inter-selo--atencao  { background: var(--inter-atencao-sutil);color: var(--inter-atencao-texto); }
.inter-selo--erro     { background: var(--inter-erro-sutil);   color: var(--inter-erro-texto); }
.inter-selo--info     { background: var(--inter-info-sutil);   color: var(--inter-info-texto); }
.inter-selo--azul    { background: var(--inter-acento-azul-sutil);    color: var(--inter-acento-azul-texto); }
.inter-selo--menta   { background: var(--inter-acento-menta-sutil);   color: var(--inter-acento-menta-texto); }
.inter-selo--rosa    { background: var(--inter-acento-rosa-sutil);    color: var(--inter-acento-rosa-texto); }
.inter-selo--amarelo { background: var(--inter-acento-amarelo-sutil); color: var(--inter-acento-amarelo-texto); }
.inter-selo--lilas   { background: var(--inter-acento-lilas-sutil);   color: var(--inter-acento-lilas-texto); }

.inter-selo__ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.inter-selo__ponto--pulsando { animation: inter-pulsar 1.6s ease-in-out infinite; }

/* Contagem numérica */
.inter-contagem {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--inter-raio-pilula);
  background: var(--inter-acao); color: var(--inter-acao-texto);
  font-size: 11px; font-weight: var(--inter-peso-forte);
  font-variant-numeric: tabular-nums;
}

/* Chip removível / clicável */
.inter-chip {
  display: inline-flex; align-items: center; gap: var(--inter-esp-3);
  height: 34px; padding: 0 var(--inter-esp-4) 0 var(--inter-esp-5);
  border-radius: var(--inter-raio-pilula);
  background: var(--inter-superficie);
  border: 1px solid var(--inter-borda-forte);
  font-size: var(--inter-ts-corpo-p);
  color: var(--inter-texto);
  max-width: 100%;
  transition: background-color var(--inter-dur-rapida) var(--inter-curva), border-color var(--inter-dur-rapida) var(--inter-curva), color var(--inter-dur-rapida) var(--inter-curva), box-shadow var(--inter-dur-rapida) var(--inter-curva);
}
.inter-chip--acao { cursor: pointer; padding-right: var(--inter-esp-5); }
.inter-chip--acao:hover { background: var(--inter-acao-sutil); border-color: var(--inter-acao-borda); color: var(--inter-texto-marca); }
.inter-chip--acao:focus-visible { box-shadow: var(--inter-sombra-foco); outline: none; }
.inter-chip[aria-pressed="true"] { background: var(--inter-selecionado); border-color: var(--inter-borda-marca); color: var(--inter-texto-marca); }
.inter-chip__fechar {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; color: var(--inter-texto-sutil);
}
.inter-chip__fechar:hover { background: var(--inter-superficie-forte); color: var(--inter-texto); }

/* ==========================================================================
   TOOLTIP (dica)
   ========================================================================== */
.inter-dica-alvo { position: relative; display: inline-flex; }
.inter-dica {
  position: fixed;
  z-index: var(--inter-z-dica);
  max-width: 264px;
  padding: var(--inter-esp-3) var(--inter-esp-4);
  background: var(--inter-superficie-inversa);
  color: var(--inter-texto-invertido);
  border-radius: var(--inter-raio-p);
  font-size: var(--inter-ts-legenda);
  line-height: var(--inter-al-media);
  box-shadow: var(--inter-sombra-3);
  pointer-events: none;
  animation: inter-surgir var(--inter-dur-rapida) var(--inter-curva);
}
.inter-dica__atalho {
  margin-left: var(--inter-esp-3);
  opacity: 0.6;
  font-family: var(--inter-fonte-codigo);
  font-size: 11px;
}

/* ==========================================================================
   MENU SUSPENSO (dropdown)
   ========================================================================== */
.inter-menu {
  position: fixed;
  z-index: var(--inter-z-menu);
  min-width: 232px;
  max-width: 320px;
  padding: var(--inter-esp-3);
  background: var(--inter-superficie);
  border: 1px solid var(--inter-borda);
  border-radius: var(--inter-raio-g);
  box-shadow: var(--inter-sombra-3);
  animation: inter-surgir var(--inter-dur-rapida) var(--inter-curva);
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.inter-menu__grupo + .inter-menu__grupo { margin-top: var(--inter-esp-3); padding-top: var(--inter-esp-3); border-top: 1px solid var(--inter-borda-sutil); }
.inter-menu__titulo { padding: var(--inter-esp-3) var(--inter-esp-4) var(--inter-esp-2); }
.inter-menu__item {
  display: flex; align-items: center; gap: var(--inter-esp-4);
  width: 100%;
  padding: var(--inter-esp-3) var(--inter-esp-4);
  border-radius: var(--inter-raio-p);
  font-size: var(--inter-ts-corpo-p);
  color: var(--inter-texto);
  text-align: left;
  transition: background-color var(--inter-dur-imediata) var(--inter-curva);
}
.inter-menu__item:hover:not([aria-disabled="true"]),
.inter-menu__item.esta-ativo { background: var(--inter-superficie-sutil); }
.inter-menu__item:focus-visible { outline: none; background: var(--inter-superficie-sutil); box-shadow: var(--inter-sombra-foco); }
.inter-menu__item[aria-disabled="true"] { color: var(--inter-texto-desabilitado); cursor: not-allowed; }
.inter-menu__item[aria-checked="true"] { color: var(--inter-texto-marca); }
.inter-menu__item--perigo { color: var(--inter-erro-texto); }
.inter-menu__item--perigo:hover { background: var(--inter-perigo-sutil); }
.inter-menu__atalho {
  margin-left: auto; flex: none;
  font-family: var(--inter-fonte-codigo); font-size: 11px;
  color: var(--inter-texto-sutil);
}

.inter-tecla {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--inter-superficie-sutil);
  border: 1px solid var(--inter-borda);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--inter-fonte-codigo);
  font-size: 11px;
  color: var(--inter-texto-suave);
}

/* ==========================================================================
   ACCORDION
   ========================================================================== */
.inter-acordeao { border: 1px solid var(--inter-borda); border-radius: var(--inter-raio-g); overflow: hidden; background: var(--inter-superficie); }
.inter-acordeao__item + .inter-acordeao__item { border-top: 1px solid var(--inter-borda); }
.inter-acordeao__gatilho {
  display: flex; align-items: center; gap: var(--inter-esp-4);
  width: 100%; padding: var(--inter-esp-5) var(--inter-esp-6);
  text-align: left; font-size: var(--inter-ts-corpo); font-weight: var(--inter-peso-medio);
  transition: background-color var(--inter-dur-rapida) var(--inter-curva);
}
.inter-acordeao__gatilho:hover { background: var(--inter-superficie-sutil); }
.inter-acordeao__gatilho:focus-visible { outline: none; box-shadow: inset var(--inter-sombra-foco); }
.inter-acordeao__gatilho[aria-disabled="true"] { color: var(--inter-texto-desabilitado); cursor: not-allowed; }
.inter-acordeao__seta { margin-left: auto; flex: none; color: var(--inter-texto-sutil); transition: transform var(--inter-dur-media) var(--inter-curva); }
.inter-acordeao__gatilho[aria-expanded="true"] .inter-acordeao__seta { transform: rotate(180deg); }
.inter-acordeao__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--inter-dur-media) var(--inter-curva); }
.inter-acordeao__painel[data-aberto="true"] { grid-template-rows: 1fr; }
.inter-acordeao__interior { overflow: hidden; }
.inter-acordeao__interior > div { padding: 0 var(--inter-esp-6) var(--inter-esp-6); color: var(--inter-texto-suave); font-size: var(--inter-ts-corpo-p); }

/* ==========================================================================
   ALERTA
   ========================================================================== */
.inter-alerta {
  display: flex; gap: var(--inter-esp-4);
  padding: var(--inter-esp-5);
  border-radius: var(--inter-raio-g);
  border: 1px solid var(--inter-borda);
  background: var(--inter-superficie-sutil);
  color: var(--inter-texto);
}
.inter-alerta__icone { flex: none; margin-top: 1px; color: var(--inter-texto-suave); }
.inter-alerta__corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--inter-esp-2); }
.inter-alerta__titulo { font-weight: var(--inter-peso-forte); font-size: var(--inter-ts-corpo-p); }
.inter-alerta__texto { font-size: var(--inter-ts-corpo-p); color: var(--inter-texto-suave); }
.inter-alerta__acoes { display: flex; gap: var(--inter-esp-3); margin-top: var(--inter-esp-2); flex-wrap: wrap; }
.inter-alerta--info    { background: var(--inter-info-sutil);    border-color: color-mix(in srgb, var(--inter-info) 26%, transparent); }
.inter-alerta--info    .inter-alerta__icone { color: var(--inter-info); }
.inter-alerta--sucesso { background: var(--inter-sucesso-sutil); border-color: color-mix(in srgb, var(--inter-sucesso) 26%, transparent); }
.inter-alerta--sucesso .inter-alerta__icone { color: var(--inter-sucesso); }
.inter-alerta--atencao { background: var(--inter-atencao-sutil); border-color: color-mix(in srgb, var(--inter-atencao) 30%, transparent); }
.inter-alerta--atencao .inter-alerta__icone { color: var(--inter-atencao); }
.inter-alerta--erro    { background: var(--inter-erro-sutil);    border-color: color-mix(in srgb, var(--inter-erro) 26%, transparent); }
.inter-alerta--erro    .inter-alerta__icone { color: var(--inter-erro); }
.inter-alerta--marca   { background: var(--inter-acao-sutil);    border-color: var(--inter-acao-borda); }
.inter-alerta--marca   .inter-alerta__icone { color: var(--inter-acao); }

/* ==========================================================================
   TOAST
   ========================================================================== */
.inter-toasts {
  position: fixed; z-index: var(--inter-z-toast);
  right: var(--inter-esp-7); bottom: var(--inter-esp-7);
  display: flex; flex-direction: column-reverse; gap: var(--inter-esp-4);
  width: min(380px, calc(100vw - var(--inter-esp-7) * 2));
  pointer-events: none;
}
.inter-toast {
  display: flex; gap: var(--inter-esp-4);
  padding: var(--inter-esp-5);
  background: var(--inter-superficie);
  border: 1px solid var(--inter-borda);
  border-radius: var(--inter-raio-g);
  box-shadow: var(--inter-sombra-3);
  pointer-events: auto;
  animation: inter-subir var(--inter-dur-media) var(--inter-curva);
}
.inter-toast[data-saindo="true"] { animation: inter-sumir var(--inter-dur-rapida) var(--inter-curva-saida) forwards; }
.inter-toast__icone { flex: none; margin-top: 1px; }
.inter-toast--sucesso .inter-toast__icone { color: var(--inter-sucesso); }
.inter-toast--erro    .inter-toast__icone { color: var(--inter-erro); }
.inter-toast--atencao .inter-toast__icone { color: var(--inter-atencao); }
.inter-toast--info    .inter-toast__icone { color: var(--inter-info); }
.inter-toast__corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--inter-esp-1); }
.inter-toast__titulo { font-size: var(--inter-ts-corpo-p); font-weight: var(--inter-peso-forte); }
.inter-toast__texto { font-size: var(--inter-ts-legenda); color: var(--inter-texto-suave); }

/* ==========================================================================
   SOBREPOSIÇÃO · MODAL · DRAWER
   ========================================================================== */
.inter-cortina {
  position: fixed; inset: 0;
  z-index: var(--inter-z-sobreposicao);
  background: var(--inter-sobreposicao);
  backdrop-filter: blur(3px);
  animation: inter-surgir var(--inter-dur-rapida) var(--inter-curva);
}
.inter-modal-raiz {
  position: fixed; inset: 0;
  z-index: var(--inter-z-modal);
  display: grid; place-items: center;
  padding: var(--inter-esp-6);
  overflow-y: auto;
}
.inter-modal {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - var(--inter-esp-10));
  display: flex; flex-direction: column;
  background: var(--inter-superficie);
  border-radius: var(--inter-raio-ggg);
  box-shadow: var(--inter-sombra-4);
  animation: inter-subir var(--inter-dur-media) var(--inter-curva);
  overflow: hidden;
}
.inter-modal--g { width: min(720px, 100%); }
.inter-modal--p { width: min(400px, 100%); }
.inter-modal__cabecalho {
  display: flex; align-items: flex-start; gap: var(--inter-esp-4);
  padding: var(--inter-esp-7) var(--inter-esp-7) var(--inter-esp-5);
}
.inter-modal__titulo { font-family: var(--inter-fonte-titulo-p); font-size: var(--inter-ts-titulo-3); font-weight: var(--inter-peso-normal); }
.inter-modal__descricao { font-size: var(--inter-ts-corpo-p); color: var(--inter-texto-suave); margin-top: var(--inter-esp-2); }
.inter-modal__corpo { padding: 0 var(--inter-esp-7) var(--inter-esp-7); overflow-y: auto; flex: 1 1 auto; }
.inter-modal__rodape {
  display: flex; justify-content: flex-end; gap: var(--inter-esp-3);
  padding: var(--inter-esp-5) var(--inter-esp-7);
  border-top: 1px solid var(--inter-borda);
  background: var(--inter-superficie-sutil);
  flex-wrap: wrap;
}

.inter-drawer-raiz { position: fixed; inset: 0; z-index: var(--inter-z-modal); display: flex; }
.inter-drawer {
  position: relative; margin-left: auto;
  width: min(440px, 100%);
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--inter-superficie);
  border-left: 1px solid var(--inter-borda);
  box-shadow: var(--inter-sombra-4);
  animation: inter-deslizar var(--inter-dur-media) var(--inter-curva);
}
@keyframes inter-deslizar { from { transform: translateX(100%); } to { transform: none; } }
.inter-drawer__cabecalho {
  display: flex; align-items: center; gap: var(--inter-esp-4);
  padding: var(--inter-esp-6) var(--inter-esp-7);
  border-bottom: 1px solid var(--inter-borda);
}
.inter-drawer__corpo { flex: 1 1 auto; overflow-y: auto; padding: var(--inter-esp-7); }
.inter-drawer__rodape {
  display: flex; gap: var(--inter-esp-3); padding: var(--inter-esp-5) var(--inter-esp-7);
  border-top: 1px solid var(--inter-borda); background: var(--inter-superficie-sutil);
}

/* ==========================================================================
   ABAS
   ========================================================================== */
.inter-abas { display: flex; gap: var(--inter-esp-2); border-bottom: 1px solid var(--inter-borda); overflow-x: auto; scrollbar-width: none; }
.inter-abas::-webkit-scrollbar { display: none; }
.inter-aba {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--inter-esp-3);
  padding: var(--inter-esp-4) var(--inter-esp-5);
  font-size: var(--inter-ts-corpo-p); font-weight: var(--inter-peso-medio);
  color: var(--inter-texto-suave);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--inter-dur-rapida) var(--inter-curva), border-color var(--inter-dur-rapida) var(--inter-curva);
}
.inter-aba:hover:not([aria-disabled="true"]) { color: var(--inter-texto); }
.inter-aba[aria-selected="true"] { color: var(--inter-texto-marca); border-bottom-color: var(--inter-acao); }
.inter-aba[aria-disabled="true"] { color: var(--inter-texto-desabilitado); cursor: not-allowed; }
.inter-aba:focus-visible { outline: none; box-shadow: var(--inter-sombra-foco); border-radius: var(--inter-raio-p); }

.inter-abas--pilula { border-bottom: 0; gap: var(--inter-esp-2); padding: var(--inter-esp-1); background: var(--inter-superficie-sutil); border-radius: var(--inter-raio-pilula); display: inline-flex; }
.inter-abas--pilula .inter-aba { border-bottom: 0; margin-bottom: 0; border-radius: var(--inter-raio-pilula); padding: var(--inter-esp-3) var(--inter-esp-5); }
.inter-abas--pilula .inter-aba[aria-selected="true"] { background: var(--inter-superficie); color: var(--inter-texto); box-shadow: var(--inter-sombra-1); }

/* ==========================================================================
   MIGALHAS (breadcrumbs)
   ========================================================================== */
.inter-migalhas { display: flex; align-items: center; flex-wrap: wrap; gap: var(--inter-esp-2); font-size: var(--inter-ts-corpo-p); min-width: 0; }
.inter-migalhas__item {
  display: inline-flex; align-items: center; gap: var(--inter-esp-2);
  color: var(--inter-texto-suave); text-decoration: none;
  padding: 2px var(--inter-esp-2); border-radius: var(--inter-raio-p);
  max-width: 220px;
}
.inter-migalhas__item:hover { color: var(--inter-texto); background: var(--inter-superficie-sutil); }
.inter-migalhas__item[aria-current="page"] { color: var(--inter-texto); font-weight: var(--inter-peso-medio); }
.inter-migalhas__sep { color: var(--inter-texto-sutil); flex: none; display: inline-flex; }

/* ==========================================================================
   PAGINAÇÃO
   ========================================================================== */
.inter-paginacao { display: flex; align-items: center; gap: var(--inter-esp-2); flex-wrap: wrap; }
.inter-paginacao__item {
  display: grid; place-items: center;
  min-width: 36px; height: 36px; padding: 0 var(--inter-esp-3);
  border-radius: var(--inter-raio-m);
  font-size: var(--inter-ts-corpo-p);
  font-variant-numeric: tabular-nums;
  color: var(--inter-texto-suave);
  transition: background-color var(--inter-dur-rapida) var(--inter-curva), color var(--inter-dur-rapida) var(--inter-curva), box-shadow var(--inter-dur-rapida) var(--inter-curva);
}
.inter-paginacao__item:hover:not([aria-disabled="true"]):not([aria-current="page"]) { background: var(--inter-superficie-sutil); color: var(--inter-texto); }
.inter-paginacao__item[aria-current="page"] { background: var(--inter-acao); color: var(--inter-acao-texto); font-weight: var(--inter-peso-medio); }
.inter-paginacao__item[aria-disabled="true"] { color: var(--inter-texto-desabilitado); cursor: not-allowed; }
.inter-paginacao__reticencias { color: var(--inter-texto-sutil); padding: 0 var(--inter-esp-2); }

/* ==========================================================================
   BARRA DE PROGRESSO
   ========================================================================== */
.inter-progresso {
  height: 6px; width: 100%;
  background: var(--inter-superficie-forte);
  border-radius: var(--inter-raio-pilula);
  overflow: hidden;
}
.inter-progresso__barra {
  height: 100%;
  background: var(--inter-acao);
  border-radius: inherit;
  transition: width var(--inter-dur-media) var(--inter-curva), background-color var(--inter-dur-rapida) var(--inter-curva);
}
.inter-progresso--erro .inter-progresso__barra { background: var(--inter-erro); }
.inter-progresso--sucesso .inter-progresso__barra { background: var(--inter-sucesso); }
.inter-progresso--atencao .inter-progresso__barra { background: var(--inter-atencao); }
.inter-progresso--fino { height: 4px; }
.inter-progresso--indeterminado .inter-progresso__barra {
  width: 35% !important;
  animation: inter-indeterminado 1.4s var(--inter-curva) infinite;
}
/* A barra ocupa 35% da trilha: 286% da propria largura atravessa a trilha inteira. */
@keyframes inter-indeterminado { 0% { transform: translateX(-100%); } 100% { transform: translateX(286%); } }

/* ==========================================================================
   ESQUELETO (skeleton)
   ========================================================================== */
.inter-esqueleto {
  border-radius: var(--inter-raio-p);
  background: linear-gradient(90deg,
    var(--inter-superficie-sutil) 25%,
    var(--inter-superficie-forte) 37%,
    var(--inter-superficie-sutil) 63%);
  background-size: 400% 100%;
  animation: inter-brilho 1.5s ease-in-out infinite;
}
.inter-esqueleto--texto { height: 12px; margin: 4px 0; }
.inter-esqueleto--titulo { height: 20px; border-radius: var(--inter-raio-p); }
.inter-esqueleto--circulo { border-radius: 50%; }
.inter-esqueleto--bloco { border-radius: var(--inter-raio-g); }

/* ==========================================================================
   ESTADO VAZIO
   ========================================================================== */
.inter-vazio {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--inter-esp-4);
  padding: var(--inter-esp-10) var(--inter-esp-7);
  border: 1px dashed var(--inter-borda-forte);
  border-radius: var(--inter-raio-gg);
  background: var(--inter-superficie);
}
.inter-vazio__figura {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--inter-raio-gg);
  background: var(--inter-acao-sutil);
  color: var(--inter-acao);
  margin-bottom: var(--inter-esp-2);
}
.inter-vazio__titulo { font-family: var(--inter-fonte-titulo-p); font-size: var(--inter-ts-titulo-3); font-weight: var(--inter-peso-normal); }
.inter-vazio__texto { font-size: var(--inter-ts-corpo-p); color: var(--inter-texto-suave); max-width: 44ch; }
.inter-vazio__acoes { display: flex; gap: var(--inter-esp-3); margin-top: var(--inter-esp-3); flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   AJUSTES PARA TELAS PEQUENAS
   ========================================================================== */
@media (max-width: 600px) {
  .inter-modal-raiz { padding: 0; place-items: end center; }
  .inter-modal {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--inter-raio-ggg) var(--inter-raio-ggg) 0 0;
  }
  .inter-drawer { width: 100%; border-left: 0; }
  .inter-toasts { right: var(--inter-esp-4); left: var(--inter-esp-4); bottom: var(--inter-esp-4); width: auto; }
  .inter-modal__cabecalho, .inter-modal__corpo, .inter-modal__rodape { padding-left: var(--inter-esp-5); padding-right: var(--inter-esp-5); }
  .inter-botao--bloco-movel { display: flex; width: 100%; }
}

/* ==========================================================================
   MOVIMENTO REDUZIDO
   Os tokens de duração já zeram transições e animações de entrada (tokens.css).
   Falta aqui o que repete para sempre: pulso, brilho e barra indeterminada
   viram estados parados, ainda legíveis. O giro do botão continua — sem ele
   não sobra nenhum sinal de que algo está em curso — mas bem mais devagar.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .inter-selo__ponto--pulsando { animation: none; }
  .inter-esqueleto { animation: none; background: var(--inter-superficie-forte); }
  .inter-progresso--indeterminado .inter-progresso__barra {
    animation: none;
    width: 100% !important;
    opacity: 0.45;
  }
  .inter-botao[data-carregando="true"]::after { animation-duration: 2s; }
  @keyframes inter-deslizar { from { opacity: 0; } to { opacity: 1; } }
}