/* =====================================================================
   Funcionalidades — bento no estilo da huly.io ("Produtividade incomparável"):
   cards pretos em linhas estreito/largo, ilustração animada preenchendo o
   topo com painéis claros de alto contraste, legenda embaixo com título em
   negrito seguido do texto. Mecânica das cenas clonada do meuassessor.com
   (fases ligadas por relógio em cards.js). Geist 400/500 somente.
   ===================================================================== */
.hb { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .hb { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) {
  .hb { grid-template-columns: 36fr 28fr 36fr; }
  .hb > .hb-card:nth-child(1) { grid-column: 1 / 2; }
  .hb > .hb-card:nth-child(2) { grid-column: 2 / 4; }
  .hb > .hb-card:nth-child(3) { grid-column: 1 / 3; }
  .hb > .hb-card:nth-child(4) { grid-column: 3 / 4; }
  .hb > .hb-card:nth-child(5) { grid-column: 1 / 2; }
  .hb > .hb-card:nth-child(6) { grid-column: 2 / 4; }
}
.hb-card {
  position: relative; display: grid; grid-template-rows: 1fr auto; height: 420px; overflow: hidden;
  border-radius: 14px; background: #0c0c0d; color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 0 7px rgba(0, 0, 0, 0.035);
}
@media (max-width: 679px) { .hb-card { height: 400px; } }
/* textura de pontos e luz fria no topo, como nos cards da Huly */
.hb-card::before { content: ''; position: absolute; inset: 0 0 35%; background-image: radial-gradient(rgba(255, 255, 255, 0.14) 0.8px, transparent 1.3px); background-size: 7px 7px; -webkit-mask-image: radial-gradient(70% 90% at 50% 10%, #000, transparent 85%); mask-image: radial-gradient(70% 90% at 50% 10%, #000, transparent 85%); opacity: 0.6; pointer-events: none; }
.hb-card::after { content: ''; position: absolute; left: 50%; top: -30%; width: 110%; height: 80%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.11), transparent 72%); pointer-events: none; }

/* legenda: título em negrito + texto, sobre degradê escuro */
.hb-cap { position: relative; z-index: 3; grid-row: 2; padding: 64px 24px 24px; margin-top: -48px; background: linear-gradient(to top, #0c0c0d 0%, #0c0c0d 44%, rgba(12, 12, 13, 0) 100%); }
.hb-cap p { font-size: 16px; line-height: 22px; color: rgba(255, 255, 255, 0.65); max-width: 520px; text-wrap: pretty; }
.hb-cap strong { font-weight: 500; color: #fff; }

/* palco da ilustração */
.ma-stage { position: relative; z-index: 1; grid-row: 1; min-height: 0; width: 100%; overflow: hidden; perspective: 1200px; animation: ma-flutua 6s ease-in-out infinite alternate; }
@keyframes ma-flutua { 0% { transform: translateY(3px); } 100% { transform: translateY(-3px); } }
.hb-card.is-namao .ma-stage { animation-play-state: paused; }
/* painéis laterais apagados nos cards largos (como os cards vizinhos desfocados da Huly) */
.hb-card--w .ma-stage::before, .hb-card--w .ma-stage::after { content: ''; position: absolute; top: 24px; width: 240px; height: 260px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.08); filter: blur(1px); opacity: 0.55; }
.hb-card--w .ma-stage::before { left: calc(50% - 400px); }
.hb-card--w .ma-stage::after { right: calc(50% - 400px); }
@media (max-width: 1099px) { .hb-card--w .ma-stage::before, .hb-card--w .ma-stage::after { display: none; } }

/* cena: 324×340 de desenho, escalada pelo JS (--k) e inclinada pelo ponteiro (--rx/--ry) */
.ma-cena { --ease: cubic-bezier(0.22, 1, 0.36, 1); --desliza: cubic-bezier(0.34, 0.28, 0.18, 1); --encaixe: cubic-bezier(0.5, 0.05, 0.2, 1); --toque: cubic-bezier(0.4, 0, 0.2, 1); --saida: cubic-bezier(0.5, 0, 0.9, 0.35); --mao-x: cubic-bezier(0.4, 0, 0.2, 1); --mao-y: cubic-bezier(0.36, 0.06, 0.2, 1);
  --ink: #0f0f10; --muted: #5b5b63; --faint: #8e8e96; --line: rgba(0, 0, 0, 0.09); --fill: rgba(0, 0, 0, 0.045);
  position: absolute; left: 50%; top: 50%; width: 324px; height: 340px; margin: -170px 0 0 -162px; overflow: hidden; font-size: 13.5px; color: var(--ink); pointer-events: none; transform-style: preserve-3d; will-change: transform; transform: scale(var(--k, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-origin: 50% 50%; }
.ma-cena.is-mudo, .ma-cena.is-mudo *, .ma-cena.is-mudo *::before, .ma-cena.is-mudo *::after { transition: none !important; animation: none !important; }
.ma-app { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: #0f0f10; color: #fff; }
.ma-app .ic { width: 14px; height: 14px; }
.ma-topo { display: flex; align-items: center; gap: 10px; }
.ma-topo > div { min-width: 0; }
.ma-topo b { display: block; font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.25; }
.ma-topo b + span { display: block; margin-top: 2px; font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* painel claro (o "Today" / "Design meeting" da Huly) */
.ma-painel { background: #fff; color: var(--ink); border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 30px 60px -20px rgba(0, 0, 0, 0.9), 0 2px 0 rgba(255, 255, 255, 0.6) inset; }
/* slot: texto "cru" sobe e dá lugar ao texto final */
.ma-slot { position: relative; display: block; overflow: hidden; }
.ma-slot > span { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; transition: transform 380ms var(--encaixe); }
.ma-slot > .ma-cru { transform: translateY(0); opacity: 1; transition: transform 380ms var(--encaixe), opacity 220ms ease-out 40ms; }
.ma-slot > .ma-cat { transform: translateY(100%); }
/* polegar: anda por transform e bate com anel */
.ma-mao { position: absolute; inset: 0; z-index: 7; pointer-events: none; transform: translate(var(--mx, 165px), var(--my, 460px)); transition: transform 700ms var(--mao-x); }
.ma-mao > i { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(0, 0, 0, 0.18); border: 1.5px solid rgba(0, 0, 0, 0.6); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); opacity: 0; transform: scale(1); transition: transform 110ms var(--toque), opacity 300ms ease; }
.ma-mao > i::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.45); opacity: 0; }
.ma-cena.is-mao .ma-mao > i { opacity: 1; }
.ma-cena.is-bate .ma-mao > i { transform: scale(0.82); }
.ma-cena.is-bate .ma-mao > i::after { animation: maAnel 700ms var(--ease) forwards; }
.ma-cena.is-saindo .ma-mao > i { opacity: 0; transition: opacity 260ms ease; }
@keyframes maAnel { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }

/* ---------- 1) Telefone 3D com a notificação (clone do cartão black do Meu Assessor) ---------- */
.mc { position: absolute; left: 50%; top: 50%; width: 324px; height: 340px; margin: -170px 0 0 -162px; transform: scale(var(--k, 1)); transform-origin: 50% 50%; }
.mc-cena { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 1300px; }
.mc-tilt { height: 100%; max-height: 340px; aspect-ratio: 9 / 18.6; transform-style: preserve-3d; will-change: transform; }
.mc-flutua { width: 100%; height: 100%; transform-style: preserve-3d; animation: mc-flutua 4.8s ease-in-out infinite alternate; animation-play-state: paused; will-change: transform; }
.mc-fone { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: mc-balanca 9s ease-in-out infinite; animation-play-state: paused; will-change: transform; }
.hb-card.is-vivo .mc-flutua, .hb-card.is-vivo .mc-fone, .hb-card.is-vivo .mc-brilho, .hb-card.is-vivo .mc-notif, .hb-card.is-vivo .mc-notif-btn, .hb-card.is-vivo .mc-l, .hb-card.is-vivo .mc-ok { animation-play-state: running; }
.hb-card.is-namao.is-vivo .mc-fone, .hb-card.is-namao.is-vivo .mc-brilho { animation-play-state: paused; }
.mc-verso { position: absolute; inset: 0; border-radius: 30px; background: #030304; border: 1px solid rgba(255, 255, 255, 0.07); transform: translateZ(-4px); backface-visibility: hidden; }
.mc-face { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.3); background: radial-gradient(120% 90% at 18% 6%, rgba(255, 255, 255, 0.14), transparent 55%), linear-gradient(170deg, #1e1e22 0%, #0d0d10 60%, #17171a 100%); box-shadow: inset 0 0 0 3px #000, inset 0 0 0 4px rgba(255, 255, 255, 0.1), 0 30px 60px rgba(0, 0, 0, 0.7); backface-visibility: hidden; }
.mc-brilho { position: absolute; inset: -12%; background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.06) 44%, rgba(255, 255, 255, 0.16) 52%, rgba(255, 255, 255, 0.06) 60%, transparent 70%); animation: mc-luz 7s ease-in-out infinite; animation-play-state: paused; will-change: transform; }
.mc-ilha { position: absolute; left: 50%; top: 12px; width: 34%; height: 16px; border-radius: 99px; background: #000; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.mc-hora { position: absolute; left: 16px; top: 13px; font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.mc-apps { position: absolute; left: 14px; right: 14px; top: 170px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; opacity: 0.7; }
.mc-apps i { aspect-ratio: 1; border-radius: 10px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.08); }
.mc-notif { position: absolute; left: 9px; right: 9px; top: 44px; padding: 11px 12px 12px; border-radius: 14px; background: #fff; color: #0f0f10; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.9); opacity: 0; animation: mc-notif 8s ease infinite; animation-play-state: paused; }
.mc-notif-top { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: #8e8e96; }
.mc-notif-top .ma-app { width: 18px; height: 18px; border-radius: 5px; }
.mc-notif-top .ma-app .ic { width: 10px; height: 10px; }
.mc-notif-top b { flex: 1; color: #0f0f10; font-weight: 500; font-size: 10px; }
.mc-notif-x { margin-top: 8px; font-size: 11px; line-height: 1.35; color: #3a3a41; }
.mc-notif-btn { position: relative; margin-top: 9px; height: 28px; border-radius: 8px; background: #0f0f10; color: #fff; font-size: 10.5px; font-weight: 500; display: grid; place-items: center; overflow: hidden; animation: mc-btn 8s ease infinite; animation-play-state: paused; }
.mc-l, .mc-ok { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; }
.mc-l { animation: mc-label 8s ease infinite; animation-play-state: paused; }
.mc-ok { opacity: 0; animation: mc-okin 8s ease infinite; animation-play-state: paused; }
.mc-ok svg { width: 11px; height: 11px; }
@keyframes mc-balanca { 0% { transform: rotateY(-22deg) rotateX(6deg); } 30% { transform: rotateY(8deg) rotateX(-2deg); } 52% { transform: rotateY(19deg) rotateX(-6deg); } 76% { transform: rotateY(-6deg) rotateX(2deg); } 100% { transform: rotateY(-22deg) rotateX(6deg); } }
@keyframes mc-flutua { 0% { transform: translateY(8px) rotateZ(1deg); } 100% { transform: translateY(-8px) rotateZ(-0.8deg); } }
@keyframes mc-luz { 0% { transform: translateX(-30%); } 52% { transform: translateX(30%); } 100% { transform: translateX(-30%); } }
@keyframes mc-notif { 0% { opacity: 0; transform: translateY(-18px) scale(0.96); } 8%, 86% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes mc-btn { 0%, 46% { background: #0f0f10; } 50% { transform: scale(0.97); } 54%, 100% { background: #2b2b31; transform: none; } }
@keyframes mc-label { 0%, 48% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes mc-okin { 0%, 50% { opacity: 0; } 56%, 100% { opacity: 1; } }

/* ---------- 2) Link de agendamento: o polegar escolhe o horário ---------- */
.ml-tela { position: absolute; left: 0; right: 0; top: 50%; padding: 18px 18px 18px; opacity: 0; transform: translate3d(0, calc(-50% + 28px), 0); transition: transform 680ms var(--ease), opacity 420ms ease-out; }
.ml.is-in .ml-tela { opacity: 1; transform: translate3d(0, -50%, 0); }
.ml.is-saindo .ml-tela { opacity: 0; transform: translate3d(0, calc(-50% + 40px), 0); transition: transform 560ms var(--saida), opacity 420ms ease-in 60ms; }
.ml-dia { font-size: 12.5px; color: var(--muted); }
.ml-slots { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ml-slots span { height: 46px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--fill); font-size: 14px; color: var(--ink); transition: background 260ms var(--ease), color 260ms, border-color 260ms, transform 160ms var(--toque); }
.ml.is-bate1 .ml-slots .is-alvo { transform: scale(0.95); }
.ml.is-pick .ml-slots .is-alvo { background: #0f0f10; color: #fff; border-color: #0f0f10; transform: none; }
.ml-btn { position: relative; margin-top: 16px; height: 46px; border-radius: 11px; background: var(--fill); border: 1px solid var(--line); color: var(--faint); font-size: 13px; font-weight: 500; display: grid; place-items: center; overflow: hidden; transition: background 300ms var(--ease), color 300ms, border-color 300ms, transform 160ms var(--toque); }
.ml.is-pick .ml-btn { background: #0f0f10; color: #fff; border-color: #0f0f10; }
.ml.is-bate2 .ml-btn { transform: scale(0.97); }
.ml.is-ok .ml-btn { background: #e9e9ec; border-color: #e9e9ec; color: #0f0f10; transform: none; }
.ml-btn-l, .ml-btn-ok { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity 240ms ease, transform 300ms var(--ease); }
.ml-btn-ok { opacity: 0; transform: translateY(8px); }
.ml-btn-ok svg { width: 12px; height: 12px; }
.ml.is-ok .ml-btn-l { opacity: 0; transform: translateY(-8px); }
.ml.is-ok .ml-btn-ok { opacity: 1; transform: none; }
.ml { --mx: 160px; --my: 420px; }
.ml.is-mira1 { --mx: 160px; --my: 142px; }
.ml.is-mira2 { --mx: 160px; --my: 262px; }
.ml.is-saindo { --my: 460px; }

/* ---------- 3) Agenda: painel abre, dia marca, linhas entram, novo agendamento pousa ---------- */
.mg-painel { position: absolute; left: 0; right: 0; top: 50%; margin-top: -150px; height: 300px; overflow: hidden; opacity: 0; clip-path: inset(120px 10px 150px 10px round 12px); }
.mg.is-painel .mg-painel { opacity: 1; clip-path: inset(0 0 0 0 round 18px); transition: clip-path 620ms var(--desliza), opacity 200ms ease-out; }
.mg.is-saindo .mg-painel { opacity: 0; transform: translate3d(0, 60px, 0); transition: transform 600ms var(--saida), opacity 460ms ease-in 60ms; }
.mg-semana { position: relative; margin: 14px 12px 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.mg-semana > span { position: relative; z-index: 1; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12.5px; color: var(--ink); transition: color 300ms; }
.mg-semana > span i { font-style: normal; font-size: 9px; letter-spacing: 0.08em; color: var(--faint); }
.mg.is-dia .mg-semana > .is-hoje { color: #fff; }
.mg.is-dia .mg-semana > .is-hoje i { color: rgba(255, 255, 255, 0.6); }
.mg-pill { position: absolute; top: 0; left: 0; width: calc(100% / 7); height: 50px; border-radius: 12px; background: #0f0f10; transform: translateX(0); opacity: 0; transition: transform 520ms var(--ease), opacity 200ms; }
.mg.is-dia .mg-pill { opacity: 1; transform: translateX(200%); }
.mg-lista { margin: 12px 0 0; }
.mg-linha, .mg-nova { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 18px; border-top: 1px solid var(--line); }
.mg-linha { opacity: 0; transform: translate3d(0, 10px, 0); transition: transform 460ms var(--ease), opacity 360ms ease-out; }
.mg.is-l1 .mg-linha:nth-child(1), .mg.is-l2 .mg-linha:nth-child(2) { opacity: 1; transform: none; }
.mg-h { width: 40px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.mg-linha > div, .mg-nova > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-linha b, .mg-nova b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.mg-linha > div span, .mg-nova > div span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-dot { width: 7px; height: 7px; border-radius: 50%; background: #0f0f10; flex: none; }
.mg-nova { position: absolute; left: 0; right: 0; top: 222px; z-index: 3; opacity: 0; transform: translate3d(0, 50px, 0); transition: transform 620ms var(--desliza), opacity 300ms ease-out; border-top: 0; }
.mg-nova::before { content: ''; position: absolute; inset: 6px 10px; z-index: -1; border-radius: 14px; background: #0f0f10; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.mg-nova b { color: #fff; }
.mg-nova > div span, .mg-nova .mg-h { color: rgba(255, 255, 255, 0.6); }
.mg.is-nova .mg-nova { opacity: 1; transform: none; }
.mg-tag { font-style: normal; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 99px; padding: 3px 7px; }

/* ---------- 4) Financeiro: painel, barras, pix que chega e saldo que rola ---------- */
.mf-painel { position: absolute; left: 0; right: 0; top: 50%; margin-top: -110px; height: 240px; overflow: hidden; padding: 22px 22px 18px; opacity: 0; clip-path: inset(80px 10px 100px 10px round 12px); }
.mf.is-painel .mf-painel { opacity: 1; clip-path: inset(0 0 0 0 round 18px); transition: clip-path 620ms var(--desliza), opacity 200ms ease-out; }
.mf.is-saindo .mf-painel, .mf.is-saindo .mf-nova { opacity: 0; transform: translate3d(0, 60px, 0); transition: transform 600ms var(--saida), opacity 460ms ease-in 60ms; }
.mf-rot { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.mf-total { height: 36px; margin-top: 6px; }
.mf-total > span { font-size: 30px; letter-spacing: -0.03em; font-weight: 500; line-height: 36px; font-variant-numeric: tabular-nums; color: var(--ink); }
.mf.is-total .mf-total > .ma-cru { transform: translateY(-100%); opacity: 0; }
.mf.is-total .mf-total > .ma-cat { transform: translateY(0); }
.mf-bars { margin-top: 22px; height: 100px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; align-items: end; }
.mf-bars i { display: block; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(to top, #6b6b73, #0f0f10); transform: scaleY(0.04); transform-origin: bottom; transition: transform 700ms var(--ease); }
.mf.is-bars .mf-bars i { transform: scaleY(1); }
.mf.is-bars .mf-bars i:nth-child(2) { transition-delay: 60ms; } .mf.is-bars .mf-bars i:nth-child(3) { transition-delay: 120ms; } .mf.is-bars .mf-bars i:nth-child(4) { transition-delay: 180ms; } .mf.is-bars .mf-bars i:nth-child(5) { transition-delay: 240ms; } .mf.is-bars .mf-bars i:nth-child(6) { transition-delay: 300ms; } .mf.is-bars .mf-bars i:nth-child(7) { transition-delay: 360ms; } .mf.is-bars .mf-bars i:nth-child(8) { transition-delay: 420ms; }
.mf-nova { position: absolute; left: 10px; right: 10px; top: 50%; margin-top: -156px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: #0f0f10; color: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); opacity: 0; transform: translate3d(0, -26px, 0) scale(0.96); transition: transform 620ms var(--desliza), opacity 300ms ease-out; }
.mf.is-nova .mf-nova { opacity: 1; transform: none; }
.mf-pix { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: #fff; color: #0f0f10; }
.mf-pix svg { width: 15px; height: 15px; }
.mf-nova > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mf-nova b { font-size: 12px; font-weight: 500; color: #fff; }
.mf-nova > div span { font-size: 10.5px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-v { color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- 5) IA Gestora: conversa com digitação (clone do chat do Meu Assessor) ---------- */
.mr-tela { position: absolute; left: 0; right: 0; top: 50%; margin-top: -158px; height: 316px; padding: 16px; display: flex; flex-direction: column; opacity: 0; transform: translate3d(0, 24px, 0); transition: transform 680ms var(--ease), opacity 420ms ease-out; }
.mr.is-in .mr-tela { opacity: 1; transform: none; }
.mr.is-saindo .mr-tela { opacity: 0; transform: translate3d(0, 40px, 0); transition: transform 560ms var(--saida), opacity 420ms ease-in 60ms; }
.mr .ma-topo { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mr-fio { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden; }
.mr-vao { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 420ms var(--ease), opacity 320ms ease-out; }
.mr-vao > div { min-height: 0; overflow: hidden; }
.mr-vao-voce { justify-items: end; }
.mr.is-enviado .mr-vao-voce, .mr.is-digitando .mr-vao-ia { grid-template-rows: 1fr; opacity: 1; }
.mr-bolha { max-width: 90%; padding: 9px 12px 7px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; }
.mr-voce { border-bottom-right-radius: 4px; background: #0f0f10; color: #fff; }
.mr-ia { border-bottom-left-radius: 4px; background: var(--fill); border: 1px solid var(--line); color: var(--ink); }
.mr-bolha em { display: block; margin-bottom: 3px; font-style: normal; font-size: 9px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.mr-bolha > i { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 4px; font-style: normal; font-size: 9px; color: rgba(255, 255, 255, 0.55); }
.mr-visto { width: 11px; height: 8px; }
.mr-slot { display: grid; }
.mr-slot > span { grid-area: 1 / 1; transition: opacity 260ms ease; }
.mr-pontos { display: inline-flex; align-items: center; gap: 4px; height: 16px; }
.mr-pontos i { width: 5px; height: 5px; border-radius: 50%; background: #0f0f10; animation: mr-pontos 1s ease-in-out infinite; }
.mr-pontos i:nth-child(2) { animation-delay: 0.15s; } .mr-pontos i:nth-child(3) { animation-delay: 0.3s; }
@keyframes mr-pontos { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.mr-resp { opacity: 0; }
.mr.is-resposta .mr-pontos { opacity: 0; }
.mr.is-resposta .mr-resp { opacity: 1; }
.mr-barra { flex: none; margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.mr-campo { flex: 1; height: 40px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--fill); display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-size: 12px; color: var(--ink); }
.mr-caret { width: 1px; height: 14px; margin-left: 2px; background: #0f0f10; animation: mr-caret 1s steps(2) infinite; }
@keyframes mr-caret { to { opacity: 0; } }
.mr.is-enviado .mr-caret { opacity: 0; animation: none; }
.mr-enviar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--fill); color: var(--faint); transition: background 240ms, color 240ms, transform 160ms var(--toque); }
.mr-enviar svg { width: 16px; height: 16px; }
.mr.is-armed .mr-enviar { background: #0f0f10; color: #fff; }
.mr.is-bate .mr-enviar { transform: scale(0.9); }
.mr { --mx: 288px; --my: 420px; }
.mr.is-mira { --mx: 288px; --my: 290px; }
.mr.is-saindo { --my: 460px; }

/* ---------- 6) Anamnese: respostas marcam e assinatura desenha ---------- */
.mn-painel { position: absolute; left: 0; right: 0; top: 50%; margin-top: -142px; padding: 6px 18px 16px; opacity: 0; transform: translate3d(0, 28px, 0); transition: transform 680ms var(--ease), opacity 420ms ease-out; }
.mn.is-in .mn-painel { opacity: 1; transform: none; }
.mn.is-saindo .mn-painel { opacity: 0; transform: translate3d(0, 40px, 0); transition: transform 560ms var(--saida), opacity 420ms ease-in 60ms; }
.mn-campo { display: flex; align-items: center; justify-content: space-between; padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink); }
.mn-check { position: relative; width: 20px; height: 20px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.3); background: var(--fill); display: grid; place-items: center; color: #fff; transition: background 260ms var(--ease), border-color 260ms, transform 160ms var(--toque); }
.mn-check svg { width: 11px; height: 11px; }
.mn-check svg path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 300ms var(--ease) 80ms; }
.mn.is-c1 .mn-c1 .mn-check, .mn.is-c2 .mn-c2 .mn-check, .mn.is-c3 .mn-c3 .mn-check { background: #0f0f10; border-color: #0f0f10; }
.mn.is-c1 .mn-c1 .mn-check svg path, .mn.is-c2 .mn-c2 .mn-check svg path, .mn.is-c3 .mn-c3 .mn-check svg path { stroke-dashoffset: 0; }
.mn-sign { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; }
.mn-sign svg { width: 100%; height: 34px; }
.mn-sign svg path { stroke: #0f0f10; }
.mn-sign span { font-size: 10px; color: var(--faint); border-top: 1px solid rgba(0, 0, 0, 0.2); padding-top: 4px; }
.mn-traco { stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1500ms var(--ease); }
.mn.is-sign .mn-traco { stroke-dashoffset: 0; }
.mn-ok { margin-top: 12px; height: 36px; border-radius: 9px; background: #0f0f10; color: #fff; font-size: 11.5px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; opacity: 0; transform: translateY(8px); transition: transform 420ms var(--ease), opacity 300ms ease-out; }
.mn-ok svg { width: 12px; height: 12px; }
.mn.is-ok .mn-ok { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ma-stage { animation: none; }
  .mc-flutua, .mc-fone, .mc-brilho, .mc-notif, .mc-notif-btn, .mc-l, .mc-ok { animation: none !important; }
  .mc-fone { transform: rotateY(-14deg) rotateX(5deg); }
  .mc-notif { opacity: 1; }
  .ma-cena *, .ma-cena *::before, .ma-cena *::after { transition: none !important; animation: none !important; }
  .ma-mao { display: none; }
}