body { font-family: 'Poppins', system-ui, sans-serif; }
html { scroll-behavior: smooth; }

/* Revelar ao rolar */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* Animações gerais */
@keyframes bump { 0%,100% { transform: scale(1) } 50% { transform: scale(1.5) } }
.bump { animation: bump .4s ease; }
@keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
.floaty { animation: floaty 5s ease-in-out infinite; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
.fade-up { animation: fadeUp .8s ease both; }
.fade-up.d1 { animation-delay: .12s } .fade-up.d2 { animation-delay: .24s } .fade-up.d3 { animation-delay: .36s }
@keyframes pop { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: none } }
.pop { animation: pop .35s ease both; }
@keyframes blob { 0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60% } }
.blob { animation: blob 12s ease-in-out infinite; }

/* ===== Slider principal (toda a largura) ===== */
.hs { position: relative; height: clamp(600px, 88svh, 780px); overflow: hidden; background: #0b0f0d; color: #fff; isolation: isolate; }
@media (min-width: 768px) { .hs { height: clamp(540px, 84vh, 780px); } }
.hs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 0s linear 1.1s; }
.hs-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s ease; z-index: 1; }
.hs-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 8s cubic-bezier(.2,.6,.3,1); }
.is-active .hs-bg { transform: scale(1); }
.hs-split .hs-bg { filter: blur(34px) saturate(1.25) brightness(.62); transform: scale(1.35); }
.hs-split.is-active .hs-bg { transform: scale(1.2); }
.hs-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,10,8,.78) 0%, rgba(6,10,8,.42) 52%, rgba(6,10,8,.12) 100%), linear-gradient(0deg, rgba(6,10,8,.65) 0%, transparent 38%); }
.hs-inner { position: relative; z-index: 2; height: 100%; max-width: 80rem; margin: 0 auto; padding: 28px 20px 104px; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.hs-solo { grid-template-rows: 1fr; }
.hs-figure { order: -1; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 0; }
.hs-figure a { display: contents; }
.hs-figure img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; border-radius: 26px; box-shadow: 0 40px 80px -24px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.12);
  opacity: 0; transform: translateY(30px) scale(.96); transition: opacity 1s ease .25s, transform 1.2s cubic-bezier(.2,.7,.2,1) .25s; }
