:root {
  color-scheme: dark;
  --fundo: #0b0d12;
  --superficie: #161a22;
  --superficie-alta: #1c212b;
  --superficie-funda: #12151c;
  --tinta: 243 245 248;
  --ceu: #4aa8ff;
  --ceu-claro: #bfe3ff;
  --ceu-lavanda: #b3a6ec;
  --ceu-profundo: #2a6fb8;
  --raio: #ffd23f;
  --estrela: #f5bd4f;
  --perigo: #ff9f98;
  --perigo-forte: #ff5d55;
  --sucesso: #7be0a4;
  --dock-fundo: rgb(11 13 18 / 0.74);
  --sombra-cartao: 0 10px 30px rgb(0 0 0 / 0.28);
  --r-pp: 10px;
  --r-p: 14px;
  --r-m: 18px;
  --r-g: 22px;
  --r-gg: 28px;
  --r-pilula: 999px;
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;
  --e-12: 48px;
  --e-16: 64px;
  --fonte-titulo: "Fredoka", ui-rounded, "Nunito", system-ui, sans-serif;
  --fonte-texto: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-texto: 17px;
  --t-texto-p: 15px;
  --t-legenda: 13px;
  --t-titulo: 28px;
  --mola: cubic-bezier(0.3, 1.42, 0.56, 1);
  --suave: cubic-bezier(0.2, 0.7, 0.2, 1);
}

:root,
body {
  --texto: rgb(var(--tinta));
  --texto-2: rgb(var(--tinta) / 0.64);
  --texto-3: rgb(var(--tinta) / 0.42);
  --vidro-1: rgb(var(--tinta) / 0.04);
  --vidro-2: rgb(var(--tinta) / 0.08);
  --vidro-3: rgb(var(--tinta) / 0.15);
  --vidro-4: rgb(var(--tinta) / 0.24);
}

body[data-clima=ceu] {
  --c-topo: #0b1f45;
  --c-meio: #17488f;
  --c-base: #3f94e6;
}

body[data-clima=nublado] {
  --c-topo: #151a24;
  --c-meio: #262f3e;
  --c-base: #445066;
}

body[data-clima=tempestade] {
  --c-topo: #07080b;
  --c-meio: #10131a;
  --c-base: #242833;
}

body[data-tema=claro] {
  color-scheme: light;
  --tinta: 16 28 52;
  --fundo: #eaf6ff;
  --superficie: #ffffff;
  --superficie-alta: #ffffff;
  --superficie-funda: #f1f7fd;
  --c-topo: #d8edff;
  --c-meio: #c4e4ff;
  --c-base: #eef8ff;
  --dock-fundo: rgb(255 255 255 / 0.82);
  --sombra-cartao: 0 12px 30px rgb(20 60 120 / 0.14);
  --perigo: #c0392f;
  --sucesso: #1e9a58;
}

@media (min-width: 560px) {
  :root {
    --t-titulo: 32px;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-texto);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
figure,
fieldset,
legend {
  margin: 0;
  padding: 0;
}

fieldset {
  border: 0;
  min-width: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--ceu-claro);
  outline-offset: 2px;
}

strong {
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.001ms !important;
            animation-duration: 0.001ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
.ceu-fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--c-topo), var(--c-meio) 55%, var(--c-base));
  transition: background 0.6s var(--suave);
}

.estrelas {
  position: absolute;
  inset: 0;
  opacity: 0.9;
  background-image: radial-gradient(1.6px 1.6px at 8% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 22% 28%, #fff, transparent), radial-gradient(2px 2px at 36% 8%, #fff, transparent), radial-gradient(1.2px 1.2px at 48% 22%, #fff, transparent), radial-gradient(1.6px 1.6px at 61% 14%, #fff, transparent), radial-gradient(1.2px 1.2px at 74% 30%, #fff, transparent), radial-gradient(2px 2px at 86% 10%, #fff, transparent), radial-gradient(1.2px 1.2px at 93% 24%, #fff, transparent), radial-gradient(1.4px 1.4px at 14% 46%, #fff, transparent), radial-gradient(1.2px 1.2px at 41% 40%, #fff, transparent), radial-gradient(1.6px 1.6px at 68% 46%, #fff, transparent), radial-gradient(1.2px 1.2px at 90% 52%, #fff, transparent);
  -webkit-animation: cintila 7s ease-in-out infinite alternate;
          animation: cintila 7s ease-in-out infinite alternate;
  transition: opacity 0.6s;
}

body[data-clima=nublado] .estrelas {
  opacity: 0.25;
}

body[data-clima=tempestade] .estrelas,
body[data-tema=claro] .estrelas {
  opacity: 0;
}

.nuvens .nv {
  position: absolute;
  left: -45%;
  top: var(--y);
  display: block;
  width: var(--w);
  height: calc(var(--w) * 0.32);
  border-radius: 999px;
  background: var(--nv-cor, #fff);
  opacity: calc(var(--a, 0.08) * var(--nv-densidade, 1));
  filter: blur(var(--borrao, 2px));
  will-change: transform;
  -webkit-animation: deriva var(--d) linear infinite, balanca var(--b, 9s) ease-in-out infinite alternate;
          animation: deriva var(--d) linear infinite, balanca var(--b, 9s) ease-in-out infinite alternate;
  -webkit-animation-delay: var(--atraso, 0s), 0s;
          animation-delay: var(--atraso, 0s), 0s;
  transition: opacity 0.6s, background 0.6s;
}
.nuvens .nv::before, .nuvens .nv::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.nuvens .nv::before {
  width: 46%;
  height: 160%;
  left: 14%;
  bottom: 30%;
}
.nuvens .nv::after {
  width: 36%;
  height: 125%;
  right: 16%;
  bottom: 35%;
}

.nv-1 {
  --w: 260px;
  --y: 12%;
  --d: 120s;
  --a: 0.1;
  --borrao: 2px;
}

.nv-2 {
  --w: 160px;
  --y: 34%;
  --d: 170s;
  --a: 0.06;
  --borrao: 4px;
  --b: 11s;
  --atraso: -70s;
}

.nv-3 {
  --w: 360px;
  --y: 62%;
  --d: 140s;
  --a: 0.08;
  --borrao: 1px;
  --b: 13s;
  --atraso: -110s;
}

.nv-4 {
  --w: 120px;
  --y: 22%;
  --d: 210s;
  --a: 0.05;
  --borrao: 5px;
  --b: 8s;
  --atraso: -150s;
}

.nv-5 {
  --w: 220px;
  --y: 82%;
  --d: 160s;
  --a: 0.07;
  --borrao: 3px;
  --b: 10s;
  --atraso: -30s;
}

body[data-clima=nublado] {
  --nv-cor: #e3e9f2;
  --nv-densidade: 1.8;
}

body[data-clima=tempestade] {
  --nv-cor: #8a94aa;
  --nv-densidade: 2.2;
}

body[data-tema=claro] {
  --nv-cor: #fff;
  --nv-densidade: 7;
}

.chuva {
  position: absolute;
  inset: -30%;
  opacity: 0;
  transform: rotate(12deg);
  transition: opacity 0.6s;
}
.chuva i {
  position: absolute;
  inset: calc(var(--t) * -1) 0 0;
  background-size: var(--l) var(--t);
  will-change: transform;
  -webkit-animation: chuva var(--d) linear infinite;
          animation: chuva var(--d) linear infinite;
}
.chuva i:nth-child(1) {
  --l: 140px;
  --t: 220px;
  --d: 0.55s;
  --gota: rgb(180 200 240 / 0.35);
  background-image: radial-gradient(0.6px 7px at 10% 15%, var(--gota), transparent), radial-gradient(0.6px 7px at 35% 60%, var(--gota), transparent), radial-gradient(0.6px 7px at 58% 30%, var(--gota), transparent), radial-gradient(0.6px 7px at 80% 78%, var(--gota), transparent), radial-gradient(0.6px 7px at 92% 45%, var(--gota), transparent);
}
.chuva i:nth-child(2) {
  --l: 190px;
  --t: 300px;
  --d: 0.5s;
  --gota: rgb(190 210 250 / 0.45);
  background-image: radial-gradient(0.8px 11px at 18% 25%, var(--gota), transparent), radial-gradient(0.8px 11px at 46% 70%, var(--gota), transparent), radial-gradient(0.8px 11px at 70% 40%, var(--gota), transparent), radial-gradient(0.8px 11px at 88% 85%, var(--gota), transparent);
}
.chuva i:nth-child(3) {
  --l: 260px;
  --t: 420px;
  --d: 0.45s;
  --gota: rgb(205 222 255 / 0.55);
  background-image: radial-gradient(1px 18px at 25% 35%, var(--gota), transparent), radial-gradient(1px 18px at 62% 75%, var(--gota), transparent), radial-gradient(1px 18px at 85% 15%, var(--gota), transparent);
}

body[data-clima=tempestade] .chuva {
  opacity: 0.85;
}

.relampago {
  position: absolute;
  inset: 0;
  background: rgb(205, 222, 255);
  opacity: 0;
}

body[data-clima=tempestade] .relampago {
  -webkit-animation: relampago 11s linear infinite;
          animation: relampago 11s linear infinite;
}

.raio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  will-change: opacity;
}

@-webkit-keyframes cintila {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

@keyframes cintila {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes deriva {
  to {
    transform: translateX(170vw);
  }
}
@keyframes deriva {
  to {
    transform: translateX(170vw);
  }
}
@-webkit-keyframes balanca {
  to {
    translate: 0 -10px;
  }
}
@keyframes balanca {
  to {
    translate: 0 -10px;
  }
}
@-webkit-keyframes chuva {
  to {
    transform: translateY(var(--t));
  }
}
@keyframes chuva {
  to {
    transform: translateY(var(--t));
  }
}
@-webkit-keyframes relampago {
  0%, 91%, 100% {
    opacity: 0;
  }
  92% {
    opacity: 0.28;
  }
  93% {
    opacity: 0;
  }
  95% {
    opacity: 0.42;
  }
  97% {
    opacity: 0;
  }
}
@keyframes relampago {
  0%, 91%, 100% {
    opacity: 0;
  }
  92% {
    opacity: 0.28;
  }
  93% {
    opacity: 0;
  }
  95% {
    opacity: 0.42;
  }
  97% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .relampago,
  .chuva i {
    -webkit-animation: none !important;
            animation: none !important;
  }
}
.casca {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(env(safe-area-inset-top), 12px) var(--e-5) var(--e-8);
}

.casca--dock {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.conteudo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e-4);
  min-width: 0;
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e-2) 0 var(--e-4);
}

.topo--simples {
  gap: var(--e-3);
}

.topo__titulo {
  flex: 1;
  font-family: var(--fonte-titulo);
  font-size: 19px;
  font-weight: 600;
  text-align: center;
}

.topo__espaco {
  display: flex;
  justify-content: flex-end;
  min-width: 40px;
}

.pilula {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--vidro-2);
  border-radius: var(--r-pilula);
  background: var(--vidro-2);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  font-size: 15px;
  font-weight: 800;
  transition: background 0.2s, transform 0.18s var(--mola);
}
.pilula:active {
  transform: scale(0.96);
}
.pilula i {
  font-size: 18px;
}

