/* Demonstração do link público de agendamento, no visual "Lima" do sistema.
   A base é igual em todos os estilos; demo.js aplica as cores de ação e
   destaque do estilo e troca tudo no modo escuro. */
:root {
  --fundo: #EAEAE5;
  --superficie: #FFFFFF;
  --rebaixado: #F4F4F1;
  --divisor: #EDEDE9;
  --tinta: #0E120C;
  --suave: #5C605A;
  --apagado: #A3A6A0;
  --placeholder: #626660;
  --controle: #7E827D;
  --sucesso: #3B4510;
  --sucesso-bg: #EEF4C4;
  --perigo: #B4413A;
  --perigo-bg: #FAE8E7;
  --sombra: 0 1px 2px #0E120C0A;

  --primaria: #1A3318;
  --primaria-hover: #24421F;
  --sobre-primaria: #FFFFFF;
  --foco: #1A3318;
  --destaque: #F4F8D0;
  --destaque-forte: #C7CF7F;

  --fonte: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root[data-modo="escuro"] {
  --fundo: #0E100D;
  --superficie: #171A16;
  --rebaixado: #20241F;
  --divisor: #232822;
  --tinta: #EEF0EA;
  --suave: #A4A99F;
  --apagado: #5E635B;
  --placeholder: #858A81;
  --controle: #6E746A;
  --sucesso: #DCE79C;
  --sucesso-bg: #2B3112;
  --perigo: #F0A097;
  --perigo-bg: #3A1F1D;
  --sombra: 0 0 0 1px #FFFFFF0F;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
:root[data-modo="escuro"] { color-scheme: dark; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--fonte); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
svg { display: block; }

/* Faixa da demonstração: fica fora do tema, para não parecer parte do estabelecimento. */
.faixa-demo { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1.25rem; padding: .625rem 16px; background: #0E120C; color: #D8DBD3; font-size: .875rem; }
.faixa-demo a { color: #fff; }
.faixa-demo .rotulo-demo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.faixa-demo .rotulo-demo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C9D77A; }
.faixa-demo nav { display: flex; align-items: center; gap: .5rem; }
.faixa-demo nav a { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--cor); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .25); }
.faixa-demo nav a[aria-current="page"] { box-shadow: 0 0 0 2px #0E120C, 0 0 0 4px #fff; }
.faixa-demo .acoes-demo { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.faixa-demo .acoes-demo .cta { padding: .5rem 1rem; border-radius: 999px; background: #EEF4C4; color: #0E120C; text-decoration: none; font-weight: 600; }
@media (max-width: 640px) { .faixa-demo .voltar { display: none; } .faixa-demo .acoes-demo { margin-left: 0; } }

.conteudo { width: min(1170px, 100% - 32px); margin-inline: auto; }

/* Topo do estabelecimento */
.topo { background: var(--superficie); border-bottom: 1px solid var(--divisor); }
.topo .conteudo { display: flex; align-items: center; gap: 12px; min-height: 72px; padding-block: 12px; }
.marca { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--primaria); color: var(--sobre-primaria); flex: none; }
.marca svg { width: 22px; height: 22px; }
.topo strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.topo .sub { font-size: 14px; color: var(--suave); }
.modo { display: flex; gap: 4px; margin-left: auto; padding: 4px; border-radius: 999px; background: var(--rebaixado); }
.modo button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--suave); cursor: pointer; }
.modo button[aria-pressed="true"] { background: var(--primaria); color: var(--sobre-primaria); }
.modo svg { width: 18px; height: 18px; }

main { padding-block: 40px 56px; }
h1 { margin: 0 0 8px; font-size: clamp(30px, 24px + 2vw, 44px); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; }
.subtitulo { margin: 0 0 32px; color: var(--suave); font-size: 18px; }

.colunas { display: grid; grid-template-columns: 1.3fr 1.15fr .9fr; gap: 20px; align-items: start; }
@media (max-width: 1080px) { .colunas { grid-template-columns: 1fr 1fr; } .dados { grid-column: 1 / -1; } }
@media (max-width: 720px) { .colunas { grid-template-columns: 1fr; } }
.painel { padding: 28px; background: var(--superficie); border-radius: 20px; box-shadow: var(--sombra); }
@media (max-width: 520px) { .painel { padding: 20px; } }
.painel h2 { margin: 0 0 20px; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }

/* Serviços */
.servicos { display: grid; gap: 10px; }
.servico { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: start; width: 100%; padding: 16px; text-align: left; background: var(--rebaixado); border: 2px solid transparent; border-radius: 16px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.servico:hover { border-color: var(--destaque-forte); }
.servico[aria-pressed="true"] { background: var(--superficie); border-color: var(--primaria); padding-right: 40px; }
.servico img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; box-shadow: 0 0 0 1px #0000001A; }
.servico strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.servico .meta { display: block; margin-top: 4px; font-size: 14px; color: var(--suave); }
.servico .preco { font-size: 16px; font-weight: 600; white-space: nowrap; }
.servico .marcado { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; color: var(--primaria); }

/* Calendário */
.mes { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mes strong { font-size: 16px; font-weight: 600; }
.mes strong::first-letter { text-transform: uppercase; }
.mes button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--tinta); cursor: pointer; }
.mes button:hover:not(:disabled) { background: var(--rebaixado); }
.mes button:disabled { color: var(--apagado); cursor: default; }
.mes svg { width: 20px; height: 20px; }
.semana, .dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.semana span { font-size: 13px; font-weight: 500; color: var(--suave); padding-bottom: 6px; }
.dia { display: grid; place-items: center; width: 100%; max-width: 48px; aspect-ratio: 1; margin-inline: auto; border: 0; border-radius: 50%; background: transparent; font-size: 16px; color: var(--apagado); }
.dia.livre { color: var(--tinta); font-weight: 600; cursor: pointer; }
.dia.livre:hover { background: var(--destaque); }
.dia[aria-pressed="true"] { background: var(--primaria); color: var(--sobre-primaria); }
.dia.fora { visibility: hidden; }
.horarios-titulo { margin: 24px 0 12px; font-size: 16px; font-weight: 500; }
.horarios { display: flex; flex-wrap: wrap; gap: 10px; }
.horario { min-width: 76px; min-height: 44px; padding: 0 16px; border: 1px solid var(--controle); border-radius: 999px; background: transparent; font-size: 16px; font-weight: 600; cursor: pointer; }
.horario:hover { background: var(--destaque); }
.horario[aria-pressed="true"] { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.sem-horario { margin: 0; font-size: 14px; color: var(--suave); }

/* Seus dados */
.campo { display: grid; gap: 8px; margin-bottom: 20px; }
.campo label { font-size: 16px; font-weight: 500; }
.campo input { height: 56px; padding: 0 16px; border: 1px solid var(--controle); border-radius: 12px; background: var(--superficie); font-size: 16px; }
.campo input::placeholder { color: var(--placeholder); }
.campo input:focus { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.resumo { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--destaque); font-size: 14px; color: var(--suave); }
.resumo strong { color: var(--tinta); }
.erro { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--perigo-bg); color: var(--perigo); font-size: 14px; font-weight: 500; }
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; width: 100%; padding: 0 24px; border: 0; border-radius: 999px; background: var(--primaria); color: var(--sobre-primaria); font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; }
.botao:hover { background: var(--primaria-hover); }
.botao-secundario { background: var(--rebaixado); color: var(--tinta); }
.botao-secundario:hover { background: var(--destaque); }

/* Sucesso */
.sucesso { display: grid; justify-items: center; gap: 16px; max-width: 620px; margin: 32px auto 0; text-align: center; }
.sucesso .icone-ok { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sucesso-bg); color: var(--sucesso); }
.sucesso .icone-ok svg { width: 30px; height: 30px; }
.sucesso h1 { margin: 0; }
.sucesso p { margin: 0; color: var(--suave); font-size: 18px; }
.aviso-demo { margin-top: 8px; padding: 16px 20px; border-radius: 16px; background: var(--superficie); text-align: left; font-size: 15px; color: var(--suave); box-shadow: var(--sombra); }
.aviso-demo strong { color: var(--tinta); }
.sucesso .acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; margin-top: 8px; }
.sucesso .acoes .botao { width: auto; }

.rodape { border-top: 1px solid var(--divisor); }
.rodape .conteudo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 20px 32px; font-size: 14px; color: var(--suave); }