/* Página de agendamento. Dois temas (escuro para barbearia, claro e quente para salão, unhas, cílios, estética e pet);
   a cor de destaque vem do ramo ou da loja e é ajustada em agendar.js até o texto passar de 4,5:1. Horários e preços
   em fonte mono com algarismos tabulares: dá para correr o olho e comparar. */
:root { --raio: 14px; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --ok: #1f9d55; --zap: #1fa855; --erro: #d64545;
  --saida: cubic-bezier(.16, 1, .3, 1); }
html[data-tema="escuro"] { --bg: #0e0d0b; --sup: #171512; --sup2: #1f1c18; --linha: #2d2924; --linha2: #3d3832; --tinta: #f4efe6; --mut: #a8a093; --sombra: 0 1px 0 rgba(255,255,255,.03); }
html[data-tema="claro"] { --bg: #f7f3ef; --sup: #ffffff; --sup2: #fbf8f5; --linha: #e7ded5; --linha2: #d6cabe; --tinta: #241b17; --mut: #74655c; --sombra: 0 1px 2px rgba(60, 40, 20, .06); }
html[data-tema] body { background: var(--bg); color: var(--tinta); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ag { max-width: 1040px; margin: 0 auto; padding: 0 16px 120px; }
.ag .i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* topo */
.ag-topo { display: flex; align-items: center; gap: 14px; padding: 18px 0 14px; border-bottom: 1px solid var(--linha); }
.ag-logo { width: 54px; height: 54px; flex: none; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); }
.ag-logo img { width: 100%; height: 100%; object-fit: cover; }
.ag-logo .logo-ic { width: 28px; height: 28px; }
.ag-quem { min-width: 0; flex: 1; }
.ag-nome { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 21px; line-height: 1.1; margin: 0; overflow-wrap: anywhere; }
.ag-onde { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--mut); font-size: 13px; text-decoration: none; }
.ag-onde span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-onde .i { width: 14px; height: 14px; }
.ag-zap { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--linha2); color: var(--tinta); background: var(--sup); }
.ag-faixa { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0 4px; font-size: 13px; }
.ag-status { display: inline-flex; align-items: center; gap: 7px; color: var(--mut); }
.ag-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--erro); }
.ag-status.on i { background: var(--ok); }
.ag-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--acento-txt); font-weight: 650; font-size: 13px; cursor: pointer; padding: 8px 0; }
.ag-link .i { width: 16px; height: 16px; }
.ag-aviso { margin: 10px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--sup); border: 1px solid var(--linha); font-size: 14px; }
.ag-aviso.demo { border-style: dashed; color: var(--mut); }
.ag-aviso b { color: var(--tinta); }

/* etapas */
.ag-passos { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0 6px; padding: 0; position: relative; max-width: 560px; }
.ag-passos li { display: flex; align-items: center; position: relative; }
.ag-passos li:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 8px; background: var(--linha); border-radius: 2px; }
.ag-passos li.feito:not(:last-child)::after { background: var(--acento); }
.ag-passos span { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--linha2); color: var(--mut);
  font: 700 13px/1 var(--mono); transition: background .2s, color .2s, border-color .2s; }
