/* ==========================================================================
   POUSA FILMS — BIBLIOTECA DE COMPONENTES
   Depende de tokens.css. Prefixo `pf-`.
   Camadas: reset → base → layout → tipografia → mídia → componentes →
            utilitários → motion.
   ========================================================================== */

/* ==========================================================================
   1. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background-color: var(--sup-fundo);
  color: var(--sup-texto);
  font-family: var(--fonte-texto);
  font-size: var(--ts-corpo);
  line-height: var(--lh-corpo);
  font-weight: var(--peso-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

img, video, svg, picture, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

:where(a) { color: inherit; }

/* Foco visível — nunca remover. Anel na cor da superfície corrente. */
:focus-visible {
  outline: var(--foco-largura) solid var(--sup-foco);
  outline-offset: var(--foco-offset);
  border-radius: var(--r-1);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--pf-oliva); color: var(--pf-noite); }

/* Pular para o conteúdo */
.pf-pular {
  position: absolute;
  left: var(--e-4);
  top: var(--e-4);
  z-index: var(--z-modal);
  padding: var(--e-3) var(--e-5);
  background: var(--pf-bosque);
  color: var(--pf-papel);
  font-size: var(--ts-rotulo);
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--dur-rapida) var(--ease-suave);
}
.pf-pular:focus { transform: translateY(0); }

/* ==========================================================================
   2. SUPERFÍCIES E GRÃO
   Toda seção herda cor pelo token semântico. O grão é assinatura da marca
   e é aplicado por pseudo-elemento — nunca por imagem extra no HTML.
   ========================================================================== */
.pf-sup {
  position: relative;
  background-color: var(--sup-fundo);
  color: var(--sup-texto);
  isolation: isolate;
}

.pf-grao { position: relative; isolation: isolate; }
.pf-grao::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grao);
  background-size: 240px 240px;
  opacity: var(--grao-opacidade);
  mix-blend-mode: var(--sup-grao-mix, overlay);
  pointer-events: none;
  z-index: 2;
}
.pf-grao--forte::after { opacity: var(--grao-opacidade-forte); }
.pf-grao--sutil::after { opacity: 0.22; }

/* Marca d'água: grafismo de asa no canto da seção */
.pf-marca-dagua {
  position: absolute;
  pointer-events: none;
  opacity: 0.07;
  width: clamp(220px, 34vw, 620px);
  z-index: 0;
}
.pf-marca-dagua--dir { right: -6%; top: -8%; }
.pf-marca-dagua--esq { left: -8%; bottom: -10%; transform: rotate(180deg); }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
/* overflow-x:clip contém o sangramento de .pf-marca-dagua (right/left
   negativos) na borda da seção, sem isso qualquer página com a marca
   d'água ganha rolagem horizontal no documento inteiro. */
.pf-secao { padding-block: var(--secao-y); position: relative; overflow-x: clip; }
.pf-secao--ampla { padding-block: var(--secao-y-ampla); }
.pf-secao--topo { padding-block-start: var(--secao-y); padding-block-end: 0; }

.pf-container {
  width: 100%;
  max-width: calc(var(--largura-conteudo) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}
.pf-container--largo { max-width: calc(var(--largura-max) + var(--gutter) * 2); }
.pf-container--estreito { max-width: calc(var(--largura-estreita) + var(--gutter) * 2); }
.pf-container--sangria { max-width: 100%; padding-inline: 0; }

.pf-grade {
  display: grid;
  grid-template-columns: repeat(var(--grade-colunas), minmax(0, 1fr));
  gap: var(--grade-gap);
}
/* Itens de grid não encolhem abaixo do min-content por padrão — o que faz
   tabelas, <pre> e palavras longas estourarem a largura no mobile. */
.pf-grade > *, .pf-dupla > *, .pf-grade-editorial > * { min-width: 0; }

.pf-pilha { display: flex; flex-direction: column; gap: var(--e-5); }
.pf-pilha--curta { gap: var(--e-3); }
.pf-pilha--longa { gap: var(--e-7); }

.pf-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
}
.pf-linha--entre { justify-content: space-between; }

/* Dupla editorial: texto + mídia, com desalinhamento proposital */
.pf-dupla {
  display: grid;
  gap: clamp(var(--e-6), 5vw, var(--e-9));
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .pf-dupla { grid-template-columns: 1fr 1fr; }
  .pf-dupla--texto-menor { grid-template-columns: 5fr 7fr; }
  .pf-dupla--midia-menor { grid-template-columns: 7fr 5fr; }
  .pf-dupla--deslocada > :first-child { transform: translateY(-2.5rem); }
  .pf-dupla--inverte > :first-child { order: 2; }
}

