/* ===== TESTE: efeitos Moxen ===== */
:root {
  --ar-fondo: #050505; --ar-cielo: #0e0a16;
  --ar-luz-1: 168, 85, 247; --ar-luz-2: 47, 107, 255; --ar-luz-3: 236, 72, 153;
  --et-punto: #ffd60a;
  --la-corazon: #ff3d77; --la-corazon-sombra: #b0123f;
  --dk-tam: 46px; --dk-hueco: 6px; --dk-aumento: 1.5;
  --dk-barra-1: rgba(32, 24, 44, .78); --dk-barra-2: rgba(14, 10, 22, .82);
}
@media (min-width: 860px) { :root { --dk-tam: 62px; --dk-hueco: 10px; --dk-aumento: 1.7; } }
.bg-grid { display: none !important; }
#aurora[data-aurora] { position: fixed; inset: 0; z-index: -3; }
nav.tabs#tabs { position: fixed; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom)); top: auto; display: flex; justify-content: center; max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; z-index: 50; pointer-events: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
nav.tabs#tabs[hidden] { display: none; }
nav.tabs#tabs .dk-dock { pointer-events: auto; }
.dk-tesela .emo { font-size: calc(var(--dk-tam) * .5); line-height: 1; }
body { padding-bottom: 150px; }
.fav-heart.la-boton { height: 40px; padding: 0 .8em 0 .65em; font-size: .95rem; border-radius: 20px; box-shadow: inset 0 1px 0 var(--la-brillo-borde), 0 0 0 1px var(--la-linea); }
.fav-heart .la-cuenta { display: none; }

/* legendas pequenas sob os icones do dock */
.dk-dock { padding-bottom: 26px; height: calc(var(--dk-tam) + 40px); }
.dk-leg { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 3px; font: 600 .6rem/1 var(--sans); letter-spacing: .04em; color: rgba(255, 255, 255, .66); white-space: nowrap; pointer-events: none; }
.dk-item.is-abierto .dk-leg { color: var(--accent); }
@media (min-width: 860px) { .dk-leg { font-size: .68rem; } }

/* os icones aumentam ao passar o mouse: a barra nao pode cortar */
nav.tabs#tabs, nav.tabs#tabs .dk-dock { overflow: visible !important; }
.dk-leg { transition: opacity .15s; }
.dk-item.is-cerca .dk-leg, .dk-item.is-saltando .dk-leg { opacity: 0; }

/* celular: a barra do navegador aparece e some ao rolar e mudava a altura do fundo, fazendo ele piscar.
   Agora o fundo usa sempre a altura maior da tela (lvh), que nao muda. */
#aurora[data-aurora] { position: fixed; top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: 100vh; height: 100lvh; transform: translateZ(0); -webkit-transform: translateZ(0); contain: strict; }