/* ═══════════════════════════════════════════════
   dreamQ · PSYQUANTIC — silêncio visual
   Paleta Alvorada (decidida 22/jul/2026):
   off-white quente + azul profundo como tinta + ouro
   ═══════════════════════════════════════════════ */

:root {
  --fundo: #F5F0E8;          /* off-white quente PSYQUANTIC */
  --fundo-medio: #DFE7EE;    /* superfícies em azul pastel */
  --fundo-claro: #C9D6E0;
  --fundo-glow: #F7EBD2;     /* brilho dourado do amanhecer, no topo */
  --verde-mineral: #7A9E8A;
  --tinta: #1C2B3A;          /* azul profundo — agora é a tinta, não o fundo */
  --tinta-suave: #2E4057;
  --acento: #8F6E3B;         /* ouro matte, escurecido pra ler no claro */
  --acento-claro: #8F6E3B;
  --acento-palido: #7C5F31;
  --neutro: #5A6F81;         /* cinza azulado escurecido */

  /* orbe: blobs pastéis, tinta do ícone e sombra */
  --orbe-a: #E8D5A8;
  --orbe-b: #A9C6B4;
  --orbe-c: #B7C7D4;
  --orbe-d: #D4AF78;
  --tinta-orbe: #1C2B3A;
  --sombra-orbe: rgba(28, 43, 58, 0.18);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-weight: 300;
  /* aurora alvorada (ref. NIX): âmbar, verde mineral e azul névoa se dissolvendo no off-white */
  background:
    radial-gradient(90% 70% at 88% -12%, rgba(226, 172, 88, 0.40) 0%, transparent 58%),
    radial-gradient(75% 60% at -12% 18%, rgba(150, 188, 166, 0.42) 0%, transparent 60%),
    radial-gradient(85% 65% at 112% 88%, rgba(163, 185, 205, 0.45) 0%, transparent 60%),
    radial-gradient(60% 50% at 12% 108%, rgba(226, 200, 142, 0.38) 0%, transparent 62%),
    linear-gradient(160deg, #F9F1DF 0%, var(--fundo) 48%, #EFECE7 100%);
  background-attachment: fixed;
  color: var(--tinta);
  min-height: 100dvh;
  letter-spacing: 0.01em;
}

/* iconografia arquetípica como nuance — mandala (self) e lua como âncoras,
   + 12 glifos das figuras arquetípicas do imaginário coletivo:
   inocente, comum, explorador, sábio, herói, fora-da-lei,
   mago, amante, bobo, cuidador, criador, governante */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cg fill='none' stroke='%238F6E3B' stroke-width='1.3'%3E%3Ccircle cx='830' cy='170' r='150' opacity='.5'/%3E%3Ccircle cx='830' cy='170' r='196' stroke-dasharray='2 10' opacity='.4'/%3E%3Cpath d='M200 600 A90 90 0 1 0 200 780 A72 72 0 1 1 200 600' opacity='.5'/%3E%3Cpath d='M520 315 l7 17 17 7 -17 7 -7 17 -7 -17 -17 -7 17 -7 z' opacity='.55'/%3E%3Cg opacity='.55'%3E%3Ccircle cx='150' cy='120' r='16'/%3E%3Ccircle cx='150' cy='120' r='2.5' fill='%238F6E3B' stroke='none'/%3E%3C/g%3E%3Cg opacity='.5'%3E%3Cpath d='M50 832 h36 M50 841 h36 M50 850 h36'/%3E%3C/g%3E%3Cg opacity='.55'%3E%3Ccircle cx='120' cy='320' r='18'/%3E%3Cpath d='M120 306 L126 320 L120 334 L114 320 Z'/%3E%3C/g%3E%3Cg opacity='.55'%3E%3Cpath d='M840 430 Q870 408 900 430 Q870 452 840 430'/%3E%3Ccircle cx='870' cy='430' r='4.5'/%3E%3C/g%3E%3Cg opacity='.55'%3E%3Cpath d='M930 600 V656 M918 614 H942'/%3E%3Ccircle cx='930' cy='662' r='3' fill='%238F6E3B' stroke='none'/%3E%3C/g%3E%3Cpath d='M418 285 A20 20 0 1 1 398 307' opacity='.55'/%3E%3Cpath d='M700 916 V944 M686 930 H714 M690 920 L710 940 M710 920 L690 940' opacity='.55'/%3E%3Cg opacity='.55'%3E%3Ccircle cx='532' cy='720' r='13'/%3E%3Ccircle cx='551' cy='720' r='13'/%3E%3C/g%3E%3Cg opacity='.55'%3E%3Ccircle cx='232' cy='696' r='3' fill='%238F6E3B' stroke='none'/%3E%3Ccircle cx='248' cy='686' r='2.5' fill='%238F6E3B' stroke='none'/%3E%3Ccircle cx='264' cy='696' r='3' fill='%238F6E3B' stroke='none'/%3E%3Cpath d='M232 710 Q248 722 264 710'/%3E%3C/g%3E%3Cg opacity='.55'%3E%3Cpath d='M300 868 A24 24 0 0 0 348 868 M324 892 V904 M312 906 H336'/%3E%3C/g%3E%3Cpath d='M548 90 a6 6 0 0 1 12 0 a12 12 0 0 1 -24 0 a18 18 0 0 1 36 0' opacity='.55'/%3E%3Cg opacity='.55'%3E%3Cpath d='M460 946 L470 928 L480 940 L490 928 L500 946 Z M460 952 H500'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.22;
}