/* ==========================================================================
   4. TIPOGRAFIA
   ========================================================================== */
.pf-display-1, .pf-display-2, .pf-display-3, .pf-display-4 {
  font-family: var(--fonte-display);
  font-weight: var(--peso-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--sup-texto);
  text-wrap: balance;
}
.pf-display-1 { font-size: var(--ts-display-1); }
.pf-display-2 { font-size: var(--ts-display-2); }
.pf-display-3 { font-size: var(--ts-display-3); line-height: 1.06; }
.pf-display-4 { font-size: var(--ts-display-4); line-height: 1.12; }

/* Palavra em itálico dentro do título — recurso editorial da marca.
   Uso: <h2 class="pf-display-2">Onde o amor <em>permanece</em></h2> */
.pf-display-1 em, .pf-display-2 em, .pf-display-3 em, .pf-display-4 em,
.pf-enfase {
  font-style: italic;
  font-weight: var(--peso-medio);
  color: var(--sup-realce);
}

.pf-titulo {
  font-family: var(--fonte-texto);
  font-size: var(--ts-titulo);
  font-weight: var(--peso-medio);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tr-titulo);
}
.pf-titulo--serif { font-family: var(--fonte-display); font-weight: var(--peso-regular); }

.pf-subtitulo {
  font-size: var(--ts-subtitulo);
  color: var(--sup-texto-medio);
  line-height: 1.55;
}

.pf-texto { max-width: var(--medida-texto); color: var(--sup-texto-medio); }
.pf-texto--grande { font-size: var(--ts-corpo-g); line-height: 1.6; }
.pf-texto--pequeno { font-size: var(--ts-corpo-p); }
.pf-texto--curto { max-width: var(--medida-texto-curta); }
.pf-texto--suave { color: var(--sup-texto-suave); }

.pf-legenda {
  font-size: var(--ts-legenda);
  line-height: var(--lh-compacto);
  color: var(--sup-texto-suave);
}

/* Rótulo / eyebrow — a etiqueta de caixa alta espaçada das referências */
.pf-rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--ts-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--sup-texto-suave);
  line-height: 1;
}
.pf-rotulo::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--estrela) center / contain no-repeat;
  mask: var(--estrela) center / contain no-repeat;
}
.pf-rotulo--traco::before {
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  -webkit-mask: none;
  mask: none;
}
.pf-rotulo--limpo::before { display: none; }

/* Numeração editorial 01 / 02 / 03 */
.pf-numero {
  font-family: var(--fonte-display);
  font-size: var(--ts-display-4);
  line-height: 1;
  color: var(--sup-realce);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Citação / manifesto */
.pf-citacao {
  font-family: var(--fonte-display);
  font-size: var(--ts-display-4);
  line-height: 1.3;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--sup-texto);
  max-width: 24ch;
}
.pf-citacao--larga { max-width: 34ch; }

.pf-assinatura {
  font-family: var(--fonte-display);
  font-style: italic;
  font-size: var(--ts-subtitulo);
  color: var(--sup-texto-suave);
}

/* Etiqueta vertical lateral (ref. "WELCOME" / "SERVICES") */
.pf-etiqueta-vertical {
  position: absolute;
  left: 0;
  top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-size: var(--ts-rotulo);
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--sup-texto-suave);
  display: flex;
  align-items: center;
  gap: var(--e-4);
}
.pf-etiqueta-vertical::after {
  content: "";
  width: 1px;
  height: clamp(3rem, 8vw, 6rem);
  background: currentColor;
  opacity: 0.5;
}

/* Régua com símbolo ao centro */
.pf-regua {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  color: var(--sup-borda);
}
.pf-regua::before, .pf-regua::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.pf-regua__marca {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  background: var(--sup-realce);
  -webkit-mask: var(--estrela) center / contain no-repeat;
  mask: var(--estrela) center / contain no-repeat;
}

.pf-hairline { height: 1px; background: var(--sup-borda); border: 0; }

/* ==========================================================================
   5. BOTÕES E LINKS
   ========================================================================== */
