/* ==========================================================================
   Inter — Base
   Normalização, tipografia e utilitários mínimos. Nenhum componente aqui.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--inter-fundo);
  color: var(--inter-texto);
  font-family: var(--inter-fonte-texto);
  font-size: var(--inter-ts-corpo);
  line-height: var(--inter-al-corpo);
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--inter-texto-marca); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--inter-foco-cor);
  outline-offset: 2px;
  border-radius: var(--inter-raio-p);
}

::selection { background: var(--inter-laranja-200); color: var(--inter-areia-900); }

/* Barras de rolagem discretas, no tom da superfície */
.inter-rolagem { scrollbar-width: thin; scrollbar-color: var(--inter-borda-forte) transparent; }
.inter-rolagem::-webkit-scrollbar { width: 10px; height: 10px; }
.inter-rolagem::-webkit-scrollbar-track { background: transparent; }
.inter-rolagem::-webkit-scrollbar-thumb {
  background: var(--inter-borda-forte);
  border-radius: var(--inter-raio-pilula);
  border: 3px solid transparent;
  background-clip: content-box;
}
.inter-rolagem::-webkit-scrollbar-thumb:hover { background: var(--inter-texto-sutil); background-clip: content-box; }

/* --------------------------------------------------------------------------
   Tipografia — classes reutilizáveis
   -------------------------------------------------------------------------- */
.inter-display-g, .inter-display, .inter-titulo-1, .inter-titulo-2, .inter-titulo-3, .inter-titulo-4 {
  color: var(--inter-texto);
  text-wrap: balance;
}
/* A regra da marca é literal: Citrina em título e subtítulo, Inter em corpo
   e legenda. Todo degrau de título é Citrina, portanto — o que muda é o
   corte. Acima de 24px vale o desenho de display; do título 3 para baixo
   entra o corte de texto, que abre os contornos e aguenta o tamanho pequeno. */
.inter-display-g, .inter-display, .inter-titulo-1, .inter-titulo-2 { font-family: var(--inter-fonte-titulo); }
.inter-titulo-3, .inter-titulo-4 { font-family: var(--inter-fonte-titulo-p); }
.inter-display-g { font-size: var(--inter-ts-display-g); line-height: var(--inter-al-apertada); font-weight: var(--inter-peso-display); letter-spacing: var(--inter-el-display); }
.inter-display   { font-size: var(--inter-ts-display);   line-height: var(--inter-al-apertada); font-weight: var(--inter-peso-display); letter-spacing: var(--inter-el-display); }
.inter-titulo-1  { font-size: var(--inter-ts-titulo-1);  line-height: var(--inter-al-titulo);   font-weight: var(--inter-peso-normal); letter-spacing: var(--inter-el-titulo); }
.inter-titulo-2  { font-size: var(--inter-ts-titulo-2);  line-height: var(--inter-al-titulo);   font-weight: var(--inter-peso-normal); letter-spacing: var(--inter-el-titulo); }
.inter-titulo-3  { font-size: var(--inter-ts-titulo-3);  line-height: var(--inter-al-titulo);   font-weight: var(--inter-peso-leve); letter-spacing: var(--inter-el-titulo); }
.inter-titulo-4  { font-size: var(--inter-ts-titulo-4);  line-height: var(--inter-al-media);    font-weight: var(--inter-peso-normal); }

/* Subtítulo: a linha que acompanha um título. Também é Citrina, um corpo
   abaixo do título que ela serve, sempre em tom suave. */
.inter-subtitulo {
  font-family: var(--inter-fonte-titulo-p);
  font-size: var(--inter-ts-corpo-g);
  line-height: var(--inter-al-media);
  font-weight: var(--inter-peso-leve);
  color: var(--inter-texto-suave);
}

.inter-corpo-g { font-size: var(--inter-ts-corpo-g); line-height: var(--inter-al-corpo); }
.inter-corpo   { font-size: var(--inter-ts-corpo);   line-height: var(--inter-al-corpo); }
.inter-corpo-p { font-size: var(--inter-ts-corpo-p); line-height: var(--inter-al-media); }
.inter-legenda { font-size: var(--inter-ts-legenda); line-height: var(--inter-al-media); color: var(--inter-texto-suave); }
/* Rótulo em sentence case. A marca não escreve nada em caixa alta:
   a hierarquia vem do tamanho e da cor, não do grito. */
