/* ==========================================================================
   Telas de início, comparador, match e vagas — tema claro "Rojo y Gualda".

   Estas telas nasceram claras sobre `portal.css`, vestiram o escuro "Aurora"
   e agora voltam ao claro com a família cromática da bandeira: vermelho
   #A31621 (marca, ação e barras), gualda #F1BF00 (só relleno decorativo) e
   âmbar #B07A00 (texto de aviso e barra secundária). Layout, grid, font-size
   e breakpoints não mudam: muda cor, superfície, borda e sombra.

   Como o arquivo é carregado DEPOIS de `portal.css` e de `raio_x.css`:
   - `raio_x.css` traz os tokens (--papel/--areia, --rojo/--coral, --gualda,
     --ambar, --verde, --azul, --roxo, --tinta*, --superficie*, --borda*,
     --nivel-*, --sombra) e já pinta cabeçalho, rodapé, tabelas, `.cartao`
     na base e `.detalhes`;
   - este arquivo recalibra os tokens que ainda apontavam para o tema antigo
     e cobre os componentes próprios destas telas.

   Seguem escuras de propósito, porque é o escuro que sustenta o contraste:
   o scrim do hero COM foto, o crédito dessa foto e os tooltips de gráfico
   (JS, fora desta folha).

   Regra herdada: nenhum valor é recalculado aqui. Lacuna continua lacuna,
   ausência de dado nunca vira zero e o selo de nível territorial não muda.
   ========================================================================== */

/* O fundo do documento é claro antes do primeiro paint do body; o
   `color-scheme` claro deixa selects, checkboxes, foco nativo e barra de
   rolagem coerentes com o papel. */
html:has(body.rx) {
  background: var(--areia);
  color-scheme: light;
}

body.rx {
  color-scheme: light;

  /* Tokens do portal que apontavam para o tema antigo. */
  --fundo: var(--areia);
  --marca: var(--rojo);
  --marca-escura: var(--rojo-forte);
  --marca-clara: var(--rojo-suave);
  --borda-suave: var(--borda);
  --foco: var(--rojo);
  /* Erro é vinho, não o vermelho da marca: os dois não podem se confundir. */
  --erro: #8c1d18;
  --erro-fundo: #fbeaec;
  --erro-borda: rgba(140, 29, 24, 0.38);
  --alerta: var(--ambar-texto);
  --alerta-fundo: var(--gualda-suave);
  --alerta-borda: rgba(176, 122, 0, 0.45);
  --ok: var(--verde);
  --ok-fundo: rgba(23, 112, 63, 0.1);
  --ok-borda: rgba(23, 112, 63, 0.38);
  --dado-1: var(--azul);
  --dado-2: var(--ambar);
  --dado-3: var(--roxo);
  --dado-4: var(--nivel-municipio);
  --dado-5: var(--tinta-fraca);
  --referencia: var(--tinta-fraca);
  /* Grade de gráfico: o cinza slate funciona nos dois temas. */
  --grade: rgba(100, 116, 139, 0.35);

  /* Superfícies opacas: usadas onde o texto passa por cima de conteúdo que
     rola (cabeçalho sticky da tabela, lista de sugestões da busca). */
  --aurora-opaca: var(--superficie-1);
  --aurora-opaca-alta: var(--superficie-2);
  --tinta-sobre-acento: #ffffff;
}

body.rx ::selection {
  background: rgba(163, 22, 33, 0.22);
  color: var(--tinta);
}

/* ---------- Tipografia display ---------- */
body.rx .inicio-heroi h1,
body.rx .cmp-cabecalho h1,
body.rx .match-heroi h1 {
  font-family: "Instrument Serif", "Fraunces", ui-serif, Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
}

body.rx .inicio-heroi__sobre,
body.rx .match-heroi__sobre,
body.rx .heroi__sobre,
body.rx .match-sobre {
  color: var(--ambar-texto);
  letter-spacing: 0.14em;
}

/* ---------- Skip link ---------- */
body.rx .pular {
  background: var(--aurora-opaca);
  border: 1px solid var(--borda-forte);
  color: var(--tinta);
}

body.rx .pular:focus {
  color: var(--tinta);
}

/* ---------- Botões ---------- */
body.rx .botao {
  border-radius: 999px;
}

/* Texto dentro do botão: cor sólida, nunca gradiente (branco sobre gualda
   não passa contraste). */
body.rx .botao--marca,
body.rx .botao--primario {
  background: var(--rojo);
  border-color: transparent;
  color: var(--tinta-sobre-acento);
}

body.rx .botao--marca:hover,
body.rx .botao--primario:hover {
  background: var(--rojo-forte);
  border-color: transparent;
  color: var(--tinta-sobre-acento);
}

body.rx .botao--contorno,
body.rx .botao--linha {
  background: var(--superficie-1);
  border-color: var(--borda-forte);
  color: var(--tinta);
}

body.rx .botao--contorno:hover,
body.rx .botao--linha:hover {
  background: var(--rojo-suave);
  border-color: rgba(163, 22, 33, 0.45);
  color: var(--tinta);
}

body.rx .botao--discreto {
  background: transparent;
  border-color: var(--borda);
  color: var(--tinta-media);
}

body.rx .botao--discreto:hover {
  background: var(--superficie-2);
  border-color: var(--borda-forte);
  color: var(--tinta);
}

body.rx .botao:disabled,
body.rx .botao[aria-disabled="true"] {
  background: var(--superficie-2);
  border-color: var(--borda);
  color: var(--tinta-fraca);
}

/* ---------- Avisos ---------- */
body.rx .aviso {
  border-radius: 0.8rem;
}

body.rx .aviso--erro {
  color: var(--erro);
}

body.rx .aviso--atencao {
  color: var(--alerta);
}

body.rx .aviso--info {
  background: rgba(29, 95, 168, 0.1);
  border-color: rgba(29, 95, 168, 0.38);
  color: var(--tinta);
}

/* Marcas de qualidade (ADR-05): instabilidade e confiança declarada. O
   número continua visível; o aviso é que muda de cor, nunca o valor.
   Borda tracejada: o aviso pertence à família de estado/confiança, não à
   dos selos de nível territorial. */
