:root { --fx-bloco: var(--cor-petroleo-700); --fx-chave: var(--cor-petroleo-700); --fx-curva: cubic-bezier(.65, 0, .35, 1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fx-bloco: var(--cor-petroleo-600); --fx-chave: var(--cor-petroleo-500); } }
:root[data-theme="dark"] { --fx-bloco: var(--cor-petroleo-600); --fx-chave: var(--cor-petroleo-500); }

html.fx-1 .topo__nav a:not(.botao):not(.idiomas__item)::before { content: none; }
.rolo { position: relative; display: inline-flex; white-space: pre; overflow: hidden; padding: .25em .12em; margin: -.25em -.12em; }
.rolo__base { color: transparent; }
.rolo__letras { position: absolute; left: .12em; top: .25em; display: flex; }
.rolo__l { display: inline-block; position: relative; }
.rolo__l::after { content: attr(data-l); position: absolute; left: 0; top: calc(100% + .5em); }
.seta { display: inline-grid; flex: none; width: 1em; height: 1em; overflow: hidden; }
.seta svg { grid-area: 1 / 1; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.seta svg + svg { transform: translateX(-130%); }
.botao--primario .seta { color: var(--destaque); }
@media (max-width: 379px) { .formulario .seta { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rolo__l { transition: transform .5s var(--fx-curva) calc(var(--i) * 18ms); }
  .seta svg { transition: transform .4s var(--fx-curva); }
  :is(a, button):is(:hover, :focus-visible) > .rolo .rolo__l { transform: translateY(calc(-100% - .5em)); }
  :is(a, button):is(:hover, :focus-visible) > .seta svg:first-child { transform: translateX(130%); }
  :is(a, button):is(:hover, :focus-visible) > .seta svg + svg { transform: none; transition-delay: 70ms; }
}

@media (hover: hover) and (min-width: 900px) {
  html.fx-2 .frente__fica { position: relative; clip-path: polygon(0 0, 100% 0, 100% 0, 100% 2px, 0 2px); transition: clip-path .55s var(--curva-padrao); }
  html.fx-2 .frente__fica::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--texto-marca); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--curva-padrao); }
  html.fx-2 .frente:is(:hover, :focus-within) .frente__fica { clip-path: polygon(0 0, 100% 0, 100% 44rem, calc(100% - 44rem) 2px, 0 2px); }
  html.fx-2 .frente:is(:hover, :focus-within) .frente__fica::before { transform: scaleX(1); }
  html.fx-2 .frente:focus-visible { border-radius: var(--raio-3) 3rem var(--raio-3) var(--raio-3); }
}
@media (hover: hover) and (min-width: 900px) and (prefers-reduced-motion: reduce) {
  html.fx-2 .frente__fica, html.fx-2 .frente__fica::before { transition: none; }
}

html.fx-5 .topo { background: transparent; }
html.fx-5 .topo.rolou { border-color: transparent; }
html.fx-5 .topo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fundo); transition: background-color var(--duracao-media) var(--curva-padrao); }
html.fx-5 .topo.rolou::before { background: color-mix(in srgb, var(--fundo) 85%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.topo__desfoque { position: absolute; left: 0; right: 0; top: 100%; height: 3rem; pointer-events: none; }
.topo__desfoque i { position: absolute; inset: 0; opacity: 0; transition: opacity var(--duracao-media) var(--curva-padrao); }
.topo.rolou .topo__desfoque i { opacity: 1; }
.topo__desfoque i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(#000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(#000 0%, #000 55%, transparent 100%); }
.topo__desfoque i:nth-child(2) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(#000 0%, #000 25%, transparent 65%); mask-image: linear-gradient(#000 0%, #000 25%, transparent 65%); }
.topo__desfoque i:nth-child(3) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(#000 0%, transparent 35%); mask-image: linear-gradient(#000 0%, transparent 35%); }
@media (max-width: 599px) {
  .topo__desfoque { height: 2rem; }
  .topo__desfoque i:nth-child(1), .topo__desfoque i:nth-child(3) { display: none; }
  .topo__desfoque i:nth-child(2) { -webkit-mask-image: linear-gradient(#000 0%, transparent 100%); mask-image: linear-gradient(#000 0%, transparent 100%); }
}
@media (prefers-reduced-transparency: reduce) {
  html.fx-5 .topo.rolou::before { background: var(--fundo); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.fx-5 .topo.rolou { border-color: var(--borda); }
  .topo__desfoque { display: none; }
}

html.fx-6 .linhas .linha { display: block; width: fit-content; position: relative; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  html.fx-6 .linhas .linha::after { content: ""; position: absolute; inset: -.02em -.08em -.1em; background: var(--fx-bloco); transform-origin: right center; transition: transform .7s cubic-bezier(.7, 0, .2, 1) calc(var(--i) * 90ms + 100ms); }
  html.fx-6 .linhas-vistas .linha::after { transform: scaleX(0); }
}

.lab { position: fixed; z-index: 31; left: max(var(--espaco-3), env(safe-area-inset-left)); bottom: max(var(--espaco-3), env(safe-area-inset-bottom)); transform: translateY(calc(-1 * var(--altura-aviso-cookies, 0px))); max-width: calc(100vw - 2 * var(--espaco-3)); box-sizing: border-box; padding: var(--espaco-2); background: var(--fundo-elevado); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio-3); box-shadow: var(--sombra-3); font: 500 .8125rem/1.3 var(--fonte-titulo); }
.lab__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); width: 100%; min-height: 2.25rem; padding: 0 var(--espaco-2); border: 0; border-radius: var(--raio-2); background: transparent; color: var(--texto-marca); font: 600 var(--tipo-rotulo)/1.2 var(--fonte-titulo); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; cursor: pointer; }
.lab__contagem { color: var(--texto-secundario); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lab__lista { list-style: none; margin: var(--espaco-1) 0 0; padding: 0; display: grid; gap: 2px; }
.lab__lista[hidden] { display: none; }
.lab__chave { display: flex; align-items: center; gap: var(--espaco-3); width: 100%; min-height: 2.25rem; padding: 0 var(--espaco-2); border: 0; border-radius: var(--raio-2); background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.lab__chave:hover, .lab__cab:hover { background: var(--fundo-suave); }
.lab__trilho { position: relative; flex: none; width: 1.875rem; height: 1.125rem; border-radius: var(--raio-pilula); border: 1.5px solid var(--borda-forte); box-sizing: border-box; transition: background-color var(--duracao-curta) var(--curva-padrao), border-color var(--duracao-curta) var(--curva-padrao); }
.lab__trilho::after { content: ""; position: absolute; top: 50%; left: 2px; width: .625rem; height: .625rem; border-radius: 50%; background: var(--borda-forte); transform: translateY(-50%); transition: transform var(--duracao-curta) var(--curva-padrao), background-color var(--duracao-curta) var(--curva-padrao); }
.lab__chave[aria-pressed="true"] .lab__trilho { background: var(--fx-chave); border-color: var(--fx-chave); }
.lab__chave[aria-pressed="true"] .lab__trilho::after { background: var(--cor-branco-suave); transform: translate(.75rem, -50%); }
.sem-mapa #mapa { display: none; }
@media print { .lab, .topo__desfoque { display: none !important; } }