/* Movimento e interação. Só vale com o movimento ligado: sem ele, a página fica completa e parada. */
:root {
  --mola: cubic-bezier(.34, 1.56, .64, 1);
  --noite-painel: #10272e;
}

main { position: relative; overflow-x: clip; }
@supports not (overflow: clip) { main { overflow-x: hidden; } }

/* Barra de progresso da página */
.progresso-pagina { display: none; position: fixed; inset: 0 0 auto; z-index: 30; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Entradas por rolagem */
.com-movimento [data-entrada] { opacity: 0; transition: opacity .7s var(--curva), transform .95s var(--curva), clip-path 1.15s var(--curva); transition-delay: calc(var(--i, 0) * 85ms); }
.com-movimento [data-entrada="sobe"] { transform: translateY(44px); }
.com-movimento [data-entrada="esquerda"] { transform: translateX(-72px) rotate(-2deg); }
.com-movimento [data-entrada="direita"] { transform: translateX(72px); }
.com-movimento [data-entrada="zoom"] { transform: scale(.82); }
/* O recorte fica no filho: um elemento recortado por inteiro nunca conta como visível na tela. */
.com-movimento [data-entrada="cortina"] { opacity: 1; transform: translateY(32px); }
.com-movimento [data-entrada="cortina"] > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--curva), transform .4s var(--curva), box-shadow .4s var(--curva); }
.com-movimento [data-entrada="cortina"].entrou > * { clip-path: inset(-60px); }
.com-movimento [data-entrada].entrou { opacity: 1; transform: none; }

/* Títulos palavra por palavra */
.palavra { display: inline-block; overflow: hidden; padding: .24em .04em .16em; margin: -.24em -.04em -.16em; vertical-align: top; }
/* A folga de cima guarda os acentos das maiúsculas, que passam da altura da linha. */
.palavra__miolo { display: inline-block; padding: .2em .02em .12em; margin: -.2em -.02em -.12em; }
.com-movimento .palavra__miolo { transform: translateY(125%) rotate(5deg); transform-origin: left bottom; transition: transform .9s var(--curva); transition-delay: calc(var(--i) * 65ms); }
.com-movimento .entrou .palavra__miolo, .abertura-pronta .abertura__titulo .palavra__miolo { transform: none; }

/* Abertura em sequência */
.abertura { position: relative; }
.com-movimento:not(.abertura-pronta) .abertura__titulo { opacity: 0; }
.com-movimento .abertura__logo, .com-movimento .abertura__lead, .com-movimento .abertura__acao { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--curva), transform .8s var(--curva); }
.com-movimento .abertura__acao { transform: translateY(22px) scale(.9); transition-timing-function: var(--curva), var(--mola); }
.abertura-pronta .abertura__logo, .abertura-pronta .abertura__lead, .abertura-pronta .abertura__acao { opacity: 1; transform: none; }
.abertura-pronta .abertura__lead { transition-delay: .5s; }
.abertura-pronta .abertura__acao { transition-delay: .7s; }

/* O celular sobe de baixo, inclinado, e responde ao ponteiro; sem ponteiro, balança devagar. */
.aparelho { transform: perspective(1500px) rotateX(calc(5deg + var(--fundo-y, 0) * -9deg)) rotateY(calc(-11deg + var(--fundo-x, 0) * 12deg)) rotateZ(2deg); transform-origin: 50% 40%; }
.com-movimento .aparelho { opacity: 0; translate: 0 120px; transition: opacity .9s var(--curva) .1s, translate 1.25s var(--curva) .1s, transform .5s var(--curva); }
.abertura-pronta .aparelho { opacity: 1; translate: 0 0; animation: balancar 8s ease-in-out 1.4s infinite alternate; }
@keyframes balancar { from { rotate: 0deg; scale: 1; } to { rotate: -1.4deg; scale: 1.015; } }

/* O muro de mensagens: as colunas correm devagar, em sentidos opostos, sem nunca parar de chegar. */
.com-movimento .muro__coluna { animation: muro-sobe var(--duracao, 80s) linear infinite; }
.com-movimento .muro__coluna:nth-child(even) { animation-direction: reverse; }
.muro--parado .muro__coluna { animation-play-state: paused; }
@keyframes muro-sobe { to { transform: translateY(calc(-50% - 6px)); } }

