/* =========================================================
   LePolli Nail Spa - Landing page v1
   Paleta oficial da marca + sistema de design clean premium
   ========================================================= */

:root {
  /* Paleta oficial */
  --branco: #F4F2EE;
  --areia: #E6E2D8;
  --dourado: #8B6D4F;
  --taupe: #B8A593;
  --greige: #C7C4BD;
  --escuro: #3F3530;

  /* Derivados */
  --dourado-claro: #A2825F;
  --texto-suave: #6B6058;
  --linha: #D8D3C8;
  --sombra-suave: 0 18px 50px rgba(63, 53, 48, 0.08);
  --sombra-card: 0 10px 30px rgba(63, 53, 48, 0.06);

  /* Tipografia */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Medidas */
  --container: 1200px;
  --radius: 16px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }

/* scroll suave é controlado pelo Lenis (JS); scroll-behavior nativo aqui conflita e trava o controle */
/* background no html é o fallback final; o body fica transparente para revelar a camada de cenas fixa */
html { scroll-behavior: auto; background: var(--branco); overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--sans);
  color: var(--escuro);
  background: transparent;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.4em;
  letter-spacing: 0.2px;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

p { margin: 0 0 1rem; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: clamp(64px, 9vw, 120px) 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dourado);
  margin: 0 0 18px;
  display: block;
}

/* Todos os títulos/headlines de seção centralizados (consistência no site todo). */
.section-intro { max-width: 720px; margin: 0 auto; text-align: center; }
.section-intro.center { margin: 0 auto; text-align: center; }

.lead { font-size: 1.12rem; color: var(--texto-suave); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary {
  background: #25D366; /* verde padrao do WhatsApp (todos os CTAs de agendamento) */
  color: #fff;
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.28);
}
.btn-primary:hover {
  background: #1EBE5B;
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--escuro);
  border-color: var(--taupe);
}
.btn-ghost:hover { background: var(--areia); border-color: var(--dourado); }

.btn .wa-ico { width: 18px; height: 18px; fill: currentColor; }

.btn-microcopy {
  display: block;
  font-size: 0.82rem;
  color: var(--texto-suave);
  margin-top: 12px;
}

/* ---------- Barra de progresso de scroll ---------- */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 200;
  background: linear-gradient(90deg, var(--taupe), var(--dourado));
  will-change: width;
}

/* ---------- Header fixo ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* No topo (sobre o hero escuro): vidro apple translúcido escuro, a foto do
     fundo aparece desfocada através do header (sem faixa sólida). */
  background: rgba(40, 34, 30, 0.16);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.35s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled {
  /* Ao rolar para as seções claras: vidro claro para legibilidade do texto escuro */
  background: rgba(244, 242, 238, 0.85);
  border-color: var(--linha);
  box-shadow: 0 2px 20px rgba(63, 53, 48, 0.05);
}
/* No topo o logo e os links ficam claros (sobre o vidro escuro). Ao rolar voltam
   ao escuro padrão (vidro claro). */
.site-header:not(.scrolled) .logo { color: var(--branco); }
.site-header:not(.scrolled) .nav-links a { color: rgba(244, 242, 238, 0.88); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.28em;
  font-weight: 600;
  color: var(--escuro);
  padding-left: 2px;
}
.logo span { color: var(--dourado); }
.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--dourado); }
.header-cta { display: inline-flex; }
.header-cta .btn { padding: 11px 22px; font-size: 0.86rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }

/* ---------- Hero (foto do ambiente em fundo cheio) ----------
   A logo "LP" e o balcão escultural vivem no lado ESQUERDO da foto.
   Por isso o conteúdo fica à DIREITA e o overlay é direcional:
   quase transparente à esquerda (revela o espaço) e mais denso à
   direita (garante contraste AA do texto escuro). */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Ocupa a tela inteira e centraliza o conteúdo na altura (descontando o header). */
  min-height: 100vh;
  padding-top: 128px;
  padding-bottom: 104px;
  overflow: hidden;
  /* Hero sem fundo próprio: o fundo do site é a camada de cena fixa global (a
     recepção do Ato 1). O hero fica transparente e a imagem antes/depois + texto
     ficam em primeiro plano. A transição para a 2ª seção é contínua, conduzida
     pelo scrim que escurece no scroll (sem corte seco). */
  background: var(--escuro);
}
/* No modo cenas o hero fica transparente e revela a cena fixa (recepção) já
   escurecida pelo scrim DARK, igual à prova. O fundo var(--escuro) acima é o
   fallback sem JS, mantendo o texto claro legível. */
