:root {
  --papel: #FBF7F0; --cartao: #FFFFFF; --tinta: #1F1A14; --suave: #6F665B; --linha: #ECE4D8;
  --coral: #FF6B4A; --coral-escuro: #E04E2E; --verde: #12A37A; --verde-fundo: #E4F6EF; --ambar: #F5A524;
  --vermelho: #D9453B; --vermelho-fundo: #FDECEA; --noite: #14110F; --tutor: #FF7A59;
  --raio: 20px; --sombra: 0 1px 2px rgba(31,26,20,.05), 0 8px 24px rgba(31,26,20,.06);
  --fonte: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--papel); color: var(--tinta); font-family: var(--fonte); font-size: 16px; line-height: 1.4; overscroll-behavior: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:disabled { opacity: .45; cursor: default; }
input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
#app { max-width: 520px; margin: 0 auto; min-height: 100dvh; position: relative; }

.tela { padding: calc(18px + env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom)); animation: entrar .28s ease both; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.botao { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 0 22px; border-radius: 18px; background: var(--coral); color: #fff; font-weight: 700; font-size: 17px; box-shadow: 0 4px 0 var(--coral-escuro); transition: transform .08s, box-shadow .08s; }
.botao:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--coral-escuro); }
.botao.claro { background: var(--cartao); color: var(--tinta); box-shadow: 0 4px 0 var(--linha); border: 1.5px solid var(--linha); }
.botao.texto { background: none; box-shadow: none; color: var(--suave); min-height: 44px; font-weight: 600; }
.cartao { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; }
.rotulo { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.pilula { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; font-size: 13px; font-weight: 700; background: var(--linha); color: var(--suave); }
.pilula.verde { background: var(--verde-fundo); color: var(--verde); }

/* Onboarding */
.passo { min-height: 100dvh; display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom)); }
.progresso { height: 6px; border-radius: 99px; background: var(--linha); overflow: hidden; margin: 6px 0 28px; }
.progresso i { display: block; height: 100%; border-radius: 99px; background: var(--coral); transition: width .35s ease; }
.passo h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 8px; }
.passo .sub { color: var(--suave); margin-bottom: 24px; }
.passo .corpo { flex: 1; }
.passo .rodape { display: grid; gap: 6px; padding-top: 16px; }
.campo { width: 100%; height: 58px; border-radius: 18px; border: 2px solid var(--linha); background: var(--cartao); padding: 0 18px; font-size: 20px; font-weight: 600; outline: none; }
.campo:focus { border-color: var(--coral); }
.opcoes { display: grid; gap: 10px; }
.opcao { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; padding: 14px 16px; border-radius: 18px; background: var(--cartao); border: 2px solid var(--linha); transition: border-color .15s, background .15s; }
.opcao b { display: block; font-size: 16px; }
.opcao small { color: var(--suave); font-size: 13.5px; }
.opcao .emoji { font-size: 24px; width: 34px; text-align: center; flex: none; }
.opcao.ativa { border-color: var(--coral); background: #FFF1EC; }
.fichas { display: flex; flex-wrap: wrap; gap: 9px; }
.ficha { padding: 10px 15px; border-radius: 99px; background: var(--cartao); border: 2px solid var(--linha); font-weight: 600; font-size: 15px; }
.ficha.ativa { border-color: var(--coral); background: #FFF1EC; color: var(--coral-escuro); }
.capa { text-align: center; padding-top: 6vh; }
.capa .quarteto { display: flex; justify-content: center; margin: 0 0 30px; }
.capa .quarteto .avatar { width: 84px; height: 84px; margin: 0 -9px; border: 4px solid var(--papel); border-radius: 50%; }
.capa .quarteto .avatar:nth-child(2), .capa .quarteto .avatar:nth-child(3) { transform: translateY(-14px); }
.capa h1 { font-size: 34px; }
.tutor-card { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; padding: 12px; border-radius: 20px; background: var(--cartao); border: 2px solid var(--linha); }
.tutor-card.ativa { border-color: var(--coral); background: #FFF1EC; }
.tutor-card .avatar { width: 64px; height: 64px; flex: none; }
.tutor-card b { font-size: 17px; }
.tutor-card small { display: block; color: var(--suave); font-size: 13.5px; }
.ouvir { margin-left: auto; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--papel); display: grid; place-items: center; font-size: 17px; }

/* Avatar */
.avatar { display: block; border-radius: 50%; overflow: hidden; }
.avatar svg { display: block; width: 100%; height: 100%; }
.avatar .olhos { transform-origin: 50% 46%; animation: piscar 4.6s infinite; }
@keyframes piscar { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }
.avatar .cabeca { transform-origin: 50% 80%; animation: respirar 5s ease-in-out infinite; }
@keyframes respirar { 0%, 100% { transform: rotate(-1.2deg) translateY(0); } 50% { transform: rotate(1.2deg) translateY(-1px); } }

/* Início */
.topo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.topo h1 { font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }
.topo .lado { margin-left: auto; display: flex; gap: 8px; }
.contador { display: flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 99px; background: var(--cartao); box-shadow: var(--sombra); font-weight: 800; font-size: 15px; }
.meta { display: flex; align-items: center; gap: 16px; }
.anel { position: relative; width: 78px; height: 78px; flex: none; }
.anel svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.anel b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.semana { display: flex; justify-content: space-between; margin-top: 14px; }
.semana span { display: grid; justify-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--suave); }
.semana i { width: 30px; height: 30px; border-radius: 50%; background: var(--linha); display: grid; place-items: center; font-style: normal; font-size: 14px; }
.semana .feito i { background: var(--ambar); }
.semana .hoje i { outline: 2.5px solid var(--tinta); outline-offset: 2px; }
.continuar { background: linear-gradient(140deg, #FF6B4A, #FF8F5A); color: #fff; position: relative; overflow: hidden; margin-top: 14px; }
.continuar .rotulo { color: rgba(255,255,255,.8); }
.continuar h2 { font-size: 22px; margin: 4px 0 2px; letter-spacing: -.01em; }
.continuar p { opacity: .92; font-size: 14.5px; max-width: 78%; }
.continuar .botao { margin-top: 16px; width: calc(100% - 92px); background: #fff; color: var(--coral-escuro); box-shadow: 0 4px 0 rgba(0,0,0,.14); }
.continuar .avatar { position: absolute; right: -14px; bottom: -18px; width: 124px; height: 124px; opacity: .96; border: 4px solid rgba(255,255,255,.35); }
.atalhos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.atalho { padding: 14px 10px; text-align: center; border-radius: 18px; background: var(--cartao); box-shadow: var(--sombra); font-size: 13.5px; font-weight: 700; position: relative; }
.atalho .emoji { display: block; font-size: 26px; margin-bottom: 4px; }
.atalho .bolha { position: absolute; top: 8px; right: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--coral); color: #fff; font-size: 11.5px; display: grid; place-items: center; }
.secao { margin: 26px 0 12px; display: flex; align-items: baseline; justify-content: space-between; }
.secao h2 { font-size: 19px; letter-spacing: -.01em; }
.secao button { color: var(--coral-escuro); font-weight: 700; font-size: 14px; }
.trilho { display: flex; gap: 12px; overflow-x: auto; margin: 0 -18px; padding: 4px 18px 14px; scrollbar-width: none; scroll-snap-type: x proximity; }
.trilho::-webkit-scrollbar { display: none; }
.cena { flex: none; width: 158px; padding: 14px; border-radius: 18px; background: var(--cartao); box-shadow: var(--sombra); text-align: left; scroll-snap-align: start; }
.cena .emoji { font-size: 30px; display: block; margin-bottom: 8px; }
.cena b { display: block; font-size: 15px; line-height: 1.2; margin-bottom: 6px; }
.item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 0; border-bottom: 1px solid var(--linha); }
.item:last-child { border-bottom: 0; }
.item .emoji { width: 42px; height: 42px; border-radius: 13px; background: var(--papel); display: grid; place-items: center; font-size: 21px; flex: none; }
.item b { display: block; font-size: 15.5px; }
.item small { color: var(--suave); font-size: 13px; }
.item .nota { margin-left: auto; font-weight: 800; color: var(--verde); flex: none; }

/* Navegação */
.abas { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 520px; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(251,247,240,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--linha); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); z-index: 5; }
.abas button { display: grid; justify-items: center; gap: 2px; font-size: 11.5px; font-weight: 700; color: var(--suave); padding: 4px 0; }
.abas button span { font-size: 22px; filter: grayscale(1); opacity: .6; }
.abas button.ativa { color: var(--coral-escuro); }
.abas button.ativa span { filter: none; opacity: 1; }

/* Trilha */
.niveis { display: flex; gap: 8px; margin-bottom: 18px; }
.niveis button { flex: 1; height: 42px; border-radius: 13px; background: var(--cartao); border: 2px solid var(--linha); font-weight: 800; }
.niveis button.ativa { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.unidade { margin-bottom: 14px; }
.unidade header { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.unidade header .emoji { font-size: 30px; }
.unidade header small { color: var(--suave); display: block; font-size: 13.5px; }
.licao .bola { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--linha); display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; color: var(--suave); }
.licao.feita .bola { background: var(--verde); border-color: var(--verde); color: #fff; }
.licao.vez .bola { border-color: var(--coral); color: var(--coral-escuro); }

/* Folha (modal de baixo) */
.folha { position: fixed; inset: 0; z-index: 20; background: rgba(20,17,15,.45); display: flex; align-items: flex-end; justify-content: center; animation: clarear .2s ease both; }
.folha[hidden] { display: none; }
@keyframes clarear { from { opacity: 0; } to { opacity: 1; } }
.folha > div { width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto; background: var(--papel); border-radius: 28px 28px 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); animation: subir .28s cubic-bezier(.2,.9,.3,1) both; }
@keyframes subir { from { transform: translateY(40%); } to { transform: none; } }
.folha .alca { width: 40px; height: 5px; border-radius: 99px; background: var(--linha); margin: 0 auto 16px; }
.folha h2 { font-size: 23px; letter-spacing: -.02em; }
.folha .sub { color: var(--suave); margin: 4px 0 16px; }
.objetivo { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 15px; }
.objetivo i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linha); display: grid; place-items: center; font-style: normal; font-size: 12px; color: transparent; margin-top: 1px; }
.objetivo.feito i { background: var(--verde); border-color: var(--verde); color: #fff; }
.frase { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 15px; background: var(--cartao); margin-top: 8px; text-align: left; width: 100%; }
.frase b { display: block; font-size: 15.5px; }
.frase small { color: var(--suave); font-size: 13.5px; }
.frase .ouvir { background: var(--papel); width: 38px; height: 38px; }
.aviso { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 40; background: var(--tinta); color: #fff; padding: 11px 18px; border-radius: 99px; font-weight: 700; font-size: 14.5px; box-shadow: var(--sombra); animation: entrar .25s ease both; max-width: 92vw; text-align: center; }
.aviso[hidden] { display: none; }

/* Conversa */
.conversa { position: fixed; inset: 0; z-index: 10; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--tutor) 42%, var(--noite)) 0%, var(--noite) 62%); color: #fff; display: flex; flex-direction: column; }
.conversa > * { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
.barra { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 6px; }
.barra .redondo { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 17px; flex: none; }
.barra .titulo { flex: 1; min-width: 0; text-align: center; }
.barra .titulo b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra .titulo small { opacity: .7; font-size: 12.5px; }
.metas { display: flex; gap: 5px; justify-content: center; padding: 2px 0 0; }
.metas i { width: 26px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.22); transition: background .4s; }
.metas i.feito { background: #5BE3B4; }
.palco { display: grid; justify-items: center; padding: 8px 0 4px; flex: none; transition: all .3s; }
.palco .halo { position: relative; width: 148px; height: 148px; display: grid; place-items: center; }
.palco .halo::before, .palco .halo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--tutor); opacity: 0; }
.conversa[data-estado="tutor"] .halo::before { animation: onda 1.6s ease-out infinite; }
.conversa[data-estado="tutor"] .halo::after { animation: onda 1.6s ease-out .8s infinite; }
@keyframes onda { from { opacity: .7; transform: scale(.86); } to { opacity: 0; transform: scale(1.28); } }
.palco .avatar { width: 128px; height: 128px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.palco .estado { margin-top: 6px; font-size: 13.5px; font-weight: 700; opacity: .8; height: 20px; display: flex; align-items: center; gap: 7px; }
.pontos i { display: inline-block; width: 6px; height: 6px; margin: 0 1.5px; border-radius: 50%; background: #fff; animation: pulo 1s infinite; }
.pontos i:nth-child(2) { animation-delay: .15s; } .pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes pulo { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.rolo { flex: 1; overflow-y: auto; padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; mask-image: linear-gradient(to bottom, transparent 0, #000 22px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.rolo::-webkit-scrollbar { display: none; }
.fala { max-width: 88%; padding: 12px 15px; border-radius: 20px; font-size: 17px; line-height: 1.38; animation: entrar .25s ease both; }
.fala.tutor { align-self: flex-start; background: rgba(255,255,255,.11); border-bottom-left-radius: 6px; }
.fala.aluno { align-self: flex-end; background: #fff; color: var(--tinta); border-bottom-right-radius: 6px; }
.fala .acoes { display: flex; gap: 6px; margin-top: 8px; }
.fala .acoes button { font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.13); }
.fala .traducao { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.16); font-size: 15px; opacity: .85; }
.fala .oculto { filter: blur(7px); user-select: none; }
.revisao { margin-top: 9px; padding: 10px 12px; border-radius: 14px; font-size: 14.5px; animation: entrar .3s ease both; }
.revisao.erro { background: var(--vermelho-fundo); }
.revisao.dica { background: #EEF3FF; }
.revisao.certo { background: var(--verde-fundo); color: var(--verde); font-weight: 700; }
.revisao .tag { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--vermelho); }
.revisao.dica .tag { color: #3D62D9; }
.revisao b { display: block; margin: 2px 0 3px; font-size: 15.5px; }
.revisao small { color: var(--suave); font-size: 13.5px; display: block; }
.revisao button { margin-top: 7px; font-size: 12.5px; font-weight: 800; color: var(--tinta); background: rgba(31,26,20,.07); padding: 5px 10px; border-radius: 99px; }
.sugestoes { padding: 0 14px 8px; display: grid; gap: 7px; }
.sugestoes button { text-align: left; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); font-size: 15px; }
.sugestoes button small { display: block; opacity: .65; font-size: 13px; }
.sugestoes .rotulo { color: rgba(255,255,255,.6); padding: 0 4px; }
.controles { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 18px calc(16px + env(safe-area-inset-bottom)); }
.controles .lado { display: flex; gap: 10px; }
.controles .lado:last-child { justify-content: flex-end; }
.mini { display: grid; justify-items: center; gap: 3px; font-size: 11px; font-weight: 700; opacity: .85; min-width: 52px; }
.mini span { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 19px; }
.mic { position: relative; width: 84px; height: 84px; border-radius: 50%; background: #fff; color: var(--noite); display: grid; place-items: center; font-size: 32px; box-shadow: 0 8px 30px rgba(0,0,0,.35); transition: transform .12s, background .2s; }
.mic:active { transform: scale(.94); }
.mic::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid rgba(255,255,255,.0); transform: scale(var(--nivel, 1)); transition: transform .08s linear, border-color .2s; }
.conversa[data-estado="ouvindo"] .mic { background: var(--coral); color: #fff; }
.conversa[data-estado="ouvindo"] .mic::before { border-color: rgba(255,107,74,.55); }
.conversa[data-estado="enviando"] .mic, .conversa[data-estado="conectando"] .mic { opacity: .5; }
.legenda-mic { text-align: center; font-size: 12.5px; font-weight: 700; opacity: .7; padding-bottom: 4px; height: 20px; }
.digitar { display: flex; gap: 8px; padding: 0 14px 8px; }
.digitar input { flex: 1; height: 48px; border-radius: 99px; border: 0; padding: 0 18px; background: rgba(255,255,255,.14); color: #fff; outline: none; font-size: 16px; }
.digitar input::placeholder { color: rgba(255,255,255,.5); }
.digitar button { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--noite); font-size: 19px; flex: none; }
.final { margin: 0 16px 8px; padding: 14px; border-radius: 18px; background: #5BE3B4; color: #07392B; font-weight: 800; text-align: center; animation: entrar .3s ease both; }
.xp-voa { position: absolute; right: 22px; bottom: 150px; font-weight: 800; color: #FFD66B; animation: voar 1.2s ease-out both; pointer-events: none; }
@keyframes voar { from { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-46px); } }

/* Carregando e relatório */
.espera { position: fixed; inset: 0; z-index: 30; background: var(--papel); display: grid; place-items: center; text-align: center; padding: 30px; }
.espera .avatar { width: 120px; height: 120px; margin: 0 auto 20px; }
.espera h2 { font-size: 22px; margin-bottom: 6px; }
.espera p { color: var(--suave); min-height: 24px; }
.relatorio .placar { text-align: center; padding: 8px 0 4px; }
.relatorio .anel { width: 150px; height: 150px; margin: 6px auto 10px; }
.relatorio .anel b { font-size: 44px; letter-spacing: -.03em; }
.relatorio h1 { font-size: 25px; letter-spacing: -.02em; }
.trofeus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.trofeus div { background: var(--cartao); border-radius: 16px; padding: 12px 6px; text-align: center; box-shadow: var(--sombra); }
.trofeus b { display: block; font-size: 20px; }
.trofeus small { color: var(--suave); font-size: 12px; font-weight: 700; }
.barras { display: grid; gap: 11px; }
.barras div { display: grid; grid-template-columns: 104px 1fr 34px; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.barras i { height: 9px; border-radius: 99px; background: var(--linha); overflow: hidden; display: block; }
.barras i u { display: block; height: 100%; border-radius: 99px; background: var(--verde); transition: width .9s cubic-bezier(.2,.9,.3,1); }
.bloco { margin-top: 14px; }
.bloco h3 { font-size: 16px; margin-bottom: 8px; }
.correcao { padding: 12px 0; border-bottom: 1px solid var(--linha); }
.correcao:last-child { border-bottom: 0; padding-bottom: 0; }
.correcao s { color: var(--vermelho); text-decoration-thickness: 1.5px; display: block; font-size: 15px; }
.correcao b { color: var(--verde); display: block; margin: 3px 0; font-size: 16px; }
.correcao small { color: var(--suave); }
.linha-forte { display: flex; gap: 9px; padding: 5px 0; font-size: 15px; }

/* Palavras e pronúncia */
.carta { min-height: 250px; display: grid; place-items: center; text-align: center; padding: 26px; margin: 12px 0 16px; }
.carta h2 { font-size: 30px; letter-spacing: -.02em; }
.carta p { color: var(--suave); margin-top: 8px; font-size: 16px; }
.carta .pt { font-size: 21px; color: var(--coral-escuro); font-weight: 800; margin-top: 12px; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vazio { text-align: center; padding: 40px 20px; color: var(--suave); }
.vazio .emoji { font-size: 46px; display: block; margin-bottom: 10px; }
.pron { text-align: center; padding: 26px 18px; margin: 12px 0; }
.pron h2 { font-size: 25px; line-height: 1.3; letter-spacing: -.01em; }
.pron h2 span { transition: color .3s; }
.pron h2 span.ok { color: var(--verde); }
.pron h2 span.falhou { color: var(--vermelho); text-decoration: underline wavy; text-underline-offset: 5px; }
.pron p { color: var(--suave); margin-top: 8px; }
.gravar { width: 84px; height: 84px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 32px; margin: 12px auto; display: grid; place-items: center; box-shadow: 0 5px 0 var(--coral-escuro); }
.gravar.ativo { animation: pulsar 1s infinite; background: var(--vermelho); }
@keyframes pulsar { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,69,59,.5); } 50% { box-shadow: 0 0 0 16px rgba(217,69,59,0); } }
.ajuste { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--linha); gap: 12px; }
.ajuste:last-child { border-bottom: 0; }
.ajuste small { display: block; color: var(--suave); font-size: 13px; }
.segmento { display: flex; background: var(--papel); border-radius: 12px; padding: 3px; flex: none; }
.segmento button { padding: 7px 11px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--suave); }
.segmento button.ativa { background: var(--cartao); color: var(--tinta); box-shadow: var(--sombra); }

.fala.provisoria { opacity: .6; }
.socorro { display: block; margin: 0 auto 6px; padding: 7px 14px; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 13px; font-weight: 700; text-align: center; width: fit-content; }
.socorro.ativo { background: #5BE3B4; color: #07392B; border-color: transparent; }

/* Login e formulários */
.login { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); text-align: center; animation: entrar .28s ease both; }
.login .marca { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 16px; box-shadow: 0 8px 22px rgba(255,107,74,.28); }
.login h1 { font-size: 27px; letter-spacing: -.02em; }
.login .sub { color: var(--suave); margin: 4px 0 26px; }
.login .cartao { width: 100%; max-width: 400px; text-align: left; padding: 24px 22px; border: 1px solid var(--linha); }
.login .cartao h2 { font-size: 20px; margin-bottom: 4px; }
.login label, .formulario label { display: block; font-size: 14.5px; font-weight: 700; margin: 16px 0 7px; }
.entrada { width: 100%; height: 50px; border-radius: 13px; border: 1.5px solid var(--linha); background: var(--papel); padding: 0 14px; font-size: 16.5px; outline: none; transition: border-color .15s, box-shadow .15s; }
.entrada:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,107,74,.16); background: var(--cartao); }
.senha { position: relative; }
.senha .entrada { padding-right: 48px; }
.olho { position: absolute; right: 4px; top: 4px; width: 42px; height: 42px; display: grid; place-items: center; color: var(--suave); border-radius: 10px; }
.olho.ativo { color: var(--coral-escuro); }
.elo { color: var(--coral-escuro); font-weight: 700; font-size: 14.5px; }
.elo.direita { display: block; margin: 12px 0 0 auto; }
.login .botao { margin-top: 18px; }
.erro { background: var(--vermelho-fundo); color: var(--vermelho); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; font-weight: 600; margin-top: 14px; }
.erro[hidden] { display: none; }
.rodape-login { margin-top: 20px; color: var(--suave); font-size: 15px; }
.versao { margin-top: 26px; color: var(--suave); font-size: 12.5px; }
.formulario { text-align: left; }
.formulario label:first-of-type { margin-top: 4px; }