.pilula--icone {
  justify-content: center;
  width: 40px;
  padding: 0;
}

.topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.pilula__bandeira {
  font-size: 18px;
  line-height: 1;
}

.pilula--ofensiva i {
  color: var(--estrela);
}

.pilula--apagada i {
  color: var(--texto-3);
}

.dock {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 20;
  display: flex;
  gap: 6px;
  width: min(448px, 100% - 32px);
  padding: 6px;
  transform: translateX(-50%);
  border: 1px solid var(--vidro-2);
  border-radius: var(--r-pilula);
  background: var(--dock-fundo);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  box-shadow: var(--sombra-cartao);
}

.dock__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 7px;
  border-radius: var(--r-pilula);
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 800;
  transition: background 0.25s, color 0.25s;
}
.dock__item i {
  font-size: 24px;
  line-height: 1;
}

.dock__item--ativo {
  background: var(--vidro-3);
  color: var(--raio);
}

body[data-tema=claro] .dock__item--ativo {
  color: var(--ceu-profundo);
}

.aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--e-3);
  padding: 12px 16px;
  border: 1px solid rgba(123, 224, 164, 0.35);
  border-radius: var(--r-m);
  background: rgba(123, 224, 164, 0.14);
  font-size: var(--t-texto-p);
  font-weight: 700;
  -webkit-animation: entra 0.4s var(--mola);
          animation: entra 0.4s var(--mola);
}
.aviso i {
  color: var(--sucesso);
  font-size: 22px;
}

.aviso--atencao {
  border-color: rgba(255, 210, 63, 0.4);
  background: rgba(255, 210, 63, 0.14);
}
.aviso--atencao i {
  color: var(--raio);
}

@-webkit-keyframes entra {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

@keyframes entra {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}
.titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--t-titulo);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.titulo--grande {
  font-size: 44px;
}

.titulo--centro,
.subtitulo--centro {
  text-align: center;
}

.subtitulo {
  margin-top: var(--e-2);
  color: var(--texto-2);
  font-size: var(--t-texto);
}

.secao-titulo {
  margin-top: var(--e-4);
  color: var(--texto-3);
  font-size: var(--t-legenda);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nota-pequena {
  color: var(--texto-2);
  font-size: var(--t-legenda);
}

.legal-mini {
  color: var(--texto-2);
  font-size: var(--t-legenda);
  line-height: 1.5;
}

.legal-mini--centro {
  margin-top: var(--e-4);
  text-align: center;
}

.link {
  color: var(--ceu-claro);
  font-weight: 700;
  text-decoration: underline;
  -webkit-text-decoration-color: rgba(191, 227, 255, 0.4);
          text-decoration-color: rgba(191, 227, 255, 0.4);
  text-underline-offset: 3px;
}
.link:hover {
  -webkit-text-decoration-color: currentColor;
          text-decoration-color: currentColor;
}

body[data-tema=claro] .link {
  color: var(--ceu-profundo);
}

.link--forte {
  font-weight: 800;
}

.link--centro {
  align-self: center;
  text-align: center;
}

.link--discreto {
  color: var(--texto-2);
  font-size: var(--t-legenda);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  border-radius: var(--r-pilula);
  font-family: var(--fonte-titulo);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: transform 0.18s var(--mola), box-shadow 0.18s, background 0.2s;
}
.botao:active {
  transform: translateY(2px) scale(0.99);
}
.botao:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.botao i {
  font-size: 22px;
}

.botao--cheio {
  width: 100%;
}

.botao--raio {
  background: var(--raio);
  color: #1b1500;
  box-shadow: 0 4px 0 #b88d00, 0 14px 28px rgba(255, 210, 63, 0.2);
}
.botao--raio:active {
  box-shadow: 0 1px 0 #b88d00;
}

.botao--ceu {
  background: var(--ceu);
  color: #06223f;
  box-shadow: 0 4px 0 var(--ceu-profundo);
}
.botao--ceu:active {
  box-shadow: 0 1px 0 var(--ceu-profundo);
}

.botao--vidro {
  border: 1px solid var(--vidro-3);
  background: var(--vidro-3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.botao--vidro:hover {
  background: var(--vidro-4);
}

.botao-icone {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vidro-2);
  font-size: 22px;
  transition: background 0.2s, transform 0.18s var(--mola);
}
.botao-icone:active {
  transform: scale(0.92);
}

.botao-icone--vazio {
  visibility: hidden;
}

.botao-redondo {
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--vidro-3);
  font-size: 30px;
  transition: transform 0.18s var(--mola), background 0.2s;
}
.botao-redondo:active {
  transform: scale(0.92);
}

.botao-redondo--perigo {
  background: #e5484d;
  color: #fff;
}

.botao-redondo--ativo {
  background: var(--perigo-forte);
  color: #fff;
}

.acoes-coluna {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pilula);
  background: var(--vidro-3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.etiqueta--raio {
  background: var(--raio);
  color: #1b1500;
}

.etiqueta--perigo {
  background: rgba(255, 159, 152, 0.18);
  color: var(--perigo);
}

.etiqueta--sucesso {
  background: rgba(123, 224, 164, 0.2);
  color: var(--sucesso);
}

.lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.lista__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--vidro-2);
  border-radius: var(--r-m);
  background: var(--superficie);
  text-align: left;
  transition: background 0.2s, transform 0.18s var(--mola), border-color 0.2s;
}
.lista__item:active {
  transform: scale(0.99);
}

