/* ==========================================================================
   Tema "Aurora" — telas de início, comparador e match.

   Estas três telas nasceram claras sobre `portal.css`. Aqui elas passam a
   usar o mesmo escuro do raio-X, sem dark mode condicional: o tema é escuro
   por padrão.

   Como o arquivo é carregado DEPOIS de `portal.css` e de `raio_x.css`:
   - `raio_x.css` traz os tokens (--areia, --coral, --ambar, --azul, --roxo,
     --tinta*, --vidro*, --nivel-*, --sombra) e já pinta cabeçalho, rodapé,
     tabelas, `.cartao` na base e `.detalhes`;
   - este arquivo reescreve os tokens claros que `portal.css` deixa em
     `:root` e cobre os componentes próprios das três telas.

   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 é escuro antes do primeiro paint do body; o
   `color-scheme` escuro deixa selects, checkboxes e barra de rolagem nativos
   coerentes com o tema. (`base.html` ainda declara color-scheme "light".) */
html:has(body.rx) {
  background: var(--areia);
  color-scheme: dark;
}

body.rx {
  color-scheme: dark;

  /* Tokens do portal que apontavam para o tema claro. */
  --fundo: var(--areia);
  --marca: var(--coral);
  --marca-escura: var(--tinta);
  --marca-clara: rgba(255, 107, 90, 0.14);
  --borda-suave: rgba(255, 255, 255, 0.08);
  --borda-forte: rgba(255, 255, 255, 0.22);
  --foco: #fbbf24;
  --erro: #fecaca;
  --erro-fundo: rgba(248, 113, 113, 0.12);
  --erro-borda: rgba(248, 113, 113, 0.45);
  --alerta: #fde68a;
  --alerta-fundo: rgba(246, 161, 92, 0.12);
  --alerta-borda: rgba(246, 161, 92, 0.45);
  --ok: #a7f3d0;
  --ok-fundo: rgba(52, 211, 153, 0.12);
  --ok-borda: rgba(52, 211, 153, 0.42);
  --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: rgba(255, 255, 255, 0.14);

  /* 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: #0f172a;
  --aurora-opaca-alta: #16213a;
  --tinta-sobre-acento: #1b0b07;
}

body.rx ::selection {
  background: rgba(255, 107, 90, 0.35);
  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);
  letter-spacing: 0.14em;
}

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

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

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

body.rx .botao--marca,
body.rx .botao--primario {
  background: linear-gradient(120deg, var(--coral), var(--ambar));
  border-color: transparent;
  color: var(--tinta-sobre-acento);
}

body.rx .botao--marca:hover,
body.rx .botao--primario:hover {
  background: linear-gradient(120deg, var(--ambar), var(--coral));
  border-color: transparent;
  color: var(--tinta-sobre-acento);
}

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

body.rx .botao--contorno:hover,
body.rx .botao--linha:hover {
  background: rgba(255, 107, 90, 0.14);
  border-color: rgba(255, 107, 90, 0.55);
  color: var(--tinta);
}

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

body.rx .botao--discreto:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--borda-forte);
  color: var(--tinta);
}

body.rx .botao:disabled,
body.rx .botao[aria-disabled="true"] {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--borda-suave);
  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(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.42);
  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. */
body.rx .aviso-dado--instavel {
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
  color: var(--erro);
}

body.rx .aviso-dado--confianca {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  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 (vermelho), 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(246, 161, 92, 0.26);
  border-radius: 0.35rem;
  padding: 0.28rem 0.42rem;
  background: rgba(246, 161, 92, 0.07);
  color: #f2d7b6;
  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: rgba(242, 215, 182, 0.82);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.3;
}

/* ---------- Estado vazio (lacuna esperada) ---------- */
body.rx .vazio {
  border-color: rgba(148, 163, 184, 0.42);
  background: rgba(255, 255, 255, 0.04);
  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,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.13) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  border-color: var(--vidro-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: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  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: rgba(255, 255, 255, 0.32);
}

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(--ambar);
  outline: 2px solid var(--ambar);
  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(--coral);
}

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(--vidro-borda);
  border-radius: 0.7rem;
}

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

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

body.rx .resultado-cidade:hover {
  background: rgba(255, 255, 255, 0.08);
}

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: rgba(255, 107, 90, 0.12);
  border-color: rgba(255, 107, 90, 0.4);
  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: rgba(255, 255, 255, 0.14);
}

/* ---------- Cartões, tabelas e selos ---------- */
body.rx .cartao {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.025)
  );
  border-color: var(--vidro-borda);
  box-shadow: var(--sombra);
}