.ag-passos .atual span { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.ag-passos .feito span { background: color-mix(in srgb, var(--acento) 18%, var(--sup)); border-color: color-mix(in srgb, var(--acento) 45%, transparent); color: var(--acento-txt); }
.ag-passos .feito .i { width: 14px; height: 14px; stroke-width: 2.4; }

/* grade: no computador o resumo fica do lado */
.ag-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 900px) { .ag-grade { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .ag-lado { position: sticky; top: 16px; } }
@media (max-width: 899px) { .ag-lado { display: none; } }
.ag-passo { outline: none; padding-top: 8px; max-width: 640px; min-width: 0; }
.ag-passo.entra { animation: ag-entra .32s var(--saida); }
@keyframes ag-entra { from { opacity: 0; transform: translateY(10px); } }
.ag-tit { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(24px, 6vw, 30px); line-height: 1.08; letter-spacing: -.01em; margin: 10px 0 6px; text-wrap: balance; }
.ag-sub { color: var(--mut); font-size: 15px; margin: 0 0 18px; max-width: 46ch; }
.ag-voltar { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 10px 0 0; color: var(--mut); font-size: 14px; cursor: pointer; }
.ag-vazio { color: var(--mut); text-align: center; padding: 28px 12px; }
.ag-vazio .i { width: 28px; height: 28px; }

/* galeria de trabalhos */
.ag-galeria { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px 18px; padding: 0 16px 4px; scrollbar-width: none; }
.ag-galeria figure { margin: 0; flex: none; width: 132px; scroll-snap-align: start; }
.ag-galeria img { width: 132px; height: 164px; object-fit: cover; border-radius: 12px; display: block; background: var(--sup2); }
.ag-galeria figcaption { font-size: 12px; color: var(--mut); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* serviços */
.ag-cat h3 { font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin: 22px 0 10px; }
.ag-serv { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 15px 16px; margin-bottom: 10px; border-radius: var(--raio);
  background: var(--sup); border: 1.5px solid var(--linha); color: inherit; cursor: pointer; box-shadow: var(--sombra);
  transition: border-color .15s, background .15s, transform .16s var(--saida); -webkit-tap-highlight-color: transparent; }
.ag-serv:active { transform: scale(.985); }
.ag-serv.on { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 9%, var(--sup)); }
.ag-marca { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid var(--linha2); display: grid; place-items: center; color: transparent; transition: background .15s, border-color .15s; }
.ag-marca .i { width: 14px; height: 14px; stroke-width: 2.6; }
.ag-serv.on .ag-marca { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.ag-serv-txt { flex: 1; min-width: 0; }
.ag-serv-txt b { display: block; font-size: 16px; font-weight: 650; line-height: 1.25; }
.ag-serv-txt small { display: flex; align-items: flex-start; gap: 5px; margin-top: 4px; color: var(--mut); font-size: 13px; line-height: 1.35; }
.ag-serv-txt small .i { width: 14px; height: 14px; margin-top: 1px; }
.ag-serv-foto { width: 52px; height: 52px; flex: none; border-radius: 10px; object-fit: cover; }
.ag-preco { flex: none; text-align: right; font-weight: 700; font-size: 15px; }
.ag-preco s { display: block; color: var(--mut); font-weight: 400; font-size: 12px; }

/* equipe */
.ag-equipe { display: grid; gap: 10px; margin-top: 14px; }
.ag-prof { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--raio); background: var(--sup);
  border: 1.5px solid var(--linha); color: inherit; cursor: pointer; transition: border-color .15s, transform .16s var(--saida); }
.ag-prof:active { transform: scale(.985); }
.ag-prof.on, .ag-prof:hover { border-color: var(--acento); }
.ag-prof > span:nth-child(2) { flex: 1; min-width: 0; }
.ag-prof b { display: block; font-size: 16px; font-weight: 650; }
.ag-prof small { display: block; color: var(--mut); font-size: 13px; margin-top: 2px; }
.ag-prof > .i { color: var(--mut); }
.ag-av { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font: 700 15px/1 var(--mono);
  background: color-mix(in srgb, var(--acento) 16%, var(--sup2)); color: var(--acento-txt); border: 1px solid var(--linha); }
.ag-av img { width: 100%; height: 100%; object-fit: cover; }
.ag-av.todos { background: var(--acento); color: var(--sobre-acento); }

/* dia e hora */
.ag-prox { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  background: color-mix(in srgb, var(--ok) 10%, var(--sup)); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); color: inherit; font-size: 14px; }
.ag-prox > span { flex: 1; }
.ag-prox .i:first-child { color: var(--ok); }
.ag-dias { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 14px -16px 0; padding: 2px 16px 8px; scrollbar-width: none; }
.ag-dia { flex: none; width: 62px; padding: 10px 0 9px; border-radius: 12px; background: var(--sup); border: 1.5px solid var(--linha); color: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; scroll-snap-align: start; position: relative; transition: border-color .15s, background .15s; }
.ag-dia small { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--mut); }
.ag-dia b { font: 700 21px/1.05 var(--mono); }
.ag-dia i { position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--ok); display: none; }
.ag-dia[disabled] { opacity: .38; cursor: default; }
.ag-dia.on { background: var(--tinta); color: var(--bg); border-color: var(--tinta); }
.ag-dia.on small { color: color-mix(in srgb, var(--bg) 70%, var(--tinta)); }
.ag-dia.esq { height: 72px; background: var(--sup2); animation: ag-piscar 1.2s infinite alternate; }
@keyframes ag-piscar { to { opacity: .5; } }
.ag-horas { margin-top: 14px; background: var(--sup); border: 1px solid var(--linha); border-radius: 16px; padding: 16px; min-height: 120px; }
.ag-horas-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.ag-horas-topo b { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; }
.ag-horas-topo span { font: 600 12px/1 var(--mono); color: var(--mut); background: var(--sup2); border: 1px solid var(--linha); padding: 5px 9px; border-radius: 99px; }
.ag-horas h4 { font: 700 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin: 16px 0 8px; }
.ag-grade-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.ag-hora { padding: 13px 0; border-radius: 11px; background: var(--sup2); border: 1.5px solid var(--linha); color: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: border-color .12s, background .12s, transform .16s var(--saida); }
.ag-hora:active { transform: scale(.96); }
.ag-hora.ocupado { position: relative; opacity: .42; cursor: not-allowed; background: transparent; border-style: dashed; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ag-hora.ocupado small { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.ag-hora.ocupado:hover { border-color: var(--linha); }
.ag-movimento { font-style: normal; color: var(--acento); font-weight: 700; }
.ag-movimento::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: ag-pulso 1.6s ease-in-out infinite; }
@keyframes ag-pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .ag-movimento::before { animation: none; } }
.ag-hora.on, .ag-hora:hover { border-color: var(--acento); }
.ag-hora.on { background: var(--acento); color: var(--sobre-acento); }
.ag-carrega { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ag-carrega i { height: 46px; border-radius: 11px; background: var(--sup2); animation: ag-piscar 1.2s infinite alternate; }

/* confirmar */
.ag-cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: 16px; padding: 16px 18px; margin: 14px 0; box-shadow: var(--sombra); }
.ag-quando { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 19px; margin: 0; }
.ag-quando-sub { color: var(--mut); margin: 4px 0 10px; font-size: 14px; }
.ag-quando-sub b { color: var(--tinta); font-size: 16px; }
html[data-tema] .lin { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linha); font-size: 15px; }
.lin.mut { color: var(--mut); font-size: 13px; }
.lin.mut span { display: inline-flex; align-items: center; gap: 5px; }
.lin.mut .i { width: 14px; height: 14px; }
.lin.total { font-weight: 800; font-size: 18px; }
.ag-nota { color: var(--mut); font-size: 13px; margin: 6px 0 0; }
.ag-nota.centro { text-align: center; margin-top: 12px; }
.ag-form { display: grid; gap: 14px; }
.ag-campo { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; }
.ag-campo > span, .ag-campo legend { font-size: 14px; font-weight: 650; padding: 0; }
.ag-campo em { color: var(--erro); font-style: normal; }
.ag-campo small { color: var(--mut); font-size: 12.5px; }
.ag-campo input, .ag-mais textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--linha2); background: var(--sup);
  color: var(--tinta); font: 16px/1.3 inherit; font-family: inherit; }
