/* =============================================================
   base.css do B-Link: tema (cores, raios, sombras) da página de
   agendamento. É o arquivo DEFINITIVO: cada cliente ajusta as
   variáveis abaixo para a sua marca (o index.html tem as suas
   próprias variáveis em :root; mantenha as duas combinando).
   ============================================================= */
:root{
  --verde-principal:#103629;
  --verde-escuro:   #0B261C;
  --verde-claro:    #B9CDBE;
  --verde-suave:    #E3EBE0;
  --fundo:          #F3EADA;
  --branco:         #FFFFFF;
  --texto:          #103629;
  --texto-suave:    #4F5C52;
  --verde-titulo:   #103629;
  --verde-botao:    #103629;

  --linha:          #E2D8C6;
  --neutro:         #9AA39A;
  --neutro-suave:   #ECE3D2;
  --ok:             #3B9E5F;
  --aviso:          #D9A441;
  --erro:           #D4574B;

  --sombra:      0 4px 20px rgba(16,54,41,.08);
  --sombra-card: 0 14px 34px rgba(16,54,41,.16);
  --sombra-alta: 0 10px 28px rgba(16,54,41,.2);
  --raio:        18px;
  --raio-p:      14px;
  --raio-hero:   26px;
  --transicao:   220ms cubic-bezier(.4,0,.2,1);
  --traco:       cubic-bezier(.22,1,.36,1);

  --coluna:  526px;
  --margem:  18px;


  /* Cores "de apoio" da agenda: antes ficavam fixas no agendar.html. Num tema escuro (ou de outra marca) basta
     mudar estes valores; o agendar.html só usa variáveis. */
  --sobre-acento:  #FFFFFF;                 /* texto/ícone SOBRE a cor de destaque (botões, dia e horário escolhidos) */
  --erro-fundo:    #FDECEC; --erro-texto:   #9A2E2E;   /* caixa de erro do formulário */
  --alerta-fundo:  #FBE7E5; --alerta-texto: #A13B31;   /* cronômetro do PIX quando falta pouco */
  --dia-ocupado:   #C9C2B2;                 /* dia sem horário no calendário */
  --anel-foco:     rgba(16,54,41,.14);    /* halo dos campos em foco */
  --linha-resumo:  rgba(16,54,41,.16);    /* divisórias do resumo */
  --sombra-botao:  0 6px 20px rgba(16,54,41,.28);
  --spinner-trilho:rgba(255,255,255,.35);
  --raio-pilula:   999px;                   /* tags e barra de progresso: 999px = arredondado, 0 = reto */

  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--fundo)}
body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3,.etapa__titulo,.servico__nome{font-family:'Quicksand','Nunito',system-ui,sans-serif}

/* Os <span> dentro dos cartões de serviço empilham como bloco (não inline). */
.servico__nome, .servico__desc, .servico__meta{display:block}


/* A animação de entrada das etapas (translateX) não pode criar rolagem horizontal momentânea. */
.tela{overflow-x:clip}