/* Doce Amor — site (sistema do prompt de referência) */
:root {
  --fundo: #fdf8f3;
  --fundo-2: #f5f0eb;
  --rosa: #e4a4bd;
  --tinta: #262626;
  --tinta-70: rgba(38, 38, 38, .7);
  --tinta-30: rgba(38, 38, 38, .3);
  --linha: rgba(38, 38, 38, .1);
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --lateral: clamp(16px, 4vw, 64px);
  --nav: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: var(--nav); -webkit-text-size-adjust: 100%; scrollbar-color: var(--rosa) var(--fundo-2); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: 'League Spartan', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fundo);
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--rosa); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }

h1, h2, h3 { margin: 0; font-weight: 900; letter-spacing: -.05em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.utilitario { font-size: 10px; font-weight: 900; letter-spacing: .4em; text-transform: uppercase; }
.destaque { font-style: italic; font-weight: 700; text-transform: lowercase; color: var(--rosa); }

/* ---------- movimentos base ---------- */
.mascara { display: block; overflow: hidden; padding: 0 .08em .06em; margin: 0 -.08em -.06em; }
.mascara > span { display: block; }
.js .revela { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--curva), transform 1s var(--curva); transition-delay: var(--d, 0s); }
.js .revela.ativo { opacity: 1; transform: translateY(0); }
/* títulos: palavra por palavra */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .08em; margin: 0 -.06em -.08em; }
.palavra > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--curva); transition-delay: calc(var(--i) * 70ms); }
[data-palavras].ativo .palavra > span { transform: translateY(0); }
/* entrada do topo ao carregar */
.js .entra { opacity: 0; transform: translateY(24px); }
.pronto .entra { opacity: 1; transform: none; transition: opacity 1.1s var(--curva) var(--d), transform 1.1s var(--curva) var(--d); }
.js h1 .mascara > span { transform: translateY(105%); }
.pronto h1 .mascara > span { transform: none; transition: transform 1.3s var(--curva); }
.pronto h1 .mascara:nth-child(2) > span { transition-delay: .12s; }
/* foto que corre dentro da moldura */
[data-px] { scale: 1.14; translate: 0 var(--py, 0%); transition: scale 1s var(--curva); will-change: translate; }

/* ---------- navegação ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--nav);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--lateral);
  background: rgba(253, 248, 243, .8);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(38, 38, 38, .05);
  transition: transform .8s var(--curva);
}
.nav.some { transform: translateY(-100%); }
.nav .logo { font-weight: 900; font-size: 20px; letter-spacing: -.02em; text-transform: uppercase; }
.nav ul { display: flex; gap: 44px; margin: 0; padding: 0; list-style: none; }
.nav ul a { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; transition: color .4s var(--curva); }
.nav ul a:hover { color: var(--rosa); }
.botao {
  justify-self: end;
  display: inline-block;
  padding: 12px 32px 10px;
  border-radius: 999px;
  background: var(--rosa); color: var(--tinta);
  font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase;
  transition: background-color .6s var(--curva), color .6s var(--curva);
}
.botao:hover { background: var(--tinta); color: var(--fundo); }

/* ---------- filme de abertura (vídeo controlado pela rolagem) ---------- */
.filme { position: relative; height: 380vh; }
.filme-tela { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #f7c9d6 url(video/abertura-capa.jpg) center / cover no-repeat; }
.filme-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.filme-fim {
  position: absolute; left: 0; right: 0; bottom: 9vh; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; padding: 0 var(--lateral);
  opacity: 0; transform: translateY(20px); pointer-events: none;
}
.filme-fim .apoio { max-width: 34ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: var(--tinta); }
.filme-fim .botao { justify-self: auto; }
.filme-fim.ativo { pointer-events: auto; }
.filme .rolar { color: var(--tinta); }

/* tudo depois do filme sobe como uma capa por cima dele */
.capa { position: relative; z-index: 6; margin-top: -70vh; background: var(--fundo); border-radius: 40px 40px 0 0; box-shadow: 0 -30px 60px -30px rgba(38, 38, 38, .25); }

/* ---------- palco do topo (rolagem guiada) ---------- */
.palco { position: relative; height: 330vh; }
.tela { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.abertura {
  height: 100%;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 32px;
  align-items: center;
  padding: calc(var(--nav) + 24px) var(--lateral) 40px;
}
.abertura .texto { grid-column: 1 / span 7; position: relative; will-change: transform, opacity; }
.abertura h1 { font-size: 15vw; line-height: .8; margin-left: -.05em; }
.abertura .apoio { margin-top: 44px; max-width: 26ch; font-size: clamp(20px, 1.75vw, 24px); line-height: 1.4; color: var(--tinta-70); }
.seta-cta {
  margin-top: 40px;
  display: inline-flex; align-items: center; gap: 14px;
  padding-bottom: 8px; border-bottom: 2px solid var(--rosa);
  font-size: 12px; font-weight: 900; letter-spacing: .3em; text-transform: uppercase;
}
.seta-cta svg { width: 22px; height: 22px; transition: transform .8s var(--curva); }
.seta-cta:hover svg { transform: translateX(8px); }
.abertura .meta { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 10px 32px; color: var(--tinta-70); }
.abertura .cartao-wrap { grid-column: 8 / span 5; position: relative; }
.cartao { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--nav) - 80px); margin-left: auto; }

