/* agendar.css — a página /agendar (agendar.php). Saiu do protótipo aprovado
   app/proto-agendamento (artifact Uf9VkAsNRuJPoPRDBd3ckr). Desde a construção
   (12/11) a fonte é esta página: o protótipo ficou como registro. */
/* Layout: o palco da demonstração (/contactme, parts/form-rvops.php, fluxo
   "demo", sem card): coluna de 680px centralizada sobre #262626, uma pergunta
   por tela, bolinhas e setas no rodapé (regras tf-*, copiadas do componente).
   Os campos seguem o desenho da Apple: rótulo dentro do campo que sobe ao
   preencher, uma coluna, 56px de altura, erro embaixo de cada campo e botão
   largo. Um tema só, escuro, como a página de demonstração. */

/* Fundo: o grafite do site com o laranja subindo pelas LATERAIS, de baixo
   para cima (forte nos cantos de baixo, some em direção ao topo), um brilho
   baixo no centro e grão fino para o degradê não fazer faixas. Ocupa a tela
   inteira, até embaixo. */
.dg-section{
  position:relative;isolation:isolate;
  min-height:100vh;min-height:100dvh;
  background:
    radial-gradient(40% 95% at 0% 100%, rgba(242,106,43,.46) 0%, rgba(200,88,37,.22) 38%, rgba(28,27,29,0) 76%),
    radial-gradient(40% 95% at 100% 100%, rgba(242,106,43,.46) 0%, rgba(200,88,37,.22) 38%, rgba(28,27,29,0) 76%),
    radial-gradient(70% 34% at 50% 108%, rgba(242,106,43,.18) 0%, rgba(28,27,29,0) 72%),
    linear-gradient(180deg,#1c1b1d 0%,#211f21 45%,#29221f 100%);
  padding-block:56px 40px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.dg-section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── O que acontece nesta reunião: acordeão discreto, só na 1ª etapa ── */
.ag-sobre{max-width:620px;margin:8px auto 0;text-align:center}
.ag-sobre[hidden]{display:none}
.ag-sobre-h{margin:0;font-size:inherit;font-weight:inherit}
.ag-sobre-btn{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:0;border-radius:8px;
  background:none;color:#a8a8a8;font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px;font-weight:500;cursor:pointer;transition:color .15s;
}
.ag-sobre-btn:hover{color:#e6e6e6}
.ag-sobre-btn:focus-visible{outline:2px solid #ff7005;outline-offset:2px}
.ag-sobre-btn svg{width:14px;height:14px;flex:none;transition:transform .25s cubic-bezier(.2,.7,.1,1)}
.ag-sobre-btn[aria-expanded="true"]{color:#e6e6e6}
.ag-sobre-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ag-sobre-corpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.7,.1,1)}
.ag-sobre-corpo.is-aberto{grid-template-rows:1fr}
.ag-sobre-dentro{overflow:hidden;min-height:0}
.ag-sobre-txt{margin:6px 0 0;font-size:15px;line-height:1.6;color:#a8a8a8;text-wrap:pretty}
.ag-sobre-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:16px 0 4px;padding:0;list-style:none;font-size:14px;color:#9a9a9a}
.ag-sobre-meta li{display:inline-flex;align-items:center;gap:7px}
.ag-sobre-meta svg{width:16px;height:16px;flex:none;color:#f0a46b}
@media (prefers-reduced-motion:reduce){.ag-sobre-corpo,.ag-sobre-btn svg{transition:none}}

/* ── Rodapé de prova: os logos passando, como o carrossel da home ── */
.ag-prova{max-width:960px;margin:64px auto 0;text-align:center}
/* título discreto, o mesmo da home ("title f-16 text-white op-5") */
.ag-prova-tit{margin:0 0 22px;font-size:16px;line-height:24px;font-weight:500;color:#fff;opacity:.5}
.ag-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.ag-marquee-trilho{display:flex;width:max-content;animation:agMarquee 100s linear infinite}
.ag-marquee:hover .ag-marquee-trilho{animation-play-state:paused}
.ag-logos{display:flex;align-items:center;gap:40px;padding-right:40px;flex:none}
.ag-logos img{display:block;height:32px;width:auto;flex:none;opacity:.6;transition:opacity .2s}
.ag-logos img:hover{opacity:1}
@keyframes agMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:560px){
  .ag-prova{margin-top:52px}
  .ag-logos{gap:24px;padding-right:24px}
  .ag-logos img{height:26px}
  .ag-marquee-trilho{animation-duration:80s}
}
@media (prefers-reduced-motion:reduce){
  .ag-marquee{overflow-x:auto}
  .ag-marquee-trilho{animation:none}
}

#rvops-demo-root{
  /* ---- PALETA DO FORMULÁRIO DO SITE (parts/form-rvops.php) ---- */
  --rv-accent:#ff7005;
  --rv-accent-grad:linear-gradient(to right,#c85825,#f26a2b,#e69c49);
  --rv-accent-bg:rgba(255,112,5,.14);
  --rv-ring:rgba(255,112,5,.28);
  --rv-card-2:#333333;
  --rv-field:#303030;
  --rv-field-hover:#363636;
  --rv-text:#cecece;
  --rv-text-2:#f2f2f2;
  --rv-text-3:#9a9a9a;
  --rv-text-4:#5c5c5c;
  --rv-border:#3d3d3d;
  --rv-border-strong:#4d4d4d;
  --rv-error:#ff7878;
  --rv-ok:#3ecf8e;
  --rv-r-md:6px;
  --rv-r-campo:12px;
  --rv-font:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --rv-font-disp:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --rv-ease:cubic-bezier(.2,.7,.1,1);
  width:100%;max-width:680px;margin:0 auto;
  font-family:var(--rv-font);color:var(--rv-text);
  font-size:15px;line-height:1.5;box-sizing:border-box;
}
#rvops-demo-root *,#rvops-demo-root *::before,#rvops-demo-root *::after{box-sizing:border-box}

/* ── Cabeçalho ── */
#rvops-demo-root .rv-header{text-align:center;margin:0 0 24px}
#rvops-demo-root .rv-header h1{
  margin:0;font-family:var(--rv-font-disp);font-weight:500;font-size:30px;line-height:1.16;padding-top:.06em;
  text-wrap:balance;max-width:100%;display:inline-block;
  background:linear-gradient(to right,#484747,#939393,#e9e9e9,#fffbf4,#727272);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── Palco, bolinhas e setas (do componente) ── */
#rvops-demo-root .tf-card{position:relative;display:flex;flex-direction:column}
#rvops-demo-root .tf-foot{display:flex;align-items:center;justify-content:center;gap:16px;padding:4px 18px 14px}
#rvops-demo-root .tf-steps{display:flex;align-items:center}
#rvops-demo-root .tf-dot{width:11px;height:11px;border-radius:50%;border:2px solid #6a6a6a;background:transparent;transition:all .2s var(--rv-ease)}
#rvops-demo-root .tf-dot.done{background:var(--rv-accent);border-color:var(--rv-accent)}
#rvops-demo-root .tf-dot.active{border-color:var(--rv-accent);box-shadow:0 0 0 3px var(--rv-accent-bg)}
#rvops-demo-root .tf-line{width:22px;height:2px;background:#4d4d4d;margin:0 3px;transition:background .2s}
#rvops-demo-root .tf-line.done{background:var(--rv-accent)}
#rvops-demo-root .tf-nav{display:flex;gap:6px}
#rvops-demo-root .tf-navbtn{width:38px;height:32px;border:1px solid var(--rv-border-strong);background:var(--rv-card-2);border-radius:6px;color:var(--rv-text);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .12s}
#rvops-demo-root .tf-navbtn:hover:not(:disabled){border-color:var(--rv-accent);color:var(--rv-accent)}
#rvops-demo-root .tf-navbtn:disabled{opacity:.4;cursor:not-allowed}
#rvops-demo-root .tf-navbtn svg{width:14px;height:14px}

#rvops-demo-root .tf-body{position:relative;display:flex}
#rvops-demo-root .tf-step{display:none;width:100%;padding:26px 34px 22px;flex-direction:column}
#rvops-demo-root .tf-step.is-active{display:flex;animation:tfIn .38s var(--rv-ease)}
@keyframes tfIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes tfShake{10%,90%{transform:translateX(-1px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-4px)}}
#rvops-demo-root .tf-shake{animation:tfShake .4s}
#rvops-demo-root .tf-q{font-family:var(--rv-font-disp);font-size:22px;line-height:1.28;font-weight:400;letter-spacing:-.2px;color:#cfcfcf;margin:0 0 18px;text-wrap:balance;text-align:center}
#rvops-demo-root .tf-hint{font-size:14px;color:var(--rv-text-3);margin:-8px 0 20px;text-align:center}
#rvops-demo-root .tf-err{color:var(--rv-error);font-size:14px;margin:14px 0 0;display:none;text-align:center}
#rvops-demo-root .tf-step[data-role="ok"]{align-items:center;text-align:center}
#rvops-demo-root .tf-err.on{display:block}

/* ── 1. Tamanho do time: cards que piscam e avançam ── */
#rvops-demo-root .ag-times{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
#rvops-demo-root .ag-time{
  position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:96px;padding:14px 6px;border:1.5px solid var(--rv-border-strong);border-radius:12px;
  background:var(--rv-card-2);cursor:pointer;text-align:center;font-family:var(--rv-font);
  transition:border-color .15s,background .15s,transform .15s;
}
#rvops-demo-root .ag-time::after{content:"";position:absolute;inset:-1.5px;border-radius:inherit;background:var(--rv-accent-grad);opacity:0;z-index:-1}
#rvops-demo-root .ag-time:hover{border-color:#6a6a6a;background:#3a3a3a}
#rvops-demo-root .ag-time:active{transform:scale(.97)}
#rvops-demo-root .ag-time-n{font-family:var(--rv-font-disp);font-weight:600;font-size:21px;line-height:1.2;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
#rvops-demo-root .ag-time-u{font-size:13px;color:var(--rv-text-3)}
#rvops-demo-root .ag-time.is-sel{border-color:transparent}
#rvops-demo-root .ag-time.is-sel::after{opacity:1}
#rvops-demo-root .ag-time.is-sel .ag-time-u{color:#fff}
#rvops-demo-root .ag-time.is-pisca::after{animation:agPisca .42s linear}
@keyframes agPisca{0%{opacity:1}30%{opacity:.15}60%{opacity:1}100%{opacity:1}}

/* ── 2. Agenda ── */
#rvops-demo-root .tf-agenda{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;margin-top:4px}
#rvops-demo-root .tf-cal-nav{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
#rvops-demo-root .tf-cal-nav .tf-navbtn{width:32px;height:30px}
#rvops-demo-root .tf-mes{font-size:15px;font-weight:600;color:var(--rv-text-2)}
#rvops-demo-root .tf-mes::first-letter{text-transform:uppercase}
#rvops-demo-root .tf-sem,#rvops-demo-root .tf-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;text-align:center}
#rvops-demo-root .tf-sem{margin-bottom:5px}
#rvops-demo-root .tf-sem span{font-size:11px;font-weight:600;color:var(--rv-text-3);letter-spacing:.06em;padding:2px 0}
#rvops-demo-root .tf-dia{position:relative;display:flex;align-items:center;justify-content:center;height:40px;
  border:1.5px solid transparent;border-radius:var(--rv-r-md);background:transparent;
  font-family:var(--rv-font);font-size:14px;color:var(--rv-text-4);font-variant-numeric:tabular-nums}
#rvops-demo-root .tf-dia--livre{background:var(--rv-card-2);border-color:var(--rv-border-strong);color:var(--rv-text-2);font-weight:600;cursor:pointer;
  transition:border-color .12s,background .12s}
#rvops-demo-root .tf-dia--livre:hover{border-color:#6a6a6a;background:#3a3a3a}
#rvops-demo-root .tf-dia--livre.sel{border-color:var(--rv-accent);background:var(--rv-accent-bg);color:#fff}
#rvops-demo-root .tf-dia--hoje::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
#rvops-demo-root .tf-horas{display:flex;flex-direction:column;gap:10px;min-width:0}
#rvops-demo-root .tf-horas-dia{margin:0;font-size:15px;font-weight:600;color:var(--rv-text-2);min-height:23px}
#rvops-demo-root .tf-horas-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;align-content:start}
#rvops-demo-root .tf-hora{height:44px;border:1.5px solid var(--rv-border-strong);border-radius:var(--rv-r-md);background:var(--rv-card-2);
  color:var(--rv-text-2);font-family:var(--rv-font);font-size:15px;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:border-color .12s,background .12s}
#rvops-demo-root .tf-hora:hover{border-color:#6a6a6a;background:#3a3a3a}
#rvops-demo-root .tf-hora.sel{border-color:var(--rv-accent);background:var(--rv-accent-bg);color:#fff}
#rvops-demo-root .tf-vazio{margin:0;font-size:14px;color:var(--rv-text-3)}
#rvops-demo-root .tf-vazio a{color:var(--rv-accent)}

/* ── 3 e 4. Campos no desenho da Apple ── */
#rvops-demo-root .ap-coluna{display:flex;flex-direction:column;gap:12px;max-width:460px;width:100%;margin:0 auto}
#rvops-demo-root .ap-coluna .tf-q{margin:0 0 6px}
/* horário escolhido: uma linha discreta embaixo do título, sem fundo */
#rvops-demo-root .ap-resumo{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;
  margin:-14px 0 10px;text-align:center;
}
#rvops-demo-root .ap-resumo svg{width:16px;height:16px;flex:none;color:var(--rv-text-3)}
#rvops-demo-root .ap-resumo-txt{font-size:14px;line-height:1.35;color:var(--rv-text)}
#rvops-demo-root .ap-resumo .tf-link{font-size:14px;font-weight:500;color:var(--rv-text-3);text-decoration:underline;text-underline-offset:3px;padding:4px 2px}
#rvops-demo-root .ap-resumo .tf-link:hover{color:var(--rv-accent)}
#rvops-demo-root .tf-link{background:none;border:0;padding:6px 0;color:var(--rv-accent);font-family:var(--rv-font);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
#rvops-demo-root .tf-link:hover{text-decoration:underline}

#rvops-demo-root .ap-campo{position:relative}
#rvops-demo-root .ap-input{
  display:block;width:100%;height:56px;margin:0;padding:24px 16px 6px;
  border:1px solid var(--rv-border-strong);border-radius:var(--rv-r-campo);background:var(--rv-field);
  color:var(--rv-text-2);font-family:var(--rv-font);font-size:17px;line-height:1.2;
  transition:border-color .15s,box-shadow .15s,background .15s;-webkit-appearance:none;appearance:none;
}
#rvops-demo-root .ap-input:hover{background:var(--rv-field-hover)}
#rvops-demo-root .ap-input:focus{outline:none;border-color:var(--rv-accent);box-shadow:0 0 0 4px var(--rv-ring)}
#rvops-demo-root .ap-rotulo{
  position:absolute;left:17px;top:17px;right:40px;pointer-events:none;
  font-size:17px;line-height:1.3;color:var(--rv-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transform-origin:left top;transition:transform .15s var(--rv-ease),color .15s;
}
#rvops-demo-root .ap-input:focus + .ap-rotulo,
#rvops-demo-root input.ap-input:not(:placeholder-shown) + .ap-rotulo,
#rvops-demo-root select.ap-input:valid + .ap-rotulo{transform:translateY(-9px) scale(.72)}
#rvops-demo-root .ap-input:focus + .ap-rotulo{color:var(--rv-accent)}
#rvops-demo-root select.ap-input{cursor:pointer;padding-right:44px;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23bdbdbd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}
#rvops-demo-root select.ap-input:invalid{color:transparent}
#rvops-demo-root select.ap-input option{background:#2b2b2b;color:#f2f2f2}
#rvops-demo-root .ap-erro{display:none;align-items:center;gap:6px;margin:7px 2px 2px;font-size:13px;color:var(--rv-error)}
#rvops-demo-root .ap-erro svg{width:14px;height:14px;flex:none}
#rvops-demo-root .ap-campo.is-erro .ap-input{border-color:var(--rv-error)}
#rvops-demo-root .ap-campo.is-erro .ap-input:focus{box-shadow:0 0 0 4px rgba(255,120,120,.22)}
#rvops-demo-root .ap-campo.is-erro .ap-rotulo{color:var(--rv-error)}
#rvops-demo-root .ap-campo.is-erro .ap-erro{display:flex}
/* Preenchimento automático do navegador (12/11): o Chrome pinta o campo de
   azul-claro e o texto de preto por cima do background (regra do navegador com
   !important). A sombra interna repinta o fundo com a cor do campo, a cor do
   texto vem do -webkit-text-fill-color e o anel do foco vai na mesma sombra.
   Só em input: no select, a sombra cobriria a seta. Uma regra por pseudo-classe:
   numa lista, um navegador que não conhece uma delas descarta a regra inteira. */