.scenes-on .hero { background: transparent; }
/* Véu direcional para LEITURA do texto: transparente à esquerda (imagem + cena
   aparecem), adensa em off-white à direita atrás do texto. Some na base (máscara
   vertical) para não criar linha contra a 2ª seção. */
.hero-overlay {
  display: none; /* hero agora é escuro; o véu off-white de leitura não é necessário */
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(230,226,216,0) 0%,
    rgba(230,226,216,0) 30%,
    rgba(230,226,216,0.50) 50%,
    rgba(230,226,216,0.82) 74%,
    rgba(230,226,216,0.92) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
.hero::after { content: none; }
/* Coluna única centralizada em todas as larguras: carrossel full-bleed no topo,
   texto centralizado embaixo (mesmo layout no mobile e no desktop). */
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.hero-media { display: none; } /* a imagem única deu lugar ao carrossel em todas as telas */
.hero-text {
  width: 100%;
  max-width: 680px;
  min-width: 0; /* permite encolher; impede que o carrossel full-bleed estique a coluna */
  margin: 0 auto;
  text-align: center;
}
/* Hero escuro: texto claro com sombra suave escura para leitura sobre a cena. */
.hero-text .eyebrow { color: var(--taupe); text-shadow: 0 1px 12px rgba(0,0,0,0.4); }
.hero-headline {
  margin-bottom: 0.3em;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  color: var(--branco);
  text-shadow: 0 1px 16px rgba(0,0,0,0.45);
}
.hero-headline .ln { display: block; overflow: hidden; }
.hero-headline .ln > span { display: block; }
.hero-text .lead {
  max-width: 46ch;
  margin-top: 0.9em;
  color: var(--greige);
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.hero-actions { margin-top: 30px; }
.hero-text .btn-microcopy { color: var(--greige); }
.hero-proof {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 10px 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.stars { color: var(--dourado); letter-spacing: 2px; font-size: 1rem; }
.hero-proof strong { font-weight: 600; color: var(--branco); }
.hero-proof span { color: var(--greige); font-size: 0.9rem; }

/* Faixa de fotos de unhas (mobile). Rola sozinha (JS) e aceita arrastar.
   Oculta no desktop, onde vale a imagem única da coluna ao lado. */
.nail-strip {
  display: block;
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw; /* full-bleed robusto: vai de borda a borda do site */
  margin-top: 18px;
  margin-bottom: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.nail-strip::-webkit-scrollbar { display: none; }
.nail-track { display: flex; gap: 10px; width: max-content; padding: 0; }
.nail-track img {
  height: clamp(200px, 16vw, 270px);
  width: auto;
  flex: 0 0 auto;
  border-radius: 14px;
  object-fit: cover;
  pointer-events: none;
  box-shadow: 0 10px 26px -14px rgba(63, 53, 48, 0.5);
}

/* ---------- Prova social ---------- */
.prova { background: var(--escuro); color: var(--branco); }
.prova .eyebrow { color: var(--taupe); }
.prova h2 { color: var(--branco); }
.prova .lead { color: var(--greige); }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 10px 22px;
  margin-top: 22px;
}
.selo .stars { font-size: 1.05rem; }
.selo span { font-size: 0.9rem; color: var(--greige); }

/* ---------- Carrossel circular 3D (coverflow em anel) ---------- */
.carousel3d {
  position: relative;
  margin-top: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.c3d-stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 540px;
  perspective: 2000px;
  touch-action: pan-y;
  cursor: grab;
}
.c3d-stage.is-grabbing { cursor: grabbing; }
.c3d-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.c3d-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 290px;
  height: 500px;
  margin: -250px 0 0 -145px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  background: #2a2420;
  border: 1px solid rgba(244, 242, 238, 0.16);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
  transition: opacity 0.3s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  backface-visibility: hidden;
  will-change: opacity, transform;
}
.c3d-card.is-active {
  border-color: rgba(184, 165, 147, 0.7);
  box-shadow: 0 30px 64px rgba(0, 0, 0, 0.5);
}
.c3d-card.is-far { pointer-events: none; }
.c3d--flat .c3d-card.is-far { pointer-events: auto; }
.c3d-poster,
.c3d-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.c3d-video { opacity: 0; visibility: hidden; background: #2a2420; }
.c3d-card.is-playing .c3d-video { opacity: 1; visibility: visible; }
.c3d-card.is-playing .c3d-poster,
.c3d-card.is-playing .c3d-play,
.c3d-card.is-playing .c3d-cap { opacity: 0; pointer-events: none; }
/* Botão de play */
.c3d-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 999px;
  border: 1px solid rgba(244, 242, 238, 0.55);
  background: rgba(63, 53, 48, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--branco);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}
.c3d-play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 3px; }
.c3d-card:hover .c3d-play { background: var(--dourado); transform: translate(-50%, -50%) scale(1.06); }
/* Legenda em gradiente na base */
.c3d-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 20px 20px;
  background: linear-gradient(180deg, rgba(63, 53, 48, 0) 0%, rgba(35, 29, 26, 0.86) 78%);
  color: var(--branco);
  transition: opacity 0.25s ease;
}
.c3d-cap .tag {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 6px;
}
.c3d-cap .txt {
  display: block;
  font-size: 0.92rem;
  line-height: 1.4;
}
/* Setas (vidro discreto com toque dourado) */
.c3d-arrow {
  flex: 0 0 auto;
  width: 50px; height: 50px;
  border-radius: 999px;
  border: 1px solid rgba(244, 242, 238, 0.3);
  background: rgba(244, 242, 238, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--branco);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  z-index: 3;
}
.c3d-arrow svg { width: 22px; height: 22px; }
.c3d-arrow:hover { background: var(--dourado); border-color: var(--dourado); color: var(--branco); transform: translateY(-2px); }
.c3d-arrow:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; }