/* a foto que sai do cartão e toma a tela */
.expande { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; overflow: hidden; border-radius: 24px; clip-path: inset(100% 0 0 0); will-change: width, height, transform; }
.expande img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.veu { position: absolute; inset: 0; background: #262626; opacity: 0; }
.selo {
  position: absolute; left: -64px; bottom: 10%; z-index: 4;
  width: 160px; height: 160px; border-radius: 50%;
  background: var(--rosa); color: var(--tinta);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.selo b { font-size: 30px; font-style: italic; font-weight: 700; line-height: 1; }
.selo span { font-size: 8px; font-weight: 900; letter-spacing: .3em; text-transform: uppercase; text-align: center; line-height: 1.6; }
.selo-quica { animation: quica-lento 4s ease-in-out infinite; }
@keyframes quica-lento { 0%, 100% { translate: 0 -5%; } 50% { translate: 0 5%; } }
.expande-titulo {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-size: clamp(4rem, 13vw, 13rem); font-weight: 900; letter-spacing: -.05em; line-height: .82; color: var(--fundo);
  pointer-events: none;
}
.expande-titulo .destaque { color: var(--rosa); }
.expande-titulo .mascara > span { transform: translateY(110%); }
.rolar { position: absolute; left: 50%; bottom: 22px; z-index: 3; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--tinta-70); }
.rolar i { width: 1px; height: 40px; background: var(--tinta); transform-origin: top; animation: risco 2s var(--curva) infinite; }
@keyframes risco { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* a página sobe como uma folha por cima da foto */
.folha { position: relative; z-index: 5; margin-top: -70vh; background: var(--fundo); border-radius: 40px 40px 0 0; box-shadow: 0 -30px 60px -30px rgba(38, 38, 38, .25); }

/* ---------- história ---------- */
.historia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 32px; align-items: center; padding: clamp(96px, 12vw, 160px) var(--lateral); }
.historia-foto { grid-column: 1 / span 5; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; }
.historia-foto img, .peca .foto img { width: 100%; height: 100%; object-fit: cover; }
.historia-foto:hover img, .peca:hover .foto img { scale: 1.22; }
.historia-texto { grid-column: 7 / span 6; }
.historia-texto .utilitario, .local-texto .utilitario { color: var(--rosa); }
.historia h2 { margin-top: 20px; font-size: clamp(3rem, 6vw, 5rem); line-height: .88; }
.historia-texto p { margin-top: 32px; max-width: 46ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: var(--tinta-70); }
.historia-texto .seta-cta { margin-top: 40px; }

/* ---------- o que fazemos ---------- */
.servicos { background: var(--fundo-2); padding: clamp(96px, 12vw, 160px) var(--lateral); }
.servicos .intro, .vitrine .intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: end; margin-bottom: 72px; }
.servicos h2, .vitrine h2 { grid-column: 1 / span 8; font-size: clamp(3.5rem, 8vw, 6rem); line-height: .88; }
.servicos .intro p { grid-column: 9 / span 4; color: var(--tinta-70); }
.grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linha); border-left: 1px solid var(--linha); }
.servico { padding: 40px; background: var(--fundo); border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.js .servico.revela { transition: background-color .7s var(--curva), opacity 1s var(--curva) var(--d, 0s), transform 1s var(--curva) var(--d, 0s); }
.servico:nth-child(2) { --d: .12s; }
.servico:nth-child(3) { --d: .24s; }
.servico:hover { background: var(--rosa); }
.servico svg { width: 40px; height: 40px; color: var(--rosa); transition: color .7s var(--curva), transform .9s var(--curva); }
.servico:hover svg { color: var(--tinta); transform: rotate(-8deg) scale(1.1); }
.servico h3 { margin-top: 48px; font-size: 18px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.servico p { margin-top: 14px; font-size: 15px; line-height: 1.7; color: var(--tinta-70); }
.servico:hover p { color: var(--tinta); }

/* ---------- faixa corrida ---------- */
.faixa { padding: clamp(56px, 7vw, 96px) 0; overflow: hidden; background: var(--fundo); }
.faixa p { display: flex; width: max-content; white-space: nowrap; font-size: clamp(3rem, 8vw, 7rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.05; will-change: transform; }
.faixa p span { padding-right: .3em; }
.faixa-rosa { margin-top: 8px; color: var(--rosa); font-style: italic; font-weight: 700 !important; }

/* ---------- vitrine escalonada ---------- */
.vitrine { padding: clamp(48px, 6vw, 96px) 0 clamp(120px, 12vw, 200px); }
.vitrine .intro { margin-bottom: clamp(16px, 3vh, 40px); padding: 0 var(--lateral); }
.vitrine .intro .seta-cta { grid-column: 10 / span 3; justify-self: end; margin: 0; }
/* trilho horizontal (mesmo esquema do SillageOS): sem animação, rola de lado com o dedo */
.balcao { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.balcao::-webkit-scrollbar { display: none; }
.pecas { list-style: none; margin: 0; padding: 24px var(--lateral) 64px; display: flex; width: max-content; gap: clamp(24px, 4vw, 64px); }
.pecas li { width: clamp(220px, min(28vw, calc((100svh - 400px) * .72)), 420px); flex-shrink: 0; scroll-snap-align: start; }
.pecas li:nth-child(even) { margin-top: clamp(24px, 5vh, 72px); }
/* com animação: a seção fica presa e a rolagem vertical desliza as peças */
.balcao.anima { overflow: visible; }
.balcao.anima .balcao-palco { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav); overflow: hidden; }
.balcao.anima .pecas { padding-bottom: 24px; will-change: transform; }
.balcao.anima .pecas li > .peca { display: block; will-change: transform, opacity; }
.peca .foto { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--fundo-2); }
.peca .ver {
  position: absolute; left: 50%; top: 50%;
  width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
  background: #000; color: #fff;
  display: grid; place-items: center; text-align: center;
  font-size: 10px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4;
  opacity: 0; transform: scale(.6);
  transition: opacity .6s var(--curva), transform .6s var(--curva);
}
.peca:hover .ver, .peca:focus-visible .ver { opacity: 1; transform: scale(1); }
.peca .utilitario { display: block; margin-top: 28px; color: var(--rosa); letter-spacing: .3em; }
.peca h3 { margin-top: 10px; font-size: clamp(1.9rem, 3vw, 2.25rem); line-height: 1; letter-spacing: -.03em; }
.peca .tags { margin-top: 10px; font-size: 15px; color: var(--tinta-70); }

/* ---------- localização ---------- */
.local { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 32px; align-items: stretch; padding: 0 var(--lateral) clamp(96px, 12vw, 160px); }
.local-texto { grid-column: 1 / span 5; align-self: center; }
.local h2 { margin-top: 20px; font-size: clamp(3.5rem, 8vw, 6rem); line-height: .88; }
.local-dados { margin: 48px 0 0; display: grid; gap: 28px; }
.local-dados dt { color: var(--tinta-30); }
.local-dados dd { margin: 8px 0 0; font-size: 22px; line-height: 1.35; font-weight: 500; }
.local-mapa { grid-column: 7 / span 6; position: relative; min-height: 520px; border-radius: 24px; overflow: hidden; background: var(--rosa); }
.local-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.local-reserva { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 40px; font-size: clamp(28px, 3vw, 40px); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.local-reserva span { font-size: 10px; font-weight: 900; letter-spacing: .4em; text-transform: uppercase; }

/* ---------- rodapé ---------- */
.rodape { position: relative; z-index: 5; background: var(--fundo-2); padding: clamp(80px, 10vw, 128px) var(--lateral) 0; }
.rodape .colunas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 32px; }
.rodape .marca { grid-column: 1 / span 5; }
.rodape .marca .logo { font-size: clamp(40px, 5vw, 64px); font-weight: 900; letter-spacing: -.05em; line-height: .85; text-transform: uppercase; }
.rodape .marca p { margin-top: 28px; max-width: 34ch; color: var(--tinta-70); }
.rodape .links { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.rodape h4 { margin: 0 0 24px; color: var(--rosa); font-size: 10px; font-weight: 900; letter-spacing: .3em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.rodape .links a, .rodape .links p { display: block; font-size: 15px; line-height: 1.9; }
.rodape .links a:hover { color: var(--rosa); }
.rodape .fim { margin-top: 96px; padding: 24px 0 28px; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-30); }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .nav nav { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .abertura { grid-template-columns: 1fr; align-content: start; padding-top: calc(var(--nav) + 20px); }
  .abertura .texto, .abertura .cartao-wrap { grid-column: 1; }
  .abertura h1 { font-size: 25vw; }
  .abertura .apoio { margin-top: 24px; font-size: 18px; }
  .abertura .seta-cta { margin-top: 24px; }
  .abertura .meta { display: none; }
  .abertura .cartao-wrap { margin-top: 28px; }
  .cartao { aspect-ratio: auto; width: 100%; height: calc(100svh - var(--nav) - 40vw - 230px); min-height: 180px; max-height: none; }
  .selo { left: auto; right: 12px; top: -56px; bottom: auto; width: 112px; height: 112px; }
  .selo b { font-size: 24px; }
  .rolar { display: none; }
  .historia, .local, .servicos .intro, .vitrine .intro { grid-template-columns: 1fr; }
  .historia-foto, .historia-texto, .local-texto, .local-mapa, .servicos h2, .servicos .intro p, .vitrine h2, .vitrine .intro .seta-cta { grid-column: 1; justify-self: start; }
  /* o conteúdo do mapa é todo absoluto: com justify-self start a caixa ficava com largura 0 */
  .local-mapa { min-height: 380px; justify-self: stretch; width: 100%; }
  .grade { grid-template-columns: 1fr; }
  .rodape .marca, .rodape .links { grid-column: 1 / -1; }
  .palco { height: 300vh; }
  .filme { height: 330vh; }
  .capa { border-radius: 28px 28px 0 0; }
  /* no celular o vídeo é vertical 9:16 (1080x1920) e preenche a tela */
  .filme-tela { background-image: url(video/abertura-mobile-capa.jpg); }
  .filme-fim { top: calc(var(--nav) + 6vh); bottom: auto; }
  .folha { border-radius: 28px 28px 0 0; }
}
@media (max-width: 640px) {
  .botao { padding: 11px 20px 9px; font-size: 10px; }
  .pecas li { width: min(72vw, calc((100svh - 380px) * .72)); }
  .vitrine { padding-bottom: 72px; }
  .rodape .links { grid-template-columns: 1fr 1fr; }
  .servico { padding: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .palco { height: auto; }
  .filme { height: 100svh; }
  .filme-tela { background-image: url(video/abertura-fim.jpg); }
  .filme-video, .filme .rolar { display: none; }
  .filme-fim { opacity: 1; transform: none; pointer-events: auto; }
  .capa { margin-top: 0; }
  .tela { position: relative; height: auto; min-height: 100svh; }
  .expande, .expande-titulo, .rolar { display: none; }
  .cartao { background: url(img/abertura.jpg) center / cover; border-radius: 24px; }
  .folha { margin-top: 0; }
  [data-px] { scale: 1; translate: none; }
}