/* HOJE. Dono: frente Hoje.
   =====================================================================================
   A tela inicial flutua na cena (js/cena.js). Quase nada é caixa: vidro só no check-in
   feito, na faixa de alertas e no tríptico. Tudo com prefixo h- (tela) e hf- (folhas).
   No fim do arquivo: classes antigas que OUTRAS telas ainda usam (anel, teia, fatores).
   ===================================================================================== */
.h-tela { --gut: 18px; padding-top: calc(var(--st) + 14px); overflow-x: clip; isolation: isolate; }
@media (min-width: 560px) { .h-tela { --gut: 24px; } }

/* ---------- a cena do herói (js: cenaHoje, ajustaHeroi) ----------
   A imagem da hora fica DENTRO da tela, atrás do herói (z-index -1 na .h-tela isolada), e sobe com o conteúdo.
   O js dá o lugar da imagem (--hc-t, --hc-h) e a altura da faixa (--hc-alt, até um pouco abaixo dos botões);
   a faixa some em degradê embaixo, e dali para baixo fica só o céu de estrelas da cena fixa. */
.h-cena {
  position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--hc-alt, 100svh); overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--hc-ceu, #0c0f1a) calc(var(--hc-t, 0px) + 40px), transparent calc(var(--hc-t, 0px) + 41px)) no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 220px), rgba(0,0,0,.55) calc(100% - 110px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 220px), rgba(0,0,0,.55) calc(100% - 110px), transparent);
  opacity: 0; transition: opacity .8s ease;
}
.h-cena.pronta { opacity: 1; }
.h-cena.ja { transition: none; }
.h-cena-pl { position: absolute; inset: 0; will-change: transform; }
.h-cena-img {
  position: absolute; left: 50%; top: var(--hc-t, 0px); height: var(--hc-h, 118svh); width: auto; max-width: none; translate: -50% 0;
  transform-origin: 50% var(--hc-fe, 17.6%);   /* a respiração cresce em volta da estrela do céu: a estrela do anel não sai do lugar */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 44px); mask-image: linear-gradient(180deg, transparent 0, #000 44px);
}
/* véus: alto escuro (marca, data e saudação) e luz baixa embaixo, onde a imagem vira céu de estrelas */
.h-cena::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,6,10,.42) 0, rgba(7,6,10,.12) 150px, rgba(7,6,10,0) 250px); }
.h-tela[data-cena="hoje-dia"] .h-cena::after, .h-tela[data-cena="hoje-tarde"] .h-cena::after {
  background: linear-gradient(180deg, rgba(7,6,10,.5) 0, rgba(7,6,10,.2) 160px, rgba(7,6,10,0) 270px); }