a.lista__item:hover,
button.lista__item:hover {
  background: var(--superficie-alta);
}

.lista__icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--vidro-2);
  font-size: 22px;
}

.lista__icone--arco {
  background: linear-gradient(135deg, #ff9f98, #ffd23f 40%, #7be0a4 70%, #4aa8ff);
  color: #12203a;
}

.lista__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lista__texto small {
  color: var(--texto-2);
  font-size: var(--t-legenda);
}

.lista__fim {
  color: var(--texto-3);
  font-size: 20px;
}

.lista__fim--texto {
  color: var(--texto-2);
  font-size: var(--t-texto-p);
  font-weight: 800;
}

.lista__item--bloco {
  align-items: flex-start;
}

.lista__fim--coluna {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.lista__fim--coluna form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lista__bandeira {
  font-size: 28px;
  line-height: 1;
}

.bandeira {
  display: block;
  width: 1.33em;
  height: 1em;
  border-radius: 0.2em;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.lista__item--proximo {
  border-color: var(--raio);
  box-shadow: inset 0 0 0 1px var(--raio);
}
.lista__item--proximo .lista__icone {
  background: var(--raio);
  color: #1b1500;
}
.lista__item--proximo .lista__fim {
  color: var(--raio);
}

.lista__item--feito .lista__icone {
  background: rgba(123, 224, 164, 0.18);
  color: var(--sucesso);
}
.lista__item--feito .lista__fim {
  color: var(--sucesso);
}

.lista__item--atual {
  border-color: var(--ceu);
}

.lista__item--desligado {
  opacity: 0.55;
}

.lista__item--perigo {
  color: var(--perigo);
}

.lista--folha {
  margin-top: var(--e-4);
}

.cartao {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5);
  border: 1px solid var(--vidro-2);
  border-radius: var(--r-g);
  background: var(--superficie);
  box-shadow: var(--sombra-cartao);
}

.cartao--aviso {
  border-color: rgba(255, 210, 63, 0.35);
  background: rgba(255, 210, 63, 0.1);
  font-size: var(--t-texto-p);
}

.cartao--plano {
  align-items: flex-start;
}

.faixa {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  padding: 10px 14px;
  border-radius: var(--r-m);
  background: var(--vidro-2);
  font-size: var(--t-legenda);
  font-weight: 700;
  line-height: 1.4;
}
.faixa i {
  margin-top: 1px;
  color: var(--raio);
  font-size: 18px;
}

.faixa-durona {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 12px 16px;
  border: 1px solid rgba(255, 159, 152, 0.3);
  border-radius: var(--r-m);
  background: rgba(255, 159, 152, 0.1);
  font-size: var(--t-texto-p);
  font-weight: 700;
}
.faixa-durona i {
  color: var(--raio);
}
.faixa-durona .link {
  flex: none;
}

.vazio {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-8) 0;
}

.cabecalho {
  padding-top: var(--e-1);
}

.cabecalho__sobre {
  color: var(--ceu-claro);
  font-size: var(--t-legenda);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body[data-tema=claro] .cabecalho__sobre {
  color: var(--ceu-profundo);
}

.cabecalho--centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cabecalho__mascote {
  margin-bottom: var(--e-3);
}

.atalhos {
  display: flex;
  gap: var(--e-2);
}

.atalho {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 12px;
  border-radius: var(--r-m);
  background: var(--vidro-2);
  font-size: var(--t-texto-p);
  font-weight: 800;
  transition: background 0.2s;
}
.atalho:hover {
  background: var(--vidro-3);
}
.atalho i {
  font-size: 20px;
}

.numeros {
  display: flex;
  gap: var(--e-3);
}

.numeros__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--e-4);
  border-radius: var(--r-m);
  background: var(--vidro-2);
}
.numeros__item strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fonte-titulo);
  font-size: 28px;
}
.numeros__item span {
  color: var(--texto-2);
  font-size: var(--t-legenda);
}

.barra {
  position: relative;
  height: 12px;
  margin-top: var(--e-4);
  border-radius: var(--r-pilula);
  background: var(--vidro-2);
  overflow: visible;
}

.barra--fina {
  height: 6px;
  margin-top: var(--e-2);
}

.barra__preenchimento {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--raio);
  transition: width 0.6s var(--mola);
}

.barra__marca {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  border-radius: 2px;
  background: var(--texto-2);
}

.abas {
  display: flex;
  padding: 4px;
  border-radius: var(--r-pilula);
  background: var(--vidro-2);
}

.abas__item {
  flex: 1;
  padding: 10px 0;
  border-radius: var(--r-pilula);
  color: var(--texto-2);
  font-weight: 800;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}

.abas__item--ativo {
  background: var(--vidro-4);
  color: var(--texto);
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.formulario__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo__rotulo {
  color: var(--texto-2);
  font-size: var(--t-legenda);
  font-weight: 800;
}

.campo__caixa {
  position: relative;
}

.campo__entrada {
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  border: 1.5px solid var(--vidro-3);
  border-radius: var(--r-m);
  background: var(--superficie-funda);
  font-size: 17px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.campo__entrada::-moz-placeholder {
  color: var(--texto-3);
}
.campo__entrada::placeholder {
  color: var(--texto-3);
}
.campo__entrada:focus {
  border-color: var(--ceu);
  box-shadow: 0 0 0 4px rgba(74, 168, 255, 0.2);
  outline: none;
}
.campo__entrada:-moz-read-only {
  color: var(--texto-2);
}
.campo__entrada:read-only {
  color: var(--texto-2);
}

textarea.campo__entrada {
  resize: vertical;
}

.campo__olho {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  border-radius: 50%;
  color: var(--texto-2);
  font-size: 22px;
}

.campo__dica {
  color: var(--texto-3);
  font-size: var(--t-legenda);
}

.campo--erro .campo__entrada {
  border-color: var(--perigo-forte);
}

.campo__erro-texto {
  color: var(--perigo);
  font-size: var(--t-legenda);
  font-weight: 700;
}

.marcar {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto-2);
  font-size: var(--t-texto-p);
  font-weight: 600;
}
.marcar input {
  width: 22px;
  height: 22px;
  accent-color: var(--raio);
}

.marcar--18 {
  padding: 12px 14px;
  border-radius: var(--r-m);
  background: rgba(255, 159, 152, 0.12);
  color: var(--texto);
}

.grupo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.grupo__titulo {
  margin-bottom: var(--e-1);
  color: var(--texto-3);
  font-size: var(--t-legenda);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.grupo__nota {
  color: var(--texto-2);
  font-size: var(--t-legenda);
  line-height: 1.5;
}
.grupo__nota i {
  color: var(--raio);
}

.grupo--bloqueado .opcao {
  opacity: 0.5;
}

.opcao {
  display: block;
  cursor: pointer;
}
.opcao input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opcao__corpo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--vidro-2);
  border-radius: var(--r-m);
  background: var(--superficie);
  transition: border-color 0.2s, background 0.2s, transform 0.18s var(--mola);
}
.opcao__corpo > i {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--vidro-2);
  font-size: 22px;
}
.opcao__corpo span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.opcao__corpo small {
  color: var(--texto-2);
  font-size: var(--t-legenda);
  line-height: 1.35;
}

.opcao input:checked + .opcao__corpo {
  border-color: var(--raio);
  background: rgba(255, 210, 63, 0.1);
}
.opcao input:checked + .opcao__corpo > i {
  background: var(--raio);
  color: #1b1500;
}

.opcao input:focus-visible + .opcao__corpo {
  outline: 3px solid var(--ceu-claro);
  outline-offset: 2px;
}

.opcao input:disabled + .opcao__corpo {
  cursor: not-allowed;
}

.interruptor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 14px 16px;
  border: 1px solid var(--vidro-2);
  border-radius: var(--r-m);
  background: var(--superficie);
  cursor: pointer;
}
.interruptor span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.interruptor small {
  color: var(--texto-2);
  font-size: var(--t-legenda);
}
.interruptor input {
  position: absolute;
  opacity: 0;
}

.interruptor__trilho {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  border-radius: var(--r-pilula);
  background: var(--vidro-4);
  transition: background 0.25s;
}
.interruptor__trilho::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s var(--mola);
}

