/* =========================================================
   Saúde e planos — cenas de "Clínica e consultório" e "Planos assistenciais"
   HTML: ferramentas/scene-saude.js · animação: assets/js/saude.js (a cena ganha f1, f2… conforme a rolagem)
   Base = celular em pé (tudo empilhado). "Lado a lado" = computador ou celular deitado.
   Tudo que anima usa transform/opacity (nada de filter nem de sombra animada).
   ========================================================= */
.sd-sec .section-head .lead { max-width: 760px; }
.sd-sec.branco { background: #fff; }
.sd-sec.branco .authz-steps li { background: var(--bg-alt); }
@media (min-width: 901px) { .sd-sec.branco .authz-steps li:not(.is-on) { background: none; } .sd-sec.branco .authz-steps li.is-on { background: var(--bg-alt); } }

.sd-scene { --sd: #0e9aa7; container-type: size; color: var(--ink); }
.sd-scene * { box-sizing: border-box; }

/* ---------- o computador (tela real do sistema) ---------- */
.sd-pc { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; }
.sd-win { position: relative; container-type: inline-size; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(24,40,72,.14), var(--shadow-lg); }
.sd-shot { display: block; width: 100%; height: auto; }
.sd-dim { position: absolute; inset: 0; z-index: 2; background: rgba(10,20,60,.34); opacity: 0; transition: opacity .4s; }
.sd-pc-tag { position: absolute; z-index: 3; left: 10px; top: -13px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border-radius: 99px; background: #fff; color: var(--navy-2); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgba(31,50,126,.5); white-space: nowrap; }
.sd-pc-tag img { width: 20px; height: 20px; border-radius: 6px; }
.sd-pc-tag i { font-size: 13px; color: var(--sd); margin-left: 4px; }

/* ---------- janelas do sistema (por cima do computador; letras de tamanho legível também no celular) ---------- */
.sd-dlg { position: absolute; z-index: 6; left: 0; right: 0; top: 2%; margin-inline: auto; width: min(100%, 440px); border-radius: 14px; overflow: hidden; background: #fff; color: var(--ink); font-size: 13px; line-height: 1.35;
  box-shadow: 0 0 0 1px rgba(24,40,72,.12), 0 30px 60px -24px rgba(15,25,70,.55);
  opacity: 0; scale: .92; translate: 0 10px; transform-origin: 50% 20%; transition: opacity .3s, scale .5s var(--spring), translate .5s var(--spring); pointer-events: none; }
.sd-dlg-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: linear-gradient(180deg, #2a44a0, var(--navy)); color: #fff; font-size: 12.5px; }
.sd-dlg-top b { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-dlg-top .x { opacity: .7; font-size: 16px; line-height: 1; }
.sd-dlg-body { display: grid; gap: 9px; padding: 11px 13px 13px; }
.sd-spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(31,50,126,.18); border-top-color: var(--navy); animation: sdGira .8s linear infinite; }
@keyframes sdGira { to { transform: rotate(1turn); } }
.sd-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px; background: linear-gradient(180deg, #2a44a0, var(--navy)); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: scale .25s var(--spring); }
.sd-btn.wa { background: linear-gradient(180deg, #34d96f, var(--wa)); }
.sd-tap { position: absolute; z-index: 3; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0 28%, rgba(31,50,126,.28) 30% 100%); box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 6px 14px rgba(24,40,72,.35); opacity: 0; pointer-events: none; }
@keyframes sdTap { 0% { opacity: 0; scale: 1.6; } 35% { opacity: 1; scale: 1; } 60% { opacity: 1; scale: .85; } 100% { opacity: 0; scale: 1.3; } }
.sd-toast { position: absolute; z-index: 7; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: 94%; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; background: #1b7a43; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 12px 26px -12px rgba(27,122,67,.8); opacity: 0; translate: 0 14px; transition: opacity .3s, translate .5s var(--spring); }

/* ---------- a nuvem e os fios ---------- */
.sd-wire { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: transform; }
.sd-wbase { fill: none; stroke: rgba(31,50,126,.22); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; animation: sdFluxo 1.2s linear infinite; }
@keyframes sdFluxo { to { stroke-dashoffset: -24; } }
.sd-wgo, .sd-wback { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.sd-wgo { stroke: var(--blue); }
.sd-wback { stroke: #22a55a; }
.sd-pk { opacity: 0; stroke: #fff; stroke-width: 2.5; }
.sd-pk.go { fill: var(--blue); }
.sd-pk.back { fill: #22a55a; }
.sd-node { position: absolute; z-index: 8; display: grid; justify-items: center; gap: 6px; text-align: center; pointer-events: none; }
.sd-node .ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--navy); font-size: 1.4rem; box-shadow: 0 0 0 8px rgba(13,131,253,.08), 0 16px 34px -12px rgba(31,50,126,.45); transition: scale .4s var(--spring), box-shadow .4s; }
.sd-node .ic img { width: 36px; height: 36px; border-radius: 10px; }
.sd-node .tx { display: grid; line-height: 1.2; }
.sd-node b { font-size: 12.5px; color: var(--navy-2); }
.sd-node small { font-size: 11px; color: var(--ink-2); }
.sd-node.hit .ic { scale: 1.14; box-shadow: 0 0 0 16px rgba(13,131,253,.16), 0 16px 34px -12px rgba(31,50,126,.45); }

/* ---------- os celulares ---------- */
.sd-fone { position: absolute; z-index: 4; right: 0; bottom: 0; width: var(--pw); }
.cv { --pw: min(48cqw, (100cqh - 53.7cqw - 40px) / 2.107); }
.as, .pn { --pw: min(46cqw, (100cqh - 250px) / 2.107); }
.sd-fone .phone { --pw: inherit; transition: translate .7s var(--spring), opacity .4s; }
.sd-phone-tag { display: none; }
.sd-scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg-alt); transition: translate .6s var(--ease), opacity .4s; }
.sd-sb { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; height: 13cqw; padding: 2.4cqw 8cqw 0; color: #fff; font-size: 3.6cqw; font-weight: 700; }
.sd-sb span { display: flex; gap: 1.3cqw; font-size: 3.3cqw; }
.wa-top .wa-av { flex: none; display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: #fff; color: var(--sd); font-size: 4.4cqw; }
.wa-top .wa-av i { font-size: 4.4cqw; }
/* mensagens: entram conforme a rolagem (sem o "vai e volta" das mensagens do topo da página) */
.sd-chat { justify-content: flex-end; }
.sd-chat .m { display: none; flex-shrink: 0; opacity: 1; transform: none; animation: none; font-size: 3.7cqw; }
.sd-scene .wa-top b { font-size: 4.2cqw; }
.sd-scene .wa-top small { font-size: 3cqw; }
.sd-scene .wa-input { color: #54656f; } /* contraste: o cinza do WhatsApp (#8696a0) não passa em fundo branco */
.sd-chat .m.on { display: block; animation: sdEntra .45s var(--spring) both; }
.sd-chat .m b { font-weight: 700; }
@keyframes sdEntra { from { opacity: 0; transform: translateY(3cqw) scale(.94); } }

/* o cartão do plano no celular (a página que abre pelo QR Code do cartão) */
.cd { background: #f4f6fb; }
.cd-top { display: grid; justify-items: start; gap: .8cqw; padding: 15cqw 6cqw 6cqw; border-radius: 0 0 7cqw 7cqw; background: linear-gradient(160deg, #2a3f96, #1f327e 55%, #182848); color: #fff; }
.cd-top img { width: 24cqw; height: auto; margin-bottom: 1.6cqw; }
.cd-top small { font-size: 3.2cqw; opacity: .85; }
.cd-top b { font-size: 6.2cqw; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.cd-selo { display: inline-flex; align-items: center; gap: 1.4cqw; margin-top: 1.4cqw; padding: 1.2cqw 3cqw; border-radius: 99px; font-size: 3.2cqw; font-weight: 800; }
.cd-selo.ok { background: rgba(52,199,89,.22); color: #b8f5c8; box-shadow: inset 0 0 0 .3cqw rgba(52,199,89,.55); }
.cd-selo.irr { background: rgba(255,159,10,.2); color: #ffd28a; box-shadow: inset 0 0 0 .3cqw rgba(255,159,10,.55); }
.cd-body { display: grid; gap: 3cqw; padding: 4cqw 4.5cqw; }
.cd-k { font-size: 3.3cqw; color: var(--ink-2); }
.cd-box { display: flex; align-items: center; gap: 3cqw; padding: 3.6cqw; border-radius: 4.5cqw; background: #fff; box-shadow: 0 1cqw 3cqw -1cqw rgba(31,50,126,.2); }
.cd-box.ok > i { font-size: 7cqw; color: #22a55a; }
.cd-box b { display: block; font-size: 4.6cqw; color: var(--navy-2); }
.cd-box small { font-size: 3.3cqw; color: var(--ink-2); }
.cd-box.atr { display: grid; gap: .5cqw; border-left: 1.4cqw solid #ff9f0a; }
.cd-box.atr small { font-size: 2.8cqw; font-weight: 800; color: #a35a00; text-transform: uppercase; letter-spacing: .03em; }
.cd-box.atr b { font-size: 6cqw; letter-spacing: -0.02em; }
.cd-box.atr span { font-size: 3.3cqw; color: var(--ink-2); }
.cd-box.atr .cd-tot { font-weight: 700; color: #a35a00; }
.cd-pagar { display: flex; justify-content: center; align-items: center; gap: 1.4cqw; margin-top: 1.6cqw; padding: 2.6cqw; border-radius: 3cqw; background: linear-gradient(180deg, #34d96f, #1faa55); color: #fff; font-style: normal; font-size: 3.2cqw; font-weight: 800; }
.cd-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.cd-nums span { display: grid; padding: 3cqw; border-radius: 4cqw; background: #fff; font-size: 3.1cqw; color: var(--ink-2); }
.cd-nums b { font-size: 6cqw; color: var(--navy-2); }
.cd-ben { display: grid; gap: 1.6cqw; }
.cd-ben p { font-size: 2.8cqw; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.cd-ben span { display: flex; align-items: center; gap: 2cqw; padding: 2.4cqw 3cqw; border-radius: 3.4cqw; background: #fff; font-size: 3.3cqw; }
.cd-ben i { color: var(--sd); }
.cd-ben b { flex: 1; min-width: 0; color: var(--navy-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-ben small { font-size: 2.9cqw; color: var(--ink-2); }
.cd-folha { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: grid; gap: 2.6cqw; padding: 5cqw 5cqw 9cqw; border-radius: 7cqw 7cqw 0 0; background: #fff; box-shadow: 0 -4cqw 10cqw -4cqw rgba(24,40,72,.35); translate: 0 105%; transition: translate .6s var(--spring); }
.cd-folha > b { font-size: 4cqw; color: var(--navy-2); }
.cd-folha ol { display: grid; gap: 1.6cqw; }
.cd-folha li { display: flex; align-items: flex-start; gap: 2cqw; font-size: 3.1cqw; color: var(--ink-2); }
.cd-folha li > span { flex: none; display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: var(--tint); color: var(--navy); font-size: 2.8cqw; font-weight: 800; }
.cd-copiar { display: grid; place-items: center; padding: 3cqw; border-radius: 3.4cqw; background: var(--navy); color: #fff; font-size: 3.4cqw; font-weight: 800; transition: background-color .3s; }
.cd-copiar > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 1.4cqw; transition: opacity .25s; }
.cd-copiar .b { opacity: 0; }

/* QR Code de enfeite */
.sd-qr { display: block; }
.sd-qr path { fill: #111b21; }

/* =========================================================
   1) CONVÊNIO NA RECEPÇÃO
   ========================================================= */
.cv-node { left: 0; right: 0; bottom: 2%; margin-inline: auto; width: max-content; opacity: 0; transition: opacity .3s; }
.cv-node .tx small { display: none; }
.cv.f1:not(.f9) .cv-node { opacity: 1; }
.cv-busca, .cv-ficha, .cv-situ, .cv-proc { top: 2%; }
.cv.f1:not(.f5) .cv-busca, .cv.f5:not(.f6) .cv-ficha, .cv.f6:not(.f8) .cv-situ, .cv.f8:not(.f9) .cv-proc { opacity: 1; scale: 1; translate: 0 0; }
.cv.f1:not(.f9) .sd-dim { opacity: 1; }
/* a busca */
.cv-campo small { display: block; margin-bottom: 4px; font-size: 11px; color: var(--ink-3); }
.cv-in { display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--blue); font-weight: 700; letter-spacing: .02em; }
.cv-in em { font-style: normal; white-space: nowrap; }
.cv-in .car { width: 1.5px; height: 16px; background: var(--navy); animation: sdCursor 1s steps(1) infinite; }
.cv-in .bi-search { margin-left: auto; color: var(--navy); }
@keyframes sdCursor { 50% { opacity: 0; } }
.cv-aguarde { display: none; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.cv.f2:not(.f3) .cv-aguarde { display: flex; }
.cv-grid { border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; }
.cv-grid p { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 6px; padding: 6px 10px; }
.cv-grid span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-gh { background: var(--bg-alt); font-size: 10.5px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.cv-row { border-top: 1px solid var(--line); opacity: 0; translate: 0 6px; transition: opacity .3s, translate .4s var(--ease), background-color .3s, box-shadow .3s; }
.cv-row span:nth-child(2) { font-weight: 700; color: var(--navy-2); }
.cv.f3 .cv-row { opacity: 1; translate: 0 0; }
.cv.f3 .cv-row:nth-child(3) { transition-delay: .08s; }
.cv.f3 .cv-row:nth-child(4) { transition-delay: .16s; }
.cv.f3 .cv-row.sel { background: #e7f0ff; box-shadow: inset 3px 0 0 var(--blue); }
.cv-acao { display: flex; justify-content: flex-end; }
.cv-acao .sd-btn { opacity: .45; }
.cv.f3 .cv-acao .sd-btn { opacity: 1; }
.cv[data-ph="4"] .cv-acao .sd-btn { scale: .95; }
.cv[data-ph="4"] .cv-acao .sd-tap { animation: sdTap .9s var(--ease) forwards; }
.cv-acao { position: relative; }
.cv-acao .sd-tap { left: auto; right: 60px; }
/* o cadastro importado */
.cv-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cv-f { display: grid; gap: 1px; min-width: 0; padding: 5px 8px; border-radius: 7px; background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .5s, box-shadow .5s; }
.cv-f.w { grid-column: span 2; }
.cv-f small { font-size: 9.5px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.cv-f b { min-height: 16px; font-size: 12px; font-weight: 700; color: var(--navy-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; translate: -8px 0; transition: opacity .3s, translate .45s var(--ease); }
.cv-f.on { background: #eefaf3; box-shadow: inset 0 0 0 1px rgba(34,165,90,.4); }
.cv-f.on b { opacity: 1; translate: 0 0; }
.cv-obs { display: flex; gap: 6px; padding: 6px 8px; border-radius: 7px; background: #fff6d6; color: #6b4b00; font-size: 10px; font-weight: 700; line-height: 1.3; opacity: 0; transition: opacity .4s; }
.cv-obs.on { opacity: 1; }
/* a situação do contrato */
.cv-fat { border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; }
.cv-fat p { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; }
.cv-fh { background: var(--bg-alt); font-size: 10px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.cv-fr { border-top: 1px solid var(--line); opacity: 0; translate: 0 4px; transition: opacity .3s, translate .4s var(--ease); }
.cv-fr.on { opacity: 1; translate: 0 0; }
.cv-fr .ok { font-weight: 800; color: var(--green-app); }
.cv-chk { display: grid; gap: 5px; }
.cv-chk li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); transition: color .3s; }
.cv-chk li i { color: #c7cddb; transition: color .3s, scale .45s var(--spring); }
.cv-chk li.on { color: var(--ink); }
.cv-chk li.on i { color: #22a55a; scale: 1.18; }
.cv-ok { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border-radius: 10px; background: #e9f8ef; color: #1b7a43; font-size: 15px; font-weight: 800; opacity: 0; scale: .8; transition: opacity .3s, scale .5s var(--spring); }
.cv.f7 .cv-ok { opacity: 1; scale: 1; }
/* o valor do convênio */
.cv-pr b { display: block; font-size: 14px; color: var(--navy-2); }
.cv-pr small { font-size: 11.5px; color: var(--ink-2); }
.cv-val { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-alt); }
.cv-val > i { color: var(--ink-3); }
.cv-val small { display: block; font-size: 10px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.cv-val s { font-size: 16px; color: var(--ink-2); text-decoration-color: transparent; transition: text-decoration-color .3s .35s; }
.cv.f8 .cv-val s { text-decoration-color: #d21f2f; }
.cv-num { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--green-app); font-variant-numeric: tabular-nums; }
.cv-desc { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: #e9f8ef; color: #1b7a43; font-size: 12.5px; font-weight: 700; opacity: 0; scale: .85; transition: opacity .3s, scale .5s var(--spring); }
.cv-desc.on { opacity: 1; scale: 1; }
/* a consulta entra na agenda (por cima da tela real, no horário das 12:00) */
.cv-slot { position: absolute; z-index: 3; left: 4.4%; top: 54.3%; width: 63.8%; height: 3%; display: flex; align-items: center; gap: 1.6cqw; padding-left: .8cqw; border: .12cqw solid #222; background: #7fe3a6; color: #111; font: 700 1.15cqw/1 Tahoma, Arial, sans-serif; white-space: nowrap; opacity: 0; scale: 1 .3; transition: opacity .25s, scale .45s var(--spring); }
.cv-slot em { font-style: normal; font-weight: 400; color: #14532d; }
.cv.f9 .cv-slot { opacity: 1; scale: 1; animation: sdBrilha 1.4s var(--ease) .4s 2; }
@keyframes sdBrilha { 50% { outline: .5cqw solid rgba(34,165,90,.55); outline-offset: .3cqw; } }
.cv-toast { top: calc(53.7cqw - 46px); }
.cv.f9 .cv-toast { opacity: 1; translate: 0 0; }
/* o celular da Maria: o cartão do plano e, no fim, o WhatsApp */
.cv .s-whats { translate: 102% 0; }
.cv.f10 .s-whats { translate: 0 0; }
.cv.f10 .s-cartao { translate: -30% 0; opacity: 0; }

/* =========================================================
   2) ASSINATURA DIGITAL
   ========================================================= */
.as .sd-wbase, .as .sd-wgo { stroke: transparent; animation: none; } /* o caminho do PDF voando não aparece */
.sd-alvo { position: absolute; z-index: 3; border-radius: 1cqw; box-shadow: 0 0 0 .5cqw var(--blue), 0 0 0 100cqw rgba(10,20,60,.32); opacity: 0; transition: opacity .35s; }
.as-a1 { left: .6%; top: 20.2%; width: 58.8%; height: 63.8%; }
.as-a2 { left: .4%; top: 91.4%; width: 10.8%; height: 5.4%; }
.as-a3 { left: 1%; top: 84.4%; width: 18.2%; height: 5.4%; }
.as[data-ph="1"] .as-a1, .as[data-ph="2"] .as-a2, .as:is([data-ph="4"], [data-ph="5"]) .as-a3 { opacity: 1; }
.as[data-ph="2"] .as-a2, .as[data-ph="4"] .as-a3 { animation: sdPulsa 1s var(--ease) 2; }
@keyframes sdPulsa { 50% { scale: 1.06; } }
.as.f5:not(.f10) .sd-dim { opacity: 1; }
/* a receita (um PDF) */
.as-doc { position: absolute; z-index: 5; left: 0; right: 0; top: 4%; margin-inline: auto; width: 50cqw; aspect-ratio: 1 / 1.414; container-type: inline-size; display: flex; flex-direction: column; gap: 3cqw; padding: 7cqw 7cqw 6cqw; border-radius: 1.6cqw; background: #fff; color: #222; box-shadow: 0 0 0 1px rgba(24,40,72,.1), 0 28px 50px -22px rgba(15,25,70,.6); opacity: 0; scale: .8; translate: 0 18px; transition: opacity .35s, scale .6s var(--spring), translate .6s var(--spring); }
.as.f3:not(.f5) .as-doc, .as.f8 .as-doc { opacity: 1; scale: 1; translate: 0 0; }
.as-doc-h { display: flex; align-items: center; gap: 3cqw; padding-bottom: 3cqw; border-bottom: .5cqw solid var(--sd); }
.as-doc-h .lg { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 2.6cqw; background: var(--sd); color: #fff; font-size: 5.4cqw; }
.as-doc-h b { display: block; font-size: 6cqw; color: var(--navy-2); }
.as-doc-h small { font-size: 4cqw; color: var(--ink-2); }
.as-doc-t { text-align: center; font-size: 6.6cqw; font-weight: 800; letter-spacing: .08em; color: var(--navy-2); }
.as-doc-p { display: grid; font-size: 5cqw; }
.as-doc-p small { font-size: 3.8cqw; color: var(--ink-3); }
.as-doc-l { display: grid; gap: 3cqw; padding-left: 5cqw; font-size: 4.4cqw; list-style: decimal; }
.as-doc-l li b { font-size: 4.7cqw; }
.as-doc-l li em { font-style: normal; float: right; color: var(--ink-2); }
.as-doc-l li small { display: block; font-size: 4cqw; color: var(--ink-2); }
.as-doc-m { margin-top: auto; text-align: center; font-size: 4cqw; color: var(--ink-2); border-top: .3cqw solid #ccc; padding-top: 1.6cqw; }
.as-ass { display: flex; align-items: center; gap: 2.4cqw; padding: 2.4cqw; border-radius: 2cqw; background: #f3fbf5; box-shadow: inset 0 0 0 .4cqw rgba(34,165,90,.35); opacity: 0; translate: 0 3cqw; transition: opacity .35s, translate .5s var(--spring); }
.as.f8 .as-ass { opacity: 1; translate: 0 0; }
.as-sel { flex: none; display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 50%; background: #22a55a; color: #fff; font-size: 6cqw; }
.as-tx { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.as-tx b { font-size: 4.1cqw; }
.as-tx small { font-size: 3.7cqw; color: var(--ink-2); }
.as-qr { flex: none; width: 17cqw; height: 17cqw; }
.as-carimbo { position: absolute; right: 4cqw; top: 27cqw; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.6cqw 3.4cqw; border: .7cqw solid #1b7a43; border-radius: 2cqw; color: #1b7a43; background: rgba(255,255,255,.9); font-size: 5.6cqw; font-weight: 900; letter-spacing: .04em; rotate: -9deg; opacity: 0; scale: 1.7; transition: opacity .25s, scale .55s var(--spring); }
.as.f9 .as-carimbo { opacity: 1; scale: 1; }
/* o certificado e a senha */
.as-cert { position: absolute; z-index: 7; left: 0; bottom: 4%; width: min(70%, 290px); aspect-ratio: 1.586; display: grid; align-content: end; gap: 2px; padding: 16px 18px; border-radius: 16px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 120% at 100% 0%, #3fb27f 0%, #137a52 45%, #0b4d35 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 26px 50px -20px rgba(11,77,53,.75);
  opacity: 0; translate: -40px 30px; rotate: -8deg; transition: opacity .35s, translate .7s var(--spring), rotate .7s var(--spring); }
.as-cert small { font-size: 11px; font-weight: 700; opacity: .9; }
.as-cert b { font-size: 18px; letter-spacing: .02em; }
.as-cert span { font-size: 11.5px; opacity: .9; }
.as-cert > i { position: absolute; right: 16px; top: 14px; font-size: 26px; color: #ffd84d; }
.as-chip { position: absolute; left: 18px; top: 18px; width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #f8e08e, #c9a43a); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.as.f5:not(.f8) .as-cert { opacity: 1; translate: 0 0; rotate: -3deg; }
.as-senha { top: 2%; width: min(100%, 360px); }
.as.f6:not(.f8) .as-senha { opacity: 1; scale: 1; translate: 0 0; }
.as-lbl { font-size: 12.5px; color: var(--ink-2); }
.as-dots { display: flex; gap: 8px; height: 34px; align-items: center; padding: 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--blue); }
.as-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--navy-2); opacity: 0; scale: .3; transition: opacity .15s, scale .3s var(--spring); }
.as-dots i.on { opacity: 1; scale: 1; }
.as-conf { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #1b7a43; opacity: 0; transition: opacity .3s; }
.as-conf.on { opacity: 1; }
.as-prog { display: none; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--navy-2); }
.as.f7 .as-prog { display: flex; }
/* "Documento assinado com sucesso!" */
.as-ok { top: 2%; width: min(100%, 380px); }
.as.f10 .as-ok { opacity: 1; scale: 1; translate: 0 0; }
.as.f10 .as-doc { opacity: 0; scale: .85; }
.as-okt { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 10px; background: #e9f8ef; color: #1b7a43; font-size: 14px; font-weight: 800; }
.as-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.as-acoes > span { position: relative; display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 9px; background: var(--bg-alt); font-size: 12px; font-weight: 700; color: var(--navy-2); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s, color .3s, scale .25s var(--spring); }
.as-acoes > span i { font-size: 15px; color: var(--navy); }
.as-acoes .wa i { color: var(--wa); }
.as.f11 .as-acoes .wa { background: var(--wa); color: #fff; }
.as.f11 .as-acoes .wa i { color: #fff; }
.as[data-ph="11"] .as-acoes .wa { scale: .95; }
.as[data-ph="11"] .as-acoes .sd-tap { animation: sdTap .9s var(--ease) forwards; }
.as-voa { position: absolute; z-index: 9; left: -22px; top: -26px; display: grid; place-items: center; width: 44px; height: 52px; border-radius: 8px; background: #fff; color: #e53935; font-size: 26px; box-shadow: 0 14px 28px -12px rgba(15,25,70,.6); opacity: 0; transition: opacity .2s; pointer-events: none; }
.as-voa.on { opacity: 1; }
.as-pdf { align-items: center; gap: 2.4cqw; }
.sd-chat .as-pdf.on { display: flex; }
.as-pdf .ic { flex: none; display: grid; place-items: center; width: 10cqw; height: 12cqw; border-radius: 2cqw; background: #e53935; color: #fff; font-size: 5.6cqw; }
.as-pdf > span:nth-child(2) { display: grid; line-height: 1.3; }
.as-pdf b { font-size: 3.1cqw; }
.as-pdf em { font-style: normal; font-size: 2.7cqw; color: #54656f; }
.as.f10 .sd-fone .phone { translate: 0 0; }

/* =========================================================
   NFS-e NO PAGAMENTO
   ========================================================= */
.sd-btn.verde { background: linear-gradient(180deg, #1f9d55, #15803d); }
.nf-node { left: 0; right: 0; bottom: 2%; margin-inline: auto; width: max-content; opacity: 0; transition: opacity .3s; }
.nf-node .tx small { display: none; }
.nfs.f5:not(.f9) .nf-node { opacity: 1; }
.nfs.f1:not(.f9) .sd-dim { opacity: 1; }
.nf-atd, .nf-cad { top: 2%; }
.nfs.f1:not(.f4) .nf-atd, .nfs.f4:not(.f9) .nf-cad { opacity: 1; scale: 1; translate: 0 0; }
.nf-l span { display: grid; min-width: 0; font-weight: 700; color: var(--navy-2); }
.nf-l small { font-size: 10.5px; font-weight: 500; color: var(--ink-2); }
.nf-l b { font-size: 13px; color: var(--navy-2); }
.nf-pag { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-alt); transition: background-color .4s; }
.nf-forma { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: rgba(50,188,173,.16); color: #0f766e; font-size: 12px; font-weight: 800; }
.nf-pv { display: grid; justify-items: end; margin-left: auto; }
.nf-pv b { font-size: 18px; color: var(--navy-2); letter-spacing: -0.01em; }
.nf-pv small { font-size: 11.5px; }
.nf-pv em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; }
.nf-pv .a { color: var(--ink-2); }
.nf-pv .a .sd-spin { width: 11px; height: 11px; }
.nf-pv .b { display: none; font-weight: 700; color: #1b7a43; }
.nfs.f2 .nf-pag { background: #e9f8ef; }
.nfs.f2 .nf-pv .a { display: none; }
.nfs.f2 .nf-pv .b { display: inline-flex; }
.nf-acao { position: relative; display: flex; justify-content: flex-end; }
.nf-emitir { opacity: .45; transition: opacity .3s, scale .25s var(--spring); }
.nfs.f2 .nf-emitir { opacity: 1; }
.nfs[data-ph="3"] .nf-emitir, .nfs[data-ph="5"] .nf-salvar, .im[data-ph="3"] .im-enviar { scale: .95; }
.nfs[data-ph="3"] .nf-emitir .sd-tap, .nfs[data-ph="5"] .nf-salvar .sd-tap, .im[data-ph="3"] .im-enviar .sd-tap { animation: sdTap .9s var(--ease) forwards; }
.nf-sec { font-size: 10px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.nf-envio { display: none; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; font-weight: 700; color: var(--navy-2); }
.nf-envio em { display: none; font-style: normal; }
.nfs.f6 .nf-acao { display: none; }
.nfs.f6 .nf-envio { display: flex; }
.nfs.f6:not(.f7) .nf-envio .e1, .nfs.f7 .nf-envio .e2 { display: inline; }
/* o DANFS-e autorizado */
.nf-doc-box { position: absolute; z-index: 7; left: 0; right: 0; top: 3%; margin-inline: auto; width: min(84cqw, 300px); }
.nf-doc { position: relative; container-type: inline-size; display: grid; gap: 2.6cqw; padding: 6cqw; border-radius: 2.4cqw; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(24,40,72,.1), 0 28px 50px -22px rgba(15,25,70,.6); opacity: 0; scale: .85; translate: 0 20px; transition: opacity .35s, scale .6s var(--spring), translate .6s var(--spring); }
.nfs.f9 .nf-doc { opacity: 1; scale: 1; translate: 0 0; }
.nf-dh { display: grid; padding-bottom: 2.6cqw; border-bottom: .6cqw solid var(--sd); }
.nf-dh b { font-size: 7cqw; letter-spacing: .04em; color: var(--navy-2); }
.nf-dh small { font-size: 3.8cqw; color: var(--ink-2); }
.nf-num { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; font-size: 4.6cqw; }
.nf-num b { color: var(--navy-2); }
.nf-num em { display: inline-flex; align-items: center; gap: 1.4cqw; padding: .8cqw 2.6cqw; border-radius: 99px; background: #e9f8ef; color: #1b7a43; font-size: 3.6cqw; font-style: normal; font-weight: 800; }
.nf-it { display: grid; font-size: 4.1cqw; font-weight: 700; line-height: 1.3; }
.nf-it small { font-size: 3.1cqw; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.nf-tot { display: flex; align-items: center; justify-content: space-between; padding: 2.4cqw 3cqw; border-radius: 2cqw; background: var(--bg-alt); font-size: 4cqw; }
.nf-tot b { font-size: 6cqw; color: var(--navy-2); }
.nf-chave { display: flex; align-items: center; gap: 3cqw; }
.nf-qr { flex: none; width: 20cqw; height: 20cqw; }
.nf-chave > span { display: grid; gap: .6cqw; min-width: 0; line-height: 1.3; }
.nf-chave small { font-size: 3cqw; color: var(--ink-3); }
.nf-chave b { font-size: 3.2cqw; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.nf-chave em { font-size: 3.2cqw; font-style: normal; font-weight: 700; color: var(--blue); }
.nf-carimbo { position: absolute; right: 6cqw; top: 5cqw; padding: 1.6cqw 3.4cqw; border: .7cqw solid #1b7a43; border-radius: 2cqw; background: rgba(255,255,255,.9); color: #1b7a43; font-size: 5.4cqw; font-weight: 900; letter-spacing: .06em; rotate: -9deg; opacity: 0; scale: 1.7; transition: opacity .25s, scale .55s var(--spring); }
.nfs.f10 .nf-carimbo { opacity: 1; scale: 1; }
.nf-toast { bottom: 3%; }
.nfs.f11 .nf-toast { opacity: 1; translate: 0 0; }
/* o comparativo: o portal × o sistema */
.nf-comp { display: grid; gap: 12px; margin-top: 28px; padding-bottom: 48px; }
.nf-c { padding: 20px 22px; border-radius: 22px; }
.nf-c.nao { background: #fff6f5; box-shadow: inset 0 0 0 1px rgba(217,48,37,.14); }
.nf-c.sim { background: #eefaf3; box-shadow: inset 0 0 0 1px rgba(34,165,90,.25); }
.nf-c .h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 1.05rem; font-weight: 800; color: var(--navy-2); }
.nf-c.nao .h i { color: #b3261e; }
.nf-c.sim .h i { color: #1b7a43; }
.nf-c li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; color: var(--ink); line-height: 1.4; }
.nf-c li::before { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; font-size: 11px; font-weight: 900; }
.nf-c.nao li::before { content: "✕"; background: #fde2df; color: #b3261e; }
.nf-c.sim li::before { content: "✓"; background: #d2f3df; color: #1b7a43; }
@media (min-width: 760px) { .nf-comp { grid-template-columns: 1fr 1fr; gap: 16px; } }

/* =========================================================
   EXAMES DE IMAGEM (PACS)
   ========================================================= */
.im-node, .im .sd-wire { display: none; }
.im-sol, .im-lista { top: 2%; }
.im.f1:not(.f2) .im-sol, .im.f2:not(.f7) .im-lista { opacity: 1; scale: 1; translate: 0 0; }
.im.f1:not(.f7) .sd-dim { opacity: 1; }
.im-mod { flex: none; display: inline-grid; place-items: center; min-width: 30px; padding: 2px 6px; border-radius: 6px; background: var(--tint); color: var(--navy); font-size: 11px; font-weight: 800; }
.im-pede { display: grid; gap: 6px; padding: 9px 10px; border-radius: 10px; background: #fff8eb; box-shadow: inset 3px 0 0 #f2b705; opacity: 0; translate: 0 6px; transition: opacity .3s, translate .45s var(--spring); }
.im-pede.on { opacity: 1; translate: 0 0; }
.im-ph { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: #8a5a00; }
.im-con { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #1b7a43; }
.im-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fed8d9; transition: background-color .5s; }
.im.f6 .im-row { background: #d7d8ff; }
.im-pac { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.im-pac b { font-size: 12px; color: var(--navy-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-pac small { font-size: 10.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-st { display: grid; gap: 3px; justify-items: end; }
.im-st em { padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.75); font-size: 9.5px; font-style: normal; font-weight: 800; white-space: nowrap; }
.im-st .n { color: #b3261e; }
.im-st .s { display: none; }
.im.f4 .im-st .env .n, .im.f6 .im-st .rec .n { display: none; }
.im.f4 .im-st .env .s { display: inline; color: var(--navy); }
.im.f6 .im-st .rec .s { display: inline; color: #1b7a43; }
.im-leg { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); }
.im-leg i { width: 16px; height: 10px; border-radius: 3px; background: #d7d8ff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
/* o equipamento de imagem (o console com a worklist) */
.im-eq-box { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; margin-inline: auto; width: min(74cqw, 300px); display: grid; justify-items: center; }
.im-eq { display: grid; justify-items: center; width: 100%; transition: translate .7s var(--spring); }
.im-tela { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 4 / 3; display: flex; flex-direction: column; gap: 1.8cqw; padding: 3.6cqw; overflow: hidden; border: 1.8cqw solid #1d2433; border-radius: 3.4cqw; background: radial-gradient(80% 60% at 80% 0%, rgba(56,120,255,.18), transparent 70%), #0b1324; color: #cfe3ff; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; box-shadow: 0 30px 60px -28px rgba(0,0,0,.6); }
.im-pe { width: 26%; height: 22px; background: linear-gradient(#2a3346, #161b27); clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%); }
.im-top { display: flex; align-items: center; gap: 2cqw; font-family: var(--font); font-size: 4.2cqw; color: #fff; }
.im-top i { color: #7fd3ff; }
.im-top span { margin-left: auto; padding: .6cqw 2.2cqw; border-radius: 1cqw; background: #12305c; color: #7fd3ff; font-size: 3cqw; font-weight: 700; letter-spacing: .12em; }
.im-h, .im-r { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.2em; gap: 2.4cqw; font-size: 3.9cqw; }
.im-h span, .im-r span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-h { padding: 0 2cqw 1.2cqw; border-bottom: .3cqw solid #24324d; color: #6f86ad; font-size: 3cqw; }
.im-r { padding: 1.6cqw 2cqw; border-radius: 1.2cqw; transition: background-color .4s, color .4s; }
.im-r.novo { opacity: 0; translate: -5cqw 0; transition: opacity .35s, translate .5s var(--spring), background-color .4s, color .4s; }
.im.f5 .im-r.novo { opacity: 1; translate: 0 0; background: rgba(127,211,255,.14); }
.im.f7 .im-r.novo { background: #1e5bd8; color: #fff; }
.im-det { position: absolute; left: 3.6cqw; right: 3.6cqw; bottom: 3.6cqw; display: grid; gap: 1.2cqw; padding: 3cqw 3.4cqw; border: .3cqw solid #2a4d86; border-radius: 2cqw; background: #13213d; font-size: 3.8cqw; translate: 0 140%; transition: translate .6s var(--spring); }
.im-det p { display: grid; line-height: 1.3; }
.im-det small { font-size: 2.8cqw; color: #6f86ad; }
.im-det b { color: #fff; }
.im.f7 .im-det { translate: 0 0; }
.im-pronto { justify-self: start; display: inline-flex; align-items: center; gap: 1.4cqw; margin-top: .6cqw; padding: 1.2cqw 3cqw; border-radius: 99px; background: #1b7a43; color: #fff; font-family: var(--font); font-size: 3.2cqw; font-weight: 800; opacity: 0; scale: .7; transition: opacity .3s, scale .5s var(--spring); }
.im.f8 .im-pronto { opacity: 1; scale: 1; }
.im-tag { position: static; display: none; margin-top: 6px; }
.im .im-eq { translate: 100cqw 0; }
.im.f5 .im-eq { translate: 0 0; }

/* =========================================================
   PIX INTEGRADO
   ========================================================= */
.px-node, .px .sd-wire { display: none; }
.px.f1:not(.f8) .sd-dim { opacity: 1; }
.px-qr, .px-lista { top: 2%; }
.px.f1:not(.f8) .px-qr, .px.f8 .px-lista { opacity: 1; scale: 1; translate: 0 0; }
.px-cab { display: flex; align-items: center; gap: 10px; }
.px-cab > span { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.px-cab small { font-size: 10px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-cab span b { font-size: 12.5px; color: var(--navy-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-val { flex: none; font-size: 20px; letter-spacing: -0.02em; color: var(--navy-2); }
.px-meio { display: flex; align-items: center; gap: 12px; }
.px-qrbox { position: relative; flex: none; width: 112px; height: 112px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.px-qrc { width: 100%; height: 100%; }
.px.f7 .px-qrbox::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: rgba(34,165,90,.92); color: #fff; font-size: 46px; font-weight: 900; animation: pop .45s var(--spring) both; }
.px-bts { display: grid; flex: 1; gap: 5px; min-width: 0; }
.px-bts span { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; background: var(--bg-alt); color: var(--navy-2); font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-bts i { color: var(--navy); }
.px-bts .bi-whatsapp { color: var(--wa); }
.px-st { display: grid; padding: 9px 12px; border-radius: 10px; background: #1e3fae; color: #fff; font-size: 13px; font-weight: 700; transition: background-color .4s; }
.px-st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; transition: opacity .3s; }
.px-st .sd-spin { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
.px-st .b { opacity: 0; }
.px.f7 .px-st { background: #1b7a43; }
.px.f7 .px-st .a { opacity: 0; }
.px.f7 .px-st .b { opacity: 1; }
/* o Gerencie PIX: as cobranças do dia */
.px-rows { display: grid; gap: 4px; }
.px-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; background: var(--bg-alt); font-size: 11.5px; }
.px-row .h { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.px-row .n { font-weight: 700; color: var(--navy-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-row .v { font-weight: 700; }
.px-row em { padding: 2px 8px; border-radius: 99px; font-size: 10px; font-style: normal; font-weight: 800; }
.px-row.pago em { background: #e9f8ef; color: #1b7a43; }
.px-row.agu em { background: #fff2e0; color: #8a4b00; }
.px-row.novo { opacity: 0; translate: -10px 0; transition: opacity .3s, translate .45s var(--spring), background-color .4s; }
.px.f9 .px-row.novo { opacity: 1; translate: 0 0; background: #effaf3; box-shadow: inset 3px 0 0 #22a55a; }
.px-tot { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 10px; background: #e9f8ef; color: #1b7a43; font-size: 12.5px; font-weight: 700; }
.px-tot b { font-size: 18px; font-variant-numeric: tabular-nums; }
.px-ext { display: flex; justify-content: flex-end; }
/* o app do banco no celular (genérico: "seu banco") */
.bk { background: #f4f6fb; }
.px .bk { translate: 102% 0; }
.px .bk1 { translate: 0 0; }
.px.f3 .bk1, .px.f5 .bk2 { translate: -30% 0; opacity: 0; }
.px.f3 .bk2, .px.f5 .bk3 { translate: 0 0; }
.bk-top { display: grid; gap: .6cqw; padding: 15cqw 6cqw 5cqw; border-radius: 0 0 6cqw 6cqw; background: linear-gradient(160deg, #334155, #1e293b); color: #fff; }
.bk-top b { font-size: 6cqw; }
.bk-top small { font-size: 3.4cqw; opacity: .85; }
.bk1 { background: #111827; }
.bk1 .bk-top { background: transparent; }
.bk-cam { flex: 1; display: grid; place-content: center; justify-items: center; gap: 5cqw; color: #cbd5e1; font-size: 3.3cqw; }
.bk-mira { position: relative; width: 56cqw; height: 56cqw; padding: 4cqw; border-radius: 4cqw; background: #fff; box-shadow: 0 0 0 1.2cqw rgba(255,255,255,.22); }
.bk-qr { width: 100%; height: 100%; }
.bk-linha { position: absolute; left: 3cqw; right: 3cqw; top: 8%; height: .8cqw; border-radius: 1cqw; background: #22d3ee; box-shadow: 0 0 3cqw 1cqw rgba(34,211,238,.7); }
@media (prefers-reduced-motion: no-preference) { .bk-linha { animation: bkLe 1.6s ease-in-out infinite alternate; } }
@keyframes bkLe { to { top: 90%; } }
.bk-conf { display: grid; gap: 3.4cqw; padding: 6cqw; }
.bk-v { font-size: 9cqw; font-weight: 800; letter-spacing: -0.02em; color: #1e293b; }
.bk-conf p small { display: block; font-size: 3cqw; color: var(--ink-3); }
.bk-conf p b { font-size: 3.8cqw; color: #1e293b; }
.bk-pagar { position: relative; display: grid; place-items: center; margin-top: 3cqw; padding: 3.6cqw; border-radius: 3.4cqw; background: #1e293b; color: #fff; font-size: 4cqw; font-weight: 800; transition: scale .25s var(--spring); }
.bk-pagar .sd-tap { width: 11cqw; height: 11cqw; margin: -5.5cqw 0 0 -5.5cqw; }
.px[data-ph="4"] .bk-pagar { scale: .95; }
.px[data-ph="4"] .bk-pagar .sd-tap { animation: sdTap .9s var(--ease) forwards; }
.bk-ok { flex: 1; display: grid; place-content: center; justify-items: center; gap: 2.6cqw; padding: 6cqw; text-align: center; background: linear-gradient(170deg, #ecfdf5, #fff 60%); }
.bk-sel { display: grid; place-items: center; width: 18cqw; height: 18cqw; border-radius: 50%; background: #22a55a; color: #fff; font-size: 9cqw; scale: .4; transition: scale .6s var(--spring); }
.px.f5 .bk-sel { scale: 1; }
.bk-ok b { font-size: 6cqw; color: #14532d; }
.bk-ok p { font-size: 3.4cqw; color: var(--ink-2); }

/* =========================================================
   ENTREGA DE EXAMES
   ========================================================= */
.en.f1:not(.f8) .sd-dim { opacity: 1; }
.en-cad, .en-lista { top: 2%; }
.en.f1:not(.f8) .en-cad, .en.f8 .en-lista { opacity: 1; scale: 1; translate: 0 0; }
.en-sit, .en-tag { display: grid; }
.en-sit em, .en-tag em { grid-area: 1 / 1; justify-self: end; padding: 3px 9px; border-radius: 99px; font-size: 10.5px; font-style: normal; font-weight: 800; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.en-tag em { justify-self: start; }
.en-sit .s1, .en-tag .s1 { background: #fff2e0; color: #8a4b00; }
.en-sit .s2, .en-tag .s2 { background: #e0ecff; color: #1e3fae; }
.en-sit .s3, .en-tag .s3 { background: #d2f3df; color: #14532d; }
.en:not(.f4) .en-sit .s1, .en.f4:not(.f6) .en-sit .s2, .en.f6 .en-sit .s3,
.en:not(.f4) .en-tag .s1, .en.f4:not(.f6) .en-tag .s2, .en.f6 .en-tag .s3 { opacity: 1; }
.en-p { display: grid; gap: 6px; transition: opacity .3s; }
.en-ph { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--navy-2); }
.en-ph span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11px; }
.en-ph i { margin-left: auto; color: #22a55a; opacity: 0; transition: opacity .3s; }
.en-p .cv-campos { display: none; }
.en:not(.f3) .en-p1 .cv-campos, .en.f3:not(.f5) .en-p2 .cv-campos, .en.f5 .en-p3 .cv-campos { display: grid; animation: sdEntra .45s var(--spring) both; }
.en.f3 .en-p1 .en-ph i, .en.f4 .en-p2 .en-ph i, .en.f6 .en-p3 .en-ph i { opacity: 1; }
.en:not(.f3) .en-p2, .en:not(.f5) .en-p3 { opacity: .45; }
.en-prev.on { background: #e0ecff; box-shadow: inset 0 0 0 1.5px #3b6fe0; }
/* a lista de entregas */
.en-fil { display: flex; flex-wrap: wrap; gap: 6px; }
.en-fil span { padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; }
.en-fil .pro, .en-row.pro em { background: #fff2e0; color: #8a4b00; }
.en-fil .libe, .en-row.libe em { /* (".lib" é a janela de liberação da página inicial) */ background: #e0ecff; color: #1e3fae; }
.en-fil .ent, .en-row.ent em { background: #d2f3df; color: #14532d; }
.en-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: var(--bg-alt); }
.en-row > span { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.en-row b { font-size: 12px; color: var(--navy-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.en-row small { font-size: 10.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.en-row small i { color: var(--wa); }
.en-row em { flex: none; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.en-row.novo { background: #effaf3; box-shadow: inset 3px 0 0 #22a55a; }
/* o envelope do exame, quem retirou e os comprovantes */
.en-box { position: absolute; z-index: 7; left: 0; right: 0; bottom: 2%; margin-inline: auto; width: min(60cqw, 240px); display: grid; justify-items: center; gap: 10px; }
.en-env { position: relative; width: 100%; aspect-ratio: 1.45; display: grid; align-content: end; gap: 4px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(160deg, #f6e7c8, #e6d09f); color: #4a3510; box-shadow: inset 0 0 0 1px rgba(120,90,30,.25), 0 24px 44px -22px rgba(60,40,10,.55); opacity: 0; translate: 0 24px; transition: opacity .35s, translate .6s var(--spring); }
.en-env::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; border-radius: 12px 12px 0 0; background: linear-gradient(160deg, #efdcb3, #dcc28c); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.en.f2 .en-env { opacity: 1; translate: 0 0; }
.en-filme { position: absolute; z-index: 1; right: 14px; top: -16px; width: 40%; aspect-ratio: 1.2; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(160deg, #1f2937, #0b1220); color: #93c5fd; font-size: 28px; rotate: 6deg; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); }
.en-et { position: relative; display: grid; line-height: 1.25; }
.en-et small { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; }
.en-et b { font-size: 13px; }
.en-quem { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(31,50,126,.5); opacity: 0; translate: 0 10px; transition: opacity .3s, translate .5s var(--spring); }
.en.f6 .en-quem { opacity: 1; translate: 0 0; }
.en-quem .av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #d2f3df; color: #14532d; font-size: 16px; }
.en-quem > span:nth-child(2) { display: grid; line-height: 1.3; }
.en-quem b { font-size: 12.5px; color: var(--navy-2); }
.en-quem small { font-size: 11px; color: var(--ink-2); }
.en-comp { display: none; width: 88%; }
.en-comp p { display: none; gap: 2px; padding: 10px 12px; border-radius: 4px; background: #fff; color: #222; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; line-height: 1.35; box-shadow: 0 10px 24px -14px rgba(15,25,70,.5); }
.en-comp b { font-size: 11px; }
.en-comp small { font-size: 10.5px; color: #444; }
.en.f2:not(.f5) .en-comp .c1, .en.f7 .en-comp .c3 { display: grid; animation: enImprime .7s ease both; }
@keyframes enImprime { from { clip-path: inset(0 0 100% 0); translate: 0 -8px; } to { clip-path: inset(0 0 0 0); translate: 0 0; } }

/* =========================================================
   3) TUDO NUM SÓ LUGAR
   ========================================================= */
.hb-wire { z-index: 3; }
.hb-l { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; }
.hb-l-volta { stroke: transparent; }
.hb-pk { opacity: 0; fill: #fff; stroke: var(--blue); stroke-width: 3; }
.hb-pk-volta { stroke: #22a55a; }
.hb-cap { display: none; }
.hb-sis { position: absolute; z-index: 4; left: 0; right: 0; top: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hb-s { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 4px 7px; border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -16px rgba(31,50,126,.5); transition: box-shadow .4s, scale .4s var(--spring); }
.hb-s img { width: 30px; height: 30px; border-radius: 8px; }
.hb-s span { display: grid; line-height: 1.2; }
.hb-s b { font-size: 12px; color: var(--navy-2); }
.hb-s small { display: none; font-size: 11.5px; color: var(--ink-2); }
.hb-s.on { scale: 1.04; box-shadow: 0 0 0 2px var(--blue), 0 16px 30px -16px rgba(13,131,253,.6); }
.hb-badge { position: absolute; z-index: 2; right: -4px; top: -10px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 99px; background: #22a55a; color: #fff; font-size: 10.5px; font-style: normal; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(34,165,90,.8); opacity: 0; scale: .5; transition: opacity .25s, scale .5s var(--spring); }
.hb-s-med .hb-badge, .hb-s-pla .hb-badge { display: none; }
.hb.f5:not(.f6) .hb-s-rec .hb-badge { opacity: 1; scale: 1; }
.hb-node { left: 2%; top: calc(64px + (100cqh - 64px) * .42); justify-items: start; }
.hb-node b { font-size: 11px; }
.hb-node .ic { width: 58px; height: 58px; }
.hb-node .tx small { display: none; }
.hb-gente { position: absolute; z-index: 4; right: 0; top: calc(64px + (100cqh - 64px) * .16); display: grid; gap: 8px; }
.hb-p { display: grid; justify-items: center; gap: 2px; font-size: 10.5px; font-weight: 700; color: var(--ink-3); transition: color .3s; }
.hb-p i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--navy); font-size: 17px; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -12px rgba(31,50,126,.5); transition: background-color .3s, color .3s, scale .45s var(--spring); }
.hb-p small { font-size: inherit; }
.hb:not(.f6) .hb-p1, .hb.f6:not(.f8) .hb-p2, .hb.f8:not(.f11) .hb-p3, .hb.f11 .hb-p4 { color: var(--navy-2); }
.hb:not(.f6) .hb-p1 i, .hb.f6:not(.f8) .hb-p2 i, .hb.f8:not(.f11) .hb-p3 i, .hb.f11 .hb-p4 i { background: var(--navy); color: #fff; scale: 1.15; }
.hb-phone { --pw: min(46cqw, (100cqh - 80px) / 2.107); position: absolute; z-index: 4; left: 50%; bottom: 0; margin-left: calc(var(--pw) / -2); }
/* as telas do celular, uma por passo */
.hb .sd-scr { translate: 102% 0; }
.hb-lock { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; gap: 1cqw; padding-top: 24cqw; color: #fff; background: radial-gradient(70% 45% at 30% 20%, rgba(56,208,200,.55), transparent 70%), radial-gradient(60% 50% at 80% 85%, rgba(79,179,255,.5), transparent 70%), linear-gradient(170deg, #1f3a8a, #142357); }
.hb-lock b { font-size: 15cqw; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.hb-lock small { font-size: 3.4cqw; opacity: .85; }
.hb.f3:not(.f6) .hb-s1, .hb.f6:not(.f8) .hb-s2, .hb.f8:not(.f11) .hb-s3, .hb.f11 .hb-s4 { translate: 0 0; }
.hb.f6 .hb-s1, .hb.f8 .hb-s2, .hb.f11 .hb-s3 { translate: -30% 0; opacity: 0; }
.hb-push { position: absolute; z-index: 25; top: 12cqw; left: 3cqw; right: 3cqw; display: flex; gap: 2.6cqw; align-items: center; padding: 3cqw; border-radius: 6cqw; background: rgba(255,255,255,.96); box-shadow: 0 3cqw 8cqw -2cqw rgba(24,40,72,.45); translate: 0 -160%; opacity: 0; transition: translate .7s var(--spring), opacity .35s; }
.hb.f2:not(.f3) .hb-push { translate: 0 0; opacity: 1; }
.hb-push .ic { flex: none; display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 3cqw; background: #25d366; color: #fff; font-size: 6cqw; }
.hb-push > span:nth-child(2) { display: grid; min-width: 0; line-height: 1.3; }
.hb-push small { font-size: 2.6cqw; color: var(--ink-3); }
.hb-push b { font-size: 3.6cqw; color: var(--navy-2); }
.hb-push em { font-style: normal; font-size: 3.1cqw; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* tela 1: a confirmação pelo link (a página pública do Gerencie Cloud) */
.pub { justify-content: center; gap: 4cqw; padding: 14cqw 5cqw 8cqw; background: radial-gradient(80% 50% at 20% 10%, rgba(79,179,255,.55), transparent 70%), radial-gradient(70% 50% at 90% 80%, rgba(56,208,200,.45), transparent 70%), linear-gradient(170deg, #22357f, #1f327e 50%, #142357); }
.pub .sd-sb { color: #fff; }
.pub-card { position: relative; display: grid; gap: 1.6cqw; justify-items: center; padding: 6cqw 5cqw; border-radius: 6cqw; background: rgba(255,255,255,.94); text-align: center; box-shadow: 0 4cqw 10cqw -4cqw rgba(0,0,0,.45); }
.pub-k { font-size: 2.8cqw; font-weight: 700; color: var(--ink-3); }
.pub-med { font-size: 4.4cqw; color: var(--navy-2); }
.pub-q { display: inline-flex; align-items: center; gap: 1.4cqw; font-size: 3.2cqw; font-weight: 700; color: var(--ink-2); }
.pub-h { margin-top: 1.6cqw; font-size: 4.2cqw; font-weight: 800; color: var(--navy-2); }
.pub-sim, .pub-nao { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; gap: 1.4cqw; padding: 2.8cqw; border-radius: 3.4cqw; font-size: 3.3cqw; font-weight: 800; transition: scale .25s var(--spring), opacity .3s; }
.pub-sim { background: linear-gradient(180deg, #34d96f, #1faa55); color: #fff; }
.pub-nao { background: var(--bg-alt); color: var(--ink-2); }
.pub-sim .sd-tap { width: 11cqw; height: 11cqw; margin: -5.5cqw 0 0 -5.5cqw; }
.hb[data-ph="4"] .pub-sim { scale: .95; }
.hb[data-ph="4"] .pub-sim .sd-tap { animation: sdTap .9s var(--ease) forwards; }
.pub-feito { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.4cqw; padding: 5cqw; border-radius: inherit; background: #fff; opacity: 0; transition: opacity .35s; }
.pub-selo { display: grid; place-items: center; width: 15cqw; height: 15cqw; border-radius: 50%; background: #22a55a; color: #fff; font-size: 8cqw; scale: .4; transition: scale .6s var(--spring); }
.pub-feito small { font-size: 3cqw; color: var(--ink-2); }
.pub-feito b { font-size: 3.8cqw; color: var(--navy-2); }
.hb.f5 .pub-feito { opacity: 1; }
.hb.f5 .pub-selo { scale: 1; }
.pub-emp { text-align: center; font-size: 3.2cqw; font-weight: 800; color: #fff; }
.pub-emp small { font-weight: 500; opacity: .8; }
/* tela 2: a agenda do médico pelo link */
.med-top { display: grid; justify-items: start; gap: .8cqw; padding: 14cqw 5cqw 4cqw; border-radius: 0 0 6cqw 6cqw; background: linear-gradient(160deg, #2a3f96, #1f327e 60%, #182848); color: #fff; }
.med-top img { width: 22cqw; height: auto; }
.med-top b { font-size: 5cqw; }
.med-top small { display: inline-flex; align-items: center; gap: 1.4cqw; font-size: 3cqw; opacity: .9; }
.med-top em { font-style: normal; font-size: 2.4cqw; font-weight: 800; padding: .3cqw 1.8cqw; border-radius: 99px; background: #f2c14e; color: #3a2a00; }
.med-seg { display: flex; gap: 1cqw; margin-top: 2cqw; padding: .8cqw; border-radius: 99px; background: rgba(255,255,255,.14); }
.med-seg span { padding: 1cqw 3.4cqw; border-radius: 99px; font-size: 2.7cqw; font-weight: 700; }
.med-seg .on { background: #fff; color: var(--navy); }
.med-ag { display: grid; gap: 2cqw; padding: 3.4cqw 3.4cqw 0; }
.med-ag li { display: flex; align-items: center; gap: 2.6cqw; padding: 2.6cqw 3cqw; border-radius: 3.4cqw; background: #fff; box-shadow: 0 .6cqw 2cqw -1cqw rgba(31,50,126,.2); font-size: 3.1cqw; }
.med-ag li b { font-size: 3.2cqw; color: var(--navy); }
.med-ag li span { display: grid; flex: 1; min-width: 0; line-height: 1.25; font-weight: 700; color: var(--navy-2); }
.med-ag li small { font-weight: 500; font-size: 2.6cqw; color: var(--ink-2); }
.med-ag li i { color: #22a55a; }
.med-ag li.hj { box-shadow: inset 1cqw 0 0 var(--sd), 0 .6cqw 2cqw -1cqw rgba(31,50,126,.2); }
.med-lt { display: grid; gap: 1.6cqw; margin: 3cqw 3.4cqw 0; padding: 3cqw 3.4cqw; border-radius: 4cqw; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 .3cqw rgba(31,50,126,.12); transition: scale .5s var(--spring), box-shadow .4s, background-color .4s; }
.med-lt-h { display: grid; line-height: 1.2; }
.med-lt-h b { font-size: 3.3cqw; color: var(--navy-2); }
.med-lt-h small { font-size: 2.6cqw; color: var(--ink-2); }
.med-trilha { display: flex; align-items: center; gap: 2.6cqw; }
.med-trilha i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #9fb0d6; }
.med-trilha i.u { width: 3.2cqw; height: 3.2cqw; background: var(--navy); }
.med-al { display: inline-flex; align-items: center; gap: 1.4cqw; font-size: 2.9cqw; font-weight: 800; color: #c62828; }
.hb.f7 .med-lt { background: #fff; scale: 1.04; box-shadow: inset 0 0 0 .4cqw var(--blue), 0 3cqw 6cqw -3cqw rgba(13,131,253,.5); }
/* tela 3: o cartão do plano + a folha do Pix */
.hb.f9 .hb-s3 .cd-folha { translate: 0 0; }
.hb.f10 .hb-s3 .cd-copiar { background: #1b7a43; }
.hb.f10 .hb-s3 .cd-copiar .a { opacity: 0; }
.hb.f10 .hb-s3 .cd-copiar .b { opacity: 1; }
/* tela 4: o dono */
.dono { padding-top: 13cqw; background: var(--bg-alt); }
.dono .sd-sb { background: var(--navy); }
.dono-top { display: grid; gap: .6cqw; padding: 3cqw 5cqw 5cqw; border-radius: 0 0 7cqw 7cqw; background: radial-gradient(60% 70% at 92% 8%, rgba(79,179,255,.5), transparent 60%), linear-gradient(165deg, #2a3f96 0%, #1f327e 60%); color: #fff; }
.dono-top small { display: flex; align-items: center; gap: 1.5cqw; font-size: 3.2cqw; opacity: .92; }
.dono-top em { font-style: normal; font-size: 2.5cqw; font-weight: 800; padding: .3cqw 2cqw; border-radius: 99px; background: #f2c14e; color: #3a2a00; }
.dono-top strong { font-size: 5.6cqw; font-weight: 800; letter-spacing: -0.02em; }
.dono-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; padding: 3.4cqw; }
.dono-kpi span { display: grid; gap: .6cqw; padding: 3cqw; border-radius: 4cqw; background: #fff; box-shadow: 0 .6cqw 2cqw -1cqw rgba(31,50,126,.2); }
.dono-kpi small { font-size: 2.5cqw; color: var(--ink-2); line-height: 1.2; }
.dono-kpi b { font-size: 4cqw; color: var(--navy-2); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.dono-mods { padding: 0 3.4cqw; }
.dono-mods .badge { scale: 0; transition: scale .5s var(--spring); }
.hb.f12 .dono-mods .badge { scale: 1; }
.dono-graf { margin: 3.4cqw 3.4cqw 0; padding: 3cqw 3.4cqw; border-radius: 4cqw; background: #fff; box-shadow: 0 .6cqw 2cqw -1cqw rgba(31,50,126,.2); }
.dono-graf p { font-size: 2.8cqw; font-weight: 800; color: var(--ink-3); }
.dono-barras { display: flex; align-items: flex-end; gap: 2cqw; height: 17cqw; margin-top: 2cqw; }
.dono-barras i { flex: 1; height: 100%; border-radius: 1.4cqw 1.4cqw .5cqw .5cqw; background: linear-gradient(var(--sky), var(--navy)); transform-origin: bottom; transform: scaleY(.04); transition: transform .8s var(--spring) calc(var(--k) * 60ms); }
.hb.f11 .dono-barras i { transform: scaleY(var(--h)); }
.dono-dias { display: flex; gap: 2cqw; margin-top: 1cqw; }
.dono-dias span { flex: 1; text-align: center; font-size: 2.4cqw; font-weight: 700; color: var(--ink-3); }
/* o fim da história em azul-escuro: os sistemas, a nuvem e o celular em destaque */
.sd-sec.escuro { color: #fff; background: radial-gradient(70% 55% at 88% 6%, rgba(14,154,167,.38), transparent 70%), radial-gradient(60% 50% at 6% 92%, rgba(13,131,253,.26), transparent 70%), linear-gradient(170deg, #1a2a6c, #121d4d 60%, #0e1740); }
.sd-sec.escuro .eyebrow { background: rgba(255,255,255,.1); color: #cfe6ff; }
.sd-sec.escuro .h2 { color: #fff; }
.sd-sec.escuro .h2 .grad { background: linear-gradient(95deg, #8fdcff, #63e6d6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sd-sec.escuro .lead { color: rgba(255,255,255,.8); }
.sd-sec.escuro .authz-steps li { background: #24357c; }
.sd-sec.escuro .authz-steps b { color: #fff; }
.sd-sec.escuro .authz-steps small { color: rgba(255,255,255,.78); }
.sd-sec.escuro .authz-steps li > span { background: #fff; color: var(--navy); }
.sd-sec.escuro .steps-bar { background: rgba(255,255,255,.16); }
.sd-sec.escuro .steps-bar i { background: linear-gradient(90deg, var(--sky), #63e6d6); }
@media (min-width: 901px) {
  .sd-sec.escuro .authz-steps li:not(.is-on) { background: none; }
  .sd-sec.escuro .authz-steps li:not(.is-on) b { color: rgba(255,255,255,.78); }
  .sd-sec.escuro .authz-steps li:not(.is-on) small { color: rgba(255,255,255,.6); }
  .sd-sec.escuro .authz-steps li:not(.is-on) > span { background: rgba(255,255,255,.14); color: #fff; }
  .sd-sec.escuro .authz-steps li.is-done > span { background: #22a55a; color: #fff; }
  .sd-sec.escuro .steps-bar i { background: linear-gradient(var(--sky), #63e6d6); }
}
.escuro .hb-l { stroke: var(--sky); }
.escuro .hb-pk { stroke: var(--sky); fill: #0e1740; }
.escuro .hb-pk-volta { stroke: #34c759; }
.escuro .hb-cap { color: rgba(255,255,255,.62); }
.escuro .hb-node b { color: #fff; }
.escuro .hb-node small { color: rgba(255,255,255,.7); }
.escuro .hb-node .ic { box-shadow: 0 0 0 10px rgba(79,179,255,.14), 0 18px 40px -12px rgba(0,0,0,.6); }
.escuro .hb-node.hit .ic { box-shadow: 0 0 0 18px rgba(79,179,255,.22), 0 18px 40px -12px rgba(0,0,0,.6); }
.escuro .hb-s { box-shadow: 0 16px 34px -20px rgba(0,0,0,.7); }
.escuro .hb-s.on { box-shadow: 0 0 0 3px var(--sky), 0 0 0 9px rgba(79,179,255,.18), 0 16px 34px -18px rgba(0,0,0,.7); }
.escuro .hb-p { color: rgba(255,255,255,.62); }
.escuro .hb-p i { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.escuro .hb:not(.f6) .hb-p1, .escuro .hb.f6:not(.f8) .hb-p2, .escuro .hb.f8:not(.f11) .hb-p3, .escuro .hb.f11 .hb-p4 { color: #fff; }
.escuro .hb:not(.f6) .hb-p1 i, .escuro .hb.f6:not(.f8) .hb-p2 i, .escuro .hb.f8:not(.f11) .hb-p3 i, .escuro .hb.f11 .hb-p4 i { background: #fff; color: var(--navy); box-shadow: 0 0 0 6px rgba(79,179,255,.25); }
.escuro .hb-phone { box-shadow: inset 0 0 0 calc(var(--pw) * .0035) rgba(255,255,255,.9), 0 40px 80px -30px rgba(0,0,0,.75); }

/* =========================================================
   5) O CICLO DO PLANO
   ========================================================= */
.pl-node { display: none; }
.pn .sd-wire { display: none; }
.pl-ct, .pl-fat, .pl-painel { top: 2%; }
.pn.f1:not(.f2) .pl-ct, .pn.f2:not(.f5) .pl-fat, .pn.f5:not(.f8) .pl-painel { opacity: 1; scale: 1; translate: 0 0; }
.pn.f1:not(.f11) .sd-dim { opacity: 1; }
.pl-tit { display: flex; align-items: center; gap: 10px; }
.pl-tit > span:nth-child(2) { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.pl-tit b { font-size: 13px; color: var(--navy-2); }
.pl-tit small { font-size: 11.5px; color: var(--ink-2); }
.pl-tit .sd-av { width: 34px; height: 34px; font-size: 14px; }
.pl-av { background: linear-gradient(145deg, #4fb3ff, #1f327e); }
.pl-plano { font-style: normal; text-align: right; font-size: 10.5px; font-weight: 800; color: var(--sd); line-height: 1.3; }
.pl-plano b { font-size: 15px; color: var(--navy-2); }
.pl-bh { font-size: 10px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.pl-b { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; background: var(--bg-alt); font-size: 12px; opacity: 0; translate: -10px 0; transition: opacity .3s, translate .45s var(--spring); }
.pl-b i { color: var(--sd); }
.pl-b b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy-2); }
.pl-b small { font-size: 11px; color: var(--ink-2); }
.pl-b.on { opacity: 1; translate: 0 0; }
.pl-vend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); opacity: 0; transition: opacity .3s; }
.pl-vend i { color: var(--navy); }
.pl-vend.on { opacity: 1; }
/* as parcelas (carnê) */
.pl-carne { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pl-t { position: relative; display: grid; justify-items: center; gap: 1px; padding: 6px 2px 5px; border-radius: 7px; border: 1px dashed rgba(31,50,126,.3); background: #fff; font-size: 10px; line-height: 1.2; overflow: hidden; opacity: 0; translate: 0 8px; transition: opacity .3s calc(var(--i) * 45ms), translate .45s var(--spring) calc(var(--i) * 45ms), background-color .4s, border-color .4s; }
.pl-t small { font-size: 9px; color: var(--ink-3); }
.pl-t b { font-size: 11px; color: var(--navy-2); }
.pl-t em { font-style: normal; font-size: 9.5px; color: var(--ink-2); }
.pl-t .pg { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(34,165,90,.92); color: #fff; font-size: 11px; font-style: normal; font-weight: 900; letter-spacing: .08em; opacity: 0; scale: 1.4; transition: opacity .25s, scale .45s var(--spring); }
.pn.f2 .pl-t { opacity: 1; translate: 0 0; }
.pl-t.on { border-color: transparent; }
.pl-t.on .pg { opacity: 1; scale: 1; }
.pl-formas { display: flex; flex-wrap: wrap; gap: 6px; opacity: 0; transition: opacity .3s; }
.pl-formas.on { opacity: 1; }
.pl-formas span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: var(--tint); color: var(--navy); font-size: 11.5px; font-weight: 800; }
.pl-ret { display: none; padding: 7px 10px; border-radius: 9px; background: #e9f8ef; color: #1b7a43; font-size: 12px; }
.pl-ret i { font-size: 14px; margin-right: 4px; vertical-align: -2px; }
.pn.f4 .pl-ret { display: block; animation: sdEntra .45s var(--spring) both; }
.pn.f3 .pl-formas { display: none; }
/* o painel preventivo de atrasos */
.pl-faixas { display: grid; gap: 5px; }
.pl-fh { font-size: 10px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.pl-fx { display: grid; grid-template-columns: 6.4em 1fr 1.6em; align-items: center; gap: 8px; font-size: 11.5px; }
.pl-fx span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-fx i { height: 8px; border-radius: 99px; background: currentColor; transform-origin: left; transform: scaleX(calc(var(--v) * .05)); transition: transform .8s var(--ease); }
.pl-fx b { text-align: right; color: var(--navy-2); }
.pl-fx.a1 { color: #f2b705; } .pl-fx.a2 { color: #f59e0b; } .pl-fx.a3 { color: #f97316; } .pl-fx.a4 { color: #ea580c; } .pl-fx.a5 { color: #dc2626; }
.pn.f5 .pl-fx i { transform: scaleX(var(--v)); }
.pl-cli { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fff8eb; box-shadow: inset 3px 0 0 #f2b705; }
.pl-cli > span:first-child { display: grid; line-height: 1.25; min-width: 0; }
.pl-cli b { font-size: 12.5px; color: var(--navy-2); }
.pl-cli small { font-size: 11px; color: var(--ink-2); }
.pn[data-ph="6"] .pl-cli .sd-btn { scale: .95; }
.pn[data-ph="6"] .pl-cli .sd-tap { animation: sdTap .9s var(--ease) forwards; }
/* o cartão de benefícios (impresso, com o QR Code) */
.pl-cartao { position: absolute; z-index: 6; left: 0; right: 0; top: 4%; margin-inline: auto; width: min(72%, 300px); aspect-ratio: 1.586; display: grid; align-content: start; gap: 2px; padding: 16px 18px; border-radius: 16px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 120% at 100% 0%, #38d0c8 0%, #0e9aa7 40%, #1f327e 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 26px 50px -20px rgba(15,25,70,.7);
  opacity: 0; scale: .8; rotate: -6deg; transition: opacity .35s, scale .6s var(--spring), rotate .6s var(--spring); }
.pl-cartao-h { display: inline-flex; align-items: center; gap: 6px; margin-bottom: auto; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .95; }
.pl-cartao b { margin-top: 26%; font-size: 15px; letter-spacing: .02em; }
.pl-cartao small { font-size: 11px; opacity: .9; }
.pl-qr { position: absolute; right: 14px; top: 14px; width: 30%; height: auto; border-radius: 6px; }
.pl-scan { position: absolute; right: 14px; top: 14px; width: 30%; height: 3px; border-radius: 3px; background: #4fb3ff; box-shadow: 0 0 10px 2px rgba(79,179,255,.9); opacity: 0; }
.pn.f8:not(.f10) .pl-cartao { opacity: 1; scale: 1; rotate: 0deg; }
.pn.f9:not(.f10) .pl-scan { opacity: 1; animation: sdScan 1s var(--ease) 2; }
@keyframes sdScan { 0% { translate: 0 0; } 50% { translate: 0 calc(var(--q, 90px)); } 100% { translate: 0 0; } }
/* o celular do José: o aviso no WhatsApp e, depois, o cartão digital com o Pix */
.pn.f7 .sd-fone .phone { translate: 0 0; }
.pn.f7 .sd-fone, .as.f12 .sd-fone { z-index: 7; }
.pn .s-cartao { translate: 102% 0; }
.pn.f9 .s-cartao { translate: 0 0; }
.pn.f9 .s-whats { translate: -30% 0; opacity: 0; }
.pn.f10 .s-cartao .cd-folha { translate: 0 0; }
.pn.f11 .s-cartao .cd-copiar { background: #1b7a43; }
.pn.f11 .s-cartao .cd-copiar .a { opacity: 0; }
.pn.f11 .s-cartao .cd-copiar .b { opacity: 1; }

/* =========================================================
   CELULAR EM PÉ (base): o computador em cima, as janelas por cima dele e o celular entra quando é a vez dele
   ========================================================= */
@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 561px) {
  .sd-pc-tag { font-size: 11px; }
  .sd-fone { left: 0; right: 0; margin-inline: auto; }
  /* Pix: enquanto o celular paga, ele ocupa a cena (a cobrança volta quando o banco confirma) */
  .px { --pw: min(54cqw, (100cqh - 30px) / 2.107); }
  .px .sd-fone { top: 1%; bottom: auto; }
  .px .sd-fone .phone { translate: 100cqw 0; }
  .px.f2:not(.f6) .sd-fone .phone { translate: 0 0; }
  .px.f2:not(.f6) .px-qr { opacity: 0; scale: .92; }
  .cv .sd-fone { top: calc(53.7cqw + 28px); bottom: auto; }
  .as .sd-fone .phone, .pn .sd-fone .phone, .cv.f1:not(.f9) .sd-fone .phone { translate: 100cqw 0; }
  .sd-wire { transition: opacity .3s; }
  .cv:not(.f1) .sd-wire, .cv.f9 .sd-wire, .nfs:not(.f5) .sd-wire, .nfs.f9 .sd-wire { opacity: 0; }
  /* convênio: o celular da Maria no começo e no fim; a nuvem embaixo enquanto o sistema consulta */
  .cv .sd-fone .phone { translate: 0 0; }
  .cv-toast { font-size: 12px; }
  .as-doc { width: 58cqw; }
  .as.f8 .as-doc { width: 66cqw; }
}

/* =========================================================
   LADO A LADO: computador (e celular deitado) — o computador à esquerda, o celular à direita, a nuvem no meio
   ========================================================= */
@media (min-width: 901px), (orientation: landscape) and (max-height: 560px) {
  .sd-pc { top: 50%; width: 60cqw; margin-top: calc(60cqw / -1.863 / 2 - 4cqh); }
  .cv, .as, .pn, .px { --pw: min(max(220px, 26cqw), 270px, 80cqh / 2.107); }
  .sd-fone { top: 50%; bottom: auto; margin-top: calc(var(--pw) * -1.0535 + 14px); }
  .sd-phone-tag { display: inline-flex; left: auto; top: calc(50% + var(--pw) * 1.0535 + 26px); right: calc(var(--pw) / 2); translate: 50% 0; }
  .sd-dlg { left: 3cqw; right: auto; margin: 0; width: min(46cqw, 430px); top: max(1%, 50% - 60cqw / 1.863 / 2 - 4cqh - 36px); }
  .sd-toast { left: 30cqw; right: auto; margin: 0; translate: -50% 14px; }
  /* convênio */
  .cv-node { left: 60cqw; right: auto; top: 6%; bottom: auto; margin: 0; width: calc(100cqw - 60cqw - var(--pw)); opacity: 1; }
  .cv-node .tx small { display: block; }
  .cv.f9 .cv-node { opacity: 1; }
  .cv-toast { top: calc(50% + 60cqw / 1.863 / 2 - 4cqh - 54px); }
  .cv.f9 .cv-toast { translate: -50% 0; }
  .cv .sd-fone .phone, .as .sd-fone .phone, .pn .sd-fone .phone, .px .sd-fone .phone { translate: none; }
  /* Pix: o banco no vão entre o computador e o celular */
  .px-node { display: grid; left: 60cqw; top: 6%; width: calc(100cqw - 60cqw - var(--pw)); }
  .px .sd-wire { display: block; }
  /* entrega: o envelope e os comprovantes à direita */
  .en-box { left: auto; right: 1cqw; margin: 0; top: 50%; bottom: auto; translate: 0 -50%; width: min(34cqw, 290px); }
  .en-comp { display: block; }
  /* assinatura */
  .as-doc { left: 32cqw; right: auto; margin: 0; top: 50%; width: 26cqw; margin-top: calc(26cqw * -0.707); }
  .as.f8 .as-doc { left: 14cqw; width: 32cqw; margin-top: calc(32cqw * -0.707); }
  .as-cert { left: 3cqw; bottom: 10%; width: min(30cqw, 280px); }
  .as-senha { width: min(34cqw, 340px); }
  .as-ok { width: min(40cqw, 380px); top: 20%; }
  .as-voa { z-index: 9; }
  /* tudo num só lugar */
  .hb-cap { display: block; position: absolute; z-index: 4; left: 0; top: calc(50% - 158px); width: 27cqw; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .hb-sis { left: 0; right: auto; top: 50%; width: 27cqw; margin-top: -128px; grid-template-columns: 1fr; gap: 12px; }
  .hb-s { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; }
  .hb-s img { width: 40px; height: 40px; border-radius: 10px; }
  .hb-s b { font-size: 15px; }
  .hb-s small { display: block; }
  .hb-node { left: 37cqw; top: 50%; margin-top: -48px; }
  .hb-node .ic { width: 76px; height: 76px; }
  .hb-node .ic img { width: 48px; height: 48px; border-radius: 13px; }
  .hb-node .tx small { display: block; }
  .hb-phone { --pw: min(30cqw, 270px, 88cqh / 2.107); left: auto; right: 64px; top: 50%; bottom: auto; margin: calc(var(--pw) * -1.0535) 0 0; }
  .hb-gente { right: 0; top: 50%; margin-top: -122px; gap: 14px; }
  .hb-p i { width: 44px; height: 44px; font-size: 19px; }
  .hb-p { font-size: 11px; }
  /* NFS-e: o Emissor Nacional em cima, à direita; o DANFS-e embaixo dele */
  .nf-node { left: 60cqw; right: auto; top: 5%; bottom: auto; margin: 0; width: 40cqw; opacity: 1; }
  .nf-node .tx small { display: block; }
  .nf-doc-box { left: auto; right: 4cqw; margin: 0; top: 24%; width: min(30cqw, 260px); }
  .nf-toast { left: 30cqw; right: auto; bottom: auto; top: calc(50% + 60cqw / 1.863 / 2 - 4cqh - 54px); }
  .nfs.f11 .nf-toast { translate: -50% 0; }
  /* exames de imagem: a worklist em cima, à direita; o equipamento embaixo dela, sempre à vista */
  .im-node { display: grid; left: 60cqw; width: 40cqw; top: 3%; }
  .im .sd-wire { display: block; }
  .im .sd-wback { stroke: var(--blue); }
  .im .sd-pk.back { fill: var(--blue); }
  .im-eq-box { left: auto; right: 1cqw; margin: 0; top: auto; bottom: 3%; width: min(37cqw, 340px); }
  .im .im-eq { translate: none; }
  .im-tag { display: inline-flex; }
  /* plano */
  .pl-node { display: grid; left: 60cqw; top: 4%; width: calc(100cqw - 60cqw - var(--pw)); }
  .pn .sd-wire { display: block; }
  .pl-cartao { left: 6cqw; right: auto; margin: 0; top: 50%; margin-top: calc(min(44cqw, 340px) / -1.586 / 2); width: min(44cqw, 340px); }
}
/* cena baixa (celular deitado, telas pequenas como 320×568): as janelas do sistema ficam compactas para caber inteiras.
   É pela altura da própria cena (container query): vale para qualquer aparelho, sem lista de tamanhos */
@container (max-height: 340px) {
  .sd-dlg { font-size: 11.5px; }
  .sd-dlg-top { padding: 4px 10px; font-size: 11.5px; }
  .sd-dlg-body { gap: 4px; padding: 5px 10px 6px; }
  .cv-situ .cv-fat > p:nth-child(2) { display: none; } /* a situação do contrato mostra duas parcelas pagas em vez de três */
  .cv-obs, .nf-sec, .px-ext, .en-fil, .pl-bh, .im-leg, .im-con { display: none; }
  .cv-campos { gap: 4px; }
  .cv-f { padding: 2px 7px; }
  .cv-f small { font-size: 9px; }
  .cv-f b { min-height: 0; font-size: 11px; }
  .cv-fat p, .cv-grid p { padding: 2px 8px; }
  .cv-chk { gap: 2px; }
  .cv-chk li { font-size: 11px; line-height: 1.2; }
  .cv-ok { padding: 4px; font-size: 13px; }
  .cv-val { padding: 7px 10px; }
  .cv-num { font-size: 20px; }
  .nf-pag { padding: 6px 10px; }
  .nf-pv b { font-size: 15px; }
  .px-meio { gap: 8px; }
  .px-qrbox { width: 84px; height: 84px; }
  .px-bts { gap: 3px; }
  .px-bts span { padding: 4px 8px; }
  .px-st { padding: 6px 10px; }
  .px-rows { gap: 3px; }
  .px-row { padding: 4px 8px; }
  .px-tot { padding: 6px 10px; }
  .px-tot b { font-size: 15px; }
  .en-p { gap: 4px; }
  .en-ph { font-size: 11.5px; }
  .en-row { padding: 4px 8px; }
  .pl-tit .sd-av { width: 28px; height: 28px; }
  .pl-b { padding: 3px 8px; }
  .pl-carne { gap: 3px; }
  .pl-t { padding: 3px 2px; }
  .pl-t small { display: none; }
  .pl-faixas { gap: 3px; }
  .pl-fx { font-size: 10.5px; }
  .pl-cli { padding: 5px 8px; }
  .im-row { padding: 5px 8px; }
  .im-pede { padding: 6px 8px; }
  .as-acoes > span { padding: 6px 8px; }
  .as-lbl { display: none; }
  .as-cert { width: min(26cqw, 200px); bottom: 5%; padding: 8px 10px; }
  .as-cert b { font-size: 13px; }
  .as-cert small, .as-cert span { font-size: 9.5px; }
  .as-chip { left: 10px; top: 10px; width: 26px; height: 18px; }
  .as-cert > i { right: 10px; top: 8px; font-size: 18px; }
}
/* cena em pé (celular, tablet em pé): o envelope do exame no canto esquerdo (à direita ficam os botões flutuantes),
   menor, e some quando a lista de entregas aparece */
.en-box { transition: opacity .3s; }
@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 561px) {
  .en-box { left: 2%; right: auto; margin: 0; width: min(46cqw, 190px); }
  .en.f8 .en-box { opacity: 0; }
  /* e a cena baixa (celulares pequenos, telas de 320): nada por cima das janelas — sem a nuvem e os fios (a janela já diz
     "Aguardando…"), sem o envelope (a situação está no selo da janela), certificado e console do raio-X menores */
  @container (max-height: 470px) {
    .cv-node, .nf-node, .cv .sd-wire, .nfs .sd-wire { display: none; }
    .en-box { display: none; }
    .as-cert { width: min(58%, 200px); padding: 10px 12px; }
    .as-cert b { font-size: 14px; }
    .as-cert small, .as-cert span { font-size: 10px; }
    .as-chip { left: 12px; top: 12px; width: 28px; height: 20px; }
    .as-cert > i { right: 12px; top: 10px; font-size: 20px; }
    .im-eq-box { width: min(56cqw, 210px); }
  }
}
/* celular deitado: pouca altura — letras e janelas um pouco menores */
@media (orientation: landscape) and (max-height: 560px) {
  .sd-dlg { font-size: 11.5px; top: 2%; width: min(52cqw, 400px); }
  .sd-dlg-body { gap: 6px; padding: 8px 10px 10px; }
  .cv-f { padding: 3px 6px; }
  .cv-grid p, .cv-fat p { padding: 4px 8px; }
  .cv-val { padding: 8px 10px; }
  .cv-num { font-size: 20px; }
  .sd-node .ic { width: 42px; height: 42px; font-size: 1.1rem; }
  .sd-node .tx { display: none; }
  .sd-pc-tag, .sd-phone-tag { display: none; }
  .en-comp { display: none; }
  .hb-cap { display: none; }
  .hb-sis { margin-top: -100px; gap: 6px; }
  .hb-s { padding: 6px 8px; gap: 8px; }
  .hb-s img { width: 28px; height: 28px; }
  .hb-s b { font-size: 12px; }
  .hb-s small { font-size: 10px; }
  .hb-node .ic { width: 52px; height: 52px; }
  .hb-node .ic img { width: 34px; height: 34px; }
  .hb-gente { margin-top: -100px; gap: 6px; }
  .hb-p i { width: 32px; height: 32px; font-size: 14px; }
  .as-cert { padding: 10px 12px; }
  .as-cert b { font-size: 14px; }
}

/* celular em pé: o cartão do passo um pouco mais alto (os textos destas cenas são um pouco maiores) */
@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 561px) {
  .sd-sec .authz-steps { height: 104px; }
}
@media (max-width: 359px) {
  .sd-sec .authz-steps b { font-size: .95rem; }
  .sd-sec .authz-steps small { font-size: .76rem; }
}
/* celular deitado: as janelas mais compactas para caber na altura */
@media (orientation: landscape) and (max-height: 560px) {
  .cv-campos { gap: 4px; }
  .cv-f b { min-height: 0; font-size: 11px; }
  .cv-obs { padding: 4px 6px; font-size: 9px; }
  .cv-fat p { padding: 2px 8px; }
  .cv-chk { gap: 2px; }
  .cv-chk li { font-size: 11px; }
  .cv-ok { padding: 5px; font-size: 13px; }
}
/* sem animação: tudo no estado final, sem nada piscando */
@media (prefers-reduced-motion: reduce) {
  .sd-scene *, .sd-scene { transition: none !important; animation: none !important; }
}

/* =========================================================
   SIMULADOR: "E se o plano estiver atrasado?"
   ========================================================= */
.sd-sim-sec { background: #fff; }
.sd-sim { display: grid; gap: 16px; max-width: 980px; margin-inline: auto; }
.sd-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sd-pick button { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 64px; padding: 12px 6px; border: 0; border-radius: 18px; background: var(--bg-alt); color: inherit; font: inherit; text-align: center; cursor: pointer; transition: background-color .3s, box-shadow .3s, transform .3s var(--spring); }
.sd-pick button:hover { transform: translateY(-2px); }
.sd-pick button[aria-checked="true"] { background: #fff; box-shadow: inset 0 0 0 2px var(--navy), 0 14px 30px -18px rgba(31,50,126,.55); }
.sd-pick button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sd-pick b { display: block; font-size: 1rem; color: var(--navy-2); }
.sd-pick small { display: block; font-size: .8rem; line-height: 1.25; color: var(--ink-2); }
.sd-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 800; }
.sd-av.dia { background: linear-gradient(145deg, #34c759, #1b8f4a); }
.sd-av.atraso { background: linear-gradient(145deg, #ffb340, #ef6c00); }
.sd-av.cancelado { background: linear-gradient(145deg, #ff6b6b, #c62828); }
.sd-out { padding: 18px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -36px rgba(31,50,126,.45); }
.sd-caso header { display: flex; align-items: center; gap: 12px; }
.sd-caso header > span:nth-child(2) { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.sd-caso header b { font-size: 1rem; color: var(--navy-2); }
.sd-caso header small { font-size: .85rem; color: var(--ink-2); }
.sd-selo { flex: none; padding: 4px 10px; border-radius: 99px; font-size: .78rem; font-weight: 800; }
.sd-selo.dia { background: #e9f8ef; color: #1b7a43; }
.sd-selo.atraso { background: #fff2e0; color: #8a4b00; }
.sd-selo.cancelado { background: #fdecec; color: #a3201b; }
.sd-chk { display: grid; gap: 8px; margin: 16px 0; }
.sd-chk li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; line-height: 1.35; }
.sd-chk li i { flex: none; margin-top: 1px; font-size: 1.1rem; }
.sd-chk li.ok i { color: #22a55a; }
.sd-chk li.no i { color: #d93025; }
.sd-res { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; }
.sd-res > i { flex: none; font-size: 1.7rem; }
.sd-res > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; line-height: 1.35; }
.sd-res b { color: var(--navy-2); }
.sd-res small { font-size: .9rem; color: var(--ink-2); }
.sd-res.ok { background: #e9f8ef; }
.sd-res.ok > i { color: #22a55a; }
.sd-res.no { background: #fdf0ef; }
.sd-res.no > i { color: #d93025; }
.sd-preco { flex: none; display: grid; justify-items: end; line-height: 1.1; }
.sd-preco s { font-size: .9rem; color: var(--ink-2); }
.sd-preco b { font-size: 1.6rem; letter-spacing: -0.02em; color: #1b7a43; }
.sd-opc { display: grid; gap: 8px; margin-top: 10px; }
.sd-opc p { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg-alt); }
.sd-opc i { flex: none; font-size: 1.25rem; color: var(--navy); }
.sd-opc span { display: grid; line-height: 1.35; }
.sd-opc b { color: var(--navy-2); }
.sd-opc small { font-size: .88rem; color: var(--ink-2); }
.sd-dica { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .9rem; color: var(--ink-2); }
.sd-dica i { color: var(--sd, #0e9aa7); font-size: 1.1rem; }
/* cada vez que um paciente é escolhido, o que a recepção vê entra um item de cada vez */
@media (prefers-reduced-motion: no-preference) {
  .sd-caso.anim header, .sd-caso.anim .sd-chk li, .sd-caso.anim .sd-res, .sd-caso.anim .sd-opc p, .sd-caso.anim .sd-dica { animation: sdItem .4s var(--spring) both; }
  .sd-caso.anim .sd-chk li:nth-child(1) { animation-delay: .12s; }
  .sd-caso.anim .sd-chk li:nth-child(2) { animation-delay: .24s; }
  .sd-caso.anim .sd-chk li:nth-child(3) { animation-delay: .36s; }
  .sd-caso.anim .sd-res { animation-delay: .5s; }
  .sd-caso.anim .sd-opc p:nth-child(1) { animation-delay: .62s; }
  .sd-caso.anim .sd-opc p:nth-child(2) { animation-delay: .72s; }
  .sd-caso.anim .sd-dica { animation-delay: .82s; }
}
@keyframes sdItem { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (min-width: 640px) {
  .sd-pick button { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 14px 16px; text-align: left; }
  .sd-out { padding: 26px 28px; }
  .sd-opc { grid-template-columns: 1fr 1fr; }
}