.h-cena.vivo .h-cena-img { animation: hCenaRespira 48s ease-in-out infinite alternate; }
@keyframes hCenaRespira { from { scale: 1; } to { scale: 1.04; } }
/* paralaxe: a imagem sobe mais devagar que o conteúdo (rolagem do navegador, sem js; onde não houver, ela só sobe junto) */
@supports (animation-timeline: scroll()) {
  .h-cena.vivo .h-cena-pl { animation: hCenaRola linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
}
@keyframes hCenaRola { to { transform: translate3d(0, 10vh, 0); } }   /* leve: a dupla já saiu da janela quando a constelação chega ao topo */
/* estrelinhas que cintilam, poeira de luz e, à noite, uma estrela cadente de vez em quando */
.h-cena-vivos { position: absolute; inset: 0; }
.h-cena-vivos i { position: absolute; width: var(--t, 2px); height: var(--t, 2px); border-radius: 50%; background: #fff6e4; box-shadow: 0 0 6px 1px rgba(255,236,200,.7); opacity: .3; animation: hBrilho var(--d, 3s) ease-in-out var(--a, 0s) infinite; }
@keyframes hBrilho { 0%, 100% { opacity: .18; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
.h-cena-vivos u { position: absolute; bottom: 21%; width: var(--t, 3px); height: var(--t, 3px); border-radius: 50%; background: #ffd99c; box-shadow: 0 0 8px 2px rgba(255,196,110,.55); opacity: 0; animation: hPoeira var(--d, 9s) linear var(--a, 0s) infinite; }
@keyframes hPoeira { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 18% { opacity: .75; } 78% { opacity: .4; } 100% { opacity: 0; transform: translate3d(var(--x, 10px), -170px, 0) scale(.5); } }
.h-cadente { position: absolute; left: 70%; top: 7%; width: 120px; height: 1.6px; border-radius: 2px; transform-origin: 0 50%; rotate: 154deg; opacity: 0;
  background: linear-gradient(90deg, rgba(255,244,222,0), rgba(255,244,222,.95)); animation: hCadente 19s linear 5s infinite; }
@keyframes hCadente { 0%, 92% { opacity: 0; translate: 0 0; } 93% { opacity: 1; } 97% { opacity: .85; } 100% { opacity: 0; translate: -170px 82px; } }
.h-cena:not(.anda) *, .h-cena:not(.vivo) .h-cena-vivos * { animation-play-state: paused !important; }
/* herói fora da janela (ou o check-in por cima): a estrela do anel e o brilho do botão dourado param também */
.h-cena:not(.anda) ~ .h-heroi .cintila, .h-cena:not(.anda) ~ .h-acoes .bt.ouro::after { animation-play-state: paused; }
@media (min-width: 521px) {   /* tela larga: a imagem some nas laterais da coluna do app */
  .h-cena-pl { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
}

/* ---------- topo: marca e data ---------- */
.h-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; }
.h-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.h-marca img { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 0 10px rgba(226,189,110,.35)); }
.h-marca span { font: 600 13px/1 var(--cinzel); letter-spacing: .3em; text-transform: uppercase; padding-top: 2px; background: var(--ouro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 6px rgba(0,0,0,.75)); }
.h-data { text-align: right; font-family: var(--cinzel); text-transform: uppercase; line-height: 1.3; flex: none; text-shadow: 0 1px 8px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6); }
.h-data span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--txt-3); }
.h-data b { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; color: var(--ouro-2); }
.h-saud { font: 400 36px/1.08 var(--serif); letter-spacing: -.02em; margin: 0; text-wrap: balance; text-shadow: 0 2px 22px rgba(0,0,0,.7); }
.h-saud em { font-style: italic; color: var(--ouro-2); }

/* ---------- herói: o anel do logo ---------- */
.h-heroi { display: flex; flex-direction: column; align-items: center; margin-top: 14px; }
.h-anel { --anel: min(282px, 76vw); position: relative; width: var(--anel); aspect-ratio: 1; isolation: isolate; }   /* o js encolhe --anel em tela baixa */
.h-anel::before { content: ''; position: absolute; inset: -16%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(7,6,10,.62), rgba(7,6,10,.34) 58%, rgba(7,6,10,0)); }
.h-anel-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.h-fio { fill: none; stroke: rgba(226,189,110,.13); stroke-width: 1; }
.h-cresc-fundo { fill: rgba(226,189,110,.15); stroke: rgba(240,210,150,.26); stroke-width: .6; }
.h-cresc { fill: url(#hOuro); stroke: rgba(255,242,205,.55); stroke-width: .5; }
.h-bracos { filter: drop-shadow(0 0 7px rgba(240,200,120,.5)); }
.h-estrela { position: absolute; left: 50%; top: 7.33%; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 0 10px rgba(255,226,160,.45)); }
.h-estrela svg { width: calc(var(--anel) * .2908); height: calc(var(--anel) * .2908); }
.h-anel.cheio .h-estrela { filter: drop-shadow(0 0 16px rgba(255,226,160,.95)); }
.h-meio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 5%; }
.h-num { font: 400 calc(var(--anel) * .4184)/.86 var(--serif); letter-spacing: -.045em; font-variant-numeric: lining-nums tabular-nums; padding: 0 .04em; }   /* 118 px no anel de 282 */
.h-num[data-dig="3"] { font-size: calc(var(--anel) * .3262); }
.h-num[data-dig="4"] { font-size: calc(var(--anel) * .2553); }
.h-rot { font: 600 11.5px/1 var(--cinzel); letter-spacing: .32em; text-transform: uppercase; color: #e6c682; margin-top: 14px; padding-left: .32em; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 9px rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.5); }
/* linha de metas: sempre legível sobre o céu (Via Láctea à noite, névoa clara de dia, nuvem laranja à tarde):
   texto mais claro, sombra firme e um véu escuro e macio só atrás dela */
.h-meta { position: relative; isolation: isolate; margin: 4px 0 0; text-align: center; font-size: 14.5px; font-weight: 500; color: rgba(245,239,228,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.85), 0 0 22px rgba(0,0,0,.6); }
.h-meta::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(150%, 470px); height: 290%; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7,6,10,.5), rgba(7,6,10,.26) 52%, rgba(7,6,10,0)); }
.h-meta b { color: var(--ouro-2); font-weight: 600; }
.h-meta i { font-style: normal; color: rgba(232,200,130,.9); margin: 0 8px; }
/* de dia e à tarde o céu é claro: o escuro atrás do anel e da linha de metas fica mais forte */
.h-tela[data-cena="hoje-dia"] .h-anel::before, .h-tela[data-cena="hoje-tarde"] .h-anel::before {
  background: radial-gradient(closest-side, rgba(7,6,10,.7), rgba(7,6,10,.46) 58%, rgba(7,6,10,0)); }
.h-tela[data-cena="hoje-dia"] .h-meta::before, .h-tela[data-cena="hoje-tarde"] .h-meta::before {
  background: radial-gradient(closest-side, rgba(7,6,10,.64), rgba(7,6,10,.34) 52%, rgba(7,6,10,0)); }