/* Modo flat (mobile): carrossel horizontal com scroll-snap */
.c3d--flat { gap: 8px; }
.c3d--flat .c3d-stage { height: auto; perspective: none; }
.c3d--flat .c3d-ring {
  position: static;
  transform: none !important;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 242, 238, 0.4) transparent;
}
.c3d--flat .c3d-ring::-webkit-scrollbar { height: 6px; }
.c3d--flat .c3d-ring::-webkit-scrollbar-thumb { background: rgba(244, 242, 238, 0.35); border-radius: 999px; }
.c3d--flat .c3d-card {
  position: relative;
  left: auto; top: auto;
  margin: 0;
  transform: none !important;
  opacity: 1 !important;
  flex: 0 0 78%;
  max-width: 300px;
  height: 470px;
  scroll-snap-align: center;
}

/* Carrossel 3D no MOBILE: mesmo coverflow em anel do desktop, com palco mais
   baixo, cards menores (9:16) e setas sobrepostas nas bordas para o palco ocupar
   a largura toda. O radius proporcional vem do calcRadius no JS (<=720px). */
@media (max-width: 720px) {
  .carousel3d { gap: 0; }
  .c3d-stage { height: 430px; perspective: 1200px; }
  .c3d-card {
    width: 175px;
    height: 310px;
    margin: -155px 0 0 -88px;
    border-radius: 16px;
  }
  .c3d-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px; height: 42px;
  }
  .c3d-prev { left: 0; }
  .c3d-next { right: 0; }
  .c3d-arrow:hover { transform: translateY(-50%) scale(1.06); }
  .c3d-play { width: 48px; height: 48px; }
  .c3d-cap { padding: 32px 16px 16px; }
  .c3d-cap .txt { font-size: 0.86rem; }
}