.pf-btn {
  --btn-fundo: transparent;
  --btn-texto: var(--sup-texto);
  --btn-borda: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: var(--alvo-minimo);
  padding: var(--e-3) var(--e-6);
  background: var(--btn-fundo);
  color: var(--btn-texto);
  border: var(--borda-fina) solid var(--btn-borda);
  border-radius: var(--r-0);
  font-size: var(--ts-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tr-botao);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    color var(--dur-rapida) var(--ease-suave),
    border-color var(--dur-rapida) var(--ease-suave),
    background-color var(--dur-rapida) var(--ease-suave);
}
/* Preenchimento que sobe — cadência de cortina, não de "botão de app" */
.pf-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn-preenche, var(--sup-acento));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-media) var(--ease-suave);
  z-index: 0;
}
.pf-btn > * { position: relative; z-index: 1; }
.pf-btn:hover::before, .pf-btn:focus-visible::before { transform: scaleY(1); }

.pf-btn--primario {
  --btn-fundo: var(--sup-acento);
  --btn-texto: var(--sup-acento-texto);
  --btn-borda: var(--sup-acento);
  --btn-preenche: var(--sup-acento-hover);
}
.pf-btn--contorno {
  --btn-fundo: transparent;
  --btn-texto: var(--sup-texto);
  --btn-borda: var(--sup-borda-forte);
  --btn-preenche: var(--sup-acento);
}
.pf-btn--contorno:hover, .pf-btn--contorno:focus-visible {
  color: var(--sup-acento-texto);
  border-color: var(--sup-acento);
}
.pf-btn--fantasma {
  --btn-borda: transparent;
  --btn-preenche: var(--sup-fundo-suave);
  padding-inline: var(--e-4);
}
.pf-btn--fantasma:hover { color: var(--sup-texto); }

.pf-btn--grande { padding: var(--e-4) var(--e-7); font-size: 0.75rem; }
.pf-btn--pequeno { min-height: 36px; padding: var(--e-2) var(--e-4); }
.pf-btn--bloco { display: flex; width: 100%; }
.pf-btn[disabled], .pf-btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Link com seta — o CTA discreto e mais usado do site */
.pf-link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--ts-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tr-botao);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sup-texto);
  padding-block: var(--e-2);
  position: relative;
}
.pf-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-media) var(--ease-suave);
}
.pf-link:hover::after, .pf-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.pf-link__seta {
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width var(--dur-media) var(--ease-suave);
}
.pf-link__seta::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.pf-link:hover .pf-link__seta { width: 2.25rem; }

/* Link inline dentro de texto corrido */
.pf-texto a:not([class]) {
  color: var(--sup-texto);
  text-decoration: underline;
  text-decoration-color: var(--sup-realce);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-rapida) var(--ease-suave);
}
.pf-texto a:not([class]):hover { text-decoration-color: currentColor; }

/* ==========================================================================
   6. MÍDIA
   ========================================================================== */
.pf-media {
  position: relative;
  overflow: hidden;
  background: var(--sup-fundo-suave);
  isolation: isolate;
}
.pf-media > img,
.pf-media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Grão sobre a foto — obrigatório pelo manual */
.pf-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grao);
  background-size: 200px 200px;
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.pf-media--sem-grao::after { display: none; }

/* Proporções */
.pf-media--cine { aspect-ratio: 2.39 / 1; }   /* teaser, hero de filme */
.pf-media--16x9 { aspect-ratio: 16 / 9; }     /* player padrão */
.pf-media--retrato { aspect-ratio: 4 / 5; }   /* feed, casais */
.pf-media--vertical { aspect-ratio: 9 / 16; } /* reels, stories */
.pf-media--quadrado { aspect-ratio: 1 / 1; }
.pf-media--alto { aspect-ratio: 3 / 4; }

/* Formas assinatura */
.pf-media--arco { border-radius: var(--r-arco); }
.pf-media--petala { border-radius: var(--r-petala); }

/* Zoom lento no hover — cinema, não e-commerce */
.pf-media--zoom > img,
.pf-media--zoom > video { transition: transform var(--dur-cine) var(--ease-suave); }
.pf-media--zoom:hover > img,
.pf-media--zoom:hover > video { transform: scale(1.045); }

/* Véu escuro para texto sobre imagem */
.pf-media--veu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(17, 18, 12, 0.78) 0%,
    rgba(17, 18, 12, 0.35) 42%,
    rgba(17, 18, 12, 0.08) 100%
  );
}

.pf-figura { display: flex; flex-direction: column; gap: var(--e-3); }
.pf-figura figcaption,
.pf-figura .pf-legenda {
  display: flex;
  gap: var(--e-3);
  align-items: baseline;
  font-size: var(--ts-legenda);
  color: var(--sup-texto-suave);
}
.pf-figura figcaption::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  flex: none;
  transform: translateY(-0.3em);
}