.h-tela[data-cena="hoje-dia"] .h-rot, .h-tela[data-cena="hoje-tarde"] .h-rot { color: var(--ouro-2); }

/* ---------- ações ---------- */
.h-acoes { width: 100%; max-width: 340px; margin: 22px auto 0; display: grid; gap: 9px; }
.h-ck { width: 100%; min-height: 58px; font-size: 17px; }
.h-ck small { font-weight: 500; opacity: .6; font-size: 13.5px; }
.h-feito {
  display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 7px 7px 7px 9px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025)), rgba(14,12,20,.44);
  border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-luz), 0 16px 36px -18px rgba(0,0,0,.8);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.h-ok { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #0b1a12; background: radial-gradient(circle at 35% 30%, #b4f5d2, #62d59d 58%, #3a9e6f); box-shadow: 0 0 20px -3px rgba(98,213,157,.7), inset 0 1px 0 rgba(255,255,255,.5); }
.h-ok svg { width: 20px; height: 20px; stroke-width: 2.5; }
.h-feito-t { flex: 1; min-width: 0; line-height: 1.25; }
.h-feito-t b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-feito-t small { display: block; font-size: 13px; color: var(--txt-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-feito-t small i { font-style: normal; font-weight: 700; }
.h-feito .bt { flex: none; min-height: 44px; padding: 0 18px; }
.h-sos { width: 100%; }

/* ---------- alertas: uma faixa de vidro com borda de brasa ---------- */
.h-alertas {
  position: relative; max-width: 340px; margin: 22px auto 0; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,106,82,.15), rgba(255,106,82,.04) 70%), rgba(20,10,12,.44);
  border: 1px solid rgba(255,130,110,.36); box-shadow: inset 0 1px 0 rgba(255,200,190,.14), 0 20px 44px -22px rgba(255,80,60,.55);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.h-alertas::before { content: ''; position: absolute; left: 18%; right: 18%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,160,140,.8), transparent); }