.ag-campo input:focus, .ag-mais textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
.ag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ag-chips span { display: inline-block; padding: 10px 16px; border-radius: 99px; border: 1.5px solid var(--linha2); background: var(--sup); font-size: 14px; font-weight: 600; cursor: pointer; }
.ag-chips input:checked + span { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.ag-chips input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ag-mais summary { cursor: pointer; color: var(--acento-txt); font-weight: 650; font-size: 14px; padding: 4px 0 8px; }
.ag-erro { margin: 0; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--erro) 12%, var(--sup)); color: var(--tinta); border: 1px solid color-mix(in srgb, var(--erro) 40%, transparent); font-size: 14px; }

/* botões */
.ag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--acento); color: var(--sobre-acento); font: 700 16px/1 "Bricolage Grotesque", sans-serif; text-decoration: none; transition: transform .16s var(--saida), filter .15s; }
.ag-btn:active { transform: scale(.97); }
.ag-btn[disabled] { opacity: .45; cursor: default; }
.ag-btn.larga { width: 100%; }
.ag-btn.zap { background: var(--zap); color: #fff; }
.ag-btn.sec { background: var(--sup); color: var(--tinta); border: 1.5px solid var(--linha2); }
.ag-btn.fantasma { background: none; color: var(--acento-txt); min-height: 44px; }
.ag-btn.peq { min-height: 40px; padding: 0 14px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .ag-btn:not([disabled]):hover { filter: brightness(1.06); } .ag-serv:hover { border-color: var(--linha2); } .ag-serv.on:hover { border-color: var(--acento); } }

/* barra de baixo (celular) e resumo ao lado (computador) */
.ag-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--linha); }
.ag-barra-in { max-width: 1008px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ag-barra small { display: block; color: var(--mut); font-size: 13px; }
.ag-barra b { font: 800 19px/1.2 var(--mono); }
@media (min-width: 900px) { .ag-barra { display: none; } .ag-passo:has(.ag-serv) + .ag-lado .ag-resumo { display: block; } }
.ag-resumo { background: var(--sup); border: 1px solid var(--linha); border-radius: 16px; padding: 16px 18px; margin-top: 18px; }
.ag-resumo h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; margin: 0 0 6px; }