#rvops-demo-root input.ap-input:-webkit-autofill{
  -webkit-text-fill-color:var(--rv-text-2);caret-color:var(--rv-text-2);
  -webkit-box-shadow:0 0 0 1000px var(--rv-field) inset;box-shadow:0 0 0 1000px var(--rv-field) inset;
  transition:background-color 600000s 0s,border-color .15s,box-shadow .15s}
#rvops-demo-root input.ap-input:-webkit-autofill:hover{
  -webkit-box-shadow:0 0 0 1000px var(--rv-field-hover) inset;box-shadow:0 0 0 1000px var(--rv-field-hover) inset}
#rvops-demo-root input.ap-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--rv-field) inset,0 0 0 4px var(--rv-ring);box-shadow:0 0 0 1000px var(--rv-field) inset,0 0 0 4px var(--rv-ring)}
#rvops-demo-root .ap-campo.is-erro input.ap-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--rv-field) inset,0 0 0 4px rgba(255,120,120,.22);box-shadow:0 0 0 1000px var(--rv-field) inset,0 0 0 4px rgba(255,120,120,.22)}
#rvops-demo-root input.ap-input:autofill{
  -webkit-text-fill-color:var(--rv-text-2);caret-color:var(--rv-text-2);
  box-shadow:0 0 0 1000px var(--rv-field) inset;filter:none}