/* Grade editorial assimétrica — o gesto de layout mais forte da marca */
.pf-grade-editorial {
  display: grid;
  gap: var(--grade-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}
.pf-grade-editorial > * { grid-column: span 12; }
@media (min-width: 760px) {
  .pf-grade-editorial > .pf-ge-a { grid-column: 1 / span 7; }
  .pf-grade-editorial > .pf-ge-b { grid-column: 8 / span 5; transform: translateY(clamp(2rem, 6vw, 5rem)); }
  .pf-grade-editorial > .pf-ge-c { grid-column: 3 / span 5; transform: translateY(clamp(-1rem, -2vw, 0rem)); }
  .pf-grade-editorial > .pf-ge-d { grid-column: 8 / span 4; }
}

/* Botão de play sobre vídeo */
.pf-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--pf-papel);
}
.pf-play__disco {
  width: clamp(72px, 9vw, 108px);
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  background: rgba(17, 18, 12, 0.22);
  transition: transform var(--dur-media) var(--ease-suave),
              background-color var(--dur-media) var(--ease-suave);
}
.pf-play:hover .pf-play__disco,
.pf-play:focus-visible .pf-play__disco {
  transform: scale(1.08);
  background: rgba(229, 220, 177, 0.22);
}
.pf-play__disco::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 4px;
  border-left: 14px solid currentColor;
  border-block: 9px solid transparent;
}

/* ==========================================================================
   7. CABEÇALHO E NAVEGAÇÃO
   ========================================================================== */
.pf-cabecalho {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-cabecalho);
  padding-block: var(--e-5);
  color: var(--pf-papel);
  transition:
    transform var(--dur-media) var(--ease-suave),
    background-color var(--dur-media) var(--ease-suave),
    padding var(--dur-media) var(--ease-suave),
    color var(--dur-media) var(--ease-suave);
}
.pf-cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-6);
}
/* Estado sólido: aplicado por JS após rolar */
.pf-cabecalho.is-solido {
  background: var(--pf-papel);
  color: var(--pf-tinta);
  padding-block: var(--e-3);
  box-shadow: var(--sombra-1);
}
/* Esconde ao descer, revela ao subir */
.pf-cabecalho.is-oculto { transform: translateY(-102%); }

.pf-cabecalho__logo { display: block; }
.pf-cabecalho__logo img,
.pf-cabecalho__logo svg { height: clamp(28px, 3vw, 38px); width: auto; }

.pf-nav { display: none; }
@media (min-width: 940px) {
  .pf-nav { display: flex; align-items: center; gap: var(--e-6); }
}
.pf-nav__link {
  font-size: var(--ts-rotulo);
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding-block: var(--e-2);
}
.pf-nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-media) var(--ease-suave);
}
.pf-nav__link:hover::after,
.pf-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.pf-hamburguer {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: var(--alvo-minimo);
  height: var(--alvo-minimo);
  padding: var(--e-3);
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 940px) { .pf-hamburguer { display: none; } }
.pf-hamburguer span {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-rapida) var(--ease-suave),
              opacity var(--dur-rapida) var(--ease-suave);
}
.pf-hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.pf-hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pf-hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }

/* Menu em tela cheia (mobile) */
.pf-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--pf-bosque);
  color: var(--pf-papel);
  display: grid;
  align-content: center;
  padding: var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-lenta) var(--ease-cine);
  visibility: hidden;
}
.pf-menu.is-aberto { clip-path: inset(0 0 0 0); visibility: visible; }
.pf-menu__lista { display: flex; flex-direction: column; gap: var(--e-4); }
.pf-menu__link {
  font-family: var(--fonte-display);
  font-size: var(--ts-display-3);
  text-decoration: none;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--dur-media) var(--ease-suave) calc(var(--i, 0) * 60ms),
              transform var(--dur-media) var(--ease-suave) calc(var(--i, 0) * 60ms);
}
.pf-menu.is-aberto .pf-menu__link { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   8. HERO
   ========================================================================== */
.pf-heroi {
  position: relative;
  min-height: clamp(560px, 92svh, 1000px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.pf-heroi__fundo { position: absolute; inset: 0; z-index: -1; }
.pf-heroi__fundo img, .pf-heroi__fundo video {
  width: 100%; height: 100%; object-fit: cover;
}
.pf-heroi__conteudo {
  position: relative;
  padding-block: clamp(var(--e-8), 12vh, var(--e-11));
  color: var(--pf-papel);
  display: grid;
  gap: var(--e-5);
  max-width: 22ch;
}
.pf-heroi__conteudo .pf-texto { color: var(--pf-luz-200); max-width: 44ch; }
.pf-heroi--centro { align-items: center; text-align: center; }
.pf-heroi--centro .pf-heroi__conteudo { max-width: 100%; justify-items: center; }

/* Indicador de rolagem */
.pf-rolar {
  position: absolute;
  bottom: var(--e-6);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: var(--e-3);
  font-size: var(--ts-rotulo);
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--pf-luz-200);
}
.pf-rolar__linha {
  width: 1px;
  height: 3.5rem;
  background: currentColor;
  opacity: 0.35;
  position: relative;
  overflow: hidden;
}
.pf-rolar__linha::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 40%;
  background: var(--pf-luz);
  animation: pf-descer 2.4s var(--ease-cine) infinite;
}
@keyframes pf-descer {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}

/* ==========================================================================
   9. CARTÕES
   ========================================================================== */
/* 9.1 Serviço — "o que fazemos" */
.pf-cartao-servico {
  display: grid;
  gap: var(--e-4);
  padding-block: var(--e-6);
  border-top: var(--borda-fina) solid var(--sup-borda);
  position: relative;
}
.pf-cartao-servico__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
}
.pf-cartao-servico .pf-numero { font-size: var(--ts-subtitulo); opacity: 0.7; }

