/* ============================================================================
   HOTSPACE — COMPONENTES
   Blocos de UI reutilizáveis, construídos sobre os tokens do design system.
   ========================================================================== */

/* ---- Layout de app (mobile-first, centralizado) --------------------------- */
.app {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.app--wide { max-width: var(--container-wide); }
.app__main { flex: 1; padding-block: var(--sp-6); }
.stack   { display: flex; flex-direction: column; }
.stack-2 > * + * { margin-top: var(--sp-2); }
.stack-3 > * + * { margin-top: var(--sp-3); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-6 > * + * { margin-top: var(--sp-6); }
.stack-8 > * + * { margin-top: var(--sp-8); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.spacer { flex: 1 1 auto; }

/* ---- Ícones --------------------------------------------------------------- */
.icon {
  width: 1.25em; height: 1.25em;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -0.15em;
  transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.75em; height: 1.75em; }
.icon--xl { width: 2.5em; height: 2.5em; }
/* estado "preenchido" — usado em interação/conquista (outline → filled) */
.icon--filled { fill: currentColor; stroke: none; }
.is-active > .icon,
.icon.is-filled { fill: currentColor; stroke-width: 0; }

/* ---- Marca / logo --------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); }
/* símbolo (flame + chevrons) como background — troca por tema para não sumir
   no fundo grafite do modo escuro */
.brand__mark {
  height: 34px; width: auto; aspect-ratio: 118.57 / 314.96; flex: none;
  background: url("../img/logo-mark.svg") center / contain no-repeat;
}
.brand__word {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0;
  line-height: 1;
  color: var(--text);
}
.brand__word b { color: var(--brand); font-weight: inherit; }

/* símbolo creme no modo escuro */
:root[data-theme="dark"] .brand__mark,
:root[data-theme="dark"] .auth__mark { background-image: url("../img/logo-mark-cream.svg"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__mark,
  :root:not([data-theme="light"]) .auth__mark { background-image: url("../img/logo-mark-cream.svg"); }
}

/* ---- Botões --------------------------------------------------------------- */
.btn {
  --_bg: var(--brand);
  --_fg: var(--on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85rem 1.4rem;
  min-height: 52px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary {
  --_bg: var(--brand);
  background-image: linear-gradient(135deg, var(--red-400), var(--red-600));
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { filter: brightness(1.05); box-shadow: var(--shadow-lg); }

.btn--heat {
  --_fg: #fff;
  background-image: linear-gradient(100deg, var(--quente) 0%, var(--vulcanico) 55%, var(--incandescente) 120%);
  box-shadow: var(--shadow-brand);
}
.btn--heat:hover { filter: brightness(1.06) saturate(1.05); box-shadow: var(--shadow-lg); }

.btn--security {
  --_bg: var(--security);
  --_fg: var(--on-security);
}
.btn--security:hover { background: var(--security-hover); }

.btn--ghost {
  --_bg: transparent;
  --_fg: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--text-muted); }

.btn--subtle {
  --_bg: var(--brand-soft);
  --_fg: var(--brand);
}
.btn--subtle:hover { background: color-mix(in srgb, var(--brand-soft) 70%, var(--brand) 12%); }

.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: 0.55rem 1rem; font-size: var(--fs-sm); }
.btn--lg { min-height: 58px; padding: 1rem 1.75rem; font-size: var(--fs-lg); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-icon:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }

/* ---- Cards ---------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--pad-lg { padding: var(--sp-8); }
.card--pad-sm { padding: var(--sp-4); }
.card--brand {
  border-color: var(--brand-border);
  background: linear-gradient(180deg, var(--brand-soft), var(--surface) 60%);
}
.card--security {
  border-color: var(--security-border);
  background: var(--security-soft);
}
.card--interactive { cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-border); }

/* ---- Badges / chips ------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-soft);
  line-height: 1.2;
}
.badge--brand    { background: var(--brand-soft); color: var(--brand); }
.badge--gold     { background: var(--accent-soft); color: var(--accent-ink); }
.badge--security { background: var(--security-soft); color: var(--security); }
.badge .icon { width: 0.95em; height: 0.95em; }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* ---- Formulários ---------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-soft); }
.input, .select, .textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 52px;
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.textarea { min-height: 96px; padding-top: 0.75rem; resize: vertical; line-height: var(--lh-normal); }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-right: 3rem; }
.input-group__btn {
  position: absolute; right: 0.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; border-radius: var(--radius-sm);
}
.input-group__btn:hover { color: var(--text); background: var(--surface-2); }
.hint { font-size: var(--fs-caption); color: var(--text-muted); }
.hint--security { color: var(--security); display: inline-flex; gap: var(--sp-1); align-items: center; }

/* Segmentos (toggle Entrar / Criar conta, etc.) */
.segment {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--surface-inset);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
}
.segment__btn {
  flex: 1;
  padding: 0.65rem 1rem;
  border: none; background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.segment__btn[aria-selected="true"] {
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}

/* Escolha de canal / opção em grade (radio-cards) */
.choice {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.choice:hover { border-color: var(--brand-border); background: var(--brand-soft); }
.choice:active { transform: scale(0.99); }
.choice__ic {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text-soft);
}
.choice__ic .icon { width: 22px; height: 22px; }

/* ---- Avatares ------------------------------------------------------------- */
.avatar {
  width: 48px; height: 48px;
  border-radius: var(--radius-pill);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--brand);
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.avatar--sm { width: 34px; height: 34px; font-size: var(--fs-sm); }
.avatar--lg { width: 64px; height: 64px; font-size: var(--fs-h4); }
.avatar--p1 { background: linear-gradient(140deg, var(--red-400), var(--red-600)); }
.avatar--p2 { background: linear-gradient(140deg, var(--char-500), var(--char-800)); }
.avatar-pair { display: inline-flex; }
.avatar-pair .avatar + .avatar { margin-left: -14px; }

/* ---- Termômetro (o elemento-assinatura do produto) ------------------------ */
.thermo {
  display: flex;
  align-items: stretch;
  gap: var(--sp-5);
}
.thermo__tube {
  position: relative;
  width: 46px; flex: none;
  align-self: stretch;
  min-height: 220px;
}
.thermo__track {
  position: absolute; inset: 0;
  background: var(--surface-inset);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.thermo__fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--fill, 40%);
  background: linear-gradient(0deg,
      var(--gelo) 0%, var(--morno) 32%, var(--quente) 58%,
      var(--vulcanico) 80%, var(--incandescente) 100%);
  border-radius: var(--radius-pill);
  transition: height var(--dur-slow) var(--ease);
  box-shadow: 0 0 24px 2px color-mix(in srgb, var(--quente) 45%, transparent);
}
.thermo__fill::after { /* brilho no topo do "mercúrio" */
  content: "";
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  width: 60%; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.55); filter: blur(3px);
}
.thermo__scale { display: flex; flex-direction: column-reverse; justify-content: space-between; padding-block: 2px; }
.thermo__tick {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.thermo__tick[data-on="true"] { color: var(--text); font-weight: var(--fw-semibold); }
.thermo__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); flex: none; }
.thermo__tick[data-level="gelo"]          .thermo__dot { background: var(--gelo); }
.thermo__tick[data-level="morno"]         .thermo__dot { background: var(--morno); }
.thermo__tick[data-level="quente"]        .thermo__dot { background: var(--quente); }
.thermo__tick[data-level="vulcanico"]     .thermo__dot { background: var(--vulcanico); }
.thermo__tick[data-level="incandescente"] .thermo__dot { background: var(--incandescente); }

/* barra de calor horizontal (progressão de intensidade da rodada) */
.heatbar { display: flex; flex-direction: column; gap: var(--sp-2); }
.heatbar__track {
  height: 10px; border-radius: var(--radius-pill);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.heatbar__fill {
  height: 100%;
  width: var(--fill, 30%);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--morno), var(--quente) 60%, var(--vulcanico));
  transition: width var(--dur-slow) var(--ease);
}
.heatbar__labels { display: flex; justify-content: space-between; }

/* pílula de nível */
.level-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.level-pill[data-level="gelo"]          { background: color-mix(in srgb, var(--gelo) 18%, var(--surface)); color: color-mix(in srgb, var(--gelo) 65%, var(--text)); border-color: color-mix(in srgb, var(--gelo) 35%, transparent); }
.level-pill[data-level="morno"]         { background: color-mix(in srgb, var(--morno) 20%, var(--surface)); color: color-mix(in srgb, var(--morno) 60%, var(--n-900)); border-color: color-mix(in srgb, var(--morno) 40%, transparent); }
.level-pill[data-level="quente"]        { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-border); }
.level-pill[data-level="vulcanico"]     { background: var(--secondary-soft); color: var(--secondary); border-color: color-mix(in srgb, var(--secondary) 40%, transparent); }
.level-pill[data-level="incandescente"] { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---- Progresso / passos --------------------------------------------------- */
.progress { display: flex; align-items: center; gap: var(--sp-3); }
.progress__track { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--surface-inset); overflow: hidden; }
.progress__fill { height: 100%; width: var(--v, 0%); border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width var(--dur-slow) var(--ease); }
.progress__label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; }