body.rx .aviso-dado--instavel {
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
  border-style: dashed;
  color: var(--erro);
}

body.rx .aviso-dado--confianca {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  border-style: dashed;
  color: var(--alerta);
}

/* Frescor do snapshot de vagas (ADR-19). É informativo: a oferta antiga
   continua aberta, então o valor não muda. Fica em âmbar dessaturado e com
   menos peso que o aviso de instabilidade (vinho), para não competir com
   ele. Sem animação; o texto é lido normalmente e o `title` explica. */
body.rx .aviso-dado--frescor {
  display: block;
  margin-top: 0.35rem;
  border: 1px solid rgba(176, 122, 0, 0.3);
  border-radius: 0.35rem;
  padding: 0.28rem 0.42rem;
  background: var(--gualda-suave);
  color: var(--ambar-texto);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Dentro dos cartões de KPI o aviso é ainda mais discreto: texto leve, sem
   caixa, para não roubar espaço nem hierarquia do número. */
body.rx .kpi .aviso-dado--frescor,
body.rx .rx-kpi .aviso-dado--frescor {
  margin-top: 0.2rem;
  border: 0;
  padding: 0;
  background: none;
  color: var(--ambar-texto);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.3;
}

/* ---------- Estado vazio (lacuna esperada) ---------- */
body.rx .vazio {
  border-color: var(--borda-forte);
  background: var(--superficie-2);
  color: var(--tinta-media);
}

body.rx .vazio__titulo {
  color: var(--tinta);
}

body.rx .vazio__texto {
  color: var(--tinta-fraca);
}

/* ---------- Esqueleto de carregamento ---------- */
body.rx .esqueleto {
  background: linear-gradient(
    90deg,
    var(--superficie-2) 25%,
    var(--superficie-3) 50%,
    var(--superficie-2) 75%
  );
  background-size: 200% 100%;
  border-color: var(--borda);
}

/* ---------- Formulários ---------- */
body.rx .campo label {
  color: var(--tinta);
  font-size: 0.85rem;
  font-weight: 700;
}

body.rx .campo__ajuda {
  color: var(--tinta-fraca);
}

body.rx input[type="search"],
body.rx input[type="text"],
body.rx input[type="number"],
body.rx input[type="email"],
body.rx select,
body.rx textarea {
  background: var(--superficie-1);
  border-color: var(--borda-forte);
  color: var(--tinta);
}

body.rx input::placeholder,
body.rx textarea::placeholder {
  color: var(--tinta-fraca);
  opacity: 1;
}

body.rx input[type="search"]:hover,
body.rx input[type="text"]:hover,
body.rx input[type="number"]:hover,
body.rx select:hover,
body.rx textarea:hover {
  border-color: var(--tinta-fraca);
}

body.rx input[type="search"]:focus-visible,
body.rx input[type="text"]:focus-visible,
body.rx input[type="number"]:focus-visible,
body.rx select:focus-visible,
body.rx textarea:focus-visible {
  border-color: var(--rojo);
  outline: 2px solid var(--rojo);
  outline-offset: 1px;
}

body.rx select option {
  background: var(--aurora-opaca);
  color: var(--tinta);
}

body.rx input[type="checkbox"],
body.rx input[type="radio"] {
  accent-color: var(--rojo);
}

body.rx .match-form input[aria-invalid="true"] {
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
}

body.rx .status {
  color: var(--tinta-media);
}

body.rx .feedback {
  color: var(--ok);
}

/* ---------- Sugestões da busca ---------- */
body.rx .resultados {
  display: block;
  background: var(--aurora-opaca);
  border: 1px solid var(--borda);
  border-radius: 0.7rem;
}

body.rx .resultados li + li {
  border-top-color: var(--borda);
}

body.rx .resultado-cidade {
  color: var(--tinta);
}

body.rx .resultado-cidade:hover {
  background: var(--superficie-2);
}

body.rx .resultado-cidade strong {
  color: var(--tinta);
}

body.rx .resultado-cidade span {
  color: var(--tinta-fraca);
}

/* ---------- Chips de cidade ---------- */
body.rx .chip {
  min-height: 44px;
  background: var(--rojo-suave);
  border-color: rgba(163, 22, 33, 0.38);
  color: var(--tinta);
}

body.rx .chip__nivel {
  color: var(--tinta-fraca);
}

body.rx .chip__remover {
  width: 44px;
  height: 44px;
  color: var(--tinta);
}

body.rx .chip__remover:hover {
  background: var(--rojo-suave);
}

/* ---------- Cartões, tabelas e selos ---------- */
body.rx .cartao {
  background: var(--superficie-1);
  border-color: var(--borda);
  box-shadow: var(--sombra);
}

body.rx .cartao__topo {
  border-bottom-color: var(--borda);
}

body.rx .celula-valor {
  color: var(--tinta);
}

body.rx .celula-valor--nulo {
  color: var(--tinta-fraca);
}

body.rx .celula-meta,
body.rx .celula__fonte {
  color: var(--tinta-fraca);
}

body.rx .nao-marca {
  background: var(--tinta-fraca);
  color: var(--superficie-1);
}

/* Confiança do dado (medido/parcial) não é nível territorial: mesma forma
   dos selos de estado — retângulo tracejado e preenchimento suave. */
body.rx .selo--medido {
  background: var(--ok-fundo);
  border-color: var(--ok-borda);
  color: var(--ok);
  border-style: dashed;
  border-radius: 0.35rem;
}

body.rx .selo--parcial {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  color: var(--alerta);
  border-style: dashed;
  border-radius: 0.35rem;
}

body.rx .selo--medido::before,
body.rx .selo--parcial::before {
  content: none;
}

/* Selo neutro de lacuna: cinza, nunca cor de desempenho ruim. */
body.rx .selo--sem {
  background: var(--sem-suave);
  border-color: var(--borda-forte);
  color: var(--nivel-sem);
}

body.rx .selo-nota {
  color: var(--tinta-fraca);
}

/* ==========================================================================
   Início
   ========================================================================== */
body.rx .inicio-heroi {
  border: 1px solid var(--borda);
  border-left: 4px solid var(--rojo);
  border-radius: 26px;
  background:
    radial-gradient(560px 280px at 6% -12%, rgba(163, 22, 33, 0.1), transparent 68%),
    radial-gradient(520px 260px at 96% 8%, rgba(241, 191, 0, 0.16), transparent 70%),
    var(--superficie-1);
  box-shadow: var(--sombra);
}

body.rx .inicio-heroi h1 {
  font-size: clamp(2.05rem, 5.6vw, 3.15rem);
  max-width: 22ch;
}

body.rx .inicio-heroi__sub {
  color: var(--tinta-media);
}

body.rx .chips-confianca li {
  background: var(--superficie-1);
  border-color: var(--borda);
  color: var(--tinta-media);
}

body.rx .chips-confianca svg {
  color: var(--rojo);
}

body.rx .capitais__contagem {
  color: var(--tinta-fraca);
}

body.rx .cidade-link {
  background: var(--superficie-1);
  border-color: var(--borda);
  color: var(--tinta);
  box-shadow: none;
  transition: transform 0.18s ease, border-color 0.18s ease,
    background 0.18s ease;
}

body.rx .cidade-link:hover {
  border-color: var(--rojo);
  color: var(--tinta);
  transform: translateY(-2px);
}

body.rx .cidade-link strong {
  color: var(--tinta);
}

body.rx .cidade-link span {
  color: var(--tinta-fraca);
}

body.rx .passo {
  border-top-color: rgba(163, 22, 33, 0.45);
}

body.rx .passo__numero {
  background: var(--rojo-suave);
  border: 1px solid rgba(163, 22, 33, 0.38);
  color: var(--rojo-forte);
}

body.rx .passo h3 {
  color: var(--tinta);
}

body.rx .passo p {
  color: var(--tinta-fraca);
}

/* ==========================================================================
   Comparador (prefixo real das classes: `cmp-`)
   ========================================================================== */
/* Campos e chips compactos em todas as telas do portal: a altura de 44 px
   herdada do tema claro deixa os controles altos demais aqui. */
body.rx input[type="search"],
body.rx input[type="text"],
body.rx input[type="number"],
body.rx select {
  min-height: 36px; padding: 0.4rem 0.6rem;
}
body.rx .chip {
  min-height: 32px; padding: 0.15rem 0.3rem 0.15rem 0.65rem;
}
body.rx .chip__remover { width: 26px; height: 26px; }

/* Gráfico de pontos: o viewBox de 320 px era ampliado para 640 px no
   desktop, dobrando o tamanho das fontes. Limitar a largura mantém o texto
   em ~12 px e deixa os valores inteiros dentro do eixo. */
body.rx .cmp-svg { max-width: 22rem; }
body.rx .cmp-svg .dp-rotulo,
body.rx .cmp-svg .dp-eixo,
body.rx .cmp-svg .dp-valor { font-size: 11px; }

body.rx .cmp-cabecalho__sub {
  color: var(--tinta-media);
}

body.rx .cmp-controle {
  position: relative; top: auto; z-index: 30;
  gap: 0.55rem; padding: 0.65rem 3.2rem 0.65rem 0.85rem;
  background: var(--aurora-opaca);
  border-color: var(--borda);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: none;
}
body.rx .cmp-controle legend {
  margin-bottom: 0.25rem; font-size: 0.7rem;
}
body.rx .cmp-cidades {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.45rem;
}
body.rx .cmp-cidades .chips {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin: 0; padding: 0;
}
body.rx .cmp-cidades .chip {
  min-height: 32px; padding: 0.15rem 0.3rem 0.15rem 0.65rem;
  font-size: 0.78rem;
}
body.rx .cmp-cidades .chip__nivel { display: none; }
body.rx .cmp-cidades .chip__remover {
  width: 26px; height: 26px; font-size: 0.95rem;
}
body.rx .cmp-cidades__busca {
  flex: 1 1 240px; min-width: 180px;
}
body.rx .cmp-cidades__busca input {
  min-height: 34px; padding: 0.35rem 0.6rem;
}
body.rx .cmp-controle__cidades {
  position: relative; gap: 0.35rem;
}
body.rx .cmp-controle__cidades #resultados-cidade {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 40; max-height: 15rem; margin-top: 0.25rem;
}
body.rx .cmp-dimensoes {
  display: grid; gap: 0.25rem;
  min-width: 0; margin: 0; padding: 0; border: 0;
}
body.rx .cmp-dimensoes legend {
  padding: 0; margin-bottom: 0.25rem;
  color: var(--tinta); font-size: 0.7rem; font-weight: 700;
}
body.rx .cmp-dimensoes__carrossel {
  display: flex; align-items: center; gap: 0.35rem;
  min-width: 0;
}
body.rx .cmp-dimensoes__grupo {
  display: flex; flex-wrap: nowrap; gap: 0.4rem;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 2px; scrollbar-width: none;
  scroll-behavior: smooth;
}
body.rx .cmp-dimensoes__grupo::-webkit-scrollbar { display: none; }
body.rx .cmp-dimensao {
  flex: 0 0 auto; min-height: 32px; padding: 0.25rem 0.65rem;
  border: 1px solid var(--borda-forte); border-radius: 999px;
  background: var(--superficie-1); color: var(--tinta-media);
  font: inherit; font-size: 0.74rem; white-space: nowrap; cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
body.rx .cmp-seta {
  flex: 0 0 30px; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--borda-forte); border-radius: 50%;
  background: var(--superficie-1); color: var(--tinta-media);
  cursor: pointer;
}
body.rx .cmp-seta:hover,
body.rx .cmp-seta:focus-visible {
  border-color: var(--rojo); color: var(--tinta);
}
body.rx .cmp-seta:disabled {
  background: var(--superficie-2);
  border-color: var(--borda);
  color: var(--tinta-fraca);
  cursor: default;
}
body.rx .cmp-seta svg {
  width: 16px; height: 16px; fill: none;
  stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
body.rx .cmp-dimensao:hover,
body.rx .cmp-dimensao:focus-visible {
  border-color: var(--rojo); color: var(--tinta);
}
body.rx .cmp-dimensao[aria-pressed="true"],
body.rx .cmp-dimensao--ativa {
  background: var(--rojo-suave);
  border-color: rgba(163, 22, 33, 0.55);
  color: var(--rojo-forte);
}
body.rx .cmp-controle__copiar {
  position: absolute; top: 0.55rem; right: 0.65rem;
  margin: 0; width: auto;
}
body.rx .cmp-copiar {
  display: grid; place-items: center;
  width: 32px; height: 32px; min-height: 32px; padding: 0;
  border: 1px solid var(--borda-forte); border-radius: 50%;
  background: var(--superficie-1); color: var(--tinta-media);
  cursor: pointer;
}
body.rx .cmp-copiar:hover,
body.rx .cmp-copiar:focus-visible {
  border-color: var(--rojo); color: var(--tinta);
}
body.rx .cmp-copiar svg {
  width: 15px; height: 15px; fill: none;
  stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
body.rx .cmp-controle__copiar .feedback {
  position: absolute; top: calc(100% + 0.3rem); right: 0;
  margin: 0; white-space: nowrap;
  font-size: 0.72rem;
}

@media (min-width: 1024px) and (min-height: 720px) {
  body.rx .cmp-controle {
    position: sticky; top: 64px;
    box-shadow: 0 18px 40px -28px rgba(58, 40, 28, 0.3);
  }
}

body.rx .cmp-controle__cidades legend {
  color: var(--tinta);
}

body.rx .cmp-check {
  background: var(--superficie-1);
  border-color: var(--borda);
  color: var(--tinta-media);
}

/* Base escolhida dentro da tabela, não em um select separado. */
body.rx .cmp-base-linha th {
  background: var(--aurora-opaca-alta);
  color: var(--tinta-fraca);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
}
body.rx .cmp-base-linha td { background: var(--aurora-opaca); }
body.rx .cmp-base-radio {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 34px; color: var(--tinta-media); font-size: 0.78rem;
  cursor: pointer;
}
body.rx .cmp-base-radio input {
  width: 16px; height: 16px; accent-color: var(--rojo);
}

body.rx .cmp-check:hover {
  color: var(--tinta);
}

body.rx .cmp-chip {
  background: var(--superficie-2);
  border-color: var(--borda);
  color: var(--tinta);
}

body.rx .cmp-chip__vs {
  color: var(--tinta-fraca);
}

body.rx .cmp-chip--vazio {
  border-color: var(--tinta-fraca);
  color: var(--tinta-media);
}

body.rx .cmp-meta {
  color: var(--tinta-fraca);
}

body.rx .cmp-meta .cmp-chip {
  background: var(--superficie-2);
  border-color: var(--borda);
  color: var(--tinta-media);
}

body.rx .cmp-nota {
  border-left-color: var(--rojo);
  background: var(--rojo-suave);
  color: var(--tinta-media);
}

body.rx .cmp-conclusao {
  color: var(--tinta);
}

body.rx .cmp-dados summary,
body.rx .cmp-metodo summary {
  color: var(--ambar-texto);
}

body.rx .cmp-dados summary:hover,
body.rx .cmp-metodo summary:hover {
  color: var(--rojo-forte);
}

body.rx .cmp-metodo p {
  color: var(--tinta-fraca);
}

body.rx .cmp-rodape {
  border-color: var(--borda-forte);
  background: var(--superficie-2);
  color: var(--tinta-media);
}

body.rx .cmp-rodape__titulo {
  color: var(--tinta);
}

body.rx .cmp-rodape__nota {
  color: var(--tinta-fraca);
}

body.rx .cmp-faixa__eixo,
body.rx .cmp-faixa__valores {
  color: var(--tinta-fraca);
}

body.rx .cmp-faixa__linha + .cmp-faixa__linha {
  border-top-color: var(--borda-suave);
}

body.rx .cmp-painel {
  background: var(--superficie-1);
  border-color: var(--borda);
}

body.rx .cmp-painel__nota {
  color: var(--tinta-fraca);
}

body.rx .cmp-grafico {
  background: var(--superficie-1);
  border-color: var(--borda);
}

body.rx .grafico__subtitulo {
  color: var(--tinta-fraca);
}

/* Diferença neutra: azul = acima da base, âmbar = abaixo. A cor nunca diz
   "melhor" ou "pior"; seta, sinal e "vs Base" continuam no texto. */
body.rx .diferenca--acima {
  background: rgba(29, 95, 168, 0.1);
  border-color: rgba(29, 95, 168, 0.38);
  color: var(--azul);
}

body.rx .diferenca--abaixo {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  color: var(--alerta);
}

body.rx .diferenca--base {
  background: var(--superficie-2);
  border-color: var(--borda);
  color: var(--tinta-media);
}

body.rx .diferenca--nao {
  border-color: var(--tinta-fraca);
  color: var(--tinta-media);
}

/* Cabeçalho e coluna de rótulo ficam opacos: são sticky sobre a tabela.
   Fundo translúcido aqui deixaria o texto de baixo aparecer. */
body.rx .tabela--comparador thead th,
body.rx .tabela--comparador tbody th {
  background: var(--aurora-opaca);
  box-shadow: 1px 0 0 var(--borda);
}

body.rx .tabela--comparador thead th:first-child {
  background: var(--aurora-opaca-alta);
}

body.rx .tabela--comparador thead th:not(:first-child) {
  background: var(--aurora-opaca);
}

body.rx .tabela caption {
  color: var(--tinta-fraca);
}

/* ==========================================================================
   Match (prefixo `match-` e etapas do formulário)
   ========================================================================== */
body.rx .match-heroi {
  border-bottom-color: var(--borda);
}

/* No trio Renda/Moeda/Orçamento, a ajuda ocupa a mesma altura nas três
   colunas; assim o select e os inputs começam na mesma linha. */
@media (min-width: 760px) {
  body.rx .match-grade--tres .campo__ajuda { min-height: 4.4em; }
}

/* Avisos/estimativas: link discreto + modal em texto normal. */
body.rx .match-avisos {
  margin: 0.35rem 0 0.85rem;
}
body.rx .match-avisos__link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 44px; padding: 0.25rem 0;
  border: 0; background: transparent;
  color: var(--tinta-fraca); font: inherit; font-size: 0.78rem;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
body.rx .match-avisos__link:hover,
body.rx .match-avisos__link:focus-visible {
  color: var(--rojo-forte);
}
body.rx .match-modal__secao h3 {
  margin: 0 0 0.55rem;
  color: var(--tinta); font-size: 1rem; font-weight: 700;
}
body.rx .match-modal__secao p,
body.rx .match-modal__secao li {
  color: var(--tinta-media); font-size: 0.88rem; line-height: 1.6;
}
body.rx .match-modal__secao ul {
  margin: 0; padding-left: 1.1rem;
  display: grid; gap: 0.35rem;
}
body.rx .match-modal__secao + .match-modal__secao {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--borda);
}

body.rx .match-heroi__sub {
  color: var(--tinta-media);
}

body.rx .match-progresso {
  background: var(--superficie-1);
  border-color: var(--borda);
}

body.rx .progresso__item {
  color: var(--tinta-media);
}

body.rx .progresso__item[aria-current="step"] {
  background: var(--rojo-suave);
  box-shadow: inset 0 0 0 1px rgba(163, 22, 33, 0.45);
  color: var(--tinta);
}

body.rx .progresso__contador {
  color: var(--tinta-fraca);
}

body.rx .resumo-cobertura {
  color: var(--tinta-fraca);
}

body.rx .match-etapa {
  background: var(--superficie-1);
  border-color: var(--borda);
  border-radius: 24px;
  box-shadow: 0 26px 60px -46px rgba(58, 40, 28, 0.35);
}

body.rx .match-etapa__intro {
  color: var(--tinta-fraca);
}

body.rx .match-bloco {
  border-top-color: var(--borda);
}

body.rx .match-bloco h3,
body.rx .match-grupo legend {
  color: var(--tinta);
}

body.rx .match-opcao,
body.rx .match-dim-check {
  background: var(--superficie-1);
  border-color: var(--borda);
  color: var(--tinta);
}

body.rx .match-opcao:hover,
body.rx .match-dim-check:hover {
  background: var(--superficie-2);
  border-color: rgba(163, 22, 33, 0.45);
}

body.rx .match-opcao:has(input:checked),
body.rx .match-dim-check:has(input:checked) {
  background: var(--rojo-suave);
  border-color: rgba(163, 22, 33, 0.55);
}

body.rx .match-dim-check input:disabled + span {
  color: var(--tinta-fraca);
}

body.rx .match-contador,
body.rx .match-vazio-ordem {
  color: var(--tinta-fraca);
}

body.rx .match-ordem-area {
  border-top-color: var(--borda);
}

body.rx .match-ordem-area h3 {
  color: var(--tinta);
}

body.rx .progresso-barra {
  background: var(--superficie-3);
  border-color: var(--borda);
}

/* Barra decorativa sem texto: o gradiente da marca pode ficar. */
body.rx .progresso-barra__valor {
  background: linear-gradient(90deg, var(--rojo), var(--ambar));
}

body.rx .match-prioridade {
  background: var(--superficie-1);
  border-color: var(--borda);
}

body.rx .match-posicao {
  background: var(--rojo);
  color: var(--tinta-sobre-acento);
}

body.rx .match-mover,
body.rx .match-remover {
  background: var(--superficie-1);
  border-color: var(--borda);
  color: var(--tinta);
}

body.rx .match-remover {
  border-color: rgba(140, 29, 24, 0.45);
  color: var(--erro);
}

body.rx .match-mover:hover,
body.rx .match-remover:hover {
  background: var(--rojo-suave);
  border-color: rgba(163, 22, 33, 0.55);
  color: var(--tinta);
}

body.rx .match-mover:disabled {
  background: var(--superficie-2);
  border-color: var(--borda);
  color: var(--tinta-fraca);
}

body.rx .match-erro {
  color: var(--erro);
}

body.rx .match-porque summary {
  color: var(--ambar-texto);
}

body.rx .match-porque summary:hover {
  color: var(--rojo-forte);
}

body.rx .match-porque p {
  color: var(--tinta-fraca);
}

body.rx .match-enviar {
  background: var(--superficie-1);
  border-color: var(--borda);
  border-radius: 24px;
  box-shadow: var(--sombra);
}

body.rx .match-enviar .campo__ajuda,
body.rx .match-enviar__nota {
  color: var(--tinta-fraca);
}

body.rx .match-dica {
  color: var(--tinta-fraca);
}

/* ---------- Resultado ---------- */
body.rx .match-desatualizado {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  color: var(--alerta);
}

body.rx .match-ranking__pos {
  background: var(--rojo);
  color: var(--tinta-sobre-acento);
}

body.rx .match-ranking__trilho {
  background: var(--superficie-3);
  border-color: var(--borda);
}

body.rx .match-ranking__barra {
  background: var(--azul);
}

body.rx .match-ranking__score,
body.rx .match-linha__score {
  color: var(--tinta);
}

body.rx .match-ranking__de {
  color: var(--tinta-fraca);
}

body.rx .match-destaque {
  background: var(--superficie-1);
  border-color: var(--borda);
  border-left: 4px solid var(--rojo);
  border-radius: 24px;
}

body.rx .match-posicao-cidade {
  color: var(--ambar-texto);
}

body.rx .match-local {
  color: var(--tinta-fraca);
}

body.rx .match-score__numero {
  color: var(--tinta);
}

body.rx .match-score__numero span {
  color: var(--tinta-fraca);
}

/* Sem nota utilizável o número fica em tom fraco: a lacuna não é zero. */
body.rx .match-score__numero--nulo,
body.rx .match-score__numero--nulo strong {
  color: var(--tinta-fraca);
}

body.rx .match-score__nota {
  color: var(--tinta-fraca);
}

body.rx .match-score__legenda {
  color: var(--ambar-texto);
}

body.rx .match-confianca {
  border-color: var(--borda);
  color: var(--tinta-media);
}

body.rx .match-nota-estimativa {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  color: var(--tinta-media);
}

body.rx .match-nota-estimativa strong {
  color: var(--alerta);
}

body.rx .match-comunidade-origem {
  background: rgba(29, 95, 168, 0.1);
  border-left-color: var(--azul);
  color: var(--tinta);
}

body.rx .match-comunidade-origem strong {
  color: var(--tinta);
}

body.rx .match-grupo-tradeoff {
  border-top-color: var(--borda);
}

body.rx .match-grupo-tradeoff h4 {
  color: var(--tinta);
}

body.rx .match-tradeoff {
  background: var(--superficie-2);
  border-color: var(--borda-suave);
}

body.rx .match-tradeoff__meta,
body.rx .match-vazio-grupo {
  color: var(--tinta-fraca);
}

body.rx .match-estimativa {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  color: var(--alerta);
}

body.rx .match-detalhe {
  border-top-color: var(--borda);
}

body.rx .match-dim-linha {
  background: var(--superficie-2);
  border-color: var(--borda-suave);
}

body.rx .match-dim-linha__peso,
body.rx .match-barra__valor,
body.rx .match-dim-linha__origem {
  color: var(--tinta-fraca);
}

body.rx .match-barra {
  background: var(--superficie-3);
  border-color: var(--borda);
}

body.rx .match-barra > span {
  background: var(--rojo);
}

body.rx .match-barra--dim > span {
  background: var(--azul);
}

body.rx .match-barra--peso > span {
  background: var(--ambar);
}

/* Barra decorativa (sem texto): o gradiente da marca pode ficar. */
body.rx .match-barra--score > span {
  background: linear-gradient(90deg, var(--rojo), var(--ambar));
}

body.rx .match-sem-dado {
  border-left-color: var(--tinta-fraca);
  color: var(--tinta-media);
}

body.rx .match-linha {
  background: var(--superficie-1);
  border-color: var(--borda);
}

body.rx .match-linha__pos {
  background: var(--superficie-3);
  color: var(--tinta);
}

body.rx .match-linha__resumo,
body.rx .match-linha__nota,
body.rx .match-linha__sem {
  color: var(--tinta-fraca);
}

body.rx .match-linha__resumo strong {
  color: var(--tinta);
}

body.rx .match-linha__detalhe {
  border-top-color: var(--borda);
}

body.rx .match-linha__detalhe > summary {
  color: var(--ambar-texto);
}

body.rx .match-resultado__acoes {
  border-top-color: var(--borda);
}

body.rx .match-vetor__peso {
  color: var(--ambar-texto);
}

body.rx .match-vetor__meta,
body.rx .match-rodape-nota {
  color: var(--tinta-fraca);
}

body.rx .match-glossario .cartao__corpo {
  color: var(--tinta-media);
}

/* ==========================================================================
   Telas estreitas (360 px) e movimento reduzido
   ========================================================================== */
@media (max-width: 400px) {
  body.rx .inicio-heroi {
    padding: 1rem;
  }

  body.rx .inicio-heroi h1 {
    font-size: clamp(1.85rem, 8.4vw, 2.3rem);
    max-width: none;
  }

  body.rx .chip {
    padding-left: 0.6rem;
  }

  body.rx .cmp-controle,
  body.rx .match-etapa,
  body.rx .match-progresso,
  body.rx .match-enviar {
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.rx .cidade-link {
    transition: none;
  }

  body.rx .cidade-link:hover {
    transform: none;
  }

  body.rx .esqueleto {
    animation: none;
  }
}

/* ==========================================================================
   Vagas concretas (Camada B do SEPE)
   --------------------------------------------------------------------------
   Tela clara, como o resto do portal: linhas de vaga sobre papel, selo de
   nível, tags e paginação em creme. O selo de cada oferta continua
   declarando o nível real — esta folha não promove nem rebaixa dado.
   ========================================================================== */

/* ---------- Cabeçalho da tela ---------- */
body.rx .vagas-cabecalho {
  padding-left: 1.05rem;
  border-left: 4px solid var(--rojo);
}

body.rx .vagas-cabecalho h1 {
  font-family: "Instrument Serif", "Fraunces", ui-serif, Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

body.rx .vagas-cabecalho__sub {
  color: var(--tinta-media);
}

/* ---------- Barra do território consultado ---------- */
body.rx .vagas-territorio {
  background: var(--superficie-1);
  border-color: var(--borda);
  border-left-color: var(--azul);
  border-radius: 18px;
  box-shadow: var(--sombra);
}

body.rx .vagas-territorio__sobre {
  color: var(--ambar-texto);
}

body.rx .vagas-territorio__nome {
  color: var(--tinta);
}

body.rx .vagas-territorio__meta {
  color: var(--tinta-fraca);
}

body.rx .vagas-territorio__aviso {
  color: var(--alerta);
}

/* ---------- Busca de território ---------- */
body.rx .vagas-busca .campo label {
  color: var(--tinta);
}

body.rx .vagas-busca .status {
  color: var(--tinta-fraca);
}

/* ---------- Painel de filtros (sticky) ---------- */
body.rx .vagas-filtros {
  background: var(--aurora-opaca);
  border-block-color: var(--borda);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 34px -30px rgba(58, 40, 28, 0.3);
}

/* O cabeçalho do tema é sticky; a barra de filtros para abaixo dele. */
@media (min-width: 760px) {
  body.rx .vagas-filtros {
    top: 72px;
    z-index: 30;
  }
}

body.rx .vagas-filtros__campo label {
  color: var(--tinta);
}

body.rx .vagas-filtros input[type="search"],
body.rx .vagas-filtros input[type="text"],
body.rx .vagas-filtros select {
  background: var(--superficie-1);
  border-color: var(--borda-forte);
  color: var(--tinta);
}

body.rx .vagas-filtros input[type="search"]:hover,
body.rx .vagas-filtros input[type="text"]:hover,
body.rx .vagas-filtros select:hover {
  border-color: var(--tinta-fraca);
}

body.rx .vagas-filtros input[type="search"]:focus-visible,
body.rx .vagas-filtros input[type="text"]:focus-visible,
body.rx .vagas-filtros select:focus-visible {
  border-color: var(--rojo);
  outline: 2px solid var(--rojo);
  outline-offset: 1px;
}

body.rx .vagas-filtros input::placeholder {
  color: var(--tinta-fraca);
  opacity: 1;
}

body.rx .vagas-filtros select option {
  background: var(--aurora-opaca);
  color: var(--tinta);
}

body.rx .vagas-filtros__nota {
  color: var(--tinta-fraca);
}

body.rx .vagas-nota-salarial {
  color: var(--tinta-media);
}

/* ---------- Cabeçalho do resultado e cobertura ---------- */
body.rx .vagas-resultado-cabecalho h2 {
  color: var(--tinta);
}

body.rx .vagas-contagem {
  color: var(--tinta);
}

body.rx .vagas-cobertura-pagina {
  color: var(--tinta-fraca);
}

/* ---------- Lista de vagas ---------- */
body.rx .vagas-lista {
  border-top-color: var(--borda);
}

body.rx .linha-vaga {
  border-bottom-color: var(--borda-suave);
}

body.rx .linha-vaga:target {
  background: var(--rojo-suave);
}

body.rx .linha-vaga__cargo {
  color: var(--tinta);
}

body.rx .linha-vaga__postos {
  background: var(--superficie-2);
  border-color: var(--borda);
  color: var(--tinta-media);
}

body.rx .linha-vaga__meta {
  color: var(--tinta-media);
}

body.rx .linha-vaga__tag {
  background: var(--superficie-2);
  border-color: var(--borda);
  color: var(--tinta-media);
}

/* Salário é fato, não juízo: realce neutro, sem verde/vermelho. */
body.rx .linha-vaga__tag--salario {
  color: var(--tinta);
}

body.rx .linha-vaga__resumo {
  color: var(--tinta-media);
}

body.rx .linha-vaga__avisos .aviso-dado--instavel {
  color: var(--erro);
}

body.rx .linha-vaga__detalhes > summary {
  color: var(--ambar-texto);
}

body.rx .linha-vaga__detalhes > summary:hover {
  color: var(--rojo-forte);
}

body.rx .linha-vaga__detalhes p {
  color: var(--tinta-media);
}

body.rx .linha-vaga__detalhes strong {
  color: var(--tinta);
}

body.rx .linha-vaga__link {
  color: var(--tinta);
}

body.rx .linha-vaga__link:hover {
  color: var(--rojo-forte);
}

body.rx .linha-vaga__sem-link {
  color: var(--tinta-fraca);
}

body.rx .linha-vaga__fonte .fonte {
  color: var(--tinta-fraca);
}

body.rx .linha-vaga__fonte .fonte a {
  color: var(--tinta-media);
}

body.rx .linha-vaga__fonte .fonte a:hover {
  color: var(--rojo-forte);
}

/* ---------- Estados vazios (lacuna esperada, nunca zero) ---------- */
body.rx .vagas-vazio {
  background: var(--superficie-2);
  border-color: var(--borda-forte);
  color: var(--tinta-media);
}

body.rx .vagas-vazio__icone {
  color: var(--rojo);
}

body.rx .vagas-vazio h2 {
  color: var(--tinta);
}

body.rx .vagas-vazio p {
  color: var(--tinta-fraca);
}

body.rx .vagas-vazio-inline {
  background: var(--superficie-2);
  border-color: var(--borda-forte);
  color: var(--tinta-media);
}

/* ---------- Paginação ---------- */
body.rx .vagas-paginacao {
  border-top-color: var(--borda);
}

body.rx .vagas-paginacao__info {
  color: var(--tinta-media);
}

body.rx .vagas-paginacao__salto label {
  color: var(--tinta-media);
}

body.rx .vagas-paginacao__salto input {
  background: var(--superficie-1);
  border-color: var(--borda-forte);
  color: var(--tinta);
}

body.rx .vagas-paginacao__salto input:hover {
  border-color: var(--tinta-fraca);
}

body.rx .vagas-paginacao__salto input:focus-visible {
  border-color: var(--rojo);
  outline: 2px solid var(--rojo);
  outline-offset: 1px;
}

/* ---------- Nota final da tela ---------- */
body.rx .vagas-nota {
  border-top-color: var(--borda);
}

body.rx .vagas-nota h2 {
  color: var(--tinta);
}

body.rx .vagas-nota ul {
  color: var(--tinta-media);
}

body.rx .vagas-nota .detalhes {
  border-top-color: var(--borda);
}

body.rx .vagas-nota .detalhes > summary {
  color: var(--ambar-texto);
}

body.rx .vagas-nota .detalhes > summary:hover {
  color: var(--rojo-forte);
}

/* Papel: nenhuma superfície colorida se imprime. Só os tokens de superfície
   mudam; texto e estrutura ficam como estão na tela. */
@media print {
  html:has(body.rx),
  body.rx {
    background: #fff;
    color: #000;
  }

  body.rx {
    --superficie-1: transparent;
    --superficie-2: transparent;
    --superficie-3: transparent;
    --aurora-opaca: transparent;
    --aurora-opaca-alta: transparent;
    --sombra: none;
  }
}

/* Comparador no celular: a tabela vira cartões por indicador. O nome da
   cidade entra em cada valor via data-cidade; a base fica no topo. */
@media (max-width: 760px) {
  body.rx .cmp-tabela-scroll {
    overflow: visible; border: 0;
  }
  body.rx .tabela--comparador {
    display: block; min-width: 0;
  }
  body.rx .tabela--comparador caption {
    display: block; width: 100%; padding: 0 0 0.75rem;
  }
  body.rx .tabela--comparador thead,
  body.rx .tabela--comparador tbody {
    display: block;
  }
  body.rx .tabela--comparador thead tr:not(.cmp-base-linha) {
    display: none;
  }
  body.rx .tabela--comparador thead .cmp-base-linha {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    padding: 0.6rem 0.75rem; margin-bottom: 0.75rem;
    background: var(--aurora-opaca); border: 1px solid var(--borda);
    border-radius: 0.7rem;
  }
  body.rx .cmp-base-linha th {
    flex: 1 0 100%; position: static; min-width: 0;
    padding: 0; background: transparent; box-shadow: none;
  }
  body.rx .cmp-base-linha td {
    position: static; display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0; border: 0; background: transparent;
  }
  body.rx .cmp-base-linha td::before {
    content: attr(data-cidade);
    font-size: 0.72rem; color: var(--tinta-fraca);
  }
  /* O nome da cidade já vem em ::before; repetir "Base" em cada opção
     polui a leitura. O rádio continua com aria-label completo. */
  body.rx .cmp-base-radio__texto { display: none; }
  body.rx .tabela--comparador tbody tr {
    display: block; padding: 0.75rem 0.85rem; margin-bottom: 0.7rem;
    background: var(--superficie-1);
    border: 1px solid var(--borda); border-radius: 0.8rem;
  }
  body.rx .tabela--comparador tbody th {
    display: block; position: static; min-width: 0;
    padding: 0 0 0.5rem; border: 0;
    background: transparent; box-shadow: none;
  }
  body.rx .tabela--comparador tbody td {
    display: block; padding: 0.5rem 0 0;
    border-top: 1px solid var(--borda);
  }
  body.rx .tabela--comparador tbody td::before {
    content: attr(data-cidade);
    display: block; margin-bottom: 0.25rem;
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--tinta-fraca);
  }
  body.rx .tabela--comparador tbody td:first-of-type {
    border-top: 0; padding-top: 0;
  }
  /* No celular o SVG é desenhado em 320 px e ampliado; limitar a largura
     mantém rótulos e eixo no tamanho previsto. Os valores exatos, que
     colidiriam com a borda, ficam nos cartões da tabela abaixo. */
  body.rx .cmp-svg { max-width: 21rem; }
  body.rx .cmp-svg .dp-valor { display: none; }
}

/* Etiqueta compacta em qualquer contexto (inclusive .celula-meta .selo). */
body.rx .selo { font-size: 0; }
body.rx .selo::after { font-size: 0.7rem; }
body.rx .selo:hover,
body.rx .selo:focus-within { font-size: 0.7rem; }
body.rx .legenda .selo,
body.rx .legenda .selo:hover { font-size: 0.7rem; }
body.rx .legenda .selo::after { content: none; }

/* Metadados da célula do comparador em uma única linha: etiqueta compacta,
   período e fonte lado a lado, sem empilhar três linhas por valor. */
body.rx .celula-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.15rem 0.4rem; margin-top: 0.2rem;
}
body.rx .celula-meta .cobertura {
  display: inline-flex; flex-direction: row; align-items: center;
  gap: 0;
}
body.rx .celula-meta .celula__periodo,
body.rx .celula-meta .celula__fonte {
  display: inline; margin-top: 0;
}

/* Hero da home com foto: mesma linguagem do hero das cidades. A imagem é
   fundo decorativo; o crédito fica visível e o texto mantém contraste.
   O scrim continua ESCURO de propósito: é ele que sustenta o texto claro
   sobre a foto. Só o matiz acompanha a marca (marrom-vinho, não azul-noite). */
body.rx .inicio-heroi {
  position: relative;
  overflow: hidden;
}
body.rx .inicio-heroi--foto {
  background-image:
    linear-gradient(
      90deg,
      rgba(26, 14, 12, 0.74) 0%,
      rgba(26, 14, 12, 0.66) 40%,
      rgba(26, 14, 12, 0.14) 74%,
      rgba(26, 14, 12, 0.04) 100%
    ),
    var(--foto-hero);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

/* Dentro da foto o texto volta a ser claro, porque o fundo é o scrim. */
body.rx .inicio-heroi--foto h1 {
  color: #ffffff;
}
body.rx .inicio-heroi--foto .inicio-heroi__sub {
  color: rgba(255, 255, 255, 0.90);
  /* O texto termina dentro do platô escuro do véu; além de ~43% da largura
     o scrim já caiu e o branco perderia contraste. */
  max-width: 30rem;
}
body.rx .inicio-heroi--foto .inicio-heroi__acoes .botao:not(.botao--marca) {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(26, 14, 12, 0.35);
}
body.rx .inicio-heroi--foto .inicio-heroi__acoes .botao:not(.botao--marca):hover {
  background: rgba(26, 14, 12, 0.52);
  border-color: rgba(255, 255, 255, 0.7);
}
/* O bloco de busca vive dentro do hero: rótulo e ajuda ficam sobre o scrim,
   não sobre o cartão claro. O input em si continua branco com texto escuro. */
body.rx .inicio-heroi--foto .campo label {
  color: #ffffff;
}
body.rx .inicio-heroi--foto .campo__ajuda,
body.rx .inicio-heroi--foto .status {
  color: rgba(255, 255, 255, 0.82);
}
/* O olho é o único elemento em gualda: pílula de gualda cheia com texto
   vinho (8:1). O fundo é a cor; o texto nunca fica solto sobre a foto. */
body.rx .inicio-heroi--foto .inicio-heroi__sobre {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--gualda);
  color: var(--gualda-tinta);
}

/* Crédito da foto: legenda discreta no rodapé do herói, não pílula sobre o
   H1. O template o coloca no fluxo (fim da seção); sem posicionamento
   absoluto o estilo não briga com nenhuma ordem de markup. */
body.rx .inicio-heroi__credito {
  position: static;
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.66rem;
  line-height: 1.4;
}
body.rx .inicio-heroi__credito a {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 760px) {
  body.rx .inicio-heroi--foto {
    background-image:
      linear-gradient(
        180deg,
        rgba(26, 14, 12, 0.42) 0%,
        rgba(26, 14, 12, 0.88) 62%,
        rgba(26, 14, 12, 0.94) 100%
      ),
      var(--foto-hero);
    background-position: center 35%;
  }
}