/* 9.2 Pacote — as 3 propostas (Permanência / Memória Perfeita / Essência) */
.pf-cartao-pacote {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding: var(--e-6);
  background: var(--sup-fundo-alt);
  border: var(--borda-fina) solid var(--sup-borda-suave);
  position: relative;
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave),
              border-color var(--dur-media) var(--ease-suave);
}
.pf-cartao-pacote:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-2);
  border-color: var(--sup-borda);
}
.pf-cartao-pacote--destaque {
  background: var(--pf-bosque);
  border-color: var(--pf-bosque);
  color: var(--pf-papel);
  --sup-texto: var(--pf-papel);
  --sup-texto-medio: var(--pf-luz);
  --sup-texto-suave: var(--pf-oliva-200);
  --sup-borda: var(--pf-bosque-400);
  --sup-borda-suave: var(--pf-bosque-600);
  --sup-acento: var(--pf-luz);
  --sup-acento-texto: var(--pf-bosque);
  --sup-acento-hover: var(--pf-luz-300);
  --sup-realce: var(--pf-luz);
  --sup-borda-forte: var(--pf-luz);
}
.pf-cartao-pacote__selo {
  position: absolute;
  top: 0;
  right: var(--e-6);
  transform: translateY(-50%);
  padding: var(--e-2) var(--e-4);
  background: var(--pf-luz);
  color: var(--pf-bosque);
  font-size: var(--ts-rotulo);
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
}
.pf-cartao-pacote__valor {
  font-family: var(--fonte-display);
  font-size: var(--ts-display-4);
  line-height: 1;
  color: var(--sup-texto);
  font-variant-numeric: lining-nums tabular-nums;
}
.pf-cartao-pacote__valor small {
  display: block;
  font-family: var(--fonte-texto);
  font-size: var(--ts-legenda);
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--sup-texto-suave);
  margin-bottom: var(--e-2);
}
.pf-lista-itens { display: grid; gap: var(--e-3); min-width: 0; }
.pf-lista-itens li {
  min-width: 0;
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  font-size: var(--ts-corpo-p);
  color: var(--sup-texto-medio);
  line-height: 1.5;
}
.pf-lista-itens li::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  margin-top: 0.45em;
  flex: none;
  background: var(--sup-realce);
  -webkit-mask: var(--estrela) center / contain no-repeat;
  mask: var(--estrela) center / contain no-repeat;
}

/* 9.3 Filme / projeto — item de portfólio */
.pf-cartao-filme {
  display: grid;
  gap: var(--e-4);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.pf-cartao-filme .pf-media { transition: clip-path var(--dur-lenta) var(--ease-suave); }
.pf-cartao-filme__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  border-top: var(--borda-fina) solid var(--sup-borda-suave);
  padding-top: var(--e-3);
}
.pf-cartao-filme__titulo {
  font-family: var(--fonte-display);
  font-size: var(--ts-titulo);
  line-height: 1.2;
}
.pf-cartao-filme:hover .pf-cartao-filme__titulo { font-style: italic; }
.pf-cartao-filme:hover img { transform: scale(1.04); }

/* ==========================================================================
   10. FAIXA / MARQUEE
   ========================================================================== */