.interruptor input:checked ~ .interruptor__trilho {
  background: var(--raio);
}
.interruptor input:checked ~ .interruptor__trilho::after {
  transform: translateX(22px);
}

.interruptor input:focus-visible ~ .interruptor__trilho {
  outline: 3px solid var(--ceu-claro);
  outline-offset: 2px;
}

.folha {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.folha__fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-animation: aparece 0.25s;
          animation: aparece 0.25s;
}

.folha__corpo {
  position: relative;
  width: min(480px, 100%);
  max-height: 100dvh;
  overflow-y: auto;
  padding: 10px var(--e-5) calc(var(--e-6) + env(safe-area-inset-bottom));
  border-radius: var(--r-gg) var(--r-gg) 0 0;
  background: var(--superficie-alta);
  color: var(--texto);
  -webkit-animation: sobe 0.38s var(--mola);
          animation: sobe 0.38s var(--mola);
}

.folha__puxador {
  display: block;
  width: 44px;
  height: 5px;
  margin: 0 auto var(--e-4);
  border-radius: 3px;
  background: var(--vidro-4);
}

.folha__titulo {
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 600;
}

@-webkit-keyframes aparece {
  from {
    opacity: 0;
  }
}

@keyframes aparece {
  from {
    opacity: 0;
  }
}
@-webkit-keyframes sobe {
  from {
    transform: translateY(100%);
  }
}
@keyframes sobe {
  from {
    transform: translateY(100%);
  }
}
.detalhes {
  padding: 12px 16px;
  border-radius: var(--r-m);
  background: var(--vidro-1);
  font-size: var(--t-texto-p);
}
.detalhes summary {
  font-weight: 800;
  cursor: pointer;
}
.detalhes ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--e-3);
  padding-left: 18px;
  color: var(--texto-2);
  list-style: disc;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-5);
}

.modal[hidden] {
  display: none !important;
}

.modal__fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-animation: aparece 0.2s;
          animation: aparece 0.2s;
}

.modal__caixa {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  width: min(360px, 100%);
  padding: var(--e-5);
  border: 1px solid var(--vidro-3);
  border-radius: var(--r-g);
  background: var(--superficie-alta);
  color: var(--texto);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  -webkit-animation: sobe-modal 0.28s var(--mola);
          animation: sobe-modal 0.28s var(--mola);
}

.modal__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
}

.modal__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.modal__fechar {
  flex: 0 0 auto;
  margin: -6px -6px 0 0;
}

.modal__mensagem {
  margin: 0;
  color: var(--texto-2);
  font-size: var(--t-texto);
  line-height: 1.45;
}

.modal__acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
}
.modal__acoes .botao {
  min-height: 48px;
}

@-webkit-keyframes sobe-modal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}

@keyframes sobe-modal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}
body.sem-rolagem {
  overflow: hidden;
}

.aviso--saindo {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.35s, transform 0.35s;
}

.is-carregando {
  opacity: 0.65;
  pointer-events: none;
}

.mascote {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.28));
}

.mascote__corpo,
.mascote__rosto {
  -webkit-animation: flutua 5.5s ease-in-out infinite;
          animation: flutua 5.5s ease-in-out infinite;
}

.mascote__rosto {
  -webkit-animation-name: flutua-rosto;
          animation-name: flutua-rosto;
}

.mascote .olho {
  transform-box: fill-box;
  transform-origin: center;
  -webkit-animation: piscar 5.2s infinite;
          animation: piscar 5.2s infinite;
}

.mascote__raio {
  -webkit-animation: cintilar 1.2s steps(2, end) infinite;
          animation: cintilar 1.2s steps(2, end) infinite;
}

.mascote--brava .mascote__rosto,
.mascote--tempestade .mascote__rosto {
  -webkit-animation: treme 0.28s linear infinite;
          animation: treme 0.28s linear infinite;
}

.mascote--tempestade {
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.5));
}

@-webkit-keyframes flutua {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes flutua {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@-webkit-keyframes flutua-rosto {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes flutua-rosto {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@-webkit-keyframes piscar {
  0%, 94%, 100% {
    transform: scaleY(1);
  }
  97% {
    transform: scaleY(0.1);
  }
}
@keyframes piscar {
  0%, 94%, 100% {
    transform: scaleY(1);
  }
  97% {
    transform: scaleY(0.1);
  }
}
@-webkit-keyframes cintilar {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.35;
  }
}
@keyframes cintilar {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.35;
  }
}
@-webkit-keyframes treme {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, -6px);
  }
  75% {
    transform: translate(1px, -5px);
  }
}
@keyframes treme {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, -6px);
  }
  75% {
    transform: translate(1px, -5px);
  }
}
.conteudo--auth {
  justify-content: center;
}

.auth {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-4) 0 var(--e-8);
}
.auth .titulo,
.auth .subtitulo {
  text-align: center;
}
.auth .subtitulo {
  margin-top: calc(var(--e-2) * -1);
}

.auth__mascote {
  width: 150px;
  margin: 0 auto;
}

.auth__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  color: var(--texto-2);
  font-size: var(--t-texto-p);
}

.conteudo--ceu {
  justify-content: center;
}

.ceu {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  width: 100%;
  padding-bottom: var(--e-2);
}

.ceu__selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--vidro-3);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--sucesso);
  font-size: var(--t-legenda);
  font-weight: 700;
  text-decoration: none;
}
.ceu__selo i {
  font-size: 18px;
}

.anel {
  --lado: min(260px, 68vw, 48vh);
  --no: 48px;
  position: relative;
  flex: 0 0 auto;
  width: var(--lado);
  height: var(--lado);
  margin-top: var(--e-1);
}
.anel::before {
  content: "";
  position: absolute;
  inset: calc(var(--no) / 2);
  border: 2px dashed var(--vidro-3);
  border-radius: 50%;
}

.anel__centro {
  position: absolute;
  inset: 18% 18% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.anel__centro .mascote {
  width: min(140px, 42vw);
}

.anel__nuvem {
  position: relative;
  display: block;
}

.anel__clima {
  position: absolute;
  top: 4%;
  right: 2%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--vidro-4);
  border-radius: 50%;
  background: var(--superficie-funda);
  color: var(--raio);
  font-size: 17px;
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: transform 0.18s var(--mola);
}
.anel__clima:active {
  transform: scale(0.9);
}
.anel__clima:focus-visible {
  outline: 2px solid var(--raio);
  outline-offset: 3px;
}

.folha__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.folha__texto {
  margin: var(--e-2) 0 0;
  color: var(--texto-2);
  font-size: var(--t-texto-p);
}

.climas {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin: var(--e-4) 0 0;
  padding: 0;
  list-style: none;
}

.clima {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-3);
  border: 1.5px solid var(--vidro-3);
  border-radius: var(--r-g);
  background: var(--superficie);
}

.clima--atual {
  border-color: var(--raio);
  background: rgba(255, 210, 63, 0.1);
}