#rvops-demo-root input.ap-input:autofill:focus{box-shadow:0 0 0 1000px var(--rv-field) inset,0 0 0 4px var(--rv-ring)}
#rvops-demo-root .tf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;overflow:hidden}

#rvops-demo-root .ap-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin-top:12px;
  border:0;border-radius:var(--rv-r-campo);background:var(--rv-accent-grad);color:#fff;
  font-family:var(--rv-font);font-size:17px;font-weight:600;cursor:pointer;
  transition:box-shadow .12s,transform .12s,filter .12s;
}
#rvops-demo-root .ap-btn:hover:not(:disabled){box-shadow:0 7px 22px rgba(255,112,5,.32);filter:brightness(1.05)}
#rvops-demo-root .ap-btn:active:not(:disabled){transform:scale(.99)}
#rvops-demo-root .ap-btn:disabled{opacity:.7;cursor:progress}
#rvops-demo-root .ap-roda{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:apGira .7s linear infinite;display:none}
#rvops-demo-root .ap-btn.is-enviando .ap-roda{display:block}
@keyframes apGira{to{transform:rotate(360deg)}}
#rvops-demo-root .ap-legal{margin:4px 2px 0;font-size:12px;line-height:1.5;color:var(--rv-text-3);text-align:center}
#rvops-demo-root .ap-legal a{color:var(--rv-text)}