.pf-faixa {
  overflow: hidden;
  padding-block: var(--e-5);
  border-block: var(--borda-fina) solid var(--sup-borda);
  user-select: none;
}
.pf-faixa__trilho {
  display: flex;
  width: max-content;
  gap: var(--e-6);
  animation: pf-correr var(--faixa-dur, 38s) linear infinite;
}
.pf-faixa:hover .pf-faixa__trilho { animation-play-state: paused; }
.pf-faixa__item {
  display: inline-flex;
  align-items: center;
  gap: var(--e-6);
  font-family: var(--fonte-display);
  font-size: var(--ts-display-4);
  white-space: nowrap;
  color: var(--sup-texto);
}
.pf-faixa__item::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background: var(--sup-realce);
  -webkit-mask: var(--estrela) center / contain no-repeat;
  mask: var(--estrela) center / contain no-repeat;
}
.pf-faixa--rotulo .pf-faixa__item {
  font-family: var(--fonte-texto);
  font-size: var(--ts-rotulo);
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
}
@keyframes pf-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Barra de atalhos colorida (ref: PACOTES | GALERIAS | CONTATO) */
.pf-barra-atalhos {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--pf-veu);
  color: var(--pf-bosque);
  text-align: center;
}
@media (min-width: 720px) {
  .pf-barra-atalhos { grid-template-columns: repeat(3, 1fr); }
}
.pf-barra-atalhos a {
  padding: var(--e-5);
  text-decoration: none;
  font-size: var(--ts-rotulo);
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  border-inline-end: var(--borda-fina) solid rgba(78, 81, 56, 0.28);
  transition: background-color var(--dur-rapida) var(--ease-suave);
}
.pf-barra-atalhos a:last-child { border-inline-end: 0; }
.pf-barra-atalhos a:hover { background: var(--pf-veu-600); }

/* ==========================================================================
   11. DEPOIMENTOS (carrossel)
   ========================================================================== */
.pf-depoimentos { position: relative; }
.pf-depoimentos__palco { overflow: hidden; }
.pf-depoimentos__trilho {
  display: flex;
  transition: transform var(--dur-lenta) var(--ease-cine);
}
.pf-depoimento {
  flex: 0 0 100%;
  display: grid;
  gap: var(--e-5);
  justify-items: center;
  text-align: center;
  padding-inline: var(--e-4);
}
.pf-depoimento__texto {
  font-family: var(--fonte-display);
  font-size: var(--ts-display-4);
  line-height: 1.35;
  font-style: italic;
  max-width: 30ch;
  color: var(--sup-texto);
}
.pf-depoimento__autor {
  font-size: var(--ts-rotulo);
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--sup-texto-suave);
}
.pf-depoimentos__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-5);
  margin-top: var(--e-7);
}
.pf-seta {
  width: var(--alvo-minimo);
  height: var(--alvo-minimo);
  border-radius: var(--r-pill);
  border: var(--borda-fina) solid var(--sup-borda);
  background: transparent;
  color: var(--sup-texto);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease-suave),
              border-color var(--dur-rapida) var(--ease-suave);
}
.pf-seta:hover { background: var(--sup-fundo-suave); border-color: var(--sup-borda-forte); }
.pf-seta::before {
  content: "";
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.pf-seta--ant::before { transform: rotate(-135deg); margin-left: 3px; }
.pf-seta--prox::before { transform: rotate(45deg); margin-right: 3px; }

.pf-pontos { display: flex; gap: var(--e-3); }
.pf-pontos button {
  width: 28px; height: 2px;
  border: 0; padding: 0;
  background: var(--sup-borda);
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease-suave);
}
.pf-pontos button[aria-selected="true"] { background: var(--sup-acento); }

/* ==========================================================================
   12. ACORDEÃO (FAQ)
   ========================================================================== */
.pf-acordeao { border-top: var(--borda-fina) solid var(--sup-borda); }
.pf-acordeao__item { border-bottom: var(--borda-fina) solid var(--sup-borda); }
.pf-acordeao__gatilho {
  width: 100%;
  min-height: var(--alvo-minimo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  padding-block: var(--e-5);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--fonte-display);
  font-size: var(--ts-titulo);
  color: var(--sup-texto);
  transition: color var(--dur-rapida) var(--ease-suave);
}
.pf-acordeao__gatilho:hover { color: var(--sup-realce); }
.pf-acordeao__icone {
  flex: none;
  width: 14px; height: 14px;
  position: relative;
}
.pf-acordeao__icone::before,
.pf-acordeao__icone::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-media) var(--ease-suave);
}
.pf-acordeao__icone::after { transform: rotate(90deg); }
.pf-acordeao__gatilho[aria-expanded="true"] .pf-acordeao__icone::after { transform: rotate(0deg); }
.pf-acordeao__painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-media) var(--ease-suave);
}
.pf-acordeao__painel[data-aberto="true"] { grid-template-rows: 1fr; }
.pf-acordeao__painel > div { overflow: hidden; }
.pf-acordeao__painel .pf-texto { padding-bottom: var(--e-5); }