.clima__escolher {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.clima__escolher:focus-visible {
  outline: 2px solid var(--raio);
  outline-offset: 4px;
  border-radius: var(--r-m);
}

.clima__topo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.clima__imagem {
  display: grid;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 8px;
  border-radius: var(--r-p);
}
.clima__imagem .mascote {
  filter: none;
}

.clima__imagem--ceu {
  background: linear-gradient(180deg, #8fd0ff, #3f94e6);
}

.clima__imagem--nublado {
  background: linear-gradient(180deg, #c3cad6, #6f7a8c);
}

.clima__imagem--tempestade {
  background: linear-gradient(180deg, #2b303c, #5a3f4a);
}

.clima__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 32px;
}
.clima__texto strong {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 600;
}
.clima__texto small {
  color: var(--texto-2);
  font-size: var(--t-legenda);
  line-height: 1.35;
}
.clima__texto b {
  color: var(--texto);
}

.clima__exemplo {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  padding: 10px 12px;
  border-radius: var(--r-p);
  background: var(--vidro-2);
  font-size: var(--t-texto-p);
  line-height: 1.4;
}
.clima__exemplo i {
  flex: none;
  margin-top: 2px;
  color: var(--texto-2);
}

.clima__marca {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--raio);
  color: #1b1500;
  font-size: 14px;
  pointer-events: none;
}

.clima__trovao {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--e-2);
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-pilula);
  background: var(--vidro-3);
  color: var(--texto);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.clima__trovao i {
  color: var(--raio);
}
.clima__trovao:active {
  transform: scale(0.96);
}

.anel__progresso {
  margin: 0;
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.anel__no {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--no);
  height: var(--no);
  margin: calc(var(--no) / -2);
  padding: 0;
  transform: rotate(calc(var(--i) * 360deg / var(--nos, 5))) translateY(calc(var(--lado) / -2 + var(--no) / 2)) rotate(calc(var(--i) * -360deg / var(--nos, 5)));
  border: 2px solid var(--vidro-4);
  border-radius: 50%;
  background: var(--superficie-funda);
  color: var(--texto-2);
  font-size: 22px;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}
.anel__no:focus-visible {
  outline: 2px solid var(--raio);
  outline-offset: 3px;
}

.anel__ordem {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--raio);
  color: #1b1500;
  font-family: var(--fonte-titulo);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.anel__no--feito {
  border-color: var(--raio);
  background: var(--raio);
  color: #1b1500;
}
.anel__no--feito .anel__ordem {
  background: #1b1500;
  color: var(--raio);
}

.anel__no--atual {
  border-color: var(--raio);
  background: var(--raio);
  color: #1b1500;
  -webkit-animation: pulsa 1.8s ease-in-out infinite;
          animation: pulsa 1.8s ease-in-out infinite;
}
.anel__no--atual .anel__ordem {
  background: #1b1500;
  color: var(--raio);
}

.anel__no--foco:not(.anel__no--atual):not(.anel__no--feito) {
  border-color: var(--texto-2);
  color: var(--texto);
}

@-webkit-keyframes pulsa {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.5);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 210, 63, 0);
  }
}

@keyframes pulsa {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.5);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 210, 63, 0);
  }
}
.ceu__promo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--raio);
  border-radius: 999px;
  background: rgba(255, 210, 63, 0.12);
  color: inherit;
  text-decoration: none;
  transition: background 0.2s;
}
.ceu__promo:hover {
  background: rgba(255, 210, 63, 0.18);
}
.ceu__promo > i {
  margin-top: 2px;
  color: var(--raio);
  font-size: 20px;
}

.ceu__promo-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ceu__promo-texto strong {
  font-size: var(--t-texto-p);
  font-weight: 800;
  line-height: 1.25;
}
.ceu__promo-texto small {
  color: var(--texto-2);
  font-size: var(--t-legenda);
  font-weight: 600;
  line-height: 1.3;
}

.ceu__missao {
  width: 100%;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--vidro-2);
  border-radius: var(--r-g);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--t-texto);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.ceu__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  width: 100%;
}

@media (max-height: 720px) {
  .ceu {
    gap: var(--e-3);
    justify-content: flex-start;
    padding-top: var(--e-2);
  }
  .anel {
    --lado: min(220px, 62vw, 38vh);
    --no: 44px;
  }
  .anel__centro .mascote {
    width: min(110px, 34vw);
  }
  .anel__progresso {
    font-size: 16px;
  }
  .ceu__missao {
    padding: 12px 14px;
    font-size: var(--t-texto-p);
  }
}
.intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-8);
  background: linear-gradient(180deg, var(--c-topo), var(--c-meio) 60%, var(--c-base));
  transition: opacity 0.5s, visibility 0.5s;
}

.intro--saindo {
  opacity: 0;
  visibility: hidden;
}

.intro__palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  text-align: center;
}

.intro__mascote {
  width: 230px;
  -webkit-animation: desce 1.1s var(--mola) both;
          animation: desce 1.1s var(--mola) both;
}

.intro__texto {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  font-weight: 600;
  -webkit-animation: surge 0.7s 0.5s both;
          animation: surge 0.7s 0.5s both;
}

.intro__sub {
  color: var(--texto-2);
  -webkit-animation: surge 0.7s 0.8s both;
          animation: surge 0.7s 0.8s both;
}

.intro__pular {
  min-height: 44px;
  font-size: 15px;
}

@-webkit-keyframes desce {
  from {
    opacity: 0;
    transform: translateY(-80px) scale(0.8);
  }
}

@keyframes desce {
  from {
    opacity: 0;
    transform: translateY(-80px) scale(0.8);
  }
}
@-webkit-keyframes surge {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes surge {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.nivel {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-4);
}

.nivel__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--vidro-2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.nivel__numero {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ceu-lavanda);
  color: #1d1740;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 700;
}

.nivel__nome {
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 600;
}

.nivel__descricao {
  color: var(--texto-2);
  font-size: var(--t-legenda);
}

.caminho {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-2) var(--e-2) var(--e-2);
}

.caminho__no {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-4);
}
.caminho__no:nth-child(4n+2), .caminho__no:nth-child(4n) {
  margin-left: 44px;
}
.caminho__no:nth-child(4n+3) {
  margin-left: 76px;
}

.caminho__bolha {
  display: grid;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 3px solid var(--vidro-4);
  border-radius: 50%;
  background: var(--superficie-funda);
  color: var(--texto-2);
  font-size: 28px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25);
}

.caminho__nome {
  font-weight: 800;
  font-size: var(--t-texto-p);
}

.caminho__no--concluido .caminho__bolha {
  border-color: var(--sucesso);
  background: rgba(123, 224, 164, 0.16);
  color: var(--sucesso);
}

.caminho__no--hoje .caminho__bolha {
  border-color: var(--raio);
  background: var(--raio);
  color: #1b1500;
  -webkit-animation: pulsa 1.8s ease-in-out infinite;
          animation: pulsa 1.8s ease-in-out infinite;
}

.caminho__no--rever .caminho__bolha {
  border-color: var(--ceu);
  background: rgba(74, 168, 255, 0.18);
  color: var(--ceu);
}

.caminho__no--depois {
  opacity: 0.8;
}

.caminho__no--trancado {
  opacity: 0.5;
}

.etiqueta--raio {
  flex: none;
}

.perfil-topo {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-2) 0;
}
.perfil-topo .titulo {
  font-size: 24px;
}
.perfil-topo .subtitulo {
  margin: 2px 0 var(--e-2);
  font-size: var(--t-texto-p);
  overflow-wrap: anywhere;
}

.perfil-topo__mascote {
  flex: none;
  width: 92px;
}

.ofensiva-topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding-top: var(--e-2);
}

.ofensiva-topo__raio {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--vidro-2);
  color: var(--texto-3);
  font-size: 58px;
}

.ofensiva-topo__raio--acesa {
  background: radial-gradient(circle, rgba(255, 210, 63, 0.35), rgba(255, 210, 63, 0.06) 70%);
  color: var(--raio);
  -webkit-animation: respira 2.4s ease-in-out infinite;
          animation: respira 2.4s ease-in-out infinite;
}

@-webkit-keyframes respira {
  50% {
    transform: scale(1.06);
  }
}

@keyframes respira {
  50% {
    transform: scale(1.06);
  }
}
.calendario {
  padding: var(--e-4);
  border-radius: var(--r-g);
  background: var(--superficie);
  border: 1px solid var(--vidro-2);
}

.calendario__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--e-3);
}
.calendario__topo h2 {
  font-family: var(--fonte-titulo);
  font-size: 19px;
  font-weight: 600;
}

.calendario__grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendario__semana {
  color: var(--texto-3);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.calendario__dia {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--texto-2);
  font-size: 14px;
  font-weight: 800;
}

.calendario__dia--valeu {
  background: var(--raio);
  color: #1b1500;
  font-size: 18px;
}

.calendario__dia--guarda-chuva {
  background: rgba(74, 168, 255, 0.25);
  color: var(--ceu-claro);
  font-size: 18px;
}

.calendario__dia--sem-pratica {
  background: var(--vidro-1);
  color: var(--texto-3);
}

.calendario__dia--vazio {
  color: var(--texto-3);
  opacity: 0.55;
}

.calendario__dia--futuro {
  color: var(--texto-2);
}

.calendario__dia--hoje {
  box-shadow: 0 0 0 2px var(--ceu-claro);
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-4);
  margin-top: var(--e-4);
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 700;
}
.legenda li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legenda .ph-sun {
  color: var(--raio);
}
.legenda .ph-umbrella-simple {
  color: var(--ceu);
}