/* Cards de depoimento em texto (vidro claro translúcido sobre o fundo escuro) */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.review-card {
  background: rgba(244, 242, 238, 0.10);
  border: 1px solid rgba(244, 242, 238, 0.18);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.review-card .quote-mark {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 0.5;
  color: var(--taupe);
  display: block;
  margin-bottom: 14px;
}
.review-card p { color: var(--branco); margin-bottom: 14px; font-size: 1rem; }
.review-card .who { font-size: 0.82rem; color: var(--greige); }
.review-card .google { color: var(--dourado-claro); font-weight: 600; }

.prova-cta { margin-top: 50px; text-align: center; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  aspect-ratio: 4 / 5;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Método (faixa-manifesto com foto de fundo) ---------- */
.metodo {
  position: relative;
  overflow: hidden;
  background: var(--areia);
}
/* Foto de ambiente atrás, com véu off-white para legibilidade (sem caixa). */
.metodo::before {
  content: "";
  position: absolute; inset: 0;
  background: url("assets/fotos-espaco/lepolli-ambiente-premium-itu.webp") center/cover no-repeat;
  z-index: 0;
}
.metodo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(244,242,238,0.82), rgba(244,242,238,0.7));
  z-index: 1;
}
.metodo > .container { position: relative; z-index: 2; }
.metodo-statement {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.metodo-statement .eyebrow { color: var(--dourado); text-shadow: 0 1px 10px rgba(244,242,238,0.9); }
.metodo-statement h2 {
  margin: 14px auto 0;
  white-space: nowrap;
  text-shadow: 0 1px 16px rgba(244,242,238,0.95);
}
.metodo-statement h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--dourado);
  opacity: 0.7;
  margin: 26px auto 0;
}
.metodo-statement p {
  margin: 26px auto 0;
  max-width: 60ch;
  color: var(--escuro);
  text-shadow: 0 1px 10px rgba(244,242,238,0.9);
}
/* No mobile o título volta a quebrar (nowrap só no desktop). */
@media (max-width: 820px) {
  .metodo-statement h2 { white-space: normal; }
}

/* ---------- Serviços ---------- */
.servicos { background: var(--branco); }
.aviso-exemplo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--areia);
  border: 1px dashed var(--taupe);
  color: var(--texto-suave);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 0.82rem;
  margin-top: 18px;
}
.servicos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}
.servico-card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-card);
}
.servico-card .card-img { aspect-ratio: 4 / 3; overflow: hidden; }
.servico-card .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.servico-card:hover .card-img img { transform: scale(1.04); }
.servico-card .card-body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.servico-card .desejo {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--dourado);
  margin-bottom: 6px;
}
.servico-card h3 { margin-bottom: 0.5em; }
.servico-card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 16px;
}
.servico-card .meta span {
  font-size: 0.78rem;
  background: var(--areia);
  border-radius: 6px;
  padding: 4px 10px;
  color: var(--texto-suave);
}
.servico-card .meta .preco { color: var(--escuro); font-weight: 600; }
.servico-card dl { margin: 0 0 18px; }
.servico-card dt {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-top: 12px;
}
.servico-card dd { margin: 2px 0 0; font-size: 0.92rem; color: var(--texto-suave); }
.servico-card .card-cta { margin-top: auto; padding-top: 18px; }
.servico-card .card-cta .btn { width: 100%; justify-content: center; padding: 12px 18px; font-size: 0.88rem; }

.complementos {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.complemento {
  display: flex;
  gap: 16px;
  background: var(--areia);
  border-radius: var(--radius);
  padding: 24px 26px;
  align-items: flex-start;
}
.complemento .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--dourado); margin-top: 9px; flex: 0 0 auto;
}
.complemento h4 { font-family: var(--sans); font-weight: 600; font-size: 1rem; margin: 0 0 4px; }
.complemento p { margin: 0; font-size: 0.92rem; color: var(--texto-suave); }
.complemento .preco-ex { font-size: 0.8rem; color: var(--dourado); font-weight: 600; }