/* ==========================================================================
   13. FORMULÁRIO
   ========================================================================== */
.pf-form { display: grid; gap: var(--e-5); }
.pf-form__linha { display: grid; gap: var(--e-5); }
@media (min-width: 680px) { .pf-form__linha--2 { grid-template-columns: 1fr 1fr; } }

.pf-campo { display: grid; gap: var(--e-2); }
.pf-campo__rotulo {
  font-size: var(--ts-rotulo);
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--sup-texto-suave);
}
.pf-campo__controle {
  width: 100%;
  min-height: var(--alvo-minimo);
  padding: var(--e-3) 0;
  background: transparent;
  border: 0;
  border-bottom: var(--borda-fina) solid var(--sup-borda);
  color: var(--sup-texto);
  font-size: var(--ts-corpo);
  border-radius: 0;
  transition: border-color var(--dur-rapida) var(--ease-suave);
}
.pf-campo__controle::placeholder { color: var(--sup-texto-suave); opacity: 0.6; }
.pf-campo__controle:hover { border-color: var(--sup-borda-forte); }
.pf-campo__controle:focus { outline: none; border-color: var(--sup-acento); border-bottom-width: var(--borda-media); }
.pf-campo__controle:focus-visible { outline: none; }
.pf-campo:focus-within .pf-campo__rotulo { color: var(--sup-texto-medio); }
textarea.pf-campo__controle { min-height: 8rem; resize: vertical; line-height: var(--lh-corpo); }
select.pf-campo__controle { appearance: none; cursor: pointer; }
.pf-campo--select { position: relative; }
.pf-campo--select::after {
  content: "";
  position: absolute;
  right: 2px; bottom: 1.15rem;
  width: 7px; height: 7px;
  border-bottom: 1px solid var(--sup-texto-suave);
  border-right: 1px solid var(--sup-texto-suave);
  transform: rotate(45deg);
  pointer-events: none;
}
.pf-campo__ajuda { font-size: var(--ts-legenda); color: var(--sup-texto-suave); }
/* A paleta da marca não tem vermelho. O estado de erro é comunicado por
   três sinais redundantes — nunca só por cor (WCAG 1.4.1): filete inferior
   dobrado, marcador circular antes da mensagem e aria-invalid no controle. */
.pf-campo__erro {
  font-size: var(--ts-legenda);
  color: var(--pf-bosque);
  font-weight: var(--peso-medio);
  display: none;
  align-items: center;
  gap: var(--e-2);
}
.pf-campo__erro::before {
  content: "!";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--pf-bosque);
  color: var(--pf-papel);
  font-size: 0.7em;
  line-height: 1;
}
.pf-campo.is-invalido .pf-campo__controle { border-color: var(--pf-bosque); border-bottom-width: var(--borda-media); }
.pf-campo.is-invalido .pf-campo__erro { display: flex; }
.pf-campo.is-valido .pf-campo__controle { border-color: var(--sup-realce); }

/* Grupo de escolha (tipo de evento / pacote) */
.pf-escolhas { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.pf-escolha { position: relative; }
.pf-escolha input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.pf-escolha span {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  padding: var(--e-2) var(--e-5);
  border: var(--borda-fina) solid var(--sup-borda);
  font-size: var(--ts-rotulo);
  letter-spacing: var(--tr-botao);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-rapida) var(--ease-suave);
}
.pf-escolha input:checked + span {
  background: var(--sup-acento);
  color: var(--sup-acento-texto);
  border-color: var(--sup-acento);
}
.pf-escolha input:focus-visible + span {
  outline: var(--foco-largura) solid var(--sup-foco);
  outline-offset: var(--foco-offset);
}

/* ==========================================================================
   14. RODAPÉ
   ========================================================================== */
.pf-rodape { padding-block: var(--secao-y) var(--e-7); overflow-x: clip; }
.pf-rodape__grade {
  display: grid;
  gap: var(--e-8);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .pf-rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; }
}
.pf-rodape__logo img, .pf-rodape__logo svg { width: clamp(140px, 18vw, 200px); }
.pf-rodape__lista { display: grid; gap: var(--e-3); }
.pf-rodape__lista a {
  text-decoration: none;
  font-size: var(--ts-corpo-p);
  color: var(--sup-texto-medio);
  transition: color var(--dur-rapida) var(--ease-suave);
}
.pf-rodape__lista a:hover { color: var(--sup-texto); }
.pf-rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--e-8);
  padding-top: var(--e-5);
  border-top: var(--borda-fina) solid var(--sup-borda);
  font-size: var(--ts-legenda);
  color: var(--sup-texto-suave);
}

