/* ============================================================================ Landing /agendar — wizard de 3 passos. Sem navbar. Reusa .evo-cal-* e .evo-form-field do header.css; aqui vive só o layout/estados da landing. Regras da marca: sem gradiente; sombra só em quem levanta (botões); verde #1bbf5d / #16a34a; vermelho #ea3934; Poppins peso máx 600 nos displays. ========================================================================== */ .ag-body { background: #eef2f7; color: #1e2026; min-height: 100vh; /* header.css reserva 'body { padding-top: 104px }' pra navbar fixa das páginas normais. Esta landing NÃO tem navbar (tem a própria .ag-topbar), então esses 104px viravam espaço morto no topo e forçavam barra de rolagem. Zera aqui. */ padding-top: 0; font-family: 'Poppins', system-ui, -apple-system, sans-serif; } /* ── topo: só a marca, sem menu ── */ .ag-topbar { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; margin: 0 auto; padding: 22px 24px 4px; } .ag-brand img { display: block; height: 30px; width: auto; } .ag-topbar-secure { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #6b7280; font-weight: 500; } .ag-topbar-secure svg { width: 15px; height: 15px; color: #1bbf5d; } .ag-main { max-width: 1120px; margin: 0 auto; padding: 14px 24px 28px; } /* ── embutida no modal (iframe): sem topbar. CENTRALIZAÇÃO ABSOLUTA dos dois cards ── O corpo do iframe preenche o modal (min-height:100vh = altura do card) e é um flex-column. O
é só o centralizador: margin:auto o joga pro CENTRO exato do modal (o "grandão" que aparece no inspetor), nos dois eixos. Quando o conteúdo cabe (agenda), fica centrado com folga igual em cima/baixo; quando estoura (formulário), as margens auto zeram e ele rola a partir do topo — scroll SÓ nesse passo. O respiro cinza é o padding do body. */ .ag-body.ag-embed { min-height: 100vh; display: flex; flex-direction: column; padding: 30px; box-sizing: border-box; } /* o site.css reserva calha de scroll no (scrollbar-gutter:stable); no modal isso vira uma faixa cinza fantasma à direita (parece uma scrollbar mesmo sem overflow). Remove no embed. */ html:has(.ag-embed) { scrollbar-gutter: auto; } .ag-embed .ag-main { min-height: 0; max-width: none; margin: auto; padding: 0; width: 100%; box-sizing: border-box; } /* Altura FIXA e IGUAL nos dois cards em TODOS os passos (agenda/dados/pronto): o verde nunca muda de tamanho e o par fica sempre centralizado no MESMO lugar. Quando um passo é mais alto (formulário), o conteúdo rola DENTRO do card branco — o frame não cresce, nada "sobe". */ .ag-embed .ag-shell { align-items: stretch; } .ag-embed .ag-aside { height: 720px; } /* wizard vira flex-column de altura FIXA: o stepper fica fixo no topo e o painel ativo ocupa o resto. Painel curto (agenda/pronto) centraliza; painel alto (formulário) rola POR DENTRO. Assim o frame nunca muda de tamanho entre os passos e nada "sobe" ao trocar de passo. */ .ag-embed .ag-wizard { height: 720px; display: flex; flex-direction: column; overflow: hidden; } .ag-embed .ag-steps { flex: 0 0 auto; } /* margin/padding -inline: o recorte do scroll vai até a BORDA do wizard, deixando ~24px de folga pra sombra do "Próximo"/botões e o tilt dos dias NÃO serem cortados (o "cortezinho"). O conteúdo não desloca (a margem negativa cancela o padding). */ .ag-embed .ag-panel.is-active { flex: 1 1 auto; min-height: 0; overflow: hidden auto; margin-inline: -24px; padding-inline: 24px; } .ag-embed .ag-panel.ag-success.is-active { justify-content: center; } /* confirmação (curta) no centro */ /* barra de rolagem interna discreta no painel (só no modal), sem as setinhas */ .ag-embed .ag-panel.is-active { scrollbar-width: thin; scrollbar-color: #cfd6df transparent; } .ag-embed .ag-panel.is-active::-webkit-scrollbar { width: 9px; } .ag-embed .ag-panel.is-active::-webkit-scrollbar-track { background: transparent; margin: 4px 0; } .ag-embed .ag-panel.is-active::-webkit-scrollbar-thumb { background: #cfd6df; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .ag-embed .ag-panel.is-active::-webkit-scrollbar-thumb:hover { background: #aeb6c2; background-clip: padding-box; } .ag-embed .ag-panel.is-active::-webkit-scrollbar-button { display: none; width: 0; height: 0; } /* align-items:start → cada quadro tem a própria altura; o verde é FIXO e não segue o branco. minmax(0,fr) → as colunas NÃO reflowam pela largura do conteúdo (evita a "piscada" do texto verde quando os horários abrem e o grid recalcularia as larguras). */ .ag-shell { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 22px; align-items: start; } /* só pra leitor de tela (anúncio de progresso do wizard) */ .ag-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ─────────────────────────── ASIDE (verde) ─────────────────────────── */ .ag-aside { background: #1bbf5d; color: #fff; border-radius: 22px; padding: 34px 30px; display: flex; flex-direction: column; height: 630px; /* FIXO — não muda em nenhuma etapa (agenda/dados/pronto). Alinha com .ag-wizard. */ } .ag-aside-eyebrow { align-self: flex-start; background: rgba(255,255,255,.18); color: #fff; border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .ag-aside-title { font-size: clamp(24px, 3vw, 32px); font-weight: 600; line-height: 1.15; margin: 16px 0 10px; } .ag-aside-sub { font-size: 15px; line-height: 1.5; color: #fff; margin: 0 0 22px; } .ag-aside-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 11px; } .ag-aside-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; } .ag-tick { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.2); flex-shrink: 0; position: relative; } .ag-tick::after { content: ''; position: absolute; left: 7px; top: 4px; width: 4px; height: 8px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg); } /* card do comercial (páginas pessoais) */ .ag-rep { display: flex; flex-direction: column; align-items: center; text-align: center; } .ag-rep-avatar { width: 104px; height: 104px; border-radius: 50%; background: rgba(255,255,255,.16); border: 3px solid rgba(255,255,255,.5); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .ag-rep-avatar img:not(.ag-rep-mark) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; } .ag-rep-mark { width: 46px; height: auto; opacity: .9; filter: brightness(0) invert(1); } .ag-rep-role { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); } .ag-rep-name { font-size: 26px; font-weight: 600; margin: 4px 0 12px; } .ag-rep-line { font-size: 15px; line-height: 1.5; color: #fff; margin: 0; } .ag-aside-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 22px; } .ag-aside-pill { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: #1e2026; border-radius: 999px; padding: 8px 13px; font-size: 12.5px; font-weight: 500; } .ag-aside-pill .ico { width: 14px; height: 14px; background-color: #16a34a; display: inline-block; flex-shrink: 0; } .ag-aside-trust { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); } .ag-aside-trust img { height: 24px; width: auto; filter: brightness(0) invert(1); opacity: .95; } .ag-aside-trust span { font-size: 12.5px; color: rgba(255,255,255,.85); } /* ─────────────────────────── WIZARD ─────────────────────────── */ .ag-wizard { background: #fff; border: 1px solid #e7ebf1; border-radius: 22px; padding: 30px 32px; min-height: 630px; overflow-x: clip; transition: background .5s, border-color .5s; } /* stepper */ .ag-steps { list-style: none; display: flex; align-items: center; padding: 0; margin: 0 0 26px; } .ag-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #9aa1ab; } .ag-step:not(:first-child)::before { content: ''; width: 28px; height: 2px; background: #e1e5ec; border-radius: 2px; margin: 0 10px; transition: background .3s; } /* só uma bolinha — sem números; anima (cresce + ring) ao virar ativa, sem piscar */ .ag-step-dot { width: 10px; height: 10px; border-radius: 50%; background: #d3d8e0; transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s, box-shadow .3s; } .ag-step.is-active { color: #1e2026; } .ag-step.is-active .ag-step-dot { background: #1bbf5d; transform: scale(1.35); box-shadow: 0 0 0 4px rgba(27,191,93,.18); } .ag-step.is-done { color: #16a34a; } .ag-step.is-done::before { background: #1bbf5d; } .ag-step.is-done .ag-step-dot { background: #1bbf5d; } /* painéis + transição */ .ag-panel { display: none; } .ag-panel.is-active { display: block; animation: agPanelIn .5s cubic-bezier(.16,1,.3,1) both; } @keyframes agPanelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .ag-panel-title { font-size: 22px; font-weight: 600; margin: 0 0 6px; color: #1e2026; } .ag-panel-sub { font-size: 14.5px; color: #5b606b; margin: 0 0 20px; line-height: 1.5; } /* passo 1 — calendário */ .ag-cal { height: 430px; } /* altura FIXA da agenda (a contenção horizontal fica no .ag-wizard, longe dos cards, pra o tilt não ser cortado) */ .ag-cal-boot { display: flex; align-items: center; justify-content: center; gap: 10px; color: #9aa1ab; font-size: 14px; padding: 44px 0; } .ag-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #e1e5ec; border-top-color: #1bbf5d; animation: agSpin .7s linear infinite; } @keyframes agSpin { to { transform: rotate(360deg); } } .ag-noslots { text-align: center; padding: 24px 10px; } .ag-noslots p { color: #5b606b; font-size: 15px; line-height: 1.5; margin: 0 0 18px; } /* Calendário GRANDE quando sozinho; ao escolher o dia ele é EMPURRADO pro lado (flex-basis anima suave) e a coluna de horários abre à direita. flex-wrap:nowrap → nunca cai embaixo. Os horários rolam por dentro (scroll), sem crescer a página. */ .ag-cal .evo-cal { flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 22px; height: 100%; } .ag-cal .evo-cal-box { flex: 0 1 480px; min-width: 0; transition: flex-basis .6s cubic-bezier(.22,1,.36,1); } .ag-cal .evo-cal.is-split .evo-cal-box { flex: 0 0 300px; } .ag-cal .evo-cal-grid { gap: 6px; } /* cada dia é um CARD (borda + número): o tilt 3D anima o card, não só o número. Célula quadrada (não achata ao encolher). */ .ag-cal .evo-cal-cell { aspect-ratio: 1 / 1; height: auto; font-size: 15px; border: 1.5px solid #edf0f4; background: #fff; border-radius: 12px; transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .18s, background .18s, color .18s; } .ag-cal .evo-cal-cell.is-empty { border: 0; background: none; } /* surgimento em ONDA diagonal com leve 3D (no lugar do "carregando") */ @keyframes agDayIn { from { opacity: 0; transform: perspective(600px) rotateX(-26deg) translateY(12px) scale(.86); } to { opacity: 1; transform: perspective(600px) rotateX(0) translateY(0) scale(1); } } .ag-cal .evo-cal-cell.ag-in { animation: agDayIn .5s cubic-bezier(.16,1,.3,1) both; } .ag-cal .evo-cal-cell:hover:not(.is-sel):not(:disabled) { border-color: #1bbf5d; background: #fff; color: #16a34a; box-shadow: none; } .ag-cal .evo-cal-cell.is-today { outline: none; border-color: #1bbf5d; color: #16a34a; } .ag-cal .evo-cal-cell.is-sel { background: #1bbf5d; border-color: #1bbf5d; color: #fff; } /* dias sem vaga: card CINZA, cursor normal (sem símbolo de proibido) e sem clique */ .ag-cal .evo-cal-cell.is-off { border-color: #eef1f6; background: #fafbfc; color: #c3c9d2; cursor: default; } .ag-cal .evo-cal-times { flex: 0 0 auto; min-width: 0; max-width: 0; overflow: hidden; transition: max-width .6s cubic-bezier(.22,1,.36,1); } .ag-cal .evo-cal.is-split .evo-cal-times { max-width: 264px; display: flex; flex-direction: column; } /* fuso: só aparece embaixo do calendário quando a lista de horários abre */ .ag-cal .evo-cal-tz { display: none; } .ag-cal .evo-cal.is-split .evo-cal-tz { display: block; margin-top: 12px; text-align: center; } /* coluna de horários: lista vertical (sem manhã/tarde), largura fixa (a coluna clipa na animação) */ .ag-times-head { width: 240px; font-size: 14px; font-weight: 600; color: #1e2026; min-height: 20px; margin-bottom: 10px; } .ag-times-list { width: 240px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overflow-x: clip; padding: 8px 12px; scrollbar-width: thin; scrollbar-color: #cfd6df transparent; } /* barra de rolagem custom: um pouco mais grossa, arredondada, SEM as setinhas de cima/baixo */ .ag-times-list::-webkit-scrollbar { width: 9px; } .ag-times-list::-webkit-scrollbar-track { background: transparent; margin: 2px 0; } .ag-times-list::-webkit-scrollbar-thumb { background: #cfd6df; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .ag-times-list::-webkit-scrollbar-thumb:hover { background: #aeb6c2; background-clip: padding-box; } .ag-times-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; } /* mesma barra custom no painel do dropdown verde (só nesta página; agendar.css não carrega no modal) */ .evo-sel-panel { scrollbar-width: thin; scrollbar-color: #cfd6df transparent; } .evo-sel-panel::-webkit-scrollbar { width: 9px; } .evo-sel-panel::-webkit-scrollbar-track { background: transparent; margin: 6px 0; } .evo-sel-panel::-webkit-scrollbar-thumb { background: #cfd6df; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .evo-sel-panel::-webkit-scrollbar-thumb:hover { background: #aeb6c2; background-clip: padding-box; } .evo-sel-panel::-webkit-scrollbar-button { display: none; width: 0; height: 0; } /* telas estreitas: empilha (calendário em cima, horários embaixo) */ @media (max-width: 760px) { .ag-cal { height: auto; } .ag-cal .evo-cal { flex-wrap: wrap; height: auto; align-items: flex-start; } .ag-cal .evo-cal-box, .ag-cal .evo-cal.is-split .evo-cal-box { flex: 1 1 100%; } /* coluna de horários ocupa a largura toda (antes ficava com largura de conteúdo, estreita) */ .ag-cal .evo-cal-times, .ag-cal .evo-cal.is-split .evo-cal-times { flex: 1 1 100%; width: 100%; max-width: 100%; } .ag-times-head, .ag-times-list { width: 100%; } .ag-times-list { flex: none; max-height: 360px; } } .ag-time-row { display: flex; gap: 8px; animation: agCascade .4s cubic-bezier(.16,1,.3,1) both; } @keyframes agCascade { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } } .ag-time { flex: 1; padding: 13px 12px; border: 1.5px solid #dfe4ea; border-radius: 12px; background: #fff; color: #16a34a; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-align: center; transition: border-color .18s, background .18s, color .18s, flex-basis .28s, transform .15s ease; } .ag-time:hover { border-color: #1bbf5d; background: #f6faf7; } /* ao selecionar: o horário recolhe e esmaece, dando o palco pro "Próximo" que desliza */ .ag-time-row.is-sel .ag-time { background: #eef2f7; border-color: #cfd6df; color: #5b606b; } .ag-time-next { flex: 0 0 auto; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; border: 0; border-radius: 12px; background: #1bbf5d; color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 0; box-shadow: 0 8px 20px rgba(27,191,93,.28); transition: max-width .6s cubic-bezier(.22,1,.36,1), opacity .5s .1s ease, padding .6s cubic-bezier(.22,1,.36,1), background .18s, transform .15s ease; } .ag-time-next svg { width: 18px; height: 18px; } .ag-time-next:hover { background: #16a34a; } .ag-time-row.is-sel .ag-time-next { max-width: 160px; opacity: 1; padding: 13px 18px; } /* passo 2 — formulário */ .ag-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: #6b7280; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 0; margin: 0 0 16px; } .ag-back svg { width: 17px; height: 17px; } .ag-back:hover { color: #16a34a; } .ag-slot-chip { display: inline-flex; align-items: center; gap: 9px; background: #e9fbf1; color: #16a34a; border: 1px solid #c7efd7; border-radius: 12px; padding: 9px 14px; font-size: 13.5px; font-weight: 600; margin: 0 0 18px; } .ag-slot-chip[hidden] { display: none; } /* .ag-slot-chip{display:inline-flex} venceria o [hidden] do UA */ .ag-slot-chip svg { width: 17px; height: 17px; flex-shrink: 0; } .ag-slot-change { background: none; border: 0; color: #16a34a; text-decoration: underline; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; margin-left: 2px; } .ag-grid { margin-bottom: 6px; } .ag-field-full { grid-column: 1 / -1; } /* inputs: cantos suaves + realce por borda no hover (controle fixo, sem drop shadow) */ .ag-wizard .evo-form-field input { border-radius: 12px; padding: 12px 14px; border: 1px solid #e3e6eb; font-size: 14px; background: #fff; font-family: inherit; color: #1e2026; transition: border-color .18s, box-shadow .18s; } .ag-wizard .evo-form-field input:hover { border-color: #1bbf5d; box-shadow: 0 0 0 3px rgba(27,191,93,.10); } .ag-wizard .evo-form-field input:focus { outline: 0; border-color: #1bbf5d; box-shadow: 0 0 0 3px rgba(27,191,93,.15); } .ag-wizard .evo-form-field input.is-invalid { border-color: #ea3934; box-shadow: 0 0 0 3px rgba(234,57,52,.12); } /* selects viram o dropdown verde custom (.evo-sel-* do header.css); alinha o botão com os inputs */ .ag-wizard .evo-sel-btn { padding: 12px 14px; font-size: 14px; border-radius: 12px; } /* dores */ .ag-dores { border: 0; padding: 0; margin: 22px 0 8px; min-inline-size: 0; } .ag-dores legend { font-size: 14px; font-weight: 600; color: #1e2026; padding: 0; margin: 0 0 12px; } .ag-dores legend span { font-weight: 400; color: #9aa1ab; font-size: 13px; } .ag-dores-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ag-dor { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #e3e6eb; border-radius: 12px; cursor: pointer; background: #fff; transition: border-color .18s, background .18s; } .ag-dor:hover { border-color: #1bbf5d; background: #f6faf7; } .ag-dor input { position: absolute; opacity: 0; width: 0; height: 0; } .ag-dor-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #d3d8e0; flex-shrink: 0; position: relative; transition: all .18s; } .ag-dor-text { font-size: 13.5px; color: #3a3f49; font-weight: 500; line-height: 1.3; } .ag-dor.is-on { border-color: #1bbf5d; background: #e9fbf1; } .ag-dor.is-on .ag-dor-check { background: #1bbf5d; border-color: #1bbf5d; } .ag-dor.is-on .ag-dor-check::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg); } .ag-dor.is-on .ag-dor-text { color: #16a34a; } .ag-dor input:focus-visible + .ag-dor-check { box-shadow: 0 0 0 3px rgba(27,191,93,.25); } .ag-err { color: #ea3934; font-size: 13.5px; margin: 4px 0 12px; } /* botões */ .ag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; border-radius: 999px; padding: 13px 26px; text-decoration: none; transition: transform .18s, box-shadow .18s, background .18s; } .ag-btn svg { width: 19px; height: 19px; } .ag-btn-primary { background: #1bbf5d; color: #fff; box-shadow: 0 8px 20px rgba(27,191,93,.28); } .ag-btn-primary:hover { background: #16a34a; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(27,191,93,.36); } .ag-btn-primary:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; } .ag-btn-ghost { background: #fff; color: #16a34a; border: 1.6px solid #1bbf5d; } .ag-btn-ghost:hover { background: #f0fbf4; transform: translateY(-2px); } .ag-btn-block { width: 100%; } /* estado "enviando": spinner branco no lugar da seta. O botão TRAVA (não clica de novo), mas fica cheio e verde — parece que está trabalhando, não desabilitado/apagado. */ .ag-btn-spin { display: none; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; animation: agSpin .7s linear infinite; } .ag-btn.is-loading { cursor: progress; } .ag-btn.is-loading .ag-btn-spin { display: inline-block; } .ag-btn.is-loading .ag-btn-arrow { display: none; } .ag-btn-primary.is-loading:disabled { opacity: 1; background: #16a34a; box-shadow: 0 8px 20px rgba(27,191,93,.28); transform: none; } .ag-confirm { margin-top: 10px; } .ag-form-foot { text-align: center; font-size: 12.5px; color: #9aa1ab; margin: 12px 0 0; } /* passo 3 — sucesso (só vira flex QUANDO ativo; senão o .ag-panel{display:none} tem que valer) */ .ag-success { flex-direction: column; align-items: center; text-align: center; padding: 10px 6px 4px; } .ag-panel.ag-success.is-active { display: flex; } .ag-check { width: 92px; height: 92px; margin: 4px auto 22px; } .ag-check svg { width: 100%; height: 100%; } .ag-check-circle { stroke: #1bbf5d; stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: agDraw .6s cubic-bezier(.16,1,.3,1) forwards; } .ag-check-mark { stroke: #1bbf5d; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: agDraw .4s .5s cubic-bezier(.16,1,.3,1) forwards; } @keyframes agDraw { to { stroke-dashoffset: 0; } } .ag-success-title { font-size: 26px; font-weight: 600; color: #1e2026; margin: 0 0 8px; } .ag-success-sub { font-size: 15px; color: #5b606b; line-height: 1.5; margin: 0 auto 22px; max-width: 460px; } /* card do especialista que vai atender (só na /agendar pública). order:-1 → vai pro topo (no lugar do check); a foto é a estrela e o check vira um "verificado" animado. */ .ag-specialist { order: -1; display: inline-flex; align-items: center; gap: 14px; background: #f4fbf7; border: 1px solid #e3f3ea; border-radius: 999px; padding: 10px 26px 10px 10px; margin: 0 0 22px; text-align: left; } .ag-specialist[hidden] { display: none; } .ag-specialist-avatar { width: 72px; height: 72px; border-radius: 50%; background: #e9fbf1; flex-shrink: 0; position: relative; } .ag-specialist-avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; } .ag-specialist-badge { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: #1bbf5d; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; transform: scale(0); } .ag-specialist-badge svg { width: 15px; height: 15px; } .ag-specialist-badge path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; } .ag-specialist.is-in .ag-specialist-badge { animation: agBadgePop .45s .12s cubic-bezier(.34,1.56,.64,1) forwards; } .ag-specialist.is-in .ag-specialist-badge path { animation: agDrawMark .4s .45s ease forwards; } @keyframes agBadgePop { from { transform: scale(0); } to { transform: scale(1); } } @keyframes agDrawMark { to { stroke-dashoffset: 0; } } .ag-specialist-txt { display: flex; flex-direction: column; line-height: 1.3; } .ag-specialist-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #16a34a; } .ag-specialist-name { font-size: 17px; font-weight: 600; color: #1e2026; } .ag-explore { background: #f4fbf7; border: 1px solid #e3f3ea; border-radius: 18px; padding: 26px 24px; transition: background .5s, border-color .5s; } .ag-explore h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; color: #1e2026; } .ag-explore p { font-size: 14px; color: #5b606b; margin: 0 0 18px; } .ag-count { font-size: 13px; color: #9aa1ab; margin: 16px 0 0; } .ag-count b { color: #16a34a; } .ag-count-stop { background: none; border: 0; color: #16a34a; text-decoration: underline; cursor: pointer; font-family: inherit; font-size: 13px; } /* "a tela fica verde" ao confirmar */ .ag-wizard.ag-on-success { background: #e9fbf1; border-color: #c7efd7; } .ag-wizard.ag-on-success .ag-explore { background: #fff; border-color: #dfeee6; } /* ─────────────────────────── responsivo ─────────────────────────── */ @media (max-width: 900px) { .ag-shell { grid-template-columns: 1fr; } .ag-wizard { order: 1; min-height: 0; } /* calendário logo de cara no mobile */ .ag-aside { order: 2; position: static; height: auto; } } @media (max-width: 560px) { .ag-topbar { padding: 18px 18px 2px; } .ag-main { padding: 12px 16px 48px; } .ag-wizard { padding: 22px 18px; } .ag-aside { padding: 26px 22px; } .ag-dores-grid { grid-template-columns: 1fr; } .ag-field-full { grid-column: auto; } .ag-step-l { display: none; } .ag-step:not(:first-child)::before { width: 20px; margin: 0 7px; } } @media (prefers-reduced-motion: reduce) { .ag-panel.is-active, .ag-check-circle, .ag-check-mark, .ag-spin, .ag-time-row, .ag-specialist.is-in .ag-specialist-badge, .ag-specialist.is-in .ag-specialist-badge path { animation: none !important; } .ag-cal .evo-cal-box, .ag-cal .evo-cal-times, .ag-time, .ag-time-next { transition: none !important; } .ag-check-circle, .ag-check-mark { stroke-dashoffset: 0; } .ag-specialist-badge { transform: scale(1); } .ag-specialist-badge path { stroke-dashoffset: 0; } }