/* ---------- Experiência (texto centralizado, sem container, fotos abaixo) ---------- */
.experiencia { background: var(--areia); }
.exp-statement { max-width: 760px; margin: 0 auto; text-align: center; }
.exp-foto {
  margin: 6px auto 26px;
  max-width: 440px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sombra-card);
}
.exp-foto img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover; }
.exp-statement .eyebrow { color: var(--dourado); text-shadow: 0 1px 10px rgba(244,242,238,0.9); }
.exp-statement h2 { margin-top: 14px; text-shadow: 0 1px 16px rgba(244,242,238,0.95); }
.exp-statement .lead {
  margin: 18px auto 0;
  max-width: 54ch;
  color: var(--escuro);
  text-shadow: 0 1px 12px rgba(244,242,238,0.95);
}
.exp-points {
  list-style: none;
  margin: 44px auto 0;
  padding: 0;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.exp-points li {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 16px;
  min-height: 108px;
  padding: 22px 24px;
  font-size: 0.98rem;
  color: var(--escuro);
  background: rgba(244, 242, 238, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px -22px rgba(63,53,48,0.5);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.exp-points li:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -22px rgba(63,53,48,0.6);
}
.exp-ico {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(139, 109, 79, 0.10);
  color: var(--dourado);
}
.exp-ico svg { width: 22px; height: 22px; }
.exp-txt { line-height: 1.5; }

.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
  margin-top: 56px;
}
.galeria figure {
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--sombra-card);
}
.galeria figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.galeria figure:hover img { transform: scale(1.05); }
.galeria .tall { grid-row: span 2; }
.galeria .wide { grid-column: span 2; }

/* Biossegurança */
.bio-block {
  margin-top: 56px;
  background: var(--branco);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  box-shadow: var(--sombra-card);
}
.bio-video { position: relative; margin: 0; }
.bio-block video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius);
  background: #2a2420;
  display: block;
}
.bio-video-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--branco);
  background: rgba(63, 53, 48, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: 999px;
  pointer-events: none;
}
.bio-block h3 { margin-bottom: 0.4em; }
.bio-block ul { margin: 16px 0 0; padding-left: 18px; color: var(--texto-suave); }
.bio-block li { margin-bottom: 6px; }

/* ---------- Quem sou ---------- */
.quem-sou { background: var(--branco); }
.quem-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}
/* Texto do "Quem sou" centralizado, como as demais seções. */
.quem-grid > .reveal:last-child { text-align: center; }
.quem-fotos { position: relative; }
.quem-fotos .principal {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  aspect-ratio: 3 / 4;
}
.quem-fotos .principal img { width: 100%; height: 100%; object-fit: cover; }
.quem-fotos .secundaria {
  position: absolute;
  right: -28px;
  bottom: -34px;
  width: 46%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 6px solid var(--branco);
  box-shadow: var(--sombra-card);
  aspect-ratio: 3 / 4;
}
.quem-fotos .secundaria img { width: 100%; height: 100%; object-fit: cover; }
.quem-sou .assinatura {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--dourado);
  margin-top: 20px;
}

/* ---------- Para quem é ---------- */
.para-quem { background: var(--areia); }
.qual-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 36px;
  list-style: none;
  padding: 0;
}
.qual-list li {
  background: var(--branco);
  border-radius: var(--radius-sm);
  padding: 18px 22px 18px 50px;
  position: relative;
  font-size: 0.98rem;
  box-shadow: var(--sombra-card);
}
.qual-list li::before {
  content: "✓";
  position: absolute;
  left: 20px; top: 17px;
  color: var(--dourado);
  font-weight: 700;
}
.para-quem .nota { margin-top: 28px; font-style: italic; color: var(--texto-suave); }