/* grão de papel sobre a aurora — materialidade e antídoto contra banding */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.05;
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Estrutura ── */

#app {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 48px) clamp(20px, 5vw, 40px) 120px;
}

.screen { display: none; animation: breathe-in 0.6s ease both; }
.screen.active { display: block; }

@keyframes breathe-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Tipografia ── */

.label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--neutro);
}

.label-gold { color: var(--acento); }

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 2.6rem);
  line-height: 1.15;
  margin-top: 14px;
}

.subtitle {
  margin-top: 10px;
  color: var(--neutro);
  font-size: 0.95rem;
  font-weight: 300;
}

.screen-header { margin-bottom: 36px; }

/* ── Botão de gravar: o orbe do sonho ── */

.record-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin: 44px 0 52px;
}

.record-btn {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento-palido) 35%, transparent);
  background: var(--fundo-medio);
  overflow: hidden;
  color: var(--tinta);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 48px var(--sombra-orbe),
              0 0 44px color-mix(in srgb, var(--acento) 18%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.record-btn::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(45% 45% at 30% 35%, color-mix(in srgb, var(--orbe-a) 85%, transparent), transparent 70%),
    radial-gradient(50% 50% at 72% 28%, color-mix(in srgb, var(--orbe-b) 55%, transparent), transparent 70%),
    radial-gradient(55% 55% at 62% 76%, color-mix(in srgb, var(--orbe-c) 60%, transparent), transparent 70%),
    radial-gradient(40% 40% at 24% 72%, color-mix(in srgb, var(--orbe-d) 65%, transparent), transparent 70%);
  filter: blur(16px);
  animation: deriva 14s ease-in-out infinite alternate;
}

@keyframes deriva {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(70deg) scale(1.18); }
}

.record-btn:hover {
  transform: scale(1.03);
  border-color: color-mix(in srgb, var(--acento-palido) 60%, transparent);
  box-shadow: 0 22px 56px var(--sombra-orbe),
              0 0 56px color-mix(in srgb, var(--acento) 28%, transparent);
}
.record-btn:active { transform: scale(0.97); }

.record-icon {
  width: 42px;
  height: 42px;
  position: relative;
  color: var(--tinta-orbe);
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--tinta) 35%, transparent));
}

.record-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento) 18%, transparent);
  animation: pulse 4.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.06); opacity: 0.25; }
}

.record-hint {
  text-align: center;
  color: var(--neutro);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ── Cards ── */

.card {
  border: 1px solid color-mix(in srgb, var(--neutro) 18%, transparent);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--fundo-medio) 28%, transparent);
}

.card .label { margin-bottom: 10px; }

.card-text {
  font-size: 0.95rem;
  color: var(--tinta-suave);
  line-height: 1.6;
}

.quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--acento-palido);
}

/* ── Estado vazio ── */

.empty-state {
  text-align: center;
  padding: 70px 24px;
  color: var(--neutro);
  line-height: 1.7;
  font-size: 0.95rem;
}

.empty-mark {
  display: block;
  font-size: 1.3rem;
  color: var(--acento);
  margin-bottom: 18px;
}

/* ── Registro do sonho ── */