.dots { display: inline-flex; gap: var(--sp-2); }
.dots__d { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: all var(--dur) var(--ease); }
.dots__d[data-on="true"] { background: var(--brand); width: 22px; border-radius: var(--radius-pill); }

/* ---- Opções de resposta (questionário) ------------------------------------ */
/* mapeiam answer_type_enum: gosto | topo_experimentar | nao_sei | nao_gosto  */
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.answer {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.answer:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.answer:active { transform: translateY(0) scale(0.99); }
.answer__ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-soft); transition: inherit; }
.answer__ic .icon { width: 22px; height: 22px; }
.answer__label { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.answer__hint { font-size: 0.72rem; color: var(--text-muted); }

.answer[data-answer="gosto"].is-selected,
.answer[data-answer="gosto"]:hover           { border-color: var(--brand); background: var(--brand-soft); }
.answer[data-answer="gosto"].is-selected .answer__ic { background: var(--brand); color: #fff; }

.answer[data-answer="topo_experimentar"].is-selected,
.answer[data-answer="topo_experimentar"]:hover { border-color: var(--accent); background: var(--accent-soft); }
.answer[data-answer="topo_experimentar"].is-selected .answer__ic { background: var(--accent); color: #3a2a09; }

.answer[data-answer="nao_sei"].is-selected,
.answer[data-answer="nao_sei"]:hover          { border-color: var(--security); background: var(--security-soft); }
.answer[data-answer="nao_sei"].is-selected .answer__ic { background: var(--security); color: var(--on-security); }

.answer[data-answer="nao_gosto"].is-selected,
.answer[data-answer="nao_gosto"]:hover        { border-color: var(--text-muted); background: var(--surface-2); }
.answer[data-answer="nao_gosto"].is-selected .answer__ic { background: var(--text-soft); color: var(--surface); }
.answer.is-selected { box-shadow: var(--shadow-md); }

/* ---- Nota de segurança (zona de proteção — azul-petróleo) ----------------- */
.safenote {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--security-soft);
  border: 1px solid var(--security-border);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.safenote__ic { color: var(--security); flex: none; margin-top: 1px; }
.safenote__ic .icon { width: 20px; height: 20px; }
.safenote b { color: var(--security); font-weight: var(--fw-semibold); }

/* ---- Navegação inferior (tab bar) ----------------------------------------- */
.tabbar {
  position: sticky; bottom: 0; z-index: var(--z-nav);
  display: flex; justify-content: space-around;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-2) max(var(--sp-2), env(safe-area-inset-bottom));
  margin-inline: calc(var(--sp-5) * -1);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--border);
}
.tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--sp-2) var(--sp-1);
  border: none; background: none; cursor: pointer;
  color: var(--text-muted);
  font-size: 0.7rem; font-weight: var(--fw-semibold);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease);
}
.tab .icon { width: 24px; height: 24px; }
.tab[aria-current="page"] { color: var(--brand); }
.tab[aria-current="page"] .icon { fill: var(--brand-soft); }
.tab--security[aria-current="page"] { color: var(--security); }