/* ---------- Primeira visita (timeline) ---------- */
.primeira { background: var(--branco); }
.primeira-layout { display: grid; grid-template-columns: 1fr 0.8fr; gap: clamp(40px, 5vw, 70px); align-items: start; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 17px; top: 6px; bottom: 6px;
  width: 1px; background: var(--linha);
}
.timeline li {
  position: relative;
  padding: 0 0 26px 56px;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline .step-num {
  position: absolute;
  left: 0; top: -2px;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--areia);
  border: 1px solid var(--dourado);
  color: var(--dourado);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 1.05rem;
}
.timeline h4 { font-family: var(--sans); font-weight: 600; font-size: 1rem; margin: 4px 0 4px; }
.timeline p { margin: 0; font-size: 0.92rem; color: var(--texto-suave); }
.primeira-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  aspect-ratio: 3 / 4;
  position: sticky;
  top: 100px;
}
.primeira-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Localização ---------- */
.local { background: var(--areia); padding-bottom: clamp(120px, 14vw, 184px); }
.local-card {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  grid-template-areas:
    "head map"
    "body map";
  grid-template-rows: auto 1fr;
  gap: clamp(20px, 3vw, 36px) clamp(28px, 4vw, 52px);
  align-items: start;
  background: var(--branco);
  border-radius: var(--radius);
  padding: clamp(26px, 3.5vw, 52px);
  box-shadow: var(--sombra-card);
}
.local-head { grid-area: head; }
.local-head .eyebrow { display: block; }
.local-info { grid-area: body; }
.local-card .map-embed { grid-area: map; align-self: stretch; }
.local-info .endereco { font-size: 1.15rem; margin: 10px 0 4px; }
.local-info .cep { color: var(--texto-suave); }
.local-info dl { margin: 24px 0 0; }
.local-info dt { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dourado); margin-top: 16px; }
.local-info dd { margin: 4px 0 0; color: var(--texto-suave); }
.local-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.map-embed {
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  height: 100%;
  min-height: 360px;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.local-seo { margin-top: 24px; font-size: 0.9rem; color: var(--texto-suave); }

/* ---------- CTA final ---------- */
.cta-final {
  position: relative;
  color: var(--branco);
  text-align: center;
  background: var(--escuro);
}
.cta-final .bg {
  position: absolute;
  top: -12%; left: 0; right: 0; bottom: -12%;
  overflow: hidden;
  will-change: transform;
}
.cta-final .bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
.cta-final .container { position: relative; z-index: 1; }
.cta-final h2 { color: var(--branco); }
.cta-final p { color: var(--greige); max-width: 56ch; margin-left: auto; margin-right: auto; }
.cta-final .btn { margin-top: 14px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--escuro); color: var(--greige); padding: 100px 0 40px; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-logo { font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.24em; color: var(--branco); }
.footer-logo span { color: var(--dourado-claro); }
.site-footer h4 { font-family: var(--sans); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--branco); margin-bottom: 16px; }
.site-footer a:hover { color: var(--branco); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; font-size: 0.92rem; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.82rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

/* ---------- Botão flutuante WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  padding: 14px 22px 14px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.4);
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
}
.wa-float:hover { transform: translateY(-3px) scale(1.02); }
/* Escondido quando um CTA de WhatsApp do conteúdo está visível na tela. */
.wa-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
}
.wa-float .wa-ico { width: 24px; height: 24px; fill: #fff; }
.wa-float .label { white-space: nowrap; }

/* ---------- Scroll reveal ----------
   Estado inicial oculto (GSAP anima opacity/transform via fromTo).
   Sem JS: nada fica oculto. Sem GSAP / reduced-motion: forçado visível pelo JS/CSS. */
.reveal { opacity: 0; transform: translateY(24px); }
.no-js .reveal,
.reveal.is-in { opacity: 1; transform: none; }
/* Transição leve só no caminho de fallback (sem GSAP) */
.reveal.is-in { transition: opacity 0.8s ease, transform 0.8s ease; }

/* ---------- prefers-reduced-motion: tudo estático e visível ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 980px) {
  .hero { min-height: clamp(560px, 88vh, 800px); }
  .split, .quem-grid, .primeira-layout, .local-card { grid-template-columns: 1fr; }
  /* Mobile: empilha na ordem do DOM (Onde estamos > Mapa > Texto). Reseta os
     grid-area nomeados do desktop, senão o mapa fica sobreposto ao texto. */
  .local-card { grid-template-areas: none; grid-template-rows: none; }
  .local-card .local-head,
  .local-card .map-embed,
  .local-card .local-info { grid-area: auto; }
  .local-card .map-embed { min-height: 300px; }
  .split.reverse .split-media { order: 0; }
  .servicos-grid, .reviews-grid, .exp-points { grid-template-columns: repeat(2, 1fr); }
  .complementos { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  /* Mobile: a foto sobe pra logo abaixo de "Sem atrito", antes dos passos. */
  .primeira-media { position: static; aspect-ratio: 16 / 11; order: -1; margin-bottom: 8px; }
  .bio-block { grid-template-columns: 1fr; }
  .bio-block video { max-width: 240px; margin: 0 auto; }
  .quem-fotos .secundaria { right: 12px; bottom: -24px; }
}

/* Hero no mobile: mesma coluna única centralizada do desktop, só com a headline
   menor pra cada linha caber sem estourar. */
@media (max-width: 820px) {
  .hero {
    min-height: auto;
    padding-bottom: clamp(64px, 12vw, 96px);
  }
  .hero-text { max-width: 100%; }
  .hero-headline { font-size: clamp(1.5rem, 7vw, 1.95rem); }
  .hero-text .lead { max-width: 38ch; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-links, .header-cta { display: none; }
  .header-inner { height: 64px; justify-content: center; }
  .logo { padding-left: 0; }
  .hero { padding-top: 120px; }
  .hero-text .lead { max-width: calc(100vw - 44px); overflow-wrap: break-word; }
  .servicos-grid, .reviews-grid, .exp-points { grid-template-columns: 1fr; }
  .exp-points li { min-height: 0; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(244,242,238,0.92); }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .wa-float .label { display: none; }
  .wa-float { padding: 16px; }
  .galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .galeria .wide { grid-column: span 2; }
}

/* =========================================================
   FUNDO CINEMATOGRÁFICO EM CENAS
   Camada fixa com 3 fotos do espaço + scrim (véu) animado.
   O conteúdo das seções rola por cima, em fundo transparente.
   ========================================================= */

/* Camada fixa atrás de tudo. pointer-events:none para nunca bloquear cliques. */
.scene-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.scene {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: opacity;
  backface-visibility: hidden;
}
/* Camada de baixo: foto travada do ato atual. Inicia com a recepção (Ato 1) e
   é o estado estático visível no fallback sem JS. */
.scene-back { background-image: url("assets/fotos-espaco/lepolli-recepcao-ampla-itu.webp"); opacity: 1; }
/* Camada de cima: buffer de crossfade, fica invisível entre as trocas. */
.scene-front { opacity: 0; }
/* Scrim: marrom da marca constante (tema escuro único, sem clarear no scroll). */
.scene-scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(63, 53, 48, 0.85);
  will-change: background-color;
}

/* Reenquadramento no mobile: como a foto da recepção é retrato e o cover não
   recorta na vertical em telas estreitas, o teto/luzes apareciam no topo. Um
   leve zoom ancorado em 50% 72% empurra o teto para fora e centraliza a parte
   nobre (logo "LP", prateleira de esmaltes e balcão escultural). Vale para
   todas as cenas (todas são fotos do espaço), mantendo o crossfade alinhado. */
@media (max-width: 820px) {
  .scene {
    transform: scale(1.32);
    transform-origin: 50% 72%;
  }
}

/* As seções de conteúdo ficam transparentes para revelar a camada de cenas.
   Hero, CTA final e footer mantêm os próprios fundos (preservados). */
.prova,
.servicos,
.experiencia,
.quem-sou,
.primeira,
.local { background: transparent; }

/* Fallback (sem JS/GSAP): a Prova social recebe a cena 1 já escurecida via ::before,
   garantindo legibilidade do texto claro. No modo com cenas (.scenes-on) este
   ::before é desligado e o scrim animado da camada fixa assume. */
.prova { position: relative; }
.prova::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(63, 53, 48, 0.86), rgba(63, 53, 48, 0.86)),
    url("assets/fotos-espaco/lepolli-recepcao-ampla-itu.webp") center / cover;
}
.scenes-on .prova::before { display: none; }
/* prova transparente no modo cenas: revela a scene-bg fixa + scrim (sem retangulo opaco que cria a emenda) */
.scenes-on .prova { background: transparent; }