.marcos {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.marco {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 12px 16px;
  border-radius: var(--r-m);
  background: var(--vidro-1);
  color: var(--texto-2);
  font-weight: 700;
}

.marco__dias {
  min-width: 40px;
  font-family: var(--fonte-titulo);
  font-size: 18px;
  color: var(--texto);
}

.marco__nome {
  flex: 1;
}

.marco--feito {
  color: var(--texto);
}
.marco--feito i {
  color: var(--sucesso);
}

.marco--proximo {
  background: rgba(255, 210, 63, 0.1);
  box-shadow: inset 0 0 0 1.5px var(--raio);
  color: var(--texto);
}

.planos {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  margin-top: var(--e-3);
}

.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-6) var(--e-5) var(--e-5);
  border: 2px solid transparent;
  border-radius: var(--r-g);
  background: var(--superficie);
  box-shadow: var(--sombra-cartao);
}

.plano--destaque {
  border-color: var(--raio);
}

.plano__selo {
  position: absolute;
  top: -14px;
  left: var(--e-5);
  padding: 4px 14px;
  border-radius: var(--r-pilula);
  background: var(--raio);
  color: #1b1500;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plano__nome {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 600;
}

.plano__de {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  color: var(--texto-2);
  font-size: var(--t-texto-p);
  font-weight: 700;
}

.plano__preco {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.plano__preco strong {
  font-family: var(--fonte-titulo);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
}
.plano__preco span {
  color: var(--texto-2);
  font-weight: 700;
}

.plano__nota {
  color: var(--texto-2);
  font-size: var(--t-legenda);
  margin-top: -6px;
}

.plano__beneficios {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: var(--e-2) 0;
  font-size: var(--t-texto-p);
  font-weight: 600;
}
.plano__beneficios li {
  display: flex;
  gap: 10px;
}
.plano__beneficios i {
  flex: none;
  margin-top: 2px;
  color: var(--sucesso);
  font-size: 20px;
}

.teste {
  margin-top: var(--e-5);
  text-align: center;
}
.teste .link {
  font-size: var(--t-texto-p);
}

.historia {
  display: flex;
  justify-content: center;
}

.historia__cartao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  width: min(260px, 70vw);
  aspect-ratio: 9/16;
  padding: var(--e-6) var(--e-4);
  border-radius: var(--r-gg);
  background: linear-gradient(180deg, var(--c-topo), var(--c-meio) 60%, var(--c-base));
  border: 1px solid var(--vidro-3);
  box-shadow: var(--sombra-cartao);
  text-align: center;
  justify-content: center;
}

.historia__mascote {
  width: 150px;
}

.historia__nome {
  font-weight: 700;
  color: var(--texto-2);
  font-size: var(--t-texto-p);
}

.historia__ofensiva {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonte-titulo);
  font-size: 22px;
}
.historia__ofensiva i {
  color: var(--raio);
  font-size: 30px;
}
.historia__ofensiva strong {
  font-size: 34px;
}

.historia__linha {
  color: var(--texto-2);
  font-size: var(--t-legenda);
}

.historia__marca {
  margin-top: var(--e-4);
  font-family: var(--fonte-titulo);
  font-size: 18px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.codigo {
  font-family: var(--fonte-titulo);
  font-size: 32px;
  letter-spacing: 0.12em;
  color: var(--raio);
}

.assuntos {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.restam {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-3);
  padding: 6px 12px;
  border-radius: var(--r-pilula);
  background: var(--vidro-2);
  font-size: var(--t-legenda);
  font-weight: 800;
}

.restam--zero {
  background: rgba(255, 159, 152, 0.18);
  color: var(--perigo);
}

.licao {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e-5);
}

.pontos {
  display: flex;
  gap: var(--e-2);
  justify-content: center;
}

.ponto {
  width: 38px;
  height: 8px;
  border-radius: var(--r-pilula);
  background: var(--vidro-3);
  transition: background 0.3s;
}

.ponto--feito {
  background: var(--sucesso);
}

.ponto--atual {
  background: var(--raio);
}

.licao__cartao {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-4);
  padding: var(--e-6) var(--e-5);
  border: 1px solid var(--vidro-2);
  border-radius: var(--r-gg);
  background: var(--superficie);
  box-shadow: var(--sombra-cartao);
  text-align: center;
}

.licao__dica {
  color: var(--texto-3);
  font-size: var(--t-legenda);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.licao__frase {
  font-family: var(--fonte-titulo);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
}

.licao__traducao {
  color: var(--texto-2);
  font-size: var(--t-texto-p);
}

.licao__palavras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.palavra {
  padding: 4px 12px;
  border-radius: var(--r-pilula);
  font-weight: 800;
}

.palavra--ok {
  background: rgba(123, 224, 164, 0.2);
  color: var(--sucesso);
}

.palavra--perto {
  background: rgba(255, 210, 63, 0.2);
  color: var(--raio);
}

.palavra--errou {
  background: rgba(255, 159, 152, 0.2);
  color: var(--perigo);
  -webkit-text-decoration: underline wavy;
          text-decoration: underline wavy;
  text-underline-offset: 4px;
}

.licao__nota {
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 600;
}

.licao__botoes,
.licao__rodape {
  display: flex;
  gap: var(--e-3);
}
.licao__botoes .botao,
.licao__rodape .botao {
  flex: 1;
}

.licao__botoes .botao--raio.is-gravando {
  background: var(--perigo-forte);
  color: #fff;
  box-shadow: 0 4px 0 #b02f29;
  -webkit-animation: pulsa-vermelho 1.2s infinite;
          animation: pulsa-vermelho 1.2s infinite;
}

.caderno__acoes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.caderno__ferramentas,
.caderno__memoria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.caderno__ferramentas {
  padding: 5px;
  border: 1px solid var(--vidro-2);
  border-radius: 18px;
  background: var(--vidro-1);
}

.caderno__atalho,
.caderno__escolha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.18s var(--mola), background 0.2s, box-shadow 0.18s;
}
.caderno__atalho:active,
.caderno__escolha:active {
  transform: translateY(2px) scale(0.99);
}

.caderno__atalho {
  min-height: 44px;
  padding: 0 8px;
  border-radius: 14px;
  color: var(--texto);
  font-size: 15px;
}
.caderno__atalho i {
  color: var(--ceu-claro);
  font-size: 18px;
}
.caderno__atalho:hover {
  background: var(--vidro-2);
}

.caderno__escolha {
  min-height: 52px;
  padding: 0 12px;
  border-radius: 16px;
  font-size: 17px;
}
.caderno__escolha i {
  font-size: 20px;
}

.caderno__escolha--sim {
  background: var(--ceu);
  color: #06223f;
  box-shadow: 0 3px 0 var(--ceu-profundo);
}
.caderno__escolha--sim:active {
  box-shadow: 0 1px 0 var(--ceu-profundo);
}

.caderno__escolha--nao {
  background: var(--vidro-3);
  color: var(--texto);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}
.caderno__escolha--nao:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

body[data-tema=claro] .caderno__atalho i {
  color: var(--ceu-profundo);
}
body[data-tema=claro] .caderno__escolha--nao {
  background: var(--superficie-funda);
  box-shadow: 0 3px 0 rgba(20, 60, 120, 0.16);
}
body[data-tema=claro] .caderno__escolha--nao:active {
  box-shadow: 0 1px 0 rgba(20, 60, 120, 0.16);
}

@-webkit-keyframes pulsa-vermelho {
  50% {
    box-shadow: 0 4px 0 #b02f29, 0 0 0 10px rgba(255, 93, 85, 0.2);
  }
}

@keyframes pulsa-vermelho {
  50% {
    box-shadow: 0 4px 0 #b02f29, 0 0 0 10px rgba(255, 93, 85, 0.2);
  }
}
.licao__digitar {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.coracoes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--perigo-forte);
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 600;
}
.coracoes i {
  font-size: 22px;
}

.coracoes--zero {
  color: var(--texto-3);
}

.coracoes--perdeu i {
  -webkit-animation: coracao-perdido 0.5s var(--mola);
          animation: coracao-perdido 0.5s var(--mola);
}

@-webkit-keyframes coracao-perdido {
  40% {
    transform: scale(1.35) rotate(-10deg);
  }
}