body.rx .cartao__topo {
  border-bottom-color: var(--vidro-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(--aurora-opaca);
}

body.rx .selo--medido {
  background: var(--ok-fundo);
  border-color: var(--ok-borda);
  color: var(--ok);
}

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

body.rx .selo--sem {
  background: rgba(100, 116, 139, 0.16);
  border-color: rgba(148, 163, 184, 0.45);
  color: var(--tinta-fraca);
}

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

/* ==========================================================================
   Início
   ========================================================================== */
body.rx .inicio-heroi {
  border: 1px solid var(--vidro-borda);
  border-left: 4px solid var(--coral);
  border-radius: 26px;
  background:
    radial-gradient(560px 280px at 6% -12%, rgba(255, 107, 90, 0.2), transparent 68%),
    radial-gradient(520px 260px at 96% 8%, rgba(96, 165, 250, 0.15), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  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: rgba(255, 255, 255, 0.05);
  border-color: var(--vidro-borda);
  color: var(--tinta-media);
}

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

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

body.rx .cidade-link {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.025)
  );
  border-color: var(--vidro-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: rgba(255, 107, 90, 0.55);
  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(255, 107, 90, 0.55);
}

body.rx .passo__numero {
  background: rgba(255, 107, 90, 0.16);
  border: 1px solid rgba(255, 107, 90, 0.4);
  color: var(--coral);
}

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 Aurora: a altura de 44 px
   herdada do tema claro deixava os controles altos demais. */
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:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.025)
    ),
    rgba(11, 18, 32, 0.92);
  border-color: var(--vidro-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(--vidro-borda); border-radius: 999px;
  background: rgba(255,255,255,0.04); 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(--vidro-borda); border-radius: 50%;
  background: rgba(11,18,32,0.9); color: var(--tinta-media);
  cursor: pointer;
}
body.rx .cmp-seta:hover,
body.rx .cmp-seta:focus-visible {
  border-color: rgba(255,107,90,0.55); color: var(--tinta);
}
body.rx .cmp-seta:disabled {
  opacity: 0.35; 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: rgba(255,107,90,0.55); color: var(--tinta);
}
body.rx .cmp-dimensao[aria-pressed="true"],
body.rx .cmp-dimensao--ativa {
  background: rgba(255,107,90,0.14);
  border-color: rgba(255,107,90,0.65);
  color: var(--coral);
}
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(--vidro-borda); border-radius: 50%;
  background: rgba(255,255,255,0.05); color: var(--tinta-media);
  cursor: pointer;
}
body.rx .cmp-copiar:hover,
body.rx .cmp-copiar:focus-visible {
  border-color: rgba(255,107,90,0.55); 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(0, 0, 0, 0.95);
  }
}

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

body.rx .cmp-check {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--vidro-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(--coral);
}

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

body.rx .cmp-chip {
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--vidro-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: rgba(255, 255, 255, 0.04);
  border-color: var(--vidro-borda);
  color: var(--tinta-media);
}

body.rx .cmp-nota {
  border-left-color: var(--coral);
  background: rgba(255, 255, 255, 0.045);
  color: var(--tinta-media);
}

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

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

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

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

body.rx .cmp-rodape {
  border-color: rgba(148, 163, 184, 0.42);
  background: rgba(255, 255, 255, 0.04);
  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: rgba(255, 255, 255, 0.05);
  border-color: var(--vidro-borda);
}

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

body.rx .cmp-grafico {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--vidro-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(96, 165, 250, 0.14);
  border-color: rgba(96, 165, 250, 0.42);
  color: var(--azul);
}

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

body.rx .diferenca--base {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--vidro-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(--vidro-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(--vidro-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(--ambar);
}
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(--vidro-borda);
}

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

body.rx .match-progresso {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--vidro-borda);
}

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

body.rx .progresso__item[aria-current="step"] {
  background: rgba(255, 107, 90, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 90, 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: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.02)
  );
  border-color: var(--vidro-borda);
  border-radius: 24px;
  box-shadow: 0 26px 60px -46px rgba(0, 0, 0, 0.95);
}

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

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

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

body.rx .match-opcao,
body.rx .match-dim-check {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--vidro-borda);
  color: var(--tinta);
}

body.rx .match-opcao:hover,
body.rx .match-dim-check:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 107, 90, 0.5);
}

body.rx .match-opcao:has(input:checked),
body.rx .match-dim-check:has(input:checked) {
  background: rgba(255, 107, 90, 0.14);
  border-color: rgba(255, 107, 90, 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(--vidro-borda);
}

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

body.rx .progresso-barra {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--vidro-borda);
}

body.rx .progresso-barra__valor {
  background: linear-gradient(90deg, var(--coral), var(--ambar));
}

body.rx .match-prioridade {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--vidro-borda);
}

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

body.rx .match-mover,
body.rx .match-remover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--vidro-borda);
  color: var(--tinta);
}

body.rx .match-remover {
  border-color: rgba(248, 113, 113, 0.45);
  color: var(--erro);
}

body.rx .match-mover:hover,
body.rx .match-remover:hover {
  background: rgba(255, 107, 90, 0.16);
  border-color: rgba(255, 107, 90, 0.55);
  color: var(--tinta);
}

body.rx .match-mover:disabled {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--borda-suave);
  color: var(--tinta-fraca);
}

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

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

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

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

body.rx .match-enviar {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.075),
    rgba(255, 255, 255, 0.025)
  );
  border-color: var(--vidro-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(--coral);
  color: var(--tinta-sobre-acento);
}