/* ==========================================================================
   15. LIGHTBOX
   ========================================================================== */
.pf-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(17, 18, 12, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-media) var(--ease-suave), visibility var(--dur-media);
}
.pf-lightbox.is-aberto { opacity: 1; visibility: visible; }
.pf-lightbox__quadro { width: min(1100px, 100%); }
.pf-lightbox__video {
  width: auto !important;
  max-width: 100%;
  max-height: 86vh;
  margin-inline: auto;
  background: #000;
}
.pf-lightbox__fechar {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  width: var(--alvo-minimo);
  height: var(--alvo-minimo);
  border: var(--borda-fina) solid var(--pf-luz);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--pf-luz);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
}

/* ==========================================================================
   16. UTILITÁRIOS
   ========================================================================== */
.pf-so-leitor {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pf-centro { text-align: center; }
.pf-centro .pf-texto { margin-inline: auto; }
.pf-direita { text-align: right; }
.pf-sem-quebra { white-space: nowrap; }
.pf-maiusculas { text-transform: uppercase; letter-spacing: var(--tr-rotulo); }
.pf-serif { font-family: var(--fonte-display); }
.pf-italico { font-style: italic; }
.pf-relativo { position: relative; }
.pf-oculto { display: none !important; }
@media (max-width: 719px) { .pf-oculto-mobile { display: none !important; } }
@media (min-width: 720px) { .pf-so-mobile { display: none !important; } }

/* ==========================================================================
   17. MOTION — REVELAÇÃO NO SCROLL
   Classes aplicadas via JS (IntersectionObserver). Sem JS, o conteúdo
   permanece visível: a animação é progressiva, nunca condição de leitura.
   ========================================================================== */
[data-revelar] {
  opacity: 1;
}
.js [data-revelar] {
  opacity: 0;
  transform: translateY(var(--reveal-distancia));
  transition:
    opacity var(--dur-lenta) var(--ease-suave) var(--reveal-atraso, 0ms),
    transform var(--dur-lenta) var(--ease-suave) var(--reveal-atraso, 0ms),
    clip-path var(--dur-cine) var(--ease-cine) var(--reveal-atraso, 0ms);
  will-change: opacity, transform;
}
.js [data-revelar].is-visivel {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
/* Variantes */
.js [data-revelar="cortina"] { transform: none; clip-path: inset(0 0 100% 0); }
.js [data-revelar="lateral"] { transform: translateX(calc(var(--reveal-distancia) * -1)); }
.js [data-revelar="escala"] { transform: scale(1.06); opacity: 0; }

/* Revelação de título linha a linha (montada por JS) */
.pf-linha-mascara { display: block; overflow: hidden; }
.pf-linha-mascara > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-cine) var(--ease-suave) var(--reveal-atraso, 0ms);
}
.is-visivel .pf-linha-mascara > span,
.pf-linha-mascara.is-visivel > span { transform: translateY(0); }

/* Parallax suave em mídia (JS define --pf-parallax) */
[data-parallax] > img,
[data-parallax] > video {
  transform: translate3d(0, var(--pf-parallax, 0), 0) scale(1.12);
  will-change: transform;
}

/* Cursor "lente" sobre mídia interativa (apenas ponteiro fino) */
.pf-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  width: 84px; height: 84px;
  border-radius: var(--r-pill);
  border: 1px solid var(--pf-luz);
  background: rgba(229, 220, 177, 0.1);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  font-size: 0.625rem;
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--pf-luz);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: opacity var(--dur-rapida) var(--ease-suave),
              transform var(--dur-media) var(--ease-suave);
}
.pf-cursor.is-ativo { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ==========================================================================
   18. PREFERÊNCIAS DO USUÁRIO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-revelar] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .pf-linha-mascara > span { transform: none !important; }
  .pf-faixa__trilho { animation: none; }
  .pf-cursor { display: none; }
  [data-parallax] > img, [data-parallax] > video { transform: none; }
}

@media print {
  .pf-cabecalho, .pf-menu, .pf-cursor, .pf-rolar, .pf-faixa { display: none !important; }
  .pf-sup { background: #fff !important; color: #000 !important; }
}