.inter-rotulo {
  font-size: var(--inter-ts-rotulo);
  line-height: 1.2;
  font-weight: var(--inter-peso-medio);
  letter-spacing: var(--inter-el-rotulo);
  color: var(--inter-texto-sutil);
}
/* O rótulo do guideline: laranja sobre creme */
.inter-rotulo--marca { color: var(--inter-texto-marca); }

/* Ênfase. O guideline é explícito: destaque sempre em laranja, nunca em
   negrito nem sublinhado. Por isso ela não muda o peso nem o estilo. */
.inter-enfase {
  color: var(--inter-texto-marca);
  font-style: normal;
  font-weight: inherit;
}
.inter-codigo {
  font-family: var(--inter-fonte-codigo);
  font-size: var(--inter-ts-codigo);
  font-variant-ligatures: none;
}
.inter-numero { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.inter-texto-suave { color: var(--inter-texto-suave); }
.inter-texto-sutil { color: var(--inter-texto-sutil); }
.inter-texto-marca { color: var(--inter-texto-marca); }

/* Texto longo nunca quebra o layout */
.inter-truncar {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.inter-truncar-2, .inter-truncar-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.inter-truncar-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.inter-truncar-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.inter-quebrar { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

/* --------------------------------------------------------------------------
   Utilitários de layout usados pelos componentes
   -------------------------------------------------------------------------- */
.inter-pilha { display: flex; flex-direction: column; }
.inter-linha { display: flex; align-items: center; }
.inter-linha--topo { align-items: flex-start; }
.inter-entre { justify-content: space-between; }
.inter-cresce { flex: 1 1 auto; min-width: 0; }
.inter-g2 { gap: var(--inter-esp-2); } .inter-g3 { gap: var(--inter-esp-3); }
.inter-g4 { gap: var(--inter-esp-4); } .inter-g5 { gap: var(--inter-esp-5); }
.inter-g6 { gap: var(--inter-esp-6); } .inter-g7 { gap: var(--inter-esp-7); }
.inter-envolver { flex-wrap: wrap; }

.inter-so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Ícones
   -------------------------------------------------------------------------- */
.inter-icone {
  width: var(--inter-icone-m);
  height: var(--inter-icone-m);
  flex: none;
  /* Os pictogramas oficiais são caminhos preenchidos: a cor vem do texto.
     Os poucos desenhados à mão trazem o próprio traço embutido no corpo. */
  fill: currentColor;
}
.inter-icone--p  { width: var(--inter-icone-p);  height: var(--inter-icone-p); }
.inter-icone--g  { width: var(--inter-icone-g);  height: var(--inter-icone-g); }
.inter-icone--gg { width: var(--inter-icone-gg); height: var(--inter-icone-gg); }
.inter-icone--cheio { fill: currentColor; }
/* A marca tem proporção própria: a altura manda, a largura acompanha. */
.inter-icone--marca { width: auto; }
/* O logotipo por extenso, para cabeçalhos e assinaturas */
.inter-logo { height: 22px; width: auto; }
.inter-logo--p { height: 16px; }
.inter-logo--g { height: 32px; }

/* Superfície padrão de cartão — base de vários componentes */
.inter-cartao {
  background: var(--inter-superficie);
  border: 1px solid var(--inter-borda);
  border-radius: var(--inter-raio-gg);
  box-shadow: var(--inter-sombra-1);
}

/* Divisor fio de cabelo */
.inter-divisor { height: 1px; background: var(--inter-borda); border: 0; margin: 0; }
.inter-divisor--vertical { width: 1px; height: auto; align-self: stretch; }

@keyframes inter-girar { to { transform: rotate(360deg); } }
@keyframes inter-pulsar { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes inter-brilho { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes inter-surgir { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes inter-subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes inter-sumir { to { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* Com movimento reduzido, entradas e saidas viram fusoes puras de opacidade:
   a informacao de que algo apareceu permanece, o deslocamento nao. */
@media (prefers-reduced-motion: reduce) {
  @keyframes inter-surgir { from { opacity: 0; } to { opacity: 1; } }
  @keyframes inter-subir { from { opacity: 0; } to { opacity: 1; } }
  @keyframes inter-sumir { to { opacity: 0; } }
}