.btn-voltar {
  background: none;
  border: none;
  color: var(--neutro);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  cursor: pointer;
  padding: 0 0 18px;
  transition: color 0.25s ease;
}

.btn-voltar:hover { color: var(--tinta); }

.voz-area {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}

.mic-btn {
  flex-shrink: 0;
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento-palido) 35%, transparent);
  background: var(--fundo-medio);
  overflow: hidden;
  color: var(--tinta);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px var(--sombra-orbe),
              0 0 24px color-mix(in srgb, var(--acento) 14%, transparent);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.mic-btn::before,
.orbe-marca::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(45% 45% at 30% 35%, color-mix(in srgb, var(--orbe-a) 80%, transparent), transparent 70%),
    radial-gradient(50% 50% at 72% 28%, color-mix(in srgb, var(--orbe-b) 50%, transparent), transparent 70%),
    radial-gradient(55% 55% at 62% 76%, color-mix(in srgb, var(--orbe-c) 55%, transparent), transparent 70%);
  filter: blur(9px);
  animation: deriva 14s ease-in-out infinite alternate;
}

.mic-btn svg {
  width: 26px;
  height: 26px;
  position: relative;
  color: var(--tinta-orbe);
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--tinta) 35%, transparent));
}

.mic-btn:hover { border-color: color-mix(in srgb, var(--acento-palido) 60%, transparent); }

.mic-btn.ouvindo {
  border-color: var(--acento);
  animation: ouvindo 1.8s ease-in-out infinite;
}

.mic-btn.ouvindo::before { animation-duration: 4s; }

@keyframes ouvindo {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 35%, transparent); }
  50%      { box-shadow: 0 0 0 12px transparent; }
}

.mic-status {
  color: var(--neutro);
  font-size: 0.85rem;
  line-height: 1.6;
}

.mic-status.ativo { color: var(--acento-palido); }

.campo-sonho {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--neutro) 22%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--fundo-medio) 28%, transparent);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.7;
  padding: 20px 22px;
  resize: vertical;
  outline: none;
  transition: border-color 0.25s ease;
}

.campo-sonho::placeholder { color: var(--neutro); font-style: italic; }
.campo-sonho:focus { border-color: color-mix(in srgb, var(--acento) 50%, transparent); }

.btn-primario {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 16px;
  border-radius: 999px;
  border: 1px solid var(--acento);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  color: var(--acento-palido);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.btn-primario:hover { background: color-mix(in srgb, var(--acento) 22%, transparent); }
.btn-primario:active { transform: scale(0.98); }

/* ── Diário: lista de sonhos ── */

.sonho-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--neutro) 18%, transparent);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--fundo-medio) 28%, transparent);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.sonho-item:hover { border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.sonho-item:active { transform: scale(0.99); }

.sonho-item .label { margin-bottom: 8px; }

.sonho-trecho {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* ── Sonho: releitura ── */

.sonho-texto {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--tinta-suave);
  white-space: pre-wrap;
  margin-bottom: 32px;
}

/* ── Análise junguiana ── */

.analise-bloco { margin-top: 20px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--neutro) 14%, transparent); }
.analise-bloco .label { margin-bottom: 10px; }

.analise-linha {
  font-size: 0.95rem;
  color: var(--tinta-suave);
  line-height: 1.65;
  margin-bottom: 8px;
}

.analise-linha strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--tinta);
}

.tom-escala {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--neutro) 45%, transparent),
    color-mix(in srgb, var(--acento) 55%, transparent));
  margin: 18px 2px 10px;
}

.tom-ponto {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent);
}

.tom-legenda {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.68rem;
  color: var(--neutro);
  letter-spacing: 0.08em;
}

.tom-atual {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--acento);
}

.analise-pergunta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--acento-palido);
}

.voto-registrado { color: var(--tinta-suave); font-style: italic; }

.disclaimer {
  margin-top: 26px;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--neutro) 80%, transparent);
}

.apagar-area { margin-top: 40px; text-align: center; }