@keyframes coracao-perdido {
  40% {
    transform: scale(1.35) rotate(-10deg);
  }
}
.licao__sem-coracoes {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  text-align: center;
}
.licao__sem-coracoes > i {
  color: var(--perigo-forte);
  font-size: 72px;
}

.licao__opcoes {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.alternativa {
  padding: 14px 16px;
  border: 2px solid var(--vidro-3);
  border-radius: var(--r-m);
  background: var(--vidro-1);
  box-shadow: 0 3px 0 var(--vidro-3);
  font-size: var(--t-texto);
  font-weight: 700;
  text-align: left;
  transition: transform 0.18s var(--mola), border-color 0.2s, background 0.2s;
}
.alternativa:active {
  transform: translateY(2px);
}
.alternativa:disabled {
  pointer-events: none;
}

.alternativa--escolhida {
  border-color: var(--ceu);
}

.alternativa--certa {
  border-color: var(--sucesso);
  background: rgba(123, 224, 164, 0.16);
  color: var(--sucesso);
}

.alternativa--errada {
  border-color: var(--perigo);
  background: rgba(255, 159, 152, 0.16);
  color: var(--perigo);
}

.montagem {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

.montagem__resposta,
.montagem__banco,
.pares__coluna {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  justify-content: center;
}

.montagem__resposta {
  min-height: 104px;
  align-content: flex-start;
  padding: var(--e-2) 0;
  background: repeating-linear-gradient(to bottom, transparent 0 47px, var(--vidro-3) 47px 48px);
}

.ficha {
  padding: 9px 14px;
  border: 2px solid var(--vidro-3);
  border-radius: var(--r-p);
  background: var(--superficie-alta);
  box-shadow: 0 3px 0 var(--vidro-3);
  font-size: var(--t-texto-p);
  font-weight: 700;
  transition: transform 0.18s var(--mola), opacity 0.2s, border-color 0.2s, background 0.2s;
}
.ficha:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--vidro-3);
}
.ficha:disabled {
  pointer-events: none;
}

.montagem__banco .ficha:disabled {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  color: transparent;
}

.ficha--escolhida {
  border-color: var(--ceu);
  background: rgba(74, 168, 255, 0.18);
}

.ficha--certa {
  border-color: var(--sucesso);
  background: rgba(123, 224, 164, 0.16);
  color: var(--sucesso);
  opacity: 0.6;
}

.ficha--errada {
  border-color: var(--perigo);
  background: rgba(255, 159, 152, 0.18);
  -webkit-animation: ficha-tremendo 0.4s;
          animation: ficha-tremendo 0.4s;
}

@-webkit-keyframes ficha-tremendo {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

@keyframes ficha-tremendo {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
.pares {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
}
.pares .pares__coluna {
  flex-direction: column;
  flex-wrap: nowrap;
}
.pares .ficha {
  width: 100%;
}

.bau {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--e-4);
  padding: 14px 16px;
  border: 1px dashed var(--vidro-3);
  border-radius: var(--r-m);
  background: var(--vidro-1);
}
.bau > i {
  color: var(--texto-3);
  font-size: 36px;
}

.bau__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.bau__texto small {
  color: var(--texto-2);
}

.bau--liberado {
  border-style: solid;
  border-color: var(--raio);
}
.bau--liberado > i {
  color: var(--raio);
  -webkit-animation: bau-pulando 1.4s var(--mola) infinite;
          animation: bau-pulando 1.4s var(--mola) infinite;
}

.bau--aberto > i {
  color: var(--estrela);
}

@-webkit-keyframes bau-pulando {
  0%, 60%, 100% {
    transform: none;
  }
  30% {
    transform: translateY(-5px) rotate(-6deg);
  }
}

@keyframes bau-pulando {
  0%, 60%, 100% {
    transform: none;
  }
  30% {
    transform: translateY(-5px) rotate(-6deg);
  }
}
.ceu__liga {
  color: var(--ceu-claro);
}

.liga__escada {
  display: flex;
  gap: var(--e-2);
  justify-content: space-between;
  margin-bottom: var(--e-4);
}

.liga__degrau {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--texto-3);
  font-size: 11px;
  font-weight: 800;
}
.liga__degrau i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--vidro-2);
  font-size: 24px;
}

.liga__degrau--passou i {
  color: var(--ceu-claro);
}

.liga__degrau--atual {
  color: var(--texto);
}
.liga__degrau--atual i {
  background: var(--raio);
  box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.25);
  color: #3a2a00;
}

.liga__posicao {
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 600;
}

.liga__linha--eu {
  border-color: var(--ceu);
  background: rgba(74, 168, 255, 0.12);
}

.liga__linha--sobe .liga__posicao {
  background: rgba(123, 224, 164, 0.2);
  color: var(--sucesso);
}

.liga__linha--desce .liga__posicao {
  background: rgba(255, 159, 152, 0.2);
  color: var(--perigo);
}

.estrelas-nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}
.estrelas-nota legend {
  flex: 0 0 100%;
  margin-bottom: var(--e-2);
}
.estrelas-nota label {
  cursor: pointer;
}
.estrelas-nota input {
  position: absolute;
  opacity: 0;
}
.estrelas-nota i {
  color: var(--texto-3);
  font-size: 38px;
  transition: color 0.15s, transform 0.2s var(--mola);
}
.estrelas-nota label:hover i,
.estrelas-nota label:has(input:checked) i {
  color: var(--estrela);
  transform: scale(1.1);
}

.legal__texto {
  margin-top: var(--e-4);
  color: var(--texto);
  font-size: var(--t-texto-p);
  line-height: 1.65;
}
.legal__texto h2 {
  margin: var(--e-6) 0 var(--e-2);
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 600;
}
.legal__texto p,
.legal__texto ul {
  margin-bottom: var(--e-3);
  color: var(--texto-2);
}
.legal__texto ul {
  padding-left: 20px;
  list-style: disc;
}
.legal__texto strong {
  color: var(--texto);
}

.escolha .campo__rotulo {
  margin-bottom: 6px;
}

.casca--chat {
  height: 100dvh;
  padding-bottom: 0;
  overflow: hidden;
}

.conteudo--chat {
  min-height: 0;
  gap: 0;
}

.chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.chat__topo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding-bottom: var(--e-3);
}

.chat__titulo {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  text-align: center;
}
.chat__titulo strong {
  overflow: hidden;
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat__titulo small {
  color: var(--texto-2);
  font-size: var(--t-legenda);
  font-weight: 700;
}

.chat__barra {
  margin: 0 0 var(--e-2);
}

.chat__palco {
  display: flex;
  justify-content: center;
  padding: var(--e-1) 0;
}

.chat__mascote {
  transition: transform 0.3s var(--mola);
}

.chat__lista {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e-3);
  min-height: 0;
  padding: var(--e-2) 2px var(--e-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.chat__lista::-webkit-scrollbar {
  width: 6px;
}
.chat__lista::-webkit-scrollbar-track {
  background: transparent;
}
.chat__lista::-webkit-scrollbar-thumb {
  border-radius: var(--r-pilula);
  background: var(--vidro-3);
}
.chat__lista::-webkit-scrollbar-thumb:hover {
  background: var(--vidro-4);
}
@supports not selector(::-webkit-scrollbar) {
  .chat__lista {
    scrollbar-width: thin;
    scrollbar-color: var(--vidro-3) transparent;
  }
}

.msg {
  display: flex;
  gap: var(--e-2);
  max-width: 90%;
  -webkit-animation: entra-msg 0.35s var(--mola);
          animation: entra-msg 0.35s var(--mola);
}

.msg--claudia {
  align-self: flex-start;
  align-items: flex-end;
}

.msg--aluno {
  align-self: flex-end;
  flex-direction: column;
  align-items: flex-end;
}

.msg__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--vidro-3);
  color: #fff;
  font-size: 17px;
}

.msg__balao {
  padding: 11px 16px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.msg--claudia .msg__balao {
  border-bottom-left-radius: 6px;
  background: var(--superficie-alta);
  border: 1px solid var(--vidro-2);
}

.msg--aluno .msg__balao {
  border-bottom-right-radius: 6px;
  background: var(--ceu);
  color: #05213d;
  font-weight: 600;
}

.erro {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.28);
  -webkit-text-decoration: underline wavy #c0262d;
          text-decoration: underline wavy #c0262d;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.msg__correcao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  padding: 10px 12px 12px;
  border: 1px solid rgba(255, 159, 152, 0.35);
  border-radius: var(--r-m);
  background: var(--superficie);
  -webkit-animation: entra-msg 0.45s 0.15s var(--mola) both;
          animation: entra-msg 0.45s 0.15s var(--mola) both;
}