.h-al-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.h-al-trilho::-webkit-scrollbar { display: none; }
.h-al { flex: 0 0 100%; scroll-snap-align: start; padding: 16px 18px 10px; min-width: 0; }
.olho.h-al-olho { color: #ff9f8f; }
.h-al h3 { margin: 9px 0 5px; font: 500 20px/1.2 var(--serif); letter-spacing: -.01em; }
.h-al p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--txt-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h-al-mais { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding-right: 8px; color: #ffb6a8; font-size: 14.5px; font-weight: 600; }
.h-al-mais svg { width: 16px; height: 16px; }
.h-al-pontos { position: absolute; right: 18px; bottom: 23px; margin: 0; }
.h-al-pontos i.on { background: #ff8f7c; box-shadow: 0 0 10px rgba(255,120,100,.6); width: 16px; }

/* ---------- sua guarda hoje: constelação + tríptico (uma peça só) ----------
   --folga: faixa de baixo da constelação onde os três vidros entram por cima (o js passa o mesmo valor ao universo) */
.h-guarda { --folga: 60px; --uni-alt: 392px; margin-top: 58px; position: relative; isolation: isolate; }
.h-guarda::before { content: ''; position: absolute; z-index: -1; left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut)); top: -70px; bottom: -40px; pointer-events: none;
  background: radial-gradient(90% 46% at 50% 40%, rgba(10,8,22,.5), transparent 75%), linear-gradient(180deg, rgba(6,5,10,0), rgba(6,5,10,.5) 16%, rgba(6,5,10,.5) 80%, rgba(6,5,10,0)); }
.h-guarda > .cab-s { margin-bottom: 4px; }
.h-universo { position: relative; z-index: 0; height: calc(var(--uni-alt) + var(--folga)); margin: 0 calc(-1 * var(--gut)); }
.h-guarda.vazia .h-vidro { min-height: 150px; }
.h-guarda.vazia .h-vidro.m { min-height: 164px; }

.h-trip { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.16fr 1fr; align-items: center; gap: 7px; perspective: 640px; perspective-origin: 50% 45%; margin: calc(-1 * var(--folga)) -6px 0; }
/* entrada dos vidros: cada um com a própria opacidade (assim o desfoque do fundo já vale durante a entrada) */
.h-trip:not(.vivo) .h-vidro { opacity: 0; }
.h-trip.vivo .h-vidro { animation: hVidroEntra 1s var(--mola) backwards; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes hVidroEntra { from { opacity: 0; translate: 0 34px; } }
.h-trip.ja .h-vidro { animation: none; }
.h-vidro {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 172px; padding: 15px 8px 15px; border-radius: 20px; color: var(--txt);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 62%), rgba(16,14,24,.42);
  border: 1px solid rgba(255,255,255,.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 26px 40px -24px rgba(0,0,0,.9);
  backdrop-filter: blur(16px) saturate(165%); -webkit-backdrop-filter: blur(16px) saturate(165%);
  transition: transform .55s var(--mola), opacity .35s, border-color .35s, box-shadow .35s, background .35s;
}
.h-vidro::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.h-vidro.e { transform-origin: 100% 50%; transform: rotateY(24deg); }
.h-vidro.d { transform-origin: 0 50%; transform: rotateY(-24deg); }
.h-vidro.m { min-height: 190px; z-index: 1; }
.h-vidro.e::after { background: linear-gradient(105deg, rgba(255,255,255,.12), transparent 42%); }
.h-vidro.d::after { background: linear-gradient(255deg, rgba(255,255,255,.12), transparent 42%); }
.h-vidro.m::after { background: radial-gradient(90% 55% at 50% 0%, rgba(255,255,255,.10), transparent 72%); }
/* o feixe da constelação pousa no vidro do meio: risco de luz na borda de cima e brilho que desce */
.h-vidro.m::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: opacity .5s;
  background: linear-gradient(90deg, transparent, rgba(255,232,180,.95), transparent) 50% 0 / 46% 1px no-repeat,
    radial-gradient(34% 30% at 50% 0%, rgba(255,210,130,.30), rgba(255,210,130,.07) 60%, transparent 100%),
    linear-gradient(180deg, rgba(255,226,165,.5), transparent) 50% 0 / 2px 46px no-repeat; }
.h-trip.focado .h-vidro.m::before { opacity: .35; }
.h-vidro.e:active { transform: rotateY(24deg) scale(.97); }
.h-vidro.d:active { transform: rotateY(-24deg) scale(.97); }
.h-vidro.m:active { transform: scale(.97); }
.h-trip.focado .h-vidro:not(.on) { opacity: .4; }
.h-vidro.on {
  border-color: color-mix(in srgb, var(--c) 70%, transparent);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 62%), rgba(16,14,24,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 24px -8px color-mix(in srgb, var(--c) 70%, transparent), 0 0 40px -8px color-mix(in srgb, var(--c) 75%, transparent), 0 26px 40px -24px rgba(0,0,0,.9);
}
.h-vidro.e.on { transform: rotateY(16deg) translateZ(14px); }
.h-vidro.d.on { transform: rotateY(-16deg) translateZ(14px); }
.h-vidro.m.on { transform: translateZ(18px); }
.h-vidro.e.on:active { transform: rotateY(16deg) translateZ(14px) scale(.97); }
.h-vidro.d.on:active { transform: rotateY(-16deg) translateZ(14px) scale(.97); }
.h-vidro.m.on:active { transform: translateZ(18px) scale(.97); }
.h-vidro > * { position: relative; }   /* o conteúdo fica acima da luz do ::before */
.h-v-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: radial-gradient(circle, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%); }
.h-v-ic svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent)); }
.h-v-nm { font: 600 10.5px/1.25 var(--cinzel); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-2); min-height: 27px; display: flex; align-items: center; justify-content: center; margin: 5px 0 3px; }
.h-v-md { font: 400 38px/1 var(--serif); color: var(--c); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 0 22px color-mix(in srgb, var(--c) 50%, transparent); }
.h-vidro.m .h-v-md { font-size: 46px; }
.h-v-vr { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; color: var(--txt-3); margin-top: 7px; min-height: 17px; }
.h-v-vr svg { width: 13px; height: 13px; stroke-width: 2.4; }
.h-v-vr.sobe { color: var(--verde); }
.h-v-vr.desce { color: #ff8a7f; }
.h-v-br { display: block; width: 64%; height: 3px; border-radius: 9px; background: rgba(255,255,255,.1); margin-top: auto; overflow: hidden; }
.h-v-br i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--c); transform-origin: left center; transition: transform 1.1s var(--mola); }
.h-traco { display: block; width: 26px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--c) 50%, transparent); margin: 18px 0 17px; }
.h-trip-explica { text-align: center; color: var(--txt-2); font-size: 14.5px; line-height: 1.45; margin: 18px auto 0; max-width: 320px; min-height: 42px; text-wrap: balance; transition: opacity .17s; }
.h-trip-explica.troca { opacity: 0; }
.h-trip-explica.cor { color: color-mix(in srgb, var(--c) 55%, var(--txt)); }

/* links das seções ("O que é", "Como é calculado", "Ver loja"): alvo de toque de 44 px sem mexer no alinhamento */
.h-tela .cab-s .acao { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; margin: 0 -6px -10px 0; padding: 0 6px 0 14px; }   /* z-index: a constelação logo abaixo não rouba a parte de baixo do toque */
.h-risco > .cab-s .acao { margin: -15px -6px -15px 0; }
.h-guarda > .cab-s .acao { margin-bottom: -4px; }   /* termina onde a constelação começa (o toque inteiro fica no botão) */