.btn-fantasma {
  background: none;
  border: 1px solid color-mix(in srgb, var(--neutro) 30%, transparent);
  border-radius: 999px;
  padding: 12px 24px;
  color: var(--neutro);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.btn-fantasma:hover { color: var(--tinta); border-color: var(--neutro); }

.btn-perigo { border-color: rgba(160, 71, 47, 0.4); color: #A0472F; }
.btn-perigo:hover { color: #7E3623; border-color: #A0472F; }

.confirm-apagar { margin-top: 18px; }
.confirm-apagar .card-text { margin-bottom: 16px; }
.confirm-acoes { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── Entrada (login) ── */

.orbe-marca {
  display: block;
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento-palido) 35%, transparent);
  background: var(--fundo-medio);
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: 0 10px 26px var(--sombra-orbe),
              0 0 24px color-mix(in srgb, var(--acento) 14%, transparent);
}

.login-form { display: flex; flex-direction: column; }

.campo-rotulo {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--neutro);
  margin: 18px 0 8px;
}

.campo-login {
  width: 100%;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--neutro) 22%, transparent);
  background: color-mix(in srgb, var(--fundo-medio) 28%, transparent);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.25s ease;
}

.campo-login:focus { border-color: color-mix(in srgb, var(--acento) 50%, transparent); }

.campo-linha { display: flex; gap: 14px; }
.campo-grupo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.opcional {
  text-transform: none;
  letter-spacing: 0.05em;
  font-style: italic;
  color: color-mix(in srgb, var(--neutro) 70%, transparent);
}

.login-nota {
  margin-top: 18px;
  font-size: 0.8rem;
  color: var(--neutro);
  line-height: 1.65;
}

.login-erro {
  margin-top: 16px;
  font-size: 0.85rem;
  color: #A0472F;
  line-height: 1.6;
}

.btn-criar { margin-top: 12px; align-self: center; }

/* ── Conta (sair) ── */

.header-com-acao { position: relative; }

.btn-sair {
  position: absolute;
  top: 4px;
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: color-mix(in srgb, var(--neutro) 80%, transparent);
  transition: color 0.25s ease;
}

.btn-sair:hover { color: var(--tinta); }

/* ── Prática (Fase 3) ── */

.player {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.player-btn {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  background: var(--fundo-medio);
  color: var(--acento-texto, var(--acento));
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.player-btn:hover { transform: scale(1.04); border-color: var(--acento); }
.player-btn svg { width: 22px; height: 22px; }

.player-barra {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--neutro) 25%, transparent);
  cursor: pointer;
  overflow: hidden;
}

.player-progresso {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acento), color-mix(in srgb, var(--acento) 60%, #fff));
  transition: width 0.2s linear;
}

.player-tempo {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--neutro);
  min-width: 78px;
  text-align: right;
}

#btn-meditei { margin: 22px 0; }
#btn-meditei:disabled { opacity: 0.75; cursor: default; }

.semana {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 16px;
}

.dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 1;
}

.dia-ponto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--neutro) 45%, transparent);
  background: transparent;
  transition: background 0.25s ease;
}

.dia.feito .dia-ponto {
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: 0 0 8px color-mix(in srgb, var(--acento) 40%, transparent);
}

.dia-letra {
  font-family: var(--sans);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--neutro);
}

/* ── Jornada (Fase 4) ── */

.grafico-arco {
  width: 100%;
  height: auto;
  margin-top: 14px;
  display: block;
}

.linha-neutra {
  stroke: color-mix(in srgb, var(--neutro) 30%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.linha-arco {
  stroke: var(--acento);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ponto-sonho { fill: var(--fundo-medio); stroke: var(--acento); stroke-width: 1.4; }
.ponto-pratica { fill: var(--verde, #7A9E8A); }

.grafico-legenda {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--neutro);
}

.legenda-pratica { color: var(--verde, #7A9E8A); text-transform: none; letter-spacing: 0.06em; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--tinta);
  background: color-mix(in srgb, var(--fundo-medio) 40%, transparent);
}

.chip em {
  font-style: normal;
  color: var(--neutro);
  margin-left: 6px;
  font-size: 0.68rem;
}

.chip-arq { border-color: color-mix(in srgb, var(--verde, #7A9E8A) 45%, transparent); }

.tabbar.oculta { display: none; }

/* ── Navegação inferior ── */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: clamp(4px, 3vw, 28px);
  padding: 10px max(12px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid color-mix(in srgb, var(--neutro) 15%, transparent);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--neutro);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  transition: color 0.25s ease;
}

.tab svg { width: 23px; height: 23px; }

.tab.active { color: var(--acento-claro); }
.tab:hover { color: var(--tinta); }
.tab.active:hover { color: var(--acento-claro); }

/* ── Movimento reduzido ── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}