/* form.css — página de agendamento */

/* tokens que só existem aqui: estado de erro e campo */
:root{
  --erro:#B3261E;
  --erro-bg:rgba(179,38,30,.08);
  --campo-bg:#FFFFFF;
}
[data-theme="dark"]{
  --erro:#F2777A;
  --erro-bg:rgba(242,119,122,.10);
  --campo-bg:rgba(255,255,255,.04);
}

.agendar{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(32px,5vw,88px);
  align-items:start;
  padding-top:clamp(44px,6vw,84px);
  padding-bottom:clamp(56px,8vw,110px);
}

/* ---------- coluna da esquerda ---------- */
.eyebrow--esq{justify-content:flex-start}
.eyebrow--esq::before{display:none}

.agendar__titulo{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.04;letter-spacing:-.035em;
  margin:22px 0 18px;
}
.agendar__titulo em{font-style:normal;color:var(--muted-2)}

.agendar__lede{color:var(--muted);font-size:1rem;line-height:1.62;max-width:46ch}

.passos{margin-top:clamp(30px,4vw,46px);border-top:1px solid var(--line-soft)}
.passos li{
  display:flex;gap:18px;align-items:flex-start;
  padding:18px 0;border-bottom:1px solid var(--line-soft);
}
.passos__n{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--acc);padding-top:3px;
}
.passos h2{font-size:15px;font-weight:500;margin-bottom:4px}
.passos p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ---------- caixa do formulário ---------- O cartão segue o tema, mas não é um */
:is(.agendar__caixa,.modal__cartao){
  --brilho:11%;                       /* quanto do acento entra pelo canto */
  --luz-borda:rgba(255,255,255,.7);   /* fio de luz na borda de cima */
  --campo-bg:color-mix(in srgb,var(--fg) 3.5%,transparent);
  --campo-bg-hover:color-mix(in srgb,var(--fg) 5.5%,transparent);
  --trilho:var(--line-soft);

  background-color:var(--panel-active-base);
  background-image:
    radial-gradient(115% 80% at 92% -12%,color-mix(in srgb,var(--acc) var(--brilho),transparent),transparent 62%),
    var(--panel-active);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-active),0 1px 0 var(--luz-borda) inset;
  padding:clamp(24px,2.8vw,34px);
  position:relative;
  overflow:hidden;              /* recorta o brilho e o fio na curva do canto */
}
.modal__cartao{overflow:auto}
[data-theme="dark"] :is(.agendar__caixa,.modal__cartao){
  --brilho:26%;
  --luz-borda:rgba(255,255,255,.06);
  --campo-bg:rgba(255,255,255,.045);
  --campo-bg-hover:rgba(255,255,255,.075);
  --trilho:rgba(255,255,255,.09);
}

/* O fio de acento do topo, herdado do card em destaque do carrossel, ganha função */
:is(.agendar__caixa,.modal__cartao)::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--trilho);
}
:is(.agendar__caixa,.modal__cartao)::after{
  content:"";position:absolute;top:0;left:0;height:2px;
  width:calc(var(--progresso,0) * 1%);
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--acc) 45%,transparent),var(--acc));
  box-shadow:0 0 12px color-mix(in srgb,var(--acc) 65%,transparent);
  transition:width 560ms var(--ease);
}
@media (prefers-reduced-motion:reduce){
  :is(.agendar__caixa,.modal__cartao)::after{transition:none}
}

.formulario__titulo{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);
  margin-bottom:18px;
}

.campo{margin-bottom:20px}
.campo label{display:block;font-size:13.5px;font-weight:500;margin-bottom:8px}

.campo input{
  width:100%;
  padding:13px 15px;
  font-family:inherit;font-size:15px;color:var(--fg);
  background:var(--campo-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease);
}
.campo input::placeholder{color:var(--muted-2)}
.campo input:hover{border-color:var(--hover-line)}
.campo input:focus{
  outline:none;
  border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent);
}

/* Os campos — só na página de agendamento */
:is(.agendar__caixa,.modal__cartao){--campo-h:54px}

/* WhatsApp e CNPJ dividem a linha: são curtos e de formato conhecido, e lado a lado o */
:is(.agendar__caixa,.modal__cartao) .formulario{
  display:grid;grid-template-columns:1fr 1fr;gap:0 12px;
}
:is(.agendar__caixa,.modal__cartao) .formulario > *{grid-column:1 / -1}
:is(.agendar__caixa,.modal__cartao) .campo--meio{grid-column:auto}

:is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo){position:relative;margin-bottom:12px}