.msg__modelo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(74, 168, 255, 0.28);
  border-radius: 16px 16px 16px 6px;
  background: rgba(74, 168, 255, 0.1);
  color: var(--texto);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.msg__modelo i {
  flex: none;
  margin-top: 2px;
  color: var(--ceu);
  font-size: 16px;
}
.msg__modelo span {
  min-width: 0;
}

.msg__dica {
  margin: 0;
  color: var(--texto-2);
  font-size: 14px;
  line-height: 1.45;
}

.msg__reacao {
  color: var(--texto-2);
  font-size: var(--t-legenda);
  font-style: italic;
}

.msg__reacao--ok {
  color: var(--sucesso);
  font-style: normal;
  font-weight: 700;
}

.msg__revisao {
  color: var(--sucesso);
  font-size: var(--t-legenda);
  font-weight: 800;
}

.msg--digitando .msg__balao {
  display: flex;
  gap: 4px;
  padding: 14px 16px;
}
.msg--digitando .msg__balao i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--texto-3);
  -webkit-animation: pula 1s infinite;
          animation: pula 1s infinite;
}
.msg--digitando .msg__balao i:nth-child(2) {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
}
.msg--digitando .msg__balao i:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

@-webkit-keyframes pula {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
}

@keyframes pula {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
}
@-webkit-keyframes entra-msg {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}
@keyframes entra-msg {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}
.chat__rodape {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-2) 0 calc(var(--e-3) + env(safe-area-inset-bottom));
}

.chat__limite,
.chat__fim {
  color: var(--texto-2);
  font-size: var(--t-legenda);
  font-weight: 800;
  text-align: center;
}

.chat__fim {
  padding: 10px 14px;
  border-radius: var(--r-m);
  background: rgba(123, 224, 164, 0.14);
  color: var(--sucesso);
  font-size: var(--t-texto-p);
}

.chat__form {
  display: flex;
  align-items: flex-end;
  gap: var(--e-2);
  padding: 6px 6px 6px 18px;
  border: 1.5px solid var(--vidro-3);
  border-radius: 28px;
  background: var(--superficie-alta);
}
.chat__form:focus-within {
  border-color: var(--ceu);
}
.chat__form textarea {
  flex: 1;
  max-height: 120px;
  padding: 11px 0;
  border: 0;
  background: none;
  font-size: 16px;
  line-height: 1.35;
  resize: none;
}
.chat__form textarea:focus {
  outline: none;
}

.chat__enviar {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--raio);
  color: #1b1500;
  font-size: 22px;
  transition: transform 0.18s var(--mola), opacity 0.2s;
}
.chat__enviar:active {
  transform: scale(0.9);
}
.chat__enviar:disabled {
  opacity: 0.4;
}

.casca--chamada .conteudo {
  justify-content: space-between;
}

.chamada {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e-5);
}

.chamada__palco {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  text-align: center;
}

.chamada__mascote {
  position: relative;
  z-index: 1;
}

.chamada__palco::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  margin: -150px 0 0 -120px;
  border-radius: 50%;
  border: 2px solid var(--ceu-claro);
  opacity: 0;
}

.chamada[data-estado=ouvindo] .chamada__palco::before {
  -webkit-animation: onda 1.8s ease-out infinite;
          animation: onda 1.8s ease-out infinite;
}

.chamada[data-estado=falando] .chamada__mascote {
  -webkit-animation: fala 0.45s ease-in-out infinite alternate;
          animation: fala 0.45s ease-in-out infinite alternate;
}

.chamada__estado {
  font-family: var(--fonte-titulo);
  font-size: 26px;
  font-weight: 600;
}

.chamada__tempo {
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.chamada__legenda {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 2.8em;
  margin: 0;
  padding: 0 8px;
  color: var(--texto);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.chamada__dica {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: -4px 0 0;
  padding: 0 12px;
  color: var(--texto-2);
  font-size: 15px;
  line-height: 1.4;
}

.chamada__info {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.chamada__botoes {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.chamada__controles {
  display: flex;
  justify-content: center;
  gap: var(--e-8);
}

.chamada__aviso {
  padding: 12px 16px;
  border-radius: var(--r-m);
  background: rgba(255, 159, 152, 0.12);
  font-size: var(--t-texto-p);
  text-align: center;
}

@-webkit-keyframes onda {
  from {
    opacity: 0.7;
    transform: scale(0.7);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes onda {
  from {
    opacity: 0.7;
    transform: scale(0.7);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}
@-webkit-keyframes fala {
  to {
    transform: scale(1.05) translateY(-4px);
  }
}
@keyframes fala {
  to {
    transform: scale(1.05) translateY(-4px);
  }
}
.folha--dicionario .folha__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  min-height: min(560px, 85dvh);
  max-height: 92dvh;
}

.folha--dicionario .folha__puxador {
  margin-bottom: 0;
}

.folha--dicionario .folha__texto {
  margin: 0;
}

.dicionario__busca {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 6px 6px 6px 16px;
  border: 1.5px solid var(--vidro-3);
  border-radius: 28px;
  background: var(--superficie-funda);
}
.dicionario__busca:focus-within {
  border-color: var(--ceu);
}
.dicionario__busca > i {
  color: var(--texto-3);
  font-size: 20px;
}
.dicionario__busca input {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  border: 0;
  background: none;
  font-size: 16px;
}
.dicionario__busca input:focus {
  outline: none;
}
.dicionario__busca input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.dicionario__limpar {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--vidro-2);
  color: var(--texto-2);
  font-size: 18px;
  transition: transform 0.18s var(--mola);
}
.dicionario__limpar:active {
  transform: scale(0.9);
}

.dicionario__estado {
  color: var(--texto-2);
  font-size: var(--t-texto-p);
  font-weight: 700;
  text-align: center;
}

.dicionario__verbete {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--vidro-2);
  border-radius: var(--r-g);
  background: var(--superficie);
}
.dicionario__verbete:has(> .etiqueta:only-child) {
  align-items: center;
  border: 0;
  background: none;
}

.dicionario__cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
}

.dicionario__termo {
  font-family: var(--fonte-titulo);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.dicionario__detalhes {
  margin-top: 2px;
  color: var(--texto-2);
  font-size: var(--t-legenda);
  font-weight: 700;
}

.dicionario__traducoes {
  color: var(--raio);
  font-size: var(--t-texto);
  font-weight: 800;
}

.dicionario__significado {
  color: var(--texto-2);
  font-size: var(--t-texto-p);
  line-height: 1.45;
}

.dicionario__exemplos {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dicionario__exemplos li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
}
.dicionario__exemplos span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--t-texto-p);
}
.dicionario__exemplos strong {
  font-weight: 700;
}
.dicionario__exemplos small {
  color: var(--texto-3);
  font-size: var(--t-legenda);
}

.dicionario__ouvir {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--vidro-2);
  color: var(--ceu-claro);
  font-size: 16px;
}

.dicionario__dica {
  display: flex;
  gap: var(--e-2);
  padding: var(--e-3);
  border-radius: var(--r-p);
  background: rgba(255, 210, 63, 0.1);
  font-size: var(--t-texto-p);
  line-height: 1.4;
}
.dicionario__dica i {
  flex: none;
  margin-top: 2px;
  color: var(--raio);
  font-size: 18px;
}

.dicionario__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.dicionario__duvidas {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.dicionario__duvidas .secao-titulo {
  margin-top: 0;
}

.dicionario__conversa {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.dicionario__conversa:empty {
  display: none;
}

.dicionario__fala {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--r-m);
  font-size: var(--t-texto-p);
  line-height: 1.45;
}

.dicionario__fala--aluno {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: var(--ceu);
  color: #06223f;
  font-weight: 700;
}

.dicionario__fala--nimbo {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background: var(--vidro-2);
}

.dicionario__fala--pensando {
  color: var(--texto-3);
  font-style: italic;
}

.dicionario__fala--erro {
  color: var(--perigo);
}