/* ── Confirmado ── */
#rvops-demo-root .ok-coluna{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:460px;width:100%;margin:0 auto}
#rvops-demo-root .tf-ok-icone{width:80px;height:80px;border-radius:50%;background:rgba(62,207,142,.14);color:var(--rv-ok);
  display:flex;align-items:center;justify-content:center;margin:0 0 20px}
#rvops-demo-root .tf-ok-icone svg{width:40px;height:40px}
#rvops-demo-root .ok-coluna .tf-q{margin:0 0 8px;font-size:26px}
#rvops-demo-root .tf-ok-quando{margin:0 0 6px;font-size:17px;font-weight:600;color:var(--rv-text-2)}
#rvops-demo-root .tf-ok-linha{margin:0;color:var(--rv-text)}
#rvops-demo-root .tf-ok-linha strong{color:var(--rv-text-2);overflow-wrap:anywhere}

/* adicionar à agenda */
#rvops-demo-root .ok-agenda{width:100%;margin-top:28px}
#rvops-demo-root .ok-rot{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--rv-text-3)}
#rvops-demo-root .ok-agenda-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#rvops-demo-root .ok-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 14px;
  border:1px solid var(--rv-border-strong);border-radius:var(--rv-r-campo);background:var(--rv-field);
  color:var(--rv-text-2);font-family:var(--rv-font);font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:border-color .12s,background .12s;white-space:nowrap;
}
#rvops-demo-root .ok-btn:hover{border-color:#6a6a6a;background:var(--rv-field-hover)}
#rvops-demo-root .ok-btn svg{width:18px;height:18px;flex:none;color:var(--rv-text-3)}