.com-movimento .recados { translate: calc(var(--fundo-x, 0) * 22px) calc(var(--fundo-y, 0) * 22px); transition: translate .5s var(--curva); }
.com-movimento .recado { animation: chegar-recado .6s var(--mola) both; transform-origin: left bottom; }
.com-movimento .recado:nth-child(1) { animation-delay: .9s; }
.com-movimento .recado:nth-child(2) { animation-delay: 1.1s; }
.com-movimento .recado:nth-child(3) { animation-delay: 1.3s; }
.com-movimento .recado:nth-child(4) { animation-delay: 1.5s; }
.com-movimento .recado.recado--novo { animation-delay: 0s; }
@keyframes chegar-recado { from { opacity: 0; transform: translateY(18px) scale(.8); } to { opacity: 1; transform: none; } }
.recado__estado::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--danger); vertical-align: 1px; }
.com-movimento .recado__estado::before { animation: piscar 1.4s ease-in-out infinite; }
@keyframes piscar { 50% { opacity: .25; } }

.fila { grid-column: 2; display: flex; align-items: center; gap: 6px; margin: 0; font: 600 14px/18px var(--font-sans); color: #ffb4a6; }
.fila strong { display: inline-block; font: 700 18px/18px var(--font-display); font-variant-numeric: tabular-nums; }
.fila__ponto { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.com-movimento .fila__ponto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--danger); animation: radar 1.6s ease-out infinite; }
@keyframes radar { to { transform: scale(3.2); opacity: 0; } }
.com-movimento .fila { animation: chegar-recado .6s var(--mola) 1.7s both; }