:is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo) > input{
  height:var(--campo-h);
  padding:22px 15px 7px;
  background:var(--campo-bg);
  border:1px solid var(--line-soft);
  border-radius:12px;
  box-shadow:none;
  transition:border-color 220ms var(--ease),background 220ms var(--ease),box-shadow 220ms var(--ease);
}
:is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo) > input:hover{
  border-color:var(--line);background:var(--campo-bg-hover);
}
:is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo) > input:focus{
  border-color:color-mix(in srgb,var(--acc) 62%,transparent);
  background:var(--campo-bg-hover);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent),
             0 10px 30px -14px color-mix(in srgb,var(--acc) 70%,transparent);
}

/* O rótulo tem a altura do campo de digitação, e não `top:50%`: quando a mensagem de */
:is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo) > label{
  position:absolute;z-index:1;
  left:16px;top:0;height:var(--campo-h);
  display:flex;align-items:center;
  transform-origin:left center;
  font-size:15px;font-weight:400;color:var(--muted);
  margin:0;pointer-events:none;          /* o clique atravessa e cai no campo */
  transition:transform 190ms var(--ease),color 190ms var(--ease);
}

/* O exemplo de preenchimento só aparece quando o rótulo já saiu da frente */
:is(.agendar__caixa,.modal__cartao) .campo > input::placeholder{opacity:0;transition:opacity 160ms var(--ease)}
:is(.agendar__caixa,.modal__cartao) .campo > input:focus::placeholder{opacity:1}

:is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo):has(> input:focus) > label,
:is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo):has(> input:not(:placeholder-shown)) > label{
  transform:translateY(-14px) scale(.74);
}
:is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo):has(> input:focus) > label{color:var(--acc)}

/* erro */
:is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo) > input[aria-invalid="true"]{
  border-color:color-mix(in srgb,var(--erro) 65%,transparent);background:var(--erro-bg);
}
:is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo) > input[aria-invalid="true"]:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--erro) 18%,transparent);
}
:is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo):has(> input[aria-invalid="true"]) > label{color:var(--erro)}

/* Sem `:has()` o rótulo ficaria parado sobre o texto digitado */
@supports not selector(:has(*)){
  :is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo) > label{
    position:static;transform:none;height:auto;display:block;
    font-size:13.5px;font-weight:500;margin-bottom:8px;
  }
  :is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo) > input{height:auto;padding:13px 15px}
  :is(.agendar__caixa,.modal__cartao) .campo > input::placeholder{opacity:1}
}

.campo input[aria-invalid="true"]{border-color:var(--erro);background:var(--erro-bg)}
.campo input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--erro) 18%,transparent)}

.campo__erro{
  margin-top:7px;font-size:12.5px;line-height:1.45;color:var(--erro);
  display:flex;align-items:center;gap:7px;
}
.campo__erro::before{
  content:"";width:13px;height:13px;flex:0 0 13px;background:var(--erro);
  -webkit-mask:var(--icon-alerta) center / 13px 13px no-repeat;
          mask:var(--icon-alerta) center / 13px 13px no-repeat;
}

/* ---------- grupo de opções ---------- */
.campo--grupo{border:0;padding:0;margin:0 0 18px;min-width:0}
.campo--grupo legend{display:block;width:100%;font-size:13px;font-weight:500;margin:0 0 8px;padding:0}
.legend__dica{
  font-weight:400;font-size:11.5px;color:var(--muted-2);margin-left:8px;
}

:is(.agendar__caixa,.modal__cartao) .campo--grupo{margin-bottom:20px}
:is(.agendar__caixa,.modal__cartao) .campo:not(.campo--grupo) + .campo--grupo{margin-top:10px}

/* Campo que só um robô preenche: fora da tela, fora da ordem de foco e invisível ao */
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.opcoes{display:flex;flex-wrap:wrap;gap:7px}
.opcao{position:relative}
.opcao input{
  position:absolute;width:1px;height:1px;opacity:0;   /* o radio some, o rótulo vira o controle */
  margin:0;pointer-events:none;
}
.opcao span{
  display:flex;align-items:center;padding:8px 13px;
  font-size:13px;color:var(--muted);
  background:var(--campo-bg);
  border:1px solid var(--line);border-radius:var(--radius);
  cursor:pointer;user-select:none;
  transition:border-color 180ms var(--ease),color 180ms var(--ease),background 180ms var(--ease);
}
.opcao span:hover{border-color:var(--hover-line);color:var(--fg)}

/* Cada solução veste a própria cor quando marcada */
.opcao input[value="danfe"]:checked + span{--chip:var(--c-danfe)}
.opcao input[value="radar"]:checked + span{--chip:var(--c-radar)}
.opcao input[value="tributare"]:checked + span{--chip:var(--c-tributare)}

.opcao input:checked + span{
  color:var(--chip,var(--acc));
  border-color:color-mix(in srgb,var(--chip,var(--acc)) 55%,transparent);
  background:color-mix(in srgb,var(--chip,var(--acc)) 11%,transparent);
}