/* convidar mais pessoas */
#rvops-demo-root .ok-convite{width:100%;margin-top:32px;padding-top:28px;border-top:1px solid var(--rv-border)}
#rvops-demo-root .ok-h3{margin:0 0 6px;font-family:var(--rv-font-disp);font-weight:500;font-size:18px;color:#fff}
#rvops-demo-root .ok-apoio{margin:0 0 16px;font-size:14px;color:var(--rv-text-3);text-wrap:balance}
#rvops-demo-root .ok-link{display:flex;gap:8px}
#rvops-demo-root .ok-link-url{
  flex:1;min-width:0;height:48px;padding:0 14px;border:1px solid var(--rv-border-strong);border-radius:var(--rv-r-campo);
  background:var(--rv-field);color:var(--rv-text);font-family:var(--rv-font);font-size:14px;text-overflow:ellipsis;
}
#rvops-demo-root .ok-link-url:focus{outline:none;border-color:var(--rv-accent);box-shadow:0 0 0 4px var(--rv-ring)}
#rvops-demo-root .ok-copiar{
  flex:none;height:48px;padding:0 18px;border:0;border-radius:var(--rv-r-campo);background:var(--rv-accent-grad);color:#fff;
  font-family:var(--rv-font);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;min-width:122px;
}
#rvops-demo-root .ok-copiar:hover{filter:brightness(1.05)}
#rvops-demo-root .ok-copiar.is-ok{background:var(--rv-ok)}
#rvops-demo-root .ok-btn--wpp{width:100%;margin-top:10px}
#rvops-demo-root .ok-proto{display:inline-block;margin-top:20px;font-size:13px;color:var(--rv-text-3)}