/* ---------- risco de recaída: sem caixa ---------- */
.h-risco { margin-top: 62px; }
.h-risco > .cab-s { align-items: center; margin-bottom: 10px; }
.h-rk { display: block; cursor: pointer; border-radius: 18px; outline: none; transition: transform .2s var(--mola); }
.h-rk:active { transform: scale(.985); }
.h-rk:focus-visible { box-shadow: 0 0 0 2px rgba(217,180,106,.5); }
.h-rk-topo { display: flex; align-items: center; gap: 18px; }
.h-rk-n { font: 400 70px/.9 var(--serif); color: var(--c); letter-spacing: -.035em; font-variant-numeric: lining-nums; text-shadow: 0 0 34px color-mix(in srgb, var(--c) 45%, transparent); flex: none; }
.h-rk-n small { font-size: 26px; letter-spacing: 0; margin-left: 3px; vertical-align: top; position: relative; top: 9px; opacity: .75; }
.h-rk-nv { min-width: 0; }
.h-rk-nv span { font: 600 13.5px/1.2 var(--cinzel); letter-spacing: .18em; text-transform: uppercase; color: var(--c); }
.h-rk-nv p { margin: 6px 0 0; font-size: 14.5px; color: var(--txt-2); line-height: 1.42; }
.h-regua { position: relative; height: 18px; margin: 22px 0 4px; }
.h-rg-base, .h-rg-cheio { position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 9px; background: linear-gradient(90deg, #62d59d, #9fe0b9 22%, #f4c75a 50%, #f39a5b 72%, #ff6a5f); }
.h-rg-base { opacity: .2; }
.h-rg-cheio { clip-path: inset(0 100% 0 0 round 9px); transition: clip-path 1.2s var(--mola) .2s; }
.h-rg-marca { position: absolute; top: 1px; left: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(7,6,10,.85), 0 0 16px 4px color-mix(in srgb, var(--c) 80%, transparent); transition: left 1.2s var(--mola) .2s; }
.h-risco.visto .h-rg-cheio, .h-regua.vai .h-rg-cheio { clip-path: inset(0 calc(100% - var(--v)) 0 0 round 9px); }
.h-risco.visto .h-rg-marca, .h-regua.vai .h-rg-marca { left: var(--v); }
.h-regua.fantasma .h-rg-base { opacity: .14; }
.h-fat { margin-top: 16px; border-top: 1px solid var(--linha); }
.h-fat > div { display: flex; align-items: center; gap: 12px; padding: 12px 2px; font-size: 14.5px; line-height: 1.35; color: var(--txt-2); }
.h-fat > div > i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.h-fat > div > span { flex: 1; min-width: 0; }
.h-fat > div > b { color: var(--txt); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.h-rk-de { font-size: 12.5px; color: var(--txt-3); margin: 8px 2px 0; }
.h-rk-vazio p { color: var(--txt-2); font-size: 15px; margin: 4px 0 0; text-wrap: pretty; }

/* ---------- santo de vez em quando ---------- */
.h-santo { position: relative; text-align: center; margin: 62px auto 0; max-width: 330px; padding: 0 8px; }
.h-santo-foto { position: relative; display: block; width: 82px; height: 82px; margin: 0 auto 14px; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, #fbe7b0, #8f6a2c, #e9cb86, #a57d3a, #fbe7b0); box-shadow: 0 0 0 1px rgba(255,230,170,.22), 0 0 38px -2px rgba(226,189,110,.5), 0 0 90px -10px rgba(226,189,110,.35); }
.h-santo-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.h-santo-foto::before { content: ''; position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, transparent 54%, rgba(255,226,160,.14) 62%, transparent 72%); pointer-events: none; }
.h-santo-nm { font: 600 12px/1.2 var(--cinzel); letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); }
.h-santo-or { font: italic 400 19px/1.45 var(--serif); color: var(--txt); margin: 10px 0 0; text-wrap: balance; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.h-santo-x { position: absolute; top: 0; right: -3px; width: 44px; height: 44px; }
.h-santo-x svg { width: 17px; height: 17px; }
.h-santo.sai { opacity: 0; transform: scale(.96); filter: blur(4px); transition: opacity .4s, transform .45s var(--mola), filter .4s; }

/* ---------- Forja: faixa de cinema ---------- */
.h-forja { position: relative; display: block; width: calc(100% + 2 * var(--gut)); margin: 64px calc(-1 * var(--gut)) 0; min-height: 404px; text-align: center; color: var(--txt); isolation: isolate; }
.h-fj-fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 19%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 19%, #000 70%, transparent 100%); }
.h-fj-fundo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(75% 52% at 50% 34%, transparent 40%, rgba(7,6,10,.5) 100%), linear-gradient(180deg, transparent 40%, rgba(7,6,10,.5) 56%, rgba(7,6,10,.78) 76%); }
.h-fj-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; transform: scale(1.06); transition: transform 1.6s var(--mola); }
.h-forja:active .h-fj-img { transform: scale(1.1); }
.h-fj-txt { position: relative; display: flex; flex-direction: column; align-items: center; padding: 222px 24px 34px; }
.olho.h-fj-olho { color: #ffa36b; text-shadow: 0 1px 6px rgba(0,0,0,.95), 0 0 16px rgba(255,120,50,.55); }
.h-fj-tit { display: block; font: 500 36px/1.05 var(--serif); letter-spacing: -.015em; margin: 8px 0 6px; text-shadow: 0 0 30px rgba(255,120,50,.55), 0 2px 12px rgba(0,0,0,.7); }
.h-fj-sub { display: block; max-width: 300px; font-size: 14.5px; line-height: 1.45; color: var(--txt-2); text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.h-fj-esq { display: block; width: 200px; height: 14px; margin: 8px auto 46px; border-radius: 8px; }
.h-metal { display: block; width: min(232px, 70%); height: 6px; margin: 16px auto 18px; border-radius: 9px; background: rgba(24,12,8,.78); box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 0 0 1px rgba(255,140,80,.2); overflow: hidden; }
.h-metal i { position: relative; display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5a1203, #c2340c 32%, #ff6a1f 66%, #ffb04a 86%, #fff1c4); box-shadow: 0 0 10px rgba(255,110,40,.9); overflow: hidden; }
.h-metal i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,244,210,.75), transparent) no-repeat; background-size: 45% 100%; animation: hCalor 2.6s ease-in-out infinite; }
@keyframes hCalor { from { background-position: -80% 0; } to { background-position: 180% 0; } }
.h-forja:not(.anda) .h-metal i::after { animation-play-state: paused; }
.h-forja .bt.fogo { pointer-events: none; margin-top: 18px; }
.h-forja .h-metal + .bt.fogo { margin-top: 0; }
.h-brasas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.h-brasas i { position: absolute; bottom: 26%; width: var(--t, 3px); height: var(--t, 3px); border-radius: 50%; background: #ffc07a; box-shadow: 0 0 6px 1px rgba(255,140,60,.95); opacity: 0; animation: hSobe var(--d, 4s) linear var(--a, 0s) infinite; animation-play-state: paused; }
.h-forja.anda .h-brasas i { animation-play-state: running; }
@keyframes hSobe { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 75% { opacity: .75; } 100% { transform: translate3d(var(--x, 10px), calc(-1 * var(--y, 160px)), 0) scale(.35); opacity: 0; } }

/* ---------- loja: livros 3D ---------- */
.h-loja { margin-top: 56px; }
.h-livros { gap: 20px; padding-top: 12px; padding-bottom: 8px; }
.h-livro { flex: none; width: 132px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; scroll-snap-align: start; }
.h-lv { position: relative; display: block; width: 118px; height: 168px; margin: 0 0 16px 6px; perspective: 720px; }
.h-lv3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(32deg) rotateX(4deg); transition: transform .7s var(--mola); }
.h-livro:active .h-lv3d { transform: rotateY(16deg) scale(.97); }
.h-lv-capa, .h-lv-tras { position: absolute; inset: 0; border-radius: 3px 7px 7px 3px; }
.h-lv-capa { transform: translateZ(10px); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px 14px 26px 18px;
  background: radial-gradient(130% 85% at 28% 12%, hsl(var(--h) 34% 24%), hsl(var(--h) 40% 12%) 58%, hsl(var(--h) 44% 6%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -20px 30px -20px rgba(0,0,0,.7); }
.h-lv-capa::before { content: ''; position: absolute; inset: 0; opacity: .18; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
.h-lv-capa::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.5) 0, rgba(255,255,255,.10) 5px, rgba(0,0,0,.28) 8px, transparent 15px), linear-gradient(115deg, rgba(255,255,255,.10), transparent 40%); }
.h-lv-moldura { position: absolute; inset: 8px 8px 8px 13px; border: 1px solid rgba(226,189,110,.55); border-radius: 2px 4px 4px 2px; box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px rgba(226,189,110,.22); pointer-events: none; }
.h-lv-tit { position: relative; font: 600 10.5px/1.35 var(--cinzel); letter-spacing: .07em; text-transform: uppercase; text-align: center; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; background: var(--ouro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.h-lv-assina { position: absolute; bottom: 15px; left: 0; right: 0; padding-left: 5px; text-align: center; font: 600 6.5px/1 var(--cinzel); letter-spacing: .34em; text-transform: uppercase; color: rgba(226,189,110,.62); }
.h-lv-capa .estrela4 { position: relative; }
.h-lv-capa.com-banner { justify-content: flex-start; padding: 0 0 12px; gap: 10px; }
.h-lv-capa.com-banner img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; flex: none; }
.h-lv-capa.com-banner .h-lv-tit { padding: 0 10px 0 14px; }
.h-lv-tras { transform: translateZ(-10px); background: hsl(var(--h) 40% 7%); }
.h-lv-lomb { position: absolute; top: 0; left: 0; width: 20px; height: 100%; transform-origin: 0 50%; transform: translateZ(10px) rotateY(90deg); border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, hsl(var(--h) 44% 6%), hsl(var(--h) 34% 20%) 45%, hsl(var(--h) 44% 7%)); }
.h-lv-lomb::after { content: ''; position: absolute; left: 0; right: 0; top: 18%; height: 1px; background: rgba(226,189,110,.5); box-shadow: 0 6px 0 rgba(226,189,110,.35), 0 104px 0 rgba(226,189,110,.35), 0 110px 0 rgba(226,189,110,.5); }
.h-lv-pag { position: absolute; top: 3px; bottom: 3px; right: 0; width: 16px; transform-origin: 100% 50%; transform: translateZ(8px) rotateY(-90deg); background: repeating-linear-gradient(90deg, #efe4cc 0 1px, #c9bb9b 1px 2px); }
.h-lv-sombra { position: absolute; left: 4px; right: -16px; bottom: -14px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); filter: blur(3px); }
.h-lv-txt { display: block; padding: 0 2px; }
.h-lv-txt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.3; }
.h-lv-txt em { display: block; font-style: normal; font-size: 13.5px; color: var(--txt-2); line-height: 1.4; margin-top: 4px; }
.h-lv-txt small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ouro-2); }
.h-livros.solo .h-livro { width: 100%; flex-direction: row; align-items: center; gap: 22px; }
.h-livros.solo .h-lv { margin-bottom: 8px; flex: none; }
.h-livros.solo .h-lv-txt b { font: 500 21px/1.2 var(--serif); -webkit-line-clamp: 3; }