/* o check abre espaço ao ser marcado, em vez de aparecer por cima */
.opcao span::before{
  content:"";width:0;height:12px;flex:0 0 0;
  background:currentColor;
  -webkit-mask:var(--icon-check) center / 12px 12px no-repeat;
          mask:var(--icon-check) center / 12px 12px no-repeat;
  transition:width 200ms var(--ease),flex-basis 200ms var(--ease),margin-right 200ms var(--ease);
}
.opcao input:checked + span::before{width:12px;flex-basis:12px;margin-right:7px}

/* A solução da página vem marcada e travada: a pessoa chegou aqui por ela */
.opcao--fixa span{cursor:default}
.opcao--fixa input:disabled + span{
  opacity:1;
  border-color:color-mix(in srgb,var(--chip,var(--acc)) 70%,transparent);
  background:color-mix(in srgb,var(--chip,var(--acc)) 15%,transparent);
  font-weight:500;
}
.opcao--fixa input:disabled + span:hover{
  border-color:color-mix(in srgb,var(--chip,var(--acc)) 70%,transparent);
  color:var(--chip,var(--acc));
}
.opcao input:focus-visible + span{outline:2px solid var(--acc);outline-offset:2px}
.campo--grupo[aria-invalid="true"] .opcao span{border-color:var(--erro)}

.formulario__enviar{width:100%;margin-top:10px;padding-block:14px}
.formulario__enviar[data-ocupado]{opacity:.7;pointer-events:none}

/* O CTA veste o acento em vez do preto/branco padrão: no cartão com brilho, ele é o */
:is(.agendar__caixa,.modal__cartao) .formulario__enviar{
  background:var(--acc);color:var(--on-acc);
  box-shadow:0 14px 34px -16px color-mix(in srgb,var(--acc) 85%,transparent);
}
:is(.agendar__caixa,.modal__cartao) .formulario__enviar:hover{filter:brightness(1.08)}

.formulario__aviso{
  margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--muted-2);
}
.formulario__aviso a{text-decoration:underline;text-underline-offset:2px}

/* ---------- confirmação ---------- */
.pronto{text-align:center;padding:clamp(14px,3vw,30px) 0}
.pronto__marca{
  width:46px;height:46px;margin:0 auto 20px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--acc);
  background:color-mix(in srgb,var(--acc) 12%,transparent);
}
.pronto__marca svg{width:22px;height:22px}
.pronto h2:focus-visible{outline:2px solid var(--acc);outline-offset:6px}
.pronto h2{
  font-family:var(--font-display);font-weight:600;font-size:22px;
  letter-spacing:-.02em;margin-bottom:10px;
}
.pronto p{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:38ch;margin:0 auto 22px}

/* O atalho para a conversa, quando o navegador barra a aba nova */
.pronto__wa{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:999px;margin-bottom:18px;
  background:#25D366;color:#06281A;
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 12px 28px -14px rgba(37,211,102,.9);
  transition:transform 220ms var(--ease),filter 220ms var(--ease);
}
.pronto__wa svg{width:17px;height:17px}
.pronto__wa:hover{transform:translateY(-1px);filter:brightness(1.06)}
.pronto__wa:focus-visible{outline:2px solid #25D366;outline-offset:3px}
.pronto__wa[hidden]{display:none}

/* O link secundário vira bloco para cair embaixo do botão, e não ao lado */
.pronto__wa + .link-voltar{
  display:block;width:fit-content;margin-inline:auto;
}

.link-voltar{
  font-size:13.5px;font-weight:500;
  border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:border-color 200ms var(--ease);
}
.link-voltar:hover{border-color:var(--fg)}

@media (max-width:900px){
  .agendar{grid-template-columns:1fr;gap:34px;padding-top:32px}
  :is(.agendar__caixa,.modal__cartao){order:-1}      /* no celular o formulário vem antes da explicação */
  .passos{margin-top:24px}
}

/* Modal de agendamento nas landing pages */
.modal{
  border:0;padding:0;background:transparent;
  max-width:min(520px,calc(100vw - 32px));width:100%;
  max-height:calc(100dvh - 32px);
  color:var(--fg);
}
.modal::backdrop{
  background:rgba(6,11,22,.55);
  backdrop-filter:blur(3px);
}
[data-theme="light"] .modal::backdrop{background:rgba(11,18,32,.35)}

/* O fundo, o brilho, os campos e o botão vêm da mesma regra da caixa da página de */
.modal__cartao{
  overflow:auto;max-height:calc(100dvh - 32px);
}

.modal__fechar{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--muted);
  transition:color 200ms var(--ease),background 200ms var(--ease);
}
.modal__fechar svg{width:14px;height:14px}
.modal__fechar:hover{color:var(--fg);background:var(--hover-weak)}