/* página do convidado */
#rvops-demo-root .cv-de{margin:-12px 0 24px;text-align:center;font-size:16px;color:var(--rv-text)}
#rvops-demo-root .cv-de b{color:var(--rv-text-2);font-weight:600}
#rvops-demo-root .cv-reuniao{border:1px solid var(--rv-border);border-radius:var(--rv-r-campo);padding:16px 18px;margin:0 0 20px;display:flex;flex-direction:column;gap:6px}
#rvops-demo-root .cv-reuniao-tit{margin:0 0 2px;font-weight:600;color:var(--rv-text-2);font-size:15px}
#rvops-demo-root .cv-linha{margin:0;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--rv-text)}
#rvops-demo-root .cv-linha svg{width:16px;height:16px;flex:none;color:var(--rv-text-3)}
#rvops-demo-root .cv-form .tf-q{margin:0 0 6px}
#rvops-demo-root .cv-ok{padding:26px 0 22px}
#rvops-demo-root.is-fim .tf-foot{visibility:hidden}
/* Pergunta 1: sem bolinhas nem setas (só a partir da agenda) e com mais respiro
   em cima e embaixo dos cards. */
#rvops-demo-root.na-primeira .tf-foot{display:none}
/* Etapa do investimento (times pequenos): sim ou não, centralizado. */
#rvops-demo-root .tf-step[data-role="preco"]{padding-top:36px;padding-bottom:40px}
#rvops-demo-root .tf-step[data-role="preco"] .tf-q{max-width:520px;margin-left:auto;margin-right:auto}
#rvops-demo-root .tf-step[data-role="preco"] .tf-hint{margin-bottom:26px}
#rvops-demo-root .ag-preco{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:340px;width:100%;margin:0 auto}
#rvops-demo-root .ag-preco .ap-btn{margin-top:0}
#rvops-demo-root .ag-preco-nao{min-height:44px;padding:10px 16px;color:var(--rv-text-3);font-weight:500}
#rvops-demo-root .ag-preco-nao:hover{color:var(--rv-text-2);text-decoration:none}
#rvops-demo-root .ag-preco-msg{max-width:440px;margin:0 auto;text-align:center;color:var(--rv-text)}
#rvops-demo-root .ag-preco-msg p{margin:0 0 10px}
#rvops-demo-root .ag-preco-msg a{color:var(--rv-accent);font-weight:600}
#rvops-demo-root .ag-preco-msg .tf-link{font-weight:600}
#rvops-demo-root .tf-step[data-role="time"]{padding-top:36px;padding-bottom:48px}
#rvops-demo-root .tf-step[data-role="time"] .tf-hint{margin-bottom:28px}
@media (max-width:560px){
  #rvops-demo-root .tf-step[data-role="time"]{padding-top:24px;padding-bottom:36px}
  #rvops-demo-root .tf-step[data-role="time"] .tf-hint{margin-bottom:22px}
}