/* Método sem fundo próprio: deixa de ser uma ilha clara com foto fixa e passa a
   revelar a mesma cena escura contínua (um fundo só com a prova acima e a
   primeira visita abaixo). Texto claro, igual à prova. */
.scenes-on .metodo { background: transparent; }
.scenes-on .metodo::before,
.scenes-on .metodo::after { display: none; }
.scenes-on .metodo-statement .eyebrow { color: var(--taupe); text-shadow: 0 1px 12px rgba(0,0,0,0.4); }
.scenes-on .metodo-statement h2 { color: var(--branco); text-shadow: 0 1px 16px rgba(0,0,0,0.45); }
.scenes-on .metodo-statement p { color: var(--greige); text-shadow: 0 1px 12px rgba(0,0,0,0.45); }

/* ====== Tema escuro único ======
   O fundo é o mesmo blur escuro do hero no site inteiro. O texto que fica DIRETO
   sobre o fundo (intros, títulos, leads, timeline) vira claro; os cards/painéis
   continuam claros (alto contraste, texto escuro legível dentro deles). */
.servicos .section-intro h2,
.experiencia .exp-statement h2,
.quem-sou h2,
.primeira .section-intro h2 {
  color: var(--branco);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}
.servicos .section-intro .lead,
.experiencia .exp-statement .lead,
.primeira .section-intro .lead,
.quem-sou p {
  color: var(--greige);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.servicos .section-intro .eyebrow,
.experiencia .exp-statement .eyebrow,
.quem-sou .eyebrow,
.primeira .section-intro .eyebrow {
  color: var(--taupe);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.quem-sou .assinatura { color: var(--dourado); }
.timeline h4 { color: var(--branco); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }
.timeline p { color: var(--greige); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.timeline::before { background: rgba(244, 242, 238, 0.18); }

/* Painéis translúcidos sobre as cenas claras (só no modo animado, para
   preservar o fallback sólido). Vidro discreto deixa a foto respirar atrás
   dos cards mantendo o texto escuro legível. */
.scenes-on .pilar {
  background: rgba(244, 242, 238, 0.74);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.scenes-on .servico-card {
  background: rgba(244, 242, 238, 0.80);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  border-color: rgba(255, 255, 255, 0.55);
}
.scenes-on .complemento {
  background: rgba(244, 242, 238, 0.64);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.scenes-on .qual-list li {
  background: rgba(244, 242, 238, 0.76);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.scenes-on .bio-block {
  background: rgba(244, 242, 238, 0.80);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.scenes-on .aviso-exemplo { background: rgba(230, 226, 216, 0.72); }
.scenes-on .servico-card .meta span { background: rgba(230, 226, 216, 0.82); }
.scenes-on .timeline .step-num { background: rgba(244, 242, 238, 0.88); }

/* Texto "solto" (sem card) que cai no vale escuro de um ato ganha painel
   translúcido claro, para manter o texto escuro legível (AA) quando o scrim
   estiver no marrom. Vale para a 2a seção de cada ato (Método, Experiência,
   Para quem é, Localização). */
.scenes-on .metodo .split > .reveal:first-child,
.scenes-on .experiencia .exp-layout > .reveal:first-child,
.scenes-on .para-quem .section-intro,
.scenes-on .para-quem .nota,
.scenes-on .local .local-card {
  background: rgba(244, 242, 238, 0.82);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: var(--sombra-card);
}

/* No mobile: position:fixed funciona, mas backdrop-filter é pesado.
   Removemos o blur e subimos a opacidade dos painéis para manter contraste. */
@media (max-width: 720px) {
  .scenes-on .pilar,
  .scenes-on .servico-card,
  .scenes-on .complemento,
  .scenes-on .qual-list li,
  .scenes-on .bio-block,
  .scenes-on .metodo .split > .reveal:first-child,
  .scenes-on .experiencia .exp-layout > .reveal:first-child,
  .scenes-on .para-quem .section-intro,
  .scenes-on .para-quem .nota,
  .scenes-on .local .local-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .scenes-on .pilar { background: rgba(244, 242, 238, 0.93); }
  .scenes-on .servico-card { background: rgba(244, 242, 238, 0.95); }
  .scenes-on .complemento { background: rgba(244, 242, 238, 0.92); }
  .scenes-on .qual-list li { background: rgba(244, 242, 238, 0.93); }
  .scenes-on .bio-block { background: rgba(244, 242, 238, 0.95); }
  .scenes-on .metodo .split > .reveal:first-child,
  .scenes-on .experiencia .exp-layout > .reveal:first-child,
  .scenes-on .para-quem .section-intro,
  .scenes-on .para-quem .nota,
  .scenes-on .local .local-card { background: rgba(244, 242, 238, 0.95); }
}

/* Reduced-motion: a classe .scenes-on não é adicionada, então valem o fallback
   estático (cena 2 clara no geral, cena 1 escura na Prova social via ::before)
   e os cards sólidos originais. A camada de cenas continua visível, sem animação. */
@media (prefers-reduced-motion: reduce) {
  .scene { transition: none !important; }
}