/* pronto */
.ag-feito { text-align: center; max-width: 480px; margin: 0 auto; display: grid; gap: 10px; }
.ag-feito .ag-cartao { text-align: left; }
.ag-feito .ag-sub { margin: 0 auto 4px; }
.ag-ok { width: 68px; height: 68px; margin: 18px auto 0; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; }
.ag-ok .i { width: 34px; height: 34px; stroke-width: 2.6; }
@media (prefers-reduced-motion: no-preference) { .ag-ok { animation: ag-pop .5s var(--saida); } .ag-ok .i path { stroke-dasharray: 30; animation: ag-traco .45s .2s var(--saida) both; } }
@keyframes ag-pop { from { transform: scale(.6); opacity: 0; } }
@keyframes ag-traco { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }

/* folha (meus horários, horário de funcionamento) */
.ag-dlg { border: 0; padding: 0; background: transparent; max-width: 520px; width: calc(100% - 24px); margin: auto auto 0; }
@media (min-width: 600px) { .ag-dlg { margin: auto; } }
.ag-dlg::backdrop { background: rgba(10, 8, 6, .55); }
.ag-folha { position: relative; background: var(--sup); color: var(--tinta); border-radius: 20px 20px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); max-height: 85vh; overflow: auto; }
@media (min-width: 600px) { .ag-folha { border-radius: 20px; } }
.ag-folha h2 { font-family: "Bricolage Grotesque", sans-serif; margin: 0 0 14px; font-size: 22px; }
.ag-fechar { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha); background: var(--sup2); color: var(--tinta); display: grid; place-items: center; cursor: pointer; }
.ag-meu { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--linha); }
.ag-meu b { display: block; }
.ag-meu small { display: block; color: var(--mut); font-size: 13px; margin-top: 2px; }
.ag-meu-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-troca { display: grid; gap: 12px; padding: 4px 0 16px; animation: ag-desce .2s ease-out both; }
.ag-troca .ag-dias { margin: 0 -4px; padding: 2px 4px 8px; }
.ag-troca-tit { margin: 0; font-weight: 700; font-size: 14px; }
.ag-troca-ok { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 15px; }
.ag-troca-ok svg { width: 18px; height: 18px; color: var(--ok, #15803d); flex: none; }
@keyframes ag-desce { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ag-troca { animation: none; } }
.ag-horarios { list-style: none; margin: 0; padding: 0; }
.ag-horarios li { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--linha); font-size: 15px; }
.ag-horarios span { color: var(--mut); font-family: var(--mono); }

.ag-rodape { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--linha); color: var(--mut); font-size: 13px; text-align: center; display: grid; gap: 8px; }
.ag-rodape b { color: var(--tinta); }
.ag-rodape-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.ag-rodape-links button, .ag-rodape-links a { background: none; border: 0; color: var(--acento-txt); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; padding: 6px 0; }
.ag-marca a { color: inherit; }
html[data-tema] :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
html[data-tema] #toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 99; background: var(--tinta); color: var(--bg);
  padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; transition: opacity .2s, transform .2s var(--saida); pointer-events: none; max-width: calc(100% - 32px); }