.is-active .hs-figure img { opacity: 1; transform: none; }
.hs-text { max-width: 36rem; }
@media (min-width: 768px) {
  .hs-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: 1fr; padding: 48px 72px 112px 48px; gap: 48px; }
  .hs-solo { grid-template-columns: 1fr; }
  .hs-figure { order: 0; height: 78%; align-self: center; }
  .hs-cover .hs-inner { grid-template-columns: minmax(0, 1fr); }
}
.hs-anim { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.is-active .hs-anim { opacity: 1; transform: none; }
.is-active .hs-anim:nth-child(2) { transition-delay: .12s } .is-active .hs-anim:nth-child(3) { transition-delay: .24s }
.is-active .hs-anim:nth-child(4) { transition-delay: .36s } .is-active .hs-anim:nth-child(5) { transition-delay: .48s }
.hs-num { position: relative; display: inline-block; font-weight: 200; font-size: clamp(48px, 9vw, 112px); line-height: .9; letter-spacing: -.02em; margin-bottom: 14px; }
.hs-num::after { content: ''; position: absolute; left: -18%; right: -18%; top: 56%; height: 2px; background: currentColor; }
.hs-kicker { font-size: 11px; letter-spacing: .38em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.hs-title { font-size: clamp(26px, 5.2vw, 60px); font-weight: 300; line-height: 1.08; letter-spacing: .14em; text-transform: uppercase; text-wrap: balance; }
.hs-sub { margin-top: 14px; font-size: clamp(14px, 1.6vw, 18px); line-height: 1.6; color: rgba(255,255,255,.82); max-width: 30rem; }
.hs-cta { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #0b0f0d; font-weight: 600; font-size: 14px; letter-spacing: .04em; padding: 14px 26px; border-radius: 999px; transition: transform .25s ease, box-shadow .25s ease, gap .25s ease; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); }
.hs-cta:hover { transform: translateY(-2px); gap: 14px; }
.hs-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
.hs-lines span { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.08); }
.hs-lines span:nth-child(1) { left: 25% } .hs-lines span:nth-child(2) { left: 50% } .hs-lines span:nth-child(3) { left: 75% }
@media (min-width: 768px) { .hs-lines { display: block; } }
.hs-social { position: absolute; z-index: 3; right: 18px; top: 50%; display: none; gap: 26px; transform: translateY(-50%) rotate(90deg); transform-origin: center; white-space: nowrap; }
.hs-social a { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.75); transition: color .2s; }
.hs-social a:hover { color: #fff; }
@media (min-width: 1024px) { .hs-social { display: flex; right: -40px; } }
.hs-controls { position: absolute; z-index: 3; left: 0; right: 0; bottom: 26px; max-width: 80rem; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 768px) { .hs-controls { padding: 0 72px 0 48px; bottom: 36px; } }
.hs-progress { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .2em; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.85); }
.hs-track { position: relative; width: clamp(90px, 22vw, 260px); height: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.hs-track span { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.hs-arrow { width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; transition: background .2s, color .2s, border-color .2s; backdrop-filter: blur(6px); }
.hs-arrow:hover { background: #fff; color: #0b0f0d; border-color: #fff; }

/* Fotos de produto: quadradas ficam a cheio; verticais/horizontais aparecem inteiras sobre fundo desfocado */
.pm { position: relative; overflow: hidden; background: #f3f4f1; }
.pm-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.1); transform: scale(1.25); opacity: .55; }
.pm-img { position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.pm-fit .pm-img { object-fit: contain; }
.lift:hover .pm-img { transform: scale(1.06); }

/* Serviços (preçário) */
.svc-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid #eef0ee; }
.svc-dots { flex: 1; min-width: 12px; border-bottom: 1px dotted #c7cec9; transform: translateY(-4px); }
.svc-tab[aria-selected="true"] { background: var(--btn, var(--brand)); color: #fff; border-color: transparent; }
.svc-panel[hidden] { display: none; }

/* Folha de marcação (modal) */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(6,10,8,.5); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; }
.sheet.open { opacity: 1; visibility: visible; transition: opacity .25s; }
.sheet-box { width: 100%; max-width: 30rem; max-height: 92svh; overflow-y: auto; background: #fff; border-radius: 26px 26px 0 0; padding: 22px 20px 24px; transform: translateY(40px); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.sheet.open .sheet-box { transform: none; }
@media (min-width: 640px) { .sheet { align-items: center; } .sheet-box { border-radius: 26px; } }

/* Cartões */
.lift { transition: transform .3s ease, box-shadow .3s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 18px 30px -12px rgba(0,0,0,.18); }
.shine { position: relative; overflow: hidden; }
.shine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; }
.shine:hover::after { transform: translateX(120%); }

/* Admin */
.nav-link { transition: background .2s, transform .2s; }
.nav-link:hover { transform: translateX(4px); }
::-webkit-scrollbar { width: 8px; height: 8px } ::-webkit-scrollbar-thumb { background: #cbd5d1; border-radius: 8px }

/* Respeitar quem pede menos animação no sistema */
/* Botões em verde suave (cores por loja em --btn / --btn-h, definidas no <body>) */
.btn-soft { background: var(--btn, #357a52); box-shadow: 0 10px 24px -14px var(--btn, #357a52); }
.btn-soft:hover { background: var(--btn-h, #2b6544); }
.btn-soft:disabled { background: #d1d5db; box-shadow: none; }

/* Rodapé verde com flores animadas (só decoração: aria-hidden, sem cliques) */
.foot { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, var(--foot, #2f5c48), var(--foot-2, #244a39)); }
.foot-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.flor { position: absolute; color: #f9d5df; opacity: .55; transform-origin: 50% 100%; animation: flor-balanca 6s ease-in-out infinite; }
.flor svg { width: 100%; height: 100%; display: block; animation: flor-gira 24s linear infinite; }
.flor.f2 { color: #fff3c4; animation-duration: 7.5s; animation-delay: -2s; }
.flor.f3 { color: #ffffff; opacity: .35; animation-duration: 9s; animation-delay: -4s; }
.petala { position: absolute; top: -20px; width: 12px; height: 12px; background: #f9d5df; opacity: 0; border-radius: 150% 0 150% 0; animation: petala-cai 11s linear infinite; }
.petala:nth-child(2n) { background: #fff3c4; width: 9px; height: 9px; }
@keyframes flor-balanca { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg) translateY(-4px); } }
@keyframes flor-gira { to { transform: rotate(360deg); } }
@keyframes petala-cai {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  10% { opacity: .7; }
  50% { transform: translate(40px, 200px) rotate(200deg); }
  90% { opacity: .5; }
  100% { transform: translate(-20px, 420px) rotate(420deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .petala { display: none; }
}