/* ---- Topbar --------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-5) var(--sp-2);
}

/* ---- Cabeçalho de rodada (voltar / progresso) ----------------------------- */
.roundhead { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-5) var(--sp-2); }

/* ---- Divisor com rótulo --------------------------------------------------- */
.divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-muted); font-size: var(--fs-caption); }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }

/* ---- Link copiável -------------------------------------------------------- */
.copybox {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  border: 1.5px dashed var(--brand-border);
  border-radius: var(--radius-md);
  background: var(--brand-soft);
}
.copybox__url { flex: 1; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Lista de itens (categorias / conquistas) ----------------------------- */
.tile {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left;
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: inherit; font: inherit;
}
.tile__ic {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--brand-soft); color: var(--brand);
}
.tile__ic--gold     { background: var(--accent-soft); color: var(--accent-ink); }
.tile__ic--security { background: var(--security-soft); color: var(--security); }
.tile__ic--locked   { background: var(--surface-3); color: var(--text-muted); }
.tile__body { flex: 1; min-width: 0; }
.tile__title { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.tile__sub { font-size: var(--fs-caption); color: var(--text-muted); }

/* grade de conquistas (brasas) */
.ember-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.ember {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  text-align: center;
}
.ember__coin {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.ember__coin .icon { width: 26px; height: 26px; }
.ember--on .ember__coin {
  background: linear-gradient(140deg, var(--incandescente), var(--red-600));
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--red-500) 42%, transparent);
}
.ember--on .ember__coin .icon { fill: currentColor; stroke: none; }
.ember__name { font-size: 0.68rem; color: var(--text-muted); line-height: 1.2; }
.ember--on .ember__name { color: var(--text-soft); font-weight: var(--fw-medium); }

/* ---- Utilidades diversas -------------------------------------------------- */
.pill-count { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.center-screen { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-5); }
.maxw-txt { max-width: 34ch; }
.glow-ring {
  position: relative;
}
.glow-ring::before {
  content:""; position:absolute; inset:-1px; border-radius: inherit;
  background: linear-gradient(120deg, var(--quente), var(--incandescente));
  z-index:-1; filter: blur(14px); opacity: 0.5;
}

/* animação sutil de "brasa" para o mercúrio/topo do termômetro */
@keyframes emberPulse {
  0%,100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%     { opacity: 0.9;  transform: translateX(-50%) scale(1.15); }
}
.thermo__fill::after { animation: emberPulse 2.6s var(--ease) infinite; }

@keyframes floatUp { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:none;} }
.animate-in { animation: floatUp var(--dur-slow) var(--ease) both; }
.delay-1 { animation-delay: 60ms; }
.delay-2 { animation-delay: 120ms; }
.delay-3 { animation-delay: 180ms; }
.delay-4 { animation-delay: 240ms; }