/* materiais: o livro e o preço são os da loja (css/loja.css); com dois livros a fileira fica no meio */
.h-loja .lj-prateleira.h-dois { justify-content: center; }
.h-loja .lj-item-txt b { -webkit-line-clamp: 3; }   /* o nome inteiro do material, sem reticências */

/* ---------- frase do dia ---------- */
.h-frase { text-align: center; margin: 70px auto 4px; max-width: 336px; }
.h-frase .estrela4 { margin: 0 auto 12px; }
.h-frase q { display: block; font: italic 400 23px/1.42 var(--serif); letter-spacing: -.005em; color: var(--txt); quotes: '\201C' '\201D'; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.h-frase cite { display: block; margin-top: 14px; font: 600 11px/1.3 var(--cinzel); letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); font-style: normal; }

/* =====================================================================================
   FOLHAS da tela Hoje
   ===================================================================================== */
.hf-pilar .hf-topo { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; }
.hf-ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--c); background: radial-gradient(circle, color-mix(in srgb, var(--c) 24%, transparent), color-mix(in srgb, var(--c) 6%, transparent) 72%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent), 0 0 26px -6px color-mix(in srgb, var(--c) 60%, transparent); }
.hf-ico svg { width: 26px; height: 26px; }
.hf-tit { flex: 1; min-width: 0; }
.hf-tit .olho { color: var(--c); }
.f-painel .hf-tit h3 { margin: 4px 0 0; font-size: 23px; }
.hf-nota { flex: none; text-align: center; min-width: 54px; }
.hf-nota b { display: block; font: 400 46px/1 var(--serif); color: var(--cn); text-shadow: 0 0 22px color-mix(in srgb, var(--cn) 45%, transparent); }
.hf-nota small { display: block; font: 600 11px/1 var(--cinzel); letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); margin-top: 4px; }
.hf-explica { color: var(--txt-2); margin: 0 0 16px; font-size: 15px; line-height: 1.5; }
.hf-calc { font-size: 13px; color: var(--txt-3); margin: -8px 0 16px; }
.hf-orienta { position: relative; padding: 14px 16px 15px 20px; border-radius: 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 15%, transparent), transparent 85%); }
.hf-orienta::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.hf-orienta .olho { color: var(--c); margin-bottom: 8px; }
.hf-orienta p { margin: 0; color: var(--txt); font-size: 15px; line-height: 1.55; }
.hf-graf { margin-top: 24px; }
.hf-graf .olho { color: var(--txt-3); margin-bottom: 8px; }
.hf-graf .grafico { width: 100%; overflow: visible; }
.hf-graf .grafico .grade-l { stroke: rgba(255,255,255,.06); }
.hf-graf .grafico .eixo-t { font: 500 10px var(--sans); fill: var(--txt-4); }