#rvops-demo-root [hidden]{display:none!important}
#rvops-demo-root :focus-visible{outline:2px solid var(--rv-accent);outline-offset:2px}
#rvops-demo-root .ap-input:focus-visible{outline:none}

/* Aviso do modo simulado (RVOPS_AGENDAR_MODO diferente de real): só no teste. */
.ag-teste{max-width:680px;margin:48px auto 0;text-align:center;font-size:12px;line-height:1.5;color:#a89585}
.ag-teste strong{color:#e6c9b0;font-weight:600}
/* o CSS do site dá altura de linha grande aos títulos */
.ag-sobre-h,.ag-prova-tit{line-height:normal}
/* no computador o cabeçalho do site fica por cima do topo da seção */
@media (min-width:1200px){.dg-section{padding-top:112px}}

@media (max-width:640px){
  #rvops-demo-root .ag-times{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .dg-section{padding-block:40px 32px}
  #rvops-demo-root .rv-header{margin-bottom:24px}
  #rvops-demo-root .rv-header h1{font-size:27px}
  #rvops-demo-root .tf-step{padding:20px 0 16px}
  #rvops-demo-root .tf-foot{padding:4px 0 14px}
  #rvops-demo-root .tf-agenda{grid-template-columns:minmax(0,1fr);gap:22px}
  #rvops-demo-root .ap-coluna{max-width:none}
  /* toque: alvos de 44px e nada abaixo de 16px em campo (o iPhone dá zoom) */
  #rvops-demo-root .tf-foot .tf-navbtn{width:44px;height:44px}
  #rvops-demo-root .tf-cal-nav .tf-navbtn{width:44px;height:40px}
  #rvops-demo-root .ap-resumo .tf-link{padding:10px 8px}
  #rvops-demo-root .tf-dia{height:44px}
  #rvops-demo-root .ok-link-url{font-size:16px}
}
@media (max-width:340px){
  #rvops-demo-root .ag-times{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  #rvops-demo-root .tf-step.is-active,#rvops-demo-root .tf-shake,#rvops-demo-root .ag-time.is-pisca::after{animation:none}
  #rvops-demo-root .ap-rotulo,#rvops-demo-root .ag-time{transition:none}
}