body.rx .match-ranking__trilho {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--vidro-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: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02)
  );
  border-color: var(--vidro-borda);
  border-left: 4px solid var(--coral);
  border-radius: 24px;
}

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

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);
}

body.rx .match-confianca {
  border-color: var(--vidro-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(96, 165, 250, 0.12);
  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(--vidro-borda);
}

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

body.rx .match-tradeoff {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--borda-suave);
}

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

body.rx .match-estimativa {
  background: rgba(246, 161, 92, 0.16);
  border-color: var(--alerta-borda);
  color: var(--alerta);
}

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

body.rx .match-dim-linha {
  background: rgba(255, 255, 255, 0.04);
  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: rgba(255, 255, 255, 0.08);
  border-color: var(--vidro-borda);
}

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

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

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

body.rx .match-barra--score > span {
  background: linear-gradient(90deg, var(--coral), var(--ambar));
}

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

body.rx .match-linha {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--vidro-borda);
}

body.rx .match-linha__pos {
  background: rgba(255, 255, 255, 0.08);
  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(--vidro-borda);
}

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

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

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

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)
   --------------------------------------------------------------------------
   A tela nasceu clara sobre `portal.css`; aqui ela recebe o mesmo escuro do
   raio-X. Nada de superfície branca: as linhas de vaga ficam sobre o fundo do
   tema, com selo de nível, tags e paginação em vidro. 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(--coral);
}

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: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.025)
  );
  border-color: var(--vidro-borda);
  border-left-color: var(--azul);
  border-radius: 18px;
  box-shadow: var(--sombra);
}

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

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: rgba(11, 18, 32, 0.94);
  border-block-color: var(--vidro-borda);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 34px -30px rgba(0, 0, 0, 0.95);
}

/* 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: rgba(255, 255, 255, 0.06);
  border-color: var(--vidro-borda);
  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: rgba(255, 255, 255, 0.32);
}

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(--ambar);
  outline: 2px solid var(--ambar);
  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(--vidro-borda);
}

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

body.rx .linha-vaga:target {
  background: rgba(255, 107, 90, 0.1);
}

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

body.rx .linha-vaga__postos {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--vidro-borda);
  color: var(--tinta-media);
}

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

body.rx .linha-vaga__tag {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--vidro-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);
}

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

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(--coral);
}

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(--coral);
}

/* ---------- Estados vazios (lacuna esperada, nunca zero) ---------- */
body.rx .vagas-vazio {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(148, 163, 184, 0.42);
  color: var(--tinta-media);
}

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

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

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

body.rx .vagas-vazio-inline {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(148, 163, 184, 0.42);
  color: var(--tinta-media);
}

/* ---------- Paginação ---------- */
body.rx .vagas-paginacao {
  border-top-color: var(--vidro-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: rgba(255, 255, 255, 0.06);
  border-color: var(--vidro-borda);
  color: var(--tinta);
}

body.rx .vagas-paginacao__salto input:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

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

/* ---------- Nota final da tela ---------- */
body.rx .vagas-nota {
  border-top-color: var(--vidro-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(--vidro-borda);
}

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

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

/* Papel: o fundo escuro não se imprime e o texto claro ficaria ilegível.
   Só os tokens de texto voltam ao escuro; nenhuma estrutura muda. */
@media print {
  html:has(body.rx),
  body.rx {
    background: #fff;
    color: #000;
  }

  body.rx {
    --tinta: #0f172a;
    --tinta-media: #334155;
    --tinta-fraca: #475569;
    --marca-escura: #0f172a;
    --vidro: transparent;
    --vidro-borda: #94a3b8;
    --superficie-1: transparent;
    --superficie-2: transparent;
    --superficie-3: transparent;
    --borda: #94a3b8;
    --borda-suave: #d1d5db;
    --aurora-opaca: transparent;
    --aurora-opaca-alta: transparent;
  }
}

/* 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(--vidro-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: rgba(255,255,255,0.03);
    border: 1px solid var(--vidro-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(--vidro-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. */
body.rx .inicio-heroi {
  position: relative;
  overflow: hidden;
}
body.rx .inicio-heroi--foto {
  background-image:
    linear-gradient(
      90deg,
      rgba(7, 13, 24, 0.94) 0%,
      rgba(7, 13, 24, 0.82) 48%,
      rgba(7, 13, 24, 0.38) 100%
    ),
    var(--foto-hero);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
body.rx .inicio-heroi__credito {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  z-index: 2;
  margin: 0;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  background: rgba(7, 13, 24, 0.55);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.7rem;
  line-height: 1.3;
}
body.rx .inicio-heroi__credito a {
  color: inherit;
}
@media (max-width: 760px) {
  body.rx .inicio-heroi--foto {
    background-image:
      linear-gradient(
        180deg,
        rgba(7, 13, 24, 0.72) 0%,
        rgba(7, 13, 24, 0.92) 72%
      ),
      var(--foto-hero);
    background-position: center 35%;
  }
}