/* Órbita viva no canto da página */
.orbita-abertura { position: absolute; top: 0; right: 0; z-index: -1; width: clamp(240px, 68vw, 560px); height: auto; transform-origin: top right; pointer-events: none; }
.abertura { z-index: 1; }
.orbita-abertura__arco { fill: none; stroke: #ffffff1f; stroke-width: 2; stroke-linecap: round; }
.orbita-abertura__arco--forte { stroke: #7bded04d; }
.orbita-abertura__luz { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 90 1400; opacity: 0; }
.com-movimento .orbita-abertura__luz { opacity: 1; animation: luz-correndo 5s linear infinite; }
.com-movimento .orbita-abertura__luz--lenta { stroke: var(--menta); stroke-dasharray: 60 1000; animation-duration: 7s; animation-direction: reverse; }
@keyframes luz-correndo { from { stroke-dashoffset: 1490; } to { stroke-dashoffset: 0; } }
/* No celular a órbita passa atrás do título: sem os nós, nenhum ponto parece sujeira perto das letras. */
.orbita-abertura__no { display: none; transform-box: view-box; transform-origin: 800px 0; }
@media (min-width: 1024px) { .orbita-abertura__no { display: block; } }
.orbita-abertura__no--a { fill: var(--primary); }
.orbita-abertura__no--b { fill: var(--menta); }
.orbita-abertura__no--c { fill: var(--accent); }
.orbita-abertura__no--d { fill: var(--aqua); }
.com-movimento .orbita-abertura__no { animation: orbitar 13s ease-in-out infinite alternate; }
.com-movimento .orbita-abertura__no--b { animation-duration: 9s; animation-direction: alternate-reverse; }
.com-movimento .orbita-abertura__no--c { animation-duration: 16s; }
.com-movimento .orbita-abertura__no--d { animation-duration: 7s; animation-direction: alternate-reverse; }
@keyframes orbitar { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }

/* Botões */
.sr-btn { position: relative; overflow: hidden; isolation: isolate; translate: var(--ima-x, 0) var(--ima-y, 0); transition: transform .18s var(--curva), box-shadow .18s var(--curva), translate .3s var(--curva); }
.sr-btn:active { transform: scale(.97); }
.com-movimento .sr-btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 32%, #ffffff5c 50%, transparent 68%); transform: translateX(-130%); animation: brilho 4.4s var(--curva) infinite; pointer-events: none; }
@keyframes brilho { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.com-movimento .abertura__botao, .com-movimento .quem__chamada, .com-movimento .numeros__chamada { animation: chamar 2.6s ease-out infinite; }
@keyframes chamar { 0% { box-shadow: var(--shadow-cta), 0 0 0 0 #2f6fed80; } 70%, 100% { box-shadow: var(--shadow-cta), 0 0 0 18px #2f6fed00; } }
.botao-fixo { position: fixed; animation: surgir-fixo .55s var(--mola) both; }
@keyframes surgir-fixo { from { opacity: 0; transform: translateY(40px) scale(.9); } to { opacity: 1; transform: none; } }
.onda { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: #ffffff; pointer-events: none; z-index: -1; }

/* Formulário */
.painel { position: relative; overflow: hidden; }
.painel::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--menta); transform: scaleX(var(--avanco, 0)); transform-origin: left; transition: transform .55s var(--mola); }
.campo label { transition: color .2s var(--curva); }
.campo:focus-within label { color: var(--accent-text); }
.campo__caixa { position: relative; }
.campo input { padding-right: 42px; transition: border-color .2s var(--curva), box-shadow .25s var(--curva), transform .25s var(--curva); }
.campo input:focus-visible { box-shadow: 0 0 0 4px #2f6fed2b; transform: translateY(-1px); }
.campo--ok input { border-color: var(--primary); }
.campo__ok { position: absolute; top: 50%; right: 12px; width: 22px; height: 22px; margin-top: -11px; fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.campo__ok path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s var(--curva); }
.campo--ok .campo__ok path { stroke-dashoffset: 0; }
.sr-btn:disabled::before { content: ""; width: 16px; height: 16px; border: 2px solid #ffffff66; border-top-color: #ffffff; border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.confirmacao { animation: chegar-recado .5s var(--mola) both; }
.confirmacao__selo { position: relative; width: 64px; height: 64px; margin-bottom: 4px; }
.confirmacao__selo svg { display: block; width: 64px; height: 64px; fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.confirmacao__selo circle { stroke-dasharray: 176; stroke-dashoffset: 176; animation: desenhar .7s var(--curva) forwards; transform: rotate(-90deg); transform-origin: center; }
.confirmacao__selo path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: desenhar .4s var(--curva) .45s forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
.no-festa { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; }

/* Demonstração: a conversa */
.demo { position: relative; z-index: 2; display: grid; gap: 24px; margin-top: 28px; margin-bottom: -110px; }
.demo__legenda { max-width: 52ch; margin: 14px auto 0; font: 500 17px/25px var(--font-sans); color: #ffffffc2; text-align: center; }
.demo__ver-painel { justify-self: center; }
.celular { justify-self: center; width: min(100%, 340px); padding: 9px; border-radius: 40px; background: #0b1c25; box-shadow: 0 26px 56px #0a232d4d, 0 0 90px #2f6fed47, inset 0 0 0 2px #3a5a67; }
.celular__tela { display: flex; flex-direction: column; height: 540px; overflow: hidden; border-radius: 32px; background: var(--noite-painel); }
.celular__topo { display: flex; align-items: center; gap: 10px; padding: 16px 16px 11px; border-bottom: 1px solid var(--noite-line); color: var(--branco); }
.celular__topo img { flex: none; width: 36px; height: 36px; border-radius: 50%; }
.celular__topo strong { display: block; font: 700 15px/20px var(--font-sans); }
.celular__topo span { display: block; font: 400 12px/16px var(--font-sans); color: var(--noite-muted); }
.conversa { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 14px 12px 6px; overflow-y: auto; scrollbar-width: none; }
.conversa::-webkit-scrollbar { display: none; }
.balao { flex: none; max-width: 84%; padding: 8px 11px; border-radius: 13px; font: 500 14px/19px var(--font-sans); animation: chegar-recado .45s var(--mola) both; }
.balao p { margin: 0; }
.balao__autor { display: block; margin-top: 2px; font: 700 9px/12px var(--font-display); letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.balao--paciente { align-self: flex-start; border-bottom-left-radius: 3px; background: var(--branco); color: var(--ink); transform-origin: left bottom; }
.balao--sora { align-self: flex-end; border-bottom-right-radius: 3px; background: var(--accent); color: var(--branco); transform-origin: right bottom; }
.balao--digitando { display: flex; gap: 4px; padding: 13px 13px; }
.balao--digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--branco); animation: digitar 1s ease-in-out infinite; }
.balao--digitando i:nth-child(2) { animation-delay: .15s; }
.balao--digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digitar { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.conversa__opcoes { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-end; gap: 7px; min-height: 112px; padding: 8px 12px 16px; }
.demo-opcao { position: relative; overflow: hidden; isolation: isolate; min-height: 44px; padding: 8px 15px; border: 1px solid var(--aqua); border-radius: var(--radius-pill); background: transparent; color: var(--aqua); font: 600 14px/18px var(--font-sans); cursor: pointer; animation: chegar-recado .42s var(--mola) both; animation-delay: calc(var(--i, 0) * 70ms); transition: background-color .18s var(--curva), color .18s var(--curva), transform .18s var(--mola); }
.demo-opcao:hover, .demo-opcao:focus-visible { background: var(--aqua); color: var(--noite); transform: translateY(-2px); }
.demo-opcao:focus-visible { border-radius: var(--radius-pill); box-shadow: 0 0 0 2px var(--noite-painel), 0 0 0 4px var(--ceu); }
.demo-opcao:active { transform: scale(.95); }
.demo-opcao--toque { background: var(--aqua); color: var(--noite); transform: scale(.94); }
.demo-opcao--denovo { border-color: var(--noite-line); color: var(--branco); }

/* Demonstração: o painel, no formato do CRM que as clínicas usam. Dados fictícios. */
.janela { --crm-fundo: #eef1f5; --crm-linha: #e3e8ee; --crm-texto: #1f2933; --crm-forte: #111827; --crm-medio: #374151; --crm-suave: #5b6673; --crm-rotulo: #2f7f74; --crm-verde: #177a43;
  position: relative; container-type: inline-size; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #cfd8d2; border-radius: 16px; background: var(--crm-fundo); color: var(--crm-texto); font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 14px; line-height: 1.45; overflow-wrap: normal; box-shadow: 0 30px 70px #00000052, 0 0 120px #0b6f7440; }
.janela__barra { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px 6px 14px; background: #dfe5e1; }
.janela__barra i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #b5c2ba; }
.janela__barra strong { margin-left: 8px; font-size: 12px; font-weight: 600; color: #526664; white-space: nowrap; }
.janela__selo { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 10px; border: 1px solid #cfd8d2; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 700; line-height: 16px; color: #1e6f4f; white-space: nowrap; }
.janela__selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3d9b6a; }
.janela__aviso { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; margin: 0; padding: 10px 14px; border-radius: 10px; background: #1f2933; color: #fff; font-size: 13px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 16px 34px #1f293347; }

.crm__topo { display: grid; gap: 10px; padding: 12px; border-bottom: 1px solid var(--crm-linha); background: #fff; }
.crm__marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crm__marca img { flex: none; width: 36px; height: 36px; border: 1px solid var(--crm-linha); border-radius: 8px; }
.crm__marca strong { display: block; font-size: 14px; font-weight: 700; line-height: 18px; color: var(--crm-forte); }
.crm__marca small { display: block; font-size: 12px; line-height: 16px; color: #6b7785; }
.janela__abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.aba { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 7px 10px; border: 0; border-radius: 9px; background: none; color: #4a5562; font: inherit; font-size: 13px; font-weight: 600; line-height: 17px; text-align: center; cursor: pointer; transition: background-color .2s var(--curva), color .2s var(--curva); }
.aba:hover { background: #f1f4f7; color: var(--crm-forte); }
.aba:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.aba--ativa, .aba--ativa:hover { background: #e6f2ef; color: #0b5357; }
.aba--girando::after { content: ""; position: absolute; inset: auto 10px 3px; height: 2px; border-radius: 2px; background: var(--primary); transform-origin: left; animation: encher-aba 5.2s linear both; }
@keyframes encher-aba { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.aba__contador { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--crm-verde); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.janela__paineis { min-width: 0; padding: 14px 12px 18px; }

.painel-aba { display: grid; gap: 12px; align-content: start; animation: entrar-aba .5s var(--curva) both; }
@keyframes entrar-aba { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.crm-rotulo { display: block; font-size: 11px; font-weight: 700; line-height: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--crm-rotulo); }
.crm-intro__titulo { display: block; margin-top: 3px; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--crm-forte); }
.crm-intro p, .crm-bloco__nota { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--crm-suave); }

.grade-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cartao-painel { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 12px 22px; border: 1px solid var(--crm-linha); border-radius: 12px; background: #fff; animation: entrar-aba .5s var(--curva) both; animation-delay: calc(var(--i, 0) * 60ms); transition: transform .22s var(--mola), box-shadow .22s var(--curva); }
.cartao-painel::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 10px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--barra, var(--primary)), #ffffff00); transform-origin: left; animation: crescer-linha 1s var(--curva) both; animation-delay: calc(var(--i, 0) * 60ms + .25s); }
@keyframes crescer-linha { from { transform: scaleX(0); } }
.cartao-painel:hover { transform: translateY(-3px); box-shadow: 0 12px 24px #1f29331a; }
.cartao-painel__rotulo { font-size: 12px; font-weight: 600; line-height: 16px; color: var(--crm-medio); }
.cartao-painel__valor { display: block; width: max-content; max-width: 100%; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--crm-forte); font-variant-numeric: tabular-nums; transform-origin: left center; }
.cartao-painel__dica { margin-top: 4px; font-size: 11px; line-height: 15px; color: #6b7785; }

.crm-bloco { min-width: 0; padding: 14px; border: 1px solid var(--crm-linha); border-radius: 12px; background: #fff; animation: entrar-aba .5s var(--curva) both; animation-delay: .18s; }
.crm-bloco__topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.crm-bloco__topo > div { min-width: 0; }
.crm-bloco__titulo { display: block; margin-top: 3px; font-size: 16px; font-weight: 700; line-height: 21px; color: var(--crm-forte); }
.crm-selo { flex: none; padding: 5px 10px; border: 1px solid var(--crm-linha); border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 16px; color: var(--crm-medio); white-space: nowrap; }

.crm-proporcao { display: flex; gap: 2px; height: 18px; margin-top: 16px; }
.crm-proporcao span { width: var(--parte); animation: abrir-largura .9s var(--curva) both; animation-delay: calc(var(--i, 0) * 150ms + .35s); }
.crm-proporcao span:first-child { border-radius: 4px 0 0 4px; }
.crm-proporcao span:last-child { border-radius: 0 4px 4px 0; }
@keyframes abrir-largura { from { width: 0; } }
.crm-cor--particular { background: var(--primary); }
.crm-cor--convenio { background: var(--accent); }
.crm-legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--crm-medio); }
.crm-legenda li { display: flex; align-items: center; gap: 7px; }
.crm-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.crm-legenda b { color: var(--crm-forte); font-weight: 800; }

.crm-quadros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.crm-quadro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 78px; padding: 10px 6px; border: 1px solid var(--crm-linha); border-radius: 10px; background: #f8fafc; text-align: center; animation: entrar-aba .45s var(--curva) both; animation-delay: calc(var(--i, 0) * 60ms + .2s); }
.crm-quadro span { font-size: 11.5px; font-weight: 600; line-height: 15px; color: #4a5562; }
.crm-quadro strong { font-size: 18px; font-weight: 800; line-height: 22px; color: var(--crm-forte); font-variant-numeric: tabular-nums; }
.crm-quadro--largo { grid-column: 1 / -1; }

.fila-atendimento { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.fila-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 12px; border: 1px solid var(--crm-linha); border-radius: 10px; background: #fbfcfd; animation: entrar-aba .45s var(--curva) both; animation-delay: calc(var(--i, 0) * 70ms + .15s); transition: border-color .2s var(--curva), background-color .2s var(--curva); }
.fila-item--atendendo { border-color: #9fd3b6; background: #effaf3; }
.crm-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #e6f2ef; color: var(--crm-rotulo); font-size: 12px; font-weight: 800; }
.fila-item__texto { min-width: 0; }
.fila-item__texto strong { display: block; font-size: 14px; font-weight: 700; line-height: 19px; color: var(--crm-forte); }
.fila-item__texto span { display: block; font-size: 12px; line-height: 16px; color: #6b7785; }
.botao-whatsapp { grid-column: 1 / -1; min-height: 40px; padding: 8px 14px; border: 0; border-radius: 9px; background: var(--crm-verde); color: #fff; font: inherit; font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; cursor: pointer; transition: background-color .18s var(--curva), transform .18s var(--mola); }
.botao-whatsapp:hover:not(:disabled) { background: #0f6234; transform: translateY(-1px); }
.botao-whatsapp:disabled { background: #e7f4ee; color: #1e6f4f; cursor: default; }
.botao-whatsapp:focus-visible, .botao-crm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crm-simulacao { margin: 12px 0 0; padding: 9px 12px; border-radius: 9px; background: #f0f7f4; font-size: 12.5px; line-height: 17px; color: var(--crm-medio); }
.fila-vazia { display: grid; gap: 12px; justify-items: center; margin-top: 14px; padding: 22px 16px; border: 1px dashed #d5dce3; border-radius: 10px; font-size: 14px; color: var(--crm-suave); text-align: center; animation: entrar-aba .5s var(--curva) both; }
.fila-vazia p { margin: 0; }
.botao-crm { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 9px; background: #1f2933; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .18s var(--mola); }
.botao-crm:hover { transform: translateY(-1px); }

.crm-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.crm-filtros label:first-child { grid-column: 1 / -1; }
.crm-filtros span { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; line-height: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--crm-medio); }
/* 16px no celular: abaixo disso, o iPhone aproxima a tela ao tocar no campo. */
.crm-filtros input, .crm-filtros select { width: 100%; height: 40px; padding-inline: 10px; border: 1px solid #d5dce3; border-radius: 9px; background: #fff; color: var(--crm-texto); font: inherit; font-size: 16px; }
.crm-filtros input:focus-visible, .crm-filtros select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.crm-tabela-moldura { margin-top: 14px; }
.crm-tabela { display: block; width: 100%; border-collapse: collapse; font-size: 13px; }
.crm-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.crm-tabela tbody { display: grid; gap: 8px; }
.crm-tabela th[scope="col"] { padding: 10px 12px; background: #f6f8fa; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; color: var(--crm-medio); }
.agenda-item { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px; border: 1px solid var(--crm-linha); border-radius: 10px; background: #fff; animation: entrar-aba .42s var(--curva) both; animation-delay: calc(var(--i, 0) * 55ms + .15s); }
.agenda-item > * { min-width: 0; padding: 0; font-weight: 400; text-align: left; }
.agenda-item__texto, .agenda-item > [data-rotulo="Status"] { grid-column: 1 / -1; }
.agenda-item__texto strong { display: block; font-weight: 700; color: var(--crm-forte); }
.agenda-item__texto small { display: block; font-size: 11.5px; color: #6b7785; }
.agenda-item [data-rotulo]::before { content: attr(data-rotulo); display: block; margin-bottom: 2px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7785; }
.crm-tipo, .selo-status { display: inline-block; padding: 3px 10px; border: 1px solid; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.crm-tipo--particular { border-color: #cfe9dc; background: #e7f4ee; color: #1e6f4f; }
.crm-tipo--convenio { border-color: #d4def4; background: #eaf0fb; color: #2d4f8f; }
.selo-status--confirmada { border-color: #cfe9dc; background: #e7f4ee; color: #1e6f4f; }
.selo-status--aguardando { border-color: #f4d3ca; background: #fdeeea; color: #a2412b; }
.agenda-item--nova { border-color: #e4ea9c; background: #f7f9df; animation: linha-nova 1.1s var(--mola) both; }
@keyframes linha-nova { 0% { opacity: 0; transform: translateX(-28px); } 60% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
.crm-nada { margin: 14px 0 0; font-size: 13px; color: var(--crm-suave); }

@container (min-width: 500px) {
  .janela__abas { display: flex; flex-wrap: wrap; }
  .aba { flex: none; }
  .grade-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade-cartoes--dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-quadros { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .crm-quadro--largo { grid-column: auto; }
  .fila-item { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .botao-whatsapp { grid-column: auto; }
  .crm-filtros { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
  .crm-filtros label:first-child { grid-column: auto; }
  .crm-tabela-moldura { overflow: hidden; border: 1px solid var(--crm-linha); border-radius: 10px; background: #fff; }
  .crm-tabela { display: table; }
  .crm-tabela thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
  .crm-tabela tbody { display: table-row-group; }
  .agenda-item { display: table-row; padding: 0; border: 0; border-radius: 0; }
  .agenda-item > * { padding: 10px 12px; border-top: 1px solid #edf0f3; vertical-align: middle; }
  .agenda-item [data-rotulo]::before { display: none; }
  .agenda-item--nova > * { background: #f7f9df; }
}
@container (min-width: 720px) {
  .crm__topo { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 12px 20px; }
  .janela__abas { justify-content: flex-end; }
  .janela__paineis { padding: 20px 20px 22px; }
  .crm-intro__titulo { font-size: 26px; }
  .cartao-painel__valor { font-size: 24px; }
}

/* Recursos: a linha se preenche com a rolagem e cada nó acende quando o item chega */
.recurso { transition: opacity .7s var(--curva), transform .8s var(--curva); }
.recurso img { transition: transform .35s var(--mola); }
.recurso:hover img { transform: scale(1.18) rotate(-6deg); }
.recurso.entrou::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px #2f6fed24; }
.recurso.entrou:hover::before { box-shadow: 0 0 0 10px #2f6fed2e; }

/* Fotos recortadas que respondem ao ponteiro */
.inclinavel { position: relative; transform: perspective(1100px) rotateX(var(--gira-x, 0deg)) rotateY(var(--gira-y, 0deg)); transform-origin: 50% 100%; transition: transform .4s var(--curva); }

/* Prova */
.sr-metric__number.contando { color: var(--aqua); }
.com-movimento .quem__traco { transform: scaleX(0); transition: transform .9s var(--curva) .35s; }
.com-movimento .entrou + .quem__traco { transform: none; }
/* A fala entra em partes: primeiro a frase de destaque, depois o resto e a assinatura. */
.com-movimento .prova__depoimento p span, .com-movimento .prova__depoimento figcaption { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--curva), transform .8s var(--curva); }
.com-movimento .prova__depoimento p span { transition-delay: .45s; }
.com-movimento .prova__depoimento figcaption { transition-delay: .85s; }
.com-movimento .prova__depoimento.entrou p span, .com-movimento .prova__depoimento.entrou figcaption { opacity: 1; transform: none; }
.sr-metric__number { transition: color .5s var(--curva); }

@media (min-width: 1024px) {
  .com-movimento .recurso[data-entrada]:not(.entrou):nth-child(odd) { transform: translateX(-64px); }
  .com-movimento .recurso[data-entrada]:not(.entrou):nth-child(even) { transform: translateX(64px); }
  .demo { grid-template-columns: 340px minmax(0, 1fr); gap: 36px; margin-top: 44px; margin-bottom: -130px; }
  .demo__ver-painel { display: none; }
  .janela__aviso { left: auto; right: 16px; top: 48px; bottom: auto; }
  .janela__paineis { min-height: 476px; }
  .orbita-abertura { width: clamp(480px, 50vw, 820px); }
}

/* Efeitos presos à rolagem. Em navegador sem suporte, a página funciona igual, sem eles. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .progresso-pagina { display: block; animation: progresso linear both; animation-timeline: scroll(root block); }
    .abertura__cena { animation: subir-cena linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
    .orbita-abertura { animation: girar-orbita linear both; animation-timeline: scroll(root block); animation-range: 0 900px; }
    .recursos::after { animation: encher-linha linear both; animation-timeline: view(); animation-range: entry 30% cover 72%; }
    .prova__retrato { animation: subir-retrato linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
/* As estrelas em profundidade ficam só nas telas grandes: no celular, a camada pesa demais. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .ceu::after { animation: estrelas-lentas linear both; animation-timeline: view(); }
  }
}
@keyframes progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes subir-cena { to { transform: translateY(-60px) scale(.96); } }
@keyframes girar-orbita { to { transform: rotate(14deg) scale(1.1); } }
@keyframes estrelas-lentas { from { transform: translateY(-46px); } to { transform: translateY(46px); } }
@keyframes encher-linha { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes subir-retrato { from { translate: 0 80px; } to { translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .balao, .demo-opcao, .painel-aba, .cartao-painel, .cartao-painel::after, .crm-bloco, .crm-quadro, .crm-proporcao span, .fila-item, .fila-vazia, .agenda-item { animation: none !important; }
  .confirmacao__selo circle, .confirmacao__selo path { stroke-dashoffset: 0; }
}