.modal__titulo{
  font-family:var(--font-display);font-weight:600;font-size:21px;
  letter-spacing:-.02em;margin-bottom:8px;
}
.modal__lede{font-size:13.5px;line-height:1.55;color:var(--muted);margin-bottom:24px}
/* o nome da solução puxa a cor da própria marca, que na landing já é o acento */
.modal__lede b{color:var(--acc);font-weight:500}

.modal .link-voltar{cursor:pointer}

/* abertura curta: o formulário precisa aparecer, não se apresentar */
.modal[open]{animation:modal-entra 220ms var(--ease)}
@keyframes modal-entra{
  from{opacity:0;transform:translateY(10px) scale(.99)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){ .modal[open]{animation:none} }

/* O agendador — escolher o horário sem sair da página */
.agendador{text-align:center;padding:clamp(6px,1.4vw,14px) 0}
.agendador__passo{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:8px;
}
.agendador__titulo{
  font-family:var(--font-display);font-weight:600;font-size:22px;
  letter-spacing:-.02em;margin-bottom:6px;
}
.agendador__titulo:focus-visible{outline:2px solid var(--acc);outline-offset:6px}
.agendador__duracao{font-size:13px;color:var(--muted);margin-bottom:clamp(14px,2vw,20px)}

.agendador__carga{
  padding:26px 10px;font-size:13.5px;line-height:1.6;color:var(--muted);
}

/* ---------- a fita de dias ---------- As classes levam o sobrenome do bloco porque */
/* A fita rola e precisa dizer isso: o esmaecido na borda direita é o que
   revela que há mais dias adiante. */
.agendador__fita{position:relative}
.agendador__fita::after{
  content:"";position:absolute;right:0;top:0;bottom:12px;width:44px;
  pointer-events:none;opacity:0;transition:opacity 220ms var(--ease);
  background:linear-gradient(90deg,transparent,var(--surface,var(--bg)) 78%);
}
.agendador__fita[data-tem-mais]::after{opacity:1}

.agendador__dias{
  display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;
  scrollbar-width:thin;scroll-snap-type:x proximity;
}
.agendador__dias::-webkit-scrollbar{height:5px}
.agendador__dias::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.agendador__dia{
  flex:none;scroll-snap-align:start;
  display:grid;gap:1px;place-items:center;
  min-width:58px;padding:9px 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--hover-weak);
  transition:border-color 200ms var(--ease),background 200ms var(--ease);
}
.agendador__dia i{font-style:normal;font-size:10px;letter-spacing:.08em;color:var(--muted-2);text-transform:uppercase}
.agendador__dia b{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.02em}
.agendador__dia span{font-size:10px;color:var(--muted-2)}
.agendador__dia:hover{border-color:var(--acc)}
.agendador__dia[data-escolhido]{
  border-color:var(--acc);
  background:color-mix(in srgb,var(--acc) 14%,transparent);
}
.agendador__dia[data-escolhido] b{color:var(--acc)}

/* ---------- as horas ---------- */
.agendador__horas{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
  gap:8px;margin-top:6px;
}
.agendador__hora{
  padding:11px 6px;border-radius:9px;
  border:1px solid var(--line);background:var(--hover-weak);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;
  transition:border-color 200ms var(--ease),background 200ms var(--ease);
}
.agendador__hora:hover{border-color:var(--acc)}
.agendador__hora[data-escolhido]{
  border-color:var(--acc);color:var(--acc);
  background:color-mix(in srgb,var(--acc) 14%,transparent);
  box-shadow:0 0 0 1px var(--acc) inset;
}
.agendador__dia:focus-visible,.agendador__hora:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* O mesmo lugar serve para erro e para progresso; o que muda é a cor, porque
   "criando a sala da reunião" em vermelho assusta sem motivo. */
.agendador__aviso{
  margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--erro,#E0736B);
}
.agendador__aviso[data-tipo="progresso"]{color:var(--muted)}

/* Enquanto marca, uma faixa percorre o botão: a espera passa a ter movimento. */
.agendador__ok{position:relative;overflow:hidden}
.agendador[data-ocupado] .agendador__ok::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation:agendador-faixa 1.4s linear infinite;
}
@keyframes agendador-faixa{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}

.agendador__saidas{
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;
  margin-top:16px;
}
.agendador[data-ocupado] .agendador__saidas button,
.agendador[data-ocupado] .agendador__dia,
.agendador[data-ocupado] .agendador__hora{opacity:.45;pointer-events:none}
/* mesma largura do botão de enviar do formulário, para a troca de passo não mexer no */
.agendador__ok{width:100%;margin-top:clamp(16px,2.2vw,22px);justify-content:center}
.agendador__ok[disabled]{opacity:.45;cursor:not-allowed}
  .agendador__saidas [data-pular],
.agendador__saidas [data-voltar]{display:inline-block;margin:0}

@media (max-width:520px){
  .agendador__horas{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px}
  .agendador__dia{min-width:52px;padding:8px}
}