.hf-ajuda > .olho { margin-top: 6px; }
.f-painel .hf-ajuda h3, .f-painel .hf-alerta h3 { margin-top: 8px; }
.hf-ilus { width: 100%; max-width: 340px; display: block; margin: 0 auto 6px; overflow: visible; }
.hf-camadas { border-top: 1px solid var(--linha); }
.hf-cam { display: flex; gap: 14px; align-items: flex-start; padding: 14px 2px; }
.hf-cam-ic { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--c); background: radial-gradient(circle, color-mix(in srgb, var(--c) 24%, transparent), transparent 72%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.hf-cam-ic svg { width: 20px; height: 20px; }
.hf-cam b { display: block; font-weight: 600; font-size: 16px; color: var(--c); }
.hf-cam em { display: block; font: 600 11px/1.3 var(--cinzel); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); margin: 3px 0 5px; }
/* os nomes das pontas, iguais aos da constelação */
.hf-pontas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hf-pontas i { font-style: normal; font-size: 13px; line-height: 1.2; padding: 4px 10px; border-radius: 99px; color: color-mix(in srgb, var(--c) 72%, #fff);
  background: color-mix(in srgb, var(--c) 11%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.hf-cam small { display: block; font-size: 14px; line-height: 1.45; color: var(--txt-2); }
.hf-nota-l { font-size: 14px; line-height: 1.5; color: var(--txt-2); margin: 6px 0 0; padding: 14px 16px; border-radius: 16px; background: rgba(217,180,106,.07); border: 1px solid rgba(217,180,106,.16); }
.hf-itens { border-top: 1px solid var(--linha); }
.hf-itens > div { padding: 13px 2px; }
.hf-itens b { display: block; font-weight: 600; font-size: 15.5px; }
.hf-itens small { display: block; font-size: 14px; line-height: 1.45; color: var(--txt-2); margin-top: 3px; }
.hf-niveis { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; margin-top: 16px; }
.hf-niveis span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--txt-2); }
.hf-niveis i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.hf-rk > .olho { color: var(--c); margin: 6px 0 14px; }
.hf-rk .h-regua { margin-top: 24px; }
.hf-sub-olho { color: var(--txt-3) !important; margin: 22px 0 2px; }
.hf-rk .h-fat { margin-top: 8px; }
.hf-bts { display: grid; gap: 10px; margin-top: 22px; }
.hf-al-txt { color: var(--txt); font-size: 16px; line-height: 1.6; margin: 8px 0 0; }

@media (max-width: 370px) {
  .h-guarda { --folga: 56px; --uni-alt: 364px; }
  .h-saud { font-size: 33px; }
  .h-num { font-size: calc(var(--anel) * .3947); }
  .h-trip { gap: 5px; margin: calc(-1 * var(--folga)) -4px 0; }
  .h-vidro { padding-left: 6px; padding-right: 6px; }
  .h-v-md { font-size: 34px; }
  .h-vidro.m .h-v-md { font-size: 41px; }
  .h-v-nm { font-size: 10px; letter-spacing: .06em; }
  .h-rk-n { font-size: 62px; }
}
@media (max-height: 700px) {   /* tela baixa (iPhone SE): o topo encolhe um pouco para o guardião aparecer acima dos botões */
  .h-tela { padding-top: calc(var(--st) + 8px); }
  .h-topo { margin-bottom: 12px; }
  .h-saud { font-size: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .h-brasas, .h-cena-vivos u, .h-cadente { display: none; }
  .h-vidro, .h-v-br i, .h-rg-cheio, .h-rg-marca { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .h-feito, .h-alertas, .h-vidro { background: #15131c; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* =====================================================================================
   COMPARTILHADO (não mexer sem avisar): classes antigas que outras telas ainda usam.
   .anel/.meio (Forja), .teia (teiaSVG, resumo do check-in), .barrinha (Forja),
   .risco/.medidor/.fatores/.fator (resumo do check-in e Evolução).
   ===================================================================================== */
.anel { position: relative; width: 196px; height: 196px; margin: 0 auto 4px; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.anel .trilho { stroke: rgba(255,255,255,.07); }
.anel .arco { transition: stroke-dashoffset 1.2s var(--mola); filter: drop-shadow(0 0 10px rgba(217,180,106,.45)); }
.anel .meio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anel .meio b { font: 600 64px/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.anel .meio span { font-size: 14px; color: var(--txt-2); margin-top: 4px; }
.risco { display: flex; align-items: center; gap: 16px; }
.medidor { position: relative; width: 112px; height: 66px; flex: none; }
.medidor svg { width: 112px; height: 66px; overflow: visible; }
.medidor b { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 600 28px/1 var(--serif); }
.risco .txt h3 { font-size: 20px; }
.risco .txt p { font-size: 14px; }
.fatores { margin-top: 14px; display: grid; gap: 8px; }
.fator { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--txt-2); padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); }
.fator i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fator b { color: var(--txt); font-weight: 600; margin-left: auto; white-space: nowrap; font-size: 13px; }
.teia { width: 100%; max-width: 360px; margin: 0 auto; overflow: visible; }
.teia .rot { font: 600 11.5px var(--sans); fill: var(--txt-2); }
.teia .rot-v { font: 700 13px var(--sans); }
.teia .alvo { cursor: pointer; }
.teia .pulsa { animation: pulsa 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulsa { 50% { transform: scale(1.7); opacity: 0; } }
.barrinha { height: 6px; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; }
.barrinha i { display: block; height: 100%; border-radius: 9px; background: var(--forja); transition: width .8s var(--mola); }