html[data-tema] #toast.mostra { opacity: 1; transform: translateX(-50%); }
html[data-tema] #toast.erro { background: var(--erro); color: #fff; }

/* capa: foto larga do topo (o profissional, o salão), com o nome e a frase sobre o lado escuro da foto */
.ag-capa { position: relative; min-height: min(62vh, 520px); display: flex; align-items: flex-end; background: var(--capa) right center / cover no-repeat, #000; color: #fff; }
.ag-capa::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 42%, rgba(0,0,0,0) 70%), linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0) 45%); }
.ag-capa-txt { position: relative; width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px 34px; display: grid; justify-items: start; gap: 8px; }
.ag-capa-nome { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(32px, 7vw, 56px); line-height: 1; letter-spacing: -.015em; max-width: 9em; text-wrap: balance; }
.ag-capa-frase { margin: 0 0 8px; color: rgba(255,255,255,.78); font-size: 16px; max-width: 32ch; }
.ag-capa .ag-btn { min-height: 48px; }
@media (max-width: 700px) { .ag-capa { min-height: 440px; background-position: 72% center; } .ag-capa::before { background: linear-gradient(0deg, rgba(0,0,0,.88) 8%, rgba(0,0,0,.2) 62%, rgba(0,0,0,0)); } }

/* o site em volta da agenda: destaques, seções, sobre, trabalhos e onde estamos */
.ag-capa-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.ag-capa .ag-btn.sec { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.ag-destaques { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .ag-destaques { grid-template-columns: repeat(3, 1fr); } }
.ag-destaques li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--raio); background: var(--sup); border: 1px solid var(--linha); font-size: 13.5px; color: var(--mut); }
.ag-destaques .i { width: 22px; height: 22px; color: var(--acento-txt); margin-top: 1px; }
.ag-destaques b { display: block; color: var(--tinta); font-size: 15px; margin-bottom: 2px; }
.ag-sec { padding-top: 44px; scroll-margin-top: 12px; }
.ag-h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(26px, 5.5vw, 34px); line-height: 1.05; letter-spacing: -.012em; margin: 0 0 8px; }
.ag-h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; margin: 20px 0 6px; }
#agendar .ag-passos { margin-top: 12px; }
#agendar .ag-tit { font-size: clamp(20px, 5vw, 24px); }
.ag-sobre { display: grid; gap: 20px; align-items: center; }
@media (min-width: 760px) { .ag-sobre { grid-template-columns: 300px minmax(0, 1fr); gap: 36px; } }
.ag-sobre-foto { width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: cover; border-radius: 18px; border: 1px solid var(--linha); }
.ag-sobre p { color: var(--mut); font-size: 16px; line-height: 1.6; margin: 8px 0 0; max-width: 60ch; }
.ag-time { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ag-time li { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 99px; background: var(--sup); border: 1px solid var(--linha); }
.ag-time .ag-av { width: 40px; height: 40px; font-size: 13px; }
.ag-time b { display: block; font-size: 14px; }
.ag-time small { display: block; color: var(--mut); font-size: 12px; }
#trabalhos .ag-galeria { margin-top: 14px; }
.ag-onde-grade { display: grid; gap: 18px; margin-top: 14px; }
@media (min-width: 760px) { .ag-onde-grade { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.ag-mapa { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--linha); border-radius: 16px; background: var(--sup2); filter: grayscale(.85) contrast(1.05); }
html[data-tema="escuro"] .ag-mapa { filter: grayscale(1) invert(.9) contrast(.95); }
.ag-ende { display: flex; gap: 10px; margin: 0; font-size: 15px; }
.ag-ende .i { color: var(--acento-txt); margin-top: 2px; }
.ag-ende b { display: block; }
.ag-ende span { color: var(--mut); }
.ag-ende b { color: var(--tinta); }
.ag-onde-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ag-onde-botoes .ag-btn { min-height: 46px; font-size: 15px; }

/* capa sem foto: o tema da loja, a logo em cima do nome e a mesma logo enorme e apagada ao fundo */
.ag-capa.sem { min-height: min(54vh, 460px); background: var(--sup); color: var(--tinta); overflow: hidden; border-bottom: 1px solid var(--linha); }
.ag-capa.sem::before { background: linear-gradient(90deg, var(--sup) 30%, color-mix(in srgb, var(--sup) 40%, transparent) 75%); }
.ag-capa.sem .ag-capa-frase { color: var(--mut); }
.ag-capa.sem .ag-btn.sec { background: var(--sup2); color: var(--tinta); border-color: var(--linha2); backdrop-filter: none; }
.ag-capa-agua { position: absolute; right: -6%; top: 50%; width: min(72vh, 620px); height: min(72vh, 620px); transform: translateY(-50%); object-fit: contain; opacity: .14; border-radius: 50%; color: var(--acento-txt); }
.ag-capa-agua .i, span.ag-capa-agua svg { width: 100%; height: 100%; stroke-width: .8; }
.ag-capa-logo { width: 84px; height: 84px; border-radius: 22px; object-fit: cover; margin-bottom: 6px; border: 1px solid var(--linha2); background: var(--bg); }
.ag-capa-logo.ic-logo { display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); border: 0; }
.ag-capa-logo.ic-logo .i { width: 44px; height: 44px; }
@media (max-width: 700px) { .ag-capa.sem { min-height: 400px; } .ag-capa.sem::before { background: linear-gradient(0deg, var(--sup) 35%, color-mix(in srgb, var(--sup) 55%, transparent)); } .ag-capa-agua { right: -30%; top: 34%; width: 380px; height: 380px; } }

@media (min-width: 760px) { .ag-sobre.sem-foto, .ag-onde-grade.sem-mapa { grid-template-columns: minmax(0, 1fr); } .ag-onde-grade.sem-mapa .ag-onde-info { max-width: 560px; } }

/* ===== a cara de cada ramo: superfícies, cantos e letra dos títulos (a cor de destaque vem do agendar.js) ===== */
.ag-tit, .ag-h2, .ag-capa-nome, .ag-nome, .ag-quando, .ag-h3, .ag-resumo h3, .ag-folha h2, .ag-horas-topo b { font-family: var(--titulo, "Bricolage Grotesque", sans-serif); }
html[data-ramo="salao"] { --bg: #f7efe8; --sup: #fffaf6; --sup2: #f9f1ea; --linha: #ead8cc; --linha2: #d9c1b2; --tinta: #2b1d19; --mut: #7a6259; --raio: 18px;
  --titulo: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
html[data-ramo="salao"] .ag-capa-nome, html[data-ramo="salao"] .ag-h2, html[data-ramo="salao"] .ag-tit { font-weight: 600; letter-spacing: -.005em; }
html[data-ramo="salao"] .ag-capa.sem { background: linear-gradient(160deg, #fffaf6 0%, #f3e3d8 100%); }
html[data-ramo="unhas"] { --bg: #fcf1f3; --sup: #ffffff; --sup2: #fdf5f7; --linha: #f1d9e0; --linha2: #e6c2cd; --tinta: #2e1b22; --mut: #86646f; --raio: 22px; }
html[data-ramo="unhas"] .ag-btn, html[data-ramo="unhas"] .ag-hora, html[data-ramo="unhas"] .ag-dia, html[data-ramo="unhas"] .ag-destaques li { border-radius: 999px; }
html[data-ramo="unhas"] .ag-dia, html[data-ramo="unhas"] .ag-destaques li { border-radius: 20px; }
html[data-ramo="unhas"] .ag-capa.sem { background: radial-gradient(120% 90% at 85% 10%, #f8dbe4 0%, #fdf2f5 55%, #ffffff 100%); }
html[data-ramo="cilios"] { --bg: #f6f1f8; --sup: #fffdff; --sup2: #f8f3fa; --linha: #e5dbea; --linha2: #d3c4db; --tinta: #271c2d; --mut: #74647c; --raio: 16px;
  --titulo: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
html[data-ramo="cilios"] .ag-capa-nome, html[data-ramo="cilios"] .ag-h2 { font-weight: 500; letter-spacing: .01em; }
html[data-ramo="cilios"] .ag-serv, html[data-ramo="cilios"] .ag-hora, html[data-ramo="cilios"] .ag-dia { border-width: 1px; }
html[data-ramo="cilios"] .ag-capa.sem { background: linear-gradient(170deg, #fffdff 0%, #eee3f3 100%); }
html[data-ramo="estetica"] { --bg: #f1f5f1; --sup: #ffffff; --sup2: #f6f9f6; --linha: #dbe5dd; --linha2: #c3d3c7; --tinta: #1b2620; --mut: #5f6f66; --raio: 10px; }
html[data-ramo="estetica"] .ag-capa-nome, html[data-ramo="estetica"] .ag-h2 { font-weight: 700; letter-spacing: -.02em; }
html[data-ramo="estetica"] .ag-capa.sem { background: linear-gradient(180deg, #ffffff 0%, #e6efe8 100%); }
html[data-ramo="pet"] { --bg: #fff6ea; --sup: #ffffff; --sup2: #fffaf3; --linha: #f1e1cb; --linha2: #e6cca9; --tinta: #2a1d10; --mut: #7d6650; --raio: 22px; }
html[data-ramo="pet"] .ag-capa-nome, html[data-ramo="pet"] .ag-h2 { font-weight: 800; }
html[data-ramo="pet"] .ag-btn { border-radius: 16px; }
html[data-ramo="pet"] .ag-capa.sem { background: radial-gradient(110% 90% at 90% 0%, #ffe2c2 0%, #fff6ea 60%); }
html[data-tema="claro"] .ag-capa.sem::before { background: linear-gradient(90deg, color-mix(in srgb, var(--sup) 92%, transparent) 25%, transparent 75%); }
html[data-tema="claro"] .ag-capa-agua { opacity: .12; }
html[data-tema="claro"] body { background: var(--bg); }
@media (max-width: 440px) { .ag-serv-foto { display: none; } }

/* demo de lead sem logo: o espaço da logo dele, pontilhado na cor da loja (ele se imagina ali) */
.logo-vaga { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 1px; border: 2px dashed currentColor; border-radius: inherit;
  font: 800 .5rem/1.05 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-align: center; opacity: .95; }
.logo-vaga svg { width: 38%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 2px; }
.logo-vaga b { font-weight: 900; } .logo-vaga small { font-size: inherit; opacity: .8; }
.ag-capa-logo.vaga { padding: 4px; } .ag-capa-logo.vaga .logo-vaga { font-size: .66rem; }