/* Base de todos os modelos de site. Cores vêm do tom (variáveis no <html>). */
@font-face { font-family: "Gloock"; src: url(fontes/gloock.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url(fontes/bigshoulders.woff) format("woff"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(fontes/archivo.woff) format("woff"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Bodoni"; src: url(fontes/bodoni.woff) format("woff"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Bodoni"; src: url(fontes/bodoni-italico.woff) format("woff"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url(fontes/jost.woff) format("woff"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Marcellus"; src: url(fontes/marcellus.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Hanken"; src: url(fontes/hanken.woff) format("woff"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Instrument"; src: url(fontes/instrument.woff) format("woff"); font-weight: 400 600; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--fundo); color: var(--tinta); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.estrelas { color: var(--acento); letter-spacing: 1px; white-space: nowrap; }
.previa-faixa { position: sticky; top: 0; z-index: 90; background: #141517; color: #C7F135; font: 600 12px/1.4 system-ui, sans-serif; text-align: center; padding: 7px 16px; }
.credito { font: 500 12px/1.4 system-ui, sans-serif; text-decoration: none; opacity: .6; }
.credito:hover { opacity: 1; }
.credito b { font-weight: 800; letter-spacing: -.02em; }
.credito i { font-style: normal; color: var(--acento); }

/* barra de agendar no celular */
.barra-agendar { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; display: none; gap: 8px; padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--fundo) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent); }
.barra-agendar a { display: grid; place-items: center; min-height: 50px; text-decoration: none; font: 700 16px/1 system-ui, sans-serif; border-radius: 12px; }
.ba-principal { flex: 1; background: var(--acento); color: var(--sobre-acento); }
.ba-whats { width: 54px; background: color-mix(in srgb, var(--tinta) 10%, transparent); color: var(--tinta); }
@media (max-width: 760px) { .barra-agendar { display: flex; } body { padding-bottom: 76px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* logo do salão no topo */
.com-logo { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.com-logo span { overflow: hidden; text-overflow: ellipsis; }
.site-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* botão flutuante do WhatsApp (salão com o WhatsApp ligado no LotaX) */
.zap-flutuante { position: fixed; z-index: 85; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 8px; border-radius: 999px; background: #25D366; color: #08361C; text-decoration: none; font: 500 15px/1.2 system-ui, -apple-system, sans-serif;
  box-shadow: 0 10px 30px -8px rgba(18, 140, 70, .55), 0 2px 6px rgba(0,0,0,.12); animation: zf-entra .5s cubic-bezier(.2,.9,.3,1.2) 1.2s both; }
.zap-flutuante b { font-weight: 700; }
.zf-icone { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #25D366; flex: none; position: relative; }
.zf-icone svg { width: 26px; height: 26px; }
.zf-icone::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: zf-pulso 2.6s ease-out 2s 3; }
.zap-flutuante:hover { background: #1FBE5B; }
@keyframes zf-entra { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes zf-pulso { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@media (max-width: 760px) {
  /* no celular: só o ícone, acima da barra de agendar, sem cobrir o texto */
  .zap-flutuante { bottom: calc(84px + env(safe-area-inset-bottom)); right: 14px; padding: 0; background: transparent; box-shadow: none; }
  .zf-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .zf-icone { width: 56px; height: 56px; background: #25D366; color: #fff; box-shadow: 0 10px 24px -8px rgba(18, 140, 70, .6), 0 2px 6px rgba(0,0,0,.15); }
  .zf-icone svg { width: 30px; height: 30px; }
  .zf-icone::after { border-color: #25D366; }
}

/* selo "aberto hoje" dos modelos novos */
.selo-hoje { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.2 system-ui, -apple-system, sans-serif; }
.selo-hoje i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .45; }
.selo-hoje.aberto i { background: #2BD46A; opacity: 1; box-shadow: 0 0 0 4px rgba(43, 212, 106, .22); }